@ryuzaki13/react-foundation-ui 3.10.0 → 3.10.1

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}

package/storybook-static/assets/iframe-DaZCH1M-.js

@@ -1 +0,0 @@
-import{t as e}from"./iframe-CU98mtpe.js";e();

package/storybook-static/assets/media-D9cE2tzi.js

@@ -1 +0,0 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";function n(e){if(typeof window>`u`||typeof document>`u`)return w;let t=e??document.documentElement,n=window.getComputedStyle(t).fontSize,r=Number.parseFloat(n);return!Number.isFinite(r)||r<=0?w:r}function r(e){return typeof e!=`object`||!e?!1:`mobile`in e||`tablet`in e||`laptop`in e||`desktop`in e}function i(e,t){if(e!==void 0)return r(e)?t===`mobile`?e.mobile??e.tablet??e.laptop:t===`tablet`?e.tablet??e.mobile??e.laptop:e.laptop??e.tablet??e.mobile:e}function a(e,t,n){let r={...e};for(let e of n)r[e]=i(r[e],t);return r}function o(e,t){return`addEventListener`in e?(e.addEventListener(`change`,t),()=>e.removeEventListener(`change`,t)):(e.addListener(t),()=>e.removeListener(t))}function s(e){let t=t=>t*e,n=t(C.mobileMax),r=t(C.tabletMin),i=t(C.tabletMax),a=t(C.laptopMin);return{mobile:`(width <= ${n}px)`,tablet:`(width >= ${r}px) and (width <= ${i}px)`,laptop:`(width >= ${a}px)`}}function c(e){return e.mobile?`mobile`:e.tablet?`tablet`:`laptop`}function l(e,t){return e.mobile===t.mobile&&e.tablet===t.tablet&&e.laptop===t.laptop}function u(e){l(O.matches,e)||(O={matches:e,activeBreakpoint:c(e)},L.forEach(e=>e()))}function d(){k&&u({mobile:k.mobile.matches,tablet:k.tablet.matches,laptop:k.laptop.matches})}function f(){A.forEach(e=>e()),A=[]}function p(e=!1){if(typeof window>`u`||typeof document>`u`)return;let t=n();if(!e&&k&&Math.abs(t-j)<E)return;j=t,f();let r=s(t);k={mobile:window.matchMedia(r.mobile),tablet:window.matchMedia(r.tablet),laptop:window.matchMedia(r.laptop)},A=Object.keys(k).map(e=>o(k[e],d)),d()}function m(){I&&clearTimeout(I),I=setTimeout(()=>{I=null,p()},D)}function h(){typeof window>`u`||typeof document>`u`||(N=new MutationObserver(m),N.observe(document.documentElement,{attributes:!0,attributeFilter:[`style`,`class`,`data-font-size`]}),!(typeof ResizeObserver>`u`)&&(F=document.createElement(`div`),F.style.position=`absolute`,F.style.visibility=`hidden`,F.style.pointerEvents=`none`,F.style.width=`1em`,F.style.height=`1px`,F.style.overflow=`hidden`,F.setAttribute(`aria-hidden`,`true`),(document.body??document.documentElement).appendChild(F),P=new ResizeObserver(m),P.observe(F)))}function g(){f(),k=null,I&&=(clearTimeout(I),null),N&&=(N.disconnect(),null),P&&=(P.disconnect(),null),F?.parentNode&&F.parentNode.removeChild(F),F=null,M=!1}function _(){M||typeof window>`u`||typeof document>`u`||(M=!0,p(!0),h())}function v(e){return typeof window>`u`||typeof document>`u`?()=>{}:(L.add(e),_(),()=>{L.delete(e),L.size===0&&g()})}function y(){return O}function b(){return T}function x(){return(0,S.useSyncExternalStore)(v,y,b)}var S,C,w,T,E,D,O,k,A,j,M,N,P,F,I,L;function R(){return(R=e((()=>{S=t(),C={mobileMax:767.98/16,tabletMin:48,tabletMax:1151.98/16,laptopMin:72},w=16,T={matches:{mobile:!1,tablet:!1,laptop:!1},activeBreakpoint:`laptop`},E=.25,D=80,O=T,k=null,A=[],j=0,M=!1,N=null,P=null,F=null,I=null,L=new Set})))()}export{i,a as n,R as r,x as t};

package/storybook-static/assets/useFlexClasses-IXK2se1Y.css

