reshaped 4.2.0-canary.0 → 4.2.0

package/dist/components/Expandable/Expandable.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "@reshaped/utilities";
+import useHandlerRef from "../../hooks/useHandlerRef";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
+import { onNextFrame, checkTransitions } from "../../utilities/animation";
+import s from "./Expandable.module.css";
+const Expandable = (props) => {
+    const { children, active, orientation = "vertical", onAfterClose, className, attributes } = props;
+    const horizontal = orientation === "horizontal";
+    const sizeProperty = horizontal ? "width" : "height";
+    // Horizontal expanding is based on the content width, since auto would resolve to the available one
+    const autoSize = horizontal ? "max-content" : "auto";
+    const rootRef = React.useRef(null);
+    const mountedRef = React.useRef(false);
+    const animatedActiveRef = React.useRef(active);
+    const frameRef = React.useRef(null);
+    const onAfterCloseRef = useHandlerRef(onAfterClose);
+    const [animatedSize, setAnimatedSize] = React.useState(active ? autoSize : null);
+    // Landmark roles have to be labelled, otherwise they pollute the page landmark navigation
+    const labelled = Boolean(attributes?.["aria-label"] || attributes?.["aria-labelledby"]);
+    const rootClassNames = classNames(s.root, s[`--orientation-${orientation}`], animatedSize !== null && animatedSize !== 0 && s["--visible"], mountedRef.current && animatedSize !== autoSize && s["--animated"], className);
+    const handleTransitionEnd = (e) => {
+        if (e.propertyName !== sizeProperty || e.target !== rootRef.current)
+            return;
+        setAnimatedSize(active ? autoSize : null);
+        if (!active)
+            onAfterCloseRef.current?.();
+    };
+    // Avoid animations happening if component is active by default
+    // onNextFrame lets us wait for the component to render first
+    React.useEffect(() => {
+        onNextFrame(() => {
+            mountedRef.current = true;
+        });
+    }, []);
+    // Animating only on the active prop change keeps React from replaying the animation
+    // when it tears down and sets up the effects of the mounted component again
+    useIsomorphicLayoutEffect(() => {
+        const rootEl = rootRef.current;
+        const activeChanged = animatedActiveRef.current !== active;
+        animatedActiveRef.current = active;
+        if (!rootEl || !activeChanged)
+            return;
+        if (frameRef.current !== null)
+            cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+        const settle = () => {
+            rootEl.style[sizeProperty] = "";
+            setAnimatedSize(active ? autoSize : null);
+            if (!active)
+                onAfterCloseRef.current?.();
+        };
+        if (!mountedRef.current || !checkTransitions()) {
+            settle();
+            return;
+        }
+        const measure = () => (horizontal ? rootEl.clientWidth : rootEl.clientHeight);
+        const currentSize = measure();
+        if (active)
+            rootEl.style[sizeProperty] = autoSize;
+        const targetSize = active ? measure() : 0;
+        if (targetSize === currentSize) {
+            settle();
+            return;
+        }
+        rootEl.style[sizeProperty] = `${currentSize}px`;
+        frameRef.current = requestAnimationFrame(() => {
+            frameRef.current = null;
+            setAnimatedSize(targetSize);
+        });
+    }, [active, horizontal, sizeProperty, autoSize, onAfterCloseRef]);
+    return (_jsx("div", { ...attributes, className: rootClassNames, ref: rootRef, style: animatedSize !== null
+            ? {
+                width: horizontal ? animatedSize : undefined,
+                height: horizontal ? undefined : animatedSize,
+                overflow: animatedSize === autoSize ? "visible" : undefined,
+            }
+            : undefined, onTransitionEnd: handleTransitionEnd, 
+        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role
+        role: labelled ? "region" : undefined, hidden: !active && animatedSize === null, children: horizontal ? _jsx("div", { className: s.content, children: children }) : children }));
+};
+Expandable.displayName = "Expandable";
+export default Expandable;

package/dist/components/Expandable/Expandable.module.css

@@ -0,0 +1 @@
+.root{overflow:hidden;position:relative;opacity:0}.root.--orientation-vertical{height:0}.root.--orientation-horizontal{width:0;min-width:0}.--orientation-horizontal>.content{width:max-content}.root.--visible{opacity:1}.root.--animated{transition:opacity var(--rs-duration-medium) var(--rs-easing-standard)}.root.--animated.--orientation-vertical{transition:height var(--rs-duration-medium) var(--rs-easing-standard),opacity var(--rs-duration-medium) var(--rs-easing-standard)}.root.--animated.--orientation-horizontal{transition:width var(--rs-duration-medium) var(--rs-easing-standard),opacity var(--rs-duration-medium) var(--rs-easing-standard)}

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

@@ -0,0 +1,18 @@
+import type React from "react";
+import type { ClassName } from "@reshaped/utilities";
+import type { Attributes } from "../../types/global";
+export type Orientation = "vertical" | "horizontal";
+export type Props = {
+    /** Node for inserting the content */
+    children?: React.ReactNode;
+    /** Control the visibility of the content */
+    active?: boolean;
+    /** Axis the content expands along */
+    orientation?: Orientation;
+    /** Callback after the content close transition is complete */
+    onAfterClose?: () => void;
+    /** Additional classname for the root element */
+    className?: ClassName;
+    /** Additional attributes for the root element */
+    attributes?: Attributes<"div">;
+};

package/dist/components/Expandable/Expandable.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default } from "./Expandable";
+export type { Props as ExpandableProps } from "./Expandable.types";

package/dist/components/Expandable/tests/Expandable.stories.d.ts

