reshaped 4.0.3 → 4.1.0

package/dist/components/Toast/Toast.module.css

@@ -1 +1 @@
-.container{display:block;opacity:0;position:relative;transition:var(--rs-duration-medium) var(--rs-easing-accelerate);transition-property:transform,width,height,opacity;width:100%}.container--visible{opacity:1;transition-timing-function:var(--rs-easing-decelerate)}.container--visible .wrapper{height:calc(100% - var(--rs-unit-x2))}.container--index-0{z-index:var(--rs-z-index-relative)}.container--index-1{height:var(--rs-unit-x2)!important}.container--index-1 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x1) * -1)) translateZ(0) scaleX(.9)}.container--index-2{height:var(--rs-unit-x2)!important}.container--index-2 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x2) * -1)) translateZ(0) scaleX(.8)}.container--index-overflow{height:0!important}.container--index-overflow .wrapper{height:100%;opacity:0;transform:translateY(calc(var(--rs-unit-x3) * -1)) translateZ(0) scaleX(.8)}.wrapper{border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-overlay-intense);height:100%;margin-top:var(--rs-unit-x2);overflow:hidden;transform:translateZ(0);transform-origin:50% 0;transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:height,width,transform,opacity}.region,.wrapper{display:flex;flex-direction:column}.region{isolation:isolate;max-width:100%;padding:var(--rs-unit-x4);position:fixed;z-index:calc(var(--rs-z-index-fixed) + 1)}.region--nested{position:absolute}.region--position-top{align-items:center;left:50%;top:0;transform:translateX(-50%)}.region--position-top-start{align-items:start;inset-inline-start:0;top:0}.region--position-top-end{inset-inline-end:0;top:0}.region--position-top,.region--position-top-end,.region--position-top-start{flex-direction:column-reverse}.region--position-top .wrapper,.region--position-top-end .wrapper,.region--position-top-start .wrapper{justify-content:flex-end;margin-bottom:var(--rs-unit-x2);margin-top:0;transform-origin:bottom}.region--position-top .container--index-2 .wrapper,.region--position-top-end .container--index-2 .wrapper,.region--position-top-start .container--index-2 .wrapper{transform:translateY(0) translateZ(0) scaleX(.8)}.region--position-top .container--index-overflow .wrapper,.region--position-top-end .container--index-overflow .wrapper,.region--position-top-start .container--index-overflow .wrapper{transform:translateY(var(--rs-unit-x1)) translateZ(0) scaleX(.8)}.region--position-bottom{align-items:center;bottom:0;left:50%;transform:translateX(-50%)}.region--position-bottom-start{align-items:start;bottom:0;inset-inline-start:0}.region--position-bottom-end{align-items:end;bottom:0;inset-inline-end:0}
+.container{display:block;width:100%;transition:var(--rs-duration-medium) var(--rs-easing-accelerate);transition-property:transform,width,height,opacity;opacity:0;position:relative}.container--visible{opacity:1;transition-timing-function:var(--rs-easing-decelerate)}.container--visible .wrapper{height:calc(100% - var(--rs-unit-x2))}.container--index-0{z-index:var(--rs-z-index-relative)}.container--index-1{height:var(--rs-unit-x2)!important}.container--index-1 .wrapper{transform:translateY(calc(var(--rs-unit-x1) * -1)) translateZ(0) scaleX(.9);height:100%}.container--index-2{height:var(--rs-unit-x2)!important}.container--index-2 .wrapper{transform:translateY(calc(var(--rs-unit-x2) * -1)) translateZ(0) scaleX(.8);height:100%}.container--index-overflow{height:0!important}.container--index-overflow .wrapper{opacity:0;height:100%;transform:translateY(calc(var(--rs-unit-x3) * -1)) translateZ(0) scaleX(.8)}.wrapper{margin-top:var(--rs-unit-x2);box-shadow:var(--rs-shadow-overlay-intense);border-radius:var(--rs-radius-medium);overflow:hidden;transform-origin:50% 0;transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:height,width,transform,opacity;height:100%;transform:translateZ(0)}.region,.wrapper{display:flex;flex-direction:column}.region{position:fixed;padding:var(--rs-unit-x4);max-width:100%;isolation:isolate;z-index:calc(var(--rs-z-index-fixed) + 1)}.region--nested{position:absolute}.region--position-top{top:0;left:50%;transform:translateX(-50%);align-items:center}.region--position-top-start{top:0;inset-inline-start:0;align-items:start}.region--position-top-end{top:0;inset-inline-end:0}.region--position-top,.region--position-top-end,.region--position-top-start{flex-direction:column-reverse}.region--position-top .wrapper,.region--position-top-end .wrapper,.region--position-top-start .wrapper{justify-content:flex-end;margin-top:0;margin-bottom:var(--rs-unit-x2);transform-origin:bottom}.region--position-top .container--index-2 .wrapper,.region--position-top-end .container--index-2 .wrapper,.region--position-top-start .container--index-2 .wrapper{transform:translateY(0) translateZ(0) scaleX(.8)}.region--position-top .container--index-overflow .wrapper,.region--position-top-end .container--index-overflow .wrapper,.region--position-top-start .container--index-overflow .wrapper{transform:translateY(var(--rs-unit-x1)) translateZ(0) scaleX(.8)}.region--position-bottom{bottom:0;left:50%;transform:translateX(-50%);align-items:center}.region--position-bottom-start{bottom:0;inset-inline-start:0;align-items:start}.region--position-bottom-end{bottom:0;inset-inline-end:0;align-items:end}

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

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { IconProps } from "../Icon";
+import type { IconProps } from "../../components/Icon";
 import type { Attributes } from "../../types/global";
 export type Status = "entering" | "entered" | "exited";
 export type TimeoutAlias = "short" | "long";