@@ -1 +0,0 @@
-.ZNPIAt{display:flex}.ZNPIAt.FOfB6f{vertical-align:middle;display:inline-flex}.ZNPIAt.S3zmDT{flex-direction:row}.ZNPIAt.ZFdq8E{flex-direction:column}.ZNPIAt.VAzJwr{flex-direction:row-reverse}.ZNPIAt.-U1mun{flex-direction:column-reverse}.ZNPIAt._4ZMtr-{flex-wrap:wrap}.ZNPIAt.SKOoTV{flex-wrap:nowrap}.ZNPIAt.sSe6vs{flex-wrap:wrap-reverse}.ZNPIAt._3K-dKm{align-items:start}.ZNPIAt.-Pfy-z{align-items:center}.ZNPIAt.beSYgR{align-items:end}.ZNPIAt.Ewhv1G{align-items:stretch}.ZNPIAt.JXvBB6{align-items:baseline}.ZNPIAt.hN3T0k{justify-content:start}.ZNPIAt.KKCJ5o{justify-content:center}.ZNPIAt.MnX1Le{justify-content:end}.ZNPIAt.Hom9eH{justify-content:stretch}.ZNPIAt.Oujm4J{justify-content:space-between}.ZNPIAt._2ttx6l{justify-content:space-around}.ZNPIAt.QEwI8b{justify-content:space-evenly}.ZNPIAt._7GQOS7{align-content:start}.ZNPIAt._2IOpAA{align-content:center}.ZNPIAt.fZOYKH{align-content:end}.ZNPIAt._01H9Wl{align-content:stretch}.ZNPIAt.GiMq3P{align-content:space-between}.ZNPIAt.tfwckC{align-content:space-around}.ZNPIAt._9tNYb7{align-content:space-evenly}.ZNPIAt.PoehYn{gap:unset}.ZNPIAt.D9yh46{row-gap:var(--space-xs)}.ZNPIAt.B5WUhS{row-gap:var(--space-sm)}.ZNPIAt.KfUmo4{row-gap:var(--space-md)}.ZNPIAt.m-8JGj{row-gap:var(--space-lg)}.ZNPIAt.zFcs1z{row-gap:var(--space-xl)}.ZNPIAt._0wKkFA{column-gap:var(--space-xs)}.ZNPIAt.VQY6wh{column-gap:var(--space-sm)}.ZNPIAt.csJmh7{column-gap:var(--space-md)}.ZNPIAt._-8r3Oj{column-gap:var(--space-lg)}.ZNPIAt.sCELJe{column-gap:var(--space-xl)}.ZNPIAt.NrH1WE{row-gap:var(--space-xs);column-gap:var(--space-xs)}.ZNPIAt.IIgbrj{row-gap:var(--space-sm);column-gap:var(--space-sm)}.ZNPIAt.alT7CJ{row-gap:var(--space-md);column-gap:var(--space-md)}.ZNPIAt.TBFK23{row-gap:var(--space-lg);column-gap:var(--space-lg)}.ZNPIAt.JR1URZ{row-gap:var(--space-xl);column-gap:var(--space-xl)}.i1imd3.IVZ-ii{flex-grow:1}.i1imd3.zhghPS{flex-grow:0}.i1imd3.-A4gJM{flex-shrink:1}.i1imd3._3Q-lT-{flex-shrink:0}.i1imd3.YSg8P9{flex-basis:0}.i1imd3.RMXnTk{flex-basis:auto}.i1imd3.YyYE7z{flex:none}.i1imd3.LD3bM5{flex:auto}.i1imd3.HpcoTp{align-self:start}.i1imd3.E7ItD3{align-self:center}.i1imd3.v0JFEC{align-self:end}.i1imd3.pmMEmH{align-self:stretch}.i1imd3.qevFHG{align-self:baseline}.i1imd3.OTPY33{justify-self:center}.i1imd3.AjRxTP{justify-self:end}.i1imd3._1YaZWf{justify-self:stretch}.H-DHBq,.JzIGGJ{justify-content:center;align-items:center;display:flex}.aqYTBq{justify-content:space-between;align-items:center;display:flex}.JzIGGJ{flex-direction:column;height:100%}

package/storybook-static/assets/useFlexClasses-SgVG37Bb.js

