reshaped 3.2.6-rc.0 → 3.3.0

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

@@ -1,6 +1,7 @@
+import React from "react";
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./..").ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("./..").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         iframe: {
             url: string;
@@ -8,6 +9,7 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const direction: () => import("react").JSX.Element;
-export declare const visibility: () => import("react").JSX.Element;
-export declare const ref: () => import("react").JSX.Element;
+export declare const direction: () => React.JSX.Element;
+export declare const visibility: () => React.JSX.Element;
+export declare const ref: () => React.JSX.Element;
+export declare const edgeCases: () => React.JSX.Element;

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

@@ -1,8 +1,10 @@
+import React from "react";
 import { useRef } from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import ScrollArea from "../index.js";
 import View from "../../View/index.js";
 import Button from "../../Button/index.js";
+import useToggle from "../../../hooks/useToggle.js";
 export default {
     title: "Utilities/ScrollArea",
     component: ScrollArea,
@@ -33,7 +35,7 @@ const Demo = () => {
 };
 export const direction = () => (<Example>
 		<Example.Item title="vertical">
-			<ScrollArea height="100px" scrollbarDisplay="visible">
+			<ScrollArea height="100px" scrollbarDisplay="visible" onScroll={console.log}>
 				<View backgroundColor="neutral-faded" padding={4}>
 					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
 					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
@@ -46,7 +48,7 @@ export const direction = () => (<Example>
 			</ScrollArea>
 		</Example.Item>
 		<Example.Item title="horizontal">
-			<ScrollArea height="120px" scrollbarDisplay="visible">
+			<ScrollArea height="120px" scrollbarDisplay="visible" onScroll={console.log}>
 				<View backgroundColor="neutral-faded" padding={4} width="500px">
 					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
 					been the industry's standard dummy text ever since the 1500s
@@ -113,3 +115,27 @@ export const ref = () => (<Example>
 			<Demo />
 		</Example.Item>
 	</Example>);
+export const edgeCases = () => {
+    const toggle = useToggle(true);
+    return (<Example>
+			<Example.Item title="dynamic content update">
+				<View gap={4}>
+					<Button onClick={toggle.toggle}>Toggle</Button>
+					<ScrollArea height="100px" scrollbarDisplay="visible" ref={ref}>
+						<View backgroundColor="neutral-faded" padding={4} width={toggle.active ? "120%" : "90%"}>
+							{toggle.active ? (<React.Fragment>
+									Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
+									Ipsum has been the industry's standard dummy text ever since the 1500s, when an
+									unknown printer took a galley of type and scrambled it to make a type specimen
+									book. It has survived not only five centuries, but also the leap into electronic
+									typesetting, remaining essentially unchanged. It was popularised in the 1960s with
+									the release of Letraset sheets containing Lorem Ipsum passages, and more recently
+									with desktop publishing software like Aldus PageMaker including versions of Lorem
+									Ipsum.
+								</React.Fragment>) : null}
+						</View>
+					</ScrollArea>
+				</View>
+			</Example.Item>
+		</Example>);
+};

package/dist/components/Table/Table.js

@@ -25,9 +25,10 @@ const TableHeading = (props) => {
     return _jsx(TableCellPrivate, { ...props, tagName: "th" });
 };
 const TableRow = (props) => {
-    const { highlighted, children, attributes } = props;
-    const rowClassNames = classNames(s.row, highlighted && s["--row-highlighted"]);
-    return (_jsx("tr", { ...attributes, className: rowClassNames, children: children }));
+    const { highlighted, children, className, attributes } = props;
+    const onClick = props.onClick || attributes?.onClick;
+    const rowClassNames = classNames(s.row, highlighted && s["--row-highlighted"], className);
+    return (_jsx("tr", { ...attributes, className: rowClassNames, onClick: onClick, tabIndex: onClick ? 0 : undefined, children: children }));
 };
 const TableBody = (props) => {
     const { children, attributes, className } = props;

package/dist/components/Table/Table.module.css

@@ -1 +1 @@
-.root{margin:0 calc(var(--rs-unit-x4) * -1);mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-unit-x4),#000 calc(100% - var(--rs-unit-x4)),transparent 100%);overflow:auto;padding:0 var(--rs-unit-x4)}.table{border-collapse:separate;min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:not(:last-child){padding-inline-end:0}.head+.body .row:first-child .cell,.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.cell--valign-start{vertical-align:top}.cell--valign-center{vertical-align:middle}.cell--valign-end{vertical-align:bottom}.cell--width-auto{white-space:nowrap}.--row-highlighted{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.--border-outer .table{border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:last-child){padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}
+.root{margin:0 calc(var(--rs-unit-x4) * -1);mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-unit-x4),#000 calc(100% - var(--rs-unit-x4)),transparent 100%);overflow:auto;padding:0 var(--rs-unit-x4)}.table{border-collapse:separate;min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.row[tabindex]{cursor:pointer}[data-rs-keyboard] .row:focus{box-shadow:var(--rs-focus-inset-shadow);outline:none;z-index:var(--rs-z-index-raised)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:not(:last-child){padding-inline-end:0}.head+.body .row:first-child .cell,.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.cell--valign-start{vertical-align:top}.cell--valign-center{vertical-align:middle}.cell--valign-end{vertical-align:bottom}.cell--width-auto{white-space:nowrap}.--row-highlighted{background-color:rgba(var(--rs-color-rgb-background-neutral),24%)}.--border-outer .table{border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:last-child){padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}

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

@@ -9,7 +9,9 @@ export type Props = {
 };
 export type RowProps = {
     highlighted?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
     children: React.ReactNode;
+    className?: G.ClassName;
     attributes?: G.Attributes<"tr">;
 };
 export type CellProps = {

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

@@ -18,6 +18,6 @@ declare const _default: {
 export default _default;
 export declare const layout: () => React.JSX.Element;
 export declare const border: () => React.JSX.Element;
-export declare const highlighted: () => React.JSX.Element;
+export declare const rows: () => React.JSX.Element;
 export declare const edgeCases: () => React.JSX.Element;
 export declare const examples: () => React.JSX.Element;

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

@@ -128,7 +128,7 @@ export const border = () => (<Example>
 			</Table>
 		</Example.Item>
 	</Example>);
-export const highlighted = () => (<Example>
+export const rows = () => (<Example>
 		<Example.Item title="highlighted for row 2">
 			<Table>
 				<Table.Row>
@@ -141,6 +141,18 @@ export const highlighted = () => (<Example>
 				</Table.Row>
 			</Table>
 		</Example.Item>
+		<Example.Item title="clickable row 2, focus ring">
+			<Table>
+				<Table.Row>
+					<Table.Heading>Column 1</Table.Heading>
+					<Table.Heading>Column 2</Table.Heading>
+				</Table.Row>
+				<Table.Row onClick={() => { }}>
+					<Table.Cell>Cell 1</Table.Cell>
+					<Table.Cell>Cell 2</Table.Cell>
+				</Table.Row>
+			</Table>
+		</Example.Item>
 	</Example>);
 export const edgeCases = () => (<Example>
 		<Example.Item title="scroll fade">

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

@@ -1 +1 @@
-@property --rs-tabs-stop-l{syntax:"<percentage>";initial-value:.01%;inherits:false}@property --rs-tabs-stop-r{syntax:"<percentage>";initial-value:100%;inherits:false}.root{box-sizing:initial;max-width:100%}.list,.root{position:relative}.inner{mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent 100%);transition:var(--rs-duration-fast) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{--rs-tabs-gap:var(--rs-unit-x6);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}.buttonContent:hover{color:var(--rs-color-foreground-neutral-faded)}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-focus-inset-shadow)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.--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-raised)}.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}.next,.prev{align-items:center;display:flex;inset-block:0;position:absolute;z-index:var(--rs-z-index-raised)}[dir=rtl] .next,[dir=rtl] .prev{transform:scaleX(-1)}.next{inset-inline-end:var(--rs-unit-x1)}.prev{inset-inline-start:var(--rs-unit-x1)}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-focus-shadow)}.--panel-hidden{display:none}.--direction-row{margin:0 calc(var(--rs-unit-x2) * -1);overflow:hidden;padding:0 var(--rs-unit-x2)}.--direction-row .inner{margin:0 calc(var(--rs-unit-x2) * -1) -40px;overflow:auto;padding:0 var(--rs-unit-x2) 40px;white-space:nowrap;-ms-overflow-style:none;overflow:-moz-scrollbars-none;scrollbar-width:none}.--direction-row .inner::-webkit-scrollbar{display:none}.--direction-row .inner:after{height:1px;inset-inline:var(--rs-unit-x2);bottom:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .listItem+.listItem{margin-inline-start:var(--rs-tabs-gap)}.--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{bottom:0;height:100%;inset-inline-end:0;top:0;width:1px}.--direction-column .list{display:flex;flex-direction:column}.--direction-column .listItem{--rs-tabs-gap:var(--rs-unit-x1)}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .listItem+.listItem{margin-top:var(--rs-tabs-gap)}.--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)}.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}.--variant-pills .listItem,.--variant-pills-elevated .listItem{--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;overflow:hidden}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-stop-r:85%}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-stop-l:15%}@media (--rs-viewport-s ){.next,.prev{display:none}}
+@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;max-width:100%}.list,.root{position:relative}.list{--rs-tabs-gap:var(--rs-unit-x6);gap:var(--rs-tabs-gap)}.inner{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}.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}.buttonContent:hover{color:var(--rs-color-foreground-neutral-faded)}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-focus-inset-shadow)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.--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-raised)}.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-raised)}.control.control--active{opacity:1;pointer-events:all;transform:translateX(0)}[dir=rtl] .control{transform:scaleX(-1)}.control--next{inset-inline-end:0;transform:translateX(var(--rs-unit-x2))}.control--prev{inset-inline-start:0;transform:translateX(calc(var(--rs-unit-x2) * -1))}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-focus-shadow)}.--panel-hidden{display:none}.--direction-row .inner{margin:0 calc(var(--rs-unit-x2) * -1);overflow:auto;padding:0 var(--rs-unit-x2);white-space:nowrap;-ms-overflow-style:none;overflow:-moz-scrollbars-none;scrollbar-width:none}.--direction-row .inner::-webkit-scrollbar{display:none}.--direction-row .inner:after{height:1px;inset-inline:var(--rs-unit-x2);bottom: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{bottom:0;height:100%;inset-inline-end:0;top: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)}.--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;overflow:hidden}.--item-width-equal .list{display:flex}.--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) * 12)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 12)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 6);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 12)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 6);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 12)}}

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

