@ryuzaki13/react-foundation-ui 3.10.0 → 3.11.0

package/storybook-static/assets/Grid.stories-ClZzgSfZ.js

@@ -1,495 +0,0 @@
-import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-CU98mtpe.js";import{n as i,t as a}from"./Grid-0NnWfTJ7.js";var o=t({Alignment:()=>h,AutoFlow:()=>m,BasicGrid:()=>p,ComplexTemplates:()=>v,Gaps:()=>g,GridAreas:()=>y,InlineGrid:()=>x,ItemPlacement:()=>b,PredefinedVariants:()=>_,RealWorld:()=>S,Responsive:()=>C,__namedExportsOrder:()=>w,default:()=>f});function s({children:e,index:t=0,style:n}){return(0,c.jsx)(a.Item,{style:{...u.item,backgroundColor:d(t),...n},children:e})}var c,l,u,d,f,p,m,h,g,_,v,y,b,x,S,C,w;function T(){return(T=e((()=>{n(),i(),c=r(),{useArgs:l}=__STORYBOOK_MODULE_PREVIEW_API__,u={container:{border:`2px dashed var(--border-0)`,padding:`2em`,marginBlock:`1em`},item:{textAlign:`center`,fontWeight:`bold`,color:`white`,minHeight:`5em`,minWidth:`10em`,display:`flex`,alignItems:`center`,justifyContent:`center`},itemColors:[`#ff6b6b`,`#4ecdc4`,`#45b7d1`,`#96ceb4`,`#feca57`,`#ff9ff3`,`#54a0ff`,`#5f27cd`]},d=e=>u.itemColors[e%u.itemColors.length],f={title:`Layout/Grid`,component:a.Container,args:{gap:`md`},parameters:{layout:`padded`},decorators:[e=>{let[t]=l();return(0,c.jsx)(e,{args:t})}],argTypes:{inline:{description:`Использует inline-grid вместо grid.`,control:`boolean`},row:{description:`Автоматически размещает элементы по строкам.`,control:`boolean`},column:{description:`Автоматически размещает элементы по колонкам.`,control:`boolean`},dense:{description:`Заполняет свободные ячейки плотным auto-flow.`,control:`boolean`},gap:{description:`Общий интервал между ячейками.`,control:`select`,options:[`none`,`xs`,`sm`,`md`,`lg`,`xl`]},gapRow:{description:`Интервал между строками.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},gapColumn:{description:`Интервал между колонками.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},align:{description:`Выравнивание содержимого ячеек по вертикали.`,control:`select`,options:[`start`,`center`,`end`,`stretch`,`baseline`]},justify:{description:`Выравнивание содержимого ячеек по горизонтали.`,control:`select`,options:[`start`,`center`,`end`,`stretch`]},alignContent:{description:`Распределение всей сетки по вертикали.`,control:`select`,options:[`start`,`center`,`end`,`stretch`,`between`,`around`,`evenly`]},justifyContent:{description:`Распределение всей сетки по горизонтали.`,control:`select`,options:[`start`,`center`,`end`,`stretch`,`between`,`around`,`evenly`]},templateColumns:{description:`Шаблон колонок CSS Grid.`,control:`text`},templateRows:{description:`Шаблон строк CSS Grid.`,control:`text`},autoColumns:{description:`Размер автоматически созданных колонок.`,control:`text`},autoRows:{description:`Размер автоматически созданных строк.`,control:`text`},areas:{description:`Именованные области grid-template-areas.`,control:`text`},variant:{description:`Готовый вариант раскладки.`,control:`select`,options:[`single-column`,`auto-1fr`,`auto1fr-rows-auto`]},as:{description:`Семантический HTML-тег контейнера.`,control:`select`,options:[`div`,`section`,`main`,`nav`,`ul`]},children:{description:`Содержимое grid-контейнера.`,control:!1}}},p={render:({children:e,...t})=>(0,c.jsx)(a.Container,{...t,templateColumns:`1fr 1fr 1fr`,style:u.container,children:e}),args:{children:(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(s,{index:0,children:`1`}),(0,c.jsx)(s,{index:1,children:`2`}),(0,c.jsx)(s,{index:2,children:`3`}),(0,c.jsx)(s,{index:3,children:`4`}),(0,c.jsx)(s,{index:4,children:`5`}),(0,c.jsx)(s,{index:5,children:`6`})]})}},m={render:()=>(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`h3`,{children:`Row (default)`}),(0,c.jsxs)(a.Container,{templateColumns:`repeat(3, 100px)`,templateRows:`repeat(2, 60px)`,gap:`sm`,style:u.container,children:[(0,c.jsx)(s,{index:0,children:`1`}),(0,c.jsx)(s,{index:1,children:`2`}),(0,c.jsx)(s,{index:2,children:`3`}),(0,c.jsx)(s,{index:3,children:`4`}),(0,c.jsx)(s,{index:4,children:`5`}),(0,c.jsx)(s,{index:5,children:`6`})]}),(0,c.jsx)(`h3`,{children:`Column`}),(0,c.jsxs)(a.Container,{templateColumns:`repeat(2, 100px)`,templateRows:`repeat(3, 60px)`,column:!0,gap:`sm`,style:u.container,children:[(0,c.jsx)(s,{index:0,children:`1`}),(0,c.jsx)(s,{index:1,children:`2`}),(0,c.jsx)(s,{index:2,children:`3`}),(0,c.jsx)(s,{index:3,children:`4`}),(0,c.jsx)(s,{index:4,children:`5`}),(0,c.jsx)(s,{index:5,children:`6`})]}),(0,c.jsx)(`h3`,{children:`Dense`}),(0,c.jsxs)(a.Container,{templateColumns:`repeat(4, 80px)`,templateRows:`repeat(3, 60px)`,dense:!0,gap:`sm`,style:u.container,children:[(0,c.jsx)(s,{index:0,style:{gridColumn:`span 2`},children:`Span 2`}),(0,c.jsx)(s,{index:1,children:`2`}),(0,c.jsx)(s,{index:2,style:{gridRow:`span 2`},children:`Span 2`}),(0,c.jsx)(s,{index:3,children:`4`}),(0,c.jsx)(s,{index:4,children:`5`}),(0,c.jsx)(s,{index:5,children:`6`}),(0,c.jsx)(s,{index:6,children:`7`})]})]}),args:{children:void 0}},h={render:()=>(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`h3`,{style:{marginBlock:`1em`},children:`Align Items`}),[`start`,`center`,`end`,`stretch`].map(e=>(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`h4`,{children:e}),(0,c.jsxs)(a.Container,{templateColumns:`repeat(3, 1fr)`,align:e,gap:`sm`,style:u.container,children:[(0,c.jsx)(s,{index:0,style:{height:e===`stretch`?`auto`:`5em`},children:`Short`}),(0,c.jsx)(s,{index:1,style:{height:e===`stretch`?`auto`:`10em`},children:`Tall`}),(0,c.jsx)(s,{index:2,style:{height:e===`stretch`?`auto`:`8em`},children:`Medium`})]})]},e)),(0,c.jsx)(`h3`,{style:{marginBlock:`1em`},children:`Justify Items`}),[`start`,`center`,`end`,`stretch`].map(e=>(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`h4`,{children:e}),(0,c.jsxs)(a.Container,{templateColumns:`repeat(3, 20em)`,justify:e,gap:`sm`,style:u.container,children:[(0,c.jsx)(s,{index:0,style:{width:e===`stretch`?`auto`:`10em`},children:`Item`}),(0,c.jsx)(s,{index:1,style:{width:e===`stretch`?`auto`:`10em`},children:`Item`}),(0,c.jsx)(s,{index:2,style:{width:e===`stretch`?`auto`:`10em`},children:`Item`})]})]},e))]}),args:{children:void 0}},g={render:()=>(0,c.jsxs)(`div`,{children:[[`xs`,`sm`,`md`,`lg`,`xl`].map(e=>(0,c.jsxs)(`div`,{children:[(0,c.jsxs)(`h3`,{children:[`Gap: `,e]}),(0,c.jsx)(a.Container,{templateColumns:`repeat(3, 1fr)`,gap:e,style:u.container,children:[1,2,3,4,5,6].map(e=>(0,c.jsxs)(s,{index:e,children:[`Item `,e]},e))})]},e)),(0,c.jsx)(`h3`,{children:`Different Row and Column Gaps`}),(0,c.jsx)(a.Container,{templateColumns:`repeat(3, 1fr)`,gapRow:`lg`,gapColumn:`sm`,style:u.container,children:[1,2,3,4,5,6].map(e=>(0,c.jsxs)(s,{index:e,children:[`Item `,e]},e))})]}),args:{children:void 0}},_={render:()=>(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`h3`,{children:`Single Column (grid-template-columns: 100%; grid-auto-rows: auto 1fr)`}),(0,c.jsxs)(a.Container,{variant:`single-column`,style:{...u.container,height:`200px`},children:[(0,c.jsx)(s,{index:0,children:`Header (auto)`}),(0,c.jsx)(s,{index:1,children:`Content (1fr)`})]}),(0,c.jsx)(`h3`,{children:`Auto 1fr Rows (grid-auto-rows: 1fr)`}),(0,c.jsxs)(a.Container,{variant:`auto-1fr`,templateColumns:`1fr 1fr`,style:{...u.container,height:`150px`},children:[(0,c.jsx)(s,{index:0,children:`Equal`}),(0,c.jsx)(s,{index:1,children:`Height`})]}),(0,c.jsx)(`h3`,{children:`Auto 1fr Columns (grid-template-columns: auto 1fr; grid-auto-rows: auto)`}),(0,c.jsxs)(a.Container,{variant:`auto1fr-rows-auto`,gap:`sm`,style:u.container,children:[(0,c.jsx)(s,{index:0,children:`Label`}),(0,c.jsx)(s,{index:1,children:`Content that takes remaining space`}),(0,c.jsx)(s,{index:2,children:`Another`}),(0,c.jsx)(s,{index:3,children:`More content here`})]})]}),args:{children:void 0}},v={render:()=>(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`h3`,{children:`Auto-fit with Minmax`}),(0,c.jsx)(a.Container,{templateColumns:`repeat(auto-fit, minmax(150px, 1fr))`,gap:`md`,style:u.container,children:[1,2,3,4,5,6].map(e=>(0,c.jsxs)(s,{index:e,children:[`Card `,e]},e))}),(0,c.jsx)(`h3`,{children:`Fixed and Flexible Columns`}),(0,c.jsxs)(a.Container,{templateColumns:`200px 1fr 100px`,gap:`sm`,style:u.container,children:[(0,c.jsx)(s,{index:0,children:`Sidebar`}),(0,c.jsx)(s,{index:1,children:`Main Content`}),(0,c.jsx)(s,{index:2,children:`Tools`})]}),(0,c.jsx)(`h3`,{children:`Masonry-like Layout`}),(0,c.jsxs)(a.Container,{templateColumns:`repeat(4, 1fr)`,autoRows:`100px`,gap:`sm`,style:u.container,children:[(0,c.jsx)(s,{index:0,style:{gridRow:`span 2`},children:`Tall`}),(0,c.jsx)(s,{index:1,children:`Normal`}),(0,c.jsx)(s,{index:2,children:`Normal`}),(0,c.jsx)(s,{index:3,style:{gridRow:`span 3`},children:`Very Tall`}),(0,c.jsx)(s,{index:4,children:`Normal`}),(0,c.jsx)(s,{index:5,style:{gridRow:`span 2`},children:`Tall`}),(0,c.jsx)(s,{index:6,children:`Normal`}),(0,c.jsx)(s,{index:7,children:`Normal`})]})]}),args:{children:void 0}},y={render:()=>(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`h3`,{children:`Basic Layout with Areas`}),(0,c.jsxs)(a.Container,{areas:`
-          "header header"
-          "nav main"
-          "footer footer"
-        `,templateColumns:`200px 1fr`,templateRows:`auto 1fr auto`,gap:`md`,style:{...u.container,height:`300px`},children:[(0,c.jsx)(a.Item,{area:`header`,children:(0,c.jsx)(s,{index:0,children:`Header`})}),(0,c.jsx)(a.Item,{area:`nav`,children:(0,c.jsx)(s,{index:1,children:`Navigation`})}),(0,c.jsx)(a.Item,{area:`main`,children:(0,c.jsx)(s,{index:2,children:`Main Content`})}),(0,c.jsx)(a.Item,{area:`footer`,children:(0,c.jsx)(s,{index:3,children:`Footer`})})]}),(0,c.jsx)(`h3`,{children:`Complex Areas Layout`}),(0,c.jsxs)(a.Container,{areas:`
-          "header header header"
-          "sidebar content ads"
-          "sidebar footer footer"
-        `,templateColumns:`150px 1fr 120px`,templateRows:`60px 1fr 60px`,gap:`sm`,style:{...u.container,height:`350px`},children:[(0,c.jsx)(a.Item,{area:`header`,children:(0,c.jsx)(s,{index:0,children:`Header`})}),(0,c.jsx)(a.Item,{area:`sidebar`,children:(0,c.jsx)(s,{index:1,children:`Sidebar`})}),(0,c.jsx)(a.Item,{area:`content`,children:(0,c.jsx)(s,{index:2,children:`Content`})}),(0,c.jsx)(a.Item,{area:`ads`,children:(0,c.jsx)(s,{index:3,children:`Ads`})}),(0,c.jsx)(a.Item,{area:`footer`,children:(0,c.jsx)(s,{index:4,children:`Footer`})})]})]}),args:{children:void 0}},b={render:()=>(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`h3`,{children:`Column and Row Span`}),(0,c.jsxs)(a.Container,{templateColumns:`repeat(4, 1fr)`,templateRows:`repeat(3, 80px)`,gap:`sm`,style:u.container,children:[(0,c.jsx)(s,{index:0,style:{gridColumn:`span 2`},children:`Span 2 Columns`}),(0,c.jsx)(s,{index:1,children:`Normal`}),(0,c.jsx)(s,{index:2,children:`Normal`}),(0,c.jsx)(s,{index:3,style:{gridRow:`span 2`},children:`Span 2 Rows`}),(0,c.jsx)(s,{index:4,children:`Normal`}),(0,c.jsx)(s,{index:5,children:`Normal`}),(0,c.jsx)(s,{index:6,style:{gridColumn:`span 3`,gridRow:`span 2`},children:`Span 3 Columns & 2 Rows`})]}),(0,c.jsx)(`h3`,{children:`Self Alignment`}),(0,c.jsxs)(a.Container,{templateColumns:`repeat(3, 1fr)`,templateRows:`repeat(2, 100px)`,gap:`sm`,style:u.container,children:[(0,c.jsx)(a.Item,{alignSelf:`start`,children:(0,c.jsx)(s,{index:0,children:`Start`})}),(0,c.jsx)(a.Item,{alignSelf:`center`,children:(0,c.jsx)(s,{index:1,children:`Center`})}),(0,c.jsx)(a.Item,{alignSelf:`end`,children:(0,c.jsx)(s,{index:2,children:`End`})}),(0,c.jsx)(a.Item,{justifySelf:`start`,children:(0,c.jsx)(s,{index:3,style:{width:`80px`},children:`Start`})}),(0,c.jsx)(a.Item,{justifySelf:`center`,children:(0,c.jsx)(s,{index:4,style:{width:`80px`},children:`Center`})}),(0,c.jsx)(a.Item,{justifySelf:`end`,children:(0,c.jsx)(s,{index:5,style:{width:`80px`},children:`End`})})]})]}),args:{children:void 0}},x={render:()=>(0,c.jsxs)(`div`,{children:[(0,c.jsxs)(`p`,{children:[`This is text with`,(0,c.jsxs)(a.Container,{inline:!0,templateColumns:`repeat(2, auto)`,gap:`xs`,style:{margin:`0 8px`},children:[(0,c.jsx)(s,{index:0,children:`inline`}),(0,c.jsx)(s,{index:1,children:`grid`})]}),`elements inside.`]}),(0,c.jsxs)(`p`,{children:[`Another inline grid example:`,(0,c.jsxs)(a.Container,{inline:!0,templateColumns:`auto auto`,gap:`sm`,align:`center`,style:{margin:`0 8px`},children:[(0,c.jsx)(s,{index:2,style:{fontSize:`12px`,padding:`4px 8px`},children:`Small`}),(0,c.jsx)(s,{index:3,style:{fontSize:`12px`,padding:`4px 8px`},children:`Items`})]}),`in text flow.`]})]}),args:{children:void 0}},S={render:()=>(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`h3`,{children:`Dashboard Layout`}),(0,c.jsxs)(a.Container,{areas:`
-          "header header header"
-          "stats stats sidebar"
-          "chart chart sidebar"
-          "table table sidebar"
-        `,templateColumns:`1fr 1fr 300px`,templateRows:`auto auto 1fr auto`,gap:`lg`,style:{...u.container,minHeight:`500px`},children:[(0,c.jsx)(a.Item,{area:`header`,children:(0,c.jsx)(s,{index:0,children:`Dashboard Header`})}),(0,c.jsx)(a.Item,{area:`stats`,children:(0,c.jsx)(s,{index:1,children:`Statistics Cards`})}),(0,c.jsx)(a.Item,{area:`chart`,children:(0,c.jsx)(s,{index:2,children:`Main Chart`})}),(0,c.jsx)(a.Item,{area:`table`,children:(0,c.jsx)(s,{index:3,children:`Data Table`})}),(0,c.jsx)(a.Item,{area:`sidebar`,children:(0,c.jsx)(s,{index:4,children:`Sidebar Widgets`})})]}),(0,c.jsx)(`h3`,{children:`Product Grid`}),(0,c.jsx)(a.Container,{templateColumns:`repeat(auto-fill, minmax(200px, 1fr))`,autoRows:`minmax(250px, auto)`,gap:`md`,style:u.container,children:[1,2,3,4,5,6,7,8].map(e=>(0,c.jsx)(a.Item,{children:(0,c.jsxs)(`div`,{style:{border:`1px solid #ddd`,borderRadius:`8px`,padding:`16px`,height:`100%`,backgroundColor:d(e),display:`flex`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,color:`white`},children:[(0,c.jsxs)(`h4`,{children:[`Product `,e]}),(0,c.jsx)(`p`,{children:`Description`}),(0,c.jsx)(`button`,{style:{marginTop:`8px`,padding:`8px 16px`},children:`Buy Now`})]})},e))}),(0,c.jsx)(`h3`,{children:`Form Layout`}),(0,c.jsxs)(a.Container,{templateColumns:`auto 1fr`,autoRows:`auto`,gap:`md`,align:`center`,style:u.container,children:[(0,c.jsx)(s,{index:0,style:{justifySelf:`end`},children:`Name:`}),(0,c.jsx)(s,{index:1,children:`Input Field`}),(0,c.jsx)(s,{index:2,style:{justifySelf:`end`},children:`Email:`}),(0,c.jsx)(s,{index:3,children:`Input Field`}),(0,c.jsx)(s,{index:4,style:{justifySelf:`end`},children:`Message:`}),(0,c.jsx)(a.Item,{style:{gridColumn:`2`,alignSelf:`stretch`},children:(0,c.jsx)(s,{index:5,style:{height:`100%`},children:`Textarea`})})]})]}),args:{children:void 0}},C={render:()=>(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`h3`,{children:`Adaptive Layout`}),(0,c.jsx)(a.Container,{templateColumns:`repeat(auto-fit, minmax(min(100%, 300px), 1fr))`,gap:`lg`,style:u.container,children:[1,2,3,4,5,6].map(e=>(0,c.jsxs)(s,{index:e,children:[`Adaptive Card `,e]},e))})]}),args:{children:void 0}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
-  render: ({
-    children,
-    ...args
-  }) => <Grid.Container {...args} templateColumns="1fr 1fr 1fr" style={demoStyles.container}>
-            {children}
-        </Grid.Container>,
-  args: {
-    children: <>
-                <DemoItem index={0}>1</DemoItem>
-                <DemoItem index={1}>2</DemoItem>
-                <DemoItem index={2}>3</DemoItem>
-                <DemoItem index={3}>4</DemoItem>
-                <DemoItem index={4}>5</DemoItem>
-                <DemoItem index={5}>6</DemoItem>
-            </>
-  }
-}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <h3>Row (default)</h3>
-            <Grid.Container templateColumns="repeat(3, 100px)" templateRows="repeat(2, 60px)" gap="sm" style={demoStyles.container}>
-                <DemoItem index={0}>1</DemoItem>
-                <DemoItem index={1}>2</DemoItem>
-                <DemoItem index={2}>3</DemoItem>
-                <DemoItem index={3}>4</DemoItem>
-                <DemoItem index={4}>5</DemoItem>
-                <DemoItem index={5}>6</DemoItem>
-            </Grid.Container>
-
-            <h3>Column</h3>
-            <Grid.Container templateColumns="repeat(2, 100px)" templateRows="repeat(3, 60px)" column gap="sm" style={demoStyles.container}>
-                <DemoItem index={0}>1</DemoItem>
-                <DemoItem index={1}>2</DemoItem>
-                <DemoItem index={2}>3</DemoItem>
-                <DemoItem index={3}>4</DemoItem>
-                <DemoItem index={4}>5</DemoItem>
-                <DemoItem index={5}>6</DemoItem>
-            </Grid.Container>
-
-            <h3>Dense</h3>
-            <Grid.Container templateColumns="repeat(4, 80px)" templateRows="repeat(3, 60px)" dense gap="sm" style={demoStyles.container}>
-                <DemoItem index={0} style={{
-        gridColumn: "span 2"
-      }}>
-                    Span 2
-                </DemoItem>
-                <DemoItem index={1}>2</DemoItem>
-                <DemoItem index={2} style={{
-        gridRow: "span 2"
-      }}>
-                    Span 2
-                </DemoItem>
-                <DemoItem index={3}>4</DemoItem>
-                <DemoItem index={4}>5</DemoItem>
-                <DemoItem index={5}>6</DemoItem>
-                <DemoItem index={6}>7</DemoItem>
-            </Grid.Container>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <h3 style={{
-      marginBlock: "1em"
-    }}>Align Items</h3>
-            {(["start", "center", "end", "stretch"] as const).map(align => <div key={align}>
-                    <h4>{align}</h4>
-                    <Grid.Container templateColumns="repeat(3, 1fr)" align={align} gap="sm" style={demoStyles.container}>
-                        <DemoItem index={0} style={{
-          height: align === "stretch" ? "auto" : "5em"
-        }}>
-                            Short
-                        </DemoItem>
-                        <DemoItem index={1} style={{
-          height: align === "stretch" ? "auto" : "10em"
-        }}>
-                            Tall
-                        </DemoItem>
-                        <DemoItem index={2} style={{
-          height: align === "stretch" ? "auto" : "8em"
-        }}>
-                            Medium
-                        </DemoItem>
-                    </Grid.Container>
-                </div>)}
-
-            <h3 style={{
-      marginBlock: "1em"
-    }}>Justify Items</h3>
-            {(["start", "center", "end", "stretch"] as const).map(justify => <div key={justify}>
-                    <h4>{justify}</h4>
-                    <Grid.Container templateColumns="repeat(3, 20em)" justify={justify} gap="sm" style={demoStyles.container}>
-                        <DemoItem index={0} style={{
-          width: justify === "stretch" ? "auto" : "10em"
-        }}>
-                            Item
-                        </DemoItem>
-                        <DemoItem index={1} style={{
-          width: justify === "stretch" ? "auto" : "10em"
-        }}>
-                            Item
-                        </DemoItem>
-                        <DemoItem index={2} style={{
-          width: justify === "stretch" ? "auto" : "10em"
-        }}>
-                            Item
-                        </DemoItem>
-                    </Grid.Container>
-                </div>)}
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            {(["xs", "sm", "md", "lg", "xl"] as const).map(gap => <div key={gap}>
-                    <h3>Gap: {gap}</h3>
-                    <Grid.Container templateColumns="repeat(3, 1fr)" gap={gap} style={demoStyles.container}>
-                        {[1, 2, 3, 4, 5, 6].map(i => <DemoItem key={i} index={i}>
-                                Item {i}
-                            </DemoItem>)}
-                    </Grid.Container>
-                </div>)}
-
-            <h3>Different Row and Column Gaps</h3>
-            <Grid.Container templateColumns="repeat(3, 1fr)" gapRow="lg" gapColumn="sm" style={demoStyles.container}>
-                {[1, 2, 3, 4, 5, 6].map(i => <DemoItem key={i} index={i}>
-                        Item {i}
-                    </DemoItem>)}
-            </Grid.Container>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <h3>Single Column (grid-template-columns: 100%; grid-auto-rows: auto 1fr)</h3>
-            <Grid.Container variant="single-column" style={{
-      ...demoStyles.container,
-      height: "200px"
-    }}>
-                <DemoItem index={0}>Header (auto)</DemoItem>
-                <DemoItem index={1}>Content (1fr)</DemoItem>
-            </Grid.Container>
-
-            <h3>Auto 1fr Rows (grid-auto-rows: 1fr)</h3>
-            <Grid.Container variant="auto-1fr" templateColumns="1fr 1fr" style={{
-      ...demoStyles.container,
-      height: "150px"
-    }}>
-                <DemoItem index={0}>Equal</DemoItem>
-                <DemoItem index={1}>Height</DemoItem>
-            </Grid.Container>
-
-            <h3>Auto 1fr Columns (grid-template-columns: auto 1fr; grid-auto-rows: auto)</h3>
-            <Grid.Container variant="auto1fr-rows-auto" gap="sm" style={demoStyles.container}>
-                <DemoItem index={0}>Label</DemoItem>
-                <DemoItem index={1}>Content that takes remaining space</DemoItem>
-                <DemoItem index={2}>Another</DemoItem>
-                <DemoItem index={3}>More content here</DemoItem>
-            </Grid.Container>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <h3>Auto-fit with Minmax</h3>
-            <Grid.Container templateColumns="repeat(auto-fit, minmax(150px, 1fr))" gap="md" style={demoStyles.container}>
-                {[1, 2, 3, 4, 5, 6].map(i => <DemoItem key={i} index={i}>
-                        Card {i}
-                    </DemoItem>)}
-            </Grid.Container>
-
-            <h3>Fixed and Flexible Columns</h3>
-            <Grid.Container templateColumns="200px 1fr 100px" gap="sm" style={demoStyles.container}>
-                <DemoItem index={0}>Sidebar</DemoItem>
-                <DemoItem index={1}>Main Content</DemoItem>
-                <DemoItem index={2}>Tools</DemoItem>
-            </Grid.Container>
-
-            <h3>Masonry-like Layout</h3>
-            <Grid.Container templateColumns="repeat(4, 1fr)" autoRows="100px" gap="sm" style={demoStyles.container}>
-                <DemoItem index={0} style={{
-        gridRow: "span 2"
-      }}>
-                    Tall
-                </DemoItem>
-                <DemoItem index={1}>Normal</DemoItem>
-                <DemoItem index={2}>Normal</DemoItem>
-                <DemoItem index={3} style={{
-        gridRow: "span 3"
-      }}>
-                    Very Tall
-                </DemoItem>
-                <DemoItem index={4}>Normal</DemoItem>
-                <DemoItem index={5} style={{
-        gridRow: "span 2"
-      }}>
-                    Tall
-                </DemoItem>
-                <DemoItem index={6}>Normal</DemoItem>
-                <DemoItem index={7}>Normal</DemoItem>
-            </Grid.Container>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <h3>Basic Layout with Areas</h3>
-            <Grid.Container areas={\`
-          "header header"
-          "nav main"
-          "footer footer"
-        \`} templateColumns="200px 1fr" templateRows="auto 1fr auto" gap="md" style={{
-      ...demoStyles.container,
-      height: "300px"
-    }}>
-                <Grid.Item area="header">
-                    <DemoItem index={0}>Header</DemoItem>
-                </Grid.Item>
-                <Grid.Item area="nav">
-                    <DemoItem index={1}>Navigation</DemoItem>
-                </Grid.Item>
-                <Grid.Item area="main">
-                    <DemoItem index={2}>Main Content</DemoItem>
-                </Grid.Item>
-                <Grid.Item area="footer">
-                    <DemoItem index={3}>Footer</DemoItem>
-                </Grid.Item>
-            </Grid.Container>
-
-            <h3>Complex Areas Layout</h3>
-            <Grid.Container areas={\`
-          "header header header"
-          "sidebar content ads"
-          "sidebar footer footer"
-        \`} templateColumns="150px 1fr 120px" templateRows="60px 1fr 60px" gap="sm" style={{
-      ...demoStyles.container,
-      height: "350px"
-    }}>
-                <Grid.Item area="header">
-                    <DemoItem index={0}>Header</DemoItem>
-                </Grid.Item>
-                <Grid.Item area="sidebar">
-                    <DemoItem index={1}>Sidebar</DemoItem>
-                </Grid.Item>
-                <Grid.Item area="content">
-                    <DemoItem index={2}>Content</DemoItem>
-                </Grid.Item>
-                <Grid.Item area="ads">
-                    <DemoItem index={3}>Ads</DemoItem>
-                </Grid.Item>
-                <Grid.Item area="footer">
-                    <DemoItem index={4}>Footer</DemoItem>
-                </Grid.Item>
-            </Grid.Container>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <h3>Column and Row Span</h3>
-            <Grid.Container templateColumns="repeat(4, 1fr)" templateRows="repeat(3, 80px)" gap="sm" style={demoStyles.container}>
-                <DemoItem index={0} style={{
-        gridColumn: "span 2"
-      }}>
-                    Span 2 Columns
-                </DemoItem>
-                <DemoItem index={1}>Normal</DemoItem>
-                <DemoItem index={2}>Normal</DemoItem>
-                <DemoItem index={3} style={{
-        gridRow: "span 2"
-      }}>
-                    Span 2 Rows
-                </DemoItem>
-                <DemoItem index={4}>Normal</DemoItem>
-                <DemoItem index={5}>Normal</DemoItem>
-                <DemoItem index={6} style={{
-        gridColumn: "span 3",
-        gridRow: "span 2"
-      }}>
-                    Span 3 Columns & 2 Rows
-                </DemoItem>
-            </Grid.Container>
-
-            <h3>Self Alignment</h3>
-            <Grid.Container templateColumns="repeat(3, 1fr)" templateRows="repeat(2, 100px)" gap="sm" style={demoStyles.container}>
-                <Grid.Item alignSelf="start">
-                    <DemoItem index={0}>Start</DemoItem>
-                </Grid.Item>
-                <Grid.Item alignSelf="center">
-                    <DemoItem index={1}>Center</DemoItem>
-                </Grid.Item>
-                <Grid.Item alignSelf="end">
-                    <DemoItem index={2}>End</DemoItem>
-                </Grid.Item>
-                <Grid.Item justifySelf="start">
-                    <DemoItem index={3} style={{
-          width: "80px"
-        }}>
-                        Start
-                    </DemoItem>
-                </Grid.Item>
-                <Grid.Item justifySelf="center">
-                    <DemoItem index={4} style={{
-          width: "80px"
-        }}>
-                        Center
-                    </DemoItem>
-                </Grid.Item>
-                <Grid.Item justifySelf="end">
-                    <DemoItem index={5} style={{
-          width: "80px"
-        }}>
-                        End
-                    </DemoItem>
-                </Grid.Item>
-            </Grid.Container>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <p>
-                This is text with
-                <Grid.Container inline templateColumns="repeat(2, auto)" gap="xs" style={{
-        margin: "0 8px"
-      }}>
-                    <DemoItem index={0}>inline</DemoItem>
-                    <DemoItem index={1}>grid</DemoItem>
-                </Grid.Container>
-                elements inside.
-            </p>
-
-            <p>
-                Another inline grid example:
-                <Grid.Container inline templateColumns="auto auto" gap="sm" align="center" style={{
-        margin: "0 8px"
-      }}>
-                    <DemoItem index={2} style={{
-          fontSize: "12px",
-          padding: "4px 8px"
-        }}>
-                        Small
-                    </DemoItem>
-                    <DemoItem index={3} style={{
-          fontSize: "12px",
-          padding: "4px 8px"
-        }}>
-                        Items
-                    </DemoItem>
-                </Grid.Container>
-                in text flow.
-            </p>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <h3>Dashboard Layout</h3>
-            <Grid.Container areas={\`
-          "header header header"
-          "stats stats sidebar"
-          "chart chart sidebar"
-          "table table sidebar"
-        \`} templateColumns="1fr 1fr 300px" templateRows="auto auto 1fr auto" gap="lg" style={{
-      ...demoStyles.container,
-      minHeight: "500px"
-    }}>
-                <Grid.Item area="header">
-                    <DemoItem index={0}>Dashboard Header</DemoItem>
-                </Grid.Item>
-                <Grid.Item area="stats">
-                    <DemoItem index={1}>Statistics Cards</DemoItem>
-                </Grid.Item>
-                <Grid.Item area="chart">
-                    <DemoItem index={2}>Main Chart</DemoItem>
-                </Grid.Item>
-                <Grid.Item area="table">
-                    <DemoItem index={3}>Data Table</DemoItem>
-                </Grid.Item>
-                <Grid.Item area="sidebar">
-                    <DemoItem index={4}>Sidebar Widgets</DemoItem>
-                </Grid.Item>
-            </Grid.Container>
-
-            <h3>Product Grid</h3>
-            <Grid.Container templateColumns="repeat(auto-fill, minmax(200px, 1fr))" autoRows="minmax(250px, auto)" gap="md" style={demoStyles.container}>
-                {[1, 2, 3, 4, 5, 6, 7, 8].map(i => <Grid.Item key={i}>
-                        <div style={{
-          border: "1px solid #ddd",
-          borderRadius: "8px",
-          padding: "16px",
-          height: "100%",
-          backgroundColor: getItemColor(i),
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "center",
-          color: "white"
-        }}>
-                            <h4>Product {i}</h4>
-                            <p>Description</p>
-                            <button style={{
-            marginTop: "8px",
-            padding: "8px 16px"
-          }}>Buy Now</button>
-                        </div>
-                    </Grid.Item>)}
-            </Grid.Container>
-
-            <h3>Form Layout</h3>
-            <Grid.Container templateColumns="auto 1fr" autoRows="auto" gap="md" align="center" style={demoStyles.container}>
-                <DemoItem index={0} style={{
-        justifySelf: "end"
-      }}>
-                    Name:
-                </DemoItem>
-                <DemoItem index={1}>Input Field</DemoItem>
-
-                <DemoItem index={2} style={{
-        justifySelf: "end"
-      }}>
-                    Email:
-                </DemoItem>
-                <DemoItem index={3}>Input Field</DemoItem>
-
-                <DemoItem index={4} style={{
-        justifySelf: "end"
-      }}>
-                    Message:
-                </DemoItem>
-                <Grid.Item style={{
-        gridColumn: "2",
-        alignSelf: "stretch"
-      }}>
-                    <DemoItem index={5} style={{
-          height: "100%"
-        }}>
-                        Textarea
-                    </DemoItem>
-                </Grid.Item>
-            </Grid.Container>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            {/* <h3>Responsive Columns</h3>
-             <Grid.Container
-                templateColumns={{
-                    mobile: "1fr",
-                    tablet: "repeat(2, 1fr)",
-                    desktop: "repeat(4, 1fr)"
-                }}
-                gap="md"
-                style={demoStyles.container}>
-                {[1, 2, 3, 4].map((i) => (
-                    <DemoItem key={i} index={i}>
-                        Item {i}
-                    </DemoItem>
-                ))}
-             </Grid.Container> */}
-
-            <h3>Adaptive Layout</h3>
-            <Grid.Container templateColumns="repeat(auto-fit, minmax(min(100%, 300px), 1fr))" gap="lg" style={demoStyles.container}>
-                {[1, 2, 3, 4, 5, 6].map(i => <DemoItem key={i} index={i}>
-                        Adaptive Card {i}
-                    </DemoItem>)}
-            </Grid.Container>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...C.parameters?.docs?.source}}},w=[`BasicGrid`,`AutoFlow`,`Alignment`,`Gaps`,`PredefinedVariants`,`ComplexTemplates`,`GridAreas`,`ItemPlacement`,`InlineGrid`,`RealWorld`,`Responsive`]})))()}export{g as a,x as c,S as d,C as f,v as i,b as l,m as n,y as o,T as p,p as r,o as s,h as t,_ as u};

package/storybook-static/assets/GridContainer-K9R_IHaw.css

@@ -1 +0,0 @@
-._5Z2YQF{display:grid}._5Z2YQF.gAEXju{vertical-align:middle;display:inline-grid}._5Z2YQF.KdmGbk{grid-auto-flow:row}._5Z2YQF.uOpH1m{grid-auto-flow:column}._5Z2YQF.EOUgpE{grid-auto-flow:dense}._5Z2YQF.PoMD0P{gap:unset}._5Z2YQF.FBebhA{row-gap:var(--space-xs)}._5Z2YQF.rwvhfS{row-gap:var(--space-sm)}._5Z2YQF.ZIsGgj{row-gap:var(--space-md)}._5Z2YQF.lbAie9{row-gap:var(--space-lg)}._5Z2YQF.ylmmN3{row-gap:var(--space-xl)}._5Z2YQF.Fg86QU{column-gap:var(--space-xs)}._5Z2YQF._3qWtbZ{column-gap:var(--space-sm)}._5Z2YQF.gIXZ8P{column-gap:var(--space-md)}._5Z2YQF.xXxHZM{column-gap:var(--space-lg)}._5Z2YQF.zRgpft{column-gap:var(--space-xl)}._5Z2YQF.Fb1W2U{row-gap:var(--space-xs);column-gap:var(--space-xs)}._5Z2YQF._2EojT9{row-gap:var(--space-sm);column-gap:var(--space-sm)}._5Z2YQF.gYCGa5{row-gap:var(--space-md);column-gap:var(--space-md)}._5Z2YQF.JN0CZr{row-gap:var(--space-lg);column-gap:var(--space-lg)}._5Z2YQF._2QvtUb{row-gap:var(--space-xl);column-gap:var(--space-xl)}._5Z2YQF._1kRriS{align-items:start}._5Z2YQF.ocLWZU{align-items:center}._5Z2YQF.TS1qri{align-items:end}._5Z2YQF.FXfvI7{align-items:stretch}._5Z2YQF.biKmzi{align-items:baseline}._5Z2YQF._4-sIS7{justify-items:start}._5Z2YQF.lbdoyi{justify-items:center}._5Z2YQF.WvAC9I{justify-items:end}._5Z2YQF.LN4Ak-{justify-items:stretch}._5Z2YQF.XC0FuJ{align-content:start}._5Z2YQF._6b9wZI{align-content:center}._5Z2YQF.KevE4M{align-content:end}._5Z2YQF.Sn-je4{align-content:stretch}._5Z2YQF.Wnx9iF{align-content:space-between}._5Z2YQF.RAoqm2{align-content:space-around}._5Z2YQF.nUjbmv{align-content:space-evenly}._5Z2YQF.TjTsA7{justify-content:start}._5Z2YQF.VdpzYk{justify-content:center}._5Z2YQF.peszxb{justify-content:end}._5Z2YQF.E98bqx{justify-content:stretch}._5Z2YQF.CdaBbu{justify-content:space-between}._5Z2YQF.leVL0N{justify-content:space-around}._5Z2YQF._6mOZVj{justify-content:space-evenly}.XHgjM3.wtrn5A{grid-area:auto}.XHgjM3.LkIh-N{align-self:start}.XHgjM3.Vhdvpo{align-self:center}.XHgjM3.cyg2du{align-self:end}.XHgjM3.Ptd1ad{align-self:stretch}.XHgjM3.Z22Yty{align-self:baseline}.XHgjM3.gycEgN{justify-self:start}.XHgjM3.s69iy2{justify-self:center}.XHgjM3.pKEJ9k{justify-self:end}.XHgjM3.qWkZVw{justify-self:stretch}.gUbUDY{grid-auto-rows:1fr}.S0HulN{grid-template-columns:auto 1fr;grid-auto-rows:auto}.K2fFKT{grid-template-columns:100%;grid-auto-rows:auto 1fr}