@uipath/apollo-react 4.0.0 → 4.1.1

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

@@ -1,1033 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    Spacing: ()=>Spacing,
-    default: ()=>Grid_stories,
-    AutoFlow: ()=>AutoFlow,
-    Interactive: ()=>Interactive,
-    Justification: ()=>Justification,
-    ResponsiveLayout: ()=>ResponsiveLayout,
-    SimpleGridComponent: ()=>SimpleGridComponent,
-    TemplateColumns: ()=>TemplateColumns,
-    Alignment: ()=>Alignment,
-    Basic: ()=>Basic,
-    Sizing: ()=>Sizing,
-    ComplexLayout: ()=>ComplexLayout,
-    Gap: ()=>Gap,
-    TemplateAreas: ()=>TemplateAreas
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_Grid_cjs_namespaceObject = require("./Grid.cjs");
-const Box = ({ children, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.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: external_Grid_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                style: {
-                    padding: '16px',
-                    color: 'var(--color-foreground)',
-                    backgroundColor: 'var(--color-background)'
-                },
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Story, {})
-            })
-    ]
-};
-const Grid_stories = meta;
-const Basic = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-            templateColumns: "repeat(3, 1fr)",
-            gap: 16,
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Item 1"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Item 2"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Item 3"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Item 4"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Item 5"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Item 6"
-                })
-            ]
-        })
-};
-const SimpleGridComponent = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "2 Columns (default)"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.SimpleGrid, {
-                    gap: 16,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Item 1"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Item 2"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Item 3"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Item 4"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "4 Columns"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.SimpleGrid, {
-                    columns: 4,
-                    gap: 16,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Item 1"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Item 2"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Item 3"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Item 4"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Item 5"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Item 6"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Item 7"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Item 8"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const TemplateColumns = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Equal Columns: repeat(3, 1fr)"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Equal"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Equal"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Equal"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Mixed Sizes: 200px 1fr 100px"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "200px 1fr 100px",
-                    gap: 16,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "200px"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Flexible"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "100px"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Fractional: 1fr 2fr 1fr"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "1fr 2fr 1fr",
-                    gap: 16,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "1fr"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "2fr (double)"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "1fr"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const TemplateAreas = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    style: {
-                        gridArea: 'header'
-                    },
-                    children: "Header"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    style: {
-                        gridArea: 'sidebar'
-                    },
-                    children: "Sidebar"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    style: {
-                        gridArea: 'content'
-                    },
-                    children: "Content"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    style: {
-                        gridArea: 'footer'
-                    },
-                    children: "Footer"
-                })
-            ]
-        })
-};
-const Gap = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Gap: 8px"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 8,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "A"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "B"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "C"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "D"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "E"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "F"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Gap: 24px"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 24,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "A"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "B"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "C"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "D"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "E"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "F"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Row Gap: 8px, Column Gap: 32px"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    rowGap: 8,
-                    columnGap: 32,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "A"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "B"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "C"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "D"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "E"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "F"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const Alignment = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Align Items: start"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    alignItems: "start",
-                    h: 120,
-                    mb: 32,
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)'
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                height: '40px'
-                            },
-                            children: "Short"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                height: '80px'
-                            },
-                            children: "Tall"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                height: '60px'
-                            },
-                            children: "Medium"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Align Items: center"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    alignItems: "center",
-                    h: 120,
-                    mb: 32,
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)'
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                height: '40px'
-                            },
-                            children: "Short"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                height: '80px'
-                            },
-                            children: "Tall"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                height: '60px'
-                            },
-                            children: "Medium"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Align Items: stretch"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    alignItems: "stretch",
-                    h: 120,
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)'
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Stretched"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Stretched"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Stretched"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const Justification = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Justify Items: start"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    justifyItems: "start",
-                    mb: 32,
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)'
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                width: '60px'
-                            },
-                            children: "A"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                width: '80px'
-                            },
-                            children: "B"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                width: '70px'
-                            },
-                            children: "C"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Justify Items: center"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    justifyItems: "center",
-                    mb: 32,
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)'
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                width: '60px'
-                            },
-                            children: "A"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                width: '80px'
-                            },
-                            children: "B"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                width: '70px'
-                            },
-                            children: "C"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Justify Items: end"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(3, 1fr)",
-                    gap: 16,
-                    justifyItems: "end",
-                    style: {
-                        backgroundColor: 'var(--color-background-secondary)'
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                width: '60px'
-                            },
-                            children: "A"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                width: '80px'
-                            },
-                            children: "B"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                width: '70px'
-                            },
-                            children: "C"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const AutoFlow = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Auto Flow: row (default)"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(3, 80px)",
-                    autoFlow: "row",
-                    gap: 8,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "1"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "2"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "3"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "4"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "5"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "6"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "7"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Auto Flow: column"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateRows: "repeat(3, 80px)",
-                    autoFlow: "column",
-                    gap: 8,
-                    mb: 32,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "1"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "2"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "3"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "4"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "5"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "6"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "7"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Auto Flow: dense"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(3, 80px)",
-                    autoFlow: "dense",
-                    gap: 8,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "1"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            style: {
-                                gridColumn: 'span 2'
-                            },
-                            children: "2 (spans 2)"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "3"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "4"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "5"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const ResponsiveLayout = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-            templateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-            gap: 16,
-            style: {
-                resize: 'horizontal',
-                overflow: 'auto',
-                border: '1px dashed var(--color-border)'
-            },
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Responsive"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Card"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Layout"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Resize me!"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Auto-fit"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Minmax"
-                })
-            ]
-        })
-};
-const Spacing = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Padding and Margin"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(2, 1fr)",
-                    gap: 16,
-                    p: 24,
-                    m: 16,
-                    style: {
-                        backgroundColor: 'var(--color-border)',
-                        border: '2px dashed var(--color-border)'
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Padded"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Grid"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Directional Spacing"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-                    templateColumns: "repeat(2, 1fr)",
-                    gap: 8,
-                    pt: 32,
-                    pb: 16,
-                    px: 24,
-                    mt: 16,
-                    style: {
-                        backgroundColor: 'var(--color-border)'
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Custom"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Spacing"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const Sizing = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Fixed Dimensions"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Fixed"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Width"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Height"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
-                    children: "Min/Max Constraints"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Min/Max"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Constrained"
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                            children: "Grid"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-const ComplexLayout = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-            templateColumns: "repeat(4, 1fr)",
-            templateRows: "repeat(4, 80px)",
-            gap: 8,
-            p: 16,
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    style: {
-                        gridColumn: '1 / 3',
-                        gridRow: '1 / 3'
-                    },
-                    children: "Spans 2x2"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    style: {
-                        gridColumn: '2 / 5'
-                    },
-                    children: "Spans 3 columns"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    style: {
-                        gridRow: '3 / 5'
-                    },
-                    children: "Spans 2 rows"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Regular"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Regular"
-                })
-            ]
-        })
-};
-const Interactive = {
-    args: {
-        templateColumns: 'repeat(3, 1fr)',
-        gap: 16,
-        alignItems: 'stretch',
-        justifyItems: 'stretch'
-    },
-    render: (args)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_Grid_cjs_namespaceObject.Grid, {
-            ...args,
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Item 1"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Item 2"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Item 3"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Item 4"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Item 5"
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box, {
-                    children: "Item 6"
-                })
-            ]
-        })
-};
-exports.Alignment = __webpack_exports__.Alignment;
-exports.AutoFlow = __webpack_exports__.AutoFlow;
-exports.Basic = __webpack_exports__.Basic;
-exports.ComplexLayout = __webpack_exports__.ComplexLayout;
-exports.Gap = __webpack_exports__.Gap;
-exports.Interactive = __webpack_exports__.Interactive;
-exports.Justification = __webpack_exports__.Justification;
-exports.ResponsiveLayout = __webpack_exports__.ResponsiveLayout;
-exports.SimpleGridComponent = __webpack_exports__.SimpleGridComponent;
-exports.Sizing = __webpack_exports__.Sizing;
-exports.Spacing = __webpack_exports__.Spacing;
-exports.TemplateAreas = __webpack_exports__.TemplateAreas;
-exports.TemplateColumns = __webpack_exports__.TemplateColumns;
-exports["default"] = __webpack_exports__["default"];
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "Alignment",
-    "AutoFlow",
-    "Basic",
-    "ComplexLayout",
-    "Gap",
-    "Interactive",
-    "Justification",
-    "ResponsiveLayout",
-    "SimpleGridComponent",
-    "Sizing",
-    "Spacing",
-    "TemplateAreas",
-    "TemplateColumns",
-    "default"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});