reshaped 3.3.10 → 3.3.12

package/dist/hooks/tests/useElementId.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const id: StoryObj;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { expect, waitFor } from "@storybook/test";
+import useElementId from "../useElementId.js";
+export default { title: "Hooks/useElementId" };
+const Component = (props) => {
+    const id = useElementId(props.id);
+    return <div id={id}>{id}</div>;
+};
+export const id = {
+    name: "passed id",
+    render: () => {
+        return <Component id="hey"/>;
+    },
+    play: async () => {
+        waitFor(() => {
+            expect(document.querySelector("#hey")).toBeTruthy();
+        });
+    },
+};

package/dist/hooks/tests/useHotkeys.test.stories.d.ts

@@ -0,0 +1,39 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const singleKey: StoryObj<{
+    handleHotkey: ReturnType<typeof fn>;
+}>;
+export declare const modKey: StoryObj<{
+    handleHotkey: ReturnType<typeof fn>;
+}>;
+export declare const modKeyHold: StoryObj<{
+    handleHotkey: ReturnType<typeof fn>;
+}>;
+export declare const keyList: StoryObj<{
+    handleHotkey: ReturnType<typeof fn>;
+}>;
+export declare const keyCombination: StoryObj<{
+    handleHotkey: ReturnType<typeof fn>;
+}>;
+export declare const keyCombinationFormat: StoryObj<{
+    handleHotkey: ReturnType<typeof fn>;
+}>;
+export declare const keyCombinationOrder: StoryObj<{
+    handleHotkey: ReturnType<typeof fn>;
+}>;
+export declare const keyCombinationMoreThanRequired: StoryObj<{
+    handleHotkey: ReturnType<typeof fn>;
+}>;
+export declare const optionModified: StoryObj<{
+    handleHotkey: ReturnType<typeof fn>;
+    handleHotkeyModified: ReturnType<typeof fn>;
+}>;

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

