reshaped 3.1.2 → 3.1.4

package/dist/components/Theme/Theme.js

@@ -4,10 +4,12 @@ import React from "react";
 import { classNames } from "../../utilities/helpers.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { ThemeContext } from "./Theme.context.js";
+import { getRootThemeEl } from "./Theme.utilities.js";
 import { useTheme, useGlobalColorMode } from "./useTheme.js";
 import s from "./Theme.module.css";
-const Theme = (props) => {
-    const { name, defaultName, colorMode, children, className } = props;
+const Theme = (props) => _jsx(PrivateTheme, { ...props });
+export const PrivateTheme = (props) => {
+    const { name, defaultName, colorMode, scoped, children, className } = props;
     const [mounted, setMounted] = React.useState(false);
     const [stateTheme, setStateTheme] = React.useState(defaultName);
     const globalColorMode = useGlobalColorMode();
@@ -36,16 +38,15 @@ const Theme = (props) => {
     useIsomorphicLayoutEffect(() => {
         if (!document || !isRootProvider)
             return;
-        const hasColorModeApplied = document.documentElement.getAttribute("data-rs-color-mode");
-        document.documentElement.setAttribute("data-rs-theme", usedTheme);
-        if (!hasColorModeApplied) {
-            document.documentElement.setAttribute("data-rs-color-mode", usedColorMode);
-        }
+        const themeRootEl = getRootThemeEl();
+        const hasColorModeApplied = themeRootEl.getAttribute("data-rs-color-mode");
+        themeRootEl.setAttribute("data-rs-theme", usedTheme);
+        if (!hasColorModeApplied)
+            themeRootEl.setAttribute("data-rs-color-mode", usedColorMode);
         return () => {
-            document.documentElement.removeAttribute("data-rs-theme");
-            if (!hasColorModeApplied) {
-                document.documentElement.removeAttribute("data-rs-color-mode");
-            }
+            themeRootEl.removeAttribute("data-rs-theme");
+            if (!hasColorModeApplied)
+                themeRootEl.removeAttribute("data-rs-color-mode");
         };
     }, [usedTheme, usedColorMode, isRootProvider]);
     const value = React.useMemo(() => ({
@@ -55,6 +56,6 @@ const Theme = (props) => {
         setTheme,
         setRootTheme,
     }), [usedTheme, usedColorMode, setTheme, setRootTheme, rootTheme]);
-    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx("div", { className: rootClassNames, "data-rs-theme": isRootProvider ? undefined : usedTheme, "data-rs-color-mode": isRootProvider || (!colorMode && !mounted) ? undefined : usedColorMode, children: children }) }));
+    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx("div", { className: rootClassNames, "data-rs-root": scoped ? true : undefined, "data-rs-theme": isRootProvider ? undefined : usedTheme, "data-rs-color-mode": isRootProvider || (!colorMode && !mounted) ? undefined : usedColorMode, children: children }) }));
 };
 export default Theme;

package/dist/components/Theme/Theme.types.d.ts

@@ -20,7 +20,11 @@ export type Props = {
     className?: G.ClassName;
     children?: React.ReactNode;
 };
+export type PrivateProps = Props & {
+    scoped?: boolean;
+};
 export type GlobalColorModeProps = {
     defaultMode?: ColorMode;
+    scoped?: boolean;
     children?: React.ReactNode;
 };

package/dist/components/Theme/Theme.utilities.d.ts

@@ -0,0 +1 @@
+export declare const getRootThemeEl: () => Element;

package/dist/components/Theme/Theme.utilities.js

@@ -0,0 +1 @@
+export const getRootThemeEl = () => document.querySelector("[data-rs-root]") || document.documentElement;

package/dist/components/Theme/index.d.ts

@@ -1,4 +1,4 @@
-export { default } from "./Theme";
+export { default, PrivateTheme } from "./Theme";
 export { default as GlobalColorMode } from "./GlobalColorMode";
 export { useTheme } from "./useTheme";
 export type { Props as ThemeProps, GlobalColorModeProps } from "./Theme.types";

package/dist/components/Theme/index.js

@@ -1,3 +1,3 @@
-export { default } from "./Theme.js";
+export { default, PrivateTheme } from "./Theme.js";
 export { default as GlobalColorMode } from "./GlobalColorMode.js";
 export { useTheme } from "./useTheme.js";

package/dist/components/Toast/Toast.types.d.ts

@@ -13,7 +13,7 @@ export type Props = {
     text?: React.ReactNode;
     children?: React.ReactNode;
     actionsSlot?: React.ReactNode;
-    color?: "neutral" | "primary" | "critical" | "positive" | "inverted";
+    color?: "neutral" | "primary" | "critical" | "positive" | "warning" | "inverted";
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Toast/tests/Toast.stories.js

@@ -199,6 +199,22 @@ const Color = () => {
                 icon: IconZap,
                 actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
             });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="color: warning">
+				<Button onClick={() => {
+            const id = toast.show({
+                text: "Event completed",
+                color: "warning",
+                title: "Hey!",
+                icon: IconZap,
+                actionsSlot: [
+                    <Button onClick={() => toast.hide(id)}>Close</Button>,
+                    <Button onClick={() => toast.hide(id)}>Close</Button>,
+                ],
+            });
         }}>
 					Show toast
 				</Button>

package/dist/components/Tooltip/Tooltip.js

@@ -5,9 +5,9 @@ import Text from "../Text/index.js";
 import Flyout from "../_private/Flyout/index.js";
 import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
