reshaped 1.0.1 → 2.1.0

package/hooks/_private/useSingletonEnvironment.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type * as G from "../../types/global";
+type Context = {
+    rtl: [boolean, (state: boolean) => void];
+    defaultViewport: G.Viewport;
+};
+export declare const SingletonEnvironmentContext: React.Context<Context>;
+export declare const useSingletonRTL: (defaultRTL?: boolean) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+export {};

package/hooks/_private/useSingletonEnvironment.js

@@ -0,0 +1,33 @@
+import React from "react";
+import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js";
+export const SingletonEnvironmentContext = React.createContext({
+    rtl: [false, () => { }],
+    defaultViewport: "s",
+});
+export const useSingletonRTL = (defaultRTL) => {
+    const state = React.useState(defaultRTL || false);
+    const [isRTL, setRTL] = state;
+    /**
+     * Handle changing dir attribute directly
+     */
+    useIsomorphicLayoutEffect(() => {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.attributeName !== "dir")
+                    return;
+                const nextRTL = mutation.target.dir === "rtl";
+                if (isRTL !== nextRTL)
+                    setRTL(nextRTL);
+            });
+        });
+        observer.observe(document.documentElement, { attributes: true });
+        return () => observer.disconnect();
+    }, [isRTL]);
+    /**
+     * Handle setRTL usage
+     */
+    useIsomorphicLayoutEffect(() => {
+        document.documentElement.setAttribute("dir", isRTL ? "rtl" : "ltr");
+    }, [isRTL]);
+    return state;
+};

