{"version":3,"file":"FlexBox.mjs","sources":["../../../../../../../../../web/src/adminPortal/shared/components/FlexBox.tsx"],"sourcesContent":["import { useTheme } from '@mui/material';\nimport React, { FC, ReactNode } from 'react';\n\nimport { DEFAULT_GAP } from '../components/constants';\n\ntype Props = {\n  gap?: number; // 8px scaling factor. For example, gap={3} means 24px of gap spacing. Defaults to DEFAULT_GAP.\n  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\n  flexDirection?: 'row' | 'column';\n  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';\n  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';\n  children: ReactNode;\n};\n\n// Row container that will wrap according to width of the container\nexport const FlexBox: FC<Props> = ({ children, gap, alignItems, flexDirection, justifyContent, flexWrap }) => {\n  const theme = useTheme();\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        gap: theme.spacing(gap ?? DEFAULT_GAP),\n        alignItems,\n        justifyContent,\n        flexDirection,\n        flexWrap,\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["FlexBox","children","gap","alignItems","flexDirection","justifyContent","flexWrap","theme","useTheme","React","div","style","display","spacing","DEFAULT_GAP"],"mappings":";;;;AAcA;AACO,MAAMA,OAAAA,GAAqB,CAAC,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,UAAU,EAAEC,aAAa,EAAEC,cAAc,EAAEC,QAAQ,EAAE,GAAA;AACvG,IAAA,MAAMC,KAAAA,GAAQC,QAAAA,EAAAA;AAEd,IAAA,qBACEC,EAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;QACCC,KAAAA,EAAO;YACLC,OAAAA,EAAS,MAAA;YACTV,GAAAA,EAAKK,KAAAA,CAAMM,OAAO,CAACX,GAAAA,IAAOY,WAAAA,CAAAA;AAC1BX,YAAAA,UAAAA;AACAE,YAAAA,cAAAA;AACAD,YAAAA,aAAAA;AACAE,YAAAA;AACF;AAECL,KAAAA,EAAAA,QAAAA,CAAAA;AAGP;;;;"}