reshaped 2.7.5-beta.0 → 2.8.1

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,6 @@
+import type * as T from "./Timeline.types";
+declare const Timeline: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    Item: (props: T.ItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Timeline;

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import s from "./Timeline.module.css";
+const TimelineItem = (props) => {
+    const { children, markerSlot, className, attributes } = props;
+    const hasMarker = markerSlot !== null;
+    const itemClassNames = classNames(s.item, !hasMarker && s["item--full-width"], className);
+    return (_jsxs(View, { as: "li", direction: "row", align: "stretch", gap: 3, attributes: attributes, className: itemClassNames, children: [hasMarker && _jsx("span", { className: s.marker, children: markerSlot }), _jsx(View.Item, { grow: true, children: children })] }));
+};
+const Timeline = (props) => {
+    const { children, className, attributes } = props;
+    const rootClassNames = classNames(className);
+    return (_jsx("ul", Object.assign({}, attributes, { className: rootClassNames, children: React.Children.map(children, (child, index) => {
+            return (child === null || child === void 0 ? void 0 : child.type) === TimelineItem ? (child) : (_jsx(TimelineItem, { children: child }, index));
+        }) })));
+};
+Timeline.Item = TimelineItem;
+export default Timeline;

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

@@ -0,0 +1,13 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"ul", Props>;
+};
+export type ItemProps = {
+    markerSlot?: React.ReactNode | null;
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"li", ItemProps>;
+};

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

