import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{t}from"./react-C21x__mS.js";import{i as n,r as ee,t as te}from"./media-BycWpjAl.js";var 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,ne,re,ie,ae,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,oe,K,q,se,ce,le,ue,de,fe,pe,me,J;function he(){return(he=e((()=>{r=`_5Z2YQF`,i=`gAEXju`,a=`KdmGbk`,o=`uOpH1m`,s=`EOUgpE`,c=`PoMD0P`,l=`FBebhA`,u=`rwvhfS`,d=`ZIsGgj`,f=`lbAie9`,p=`ylmmN3`,m=`Fg86QU`,h=`_3qWtbZ`,g=`gIXZ8P`,_=`xXxHZM`,v=`zRgpft`,y=`Fb1W2U`,b=`_2EojT9`,x=`gYCGa5`,S=`JN0CZr`,C=`_2QvtUb`,w=`_1kRriS`,T=`ocLWZU`,E=`TS1qri`,D=`FXfvI7`,O=`biKmzi`,k=`_4-sIS7`,ne=`lbdoyi`,re=`WvAC9I`,ie=`LN4Ak-`,ae=`XC0FuJ`,A=`_6b9wZI`,j=`KevE4M`,M=`Sn-je4`,N=`Wnx9iF`,P=`RAoqm2`,F=`nUjbmv`,I=`TjTsA7`,L=`VdpzYk`,R=`peszxb`,z=`E98bqx`,B=`CdaBbu`,V=`leVL0N`,H=`_6mOZVj`,U=`XHgjM3`,W=`wtrn5A`,G=`LkIh-N`,oe=`Vhdvpo`,K=`cyg2du`,q=`Ptd1ad`,se=`Z22Yty`,ce=`gycEgN`,le=`s69iy2`,ue=`pKEJ9k`,de=`qWkZVw`,fe=`gUbUDY`,pe=`S0HulN`,me=`K2fFKT`,J={grid:r,inline:i,row:a,column:o,dense:s,gapNone:c,gapRowXs:l,gapRowSm:u,gapRowMd:d,gapRowLg:f,gapRowXl:p,gapColumnXs:m,gapColumnSm:h,gapColumnMd:g,gapColumnLg:_,gapColumnXl:v,gapXs:y,gapSm:b,gapMd:x,gapLg:S,gapXl:C,alignStart:w,alignCenter:T,alignEnd:E,alignStretch:D,alignBaseline:O,justifyStart:k,justifyCenter:ne,justifyEnd:re,justifyStretch:ie,alignContentStart:ae,alignContentCenter:A,alignContentEnd:j,alignContentStretch:M,alignContentBetween:N,alignContentAround:P,alignContentEvenly:F,justifyContentStart:I,justifyContentCenter:L,justifyContentEnd:R,justifyContentStretch:z,justifyContentBetween:B,justifyContentAround:V,justifyContentEvenly:H,item:U,areaAuto:W,alignSelfStart:G,alignSelfCenter:oe,alignSelfEnd:K,alignSelfStretch:q,alignSelfBaseline:se,justifySelfStart:ce,justifySelfCenter:le,justifySelfEnd:ue,justifySelfStretch:de,autoRows1fr:fe,columnsAuto1fr:pe,singleColumn:me}})))()}var Y,ge,_e,X,ve;function Z(){return(Z=e((()=>{Y=t(),he(),ge=e=>(0,Y.useMemo)(()=>{let t=[J.grid];return e.inline&&t.push(J.inline),e.column?t.push(J.column):e.dense?t.push(J.dense):e.row&&t.push(J.row),e.align&&t.push(J[`align${e.align.charAt(0).toUpperCase()+e.align.slice(1)}`]),e.justify&&t.push(J[`justify${e.justify.charAt(0).toUpperCase()+e.justify.slice(1)}`]),e.justifyContent&&t.push(J[`justifyContent${e.justifyContent.charAt(0).toUpperCase()+e.justifyContent.slice(1)}`]),e.alignContent&&t.push(J[`alignContent${e.alignContent.charAt(0).toUpperCase()+e.alignContent.slice(1)}`]),e.gap===`none`?t.push(J.gapNone):e.gap&&t.push(J[`gap${e.gap.charAt(0).toUpperCase()+e.gap.slice(1)}`]),e.gapRow&&t.push(J[`gapRow${e.gapRow.charAt(0).toUpperCase()+e.gapRow.slice(1)}`]),e.gapColumn&&t.push(J[`gapColumn${e.gapColumn.charAt(0).toUpperCase()+e.gapColumn.slice(1)}`]),e.variant===`single-column`?t.push(J.singleColumn):e.variant===`auto-1fr`?t.push(J.autoRows1fr):e.variant===`auto1fr-rows-auto`&&t.push(J.columnsAuto1fr),t.filter(Boolean).join(` `)},[e]),_e=e=>(0,Y.useMemo)(()=>{let t={};return e.templateColumns&&(t.gridTemplateColumns=e.templateColumns),e.templateRows&&(t.gridTemplateRows=e.templateRows),e.autoColumns&&(t.gridAutoColumns=e.autoColumns),e.autoRows&&(t.gridAutoRows=e.autoRows),e.areas&&(t.gridTemplateAreas=e.areas),t},[e.templateColumns,e.templateRows,e.autoColumns,e.autoRows,e.areas]),X=e=>(0,Y.useMemo)(()=>{let t=[J.item];return e.alignSelf&&t.push(J[`alignSelf${e.alignSelf.charAt(0).toUpperCase()+e.alignSelf.slice(1)}`]),e.justifySelf&&t.push(J[`justifySelf${e.justifySelf.charAt(0).toUpperCase()+e.justifySelf.slice(1)}`]),t.filter(Boolean).join(` `)},[e]),ve=e=>(0,Y.useMemo)(()=>{let t={};return e.area&&(t.gridArea=e.area),e.column&&(t.gridColumn=e.column),e.row&&(t.gridRow=e.row),t},[e.area,e.column,e.row])})))()}var Q,$;function ye(){return(ye=e((()=>{Q=t(),ee(),Z(),$=(0,Q.forwardRef)(({children:e,className:t=``,as:ee,style:r,inline:i,row:a,column:o,dense:s,gap:c,gapRow:l,gapColumn:u,align:d,justify:f,alignContent:p,justifyContent:m,templateColumns:h,templateRows:g,autoColumns:_,autoRows:v,areas:y,variant:b,...x},S)=>{let{activeBreakpoint:C}=te(),w=(0,Q.useMemo)(()=>({inline:n(i,C),row:n(a,C),column:n(o,C),dense:n(s,C),gap:n(c,C),gapRow:n(l,C),gapColumn:n(u,C),align:n(d,C),justify:n(f,C),alignContent:n(p,C),justifyContent:n(m,C),variant:n(b,C)}),[C,d,p,o,s,c,u,l,i,f,m,a,b]),T=(0,Q.useMemo)(()=>({templateColumns:n(h,C),templateRows:n(g,C),autoColumns:n(_,C),autoRows:n(v,C),areas:n(y,C)}),[C,h,g,_,v,y]),E=ge(w),D=_e(T),O=[E,t].filter(Boolean).join(` `),k={...D,...r};return(0,Q.createElement)(ee||`div`,{...x,ref:S,className:O,style:k},e)}),$.displayName=`GridContainer`,$.__docgenInfo={description:``,methods:[],displayName:`GridContainer`,props:{id:{required:!1,tsType:{name:`string`},description:``},inline:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Включение inline-grid вместо обычного grid

Позволяет grid-контейнеру вести себя как строчный элемент,
обтекаясь текстом и другими элементами. Полезно для встраивания grid-раскладки
в текстовый поток или рядом с другими inline-элементами.

Пример использования: кнопки с иконками и текстом, inline-формы, элементы навигации.

@default false`},row:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Автоматическое размещение элементов по строкам (grid-auto-flow: row)

Элементы заполняют каждую строку по порядку, переходя на новую строку при необходимости.
Стандартное поведение CSS Grid.

@default false`},column:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Автоматическое размещение элементов по колонкам (grid-auto-flow: column)

Элементы заполняют каждую колонку по порядку, переходя на новую колонку при необходимости.
Полезно для вертикальных списков или когда важно сохранять порядок по вертикали.

@default false`},dense:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Плотное размещение элементов (grid-auto-flow: dense)

Система пытается заполнить все пустые ячейки, даже если это нарушает порядок элементов.
Особенно полезно при использовании grid-column/grid-row span, чтобы избежать "дыр" в раскладке.

@default false`},gap:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"none" | "xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"none"`},{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]}],raw:`ResponsiveValue<"none" | "xs" | "sm" | "md" | "lg" | "xl">`},description:`Отступы между grid-элементами

Управляет расстоянием между строками и колонками одновременно.
Использует предопределенные значения из дизайн-системы для согласованности интерфейсов.`},gapRow:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]}],raw:`ResponsiveValue<"xs" | "sm" | "md" | "lg" | "xl">`},description:`Отступы только между строками

Позволяет установить разные расстояния для строк и колонок.
Полезно когда вертикальные и горизонтальные отступы должны отличаться.

Пример: карточки товаров где между рядами нужно больше места чем между колонками.`},gapColumn:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]}],raw:`ResponsiveValue<"xs" | "sm" | "md" | "lg" | "xl">`},description:`Отступы только между колонками

Устанавливает расстояние только между колонками grid-сетки.
Используется вместе с gapRow для тонкого контроля над отступами.`},align:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "baseline"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"baseline"`}]}],raw:`ResponsiveValue<"start" | "center" | "end" | "stretch" | "baseline">`},description:`Выравнивание элементов по вертикальной оси (align-items)

Определяет как элементы выравниваются внутри своих ячеек по вертикали.
Применяется ко всем элементам grid-контейнера.`},justify:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`}]}],raw:`ResponsiveValue<"start" | "center" | "end" | "stretch">`},description:`Выравнивание элементов по горизонтальной оси (justify-items)