@@ -0,0 +1,12 @@
+import { StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Mock } from "storybook/test";
+declare const _default: {
+    title: string;
+    component: React.FC<import("../../../components/Expandable").ExpandableProps>;
+};
+export default _default;
+export declare const base: StoryObj;
+export declare const onAfterClose: StoryObj<{
+    handleAfterClose: Mock;
+}>;

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

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onAfterClose = exports.base = void 0;
+const react_1 = __importDefault(require("react"));
+const test_1 = require("storybook/test");
+const Button_1 = __importDefault(require("../../../components/Button"));
+const Expandable_1 = __importDefault(require("../../../components/Expandable"));
+const View_1 = __importDefault(require("../../../components/View"));
+const animation_1 = require("../../../utilities/animation");
+const storybook_1 = require("../../../utilities/storybook");
+exports.default = {
+    title: "Utility components/Expandable",
+    component: Expandable_1.default,
+};
+exports.base = {
+    name: "orientation",
+    render: () => {
+        const [active, setActive] = react_1.default.useState(false);
+        const [activeHorizontal, setActiveHorizontal] = react_1.default.useState(false);
+        return (<storybook_1.Example>
+				<storybook_1.Example.Item title="orientation: vertical">
+					<View_1.default align="start">
+						<Button_1.default onClick={() => setActive((prev) => !prev)}>Toggle</Button_1.default>
+					</View_1.default>
+					<Expandable_1.default active={active} attributes={{ "aria-label": "Content" }}>
+						<View_1.default paddingTop={2}>
+							<storybook_1.Placeholder />
+						</View_1.default>
+					</Expandable_1.default>
+				</storybook_1.Example.Item>
+
+				<storybook_1.Example.Item title="orientation: horizontal">
+					<View_1.default gap={2} align="start">
+						<Button_1.default onClick={() => setActiveHorizontal((prev) => !prev)}>Toggle</Button_1.default>
+						<View_1.default direction="row" gap={0} align="center">
+							<Expandable_1.default active={activeHorizontal} orientation="horizontal" attributes={{ "aria-label": "Content" }}>
+								<View_1.default width="200px" paddingEnd={2}>
+									<storybook_1.Placeholder>Horizontal</storybook_1.Placeholder>
+								</View_1.default>
+							</Expandable_1.default>
+							<storybook_1.Placeholder>Sibling</storybook_1.Placeholder>
+						</View_1.default>
+					</View_1.default>
+				</storybook_1.Example.Item>
+			</storybook_1.Example>);
+    },
+};
+exports.onAfterClose = {
+    name: "onAfterClose",
+    args: {
+        handleAfterClose: (0, test_1.fn)(),
+    },
+    render: (args) => {
+        const [active, setActive] = react_1.default.useState(true);
+        return (<View_1.default gap={2} align="start">
+				<Button_1.default onClick={() => setActive((prev) => !prev)}>Toggle</Button_1.default>
+				<Expandable_1.default active={active} onAfterClose={args.handleAfterClose} attributes={{ "aria-label": "Content" }}>
+					<storybook_1.Placeholder />
+				</Expandable_1.default>
+			</View_1.default>);
+    },
+    play: async ({ canvas, args }) => {
+        const { handleAfterClose } = args;
+        const trigger = canvas.getByRole("button", { name: "Toggle" });
+        const content = canvas.getByRole("region", { hidden: true });
+        // Transitions are locked for a frame while the color mode is applied
+        await (0, test_1.waitFor)(() => (0, test_1.expect)((0, animation_1.checkTransitions)()).toBe(true));
+        (0, test_1.expect)(handleAfterClose).not.toBeCalled();
+        await test_1.userEvent.click(trigger);
+        // Resolves only once the closing transition is over, not when active changes
+        (0, test_1.expect)(handleAfterClose).not.toBeCalled();
+        (0, test_1.expect)(content).toBeVisible();
+        await (0, test_1.waitFor)(() => (0, test_1.expect)(handleAfterClose).toBeCalledTimes(1));
+        (0, test_1.expect)(content).not.toBeVisible();
+        await test_1.userEvent.click(trigger);
+        await (0, test_1.waitFor)(() => (0, test_1.expect)(content).toBeVisible());
+        (0, test_1.expect)(handleAfterClose).toBeCalledTimes(1);
+    },
+};

package/dist/components/IconToggle/IconToggle.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./IconToggle.types";
+declare const IconToggle: React.FC<T.Props>;
+export default IconToggle;

package/dist/components/IconToggle/IconToggle.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
+import Presence from "../../components/_private/Presence";
+import Icon from "../../components/Icon";
+import s from "./IconToggle.module.css";
+const IconToggle = (props) => {
+    const { id, className, attributes, ...iconProps } = props;
+    const rootClassName = classNames(s.root, className);
+    return (_jsx(Presence, { itemKey: id, className: rootClassName, attributes: attributes, itemClassName: s.item, enterClassName: s["--enter"], exitClassName: s["--exit"], children: _jsx(Icon, { ...iconProps }) }));
+};
+IconToggle.displayName = "IconToggle";
+export default IconToggle;

package/dist/components/IconToggle/IconToggle.module.css

@@ -0,0 +1 @@
+.root{justify-items:center;align-items:center}.item{display:flex}.--enter{animation:rs-icon-toggle-enter var(--rs-duration-medium) var(--rs-easing-standard)}.--exit{animation:rs-icon-toggle-exit var(--rs-duration-medium) var(--rs-easing-standard) forwards}@keyframes rs-icon-toggle-enter{0%{opacity:0;filter:blur(2px);transform:scale(.25)}}@keyframes rs-icon-toggle-exit{to{opacity:0;filter:blur(2px);transform:scale(.25)}}

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

@@ -0,0 +1,5 @@
+import type { IconProps } from "../../components/Icon";
+export type Props = IconProps & {
+    /** Identity of the currently rendered icon, animating the change whenever it changes */
+    id?: string | number | boolean;
+};

package/dist/components/IconToggle/IconToggle.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default } from "./IconToggle";
+export type { Props as IconToggleProps } from "./IconToggle.types";

package/dist/components/IconToggle/index.js

@@ -0,0 +1 @@
+export { default } from "./IconToggle";

