@ryuzaki13/react-foundation-ui 3.9.0 → 3.10.1

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

@@ -0,0 +1,657 @@
+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-E950Ehp0.js";import{n as i,t as a}from"./Grid-CJ5RLrgv.js";import{n as o,t as s}from"./ResponsiveLayoutPreview-BHBxtn2W.js";var c=t({Alignment:()=>_,AutoFlow:()=>g,BasicGrid:()=>h,ComplexTemplates:()=>b,Gaps:()=>v,GridAreas:()=>x,InlineGrid:()=>C,IntrinsicResponsive:()=>O,ItemPlacement:()=>S,PredefinedVariants:()=>y,RealWorld:()=>w,ResponsiveAreas:()=>E,ResponsiveItemPlacement:()=>D,ResponsiveTemplates:()=>T,__namedExportsOrder:()=>k,default:()=>m});function l({children:e,index:t=0,style:n}){return(0,u.jsx)(a.Item,{style:{...f.item,backgroundColor:p(t),...n},children:e})}var u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k;function A(){return(A=e((()=>{n(),o(),i(),u=r(),{useArgs:d}=__STORYBOOK_MODULE_PREVIEW_API__,f={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`]},p=e=>f.itemColors[e%f.itemColors.length],m={title:`Layout/Grid`,component:a.Container,args:{gap:`md`},parameters:{layout:`padded`},decorators:[e=>{let[t]=d();return(0,u.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}}},h={render:({children:e,...t})=>(0,u.jsx)(a.Container,{...t,templateColumns:`1fr 1fr 1fr`,style:f.container,children:e}),args:{children:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(l,{index:0,children:`1`}),(0,u.jsx)(l,{index:1,children:`2`}),(0,u.jsx)(l,{index:2,children:`3`}),(0,u.jsx)(l,{index:3,children:`4`}),(0,u.jsx)(l,{index:4,children:`5`}),(0,u.jsx)(l,{index:5,children:`6`})]})}},g={render:()=>(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{children:`Row (default)`}),(0,u.jsxs)(a.Container,{templateColumns:`repeat(3, 100px)`,templateRows:`repeat(2, 60px)`,gap:`sm`,style:f.container,children:[(0,u.jsx)(l,{index:0,children:`1`}),(0,u.jsx)(l,{index:1,children:`2`}),(0,u.jsx)(l,{index:2,children:`3`}),(0,u.jsx)(l,{index:3,children:`4`}),(0,u.jsx)(l,{index:4,children:`5`}),(0,u.jsx)(l,{index:5,children:`6`})]}),(0,u.jsx)(`h3`,{children:`Column`}),(0,u.jsxs)(a.Container,{templateColumns:`repeat(2, 100px)`,templateRows:`repeat(3, 60px)`,column:!0,gap:`sm`,style:f.container,children:[(0,u.jsx)(l,{index:0,children:`1`}),(0,u.jsx)(l,{index:1,children:`2`}),(0,u.jsx)(l,{index:2,children:`3`}),(0,u.jsx)(l,{index:3,children:`4`}),(0,u.jsx)(l,{index:4,children:`5`}),(0,u.jsx)(l,{index:5,children:`6`})]}),(0,u.jsx)(`h3`,{children:`Dense`}),(0,u.jsxs)(a.Container,{templateColumns:`repeat(4, 80px)`,templateRows:`repeat(3, 60px)`,dense:!0,gap:`sm`,style:f.container,children:[(0,u.jsx)(l,{index:0,style:{gridColumn:`span 2`},children:`Span 2`}),(0,u.jsx)(l,{index:1,children:`2`}),(0,u.jsx)(l,{index:2,style:{gridRow:`span 2`},children:`Span 2`}),(0,u.jsx)(l,{index:3,children:`4`}),(0,u.jsx)(l,{index:4,children:`5`}),(0,u.jsx)(l,{index:5,children:`6`}),(0,u.jsx)(l,{index:6,children:`7`})]})]}),args:{children:void 0}},_={render:()=>(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{style:{marginBlock:`1em`},children:`Align Items`}),[`start`,`center`,`end`,`stretch`].map(e=>(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h4`,{children:e}),(0,u.jsxs)(a.Container,{templateColumns:`repeat(3, 1fr)`,align:e,gap:`sm`,style:f.container,children:[(0,u.jsx)(l,{index:0,style:{height:e===`stretch`?`auto`:`5em`},children:`Short`}),(0,u.jsx)(l,{index:1,style:{height:e===`stretch`?`auto`:`10em`},children:`Tall`}),(0,u.jsx)(l,{index:2,style:{height:e===`stretch`?`auto`:`8em`},children:`Medium`})]})]},e)),(0,u.jsx)(`h3`,{style:{marginBlock:`1em`},children:`Justify Items`}),[`start`,`center`,`end`,`stretch`].map(e=>(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h4`,{children:e}),(0,u.jsxs)(a.Container,{templateColumns:`repeat(3, 20em)`,justify:e,gap:`sm`,style:f.container,children:[(0,u.jsx)(l,{index:0,style:{width:e===`stretch`?`auto`:`10em`},children:`Item`}),(0,u.jsx)(l,{index:1,style:{width:e===`stretch`?`auto`:`10em`},children:`Item`}),(0,u.jsx)(l,{index:2,style:{width:e===`stretch`?`auto`:`10em`},children:`Item`})]})]},e))]}),args:{children:void 0}},v={render:()=>(0,u.jsxs)(`div`,{children:[[`xs`,`sm`,`md`,`lg`,`xl`].map(e=>(0,u.jsxs)(`div`,{children:[(0,u.jsxs)(`h3`,{children:[`Gap: `,e]}),(0,u.jsx)(a.Container,{templateColumns:`repeat(3, 1fr)`,gap:e,style:f.container,children:[1,2,3,4,5,6].map(e=>(0,u.jsxs)(l,{index:e,children:[`Item `,e]},e))})]},e)),(0,u.jsx)(`h3`,{children:`Different Row and Column Gaps`}),(0,u.jsx)(a.Container,{templateColumns:`repeat(3, 1fr)`,gapRow:`lg`,gapColumn:`sm`,style:f.container,children:[1,2,3,4,5,6].map(e=>(0,u.jsxs)(l,{index:e,children:[`Item `,e]},e))})]}),args:{children:void 0}},y={render:()=>(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{children:`Single Column (grid-template-columns: 100%; grid-auto-rows: auto 1fr)`}),(0,u.jsxs)(a.Container,{variant:`single-column`,style:{...f.container,height:`200px`},children:[(0,u.jsx)(l,{index:0,children:`Header (auto)`}),(0,u.jsx)(l,{index:1,children:`Content (1fr)`})]}),(0,u.jsx)(`h3`,{children:`Auto 1fr Rows (grid-auto-rows: 1fr)`}),(0,u.jsxs)(a.Container,{variant:`auto-1fr`,templateColumns:`1fr 1fr`,style:{...f.container,height:`150px`},children:[(0,u.jsx)(l,{index:0,children:`Equal`}),(0,u.jsx)(l,{index:1,children:`Height`})]}),(0,u.jsx)(`h3`,{children:`Auto 1fr Columns (grid-template-columns: auto 1fr; grid-auto-rows: auto)`}),(0,u.jsxs)(a.Container,{variant:`auto1fr-rows-auto`,gap:`sm`,style:f.container,children:[(0,u.jsx)(l,{index:0,children:`Label`}),(0,u.jsx)(l,{index:1,children:`Content that takes remaining space`}),(0,u.jsx)(l,{index:2,children:`Another`}),(0,u.jsx)(l,{index:3,children:`More content here`})]})]}),args:{children:void 0}},b={render:()=>(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{children:`Auto-fit with Minmax`}),(0,u.jsx)(a.Container,{templateColumns:`repeat(auto-fit, minmax(150px, 1fr))`,gap:`md`,style:f.container,children:[1,2,3,4,5,6].map(e=>(0,u.jsxs)(l,{index:e,children:[`Card `,e]},e))}),(0,u.jsx)(`h3`,{children:`Fixed and Flexible Columns`}),(0,u.jsxs)(a.Container,{templateColumns:`200px 1fr 100px`,gap:`sm`,style:f.container,children:[(0,u.jsx)(l,{index:0,children:`Sidebar`}),(0,u.jsx)(l,{index:1,children:`Main Content`}),(0,u.jsx)(l,{index:2,children:`Tools`})]}),(0,u.jsx)(`h3`,{children:`Masonry-like Layout`}),(0,u.jsxs)(a.Container,{templateColumns:`repeat(4, 1fr)`,autoRows:`100px`,gap:`sm`,style:f.container,children:[(0,u.jsx)(l,{index:0,style:{gridRow:`span 2`},children:`Tall`}),(0,u.jsx)(l,{index:1,children:`Normal`}),(0,u.jsx)(l,{index:2,children:`Normal`}),(0,u.jsx)(l,{index:3,style:{gridRow:`span 3`},children:`Very Tall`}),(0,u.jsx)(l,{index:4,children:`Normal`}),(0,u.jsx)(l,{index:5,style:{gridRow:`span 2`},children:`Tall`}),(0,u.jsx)(l,{index:6,children:`Normal`}),(0,u.jsx)(l,{index:7,children:`Normal`})]})]}),args:{children:void 0}},x={render:()=>(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{children:`Basic Layout with Areas`}),(0,u.jsxs)(a.Container,{areas:`
+          "header header"
+          "nav main"
+          "footer footer"
+        `,templateColumns:`200px 1fr`,templateRows:`auto 1fr auto`,gap:`md`,style:{...f.container,height:`300px`},children:[(0,u.jsx)(a.Item,{area:`header`,children:(0,u.jsx)(l,{index:0,children:`Header`})}),(0,u.jsx)(a.Item,{area:`nav`,children:(0,u.jsx)(l,{index:1,children:`Navigation`})}),(0,u.jsx)(a.Item,{area:`main`,children:(0,u.jsx)(l,{index:2,children:`Main Content`})}),(0,u.jsx)(a.Item,{area:`footer`,children:(0,u.jsx)(l,{index:3,children:`Footer`})})]}),(0,u.jsx)(`h3`,{children:`Complex Areas Layout`}),(0,u.jsxs)(a.Container,{areas:`
+          "header header header"
+          "sidebar content ads"
+          "sidebar footer footer"
+        `,templateColumns:`150px 1fr 120px`,templateRows:`60px 1fr 60px`,gap:`sm`,style:{...f.container,height:`350px`},children:[(0,u.jsx)(a.Item,{area:`header`,children:(0,u.jsx)(l,{index:0,children:`Header`})}),(0,u.jsx)(a.Item,{area:`sidebar`,children:(0,u.jsx)(l,{index:1,children:`Sidebar`})}),(0,u.jsx)(a.Item,{area:`content`,children:(0,u.jsx)(l,{index:2,children:`Content`})}),(0,u.jsx)(a.Item,{area:`ads`,children:(0,u.jsx)(l,{index:3,children:`Ads`})}),(0,u.jsx)(a.Item,{area:`footer`,children:(0,u.jsx)(l,{index:4,children:`Footer`})})]})]}),args:{children:void 0}},S={render:()=>(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{children:`Column and Row Span`}),(0,u.jsxs)(a.Container,{templateColumns:`repeat(4, 1fr)`,templateRows:`repeat(3, 80px)`,gap:`sm`,style:f.container,children:[(0,u.jsx)(l,{index:0,style:{gridColumn:`span 2`},children:`Span 2 Columns`}),(0,u.jsx)(l,{index:1,children:`Normal`}),(0,u.jsx)(l,{index:2,children:`Normal`}),(0,u.jsx)(l,{index:3,style:{gridRow:`span 2`},children:`Span 2 Rows`}),(0,u.jsx)(l,{index:4,children:`Normal`}),(0,u.jsx)(l,{index:5,children:`Normal`}),(0,u.jsx)(l,{index:6,style:{gridColumn:`span 3`,gridRow:`span 2`},children:`Span 3 Columns & 2 Rows`})]}),(0,u.jsx)(`h3`,{children:`Self Alignment`}),(0,u.jsxs)(a.Container,{templateColumns:`repeat(3, 1fr)`,templateRows:`repeat(2, 100px)`,gap:`sm`,style:f.container,children:[(0,u.jsx)(a.Item,{alignSelf:`start`,children:(0,u.jsx)(l,{index:0,children:`Start`})}),(0,u.jsx)(a.Item,{alignSelf:`center`,children:(0,u.jsx)(l,{index:1,children:`Center`})}),(0,u.jsx)(a.Item,{alignSelf:`end`,children:(0,u.jsx)(l,{index:2,children:`End`})}),(0,u.jsx)(a.Item,{justifySelf:`start`,children:(0,u.jsx)(l,{index:3,style:{width:`80px`},children:`Start`})}),(0,u.jsx)(a.Item,{justifySelf:`center`,children:(0,u.jsx)(l,{index:4,style:{width:`80px`},children:`Center`})}),(0,u.jsx)(a.Item,{justifySelf:`end`,children:(0,u.jsx)(l,{index:5,style:{width:`80px`},children:`End`})})]})]}),args:{children:void 0}},C={render:()=>(0,u.jsxs)(`div`,{children:[(0,u.jsxs)(`p`,{children:[`This is text with`,(0,u.jsxs)(a.Container,{inline:!0,templateColumns:`repeat(2, auto)`,gap:`xs`,style:{margin:`0 8px`},children:[(0,u.jsx)(l,{index:0,children:`inline`}),(0,u.jsx)(l,{index:1,children:`grid`})]}),`elements inside.`]}),(0,u.jsxs)(`p`,{children:[`Another inline grid example:`,(0,u.jsxs)(a.Container,{inline:!0,templateColumns:`auto auto`,gap:`sm`,align:`center`,style:{margin:`0 8px`},children:[(0,u.jsx)(l,{index:2,style:{fontSize:`12px`,padding:`4px 8px`},children:`Small`}),(0,u.jsx)(l,{index:3,style:{fontSize:`12px`,padding:`4px 8px`},children:`Items`})]}),`in text flow.`]})]}),args:{children:void 0}},w={render:()=>(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{children:`Dashboard Layout`}),(0,u.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:{...f.container,minHeight:`500px`},children:[(0,u.jsx)(a.Item,{area:`header`,children:(0,u.jsx)(l,{index:0,children:`Dashboard Header`})}),(0,u.jsx)(a.Item,{area:`stats`,children:(0,u.jsx)(l,{index:1,children:`Statistics Cards`})}),(0,u.jsx)(a.Item,{area:`chart`,children:(0,u.jsx)(l,{index:2,children:`Main Chart`})}),(0,u.jsx)(a.Item,{area:`table`,children:(0,u.jsx)(l,{index:3,children:`Data Table`})}),(0,u.jsx)(a.Item,{area:`sidebar`,children:(0,u.jsx)(l,{index:4,children:`Sidebar Widgets`})})]}),(0,u.jsx)(`h3`,{children:`Product Grid`}),(0,u.jsx)(a.Container,{templateColumns:`repeat(auto-fill, minmax(200px, 1fr))`,autoRows:`minmax(250px, auto)`,gap:`md`,style:f.container,children:[1,2,3,4,5,6,7,8].map(e=>(0,u.jsx)(a.Item,{children:(0,u.jsxs)(`div`,{style:{border:`1px solid #ddd`,borderRadius:`8px`,padding:`16px`,height:`100%`,backgroundColor:p(e),display:`flex`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,color:`white`},children:[(0,u.jsxs)(`h4`,{children:[`Product `,e]}),(0,u.jsx)(`p`,{children:`Description`}),(0,u.jsx)(`button`,{style:{marginTop:`8px`,padding:`8px 16px`},children:`Buy Now`})]})},e))}),(0,u.jsx)(`h3`,{children:`Form Layout`}),(0,u.jsxs)(a.Container,{templateColumns:`auto 1fr`,autoRows:`auto`,gap:`md`,align:`center`,style:f.container,children:[(0,u.jsx)(l,{index:0,style:{justifySelf:`end`},children:`Name:`}),(0,u.jsx)(l,{index:1,children:`Input Field`}),(0,u.jsx)(l,{index:2,style:{justifySelf:`end`},children:`Email:`}),(0,u.jsx)(l,{index:3,children:`Input Field`}),(0,u.jsx)(l,{index:4,style:{justifySelf:`end`},children:`Message:`}),(0,u.jsx)(a.Item,{style:{gridColumn:`2`,alignSelf:`stretch`},children:(0,u.jsx)(l,{index:5,style:{height:`100%`},children:`Textarea`})})]})]}),args:{children:void 0}},T={name:`Responsive: шаблоны контейнера`,render:()=>(0,u.jsx)(s,{title:`Колонки, строки, auto-flow, gap и выравнивание`,description:`Все значения присутствуют уже в SSR markup; изменение ширины переключает только CSS-правила.`,legend:[`laptop — четыре колонки, dense flow, gap xl`,`tablet — две колонки, row flow, gap md`,`mobile — одна колонка, row flow, gap sm`],children:(0,u.jsx)(a.Container,{templateColumns:{mobile:`minmax(0, 1fr)`,tablet:`repeat(2, minmax(0, 1fr))`,laptop:`repeat(4, minmax(0, 1fr))`},templateRows:{mobile:`repeat(6, auto)`,tablet:`repeat(3, minmax(7em, auto))`,laptop:`repeat(2, minmax(8em, auto))`},autoRows:{mobile:`auto`,tablet:`minmax(7em, auto)`,laptop:`minmax(8em, auto)`},row:{mobile:!0,tablet:!0,laptop:!1},dense:{mobile:!1,tablet:!1,laptop:!0},gap:{mobile:`sm`,tablet:`md`,laptop:`xl`},align:{mobile:`stretch`,tablet:`center`,laptop:`end`},justify:{mobile:`stretch`,tablet:`stretch`,laptop:`center`},style:f.container,children:[1,2,3,4,5,6].map(e=>(0,u.jsxs)(l,{index:e,children:[`Карточка `,e]},e))})}),args:{children:void 0},parameters:{docs:{description:{story:`Проверяет responsive CSS-классы и произвольные значения templateColumns/templateRows/autoRows в одном SSR-safe сценарии.`}}}},E={name:`Responsive: именованные области`,render:()=>(0,u.jsx)(s,{title:`Перестройка layout через grid-template-areas`,description:`Семантический порядок DOM не меняется: CSS переставляет те же header, navigation, main, aside и footer.`,legend:[`laptop — navigation и aside окружают main по бокам`,`tablet — navigation сверху, aside рядом с main`,`mobile — все области образуют одну колонку`],children:(0,u.jsx)(a.Container,{areas:{mobile:`"header" "navigation" "main" "aside" "footer"`,tablet:`"header header" "navigation navigation" "main aside" "footer footer"`,laptop:`"header header header" "navigation main aside" "footer footer footer"`},templateColumns:{mobile:`minmax(0, 1fr)`,tablet:`minmax(0, 2fr) minmax(12em, 1fr)`,laptop:`12em minmax(0, 1fr) 14em`},templateRows:{mobile:`repeat(5, auto)`,tablet:`auto auto minmax(14em, 1fr) auto`,laptop:`auto minmax(18em, 1fr) auto`},gap:{mobile:`sm`,tablet:`md`,laptop:`lg`},style:f.container,children:[[`header`,`Header`,0],[`navigation`,`Navigation`,1],[`main`,`Main`,2],[`aside`,`Aside`,3],[`footer`,`Footer`,4]].map(([e,t,n])=>(0,u.jsx)(a.Item,{area:{mobile:String(e),tablet:String(e),laptop:String(e)},children:(0,u.jsx)(`div`,{style:{...f.item,minWidth:0,height:`100%`,backgroundColor:p(Number(n))},children:t})},String(e)))})}),args:{children:void 0}},D={name:`Responsive: позиционирование элементов`,render:()=>(0,u.jsx)(s,{title:`Grid.Item: column, row, alignSelf и justifySelf`,description:`На каждом режиме меняются и CSS placement-значения, и классы индивидуального выравнивания.`,legend:[`laptop — акцент занимает три колонки и две строки`,`tablet — акцент занимает две колонки`,`mobile — каждый элемент занимает одну строку`],children:(0,u.jsxs)(a.Container,{templateColumns:{mobile:`minmax(0, 1fr)`,tablet:`repeat(2, minmax(0, 1fr))`,laptop:`repeat(4, minmax(0, 1fr))`},templateRows:{mobile:`repeat(3, auto)`,tablet:`repeat(2, 10em)`,laptop:`repeat(2, 11em)`},gap:`md`,style:f.container,children:[(0,u.jsx)(a.Item,{column:{mobile:`1`,tablet:`1 / 3`,laptop:`1 / 4`},row:{mobile:`1`,tablet:`1`,laptop:`1 / 3`},alignSelf:{mobile:`stretch`,tablet:`center`,laptop:`stretch`},justifySelf:{mobile:`stretch`,tablet:`stretch`,laptop:`center`},children:(0,u.jsx)(`div`,{style:{...f.item,minWidth:0,height:`100%`,backgroundColor:p(0)},children:`Акцент`})}),(0,u.jsx)(a.Item,{column:{mobile:`1`,tablet:`1`,laptop:`4`},row:{mobile:`2`,tablet:`2`,laptop:`1`},alignSelf:{mobile:`stretch`,tablet:`start`,laptop:`start`},justifySelf:{mobile:`stretch`,tablet:`start`,laptop:`stretch`},children:(0,u.jsx)(`div`,{style:{...f.item,minWidth:0,backgroundColor:p(1)},children:`Дополнение A`})}),(0,u.jsx)(a.Item,{column:{mobile:`1`,tablet:`2`,laptop:`4`},row:{mobile:`3`,tablet:`2`,laptop:`2`},alignSelf:{mobile:`stretch`,tablet:`end`,laptop:`end`},justifySelf:{mobile:`stretch`,tablet:`end`,laptop:`stretch`},children:(0,u.jsx)(`div`,{style:{...f.item,minWidth:0,backgroundColor:p(2)},children:`Дополнение B`})})]})}),args:{children:void 0}},O={name:`Responsive: intrinsic auto-fit`,render:()=>(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{children:`Intrinsic auto-fit без responsive prop`}),(0,u.jsx)(a.Container,{templateColumns:`repeat(auto-fit, minmax(min(100%, 300px), 1fr))`,gap:`lg`,style:f.container,children:[1,2,3,4,5,6].map(e=>(0,u.jsxs)(l,{index:e,children:[`Adaptive Card `,e]},e))})]}),args:{children:void 0}},h.parameters={...h.parameters,docs:{...h.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>
+            </>
+  }
+}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.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
+  }
+}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.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
+  }
+}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.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
+  }
+}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.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
+  }
+}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.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
+  }
+}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.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
+  }
+}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.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
+  }
+}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.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
+  }
+}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.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
+  }
+}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+  name: "Responsive: шаблоны контейнера",
+  render: () => <ResponsiveLayoutPreview title="Колонки, строки, auto-flow, gap и выравнивание" description="Все значения присутствуют уже в SSR markup; изменение ширины переключает только CSS-правила." legend={["laptop — четыре колонки, dense flow, gap xl", "tablet — две колонки, row flow, gap md", "mobile — одна колонка, row flow, gap sm"]}>
+            <Grid.Container templateColumns={{
+      mobile: "minmax(0, 1fr)",
+      tablet: "repeat(2, minmax(0, 1fr))",
+      laptop: "repeat(4, minmax(0, 1fr))"
+    }} templateRows={{
+      mobile: "repeat(6, auto)",
+      tablet: "repeat(3, minmax(7em, auto))",
+      laptop: "repeat(2, minmax(8em, auto))"
+    }} autoRows={{
+      mobile: "auto",
+      tablet: "minmax(7em, auto)",
+      laptop: "minmax(8em, auto)"
+    }} row={{
+      mobile: true,
+      tablet: true,
+      laptop: false
+    }} dense={{
+      mobile: false,
+      tablet: false,
+      laptop: true
+    }} gap={{
+      mobile: "sm",
+      tablet: "md",
+      laptop: "xl"
+    }} align={{
+      mobile: "stretch",
+      tablet: "center",
+      laptop: "end"
+    }} justify={{
+      mobile: "stretch",
+      tablet: "stretch",
+      laptop: "center"
+    }} style={demoStyles.container}>
+                {[1, 2, 3, 4, 5, 6].map(i => <DemoItem key={i} index={i}>
+                        Карточка {i}
+                    </DemoItem>)}
+            </Grid.Container>
+        </ResponsiveLayoutPreview>,
+  args: {
+    children: undefined
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Проверяет responsive CSS-классы и произвольные значения templateColumns/templateRows/autoRows в одном SSR-safe сценарии."
+      }
+    }
+  }
+}`,...T.parameters?.docs?.source}}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
+  name: "Responsive: именованные области",
+  render: () => <ResponsiveLayoutPreview title="Перестройка layout через grid-template-areas" description="Семантический порядок DOM не меняется: CSS переставляет те же header, navigation, main, aside и footer." legend={["laptop — navigation и aside окружают main по бокам", "tablet — navigation сверху, aside рядом с main", "mobile — все области образуют одну колонку"]}>
+            <Grid.Container areas={{
+      mobile: '"header" "navigation" "main" "aside" "footer"',
+      tablet: '"header header" "navigation navigation" "main aside" "footer footer"',
+      laptop: '"header header header" "navigation main aside" "footer footer footer"'
+    }} templateColumns={{
+      mobile: "minmax(0, 1fr)",
+      tablet: "minmax(0, 2fr) minmax(12em, 1fr)",
+      laptop: "12em minmax(0, 1fr) 14em"
+    }} templateRows={{
+      mobile: "repeat(5, auto)",
+      tablet: "auto auto minmax(14em, 1fr) auto",
+      laptop: "auto minmax(18em, 1fr) auto"
+    }} gap={{
+      mobile: "sm",
+      tablet: "md",
+      laptop: "lg"
+    }} style={demoStyles.container}>
+                {[["header", "Header", 0], ["navigation", "Navigation", 1], ["main", "Main", 2], ["aside", "Aside", 3], ["footer", "Footer", 4]].map(([area, label, color]) => <Grid.Item key={String(area)} area={{
+        mobile: String(area),
+        tablet: String(area),
+        laptop: String(area)
+      }}>
+                        <div style={{
+          ...demoStyles.item,
+          minWidth: 0,
+          height: "100%",
+          backgroundColor: getItemColor(Number(color))
+        }}>
+                            {label}
+                        </div>
+                    </Grid.Item>)}
+            </Grid.Container>
+        </ResponsiveLayoutPreview>,
+  args: {
+    children: undefined
+  }
+}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
+  name: "Responsive: позиционирование элементов",
+  render: () => <ResponsiveLayoutPreview title="Grid.Item: column, row, alignSelf и justifySelf" description="На каждом режиме меняются и CSS placement-значения, и классы индивидуального выравнивания." legend={["laptop — акцент занимает три колонки и две строки", "tablet — акцент занимает две колонки", "mobile — каждый элемент занимает одну строку"]}>
+            <Grid.Container templateColumns={{
+      mobile: "minmax(0, 1fr)",
+      tablet: "repeat(2, minmax(0, 1fr))",
+      laptop: "repeat(4, minmax(0, 1fr))"
+    }} templateRows={{
+      mobile: "repeat(3, auto)",
+      tablet: "repeat(2, 10em)",
+      laptop: "repeat(2, 11em)"
+    }} gap="md" style={demoStyles.container}>
+                <Grid.Item column={{
+        mobile: "1",
+        tablet: "1 / 3",
+        laptop: "1 / 4"
+      }} row={{
+        mobile: "1",
+        tablet: "1",
+        laptop: "1 / 3"
+      }} alignSelf={{
+        mobile: "stretch",
+        tablet: "center",
+        laptop: "stretch"
+      }} justifySelf={{
+        mobile: "stretch",
+        tablet: "stretch",
+        laptop: "center"
+      }}>
+                    <div style={{
+          ...demoStyles.item,
+          minWidth: 0,
+          height: "100%",
+          backgroundColor: getItemColor(0)
+        }}>Акцент</div>
+                </Grid.Item>
+                <Grid.Item column={{
+        mobile: "1",
+        tablet: "1",
+        laptop: "4"
+      }} row={{
+        mobile: "2",
+        tablet: "2",
+        laptop: "1"
+      }} alignSelf={{
+        mobile: "stretch",
+        tablet: "start",
+        laptop: "start"
+      }} justifySelf={{
+        mobile: "stretch",
+        tablet: "start",
+        laptop: "stretch"
+      }}>
+                    <div style={{
+          ...demoStyles.item,
+          minWidth: 0,
+          backgroundColor: getItemColor(1)
+        }}>Дополнение A</div>
+                </Grid.Item>
+                <Grid.Item column={{
+        mobile: "1",
+        tablet: "2",
+        laptop: "4"
+      }} row={{
+        mobile: "3",
+        tablet: "2",
+        laptop: "2"
+      }} alignSelf={{
+        mobile: "stretch",
+        tablet: "end",
+        laptop: "end"
+      }} justifySelf={{
+        mobile: "stretch",
+        tablet: "end",
+        laptop: "stretch"
+      }}>
+                    <div style={{
+          ...demoStyles.item,
+          minWidth: 0,
+          backgroundColor: getItemColor(2)
+        }}>Дополнение B</div>
+                </Grid.Item>
+            </Grid.Container>
+        </ResponsiveLayoutPreview>,
+  args: {
+    children: undefined
+  }
+}`,...D.parameters?.docs?.source}}},O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
+  name: "Responsive: intrinsic auto-fit",
+  render: () => <div>
+            <h3>Intrinsic auto-fit без responsive prop</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
+  }
+}`,...O.parameters?.docs?.source}}},k=[`BasicGrid`,`AutoFlow`,`Alignment`,`Gaps`,`PredefinedVariants`,`ComplexTemplates`,`GridAreas`,`ItemPlacement`,`InlineGrid`,`RealWorld`,`ResponsiveTemplates`,`ResponsiveAreas`,`ResponsiveItemPlacement`,`IntrinsicResponsive`]})))()}export{v as a,C as c,y as d,w as f,A as g,T as h,b as i,O as l,D as m,g as n,x as o,E as p,h as r,c as s,_ as t,S as u};