reshaped 2.7.5-beta.0 → 2.8.1

package/hooks/_private/useSingletonHotkeys.js

@@ -1,202 +0,0 @@
-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) => {
-    if (!e.key)
-        return;
-    // 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);
-        if (!eventKey)
-            return;
-        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);
-        if (!eventKey)
-            return;
-        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) => {
-        // Browsers trigger keyboard event without passing e.key when you click on autocomplete
-        if (!e.key)
-            return;
-        addPressedKey(e);
-        globalHotkeyStore.handleKeyDown(pressedMap, e);
-    }, [addPressedKey]);
-    const handleWindowKeyUp = React.useCallback((e) => {
-        if (!e.key)
-            return;
-        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/icons/ArrowUpRight.d.ts

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

package/icons/ArrowUpRight.js

@@ -1,7 +0,0 @@
-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

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

package/icons/Checkmark.js

@@ -1,6 +0,0 @@
-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

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

package/icons/ChevronDown.js

@@ -1,6 +0,0 @@
-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

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

package/icons/ChevronLeft.js

@@ -1,6 +0,0 @@
-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

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

package/icons/ChevronRight.js

@@ -1,6 +0,0 @@
-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

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

package/icons/ChevronVertical.js

@@ -1,5 +0,0 @@
-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

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

package/icons/Close.js

@@ -1,7 +0,0 @@
-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

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

package/icons/DotsHorizontal.js

@@ -1,6 +0,0 @@
-import React from "react";
-const IconDotsHorizontal = () => (React.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("path", { d: "M8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9Z", fill: "currentColor" }),
-    React.createElement("path", { d: "M12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9Z", fill: "currentColor" }),
-    React.createElement("path", { d: "M4 9C4.55228 9 5 8.55228 5 8C5 7.44772 4.55228 7 4 7C3.44772 7 3 7.44772 3 8C3 8.55228 3.44772 9 4 9Z", fill: "currentColor" })));
-export default IconDotsHorizontal;

package/icons/Mic.d.ts

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

package/icons/Mic.js

@@ -1,9 +0,0 @@
-import React from "react";
-const MicIcon = () => {
-    return (React.createElement("svg", { viewBox: "0 0 16 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { d: "M8 1C7.20435 1 6.44129 1.31607 5.87868 1.87868C5.31607 2.44129 5 3.20435 5 4V12C5 12.7956 5.31607 13.5587 5.87868 14.1213C6.44129 14.6839 7.20435 15 8 15C8.79565 15 9.55871 14.6839 10.1213 14.1213C10.6839 13.5587 11 12.7956 11 12V4C11 3.20435 10.6839 2.44129 10.1213 1.87868C9.55871 1.31607 8.79565 1 8 1V1Z", stroke: "currentColor" }),
-        React.createElement("path", { d: "M15 10V12C15 13.8565 14.2625 15.637 12.9497 16.9497C11.637 18.2625 9.85652 19 8 19C6.14348 19 4.36301 18.2625 3.05025 16.9497C1.7375 15.637 1 13.8565 1 12V10", stroke: "currentColor" }),
-        React.createElement("path", { d: "M8 19V23", stroke: "currentColor" }),
-        React.createElement("path", { d: "M4 23H12", stroke: "currentColor" })));
-};
-export default MicIcon;

package/icons/Zap.d.ts

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

package/icons/Zap.js

@@ -1,6 +0,0 @@
-import React from "react";
-const IconZap = () => {
-    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("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2", fill: "currentColor" })));
-};
-export default IconZap;

package/styles/bleed/bleed.module.css

