{"version":3,"file":"Column.mjs","sources":["../../../../../../../../../web/src/ui/components/atoms/Column.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { FormHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\n\nimport styles from './Column.module.css';\n\nexport type ColumnProps = (\n  | ({ as?: 'div' } & HTMLAttributes<HTMLDivElement>)\n  | ({ as: 'form' } & FormHTMLAttributes<HTMLFormElement>)\n) & {\n  gap?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n};\n\n/**\n * Utility for basic column layout. Use custom styling or className for more complex cases.\n */\nconst Column = forwardRef<HTMLDivElement, ColumnProps>(\n  ({ as = 'div', gap, className, style: outerStyle, ...props }, ref) => {\n    const Element = as as 'div';\n    const style = { ...outerStyle };\n    if (gap != null) {\n      style.gap = gap === 1 ? 'var(--st-spacing)' : `var(--st-spacing-${gap})`;\n    }\n\n    return (\n      <Element\n        ref={ref}\n        className={classNames(className, styles.column)}\n        style={style}\n        {...(props as HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  },\n);\n\nexport default Column;\n"],"names":["Column","forwardRef","as","gap","className","style","outerStyle","props","ref","Element","React","classNames","styles","column"],"mappings":";;;;AAYA;;AAEC,UACKA,MAAAA,iBAASC,CAAAA,CACb,CAAC,EAAEC,KAAK,KAAK,EAAEC,GAAG,EAAEC,SAAS,EAAEC,KAAAA,EAAOC,UAAU,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AAC5D,IAAA,MAAMC,OAAAA,GAAUP,EAAAA;AAChB,IAAA,MAAMG,KAAAA,GAAQ;AAAE,QAAA,GAAGC;AAAW,KAAA;AAC9B,IAAA,IAAIH,OAAO,IAAA,EAAM;QACfE,KAAAA,CAAMF,GAAG,GAAGA,GAAAA,KAAQ,CAAA,GAAI,mBAAA,GAAsB,CAAC,iBAAiB,EAAEA,GAAAA,CAAI,CAAC,CAAC;AAC1E,IAAA;AAEA,IAAA,qBACEO,EAAA,CAAA,aAAA,CAACD,OAAAA,EAAAA;QACCD,GAAAA,EAAKA,GAAAA;QACLJ,SAAAA,EAAWO,UAAAA,CAAWP,SAAAA,EAAWQ,gBAAAA,CAAOC,MAAM,CAAA;QAC9CR,KAAAA,EAAOA,KAAAA;AACN,QAAA,GAAIE;;AAGX,CAAA;;;;"}