@@ -0,0 +1,5 @@
+import type * as T from "./Toast.types";
+declare const Toast: (props: T.Props & {
+    collapsed: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Toast;

package/dist/components/Toast/Toast.js

@@ -0,0 +1,44 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import View from "../View/index.js";
+import Button from "../Button/index.js";
+import Icon from "../Icon/index.js";
+import Theme from "../Theme/index.js";
+import Text from "../Text/index.js";
+import s from "./Toast.module.css";
+const Toast = (props) => {
+    const { size = "small", text, children, color = "inverted", icon, title, actionsSlot, startSlot, collapsed, className, attributes, } = props;
+    let backgroundColor = color === "inverted" || color === "neutral" ? "elevation-overlay" : color;
+    if (color === "neutral")
+        backgroundColor = collapsed ? "neutral" : "elevation-overlay";
+    const borderColor = color === "neutral" ? "neutral-faded" : "transparent";
+    const textTagName = size === "small" ? "span" : "div";
+    const isLarge = size === "large";
+    let actions = [];
+    if (actionsSlot) {
+        actions = Array.isArray(actionsSlot) ? actionsSlot : [actionsSlot];
+    }
+    const textContent = (title || text) && (_jsxs(_Fragment, { children: [title && (_jsxs(Text, { variant: "body-3", weight: "bold", as: textTagName, children: [title, " "] })), _jsx(Text, { variant: "body-3", as: textTagName, children: text })] }));
+    const toastNode = (_jsxs(View, { backgroundColor: backgroundColor, borderColor: borderColor, padding: 4, borderRadius: "medium", animated: true, direction: "row", gap: 3, align: isLarge ? "start" : "center", className: [s.toast, className], attributes: attributes, children: [icon && _jsx(Icon, { size: 5, svg: icon, className: s.icon }), startSlot && !icon && _jsx(View.Item, { children: startSlot }), _jsx(View.Item, { grow: true, children: _jsxs(View, { direction: isLarge ? "column" : "row", align: isLarge ? "start" : "center", gap: 3, children: [_jsx(View.Item, { grow: true, children: (textContent && children) || size !== "small" ? (_jsxs(View, { gap: 0.5, children: [textContent, children && _jsx(View, { gap: 3, children: children })] })) : (textContent || children) }), actions.length && (_jsx(View, { direction: "row", align: "center", gap: 2, children: actions.map((slot, index) => {
+                                const isPrimary = size === "large" ? index === 0 : index === actions.length - 1;
+                                const primaryColor = color === "neutral" || color === "inverted" ? "neutral" : "white";
+                                const defaultProps = {
+                                    variant: isPrimary ? "solid" : "ghost",
+                                    size: "small",
+                                    color: isPrimary ? primaryColor : "inherit",
+                                    elevated: color !== "neutral",
+                                };
+                                if (slot.type === Button) {
+                                    return _createElement(Button, Object.assign({}, defaultProps, slot.props, { key: index }));
+                                }
+                                else {
+                                    return slot;
+                                }
+                            }) }))] }) })] }));
+    if (color === "inverted") {
+        return _jsx(Theme, { colorMode: "inverted", children: toastNode });
+    }
+    return toastNode;
+};
+export default Toast;

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

@@ -0,0 +1,78 @@
+import type React from "react";
+import type { IconProps } from "../Icon";
+import type * as G from "../../types/global";
+export type Status = "entering" | "entered" | "exited";
+export type TimeoutAlias = "short" | "long";
+export type Timeout = TimeoutAlias | number;
+export type Position = "top" | "top-end" | "top-start" | "bottom" | "bottom-start" | "bottom-end";
+export type Props = {
+    size?: "small" | "medium" | "large";
+    icon?: IconProps["svg"];
+    startSlot?: React.ReactNode;
+    title?: React.ReactNode;
+    text?: React.ReactNode;
+    children?: React.ReactNode;
+    actionsSlot?: React.ReactNode;
+    color?: "neutral" | "primary" | "critical" | "positive" | "inverted";
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};
+export type ProviderProps = {
+    children?: React.ReactNode;
+    options?: Partial<Record<RegionProps["position"], {
+        width?: string;
+        expanded?: boolean;
+    }>>;
+};
+export type RegionProps = {
+    position: Position;
+};
+export type ContainerProps = {
+    id: string;
+    toastProps: Props & {
+        timeout?: Timeout;
+    };
+    index: number;
+    status?: "entering" | "entered" | "exiting";
+    inspected: boolean;
+};
+export type Context = {
+    options?: ProviderProps["options"];
+    queues: Record<RegionProps["position"], Array<ContainerProps>>;
+    add: (toast: Props & ShowOptions) => string;
+    show: (id: string) => void;
+    hide: (id: string) => void;
+    remove: (id: string) => void;
+};
+export type ShowOptions = {
+    timeout?: Timeout;
+    position?: Position;
+};
+type AddAction = {
+    type: "add";
+    payload: {
+        toastProps: Props & ShowOptions;
+        id: string;
+    };
+};
+type ShowAction = {
+    type: "show";
+    payload: {
+        id: string;
+    };
+};
+type HideAction = {
+    type: "hide";
+    payload: {
+        id: string;
+    };
+};
+type RemoveAction = {
+    type: "remove";
+    payload: {
+        id: string;
+    };
+};
+type Action = AddAction | ShowAction | HideAction | RemoveAction;
+export type Reducer = (state: Context["queues"], action: Action) => Context["queues"];
+export {};

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

@@ -0,0 +1,3 @@
+import type * as T from "./Toast.types";
+declare const ToastContainer: (props: T.ContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default ToastContainer;

package/dist/components/Toast/ToastContainer.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import { trapFocus, isKeyboardMode } from "../../utilities/a11y.js";
+import Toast from "./Toast.js";
+import ToastContext from "./Toast.context.js";
+import { timeouts } from "./Toast.constants.js";
+import s from "./Toast.module.css";
+const ToastContainer = (props) => {
+    const { toastProps, id, status, inspected, index } = props;
+    const { timeout = "short" } = toastProps;
+    const { show, hide, remove } = React.useContext(ToastContext);
+    const [toastHeight, setToastHeight] = React.useState();
+    const timeoutRef = React.useRef();
+    const resizingRef = React.useRef(false);
+    const trapFocusRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const visible = status === "entered";
+    const containerClassNames = classNames(s.container, visible && s[`container--visible`], index === 0 && s[`container--index-${index}`], !inspected && (index === 1 || index === 2) && s[`container--index-${index}`], !inspected && index >= 3 && s["container--index-overflow"]);
+    const stopTimer = React.useCallback(() => {
+        if (!timeoutRef.current)
+            return;
+        clearTimeout(timeoutRef.current);
+    }, []);
+    const startTimer = React.useCallback(() => {
+        stopTimer();
+        const timeoutValue = typeof timeout === "string" ? timeouts[timeout] : timeout;
+        if (timeout === 0)
+            return;
+        timeoutRef.current = setTimeout(() => {
+            hide(id);
+        }, timeoutValue !== null && timeoutValue !== void 0 ? timeoutValue : timeouts.short);
+    }, [hide, id, timeout, stopTimer]);
+    const handleTransitionEnd = (e) => {
+        if (e.propertyName !== "height")
+            return;
+        if (visible)
+            return;
+        remove(id);
+    };
+    React.useEffect(() => {
+        if (!visible)
+            return;
+        if (inspected) {
+            stopTimer();
+        }
+        else {
+            startTimer();
+        }
+    }, [inspected, startTimer, stopTimer, visible]);
+    React.useEffect(() => {
+        if (wrapperRef.current) {
+            setToastHeight(wrapperRef.current.clientHeight);
+        }
+        show(id);
+        startTimer();
+    }, [show, id, startTimer]);
+    React.useEffect(() => {
+        if (!wrapperRef.current)
+            return;
+        if (visible) {
+            trapFocusRef.current = trapFocus(wrapperRef.current, {
+                includeTrigger: true,
+                mode: "content-menu",
+            });
+        }
+        else if (trapFocusRef.current && isKeyboardMode()) {
+            trapFocusRef.current();
+            trapFocusRef.current = null;
+        }
+    }, [visible]);
+    React.useEffect(() => {
+        if (!visible || index > 0)
+            return;
+        const handleResize = () => {
+            resizingRef.current = true;
+            onNextFrame(() => {
+                resizingRef.current = false;
+            });
+            if (wrapperRef.current) {
+                setToastHeight(wrapperRef.current.clientHeight);
+            }
+        };
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [visible, index]);
+    return (_jsx("li", { className: containerClassNames, style: {
+            // Height + padding + borders
+            height: status === "entered" ? `calc(${toastHeight}px + var(--rs-unit-x2) + 2px)` : 0,
+            // Disable transition when height of the toast can change
+            transitionDuration: resizingRef.current ? "0s" : undefined,
+        }, onTransitionEnd: handleTransitionEnd, onFocus: stopTimer, onBlur: startTimer, children: _jsx("span", { className: s.wrapper, children: _jsx(Toast, Object.assign({}, toastProps, { collapsed: index > 0 && !inspected, attributes: Object.assign(Object.assign({}, toastProps.attributes), { ref: wrapperRef }) })) }) }));
+};
+export default ToastContainer;

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

@@ -0,0 +1,3 @@
+import * as T from "./Toast.types";
+declare const ToastProvider: (props: T.ProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default ToastProvider;

package/dist/components/Toast/ToastProvider.js

@@ -0,0 +1,81 @@
+"use client";
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import ToastContext from "./Toast.context.js";
+import ToastRegion from "./ToastRegion.js";
+import { positions, defaultContextData } from "./Toast.constants.js";
+let counter = 0;
+const generateId = () => `__rs-toast-${counter++}`;
+const toastReducer = (state, action) => {
+    let nextState;
+    switch (action.type) {
+        case "add":
+            const _a = action.payload.toastProps || {}, { position = "bottom-end" } = _a, toastProps = __rest(_a, ["position"]);
+            return Object.assign(Object.assign({}, state), { [position]: [...state[position], { id: action.payload.id, toastProps, status: "entering" }] });
+        case "show":
+            const { id: showId } = action.payload;
+            nextState = Object.assign({}, state);
+            positions.forEach((position) => {
+                nextState[position] = nextState[position].map((item) => {
+                    if (item.status !== "entering")
+                        return item;
+                    return item.id === showId ? Object.assign(Object.assign({}, item), { status: "entered" }) : item;
+                });
+            });
+            return nextState;
+        case "hide":
+            const { id: hideId } = action.payload;
+            nextState = Object.assign({}, state);
+            positions.forEach((position) => {
+                nextState[position] = nextState[position].map((item) => item.id === hideId ? Object.assign(Object.assign({}, item), { status: "exiting" }) : item);
+            });
+            return nextState;
+        case "remove":
+            const { id: removeId } = action.payload;
+            nextState = Object.assign({}, state);
+            positions.forEach((position) => {
+                nextState[position] = nextState[position].filter((item) => item.id !== removeId);
+            });
+            return nextState;
+    }
+};
+const ToastProvider = (props) => {
+    const { children, options } = props;
+    const [data, dispatch] = React.useReducer(toastReducer, defaultContextData.queues);
+    const add = React.useCallback((toastProps) => {
+        const id = generateId();
+        dispatch({ type: "add", payload: { toastProps, id } });
+        return id;
+    }, []);
+    const show = React.useCallback((id) => {
+        dispatch({ type: "show", payload: { id } });
+    }, []);
+    const hide = React.useCallback((id) => {
+        dispatch({ type: "hide", payload: { id } });
+    }, []);
+    const remove = React.useCallback((id) => {
+        dispatch({ type: "remove", payload: { id } });
+    }, []);
+    const value = React.useMemo(() => ({
+        queues: data,
+        add,
+        show,
+        hide,
+        remove,
+        inspecting: false,
+        options,
+    }), [data, show, hide, add, remove, options]);
+    return (_jsxs(ToastContext.Provider, { value: value, children: [children, positions.map((position) => (_jsx(ToastRegion, { position: position }, position)))] }));
+};
+export default ToastProvider;

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

@@ -0,0 +1,3 @@
+import * as T from "./Toast.types";
+declare const ToastRegion: (props: T.RegionProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ToastRegion;

package/dist/components/Toast/ToastRegion.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+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
+    _jsx("ul", { role: "region", "aria-live": "polite", className: regionClassNames, ref: rootRef, onTouchStart: handleTouchStart, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { width }, children: queue.map((data, index) => {
+            const visibleIndex = filteredLength - index + hiddenCount - 1;
+            if (data.status !== "entered")
+                hiddenCount += 1;
+            return (_jsx(ToastContainer, Object.assign({}, data, { index: visibleIndex, inspected: inspecting || !!expanded }), data.id));
+        }) }));
+};
+export default ToastRegion;

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

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

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs(Flyout, { id: id, active: active, position: position, onOpen: onOpen, onClose: onClose, triggerType: "hover", children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
+};
+export default Tooltip;

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

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

package/dist/components/View/View.js

@@ -0,0 +1,143 @@
+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 { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 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";
+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"], columns && s["item--columns"], ...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 (_jsx(TagName, Object.assign({}, attributes, { style: Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), itemVariables), className: itemClassNames, children: children })));
+};
+const View = (props) => {
+    const { 
+    /**
+     * Layout props
+     */
+    align, justify, wrap, gap, height, width, aspectRatio, maxHeight, maxWidth, minHeight, minWidth, 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;
+    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);
+    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 (_jsx("div", { className: dividerClassName, children: _jsx(Divider, { vertical: isDividerVertical, blank: true }) }, `${key}-divider`));
+    };
+    const renderItem = ({ className, child, index }) => {
+        var _a, _b, _c;
+        const isItem = child.type === ViewItem;
+        const isView = child.type === View;
+        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 = (_jsx("div", { className: className, children: child }, key));
+        }
+        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;
+        if ((isItem || isView) && ((_c = child.props) === null || _c === void 0 ? void 0 : _c.grow))
+            isFlex = 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 (_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, minWidthStyles === null || minWidthStyles === void 0 ? void 0 : minWidthStyles.classNames, minHeightStyles === null || minHeightStyles === void 0 ? void 0 : minHeightStyles.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(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), minWidthStyles === null || minWidthStyles === void 0 ? void 0 : minWidthStyles.variables), minHeightStyles === null || minHeightStyles === void 0 ? void 0 : minHeightStyles.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 (_jsx(TagName, Object.assign({}, attributes, { className: rootClassNames, style: rootVariables, children: formattedChildren })));
+};
+View.Item = ViewItem;
+export default View;