reshaped 3.7.0-canary.8 → 3.7.0

package/dist/components/Theme/tests/{Theme.test.stories.js → Theme.stories.js}

@@ -5,8 +5,9 @@ import View from "../../View/index.js";
 import MenuItem from "../../MenuItem/index.js";
 import Theme, { useTheme } from "../index.js";
 import { Example } from "../../../utilities/storybook/index.js";
+import Popover from "../../Popover/index.js";
 export default {
-    title: "Utility components/Theme/tests",
+    title: "Utility components/Theme",
     component: Theme,
     parameters: {
         iframe: {
@@ -15,6 +16,43 @@ export default {
         chromatic: { disableSnapshot: true },
     },
 };
+export const scoped = {
+    name: "scoped",
+    render: () => (<Example>
+			<Example.Item title="scoped, single">
+				<Theme name="reshaped">
+					<Card attributes={{ "data-testid": "test-id" }}>
+						<Button color="primary">Action</Button>
+					</Card>
+				</Theme>
+			</Example.Item>
+
+			<Example.Item title="scoped, multiple">
+				<Theme name={["reshaped", "figma"]}>
+					<Card attributes={{ "data-testid": "test-id-multi" }}>
+						<View direction="row" gap={4}>
+							<Button color="primary">Action</Button>
+
+							<Popover>
+								<Popover.Trigger>
+									{(attributes) => <Button attributes={attributes}>Popover</Button>}
+								</Popover.Trigger>
+								<Popover.Content>Content</Popover.Content>
+							</Popover>
+						</View>
+					</Card>
+				</Theme>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const root = canvas.getByTestId("test-id").parentNode;
+        const rootMultiple = canvas.getByTestId("test-id-multi").parentNode;
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+        expect(rootMultiple).toHaveAttribute("data-rs-theme", " reshaped figma ");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+    },
+};
 export const light = {
     name: "light",
     render: () => (<Theme name="reshaped" colorMode="light">

package/dist/components/Theme/useTheme.d.ts

@@ -1,10 +1,10 @@
 export declare const useGlobalColorMode: () => import("./Theme.types").GlobalColorModeContextData;
 export declare const useTheme: () => {
-    theme: string;
-    setTheme: (theme: string) => void;
-    rootTheme: string;
-    setRootTheme: (theme: string) => void;
-    colorMode: import("./Theme.types").ColorMode;
-    setColorMode: (mode: import("./Theme.types").ColorMode) => void;
+    theme: import("../../types/global").Theme;
+    setTheme: (theme: import("../../types/global").Theme) => void;
+    rootTheme: import("../../types/global").Theme;
+    setRootTheme: (theme: import("../../types/global").Theme) => void;
+    colorMode: import("../..").ColorMode;
+    setColorMode: (mode: import("../..").ColorMode) => void;
     invertColorMode: () => void;
 };

package/dist/components/View/View.js

@@ -5,21 +5,7 @@ import { classNames, responsiveClassNames, responsiveVariables } from "../../uti
 import Divider from "../Divider/index.js";
 import Hidden from "../Hidden/index.js";
 import s from "./View.module.css";
-import getRadiusStyles from "../../styles/radius/index.js";
-import getBleedStyles from "../../styles/bleed/index.js";
-import getWidthStyles from "../../styles/width/index.js";
-import getHeightStyles from "../../styles/height/index.js";
-import getMaxWidthStyles from "../../styles/maxWidth/index.js";
-import getMaxHeightStyles from "../../styles/maxHeight/index.js";
-import getMinWidthStyles from "../../styles/minWidth/index.js";
-import getMinHeightStyles from "../../styles/minHeight/index.js";
-import getPositionStyles from "../../styles/position/index.js";
-import getInsetStyles from "../../styles/inset/index.js";
-import getAspectRatioStyles from "../../styles/aspectRatio/index.js";
-import getBorderStyles from "../../styles/border/index.js";
-import getTextAlignStyles from "../../styles/textAlign/index.js";
-import getAlignStyles from "../../styles/align/index.js";
-import getJustifyStyles from "../../styles/justify/index.js";
+import { resolveMixin } from "../../styles/mixin.js";
 const ViewItem = (props) => {
     const { columns, grow, shrink, gapBefore, 
     // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
@@ -41,7 +27,7 @@ const View = (props) => {
     /**
      * Style props
      * */
-    animated, backgroundColor, borderColor, 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, zIndex, 
     /**
      * Item prop
      */
@@ -49,27 +35,47 @@ const View = (props) => {
     // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     as: TagName = "div", children, divided, className, attributes, } = props;
+    const border = props.border ??
+        (borderColor
+            ? !borderTop && !borderBottom && !borderStart && !borderEnd && !borderInline && !borderBlock
+            : undefined);
     let isFlex = !!align || !!justify || !!gap || !!props.direction;
     const direction = props.direction || (isFlex ? "column" : undefined);
-    const radiusStyles = getRadiusStyles(borderRadius);
-    const bleedStyles = getBleedStyles(bleed);
-    const widthStyles = getWidthStyles(width);
-    const heightStyles = getHeightStyles(height);
-    const maxWidthStyles = getMaxWidthStyles(maxWidth);
-    const maxHeightStyles = getMaxHeightStyles(maxHeight);
-    const minWidthStyles = getMinWidthStyles(minWidth);
-    const minHeightStyles = getMinHeightStyles(minHeight);
-    const positionStyles = getPositionStyles(position);
-    const insetStyles = getInsetStyles(inset);
-    const insetTopStyles = getInsetStyles(insetTop, "top");
-    const insetBottomStyles = getInsetStyles(insetBottom, "bottom");
-    const insetStartStyles = getInsetStyles(insetStart, "start");
-    const insetEndStyles = getInsetStyles(insetEnd, "end");
-    const aspectRatioStyles = getAspectRatioStyles(aspectRatio);
-    const borderStyles = getBorderStyles(borderColor);
-    const textAlignStyles = getTextAlignStyles(textAlign);
-    const alignStyles = getAlignStyles(align);
-    const justifyStyles = getJustifyStyles(justify);
+    const mixinStyles = resolveMixin({
+        align,
+        inset,
+        insetTop,
+        insetBottom,
+        insetStart,
+        insetEnd,
+        bleed,
+        width,
+        height,
+        maxWidth,
+        maxHeight,
+        minWidth,
+        minHeight,
+        position,
+        aspectRatio,
+        textAlign,
+        justify,
+        padding,
+        paddingInline,
+        paddingBlock,
+        paddingBottom,
+        paddingEnd,
+        paddingStart,
+        paddingTop,
+        borderColor,
+        border,
+        borderTop,
+        borderBottom,
+        borderStart,
+        borderEnd,
+        borderInline,
+        borderBlock,
+        radius: borderRadius,
+    });
     let renderedItemIndex = 0;
     // If wrap is not defined, it can be set based on item grow and split usage
     let nowrap;
@@ -147,8 +153,7 @@ const View = (props) => {
         return renderItem({ child, index: usedIndex });
     });
     // Classnames and attributes are written here so we can assign nowrap to the root element based on the children
-    const rootClassNames = classNames(s.root, className, radiusStyles?.classNames, bleedStyles?.classNames, widthStyles?.classNames, heightStyles?.classNames, maxWidthStyles?.classNames, maxHeightStyles?.classNames, minWidthStyles?.classNames, minHeightStyles?.classNames, borderStyles?.classNames, backgroundColor && s[`--bg-${backgroundColor}`], shadow && s[`--shadow-${shadow}`], overflow && s[`--overflow-${overflow}`], animated && s["--animated"], divided && s["--divided"], (padding !== undefined || paddingInline !== undefined || paddingBlock !== undefined) &&
-        s["--padding"], (isFlex || nowrap) && s["--flex"], ...responsiveClassNames(s, "--direction", direction), 
+    const rootClassNames = classNames(s.root, className, mixinStyles.classNames, backgroundColor && s[`--bg-${backgroundColor}`], shadow && s[`--shadow-${shadow}`], overflow && s[`--overflow-${overflow}`], animated && s["--animated"], divided && s["--divided"], (isFlex || nowrap) && s["--flex"], ...responsiveClassNames(s, "--direction", direction), 
     // Wrap and nowrap are separate here because inverting any of them could result into a false value which will be ignored by classNames
     ...responsiveClassNames(s, "--nowrap", nowrap || wrap === false), ...responsiveClassNames(s, "--wrap", wrap), 
     // Item classnames
@@ -156,29 +161,7 @@ const View = (props) => {
     const rootVariables = {
         ...attributes?.style,
         ...responsiveVariables("--rs-view-gap", gap),
-        ...responsiveVariables("--rs-view-p-vertical", paddingBlock || padding),
-        ...responsiveVariables("--rs-view-p-horizontal", paddingInline || padding),
-        ...responsiveVariables("--rs-view-p-bottom", paddingBottom),
-        ...responsiveVariables("--rs-view-p-top", paddingTop),
-        ...responsiveVariables("--rs-view-p-start", paddingStart),
-        ...responsiveVariables("--rs-view-p-end", paddingEnd),
-        ...bleedStyles?.variables,
-        ...widthStyles?.variables,
-        ...heightStyles?.variables,
-        ...aspectRatioStyles?.variables,
-        ...maxWidthStyles?.variables,
-        ...maxHeightStyles?.variables,
-        ...minWidthStyles?.variables,
-        ...minHeightStyles?.variables,
-        ...insetStyles?.variables,
-        ...insetTopStyles?.variables,
-        ...insetBottomStyles?.variables,
-        ...insetStartStyles?.variables,
-        ...insetEndStyles?.variables,
-        ...alignStyles?.variables,
-        ...justifyStyles?.variables,
-        ...positionStyles?.variables,
-        ...textAlignStyles?.variables,
+        ...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));--rs-view-border-width:0px;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)}.--padding{padding:calc(var(--rs-unit-x1) * var(--rs-view-p-vertical, var(--rs-view-p-top)) - var(--rs-view-border-width)) calc(var(--rs-unit-x1) * var(--rs-view-p-horizontal, var(--rs-view-p-start)) - var(--rs-view-border-width));--rs-view-p-vertical-s:0;--rs-view-p-vertical-m:var(--rs-view-p-vertical-s);--rs-view-p-vertical-l:var(--rs-view-p-vertical-m);--rs-view-p-vertical-xl:var(--rs-view-p-vertical-l);--rs-view-p-vertical:var(--rs-view-p-vertical-s);--rs-view-p-horizontal-s:0;--rs-view-p-horizontal-m:var(--rs-view-p-horizontal-s);--rs-view-p-horizontal-l:var(--rs-view-p-horizontal-m);--rs-view-p-horizontal-xl:var(--rs-view-p-horizontal-l);--rs-view-p-horizontal:var(--rs-view-p-horizontal-s)}.root[style*="--rs-view-p-top"]{padding-top:calc(var(--rs-unit-x1) * var(--rs-view-p-top));--rs-view-p-top-s:0;--rs-view-p-top-m:var(--rs-view-p-top-s);--rs-view-p-top-l:var(--rs-view-p-top-m);--rs-view-p-top-xl:var(--rs-view-p-top-l);--rs-view-p-top:var(--rs-view-p-top-s)}.root[style*="--rs-view-p-bottom"]{padding-bottom:calc(var(--rs-unit-x1) * var(--rs-view-p-bottom));--rs-view-p-bottom-s:0;--rs-view-p-bottom-m:var(--rs-view-p-bottom-s);--rs-view-p-bottom-l:var(--rs-view-p-bottom-m);--rs-view-p-bottom-xl:var(--rs-view-p-bottom-l);--rs-view-p-bottom:var(--rs-view-p-bottom-s)}.root[style*="--rs-view-p-start"]{padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-view-p-start));--rs-view-p-start-s:0;--rs-view-p-start-m:var(--rs-view-p-start-s);--rs-view-p-start-l:var(--rs-view-p-start-m);--rs-view-p-start-xl:var(--rs-view-p-start-l);--rs-view-p-start:var(--rs-view-p-start-s)}.root[style*="--rs-view-p-end"]{padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-view-p-end));--rs-view-p-end-s:0;--rs-view-p-end-m:var(--rs-view-p-end-s);--rs-view-p-end-l:var(--rs-view-p-end-m);--rs-view-p-end-xl:var(--rs-view-p-end-l);--rs-view-p-end:var(--rs-view-p-end-s)}.--animated{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:background-color,color,border-color,box-shadow}.--align-text-start{text-align:start}.--align-text-center{text-align:center}.--align-text-end{text-align:end}.--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)}.--shadow-raised{box-shadow:var(--rs-shadow-raised)}.--shadow-overlay{box-shadow:var(--rs-shadow-overlay)}.--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 ){.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-m);--rs-view-p-horizontal:var(--rs-view-p-horizontal-m)}.root[style*="--rs-view-p-top"]{--rs-view-p-top:var(--rs-view-p-top-m)}.root[style*="--rs-view-p-bottom"]{--rs-view-p-bottom:var(--rs-view-p-bottom-m)}.root[style*="--rs-view-p-start"]{--rs-view-p-start:var(--rs-view-p-start-m)}.root[style*="--rs-view-p-end"]{--rs-view-p-end:var(--rs-view-p-end-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 ){.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-l);--rs-view-p-horizontal:var(--rs-view-p-horizontal-l)}.root[style*="--rs-view-p-top"]{--rs-view-p-top:var(--rs-view-p-top-l)}.root[style*="--rs-view-p-bottom"]{--rs-view-p-bottom:var(--rs-view-p-bottom-l)}.root[style*="--rs-view-p-start"]{--rs-view-p-start:var(--rs-view-p-start-l)}.root[style*="--rs-view-p-end"]{--rs-view-p-end:var(--rs-view-p-end-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 ){.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-xl);--rs-view-p-horizontal:var(--rs-view-p-horizontal-xl)}.root[style*="--rs-view-p-top"]{--rs-view-p-top:var(--rs-view-p-top-xl)}.root[style*="--rs-view-p-bottom"]{--rs-view-p-bottom:var(--rs-view-p-bottom-xl)}.root[style*="--rs-view-p-start"]{--rs-view-p-start:var(--rs-view-p-start-xl)}.root[style*="--rs-view-p-end"]{--rs-view-p-end:var(--rs-view-p-end-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-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-medium) 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)}.--shadow-raised{box-shadow:var(--rs-shadow-raised)}.--shadow-overlay{box-shadow:var(--rs-shadow-overlay)}.--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)}}

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

