reshaped 3.3.10 → 3.3.12

package/dist/components/TextField/tests/TextField.test.stories.js

@@ -0,0 +1,99 @@
+import { expect, fn, userEvent } from "@storybook/test";
+import TextField from "../index.js";
+export default {
+    title: "Components/TextField/tests",
+    component: TextField,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/text-area",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "base",
+    render: () => <TextField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input).toHaveAccessibleName("Label");
+    },
+};
+export const placeholder = {
+    name: "placeholder",
+    render: () => (<TextField name="test-name" placeholder="Placeholder" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("");
+        expect(input).toHaveAttribute("placeholder", "Placeholder");
+    },
+};
+export const id = {
+    name: "id",
+    render: () => (<TextField name="test-name" id="test-id" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveAttribute("id", "test-id");
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => <TextField name="test-name" disabled inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toBeDisabled();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<TextField name="test-name" defaultValue="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("value");
+        input.focus();
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "value2",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("value2");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<TextField name="test-name" value="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("value");
+        input.focus();
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "value2",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("value");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<TextField className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.getByRole("textbox");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};

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

@@ -22,10 +22,10 @@ export type Props = {
 };
 export type PrivateProps = Props & {
     scoped?: boolean;
-    scopeRef?: React.RefObject<HTMLDivElement>;
+    scopeRef?: React.RefObject<HTMLDivElement | null>;
 };
 export type GlobalColorModeProps = {
     defaultMode: ColorMode;
-    scopeRef?: React.RefObject<HTMLDivElement>;
+    scopeRef?: React.RefObject<HTMLDivElement | null>;
     children?: React.ReactNode;
 };

package/dist/components/Theme/tests/Theme.test.stories.d.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").ThemeProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const light: StoryObj;
+export declare const dark: StoryObj;
+export declare const inherited: StoryObj;
+export declare const inverted: StoryObj;
+export declare const controlled: StoryObj;
+export declare const uncontrolled: StoryObj;
+export declare const disabledTransition: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

package/dist/components/Theme/tests/Theme.test.stories.js

@@ -0,0 +1,133 @@
+import { expect, userEvent } from "@storybook/test";
+import Card from "../../Card/index.js";
+import Button from "../../Button/index.js";
+import View from "../../View/index.js";
+import MenuItem from "../../MenuItem/index.js";
+import Theme, { useTheme } from "../index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
+    title: "Utilities/Theme/tests",
+    component: Theme,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/theme",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const light = {
+    name: "light",
+    render: () => (<Theme name="reshaped" colorMode="light">
+			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
+		</Theme>),
+    play: ({ canvas }) => {
+        const root = canvas.getByTestId("test-id").parentNode;
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "light");
+    },
+};
+export const dark = {
+    name: "dark",
+    render: () => (<Theme name="reshaped" colorMode="dark">
+			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
+		</Theme>),
+    play: ({ canvas }) => {
+        const root = canvas.getByTestId("test-id").parentNode;
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+    },
+};
+export const inherited = {
+    name: "inherited",
+    render: () => (<Theme name="reshaped">
+			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
+		</Theme>),
+    play: ({ canvas }) => {
+        const root = canvas.getByTestId("test-id").parentNode;
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        // Our storybook setup uses dark by default
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+    },
+};
+export const inverted = {
+    name: "inverted",
+    render: () => (<Theme name="reshaped" colorMode="inverted">
+			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
+		</Theme>),
+    play: ({ canvas }) => {
+        const root = canvas.getByTestId("test-id").parentNode;
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "light");
+    },
+};
+export const controlled = {
+    name: "controlled",
+    render: () => {
+        const Internal = () => {
+            const { setTheme, theme } = useTheme();
+            return (<Button color="primary" onClick={() => setTheme("slate")}>
+					Switch to slate
+				</Button>);
+        };
+        return (<div data-testid="root">
+				<Theme name="reshaped">
+					<Internal />
+				</Theme>
+			</div>);
+    },
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const trigger = canvas.getAllByRole("button")[0];
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+        await userEvent.click(trigger);
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+    },
+};
+export const uncontrolled = {
+    name: "uncontrolled",
+    render: () => {
+        const Internal = () => {
+            const { setTheme } = useTheme();
+            return (<Button color="primary" onClick={() => setTheme("slate")}>
+					Switch to slate
+				</Button>);
+        };
+        return (<div data-testid="root">
+				<Theme defaultName="reshaped">
+					<Internal />
+				</Theme>
+			</div>);
+    },
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const trigger = canvas.getAllByRole("button")[0];
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+        await userEvent.click(trigger);
+        expect(root).toHaveAttribute("data-rs-theme", "slate");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+    },
+};
+export const disabledTransition = {
+    name: "disabled transitions",
+    render: () => {
+        const { invertColorMode } = useTheme();
+        return (<Example>
+				<Example.Item title="should have no transitions while switching color mode">
+					<View gap={3}>
+						<Button onClick={invertColorMode}>Invert mode</Button>
+
+						<MenuItem selected>Test transition</MenuItem>
+
+						<Card>Default card</Card>
+
+						<Theme colorMode="inverted">
+							<Card>Inverted card</Card>
+						</Theme>
+					</View>
+				</Example.Item>
+			</Example>);
+    },
+};