package/dist/components/Toast/ToastContainer.js

@@ -3,10 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames, TrapFocus } from "@reshaped/utilities";
 import { checkKeyboardMode } from "@reshaped/utilities/internal";
-import { onNextFrame, checkTransitions } from "../../utilities/animation.js";
-import Toast from "./Toast.js";
-import { timeouts, toastWidths } from "./Toast.constants.js";
-import ToastContext from "./Toast.context.js";
+import { onNextFrame, checkTransitions } from "../../utilities/animation";
+import Toast from "./Toast";
+import { timeouts, toastWidths } from "./Toast.constants";
+import ToastContext from "./Toast.context";
 import s from "./Toast.module.css";
 const isWidthPreset = (width) => width === "short" || width === "long";
 const resolveWidth = (width) => {
@@ -43,6 +43,7 @@ const ToastContainer = (props) => {
             hide(id);
         }, timeoutValue ?? timeouts.short);
     }, [hide, id, remove, timeout, stopTimer]);
+    React.useEffect(() => stopTimer, [stopTimer]);
     const handleTransitionEnd = (e) => {
         if (e.propertyName !== "height")
             return;
@@ -68,18 +69,14 @@ const ToastContainer = (props) => {
         startTimer();
     }, [show, id, startTimer]);
     React.useEffect(() => {
-        if (!wrapperRef.current)
+        if (!wrapperRef.current || !visible)
             return;
         const trapFocus = new TrapFocus();
-        if (visible) {
-            trapFocus.trap(wrapperRef.current, {
-                includeTrigger: true,
-                mode: "content-menu",
-            });
-        }
-        else if (checkKeyboardMode()) {
-            trapFocus.release();
-        }
+        trapFocus.trap(wrapperRef.current, {
+            includeTrigger: true,
+            mode: "content-menu",
+        });
+        return () => trapFocus.release({ withoutFocusReturn: !checkKeyboardMode() });
     }, [visible]);
     React.useEffect(() => {
         if (!visible || index > 0)

package/dist/components/Toast/ToastProvider.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { defaultContextData, positions } from "./Toast.constants.js";
-import ToastContext from "./Toast.context.js";
-import ToastRegion from "./ToastRegion.js";
-import useToast from "./useToast.js";
+import { defaultContextData, positions } from "./Toast.constants";
+import ToastContext from "./Toast.context";
+import ToastRegion from "./ToastRegion";
+import useToast from "./useToast";
 let counter = 0;
 const generateId = () => `__rs-toast-${counter++}`;
 const toastReducer = (state, action) => {

package/dist/components/Toast/ToastRegion.js

@@ -3,8 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
 import { focusableSelector } from "@reshaped/utilities/internal";
-import ToastContext from "./Toast.context.js";
-import ToastContainer from "./ToastContainer.js";
+import ToastContext from "./Toast.context";
+import ToastContainer from "./ToastContainer";
 import s from "./Toast.module.css";
 const ToastRegion = (props) => {
     const { position, nested } = props;

package/dist/components/Toast/index.js

@@ -1,2 +1,2 @@
-export { default as ToastProvider } from "./ToastProvider.js";
-export { default as useToast } from "./useToast.js";
+export { default as ToastProvider } from "./ToastProvider";
+export { default as useToast } from "./useToast";

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.edgeCases = exports.className = exports.base = exports.slots = exports.width = exports.timeout = exports.color = exports.position = exports.orientation = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../Button"));
-const Dismissible_1 = __importDefault(require("../../Dismissible"));
-const Image_1 = __importDefault(require("../../Image"));
-const Text_1 = __importDefault(require("../../Text"));
-const Toast_1 = require("./..");
-const View_1 = __importDefault(require("../../View"));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const Dismissible_1 = __importDefault(require("../../../components/Dismissible"));
+const Image_1 = __importDefault(require("../../../components/Image"));
+const Text_1 = __importDefault(require("../../../components/Text"));
+const Toast_1 = require("../../../components/Toast");
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 const Zap_1 = __importDefault(require("../../../icons/Zap"));
 exports.default = {

package/dist/components/Toast/useToast.js

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import ToastContext from "./Toast.context.js";
+import ToastContext from "./Toast.context";
 const useToast = () => {
     const { add, hide, id } = React.useContext(ToastContext);
     return React.useMemo(() => ({ show: add, hide, id }), [add, hide, id]);

package/dist/components/ToggleButton/ToggleButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ToggleButtonControlled from "./ToggleButtonControlled.js";
-import ToggleButtonUncontrolled from "./ToggleButtonUncontrolled.js";
+import ToggleButtonControlled from "./ToggleButtonControlled";
+import ToggleButtonUncontrolled from "./ToggleButtonUncontrolled";
 const ToggleButton = (props) => {
     const { checked } = props;
     if (checked !== undefined)

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

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "../Button";
+import type { ButtonProps } from "../../components/Button";
 type BaseProps = Omit<ButtonProps, "variant" | "highlighted"> & {
     /** Component render variant
      * @default "outline"

package/dist/components/ToggleButton/ToggleButtonControlled.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import Button from "../Button/index.js";
-import { useToggleButtonGroup } from "../ToggleButtonGroup/index.js";
+import Button from "../../components/Button";
+import { useToggleButtonGroup } from "../../components/ToggleButtonGroup";
 const ToggleButtonControlled = (props) => {
     const { selectedColor, selectedVariant, value, onChange, onClick, color: buttonColor, variant: buttonVariant = "outline", ...buttonProps } = props;
     const toggleButtonGroup = useToggleButtonGroup();

package/dist/components/ToggleButton/ToggleButtonUncontrolled.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import useToggle from "../../hooks/useToggle.js";
-import ToggleButtonControlled from "./ToggleButtonControlled.js";
+import useToggle from "../../hooks/useToggle";
+import ToggleButtonControlled from "./ToggleButtonControlled";
 const ToggleButtonUncontrolled = (props) => {
     const { defaultChecked, onChange, ...buttonProps } = props;
     const buttonToggle = useToggle(defaultChecked);

package/dist/components/ToggleButton/index.js

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

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js

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

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

@@ -1,6 +1,6 @@
 import type React from "react";
-import type { ButtonGroupProps } from "../Button";
-import type { ToggleButtonProps } from "../ToggleButton";
+import type { ButtonGroupProps } from "../../components/Button";
+import type { ToggleButtonProps } from "../../components/ToggleButton";
 type BaseProps = {
     /** Selection mode for the toggle button group
      * @default "single"

package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import Button from "../Button/index.js";
-import useKeyboardArrowNavigation from "../../hooks/useKeyboardArrowNavigation.js";
-import Context from "./ToggleButtonGroup.context.js";
+import Button from "../../components/Button";
+import useKeyboardArrowNavigation from "../../hooks/useKeyboardArrowNavigation";
+import Context from "./ToggleButtonGroup.context";
 const ToggleButtonGroupControlled = (props) => {
     const { onChange, value, selectionMode = "single", children, color, selectedColor, selectedVariant, ...buttonGroupProps } = props;
     const rootRef = React.useRef(null);

package/dist/components/ToggleButtonGroup/ToggleButtonGroupUncontrolled.js

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

package/dist/components/ToggleButtonGroup/index.js

@@ -1,2 +1,2 @@
-export { default } from "./ToggleButtonGroup.js";
-export { useToggleButtonGroup } from "./ToggleButtonGroup.context.js";
+export { default } from "./ToggleButtonGroup";
+export { useToggleButtonGroup } from "./ToggleButtonGroup.context";

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

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite";
 import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("./..").ToggleButtonGroupProps>;
+    component: import("react").FC<import("../../../components/ToggleButtonGroup").ToggleButtonGroupProps>;
     parameters: {
         iframe: {
             url: string;

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

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.testIcon = exports.className = exports.disabled = exports.selectedColor = exports.multiple = exports.single = void 0;
 const test_1 = require("storybook/test");
-const ToggleButton_1 = __importDefault(require("../../ToggleButton"));
-const ToggleButtonGroup_1 = __importDefault(require("./.."));
+const ToggleButton_1 = __importDefault(require("../../../components/ToggleButton"));
+const ToggleButtonGroup_1 = __importDefault(require("../../../components/ToggleButtonGroup"));
 const storybook_1 = require("../../../utilities/storybook");
 const Checkmark_1 = __importDefault(require("../../../icons/Checkmark"));
 const Minus_1 = __importDefault(require("../../../icons/Minus"));

package/dist/components/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Flyout from "../Flyout/index.js";
+import Flyout from "../../components/Flyout";
 import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
     const { text, children, position = "bottom", color = "inverted", contentMaxWidth = "360px", ...flyoutProps } = props;

package/dist/components/Tooltip/Tooltip.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-overlay);border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay-intense);color:var(--rs-color-foreground-neutral);font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1);padding:var(--rs-unit-x1) var(--rs-unit-x2)}
+.root{color:var(--rs-color-foreground-neutral);background:var(--rs-color-background-elevation-overlay);border:1px solid var(--rs-color-border-neutral-faded);box-shadow:var(--rs-shadow-overlay-intense);border-radius:var(--rs-radius-small);padding:var(--rs-unit-x1) var(--rs-unit-x2);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1);font-weight:var(--rs-font-weight-regular);font-family:var(--rs-font-family-caption-1)}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { FlyoutProps, FlyoutTriggerAttributes } from "../Flyout";
+import type { FlyoutProps, FlyoutTriggerAttributes } from "../../components/Flyout";
 export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "onAfterOpen" | "onAfterClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "contentMaxWidth" | "contentZIndex" | "originCoordinates" | "contentAttributes" | "contentClassName" | "instanceRef"> & {
     /** Node for inserting children */
     children: (attributes: FlyoutTriggerAttributes) => React.ReactNode;

package/dist/components/Tooltip/index.js

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

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

@@ -1,6 +1,6 @@
 import { StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
-import { TooltipProps } from "./..";
+import { TooltipProps } from "../../../components/Tooltip";
 declare const _default: {
     title: string;
     component: import("react").FC<TooltipProps>;

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

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.edgeCases = exports.testLongText = exports.contentMaxWidth = exports.defaultActive = exports.color = exports.position = void 0;
 const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../Button"));
-const Popover_1 = __importDefault(require("../../Popover"));
-const Tooltip_1 = __importDefault(require("./.."));
-const View_1 = __importDefault(require("../../View"));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const Popover_1 = __importDefault(require("../../../components/Popover"));
+const Tooltip_1 = __importDefault(require("../../../components/Tooltip"));
+const View_1 = __importDefault(require("../../../components/View"));
 const useResponsiveClientValue_1 = __importDefault(require("../../../hooks/useResponsiveClientValue"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {

package/dist/components/View/View.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import type * as T from "./View.types";
-export declare const ViewItem: {
-    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>): React.JSX.Element;
-    displayName: string;
-};
-declare const View: {
-    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): React.JSX.Element;
-    displayName: string;
-};
+export declare function ViewItem<As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>): React.JSX.Element;
+export declare namespace ViewItem {
+    var displayName: string;
+}
+declare function View<As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): React.JSX.Element;
+declare namespace View {
+    var displayName: string;
+}
 export default View;

package/dist/components/View/View.js

@@ -2,10 +2,10 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { isValidElement } from "react";
 import { classNames } from "@reshaped/utilities";
-import Divider from "../Divider/index.js";
-import Hidden from "../Hidden/index.js";
-import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
-import { resolveMixin } from "../../styles/mixin.js";
+import Divider from "../../components/Divider";
+import Hidden from "../../components/Hidden";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props";
+import { resolveMixin } from "../../styles/mixin";
 import s from "./View.module.css";
 export const ViewItem = (props) => {
     const { columns, grow, shrink, gapBefore, 
@@ -27,7 +27,7 @@ const View = (props) => {
     /**
      * Style props
      * */
-    animated, backgroundColor, borderColor, borderTop, borderBottom, borderStart, borderEnd, borderInline, borderBlock, borderRadius, shadow, textAlign, overflow, position, inset, insetTop, insetBottom, insetStart, insetEnd, zIndex, 
+    animated, backgroundColor, borderColor, borderTop, borderBottom, borderStart, borderEnd, borderInline, borderBlock, borderRadius, shadow, textAlign, overflow, position, inset, insetTop, insetBottom, insetStart, insetEnd, insetInline, insetBlock, zIndex, 
     /**
      * Item prop
      */
@@ -47,6 +47,8 @@ const View = (props) => {
         insetBottom,
         insetStart,
         insetEnd,
+        insetInline,
+        insetBlock,
         bleed,
         width,
         height,
@@ -55,6 +57,7 @@ const View = (props) => {
         minWidth,
         minHeight,
         position,
+        zIndex,
         aspectRatio,
         textAlign,
         justify,
@@ -176,7 +179,6 @@ const View = (props) => {
         ...attributes?.style,
         ...responsiveVariables("--rs-view-gap", gap),
         ...mixinStyles.variables,
-        ...(zIndex ? { "--rs-view-z": zIndex } : {}),
     };
     return (_jsx(TagName, { ...attributes, className: rootClassNames, style: rootVariables, children: formattedChildren }));
 };

package/dist/components/View/View.module.css

@@ -1 +1 @@
-.root{--rs-view-gaps-count-multiplier:1;--rs-view-z:auto;--rs-view-gap-value:calc(var(--rs-view-gap) * var(--rs-unit-x1));gap:var(--rs-view-gap-value);position:relative;z-index:var(--rs-view-z)}.item{--rs-view-item-gap:calc(var(--rs-unit-x1) * var(--rs-view-item-gap-before) - var(--rs-view-gap-value));order:var(--rs-view-item-order)}.--animated{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,color,border-color,box-shadow}.--bg-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral)}.--bg-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.--bg-warning{background-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.--bg-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.--bg-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.--bg-neutral-faded{background-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral)}.--bg-positive-faded{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-neutral)}.--bg-warning-faded{background-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-neutral)}.--bg-critical-faded{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-neutral)}.--bg-primary-faded{background-color:var(--rs-color-background-primary-faded)}.--bg-page,.--bg-primary-faded{color:var(--rs-color-foreground-neutral)}.--bg-page{background-color:var(--rs-color-background-page)}.--bg-page-faded{background-color:var(--rs-color-background-page-faded)}.--bg-disabled,.--bg-page-faded{color:var(--rs-color-foreground-neutral)}.--bg-disabled{background-color:var(--rs-color-background-disabled)}.--bg-disabled-faded{background-color:var(--rs-color-background-disabled-faded);color:var(--rs-color-foreground-neutral)}.--bg-elevation-base{background-color:var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral)}.--bg-elevation-raised{background-color:var(--rs-color-background-elevation-raised);color:var(--rs-color-foreground-neutral)}.--bg-elevation-overlay{background-color:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral)}.--bg-brand{background-color:var(--rs-color-brand);color:var(--rs-color-on-brand)}.--bg-white{background-color:var(--rs-color-white);color:var(--rs-color-black)}.--bg-black{background-color:var(--rs-color-black);color:var(--rs-color-white)}.--overflow-hidden{overflow:hidden}.--overflow-auto{overflow:auto}.--divided{--rs-view-gaps-count-multiplier:2}.--flex{display:flex;flex-direction:column;justify-content:flex-start}.--direction-column{flex-direction:column;flex-wrap:nowrap}.--direction-column>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column>.item--gap-auto{margin-top:auto}.--direction-column-reverse{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse>.item--gap-auto{margin-top:auto}.--direction-row{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row>.item--gap-auto{margin-inline-start:auto}.--direction-row>button{width:auto!important}.--direction-row-reverse{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse>button{width:auto!important}.--nowrap{flex-wrap:nowrap}.--nowrap>*{flex-shrink:0}.--wrap{flex-wrap:wrap}@media (--rs-viewport-m ){.--nowrap-false--m,.--wrap-true--m{flex-wrap:wrap}.--nowrap-true--m,.--wrap-false--m{flex-wrap:nowrap}}@media (--rs-viewport-l ){.--nowrap-false--l,.--wrap-true--l{flex-wrap:wrap}.--nowrap-true--l,.--wrap-false--l{flex-wrap:nowrap}}@media (--rs-viewport-xl ){.--nowrap-false--xl,.--wrap-true--xl{flex-wrap:wrap}.--nowrap-true--xl,.--wrap-false--xl{flex-wrap:nowrap}}.divider{align-self:stretch}.item--grow{flex-basis:0;flex-grow:1;min-width:0}.item--grow,.item--shrink{flex-shrink:1}.item--columns{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-1{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-1,.item--columns-2{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-2{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3,.item--columns-4{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-4{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5,.item--columns-6{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-6{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7,.item--columns-8{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-8{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10,.item--columns-9{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-10{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11,.item--columns-12{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-12{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto{width:auto}@media (--rs-viewport-m ){.item--columns-1--m{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--m{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--m{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--m{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--m{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--m{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--m{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--m{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--m{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--m{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--m{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--m{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--m{width:auto}}@media (--rs-viewport-l ){.item--columns-1--l{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--l{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--l{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--l{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--l{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--l{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--l{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--l{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--l{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--l{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--l{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--l{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--l{width:auto}}@media (--rs-viewport-xl ){.item--columns-1--xl{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--xl{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--xl{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--xl{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--xl{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--xl{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--xl{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--xl{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--xl{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--xl{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--xl{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--xl{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--xl{width:auto}}.root{--rs-view-gap-s:0;--rs-view-gap-m:var(--rs-view-gap-s);--rs-view-gap-l:var(--rs-view-gap-m);--rs-view-gap-xl:var(--rs-view-gap-l);--rs-view-gap:var(--rs-view-gap-s)}.root>.item{--rs-view-item-order-s:0;--rs-view-item-order-m:var(--rs-view-item-order-s);--rs-view-item-order-l:var(--rs-view-item-order-m);--rs-view-item-order-xl:var(--rs-view-item-order-l);--rs-view-item-order:var(--rs-view-item-order-s);--rs-view-item-gap-before-s:initial;--rs-view-item-gap-before-m:var(--rs-view-item-gap-before-s);--rs-view-item-gap-before-l:var(--rs-view-item-gap-before-m);--rs-view-item-gap-before-xl:var(--rs-view-item-gap-before-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-s)}@media (--rs-viewport-m ){.--direction-column--m{flex-direction:column;flex-wrap:nowrap}.--direction-column--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--m>.item--gap-auto{margin-top:auto}.--direction-column-reverse--m{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--m>.item--gap-auto{margin-top:auto}.--direction-row--m{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--m>.item--gap-auto{margin-inline-start:auto}.--direction-row--m>button{width:auto!important}.--direction-row-reverse--m{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--m>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--m>button{width:auto!important}.item--grow-true--m{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--m{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.root{--rs-view-gap:var(--rs-view-gap-m)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-m);--rs-view-item-gap-before:var(--rs-view-item-gap-before-m)}}@media (--rs-viewport-l ){.--direction-column--l{flex-direction:column;flex-wrap:nowrap}.--direction-column--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--l>.item--gap-auto{margin-top:auto}.--direction-column-reverse--l{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--l>.item--gap-auto{margin-top:auto}.--direction-row--l{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--l>.item--gap-auto{margin-inline-start:auto}.--direction-row--l>button{width:auto!important}.--direction-row-reverse--l{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--l>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--l>button{width:auto!important}.item--grow-true--l{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--l{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.root{--rs-view-gap:var(--rs-view-gap-l)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-l)}}@media (--rs-viewport-xl ){.--direction-column--xl{flex-direction:column;flex-wrap:nowrap}.--direction-column--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--xl>.item--gap-auto{margin-top:auto}.--direction-column-reverse--xl{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--xl>.item--gap-auto{margin-top:auto}.--direction-row--xl{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row--xl>button{width:auto!important}.--direction-row-reverse--xl{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--xl>button{width:auto!important}.item--grow-true--xl{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--xl{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.root{--rs-view-gap:var(--rs-view-gap-xl)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-xl);--rs-view-item-gap-before:var(--rs-view-item-gap-before-xl)}}
+.root{--rs-view-gaps-count-multiplier:1;--rs-view-gap-value:calc(var(--rs-view-gap) * var(--rs-unit-x1));gap:var(--rs-view-gap-value);position:relative}.item{--rs-view-item-gap:calc(var(--rs-unit-x1) * var(--rs-view-item-gap-before) - var(--rs-view-gap-value));order:var(--rs-view-item-order)}.--animated{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,color,border-color,box-shadow}.--bg-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral)}.--bg-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.--bg-warning{background-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.--bg-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.--bg-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.--bg-neutral-faded{color:var(--rs-color-foreground-neutral);background-color:var(--rs-color-background-neutral-faded)}.--bg-positive-faded{color:var(--rs-color-foreground-neutral);background-color:var(--rs-color-background-positive-faded)}.--bg-warning-faded{color:var(--rs-color-foreground-neutral);background-color:var(--rs-color-background-warning-faded)}.--bg-critical-faded{color:var(--rs-color-foreground-neutral);background-color:var(--rs-color-background-critical-faded)}.--bg-primary-faded{background-color:var(--rs-color-background-primary-faded)}.--bg-page,.--bg-primary-faded{color:var(--rs-color-foreground-neutral)}.--bg-page{background-color:var(--rs-color-background-page)}.--bg-page-faded{background-color:var(--rs-color-background-page-faded)}.--bg-disabled,.--bg-page-faded{color:var(--rs-color-foreground-neutral)}.--bg-disabled{background-color:var(--rs-color-background-disabled)}.--bg-disabled-faded{color:var(--rs-color-foreground-neutral);background-color:var(--rs-color-background-disabled-faded)}.--bg-elevation-base{color:var(--rs-color-foreground-neutral);background-color:var(--rs-color-background-elevation-base)}.--bg-elevation-raised{color:var(--rs-color-foreground-neutral);background-color:var(--rs-color-background-elevation-raised)}.--bg-elevation-overlay{color:var(--rs-color-foreground-neutral);background-color:var(--rs-color-background-elevation-overlay)}.--bg-brand{background-color:var(--rs-color-brand);color:var(--rs-color-on-brand)}.--bg-white{background-color:var(--rs-color-white);color:var(--rs-color-black)}.--bg-black{background-color:var(--rs-color-black);color:var(--rs-color-white)}.--overflow-hidden{overflow:hidden}.--overflow-auto{overflow:auto}.--divided{--rs-view-gaps-count-multiplier:2}.--flex{display:flex;flex-direction:column;justify-content:flex-start}.--direction-column{flex-direction:column;flex-wrap:nowrap}.--direction-column>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column>.item--gap-auto{margin-top:auto}.--direction-column-reverse{flex-wrap:nowrap;flex-direction:column-reverse}.--direction-column-reverse>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse>.item--gap-auto{margin-top:auto}.--direction-row{flex-wrap:wrap;flex-direction:row;align-items:flex-start}.--direction-row>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row>.item--gap-auto{margin-inline-start:auto}.--direction-row>button{width:auto!important}.--direction-row-reverse{flex-wrap:wrap;flex-direction:row-reverse;align-items:flex-start}.--direction-row-reverse>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse>button{width:auto!important}.--nowrap{flex-wrap:nowrap}.--nowrap>*{flex-shrink:0}.--wrap{flex-wrap:wrap}@media (--rs-viewport-m ){.--nowrap-false--m,.--wrap-true--m{flex-wrap:wrap}.--nowrap-true--m,.--wrap-false--m{flex-wrap:nowrap}}@media (--rs-viewport-l ){.--nowrap-false--l,.--wrap-true--l{flex-wrap:wrap}.--nowrap-true--l,.--wrap-false--l{flex-wrap:nowrap}}@media (--rs-viewport-xl ){.--nowrap-false--xl,.--wrap-true--xl{flex-wrap:wrap}.--nowrap-true--xl,.--wrap-false--xl{flex-wrap:nowrap}}.divider{align-self:stretch}.item--grow{flex-grow:1;min-width:0;flex-basis:0}.item--grow,.item--shrink{flex-shrink:1}.item--columns{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-1{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-1,.item--columns-2{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-2{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3,.item--columns-4{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-4{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5,.item--columns-6{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-6{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7,.item--columns-8{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-8{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10,.item--columns-9{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-10{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11,.item--columns-12{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-12{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto{width:auto}@media (--rs-viewport-m ){.item--columns-1--m{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--m{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--m{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--m{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--m{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--m{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--m{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--m{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--m{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--m{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--m{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--m{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--m{width:auto}}@media (--rs-viewport-l ){.item--columns-1--l{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--l{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--l{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--l{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--l{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--l{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--l{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--l{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--l{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--l{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--l{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--l{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--l{width:auto}}@media (--rs-viewport-xl ){.item--columns-1--xl{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--xl{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--xl{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--xl{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--xl{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--xl{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--xl{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--xl{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--xl{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--xl{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--xl{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--xl{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--xl{width:auto}}.root{--rs-view-gap-s:0;--rs-view-gap-m:var(--rs-view-gap-s);--rs-view-gap-l:var(--rs-view-gap-m);--rs-view-gap-xl:var(--rs-view-gap-l);--rs-view-gap:var(--rs-view-gap-s)}.root>.item{--rs-view-item-order-s:0;--rs-view-item-order-m:var(--rs-view-item-order-s);--rs-view-item-order-l:var(--rs-view-item-order-m);--rs-view-item-order-xl:var(--rs-view-item-order-l);--rs-view-item-order:var(--rs-view-item-order-s);--rs-view-item-gap-before-s:initial;--rs-view-item-gap-before-m:var(--rs-view-item-gap-before-s);--rs-view-item-gap-before-l:var(--rs-view-item-gap-before-m);--rs-view-item-gap-before-xl:var(--rs-view-item-gap-before-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-s)}@media (--rs-viewport-m ){.--direction-column--m{flex-direction:column;flex-wrap:nowrap}.--direction-column--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--m>.item--gap-auto{margin-top:auto}.--direction-column-reverse--m{flex-wrap:nowrap;flex-direction:column-reverse}.--direction-column-reverse--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--m>.item--gap-auto{margin-top:auto}.--direction-row--m{flex-wrap:wrap;flex-direction:row;align-items:flex-start}.--direction-row--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--m>.item--gap-auto{margin-inline-start:auto}.--direction-row--m>button{width:auto!important}.--direction-row-reverse--m{flex-wrap:wrap;flex-direction:row-reverse;align-items:flex-start}.--direction-row-reverse--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--m>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--m>button{width:auto!important}.item--grow-true--m{flex-grow:1;flex-shrink:1;min-width:0;flex-basis:0}.item--grow-false--m{flex-grow:0;flex-shrink:0;flex-basis:auto;min-width:auto}.root{--rs-view-gap:var(--rs-view-gap-m)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-m);--rs-view-item-gap-before:var(--rs-view-item-gap-before-m)}}@media (--rs-viewport-l ){.--direction-column--l{flex-direction:column;flex-wrap:nowrap}.--direction-column--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--l>.item--gap-auto{margin-top:auto}.--direction-column-reverse--l{flex-wrap:nowrap;flex-direction:column-reverse}.--direction-column-reverse--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--l>.item--gap-auto{margin-top:auto}.--direction-row--l{flex-wrap:wrap;flex-direction:row;align-items:flex-start}.--direction-row--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--l>.item--gap-auto{margin-inline-start:auto}.--direction-row--l>button{width:auto!important}.--direction-row-reverse--l{flex-wrap:wrap;flex-direction:row-reverse;align-items:flex-start}.--direction-row-reverse--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--l>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--l>button{width:auto!important}.item--grow-true--l{flex-grow:1;flex-shrink:1;min-width:0;flex-basis:0}.item--grow-false--l{flex-grow:0;flex-shrink:0;flex-basis:auto;min-width:auto}.root{--rs-view-gap:var(--rs-view-gap-l)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-l)}}@media (--rs-viewport-xl ){.--direction-column--xl{flex-direction:column;flex-wrap:nowrap}.--direction-column--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--xl>.item--gap-auto{margin-top:auto}.--direction-column-reverse--xl{flex-wrap:nowrap;flex-direction:column-reverse}.--direction-column-reverse--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--xl>.item--gap-auto{margin-top:auto}.--direction-row--xl{flex-wrap:wrap;flex-direction:row;align-items:flex-start}.--direction-row--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row--xl>button{width:auto!important}.--direction-row-reverse--xl{flex-wrap:wrap;flex-direction:row-reverse;align-items:flex-start}.--direction-row-reverse--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--xl>button{width:auto!important}.item--grow-true--xl{flex-grow:1;flex-shrink:1;min-width:0;flex-basis:0}.item--grow-false--xl{flex-grow:0;flex-shrink:0;flex-basis:auto;min-width:auto}.root{--rs-view-gap:var(--rs-view-gap-xl)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-xl);--rs-view-item-gap-before:var(--rs-view-item-gap-before-xl)}}

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

@@ -86,8 +86,12 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = voi
     insetTop?: G.Responsive<TStyles.Inset>;
     /** Inset bottom, base unit token number multiplier when used as a number */
     insetBottom?: G.Responsive<TStyles.Inset>;
-    /** z-index style */
-    zIndex?: number;
+    /** Inset inline, base unit token number multiplier when used as a number, "center" centers on the inline axis */
+    insetInline?: G.Responsive<TStyles.InsetAxis>;
+    /** Inset block, base unit token number multiplier when used as a number, "center" centers on the block axis */
+    insetBlock?: G.Responsive<TStyles.InsetAxis>;
+    /** z-index style, based on the z-index tokens when used as a string */
+    zIndex?: TStyles.ZIndex;
     /** Shadow style, based on the shadow tokens */
     shadow?: TStyles.Shadow;
     /** Overflow style */

package/dist/components/View/index.js

@@ -1,4 +1,4 @@
-import View, { ViewItem } from "./View.js";
+import View, { ViewItem } from "./View";
 const ViewRoot = View;
 ViewRoot.Item = ViewItem;
 export default ViewRoot;

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

@@ -1,6 +1,6 @@
 import { StoryObj } from "@storybook/react-vite";
 import React from "react";
-import { type ViewProps } from "./..";
+import { type ViewProps } from "../../../components/View";
 declare const _default: {
     title: string;
     component: {
@@ -100,6 +100,10 @@ export declare const inset: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const zIndex: {
+    name: string;
+    render: () => React.JSX.Element;
+};
 export declare const animated: {
     name: string;
     render: () => React.JSX.Element;

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

@@ -36,16 +36,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.itemClassName = exports.className = exports.asProp = exports.testComposition = exports.nestedGaps = exports.keys = exports.hiddenItem = exports.itemOrder = exports.itemColumns = exports.itemGrow = exports.itemGapBefore = exports.animated = exports.inset = exports.positioning = exports.overflow = exports.shadow = exports.radius = exports.border = exports.borderColor = exports.background = exports.minSize = exports.maxSize = exports.ratio = exports.size = exports.textAlign = exports.justify = exports.align = exports.wrap = exports.bleed = exports.divided = exports.gap = exports.direction = exports.padding = void 0;
+exports.itemClassName = exports.className = exports.asProp = exports.testComposition = exports.nestedGaps = exports.keys = exports.hiddenItem = exports.itemOrder = exports.itemColumns = exports.itemGrow = exports.itemGapBefore = exports.animated = exports.zIndex = exports.inset = exports.positioning = exports.overflow = exports.shadow = exports.radius = exports.border = exports.borderColor = exports.background = exports.minSize = exports.maxSize = exports.ratio = exports.size = exports.textAlign = exports.justify = exports.align = exports.wrap = exports.bleed = exports.divided = exports.gap = exports.direction = exports.padding = void 0;
 const react_1 = __importStar(require("react"));
 const test_1 = require("storybook/test");
-const Avatar_1 = __importDefault(require("../../Avatar"));
-const Button_1 = __importDefault(require("../../Button"));
-const Hidden_1 = __importDefault(require("../../Hidden"));
-const MenuItem_1 = __importDefault(require("../../MenuItem"));
-const Tabs_1 = __importDefault(require("../../Tabs"));
-const Text_1 = __importDefault(require("../../Text"));
-const View_1 = __importDefault(require("./.."));
+const Avatar_1 = __importDefault(require("../../../components/Avatar"));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const Hidden_1 = __importDefault(require("../../../components/Hidden"));
+const MenuItem_1 = __importDefault(require("../../../components/MenuItem"));
+const Tabs_1 = __importDefault(require("../../../components/Tabs"));
+const Text_1 = __importDefault(require("../../../components/Text"));
+const View_1 = __importDefault(require("../../../components/View"));
 const useToggle_1 = __importDefault(require("../../../hooks/useToggle"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
@@ -854,11 +854,66 @@ exports.inset = {
 				</View_1.default>
 			</storybook_1.Example.Item>
 
+			<storybook_1.Example.Item title="insetInline: 4">
+				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
+					<View_1.default backgroundColor="neutral" position="absolute" insetInline={4} height={10} width={10}/>
+				</View_1.default>
+			</storybook_1.Example.Item>
+
+			<storybook_1.Example.Item title="insetBlock: 4">
+				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
+					<View_1.default backgroundColor="neutral" position="absolute" insetBlock={4} height={10} width={10}/>
+				</View_1.default>
+			</storybook_1.Example.Item>
+
+			<storybook_1.Example.Item title="insetInline: center">
+				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
+					<View_1.default backgroundColor="neutral" position="absolute" insetInline="center" height={10} width={10}/>
+				</View_1.default>
+			</storybook_1.Example.Item>
+
+			<storybook_1.Example.Item title="insetBlock: center">
+				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
+					<View_1.default backgroundColor="neutral" position="absolute" insetBlock="center" height={10} width={10}/>
+				</View_1.default>
+			</storybook_1.Example.Item>
+
+			<storybook_1.Example.Item title="insetInline: center, insetBlock: center">
+				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
+					<View_1.default backgroundColor="neutral" position="absolute" insetInline="center" insetBlock="center" height={10} width={10}/>
+				</View_1.default>
+			</storybook_1.Example.Item>
+
 			<storybook_1.Example.Item title="responsive, [s] insetBottom: 4 [m+] insetEnd: 4">
 				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
 					<View_1.default backgroundColor="neutral" position="absolute" insetBottom={{ s: 4, m: "auto" }} insetEnd={{ s: "auto", m: 4 }} height={10} width={10}/>
 				</View_1.default>
 			</storybook_1.Example.Item>
+
+			<storybook_1.Example.Item title="responsive, [s] insetInline: center [m+] insetInline: 4">
+				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
+					<View_1.default backgroundColor="neutral" position="absolute" insetInline={{ s: "center", m: 4 }} height={10} width={10}/>
+				</View_1.default>
+			</storybook_1.Example.Item>
+		</storybook_1.Example>),
+};
+exports.zIndex = {
+    name: "zIndex",
+    render: () => (<storybook_1.Example>
+			<storybook_1.Example.Item title="zIndex: number, higher value stacks on top">
+				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
+					<View_1.default backgroundColor="critical" position="absolute" insetTop={2} insetStart={2} zIndex={1} height={12} width={12}/>
+					<View_1.default backgroundColor="primary" position="absolute" insetTop={6} insetStart={6} zIndex={2} height={12} width={12}/>
+				</View_1.default>
+			</storybook_1.Example.Item>
+
+			<storybook_1.Example.Item title="zIndex: token, fixed stacks above absolute above relative">
+				<View_1.default backgroundColor="neutral-faded" width={25} height={25}>
+					<View_1.default backgroundColor="critical" position="absolute" insetTop={2} insetStart={2} zIndex="relative" height={12} width={12}/>
+					<View_1.default backgroundColor="primary" position="absolute" insetTop={6} insetStart={6} zIndex="absolute" height={12} width={12}/>
+					<View_1.default backgroundColor="positive" position="absolute" insetTop={10} insetStart={10} zIndex="fixed" height={12} width={12}/>
+				</View_1.default>
+			</storybook_1.Example.Item>
 		</storybook_1.Example>),
 };
 exports.animated = {

package/dist/components/_private/Aligner/index.js

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