@@ -0,0 +1,119 @@
+import { expect, fn, userEvent } from "@storybook/test";
+import useHotkeys from "../useHotkeys.js";
+export default {
+    title: "Hooks/useHotkeys/tests",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+const Component = (props) => {
+    const { hotkeys } = props;
+    useHotkeys(hotkeys);
+    return <div />;
+};
+export const singleKey = {
+    name: "single key",
+    args: {
+        handleHotkey: fn(),
+    },
+    render: (args) => <Component hotkeys={{ a: args.handleHotkey }}/>,
+    play: async ({ args }) => {
+        await userEvent.keyboard("a");
+        await userEvent.keyboard("b");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
+    },
+};
+export const modKey = {
+    name: "mod key",
+    args: {
+        handleHotkey: fn(),
+    },
+    render: (args) => <Component hotkeys={{ mod: args.handleHotkey }}/>,
+    play: async ({ args }) => {
+        await userEvent.keyboard("{Meta/}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
+    },
+};
+export const modKeyHold = {
+    name: "mod key on hold",
+    args: {
+        handleHotkey: fn(),
+    },
+    render: (args) => <Component hotkeys={{ "Meta + b": args.handleHotkey }}/>,
+    play: async ({ args }) => {
+        await userEvent.keyboard("{Meta>}bb{/Meta}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(2);
+    },
+};
+export const keyList = {
+    name: "key list",
+    args: {
+        handleHotkey: fn(),
+    },
+    render: (args) => <Component hotkeys={{ "a,b": args.handleHotkey }}/>,
+    play: async ({ args }) => {
+        await userEvent.keyboard("a");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
+        await userEvent.keyboard("b");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(2);
+    },
+};
+export const keyCombination = {
+    name: "key combination",
+    args: {
+        handleHotkey: fn(),
+    },
+    render: (args) => <Component hotkeys={{ "a+b": args.handleHotkey }}/>,
+    play: async ({ args }) => {
+        await userEvent.keyboard("{a>}b{/a}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
+    },
+};
+export const keyCombinationFormat = {
+    name: "key combination without formatting",
+    args: {
+        handleHotkey: fn(),
+    },
+    render: (args) => <Component hotkeys={{ "A  + b": args.handleHotkey }}/>,
+    play: async ({ args }) => {
+        await userEvent.keyboard("{a>}b{/a}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
+    },
+};
+export const keyCombinationOrder = {
+    name: "key combination without order",
+    args: {
+        handleHotkey: fn(),
+    },
+    render: (args) => <Component hotkeys={{ "b+a": args.handleHotkey }}/>,
+    play: async ({ args }) => {
+        await userEvent.keyboard("{a>}b{/a}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
+    },
+};
+export const keyCombinationMoreThanRequired = {
+    name: "key combination, more keys pressed",
+    args: {
+        handleHotkey: fn(),
+    },
+    render: (args) => <Component hotkeys={{ "z + x": args.handleHotkey }}/>,
+    play: async ({ args }) => {
+        await userEvent.keyboard("{z>}{x>}c{/x}{/z}");
+        // When c is pressed, it doesn't trigger a+b for the second time
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
+    },
+};
+export const optionModified = {
+    name: "modified with alt/option",
+    args: {
+        handleHotkey: fn(),
+        handleHotkeyModified: fn(),
+    },
+    render: (args) => (<Component hotkeys={{ "alt+n": args.handleHotkeyModified, "alt+shift": args.handleHotkey }}/>),
+    play: async ({ args }) => {
+        await userEvent.keyboard("{Alt>}n{/Alt}");
+        expect(args.handleHotkeyModified).toHaveBeenCalledTimes(1);
+        await userEvent.keyboard("{Alt>}{Shift}{/Alt}");
+        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
+    },
+};

package/dist/hooks/tests/useRTL.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const setRTL: StoryObj;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { expect, waitFor } from "@storybook/test";
+import Reshaped from "../../components/Reshaped/index.js";
+import useRTL from "../useRTL.js";
+export default { title: "Hooks/useRTL" };
+const Component = () => {
+    const [rtl, setRTL] = useRTL();
+    React.useEffect(() => {
+        setRTL(true);
+    }, [setRTL]);
+    return <div>{rtl ? "RTL" : "LTR"}</div>;
+};
+export const setRTL = {
+    name: "setRTL",
+    render: () => {
+        return (<Reshaped theme="reshaped">
+				<Component />
+			</Reshaped>);
+    },
+    play: async () => {
+        waitFor(() => {
+            expect(document.documentElement).toHaveAttribute("dir", "rtl");
+        });
+    },
+};

package/dist/hooks/tests/useResponsiveClientValue.stories.d.ts

@@ -2,4 +2,12 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
+export declare const base: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const boolean: {
+    name: string;
+    describe: string;
+    render: () => import("react").JSX.Element;
+};

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

@@ -1,12 +1,25 @@
 import useResponsiveClientValue from "../useResponsiveClientValue.js";
 import View from "../../components/View/index.js";
 export default { title: "Hooks/useResponsiveClientValue" };
-function Example() {
-    const value = useResponsiveClientValue({
-        s: "neutral",
-        m: "critical",
-        l: "positive",
-    });
-    return <View width={25} height={25} backgroundColor={value}/>;
-}
-export const base = () => <Example />;
+export const base = {
+    name: "base",
+    render: () => {
+        const value = useResponsiveClientValue({
+            s: "neutral",
+            m: "critical",
+            l: "positive",
+        });
+        return <View width={25} height={25} backgroundColor={value}/>;
+    },
+};
+export const boolean = {
+    name: "boolean",
+    describe: "works with boolean properties",
+    render: () => {
+        const value = useResponsiveClientValue({
+            s: true,
+            l: false,
+        });
+        return <div>{value?.toString()}</div>;
+    },
+};

package/dist/hooks/tests/useScrollLock.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: StoryObj;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { expect, userEvent } from "@storybook/test";
+import Button from "../../components/Button/index.js";
+import useScrollLock from "../useScrollLock.js";
+export default { title: "Hooks/useScrollLock" };
+export const base = {
+    name: "base",
+    render: () => {
+        const { lockScroll, unlockScroll, scrollLocked } = useScrollLock();
+        return (<React.Fragment>
+				<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>
+				<div style={{ height: "150vh" }}/>
+			</React.Fragment>);
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        expect(document.body).toHaveStyle("overflow: hidden");
+        await userEvent.click(button);
+        expect(document.body).not.toHaveStyle("overflow: hidden");
+    },
+};

package/dist/hooks/tests/useToggle.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const toggle: StoryObj;
+export declare const activate: StoryObj;
+export declare const deactivate: StoryObj;

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { expect, userEvent } from "@storybook/test";
+import Button from "../../components/Button/index.js";
+import useToggle from "../useToggle.js";
+export default { title: "Hooks/useToggle" };
+export const toggle = {
+    name: "toggle",
+    render: () => {
+        const { toggle, active } = useToggle();
+        return (<Button onClick={toggle} attributes={{ "data-active": active }}>
+				{active ? "Deactivate" : "Activate"}
+			</Button>);
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        expect(button.getAttribute("data-active")).toBe("false");
+        await userEvent.click(button);
+        expect(button.getAttribute("data-active")).toBe("true");
+        await userEvent.click(button);
+        expect(button.getAttribute("data-active")).toBe("false");
+    },
+};
+export const activate = {
+    name: "activate",
+    render: () => {
+        const { activate, active } = useToggle();
+        return (<React.Fragment>
+				<Button onClick={activate} attributes={{ "data-active": active }}>
+					Activate
+				</Button>
+			</React.Fragment>);
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        expect(button.getAttribute("data-active")).toBe("false");
+        await userEvent.click(button);
+        expect(button.getAttribute("data-active")).toBe("true");
+    },
+};
+export const deactivate = {
+    name: "deactivate",
+    render: () => {
+        const { deactivate, active } = useToggle(true);
+        return (<Button onClick={deactivate} attributes={{ "data-active": active }}>
+				Deactivate
+			</Button>);
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        expect(button.getAttribute("data-active")).toBe("true");
+        await userEvent.click(button);
+        expect(button.getAttribute("data-active")).toBe("false");
+    },
+};

package/dist/hooks/useDrag.d.ts

@@ -7,11 +7,11 @@ export type UseDragCallbackArgs = {
 };
 declare const useDrag: <TriggerElement extends HTMLElement = HTMLButtonElement, ContainerElement extends HTMLElement = HTMLDivElement>(cb: (args: UseDragCallbackArgs) => void, options?: {
     disabled?: boolean;
-    containerRef?: React.RefObject<ContainerElement>;
+    containerRef?: React.RefObject<ContainerElement | null>;
     orientation?: "horizontal" | "vertical" | "all";
 }) => {
-    ref: React.RefObject<TriggerElement>;
-    containerRef: React.RefObject<ContainerElement>;
+    ref: React.RefObject<TriggerElement | null>;
+    containerRef: React.RefObject<ContainerElement | null>;
     active: boolean;
 };
 export default useDrag;

package/dist/hooks/useHotkeys.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import { type Hotkeys } from "./_private/useSingletonHotkeys";
 declare const useHotkeys: <Element extends HTMLElement>(hotkeys: Hotkeys, deps?: unknown[], options?: {
-    ref?: React.RefObject<Element>;
+    ref?: React.RefObject<Element | null>;
     disabled?: boolean;
     preventDefault?: boolean;
 }) => {
-    ref: React.RefObject<Element>;
+    ref: React.RefObject<Element | null>;
     checkHotkeyState: (key: string) => boolean;
 };
 export default useHotkeys;

package/dist/hooks/useHotkeys.js

@@ -8,7 +8,9 @@ const useHotkeys = (hotkeys, deps = [], options) => {
     React.useEffect(() => {
         if (options?.disabled)
             return;
-        const remove = addHotkeys(hotkeys, elementRef, { preventDefault: options?.preventDefault });
+        const remove = addHotkeys(hotkeys, elementRef, {
+            preventDefault: options?.preventDefault,
+        });
         return () => remove?.();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [

package/dist/hooks/useScrollLock.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 declare const useScrollLock: (props?: {
-    containerRef?: React.RefObject<HTMLElement>;
+    containerRef?: React.RefObject<HTMLElement | null>;
+    originRef?: React.RefObject<HTMLElement | null>;
 }) => {
     scrollLocked: boolean;
     lockScroll: () => void;

package/dist/hooks/useScrollLock.js

@@ -2,11 +2,15 @@
 import React from "react";
 import { lockScroll, unlockScroll } from "../utilities/scroll/index.js";
 const useScrollLock = (props) => {
-    const { containerRef } = props || {};
+    const { containerRef, originRef } = props || {};
     const [locked, setLocked] = React.useState(false);
     const handleLockScroll = React.useCallback(() => {
-        lockScroll({ containerEl: containerRef?.current, cb: () => setLocked(true) });
-    }, [containerRef]);
+        lockScroll({
+            containerEl: containerRef?.current,
+            originEl: originRef?.current,
+            cb: () => setLocked(true),
+        });
+    }, [containerRef, originRef]);
     const handleUnlockScroll = React.useCallback(() => {
         unlockScroll(() => setLocked(false));
     }, []);

package/dist/tests/ShadowDOM.stories.js

@@ -77,7 +77,7 @@ const Component = () => {
     return (<View paddingBottom={50}>
 			<ShadowDiv>
 				<View gap={4} direction="row" wrap={false}>
-					<Autocomplete name="fruit-shadow" placeholder="Pick your food" value={valueAutoShadow} onChange={handleChangeAutoShadow}>
+					<Autocomplete name="fruit-shadow" placeholder="Pick your food" value={valueAutoShadow} onChange={handleChangeAutoShadow} inputAttributes={{ "aria-label": "Label" }}>
 						{optionsAuto.map((option) => (<Autocomplete.Item key={option} value={option} onClick={() => handleChangeAutoShadow({ value: option, name: "fruit-auto" })}>
 								{option}
 							</Autocomplete.Item>))}

package/dist/themes/_generator/tests/themes.stories.d.ts

@@ -5,6 +5,9 @@ declare const _default: {
         iframe: {
             url: string;
         };
+        a11y: {
+            disable: boolean;
+        };
     };
 };
 export default _default;

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

@@ -17,6 +17,10 @@ export default {
     title: "Meta/Themes",
     parameters: {
         iframe: { url: "https://reshaped.so/docs/tokens/theming/runtime-theming" },
+        a11y: {
+            // This option disables all a11y checks on this story
+            disable: true,
+        },
     },
 };
 const css = getThemeCSS("green", {
@@ -37,10 +41,6 @@ const cssGenerated = getThemeCSS("generated", {
         primary: "#0369a1" /*"#5a58f2"*/ /* "#2563eb" */,
     }),
 });
-const cssGenerated2 = getThemeCSS("generated2", {
-    ...baseThemeDefinition,
-    color: generateThemeColors({ primary: "#2383e2" }),
-});
 const componentExamples = (<View gap={4} padding={6} backgroundColor="page">
 		<Text variant="featured-2">Hello world</Text>
 		<Text color="neutral-faded" variant="featured-2">
@@ -215,14 +215,10 @@ export const base = () => (<Example>
 			</Theme>
 		</Example.Item>
 	</Example>);
-export const generation = () => (<React.Fragment>
-		<style>
-			{cssGenerated}
-			{cssGenerated2}
-		</style>
+export const generation = () => (<div>
+		<style>{cssGenerated}</style>
 		<Theme name="generated">{componentExamples}</Theme>
-		{/* <Theme name="generated2">{componentExamples}</Theme> */}
-	</React.Fragment>);
+	</div>);
 const onColorsCss = getThemeCSS("on-color", {
     color: {
         backgroundPrimary: { hex: "#1abc9c", hexDark: "#16a085" },

package/dist/themes/_generator/utilities/generateColors.d.ts

@@ -6,6 +6,6 @@ declare const generate: (args?: {
     warning?: Color;
     positive?: Color;
     neutral?: Color;
-    brand?: string;
+    brand?: Color;
 }) => ThemeDefinition["color"];
 export default generate;

package/dist/themes/_generator/utilities/generateColors.js

@@ -158,16 +158,17 @@ const generate = (args = {}) => {
         return generateColorValues({
             key,
             hex: validateHexColor(typeof color === "string" ? color : color.hex),
-            hexDark: typeof color !== "string" ? validateHexColor(color.hexDark) : undefined,
+            hexDark: validateHexColor(typeof color === "string" ? color : (color.hexDark ?? color.hex)),
         });
     };
+    const brandColor = brand || primary;
     return {
         ...generateFor("primary", primary),
         ...generateFor("critical", critical),
         ...generateFor("warning", warning),
         ...generateFor("positive", positive),
         ...generateFor("neutral", neutral),
-        brand: { hex: brand || primary },
+        brand: typeof brandColor === "string" ? { hex: brandColor } : brandColor,
         white: { hex: "#ffffff" },
         black: { hex: "#000000" },
     };

package/dist/themes/slate/theme.css

@@ -1 +1 @@
-[data-rs-theme=slate]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:#2563eb;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#fff;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#fff;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280}[data-rs-theme=slate][data-rs-color-mode=light]{--rs-color-background-primary:#2563eb;--rs-color-background-primary-faded:#e8f0ff;--rs-color-border-primary:#1e5ce5;--rs-color-border-primary-faded:#d0ddf4;--rs-color-foreground-primary:#1e5ce5;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#fff1ef;--rs-color-border-critical:#c22022;--rs-color-border-critical-faded:#f3dad6;--rs-color-foreground-critical:#c22022;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fff6dd;--rs-color-border-warning:#816802;--rs-color-border-warning-faded:#ece2c4;--rs-color-foreground-warning:#816802;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#ebfff1;--rs-color-border-positive:#0f7f4a;--rs-color-border-positive-faded:#d2eddb;--rs-color-foreground-positive:#0f7f4a;--rs-color-background-neutral:#e3e4e8;--rs-color-background-neutral-faded:#f3f3f5;--rs-color-border-neutral:#0000001f;--rs-color-border-neutral-faded:#00000014;--rs-color-foreground-neutral:#2c2e34;--rs-color-foreground-neutral-faded:#676a75;--rs-color-background-disabled:#edeeef;--rs-color-background-disabled-faded:#f6f6f7;--rs-color-border-disabled:#e2e2e4;--rs-color-foreground-disabled:#cbcccf;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#fafbfb;--rs-color-rgb-background-primary:37,99,235;--rs-color-rgb-background-primary-faded:232,240,255;--rs-color-rgb-background-critical:226,44,44;--rs-color-rgb-background-critical-faded:255,241,239;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,246,221;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:235,255,241;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:227,228,232;--rs-color-rgb-background-neutral-faded:243,243,245;--rs-color-rgb-background-disabled:237,238,239;--rs-color-rgb-background-disabled-faded:246,246,247;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:250,251,251}[data-rs-theme=slate][data-rs-color-mode=dark]{--rs-color-background-primary:#2563eb;--rs-color-background-primary-faded:#17243d;--rs-color-border-primary:#7199e5;--rs-color-border-primary-faded:#293b60;--rs-color-foreground-primary:#7199e5;--rs-color-background-critical:#d72828;--rs-color-background-critical-faded:#391b18;--rs-color-border-critical:#e68075;--rs-color-border-critical-faded:#5a2e29;--rs-color-foreground-critical:#e68075;--rs-color-background-warning:#d7ae06;--rs-color-background-warning-faded:#2b2410;--rs-color-border-warning:#eed58a;--rs-color-border-warning-faded:#453c1e;--rs-color-foreground-warning:#eed58a;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#152a1d;--rs-color-border-positive:#57b17c;--rs-color-border-positive-faded:#264431;--rs-color-foreground-positive:#57b17c;--rs-color-background-neutral:#393a42;--rs-color-background-neutral-faded:#212227;--rs-color-border-neutral:#ffffff24;--rs-color-border-neutral-faded:#ffffff14;--rs-color-foreground-neutral:#f3f3f5;--rs-color-foreground-neutral-faded:#c7c9d1;--rs-color-background-disabled:#242527;--rs-color-background-disabled-faded:#1b1b1d;--rs-color-border-disabled:#262729;--rs-color-foreground-disabled:#494a4e;--rs-color-background-elevation-base:#161617;--rs-color-background-elevation-raised:#18191a;--rs-color-background-elevation-overlay:#1d1d1f;--rs-color-background-page:#0e0e0f;--rs-color-background-page-faded:#131414;--rs-color-rgb-background-primary:37,99,235;--rs-color-rgb-background-primary-faded:23,36,61;--rs-color-rgb-background-critical:215,40,40;--rs-color-rgb-background-critical-faded:57,27,24;--rs-color-rgb-background-warning:215,174,6;--rs-color-rgb-background-warning-faded:43,36,16;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:21,42,29;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:57,58,66;--rs-color-rgb-background-neutral-faded:33,34,39;--rs-color-rgb-background-disabled:36,37,39;--rs-color-rgb-background-disabled-faded:27,27,29;--rs-color-rgb-background-elevation-base:22,22,23;--rs-color-rgb-background-elevation-raised:24,25,26;--rs-color-rgb-background-elevation-overlay:29,29,31;--rs-color-rgb-background-page:14,14,15;--rs-color-rgb-background-page-faded:19,20,20}
+[data-rs-theme=slate]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:#2563eb;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#fff;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#fff;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280}[data-rs-theme=slate][data-rs-color-mode=light]{--rs-color-background-primary:#2563eb;--rs-color-background-primary-faded:#e8f0ff;--rs-color-border-primary:#1e5ce5;--rs-color-border-primary-faded:#d0ddf4;--rs-color-foreground-primary:#1e5ce5;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#fff1ef;--rs-color-border-critical:#c22022;--rs-color-border-critical-faded:#f3dad6;--rs-color-foreground-critical:#c22022;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fff6dd;--rs-color-border-warning:#816802;--rs-color-border-warning-faded:#ece2c4;--rs-color-foreground-warning:#816802;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#ebfff1;--rs-color-border-positive:#0f7f4a;--rs-color-border-positive-faded:#d2eddb;--rs-color-foreground-positive:#0f7f4a;--rs-color-background-neutral:#e3e4e8;--rs-color-background-neutral-faded:#f3f3f5;--rs-color-border-neutral:#0000001f;--rs-color-border-neutral-faded:#00000014;--rs-color-foreground-neutral:#2c2e34;--rs-color-foreground-neutral-faded:#676a75;--rs-color-background-disabled:#edeeef;--rs-color-background-disabled-faded:#f6f6f7;--rs-color-border-disabled:#e2e2e4;--rs-color-foreground-disabled:#cbcccf;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#fafbfb;--rs-color-rgb-background-primary:37,99,235;--rs-color-rgb-background-primary-faded:232,240,255;--rs-color-rgb-background-critical:226,44,44;--rs-color-rgb-background-critical-faded:255,241,239;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,246,221;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:235,255,241;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:227,228,232;--rs-color-rgb-background-neutral-faded:243,243,245;--rs-color-rgb-background-disabled:237,238,239;--rs-color-rgb-background-disabled-faded:246,246,247;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:250,251,251}[data-rs-theme=slate][data-rs-color-mode=dark]{--rs-color-background-primary:#2563eb;--rs-color-background-primary-faded:#17243d;--rs-color-border-primary:#7199e5;--rs-color-border-primary-faded:#293b60;--rs-color-foreground-primary:#7199e5;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#391b18;--rs-color-border-critical:#e9887d;--rs-color-border-critical-faded:#5a2e29;--rs-color-foreground-critical:#e9887d;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#2b2410;--rs-color-border-warning:#fbf3db;--rs-color-border-warning-faded:#453c1e;--rs-color-foreground-warning:#fbf3db;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#152a1d;--rs-color-border-positive:#57b17c;--rs-color-border-positive-faded:#264431;--rs-color-foreground-positive:#57b17c;--rs-color-background-neutral:#393a42;--rs-color-background-neutral-faded:#212227;--rs-color-border-neutral:#ffffff24;--rs-color-border-neutral-faded:#ffffff14;--rs-color-foreground-neutral:#f3f3f5;--rs-color-foreground-neutral-faded:#c7c9d1;--rs-color-background-disabled:#242527;--rs-color-background-disabled-faded:#1b1b1d;--rs-color-border-disabled:#262729;--rs-color-foreground-disabled:#494a4e;--rs-color-background-elevation-base:#161617;--rs-color-background-elevation-raised:#18191a;--rs-color-background-elevation-overlay:#1d1d1f;--rs-color-background-page:#0e0e0f;--rs-color-background-page-faded:#131414;--rs-color-rgb-background-primary:37,99,235;--rs-color-rgb-background-primary-faded:23,36,61;--rs-color-rgb-background-critical:226,44,44;--rs-color-rgb-background-critical-faded:57,27,24;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:43,36,16;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:21,42,29;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:57,58,66;--rs-color-rgb-background-neutral-faded:33,34,39;--rs-color-rgb-background-disabled:36,37,39;--rs-color-rgb-background-disabled-faded:27,27,29;--rs-color-rgb-background-elevation-base:22,22,23;--rs-color-rgb-background-elevation-raised:24,25,26;--rs-color-rgb-background-elevation-overlay:29,29,31;--rs-color-rgb-background-page:14,14,15;--rs-color-rgb-background-page-faded:19,20,20}

package/dist/types/global.d.ts

@@ -4,7 +4,7 @@ export type ClassName = ClassNameValue | ClassNameValue[] | ClassName[];
 export type CSSVariable = `--${string}`;
 export type StyleAttribute = React.CSSProperties | (React.CSSProperties & Record<CSSVariable, string | number | undefined>);
 type DataAttributes = {} | Record<`data-${string}`, string | boolean>;
-export type Attributes<TagName extends keyof JSX.IntrinsicElements = "div"> = JSX.IntrinsicElements[TagName] & DataAttributes & {
+export type Attributes<TagName extends keyof React.JSX.IntrinsicElements = "div"> = React.JSX.IntrinsicElements[TagName] & DataAttributes & {
     style?: StyleAttribute;
 };
 export type Viewport = "s" | "m" | "l" | "xl";

package/dist/utilities/helpers.d.ts

@@ -1,4 +1,5 @@
 import type * as G from "../types/global";
+export declare const sleep: (milliseconds: number) => Promise<unknown>;
 export declare const range: (start: number, end: number) => number[];
 export declare const debounce: <T extends Function>(cb: T, wait?: number) => T;
 export declare function debounceHandler<T extends React.SyntheticEvent | Event>(handler: (event: T) => void, timeout: number): (event: T) => void;

package/dist/utilities/helpers.js

@@ -1,3 +1,6 @@
+export const sleep = (milliseconds) => {
+    return new Promise((resolve) => setTimeout(resolve, milliseconds));
+};
 export const range = (start, end) => {
     if (start > end)
         return [];

package/dist/utilities/scroll/lock.d.ts

@@ -1,5 +1,6 @@
 export declare const lockScroll: (args: {
     containerEl?: HTMLElement | null;
+    originEl?: HTMLElement | null;
     cb?: () => void;
 }) => void;
 export declare const unlockScroll: (cb?: () => void) => void;

package/dist/utilities/scroll/lock.js

@@ -7,11 +7,11 @@ export const lockScroll = (args) => {
     lockedCount += 1;
     if (lockedCount > 1)
         return;
-    if (isIOS()) {
-        reset = lockSafariScroll(args.containerEl);
+    if (isIOS() && !args.containerEl && !args.originEl) {
+        reset = lockSafariScroll();
     }
     else {
-        reset = lockStandardScroll(args.containerEl);
+        reset = lockStandardScroll({ containerEl: args.containerEl, originEl: args.originEl });
     }
     args.cb?.();
 };

package/dist/utilities/scroll/lockSafari.d.ts

@@ -1,2 +1,2 @@
-declare const lockSafariScroll: (containerEl?: HTMLElement | null) => () => void;
+declare const lockSafariScroll: () => () => void;
 export default lockSafariScroll;

package/dist/utilities/scroll/lockSafari.js

@@ -1,12 +1,11 @@
 import { StyleCache } from "../css.js";
 const styleCache = new StyleCache();
-const lockSafariScroll = (containerEl) => {
-    const viewport = containerEl || window.visualViewport;
+const lockSafariScroll = () => {
+    const viewport = window.visualViewport;
     const offsetLeft = viewport?.offsetLeft || 0;
     const offsetTop = viewport?.offsetTop || 0;
-    const scrollX = containerEl?.scrollLeft ?? window.scrollX;
-    const scrollY = containerEl?.scrollTop ?? window.scrollY;
-    styleCache.set(containerEl || document.body, {
+    const { scrollX, scrollY } = window;
+    styleCache.set(document.body, {
         position: "fixed",
         top: `${-(scrollY - Math.floor(offsetTop))}px`,
         left: `${-(scrollX - Math.floor(offsetLeft))}px`,