@@ -23,6 +23,8 @@ export type ListProps = {
 export type PanelProps = {
     value: string;
     children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
 };
 export type BaseProps = {
     children?: React.ReactNode;

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

@@ -9,8 +9,8 @@ export declare const useTabs: (value?: string) => {
         value: string;
         name?: string;
     }) => void) | undefined;
-    variant?: ("bordered" | "borderless" | "pills" | "pills-elevated") | undefined;
-    direction?: ("column" | "row") | undefined;
+    variant?: "bordered" | "borderless" | "pills" | "pills-elevated" | undefined;
+    direction?: "column" | "row" | undefined;
     itemWidth?: "equal" | undefined;
     size: NonNullable<T.BaseProps["size"]>;
     value?: string;

package/dist/components/Tabs/TabsItem.js

@@ -7,6 +7,7 @@ import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import Text from "../Text/index.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import { findParent } from "../../utilities/dom/index.js";
 import { useTabs } from "./TabsContext.js";
 import s from "./Tabs.module.css";
 const TabsItem = (props, ref) => {
@@ -23,9 +24,6 @@ const TabsItem = (props, ref) => {
         "aria-selected": active,
     };
     const updateRefs = React.useCallback(() => {
-        if (!("current" in itemRef)) {
-            throw new Error("Reshaped, Tabs: TabItem is expecting an object ref format but received a function ref");
-        }
         elPrevActiveRef.current = elActiveRef.current;
         elActiveRef.current = itemRef.current;
     }, [elActiveRef, elPrevActiveRef]);
@@ -40,14 +38,22 @@ const TabsItem = (props, ref) => {
         if (!listEl || !currentListItem || !prevListItem || listEl.scrollWidth === listEl.clientWidth) {
             return;
         }
-        const navigatingBack = currentListItem.offsetLeft < prevListItem.offsetLeft;
-        const threshold = (currentListItem.offsetLeft - listEl.scrollLeft) / listEl.clientWidth;
-        // Only scroll if the item is close to getting clipped
-        // Back navigation threshold is 0.3 since its calculated based on offsetLeft
-        const shouldScroll = navigatingBack ? threshold < 0.3 : threshold > 0.5;
-        if (!shouldScroll)
+        if (!elScrollableRef.current)
+            return;
+        // Big enough value to show there are more items and not overlap arrow controls
+        const visibilityThreshold = 48;
+        const elItem = findParent(itemRef.current, (el) => el.hasAttribute("data-rs-tabs-item"));
+        if (!elItem)
             return;
-        itemRef.current?.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+        const elScrollable = elScrollableRef.current;
+        const startOverflow = elItem.offsetLeft - elScrollable.scrollLeft;
+        const endOverflow = elScrollable.scrollLeft + elScrollable.clientWidth - (elItem.offsetLeft + elItem.clientWidth);
+        if (startOverflow < visibilityThreshold || endOverflow < visibilityThreshold) {
+            elScrollableRef.current.scrollTo({
+                left: elItem.offsetLeft + elItem.clientWidth / 2 - elScrollable.clientWidth / 2,
+                behavior: "smooth",
+            });
+        }
     };
     useIsomorphicLayoutEffect(() => {
         if (!active)

package/dist/components/Tabs/TabsList.js

@@ -6,7 +6,8 @@ import useRTL from "../../hooks/useRTL.js";
 import { focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "../../utilities/a11y/index.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
-import Button from "../Button/index.js";
+import Actionable from "../Actionable/index.js";
+import Icon from "../Icon/index.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
 import IconChevronLeft from "../../icons/ChevronLeft.js";
 import TabsItem from "./TabsItem.js";
@@ -136,12 +137,20 @@ const TabsList = (props) => {
     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)
                                 return null;
-                            return (_jsx("div", { className: s.listItem, children: child }, child.props.value || child.key || index));
+                            return (_jsx("div", { className: s.listItem, "data-rs-tabs-item": true, children: child }, 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,
                                 "--rs-tab-selection-scale-x": selection.scaleX,
                                 "--rs-tab-selection-scale-y": selection.scaleY,
-                            } })] }) }), (fadeSide === "start" || fadeSide === "both") && (_jsx("span", { className: s.prev, children: _jsx(Button, { onClick: handlePrevClick, size: "small", icon: IconChevronLeft, rounded: true, attributes: { "aria-hidden": true, tabIndex: -1 } }) })), (fadeSide === "end" || fadeSide === "both") && (_jsx("span", { className: s.next, children: _jsx(Button, { onClick: handleNextClick, size: "small", icon: IconChevronRight, rounded: true, attributes: { "aria-hidden": true, tabIndex: -1 } }) }))] }));
+                            } })] }) }), _jsx(Actionable, { onClick: handlePrevClick, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
+                    s.control,
+                    s["control--prev"],
+                    (fadeSide === "start" || fadeSide === "both") && s["control--active"],
+                ], children: _jsx(Icon, { svg: IconChevronLeft, size: 5 }) }), _jsx(Actionable, { onClick: handleNextClick, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
+                    s.control,
+                    s["control--next"],
+                    (fadeSide === "end" || fadeSide === "both") && s["control--active"],
+                ], children: _jsx(Icon, { svg: IconChevronRight, size: 5 }) })] }));
 };
 export default TabsList;