@@ -30,6 +30,13 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     textAlign?: G.Responsive<TStyles.TextAlign>;
     backgroundColor?: "neutral" | "neutral-faded" | "critical" | "critical-faded" | "positive" | "warning" | "warning-faded" | "positive-faded" | "primary" | "primary-faded" | "elevation-base" | "elevation-raised" | "elevation-overlay" | "page" | "page-faded" | "disabled" | "disabled-faded" | "brand" | "white" | "black";
     borderColor?: G.Responsive<TStyles.BorderColor>;
+    border?: G.Responsive<TStyles.Border>;
+    borderTop?: G.Responsive<TStyles.Border>;
+    borderBottom?: G.Responsive<TStyles.Border>;
+    borderStart?: G.Responsive<TStyles.Border>;
+    borderEnd?: G.Responsive<TStyles.Border>;
+    borderInline?: G.Responsive<TStyles.Border>;
+    borderBlock?: G.Responsive<TStyles.Border>;
     borderRadius?: G.Responsive<TStyles.Radius>;
     position?: G.Responsive<TStyles.Position>;
     inset?: G.Responsive<TStyles.Inset>;

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

@@ -73,6 +73,10 @@ export declare const background: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const borderColor: {
+    name: string;
+    render: () => React.JSX.Element;
+};
 export declare const border: {
     name: string;
     render: () => React.JSX.Element;

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

@@ -548,7 +548,7 @@ export const background = {
 			</Example.Item>
 		</Example>),
 };