Определяет как элементы выравниваются внутри своих ячеек по горизонтали.
Влияет на позиционирование контента внутри каждой grid-ячейки.`},alignContent:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"between"`},{name:`literal`,value:`"around"`},{name:`literal`,value:`"evenly"`}]}],raw:`ResponsiveValue<"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly">`},description:`Выравнивание всего grid-контента по вертикали (align-content)

Работает когда общая высота grid-элементов меньше высоты контейнера.
Определяет распределение свободного вертикального пространства.`},justifyContent:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"between"`},{name:`literal`,value:`"around"`},{name:`literal`,value:`"evenly"`}]}],raw:`ResponsiveValue<"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly">`},description:`Выравнивание всего grid-контента по горизонтали (justify-content)

Работает когда общая ширина grid-элементов меньше ширины контейнера.
Определяет распределение свободного горизонтального пространства.`},templateColumns:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]}],raw:`ResponsiveValue<GridTemplate>`},description:`Определение колонок сетки (grid-template-columns)

Строка с CSS значениями для создания структуры колонок.
Поддерживает все CSS-значения: фиксированные размеры, fr-единицы, repeat(), minmax(), auto-fit, auto-fill.

Примеры:
- "1fr 1fr 1fr" - 3 равные колонки
- "15em 1fr" - фиксированный сайдбар + гибкое содержимое
- "repeat(auto-fit, minmax(20em, 1fr))" - адаптивные карточки
- "auto 1fr auto" - хедер-контент-футер`},templateRows:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]}],raw:`ResponsiveValue<GridTemplate>`},description:`Определение строк сетки (grid-template-rows)

