@uipath/apollo-react 4.0.0 → 4.1.1

package/dist/canvas/layouts/Grid.stories.js

@@ -1,960 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Grid, SimpleGrid } from "./Grid.js";
-const Box = ({ children, ...props })=>/*#__PURE__*/ jsx("div", {
-        ...props,
-        style: {
-            color: 'var(--color-foreground)',
-            backgroundColor: 'var(--color-background-secondary)',
-            padding: '16px',
-            borderRadius: '4px',
-            border: '1px solid var(--color-border)',
-            minWidth: '60px',
-            minHeight: '60px',
-            textAlign: 'center',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            ...props.style
-        },
-        children: children
-    });
-const meta = {
-    title: 'Core/Layouts/Grid',
-    component: Grid,
-    parameters: {
-        layout: 'fullscreen'
-    },
-    argTypes: {
-        templateColumns: {
-            control: {
-                type: 'text'
-            },
-            description: 'Grid template columns (e.g., "1fr 1fr" or "repeat(3, 1fr)")'
-        },
-        templateRows: {
-            control: {
-                type: 'text'
-            },
-            description: 'Grid template rows'
-        },
-        templateAreas: {
-            control: {
-                type: 'text'
-            },
-            description: 'Grid template areas'
-        },
-        autoFlow: {
-            control: {
-                type: 'select'
-            },
-            options: [
-                'row',
-                'column',
-                'dense',
-                'row dense',
-                'column dense'
-            ]
-        },
-        gap: {
-            control: {
-                type: 'number'
-            },
-            description: 'Gap between grid items'
-        },
-        rowGap: {
-            control: {
-                type: 'number'
-            },
-            description: 'Gap between rows'
-        },
-        columnGap: {
-            control: {
-                type: 'number'
-            },
-            description: 'Gap between columns'
-        },
-        alignItems: {
-            control: {
-                type: 'select'
-            },
-            options: [
-                'start',
-                'end',
-                'center',
-                'stretch'
-            ]
-        },
-        justifyItems: {
-            control: {
-                type: 'select'
-            },
-            options: [
-                'start',
-                'end',
-                'center',
-                'stretch'
-            ]
-        },
-        alignContent: {
-            control: {
-                type: 'select'
-            },
-            options: [
-                'start',
-                'end',
-                'center',
-                'stretch',
-                'between',
-                'around',
-                'evenly'
-            ]
-        },
-        justifyContent: {
-            control: {
-                type: 'select'
-            },
-            options: [
-                'start',
-                'end',
-                'center',
-                'stretch',
-                'between',
-                'around',
-                'evenly'
-            ]
-        },
-        w: {
-            control: {
-                type: 'text'
-            },
-            description: 'Width'
-        },
-        h: {
-            control: {
-                type: 'text'
-            },
-            description: 'Height'
-        },
-        p: {
-            control: {
-                type: 'number'
-            },
-            description: 'Padding (all sides)'
-        },
-        m: {
-            control: {
-                type: 'number'
-            },
-            description: 'Margin (all sides)'
-        }
-    },
-    decorators: [
-        (Story)=>/*#__PURE__*/ jsx("div", {
-                style: {
-                    padding: '16px',
-                    color: 'var(--color-foreground)',
-                    backgroundColor: 'var(--color-background)'
-                },
-                children: /*#__PURE__*/ jsx(Story, {})
-            })
-    ]
-};
-const Grid_stories = meta;
-const Basic = {
-    render: ()=>/*#__PURE__*/ jsxs(Grid, {
-            templateColumns: "repeat(3, 1fr)",
-            gap: 16,
-            children: [
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Item 1"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Item 2"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Item 3"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Item 4"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Item 5"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Item 6"
-                })
-            ]
-        })
-};
-const SimpleGridComponent = {
-    render: ()=>/*#__PURE__*/ jsxs("div", {
-            children: [
-                /*#__PURE__*/ jsx("h3", {
-                    children: "2 Columns (default)"
-                }),
-                /*#__PURE__*/ jsxs(SimpleGrid, {
-                    gap: 16,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Item 1"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Item 2"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Item 3"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Item 4"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("h3", {
-                    children: "4 Columns"
-                }),
-                /*#__PURE__*/ jsxs(SimpleGrid, {
-                    columns: 4,
-                    gap: 16,
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Item 1"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Item 2"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Item 3"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Item 4"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Item 5"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Item 6"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Item 7"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Item 8"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const TemplateColumns = {
-    render: ()=>/*#__PURE__*/ jsxs("div", {
-            children: [
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Equal Columns: repeat(3, 1fr)"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Equal"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Equal"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Equal"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Mixed Sizes: 200px 1fr 100px"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "200px 1fr 100px",
-                    gap: 16,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "200px"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Flexible"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "100px"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Fractional: 1fr 2fr 1fr"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "1fr 2fr 1fr",
-                    gap: 16,
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "1fr"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "2fr (double)"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "1fr"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const TemplateAreas = {
-    render: ()=>/*#__PURE__*/ jsxs(Grid, {
-            templateAreas: `
-                "header header header"
-                "sidebar content content"
-                "footer footer footer"
-            `,
-            templateColumns: "200px 1fr 1fr",
-            templateRows: "60px 1fr 60px",
-            gap: 16,
-            h: 400,
-            children: [
-                /*#__PURE__*/ jsx(Box, {
-                    style: {
-                        gridArea: 'header'
-                    },
-                    children: "Header"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    style: {
-                        gridArea: 'sidebar'
-                    },
-                    children: "Sidebar"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    style: {
-                        gridArea: 'content'
-                    },
-                    children: "Content"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    style: {
-                        gridArea: 'footer'
-                    },
-                    children: "Footer"
-                })
-            ]
-        })
-};
-const Gap = {
-    render: ()=>/*#__PURE__*/ jsxs("div", {
-            children: [
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Gap: 8px"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 8,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "A"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "B"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "C"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "D"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "E"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "F"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Gap: 24px"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 24,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "A"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "B"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "C"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "D"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "E"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "F"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Row Gap: 8px, Column Gap: 32px"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    rowGap: 8,
-                    columnGap: 32,
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "A"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "B"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "C"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "D"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "E"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "F"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const Alignment = {
-    render: ()=>/*#__PURE__*/ jsxs("div", {
-            children: [
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Align Items: start"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    alignItems: "start",
-                    h: 120,
-                    mb: 32,
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                height: '40px'
-                            },
-                            children: "Short"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                height: '80px'
-                            },
-                            children: "Tall"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                height: '60px'
-                            },
-                            children: "Medium"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Align Items: center"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    alignItems: "center",
-                    h: 120,
-                    mb: 32,
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                height: '40px'
-                            },
-                            children: "Short"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                height: '80px'
-                            },
-                            children: "Tall"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                height: '60px'
-                            },
-                            children: "Medium"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Align Items: stretch"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    alignItems: "stretch",
-                    h: 120,
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Stretched"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Stretched"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Stretched"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const Justification = {
-    render: ()=>/*#__PURE__*/ jsxs("div", {
-            children: [
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Justify Items: start"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    justifyItems: "start",
-                    mb: 32,
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                width: '60px'
-                            },
-                            children: "A"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                width: '80px'
-                            },
-                            children: "B"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                width: '70px'
-                            },
-                            children: "C"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Justify Items: center"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    justifyItems: "center",
-                    mb: 32,
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                width: '60px'
-                            },
-                            children: "A"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                width: '80px'
-                            },
-                            children: "B"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                width: '70px'
-                            },
-                            children: "C"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Justify Items: end"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    justifyItems: "end",
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                width: '60px'
-                            },
-                            children: "A"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                width: '80px'
-                            },
-                            children: "B"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                width: '70px'
-                            },
-                            children: "C"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const AutoFlow = {
-    render: ()=>/*#__PURE__*/ jsxs("div", {
-            children: [
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Auto Flow: row (default)"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(3, 80px)",
-                    autoFlow: "row",
-                    gap: 8,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "1"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "2"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "3"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "4"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "5"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "6"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "7"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Auto Flow: column"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateRows: "repeat(3, 80px)",
-                    autoFlow: "column",
-                    gap: 8,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "1"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "2"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "3"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "4"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "5"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "6"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "7"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Auto Flow: dense"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(3, 80px)",
-                    autoFlow: "dense",
-                    gap: 8,
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "1"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            style: {
-                                gridColumn: 'span 2'
-                            },
-                            children: "2 (spans 2)"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "3"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "4"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "5"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const ResponsiveLayout = {
-    render: ()=>/*#__PURE__*/ jsxs(Grid, {
-            templateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-            gap: 16,
-            style: {
-                resize: 'horizontal',
-                overflow: 'auto',
-                border: '1px dashed var(--color-border)'
-            },
-            children: [
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Responsive"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Card"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Layout"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Resize me!"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Auto-fit"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Minmax"
-                })
-            ]
-        })
-};
-const Spacing = {
-    render: ()=>/*#__PURE__*/ jsxs("div", {
-            children: [
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Padding and Margin"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(2, 1fr)",
-                    gap: 16,
-                    p: 24,
-                    m: 16,
-                    style: {
-                        backgroundColor: 'var(--color-border)',
-                        border: '2px dashed var(--color-border)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Padded"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Grid"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Directional Spacing"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(2, 1fr)",
-                    gap: 8,
-                    pt: 32,
-                    pb: 16,
-                    px: 24,
-                    mt: 16,
-                    style: {
-                        backgroundColor: 'var(--color-border)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Custom"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Spacing"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const Sizing = {
-    render: ()=>/*#__PURE__*/ jsxs("div", {
-            children: [
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Fixed Dimensions"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    w: 400,
-                    h: 200,
-                    mb: 32,
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)',
-                        border: '1px solid var(--color-border)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Fixed"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Width"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Height"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("h3", {
-                    children: "Min/Max Constraints"
-                }),
-                /*#__PURE__*/ jsxs(Grid, {
-                    templateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
-                    gap: 16,
-                    minW: 200,
-                    maxW: 600,
-                    minH: 100,
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)',
-                        border: '1px solid var(--color-border)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Min/Max"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Constrained"
-                        }),
-                        /*#__PURE__*/ jsx(Box, {
-                            children: "Grid"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const ComplexLayout = {
-    render: ()=>/*#__PURE__*/ jsxs(Grid, {
-            templateColumns: "repeat(4, 1fr)",
-            templateRows: "repeat(4, 80px)",
-            gap: 8,
-            p: 16,
-            children: [
-                /*#__PURE__*/ jsx(Box, {
-                    style: {
-                        gridColumn: '1 / 3',
-                        gridRow: '1 / 3'
-                    },
-                    children: "Spans 2x2"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    style: {
-                        gridColumn: '2 / 5'
-                    },
-                    children: "Spans 3 columns"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    style: {
-                        gridRow: '3 / 5'
-                    },
-                    children: "Spans 2 rows"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Regular"
-                })
-            ]
-        })
-};
-const Interactive = {
-    args: {
-        templateColumns: 'repeat(3, 1fr)',
-        gap: 16,
-        alignItems: 'stretch',
-        justifyItems: 'stretch'
-    },
-    render: (args)=>/*#__PURE__*/ jsxs(Grid, {
-            ...args,
-            children: [
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Item 1"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Item 2"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Item 3"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Item 4"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Item 5"
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    children: "Item 6"
-                })
-            ]
-        })
-};
-export { Alignment, AutoFlow, Basic, ComplexLayout, Gap, Interactive, Justification, ResponsiveLayout, SimpleGridComponent, Sizing, Spacing, TemplateAreas, TemplateColumns, Grid_stories as default };