package/hooks/_private/useSingletonHotkeys.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+/**
+ * Types
+ */
+type Callback = (e: KeyboardEvent) => void;
+type PressedKeys = Record<string, KeyboardEvent>;
+type Hotkeys = Record<string, Callback | null>;
+type Context = {
+    isPressed: (key: string) => boolean;
+    addHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>) => (() => void) | undefined;
+};
+export declare class HotkeyStore {
+    hotkeyMap: Record<string, {
+        data: Set<{
+            callback: Callback;
+            ref: React.RefObject<HTMLElement | null>;
+        }>;
+        used: boolean;
+    }>;
+    getSize: () => number;
+    bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>) => void;
+    unbindHotkeys: (hotkeys: Hotkeys) => void;
+    handleKeyDown: (pressedMap: PressedKeys, e: KeyboardEvent) => void;
+    handleKeyUp: (e: KeyboardEvent) => void;
+}
+/**
+ * Components / Hooks
+ */
+export declare const HotkeyContext: React.Context<Context>;
+export declare const SingletonHotkeysProvider: (props: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+declare const useSingletonHotkeys: () => Context;
+export default useSingletonHotkeys;

package/hooks/_private/useSingletonHotkeys.js

@@ -0,0 +1,191 @@
+import React from "react";
+/**
+ * Utilities
+ */
+const COMBINATION_DELIMETER = "+";
+const pressedMap = {};
+const modifiedKeys = [];
+const formatHotkey = (hotkey) => {
+    if (hotkey === " ")
+        return hotkey;
+    return hotkey.replace(/\s/g, "").toLowerCase();
+};
+// Normalize passed key combinations to turn them into a consistent ids
+const getHotkeyId = (hotkey) => {
+    return formatHotkey(hotkey).split(COMBINATION_DELIMETER).sort().join(COMBINATION_DELIMETER);
+};
+const getEventKey = (e) => {
+    // Having alt pressed modifies e.key value, so relying on e.code for it
+    if (e.altKey && e.key !== "Alt") {
+        return e.code.toLowerCase().replace(/key|digit|numpad/, "");
+    }
+    return e.key.toLowerCase();
+};
+const getCombinations = (pressedKeys) => {
+    const result = [];
+    const hotkey = pressedKeys.join(COMBINATION_DELIMETER);
+    const id = getHotkeyId(hotkey);
+    const sortedKeys = id.split(COMBINATION_DELIMETER);
+    const f = (prefix, items) => {
+        items.forEach((item, i) => {
+            const nextId = prefix ? `${prefix}+${item}` : item;
+            result.push(nextId);
+            f(nextId, items.slice(i + 1));
+        });
+    };
+    f("", sortedKeys);
+    return result;
+};
+const walkPressedCombinations = (pressed, cb) => {
+    const pressedKeys = Object.keys(pressed);
+    if (!pressedKeys.length)
+        return;
+    getCombinations(pressedKeys).forEach((pressedId) => {
+        cb(pressedId);
+    });
+};
+const walkHotkeys = (hotkeys, cb) => {
+    Object.keys(hotkeys).forEach((key) => {
+        key.split(",").forEach((hotkey) => {
+            const data = hotkeys[key];
+            if (!data)
+                return;
+            cb(getHotkeyId(hotkey), data);
+        });
+    });
+};
+export class HotkeyStore {
+    constructor() {
+        this.hotkeyMap = {};
+        this.getSize = () => Object.keys(this.hotkeyMap).length;
+        this.bindHotkeys = (hotkeys, ref) => {
+            walkHotkeys(hotkeys, (id, hotkeyData) => {
+                if (!hotkeyData)
+                    return;
+                if (!this.hotkeyMap[id]) {
+                    this.hotkeyMap[id] = { data: new Set(), used: false };
+                }
+                this.hotkeyMap[id].data.add({ callback: hotkeyData, ref });
+            });
+        };
+        this.unbindHotkeys = (hotkeys) => {
+            walkHotkeys(hotkeys, (id, hotkeyCallback) => {
+                var _a, _b;
+                if (!hotkeyCallback)
+                    return;
+                (_a = this.hotkeyMap[id]) === null || _a === void 0 ? void 0 : _a.data.forEach((data) => {
+                    if (data.callback === hotkeyCallback) {
+                        this.hotkeyMap[id].data.delete(data);
+                    }
+                });
+                if (!((_b = this.hotkeyMap[id]) === null || _b === void 0 ? void 0 : _b.data.size)) {
+                    delete this.hotkeyMap[id];
+                }
+            });
+        };
+        this.handleKeyDown = (pressedMap, e) => {
+            walkPressedCombinations(pressedMap, (pressedId) => {
+                const hotkeyData = this.hotkeyMap[pressedId];
+                if (!hotkeyData || hotkeyData.used)
+                    return;
+                if (hotkeyData === null || hotkeyData === void 0 ? void 0 : hotkeyData.data.size) {
+                    hotkeyData.data.forEach((data) => {
+                        var _a;
+                        if (((_a = data.ref) === null || _a === void 0 ? void 0 : _a.current) &&
+                            !(e.target === data.ref.current || data.ref.current.contains(e.target))) {
+                            return;
+                        }
+                        data.callback(pressedMap[pressedId]);
+                        this.hotkeyMap[pressedId].used = true;
+                    });
+                }
+            });
+        };
+        this.handleKeyUp = (e) => {
+            const id = getHotkeyId(e.key);
+            walkHotkeys(this.hotkeyMap, (hotkeyId, data) => {
+                const hotkeyIds = hotkeyId.split(COMBINATION_DELIMETER);
+                if (hotkeyIds.includes(id))
+                    data.used = false;
+            });
+        };
+    }
+}
+const globalHotkeyStore = new HotkeyStore();
+/**
+ * Components / Hooks
+ */
+export const HotkeyContext = React.createContext({});
+export const SingletonHotkeysProvider = (props) => {
+    const { children } = props;
+    // eslint-disable-next-line
+    const [_, setTriggerCount] = React.useState(0);
+    // Only handle key presses when there is at least one hook listening for hotkeys
+    const [hooksCount, setHooksCount] = React.useState(0);
+    const addPressedKey = React.useCallback((e) => {
+        if (e.repeat || hooksCount === 0)
+            return;
+        const eventKey = getEventKey(e);
+        pressedMap[eventKey] = e;
+        if (eventKey === "meta" || eventKey === "control") {
+            pressedMap.mod = e;
+        }
+        setTriggerCount(Object.keys(pressedMap).length);
+        // Key up won't trigger for other keys while Meta is pressed so we need to cache them
+        // and remove on Meta keyup
+        if (eventKey === "meta") {
+            modifiedKeys.push(...Object.keys(pressedMap));
+        }
+        if (pressedMap.Meta) {
+            modifiedKeys.push(eventKey);
+        }
+    }, [hooksCount]);
+    const removePressedKey = React.useCallback((e) => {
+        if (hooksCount === 0)
+            return;
+        const eventKey = getEventKey(e);
+        delete pressedMap[eventKey];
+        if (eventKey === "meta" || eventKey === "control") {
+            delete pressedMap.mod;
+        }
+        if (eventKey === "meta") {
+            modifiedKeys.forEach((key) => {
+                delete pressedMap[key];
+            });
+        }
+        setTriggerCount(Object.keys(pressedMap).length);
+    }, [hooksCount]);
+    const isPressed = (hotkey) => {
+        const keys = formatHotkey(hotkey).split(COMBINATION_DELIMETER);
+        if (keys.some((key) => !pressedMap[key]))
+            return false;
+        return true;
+    };
+    const addHotkeys = React.useCallback((hotkeys, ref) => {
+        setHooksCount((prev) => prev + 1);
+        globalHotkeyStore.bindHotkeys(hotkeys, ref);
+        return () => {
+            setHooksCount((prev) => prev - 1);
+            globalHotkeyStore.unbindHotkeys(hotkeys);
+        };
+    }, []);
+    const handleWindowKeyDown = React.useCallback((e) => {
+        addPressedKey(e);
+        globalHotkeyStore.handleKeyDown(pressedMap, e);
+    }, [addPressedKey]);
+    const handleWindowKeyUp = React.useCallback((e) => {
+        removePressedKey(e);
+        globalHotkeyStore.handleKeyUp(e);
+    }, [removePressedKey]);
+    React.useEffect(() => {
+        window.addEventListener("keydown", handleWindowKeyDown);
+        window.addEventListener("keyup", handleWindowKeyUp);
+        return () => {
+            window.removeEventListener("keydown", handleWindowKeyDown);
+            window.removeEventListener("keyup", handleWindowKeyUp);
+        };
+    }, [handleWindowKeyDown, handleWindowKeyUp]);
+    return (React.createElement(HotkeyContext.Provider, { value: { addHotkeys, isPressed } }, children));
+};
+const useSingletonHotkeys = () => React.useContext(HotkeyContext);
+export default useSingletonHotkeys;

package/hooks/_private/useSingletonKeyboardMode.d.ts

@@ -0,0 +1,2 @@
+declare const useSingletonKeyboardMode: () => void;
+export default useSingletonKeyboardMode;

package/hooks/_private/useSingletonKeyboardMode.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { keyboardModeAttribute } from "../../constants/attributes.js";
+const useSingletonKeyboardMode = () => {
+    React.useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.metaKey || e.altKey || e.ctrlKey)
+                return;
+            document.documentElement.setAttribute(keyboardModeAttribute, "true");
+        };
+        const handleClick = () => {
+            document.documentElement.removeAttribute(keyboardModeAttribute);
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("mousedown", handleClick);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("mousedown", handleClick);
+        };
+    }, []);
+};
+export default useSingletonKeyboardMode;

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

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