Строка с CSS значениями для создания структуры строк.
Используется когда нужно явно контролировать высоту строк.

Примеры:
- "auto 1fr auto" - классический макет (хедер-контент-футер)
- "10em 20em" - фиксированные высоты строк
- "minmax(10em, auto)" - минимальная высота с возможностью роста`},autoColumns:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"auto" | "min-content" | "max-content" | "1fr" | string`,elements:[{name:`literal`,value:`"auto"`},{name:`literal`,value:`"min-content"`},{name:`literal`,value:`"max-content"`},{name:`literal`,value:`"1fr"`},{name:`string`}]}],raw:`ResponsiveValue<GridAuto>`},description:`Размер автоматически создаваемых колонок (grid-auto-columns)

Определяет размер колонок которые создаются автоматически
когда элементов больше чем явно объявленных колонок в templateColumns.

Пример: если templateColumns="1fr 1fr", но элементов 5,
autoColumns определит размер для 3-й и последующих колонок.`},autoRows:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"auto" | "min-content" | "max-content" | "1fr" | string`,elements:[{name:`literal`,value:`"auto"`},{name:`literal`,value:`"min-content"`},{name:`literal`,value:`"max-content"`},{name:`literal`,value:`"1fr"`},{name:`string`}]}],raw:`ResponsiveValue<GridAuto>`},description:`Размер автоматически создаваемых строк (grid-auto-rows)