-export const border = {
+export const borderColor = {
     name: "borderColor",
     render: () => (<Example>
 			<Example.Item title="border: neutral">
@@ -624,6 +624,70 @@ export const border = {
 			</Example.Item>
 		</Example>),
 };
+export const border = {
+    name: "border",
+    render: () => (<Example>
+			<Example.Item title="border: true">
+				<View border borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderTop: true">
+				<View borderTop borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderBottom: true">
+				<View borderBottom borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderStart: true">
+				<View borderStart borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderEnd: true">
+				<View borderEnd borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderInline: true">
+				<View borderInline borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderBlock: true">
+				<View borderBlock borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderTop: true, borderStart: true, ">
+				<View borderColor="neutral" borderTop borderStart padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title={[
+            "responsive",
+            "[s] borderTop: true, borderStart: true",
+            "[m+] borderBottom: true, borderEnd: true",
+        ]}>
+				<View borderColor="neutral" borderTop={{ s: true, m: false }} borderStart={{ s: true, m: false }} borderBottom={{ s: false, m: true }} borderEnd={{ s: false, m: true }} padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<div style={{ height: 100 }}/>
+		</Example>),
+};
 export const radius = {
     name: "borderRadius",
     render: () => (<Example>

package/dist/components/_private/Portal/Portal.js

@@ -4,6 +4,8 @@ import React from "react";
 import ReactDOM from "react-dom";
 import Theme from "../../Theme/index.js";
 import s from "./Portal.module.css";
+import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
+import useToggle from "../../../hooks/useToggle.js";
 const PortalScopeContext = React.createContext({});
 export const usePortalScope = () => {
     return React.useContext(PortalScopeContext);
@@ -14,6 +16,7 @@ export const usePortalScope = () => {
  */
 const Portal = (props) => {
     const { children, targetRef } = props;
+    const mountedToggle = useToggle();
     const rootRef = React.useRef(null);
     const rootNode = rootRef.current?.getRootNode();
     const isShadowDom = rootNode instanceof ShadowRoot;
@@ -28,10 +31,15 @@ const Portal = (props) => {
     const portal = usePortalScope();
     const nextScopeRef = targetRef || portal.scopeRef;
     const targetEl = nextScopeRef?.current || defaultTargetEl;
+    useIsomorphicLayoutEffect(() => {
+        mountedToggle.activate();
+        return () => mountedToggle.deactivate();
+    }, []);
     /* Preserve the current theme when rendered in body */
     return [
         ReactDOM.createPortal(_jsx(Theme, { children: children }), targetEl),
-        _jsx("div", { ref: rootRef, className: s.root }, "root"),
+        // Make sure this element doesn't affect components using :last-child when their children use portals
+        !mountedToggle.active && _jsx("div", { ref: rootRef, className: s.root }, "root"),
     ];
 };
 function PortalScope(props) {

package/dist/config/tailwind.d.ts

@@ -1,2 +1,2 @@
 import type { ThemeDefinition } from "../themes/_generator/tokens/types";
-export declare const getTheme: (theme?: ThemeDefinition) => Record<"backgroundColor" | "borderColor" | "borderRadius" | "spacing" | "boxShadow" | "textColor" | "colors" | "screens", Record<string, string>>;
+export declare const getTheme: (theme?: ThemeDefinition) => Record<"borderColor" | "backgroundColor" | "borderRadius" | "spacing" | "boxShadow" | "textColor" | "colors" | "screens", Record<string, string>>;

package/dist/hooks/_private/useIsDismissible.d.ts

@@ -8,6 +8,5 @@ declare const useIsDismissible: (args: {
     active?: boolean;
     contentRef: Ref;
     triggerRef?: Ref;
-    blocking?: boolean;
 }) => () => boolean;
 export default useIsDismissible;

package/dist/hooks/_private/useIsDismissible.js

@@ -4,6 +4,7 @@
  */
 import React from "react";
 import useElementId from "../useElementId.js";
+import { onNextFrame } from "../../utilities/animation.js";
 let queue = {};
 let latestId = null;
 const removeFromQueue = (id) => {
@@ -22,19 +23,25 @@ const addToQueue = (id, contentRef, triggerRef) => {
     latestId = id;
 };
 const useIsDismissible = (args) => {
-    const { active, contentRef, triggerRef, blocking } = args;
+    const { active, contentRef, triggerRef } = args;
     const id = useElementId();
-    const isDismissible = React.useCallback(() => {
-        if (!blocking)
-            return true;
-        return active ? latestId === id : true;
-    }, [id, active, blocking]);
     React.useEffect(() => {
         if (!active)
             return;
-        addToQueue(id, contentRef, triggerRef);
+        onNextFrame(() => addToQueue(id, contentRef, triggerRef));
         return () => removeFromQueue(id);
     }, [active, id, contentRef, triggerRef]);
-    return isDismissible;
+    return React.useCallback(() => {
+        if (!active)
+            return true;
+        const latest = latestId ? queue[latestId] : undefined;
+        const latestTrigger = latest?.triggerRef?.current;
+        const prev = latest?.parentId ? queue[latest.parentId] : undefined;
+        const prevContent = prev?.contentRef.current;
+        // Don't block independently rendered components that are not nested in each other
+        if (!prevContent || !latestTrigger || !prevContent.contains(latestTrigger))
+            return true;
+        return latestId === id;
+    }, [id, active]);
 };
 export default useIsDismissible;

package/dist/index.d.ts

@@ -131,7 +131,6 @@ export type { ViewProps, ViewItemProps } from "./components/View";
  */
 export { useFormControl } from "./components/FormControl";
 export { default as Theme, useTheme, type ThemeProps } from "./components/Theme";
-export type { ColorMode } from "./components/Theme";
 export { default as useHandlerRef } from "./hooks/useHandlerRef";
 export { default as useHotkeys } from "./hooks/useHotkeys";
 export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
@@ -150,7 +149,7 @@ export { TrapFocus } from "./utilities/a11y";
  * Types
  */
 export type { ReshapedConfig } from "./types/config";
-export type { Responsive, Attributes } from "./types/global";
+export type { Responsive, Attributes, ColorMode } from "./types/global";
 /**
  * Dev utilities
  */

package/dist/styles/mixin.d.ts

@@ -0,0 +1,6 @@
+import type { Mixin } from "./types";
+import type * as G from "../types/global";
+export declare const resolveMixin: (mixin: Mixin) => {
+    variables: React.CSSProperties;
+    classNames: G.ClassName[];
+};

package/dist/styles/mixin.js

@@ -0,0 +1,71 @@
+import align from "./resolvers/align/index.js";
+import aspectRatio from "./resolvers/aspectRatio/index.js";
+import bleed from "./resolvers/bleed/index.js";
+import border, { borderColor, borderTop, borderBottom, borderStart, borderEnd, borderInline, borderBlock, } from "./resolvers/border/index.js";
+import height from "./resolvers/height/index.js";
+import inset, { insetTop, insetBottom, insetStart, insetEnd, insetInline, insetBlock, } from "./resolvers/inset/index.js";
+import justify from "./resolvers/justify/index.js";
+import maxHeight from "./resolvers/maxHeight/index.js";
+import maxWidth from "./resolvers/maxWidth/index.js";
+import minHeight from "./resolvers/minHeight/index.js";
+import minWidth from "./resolvers/minWidth/index.js";
+import position from "./resolvers/position/index.js";
+import radius from "./resolvers/radius/index.js";
+import textAlign from "./resolvers/textAlign/index.js";
+import width from "./resolvers/width/index.js";
+import padding, { paddingTop, paddingBottom, paddingStart, paddingEnd, paddingInline, paddingBlock, } from "./resolvers/padding/index.js";
+const mixinMap = {
+    align,
+    aspectRatio,
+    bleed,
+    border,
+    borderTop,
+    borderBottom,
+    borderStart,
+    borderEnd,
+    borderInline,
+    borderBlock,
+    borderColor,
+    height,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd,
+    paddingInline,
+    paddingBlock,
+    inset,
+    insetTop,
+    insetBottom,
+    insetStart,
+    insetEnd,
+    insetInline,
+    insetBlock,
+    justify,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    position,
+    radius,
+    textAlign,
+    width,
+};
+export const resolveMixin = (mixin) => {
+    const output = {
+        variables: {},
+        classNames: [],
+    };
+    const entries = Object.entries(mixin);
+    entries.forEach(([key, value]) => {
+        const mixin = mixinMap[key];
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - too complex to resolve inference without manual typing every method
+        const result = mixin(value);
+        if (result.variables)
+            output.variables = { ...output.variables, ...result.variables };
+        if (result.classNames)
+            output.classNames.push(result.classNames);
+    });
+    return output;
+};

package/dist/styles/resolvers/align/align.css

@@ -0,0 +1 @@
+[style*="--rs-align-s:"]{align-items:var(--rs-align)!important;--rs-align-s: ;--rs-align-m:var(--rs-align-s);--rs-align-l:var(--rs-align-m);--rs-align-xl:var(--rs-align-l);--rs-align:var(--rs-align-s)}@media (--rs-viewport-m ){[style*="--rs-align-s:"]{--rs-align:var(--rs-align-m)}}@media (--rs-viewport-l ){[style*="--rs-align-s:"]{--rs-align:var(--rs-align-l)}}@media (--rs-viewport-xl ){[style*="--rs-align-s:"]{--rs-align:var(--rs-align-xl)}}

package/dist/styles/resolvers/align/index.d.ts

@@ -0,0 +1,4 @@
+import * as T from "../../types";
+import "./align.css";
+declare const align: T.StyleResolver<T.Align>;
+export default align;

package/dist/styles/resolvers/align/index.js

@@ -0,0 +1,10 @@
+import { responsiveVariables } from "../../../utilities/props.js";
+import "./align.css";
+const align = (value) => {
+    if (!value)
+        return {};
+    return {
+        variables: responsiveVariables("--rs-align", value),
+    };
+};
+export default align;

package/dist/styles/resolvers/aspectRatio/aspectRatio.css

@@ -0,0 +1 @@
+[style*="--rs-ratio-s:"]{--rs-ratio-s:0;--rs-ratio-m:var(--rs-ratio-s);--rs-ratio-l:var(--rs-ratio-m);--rs-ratio-xl:var(--rs-ratio-l);--rs-ratio:var(--rs-ratio-s)}[style*="--rs-ratio-s:"]:empty,[style*="--rs-ratio-s:"]:not(:empty)>*{aspect-ratio:var(--rs-ratio)}[style*="--rs-ratio-s:"]>img{object-fit:cover}@media (--rs-viewport-m ){[style*="--rs-ratio-s:"]{--rs-ratio:var(--rs-ratio-m)}}@media (--rs-viewport-l ){[style*="--rs-ratio-s:"]{--rs-ratio:var(--rs-ratio-l)}}@media (--rs-viewport-xl ){[style*="--rs-ratio-s:"]{--rs-ratio:var(--rs-ratio-xl)}}

package/dist/styles/resolvers/aspectRatio/index.d.ts

@@ -0,0 +1,4 @@
+import * as T from "../../types";
+import "./aspectRatio.css";
+declare const aspectRatio: T.StyleResolver<T.AspectRatio>;
+export default aspectRatio;