reshaped 3.4.1 → 3.4.3

package/dist/components/Slider/Slider.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Slider.types";
-declare const Slider: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+declare const Slider: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Slider;

package/dist/components/Slider/Slider.js

@@ -12,4 +12,5 @@ const Slider = (props) => {
     }
     return _jsx(SliderUncontrolled, { ...rest, min: min, max: max });
 };
+Slider.displayName = "Slider";
 export default Slider;

package/dist/components/Slider/SliderControlled.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Slider.types";
-declare const SliderControlled: (props: T.ControlledProps & T.DefaultProps) => import("react/jsx-runtime").JSX.Element;
+declare const SliderControlled: {
+    (props: T.ControlledProps & T.DefaultProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default SliderControlled;

package/dist/components/Slider/SliderControlled.js

@@ -84,18 +84,24 @@ const SliderControlled = (props) => {
         if (!range)
             return;
         const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
-        // @ts-ignore - creating refs out of handler props loses connection to the range flag
+        // Manually controlled resolving of single/range handlers
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         method?.({ minValue: value, maxValue, name });
     }, [maxValue, name, range, onChangeCommitRef, onChangeRef]);
     const handleMaxChange = React.useCallback((value, options) => {
         if (range) {
             const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
-            // @ts-ignore - creating refs out of handler props loses connection to the range flag
+            // Manually controlled resolving of single/range handlers
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
             method?.({ minValue: minValue, maxValue: value, name });
             return;
         }
         const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
-        // @ts-ignore - creating refs out of handler props loses connection to the range flag
+        // Manually controlled resolving of single/range handlers
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         method?.({ value, name });
     }, [minValue, name, range, onChangeRef, onChangeCommitRef]);
     const handleMouseDown = ({ nativeEvent }) => {
@@ -207,4 +213,5 @@ const SliderControlled = (props) => {
                         "--rs-slider-selection-size": `${maxPercentPosition - (minPercentPosition || 0)}%`,
                     } }) }), _jsxs("div", { className: s.thumbs, children: [minValue !== undefined && minPercentPosition !== undefined && (_jsx(SliderThumb, { id: minId, active: minId === draggingId, name: name, disabled: disabled, onChange: handleMinChange, value: minValue, onDragStart: handleMinDragStart, position: minPercentPosition, max: max, min: min, ref: minRef, tooltipRef: minTooltipRef, renderValue: renderValue, step: step, orientation: orientation })), _jsx(SliderThumb, { id: maxId, active: maxId === draggingId, name: name, disabled: disabled, onChange: handleMaxChange, value: maxValue, onDragStart: handleMaxDragStart, position: maxPercentPosition, max: max, min: min, ref: maxRef, tooltipRef: maxTooltipRef, renderValue: renderValue, step: step, orientation: orientation })] })] }));
 };
+SliderControlled.displayName = "SliderControlled";
 export default SliderControlled;

package/dist/components/Slider/SliderThumb.js