@@ -1 +0,0 @@
-.root{--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s);margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1)}.--bleed{border-left-style:none!important;border-radius:0;border-right-style:none!important}@media (--rs-viewport-m ){.root{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (--rs-viewport-l ){.root{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (--rs-viewport-xl ){.root{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}

package/styles/padding/padding.module.css

@@ -1 +0,0 @@
-.root{--rs-p-s:0;--rs-p-m:var(--rs-p-s);--rs-p-l:var(--rs-p-m);--rs-p-xl:var(--rs-p-l);--rs-p:var(--rs-p-s);padding:calc(var(--rs-p) * var(--rs-unit-x1))}@media (--rs-viewport-m ){.root{--rs-p:var(--rs-p-m)}}@media (--rs-viewport-l ){.root{--rs-p:var(--rs-p-l)}}@media (--rs-viewport-xl ){.root{--rs-p:var(--rs-p-xl)}}

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

@@ -1,153 +0,0 @@
-import React from "react";
-import { Example } from "../../../utilities/storybook/index.js";
-import View from "../../../components/View/index.js";
-import Button from "../../../components/Button/index.js";
-import Badge from "../../../components/Badge/index.js";
-import Alert from "../../../components/Alert/index.js";
-import Card from "../../../components/Card/index.js";
-import Avatar from "../../../components/Avatar/index.js";
-import DropdownMenu from "../../../components/DropdownMenu/index.js";
-import Theme from "../../../components/Theme/index.js";
-import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../../index.js";
-export default { title: "Themes" };
-const css = getThemeCSS("green", {
-    color: {
-        backgroundPrimary: { hex: "#1abc9c", hexDark: "#00E5C4" },
-        backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#00E5C4" },
-    },
-});
-const css2 = getThemeCSS("peach", {
-    color: {
-        backgroundPrimary: { hex: "#ffbe76" },
-        backgroundPrimaryHighlighted: { hex: "#ffbe76" },
-    },
-});
-const cssGenerated = getThemeCSS("generated", Object.assign(Object.assign({}, baseThemeDefinition), { color: generateThemeColors({ primary: "#2563eb" }) }));
-const componentExamples = (<View gap={4}>
-		<View gap={2} direction="row">
-			<Button color="primary">Primary button</Button>
-			<Button color="critical">Primary button</Button>
-			<Button color="positive">Primary button</Button>
-			<Button color="neutral">Primary button</Button>
-		</View>
-		<View gap={2} direction="row">
-			<Button color="primary" variant="outline">
-				Primary button
-			</Button>
-			<Button color="critical" variant="outline">
-				Primary button
-			</Button>
-			<Button color="positive" variant="outline">
-				Primary button
-			</Button>
-			<Button color="neutral" variant="outline">
-				Primary button
-			</Button>
-		</View>
-		<View direction="row" gap={4}>
-			<View.Item columns={6}>
-				<Alert color="primary">Primary</Alert>
-			</View.Item>
-			<View.Item columns={6}>
-				<Alert color="critical">Critical</Alert>
-			</View.Item>
-			<View.Item columns={6}>
-				<Alert color="warning">warning</Alert>
-			</View.Item>
-			<View.Item columns={6}>
-				<Alert color="positive">Positive</Alert>
-			</View.Item>
-			<View.Item columns={6}>
-				<Alert color="neutral">Neutral</Alert>
-			</View.Item>
-			<View.Item columns={12}>
-				<View direction="row" gap={2}>
-					<View backgroundColor="neutral" width={10} height={10}/>
-					<View backgroundColor="neutral-faded" width={10} height={10}/>
-					<View backgroundColor="primary" width={10} height={10}/>
-					<View backgroundColor="primary-faded" width={10} height={10}/>
-					<View backgroundColor="critical" width={10} height={10}/>
-					<View backgroundColor="critical-faded" width={10} height={10}/>
-					<View backgroundColor="warning" width={10} height={10}/>
-					<View backgroundColor="warning-faded" width={10} height={10}/>
-					<View backgroundColor="positive" width={10} height={10}/>
-					<View backgroundColor="positive-faded" width={10} height={10}/>
-				</View>
-			</View.Item>
-			<View.Item columns={12}>
-				<View direction="row" gap={2}>
-					<Avatar initials="RS" color="warning" variant="faded"/>
-					<Badge color="warning">Warning</Badge>
-				</View>
-			</View.Item>
-			<View.Item columns={6}>
-				<Card>
-					<View gap={2} align="start">
-						<Badge variant="outline" color="primary">
-							Badge
-						</Badge>
-						<DropdownMenu>
-							<DropdownMenu.Trigger>
-								{(attributes) => (<Button variant="faded" attributes={attributes}>
-										Menu
-									</Button>)}
-							</DropdownMenu.Trigger>
-							<DropdownMenu.Content>
-								<DropdownMenu.Item>Item 1</DropdownMenu.Item>
-								<DropdownMenu.Item>Item 1</DropdownMenu.Item>
-							</DropdownMenu.Content>
-						</DropdownMenu>
-					</View>
-				</Card>
-			</View.Item>
-		</View>
-	</View>);
-export const base = () => (<Example>
-		<Example.Item title="custom runtime theme">
-			<style>{css}</style>
-			<Theme name="green">
-				<Button color="primary">Primary button</Button>
-			</Theme>
-		</Example.Item>
-		<Example.Item title="on colors generation">
-			<style>{css2}</style>
-			<Theme name="peach">
-				<Button color="primary">Primary button</Button>
-			</Theme>
-		</Example.Item>
-	</Example>);
-export const generation = () => (<Example>
-		<Example.Item>
-			<style>{cssGenerated}</style>
-			<View gap={4}>
-				<View.Item>Generated theme</View.Item>
-				<Theme name="generated">{componentExamples}</Theme>
-				{/* <View.Item>Reshaped theme</View.Item> */}
-				{/* <Theme name="reshaped">{componentExamples}</Theme> */}
-			</View>
-		</Example.Item>
-	</Example>);
-const onColorsCss = getThemeCSS("on-color", {
-    color: {
-        backgroundPrimary: { hex: "#1abc9c", hexDark: "#16a085" },
-        backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#1abc9c" },
-    },
-}, {
-    onColorValues: {
-        primary: {
-            hexLight: "#d1fae5",
-            hexDark: "#022c22",
-        },
-    },
-});
-export const onColors = () => (<Example>
-		<Example.Item title="custom on color values">
-			<style>{onColorsCss}</style>
-			<Theme name="on-color">
-				<View gap={2} direction="row">
-					<Button color="primary">Primary button</Button>
-					<Button color="critical">Critical button</Button>
-				</View>
-			</Theme>
-		</Example.Item>
-	</Example>);

package/themes/_generator/utilities/generateColors.js

@@ -1,131 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const color_1 = require("./color");
-/**
- * Generator
- */
-const FG_L_DARK = 62;
-const generateColorValues = (args) => {
-    const { key, hex } = args;
-    const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
-    const hsl = (0, color_1.hexToHsl)(hex);
-    const rgb = (0, color_1.hexToRgb)(hex);
-    const hsluv = (0, color_1.hexToHsluv)(hex);
-    const luminance = (0, color_1.getRgbLuminance)(rgb);
-    const luminanceDelta = (0, color_1.getLuminanceDelta)(luminance);
-    const hslDark = (0, color_1.getDarkModeColor)(hsl);
-    const bgHex = hex;
-    const bgHexDark = (0, color_1.hslToHex)(hslDark);
-    const hsluvDark = (0, color_1.hexToHsluv)(bgHexDark);
-    const bdHex = (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: hsluv.l - 5 - luminanceDelta }));
-    const bdHexDark = (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: key === "neutral" ? 35 : FG_L_DARK }));
-    const fgHsluv = Object.assign(Object.assign({}, hsluv), { l: 43 });
-    const fgHsluvDark = Object.assign(Object.assign({}, hsluv), { l: key === "neutral" ? 80 : FG_L_DARK });
-    const fgHex = (0, color_1.hsluvToHex)(fgHsluv);
-    const fgHexDark = (0, color_1.hsluvToHex)(fgHsluvDark);
-    const sturationModifier = hsl.s / 40;
-    const bgFadedHex = (0, color_1.rgbToHex)((0, color_1.hslToRgb)(Object.assign(Object.assign({}, hsl), { l: 98 - sturationModifier })));
-    const bgFadedHsluv = (0, color_1.hexToHsluv)(bgFadedHex);
-    const bgFadedHsluvDark = Object.assign(Object.assign({}, hsluv), { l: 16, s: 32 });
-    const bgFadedHexDark = (0, color_1.hsluvToHex)(bgFadedHsluvDark);
-    const fadedLuminance = (0, color_1.getRgbLuminance)((0, color_1.hexToRgb)(bgFadedHex));
-    const fadedLuminanceDark = (0, color_1.getRgbLuminance)((0, color_1.hexToRgb)(bgFadedHexDark));
-    const fadedLuminanceDeltaDark = (0, color_1.getLuminanceDelta)(fadedLuminanceDark);
-    const bdFadedHex = (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, bgFadedHsluv), { s: Math.max(0, bgFadedHsluv.s - 6 - Math.max(0, fadedLuminance - 98) * 20), l: bgFadedHsluv.l - 7 + sturationModifier }));
-    const bdFadedHexDark = (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, bgFadedHsluvDark), { s: 40, l: bgFadedHsluvDark.l + 7 - fadedLuminanceDeltaDark }));
-    const output = {
-        [`background${capitalizedKey}`]: {
-            hex: bgHex,
-            hexDark: bgHexDark,
-        },
-        [`background${capitalizedKey}Faded`]: {
-            hex: bgFadedHex,
-            hexDark: bgFadedHexDark,
-        },
-        [`background${capitalizedKey}Highlighted`]: {
-            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: hsluv.l - 4 })),
-            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: hsluvDark.l + 4 })),
-        },
-        [`border${capitalizedKey}`]: {
-            hex: bdHex,
-            hexDark: bdHexDark,
-        },
-        [`border${capitalizedKey}Faded`]: {
-            hex: bdFadedHex,
-            hexDark: bdFadedHexDark,
-        },
-        [`foreground${capitalizedKey}`]: {
-            hex: fgHex,
-            hexDark: fgHexDark,
-        },
-    };
-    if (key === "neutral") {
-        output[`foreground${capitalizedKey}`] = {
-            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, fgHsluv), { l: 8 })),
-            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, fgHsluvDark), { l: 95 })),
-        };
-        output[`foreground${capitalizedKey}Faded`] = {
-            hex: fgHex,
-            hexDark: fgHexDark,
-        };
-        output[`backgroundDisabled`] = {
-            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: 94 })),
-            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 13 })),
-        };
-        output[`backgroundDisabledFaded`] = {
-            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: 97 })),
-            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 9 })),
-        };
-        output[`borderDisabled`] = {
-            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: 90 })),
-            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 17 })),
-        };
-        output[`foregroundDisabled`] = {
-            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: 82 })),
-            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 31 })),
-        };
-        output[`backgroundElevationBase`] = {
-            hex: "#ffffff",
-            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 8 })),
-        };
-        output[`backgroundElevationRaised`] = {
-            hex: "#ffffff",
-            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 10 })),
-        };
-        output[`backgroundElevationOverlay`] = {
-            hex: "#ffffff",
-            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 12 })),
-        };
-        output[`backgroundPage`] = {
-            hex: "#ffffff",
-            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 5 })),
-        };
-        output[`backgroundPageFaded`] = {
-            hex: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluv), { l: 98 })),
-            hexDark: (0, color_1.hsluvToHex)(Object.assign(Object.assign({}, hsluvDark), { l: 6 })),
-        };
-    }
-    else {
-        output[`foreground${capitalizedKey}`] = {
-            hex: fgHex,
-            hexDark: fgHexDark,
-        };
-    }
-    return output;
-};
-const validateHexColor = (color) => {
-    const hexColorRegex = /^#([A-Fa-f0-9]{3}){2}$/;
-    if (!hexColorRegex.test(color)) {
-        throw new Error(`Invalid hex color: ${color}`);
-    }
-    return color;
-};
-const generate = (args = {}) => {
-    const { primary = "#5a58f2", critical = "#e22c2c", warning = "#facc15", positive = "#118850", neutral = "#dfe2ea", brand, } = args;
-    const primaryColors = generateColorValues({
-        key: "primary",
-        hex: validateHexColor(primary),
-    });
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, primaryColors), generateColorValues({ key: "critical", hex: validateHexColor(critical) })), generateColorValues({ key: "warning", hex: validateHexColor(warning) })), generateColorValues({ key: "positive", hex: validateHexColor(positive) })), generateColorValues({ key: "neutral", hex: validateHexColor(neutral) })), { brand: { hex: brand || primary }, white: { hex: "#ffffff" }, black: { hex: "#000000" } });
-};
-exports.default = generate;

package/utilities/storybook/Example.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-type Props = {
-    title?: string | string[];
-    children?: React.ReactNode;
-};
-declare const Example: {
-    (props: {
-        children: React.ReactNode;
-        title?: React.ReactNode;
-    }): React.JSX.Element;
-    Item: (props: Props) => React.JSX.Element;
-};
-export default Example;