@@ -1 +0,0 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";var n,ee,te,r,i,a,o,s,c,l,u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,ne,z,B,V,H,U,W,G,K,q,J,Y,X,Z,re,ie,ae,oe,se,ce,le,ue,de,fe,pe,Q;function me(){return(me=e((()=>{n=`ZNPIAt`,ee=`FOfB6f`,te=`S3zmDT`,r=`ZFdq8E`,i=`VAzJwr`,a=`-U1mun`,o=`_4ZMtr-`,s=`SKOoTV`,c=`sSe6vs`,l=`_3K-dKm`,u=`-Pfy-z`,d=`beSYgR`,f=`Ewhv1G`,p=`JXvBB6`,m=`hN3T0k`,h=`KKCJ5o`,g=`MnX1Le`,_=`Hom9eH`,v=`Oujm4J`,y=`_2ttx6l`,b=`QEwI8b`,x=`_7GQOS7`,S=`_2IOpAA`,C=`fZOYKH`,w=`_01H9Wl`,T=`GiMq3P`,E=`tfwckC`,D=`_9tNYb7`,O=`PoehYn`,k=`D9yh46`,A=`B5WUhS`,j=`KfUmo4`,M=`m-8JGj`,N=`zFcs1z`,P=`_0wKkFA`,F=`VQY6wh`,I=`csJmh7`,L=`_-8r3Oj`,R=`sCELJe`,ne=`NrH1WE`,z=`IIgbrj`,B=`alT7CJ`,V=`TBFK23`,H=`JR1URZ`,U=`i1imd3`,W=`IVZ-ii`,G=`zhghPS`,K=`-A4gJM`,q=`_3Q-lT-`,J=`YSg8P9`,Y=`RMXnTk`,X=`YyYE7z`,Z=`LD3bM5`,re=`HpcoTp`,ie=`E7ItD3`,ae=`v0JFEC`,oe=`pmMEmH`,se=`qevFHG`,ce=`OTPY33`,le=`AjRxTP`,ue=`_1YaZWf`,de=`H-DHBq`,fe=`JzIGGJ`,pe=`aqYTBq`,Q={container:n,inline:ee,row:te,column:r,rowReverse:i,columnReverse:a,wrap:o,nowrap:s,wrapReverse:c,alignStart:l,alignCenter:u,alignEnd:d,alignStretch:f,alignBaseline:p,justifyStart:m,justifyCenter:h,justifyEnd:g,justifyStretch:_,justifyBetween:v,justifyAround:y,justifyEvenly:b,alignContentStart:x,alignContentCenter:S,alignContentEnd:C,alignContentStretch:w,alignContentBetween:T,alignContentAround:E,alignContentEvenly:D,gapNone:O,gapRowXs:k,gapRowSm:A,gapRowMd:j,gapRowLg:M,gapRowXl:N,gapColumnXs:P,gapColumnSm:F,gapColumnMd:I,gapColumnLg:L,gapColumnXl:R,gapXs:ne,gapSm:z,gapMd:B,gapLg:V,gapXl:H,item:U,grow:W,grow0:G,shrink:K,shrink0:q,basis0:J,basisAuto:Y,flex0:X,flex1:Z,alignSelfStart:re,alignSelfCenter:ie,alignSelfEnd:ae,alignSelfStretch:oe,alignSelfBaseline:se,justifySelfCenter:ce,justifySelfEnd:le,justifySelfStretch:ue,center:de,columnCenter:fe,centerBetween:pe}})))()}var $,he,ge,_e;function ve(){return(ve=e((()=>{$=t(),me(),he=e=>(0,$.useMemo)(()=>{let t=[Q.container];return e.inline&&t.push(Q.inline),e.row?t.push(Q.row):e.column?t.push(Q.column):e.rowReverse?t.push(Q.rowReverse):e.columnReverse&&t.push(Q.columnReverse),e.wrap?t.push(Q.wrap):e.nowrap?t.push(Q.nowrap):e.wrapReverse&&t.push(Q.wrapReverse),e.align&&t.push(Q[`align${e.align.charAt(0).toUpperCase()+e.align.slice(1)}`]),e.justify&&t.push(Q[`justify${e.justify.charAt(0).toUpperCase()+e.justify.slice(1)}`]),e.alignContent&&t.push(Q[`alignContent${e.alignContent.charAt(0).toUpperCase()+e.alignContent.slice(1)}`]),e.gap===`none`?t.push(Q.gapNone):e.gap&&t.push(Q[`gap${e.gap.charAt(0).toUpperCase()+e.gap.slice(1)}`]),e.gapRow&&t.push(Q[`gapRow${e.gapRow.charAt(0).toUpperCase()+e.gapRow.slice(1)}`]),e.gapColumn&&t.push(Q[`gapColumn${e.gapColumn.charAt(0).toUpperCase()+e.gapColumn.slice(1)}`]),t.filter(Boolean).join(` `)},[e]),ge=e=>(0,$.useMemo)(()=>{let t=[Q.item];return e.flex0&&t.push(Q.flex0),e.flex1&&t.push(Q.flex1),!e.flex0&&!e.flex1&&(e.grow?t.push(Q.grow):t.push(Q.grow0),e.shrink===!1?t.push(Q.shrink0):t.push(Q.shrink),e.basis===`0`?t.push(Q.basis0):e.basis===`auto`&&t.push(Q.basisAuto)),e.alignSelf&&t.push(Q[`alignSelf${e.alignSelf.charAt(0).toUpperCase()+e.alignSelf.slice(1)}`]),e.justifySelf&&t.push(Q[`justifySelf${e.justifySelf.charAt(0).toUpperCase()+e.justifySelf.slice(1)}`]),t.filter(Boolean).join(` `)},[e]),_e=e=>Q[e]})))()}export{_e as i,he as n,ge as r,ve as t};