package/dist/components/IconToggle/tests/IconToggle.stories.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.FC<import("../../../components/IconToggle").IconToggleProps>;
+};
+export default _default;
+export declare const svg: {
+    name: string;
+    render: () => React.JSX.Element;
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.svg = void 0;
+const react_1 = __importDefault(require("react"));
+const Actionable_1 = __importDefault(require("../../../components/Actionable"));
+const IconToggle_1 = __importDefault(require("../../../components/IconToggle"));
+const Checkmark_1 = __importDefault(require("../../../icons/Checkmark"));
+const Close_1 = __importDefault(require("../../../icons/Close"));
+exports.default = {
+    title: "Utility components/IconToggle",
+    component: IconToggle_1.default,
+};
+exports.svg = {
+    name: "svg",
+    render: () => {
+        const [active, setActive] = react_1.default.useState(false);
+        return (<Actionable_1.default onClick={() => setActive((prev) => !prev)} attributes={{ style: { padding: 16 } }}>
+				<IconToggle_1.default svg={active ? <Checkmark_1.default /> : <Close_1.default />} id={active} size={5} color={active ? "positive" : "neutral"}/>
+			</Actionable_1.default>);
+    },
+};

package/dist/components/Image/Image.js

@@ -7,6 +7,8 @@ import s from "./Image.module.css";
 const Image = (props) => {
     const { src, alt, width, maxWidth, height, aspectRatio, onLoad, onError, fallback, outline, displayMode = "cover", borderRadius, className, attributes, imageAttributes: passedImageAttributes, renderImage, } = props;
     const [status, setStatus] = React.useState("loading");
+    // Image attributes are merged on top of the root attributes when rendering the image element
+    const passedImageRef = passedImageAttributes?.ref ?? attributes?.ref;
     const mixinStyles = resolveMixin({ radius: borderRadius, width, height, maxWidth, aspectRatio });
     const rootClassNames = classNames(s.root, mixinStyles.classNames, outline && s["--outline"], className);
     const imageClassNames = classNames([
@@ -28,6 +30,17 @@ const Image = (props) => {
         onError?.(e);
         passedImageAttributes?.onError?.(e);
     };
+    const handleImageRef = React.useCallback((el) => {
+        if (typeof passedImageRef === "function")
+            passedImageRef(el);
+        else if (passedImageRef)
+            passedImageRef.current = el;
+        // Server rendered images start loading before React hydrates,
+        // so their error event can fire before the error handler gets attached
+        if (!el || !src || !el.complete || el.naturalWidth > 0)
+            return;
+        el.decode().catch(() => setStatus("error"));
+    }, [passedImageRef, src]);
     React.useEffect(() => {
         setStatus("loading");
     }, [src]);
@@ -54,6 +67,7 @@ const Image = (props) => {
         role: alt ? undefined : "presentation",
         onLoad: handleLoad,
         onError: handleError,
+        ref: handleImageRef,
         className: outline ? imageClassNames : classNames([imageClassNames, rootClassNames]),
         style,
     };

package/dist/components/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import { type ActionableRef } from "../../components/Actionable";
-declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../../components/Actionable").ActionableProps, "attributes" | "children" | "className" | "disabled" | "href" | "onClick" | "render" | "stopPropagation" | "type"> & {
+declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../../components/Actionable").ActionableProps, "attributes" | "children" | "className" | "disabled" | "fullWidth" | "href" | "onClick" | "render" | "stopPropagation" | "type"> & {
     icon?: import("../../components/Icon").IconProps["svg"];
     color?: "inherit" | "critical" | "primary" | "positive" | "warning";
     variant?: "plain" | "underline";

package/dist/components/Link/Link.js

@@ -5,9 +5,9 @@ import Actionable from "../../components/Actionable";
 import Icon from "../../components/Icon";
 import s from "./Link.module.css";
 const Link = forwardRef((props, ref) => {
-    const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, stopPropagation, render, } = props;
+    const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, stopPropagation, render, fullWidth, } = props;
     const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], variant && s[`--variant-${variant}`], color && s[`--color-${color}`], icon && s["--with-icon"]);
-    return (_jsxs(Actionable, { href: href, disabled: disabled, className: rootClassNames, attributes: attributes, type: type, onClick: onClick, ref: ref, stopPropagation: stopPropagation, render: render, children: [icon && _jsx(Icon, { svg: icon }), children] }));
+    return (_jsxs(Actionable, { href: href, disabled: disabled, fullWidth: fullWidth, className: rootClassNames, attributes: attributes, type: type, onClick: onClick, ref: ref, stopPropagation: stopPropagation, render: render, children: [icon && _jsx(Icon, { svg: icon }), children] }));
 });
 Link.displayName = "Link";
 export default Link;

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

@@ -1,6 +1,6 @@
 import type { ActionableProps } from "../../components/Actionable";
 import type { IconProps } from "../../components/Icon";
