reshaped 3.4.6 → 3.4.7

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

@@ -3,7 +3,7 @@ import type * as G from "../../types/global";
 import type { FormControlProps } from "../FormControl";
 import type { ActionableProps } from "../Actionable";
 import type { IconProps } from "../Icon";
-type Size = G.Responsive<"medium" | "large" | "xlarge">;
+type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
 type Option = {
     label: string;
     value: string;

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

@@ -44,46 +44,72 @@ export const variants = () => (<Example>
 		</Example.Item>
 	</Example>);
 export const size = () => (<Example>
-		<Example.Item title="size: medium, slot">
-			<Select size="medium" name="animal" startSlot={<Placeholder h={24}/>} options={[
+		<Example.Item title="size: small">
+			<View direction="row" gap={4}>
+				<View.Item grow>
+					<Select size="small" name="animal" icon={IconZap} options={[
         { label: "Dog", value: "dog" },
         { label: "Turtle", value: "turtle" },
     ]} inputAttributes={{ "aria-label": "test select" }}/>
-		</Example.Item>
-
-		<Example.Item title="size: medium, icon">
-			<Select size="medium" name="animal" icon={IconZap} options={[
+				</View.Item>
+				<View.Item grow>
+					<Select size="small" name="animal" startSlot={<Placeholder h={16}/>} options={[
         { label: "Dog", value: "dog" },
         { label: "Turtle", value: "turtle" },
     ]} inputAttributes={{ "aria-label": "test select" }}/>
+				</View.Item>
+			</View>
 		</Example.Item>
 
-		<Example.Item title="size: large, slot">
-			<Select size="large" name="animal" startSlot={<Placeholder h={24}/>} options={[
+		<Example.Item title="size: medium">
+			<View direction="row" gap={4}>
+				<View.Item grow>
+					<Select size="medium" name="animal" icon={IconZap} options={[
         { label: "Dog", value: "dog" },
         { label: "Turtle", value: "turtle" },
     ]} inputAttributes={{ "aria-label": "test select" }}/>
-		</Example.Item>
-
-		<Example.Item title="size: large, icon">
-			<Select size="large" name="animal" icon={IconZap} options={[
+				</View.Item>
+				<View.Item grow>
+					<Select size="medium" name="animal" startSlot={<Placeholder h={24}/>} options={[
         { label: "Dog", value: "dog" },
         { label: "Turtle", value: "turtle" },
     ]} inputAttributes={{ "aria-label": "test select" }}/>
+				</View.Item>
+			</View>
 		</Example.Item>
 
-		<Example.Item title="size: xlarge, slot">
-			<Select size="xlarge" name="animal" startSlot={<Placeholder h={24}/>} options={[
+		<Example.Item title="size: large">
+			<View direction="row" gap={4}>
+				<View.Item grow>
+					<Select size="large" name="animal" icon={IconZap} options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} inputAttributes={{ "aria-label": "test select" }}/>
+				</View.Item>
+				<View.Item grow>
+					<Select size="large" name="animal" startSlot={<Placeholder h={24}/>} options={[
         { label: "Dog", value: "dog" },
         { label: "Turtle", value: "turtle" },
     ]} inputAttributes={{ "aria-label": "test select" }}/>
+				</View.Item>
+			</View>
 		</Example.Item>
 
-		<Example.Item title="size: xlarge, icon">
-			<Select size="xlarge" name="animal" icon={IconZap} options={[
+		<Example.Item title="size: xlarge">
+			<View direction="row" gap={4}>
+				<View.Item grow>
+					<Select size="xlarge" name="animal" icon={IconZap} options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} inputAttributes={{ "aria-label": "test select" }}/>
+				</View.Item>
+				<View.Item grow>
+					<Select size="xlarge" name="animal" startSlot={<Placeholder h={24}/>} options={[
         { label: "Dog", value: "dog" },
         { label: "Turtle", value: "turtle" },
     ]} inputAttributes={{ "aria-label": "test select" }}/>
+				</View.Item>
+			</View>
 		</Example.Item>
 
 		<Example.Item title={["responsive size", "[s] xlarge", "[m+] medium"]}>

package/dist/components/Switch/Switch.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
 import { useFormControl } from "../FormControl/index.js";
 import Text from "../Text/index.js";
 import useElementId from "../../hooks/useElementId.js";
 import s from "./Switch.module.css";
 const Switch = (props) => {
-    const { children, name, checked, size, reversed, defaultChecked, onChange, onFocus, onBlur, className, attributes, } = props;
-    const rootClassNames = classNames(s.root, size && s[`root--size-${size}`], reversed && s["root--reversed"], className);
+    const { children, name, checked, size = "medium", reversed, defaultChecked, onChange, onFocus, onBlur, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, size && responsiveClassNames(s, "--size", size), reversed && s["--reversed"], className);
     const formControl = useFormControl();
     const id = useElementId(formControl?.attributes.id || props.id || props.inputAttributes?.id);
     const inputAttributes = { ...props.inputAttributes, ...formControl?.attributes };
@@ -21,7 +21,13 @@ const Switch = (props) => {
             checked: event.target.checked,
         });
     };
-    return (_jsxs("label", { ...attributes, className: rootClassNames, children: [_jsx("input", { type: "checkbox", ...inputAttributes, className: s.input, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: id }), _jsx("span", { className: s.area, "aria-hidden": "true", children: _jsx("span", { className: s.thumb }) }), children && (_jsx(Text, { variant: size === "small" ? "caption-1" : "body-3", weight: "medium", color: disabled ? "disabled" : undefined, children: children }))] }));
+    return (_jsxs("label", { ...attributes, className: rootClassNames, children: [_jsx("input", { type: "checkbox", ...inputAttributes, className: s.input, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: id }), _jsx("span", { className: s.area, "aria-hidden": "true", children: _jsx("span", { className: s.thumb }) }), children && (_jsx(Text, { variant: responsivePropDependency(size, (value) => {
+                    if (value === "large")
+                        return "body-2";
+                    if (value === "medium")
+                        return "body-3";
+                    return "caption-1";
+                }), weight: "medium", color: disabled ? "disabled" : undefined, children: children }))] }));
 };
 Switch.displayName = "Switch";
 export default Switch;

package/dist/components/Switch/Switch.module.css

@@ -1 +1 @@
-.root{align-items:center;display:inline-flex;gap:var(--rs-unit-x2);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(var(--rs-unit-x3))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x3) * -1))}[data-rs-keyboard] .input:focus+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;box-sizing:border-box;cursor:pointer;display:flex;height:calc(var(--rs-unit-x1) * 5);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:calc(var(--rs-unit-x1) * 8)}.area,.thumb{border-radius:999px}.thumb{background:var(--rs-color-white);box-shadow:var(--rs-shadow-raised);height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:var(--rs-unit-x4)}.root--size-small .area{height:calc(var(--rs-unit-x1) * 4);width:calc(var(--rs-unit-x1) * 6)}.root--size-small .thumb{height:var(--rs-unit-x3);width:var(--rs-unit-x3)}.root--size-small .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x2))}[dir=rtl] .root--size-small .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x2) * -1))}.root--size-large .area{height:calc(var(--rs-unit-x1) * 6);width:calc(var(--rs-unit-x1) * 10)}.root--size-large .thumb{height:var(--rs-unit-x5);width:var(--rs-unit-x5)}.root--size-large .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x4))}[dir=rtl] .root--size-large .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x4) * -1))}.root--reversed{flex-direction:row-reverse}
+.root{align-items:center;display:inline-flex;gap:var(--rs-switch-gap);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.root.--reversed{flex-direction:row-reverse}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-width) - var(--rs-switch-height)))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-height) - var(--rs-switch-width)))}[data-rs-keyboard] .input:focus+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;box-sizing:border-box;cursor:pointer;display:flex;height:var(--rs-switch-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:var(--rs-switch-width)}.area,.thumb{border-radius:999px}.thumb{background:var(--rs-color-white);box-shadow:var(--rs-shadow-raised);height:calc(var(--rs-switch-height) - var(--rs-unit-x1));transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:calc(var(--rs-switch-height) - var(--rs-unit-x1))}.--size-small{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}@media (--rs-viewport-m ){.--size-small--m{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--m{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--m{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--l{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--l{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--xl{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--xl{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}

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

@@ -6,7 +6,7 @@ type BaseProps = {
     name: string;
     disabled?: boolean;
     reversed?: boolean;
-    size?: "medium" | "small" | "large";
+    size?: G.Responsive<"medium" | "small" | "large">;
     onChange?: G.ChangeHandler<boolean>;
     onFocus?: (e: React.FocusEvent) => void;
     onBlur?: (e: React.FocusEvent) => void;

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Switch from "../index.js";
+import View from "../../View/index.js";
 export default {
     title: "Components/Switch",
     component: Switch,
@@ -30,27 +31,41 @@ export const size = () => (<Example>
 		<Example.Item title="size: large">
 			<Switch name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}/>
 		</Example.Item>
+		<Example.Item title="size: responsive, s: small, m: large">
+			<Switch name="active" size={{ s: "small", m: "large" }} inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
 	</Example>);
 export const label = () => (<Example>
 		<Example.Item title="size: medium">
-			<Switch name="active" inputAttributes={{ "aria-label": "test switch" }}>
-				Wi-fi
-			</Switch>
+			<View direction="row" gap={8}>
+				<Switch name="active" inputAttributes={{ "aria-label": "test switch" }}>
+					Wi-fi
+				</Switch>
+				<Switch reversed name="active" inputAttributes={{ "aria-label": "test switch" }}>
+					Wi-fi
+				</Switch>
+			</View>
 		</Example.Item>
 		<Example.Item title="size: small">
-			<Switch name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
-				Wi-fi
-			</Switch>
-		</Example.Item>
-		<Example.Item title="size: medium, reversed">
-			<Switch reversed name="active" inputAttributes={{ "aria-label": "test switch" }}>
-				Wi-fi
-			</Switch>
+			<View direction="row" gap={8}>
+				<Switch name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
+					Wi-fi
+				</Switch>
+				<Switch reversed name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
+					Wi-fi
+				</Switch>
+			</View>
 		</Example.Item>
-		<Example.Item title="size: small">
-			<Switch reversed name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
-				Wi-fi
-			</Switch>
+
+		<Example.Item title="size: large">
+			<View direction="row" gap={8}>
+				<Switch name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}>
+					Wi-fi
+				</Switch>
+				<Switch reversed name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}>
+					Wi-fi
+				</Switch>
+			</View>
 		</Example.Item>
 	</Example>);
 export const disabled = () => (<Example>

package/dist/components/TextField/TextField.js

@@ -50,7 +50,7 @@ const TextField = (props) => {
             return;
         onChange({ name, value: event.target.value, event });
     };
-    return (_jsxs("div", { ...attributes, "data-rs-aligner-target": true, className: rootClassName, children: [_jsx(TextFieldSlot, { position: "start", icon: icon, slot: startSlot, size: size, affix: prefix, id: id }), _jsx("input", { ...inputAttributes, className: s.input, disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: inputId }), _jsx(TextFieldSlot, { position: "end", icon: endIcon, slot: endSlot, size: size, affix: suffix, id: id })] }));
+    return (_jsxs("div", { ...attributes, "data-rs-aligner-target": true, className: rootClassName, children: [_jsx(TextFieldSlot, { position: "start", icon: icon, slot: startSlot, size: size, affix: prefix, id: id }), _jsx("input", { type: "text", ...inputAttributes, className: classNames(s.input, inputAttributes.className), disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: inputId }), _jsx(TextFieldSlot, { position: "end", icon: endIcon, slot: endSlot, size: size, affix: suffix, id: id })] }));
 };
 TextField.Aligner = Aligner;
 TextField.displayName = "TextField";

package/dist/components/TextField/TextField.module.css

@@ -1 +1 @@
-.root{--rs-p-h:var(--rs-text-field-gap);align-items:center;background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;gap:var(--rs-text-field-gap);padding:calc(var(--rs-unit-x1) - 1px) calc(var(--rs-text-field-gap) - 1px);position:relative;row-gap:var(--rs-unit-x1);z-index:0}.root.--focused,.root:has(label:active),.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus)):focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{border-radius:999px}.root.--rounded .affix:first-child,.root.--rounded .icon:first-child{padding-inline-start:var(--rs-unit-x1)}.root.--rounded .input:first-child{padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:calc(var(--rs-unit-x1) * -1) calc(var(--rs-text-field-gap) * -1);outline:none;padding-inline:var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.icon{cursor:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x1) * 2);position:relative;z-index:5}.slot--position-end:last-child{margin-inline-end:calc(var(--rs-unit-x1) * -1)}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium .input{padding-block:var(--rs-unit-x2)}.--size-medium .affix,.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large .input{padding-block:var(--rs-unit-x3)}.--size-large .affix,.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{padding-block:var(--rs-unit-x4)}.--size-xlarge .affix,.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded.--focused,.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error.--focused,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error.--focused,.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--m .input{padding-block:var(--rs-unit-x2)}.--size-medium--m .affix,.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--m .input{padding-block:var(--rs-unit-x3)}.--size-large--m .affix,.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--m .affix,.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--l .input{padding-block:var(--rs-unit-x2)}.--size-medium--l .affix,.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--l .input{padding-block:var(--rs-unit-x3)}.--size-large--l .affix,.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--l .affix,.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{padding-block:var(--rs-unit-x2)}.--size-medium--xl .affix,.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{padding-block:var(--rs-unit-x3)}.--size-large--xl .affix,.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--xl .affix,.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}
+.root{--rs-p-h:var(--rs-text-field-gap);align-items:center;background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-text-field-radius);display:flex;gap:var(--rs-text-field-gap);padding:0 calc(var(--rs-text-field-gap) - 1px);position:relative;row-gap:var(--rs-unit-x1);z-index:0}.root.--focused,.root:has(label:active),.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus)):focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{border-radius:999px}.root.--rounded .affix:first-child,.root.--rounded .icon:first-child{padding-inline-start:var(--rs-unit-x1)}.root.--rounded .input:first-child{padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:0 calc(var(--rs-text-field-gap) * -1);outline:none;padding-block:calc(var(--rs-text-field-p-v) - 1px);padding-inline:var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.input{font-size:var(--rs-text-field-font-size);letter-spacing:var(--rs-text-field-letter-spacing);line-height:var(--rs-text-field-line-height)}.affix,.icon{cursor:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;max-width:100%;min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) - 2px);position:relative;z-index:5}.slot--position-end:last-child{margin-inline-end:calc(var(--rs-text-field-gap) * -1);padding-inline-end:var(--rs-text-field-action-inset)}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-small{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded.--focused,.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error.--focused,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error.--focused,.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1)}}@media (--rs-viewport-l ){.--size-small--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1)}}

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