@@ -17,4 +17,5 @@ const SliderThumb = (props, ref) => {
     };
     return (_jsxs(_Fragment, { children: [_jsx("input", { className: s.input, type: "range", name: name, value: value, onChange: handleChange, disabled: disabled, max: max, min: min, step: step, "aria-labelledby": id, "aria-orientation": orientation }), _jsx("div", { ref: ref, className: thumbClassNames, onMouseDown: onDragStart, onTouchStart: onDragStart, style: { "--ts-slider-thumb-position": `${position}%` }, id: id, "aria-hidden": "true", children: renderValue !== false && (_jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", weight: "medium", className: s.tooltip, attributes: { ref: tooltipRef }, children: tooltipValue }) })) })] }));
 };
+SliderThumb.displayName = "SliderThumb";
 export default React.forwardRef(SliderThumb);

package/dist/components/Slider/SliderUncontrolled.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Slider.types";
-declare const SliderUncontrolled: (props: T.UncontrolledProps & T.DefaultProps) => import("react/jsx-runtime").JSX.Element;
+declare const SliderUncontrolled: {
+    (props: T.UncontrolledProps & T.DefaultProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default SliderUncontrolled;

package/dist/components/Slider/SliderUncontrolled.js

@@ -30,4 +30,5 @@ const SliderUncontrolled = (props) => {
     }
     return (_jsx(SliderControlled, { ...props, min: min, max: max, value: maxValue, defaultValue: undefined, onChange: handleSingleChange }));
 };
+SliderUncontrolled.displayName = "SliderUncontrolled";
 export default SliderUncontrolled;

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

@@ -1,6 +1,9 @@
 declare const _default: {
     title: string;
-    component: (props: import("./..").SliderProps) => import("react").JSX.Element;
+    component: {
+        (props: import("./..").SliderProps): import("react").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

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

@@ -2,7 +2,10 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: (props: import("./..").SliderProps) => import("react").JSX.Element;
+    component: {
+        (props: import("./..").SliderProps): import("react").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

package/dist/components/Stepper/Stepper.d.ts

@@ -1,6 +1,10 @@
 import type * as T from "./Stepper.types";
 declare const Stepper: {
     (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Item: (_: T.ItemProps) => null;
+    Item: {
+        (_: T.ItemProps): null;
+        displayName: string;
+    };
+    displayName: string;
 };
 export default Stepper;

package/dist/components/Stepper/Stepper.js

@@ -22,9 +22,16 @@ const Stepper = (props) => {
     const vertical = direction === "column";
     const length = React.Children.count(children);
     return (_jsx(View, { attributes: attributes, direction: direction, align: vertical ? "stretch" : "center", className: className, gap: 3, wrap: false, children: React.Children.map(children, (child, index) => {
-            const itemId = child.props.id || `${index}`;
-            return (_jsxs(React.Fragment, { children: [_jsx(StepperItemPrivate, { ...child.props, id: child.props.id || `${index}`, active: activeId?.toString() === itemId, step: index + 1, last: index === length - 1, direction: direction, labelDisplay: labelDisplay }), !vertical && index < length - 1 && (_jsx(View, { grow: true, children: _jsx(Divider, {}) }))] }, index));
+            if (!React.isValidElement(child))
+                return null;
+            if (child.type !== StepperItem)
+                return null;
+            const props = child.props;
+            const itemId = props.id || `${index}`;
+            return (_jsxs(React.Fragment, { children: [_jsx(StepperItemPrivate, { ...props, id: itemId, active: activeId?.toString() === itemId, step: index + 1, last: index === length - 1, direction: direction, labelDisplay: labelDisplay }), !vertical && index < length - 1 && (_jsx(View, { grow: true, children: _jsx(Divider, {}) }))] }, index));
         }) }));
 };
 Stepper.Item = StepperItem;
+Stepper.displayName = "Stepper";
+StepperItem.displayName = "Stepper.Item";
 export default Stepper;

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

@@ -3,7 +3,11 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").StepperProps): React.JSX.Element;
-        Item: (_: import("../Stepper.types").ItemProps) => null;
+        Item: {
+            (_: import("../Stepper.types").ItemProps): null;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

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

@@ -3,7 +3,11 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").StepperProps): import("react").JSX.Element;
-        Item: (_: import("../Stepper.types").ItemProps) => null;
+        Item: {
+            (_: import("../Stepper.types").ItemProps): null;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

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

@@ -1,3 +1,6 @@
 import type * as T from "./Switch.types";
-declare const Switch: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+declare const Switch: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Switch;

package/dist/components/Switch/Switch.js

@@ -23,4 +23,5 @@ const Switch = (props) => {
     };
     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 }))] }));
 };
+Switch.displayName = "Switch";
 export default Switch;

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

@@ -1,6 +1,9 @@
 declare const _default: {
     title: string;
-    component: (props: import("./..").SwitchProps) => import("react").JSX.Element;
+    component: {
+        (props: import("./..").SwitchProps): import("react").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

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

@@ -2,7 +2,10 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: (props: import("./..").SwitchProps) => import("react").JSX.Element;
+    component: {
+        (props: import("./..").SwitchProps): import("react").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

package/dist/components/Table/Table.d.ts

@@ -1,10 +1,26 @@
 import type * as T from "./Table.types";
 declare const Table: {
     (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Cell: (props: T.CellProps) => import("react/jsx-runtime").JSX.Element;
-    Heading: (props: T.HeadingProps) => import("react/jsx-runtime").JSX.Element;
-    Row: (props: T.RowProps) => import("react/jsx-runtime").JSX.Element;
-    Body: (props: T.BodyProps) => import("react/jsx-runtime").JSX.Element;
-    Head: (props: T.HeadProps) => import("react/jsx-runtime").JSX.Element;
+    Cell: {
+        (props: T.CellProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Heading: {
+        (props: T.HeadingProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Row: {
+        (props: T.RowProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        (props: T.BodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Head: {
+        (props: T.HeadProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
 };
 export default Table;

package/dist/components/Table/Table.js

@@ -50,4 +50,10 @@ Table.Heading = TableHeading;
 Table.Row = TableRow;
 Table.Body = TableBody;
 Table.Head = TableHead;
+Table.displayName = "Table";
+TableCell.displayName = "TableCell";
+TableHeading.displayName = "TableHeading";
+TableRow.displayName = "TableRow";
+TableBody.displayName = "TableBody";
+TableHead.displayName = "TableHead";
 export default Table;

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

@@ -3,11 +3,27 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").TableProps): React.JSX.Element;
-        Cell: (props: import("./..").TableCellProps) => React.JSX.Element;
-        Heading: (props: import("./..").TableHeadingProps) => React.JSX.Element;
-        Row: (props: import("./..").TableRowProps) => React.JSX.Element;
-        Body: (props: import("./..").TableBodyProps) => React.JSX.Element;
-        Head: (props: import("./..").TableHeadProps) => React.JSX.Element;
+        Cell: {
+            (props: import("./..").TableCellProps): React.JSX.Element;
+            displayName: string;
+        };
+        Heading: {
+            (props: import("./..").TableHeadingProps): React.JSX.Element;
+            displayName: string;
+        };
+        Row: {
+            (props: import("./..").TableRowProps): React.JSX.Element;
+            displayName: string;
+        };
+        Body: {
+            (props: import("./..").TableBodyProps): React.JSX.Element;
+            displayName: string;
+        };
+        Head: {
+            (props: import("./..").TableHeadProps): React.JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

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

@@ -3,11 +3,27 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").TableProps): import("react").JSX.Element;
-        Cell: (props: import("./..").TableCellProps) => import("react").JSX.Element;
-        Heading: (props: import("./..").TableHeadingProps) => import("react").JSX.Element;
-        Row: (props: import("./..").TableRowProps) => import("react").JSX.Element;
-        Body: (props: import("./..").TableBodyProps) => import("react").JSX.Element;
-        Head: (props: import("./..").TableHeadProps) => import("react").JSX.Element;
+        Cell: {
+            (props: import("./..").TableCellProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        Heading: {
+            (props: import("./..").TableHeadingProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        Row: {
+            (props: import("./..").TableRowProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        Body: {
+            (props: import("./..").TableBodyProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        Head: {
+            (props: import("./..").TableHeadProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

package/dist/components/Tabs/Tabs.d.ts

@@ -2,7 +2,14 @@ import type * as T from "./Tabs.types";
 declare const Tabs: {
     (props: T.Props): import("react/jsx-runtime").JSX.Element;
     Item: import("react").ForwardRefExoticComponent<T.ItemProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
-    List: (props: T.ListProps) => import("react/jsx-runtime").JSX.Element;
-    Panel: (props: T.PanelProps) => import("react/jsx-runtime").JSX.Element;
+    List: {
+        (props: T.ListProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Panel: {
+        (props: T.PanelProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
 };
 export default Tabs;

package/dist/components/Tabs/Tabs.js

@@ -13,4 +13,5 @@ const Tabs = (props) => {
 Tabs.Item = TabsItem;
 Tabs.List = TabsList;
 Tabs.Panel = TabsPanel;
+Tabs.displayName = "Tabs";
 export default Tabs;

package/dist/components/Tabs/TabsControlled.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Tabs.types";
-declare const TabsControlled: (props: T.PrivateControlledProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabsControlled: {
+    (props: T.PrivateControlledProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default TabsControlled;

package/dist/components/Tabs/TabsControlled.js

@@ -39,4 +39,5 @@ const TabsControlled = (props) => {
             setSelection,
         }, children: children }));
 };
+TabsControlled.displayName = "TabsControlled";
 export default TabsControlled;

package/dist/components/Tabs/TabsItem.js

@@ -65,4 +65,5 @@ const TabsItem = (props, ref) => {
                 "aria-controls": panelId,
             }, 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 }))] })] }) }));
 };
+TabsItem.displayName = "Tabs.Item";
 export default React.forwardRef(TabsItem);

package/dist/components/Tabs/TabsList.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Tabs.types";
-declare const TabsList: (props: T.ListProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabsList: {
+    (props: T.ListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default TabsList;

package/dist/components/Tabs/TabsList.js

@@ -81,9 +81,12 @@ const TabsList = (props) => {
         if (value)
             return;
         const firstItem = React.Children.toArray(children)[0];
+        if (!React.isValidElement(firstItem))
+            return;
         if (!firstItem || firstItem.type !== TabsItem)
             return;
-        setDefaultValue(firstItem.props.value);
+        const props = firstItem.props;
+        setDefaultValue(props.value);
     }, [value]);
     useIsomorphicLayoutEffect(() => {
         // Do not update selection on mount, until we receive new activeId
@@ -135,9 +138,10 @@ const TabsList = (props) => {
         };
     }, [rtl]);
     return (_jsxs("div", { ...attributes, className: rootClassNames, children: [_jsx("div", { className: s.inner, ref: elScrollableRef, children: _jsxs("div", { className: s.list, role: "tablist", ref: hotkeysRef, children: [React.Children.map(children, (child, index) => {
-                            if (!child)
+                            if (!React.isValidElement(child))
                                 return null;
-                            return (_jsx("div", { className: s.listItem, "data-rs-tabs-item": true, children: child }, child.props.value || child.key || index));
+                            const props = child.props;
+                            return (_jsx("div", { className: s.listItem, "data-rs-tabs-item": true, children: child }, props.value || child.key || index));
                         }), _jsx("div", { onTransitionEnd: handleTransitionEnd, className: selectorClassNames, style: {
                                 "--rs-tab-selection-x": selection.left,
                                 "--rs-tab-selection-y": selection.top,
@@ -153,4 +157,5 @@ const TabsList = (props) => {
                     (fadeSide === "end" || fadeSide === "both") && s["control--active"],
                 ], children: _jsx(Icon, { svg: IconChevronRight, size: 5 }) })] }));
 };
+TabsList.displayName = "Tabs.List";
 export default TabsList;

package/dist/components/Tabs/TabsPanel.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Tabs.types";
-declare const TabsPanel: (props: T.PanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabsPanel: {
+    (props: T.PanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default TabsPanel;

package/dist/components/Tabs/TabsPanel.js

@@ -10,4 +10,5 @@ const TabsPanel = (props) => {
     const panelClassNames = classNames(s.panel, !active && s["--panel-hidden"], className);
     return (_jsx("div", { ...attributes, className: panelClassNames, tabIndex: 0, role: "tabpanel", id: panelId, "aria-labelledby": buttonId, children: active && children }));
 };
+TabsPanel.displayName = "Tabs.Panel";
 export default TabsPanel;

package/dist/components/Tabs/TabsUncontrolled.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Tabs.types";
-declare const TabsUncontrolled: (props: T.UncontrolledProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabsUncontrolled: {
+    (props: T.UncontrolledProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default TabsUncontrolled;

package/dist/components/Tabs/TabsUncontrolled.js

@@ -16,4 +16,5 @@ const TabsUncontrolled = (props) => {
     };
     return (_jsx(TabsControlled, { ...props, onChange: handleChange, onSilentChange: handleSilentChange, value: value, defaultValue: undefined }));
 };
+TabsUncontrolled.displayName = "TabsUncontrolled";
 export default TabsUncontrolled;

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

@@ -4,8 +4,15 @@ declare const _default: {
     component: {
         (props: import("./..").TabsProps): React.JSX.Element;
         Item: React.ForwardRefExoticComponent<import("./..").TabsItemProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-        List: (props: import("../Tabs.types").ListProps) => React.JSX.Element;
-        Panel: (props: import("../Tabs.types").PanelProps) => React.JSX.Element;
+        List: {
+            (props: import("../Tabs.types").ListProps): React.JSX.Element;
+            displayName: string;
+        };
+        Panel: {
+            (props: import("../Tabs.types").PanelProps): React.JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

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

@@ -5,8 +5,15 @@ declare const _default: {
     component: {
         (props: import("./..").TabsProps): import("react").JSX.Element;
         Item: import("react").ForwardRefExoticComponent<import("./..").TabsItemProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-        List: (props: import("../Tabs.types").ListProps) => import("react").JSX.Element;
-        Panel: (props: import("../Tabs.types").PanelProps) => import("react").JSX.Element;
+        List: {
+            (props: import("../Tabs.types").ListProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        Panel: {
+            (props: import("../Tabs.types").PanelProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

package/dist/components/Text/Text.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Text.types";
-declare const Text: <As extends keyof React.JSX.IntrinsicElements>(props: T.Props<As>) => import("react/jsx-runtime").JSX.Element;
+declare const Text: {
+    <As extends keyof React.JSX.IntrinsicElements>(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Text;

package/dist/components/Text/Text.js

@@ -14,10 +14,8 @@ const Text = (props) => {
     const { variant, color, weight, align, decoration, maxLines, wrap, children, className, attributes, } = props;
     const largestVariant = typeof variant === "string" ? variant : variant?.xl || variant?.l || variant?.m || variant?.s;
     const alignStyles = getTextAlignStyles(align);
-    /**
-     * Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
-     * It still resolves the attributes correctly based on the tag
-     */
+    // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const TagName = props.as || (largestVariant && tagMap[largestVariant]) || "div";
     const rootClassName = classNames(s.root, color && s[`--color-${color}`], ...responsiveClassNames(s, "--variant", variant), ...responsiveClassNames(s, "--weight", weight), decoration && s[`--decoration-${decoration}`], maxLines !== undefined && s[`--clamp`], maxLines === 1 && s["--break-all"], wrap && s[`--wrap-${wrap}`], className);
     const style = {
@@ -27,4 +25,5 @@ const Text = (props) => {
     };
     return (_jsx(TagName, { ...attributes, className: rootClassName, style: style, children: children }));
 };
+Text.displayName = "Text";
 export default Text;

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

@@ -1,6 +1,9 @@
 declare const _default: {
     title: string;
-    component: <As extends keyof React.JSX.IntrinsicElements>(props: import("./..").TextProps<As>) => import("react").JSX.Element;
+    component: {
+        <As extends keyof React.JSX.IntrinsicElements>(props: import("./..").TextProps<As>): import("react").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

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

@@ -1,7 +1,7 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Text from "../index.js";
 export default {
-    title: "Utilities/Text",
+    title: "Utility components/Text",
     component: Text,
     parameters: {
         iframe: {

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

@@ -1,7 +1,10 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: <As extends keyof React.JSX.IntrinsicElements>(props: import("./..").TextProps<As>) => import("react").JSX.Element;
+    component: {
+        <As extends keyof React.JSX.IntrinsicElements>(props: import("./..").TextProps<As>): import("react").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

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

@@ -1,7 +1,7 @@
 import { expect } from "@storybook/test";
 import Text from "../index.js";
 export default {
-    title: "Utilities/Text/tests",
+    title: "Utility components/Text/tests",
     component: Text,
     parameters: {
         iframe: {

package/dist/components/TextArea/TextArea.d.ts

@@ -1,6 +1,10 @@
 import type * as T from "./TextArea.types";
 declare const TextArea: {
     (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Aligner: (props: import("../_private/Aligner").AlignerProps) => import("react/jsx-runtime").JSX.Element;
+    Aligner: {
+        (props: import("../_private/Aligner").AlignerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
 };
 export default TextArea;

package/dist/components/TextArea/TextArea.js

@@ -31,4 +31,5 @@ const TextArea = (props) => {
     return (_jsx("div", { ...attributes, "data-rs-aligner-target": true, className: rootClassName, "data-rs-textarea-value": autogrowValue, children: _jsx("textarea", { rows: 3, ...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 }) }));
 };
 TextArea.Aligner = Aligner;
+TextArea.displayName = "TextArea";
 export default TextArea;

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

@@ -2,7 +2,11 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").TextAreaProps): import("react").JSX.Element;
-        Aligner: (props: import("../../_private/Aligner").AlignerProps) => import("react").JSX.Element;
+        Aligner: {
+            (props: import("../../_private/Aligner").AlignerProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

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

@@ -4,7 +4,11 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").TextAreaProps): import("react").JSX.Element;
-        Aligner: (props: import("../../_private/Aligner").AlignerProps) => import("react").JSX.Element;
+        Aligner: {
+            (props: import("../../_private/Aligner").AlignerProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

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

@@ -1,6 +1,10 @@
 import type * as T from "./TextField.types";
 declare const TextField: {
     (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Aligner: (props: import("../_private/Aligner").AlignerProps) => import("react/jsx-runtime").JSX.Element;
+    Aligner: {
+        (props: import("../_private/Aligner").AlignerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
 };
 export default TextField;