-export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "stopPropagation" | "render"> & {
+export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "stopPropagation" | "render" | "fullWidth"> & {
     /** Icon at the start position */
     icon?: IconProps["svg"];
     /** Link color, based on the color tokens

package/dist/components/Link/tests/Link.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "attributes" | "children" | "className" | "disabled" | "href" | "onClick" | "render" | "stopPropagation" | "type"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "attributes" | "children" | "className" | "disabled" | "fullWidth" | "href" | "onClick" | "render" | "stopPropagation" | "type"> & {
         icon?: import("../../Icon").IconProps["svg"];
         color?: "inherit" | "critical" | "primary" | "positive" | "warning";
         variant?: "plain" | "underline";
@@ -35,6 +35,7 @@ export declare const hrefOnClick: StoryObj<{
 }>;
 export declare const disabled: StoryObj;
 export declare const render: StoryObj;
+export declare const fullWidth: StoryObj;
 export declare const className: StoryObj;
 export declare const testMultilineInText: {
     name: string;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.testMultilineInText = exports.className = exports.render = exports.disabled = exports.hrefOnClick = exports.onClick = exports.href = exports.icon = exports.color = exports.variant = void 0;
+exports.testMultilineInText = exports.className = exports.fullWidth = exports.render = exports.disabled = exports.hrefOnClick = exports.onClick = exports.href = exports.icon = exports.color = exports.variant = void 0;
 const test_1 = require("storybook/test");
 const Link_1 = __importDefault(require("../../../components/Link"));
 const Text_1 = __importDefault(require("../../../components/Text"));
@@ -147,6 +147,12 @@ exports.render = {
         (0, test_1.expect)(el.tagName).toBe("SECTION");
     },
 };
+exports.fullWidth = {
+    name: "fullWidth",
+    render: () => (<Link_1.default fullWidth onClick={() => { }}>
+			Trigger
+		</Link_1.default>),
+};
 exports.className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">

package/dist/components/MenuItem/MenuItem.js

@@ -9,8 +9,20 @@ import s from "./MenuItem.module.css";
 const MenuItem = forwardRef((props, ref) => {
     const { icon, startSlot, endSlot, children, color = "primary", selected, highlighted, disabled, onClick, href, size = "medium", stopPropagation, as, render, className, attributes, } = props;
     const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"], highlighted && s["--highlighted"]);
-    const gapSize = responsivePropDependency(size, (size) => (size === "large" ? 3 : 2));
-    const iconSize = responsivePropDependency(size, (size) => (size === "large" ? 5 : 4));
+    const gapSize = responsivePropDependency(size, (size) => {
+        if (size === "large")
+            return 3;
+        if (size === "small")
+            return 1.5;
+        return 2;
+    });
+    const iconSize = responsivePropDependency(size, (size) => {
+        if (size === "large")
+            return 5;
+        if (size === "small")
+            return 3.5;
+        return 4;
+    });
     return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: { ...attributes, "data-rs-aligner-target": true }, onClick: onClick, href: href, ref: ref, as: as, stopPropagation: stopPropagation, render: render, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));
 });
 MenuItem.displayName = "MenuItem";

package/dist/components/MenuItem/MenuItem.module.css

@@ -1 +1 @@
-.root,button.root{display:block;transition:background-color var(--rs-duration-fast) var(--rs-easing-standard);padding:var(--rs-p-v) var(--rs-p-h);font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);color:var(--rs-menu-item-color);background-color:var(--rs-menu-item-bg-color);border-radius:var(--rs-radius-medium)}.root[role=option],button.root[role=option]{transition:none}[data-rs-keyboard] .root[role=option]:focus,[data-rs-keyboard] button.root[role=option]:focus{outline:none;background-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--highlighted,.root.--highlighted .content,.root.--highlighted .icon,button.root.--highlighted,button.root.--highlighted .content,button.root.--highlighted .icon{transition-duration:var(--rs-duration-rapid)}@media (hover:hover) and (pointer:fine){.root:hover,.root:hover .content,.root:hover .icon,button.root:hover,button.root:hover .content,button.root:hover .icon{transition-duration:var(--rs-duration-rapid)}}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-rapid) var(--rs-easing-standard);transition-property:color}.--size-small{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x1-5);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--highlighted,.--color-neutral.--selected,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}}.--color-critical{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-critical.--highlighted,.--color-critical.--selected,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-critical);--rs-menu-item-icon-color:var(--rs-color-foreground-critical)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-critical);--rs-menu-item-icon-color:var(--rs-color-foreground-critical)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary.--highlighted,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:var(--rs-color-background-primary-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--size-small--m{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x1-5);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}@media (--rs-viewport-l ){.--size-small--l{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x1-5);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x1-5);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}
+.root,button.root{display:block;transition:background-color var(--rs-duration-fast) var(--rs-easing-standard);padding:var(--rs-p-v) var(--rs-p-h);font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);color:var(--rs-menu-item-color);background-color:var(--rs-menu-item-bg-color);border-radius:var(--rs-radius-medium)}.root[role=option],button.root[role=option]{transition:none}[data-rs-keyboard] .root[role=option]:focus,[data-rs-keyboard] button.root[role=option]:focus{outline:none;background-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--highlighted,.root.--highlighted .content,.root.--highlighted .icon,button.root.--highlighted,button.root.--highlighted .content,button.root.--highlighted .icon{transition-duration:var(--rs-duration-rapid)}@media (hover:hover) and (pointer:fine){.root:hover,.root:hover .content,.root:hover .icon,button.root:hover,button.root:hover .content,button.root:hover .icon{transition-duration:var(--rs-duration-rapid)}}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-rapid) var(--rs-easing-standard);transition-property:color}.--size-small{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:calc(var(--rs-unit-x2) + var(--rs-unit-x0-5));--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--highlighted,.--color-neutral.--selected,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}}.--color-critical{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-critical.--highlighted,.--color-critical.--selected,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-critical);--rs-menu-item-icon-color:var(--rs-color-foreground-critical)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-critical);--rs-menu-item-icon-color:var(--rs-color-foreground-critical)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary.--highlighted,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:var(--rs-color-background-primary-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--size-small--m{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:calc(var(--rs-unit-x2) + var(--rs-unit-x0-5));--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}@media (--rs-viewport-l ){.--size-small--l{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:calc(var(--rs-unit-x2) + var(--rs-unit-x0-5));--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:calc(var(--rs-unit-x2) + var(--rs-unit-x0-5));--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}

package/dist/components/Select/Select.module.css

@@ -1 +1 @@
-.root{--rs-p-h:var(--rs-select-p-h);--rs-p-v:0px;--rs-select-focus-border-color:var(--rs-color-border-primary);display:flex;align-items:center;position:relative;z-index:0;background:var(--rs-color-background-elevation-base);border-radius:var(--rs-select-radius);min-height:var(--rs-select-min-height)}[data-rs-keyboard] .root:focus-within{box-shadow:var(--rs-outline-shadow)}.input{display:flex;align-items:center;border:0;outline:none;position:relative;background:none;z-index:1;flex-grow:1;width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none;cursor:pointer;color:var(--rs-color-foreground-neutral);font-weight:var(--rs-font-weight-regular);font-family:var(--rs-font-family-body);font-size:var(--rs-select-font-size);line-height:var(--rs-select-line-height);letter-spacing:var(--rs-select-letter-spacing);min-height:calc(var(--rs-select-min-height) - var(--rs-unit-x2));padding-block:var(--rs-select-p-v);padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-p-h) + var(--rs-select-gap));padding-inline-start:var(--rs-select-p-h);text-overflow:ellipsis}.input::-ms-expand{display:none}.input.input--placeholder{color:var(--rs-color-foreground-disabled)}.slot{position:relative;z-index:5;display:flex;align-items:center;flex-shrink:0;padding-inline-start:var(--rs-select-p-h);margin-inline-start:calc(var(--rs-select-icon-align) * -1)}.input .slot{padding-inline-start:0;padding-inline-end:var(--rs-select-gap)}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:calc(var(--rs-select-p-h) - var(--rs-select-icon-align));pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.group{--rs-select-group-padding:calc(var(--rs-unit-x1) - 1px);margin-inline:calc((var(--rs-select-group-padding) * -1));padding-inline:var(--rs-select-group-padding)}.group:not(:first-child){border-top:1px solid var(--rs-color-border-neutral-faded);margin-top:var(--rs-select-group-padding);padding-top:var(--rs-select-group-padding)}.group:not(:first-child) .group-label{padding-top:var(--rs-unit-x3)}.group-label{padding:var(--rs-unit-x2) var(--rs-unit-x3) var(--rs-unit-x1)}.--size-small{--rs-select-gap:var(--rs-unit-x1-5);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small);--rs-select-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-select-p-h:var(--rs-unit-x2);--rs-select-font-size:var(--rs-font-size-caption-1);--rs-select-line-height:var(--rs-line-height-caption-1);--rs-select-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-select-p-v) * 2)}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x2);--rs-select-p-h:var(--rs-unit-x3);--rs-select-font-size:var(--rs-font-size-body-2);--rs-select-line-height:var(--rs-line-height-body-2);--rs-select-letter-spacing:var(--rs-letter-spacing-body-2);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x2) * 2)}.--size-large{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x3);--rs-select-p-h:var(--rs-unit-x4);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x4);--rs-select-p-h:var(--rs-unit-x5);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x4) * 2)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded)}.root.--variant-ghost{background:transparent}.root.--variant-headless{--rs-select-focus-border-color:transparent;background:transparent;box-shadow:none!important}.root.--status-error:not(.--variant-headless){box-shadow:0 0 0 var(--rs-outline-width) var(--rs-color-border-critical) inset}.root.--disabled{background:var(--rs-color-background-disabled-faded)}.root.--disabled .arrow,.root.--disabled .input{cursor:not-allowed;color:var(--rs-color-foreground-disabled)}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-1)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-select-gap:var(--rs-unit-x1-5);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small);--rs-select-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-select-p-h:var(--rs-unit-x2);--rs-select-font-size:var(--rs-font-size-caption-1);--rs-select-line-height:var(--rs-line-height-caption-1);--rs-select-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-select-p-v) * 2)}.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x2);--rs-select-p-h:var(--rs-unit-x3);--rs-select-font-size:var(--rs-font-size-body-2);--rs-select-line-height:var(--rs-line-height-body-2);--rs-select-letter-spacing:var(--rs-letter-spacing-body-2);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x2) * 2)}.--size-large--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x3);--rs-select-p-h:var(--rs-unit-x4);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x4);--rs-select-p-h:var(--rs-unit-x5);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x4) * 2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-select-gap:var(--rs-unit-x1-5);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small);--rs-select-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-select-p-h:var(--rs-unit-x2);--rs-select-font-size:var(--rs-font-size-caption-1);--rs-select-line-height:var(--rs-line-height-caption-1);--rs-select-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-select-p-v) * 2)}.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x2);--rs-select-p-h:var(--rs-unit-x3);--rs-select-font-size:var(--rs-font-size-body-2);--rs-select-line-height:var(--rs-line-height-body-2);--rs-select-letter-spacing:var(--rs-letter-spacing-body-2);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x2) * 2)}.--size-large--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x3);--rs-select-p-h:var(--rs-unit-x4);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x4);--rs-select-p-h:var(--rs-unit-x5);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x4) * 2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-select-gap:var(--rs-unit-x1-5);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small);--rs-select-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-select-p-h:var(--rs-unit-x2);--rs-select-font-size:var(--rs-font-size-caption-1);--rs-select-line-height:var(--rs-line-height-caption-1);--rs-select-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-select-p-v) * 2)}.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x2);--rs-select-p-h:var(--rs-unit-x3);--rs-select-font-size:var(--rs-font-size-body-2);--rs-select-line-height:var(--rs-line-height-body-2);--rs-select-letter-spacing:var(--rs-letter-spacing-body-2);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x2) * 2)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x3);--rs-select-p-h:var(--rs-unit-x4);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x4);--rs-select-p-h:var(--rs-unit-x5);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x4) * 2)}}
+.root{--rs-p-h:var(--rs-select-p-h);--rs-p-v:0px;--rs-select-focus-border-color:var(--rs-color-border-primary);display:flex;align-items:center;position:relative;z-index:0;background:var(--rs-color-background-elevation-base);border-radius:var(--rs-select-radius);min-height:var(--rs-select-min-height)}[data-rs-keyboard] .root:focus-within{box-shadow:var(--rs-outline-shadow)}.input{display:flex;align-items:center;border:0;outline:none;position:relative;background:none;z-index:1;flex-grow:1;width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none;cursor:pointer;color:var(--rs-color-foreground-neutral);font-weight:var(--rs-font-weight-regular);font-family:var(--rs-font-family-body);font-size:var(--rs-select-font-size);line-height:var(--rs-select-line-height);letter-spacing:var(--rs-select-letter-spacing);min-height:calc(var(--rs-select-min-height) - var(--rs-unit-x2));padding-block:var(--rs-select-p-v);padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-p-h) + var(--rs-select-gap));padding-inline-start:var(--rs-select-p-h);text-overflow:ellipsis}.input::-ms-expand{display:none}.input.input--placeholder{color:var(--rs-color-foreground-disabled)}.slot{position:relative;z-index:5;display:flex;align-items:center;flex-shrink:0;padding-inline-start:var(--rs-select-p-h);margin-inline-start:calc(var(--rs-select-icon-align) * -1)}.input .slot{padding-inline-start:0;padding-inline-end:var(--rs-select-gap)}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:calc(var(--rs-select-p-h) - var(--rs-select-icon-align));pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.group{--rs-select-group-padding:calc(var(--rs-unit-x1) - 1px);margin-inline:calc((var(--rs-select-group-padding) * -1));padding-inline:var(--rs-select-group-padding)}.group:not(:first-child){border-top:1px solid var(--rs-color-border-neutral-faded);margin-top:var(--rs-select-group-padding);padding-top:var(--rs-select-group-padding)}.group:not(:first-child) .group-label{padding-top:var(--rs-unit-x3)}.group-label{padding:var(--rs-unit-x2) var(--rs-unit-x3) var(--rs-unit-x1)}.--size-small{--rs-select-gap:var(--rs-unit-x1);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small);--rs-select-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-select-p-h:var(--rs-unit-x2);--rs-select-font-size:var(--rs-font-size-caption-1);--rs-select-line-height:var(--rs-line-height-caption-1);--rs-select-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-select-p-v) * 2)}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x2);--rs-select-p-h:var(--rs-unit-x3);--rs-select-font-size:var(--rs-font-size-body-2);--rs-select-line-height:var(--rs-line-height-body-2);--rs-select-letter-spacing:var(--rs-letter-spacing-body-2);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x2) * 2)}.--size-large{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x3);--rs-select-p-h:var(--rs-unit-x4);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x4);--rs-select-p-h:var(--rs-unit-x5);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x4) * 2)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded)}.root.--variant-ghost{background:transparent}.root.--variant-headless{--rs-select-focus-border-color:transparent;background:transparent;box-shadow:none!important}.root.--status-error:not(.--variant-headless){box-shadow:0 0 0 var(--rs-outline-width) var(--rs-color-border-critical) inset}.root.--disabled{background:var(--rs-color-background-disabled-faded)}.root.--disabled .arrow,.root.--disabled .input{cursor:not-allowed;color:var(--rs-color-foreground-disabled)}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-1)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-select-gap:var(--rs-unit-x1);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small);--rs-select-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-select-p-h:var(--rs-unit-x2);--rs-select-font-size:var(--rs-font-size-caption-1);--rs-select-line-height:var(--rs-line-height-caption-1);--rs-select-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-select-p-v) * 2)}.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x2);--rs-select-p-h:var(--rs-unit-x3);--rs-select-font-size:var(--rs-font-size-body-2);--rs-select-line-height:var(--rs-line-height-body-2);--rs-select-letter-spacing:var(--rs-letter-spacing-body-2);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x2) * 2)}.--size-large--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x3);--rs-select-p-h:var(--rs-unit-x4);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x4);--rs-select-p-h:var(--rs-unit-x5);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x4) * 2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-select-gap:var(--rs-unit-x1);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small);--rs-select-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-select-p-h:var(--rs-unit-x2);--rs-select-font-size:var(--rs-font-size-caption-1);--rs-select-line-height:var(--rs-line-height-caption-1);--rs-select-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-select-p-v) * 2)}.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x2);--rs-select-p-h:var(--rs-unit-x3);--rs-select-font-size:var(--rs-font-size-body-2);--rs-select-line-height:var(--rs-line-height-body-2);--rs-select-letter-spacing:var(--rs-letter-spacing-body-2);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x2) * 2)}.--size-large--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x3);--rs-select-p-h:var(--rs-unit-x4);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x4);--rs-select-p-h:var(--rs-unit-x5);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x4) * 2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-select-gap:var(--rs-unit-x1);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small);--rs-select-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-select-p-h:var(--rs-unit-x2);--rs-select-font-size:var(--rs-font-size-caption-1);--rs-select-line-height:var(--rs-line-height-caption-1);--rs-select-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-select-p-v) * 2)}.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x2);--rs-select-p-h:var(--rs-unit-x3);--rs-select-font-size:var(--rs-font-size-body-2);--rs-select-line-height:var(--rs-line-height-body-2);--rs-select-letter-spacing:var(--rs-letter-spacing-body-2);--rs-select-icon-align:var(--rs-unit-x0-5);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x2) * 2)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x3);--rs-select-p-h:var(--rs-unit-x4);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium);--rs-select-p-v:var(--rs-unit-x4);--rs-select-p-h:var(--rs-unit-x5);--rs-select-font-size:var(--rs-font-size-body-1);--rs-select-line-height:var(--rs-line-height-body-1);--rs-select-letter-spacing:var(--rs-letter-spacing-body-1);--rs-select-icon-align:var(--rs-unit-x1);--rs-select-min-height:calc(var(--rs-select-line-height) + var(--rs-unit-x4) * 2)}}

package/dist/components/Select/SelectStartContent.js

@@ -12,6 +12,8 @@ const SelectStartContent = (props) => {
                         return 5;
                     if (size === "xlarge")
                         return 6;
+                    if (size === "small")
+                        return 3.5;
                     return 4;
                 }), svg: icon }) }));
     }

package/dist/components/Tabs/Tabs.module.css

@@ -1 +1 @@
-@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{--rs-tabs-gap:var(--rs-unit-x5);--rs-tabs-radius:var(--rs-radius-medium);isolation:isolate;box-sizing:initial;max-width:100%}.inner,.list,.root{position:relative}.list{gap:var(--rs-tabs-gap)}.button{display:block;color:var(--rs-color-foreground-neutral);flex-shrink:0;position:relative;border-radius:var(--rs-tabs-radius);padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h);z-index:var(--rs-z-index-relative);-webkit-tap-highlight-color:transparent}[data-rs-keyboard] .button:focus:before{content:"";pointer-events:none;position:absolute;border-radius:var(--rs-tabs-radius);outline:var(--rs-outline);inset:0}.button:after{content:"";opacity:0;pointer-events:none}.button--active.button:after{opacity:1}.button.button--disabled{color:var(--rs-color-foreground-disabled)}.buttonContent{display:flex;align-items:center;justify-content:center;gap:var(--rs-tabs-icon-gap);position:relative;z-index:var(--rs-z-index-relative)}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.root:not(:has(.selector)) .button:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.button:after,.selector{position:absolute;border-radius:var(--rs-tabs-radius);z-index:0}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;position:absolute;left:0;top:0;z-index:0;height:calc(var(--rs-tab-selection-scale-y) * 1px);width:calc(var(--rs-tab-selection-scale-x) * 1px);transform-origin:0 0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0)}.selector.selector--hidden{visibility:hidden}.selector.selector--animated{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,height,width;will-change:transform,height,width}.control{position:absolute;inset-block:0;display:none;align-items:center;z-index:var(--rs-z-index-relative);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;opacity:0;pointer-events:none}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control.control--next{inset-inline-end:0}.control.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{outline:var(--rs-outline)}.panel.panel--hidden{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .list{display:inline-flex;vertical-align:top;flex-wrap:nowrap;align-items:center}.--direction-column{--rs-tabs-gap:var(--rs-unit-x1)}.--direction-column .list{display:flex;flex-direction:column}.--direction-column .buttonContent{justify-content:flex-start}.--variant-bordered .inner:after{content:"";position:absolute;background-color:var(--rs-color-border-neutral-faded);z-index:var(--rs-z-index-relative)}.--variant-bordered.--direction-row .inner:after{inset-block-end:0;inset-inline:0;height:1px}.--variant-bordered.--direction-column .inner:after{inset-inline-end:0;inset-block:0;width:1px}.--variant-bordered .button,.--variant-borderless .button{padding-inline:0}[data-rs-keyboard] .--variant-bordered .button:focus:before,[data-rs-keyboard] .--variant-borderless .button:focus:before{inset-block:var(--rs-unit-x0-5);inset-inline:calc(var(--rs-unit-x1-5) * -1)}.--variant-bordered .button:after,.--variant-bordered .selector,.--variant-borderless .button:after,.--variant-borderless .selector{background:var(--rs-color-border-primary)}.--variant-bordered.--direction-row .button,.--variant-borderless.--direction-row .button{margin-block-end:var(--rs-unit-x1)}.--variant-bordered.--direction-row .button:after,.--variant-borderless.--direction-row .button:after{inset-inline:0;inset-block-end:calc(var(--rs-unit-x1) * -1)}.--variant-bordered.--direction-row .selector,.--variant-borderless.--direction-row .selector{inset-block-start:auto;inset-block-end:0}.--variant-bordered.--direction-row .button:after,.--variant-bordered.--direction-row .selector,.--variant-borderless.--direction-row .button:after,.--variant-borderless.--direction-row .selector{height:2px}.--variant-bordered.--direction-column .button:after,.--variant-borderless.--direction-column .button:after{inset-block:0;inset-inline-end:0}[data-rs-keyboard] .--variant-bordered.--direction-column .button:focus:before,[data-rs-keyboard] .--variant-borderless.--direction-column .button:focus:before{inset-inline-end:var(--rs-unit-x2)}.--variant-bordered.--direction-column .selector,.--variant-borderless.--direction-column .selector{inset-inline-start:auto;inset-inline-end:0}.--variant-bordered.--direction-column .button:after,.--variant-bordered.--direction-column .selector,.--variant-borderless.--direction-column .button:after,.--variant-borderless.--direction-column .selector{width:2px}.--variant-pills .button--active:after,.--variant-pills .selector{opacity:.6}.--variant-pills .button:after,.--variant-pills .selector{background-color:var(--rs-color-background-neutral)}.--variant-pills .button:after{inset:0}.--variant-pills-raised .list{border-radius:var(--rs-radius-medium);background:var(--rs-color-background-neutral-faded)}.--variant-pills-raised .button--active:before,.--variant-pills-raised .selector:before{content:"";position:absolute;inset:0;border-radius:var(--rs-radius-medium);background:var(--rs-color-background-elevation-raised);border:1px solid var(--rs-color-border-neutral-faded);box-sizing:border-box}.--variant-pills-raised .button--active:after,.--variant-pills-raised .selector:after{content:"";position:absolute;inset:1px;height:auto;width:auto;border-radius:calc(var(--rs-radius-medium) - 1px);box-shadow:var(--rs-shadow-raised);background:transparent;transform:translateZ(0)}.--variant-pills-raised.--direction-column .button{width:100%}.--variant-pills,.--variant-pills-raised{--rs-tabs-gap:var(--rs-unit-x1)}.--size-small{--rs-tabs-item-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-tabs-item-p-h:var(--rs-unit-x2);--rs-tabs-icon-gap:var(--rs-unit-x1-5);--rs-tabs-radius:var(--rs-radius-small)}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3);--rs-tabs-icon-gap:var(--rs-unit-x2);--rs-tabs-radius:var(--rs-radius-medium)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4);--rs-tabs-icon-gap:var(--rs-unit-x2);--rs-tabs-radius:var(--rs-radius-medium)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex}.--item-width-equal .button{flex-grow:1;flex-basis:0;min-width:0;margin:0}.--item-width-equal .buttonText{overflow:hidden;text-overflow:ellipsis}.--scrollable .inner{overflow:auto;overflow:-moz-scrollbars-none;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-slow) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.--scrollable .inner::-webkit-scrollbar{display:none}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 4);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 4);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}}
+@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{--rs-tabs-gap:var(--rs-unit-x5);--rs-tabs-radius:var(--rs-radius-medium);isolation:isolate;box-sizing:initial;max-width:100%}.inner,.list,.root{position:relative}.list{gap:var(--rs-tabs-gap)}.button{display:block;color:var(--rs-color-foreground-neutral);flex-shrink:0;position:relative;border-radius:var(--rs-tabs-radius);padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h);z-index:var(--rs-z-index-relative);-webkit-tap-highlight-color:transparent}[data-rs-keyboard] .button:focus:before{content:"";pointer-events:none;position:absolute;border-radius:var(--rs-tabs-radius);outline:var(--rs-outline);inset:0}.button:after{content:"";opacity:0;pointer-events:none}.button--active.button:after{opacity:1}.button.button--disabled{color:var(--rs-color-foreground-disabled)}.buttonContent{display:flex;align-items:center;justify-content:center;gap:var(--rs-tabs-icon-gap);position:relative;z-index:var(--rs-z-index-relative)}.buttonContent>.icon:not(:only-child){margin-inline-start:calc(var(--rs-tabs-icon-align) * -1)}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.root:not(:has(.selector)) .button:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.button:after,.selector{position:absolute;border-radius:var(--rs-tabs-radius);z-index:0}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;position:absolute;left:0;top:0;z-index:0;height:calc(var(--rs-tab-selection-scale-y) * 1px);width:calc(var(--rs-tab-selection-scale-x) * 1px);transform-origin:0 0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0)}.selector.selector--hidden{visibility:hidden}.selector.selector--animated{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,height,width;will-change:transform,height,width}.control{position:absolute;inset-block:0;display:none;align-items:center;z-index:var(--rs-z-index-relative);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;opacity:0;pointer-events:none}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control.control--next{inset-inline-end:0}.control.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{outline:var(--rs-outline)}.panel.panel--hidden{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .list{display:inline-flex;vertical-align:top;flex-wrap:nowrap;align-items:center}.--direction-column{--rs-tabs-gap:var(--rs-unit-x1)}.--direction-column .list{display:flex;flex-direction:column}.--direction-column .buttonContent{justify-content:flex-start}.--variant-bordered .inner:after{content:"";position:absolute;background-color:var(--rs-color-border-neutral-faded);z-index:var(--rs-z-index-relative)}.--variant-bordered.--direction-row .inner:after{inset-block-end:0;inset-inline:0;height:1px}.--variant-bordered.--direction-column .inner:after{inset-inline-end:0;inset-block:0;width:1px}.--variant-bordered .button,.--variant-borderless .button{--rs-tabs-item-p-h:0px;--rs-tabs-icon-align:0px}[data-rs-keyboard] .--variant-bordered .button:focus:before,[data-rs-keyboard] .--variant-borderless .button:focus:before{inset-block:var(--rs-unit-x0-5);inset-inline:calc(var(--rs-unit-x1-5) * -1)}.--variant-bordered .button:after,.--variant-bordered .selector,.--variant-borderless .button:after,.--variant-borderless .selector{background:var(--rs-color-border-primary)}.--variant-bordered.--direction-row .button,.--variant-borderless.--direction-row .button{margin-block-end:var(--rs-unit-x1)}.--variant-bordered.--direction-row .button:after,.--variant-borderless.--direction-row .button:after{inset-inline:0;inset-block-end:calc(var(--rs-unit-x1) * -1)}.--variant-bordered.--direction-row .selector,.--variant-borderless.--direction-row .selector{inset-block-start:auto;inset-block-end:0}.--variant-bordered.--direction-row .button:after,.--variant-bordered.--direction-row .selector,.--variant-borderless.--direction-row .button:after,.--variant-borderless.--direction-row .selector{height:2px}.--variant-bordered.--direction-column .button:after,.--variant-borderless.--direction-column .button:after{inset-block:0;inset-inline-end:0}[data-rs-keyboard] .--variant-bordered.--direction-column .button:focus:before,[data-rs-keyboard] .--variant-borderless.--direction-column .button:focus:before{inset-inline-end:var(--rs-unit-x2)}.--variant-bordered.--direction-column .selector,.--variant-borderless.--direction-column .selector{inset-inline-start:auto;inset-inline-end:0}.--variant-bordered.--direction-column .button:after,.--variant-bordered.--direction-column .selector,.--variant-borderless.--direction-column .button:after,.--variant-borderless.--direction-column .selector{width:2px}.--variant-pills .button--active:after,.--variant-pills .selector{opacity:.6}.--variant-pills .button:after,.--variant-pills .selector{background-color:var(--rs-color-background-neutral)}.--variant-pills .button:after{inset:0}.--variant-pills-raised .list{border-radius:var(--rs-radius-medium);background:var(--rs-color-background-neutral-faded)}.--variant-pills-raised .button--active:before,.--variant-pills-raised .selector:before{content:"";position:absolute;inset:0;border-radius:var(--rs-radius-medium);background:var(--rs-color-background-elevation-raised);border:1px solid var(--rs-color-border-neutral-faded);box-sizing:border-box}.--variant-pills-raised .button--active:after,.--variant-pills-raised .selector:after{content:"";position:absolute;inset:1px;height:auto;width:auto;border-radius:calc(var(--rs-radius-medium) - 1px);box-shadow:var(--rs-shadow-raised);background:transparent;transform:translateZ(0)}.--variant-pills-raised.--direction-column .button{width:100%}.--variant-pills,.--variant-pills-raised{--rs-tabs-gap:var(--rs-unit-x1)}.--size-small{--rs-tabs-item-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-tabs-item-p-h:var(--rs-unit-x2);--rs-tabs-icon-gap:var(--rs-unit-x1);--rs-tabs-icon-align:var(--rs-unit-x0-5);--rs-tabs-radius:var(--rs-radius-small)}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3);--rs-tabs-icon-gap:var(--rs-unit-x2);--rs-tabs-icon-align:var(--rs-unit-x0-5);--rs-tabs-radius:var(--rs-radius-medium)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4);--rs-tabs-icon-gap:var(--rs-unit-x2);--rs-tabs-icon-align:var(--rs-unit-x1);--rs-tabs-radius:var(--rs-radius-medium)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex}.--item-width-equal .button{flex-grow:1;flex-basis:0;min-width:0;margin:0}.--item-width-equal .buttonText{overflow:hidden;text-overflow:ellipsis}.--scrollable .inner{overflow:auto;overflow:-moz-scrollbars-none;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-slow) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.--scrollable .inner::-webkit-scrollbar{display:none}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 4);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 4);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}}

package/dist/components/Tabs/TabsItem.js

@@ -22,6 +22,11 @@ const TabsItem = React.forwardRef((props, ref) => {
         tabIndex: active ? 0 : -1,
         "aria-selected": active,
     };
+    const iconSize = {
+        small: 3.5,
+        medium: 4,
+        large: 5,
+    }[size];
     const updateRefs = React.useCallback(() => {
         elPrevActiveRef.current = elActiveRef.current;
         elActiveRef.current = itemRef.current;
@@ -42,7 +47,7 @@ const TabsItem = React.forwardRef((props, ref) => {
             ...(!isFormControl && tabAttributes),
             "aria-controls": panelId,
             id: buttonId,
-        }, children: [name && (_jsx(HiddenInput, { type: "radio", name: name, value: value, checked: visuallySelected, onChange: handleChange, className: s.radio })), _jsxs("span", { className: s.buttonContent, ref: itemRef, children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: 4 }), children && (_jsx(Text, { variant: size === "large" ? "body-1" : size === "small" ? "caption-1" : "body-2", weight: "medium", className: s.buttonText, children: children }))] })] }));
+        }, children: [name && (_jsx(HiddenInput, { type: "radio", name: name, value: value, checked: visuallySelected, onChange: handleChange, className: s.radio })), _jsxs("span", { className: s.buttonContent, ref: itemRef, children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), children && (_jsx(Text, { variant: size === "large" ? "body-1" : size === "small" ? "caption-1" : "body-2", weight: "medium", className: s.buttonText, children: children }))] })] }));
 });
 TabsItem.displayName = "Tabs.Item";
 export default TabsItem;

package/dist/components/TextField/TextField.js

@@ -23,6 +23,8 @@ const TextFieldSlot = (props) => {
                     return 5;
                 if (size === "xlarge")
                     return 6;
+                if (size === "small")
+                    return 3.5;
                 return 4;
             }), svg: icon, autoWidth: true }) }, "icon"));
     const affixNode = affix && (_jsx("span", { className: classNames(s.affix, s[`affix--position-${position}`]), children: affix }, "affix"));