package/hooks/tests/useHotkeys.stories.js

@@ -0,0 +1,25 @@
+import React from "react";
+import useHotkeys from "../useHotkeys.js";
+import View from "../../components/View/index.js";
+export default { title: "Hooks/useHotkeys" };
+function Example() {
+    const { checkHotkeyState } = useHotkeys({
+        "shift + b + n": null,
+    });
+    const active = checkHotkeyState("shift + b + n");
+    const shiftActive = checkHotkeyState("shift");
+    const bActive = checkHotkeyState("b");
+    const nActive = checkHotkeyState("n");
+    return (<View animated gap={2} direction="row" backgroundColor={active ? "positive-faded" : undefined} padding={2} borderRadius="small">
+			<View paddingInline={4} paddingBlock={2} borderRadius="small" borderColor="neutral-faded" animated backgroundColor={shiftActive ? "neutral-faded" : "elevation-raised"} shadow={shiftActive ? undefined : "raised"}>
+				Shift
+			</View>
+			<View paddingInline={4} paddingBlock={2} borderRadius="small" borderColor="neutral-faded" animated backgroundColor={bActive ? "neutral-faded" : "elevation-raised"} shadow={bActive ? undefined : "raised"}>
+				b
+			</View>
+			<View paddingInline={4} paddingBlock={2} borderRadius="small" borderColor="neutral-faded" animated backgroundColor={nActive ? "neutral-faded" : "elevation-raised"} shadow={nActive ? undefined : "raised"}>
+				n
+			</View>
+		</View>);
+}
+export const state = () => <Example />;

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

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

