import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./LayoutGrid-lZI3Y0DM.js";import{n as o,t as s}from"./LayoutGridItem-CGrrEicw.js";import{n as c,r as l,t as u}from"./storybook-utils-CaC0I5St.js";var d,f,p,m,h;t((()=>{e(n(),1),o(),i(),u(),d=r(),f={title:`components/LayoutGrid`,component:a,subcomponents:{LayoutGridItem:s},argTypes:{gap:{description:l},padding:{description:c},columns:{description:l},justifyContent:{description:l},alignItems:{description:l},justifyItems:{description:l},hide:{description:l},relative:{description:l}}},p=()=>(0,d.jsxs)(a,{columns:4,alignItems:`start`,gap:`16`,children:[(0,d.jsx)(s,{children:(0,d.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`0.25rem`},children:[(0,d.jsx)(`div`,{style:{height:`2ch`,backgroundColor:`hotpink`}}),(0,d.jsx)(`div`,{style:{height:`2ch`,backgroundColor:`hotpink`}})]})}),(0,d.jsx)(s,{alignSelf:`end`,children:(0,d.jsx)(`div`,{style:{height:`2ch`,backgroundColor:`hotpink`}})}),(0,d.jsx)(`div`,{style:{height:`2ch`,backgroundColor:`hotpink`}}),(0,d.jsx)(`div`,{style:{height:`2ch`,backgroundColor:`hotpink`}})]}),p.storyName=`LayoutGrid`,m={parameters:{chromatic:{disableSnapshot:!0}},args:{gap:`16`,columns:3,alignItems:`start`,children:(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(`div`,{style:{minWidth:`100px`,minHeight:50,backgroundColor:`hotpink`},children:` `}),(0,d.jsx)(`div`,{style:{minWidth:`100px`,minHeight:75,backgroundColor:`hotpink`},children:` `}),(0,d.jsx)(`div`,{style:{minWidth:`100px`,minHeight:100,backgroundColor:`hotpink`,textAlign:`center`}})]}),dataset:{qaid:`layout-grid`}},argTypes:{dataset:{control:`object`},columns:{control:`number`},justifyItems:{control:`select`},hide:{control:`boolean`},relative:{control:`boolean`},children:{control:!1}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => <LayoutGrid columns={4} alignItems="start" gap="16">
        <LayoutGridItem>
            <div style={{
      display: 'flex',
      flexDirection: 'column',
      gap: '0.25rem'
    }}>
                <div style={{
        height: '2ch',
        backgroundColor: 'hotpink'
      }} />
                <div style={{
        height: '2ch',
        backgroundColor: 'hotpink'
      }} />
            </div>
        </LayoutGridItem>
        <LayoutGridItem alignSelf="end">
            <div style={{
      height: '2ch',
      backgroundColor: 'hotpink'
    }} />
        </LayoutGridItem>
        <div style={{
    height: '2ch',
    backgroundColor: 'hotpink'
  }} />
        <div style={{
    height: '2ch',
    backgroundColor: 'hotpink'
  }} />
    </LayoutGrid>`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  args: {
    gap: '16',
    columns: 3,
    alignItems: 'start',
    children: <>
                <div style={{
        minWidth: '100px',
        minHeight: 50,
        backgroundColor: 'hotpink'
      }}>
                    {' '}
                </div>
                <div style={{
        minWidth: '100px',
        minHeight: 75,
        backgroundColor: 'hotpink'
      }}>
                    {' '}
                </div>
                <div style={{
        minWidth: '100px',
        minHeight: 100,
        backgroundColor: 'hotpink',
        textAlign: 'center'
      }}></div>
            </>,
    dataset: {
      qaid: 'layout-grid'
    }
  },
  argTypes: {
    dataset: {
      control: 'object'
    },
    columns: {
      control: 'number'
    },
    justifyItems: {
      control: 'select'
    },
    hide: {
      control: 'boolean'
    },
    relative: {
      control: 'boolean'
    },
    children: {
      control: false
    }
  }
}`,...m.parameters?.docs?.source}}},h=[`Base`,`Playground`]}))();export{p as Base,m as Playground,h as __namedExportsOrder,f as default};