@@ -2,8 +2,8 @@ import type React from "react";
 import type * as G from "../../types/global";
 import type { FormControlProps } from "../FormControl";
 import type { IconProps } from "../Icon";
-type Size = G.Responsive<"medium" | "large" | "xlarge">;
-type BaseProps = {
+type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
+export type BaseProps = {
     id?: string;
     name: string;
     size?: Size;

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

@@ -1,2 +1,2 @@
 export { default } from "./TextField";
-export type { Props as TextFieldProps } from "./TextField.types";
+export type { Props as TextFieldProps, BaseProps as TextFieldBaseProps } from "./TextField.types";

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

@@ -83,6 +83,10 @@ export const attachments = () => (<Example>
 		</Example.Item>
 	</Example>);
 export const size = () => (<Example>
+		<Example.Item title="size: small">
+			<TextField name="Name" placeholder="Enter your name" size="small" icon={IconZap}/>
+		</Example.Item>
+
 		<Example.Item title="size: medium">
 			<TextField name="Name" placeholder="Enter your name" size="medium" icon={IconZap}/>
 		</Example.Item>

package/dist/hooks/tests/useScrollLock.stories.d.ts

@@ -11,3 +11,4 @@ export default _default;
 export declare const base: StoryObj;
 export declare const origin: StoryObj;
 export declare const container: StoryObj;
+export declare const testContainerAsync: StoryObj;

package/dist/hooks/tests/useScrollLock.stories.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { expect, userEvent } from "@storybook/test";
+import { Example } from "../../utilities/storybook/index.js";
 import Button from "../../components/Button/index.js";
 import useScrollLock from "../useScrollLock.js";
 import View from "../../components/View/index.js";
@@ -66,3 +67,31 @@ export const container = {
         expect(root).not.toHaveStyle("overflow: hidden");
     },
 };
+export const testContainerAsync = {
+    name: "test: containerRef locked count",
+    render: () => {
+        const containerRef = React.useRef(null);
+        const globalLock = useScrollLock();
+        const scopedLock = useScrollLock({ containerRef });
+        return (<Example>
+				<Example.Item title="calling regular lock and lock with a container only requires a single unlock to remove overflow">
+					<View attributes={{ ref: containerRef }} gap={4} direction="row">
+						<Button onClick={globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll}>
+							Toggle
+						</Button>
+						<Button onClick={scopedLock.scrollLocked ? scopedLock.unlockScroll : scopedLock.lockScroll}>
+							Toggle
+						</Button>
+					</View>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvas }) => {
+        const [buttonGlobal, buttonScoped] = canvas.getAllByRole("button");
+        await userEvent.click(buttonGlobal);
+        expect(document.body).toHaveStyle("overflow: hidden");
+        await userEvent.click(buttonScoped);
+        await userEvent.click(buttonGlobal);
+        expect(document.body).not.toHaveStyle("overflow: hidden");
+    },
+};

package/dist/icons/ChevronUp.d.ts

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

package/dist/icons/ChevronUp.js

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

package/dist/icons/Minus.d.ts

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

package/dist/icons/Minus.js

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

package/dist/icons/Plus.d.ts

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

package/dist/icons/Plus.js

@@ -1,3 +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;
+const IconPlus = () => (_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 IconPlus;

package/dist/index.d.ts

@@ -63,6 +63,8 @@ export { default as MenuItem } from "./components/MenuItem";
 export type { MenuItemProps } from "./components/MenuItem";
 export { default as Modal } from "./components/Modal";
 export type { ModalProps } from "./components/Modal";
+export { default as NumberField } from "./components/NumberField";
+export type { NumberFieldProps } from "./components/NumberField";
 export { default as Overlay } from "./components/Overlay";
 export type { OverlayProps } from "./components/Overlay";
 export { default as Pagination } from "./components/Pagination";

package/dist/index.js

@@ -32,6 +32,7 @@ export { default as Link } from "./components/Link/index.js";
 export { default as Loader } from "./components/Loader/index.js";
 export { default as MenuItem } from "./components/MenuItem/index.js";
 export { default as Modal } from "./components/Modal/index.js";
+export { default as NumberField } from "./components/NumberField/index.js";
 export { default as Overlay } from "./components/Overlay/index.js";
 export { default as Pagination } from "./components/Pagination/index.js";
 export { default as PinField } from "./components/PinField/index.js";

package/dist/utilities/scroll/lock.js

@@ -1,23 +1,31 @@
 import { isIOS } from "../platform.js";
+import { findClosestRenderContainer } from "../dom/index.js";
 import lockSafariScroll from "./lockSafari.js";
 import lockStandardScroll from "./lockStandard.js";
-let lockedCount = 0;
+let bodyLockedCount = 0;
 let reset = () => { };
 export const lockScroll = (args) => {
-    lockedCount += 1;
-    if (lockedCount > 1)
+    const isIOSLock = isIOS() && !args.containerEl && !args.originEl;
+    let container = document.body;
+    if (args.originEl && !isIOSLock)
+        container = findClosestRenderContainer({ el: args.originEl }).el;
+    if (args.containerEl && !isIOSLock)
+        container = args.containerEl;
+    if (container === document.body)
+        bodyLockedCount += 1;
+    if (bodyLockedCount > 1)
         return;
-    if (isIOS() && !args.containerEl && !args.originEl) {
+    if (isIOSLock) {
         reset = lockSafariScroll();
     }
     else {
-        reset = lockStandardScroll({ containerEl: args.containerEl, originEl: args.originEl });
+        reset = lockStandardScroll({ container });
     }
     args.cb?.();
 };
 export const unlockScroll = (cb) => {
-    lockedCount -= 1;
-    if (lockedCount > 0)
+    bodyLockedCount -= 1;
+    if (bodyLockedCount > 0)
         return;
     reset();
     cb?.();

package/dist/utilities/scroll/lockStandard.d.ts

@@ -1,5 +1,4 @@
 declare const lockStandardScroll: (args: {
-    containerEl?: HTMLElement | null;
-    originEl?: HTMLElement | null;
+    container: HTMLElement;
 }) => () => void;
 export default lockStandardScroll;

package/dist/utilities/scroll/lockStandard.js

@@ -1,13 +1,8 @@
-import { findClosestRenderContainer } from "../dom/index.js";
 import { getScrollbarWidth } from "./helpers.js";
 import { StyleCache } from "../css.js";
 const styleCache = new StyleCache();
 const lockStandardScroll = (args) => {
-    let container = document.body;
-    if (args.originEl)
-        container = findClosestRenderContainer({ el: args.originEl }).el;
-    if (args.containerEl)
-        container = args.containerEl;
+    const { container } = args;
     const rect = container.getBoundingClientRect();
     const isOverflowing = rect.left + rect.right < window.innerWidth;
     styleCache.set(container, { overflow: "hidden" });
@@ -15,8 +10,6 @@ const lockStandardScroll = (args) => {
         const scrollBarWidth = getScrollbarWidth();
         styleCache.set(container, { paddingRight: `${scrollBarWidth}px` });
     }
-    return () => {
-        styleCache.reset();
-    };
+    return () => styleCache.reset();
 };
 export default lockStandardScroll;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.4.6",
+	"version": "3.4.7",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",

package/dist/components/Autocomplete/tests/Autocomplete.test.stories.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-declare const _default: {
-    title: string;
-    component: {
-        (props: import("./..").AutocompleteProps): React.JSX.Element;
-        Item: {
-            (props: import("../Autocomplete.types").ItemProps): React.JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const base: StoryObj<{
-    handleItemSelect: ReturnType<typeof fn>;
-    handleBackspace: ReturnType<typeof fn>;
-}>;

package/dist/components/Autocomplete/tests/Autocomplete.test.stories.js

@@ -1,86 +0,0 @@
-import React from "react";
-import { expect, waitFor, within, fn } from "@storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import Autocomplete from "../index.js";
-import FormControl from "../../FormControl/index.js";
-import { sleep } from "../../../utilities/helpers.js";
-import userEvent from "@testing-library/user-event";
-export default {
-    title: "Components/Autocomplete/tests",
-    component: Autocomplete,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/autocomplete",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const base = {
-    name: "base",
-    args: {
-        handleBackspace: fn(),
-        handleItemSelect: fn(),
-    },
-    render: (args) => {
-        const [value, setValue] = React.useState("");
-        return (<Example>
-				<Example.Item title="Base">
-					<FormControl>
-						<FormControl.Label>Food</FormControl.Label>
-						<Autocomplete name="fruit" placeholder="Pick your food" value={value} onChange={(args) => setValue(args.value)} onBackspace={args.handleBackspace} onItemSelect={args.handleItemSelect}>
-							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
-                return (<Autocomplete.Item key={v} value={v} data={i === 0 ? { foo: "bar" } : undefined}>
-										{v}
-									</Autocomplete.Item>);
-            })}
-						</Autocomplete>
-					</FormControl>
-				</Example.Item>
-			</Example>);
-    },
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const input = canvas.getByRole("combobox");
-        // Reset the focus
-        document.body.focus();
-        // Test keyboard selection after focusing the input
-        input.focus();
-        let options = [];
-        await waitFor(() => {
-            options = canvas.getAllByRole("option");
-        });
-        expect(options).toHaveLength(3);
-        await waitFor(() => {
-            expect(options[0]).toHaveAttribute("data-rs-focus");
-        });
-        expect(options[1]).not.toHaveAttribute("data-rs-focus");
-        await userEvent.keyboard("{ArrowDown/}");
-        await userEvent.keyboard("{Enter/}");
-        expect(input).toHaveValue("Pie");
-        expect(args.handleItemSelect).toHaveBeenCalledTimes(1);
-        expect(args.handleItemSelect).toHaveBeenCalledWith({
-            value: "Pie",
-            data: undefined,
-        });
-        // Give browser time to focus on the input
-        await sleep(100);
-        // Test click selection after opening with down arrow
-        await userEvent.keyboard("{ArrowDown/}");
-        await waitFor(() => {
-            options = canvas.getAllByRole("option");
-        });
-        await userEvent.click(options[0]);
-        expect(input).toHaveValue("Pizza");
-        expect(args.handleItemSelect).toHaveBeenCalledTimes(2);
-        expect(args.handleItemSelect).toHaveBeenCalledWith({
-            value: "Pizza",
-            data: { foo: "bar" },
-        });
-        input.focus();
-        await userEvent.keyboard("{Backspace/}");
-        await waitFor(() => {
-            expect(args.handleBackspace).toHaveBeenCalledTimes(1);
-            expect(args.handleBackspace).toHaveBeenCalledWith();
-        });
-    },
-};