[Chore] Upgrade deps 2025-07

package.json

@@ -15,12 +15,12 @@
     "bumpManifestVer": "node ./bin/bumpManifestVer.js"
   },
   "dependencies": {
-    "@deskpro/app-sdk": "^6.0.4",
+    "@deskpro/app-sdk": "^6.0.6",
     "@deskpro/deskpro-ui": "^8.3.1",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@heroicons/react": "1.0.6",
-    "@sentry/react": "^9.22.0",
+    "@sentry/react": "^9.38.0",
     "@sentry/vite-plugin": "^3.5.0",
     "date-fns": "^2.30.0",
     "flatpickr": "^4.6.13",
@@ -33,11 +33,11 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
     "react-resize-observer": "^1.1.1",
-    "react-router-dom": "^6.30.0",
+    "react-router-dom": "^6.30.1",
     "react-time-ago": "^7.3.3",
     "showdown": "^2.1.0",
-    "simplebar": "^6.3.0",
-    "styled-components": "^6.1.15",
+    "simplebar": "^6.3.2",
+    "styled-components": "^6.1.19",
     "tippy.js": "^6.3.7",
     "ts-pattern": "^3.3.5",
     "use-debounce": "^8.0.4",
@@ -47,10 +47,10 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^12.1.5",
     "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.16",
-    "@types/react": "^18.3.20",
+    "@types/lodash": "^4.17.20",
+    "@types/react": "^18.3.23",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "@types/react-dom": "^18.3.6",
+    "@types/react-dom": "^18.3.7",
     "@types/showdown": "^2.0.6",
     "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "5.6.0",
@@ -65,7 +65,7 @@
     "prettier": "^2.8.8",
     "rollup-plugin-copy": "3.4.0",
     "slugify": "^1.6.6",
-    "ts-jest": "^29.3.2",
+    "ts-jest": "^29.4.0",
     "typescript": "^5.8.3",
     "vite": "^6.3.5"
   }

src/components/ViewIssue/Comments.tsx

@@ -6,8 +6,9 @@ import { Avatar, P1, P11, Stack, Button } from "@deskpro/deskpro-ui";
 import { Title } from "../common";
 import { mdToHtml } from "../../utils";
 import { CommentProps } from "./types";
+import { DeskproAppTheme } from "@deskpro/app-sdk";
 
-const TimeAgo = styled(ReactTimeAgo)`
+const TimeAgo = styled(ReactTimeAgo)<DeskproAppTheme>`
     color: ${({ theme }) => theme.colors.grey80};
 `;
 

src/components/common/GithubLink/GithubLink.tsx

@@ -5,7 +5,7 @@ import {
     Stack,
     RoundedLabelTag,
 } from "@deskpro/deskpro-ui";
-import { useDeskproAppTheme } from "@deskpro/app-sdk";
+import { DeskproAppTheme, useDeskproAppTheme } from "@deskpro/app-sdk";
 import { GithubLogo } from "./GithubLogo";
 import { Props } from "./types";
 
@@ -14,7 +14,7 @@ const Container = styled(Stack)`
   padding: 2px;
 `;
 
-const Link = styled.a`
+const Link = styled.a<DeskproAppTheme>`
     :hover {
       border-color: ${({ theme }) => (theme.colors.brandShade60)};
     };

src/components/common/Link/Link.tsx

@@ -1,6 +1,7 @@
+import { DeskproAppTheme } from "@deskpro/app-sdk";
 import styled from "styled-components";
 
-const Link = styled.a`
+const Link = styled.a<DeskproAppTheme>`
     color: ${({ theme, color = theme.colors.grey40 }) => color};
 `;
 

src/components/common/TextArea/TextArea.tsx

@@ -4,10 +4,11 @@ import {
     TextAreaWithDisplay,
     TextAreaWithDisplayProps,
 } from "@deskpro/deskpro-ui";
+import { DeskproAppTheme } from "@deskpro/app-sdk";
 
 type Props = TextAreaWithDisplayProps & {
     minHeight?: number | string | "auto",
-};
+} & DeskproAppTheme;
 
 const TextArea = styled(
     forwardRef(({ minHeight, ...props }: Props, ref: Ref<HTMLTextAreaElement>) =>

src/components/common/TwoSider/TwoSider.tsx

@@ -2,6 +2,7 @@ import { FC } from "react";
 import styled from "styled-components";
 import { TextBlockWithLabel } from "../TextBlockWithLabel";
 import { Props as TextBlockWithLabelProps } from "../TextBlockWithLabel/types";
+import { DeskproAppTheme } from "@deskpro/app-sdk";
 
 export type Props = {
     leftLabel?: TextBlockWithLabelProps["label"],
@@ -20,7 +21,7 @@ const Side = styled.div`
     width: calc(49% - 6px);
 `;
 
-const Divider = styled.div`
+const Divider = styled.div<DeskproAppTheme>`
     width: 1px;
     margin: 0 6px;
     background-color: ${({ theme }) => theme.colors.grey20};