package/dist/components/Timeline/tests/Timeline.test.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").TimelineProps): import("react").JSX.Element;
+        Item: (props: import("./..").TimelineItemProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const className: StoryObj;

package/dist/components/Timeline/tests/Timeline.test.stories.js

@@ -0,0 +1,32 @@
+import { expect } from "@storybook/test";
+import Timeline from "../index.js";
+export default {
+    title: "Components/Timeline/tests",
+    component: Timeline,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/timeline",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Timeline className="test-classname" attributes={{ id: "test-id" }}>
+				<Timeline.Item className="test-item-classname" attributes={{ id: "test-item-id" }}>
+					Content
+				</Timeline.Item>
+				<Timeline.Item>Content</Timeline.Item>
+			</Timeline>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const items = canvas.getAllByRole("listitem");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(items).toHaveLength(2);
+        expect(items[0]).toHaveClass("test-item-classname");
+        expect(items[0]).toHaveAttribute("id", "test-item-id");
+    },
+};

package/dist/components/Toast/ToastContainer.js

@@ -13,7 +13,7 @@ const ToastContainer = (props) => {
     const { timeout = "short" } = toastProps;
     const { show, hide, remove } = React.useContext(ToastContext);
     const [toastHeight, setToastHeight] = React.useState();
-    const timeoutRef = React.useRef();
+    const timeoutRef = React.useRef(null);
     const resizingRef = React.useRef(false);
     const wrapperRef = React.useRef(null);
     const visible = status === "entered";

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

@@ -0,0 +1,16 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const base: StoryObj;
+export declare const nested: StoryObj;
+export declare const className: StoryObj;

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

@@ -0,0 +1,101 @@
+import { expect, within, userEvent, waitFor } from "@storybook/test";
+import { useToast, ToastProvider } from "../index.js";
+import Button from "../../Button/index.js";
+export default {
+    title: "Components/Toast/tests",
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/toast",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const base = {
+    name: "base",
+    render: () => {
+        const toast = useToast();
+        return (<Button onClick={() => {
+                const id = toast.show({
+                    title: "Title",
+                    text: "Text",
+                    children: "Children",
+                    startSlot: "Slot",
+                    actionsSlot: (<Button attributes={{ "data-testid": "trigger-id" }} onClick={() => toast.hide(id)}>
+								Trigger
+							</Button>),
+                });
+            }}>
+				Show toast
+			</Button>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        const title = canvas.getByText("Title");
+        const text = canvas.getByText("Text");
+        const children = canvas.getByText("Children");
+        const slot = canvas.getByText("Slot");
+        const action = canvas.getByTestId("trigger-id");
+        expect(title).toBeInTheDocument();
+        expect(text).toBeInTheDocument();
+        expect(children).toBeInTheDocument();
+        expect(slot).toBeInTheDocument();
+        expect(action).toBeInTheDocument();
+        await userEvent.click(action);
+        await waitFor(() => {
+            expect(title).not.toBeInTheDocument();
+        });
+    },
+};
+const NestedDemo = () => {
+    const toast = useToast();
+    return (<Button onClick={() => {
+            toast.show({
+                text: "Content",
+            });
+        }}>
+			Show toast
+		</Button>);
+};
+export const nested = {
+    name: "ToastProvider",
+    render: () => {
+        return (<div data-testid="test-container-id">
+				<ToastProvider>
+					<NestedDemo />
+				</ToastProvider>
+			</div>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        const container = canvas.getByTestId("test-container-id");
+        const toast = within(container).getByText("Content");
+        expect(toast).toBeInTheDocument();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => {
+        const toast = useToast();
+        return (<Button onClick={() => {
+                const id = toast.show({
+                    text: "Content",
+                    attributes: { "data-testid": "test-id" },
+                    className: "test-classname",
+                });
+            }}>
+				Show toast
+			</Button>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        const toast = canvas.getByTestId("test-id");
+        expect(toast).toBeInTheDocument();
+        expect(toast).toHaveClass("test-classname");
+    },
+};

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

@@ -1,3 +1,3 @@
 import type * as T from "./Tooltip.types";
-declare const Tooltip: (props: T.Props) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
+declare const Tooltip: (props: T.Props) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
 export default Tooltip;

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

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: (props: import("./..").TooltipProps) => string | number | boolean | Iterable<import("react").ReactNode> | import("react").JSX.Element | null | undefined;
+    component: (props: import("./..").TooltipProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
     parameters: {
         iframe: {
             url: string;

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

@@ -4,7 +4,6 @@ import Popover from "../../Popover/index.js";
 import Button from "../../Button/index.js";
 import View from "../../View/index.js";
 import useResponsiveClientValue from "../../../hooks/useResponsiveClientValue.js";
-import Actionable from "../../Actionable/index.js";
 export default {
     title: "Components/Tooltip",
     component: Tooltip,
@@ -109,19 +108,6 @@ export const edgeCases = () => (<Example>
 			</Tooltip>
 		</Example.Item>
 
-		<Example.Item title="tooltip with popover on different elements">
-			<Tooltip text="Tooltip" position="top">
-				{(attributes) => (<Actionable attributes={attributes} as="span">
-						<Popover position="bottom">
-							<Popover.Trigger>
-								{(popoverAttributes) => (<Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>)}
-							</Popover.Trigger>
-							<Popover.Content>Popover</Popover.Content>
-						</Popover>
-					</Actionable>)}
-			</Tooltip>
-		</Example.Item>
-
 		<Example.Item title="nested popovers inside a tooltip">
 			<View direction="row" gap={2}>
 				<Tooltip position="top" text="Hello">

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

@@ -0,0 +1,19 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").TooltipProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const defaultActive: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;

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

@@ -0,0 +1,40 @@
+import { expect, fn, userEvent, within, waitFor } from "@storybook/test";
+import Tooltip from "../index.js";
+import Button from "../../Button/index.js";
+export default {
+    title: "Components/Tooltip/tests",
+    component: Tooltip,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/tooltip",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const defaultActive = {
+    name: "uncontrolled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Tooltip text="Content" onOpen={args.handleOpen} onClose={args.handleClose}>
+			{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+		</Tooltip>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.hover(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        const item = canvas.getByText("Content");
+        expect(item).toBeInTheDocument();
+        await userEvent.unhover(trigger);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith();
+            expect(item).not.toBeInTheDocument();
+        });
+    },
+};

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

@@ -1,7 +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.ReactNode;
-    Item: <As extends keyof JSX.IntrinsicElements = "div">(props: T.ItemProps<As>) => React.ReactNode;
+    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): React.ReactNode;
+    Item: <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>) => React.ReactNode;
 };
 export default View;

package/dist/components/View/View.js

@@ -124,22 +124,22 @@ const View = (props) => {
     const formattedChildren = React.Children.map(children, (child, index) => {
         if (!child)
             return null;
+        const usedIndex = renderedItemIndex;
         renderedItemIndex += 1;
         if (child.type === Hidden) {
             const { children: hiddenChild, ...hiddenProps } = child.props;
             const key = child.key || index;
-            return (_createElement(Hidden, { ...hiddenProps, key: key }, renderItem({ child: hiddenChild, index: renderedItemIndex })));
+            return (_createElement(Hidden, { ...hiddenProps, key: key }, renderItem({ child: hiddenChild, index: usedIndex })));
         }
         if (child.type === React.Fragment && React.Children.count(child.props.children) > 1) {
             return child.props.children.map((child) => {
                 if (!child)
                     return null;
-                const index = renderedItemIndex;
                 renderedItemIndex += 1;
-                return renderItem({ child, index });
+                return renderItem({ child, index: renderedItemIndex });
             });
         }
-        return renderItem({ child, index: renderedItemIndex });
+        return renderItem({ child, index: usedIndex });
     });
     // Classnames and attributes are written here so we can assign nowrap to the root element based on the children
     const rootClassNames = classNames(s.root, className, radiusStyles?.classNames, bleedStyles?.classNames, widthStyles?.classNames, heightStyles?.classNames, maxWidthStyles?.classNames, maxHeightStyles?.classNames, minWidthStyles?.classNames, minHeightStyles?.classNames, borderStyles?.classNames, backgroundColor && s[`--bg-${backgroundColor}`], shadow && s[`--shadow-${shadow}`], overflow && s[`--overflow-${overflow}`], animated && s["--animated"], divided && s["--divided"], (padding !== undefined || paddingInline !== undefined || paddingBlock !== undefined) &&

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

@@ -3,7 +3,7 @@ import type * as G from "../../types/global";
 import type * as TStyles from "../../styles/types";
 type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
 export type Direction = "row" | "column" | "row-reverse" | "column-reverse";
-export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     children?: React.ReactNode;
     as?: TagName;
     divided?: boolean;
@@ -44,7 +44,7 @@ export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
     className?: G.ClassName;
     attributes?: G.Attributes<TagName>;
 } & Pick<ItemProps, "grow">;
-export type ItemProps<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     order?: G.Responsive<number>;
     columns?: G.Responsive<Columns>;
     grow?: G.Responsive<boolean>;