reshaped 1.0.1 → 2.2.0

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

@@ -0,0 +1,304 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import { useToast } from "../index.js";
+import Button from "../../Button/index.js";
+import View from "../../View/index.js";
+import Image from "../../Image/index.js";
+import Text from "../../Text/index.js";
+import Dismissible from "../../Dismissible/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default { title: "Components/Toast" };
+const Base = () => {
+    const toast = useToast();
+    return (<Button onClick={() => {
+            const id = toast.show({
+                icon: IconZap,
+                title: "Hey!",
+                text: "Event completed",
+                actionsSlot: [
+                    <Button onClick={() => toast.hide(id)}>Undo</Button>,
+                    <Button onClick={() => toast.hide(id)}>Show</Button>,
+                ],
+            });
+        }}>
+			Show toast
+		</Button>);
+};
+export const base = () => (<Example>
+		<Example.Item title="title, children, icon, actions">
+			<Base />
+		</Example.Item>
+	</Example>);
+const Size = () => {
+    const toast = useToast();
+    const props = {
+        icon: IconZap,
+        title: "Hey!",
+        text: "Event completed",
+        actionsSlot: [<Button>Action</Button>],
+    };
+    return (<Example>
+			<Example.Item title="size: small">
+				<Button onClick={() => {
+            toast.show(Object.assign({}, props));
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="size: medium">
+				<Button onClick={() => {
+            toast.show(Object.assign(Object.assign({}, props), { size: "medium" }));
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="large">
+				<Button onClick={() => {
+            toast.show(Object.assign(Object.assign({}, props), { size: "large" }));
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+		</Example>);
+};
+export const size = () => <Size />;
+const Position = () => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="position: bottom-start">
+				<Button onClick={() => {
+            const id = toast.show({
+                text: "Event completed",
+                position: "bottom-start",
+                actionsSlot: <Button onClick={() => toast.hide(id)}>Close</Button>,
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: bottom">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                position: "bottom",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: bottom-end">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                position: "bottom-end",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: top-start">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                position: "top-start",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: top">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                position: "top",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: top-end">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                position: "top-end",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+		</Example>);
+};
+export const position = () => <Position />;
+const Color = () => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="color: inverted">
+				<Button onClick={() => {
+            const id = toast.show({
+                text: "Event completed",
+                color: "inverted",
+                title: "Hey!",
+                icon: IconZap,
+                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="color: neutral">
+				<Button onClick={() => {
+            const id = toast.show({
+                text: "Event completed",
+                color: "neutral",
+                title: "Hey!",
+                icon: IconZap,
+                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="color: primary">
+				<Button onClick={() => {
+            const id = toast.show({
+                text: "Event completed",
+                color: "primary",
+                title: "Hey!",
+                icon: IconZap,
+                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="color: positive">
+				<Button onClick={() => {
+            const id = toast.show({
+                text: "Event completed",
+                color: "positive",
+                title: "Hey!",
+                icon: IconZap,
+                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<Button onClick={() => {
+            const id = toast.show({
+                text: "Event completed",
+                color: "critical",
+                title: "Hey!",
+                icon: IconZap,
+                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+		</Example>);
+};
+export const color = () => <Color />;
+const Timeout = () => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="timeout: short">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                timeout: "short",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="timeout: long">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                timeout: "long",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="timeout: 0">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                timeout: 0,
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+		</Example>);
+};
+export const timeout = () => <Timeout />;
+const Expanded = () => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="Custom width coming from Reshaped provider for bottom-start">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                position: "bottom-start",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+		</Example>);
+};
+export const regionOptions = () => <Expanded />;
+const Slots = () => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="always expanded, promotion banner">
+				<Button onClick={() => {
+            const id = toast.show({
+                children: (<View gap={3} direction="row">
+									<View aspectRatio={1}>
+										<Image height="100px" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" borderRadius="medium"/>
+									</View>
+									<View.Item grow>
+										<View gap={1}>
+											<Dismissible closeAriaLabel="Close notification" onClose={() => toast.hide(id)}>
+												<Text variant="body-2" weight="bold">
+													Look at this gradient!
+												</Text>
+											</Dismissible>
+											<Text variant="body-3">
+												If you start using more gradients, your product will become even more
+												succesful.
+											</Text>
+										</View>
+									</View.Item>
+								</View>),
+                color: "neutral",
+                position: "bottom-start",
+                timeout: 0,
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+		</Example>);
+};
+export const slots = () => <Slots />;
+const Multiline = () => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="Multiline, should support dynamic height">
+				<Button onClick={() => {
+            toast.show({
+                text: "Very long event completed notification message",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+		</Example>);
+};
+export const edgeCases = () => <Multiline />;

package/components/Toast/useToast.d.ts

@@ -0,0 +1,5 @@
+declare const useToast: () => {
+    show: (toast: import("./Toast.types").Props & import("./Toast.types").ShowOptions) => string;
+    hide: (id: string) => void;
+};
+export default useToast;

package/components/Toast/useToast.js

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

package/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Tooltip.types";
+declare const Tooltip: (props: T.Props) => React.JSX.Element;
+export default Tooltip;

package/components/Tooltip/Tooltip.js

@@ -0,0 +1,15 @@
+"use client";
+import React from "react";
+import Theme from "../Theme/index.js";
+import Text from "../Text/index.js";
+import Flyout from "../_private/Flyout/index.js";
+import s from "./Tooltip.module.css";
+const Tooltip = (props) => {
+    const { id, text, children, onOpen, onClose, position = "bottom", active } = props;
+    return (React.createElement(Flyout, { id: id, active: active, position: position, onOpen: onOpen, onClose: onClose, triggerType: "hover" },
+        React.createElement(Flyout.Trigger, null, children),
+        React.createElement(Flyout.Content, null,
+            React.createElement(Theme, { colorMode: "inverted" },
+                React.createElement(Text, { variant: "caption-1", className: s.root }, text)))));
+};
+export default Tooltip;

package/components/Tooltip/Tooltip.module.css

@@ -0,0 +1 @@
+.root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);max-width:360px;padding:var(--rs-unit-x1) var(--rs-unit-x2)}

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { FlyoutProps, FlyoutTriggerProps } from "../_private/Flyout";
+export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active"> & Pick<FlyoutTriggerProps, "children"> & {
+    text: React.ReactNode;
+};

package/components/Tooltip/Tooltip.types.js

@@ -0,0 +1 @@
+export {};

package/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Tooltip";
+export type { Props as TooltipProps } from "./Tooltip.types";

package/components/Tooltip/index.js

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const position: () => React.JSX.Element;
+export declare const controlled: () => React.JSX.Element;

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

@@ -0,0 +1,58 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Tooltip from "../index.js";
+import Button from "../../Button/index.js";
+import View from "../../View/index.js";
+export default { title: "Components/Tooltip" };
+const Demo = (props) => {
+    const { position } = props, rest = __rest(props, ["position"]);
+    return (<Tooltip text={position} position={position} {...rest}>
+			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
+		</Tooltip>);
+};
+export const position = () => (<Example>
+		<Example.Item title="position: bottom-start">
+			<Demo position="bottom-start"/>
+		</Example.Item>
+		<Example.Item title="position: bottom">
+			<Demo position="bottom"/>
+		</Example.Item>
+		<Example.Item title="position: bottom-end">
+			<Demo position="bottom-end"/>
+		</Example.Item>
+		<Example.Item title="position: top-start">
+			<Demo position="top-start"/>
+		</Example.Item>
+		<Example.Item title="position: top">
+			<Demo position="top"/>
+		</Example.Item>
+		<Example.Item title="position: top-end">
+			<Demo position="top-end"/>
+		</Example.Item>
+
+		<Example.Item title="position: start">
+			<View align="end">
+				<Demo position="start"/>
+			</View>
+		</Example.Item>
+
+		<Example.Item title="position: end">
+			<Demo position="end"/>
+		</Example.Item>
+	</Example>);
+export const controlled = () => (<Example>
+		<Example.Item title="active, controlled, position: bottom">
+			<Demo position="bottom" active/>
+		</Example.Item>
+	</Example>);

package/components/View/View.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type * as T from "./View.types";
+declare const View: {
+    <As extends keyof JSX.IntrinsicElements = "div">(props: T.Props<As>): React.JSX.Element;
+    Item: <As_1 extends keyof JSX.IntrinsicElements = "div">(props: T.ItemProps<As_1>) => React.JSX.Element;
+};
+export default View;

package/components/View/View.js

@@ -0,0 +1,135 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+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 getPositionStyles from "../../styles/position/index.js";
+import getInsetStyles from "../../styles/inset/index.js";
+import getAspectRatioStyles from "../../styles/aspectRatio/index.js";
+const ViewItem = (props) => {
+    const { columns, grow, gapBefore, as: TagName = "div", order, children, className, attributes, } = props;
+    const itemClassNames = classNames(s.item, className, gapBefore === "auto" && s["item--gap-auto"], gapBefore !== undefined && s["item--gap-before"], ...responsiveClassNames(s, "item--grow", grow), ...responsiveClassNames(s, "item--columns", columns));
+    const itemVariables = Object.assign(Object.assign({}, responsiveVariables("--rs-view-item-order", order)), responsiveVariables("--rs-view-item-gap-before", gapBefore));
+    return (React.createElement(TagName, Object.assign({}, attributes, { style: Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), itemVariables), className: itemClassNames }), children));
+};
+const View = (props) => {
+    const { 
+    /**
+     * Layout props
+     */
+    align, justify, wrap, gap, height, width, aspectRatio, maxHeight, maxWidth, padding, paddingInline, paddingBlock, paddingBottom, paddingEnd, paddingStart, paddingTop, bleed, 
+    /**
+     * Style props
+     * */
+    animated, backgroundColor, borderColor, borderRadius, shadow, textAlign, overflow, position = "relative", inset, insetTop, insetBottom, insetStart, insetEnd, zIndex, 
+    /**
+     * Item prop
+     */
+    grow, 
+    /**
+     * Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+     * It still resolves the attributes correctly based on the tag
+     */
+    as: TagName = "div", children, divided, className, attributes, } = props;
+    const 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 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);
+    let renderedItemIndex = 0;
+    // If wrap is not defined, it can be set based on item grow and split usage
+    let nowrap;
+    const renderDivider = ({ className, key }) => {
+        const dividerClassName = classNames(s.divider, className);
+        let isDividerVertical = false;
+        if (typeof direction === "string" && direction.startsWith("row")) {
+            isDividerVertical = true;
+        }
+        else if (direction) {
+            const viewports = Object.keys(direction);
+            isDividerVertical = viewports.reduce((acc, viewport) => {
+                const viewportDirection = direction[viewport];
+                if (!viewportDirection)
+                    return acc;
+                return Object.assign(Object.assign({}, acc), { [viewport]: viewportDirection.startsWith("row") });
+            }, {});
+        }
+        return (React.createElement("div", { className: dividerClassName, key: `${key}-divider` },
+            React.createElement(Divider, { vertical: isDividerVertical, blank: true })));
+    };
+    const renderItem = ({ className, child, index }) => {
+        var _a, _b;
+        const isItem = child.type === ViewItem;
+        const key = child.key || index;
+        const dividerElement = !!index && divided && renderDivider({ className, key });
+        let itemElement;
+        if (isItem) {
+            itemElement = React.cloneElement(child, {
+                className: classNames(className, child.props.className),
+            });
+        }
+        else if (className || !React.isValidElement(child)) {
+            itemElement = (React.createElement("div", { className: className, key: key }, child));
+        }
+        else {
+            itemElement = child;
+        }
+        // Passing grow here because it's responsive and nowrap should follow it
+        if (isItem && ((_a = child.props) === null || _a === void 0 ? void 0 : _a.grow))
+            nowrap = child.props.grow;
+        if (isItem && ((_b = child.props) === null || _b === void 0 ? void 0 : _b.gap) === "auto")
+            nowrap = true;
+        return [dividerElement, itemElement];
+    };
+    const formattedChildren = React.Children.map(children, (child, index) => {
+        if (!child)
+            return null;
+        // Ignore the indices of the items that rendered nothing
+        const renderedIndex = renderedItemIndex;
+        renderedItemIndex += 1;
+        if (child.type === Hidden && typeof child.props.children !== "function") {
+            const _a = child.props, { children: hiddenChild } = _a, hiddenProps = __rest(_a, ["children"]);
+            const key = child.key || index;
+            return (React.createElement(Hidden, Object.assign({}, hiddenProps, { key: key }), (className) => renderItem({ className, child: hiddenChild, index: renderedIndex })));
+        }
+        return renderItem({ child, index: renderedIndex });
+    });
+    // Classnames and attributes are written here so we can assign nowrap to the root element based on the children
+    const rootClassNames = classNames(s.root, className, radiusStyles === null || radiusStyles === void 0 ? void 0 : radiusStyles.classNames, positionStyles === null || positionStyles === void 0 ? void 0 : positionStyles.classNames, bleedStyles === null || bleedStyles === void 0 ? void 0 : bleedStyles.classNames, widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.classNames, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, aspectRatioStyles === null || aspectRatioStyles === void 0 ? void 0 : aspectRatioStyles.classNames, maxWidthStyles === null || maxWidthStyles === void 0 ? void 0 : maxWidthStyles.classNames, maxHeightStyles === null || maxHeightStyles === void 0 ? void 0 : maxHeightStyles.classNames, insetStyles === null || insetStyles === void 0 ? void 0 : insetStyles.classNames, insetTopStyles === null || insetTopStyles === void 0 ? void 0 : insetTopStyles.classNames, insetBottomStyles === null || insetBottomStyles === void 0 ? void 0 : insetBottomStyles.classNames, insetStartStyles === null || insetStartStyles === void 0 ? void 0 : insetStartStyles.classNames, insetEndStyles === null || insetEndStyles === void 0 ? void 0 : insetEndStyles.classNames, textAlign && s[`--align-text-${textAlign}`], backgroundColor && s[`--bg-${backgroundColor}`], borderColor && s[`--bd-${borderColor}`], borderColor && s["--bd"], shadow && s[`--shadow-${shadow}`], overflow && s[`--overflow-${overflow}`], animated && s["--animated"], divided && s["--divided"], (padding !== undefined || paddingInline !== undefined || paddingBlock !== undefined) &&
+        s["--padding"], paddingBottom !== undefined && s["--padding-bottom"], paddingEnd !== undefined && s["--padding-end"], paddingStart !== undefined && s["--padding-start"], paddingTop !== undefined && s["--padding-top"], (isFlex || nowrap) && s["--flex"], ...responsiveClassNames(s, "--direction", direction), ...responsiveClassNames(s, "--align", align), ...responsiveClassNames(s, "--justify", justify), 
+    // 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
+    ...responsiveClassNames(s, "item--grow", grow));
+    const rootVariables = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : 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 === null || bleedStyles === void 0 ? void 0 : bleedStyles.variables), widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.variables), heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables), aspectRatioStyles === null || aspectRatioStyles === void 0 ? void 0 : aspectRatioStyles.variables), maxWidthStyles === null || maxWidthStyles === void 0 ? void 0 : maxWidthStyles.variables), maxHeightStyles === null || maxHeightStyles === void 0 ? void 0 : maxHeightStyles.variables), insetStyles === null || insetStyles === void 0 ? void 0 : insetStyles.variables), insetTopStyles === null || insetTopStyles === void 0 ? void 0 : insetTopStyles.variables), insetBottomStyles === null || insetBottomStyles === void 0 ? void 0 : insetBottomStyles.variables), insetStartStyles === null || insetStartStyles === void 0 ? void 0 : insetStartStyles.variables), insetEndStyles === null || insetEndStyles === void 0 ? void 0 : insetEndStyles.variables), (zIndex ? { "--rs-view-z": zIndex } : {}));
+    return (React.createElement(TagName, Object.assign({}, attributes, { className: rootClassNames, style: rootVariables }), formattedChildren));
+};
+View.Item = ViewItem;
+export default View;

package/components/View/View.module.css

@@ -0,0 +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);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))) calc(var(--rs-unit-x1) * var(--rs-view-p-horizontal, var(--rs-view-p-start)))}.--padding-top{padding-top:calc(var(--rs-unit-x1) * var(--rs-view-p-top))}.--padding-bottom{padding-bottom:calc(var(--rs-unit-x1) * var(--rs-view-p-bottom))}.--padding-start{padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-view-p-start))}.--padding-end{padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-view-p-end))}.--animated{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:background-color,color,border-color}.--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-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-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-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)}.--bd{border:1px solid var(--rs-view-border-color)}.--bd-neutral-faded{--rs-view-border-color:var(--rs-color-border-neutral-faded)}.--bd-neutral{--rs-view-border-color:var(--rs-color-border-neutral)}.--bd-positive{--rs-view-border-color:var(--rs-color-border-positive)}.--bd-positive-faded{--rs-view-border-color:var(--rs-color-border-positive-faded)}.--bd-critical{--rs-view-border-color:var(--rs-color-border-critical)}.--bd-critical-faded{--rs-view-border-color:var(--rs-color-border-critical-faded)}.--bd-primary{--rs-view-border-color:var(--rs-color-border-primary)}.--bd-primary-faded{--rs-view-border-color:var(--rs-color-border-primary-faded)}.--bd-transparent{--rs-view-border-color:transparent}.--overflow-hidden{overflow:hidden}.--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 (min-width:660px){.--nowrap-false--m,.--wrap-true--m{flex-wrap:wrap}.--nowrap-true--m,.--wrap-false--m{flex-wrap:nowrap}}@media (min-width:900px){.--nowrap-false--l,.--wrap-true--l{flex-wrap:wrap}.--nowrap-true--l,.--wrap-false--l{flex-wrap:nowrap}}@media (min-width:1280px){.--nowrap-false--xl,.--wrap-true--xl{flex-wrap:wrap}.--nowrap-true--xl,.--wrap-false--xl{flex-wrap:nowrap}}.--align-start{align-items:flex-start!important}.--align-end{align-items:flex-end!important}.--align-center{align-items:center!important}.--align-stretch{align-items:stretch!important}.--align-baseline{align-items:baseline!important}.--justify-start{justify-content:flex-start}.--justify-end{justify-content:flex-end}.--justify-center{justify-content:center}.divider{align-self:stretch}.item--grow{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.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 (min-width:660px){.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-1--m,.item--columns-2--m{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--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-3--m,.item--columns-4--m{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--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-5--m,.item--columns-6--m{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--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-7--m,.item--columns-8--m{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--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,.item--columns-9--m{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--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-11--m,.item--columns-12--m{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--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 (min-width:900px){.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-1--l,.item--columns-2--l{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--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-3--l,.item--columns-4--l{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--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-5--l,.item--columns-6--l{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--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-7--l,.item--columns-8--l{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--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,.item--columns-9--l{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--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-11--l,.item--columns-12--l{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--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 (min-width:1280px){.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-1--xl,.item--columns-2--xl{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--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-3--xl,.item--columns-4--xl{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--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-5--xl,.item--columns-6--xl{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--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-7--xl,.item--columns-8--xl{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--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,.item--columns-9--xl{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--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-11--xl,.item--columns-12--xl{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--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}}.--padding{--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)}.--padding-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)}.--padding-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)}.--padding-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)}.--padding-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)}.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 (min-width:660px){.--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}.--align-start--m{align-items:flex-start!important}.--align-end--m{align-items:flex-end!important}.--align-center--m{align-items:center!important}.--align-stretch--m{align-items:stretch!important}.--align-baseline--m{align-items:baseline!important}.--justify-start--m{justify-content:flex-start}.--justify-end--m{justify-content:flex-end}.--justify-center--m{justify-content:center}.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}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-m);--rs-view-p-horizontal:var(--rs-view-p-horizontal-m)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-m)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-m)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-m)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-m)}.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 (min-width:900px){.--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}.--align-start--l{align-items:flex-start!important}.--align-end--l{align-items:flex-end!important}.--align-center--l{align-items:center!important}.--align-stretch--l{align-items:stretch!important}.--align-baseline--l{align-items:baseline!important}.--justify-start--l{justify-content:flex-start}.--justify-end--l{justify-content:flex-end}.--justify-center--l{justify-content:center}.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}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-l);--rs-view-p-horizontal:var(--rs-view-p-horizontal-l)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-l)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-l)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-l)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-l)}.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 (min-width:1280px){.--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}.--align-start--xl{align-items:flex-start!important}.--align-end--xl{align-items:flex-end!important}.--align-center--xl{align-items:center!important}.--align-stretch--xl{align-items:stretch!important}.--align-baseline--xl{align-items:baseline!important}.--justify-start--xl{justify-content:flex-start}.--justify-end--xl{justify-content:flex-end}.--justify-center--xl{justify-content:center}.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}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-xl);--rs-view-p-horizontal:var(--rs-view-p-horizontal-xl)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-xl)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-xl)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-xl)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-xl)}.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)}}