-    const { id, text, children, onOpen, onClose, position = "bottom", active, disabled, disableContentHover, } = props;
+    const { id, text, children, onOpen, onClose, position = "bottom", containerRef, active, disabled, disableContentHover, } = props;
     if (!text)
         return _jsx(_Fragment, { children: children({}) });
-    return (_jsxs(Flyout, { id: id, active: active, position: position, disabled: disabled, onOpen: onOpen, onClose: onClose, disableContentHover: disableContentHover, triggerType: "hover", children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
+    return (_jsxs(Flyout, { id: id, active: active, position: position, disabled: disabled, onOpen: onOpen, onClose: onClose, disableContentHover: disableContentHover, containerRef: containerRef, triggerType: "hover", children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
 };
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.types.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { FlyoutProps, FlyoutTriggerProps } from "../_private/Flyout";
-export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef"> & {
     children: (attributes: Parameters<FlyoutTriggerProps["children"]>[0] | {}) => React.ReactNode;
     text?: React.ReactNode;
 };

package/dist/components/View/View.js

@@ -17,6 +17,7 @@ import getPositionStyles from "../../styles/position/index.js";
 import getInsetStyles from "../../styles/inset/index.js";
 import getAspectRatioStyles from "../../styles/aspectRatio/index.js";
 import getBorderStyles from "../../styles/border/index.js";
+import getTextAlignStyles from "../../styles/textAlign/index.js";
 const ViewItem = (props) => {
     const { columns, grow, gapBefore, as: TagName = "div", order, children, className, attributes, } = props;
     const itemClassNames = classNames(s.item, className, gapBefore === "auto" && s["item--gap-auto"], gapBefore !== undefined && s["item--gap-before"], columns && s["item--columns"], ...responsiveClassNames(s, "item--grow", grow), ...responsiveClassNames(s, "item--columns", columns));
@@ -63,6 +64,7 @@ const View = (props) => {
     const insetEndStyles = getInsetStyles(insetEnd, "end");
     const aspectRatioStyles = getAspectRatioStyles(aspectRatio);
     const borderStyles = getBorderStyles(borderColor);
+    const textAlignStyles = getTextAlignStyles(textAlign);
     let renderedItemIndex = 0;
     // If wrap is not defined, it can be set based on item grow and split usage
     let nowrap;
@@ -135,7 +137,7 @@ const View = (props) => {
         return renderItem({ child, index: renderedIndex });
     });
     // Classnames and attributes are written here so we can assign nowrap to the root element based on the children
-    const rootClassNames = classNames(s.root, className, radiusStyles?.classNames, positionStyles?.classNames, bleedStyles?.classNames, widthStyles?.classNames, heightStyles?.classNames, aspectRatioStyles?.classNames, maxWidthStyles?.classNames, maxHeightStyles?.classNames, minWidthStyles?.classNames, minHeightStyles?.classNames, insetStyles?.classNames, insetTopStyles?.classNames, insetBottomStyles?.classNames, insetStartStyles?.classNames, insetEndStyles?.classNames, borderStyles?.classNames, textAlign && s[`--align-text-${textAlign}`], backgroundColor && s[`--bg-${backgroundColor}`], shadow && s[`--shadow-${shadow}`], overflow && s[`--overflow-${overflow}`], animated && s["--animated"], divided && s["--divided"], (padding !== undefined || paddingInline !== undefined || paddingBlock !== undefined) &&
+    const rootClassNames = classNames(s.root, className, radiusStyles?.classNames, positionStyles?.classNames, bleedStyles?.classNames, widthStyles?.classNames, heightStyles?.classNames, aspectRatioStyles?.classNames, maxWidthStyles?.classNames, maxHeightStyles?.classNames, minWidthStyles?.classNames, minHeightStyles?.classNames, insetStyles?.classNames, insetTopStyles?.classNames, insetBottomStyles?.classNames, insetStartStyles?.classNames, insetEndStyles?.classNames, borderStyles?.classNames, textAlignStyles?.classNames, backgroundColor && s[`--bg-${backgroundColor}`], shadow && s[`--shadow-${shadow}`], overflow && s[`--overflow-${overflow}`], animated && s["--animated"], divided && s["--divided"], (padding !== undefined || paddingInline !== undefined || paddingBlock !== undefined) &&
         s["--padding"], paddingBottom !== undefined && s["--padding-bottom"], paddingEnd !== undefined && s["--padding-end"], paddingStart !== undefined && s["--padding-start"], paddingTop !== undefined && s["--padding-top"], (isFlex || nowrap) && s["--flex"], ...responsiveClassNames(s, "--direction", direction), ...responsiveClassNames(s, "--align", align), ...responsiveClassNames(s, "--justify", justify), 
     // Wrap and nowrap are separate here because inverting any of them could result into a false value which will be ignored by classNames
     ...responsiveClassNames(s, "--nowrap", nowrap || wrap === false), ...responsiveClassNames(s, "--wrap", wrap), 

package/dist/components/View/View.types.d.ts

@@ -27,7 +27,7 @@ export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
     paddingInline?: G.Responsive<number>;
     paddingBlock?: G.Responsive<number>;
     bleed?: G.Responsive<number>;
-    textAlign?: "center" | "start" | "end";
+    textAlign?: G.Responsive<TStyles.TextAlign>;
     backgroundColor?: "neutral" | "neutral-faded" | "critical" | "critical-faded" | "positive" | "warning" | "warning-faded" | "positive-faded" | "primary" | "primary-faded" | "elevation-base" | "elevation-raised" | "elevation-overlay" | "page" | "page-faded" | "disabled" | "disabled-faded" | "brand" | "white" | "black";
     borderColor?: G.Responsive<TStyles.BorderColor>;
     borderRadius?: G.Responsive<TStyles.Radius>;

package/dist/components/View/tests/View.stories.js

@@ -359,6 +359,10 @@ export const textAlign = () => (<Example>
 		<Example.Item title="textAlign: end">
 			<View textAlign="end">Content</View>
 		</Example.Item>
+
+		<Example.Item title="textAlign: [s] start, [m+] end">
+			<View textAlign={{ s: "start", m: "end" }}>Content</View>
+		</Example.Item>
 	</Example>);
 export const size = () => (<Example>
 		<Example.Item title="height: 100px, width: 100px">

package/dist/components/_private/Aligner/Aligner.module.css

@@ -1 +1 @@
-.root [data-rs-aligner-target]{--rs-aligner-p-h:var(--rs-p-h,var(--rs-p));--rs-aligner-p-v:var(--rs-p-v,var(--rs-p))}.root.--side-all [data-rs-aligner-target]{margin:calc(var(--rs-aligner-p-v) * -1) calc(var(--rs-aligner-p-h) * -1)}.root.--side-inline [data-rs-aligner-target],.root.--side-start [data-rs-aligner-target]{margin-inline-start:calc(var(--rs-aligner-p-h) * -1)}.root.--side-end [data-rs-aligner-target],.root.--side-inline [data-rs-aligner-target]{margin-inline-end:calc(var(--rs-aligner-p-h) * -1)}.root.--side-block [data-rs-aligner-target],.root.--side-top [data-rs-aligner-target]{margin-block-start:calc(var(--rs-aligner-p-v) * -1)}.root.--side-block [data-rs-aligner-target],.root.--side-bottom [data-rs-aligner-target]{margin-block-end:calc(var(--rs-aligner-p-v) * -1)}
+.root [data-rs-aligner-target]{--rs-aligner-p-h:var(--rs-p-h,var(--rs-p,0px));--rs-aligner-p-v:var(--rs-p-v,var(--rs-p,0px))}.root.--side-all [data-rs-aligner-target]{margin:calc(var(--rs-aligner-p-v) * -1) calc(var(--rs-aligner-p-h) * -1)}.root.--side-inline [data-rs-aligner-target],.root.--side-start [data-rs-aligner-target]{margin-inline-start:calc(var(--rs-aligner-p-h) * -1)}.root.--side-end [data-rs-aligner-target],.root.--side-inline [data-rs-aligner-target]{margin-inline-end:calc(var(--rs-aligner-p-h) * -1)}.root.--side-block [data-rs-aligner-target],.root.--side-top [data-rs-aligner-target]{margin-block-start:calc(var(--rs-aligner-p-v) * -1)}.root.--side-block [data-rs-aligner-target],.root.--side-bottom [data-rs-aligner-target]{margin-block-end:calc(var(--rs-aligner-p-v) * -1)}

package/dist/components/_private/Flyout/Flyout.types.d.ts

@@ -50,6 +50,7 @@ export type TriggerAttributes = {
     ref: React.RefObject<HTMLButtonElement>;
     onBlur?: (e: React.FocusEvent) => void;
     onFocus?: () => void;
+    onMouseDown?: () => void;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
     onTouchStart?: () => void;
@@ -107,6 +108,7 @@ export type ContextProps = {
     handleOpen: () => void;
     handleMouseEnter: () => void;
     handleMouseLeave: () => void;
+    handleMouseDown: () => void;
     handleTransitionEnd: (e: React.TransitionEvent) => void;
     handleTransitionStart: (e: TransitionEvent) => void;
     handleClick: () => void;

package/dist/components/_private/Flyout/FlyoutControlled.js

@@ -33,6 +33,7 @@ const FlyoutRoot = (props) => {
      */
     const triggerElRef = (!parentFlyoutContentContext && parentFlyoutTriggerContext?.triggerElRef) ||
         internalTriggerElRef;
+    const triggerBoundsRef = React.useRef();
     const flyoutElRef = React.useRef(null);
     const id = useElementId(passedId);
     const timerRef = React.useRef();
@@ -48,7 +49,10 @@ const FlyoutRoot = (props) => {
     // Touch devices trigger onMouseEnter but we don't need to apply regular hover timeouts
     // So we're saving a flag on touch start and then change the mouse enter behavior
     const hoverTriggeredWithTouchEventRef = React.useRef(false);
-    const flyout = useFlyout(triggerElRef, flyoutElRef, {
+    const flyout = useFlyout({
+        triggerElRef,
+        flyoutElRef,
+        triggerBoundsRef,
         width,
         position: passedPosition,
         defaultActive: resolvedActive,
@@ -91,24 +95,22 @@ const FlyoutRoot = (props) => {
         if (
         // Empty flyouts don't move the focus so they have to be closed on blur
         focusedContent ||
-            // Content menu keeps the focus on the original trigger so moving the focus away from it shouldn't close it
-            (triggerType === "hover" && trapFocusMode === "content-menu") ||
             // Prevent from closing in case user interacts with items inside content
             lockedBlurEffects.current) {
             return;
         }
         handleClose();
-    }, [handleClose, triggerType, trapFocusMode]);
-    const handleTouchStart = React.useCallback(() => {
-        if (triggerType !== "hover")
-            return;
-        hoverTriggeredWithTouchEventRef.current = true;
-    }, [triggerType]);
+    }, [handleClose]);
     const handleFocus = React.useCallback(() => {
         if (triggerType === "hover" && !checkKeyboardMode())
             return;
         handleOpen();
     }, [handleOpen, triggerType]);
+    const handleTouchStart = React.useCallback(() => {
+        if (triggerType !== "hover")
+            return;
+        hoverTriggeredWithTouchEventRef.current = true;
+    }, [triggerType]);
     const handleMouseEnter = React.useCallback(() => {
         clearTimer();
         if (hoverTriggeredWithTouchEventRef.current) {
@@ -134,6 +136,10 @@ const FlyoutRoot = (props) => {
             handleClose();
         }
     }, [status, handleOpen, handleClose]);
+    const handleTriggerMouseDown = React.useCallback(() => {
+        const rect = triggerElRef.current?.getBoundingClientRect();
+        triggerBoundsRef.current = rect;
+    }, [triggerElRef]);
     const handleContentMouseDown = () => {
         lockedBlurEffects.current = true;
         hoverTriggeredWithTouchEventRef.current = true;
@@ -277,6 +283,7 @@ const FlyoutRoot = (props) => {
             handleTouchStart,
             handleTransitionStart,
             handleTransitionEnd,
+            handleMouseDown: handleTriggerMouseDown,
             handleClick: handleTriggerClick,
             handleContentMouseDown,
             handleContentMouseUp,

package/dist/components/_private/Flyout/FlyoutTrigger.js

@@ -3,12 +3,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useFlyoutContext, TriggerProvider } from "./Flyout.context.js";
 const FlyoutTrigger = (props) => {
     const { children } = props;
-    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleTouchStart, handleClick, trapFocusMode, isSubmenu, } = useFlyoutContext();
+    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleMouseDown, handleTouchStart, handleClick, trapFocusMode, isSubmenu, } = useFlyoutContext();
     let childrenAttributes = {
         ref: triggerElRef,
     };
     if (triggerType === "click" || trapFocusMode === "action-menu") {
         childrenAttributes.onClick = handleClick;
+        childrenAttributes.onMouseDown = handleMouseDown;
     }
     if (triggerType === "hover") {
         childrenAttributes.onMouseEnter = handleMouseEnter;

package/dist/components/_private/Flyout/tests/Flyout.stories.js

@@ -91,6 +91,12 @@ export const modes = () => (<Example>
 			</Demo>
 		</Example.Item>
 
+		<Example.Item title="content-menu hover without buttons">
+			<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover">
+				<div style={{ height: 50, width: 50, background: "tomato" }}/>
+			</Demo>
+		</Example.Item>
+
 		<Example.Item title="content-menu hover">
 			<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover">
 				<button type="button">Item 1</button>

package/dist/components/_private/Flyout/useFlyout.d.ts

@@ -11,7 +11,11 @@ type PassedFlyoutOptions = {
     forcePosition?: boolean;
     container?: HTMLElement | null;
 };
-type UseFlyout = (originRef: ElementRef, targetRef: ElementRef, options: PassedFlyoutOptions) => Pick<T.State, "styles" | "position" | "status"> & {
+type UseFlyout = (args: PassedFlyoutOptions & {
+    triggerElRef: ElementRef;
+    flyoutElRef: ElementRef;
+    triggerBoundsRef: React.RefObject<DOMRect | undefined>;
+}) => Pick<T.State, "styles" | "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;
     }) => void;

package/dist/components/_private/Flyout/useFlyout.js

@@ -59,10 +59,11 @@ const resetStyles = {
 /**
  * Set position of the target element to fit on the screen
  */
-const flyout = (triggerEl, flyoutEl, options) => {
+const flyout = (args) => {
+    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, ...options } = args;
     const { position, forcePosition, width, container } = options;
     const targetClone = flyoutEl.cloneNode(true);
-    const triggerBounds = triggerEl.getBoundingClientRect();
+    const triggerBounds = passedTriggerBounds || triggerEl.getBoundingClientRect();
     // Reset all styles applied on the previous hook execution
     targetClone.style = "";
     Object.keys(resetStyles).forEach((key) => {
@@ -155,7 +156,8 @@ const flyoutReducer = (state, action) => {
             throw new Error("Invalid reducer type");
     }
 };
-const useFlyout = (originRef, targetRef, options) => {
+const useFlyout = (args) => {
+    const { triggerElRef, flyoutElRef, triggerBoundsRef, ...options } = args;
     const { position: defaultPosition = "bottom", forcePosition, width, container } = options;
     const [isRTL] = useRTL();
     const [state, dispatch] = React.useReducer(flyoutReducer, {
@@ -176,9 +178,12 @@ const useFlyout = (originRef, targetRef, options) => {
         dispatch({ type: "remove" });
     }, []);
     const updatePosition = React.useCallback((options) => {
-        if (!originRef.current || !targetRef.current)
+        if (!triggerElRef.current || !flyoutElRef.current)
             return;
-        const nextFlyoutData = flyout(originRef.current, targetRef.current, {
+        const nextFlyoutData = flyout({
+            triggerEl: triggerElRef.current,
+            flyoutEl: flyoutElRef.current,
+            triggerBounds: triggerBoundsRef.current,
             width,
             position: defaultPosition,
             forcePosition,
@@ -187,7 +192,16 @@ const useFlyout = (originRef, targetRef, options) => {
         });
         if (nextFlyoutData)
             dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
-    }, [container, defaultPosition, forcePosition, isRTL, originRef, targetRef, width]);
+    }, [
+        container,
+        defaultPosition,
+        forcePosition,
+        isRTL,
+        flyoutElRef,
+        triggerElRef,
+        triggerBoundsRef,
+        width,
+    ]);
     React.useEffect(() => {
         if (state.status === "rendered")
             updatePosition();

package/dist/components/_private/Portal/Portal.types.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 export type Props = {
     children?: React.ReactNode;
-    targetRef?: React.RefObject<HTMLElement | ShadowRoot | null>;
+    targetRef?: React.RefObject<HTMLElement | ShadowRoot>;
 };
 export type ScopeProps<T extends HTMLElement> = {
     children: (ref: React.RefObject<T>) => React.ReactNode;
 };
 export type Context = {
-    scopeRef: React.RefObject<HTMLElement | null>;
+    scopeRef: React.RefObject<HTMLElement>;
 };

package/dist/config/tailwind.js

@@ -45,15 +45,12 @@ export const getTheme = (theme) => {
         config.textColor[cssTokenName] = configValue;
         config.colors[cssTokenName] = configValue;
     });
-    Object.keys(definition.unit).forEach((tokenName) => {
+    Object.keys(definition.radius).forEach((tokenName) => {
         const cssTokenName = camelToKebab(tokenName);
-        const cssVariable = ["rs", "unit", cssTokenName].join("-");
-        const configValue = `var(--${cssVariable})`;
-        if (tokenName.startsWith("radius")) {
-            const name = cssTokenName.replace("radius-", "");
-            config.borderRadius[name] = configValue;
-            return;
-        }
+        config.borderRadius[tokenName] = `var(--rs-radius-${cssTokenName})`;
+        return;
+    });
+    Object.keys(definition.unit).forEach((tokenName) => {
         if (tokenName.startsWith("base")) {
             [...Array(11).keys()].forEach((i) => {
                 if (i === 0) {
@@ -63,7 +60,6 @@ export const getTheme = (theme) => {
                     config.spacing[`x${i}`] = `var(--rs-unit-x${i})`;
                 }
             });
-            return;
         }
     });
     Object.keys(definition.shadow).forEach((tokenName) => {

package/dist/constants/keys.d.ts

@@ -8,3 +8,4 @@ export declare const RIGHT = "ArrowRight";
 export declare const LEFT = "ArrowLeft";
 export declare const HOME = "Home";
 export declare const END = "End";
+export declare const BACKSPACE = "Backspace";

package/dist/constants/keys.js

@@ -8,3 +8,4 @@ export const RIGHT = "ArrowRight";
 export const LEFT = "ArrowLeft";
 export const HOME = "Home";
 export const END = "End";
+export const BACKSPACE = "Backspace";

package/dist/hooks/_private/useSingletonHotkeys.d.ts

@@ -10,17 +10,17 @@ type HotkeyOptions = {
 };
 type Context = {
     isPressed: (key: string) => boolean;
-    addHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options?: HotkeyOptions) => (() => void) | undefined;
+    addHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement>, options?: HotkeyOptions) => (() => void) | undefined;
 };
 type HotkeyData = {
     callback: Callback;
-    ref: React.RefObject<HTMLElement | null>;
+    ref: React.RefObject<HTMLElement>;
     options: HotkeyOptions;
 };
 export declare class HotkeyStore {
     hotkeyMap: Record<string, Set<HotkeyData>>;
     getSize: () => number;
-    bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options: HotkeyOptions) => void;
+    bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement>, options: HotkeyOptions) => void;
     unbindHotkeys: (hotkeys: Hotkeys) => void;
     handleKeyDown: (pressedMap: PressedMap, e: KeyboardEvent) => void;
 }

package/dist/hooks/useDrag.d.ts

@@ -10,7 +10,7 @@ declare const useDrag: <TriggerElement extends HTMLElement = HTMLButtonElement,
     containerRef?: React.RefObject<ContainerElement>;
     orientation?: "horizontal" | "vertical" | "all";
 }) => {
-    ref: React.MutableRefObject<TriggerElement | null>;
+    ref: React.RefObject<TriggerElement>;
     containerRef: React.RefObject<ContainerElement>;
     active: boolean;
 };

package/dist/hooks/useResponsiveClientValue.js

@@ -36,11 +36,11 @@ const useResponsiveClientValue = (value) => {
         return value;
     }
     if (viewport === "xl")
-        return value.xl || value.l || value.m || value.s;
+        return value.xl ?? value.l ?? value.m ?? value.s;
     if (viewport === "l")
-        return value.l || value.m || value.s;
+        return value.l ?? value.m ?? value.s;
     if (viewport === "m")
-        return value.m || value.s;
+        return value.m ?? value.s;
     return value.s;
 };
 export default useResponsiveClientValue;

package/dist/icons/Plus.d.ts

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

package/dist/icons/Plus.js

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

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export type { ActionBarProps } from "./components/ActionBar";
 export { default as Alert } from "./components/Alert";
 export type { AlertProps } from "./components/Alert";
 export { default as Autocomplete } from "./components/Autocomplete";
-export type { AutocompleteProps } from "./components/Autocomplete";
+export type { AutocompleteProps, AutocompleteInstance } from "./components/Autocomplete";
 export { default as Avatar } from "./components/Avatar";
 export type { AvatarProps } from "./components/Avatar";
 export { default as Badge } from "./components/Badge";

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

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

package/dist/styles/textAlign/index.js

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

package/dist/styles/textAlign/textAlign.module.css

@@ -0,0 +1 @@
+.--text-align-start{text-align:start}.--text-align-center{text-align:center}.--text-align-end{text-align:end}@media (--rs-viewport-m ){.--text-align-start--m{text-align:start}.--text-align-center--m{text-align:center}.--text-align-end--m{text-align:end}}@media (--rs-viewport-l ){.--text-align-start--l{text-align:start}.--text-align-center--l{text-align:center}.--text-align-end--l{text-align:end}}@media (--rs-viewport-xl ){.--text-align-start--xl{text-align:start}.--text-align-center--xl{text-align:center}.--text-align-end--xl{text-align:end}}

package/dist/styles/types.d.ts

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

package/dist/themes/_generator/tokens/font/font.transforms.js

@@ -1,5 +1,5 @@
 import { getVariableName } from "../../utilities/css.js";
-const BASE_REM_SIZE = 14;
+const BASE_REM_SIZE = 16;
 const transformedToken = (name, token) => {
     const result = [];
     result.push({

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

@@ -38,8 +38,8 @@ const generateColorValues = (args) => {
      */
     const bgHex = hex;
     const bgHexDark = okhslToHex(okhslDark);
-    const bgFadedHsl = { ...okhsl, l: 0.94 + 0.045 * hueLightness };
-    const bgFadedHslDark = { ...okhslDark, l: 0.16, s: okhslDark.s / 2 };
+    const bgFadedHsl = key === "neutral" ? { ...okhsl, l: 0.96 } : { ...okhsl, l: 0.94 + 0.045 * hueLightness };
+    const bgFadedHslDark = key === "neutral" ? { ...okhslDark, l: 0.15 } : { ...okhslDark, l: 0.16, s: okhslDark.s / 2 };
     const bgFadedHex = okhslToHex(bgFadedHsl);
     const bgFadedHexDark = okhslToHex(bgFadedHslDark);
     /**

package/dist/themes/figma/theme.css

@@ -1 +1 @@
-[data-rs-theme=figma]{--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:5.714285714285714rem;--rs-line-height-title-1:6rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-semibold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:4.571428571428571rem;--rs-line-height-title-2:4.857142857142857rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-semibold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.285714285714286rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-semibold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:2.857142857142857rem;--rs-line-height-title-4:3.142857142857143rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-semibold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:2.5714285714285716rem;--rs-line-height-title-5:2.857142857142857rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-semibold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:1.7142857142857142rem;--rs-line-height-title-6:2rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-semibold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:1.5714285714285714rem;--rs-line-height-featured-1:2rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.4285714285714286rem;--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.2857142857142858rem;--rs-line-height-featured-3:1.7142857142857142rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1rem;--rs-line-height-body-1:1.4285714285714286rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:0.9285714285714286rem;--rs-line-height-body-2:1.4285714285714286rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.7857142857142857rem;--rs-line-height-body-3:1.1428571428571428rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.7857142857142857rem;--rs-line-height-caption-1:1.1428571428571428rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.7142857142857143rem;--rs-line-height-caption-2:0.8571428571428571rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-radius-small:4px;--rs-unit-radius-medium:4px;--rs-unit-radius-large: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:#5a58f2;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#000;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#000;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--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 3px 0px rgba(0,0,0,.15);--rs-shadow-overlay:0px 10px 24px 0px rgba(0,0,0,.1),0px 2px 5px 0px rgba(0,0,0,.04)}[data-rs-theme=figma][data-rs-color-mode=light]{--rs-color-background-primary:#0d99ff;--rs-color-background-primary-faded:#e5f4ff;--rs-color-border-primary:#007be5;--rs-color-border-primary-faded:#bde3ff;--rs-color-foreground-primary:#007be5;--rs-color-background-critical:#f24822;--rs-color-background-critical-faded:#ffe2e0;--rs-color-border-critical:#dc3412;--rs-color-border-critical-faded:#ffc7c2;--rs-color-foreground-critical:#dc3412;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fffae9;--rs-color-border-warning:#cfa90f;--rs-color-border-warning-faded:#faedbb;--rs-color-foreground-warning:#7b6305;--rs-color-background-positive:#14ae5c;--rs-color-background-positive-faded:#daecdf;--rs-color-border-positive:#009951;--rs-color-border-positive-faded:#bbddc6;--rs-color-foreground-positive:#009951;--rs-color-background-neutral:#dfe2ea;--rs-color-background-neutral-faded:#f5f5f5;--rs-color-border-neutral:#e6e6e6;--rs-color-border-neutral-faded:#e6e6e6;--rs-color-foreground-neutral:#191919;--rs-color-foreground-neutral-faded:#474747;--rs-color-background-disabled:#e4e4e4;--rs-color-background-disabled-faded:#f5f5f5;--rs-color-border-disabled:#e6e6e6;--rs-color-foreground-disabled:#b2b2b2;--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:#fafafa;--rs-color-background-neutral-highlighted:#d4d8e3;--rs-color-background-primary-highlighted:#007be5;--rs-color-background-positive-highlighted:#009951;--rs-color-background-critical-highlighted:#dc3412;--rs-color-rgb-background-primary:13,153,255;--rs-color-rgb-background-primary-faded:229,244,255;--rs-color-rgb-background-critical:242,72,34;--rs-color-rgb-background-critical-faded:255,226,224;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,250,233;--rs-color-rgb-background-positive:20,174,92;--rs-color-rgb-background-positive-faded:218,236,223;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:223,226,234;--rs-color-rgb-background-neutral-faded:245,245,245;--rs-color-rgb-background-disabled:228,228,228;--rs-color-rgb-background-disabled-faded:245,245,245;--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,250,250;--rs-color-rgb-background-neutral-highlighted:212,216,227;--rs-color-rgb-background-primary-highlighted:0,123,229;--rs-color-rgb-background-positive-highlighted:0,153,81;--rs-color-rgb-background-critical-highlighted:220,52,18}[data-rs-theme=figma][data-rs-color-mode=dark]{--rs-color-background-primary:#0c8ce9;--rs-color-background-primary-faded:#394360;--rs-color-border-primary:#7cc4f8;--rs-color-border-primary-faded:#2a4d72;--rs-color-foreground-primary:#7cc4f8;--rs-color-background-critical:#e03e1a;--rs-color-background-critical-faded:#60332a;--rs-color-border-critical:#fca397;--rs-color-border-critical-faded:#803226;--rs-color-foreground-critical:#fca397;--rs-color-background-warning:#f1c512;--rs-color-background-warning-faded:#2c271f;--rs-color-border-warning:#b4920a;--rs-color-border-warning-faded:#3d3628;--rs-color-foreground-warning:#b4920c;--rs-color-background-positive:#198f51;--rs-color-background-positive-faded:#3d5749;--rs-color-border-positive:#79d297;--rs-color-border-positive-faded:#086338;--rs-color-foreground-positive:#79d297;--rs-color-background-neutral:#444;--rs-color-background-neutral-faded:#383838;--rs-color-border-neutral:#444;--rs-color-border-neutral-faded:#444;--rs-color-foreground-neutral:#fff;--rs-color-foreground-neutral-faded:#b2b2b2;--rs-color-background-disabled:#474747;--rs-color-background-disabled-faded:#3a3a3a;--rs-color-border-disabled:#3e3e3e;--rs-color-foreground-disabled:#656565;--rs-color-background-elevation-base:#2c2c2c;--rs-color-background-elevation-raised:#2c2c2c;--rs-color-background-elevation-overlay:#2c2c2c;--rs-color-background-page:#2c2c2c;--rs-color-background-page-faded:#1e1e1e;--rs-color-background-neutral-highlighted:#525252;--rs-color-background-primary-highlighted:#0a6dc2;--rs-color-background-positive-highlighted:#078348;--rs-color-background-critical-highlighted:#c4381c;--rs-color-rgb-background-primary:12,140,233;--rs-color-rgb-background-primary-faded:57,67,96;--rs-color-rgb-background-critical:224,62,26;--rs-color-rgb-background-critical-faded:96,51,42;--rs-color-rgb-background-warning:241,197,18;--rs-color-rgb-background-warning-faded:44,39,31;--rs-color-rgb-background-positive:25,143,81;--rs-color-rgb-background-positive-faded:61,87,73;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:68,68,68;--rs-color-rgb-background-neutral-faded:56,56,56;--rs-color-rgb-background-disabled:71,71,71;--rs-color-rgb-background-disabled-faded:58,58,58;--rs-color-rgb-background-elevation-base:44,44,44;--rs-color-rgb-background-elevation-raised:44,44,44;--rs-color-rgb-background-elevation-overlay:44,44,44;--rs-color-rgb-background-page:44,44,44;--rs-color-rgb-background-page-faded:30,30,30;--rs-color-rgb-background-neutral-highlighted:82,82,82;--rs-color-rgb-background-primary-highlighted:10,109,194;--rs-color-rgb-background-positive-highlighted:7,131,72;--rs-color-rgb-background-critical-highlighted:196,56,28}
+[data-rs-theme=figma]{--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:5rem;--rs-line-height-title-1:5.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-semibold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:4rem;--rs-line-height-title-2:4.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-semibold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:3.5rem;--rs-line-height-title-3:3.75rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-semibold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:2.5rem;--rs-line-height-title-4:2.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-semibold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:2.25rem;--rs-line-height-title-5:2.5rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-semibold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:1.5rem;--rs-line-height-title-6:1.75rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-semibold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:1.375rem;--rs-line-height-featured-1:1.75rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.25rem;--rs-line-height-featured-2:1.75rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.125rem;--rs-line-height-featured-3:1.5rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:0.875rem;--rs-line-height-body-1:1.25rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:0.8125rem;--rs-line-height-body-2:1.25rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.6875rem;--rs-line-height-body-3:1rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.6875rem;--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-radius-small:4px;--rs-unit-radius-medium:4px;--rs-unit-radius-large: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:#5a58f2;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#000;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#000;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--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 3px 0px rgba(0,0,0,.15);--rs-shadow-overlay:0px 10px 24px 0px rgba(0,0,0,.1),0px 2px 5px 0px rgba(0,0,0,.04)}[data-rs-theme=figma][data-rs-color-mode=light]{--rs-color-background-primary:#0d99ff;--rs-color-background-primary-faded:#e5f4ff;--rs-color-border-primary:#007be5;--rs-color-border-primary-faded:#bde3ff;--rs-color-foreground-primary:#007be5;--rs-color-background-critical:#f24822;--rs-color-background-critical-faded:#ffe2e0;--rs-color-border-critical:#dc3412;--rs-color-border-critical-faded:#ffc7c2;--rs-color-foreground-critical:#dc3412;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fffae9;--rs-color-border-warning:#cfa90f;--rs-color-border-warning-faded:#faedbb;--rs-color-foreground-warning:#7b6305;--rs-color-background-positive:#14ae5c;--rs-color-background-positive-faded:#daecdf;--rs-color-border-positive:#009951;--rs-color-border-positive-faded:#bbddc6;--rs-color-foreground-positive:#009951;--rs-color-background-neutral:#dfe2ea;--rs-color-background-neutral-faded:#f5f5f5;--rs-color-border-neutral:#e6e6e6;--rs-color-border-neutral-faded:#e6e6e6;--rs-color-foreground-neutral:#191919;--rs-color-foreground-neutral-faded:#474747;--rs-color-background-disabled:#e4e4e4;--rs-color-background-disabled-faded:#f5f5f5;--rs-color-border-disabled:#e6e6e6;--rs-color-foreground-disabled:#b2b2b2;--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:#fafafa;--rs-color-background-neutral-highlighted:#d4d8e3;--rs-color-background-primary-highlighted:#007be5;--rs-color-background-positive-highlighted:#009951;--rs-color-background-critical-highlighted:#dc3412;--rs-color-rgb-background-primary:13,153,255;--rs-color-rgb-background-primary-faded:229,244,255;--rs-color-rgb-background-critical:242,72,34;--rs-color-rgb-background-critical-faded:255,226,224;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,250,233;--rs-color-rgb-background-positive:20,174,92;--rs-color-rgb-background-positive-faded:218,236,223;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:223,226,234;--rs-color-rgb-background-neutral-faded:245,245,245;--rs-color-rgb-background-disabled:228,228,228;--rs-color-rgb-background-disabled-faded:245,245,245;--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,250,250;--rs-color-rgb-background-neutral-highlighted:212,216,227;--rs-color-rgb-background-primary-highlighted:0,123,229;--rs-color-rgb-background-positive-highlighted:0,153,81;--rs-color-rgb-background-critical-highlighted:220,52,18}[data-rs-theme=figma][data-rs-color-mode=dark]{--rs-color-background-primary:#0c8ce9;--rs-color-background-primary-faded:#394360;--rs-color-border-primary:#7cc4f8;--rs-color-border-primary-faded:#2a4d72;--rs-color-foreground-primary:#7cc4f8;--rs-color-background-critical:#e03e1a;--rs-color-background-critical-faded:#60332a;--rs-color-border-critical:#fca397;--rs-color-border-critical-faded:#803226;--rs-color-foreground-critical:#fca397;--rs-color-background-warning:#f1c512;--rs-color-background-warning-faded:#2c271f;--rs-color-border-warning:#b4920a;--rs-color-border-warning-faded:#3d3628;--rs-color-foreground-warning:#b4920c;--rs-color-background-positive:#198f51;--rs-color-background-positive-faded:#3d5749;--rs-color-border-positive:#79d297;--rs-color-border-positive-faded:#086338;--rs-color-foreground-positive:#79d297;--rs-color-background-neutral:#444;--rs-color-background-neutral-faded:#383838;--rs-color-border-neutral:#444;--rs-color-border-neutral-faded:#444;--rs-color-foreground-neutral:#fff;--rs-color-foreground-neutral-faded:#b2b2b2;--rs-color-background-disabled:#474747;--rs-color-background-disabled-faded:#3a3a3a;--rs-color-border-disabled:#3e3e3e;--rs-color-foreground-disabled:#656565;--rs-color-background-elevation-base:#2c2c2c;--rs-color-background-elevation-raised:#2c2c2c;--rs-color-background-elevation-overlay:#2c2c2c;--rs-color-background-page:#2c2c2c;--rs-color-background-page-faded:#1e1e1e;--rs-color-background-neutral-highlighted:#525252;--rs-color-background-primary-highlighted:#0a6dc2;--rs-color-background-positive-highlighted:#078348;--rs-color-background-critical-highlighted:#c4381c;--rs-color-rgb-background-primary:12,140,233;--rs-color-rgb-background-primary-faded:57,67,96;--rs-color-rgb-background-critical:224,62,26;--rs-color-rgb-background-critical-faded:96,51,42;--rs-color-rgb-background-warning:241,197,18;--rs-color-rgb-background-warning-faded:44,39,31;--rs-color-rgb-background-positive:25,143,81;--rs-color-rgb-background-positive-faded:61,87,73;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:68,68,68;--rs-color-rgb-background-neutral-faded:56,56,56;--rs-color-rgb-background-disabled:71,71,71;--rs-color-rgb-background-disabled-faded:58,58,58;--rs-color-rgb-background-elevation-base:44,44,44;--rs-color-rgb-background-elevation-raised:44,44,44;--rs-color-rgb-background-elevation-overlay:44,44,44;--rs-color-rgb-background-page:44,44,44;--rs-color-rgb-background-page-faded:30,30,30;--rs-color-rgb-background-neutral-highlighted:82,82,82;--rs-color-rgb-background-primary-highlighted:10,109,194;--rs-color-rgb-background-positive-highlighted:7,131,72;--rs-color-rgb-background-critical-highlighted:196,56,28}