Определяет размер строк которые создаются автоматически
когда элементов больше чем явно объявленных строк в templateRows.
Часто используется с значениями minmax() для адаптивных высот.

Пример: "minmax(10em, auto)" - минимальная высота 100px, растет по контенту.`},areas:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`string`}],raw:`ResponsiveValue<string>`},description:`Именованные области сетки (grid-template-areas)

Создает именованные области для семантической разметки.
Позволяет легко создавать сложные макеты с понятной структурой.

Формат: строки в кавычках, имена областей через пробелы.
Пример:
\`
"header header"
"sidebar content"
"footer footer"
\`
Затем используйте <GridItem area="header"> для размещения.`},variant:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"single-column" | "auto-1fr" | "auto1fr-rows-auto"`,elements:[{name:`literal`,value:`"single-column"`},{name:`literal`,value:`"auto-1fr"`},{name:`literal`,value:`"auto1fr-rows-auto"`}]}],raw:`ResponsiveValue<"single-column" | "auto-1fr" | "auto1fr-rows-auto">`},description:`Предопределенные варианты раскладки

Готовые решения для частых сценариев использования.
Упрощают создание стандартных макетов без ручного указания templateColumns/templateRows.`},children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:`Дочерние элементы grid-контейнера

Любые React-элементы которые будут отображаться внутри grid-раскладки.
Рекомендуется использовать Grid.Item для лучшего контроля над позиционированием.`},as:{required:!1,tsType:{name:`JSX.IntrinsicElements`},description:`HTML-тег для рендеринга

Позволяет изменить HTML-тег контейнера для семантической разметки.

Примеры:
- as="main" для основного контента
- as="nav" для навигации
- as="section" для секций контента
- as="ul" для списков с grid-раскладкой

@default "div"`},className:{required:!1,tsType:{name:`string`},description:`Дополнительные CSS-классы

Позволяет добавить кастомные стили к grid-контейнеру.
Используется для специфических случаев которые не покрываются пропсами компонента.`,defaultValue:{value:`""`,computed:!1}},style:{required:!1,tsType:{name:`CSSProperties`},description:`Инлайн-стили

JavaScript-объект с CSS-свойствами для тонкого контроля над стилями.
Используется когда нужно динамически вычислять стили или для свойств не покрытых пропсами.

Важно: инлайн-стили имеют высший приоритет, переопределяя CSS-классы.`}},composes:[`HTMLAttributes`]}})))()}export{ve as a,X as i,ye as n,Z as r,$ as t};