reshaped 4.0.3 → 4.1.0

package/dist/components/Reshaped/Reshaped.js

@@ -2,13 +2,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import { GlobalColorMode, PrivateTheme } from "../Theme/index.js";
-import { useGlobalColorMode } from "../Theme/useTheme.js";
-import { ToastProvider } from "../Toast/index.js";
-import { SingletonHotkeysProvider } from "../../hooks/_internal/useSingletonHotkeys.js";
-import { SingletonKeyboardModeProvider } from "../../hooks/_internal/useSingletonKeyboardMode.js";
-import { SingletonRTLProvider } from "../../hooks/_internal/useSingletonRTL.js";
-import { SingletonViewportProvider } from "../../hooks/_internal/useSingletonViewport.js";
+import { GlobalColorMode, PrivateTheme } from "../../components/Theme";
+import { useGlobalColorMode } from "../../components/Theme/useTheme";
+import { ToastProvider } from "../../components/Toast";
+import { SingletonHotkeysProvider } from "../../hooks/_internal/useSingletonHotkeys";
+import { SingletonKeyboardModeProvider } from "../../hooks/_internal/useSingletonKeyboardMode";
+import { SingletonRTLProvider } from "../../hooks/_internal/useSingletonRTL";
+import { SingletonViewportProvider } from "../../hooks/_internal/useSingletonViewport";
 import "./Reshaped.css";
 import s from "./Reshaped.module.css";
 const Reshaped = (props) => {

package/dist/components/Reshaped/Reshaped.module.css

@@ -1 +1 @@
-.root{color:var(--rs-color-foreground-neutral);display:contents}
+.root{display:contents;color:var(--rs-color-foreground-neutral)}

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

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { GlobalColorModeProps, ThemeProps } from "../Theme";
+import type { GlobalColorModeProps, ThemeProps } from "../../components/Theme";
 import type * as G from "../../types/global";
 import type { Attributes } from "../../types/global";
 export type Props = {

package/dist/components/Reshaped/index.js

@@ -1 +1 @@
-export { default } from "./Reshaped.js";
+export { default } from "./Reshaped";

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.keyboardMode = exports.testScoped = exports.scoped = exports.darkMode = exports.lightMode = exports.controlledMode = exports.rtl = void 0;
 const react_1 = require("react");
 const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../Button"));
-const Theme_1 = require("../../Theme");
+const Button_1 = __importDefault(require("../../../components/Button"));
+const Theme_1 = require("../../../components/Theme");
 const Reshaped_1 = __importDefault(require("../Reshaped"));
 exports.default = {
     title: "Utility components/Reshaped",

package/dist/components/Resizable/Resizable.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import View from "../View/index.js";
-import { ResizableContext } from "./ResizableContext.js";
+import View from "../../components/View";
+import { ResizableContext } from "./ResizableContext";
 import s from "./Resizable.module.css";
 export const ResizableItem = (props) => {
     const { children, defaultSize, minSize, maxSize } = props;

package/dist/components/Resizable/Resizable.module.css

@@ -1 +1 @@
-.root{isolation:isolate}.item{--rs-resizable-default-size:none;--rs-resizable-min-size:0;--rs-resizable-max-size:100%;flex-grow:100;max-width:var(--rs-resizable-default-size);min-width:var(--rs-resizable-default-size);overflow:hidden}.handle{flex-shrink:0;position:relative;z-index:var(--rs-z-index-relative)}.handle:after,.handle:before{border-radius:var(--rs-radius-circular);content:"";position:absolute}.handle:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,background-color}.--variant-bordered .handle:after{background:var(--rs-color-border-neutral-faded)}.--variant-bordered .handle--dragging:after,.--variant-bordered .handle:hover:after,.--variant-borderless .handle:after,[data-rs-keyboard] .--variant-bordered .handle:focus:after{background:var(--rs-color-border-neutral)}.--variant-borderless .handle:after{opacity:0}.--variant-borderless .handle--dragging:after,.--variant-borderless .handle:hover:after,[data-rs-keyboard] .--variant-borderless .handle:focus:after{opacity:.6}body:has(.handle--dragging) .--variant-borderless .handle:not(.handle--dragging){opacity:0}body:has(.handle--dragging) .--variant-bordered .handle:not(.handle--dragging):after{background:var(--rs-color-border-neutral-faded)}body:has(.--direction-row>.handle--dragging){cursor:ew-resize}body:has(.--direction-column>.handle--dragging){cursor:ns-resize}.--direction-row>.handle{cursor:ew-resize}.--direction-row>.handle:after,.--direction-row>.handle:before{inset-block:0;inset-inline-start:50%;transform:translateX(-50%)}.--direction-row>.handle:before{width:var(--rs-unit-x6)}.--variant-borderless.--direction-row>.handle:after{width:var(--rs-unit-x1)}.--variant-bordered.--direction-row>.handle:after{width:1px}.--direction-row>.item[data-rs-resizable-item-mounted]{max-width:var(--rs-resizable-max-size);min-width:var(--rs-resizable-min-size)}.--direction-column>.handle{cursor:ns-resize}.--direction-column>.handle:after,.--direction-column>.handle:before{inset-block-start:50%;inset-inline:0;transform:translateY(-50%)}.--direction-column>.handle:before{height:var(--rs-unit-x6)}.--variant-borderless.--direction-column>.handle:after{height:var(--rs-unit-x1)}.--variant-bordered.--direction-column>.handle:after{height:1px}.--direction-column>.item[data-rs-resizable-item-mounted]{max-height:var(--rs-resizable-max-size);min-height:var(--rs-resizable-min-size)}
+.root{isolation:isolate}.item{--rs-resizable-default-size:none;--rs-resizable-min-size:0;--rs-resizable-max-size:100%;overflow:hidden;min-width:var(--rs-resizable-default-size);max-width:var(--rs-resizable-default-size);flex-grow:100}.handle{flex-shrink:0;position:relative;z-index:var(--rs-z-index-relative)}.handle:after,.handle:before{content:"";position:absolute;border-radius:var(--rs-radius-circular)}.handle:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,background-color}.--variant-bordered .handle:after{background:var(--rs-color-border-neutral-faded)}.--variant-bordered .handle--dragging:after,.--variant-bordered .handle:hover:after,.--variant-borderless .handle:after,[data-rs-keyboard] .--variant-bordered .handle:focus:after{background:var(--rs-color-border-neutral)}.--variant-borderless .handle:after{opacity:0}.--variant-borderless .handle--dragging:after,.--variant-borderless .handle:hover:after,[data-rs-keyboard] .--variant-borderless .handle:focus:after{opacity:.6}body:has(.handle--dragging) .--variant-borderless .handle:not(.handle--dragging){opacity:0}body:has(.handle--dragging) .--variant-bordered .handle:not(.handle--dragging):after{background:var(--rs-color-border-neutral-faded)}body:has(.--direction-row>.handle--dragging){cursor:ew-resize}body:has(.--direction-column>.handle--dragging){cursor:ns-resize}.--direction-row>.handle{cursor:ew-resize}.--direction-row>.handle:after,.--direction-row>.handle:before{inset-block:0;inset-inline-start:50%;transform:translateX(-50%)}.--direction-row>.handle:before{width:var(--rs-unit-x6)}.--variant-borderless.--direction-row>.handle:after{width:var(--rs-unit-x1)}.--variant-bordered.--direction-row>.handle:after{width:1px}.--direction-row>.item[data-rs-resizable-item-mounted]{min-width:var(--rs-resizable-min-size);max-width:var(--rs-resizable-max-size)}.--direction-column>.handle{cursor:ns-resize}.--direction-column>.handle:after,.--direction-column>.handle:before{inset-inline:0;inset-block-start:50%;transform:translateY(-50%)}.--direction-column>.handle:before{height:var(--rs-unit-x6)}.--variant-borderless.--direction-column>.handle:after{height:var(--rs-unit-x1)}.--variant-bordered.--direction-column>.handle:after{height:1px}.--direction-column>.item[data-rs-resizable-item-mounted]{min-height:var(--rs-resizable-min-size);max-height:var(--rs-resizable-max-size)}

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

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { ViewProps } from "../View";
+import type { ViewProps } from "../../components/View";
 import type { UseDragCallbackArgs } from "../../hooks/_internal/useDrag";
 export type Props = {
     /** Component render variant */

package/dist/components/Resizable/ResizableHandle.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import View from "../View/index.js";
-import useDrag from "../../hooks/_internal/useDrag.js";
-import { ResizableContext } from "./ResizableContext.js";
+import View from "../../components/View";
+import useDrag from "../../hooks/_internal/useDrag";
+import { ResizableContext } from "./ResizableContext";
 import s from "./Resizable.module.css";
 const ResizableHandle = (props) => {
     const { children } = props;

package/dist/components/Resizable/index.js

@@ -1,5 +1,5 @@
-import Resizable, { ResizableItem } from "./Resizable.js";
-import ResizableHandle from "./ResizableHandle.js";
+import Resizable, { ResizableItem } from "./Resizable";
+import ResizableHandle from "./ResizableHandle";
 const ResizableRoot = Resizable;
 ResizableRoot.Item = ResizableItem;
 ResizableRoot.Handle = ResizableHandle;

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

@@ -1,9 +1,9 @@
 import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("./..").ResizableProps> & {
+    component: import("react").FC<import("../../../components/Resizable").ResizableProps> & {
         Item: typeof import("../Resizable").ResizableItem;
-        Handle: import("react").FC<import("./..").ResizableHandleProps>;
+        Handle: import("react").FC<import("../../../components/Resizable").ResizableHandleProps>;
     };
     parameters: {
         iframe: {

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

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.testWrapper = exports.className = exports.layout = exports.size = exports.variant = exports.children = exports.direction = void 0;
 const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../Button"));
-const Resizable_1 = __importDefault(require("./.."));
-const View_1 = __importDefault(require("../../View"));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const Resizable_1 = __importDefault(require("../../../components/Resizable"));
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Components/Resizable",

package/dist/components/ScrollArea/ScrollArea.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
 import { classNames } from "@reshaped/utilities";
 import { disableScroll, enableScroll } from "@reshaped/utilities/internal";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import { resolveMixin } from "../../styles/mixin.js";
+import useHandlerRef from "../../hooks/useHandlerRef";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
+import { resolveMixin } from "../../styles/mixin";
 import s from "./ScrollArea.module.css";
 const ScrollAreaBar = (props) => {
     const { ratio, position, vertical, onThumbMove } = props;
@@ -65,15 +65,15 @@ const ScrollAreaBar = (props) => {
         }, ref: barRef, onClick: handleClick, onMouseDown: handleDragStart, "aria-hidden": "true", children: _jsx("div", { className: s.thumb }) }));
 };
 const ScrollArea = forwardRef((props, ref) => {
-    const { children, height, maxHeight, scrollbarDisplay = "hover", overscrollBehavior = "auto", onScroll, className, attributes, scrollableAttributes, scrollableClassName, } = props;
+    const { children, height, maxHeight, scrollbarDisplay = "hover", overscrollBehavior = "auto", fade, onScroll, className, attributes, scrollableAttributes, scrollableClassName, } = props;
     const [scrollRatio, setScrollRatio] = React.useState({ x: 1, y: 1 });
     const [scrollPosition, setScrollPosition] = React.useState({ x: 0, y: 0 });
     const scrollableRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const rootRef = React.useRef(null);
     const mixinStyles = resolveMixin({ height, maxHeight });
-    const rootClassNames = classNames(s.root, scrollbarDisplay && s[`--display-${scrollbarDisplay}`], className);
-    const scrollableClassNames = classNames(s.scrollable, overscrollBehavior && s[`--overscroll-${overscrollBehavior}`], mixinStyles.classNames);
+    const rootClassNames = classNames(s.root, scrollbarDisplay && s[`--display-${scrollbarDisplay}`], mixinStyles.classNames, className);
+    const scrollableClassNames = classNames(s.scrollable, overscrollBehavior && s[`--overscroll-${overscrollBehavior}`], fade && s["--fade"]);
     const updateScroll = React.useCallback(() => {
         const scrollableEl = scrollableRef.current;
         if (!scrollableEl)
@@ -132,12 +132,26 @@ const ScrollArea = forwardRef((props, ref) => {
         const contentEl = contentRef.current;
         if (!scrollableEl || !contentEl)
             return;
-        const observer = new ResizeObserver(updateScroll);
-        observer.observe(scrollableEl);
-        observer.observe(contentEl);
-        return () => observer.disconnect();
+        const resizeObserver = new ResizeObserver(updateScroll);
+        resizeObserver.observe(scrollableEl);
+        // Since scrollable elements have to follow the root height,
+        // we need to observe the children for detecting size changes
+        const observeChildren = () => {
+            for (const child of contentEl.children)
+                resizeObserver.observe(child);
+        };
+        observeChildren();
+        const mutationObserver = new MutationObserver(() => {
+            observeChildren();
+            updateScroll();
+        });
+        mutationObserver.observe(contentEl, { childList: true });
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
     }, [updateScroll]);
-    return (_jsxs("div", { ...attributes, ref: rootRef, className: rootClassNames, children: [_jsx("div", { className: scrollableClassNames, ref: scrollableRef, onScroll: handleScroll, style: { ...mixinStyles.variables }, children: _jsx("div", { ...scrollableAttributes, className: classNames(s.content, scrollableClassName), ref: contentRef, children: children }) }), scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] }));
+    return (_jsxs("div", { ...attributes, ref: rootRef, className: rootClassNames, style: mixinStyles.variables, children: [_jsx("div", { className: scrollableClassNames, ref: scrollableRef, onScroll: handleScroll, children: _jsx("div", { ...scrollableAttributes, className: classNames(s.content, scrollableClassName), ref: contentRef, children: children }) }), scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] }));
 });
 ScrollArea.displayName = "ScrollArea";
 export default ScrollArea;

package/dist/components/ScrollArea/ScrollArea.module.css

@@ -1 +1 @@
-.root{--rs-scroll-area-thumb-size:var(--rs-unit-x1);--rs-scroll-area-thumb-offset:var(--rs-unit-x1);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){outline:var(--rs-outline)}.scrollable{height:100%;outline:none;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.--overscroll-auto{overscroll-behavior:auto}.--overscroll-contain{overscroll-behavior:contain}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{background-color:var(--rs-color-background-neutral-faded);height:100%;opacity:0;position:relative;width:100%}.thumb,.thumb:before{border-radius:var(--rs-radius-circular);transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.thumb:before{background:var(--rs-color-foreground-neutral);content:"";display:block;opacity:.2;position:absolute}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb,.--display-visible>.scrollbar .thumb{opacity:1}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}
+@property --rs-scroll-area-fade-block-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-block-end{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-inline-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-inline-end{syntax:"<length>";initial-value:0;inherits:false}.root{--rs-scroll-area-thumb-size:var(--rs-unit-x1);--rs-scroll-area-thumb-offset:var(--rs-unit-x1);--rs-scroll-area-fade-size:var(--rs-unit-x8);overflow:hidden;height:100%;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){outline:var(--rs-outline)}.scrollable{height:100%;position:relative;overflow:auto;scrollbar-width:none;outline:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;width:0;height:0}@keyframes fade-block-start{0%{--rs-scroll-area-fade-block-start:0px}to{--rs-scroll-area-fade-block-start:var(--rs-scroll-area-fade-size)}}@keyframes fade-block-end{0%{--rs-scroll-area-fade-block-end:var(--rs-scroll-area-fade-size)}to{--rs-scroll-area-fade-block-end:0px}}@keyframes fade-inline-start{0%{--rs-scroll-area-fade-inline-start:0px}to{--rs-scroll-area-fade-inline-start:var(--rs-scroll-area-fade-size)}}@keyframes fade-inline-end{0%{--rs-scroll-area-fade-inline-end:var(--rs-scroll-area-fade-size)}to{--rs-scroll-area-fade-inline-end:0px}}@supports (animation-timeline:scroll(self block)){.--fade{--rs-scroll-area-fade-inline-direction:to right;mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.1) calc(var(--rs-scroll-area-fade-block-start) * .2),rgba(0,0,0,.35) calc(var(--rs-scroll-area-fade-block-start) * .4),rgba(0,0,0,.65) calc(var(--rs-scroll-area-fade-block-start) * .6),rgba(0,0,0,.9) calc(var(--rs-scroll-area-fade-block-start) * .8),#000 var(--rs-scroll-area-fade-block-start),#000 calc(100% - var(--rs-scroll-area-fade-block-end)),rgba(0,0,0,.9) calc(100% - var(--rs-scroll-area-fade-block-end) * .8),rgba(0,0,0,.65) calc(100% - var(--rs-scroll-area-fade-block-end) * .6),rgba(0,0,0,.35) calc(100% - var(--rs-scroll-area-fade-block-end) * .4),rgba(0,0,0,.1) calc(100% - var(--rs-scroll-area-fade-block-end) * .2),transparent 100%),linear-gradient(var(--rs-scroll-area-fade-inline-direction),transparent 0,rgba(0,0,0,.1) calc(var(--rs-scroll-area-fade-inline-start) * .2),rgba(0,0,0,.35) calc(var(--rs-scroll-area-fade-inline-start) * .4),rgba(0,0,0,.65) calc(var(--rs-scroll-area-fade-inline-start) * .6),rgba(0,0,0,.9) calc(var(--rs-scroll-area-fade-inline-start) * .8),#000 var(--rs-scroll-area-fade-inline-start),#000 calc(100% - var(--rs-scroll-area-fade-inline-end)),rgba(0,0,0,.9) calc(100% - var(--rs-scroll-area-fade-inline-end) * .8),rgba(0,0,0,.65) calc(100% - var(--rs-scroll-area-fade-inline-end) * .6),rgba(0,0,0,.35) calc(100% - var(--rs-scroll-area-fade-inline-end) * .4),rgba(0,0,0,.1) calc(100% - var(--rs-scroll-area-fade-inline-end) * .2),transparent 100%);mask-composite:intersect;animation-name:fade-block-start,fade-block-end,fade-inline-start,fade-inline-end;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(self block),scroll(self block),scroll(self inline),scroll(self inline);animation-range:0 var(--rs-scroll-area-fade-size),calc(100% - var(--rs-scroll-area-fade-size)) 100%,0 var(--rs-scroll-area-fade-size),calc(100% - var(--rs-scroll-area-fade-size)) 100%}[dir=rtl] .--fade{--rs-scroll-area-fade-inline-direction:to left}}.--overscroll-auto{overscroll-behavior:auto}.--overscroll-contain{overscroll-behavior:contain}.content{display:inline-block;vertical-align:top;min-width:100%;min-height:100%;height:100%}.scrollbar{position:absolute;box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset)}.thumb{position:relative;height:100%;width:100%;background-color:var(--rs-color-background-neutral-faded);opacity:0}.thumb,.thumb:before{border-radius:var(--rs-radius-circular);transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.thumb:before{content:"";display:block;background:var(--rs-color-foreground-neutral);position:absolute;opacity:.2}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%;height:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-x{inset-inline:0;inset-block-end:0;height:var(--rs-scroll-area-thumb-size)}.--scrollbar-x .thumb:before{inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);height:100%;width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb,.--display-visible>.scrollbar .thumb{opacity:1}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}

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

@@ -10,6 +10,8 @@ export type Props = {
     scrollbarDisplay?: "visible" | "hover" | "hidden";
     /** Control whether scroll can chain to parent scrollable containers */
     overscrollBehavior?: "auto" | "contain";
+    /** Display a fade mask on the sides of the area that can be scrolled towards */
+    fade?: boolean;
     /** Callback when the scroll area is scrolled */
     onScroll?: (args: Coordinates) => void;
     /** Height of the scroll area, literal css value or unit token multiplier */

package/dist/components/ScrollArea/index.js

@@ -1 +1 @@
-export { default } from "./ScrollArea.js";
+export { default } from "./ScrollArea";

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

@@ -3,7 +3,7 @@ import React from "react";
 import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./..").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("../../../components/ScrollArea").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         iframe: {
             url: string;
@@ -26,6 +26,10 @@ export declare const overscrollBehavior: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const fade: {
+    name: string;
+    render: () => React.JSX.Element;
+};
 export declare const height: {
     name: string;
     render: () => React.JSX.Element;
@@ -34,8 +38,4 @@ export declare const onScroll: StoryObj<{
     handleScroll: Mock;
 }>;
 export declare const className: StoryObj;
-export declare const testNested: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const testDynamicHeight: StoryObj;
+export declare const testComposition: StoryObj;

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

@@ -3,12 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.testDynamicHeight = exports.testNested = exports.className = exports.onScroll = exports.height = exports.overscrollBehavior = exports.scrollbarDisplay = exports.base = void 0;
+exports.testComposition = exports.className = exports.onScroll = exports.height = exports.fade = exports.overscrollBehavior = exports.scrollbarDisplay = exports.base = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../Button"));
-const ScrollArea_1 = __importDefault(require("./.."));
-const View_1 = __importDefault(require("../../View"));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const Card_1 = __importDefault(require("../../../components/Card"));
+const ScrollArea_1 = __importDefault(require("../../../components/ScrollArea"));
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Utility components/ScrollArea",
@@ -114,27 +115,84 @@ exports.overscrollBehavior = {
     name: "overscrollBehavior",
     render: () => (<storybook_1.Example>
 			<storybook_1.Example.Item title="overscrollBehavior: auto">
-				<View_1.default height="200px" overflow="auto" backgroundColor="neutral-faded" padding={4}>
-					<View_1.default height="100px">Parent scroll area content before ScrollArea</View_1.default>
-					<ScrollArea_1.default height="100px" scrollbarDisplay="visible" overscrollBehavior="auto">
-						<View_1.default backgroundColor="neutral-faded" padding={4}>
-							{Array.from({ length: 10 }).map((_, index) => (<div key={index}>Item {index + 1}</div>))}
-						</View_1.default>
-					</ScrollArea_1.default>
-					<View_1.default height="300px">Parent scroll area content after ScrollArea</View_1.default>
-				</View_1.default>
+				<ScrollArea_1.default height="200px" scrollbarDisplay="visible">
+					<View_1.default padding={16} backgroundColor="neutral-faded" borderRadius="medium">
+						<ScrollArea_1.default height="200px" scrollbarDisplay="visible">
+							<View_1.default backgroundColor="neutral" padding={4} borderRadius="medium">
+								{Array(20)
+            .fill("")
+            .map((_, index) => {
+            return <div key={index}>Item {index + 1}</div>;
+        })}
+							</View_1.default>
+						</ScrollArea_1.default>
+					</View_1.default>
+				</ScrollArea_1.default>
 			</storybook_1.Example.Item>
 
 			<storybook_1.Example.Item title="overscrollBehavior: contain">
-				<View_1.default height="200px" overflow="auto" backgroundColor="neutral-faded" padding={4}>
-					<View_1.default height="100px">Parent scroll area content before ScrollArea</View_1.default>
-					<ScrollArea_1.default height="100px" scrollbarDisplay="visible" overscrollBehavior="contain">
-						<View_1.default backgroundColor="neutral-faded" padding={4}>
-							{Array.from({ length: 10 }).map((_, index) => (<div key={index}>Item {index + 1}</div>))}
-						</View_1.default>
-					</ScrollArea_1.default>
-					<View_1.default height="300px">Parent scroll area content after ScrollArea</View_1.default>
-				</View_1.default>
+				<ScrollArea_1.default height="200px" scrollbarDisplay="visible" overscrollBehavior="contain">
+					<View_1.default padding={16} backgroundColor="neutral-faded" borderRadius="medium">
+						<ScrollArea_1.default height="200px" scrollbarDisplay="visible">
+							<View_1.default backgroundColor="neutral" padding={4} borderRadius="medium">
+								{Array(20)
+            .fill("")
+            .map((_, index) => {
+            return <div key={index}>Item {index + 1}</div>;
+        })}
+							</View_1.default>
+						</ScrollArea_1.default>
+					</View_1.default>
+				</ScrollArea_1.default>
+			</storybook_1.Example.Item>
+		</storybook_1.Example>),
+};
+exports.fade = {
+    name: "fade",
+    render: () => (<storybook_1.Example>
+			<storybook_1.Example.Item title="fade, vertical scroll">
+				<ScrollArea_1.default height="100px" fade>
+					<View_1.default 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 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.
+					</View_1.default>
+				</ScrollArea_1.default>
+			</storybook_1.Example.Item>
+
+			<storybook_1.Example.Item title="fade, horizontal scroll">
+				<ScrollArea_1.default height="100px" fade>
+					<View_1.default backgroundColor="neutral-faded" padding={4} width="150%" height="100px">
+						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
+					</View_1.default>
+				</ScrollArea_1.default>
+			</storybook_1.Example.Item>
+
+			<storybook_1.Example.Item title="fade, horizontal and vertical scroll">
+				<ScrollArea_1.default height="100px" fade>
+					<View_1.default backgroundColor="neutral-faded" padding={4} width="150%">
+						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.
+					</View_1.default>
+				</ScrollArea_1.default>
+			</storybook_1.Example.Item>
+
+			<storybook_1.Example.Item title="fade, no scrollable overflow">
+				<ScrollArea_1.default height="100px" fade>
+					<View_1.default backgroundColor="neutral-faded" padding={4}>
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+					</View_1.default>
+				</ScrollArea_1.default>
 			</storybook_1.Example.Item>
 		</storybook_1.Example>),
 };
@@ -245,34 +303,48 @@ exports.className = {
         (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
     },
 };
-exports.testNested = {
-    name: "test: nested",
-    render: () => (<ScrollArea_1.default height="100px" scrollbarDisplay="visible">
-			<View_1.default padding={4} paddingInline={16}>
-				<ScrollArea_1.default height="200px" scrollbarDisplay="visible">
-					{Array(20)
-            .fill("")
-            .map((_, index) => {
-            return <div key={index}>Item {index + 1}</div>;
-        })}
-				</ScrollArea_1.default>
-			</View_1.default>
-		</ScrollArea_1.default>),
-};
-exports.testDynamicHeight = {
-    name: "test: dynamic height change",
+exports.testComposition = {
+    name: "test: composition",
     render: () => {
         const [count, setCount] = react_1.default.useState(10);
-        return (<View_1.default gap={4}>
-				<View_1.default.Item>
-					<Button_1.default onClick={() => setCount((prev) => prev + 10)}>Add more items</Button_1.default>
-				</View_1.default.Item>
+        const [height, setHeight] = react_1.default.useState(100);
+        return (<storybook_1.Example>
+				<storybook_1.Example.Item title="composition height">
+					<View_1.default height="200px">
+						<Card_1.default height="100%" padding={0}>
+							<ScrollArea_1.default scrollbarDisplay="visible">
+								{/* Should stretch to 100% */}
+								<View_1.default height="100%" padding={4} backgroundColor="primary-faded"/>
+							</ScrollArea_1.default>
+						</Card_1.default>
+					</View_1.default>
+				</storybook_1.Example.Item>
 
-				<ScrollArea_1.default height="200px" scrollbarDisplay="visible">
-					<View_1.default gap={2}>
-						{Array.from({ length: count }).map((_, i) => (<View_1.default.Item key={i}>Item {i + 1}</View_1.default.Item>))}
+				<storybook_1.Example.Item title="dynamic height change, content">
+					<View_1.default gap={4}>
+						<View_1.default.Item>
+							<Button_1.default onClick={() => setCount((prev) => prev + 10)}>Add more items</Button_1.default>
+						</View_1.default.Item>
+
+						<ScrollArea_1.default height="200px" scrollbarDisplay="visible">
+							<View_1.default gap={2}>
+								{Array.from({ length: count }).map((_, i) => (<View_1.default.Item key={i}>Item {i + 1}</View_1.default.Item>))}
+							</View_1.default>
+						</ScrollArea_1.default>
 					</View_1.default>
-				</ScrollArea_1.default>
-			</View_1.default>);
+				</storybook_1.Example.Item>
+
+				<storybook_1.Example.Item title="dynamic height change, size">
+					<View_1.default gap={4}>
+						<View_1.default.Item>
+							<Button_1.default onClick={() => setHeight((prev) => prev + 10)}>Increase height</Button_1.default>
+						</View_1.default.Item>
+
+						<ScrollArea_1.default height="200px" scrollbarDisplay="visible">
+							<View_1.default height={height} padding={4} backgroundColor="neutral-faded"/>
+						</ScrollArea_1.default>
+					</View_1.default>
+				</storybook_1.Example.Item>
+			</storybook_1.Example>);
     },
 };

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

@@ -1,10 +1,10 @@
 import React from "react";
 import type * as T from "./Select.types";
 declare function Select(props: T.NativeControlledProps): React.JSX.Element;
-declare function Select(props: T.NativeUncontrolledProps): React.JSX.Element;
-declare function Select(props: T.CustomControlledProps): React.JSX.Element;
-declare function Select(props: T.CustomUncontrolledProps): React.JSX.Element;
 declare namespace Select {
     var displayName: string;
 }
+declare function Select(props: T.NativeUncontrolledProps): React.JSX.Element;
+declare function Select(props: T.CustomControlledProps): React.JSX.Element;
+declare function Select(props: T.CustomUncontrolledProps): React.JSX.Element;
 export default Select;

package/dist/components/Select/Select.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import useElementId from "../../hooks/useElementId.js";
-import { useFormControl } from "../FormControl/index.js";
-import SelectCustom from "./SelectCustom.js";
-import SelectNative from "./SelectNative.js";
+import useElementId from "../../hooks/useElementId";
+import { useFormControl } from "../FormControl";
+import SelectCustom from "./SelectCustom";
+import SelectNative from "./SelectNative";
 function Select(passedProps) {
     const formControl = useFormControl();
     const internalId = useElementId(passedProps.id);

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

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

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

@@ -1,9 +1,9 @@
 import React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { ActionableProps } from "../Actionable";
-import type { DropdownMenuProps } from "../DropdownMenu";
-import type { IconProps } from "../Icon";
-import type { MenuItemProps } from "../MenuItem";
+import type { ActionableProps } from "../../components/Actionable";
+import type { DropdownMenuProps } from "../../components/DropdownMenu";
+import type { IconProps } from "../../components/Icon";
+import type { MenuItemProps } from "../../components/MenuItem";
 import type * as G from "../../types/global";
 import type { Attributes } from "../../types/global";
 type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;

package/dist/components/Select/SelectCustom.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import SelectCustomControlled from "./SelectCustomControlled.js";
-import SelectCustomUncontrolled from "./SelectCustomUncontrolled.js";
+import SelectCustomControlled from "./SelectCustomControlled";
+import SelectCustomUncontrolled from "./SelectCustomUncontrolled";
 const SelectCustom = (props) => {
     const { value } = props;
     if (value !== undefined) {

package/dist/components/Select/SelectCustomControlled.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import DropdownMenu from "../DropdownMenu/index.js";
-import Icon from "../Icon/index.js";
-import View from "../View/index.js";
-import { responsivePropDependency } from "../../utilities/props.js";
-import CheckmarkIcon from "../../icons/Checkmark.js";
-import SelectGroup from "./SelectGroup.js";
-import SelectOption from "./SelectOption.js";
-import SelectTrigger from "./SelectTrigger.js";
+import DropdownMenu from "../../components/DropdownMenu";
+import Icon from "../../components/Icon";
+import View from "../../components/View";
+import { responsivePropDependency } from "../../utilities/props";
+import CheckmarkIcon from "../../icons/Checkmark";
+import SelectGroup from "./SelectGroup";
+import SelectOption from "./SelectOption";
+import SelectTrigger from "./SelectTrigger";
 const SelectCustomControlled = (props) => {
     const { children, value, name, placeholder, multiple, selectedIconPosition = "start", width = "trigger", position, fallbackPositions, positionRef, size, renderValue: passedRenderValue, } = props;
     const initialFocusRef = React.useRef(null);
@@ -60,6 +60,7 @@ const SelectCustomControlled = (props) => {
                     attributes: {
                         ...component.props.attributes,
                         ref: selected ? initialFocusRef : undefined,
+                        "aria-selected": matchingValue,
                     },
                 });
             }

package/dist/components/Select/SelectCustomUncontrolled.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import SelectCustomControlled from "./SelectCustomControlled.js";
+import SelectCustomControlled from "./SelectCustomControlled";
 const SelectCustomUncontrolled = (props) => {
     const { defaultValue, onChange, multiple, ...controlledProps } = props;
     const [value, setValue] = React.useState(defaultValue || (multiple ? [] : ""));