@canonical/react-ds-core 0.9.0-experimental.5 → 0.9.0

package/dist/types/ui/hooks/usePopup/types.d.ts

@@ -0,0 +1,65 @@
+import type { CSSProperties, FocusEventHandler, PointerEventHandler, RefObject } from "react";
+import type { UseDelayedToggleProps } from "../useDelayedToggle/index.js";
+import type { UseWindowFitmentProps, UseWindowFitmentResult } from "../useWindowFitment/index.js";
+export interface UsePopupProps extends UseWindowFitmentProps, UseDelayedToggleProps {
+    /** A callback to be called when the target element is focused. */
+    onFocus?: FocusEventHandler;
+    /** A callback to be called when the target element loses focus. */
+    onBlur?: FocusEventHandler;
+    /** A callback to be called when the mouse enters the target element. */
+    onEnter?: PointerEventHandler;
+    /** A callback to be called when the mouse leaves the target */
+    onLeave?: PointerEventHandler;
+    /** A callback to be called when the popup is shown. */
+    onShow?: (event?: Event) => void;
+    /** A callback to be called when the popup is hidden. */
+    onHide?: (event?: Event) => void;
+    /** Whether the popup should close when the escape key is pressed. Defaults to true. */
+    closeOnEscape?: boolean;
+}
+export type DisableableElement = HTMLElement & {
+    disabled: boolean;
+};
+export interface UsePopupResult extends UseWindowFitmentResult {
+    /**
+     * A ref to be attached to the target element.
+     */
+    targetRef: RefObject<HTMLDivElement | null>;
+    /**
+     * A ref to be attached to the popup element.
+     */
+    popupRef: RefObject<HTMLDivElement | null>;
+    /**
+     * The style object to be applied to the popup element.
+     */
+    popupPositionStyle: CSSProperties;
+    /**
+     * A unique ID for the popup element. This can be used to associate a trigger with a popup, using `aria-describedby`.
+     */
+    popupId: string;
+    /**
+     * Whether the popup is currently open.
+     */
+    isOpen: boolean;
+    /**
+     * Whether the target element is currently focused.
+     */
+    isFocused: boolean;
+    /**
+     * Event handler for when the target element is focused.
+     */
+    handleTriggerFocus: FocusEventHandler;
+    /**
+     * Event handler for when the target element loses focus.
+     */
+    handleTriggerBlur: FocusEventHandler;
+    /**
+     * Event handler for when the mouse enters the target element.
+     */
+    handleTriggerEnter: PointerEventHandler;
+    /**
+     * Event handler for when the mouse leaves the target element.
+     */
+    handleTriggerLeave: PointerEventHandler;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/hooks/usePopup/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,WAAW,aACf,SAAQ,qBAAqB,EAC3B,qBAAqB;IACvB,kEAAkE;IAClE,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,mEAAmE;IACnE,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,wEAAwE;IACxE,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,sBAAsB;IAC5D;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3C;;OAEG;IACH,kBAAkB,EAAE,aAAa,CAAC;IAClC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,kBAAkB,EAAE,iBAAiB,CAAC;IACtC;;OAEG;IACH,iBAAiB,EAAE,iBAAiB,CAAC;IACrC;;OAEG;IACH,kBAAkB,EAAE,mBAAmB,CAAC;IACxC;;OAEG;IACH,kBAAkB,EAAE,mBAAmB,CAAC;CACzC"}

package/dist/types/ui/hooks/usePopup/usePopup.d.ts

@@ -0,0 +1,19 @@
+import type { UsePopupProps, UsePopupResult } from "./types.js";
+/**
+ * Manages the state of a popup.
+ * @param isOpen An override for the open state.
+ * @param deactivateDelay The delay in milliseconds before setting the flag to false.
+ * @param activateDelay The delay in milliseconds before setting the flag to true.
+ * @param onEnter A callback to be called when the mouse enters the target element.
+ * @param onLeave A callback to be called when the mouse leaves the target element.
+ * @param onFocus A callback to be called when the target element is focused.
+ * @param onBlur A callback to be called when the target element loses focus.
+ * @param onShow A callback to be called when the popup is shown.
+ * @param onHide A callback to be called when the popup is hidden.
+ * @param closeOnEscape Whether the popup should close when the escape key is pressed. Defaults to true.
+ * @param props The props to be passed to the useWindowFitment hook.
+ * @returns The current state of the popup, and event handlers for the target element.
+ */
+declare const usePopup: ({ isOpen: isOpenProp, deactivateDelay, activateDelay, onEnter, onLeave, onFocus, onBlur, onShow, onHide, closeOnEscape, ...props }: UsePopupProps) => UsePopupResult;
+export default usePopup;
+//# sourceMappingURL=usePopup.d.ts.map

package/dist/types/ui/hooks/usePopup/usePopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopup.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/usePopup.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAEV,aAAa,EACb,cAAc,EACf,MAAM,YAAY,CAAC;AAEpB;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,QAAQ,GAAI,oIAYf,aAAa,KAAG,cA4FlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/types/ui/hooks/useResizeObserver/index.d.ts

@@ -0,0 +1,3 @@
+export { default as useResizeObserver } from "./useResizeObserver.js";
+export * from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/hooks/useResizeObserver/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useResizeObserver/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,cAAc,YAAY,CAAC"}

package/dist/types/ui/hooks/useResizeObserver/types.d.ts

@@ -0,0 +1,7 @@
+export interface UseResizeObserverResult {
+    /** The width of the observed element */
+    width: number;
+    /** The height of the observed element */
+    height: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/hooks/useResizeObserver/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useResizeObserver/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,MAAM,EAAE,MAAM,CAAC;CAChB"}

package/dist/types/ui/hooks/useResizeObserver/useResizeObserver.d.ts

@@ -0,0 +1,8 @@
+import type { UseResizeObserverResult } from "./types.js";
+/**
+ * Hook to observe the size of an element.
+ * @param element The element to observe.
+ * @returns The size of the element.
+ */
+export default function useResizeObserver<TElement extends HTMLElement>(element?: TElement | null): UseResizeObserverResult;
+//# sourceMappingURL=useResizeObserver.d.ts.map

package/dist/types/ui/hooks/useResizeObserver/useResizeObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useResizeObserver/useResizeObserver.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,QAAQ,SAAS,WAAW,EACpE,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,GACxB,uBAAuB,CA4BzB"}

package/dist/types/ui/hooks/useWindowDimensions/index.d.ts

@@ -0,0 +1,3 @@
+export { default as useWindowDimensions } from "./useWindowDimensions.js";
+export * from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/hooks/useWindowDimensions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowDimensions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,cAAc,YAAY,CAAC"}

package/dist/types/ui/hooks/useWindowDimensions/types.d.ts

@@ -0,0 +1,21 @@
+export interface UseWindowDimensionProps {
+    /** Delay in milliseconds before the resize event is triggered */
+    resizeDelay?: number;
+    /** Delay in milliseconds before the scroll event is triggered */
+    scrollDelay?: number;
+    /** Callback to be called when the window is resized */
+    onResize?: (dimensions: UseWindowDimensionsResult) => void;
+    /** Callback to be called when the window is scrolled */
+    onScroll?: (dimensions: UseWindowDimensionsResult) => void;
+}
+export interface UseWindowDimensionsResult {
+    /** The width of the window */
+    windowWidth: number;
+    /** The height of the window */
+    windowHeight: number;
+    /** The horizontal scroll position */
+    scrollWidth: number;
+    /** The vertical scroll position */
+    scrollHeight: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/hooks/useWindowDimensions/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowDimensions/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,uBAAuB;IACtC,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC3D,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,yBAAyB,KAAK,IAAI,CAAC;CAC5D;AAED,MAAM,WAAW,yBAAyB;IACxC,8BAA8B;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,YAAY,EAAE,MAAM,CAAC;CACtB"}

package/dist/types/ui/hooks/useWindowDimensions/useWindowDimensions.d.ts

@@ -0,0 +1,6 @@
+import type { UseWindowDimensionProps, UseWindowDimensionsResult } from "./types.js";
+/**
+ * Hook to get the window dimensions and scroll position.
+ */
+export default function useWindowDimensions({ onResize, onScroll, resizeDelay, scrollDelay, }?: UseWindowDimensionProps): UseWindowDimensionsResult;
+//# sourceMappingURL=useWindowDimensions.d.ts.map

package/dist/types/ui/hooks/useWindowDimensions/useWindowDimensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowDimensions.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowDimensions/useWindowDimensions.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,QAAQ,EACR,WAAiB,EACjB,WAAiB,GAClB,GAAE,uBAA4B,GAAG,yBAAyB,CAqD1D"}

package/dist/types/ui/hooks/useWindowFitment/index.d.ts

@@ -0,0 +1,3 @@
+export { default as useWindowFitment } from "./useWindowFitment.js";
+export * from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/hooks/useWindowFitment/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,cAAc,YAAY,CAAC"}

package/dist/types/ui/hooks/useWindowFitment/types.d.ts

@@ -0,0 +1,73 @@
+import type { CSSProperties, RefObject } from "react";
+export interface UseWindowFitmentProps {
+    /**
+     * Whether the popup should automatically fit into the viewport.
+     * If true, the hook will try to fit the popup into the viewport if it doesn't fit in the preferred directions.
+     * Defaults to false.
+     */
+    autoFit?: boolean;
+    /**
+     * An array of preferred directions for the popup.
+     * The hook will try to position the popup in these directions in order.
+     * Defaults to ['top', 'bottom', 'left', 'right'].
+     */
+    preferredDirections?: WindowFitmentDirection[];
+    /**
+     * The distance, in pixels between the target and the popup.
+     * @TODO support non-px units. E.G., someone should be able to request '1em`.
+     */
+    distance?: string;
+    /**
+     * The gutter (padding) around the viewport, preventing the popup from being too close to the edges.
+     * A CSS padding-like string (e.g., '10px', '10px 20px', '10px 20px 30px 40px').
+     * Assumes that each value is in pixels.
+     * @TODO support non-px units and change this to a string. E.G., someone should be able to request '0.5rem 1rem 1rem 0.5rem`.
+     */
+    gutter?: string;
+    /**
+     * The maximum width of the popup content.
+     * Can be a CSS width value (e.g., '300px', '50%').
+     * Defaults to '350px'.
+     */
+    maxWidth?: string;
+    /** How long wait before processing actions called by resize events. Defaults to 150ms. */
+    resizeDelay?: number;
+    /** How long to wait before processing actions called by scroll events Defaults to 150ms. */
+    scrollDelay?: number;
+    /** Whether the popup is open or not. */
+    isOpen?: boolean;
+    /**
+     * An optional callback to be called when the best position of the popup changes.
+     */
+    onBestPositionChange?: (bestPosition?: BestPosition) => void;
+}
+export type WindowFitmentDirection = "top" | "bottom" | "left" | "right";
+export interface UseWindowFitmentResult {
+    /**
+     * A ref to be attached to the target element.
+     */
+    targetRef: RefObject<HTMLDivElement | null>;
+    /**
+     * A ref to be attached to the popup element.
+     */
+    popupRef: RefObject<HTMLDivElement | null>;
+    /**
+     * The calculated best possible position of the popup element.
+     */
+    bestPosition?: BestPosition;
+    /**
+     * The style object to be applied to the popup element.
+     */
+    popupPositionStyle: CSSProperties;
+}
+export type RelativePosition = {
+    top: number;
+    left: number;
+};
+export interface BestPosition {
+    position: RelativePosition;
+    positionName: WindowFitmentDirection;
+    fits: boolean;
+    autoFitOffset: RelativePosition;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/hooks/useWindowFitment/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,0FAA0F;IAC1F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4FAA4F;IAC5F,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9D;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzE,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3C;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;OAEG;IACH,kBAAkB,EAAE,aAAa,CAAC;CAOnC;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,YAAY,EAAE,sBAAsB,CAAC;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,gBAAgB,CAAC;CACjC"}

package/dist/types/ui/hooks/useWindowFitment/useWindowFitment.d.ts

@@ -0,0 +1,4 @@
+import type { UseWindowFitmentProps, UseWindowFitmentResult } from "./types.js";
+declare const useWindowFitment: ({ preferredDirections, distance, gutter, maxWidth, resizeDelay, scrollDelay, onBestPositionChange, autoFit, }: UseWindowFitmentProps) => UseWindowFitmentResult;
+export default useWindowFitment;
+//# sourceMappingURL=useWindowFitment.d.ts.map

package/dist/types/ui/hooks/useWindowFitment/useWindowFitment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowFitment.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/useWindowFitment.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAGV,qBAAqB,EACrB,sBAAsB,EAEvB,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,gBAAgB,GAAI,+GASvB,qBAAqB,KAAG,sBAgR1B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/types/ui/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./Button/index.js";
 export * from "./Chip/index.js";
+export * from "./Tooltip/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-ds-core",
-  "version": "0.9.0-experimental.5",
+  "version": "0.9.0",
   "type": "module",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -22,9 +22,10 @@
   "homepage": "https://github.com/canonical/ds25#readme",
   "scripts": {
     "build": "bun run build:package",
+    "build:all": "bun run build:package && bun run build:storybook",
     "build:storybook": "storybook build",
     "build:package": "bun run build:package:tsc && bun run build:package:copycss",
-    "build:package:copycss": "copyfiles -u 1 src/ui/**/*.css dist/esm",
+    "build:package:copycss": "copyfiles -u 1 'src/ui/{,**/}*.css' dist/esm",
     "build:package:tsc": "tsc -p tsconfig.build.json",
     "check": "bun run check:biome && bun run check:ts",
     "check:fix": "bun run check:biome:fix && bun run check:ts",
@@ -38,33 +39,31 @@
     "test:vitest:watch": "vitest"
   },
   "dependencies": {
-    "@canonical/storybook-config": "^0.9.0-experimental.5",
-    "@canonical/styles": "^0.9.0-experimental.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "@canonical/storybook-config": "^0.9.0",
+    "@canonical/styles": "^0.9.0",
+    "@canonical/utils": "^0.9.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@canonical/biome-config": "^0.9.0-experimental.2",
-    "@canonical/typescript-config-react": "^0.9.0-experimental.2",
-    "@chromatic-com/storybook": "^3.2.2",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/test": "^8.4.7",
+    "@canonical/biome-config": "^0.9.0",
+    "@canonical/typescript-config-react": "^0.9.0",
+    "@chromatic-com/storybook": "^4.0.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@types/node": "^22.10.1",
-    "@types/react": "^19.0.1",
-    "@types/react-dom": "^19.0.2",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.5.2",
     "copyfiles": "^2.4.1",
-    "globals": "^15.13.0",
-    "jsdom": "^25.0.1",
-    "storybook": "^8.4.7",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.3",
+    "globals": "^16.2.0",
+    "jsdom": "^26.1.0",
+    "storybook": "^9.0.8",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^2.1.8"
+    "vitest": "^3.2.3"
   },
-  "gitHead": "bc797d0c134200c372d31a8db89659caba2d6384"
+  "gitHead": "59f31f7d58a1794d36dae3cf99691b6eeb3f4042"
 }