reshaped 3.1.4 → 3.1.6

package/dist/hooks/_private/useSingletonHotkeys.js

@@ -19,7 +19,7 @@ const getEventKey = (e) => {
     if (!e.key)
         return;
     // Having alt pressed modifies e.key value, so relying on e.code for it
-    if (e.altKey && e.key !== "Alt") {
+    if (e.altKey && /^[Key|Digit|Numpad]/.test(e.code)) {
         return e.code.toLowerCase().replace(/key|digit|numpad/, "");
     }
     return e.key.toLowerCase();
@@ -70,17 +70,20 @@ export class HotkeyStore {
         const hotkeyData = this.hotkeyMap[pressedId];
         /**
          * Support for `mod` that represents both Mac and Win keyboards
+         * We create the hotkeyId again to sort the mod key correctly
          */
-        const hotkeyControlModData = pressedFormattedKeys.includes("control") &&
-            this.hotkeyMap[pressedId.replace("control", "mod")];
-        const hotkeyMetaModData = pressedFormattedKeys.includes("meta") && this.hotkeyMap[pressedId.replace("meta", "mod")];
+        const controlToModPressedId = getHotkeyId(pressedId.replace("control", "mod"));
+        const metaToModPressedId = getHotkeyId(pressedId.replace("meta", "mod"));
+        const hotkeyControlModData = pressedFormattedKeys.includes("control") && this.hotkeyMap[controlToModPressedId];
+        const hotkeyMetaModData = pressedFormattedKeys.includes("meta") && this.hotkeyMap[metaToModPressedId];
         [hotkeyData, hotkeyControlModData, hotkeyMetaModData].forEach((hotkeyData) => {
             if (!hotkeyData)
                 return;
             if (hotkeyData?.size) {
                 hotkeyData.forEach((data) => {
+                    const eventTarget = e.composedPath()[0];
                     if (data.ref?.current &&
-                        !(e.target === data.ref.current || data.ref.current.contains(e.target))) {
+                        !(eventTarget === data.ref.current || data.ref.current.contains(eventTarget))) {
                         return;
                     }
                     const resolvedEvent = pressedMap[pressedId];
@@ -146,14 +149,6 @@ export const SingletonHotkeysProvider = (props) => {
             return false;
         return true;
     };
-    const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
-        setHooksCount((prev) => prev + 1);
-        globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
-        return () => {
-            setHooksCount((prev) => prev - 1);
-            globalHotkeyStore.unbindHotkeys(hotkeys);
-        };
-    }, []);
     const handleWindowKeyDown = React.useCallback((e) => {
         // Browsers trigger keyboard event without passing e.key when you click on autocomplete
         if (!e.key)
@@ -166,6 +161,14 @@ export const SingletonHotkeysProvider = (props) => {
             return;
         removePressedKey(e);
     }, [removePressedKey]);
+    const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
+        setHooksCount((prev) => prev + 1);
+        globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
+        return () => {
+            setHooksCount((prev) => prev - 1);
+            globalHotkeyStore.unbindHotkeys(hotkeys);
+        };
+    }, []);
     React.useEffect(() => {
         window.addEventListener("keydown", handleWindowKeyDown);
         window.addEventListener("keyup", handleWindowKeyUp);

package/dist/hooks/tests/useHotkeys.stories.js

@@ -6,10 +6,16 @@ function Example() {
         "shift + b + n": () => console.log("pressed"),
         "c + v": () => console.log(111),
         "Meta + v": () => console.log(222),
+        "control + enter": () => console.log("control + enter"),
+        "meta + enter": () => console.log("meta + enter"),
+        "mod + enter": () => console.log("mod + enter"),
         "mod + ArrowRight": () => console.log("right"),
         "mod + ArrowUp": () => console.log("top"),
         "shift + ArrowRight": () => console.log("right"),
         "shift + ArrowUp": () => console.log("top"),
+        "alt+shift+n": () => console.log("alt+shift+n"),
+        "shift+alt+n": () => console.log("shift+alt+n"),
+        "alt+shiftLeft+n": () => console.log("alt+shiftLeft+n"),
     });
     const active = checkHotkeyState("shift + b + n");
     const shiftActive = checkHotkeyState("shift");

package/dist/index.d.ts

@@ -41,6 +41,8 @@ export { default as FileUpload } from "./components/FileUpload";
 export type { FileUploadProps } from "./components/FileUpload";
 export { default as FormControl } from "./components/FormControl";
 export type { FormControlProps } from "./components/FormControl";
+export { default as Grid } from "./components/Grid";
+export type { GridProps, GridItemProps } from "./components/Grid";
 export { default as Hidden } from "./components/Hidden";
 export type { HiddenProps } from "./components/Hidden";
 export { default as HiddenVisually } from "./components/HiddenVisually";

package/dist/index.js

@@ -21,6 +21,7 @@ export { default as Divider } from "./components/Divider/index.js";
 export { default as DropdownMenu } from "./components/DropdownMenu/index.js";
 export { default as FileUpload } from "./components/FileUpload/index.js";
 export { default as FormControl } from "./components/FormControl/index.js";
+export { default as Grid } from "./components/Grid/index.js";
 export { default as Hidden } from "./components/Hidden/index.js";
 export { default as HiddenVisually } from "./components/HiddenVisually/index.js";
 export { default as Hotkey } from "./components/Hotkey/index.js";

package/dist/styles/align/align.module.css

@@ -0,0 +1 @@
+.--align-start{align-items:flex-start!important}.--align-end{align-items:flex-end!important}.--align-center{align-items:center!important}.--align-stretch{align-items:stretch!important}.--align-baseline{align-items:baseline!important}@media (--rs-viewport-m ){.--align-start--m{align-items:flex-start!important}.--align-end--m{align-items:flex-end!important}.--align-center--m{align-items:center!important}.--align-stretch--m{align-items:stretch!important}.--align-baseline--m{align-items:baseline!important}}@media (--rs-viewport-l ){.--align-start--l{align-items:flex-start!important}.--align-end--l{align-items:flex-end!important}.--align-center--l{align-items:center!important}.--align-stretch--l{align-items:stretch!important}.--align-baseline--l{align-items:baseline!important}}@media (--rs-viewport-xl ){.--align-start--xl{align-items:flex-start!important}.--align-end--xl{align-items:flex-end!important}.--align-center--xl{align-items:center!important}.--align-stretch--xl{align-items:stretch!important}.--align-baseline--xl{align-items:baseline!important}}

package/dist/styles/align/index.d.ts

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getAlignStyles: T.StaticStyleUtility<T.Align>;
+export default getAlignStyles;

package/dist/styles/align/index.js

@@ -0,0 +1,10 @@
+import { responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./align.module.css";
+const getAlignStyles = (value) => {
+    if (!value)
+        return null;
+    return {
+        classNames: responsiveClassNames(s, "--align", value),
+    };
+};
+export default getAlignStyles;

package/dist/styles/justify/index.d.ts

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getJustifyStyles: T.StaticStyleUtility<T.Justify>;
+export default getJustifyStyles;

package/dist/styles/justify/index.js

@@ -0,0 +1,10 @@
+import { responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./justify.module.css";
+const getJustifyStyles = (value) => {
+    if (!value)
+        return null;
+    return {
+        classNames: responsiveClassNames(s, "--justify", value),
+    };
+};
+export default getJustifyStyles;

package/dist/styles/justify/justify.module.css

@@ -0,0 +1 @@
+.--justify-start{justify-content:flex-start}.--justify-end{justify-content:flex-end}.--justify-center{justify-content:center}.--justify-space-between{justify-content:space-between}@media (--rs-viewport-m ){.--justify-start--m{justify-content:flex-start}.--justify-end--m{justify-content:flex-end}.--justify-center--m{justify-content:center}.--justify-space-between--m{justify-content:space-between}}@media (--rs-viewport-l ){.--justify-start--l{justify-content:flex-start}.--justify-end--l{justify-content:flex-end}.--justify-center--l{justify-content:center}.--justify-space-between--l{justify-content:space-between}}@media (--rs-viewport-xl ){.--justify-start--xl{justify-content:flex-start}.--justify-end--xl{justify-content:flex-end}.--justify-center--xl{justify-content:center}.--justify-space-between--xl{justify-content:space-between}}

package/dist/styles/types.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import * as G from "../types/global";
 export type TextAlign = "start" | "center" | "end";
+export type Justify = "start" | "center" | "end" | "space-between";
+export type Align = "start" | "center" | "end" | "stretch" | "baseline";
 export type Radius = "small" | "medium" | "large" | "circular" | "none";
 export type Position = "relative" | "absolute" | "fixed" | "sticky" | "static";
 export type BorderColor = "neutral" | "neutral-faded" | "critical" | "critical-faded" | "warning" | "warning-faded" | "positive" | "positive-faded" | "primary" | "primary-faded" | "disabled" | "brand" | "transparent";

package/dist/tests/ShadowDOM.stories.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const behavior: () => React.JSX.Element;

package/dist/tests/ShadowDOM.stories.js

@@ -0,0 +1,110 @@
+import React, { useEffect, useState, useRef, forwardRef } from "react";
+import root from "react-shadow";
+import { Example } from "../utilities/storybook/index.js";
+import Autocomplete from "../components/Autocomplete/index.js";
+import View from "../components/View/index.js";
+import DropdownMenu from "../components/DropdownMenu/index.js";
+import Reshaped from "../components/Reshaped/index.js";
+import Select from "../components/Select/index.js";
+import Button from "../components/Button/index.js";
+import Tooltip from "../components/Tooltip/index.js";
+export default {
+    title: "Meta/ShadowDOM",
+};
+const getStylesData = () => {
+    const sourceStylesContainer = document.head;
+    return Array.from(sourceStylesContainer.children).filter((x) => x instanceof HTMLStyleElement);
+};
+// Create a component to render inside the Shadow DOM
+const ShadowDiv = forwardRef((props, ref) => {
+    const shadowRef = useRef(null);
+    // Load styles
+    useEffect(() => {
+        if (!shadowRef?.current)
+            return;
+        // Add styles to the shadow DOM
+        // const shadowEl = shadowRef?.current.shadowRoot;
+        const shadowEl = shadowRef?.current.shadowRoot;
+        if (!shadowEl)
+            return;
+        const sourceStylesContainer = document.head;
+        const observer = new MutationObserver(getStylesData);
+        observer.observe(sourceStylesContainer, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+        let styleBlock = shadowEl.getElementById("custom-outer-style");
+        if (!styleBlock) {
+            styleBlock = document.createElement("span");
+            styleBlock.id = "custom-outer-style";
+            shadowEl.appendChild(styleBlock);
+        }
+        else {
+            styleBlock.innerHTML = "";
+        }
+        styleBlock.append(...getStylesData() // finds all <style> tags containing your web component ID
+            .map((x) => x.cloneNode(true)) // copies styles into the current instance of your web component. You might need to have multiple instances, so all of them need to track the styles.
+        );
+        return () => observer.disconnect();
+    }, []);
+    return (<Reshaped>
+			<root.div className="quote" ref={shadowRef}>
+				<div ref={ref}>
+					{/*
+            Adding padding here since otherwise mouseenter won't trigger on contents
+            when mouse is switching from outside the shadow dom
+        */}
+					<View padding={4}>{props.children}</View>
+				</div>
+			</root.div>
+		</Reshaped>);
+});
+// Main Component
+const Component = () => {
+    const [valueAutoShadow, setValueAutoShadow] = useState("");
+    const [valueDropdownShadow, setValueDropdownShadow] = useState("");
+    const optionsAuto = ["Pizza", "Pie", "Ice-cream"];
+    const optionsDropdown = ["Turtle", "Cat", "Long-necked giraffe"];
+    const handleChangeAutoShadow = (args) => {
+        console.log("Autocomlete shadow value=", args);
+        setValueAutoShadow(args.value);
+    };
+    const handleChangeDropdownShadow = (val) => {
+        console.log("Dropdown shadow value=", val);
+        setValueDropdownShadow(val);
+    };
+    return (<View paddingBottom={50}>
+			<ShadowDiv>
+				<View gap={4} direction="row" wrap={false}>
+					<Autocomplete name="fruit-shadow" placeholder="Pick your food" value={valueAutoShadow} onChange={handleChangeAutoShadow}>
+						{optionsAuto.map((option) => (<Autocomplete.Item key={option} value={option} onClick={() => handleChangeAutoShadow({ value: option, name: "fruit-auto" })}>
+								{option}
+							</Autocomplete.Item>))}
+					</Autocomplete>
+
+					<DropdownMenu>
+						<DropdownMenu.Trigger>
+							{(attributes) => (<Select placeholder="Pick your animal" name="font" inputAttributes={attributes}>
+									{valueDropdownShadow}
+								</Select>)}
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content>
+							{optionsDropdown.map((option) => (<DropdownMenu.Item onClick={() => handleChangeDropdownShadow(option)} key={option}>
+									{option}
+								</DropdownMenu.Item>))}
+						</DropdownMenu.Content>
+					</DropdownMenu>
+
+					<Tooltip text="Tooltip for button">
+						{(attributes) => <Button attributes={attributes}>Hover me</Button>}
+					</Tooltip>
+				</View>
+			</ShadowDiv>
+		</View>);
+};
+export const behavior = () => (<Example>
+		<Example.Item title="base">
+			<Component />
+		</Example.Item>
+	</Example>);

package/dist/themes/_generator/tests/themes.stories.js

@@ -13,7 +13,7 @@ import Link from "../../../components/Link/index.js";
 import Text from "../../../components/Text/index.js";
 import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../../index.js";
 export default {
-    title: "Themes",
+    title: "Meta/Themes",
     parameters: {
         iframe: { url: "https://reshaped.so/docs/tokens/theming/runtime-theming" },
     },

package/dist/utilities/a11y/TrapFocus.d.ts

@@ -7,7 +7,7 @@ type ReleaseOptions = {
 type TrapOptions = {
     onNavigateOutside?: () => void;
     includeTrigger?: boolean;
-    initialFocusEl?: FocusableElement;
+    initialFocusEl?: FocusableElement | null;
     mode?: TrapMode;
 };
 declare class TrapFocus {

package/dist/utilities/a11y/TrapFocus.js

@@ -2,6 +2,7 @@ import Chain from "../Chain.js";
 import * as keys from "../../constants/keys.js";
 import TrapScreenReader from "./TrapScreenReader.js";
 import { getActiveElement, getFocusableElements, focusElement, getFocusData } from "./focus.js";
+import { getShadowRoot } from "../dom.js";
 import { checkKeyboardMode } from "./keyboardMode.js";
 class TrapFocus {
     static chain = new Chain();
@@ -34,7 +35,7 @@ class TrapFocus {
         const isDown = navigationMode === "arrows" && key === keys.DOWN;
         const isPrev = (isBackTab && navigationMode === "tabs") || isUp;
         const isNext = (isNextTab && navigationMode === "tabs") || isDown;
-        const isFocusedOnTrigger = getActiveElement() === this.trigger;
+        const isFocusedOnTrigger = getActiveElement(this.root) === this.trigger;
         const focusData = getFocusData({
             root: this.root,
             target: isPrev ? "prev" : "next",
@@ -61,15 +62,23 @@ class TrapFocus {
             return;
         focusElement(focusData.el, { pseudoFocus });
     };
-    addListeners = () => document.addEventListener("keydown", this.handleKeyDown);
-    removeListeners = () => document.removeEventListener("keydown", this.handleKeyDown);
+    addListeners = () => {
+        const shadowRoot = getShadowRoot(this.root);
+        const el = shadowRoot ?? document;
+        el.addEventListener("keydown", this.handleKeyDown);
+    };
+    removeListeners = () => {
+        const shadowRoot = getShadowRoot(this.root);
+        const el = shadowRoot ?? document;
+        el.removeEventListener("keydown", this.handleKeyDown);
+    };
     /**
      * Trap the focus, add observer and keyboard event listeners
      * and create a chain item
      */
     trap = (options = {}) => {
         const { mode = "dialog", includeTrigger, initialFocusEl } = options;
-        const trigger = getActiveElement();
+        const trigger = getActiveElement(this.root);
         const focusable = getFocusableElements(this.root, {
             additionalElement: includeTrigger ? trigger : undefined,
         });
@@ -77,7 +86,7 @@ class TrapFocus {
         this.options = { ...options, pseudoFocus };
         this.trigger = trigger;
         this.mutationObserver = new MutationObserver(() => {
-            const currentActiveElement = getActiveElement();
+            const currentActiveElement = getActiveElement(this.root);
             // Focus stayed inside the wrapper, no need to refocus
             if (this.root.contains(currentActiveElement))
                 return;

package/dist/utilities/a11y/focus.d.ts

@@ -1,6 +1,6 @@
 import type { FocusableElement } from "./types";
 export declare const focusableSelector = "a,button,input:not([type=\"hidden\"]),textarea,select,details,[tabindex]:not([tabindex=\"-1\"])";
-export declare const getActiveElement: () => HTMLButtonElement;
+export declare const getActiveElement: (originEl?: HTMLElement | null) => HTMLButtonElement;
 export declare const focusElement: (el: FocusableElement, options?: {
     pseudoFocus?: boolean;
 }) => void;

package/dist/utilities/a11y/focus.js

@@ -1,11 +1,16 @@
+import { getShadowRoot } from "../dom.js";
 const pseudoFocusAttribute = "data-rs-focus";
 export const focusableSelector = 'a,button,input:not([type="hidden"]),textarea,select,details,[tabindex]:not([tabindex="-1"])';
-export const getActiveElement = () => {
-    const pseudoFocusedEl = document.querySelector(`[${pseudoFocusAttribute}]`);
-    return (pseudoFocusedEl || document.activeElement);
+export const getActiveElement = (originEl) => {
+    const shadowRoot = originEl ? getShadowRoot(originEl) : null;
+    const rootEl = shadowRoot ?? document;
+    const pseudoFocusedEl = rootEl.querySelector(`[${pseudoFocusAttribute}]`);
+    return (pseudoFocusedEl || rootEl.activeElement);
 };
 export const focusElement = (el, options) => {
-    document.querySelector(`[${pseudoFocusAttribute}]`)?.removeAttribute(pseudoFocusAttribute);
+    const shadowRoot = getShadowRoot(el);
+    const rootEl = shadowRoot ?? document;
+    rootEl.querySelector(`[${pseudoFocusAttribute}]`)?.removeAttribute(pseudoFocusAttribute);
     if (options?.pseudoFocus) {
         el.setAttribute(pseudoFocusAttribute, "true");
     }
@@ -59,7 +64,7 @@ export const getFocusData = (args) => {
     const { root, target, options } = args;
     const focusable = getFocusableElements(root, { additionalElement: options?.additionalElement });
     const focusableLimit = focusable.length - 1;
-    const currentElement = getActiveElement();
+    const currentElement = getActiveElement(root);
     const currentIndex = focusable.indexOf(currentElement);
     const positions = {
         next: currentIndex + 1,

package/dist/utilities/dom.d.ts

@@ -1,5 +1,6 @@
-export declare const getClosestFlyoutTarget: (el: HTMLElement | null) => HTMLElement;
+export declare const getClosestFlyoutTarget: (el: HTMLElement | null, iteration?: number) => HTMLElement;
 export declare const disableUserSelect: () => void;
 export declare const enableUserSelect: () => void;
 export declare const disableScroll: () => void;
 export declare const enableScroll: () => void;
+export declare const getShadowRoot: (el: HTMLElement | null) => ShadowRoot | null;

package/dist/utilities/dom.js

@@ -1,14 +1,20 @@
-export const getClosestFlyoutTarget = (el) => {
+export const getClosestFlyoutTarget = (el, iteration = 0) => {
     const style = el && window.getComputedStyle(el);
     const overflowY = style?.overflowY;
     const position = style?.position;
     const isScrollable = overflowY?.includes("scroll");
     const isFixed = position === "fixed" || position === "sticky";
+    // Only check shadow root on the first run
+    if (iteration === 0) {
+        const shadowRoot = getShadowRoot(el);
+        if (shadowRoot?.firstElementChild)
+            return shadowRoot.firstElementChild;
+    }
     if (el === document.body || !el)
         return document.body;
     if ((isScrollable && el.scrollHeight > el.clientHeight) || isFixed)
         return el;
-    return getClosestFlyoutTarget(el.parentElement);
+    return getClosestFlyoutTarget(el.parentElement, iteration + 1);
 };
 export const disableUserSelect = () => {
     document.body.style.userSelect = "none";
@@ -25,3 +31,7 @@ export const enableScroll = () => {
     window.removeEventListener("wheel", preventDefault);
     window.removeEventListener("touchmove", preventDefault);
 };
+export const getShadowRoot = (el) => {
+    const rootNode = el?.getRootNode();
+    return rootNode instanceof ShadowRoot ? rootNode : null;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.1.4",
+	"version": "3.1.6",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -93,31 +93,31 @@
 		"defaults and not IE 11"
 	],
 	"devDependencies": {
-		"@commitlint/cli": "19.4.0",
-		"@commitlint/config-conventional": "19.2.2",
-		"@commitlint/types": "19.0.3",
-		"@eslint/js": "^9.9.0",
-		"@size-limit/preset-big-lib": "11.1.4",
-		"@storybook/addon-a11y": "8.2.8",
-		"@storybook/addon-controls": "8.2.8",
-		"@storybook/addon-docs": "8.2.8",
-		"@storybook/addon-storysource": "8.2.8",
-		"@storybook/react": "8.2.8",
-		"@storybook/react-vite": "8.2.8",
+		"@commitlint/cli": "19.5.0",
+		"@commitlint/config-conventional": "19.5.0",
+		"@commitlint/types": "19.5.0",
+		"@eslint/js": "9.11.1",
+		"@size-limit/preset-big-lib": "11.1.5",
+		"@storybook/addon-a11y": "8.3.4",
+		"@storybook/addon-controls": "8.3.4",
+		"@storybook/addon-docs": "8.3.4",
+		"@storybook/addon-storysource": "8.3.4",
+		"@storybook/react": "8.3.4",
+		"@storybook/react-vite": "8.3.4",
 		"@testing-library/dom": "10.4.0",
-		"@testing-library/jest-dom": "6.4.8",
-		"@testing-library/react": "16.0.0",
+		"@testing-library/jest-dom": "6.5.0",
+		"@testing-library/react": "16.0.1",
 		"@testing-library/user-event": "14.5.2",
 		"@types/culori": "2.1.1",
 		"@types/events": "3.0.3",
-		"@types/jest": "29.5.12",
-		"@types/node": "22.2.0",
-		"@types/react": "18.3.3",
+		"@types/jest": "29.5.13",
+		"@types/node": "22.7.4",
+		"@types/react": "18.3.10",
 		"@types/react-dom": "18.3.0",
 		"@typescript-eslint/eslint-plugin": "7.6.0",
 		"@typescript-eslint/parser": "7.6.0",
 		"@vitejs/plugin-react": "4.3.1",
-		"chromatic": "11.7.0",
+		"chromatic": "11.10.4",
 		"cz-conventional-changelog": "3.3.0",
 		"eslint": "8.56.0",
 		"eslint-config-airbnb-typescript": "17.1.0",
@@ -127,30 +127,31 @@
 		"eslint-plugin-prettier": "5.1.3",
 		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
-		"globals": "^15.9.0",
+		"globals": "15.9.0",
 		"identity-obj-proxy": "3.0.0",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"jest-matchmedia-mock": "1.1.0",
-		"lefthook": "1.7.12",
-		"postcss": "8.4.41",
+		"lefthook": "1.7.17",
+		"postcss": "8.4.47",
 		"postcss-cli": "11.0.0",
 		"postcss-each": "1.1.0",
 		"postcss-nested": "6.2.0",
 		"prettier": "3.3.3",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
-		"resolve-tspaths": "0.8.19",
-		"size-limit": "11.1.4",
-		"storybook": "8.2.8",
-		"stylelint": "16.8.1",
+		"react-shadow": "20.5.0",
+		"resolve-tspaths": "0.8.22",
+		"size-limit": "11.1.5",
+		"storybook": "8.3.4",
+		"stylelint": "16.9.0",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "36.0.1",
-		"ts-jest": "29.2.4",
+		"ts-jest": "29.2.5",
 		"ts-node": "10.9.2",
-		"typescript": "5.5.4",
-		"typescript-eslint": "^8.0.1",
-		"vite": "5.4.0",
+		"typescript": "5.6.2",
+		"typescript-eslint": "8.7.0",
+		"vite": "5.4.8",
 		"vite-tsconfig-paths": "4.3.2"
 	},
 	"peerDependencies": {
@@ -163,6 +164,7 @@
 		"chalk": "4.1.2",
 		"commander": "11.1.0",
 		"cssnano": "7.0.5",
+		"csstype": "^3.1.3",
 		"culori": "4.0.1",
 		"postcss-custom-media": "11.0.0"
 	},