package/hooks/tests/useResponsiveClientValue.stories.js

@@ -0,0 +1,13 @@
+import React from "react";
+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 state = () => <Example />;

package/hooks/useElementId.d.ts

@@ -0,0 +1,2 @@
+declare const useElementId: (id?: string) => string;
+export default useElementId;

package/hooks/useElementId.js

@@ -0,0 +1,8 @@
+import React from "react";
+const useElementId = (id) => {
+    const generatedId = React.useId();
+    if (id)
+        return id;
+    return generatedId;
+};
+export default useElementId;

package/hooks/useHotkeys.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare const useHotkeys: <Element_1 extends HTMLElement>(hotkeys: Record<string, ((e: KeyboardEvent) => void) | null>, deps?: unknown[], options?: {
+    ref?: React.RefObject<Element_1> | undefined;
+} | undefined) => {
+    ref: React.RefObject<Element_1>;
+    checkHotkeyState: (key: string) => boolean;
+};
+export default useHotkeys;

package/hooks/useHotkeys.js

@@ -0,0 +1,15 @@
+"use client";
+import React from "react";
+import useSingletonHotkey from "./_private/useSingletonHotkeys.js";
+const useHotkeys = (hotkeys, deps = [], options) => {
+    const { addHotkeys, isPressed } = useSingletonHotkey();
+    const generatedRef = React.useRef(null);
+    const elementRef = (options === null || options === void 0 ? void 0 : options.ref) || generatedRef;
+    React.useEffect(() => {
+        const remove = addHotkeys(hotkeys, elementRef);
+        return () => remove === null || remove === void 0 ? void 0 : remove();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [addHotkeys, Object.keys(hotkeys).join(","), ...deps]);
+    return { ref: elementRef, checkHotkeyState: isPressed };
+};
+export default useHotkeys;

package/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export default useIsomorphicLayoutEffect;

package/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,4 @@
+"use client";
+import React from "react";
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+export default useIsomorphicLayoutEffect;

package/hooks/useRTL.d.ts

@@ -0,0 +1,2 @@
+declare const useRTL: () => [boolean, (state: boolean) => void];
+export default useRTL;

package/hooks/useRTL.js

@@ -0,0 +1,7 @@
+"use client";
+import React from "react";
+import { SingletonEnvironmentContext } from "./_private/useSingletonEnvironment.js";
+const useRTL = () => {
+    return React.useContext(SingletonEnvironmentContext).rtl;
+};
+export default useRTL;

package/hooks/useResponsiveClientValue.d.ts

@@ -0,0 +1,3 @@
+import type * as G from "../types/global";
+declare const useResponsiveClientValue: <T extends unknown>(value: G.ResponsiveOnly<T>) => T | undefined;
+export default useResponsiveClientValue;

package/hooks/useResponsiveClientValue.js

@@ -0,0 +1,43 @@
+"use client";
+import React from "react";
+import { SingletonEnvironmentContext } from "./_private/useSingletonEnvironment.js";
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
+const breakpoints = {
+    m: 660,
+    l: 900,
+    xl: 1280,
+};
+const mediaQueries = {
+    s: `(max-width: ${breakpoints.m - 1}px)`,
+    m: `(min-width: ${breakpoints.m}px) and (max-width: ${breakpoints.l - 1}px)`,
+    l: `(min-width: ${breakpoints.l}px) and (max-width: ${breakpoints.xl - 1}px)`,
+    xl: `(min-width: ${breakpoints.xl}px)`,
+};
+const useResponsiveClientValue = (value) => {
+    const { defaultViewport } = React.useContext(SingletonEnvironmentContext);
+    const [viewport, setViewport] = React.useState(defaultViewport);
+    useIsomorphicLayoutEffect(() => {
+        const viewports = Object.keys(mediaQueries);
+        const matchers = viewports.map((viewport) => {
+            const mq = window.matchMedia(mediaQueries[viewport]);
+            return { mq, handler: () => mq.matches && setViewport(viewport) };
+        });
+        matchers.forEach(({ handler, mq }) => {
+            handler();
+            mq.addEventListener("change", handler);
+        });
+        return () => {
+            matchers.forEach(({ handler, mq }) => {
+                mq.removeEventListener("change", handler);
+            });
+        };
+    }, []);
+    if (viewport === "xl")
+        return value.xl || value.l || value.m || value.s;
+    if (viewport === "l")
+        return value.l || value.m || value.s;
+    if (viewport === "m")
+        return value.m || value.s;
+    return value.s;
+};
+export default useResponsiveClientValue;

package/hooks/useScrollLock.d.ts

@@ -0,0 +1,6 @@
+declare const useScrollLock: () => {
+    scrollLocked: boolean;
+    lockScroll: () => void;
+    unlockScroll: () => void;
+};
+export default useScrollLock;

package/hooks/useScrollLock.js

@@ -0,0 +1,44 @@
+"use client";
+import React from "react";
+const getScrollbarWidth = (() => {
+    let scrollbarWidth;
+    return () => {
+        if (scrollbarWidth)
+            return scrollbarWidth;
+        const scrollDiv = document.createElement("div");
+        scrollDiv.style.position = "absolute";
+        scrollDiv.style.top = "-9999px";
+        scrollDiv.style.width = "50px";
+        scrollDiv.style.height = "50px";
+        scrollDiv.style.overflow = "scroll";
+        document.body.appendChild(scrollDiv);
+        scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
+        document.body.removeChild(scrollDiv);
+        return scrollbarWidth;
+    };
+})();
+const useScrollLock = () => {
+    const [locked, setLocked] = React.useState(false);
+    const overflowStyleRef = React.useRef();
+    const isOverflowingRef = React.useRef(false);
+    const lockScroll = React.useCallback(() => {
+        const { body } = document;
+        const rect = body.getBoundingClientRect();
+        isOverflowingRef.current = rect.left + rect.right < window.innerWidth;
+        overflowStyleRef.current = body.style.overflow;
+        body.style.overflow = "hidden";
+        if (isOverflowingRef.current) {
+            const scrollBarWidth = getScrollbarWidth();
+            document.body.style.paddingRight = `${scrollBarWidth}px`;
+        }
+        setLocked(true);
+    }, [setLocked, isOverflowingRef, overflowStyleRef]);
+    const unlockScroll = React.useCallback(() => {
+        document.body.style.overflow = overflowStyleRef.current || "";
+        if (isOverflowingRef.current)
+            document.body.style.paddingRight = "";
+        setLocked(false);
+    }, [setLocked, isOverflowingRef, overflowStyleRef]);
+    return { scrollLocked: locked, lockScroll, unlockScroll };
+};
+export default useScrollLock;

package/hooks/useToggle.d.ts

@@ -0,0 +1,7 @@
+declare const useToggle: (defaultValue?: boolean) => {
+    active: boolean;
+    activate: () => void;
+    deactivate: () => void;
+    toggle: () => void;
+};
+export default useToggle;

package/hooks/useToggle.js

@@ -0,0 +1,16 @@
+"use client";
+import React from "react";
+const useToggle = (defaultValue) => {
+    const [active, setActive] = React.useState(defaultValue || false);
+    const activate = React.useCallback(() => {
+        setActive(true);
+    }, []);
+    const deactivate = React.useCallback(() => {
+        setActive(false);
+    }, []);
+    const toggle = React.useCallback(() => {
+        setActive((active) => !active);
+    }, []);
+    return { active, activate, deactivate, toggle };
+};
+export default useToggle;

package/icons/ArrowUpRight.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const IconArrowUpRight: () => React.JSX.Element;
+export default IconArrowUpRight;

package/icons/ArrowUpRight.js

@@ -0,0 +1,7 @@
+import React from "react";
+const IconArrowUpRight = () => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+        React.createElement("line", { x1: "7", y1: "17", x2: "17", y2: "7" }),
+        React.createElement("polyline", { points: "7 7 17 7 17 17" })));
+};
+export default IconArrowUpRight;

