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

Связывает элемент с областью объявленной в GridContainer areas.
Самый простой способ позиционирования в сложных макетах.

Пример: если в контейнере areas включает "header", то area="header"
разместит элемент в этой области.`},column:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`string`}],raw:`ResponsiveValue<string>`},description:`Позиционирование элемента в колонках

CSS-значение для grid-column: начало / конец.
Позволяет тонко контролировать размещение элемента в колонках.

Примеры:
- "1" - разместить в первой колонке
- "1 / 3" - растянуть с первой по третью колонку
- "span 2" - занять 2 колонки
- "2 / span 3" - начать со второй, занять 3 колонки`},row:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`string`}],raw:`ResponsiveValue<string>`},description:`Позиционирование элемента в строках

CSS-значение для grid-row: начало / конец.
Позволяет тонко контролировать размещение элемента в строках.

Примеры:
- "2" - разместить во второй строке
- "1 / 4" - растянуть с первой по четвертую строку
- "span 3" - занять 3 строки`},alignSelf:{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-self)

Переопределяет выравнивание установленное в GridContainer align.
Позволяет конкретному элементу иметь отличное от остальных выравнивание.

Пример: в контейнере align="center", но для одного элемента alignSelf="start".`},justifySelf:{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-self)

Переопределяет выравнивание установленное в GridContainer justify.
Позволяет конкретному элементу иметь отличное от остальных выравнивание.

Пример: в контейнере justify="stretch", но для кнопки justifySelf="center".`},children:{required:!1,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:`Контент внутри grid-элемента

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

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

Примеры:
- as="li" для элементов списка
- as="article" для карточек контента
- as="header" для шапки области

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

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

JavaScript-объект с CSS-свойствами для тонкого контроля над стилями элемента.
Особенно полезно для динамических расчетов позиционирования или анимаций.`}},composes:[`HTMLAttributes`]}})),we,Te=t((()=>{Z(),Ce(),we={Container:X,Item:$}}));export{Z as a,X as i,Te as n,Ce as r,we as t};