reshaped 3.8.0-canary.21 → 3.8.0-canary.23

package/dist/components/Badge/Badge.js

@@ -8,10 +8,10 @@ import BadgeContainer from "./BadgeContainer.js";
 import s from "./Badge.module.css";
 import { forwardRef } from "react";
 const Badge = forwardRef((props, ref) => {
-    const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, href, onClick, onDismiss, dismissAriaLabel, className, attributes, } = props;
+    const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, highlighted, href, onClick, onDismiss, dismissAriaLabel, className, attributes, } = props;
     const isActionable = !!(onClick || href);
     const iconSize = size === "small" ? 3 : 4;
-    const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"]);
+    const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"], highlighted && s["--highlighted"]);
     const hnadleDismiss = (e) => {
         e.stopPropagation();
         onDismiss?.();

package/dist/components/Badge/Badge.module.css

@@ -1 +1 @@
-.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
+.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}

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

@@ -15,6 +15,8 @@ type BaseProps = {
     endIcon?: IconProps["svg"];
     /** Change border radius to fully rounded corners */
     rounded?: boolean;
+    /** Highlight the component when component is used for an active state */
+    highlighted?: boolean;
     /** Transition the component to hidden state */
     hidden?: boolean;
     /** Additional classname for the root element */

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

@@ -38,6 +38,10 @@ export declare const empty: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const highlighted: {
+    name: string;
+    render: () => React.JSX.Element;
+};
 export declare const container: {
     name: string;
     render: () => React.JSX.Element;

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

@@ -216,6 +216,16 @@ export const empty = {
 			</Example.Item>
 		</Example>),
 };
+export const highlighted = {
+    name: "highlighted",
+    render: () => (<Example>
+			<Example.Item title="highlighted, color: neutral">
+				<View gap={3} direction="row">
+					<Badge highlighted>Badge</Badge>
+				</View>
+			</Example.Item>
+		</Example>),
+};
 export const container = {
     name: "container",
     render: () => {

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

@@ -47,7 +47,7 @@ export declare const testScroll: {
     name: string;
     render: () => import("react").JSX.Element;
 };
-export declare const testThemeSwitching: {
+export declare const testTheme: {
     name: string;
     render: () => import("react").JSX.Element;
 };

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

@@ -6,6 +6,7 @@ import { useTheme } from "../../Theme/useTheme.js";
 import IconCheckmark from "../../../icons/Checkmark.js";
 import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 import { sleep } from "../../../utilities/helpers.js";
+import Theme from "../../Theme/index.js";
 export default {
     title: "Components/DropdownMenu",
     component: DropdownMenu,
@@ -239,7 +240,7 @@ export const testScroll = {
 const ThemeSwitching = () => {
     const { invertColorMode } = useTheme();
     return (<View gap={3} direction="row">
-			<DropdownMenu defaultActive>
+			<DropdownMenu>
 				<DropdownMenu.Trigger>
 					{(attributes) => <Button attributes={attributes}>Open</Button>}
 				</DropdownMenu.Trigger>
@@ -251,11 +252,27 @@ const ThemeSwitching = () => {
 			<Button onClick={() => invertColorMode()}>Switch color mode</Button>
 		</View>);
 };
-export const testThemeSwitching = {
-    name: "test: theme switching",
+const ThemeMultiple = () => {
+    return (<Theme name={["reshaped", "figma"]}>
+			<DropdownMenu>
+				<DropdownMenu.Trigger>
+					{(attributes) => <Button attributes={attributes}>Open</Button>}
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content>
+					<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+					<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu>
+		</Theme>);
+};
+export const testTheme = {
+    name: "test: theme",
     render: () => (<Example>
-			<Example.Item title="Switch color mode while dropdown is active and check that it still works">
+			<Example.Item title="switch color mode while dropdown is active and check that it still works">
 				<ThemeSwitching />
 			</Example.Item>
+			<Example.Item title="dropdown inherits multiple themes">
+				<ThemeMultiple />
+			</Example.Item>
 		</Example>),
 };

package/dist/components/NumberField/NumberFieldControlled.js

@@ -117,27 +117,27 @@ const NumberFieldControlled = (props) => {
     const touchIconSize = responsivePropDependency(size, (size) => {
         return size === "small" ? 3 : 4;
     });
-    const controlsNode = (_jsx("span", { className: s["controls-wrapper"], children: _jsxs("span", { className: s.controls, children: [_jsxs(Actionable, { className: s.control, disabled: increaseDisabled, disableFocusRing: true, as: "span", attributes: {
-                        "aria-label": increaseAriaLabel,
-                        "aria-controls": inputId,
-                        role: "button",
-                        tabIndex: increaseDisabled ? undefined : -1,
-                        onPointerDown: (e) => handleControlPointerDown(e, handleIncrease),
-                        onPointerUp: handleControlPointerUp,
-                        onPointerLeave: handleControlPointerUp,
-                        // Prevent menu from opening on long press
-                        onContextMenu: (e) => e.preventDefault(),
-                    }, children: [_jsx(Icon, { svg: IconChevronUp, size: mouseIconSize, className: s["icon--mouse"] }), _jsx(Icon, { svg: IconPlus, size: touchIconSize, className: s["icon--touch"] })] }), _jsxs(Actionable, { className: s.control, disabled: decreaseDisabled, disableFocusRing: true, as: "span", attributes: {
-                        "aria-label": decreaseAriaLabel,
-                        "aria-controls": inputId,
-                        role: "button",
-                        tabIndex: decreaseDisabled ? undefined : -1,
-                        onPointerDown: (e) => handleControlPointerDown(e, handleDecrease),
-                        onPointerUp: handleControlPointerUp,
-                        onPointerLeave: handleControlPointerUp,
-                        // Prevent menu from opening on long press
-                        onContextMenu: (e) => e.preventDefault(),
-                    }, children: [_jsx(Icon, { svg: IconChevronDown, size: mouseIconSize, className: s["icon--mouse"] }), _jsx(Icon, { svg: IconMinus, size: touchIconSize, className: s["icon--touch"] })] })] }) }));
+    const controlsNode = (_jsxs("span", { className: s.controls, children: [_jsxs(Actionable, { className: s.control, disabled: increaseDisabled, disableFocusRing: true, as: "span", attributes: {
+                    "aria-label": increaseAriaLabel,
+                    "aria-controls": inputId,
+                    role: "button",
+                    tabIndex: increaseDisabled ? undefined : -1,
+                    onPointerDown: (e) => handleControlPointerDown(e, handleIncrease),
+                    onPointerUp: handleControlPointerUp,
+                    onPointerLeave: handleControlPointerUp,
+                    // Prevent menu from opening on long press
+                    onContextMenu: (e) => e.preventDefault(),
+                }, children: [_jsx(Icon, { svg: IconChevronUp, size: mouseIconSize, className: s["icon--mouse"] }), _jsx(Icon, { svg: IconPlus, size: touchIconSize, className: s["icon--touch"] })] }), _jsxs(Actionable, { className: s.control, disabled: decreaseDisabled, disableFocusRing: true, as: "span", attributes: {
+                    "aria-label": decreaseAriaLabel,
+                    "aria-controls": inputId,
+                    role: "button",
+                    tabIndex: decreaseDisabled ? undefined : -1,
+                    onPointerDown: (e) => handleControlPointerDown(e, handleDecrease),
+                    onPointerUp: handleControlPointerUp,
+                    onPointerLeave: handleControlPointerUp,
+                    // Prevent menu from opening on long press
+                    onContextMenu: (e) => e.preventDefault(),
+                }, children: [_jsx(Icon, { svg: IconChevronDown, size: mouseIconSize, className: s["icon--mouse"] }), _jsx(Icon, { svg: IconMinus, size: touchIconSize, className: s["icon--touch"] })] })] }));
     return (_jsx(TextField, { ...textFieldProps, className: [
             textFieldProps.className,
             responsiveClassNames(s, "controls--size", size),
@@ -158,7 +158,7 @@ const NumberFieldControlled = (props) => {
             max,
             step,
             className: s.field,
-        }, size: size, id: inputId, hasError: hasError, disabled: disabled, value: textValue, onChange: handleChange, name: name, endSlot: controlsNode }));
+        }, size: size, id: inputId, hasError: hasError, disabled: disabled, value: textValue, onChange: handleChange, name: name, endSlot: controlsNode, endSlotPadding: 0 }));
 };
 NumberFieldControlled.displayName = "NumberFieldControlled";
 export default NumberFieldControlled;

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{box-sizing:initial;isolation:isolate;max-width:100%}.list,.root{position:relative}.list{--rs-tabs-gap:var(--rs-unit-x6);gap:var(--rs-tabs-gap)}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{flex-shrink:0;position:relative}.button{overflow:hidden;position:relative;z-index:1;-webkit-tap-highlight-color:transparent}.button,.buttonContent{border-radius:var(--rs-radius-medium);width:100%}.buttonContent{align-items:center;box-sizing:border-box;display:flex}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-shadow-focus-inset)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.item{color:var(--rs-color-foreground-neutral)}@media (hover:hover) and (pointer:fine){.item:not(.--item-disabled,.--item-active):hover{color:var(--rs-color-foreground-neutral-faded)}}.item.--item-disabled{color:var(--rs-color-foreground-disabled)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-relative)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control--next{inset-inline-end:0}.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-shadow-focus)}.--panel-hidden{display:none}.--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-medium) 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}.--direction-row .inner{white-space:nowrap}.--direction-row .inner:after{bottom:0;height:1px;inset-inline:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{height:100%;inset-block:0;inset-inline-end:0;width:1px}.--direction-column .list{--rs-tabs-gap:var(--rs-unit-x1);display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}@media (hover:hover) and (pointer:fine){.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills .list,.--variant-pills-elevated .list{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex;overflow:hidden}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0}.--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{box-sizing:initial;isolation:isolate;max-width:100%}.list,.root{position:relative}.list{--rs-tabs-gap:var(--rs-unit-x6);gap:var(--rs-tabs-gap)}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{flex-shrink:0;position:relative}.button{overflow:hidden;position:relative;z-index:1;-webkit-tap-highlight-color:transparent}.button,.buttonContent{border-radius:var(--rs-radius-medium);width:100%}.buttonContent{align-items:center;box-sizing:border-box;display:flex}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-shadow-focus-inset)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.item{color:var(--rs-color-foreground-neutral)}@media (hover:hover) and (pointer:fine){.item:not(.--item-disabled,.--item-active):hover{color:var(--rs-color-foreground-neutral-faded)}}.item.--item-disabled{color:var(--rs-color-foreground-disabled)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-relative)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control--next{inset-inline-end:0}.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-shadow-focus)}.--panel-hidden{display:none}.--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-medium) 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}.--direction-row .inner{white-space:nowrap}.--direction-row .inner:after{bottom:0;height:1px;inset-inline:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{height:100%;inset-block:0;inset-inline-end:0;width:1px}.--direction-column .list{--rs-tabs-gap:var(--rs-unit-x1);display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}@media (hover:hover) and (pointer:fine){.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills .list,.--variant-pills-elevated .list{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0;overflow:hidden}.--item-width-equal .buttonText{overflow:hidden;text-overflow:ellipsis}.--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

@@ -64,7 +64,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, children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: 4 }), children && (_jsx(Text, { variant: size === "large" ? "body-2" : "body-3", weight: "medium", children: children }))] })] }) }));
+            }, children: [name && (_jsx(HiddenInput, { type: "radio", name: name, value: value, checked: visuallySelected, onChange: handleChange, className: s.radio })), _jsxs("span", { className: s.buttonContent, children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: 4 }), children && (_jsx(Text, { variant: size === "large" ? "body-2" : "body-3", weight: "medium", className: s.buttonText, children: children }))] })] }) }));
 });
 TabsItem.displayName = "Tabs.Item";
 export default TabsItem;

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.8.0-canary.21",
+  "version": "3.8.0-canary.23",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",