reshaped 2.7.5-beta.0 → 2.8.1

package/dist/hooks/_private/useSingletonHotkeys.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx(HotkeyContext.Provider, { value: { addHotkeys, isPressed }, children: children }));
+};
+const useSingletonHotkeys = () => React.useContext(HotkeyContext);
+export default useSingletonHotkeys;

package/dist/icons/ArrowUpRight.d.ts

@@ -0,0 +1,2 @@
+declare const IconArrowUpRight: () => import("react/jsx-runtime").JSX.Element;
+export default IconArrowUpRight;

package/dist/icons/ArrowUpRight.js

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

package/dist/icons/Checkmark.d.ts

@@ -0,0 +1,2 @@
+declare const IconCheckmark: () => import("react/jsx-runtime").JSX.Element;
+export default IconCheckmark;

package/dist/icons/Checkmark.js

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

package/dist/icons/ChevronDown.d.ts

@@ -0,0 +1,2 @@
+declare const IconChevronDown: () => import("react/jsx-runtime").JSX.Element;
+export default IconChevronDown;

package/dist/icons/ChevronDown.js

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

package/dist/icons/ChevronLeft.d.ts

@@ -0,0 +1,2 @@
+declare const IconChevronLeft: () => import("react/jsx-runtime").JSX.Element;
+export default IconChevronLeft;

package/dist/icons/ChevronLeft.js

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

package/dist/icons/ChevronRight.d.ts

@@ -0,0 +1,2 @@
+declare const IconChevronRight: () => import("react/jsx-runtime").JSX.Element;
+export default IconChevronRight;

package/dist/icons/ChevronRight.js

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

package/dist/icons/ChevronVertical.d.ts

@@ -0,0 +1,2 @@
+declare const IconChevronVertical: () => import("react/jsx-runtime").JSX.Element;
+export default IconChevronVertical;

package/dist/icons/ChevronVertical.js

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

package/dist/icons/Close.d.ts

@@ -0,0 +1,2 @@
+declare const IconClose: () => import("react/jsx-runtime").JSX.Element;
+export default IconClose;

package/dist/icons/Close.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IconClose = () => {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+};
+export default IconClose;

package/dist/icons/DotsHorizontal.d.ts

@@ -0,0 +1,2 @@
+declare const IconDotsHorizontal: () => import("react/jsx-runtime").JSX.Element;
+export default IconDotsHorizontal;

package/dist/icons/DotsHorizontal.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IconDotsHorizontal = () => (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("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" }), _jsx("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" }), _jsx("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/dist/icons/Mic.d.ts

@@ -0,0 +1,2 @@
+declare const MicIcon: () => import("react/jsx-runtime").JSX.Element;
+export default MicIcon;

package/dist/icons/Mic.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MicIcon = () => {
+    return (_jsxs("svg", { viewBox: "0 0 16 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("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" }), _jsx("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" }), _jsx("path", { d: "M8 19V23", stroke: "currentColor" }), _jsx("path", { d: "M4 23H12", stroke: "currentColor" })] }));
+};
+export default MicIcon;

package/dist/icons/Zap.d.ts

@@ -0,0 +1,2 @@
+declare const IconZap: () => import("react/jsx-runtime").JSX.Element;
+export default IconZap;

package/dist/icons/Zap.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const IconZap = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2", fill: "currentColor" }) }));
+};
+export default IconZap;

package/dist/styles/bleed/bleed.module.css

@@ -0,0 +1 @@
+.root{margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);--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)}.--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/dist/styles/minHeight/index.js

@@ -0,0 +1,10 @@
+import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import s from "./minHeight.module.css";
+const getMinWidthStyles = (value) => {
+    if (!value)
+        return null;
+    const variables = responsiveVariables("--rs-min-h", value);
+    const classNames = responsiveClassNames(s, (value) => (typeof value === "number" ? "unit" : "literal"), value, { excludeValueFromClassName: true });
+    return { classNames, variables };
+};
+export default getMinWidthStyles;

package/dist/styles/minHeight/minHeight.module.css

@@ -0,0 +1 @@
+.literal{min-height:var(--rs-min-h-s,auto)}.unit{min-height:calc(var(--rs-min-h-s) * var(--rs-unit-x1))}@media (--rs-viewport-m ){.literal--m{min-height:var(--rs-min-h-m)}.unit--m{min-height:calc(var(--rs-min-h-m) * var(--rs-unit-x1))}}@media (--rs-viewport-l ){.literal--l{min-height:var(--rs-min-h-l)}.unit--l{min-height:calc(var(--rs-min-h-l) * var(--rs-unit-x1))}}@media (--rs-viewport-xl ){.literal--xl{min-height:var(--rs-min-h-xl)}.unit--xl{min-height:calc(var(--rs-min-h-xl) * var(--rs-unit-x1))}}

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

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getMinWidthStyles: T.DynamicStyleUtility<string | number>;
+export default getMinWidthStyles;

package/dist/styles/padding/padding.module.css

@@ -0,0 +1 @@
+.root{padding:calc(var(--rs-p) * var(--rs-unit-x1));--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)}@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/dist/tests/themingWithDefinition.js

@@ -0,0 +1,5 @@
+/**
+ * File importing theming client to test its bundle size
+ */
+import * as themes from "../themes/index.js";
+console.log(themes);

package/dist/tests/themingWithoutDefinition.js

@@ -0,0 +1,5 @@
+/**
+ * File importing theming client to test its bundle size
+ */
+import { getThemeCSS, generateThemeColors } from "../themes/index.js";
+console.log({ getThemeCSS, generateThemeColors });

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

@@ -0,0 +1,176 @@
+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={12}>
+				<View direction="row">
+					<View padding={4} gap={4} backgroundColor="page">
+						Page
+						<View backgroundColor="neutral" padding={4}>
+							Neutral
+						</View>
+						<View backgroundColor="neutral-faded" padding={4}>
+							Neutral faded
+						</View>
+					</View>
+
+					<View padding={4} gap={4} backgroundColor="page-faded">
+						Page faded
+						<View backgroundColor="neutral" padding={4}>
+							Neutral
+						</View>
+						<View backgroundColor="neutral-faded" padding={4}>
+							Neutral faded
+						</View>
+					</View>
+				</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>);