package/icons/Checkmark.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const IconCheckmark: () => React.JSX.Element;
+export default IconCheckmark;

package/icons/Checkmark.js

@@ -0,0 +1,6 @@
+import React from "react";
+const IconCheckmark = () => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", stroke: "currentColor", fill: "none", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+        React.createElement("polyline", { points: "20 6 9 17 4 12" })));
+};
+export default IconCheckmark;

package/icons/ChevronDown.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const IconChevronDown: () => React.JSX.Element;
+export default IconChevronDown;

package/icons/ChevronDown.js

@@ -0,0 +1,6 @@
+import React from "react";
+const IconChevronDown = () => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", stroke: "currentColor", fill: "none", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+        React.createElement("polyline", { points: "6 9 12 15 18 9" })));
+};
+export default IconChevronDown;

package/icons/ChevronLeft.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const IconChevronLeft: () => React.JSX.Element;
+export default IconChevronLeft;

package/icons/ChevronLeft.js

@@ -0,0 +1,6 @@
+import React from "react";
+const IconChevronLeft = () => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+        React.createElement("polyline", { points: "15 18 9 12 15 6" })));
+};
+export default IconChevronLeft;

package/icons/ChevronRight.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const IconChevronRight: () => React.JSX.Element;
+export default IconChevronRight;

package/icons/ChevronRight.js

@@ -0,0 +1,6 @@
+import React from "react";
+const IconChevronRight = () => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+        React.createElement("polyline", { points: "9 18 15 12 9 6" })));
+};
+export default IconChevronRight;

package/icons/ChevronVertical.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const IconChevronVertical: () => React.JSX.Element;
+export default IconChevronVertical;

package/icons/ChevronVertical.js

@@ -0,0 +1,5 @@
+import React from "react";
+const IconChevronVertical = () => (React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M7 16L12 21L17 16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M17 8L12 3L7 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+export default IconChevronVertical;

package/icons/Close.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const IconClose: () => React.JSX.Element;
+export default IconClose;

package/icons/Close.js

@@ -0,0 +1,7 @@
+import React from "react";
+const IconClose = () => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" },
+        React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
+};
+export default IconClose;

package/icons/DotsHorizontal.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const IconDotsHorizontal: () => React.JSX.Element;
+export default IconDotsHorizontal;