reshaped 3.2.6-rc.0 → 3.3.0

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

@@ -0,0 +1,27 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import ContextMenu from "../index.js";
+import View from "../../View/index.js";
+import ScrollArea from "../../ScrollArea/index.js";
+export default {
+    title: "Components/ContextMenu",
+    component: ContextMenu,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/context-menu",
+        },
+    },
+};
+export const base = () => (<Example>
+		<Example.Item title="base">
+			<ScrollArea height="200px">
+				<ContextMenu>
+					<View height="400px" backgroundColor="neutral-faded" borderRadius="medium"/>
+
+					<ContextMenu.Content>
+						<ContextMenu.Item>Item 1</ContextMenu.Item>
+						<ContextMenu.Item>Item 2</ContextMenu.Item>
+					</ContextMenu.Content>
+				</ContextMenu>
+			</ScrollArea>
+		</Example.Item>
+	</Example>);

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

@@ -1,4 +1,3 @@
-import { type MenuItemProps } from "../MenuItem";
 import type * as T from "./DropdownMenu.types";
 declare const DropdownMenu: {
     (props: T.Props): import("react/jsx-runtime").JSX.Element;
@@ -6,7 +5,7 @@ declare const DropdownMenu: {
     Trigger: (props: import("../_private/Flyout").FlyoutTriggerProps) => import("react/jsx-runtime").JSX.Element;
     Content: (props: T.ContentProps) => import("react/jsx-runtime").JSX.Element;
     Section: (props: T.SectionProps) => import("react/jsx-runtime").JSX.Element;
-    Item: (props: Omit<MenuItemProps, "roundedCorners">) => import("react/jsx-runtime").JSX.Element;
+    Item: (props: T.ItemProps) => import("react/jsx-runtime").JSX.Element;
     SubMenu: (props: T.SubMenuProps) => import("react/jsx-runtime").JSX.Element;
     SubTrigger: (props: T.SubTriggerProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -64,8 +64,8 @@ const DropdownMenuSubTriggerItem = (props) => {
     return (_jsx(DropdownMenuItem, { ...menuItemProps, attributes: { ...attributes, ref: ref }, endSlot: _jsx(Icon, { autoWidth: true, svg: IconChevronRight, className: s.arrow }), children: children }));
 };
 const DropdownMenuSubTrigger = (props) => {
-    const { children } = props;
-    return (_jsx(DropdownMenu.Trigger, { children: (attributes) => (_jsx(DropdownMenuSubTriggerItem, { attributes: attributes, children: children })) }));
+    const { attributes, ...menuItemProps } = props;
+    return (_jsx(DropdownMenu.Trigger, { children: (triggerAttributes) => (_jsx(DropdownMenuSubTriggerItem, { ...menuItemProps, attributes: { ...attributes, ...triggerAttributes } })) }));
 };
 DropdownMenu.Dismissible = Popover.Dismissible;
 DropdownMenu.Trigger = Popover.Trigger;

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

@@ -1,17 +1,17 @@
 import type React from "react";
 import type { PopoverProps, PopoverInstance } from "../Popover";
+import type { MenuItemProps } from "../MenuItem";
 import type { FlyoutContentProps } from "../_private/Flyout";
 export type Instance = PopoverInstance;
-export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef"> & {
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "originCoordinates"> & {
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu">;
 };
 export type ContentProps = Pick<FlyoutContentProps, "attributes" | "children" | "className">;
+export type ItemProps = Omit<MenuItemProps, "roundedCorners">;
 export type SectionProps = {
     children: React.ReactNode;
 };
 export type SubMenuProps = {
     children: React.ReactNode;
 };
-export type SubTriggerProps = {
-    children: React.ReactNode;
-};
+export type SubTriggerProps = Omit<MenuItemProps, "endSlot" | "roundedCorners">;

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

@@ -6,7 +6,7 @@ declare const _default: {
         Trigger: (props: import("../../_private/Flyout").FlyoutTriggerProps) => import("react").JSX.Element;
         Content: (props: import("../DropdownMenu.types").ContentProps) => import("react").JSX.Element;
         Section: (props: import("../DropdownMenu.types").SectionProps) => import("react").JSX.Element;
-        Item: (props: Omit<import("../../MenuItem").MenuItemProps, "roundedCorners">) => import("react").JSX.Element;
+        Item: (props: import("../DropdownMenu.types").ItemProps) => import("react").JSX.Element;
         SubMenu: (props: import("../DropdownMenu.types").SubMenuProps) => import("react").JSX.Element;
         SubTrigger: (props: import("../DropdownMenu.types").SubTriggerProps) => import("react").JSX.Element;
     };

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

@@ -93,6 +93,14 @@ export const submenu = () => (<Example>
 							<DropdownMenu.Item onClick={() => { }}>SubItem 2-2</DropdownMenu.Item>
 						</DropdownMenu.Content>
 					</DropdownMenu.SubMenu>
+
+					<DropdownMenu.SubMenu>
+						<DropdownMenu.SubTrigger disabled>Item 4, disabled</DropdownMenu.SubTrigger>
+						<DropdownMenu.Content>
+							<DropdownMenu.Item onClick={() => { }}>SubItem 3-1</DropdownMenu.Item>
+							<DropdownMenu.Item onClick={() => { }}>SubItem 3-2</DropdownMenu.Item>
+						</DropdownMenu.Content>
+					</DropdownMenu.SubMenu>
 				</DropdownMenu.Content>
 			</DropdownMenu>
 		</Example.Item>

package/dist/components/FormControl/FormControl.context.d.ts

@@ -4,112 +4,112 @@ export declare const Provider: React.Provider<T.Context>;
 export declare const useFormControlPrivate: () => T.Context;
 export declare const useFormControl: () => {
     attributes: {
-        defaultChecked?: boolean | undefined;
+        defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        suppressHydrationWarning?: boolean | undefined;
-        accessKey?: string | undefined;
-        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
-        autoFocus?: boolean | undefined;
-        className?: string | undefined;
-        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
-        contextMenu?: string | undefined;
-        dir?: string | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        className?: string | undefined | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+        contextMenu?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
-        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-        hidden?: boolean | undefined;
-        id?: string | undefined;
-        lang?: string | undefined;
-        nonce?: string | undefined;
-        slot?: string | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        hidden?: boolean | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
         spellCheck?: (boolean | "false" | "true") | undefined;
         style?: React.CSSProperties | undefined;
-        tabIndex?: number | undefined;
-        title?: string | undefined;
-        translate?: "yes" | "no" | undefined;
-        radioGroup?: string | undefined;
+        tabIndex?: number | undefined | undefined;
+        title?: string | undefined | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        radioGroup?: string | undefined | undefined;
         role?: React.AriaRole | undefined;
-        about?: string | undefined;
-        content?: string | undefined;
-        datatype?: string | undefined;
+        about?: string | undefined | undefined;
+        content?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
         inlist?: any;
-        prefix?: string | undefined;
-        property?: string | undefined;
-        rel?: string | undefined;
-        resource?: string | undefined;
-        rev?: string | undefined;
-        typeof?: string | undefined;
-        vocab?: string | undefined;
-        autoCorrect?: string | undefined;
-        autoSave?: string | undefined;
-        color?: string | undefined;
-        itemProp?: string | undefined;
-        itemScope?: boolean | undefined;
-        itemType?: string | undefined;
-        itemID?: string | undefined;
-        itemRef?: string | undefined;
-        results?: number | undefined;
-        security?: string | undefined;
-        unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
-        is?: string | undefined;
-        "aria-activedescendant"?: string | undefined;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
-        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
-        "aria-braillelabel"?: string | undefined;
-        "aria-brailleroledescription"?: string | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
         "aria-busy"?: (boolean | "false" | "true") | undefined;
-        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
-        "aria-colcount"?: number | undefined;
-        "aria-colindex"?: number | undefined;
-        "aria-colindextext"?: string | undefined;
-        "aria-colspan"?: number | undefined;
-        "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-        "aria-describedby"?: string | undefined;
-        "aria-description"?: string | undefined;
-        "aria-details"?: string | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-controls"?: string | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
         "aria-disabled"?: (boolean | "false" | "true") | undefined;
-        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
-        "aria-errormessage"?: string | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
         "aria-expanded"?: (boolean | "false" | "true") | undefined;
-        "aria-flowto"?: string | undefined;
+        "aria-flowto"?: string | undefined | undefined;
         "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
         "aria-hidden"?: (boolean | "false" | "true") | undefined;
-        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-        "aria-keyshortcuts"?: string | undefined;
-        "aria-label"?: string | undefined;
-        "aria-labelledby"?: string | undefined;
-        "aria-level"?: number | undefined;
-        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
         "aria-modal"?: (boolean | "false" | "true") | undefined;
         "aria-multiline"?: (boolean | "false" | "true") | undefined;
         "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
-        "aria-orientation"?: "horizontal" | "vertical" | undefined;
-        "aria-owns"?: string | undefined;
-        "aria-placeholder"?: string | undefined;
-        "aria-posinset"?: number | undefined;
-        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
         "aria-readonly"?: (boolean | "false" | "true") | undefined;
-        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
         "aria-required"?: (boolean | "false" | "true") | undefined;
-        "aria-roledescription"?: string | undefined;
-        "aria-rowcount"?: number | undefined;
-        "aria-rowindex"?: number | undefined;
-        "aria-rowindextext"?: string | undefined;
-        "aria-rowspan"?: number | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
         "aria-selected"?: (boolean | "false" | "true") | undefined;
-        "aria-setsize"?: number | undefined;
-        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-        "aria-valuemax"?: number | undefined;
-        "aria-valuemin"?: number | undefined;
-        "aria-valuenow"?: number | undefined;
-        "aria-valuetext"?: string | undefined;
-        children?: React.ReactNode | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
+        children?: React.ReactNode;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
-        } | undefined;
+        } | undefined | undefined;
         onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
         onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
         onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;

package/dist/components/Grid/Grid.js

@@ -9,6 +9,7 @@ const GridItem = (props) => {
     const resolvedColSpan = responsivePropDependency(colSpan, (value) => value && `span ${value}`);
     const resolvedRowSpan = responsivePropDependency(rowSpan, (value) => value && `span ${value}`);
     const rootVariables = {
+        ...attributes?.style,
         ...responsiveVariables("--rs-grid-area", area),
         ...responsiveVariables("--rs-grid-col-end", resolvedColSpan),
         // both span and end use the same css variable but end has a higher prioerity
@@ -30,8 +31,9 @@ const Grid = (props) => {
         ? `"${value?.join('" "')}"
 	`
         : undefined);
-    const rootClassNames = classNames(s.root, alignStyles?.classNames, justifyStyles?.classNames, className);
+    const rootClassNames = classNames(s.root, className);
     const rootVariables = {
+        ...attributes?.style,
         ...responsiveVariables("--rs-grid-gap", gap),
         ...responsiveVariables("--rs-grid-rows", resolvedRows),
         ...responsiveVariables("--rs-grid-columns", resolvedColumns),
@@ -39,6 +41,8 @@ const Grid = (props) => {
         ...responsiveVariables("--rs-grid-auto-flow", autoFlow),
         ...responsiveVariables("--rs-grid-auto-columns", autoColumns),
         ...responsiveVariables("--rs-grid-auto-rows", autoRows),
+        ...alignStyles?.variables,
+        ...justifyStyles?.variables,
     };
     return (_jsx(TagName, { ...attributes, className: rootClassNames, style: rootVariables, children: children }));
 };

package/dist/components/Hotkey/Hotkey.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-neutral-faded);border:1px solid var(--rs-color-background-neutral-faded);border-radius:var(--rs-radius-small);color:var(--rs-color-foreground-neutral);display:inline-flex;justify-content:center;min-width:calc(var(--rs-line-height-caption-1) + var(--rs-unit-x1) * 2);padding:calc(var(--rs-unit-x1) - 1px) calc(var(--rs-unit-x2) - 1px);transition:var(--rs-easing-standard) var(--rs-duration-fast);transition-property:color,background-color,border-color;vertical-align:top}.--active{background:var(--rs-color-background-neutral);border-color:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral)}
+.root{background:var(--rs-color-background-neutral-faded);border-radius:var(--rs-radius-small);color:var(--rs-color-foreground-neutral);display:inline-flex;justify-content:center;min-width:calc(var(--rs-line-height-caption-1) + var(--rs-unit-x1) * 2);padding:var(--rs-unit-x1) var(--rs-unit-x2);transition:var(--rs-easing-standard) var(--rs-duration-fast);transition-property:color,background-color,border-color;vertical-align:top}.--active{background:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral)}

package/dist/components/Modal/Modal.js

@@ -41,7 +41,7 @@ const ModalSubtitle = (props) => {
     return (_jsx(Text, { variant: "body-3", color: "neutral-faded", attributes: { id: `${id}-subtitle` }, children: children }));
 };
 const Modal = (props) => {
-    const { children, onClose, onOpen, active, size, padding = 4, position = "center", overflow, transparentOverlay, blurredOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, disableCloseOnOutsideClick, containerRef, overlayClassName, className, attributes, } = props;
+    const { children, onClose, onOpen, onAfterClose, onAfterOpen, active, size, padding = 4, position = "center", overflow, transparentOverlay, blurredOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, disableCloseOnOutsideClick, containerRef, overlayClassName, className, attributes, } = props;
     const onCloseRef = useHandlerRef(onClose);
     const id = useElementId();
     const clientPosition = useResponsiveClientValue(position);
@@ -168,10 +168,10 @@ const Modal = (props) => {
         setHideProgress(progress / 2);
         dragDistanceRef.current = dragDistance;
     }, [dragDistance, clientPosition, rootRef]);
-    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, className: overlayClassName, containerRef: containerRef, attributes: {
+    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, onAfterClose: onAfterClose, onAfterOpen: onAfterOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, className: overlayClassName, containerRef: containerRef, attributes: {
             onTouchStart: handleDragStart,
         }, children: ({ active }) => {
-            const rootClassNames = classNames(s.root, className, paddingStyles?.classNames, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], containerRef && s["--contained"], responsiveClassNames(s, "--position", position));
+            const rootClassNames = classNames(s.root, className, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], containerRef && s["--contained"], responsiveClassNames(s, "--position", position));
             return (_jsx(Context.Provider, { value: value, children: _jsx("div", { ...attributes, style: {
                         ...paddingStyles?.variables,
                         ...responsiveVariables("--rs-modal-size", size),

package/dist/components/Modal/Modal.module.css

@@ -1 +1 @@
-.root{--rs-modal-container-width:100vw;--rs-modal-position:fixed;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-medium);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none}.root.--contained{--rs-modal-position:absolute;--rs-modal-container-width:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}
+.root{--rs-modal-container-width:100vw;--rs-modal-position:fixed;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-fast);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none}.root.--contained{--rs-modal-position:absolute;--rs-modal-container-width:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}

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

@@ -34,4 +34,4 @@ export type Props = {
     attributes?: G.Attributes<"div"> & {
         ref?: React.RefObject<HTMLDivElement>;
     };
-} & Pick<OverlayProps, "onOpen" | "active" | "containerRef">;
+} & Pick<OverlayProps, "onOpen" | "onAfterOpen" | "onAfterClose" | "active" | "containerRef">;

package/dist/components/Overlay/Overlay.js

@@ -13,7 +13,7 @@ import Portal from "../_private/Portal/index.js";
 import s from "./Overlay.module.css";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 const Overlay = (props) => {
-    const { active, children, transparent, blurred, onClose, onOpen, disableCloseOnClick, containerRef, className, attributes, } = props;
+    const { active, children, transparent, blurred, onClose, onOpen, onAfterClose, onAfterOpen, disableCloseOnClick, containerRef, className, attributes, } = props;
     // Selectors wrapped with refs to simplify working with useEffect dependency array
     const onCloseRef = useHandlerRef(onClose);
     const onOpenRef = useHandlerRef(onOpen);
@@ -66,10 +66,13 @@ const Overlay = (props) => {
         if (e.propertyName !== "opacity" || e.target !== e.currentTarget)
             return;
         setAnimated(false);
-        if (visible)
+        if (visible) {
+            onAfterOpen?.();
             return;
+        }
         unlockScroll();
         remove();
+        onAfterClose?.();
     };
     useHotkeys({
         Escape: () => close({ reason: "escape-key" }),

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

@@ -11,7 +11,9 @@ export type Props = {
     onClose?: (args: {
         reason: CloseReason;
     }) => void;
+    onAfterClose?: () => void;
     onOpen?: () => void;
+    onAfterOpen?: () => void;
     disableCloseOnClick?: boolean;
     containerRef?: React.RefObject<HTMLElement>;
     className?: G.ClassName;

package/dist/components/Popover/Popover.js

@@ -9,7 +9,7 @@ const Popover = (props) => {
     const padding = props.padding ?? (variant === "headless" ? 0 : 4);
     const trapFocusMode = props.trapFocusMode || (triggerType === "hover" ? "content-menu" : undefined);
     const paddingStyles = getPaddingStyles(padding);
-    const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], paddingStyles?.classNames);
+    const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`]);
     return (_jsx(Flyout, { ...flyoutProps, position: position, trapFocusMode: trapFocusMode, triggerType: triggerType, width: width, contentClassName: contentClassName, contentAttributes: { style: { ...paddingStyles?.variables } } }));
 };
 const PopoverDismissible = (props) => {

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

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { FlyoutProps, FlyoutInstance } from "../_private/Flyout";
 export type Instance = FlyoutInstance;
-export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "containerRef" | "initialFocusRef"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
     children?: React.ReactNode;
     padding?: number;
     variant?: "elevated" | "headless";

package/dist/components/Resizable/Resizable.js

@@ -42,8 +42,8 @@ const PrivateResizableItem = React.forwardRef((props, ref) => {
         }, children: children }));
 });
 const Resizable = (props) => {
-    const { children, height, direction = "row", gap = 2, className, attributes } = props;
-    const rootClassNames = classNames(s.root, s[`--direction-${direction}`], className);
+    const { children, variant = "borderless", height, direction = "row", gap = 2, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, s[`--direction-${direction}`], variant && s[`--variant-${variant}`], className);
     const containerRef = React.useRef(null);
     const itemsRef = React.useRef([]);
     const horizontal = direction === "row";

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

@@ -1 +1 @@
-.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}.handle:after,.handle:before{border-radius:999px;content:"";position:absolute}.handle:after{background:var(--rs-color-border-neutral);opacity:0;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.handle--dragging:after,.handle:hover:after,[data-rs-keyboard] .handle:focus:after{opacity:.6}body:has(.handle--dragging) .handle:not(.handle--dragging){opacity:0}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-x4)}.--direction-row>.handle:after{width:var(--rs-unit-x1)}.--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-x4)}.--direction-column>.handle:after{height:var(--rs-unit-x1)}.--direction-column>.item[data-rs-resizable-item-mounted]{max-height:var(--rs-resizable-max-size);min-height:var(--rs-resizable-min-size)}
+.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}.handle:after,.handle:before{border-radius:999px;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-x8)}.--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-x8)}.--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)}

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

@@ -1,7 +1,9 @@
 import type React from "react";
 import type { ViewProps } from "../View";
 import type { UseDragCallbackArgs } from "../../hooks/useDrag";
-export type Props = Pick<ViewProps, "children" | "className" | "attributes" | "height" | "direction" | "gap">;
+export type Props = {
+    variant?: "bordered" | "borderless";
+} & Pick<ViewProps, "children" | "className" | "attributes" | "height" | "direction" | "gap">;
 export type ItemProps = {
     children: React.ReactNode;
     minSize?: `${number}px`;

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

@@ -54,6 +54,39 @@ export const base = () => (<Example>
 					</Resizable>
 				</Resizable.Item>
 			</Resizable>
-			<div style={{ height: 2000 }}/>
 		</Example.Item>
+
+		<Example.Item>
+			<Resizable height="300px" gap={0} variant="bordered">
+				<Resizable.Item minSize="100px" defaultSize="200px">
+					<View align="center" justify="center" height="100%">
+						Panel
+					</View>
+				</Resizable.Item>
+				<Resizable.Handle />
+				<Resizable.Item>
+					<View align="center" justify="center" height="100%">
+						Panel
+					</View>
+				</Resizable.Item>
+				<Resizable.Handle />
+				<Resizable.Item>
+					<Resizable height="100%" direction="column" variant="bordered" gap={0}>
+						<Resizable.Item minSize="50px" maxSize="100px">
+							<View align="center" justify="center" height="100%">
+								Panel
+							</View>
+						</Resizable.Item>
+						<Resizable.Handle />
+						<Resizable.Item>
+							<View align="center" justify="center" height="100%">
+								Panel
+							</View>
+						</Resizable.Item>
+					</Resizable>
+				</Resizable.Item>
+			</Resizable>
+		</Example.Item>
+
+		<div style={{ height: 2000 }}/>
 	</Example>);

package/dist/components/ScrollArea/ScrollArea.js

@@ -88,15 +88,15 @@ const ScrollArea = forwardRef((props, ref) => {
         });
     }, []);
     const handleScroll = (e) => {
-        const scrollableEl = scrollableRef.current;
-        if (!scrollableEl)
-            return;
-        const next = {
-            x: e.currentTarget.scrollLeft / scrollableEl.scrollWidth,
-            y: e.currentTarget.scrollTop / scrollableEl.scrollHeight,
-        };
-        setScrollPosition(next);
-        onScroll?.(next);
+        const { scrollLeft, scrollTop, clientWidth, clientHeight, scrollWidth, scrollHeight } = e.currentTarget;
+        setScrollPosition({
+            x: scrollLeft / scrollWidth,
+            y: scrollTop / scrollHeight,
+        });
+        onScroll?.({
+            x: scrollWidth === clientWidth ? 0 : scrollLeft / (scrollWidth - clientWidth),
+            y: scrollHeight === clientHeight ? 0 : scrollTop / (scrollHeight - clientHeight),
+        });
     };
     const handleThumbYMove = (args) => {
         const scrollableEl = scrollableRef.current;

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

@@ -1 +1 @@
-.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);overflow:hidden}.root,.scrollable{height:100%;position:relative}.scrollable{overflow:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";display:block;opacity:0;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--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 .thumb:before,.--display-visible .thumb:before{opacity:.2}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}
+.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);height:100%}.root,.scrollable{overflow:auto;position:relative}.scrollable{display:inline-block;max-height:100%;scrollbar-width:none;vertical-align:top;width:100%;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";display:block;opacity:0;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--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 .thumb:before,.--display-visible .thumb:before{opacity:.2}.--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

@@ -3,10 +3,7 @@ import type * as G from "../../types/global";
 export type Props = {
     children: React.ReactNode;
     scrollbarDisplay?: "visible" | "hover" | "hidden";
-    onScroll?: (args: {
-        x: number;
-        y: number;
-    }) => void;
+    onScroll?: (args: G.Coordinates) => void;
     height?: G.Responsive<string | number>;
     maxHeight?: G.Responsive<string | number>;
     className?: G.ClassName;