package/dist/components/Tabs/TabsPanel.js

@@ -4,10 +4,10 @@ import { classNames } from "../../utilities/helpers.js";
 import { useTabs } from "./TabsContext.js";
 import s from "./Tabs.module.css";
 const TabsPanel = (props) => {
-    const { value: panelValue, children } = props;
+    const { value: panelValue, children, className, attributes } = props;
     const { value, panelId, buttonId } = useTabs(panelValue);
     const active = panelValue === value;
-    const panelClassNames = classNames(s.panel, !active && s["--panel-hidden"]);
-    return (_jsx("div", { className: panelClassNames, tabIndex: 0, role: "tabpanel", id: panelId, "aria-labelledby": buttonId, children: active && children }));
+    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 }));
 };
 export default TabsPanel;

package/dist/components/Text/Text.js

@@ -19,9 +19,10 @@ const Text = (props) => {
      * It still resolves the attributes correctly based on the tag
      */
     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}`], alignStyles?.classNames, className);
+    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 = {
         ...attributes?.style,
+        ...alignStyles?.variables,
         "--rs-text-lines": maxLines,
     };
     return (_jsx(TagName, { ...attributes, className: rootClassName, style: style, children: children }));

package/dist/components/TextField/TextField.js

@@ -8,21 +8,21 @@ import Icon from "../Icon/index.js";
 import Aligner from "../_private/Aligner/index.js";
 import s from "./TextField.module.css";
 const TextFieldSlot = (props) => {
-    const { slot, icon, size, affix, position } = props;
+    const { slot, icon, size, affix, position, id } = props;
     if (!icon && !slot && !affix)
         return null;
     // In case fragment is used, map over its children instead
     const renderedSlot = React.isValidElement(slot) && slot.type === React.Fragment ? slot.props.children : slot;
     const slotNode = slot &&
         React.Children.map(renderedSlot, (child) => (_jsx("div", { className: classNames(s.slot, s[`slot--position-${position}`]), children: child }, "slot")));
-    const iconNode = icon && (_jsx("div", { className: s.icon, children: _jsx(Icon, { size: responsivePropDependency(size, (size) => {
+    const iconNode = icon && (_jsx("label", { className: s.icon, htmlFor: id, children: _jsx(Icon, { size: responsivePropDependency(size, (size) => {
                 if (size === "large")
                     return 5;
                 if (size === "xlarge")
                     return 6;
                 return 4;
             }), svg: icon }) }, "icon"));
-    const affixNode = affix && (_jsx("div", { className: classNames(s.affix, s[`affix--position-${position}`]), children: affix }, "affix"));
+    const affixNode = affix && (_jsx("label", { className: classNames(s.affix, s[`affix--position-${position}`]), htmlFor: id, children: affix }, "affix"));
     /**
      * Start position:
      * - Icon is first to indicate a role of the input
@@ -48,7 +48,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 }), _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 })] }));
+    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 })] }));
 };
 TextField.Aligner = Aligner;
 export default 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) var(--rs-text-field-gap);position:relative;row-gap:var(--rs-unit-x1);z-index:0}.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,.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)}.icon{pointer-events:none}.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: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: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: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);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: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: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: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: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)}}

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

@@ -36,6 +36,7 @@ export type UncontrolledProps = BaseProps & {
 };
 export type Props = ControlledProps | UncontrolledProps;
 export type SlotProps = {
+    id: string;
     slot?: React.ReactNode;
     icon?: IconProps["svg"];
     size: Size;

package/dist/components/Toast/Toast.js

@@ -1,6 +1,7 @@
 "use client";
 import { createElement as _createElement } from "react";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import View from "../View/index.js";
 import Button from "../Button/index.js";
 import Icon from "../Icon/index.js";
@@ -19,7 +20,7 @@ const Toast = (props) => {
     if (actionsSlot) {
         actions = Array.isArray(actionsSlot) ? actionsSlot : [actionsSlot];
     }
-    const textContent = (title || text) && (_jsxs(_Fragment, { children: [title && (_jsxs(Text, { variant: "body-3", weight: "bold", as: textTagName, children: [title, " "] })), _jsx(Text, { variant: "body-3", as: textTagName, children: text })] }));
+    const textContent = (title || text) && (_jsxs(React.Fragment, { children: [title && (_jsxs(Text, { variant: "body-3", weight: "bold", as: textTagName, children: [title, " "] })), _jsx(Text, { variant: "body-3", as: textTagName, children: text })] }));
     const toastNode = (_jsxs(View, { backgroundColor: backgroundColor, borderColor: borderColor, padding: 4, borderRadius: "medium", animated: true, direction: "row", gap: 3, align: isLarge ? "start" : "center", className: [s.toast, className], attributes: attributes, children: [icon && _jsx(Icon, { size: 5, svg: icon, className: s.icon }), startSlot && !icon && _jsx(View.Item, { children: startSlot }), _jsx(View.Item, { grow: true, children: _jsxs(View, { direction: isLarge ? "column" : "row", align: isLarge ? "start" : "center", gap: 3, children: [_jsx(View.Item, { grow: true, children: (textContent && children) || size !== "small" ? (_jsxs(View, { gap: 0.5, children: [textContent, children && _jsx(View, { gap: 3, children: children })] })) : (textContent || children) }), actions.length && (_jsx(View, { direction: "row", align: "center", gap: 2, children: actions.map((slot, index) => {
                                 const isPrimary = size === "large" ? index === 0 : index === actions.length - 1;
                                 const primaryColor = color === "neutral" || color === "inverted" ? "neutral" : "media";

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

@@ -1,3 +1,3 @@
 import type * as T from "./Tooltip.types";
-declare const Tooltip: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: (props: T.Props) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -1,13 +1,13 @@
 "use client";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Theme from "../Theme/index.js";
 import Text from "../Text/index.js";
 import Flyout from "../_private/Flyout/index.js";
 import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
-    const { id, text, children, onOpen, onClose, position = "bottom", containerRef, contentGap, contentShift, active, disabled, disableContentHover, } = props;
+    const { text, children, position = "bottom", ...flyoutProps } = props;
     if (!text)
-        return _jsx(_Fragment, { children: children({}) });
-    return (_jsxs(Flyout, { id: id, active: active, position: position, disabled: disabled, contentGap: contentGap, contentShift: contentShift, onOpen: onOpen, onClose: onClose, disableContentHover: disableContentHover, containerRef: containerRef, triggerType: "hover", groupTimeouts: true, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
+        return children({});
+    return (_jsxs(Flyout, { ...flyoutProps, position: position, triggerType: "hover", groupTimeouts: true, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
 };
 export default Tooltip;

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

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

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

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: (props: import("./..").TooltipProps) => import("react").JSX.Element;
+    component: (props: import("./..").TooltipProps) => string | number | boolean | Iterable<import("react").ReactNode> | import("react").JSX.Element | null | undefined;
     parameters: {
         iframe: {
             url: string;

package/dist/components/View/View.js

@@ -38,7 +38,7 @@ const View = (props) => {
     /**
      * Style props
      * */
-    animated, backgroundColor, borderColor, borderRadius, shadow, textAlign, overflow, position = "relative", inset, insetTop, insetBottom, insetStart, insetEnd, zIndex, 
+    animated, backgroundColor, borderColor, borderRadius, shadow, textAlign, overflow, position, inset, insetTop, insetBottom, insetStart, insetEnd, zIndex, 
     /**
      * Item prop
      */
@@ -145,8 +145,8 @@ const View = (props) => {
         return renderItem({ child, index: renderedIndex });
     });
     // Classnames and attributes are written here so we can assign nowrap to the root element based on the children
-    const rootClassNames = classNames(s.root, className, radiusStyles?.classNames, positionStyles?.classNames, bleedStyles?.classNames, widthStyles?.classNames, heightStyles?.classNames, aspectRatioStyles?.classNames, maxWidthStyles?.classNames, maxHeightStyles?.classNames, minWidthStyles?.classNames, minHeightStyles?.classNames, insetStyles?.classNames, insetTopStyles?.classNames, insetBottomStyles?.classNames, insetStartStyles?.classNames, insetEndStyles?.classNames, borderStyles?.classNames, textAlignStyles?.classNames, justifyStyles?.classNames, alignStyles?.classNames, backgroundColor && s[`--bg-${backgroundColor}`], shadow && s[`--shadow-${shadow}`], overflow && s[`--overflow-${overflow}`], animated && s["--animated"], divided && s["--divided"], (padding !== undefined || paddingInline !== undefined || paddingBlock !== undefined) &&
-        s["--padding"], paddingBottom !== undefined && s["--padding-bottom"], paddingEnd !== undefined && s["--padding-end"], paddingStart !== undefined && s["--padding-start"], paddingTop !== undefined && s["--padding-top"], (isFlex || nowrap) && s["--flex"], ...responsiveClassNames(s, "--direction", direction), 
+    const rootClassNames = classNames(s.root, className, radiusStyles?.classNames, bleedStyles?.classNames, widthStyles?.classNames, heightStyles?.classNames, maxWidthStyles?.classNames, maxHeightStyles?.classNames, minWidthStyles?.classNames, minHeightStyles?.classNames, borderStyles?.classNames, backgroundColor && s[`--bg-${backgroundColor}`], shadow && s[`--shadow-${shadow}`], overflow && s[`--overflow-${overflow}`], animated && s["--animated"], divided && s["--divided"], (padding !== undefined || paddingInline !== undefined || paddingBlock !== undefined) &&
+        s["--padding"], (isFlex || nowrap) && s["--flex"], ...responsiveClassNames(s, "--direction", direction), 
     // Wrap and nowrap are separate here because inverting any of them could result into a false value which will be ignored by classNames
     ...responsiveClassNames(s, "--nowrap", nowrap || wrap === false), ...responsiveClassNames(s, "--wrap", wrap), 
     // Item classnames
@@ -173,6 +173,11 @@ const View = (props) => {
         ...insetBottomStyles?.variables,
         ...insetStartStyles?.variables,
         ...insetEndStyles?.variables,
+        ...alignStyles?.variables,
+        ...justifyStyles?.variables,
+        ...aspectRatioStyles?.variables,
+        ...positionStyles?.variables,
+        ...textAlignStyles?.variables,
         ...(zIndex ? { "--rs-view-z": zIndex } : {}),
     };
     return (_jsx(TagName, { ...attributes, className: rootClassNames, style: rootVariables, children: formattedChildren }));