reshaped 1.0.1 → 2.1.0

package/components/Toast/ToastRegion.js

@@ -0,0 +1,63 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import { focusableSelector } from "../../utilities/a11y.js";
+import ToastContainer from "./ToastContainer.js";
+import ToastContext from "./Toast.context.js";
+import s from "./Toast.module.css";
+const ToastRegion = (props) => {
+    const { position } = props;
+    const { queues, options } = React.useContext(ToastContext);
+    const [inspecting, setInspecting] = React.useState(false);
+    const ignoreHoverRef = React.useRef(false);
+    const rootRef = React.useRef(null);
+    const queue = queues[position];
+    const { width, expanded } = (options === null || options === void 0 ? void 0 : options[position]) || {};
+    const regionClassNames = classNames(s.region, s[`region--position-${position}`]);
+    const filteredLength = queue.filter((item) => item.status === "entered").length;
+    let hiddenCount = 0;
+    // If touch event was triggered – ignore hover events
+    const handleTouchStart = () => {
+        ignoreHoverRef.current = true;
+    };
+    const handleClick = (e) => {
+        let currentEl = e.target;
+        let isFocusable = false;
+        while (currentEl && currentEl !== rootRef.current && !isFocusable) {
+            isFocusable = currentEl.matches(focusableSelector);
+            currentEl = currentEl.parentElement;
+        }
+        // Change inspecting mode when clicking on static content
+        if (!isFocusable) {
+            setInspecting((prevInspecting) => !prevInspecting);
+        }
+        // Click is called last so we reset our hover events ignore
+        ignoreHoverRef.current = false;
+    };
+    const handleMouseEnter = () => {
+        if (ignoreHoverRef.current)
+            return;
+        setInspecting(true);
+    };
+    const handleMouseLeave = () => {
+        if (ignoreHoverRef.current)
+            return;
+        setInspecting(false);
+    };
+    React.useEffect(() => {
+        if (queue.length === 0)
+            setInspecting(false);
+    }, [queue.length]);
+    if (!queue.length)
+        return null;
+    return (
+    // We only use onClick for touch devices since touchend is not supported
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    React.createElement("ul", { role: "region", "aria-live": "polite", className: regionClassNames, ref: rootRef, onTouchStart: handleTouchStart, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { width } }, queue.map((data, index) => {
+        const visibleIndex = filteredLength - index + hiddenCount - 1;
+        if (data.status !== "entered")
+            hiddenCount += 1;
+        return (React.createElement(ToastContainer, Object.assign({ key: data.id }, data, { index: visibleIndex, inspected: inspecting || !!expanded })));
+    })));
+};
+export default ToastRegion;

package/components/Toast/index.d.ts

@@ -0,0 +1,3 @@
+export { default as useToast } from "./useToast";
+export { default as ToastProvider } from "./ToastProvider";
+export type { Props as ToastProps, ProviderProps as ToastProviderProps } from "./Toast.types";

package/components/Toast/index.js

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

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

@@ -0,0 +1,13 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: () => React.JSX.Element;
+export declare const size: () => React.JSX.Element;
+export declare const position: () => React.JSX.Element;
+export declare const color: () => React.JSX.Element;
+export declare const timeout: () => React.JSX.Element;
+export declare const regionOptions: () => React.JSX.Element;
+export declare const slots: () => React.JSX.Element;
+export declare const edgeCases: () => React.JSX.Element;

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;