@clickhouse/click-ui 0.7.0 → 0.9.0

package/dist/cjs/components/FileUpload/FileUploadArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadArea.cjs","sources":["../../../../src/components/FileUpload/FileUploadArea.tsx"],"sourcesContent":["import type { DragEvent, FC, ReactNode } from 'react';\nimport { styled, css } from 'styled-components';\nimport { Text } from '@/components/Text';\nimport { Title } from '@/components/Title';\nimport { Icon } from '@/components/Icon';\nimport { Button } from '@/components/Button';\n\nconst UploadArea = styled.div<{\n  $isDragging: boolean;\n  $size: 'sm' | 'md';\n  $hasFile: boolean;\n  $isError?: boolean;\n}>`\n  container-type: inline-size;\n  container-name: uploadArea;\n  box-sizing: border-box;\n  width: 100%;\n  background-color: ${({ theme }) => theme.click.fileUpload.color.background.default};\n  border: ${({ theme }) => `1px solid ${theme.click.fileUpload.color.stroke.default}`};\n  border-radius: ${({ theme, $hasFile }) =>\n    $hasFile\n      ? `${theme.click.fileUpload.sm.radii.all}`\n      : `${theme.click.fileUpload.md.radii.all}`};\n  padding: ${({ theme, $hasFile, $size }) =>\n    $hasFile || $size === 'sm'\n      ? `${theme.click.fileUpload.sm.space.y} ${theme.click.fileUpload.sm.space.x}`\n      : `${theme.click.fileUpload.md.space.y} ${theme.click.fileUpload.md.space.x}`};\n  min-height: ${({ theme, $size }) =>\n    $size === 'sm'\n      ? `calc(${theme.click.fileUpload.sm.space.y} * 2 + ${theme.sizes[8]})`\n      : 'auto'};\n  display: flex;\n  flex-direction: ${props =>\n    props.$hasFile ? 'row' : props.$size === 'sm' ? 'row' : 'column'};\n  align-items: center;\n  justify-content: ${props =>\n    props.$hasFile ? 'space-between' : props.$size === 'sm' ? 'space-between' : 'center'};\n  gap: ${({ theme, $size }) =>\n    $size === 'sm'\n      ? theme.click.fileUpload.sm.space.gap\n      : theme.click.fileUpload.md.space.gap};\n  cursor: ${props => (props.$hasFile ? 'default' : 'pointer')};\n  transition: ${({ theme }) => theme.click.fileUpload.transitions.all};\n\n  ${props =>\n    !props.$hasFile &&\n    css`\n      border-style: dashed;\n      border-color: ${({ theme }) => theme.click.fileUpload.color.stroke.default};\n\n      ${props.$isDragging &&\n      css`\n        background-color: ${({ theme }) =>\n          theme.click.fileUpload.color.background.active};\n        border-color: ${({ theme }) => theme.click.fileUpload.color.stroke.active};\n      `}\n    `}\n\n  ${props =>\n    props.$isError &&\n    css`\n      background-color: ${({ theme }) => theme.click.fileUpload.color.background.error};\n      border-color: transparent;\n    `}\n`;\n\nconst FileUploadTitle = styled(Title)<{ $isNotSupported: boolean }>`\n  font: ${({ theme }) => theme.click.fileUpload.typography.title.default};\n  color: ${({ theme, $isNotSupported }) =>\n    $isNotSupported\n      ? theme.click.fileUpload.color.title.error\n      : theme.click.fileUpload.color.title.default};\n`;\n\nconst FileUploadDescription = styled(Text)`\n  font: ${({ theme }) => theme.click.fileUpload.typography.description.default};\n  color: ${({ theme }) => theme.click.fileUpload.color.description.default};\n`;\n\nconst UploadIcon = styled(Icon)`\n  svg {\n    width: ${({ theme }) => theme.click.fileUpload.md.icon.size.width};\n    height: ${({ theme }) => theme.click.fileUpload.md.icon.size.height};\n    color: ${({ theme }) => theme.click.fileUpload.md.color.icon.default};\n  }\n`;\n\nconst UploadText = styled.div<{ $size: 'sm' | 'md'; $hasFile: boolean }>`\n  text-align: ${props => (props.$hasFile || props.$size === 'sm' ? 'left' : 'center')};\n  ${props =>\n    (props.$hasFile || props.$size === 'sm') &&\n    css`\n      flex: 1;\n    `}\n\n  ${props =>\n    !props.$hasFile &&\n    props.$size === 'md' &&\n    css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      width: 100%;\n    `}\n`;\n\nexport interface FileUploadAreaProps {\n  title: string;\n  supportedFileTypes: string[];\n  size?: 'sm' | 'md';\n  isDragging: boolean;\n  isNotSupported: boolean;\n  hasFile?: boolean;\n  isError?: boolean;\n  multiple?: boolean;\n  onDragEnter: (e: DragEvent<HTMLDivElement>) => void;\n  onDragLeave: (e: DragEvent<HTMLDivElement>) => void;\n  onDragOver: (e: DragEvent<HTMLDivElement>) => void;\n  onDrop: (e: DragEvent<HTMLDivElement>) => void;\n  onClick?: () => void;\n  children?: ReactNode;\n}\n\nexport const FileUploadArea: FC<FileUploadAreaProps> = ({\n  title,\n  supportedFileTypes,\n  size = 'sm',\n  isDragging,\n  isNotSupported,\n  hasFile = false,\n  isError = false,\n  multiple = false,\n  onDragEnter,\n  onDragLeave,\n  onDragOver,\n  onDrop,\n  onClick,\n  children,\n}) => {\n  return (\n    <UploadArea\n      $isDragging={isDragging}\n      $size={size}\n      $hasFile={hasFile}\n      $isError={isError}\n      onDragEnter={onDragEnter}\n      onDragLeave={onDragLeave}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onClick={!hasFile ? onClick : undefined}\n    >\n      {!hasFile ? (\n        <>\n          <UploadIcon name=\"upload\" />\n          <UploadText\n            $size={size}\n            $hasFile={false}\n          >\n            {isNotSupported ? (\n              <FileUploadTitle\n                $isNotSupported\n                type=\"h1\"\n              >\n                Unsupported file type\n              </FileUploadTitle>\n            ) : (\n              <FileUploadTitle\n                $isNotSupported={isNotSupported}\n                type=\"h1\"\n              >\n                {title}\n              </FileUploadTitle>\n            )}\n            <FileUploadDescription>\n              Files supported: {supportedFileTypes.join(', ')}\n            </FileUploadDescription>\n          </UploadText>\n          <Button\n            type={'secondary'}\n            onClick={e => {\n              e.stopPropagation();\n              onClick?.();\n            }}\n          >\n            {multiple ? 'Browse files' : 'Browse file'}\n          </Button>\n        </>\n      ) : (\n        children\n      )}\n    </UploadArea>\n  );\n};\n"],"names":["UploadArea","styled","div","withConfig","componentId","theme","click","fileUpload","color","background","default","stroke","$hasFile","sm","radii","all","md","$size","space","y","x","sizes","props","gap","transitions","css","$isDragging","active","$isError","error","FileUploadTitle","Title","typography","title","$isNotSupported","FileUploadDescription","Text","description","UploadIcon","Icon","icon","size","width","height","UploadText","FileUploadArea","supportedFileTypes","isDragging","isNotSupported","hasFile","isError","multiple","onDragEnter","onDragLeave","onDragOver","onDrop","onClick","children","jsx","undefined","jsxs","Fragment","join","Button","e","stopPropagation"],"mappings":";;;;;;;;;;;AAOA,MAAMA,UAAAA,GAAaC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,yGAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,aAAA,cAAA,EAAA,+BAAA,EAAA,sCAAA,EAAA,OAAA,EAAA,YAAA,cAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,GAUP,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAMC,UAAAA,CAAWC,SACjE,CAAC;AAAA,EAAEL;AAAM,CAAA,KAAM,CAAA,UAAA,EAAaA,MAAMC,KAAAA,CAAMC,UAAAA,CAAWC,MAAMG,MAAAA,CAAOD,OAAO,IAChE,CAAC;AAAA,EAAEL,KAAAA;AAAAA,EAAOO;AAAS,CAAA,KAClCA,WACI,CAAA,EAAGP,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWM,GAAGC,KAAAA,CAAMC,GAAG,CAAA,CAAA,GACtC,CAAA,EAAGV,MAAMC,KAAAA,CAAMC,UAAAA,CAAWS,GAAGF,KAAAA,CAAMC,GAAG,IACjC,CAAC;AAAA,EAAEV,KAAAA;AAAAA,EAAOO,QAAAA;AAAAA,EAAUK;AAAM,CAAA,KACnCL,QAAAA,IAAYK,KAAAA,KAAU,IAAA,GAClB,CAAA,EAAGZ,MAAMC,KAAAA,CAAMC,UAAAA,CAAWM,EAAAA,CAAGK,KAAAA,CAAMC,CAAC,CAAA,CAAA,EAAId,KAAAA,CAAMC,KAAAA,CAAMC,WAAWM,EAAAA,CAAGK,KAAAA,CAAME,CAAC,CAAA,CAAA,GACzE,CAAA,EAAGf,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWS,GAAGE,KAAAA,CAAMC,CAAC,CAAA,CAAA,EAAId,KAAAA,CAAMC,MAAMC,UAAAA,CAAWS,EAAAA,CAAGE,KAAAA,CAAME,CAAC,IACjE,CAAC;AAAA,EAAEf,KAAAA;AAAAA,EAAOY;AAAM,CAAA,KAC5BA,KAAAA,KAAU,IAAA,GACN,CAAA,KAAA,EAAQZ,KAAAA,CAAMC,MAAMC,UAAAA,CAAWM,EAAAA,CAAGK,KAAAA,CAAMC,CAAC,UAAUd,KAAAA,CAAMgB,KAAAA,CAAM,CAAC,CAAC,MACjE,MAAA,EAEYC,CAAAA,KAAAA,KAChBA,KAAAA,CAAMV,QAAAA,GAAW,KAAA,GAAQU,KAAAA,CAAML,KAAAA,KAAU,IAAA,GAAO,QAAQ,QAAA,EAEvCK,CAAAA,KAAAA,KACjBA,KAAAA,CAAMV,QAAAA,GAAW,kBAAkBU,KAAAA,CAAML,KAAAA,KAAU,IAAA,GAAO,eAAA,GAAkB,UACvE,CAAC;AAAA,EAAEZ,KAAAA;AAAAA,EAAOY;AAAM,CAAA,KACrBA,UAAU,IAAA,GACNZ,KAAAA,CAAMC,MAAMC,UAAAA,CAAWM,EAAAA,CAAGK,MAAMK,GAAAA,GAChClB,KAAAA,CAAMC,MAAMC,UAAAA,CAAWS,EAAAA,CAAGE,MAAMK,GAAAA,EAC5BD,CAAAA,KAAAA,KAAUA,MAAMV,QAAAA,GAAW,SAAA,GAAY,WACnC,CAAC;AAAA,EAAEP;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWiB,WAAAA,CAAYT,KAE9DO,CAAAA,KAAAA,KACA,CAACA,KAAAA,CAAMV,QAAAA,IACPa,qEAEkB,CAAC;AAAA,EAAEpB;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAMG,OAAOD,OAAAA,EAEjEY,KAAAA,CAAMI,WAAAA,IACRD,oBAAAA,+CACsB,CAAC;AAAA,EAAEpB;AAAM,CAAA,KAC3BA,MAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAMC,UAAAA,CAAWkB,QAC1B,CAAC;AAAA,EAAEtB;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAMG,MAAAA,CAAOgB,MAAM,CAC1E,CAAA,EAGHL,CAAAA,KAAAA,KACAA,KAAAA,CAAMM,YACNH,oBAAAA,CAAG,CAAA,mBAAA,EAAA,4BAAA,GACmB,CAAC;AAAA,EAAEpB;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAMC,UAAAA,CAAWoB,KAAK,CAEjF,CAAA;AAGL,MAAMC,eAAAA,GAAkB7B,uBAAAA,CAAO8B,WAAK,CAAA,CAAC5B,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,GAAA,GAC3B,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,UAAAA,CAAWyB,UAAAA,CAAWC,KAAAA,CAAMvB,SACtD,CAAC;AAAA,EAAEL,KAAAA;AAAAA,EAAO6B;AAAgB,CAAA,KACjCA,eAAAA,GACI7B,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAMyB,KAAAA,CAAMJ,KAAAA,GACnCxB,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAMyB,KAAAA,CAAMvB,OAAO,CAAA;AAGlD,MAAMyB,qBAAAA,GAAwBlC,uBAAAA,CAAOmC,SAAI,CAAA,CAACjC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,GAAA,GAChC,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,UAAAA,CAAWyB,UAAAA,CAAWK,WAAAA,CAAY3B,SAC5D,CAAC;AAAA,EAAEL;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAM6B,YAAY3B,OAAO,CAAA;AAG1E,MAAM4B,UAAAA,GAAarC,uBAAAA,CAAOsC,SAAI,CAAA,CAACpC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,YAAA,EAAA,YAAA,SAAA,EAAA,IAAA,GAElB,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,UAAAA,CAAWS,GAAGwB,IAAAA,CAAKC,IAAAA,CAAKC,OAClD,CAAC;AAAA,EAAErC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,UAAAA,CAAWS,GAAGwB,IAAAA,CAAKC,IAAAA,CAAKE,QACpD,CAAC;AAAA,EAAEtC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,UAAAA,CAAWS,EAAAA,CAAGR,KAAAA,CAAMgC,KAAK9B,OAAO,CAAA;AAIxE,MAAMkC,UAAAA,GAAa3C,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,aAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACbkB,CAAAA,KAAAA,KAAUA,KAAAA,CAAMV,QAAAA,IAAYU,MAAML,KAAAA,KAAU,IAAA,GAAO,MAAA,GAAS,QAAA,EACxEK,YACCA,KAAAA,CAAMV,QAAAA,IAAYU,KAAAA,CAAML,KAAAA,KAAU,SACnCQ,oBAAAA,CAAG,CAAA,SAAA,CAAA,GAIHH,CAAAA,KAAAA,KACA,CAACA,KAAAA,CAAMV,QAAAA,IACPU,MAAML,KAAAA,KAAU,IAAA,IAChBQ,qBAAG,CAAA,mEAAA,CAAA,CAKF,CAAA;AAoBE,MAAMoB,iBAA0CA,CAAC;AAAA,EACtDZ,KAAAA;AAAAA,EACAa,kBAAAA;AAAAA,EACAL,IAAAA,GAAO,IAAA;AAAA,EACPM,UAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA,GAAU,KAAA;AAAA,EACVC,OAAAA,GAAU,KAAA;AAAA,EACVC,QAAAA,GAAW,KAAA;AAAA,EACXC,WAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC;AACF,CAAA,KAAM;AACJ,EAAA,uBACEC,cAAA,CAAC,cACC,WAAA,EAAaX,UAAAA,EACb,OAAON,IAAAA,EACP,QAAA,EAAUQ,SACV,QAAA,EAAUC,OAAAA,EACV,aACA,WAAA,EACA,UAAA,EACA,QACA,OAAA,EAAS,CAACD,UAAUO,OAAAA,GAAUG,MAAAA,EAE7B,QAAA,EAAA,CAACV,OAAAA,mBACAW,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAH,cAAA,CAAC,UAAA,EAAA,EAAW,MAAK,QAAA,EAAQ,CAAA;AAAA,oBACzBE,eAAA,CAAC,UAAA,EAAA,EACC,KAAA,EAAOnB,IAAAA,EACP,UAAU,KAAA,EAETO,QAAAA,EAAAA;AAAAA,MAAAA,cAAAA,mBACCU,cAAA,CAAC,eAAA,EAAA,EACC,eAAA,EAAe,IAAA,EACf,MAAK,IAAA,EAAI,QAAA,EAAA,uBAAA,EAGX,CAAA,mBAEAA,cAAA,CAAC,eAAA,EAAA,EACC,eAAA,EAAiBV,cAAAA,EACjB,IAAA,EAAK,MAEJf,QAAAA,EAAAA,KAAAA,EACH,CAAA;AAAA,sCAED,qBAAA,EAAA,EAAqB,QAAA,EAAA;AAAA,QAAA,mBAAA;AAAA,QACFa,kBAAAA,CAAmBgB,KAAK,IAAI;AAAA,OAAA,EAChD;AAAA,KAAA,EACF,CAAA;AAAA,oBACAJ,cAAA,CAACK,aAAA,EAAA,EACC,IAAA,EAAM,WAAA,EACN,SAASC,CAAAA,CAAAA,KAAK;AACZA,MAAAA,CAAAA,CAAEC,eAAAA,EAAgB;AAClBT,MAAAA,OAAAA,IAAU;AAAA,IACZ,CAAA,EAECL,QAAAA,EAAAA,QAAAA,GAAW,cAAA,GAAiB,aAAA,EAC/B;AAAA,GAAA,EACF,IAEAM,QAAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FileUploadArea.cjs","sources":["../../../../src/components/FileUpload/FileUploadArea.tsx"],"sourcesContent":["import type { DragEvent, FC, ReactNode } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Text } from '@/components/Text';\nimport { Title } from '@/components/Title';\nimport { Icon } from '@/components/Icon';\nimport { Button } from '@/components/Button';\nimport styles from './FileUploadArea.module.css';\n\nconst uploadAreaVariants = cva(styles['upload-area'], {\n  variants: {\n    radius: {\n      sm: styles['upload-area_radius_sm'],\n      md: styles['upload-area_radius_md'],\n    },\n    padding: {\n      sm: styles['upload-area_padding_sm'],\n      md: styles['upload-area_padding_md'],\n    },\n    minHeight: {\n      sm: styles['upload-area_min-height_sm'],\n      md: styles['upload-area_min-height_md'],\n    },\n    direction: {\n      row: styles['upload-area_direction_row'],\n      column: styles['upload-area_direction_column'],\n    },\n    justify: {\n      'space-between': styles['upload-area_justify_space-between'],\n      center: styles['upload-area_justify_center'],\n    },\n    gap: {\n      sm: styles['upload-area_gap_sm'],\n      md: styles['upload-area_gap_md'],\n    },\n    cursor: {\n      default: styles['upload-area_cursor_default'],\n      pointer: styles['upload-area_cursor_pointer'],\n    },\n    dashed: {\n      true: styles['upload-area_dashed_true'],\n    },\n    dragging: {\n      true: styles['upload-area_dragging_true'],\n    },\n    error: {\n      true: styles['upload-area_error_true'],\n    },\n  },\n});\n\nconst titleVariants = cva(styles.title, {\n  variants: {\n    notSupported: {\n      true: styles['title_not-supported_true'],\n    },\n  },\n});\n\nconst uploadTextVariants = cva(styles['upload-text'], {\n  variants: {\n    centered: {\n      true: styles['upload-text_centered_true'],\n    },\n    grow: {\n      true: styles['upload-text_grow_true'],\n    },\n  },\n});\n\nexport interface FileUploadAreaProps {\n  title: string;\n  supportedFileTypes: string[];\n  size?: 'sm' | 'md';\n  isDragging: boolean;\n  isNotSupported: boolean;\n  hasFile?: boolean;\n  isError?: boolean;\n  multiple?: boolean;\n  onDragEnter: (e: DragEvent<HTMLDivElement>) => void;\n  onDragLeave: (e: DragEvent<HTMLDivElement>) => void;\n  onDragOver: (e: DragEvent<HTMLDivElement>) => void;\n  onDrop: (e: DragEvent<HTMLDivElement>) => void;\n  onClick?: () => void;\n  children?: ReactNode;\n}\n\nexport const FileUploadArea: FC<FileUploadAreaProps> = ({\n  title,\n  supportedFileTypes,\n  size = 'sm',\n  isDragging,\n  isNotSupported,\n  hasFile = false,\n  isError = false,\n  multiple = false,\n  onDragEnter,\n  onDragLeave,\n  onDragOver,\n  onDrop,\n  onClick,\n  children,\n}) => {\n  const isCompact = hasFile || size === 'sm';\n\n  return (\n    <div\n      className={cn(\n        uploadAreaVariants({\n          radius: hasFile ? 'sm' : 'md',\n          padding: isCompact ? 'sm' : 'md',\n          minHeight: size === 'sm' ? 'sm' : 'md',\n          direction: hasFile || size === 'sm' ? 'row' : 'column',\n          justify: hasFile || size === 'sm' ? 'space-between' : 'center',\n          gap: size === 'sm' ? 'sm' : 'md',\n          cursor: hasFile ? 'default' : 'pointer',\n          dashed: !hasFile,\n          dragging: !hasFile && isDragging,\n          error: isError,\n        })\n      )}\n      onDragEnter={onDragEnter}\n      onDragLeave={onDragLeave}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onClick={!hasFile ? onClick : undefined}\n    >\n      {!hasFile ? (\n        <>\n          <Icon\n            name=\"upload\"\n            className={styles['upload-icon']}\n          />\n          <div\n            className={cn(\n              uploadTextVariants({\n                centered: !hasFile && size === 'md',\n                grow: hasFile || size === 'sm',\n              })\n            )}\n          >\n            {isNotSupported ? (\n              <Title\n                type=\"h1\"\n                className={cn(titleVariants({ notSupported: true }))}\n              >\n                Unsupported file type\n              </Title>\n            ) : (\n              <Title\n                type=\"h1\"\n                className={cn(titleVariants({ notSupported: isNotSupported }))}\n              >\n                {title}\n              </Title>\n            )}\n            <Text className={styles.description}>\n              Files supported: {supportedFileTypes.join(', ')}\n            </Text>\n          </div>\n          <Button\n            type={'secondary'}\n            onClick={e => {\n              e.stopPropagation();\n              onClick?.();\n            }}\n          >\n            {multiple ? 'Browse files' : 'Browse file'}\n          </Button>\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  );\n};\n"],"names":["uploadAreaVariants","cva","styles","variants","radius","sm","md","padding","minHeight","direction","row","column","justify","center","gap","cursor","default","pointer","dashed","true","dragging","error","titleVariants","title","notSupported","uploadTextVariants","centered","grow","FileUploadArea","supportedFileTypes","size","isDragging","isNotSupported","hasFile","isError","multiple","onDragEnter","onDragLeave","onDragOver","onDrop","onClick","children","isCompact","jsx","cn","undefined","jsxs","Fragment","Icon","Title","Text","description","join","Button","e","stopPropagation"],"mappings":";;;;;;;;;;;;;AAQA,MAAMA,kBAAAA,GAAqBC,0BAAAA,CAAIC,6BAAAA,CAAO,aAAa,CAAA,EAAG;AAAA,EACpDC,QAAAA,EAAU;AAAA,IACRC,MAAAA,EAAQ;AAAA,MACNC,EAAAA,EAAIH,8BAAO,uBAAuB,CAAA;AAAA,MAClCI,EAAAA,EAAIJ,8BAAO,uBAAuB;AAAA,KACpC;AAAA,IACAK,OAAAA,EAAS;AAAA,MACPF,EAAAA,EAAIH,8BAAO,wBAAwB,CAAA;AAAA,MACnCI,EAAAA,EAAIJ,8BAAO,wBAAwB;AAAA,KACrC;AAAA,IACAM,SAAAA,EAAW;AAAA,MACTH,EAAAA,EAAIH,8BAAO,2BAA2B,CAAA;AAAA,MACtCI,EAAAA,EAAIJ,8BAAO,2BAA2B;AAAA,KACxC;AAAA,IACAO,SAAAA,EAAW;AAAA,MACTC,GAAAA,EAAKR,8BAAO,2BAA2B,CAAA;AAAA,MACvCS,MAAAA,EAAQT,8BAAO,8BAA8B;AAAA,KAC/C;AAAA,IACAU,OAAAA,EAAS;AAAA,MACP,eAAA,EAAiBV,8BAAO,mCAAmC,CAAA;AAAA,MAC3DW,MAAAA,EAAQX,8BAAO,4BAA4B;AAAA,KAC7C;AAAA,IACAY,GAAAA,EAAK;AAAA,MACHT,EAAAA,EAAIH,8BAAO,oBAAoB,CAAA;AAAA,MAC/BI,EAAAA,EAAIJ,8BAAO,oBAAoB;AAAA,KACjC;AAAA,IACAa,MAAAA,EAAQ;AAAA,MACNC,OAAAA,EAASd,8BAAO,4BAA4B,CAAA;AAAA,MAC5Ce,OAAAA,EAASf,8BAAO,4BAA4B;AAAA,KAC9C;AAAA,IACAgB,MAAAA,EAAQ;AAAA,MACNC,IAAAA,EAAMjB,8BAAO,yBAAyB;AAAA,KACxC;AAAA,IACAkB,QAAAA,EAAU;AAAA,MACRD,IAAAA,EAAMjB,8BAAO,2BAA2B;AAAA,KAC1C;AAAA,IACAmB,KAAAA,EAAO;AAAA,MACLF,IAAAA,EAAMjB,8BAAO,wBAAwB;AAAA;AACvC;AAEJ,CAAC,CAAA;AAED,MAAMoB,aAAAA,GAAgBrB,0BAAAA,CAAIC,6BAAAA,CAAOqB,KAAAA,EAAO;AAAA,EACtCpB,QAAAA,EAAU;AAAA,IACRqB,YAAAA,EAAc;AAAA,MACZL,IAAAA,EAAMjB,8BAAO,0BAA0B;AAAA;AACzC;AAEJ,CAAC,CAAA;AAED,MAAMuB,kBAAAA,GAAqBxB,0BAAAA,CAAIC,6BAAAA,CAAO,aAAa,CAAA,EAAG;AAAA,EACpDC,QAAAA,EAAU;AAAA,IACRuB,QAAAA,EAAU;AAAA,MACRP,IAAAA,EAAMjB,8BAAO,2BAA2B;AAAA,KAC1C;AAAA,IACAyB,IAAAA,EAAM;AAAA,MACJR,IAAAA,EAAMjB,8BAAO,uBAAuB;AAAA;AACtC;AAEJ,CAAC,CAAA;AAmBM,MAAM0B,iBAA0CA,CAAC;AAAA,EACtDL,KAAAA;AAAAA,EACAM,kBAAAA;AAAAA,EACAC,IAAAA,GAAO,IAAA;AAAA,EACPC,UAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA,GAAU,KAAA;AAAA,EACVC,OAAAA,GAAU,KAAA;AAAA,EACVC,QAAAA,GAAW,KAAA;AAAA,EACXC,WAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC;AACF,CAAA,KAAM;AACJ,EAAA,MAAMC,SAAAA,GAAYT,WAAWH,IAAAA,KAAS,IAAA;AAEtC,EAAA,uBACEa,cAAA,CAAC,KAAA,EAAA,EACC,SAAA,EAAWC,MAAAA,CACT5C,kBAAAA,CAAmB;AAAA,IACjBI,MAAAA,EAAQ6B,UAAU,IAAA,GAAO,IAAA;AAAA,IACzB1B,OAAAA,EAASmC,YAAY,IAAA,GAAO,IAAA;AAAA,IAC5BlC,SAAAA,EAAWsB,IAAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,IAClCrB,SAAAA,EAAWwB,OAAAA,IAAWH,IAAAA,KAAS,IAAA,GAAO,KAAA,GAAQ,QAAA;AAAA,IAC9ClB,OAAAA,EAASqB,OAAAA,IAAWH,IAAAA,KAAS,IAAA,GAAO,eAAA,GAAkB,QAAA;AAAA,IACtDhB,GAAAA,EAAKgB,IAAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,IAC5Bf,MAAAA,EAAQkB,UAAU,SAAA,GAAY,SAAA;AAAA,IAC9Bf,QAAQ,CAACe,OAAAA;AAAAA,IACTb,QAAAA,EAAU,CAACa,OAAAA,IAAWF,UAAAA;AAAAA,IACtBV,KAAAA,EAAOa;AAAAA,GACR,CACH,CAAA,EACA,WAAA,EACA,aACA,UAAA,EACA,MAAA,EACA,OAAA,EAAS,CAACD,OAAAA,GAAUO,OAAAA,GAAUK,MAAAA,EAE7B,QAAA,EAAA,CAACZ,0BACAa,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAJ,cAAA,CAACK,aACC,IAAA,EAAK,QAAA,EACL,SAAA,EAAW9C,6BAAAA,CAAO,aAAa,CAAA,EAAE,CAAA;AAAA,oBAEnC4C,eAAA,CAAC,KAAA,EAAA,EACC,SAAA,EAAWF,MAAAA,CACTnB,kBAAAA,CAAmB;AAAA,MACjBC,QAAAA,EAAU,CAACO,OAAAA,IAAWH,IAAAA,KAAS,IAAA;AAAA,MAC/BH,IAAAA,EAAMM,WAAWH,IAAAA,KAAS;AAAA,KAC3B,CACH,CAAA,EAECE,QAAAA,EAAAA;AAAAA,MAAAA,cAAAA,kCACEiB,WAAA,EAAA,EACC,IAAA,EAAK,IAAA,EACL,SAAA,EAAWL,OAAGtB,aAAAA,CAAc;AAAA,QAAEE,YAAAA,EAAc;AAAA,OAAM,CAAC,CAAA,EAAE,QAAA,EAAA,uBAAA,EAGvD,CAAA,mBAEAmB,cAAA,CAACM,WAAA,EAAA,EACC,IAAA,EAAK,IAAA,EACL,SAAA,EAAWL,MAAAA,CAAGtB,aAAAA,CAAc;AAAA,QAAEE,YAAAA,EAAcQ;AAAAA,OAAgB,CAAC,CAAA,EAE5DT,QAAAA,EAAAA,KAAAA,EACH,CAAA;AAAA,sBAEFuB,eAAA,CAACI,SAAA,EAAA,EAAK,SAAA,EAAWhD,6BAAAA,CAAOiD,WAAAA,EAAY,QAAA,EAAA;AAAA,QAAA,mBAAA;AAAA,QAChBtB,kBAAAA,CAAmBuB,KAAK,IAAI;AAAA,OAAA,EAChD;AAAA,KAAA,EACF,CAAA;AAAA,oBACAT,cAAA,CAACU,aAAA,EAAA,EACC,IAAA,EAAM,WAAA,EACN,SAASC,CAAAA,CAAAA,KAAK;AACZA,MAAAA,CAAAA,CAAEC,eAAAA,EAAgB;AAClBf,MAAAA,OAAAA,IAAU;AAAA,IACZ,CAAA,EAECL,QAAAA,EAAAA,QAAAA,GAAW,cAAA,GAAiB,aAAA,EAC/B;AAAA,GAAA,EACF,IAEAM,QAAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/cjs/components/FileUpload/FileUploadArea.css

@@ -0,0 +1,130 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+.upload-area__3SxAA {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  align-items: center;
+  border: 1px solid var(--click-fileUpload-color-stroke-default);
+  background-color: var(--click-fileUpload-color-background-default);
+  transition: var(--click-fileUpload-transitions-all);
+  /* stylelint-disable-next-line container-name-pattern, value-keyword-case -- preserve original container-name from styled-components */
+  container-name: uploadArea;
+  container-type: inline-size;
+}
+
+/* border-radius: hasFile ? sm : md */
+.upload-area_radius_sm__DW4eQ {
+  border-radius: var(--click-fileUpload-sm-radii-all);
+}
+
+.upload-area_radius_md__k9cZA {
+  border-radius: var(--click-fileUpload-md-radii-all);
+}
+
+/* padding: hasFile || size === 'sm' ? sm : md */
+.upload-area_padding_sm__ci1xq {
+  padding: var(--click-fileUpload-sm-space-y) var(--click-fileUpload-sm-space-x);
+}
+
+.upload-area_padding_md__SflJQ {
+  padding: var(--click-fileUpload-md-space-y) var(--click-fileUpload-md-space-x);
+}
+
+/* min-height: size === 'sm' ? calc : auto */
+.upload-area_min-height_sm__JmKFU {
+  min-height: calc(var(--click-fileUpload-sm-space-y) * 2 + var(--sizes-8));
+}
+
+.upload-area_min-height_md__7BUe3 {
+  min-height: auto;
+}
+
+/* flex-direction: hasFile ? row : size === 'sm' ? row : column */
+.upload-area_direction_row__dPIPY {
+  flex-direction: row;
+}
+
+.upload-area_direction_column__Yd-Y9 {
+  flex-direction: column;
+}
+
+/* justify-content: hasFile ? space-between : size === 'sm' ? space-between : center */
+.upload-area_justify_space-between__8kSQQ {
+  justify-content: space-between;
+}
+
+.upload-area_justify_center__vW-59 {
+  justify-content: center;
+}
+
+/* gap: size === 'sm' ? sm : md */
+.upload-area_gap_sm__fRrTo {
+  gap: var(--click-fileUpload-sm-space-gap);
+}
+
+.upload-area_gap_md__gndXo {
+  gap: var(--click-fileUpload-md-space-gap);
+}
+
+/* cursor: hasFile ? default : pointer */
+.upload-area_cursor_default__Yrr8K {
+  cursor: default;
+}
+
+.upload-area_cursor_pointer__nnHd9 {
+  cursor: pointer;
+}
+
+/* !hasFile: dashed border */
+.upload-area_dashed_true__-dB8w {
+  border-style: dashed;
+  border-color: var(--click-fileUpload-color-stroke-default);
+}
+
+/* !hasFile && isDragging */
+.upload-area_dragging_true__wzFjV {
+  border-color: var(--click-fileUpload-color-stroke-active);
+  background-color: var(--click-fileUpload-color-background-active);
+}
+
+/* isError */
+.upload-area_error_true__gIe8y {
+  border-color: transparent;
+  background-color: var(--click-fileUpload-color-background-error);
+}
+
+.title__1rLes {
+  color: var(--click-fileUpload-color-title-default);
+  font: var(--click-fileUpload-typography-title-default);
+}
+
+.title_not-supported_true__o7ZXZ {
+  color: var(--click-fileUpload-color-title-error);
+}
+
+.description__QyVSQ {
+  color: var(--click-fileUpload-color-description-default);
+  font: var(--click-fileUpload-typography-description-default);
+}
+
+.upload-icon__CeL3E svg {
+  width: var(--click-fileUpload-md-icon-size-width);
+  height: var(--click-fileUpload-md-icon-size-height);
+  color: var(--click-fileUpload-md-color-icon-default);
+}
+
+.upload-text__4oGA- {
+  text-align: left;
+}
+
+.upload-text_centered_true__brhHN {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.upload-text_grow_true__9MNMX {
+  flex: 1;
+}

package/dist/cjs/components/FileUpload/FileUploadArea.module.css.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const title = "title__1rLes";
+const description = "description__QyVSQ";
+const styles = {
+	"upload-area": "upload-area__3SxAA",
+	"upload-area_radius_sm": "upload-area_radius_sm__DW4eQ",
+	"upload-area_radius_md": "upload-area_radius_md__k9cZA",
+	"upload-area_padding_sm": "upload-area_padding_sm__ci1xq",
+	"upload-area_padding_md": "upload-area_padding_md__SflJQ",
+	"upload-area_min-height_sm": "upload-area_min-height_sm__JmKFU",
+	"upload-area_min-height_md": "upload-area_min-height_md__7BUe3",
+	"upload-area_direction_row": "upload-area_direction_row__dPIPY",
+	"upload-area_direction_column": "upload-area_direction_column__Yd-Y9",
+	"upload-area_justify_space-between": "upload-area_justify_space-between__8kSQQ",
+	"upload-area_justify_center": "upload-area_justify_center__vW-59",
+	"upload-area_gap_sm": "upload-area_gap_sm__fRrTo",
+	"upload-area_gap_md": "upload-area_gap_md__gndXo",
+	"upload-area_cursor_default": "upload-area_cursor_default__Yrr8K",
+	"upload-area_cursor_pointer": "upload-area_cursor_pointer__nnHd9",
+	"upload-area_dashed_true": "upload-area_dashed_true__-dB8w",
+	"upload-area_dragging_true": "upload-area_dragging_true__wzFjV",
+	"upload-area_error_true": "upload-area_error_true__gIe8y",
+	title: title,
+	"title_not-supported_true": "title_not-supported_true__o7ZXZ",
+	description: description,
+	"upload-icon": "upload-icon__CeL3E",
+	"upload-text": "upload-text__4oGA-",
+	"upload-text_centered_true": "upload-text_centered_true__brhHN",
+	"upload-text_grow_true": "upload-text_grow_true__9MNMX"
+};
+
+exports.default = styles;
+exports.description = description;
+exports.title = title;
+//# sourceMappingURL=FileUploadArea.module.css.cjs.map

package/dist/cjs/components/FileUpload/FileUploadArea.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadArea.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/FileUpload/FileUploadItem.cjs

@@ -1,69 +1,52 @@
+require("./FileUploadItem.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
 const MiddleTruncator = require('../MiddleTruncator/index.cjs');
 const file = require('../../utils/file.cjs');
+const FileUploadItem_module = require('./FileUploadItem.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
+const Text = require('../Text/index.cjs');
 const ProgressBar = require('../ProgressBar/index.cjs');
 const IconButton = require('../IconButton/index.cjs');
-const Text = require('../Text/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const FileItemContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-1ihicfl-0"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:", ";flex:1;min-width:0;", ""], ({
-  theme
-}) => theme.click.fileUpload.sm.space.gap, (props) => !props.$inline && styledComponents.css(["background-color:", ";border:", ";border-radius:", ";padding:", ";", ""], ({
-  theme
-}) => theme.click.fileUpload.color.background.default, ({
-  theme
-}) => `1px solid ${theme.click.fileUpload.color.stroke.default}`, ({
-  theme
-}) => theme.click.fileUpload.sm.radii.all, ({
-  theme
-}) => `${theme.click.fileUpload.sm.space.y} ${theme.click.fileUpload.sm.space.x}`, props.$isError && styledComponents.css(["background-color:", ";border-color:transparent;"], ({
-  theme
-}) => theme.click.fileUpload.color.background.error)));
-const DocumentIcon = styledComponents.styled(Icon.Icon).withConfig({
-  componentId: "sc-1ihicfl-1"
-})(["svg{width:", ";height:", ";color:", ";}"], ({
-  theme,
-  $size
-}) => $size === "sm" ? theme.click.fileUpload.sm.icon.size.width : theme.click.fileUpload.md.icon.size.width, ({
-  theme,
-  $size
-}) => $size === "sm" ? theme.click.fileUpload.sm.icon.size.height : theme.click.fileUpload.md.icon.size.height, ({
-  theme,
-  $size
-}) => $size === "sm" ? theme.click.fileUpload.sm.color.icon.default : theme.click.fileUpload.md.color.icon.default);
-const FileUploadDescription = styledComponents.styled(Text.Text).withConfig({
-  componentId: "sc-1ihicfl-2"
-})(["font:", ";color:", ";"], ({
-  theme
-}) => theme.click.fileUpload.typography.description.default, ({
-  theme,
-  $isError
-}) => $isError ? theme.click.fileUpload.color.title.error : theme.click.fileUpload.color.description.default);
-const FileDetails = styledComponents.styled.div.withConfig({
-  componentId: "sc-1ihicfl-3"
-})(["display:flex;gap:", ";border:none;min-width:0;"], ({
-  theme
-}) => theme.click.fileUpload.md.space.gap);
-const FileActions = styledComponents.styled.div.withConfig({
-  componentId: "sc-1ihicfl-4"
-})(["display:flex;align-items:center;margin-left:auto;gap:0;"]);
-const FileContentContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-1ihicfl-5"
-})(["flex:1;display:flex;flex-direction:column;justify-content:center;min-height:", ";min-width:0;"], ({
-  $size
-}) => $size === "sm" ? "24px" : "auto");
-const ProgressBarWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1ihicfl-6"
-})(["margin-top:", ";margin-bottom:9px;"], ({
-  theme
-}) => theme.click.fileUpload.md.space.gap);
+const fileItemContainerVariants = classVarianceAuthority.cva(FileUploadItem_module.default["file-item-container"], {
+  variants: {
+    inline: {
+      false: FileUploadItem_module.default["file-item-container_inline_false"]
+    },
+    error: {
+      true: FileUploadItem_module.default["file-item-container_error_true"]
+    }
+  }
+});
+const documentIconVariants = classVarianceAuthority.cva(FileUploadItem_module.default["document-icon"], {
+  variants: {
+    size: {
+      sm: FileUploadItem_module.default["document-icon_size_sm"],
+      md: FileUploadItem_module.default["document-icon_size_md"]
+    }
+  }
+});
+const descriptionVariants = classVarianceAuthority.cva(FileUploadItem_module.default.description, {
+  variants: {
+    error: {
+      true: FileUploadItem_module.default["description_error_true"]
+    }
+  }
+});
+const fileContentContainerVariants = classVarianceAuthority.cva(FileUploadItem_module.default["file-content-container"], {
+  variants: {
+    size: {
+      sm: FileUploadItem_module.default["file-content-container_size_sm"],
+      md: FileUploadItem_module.default["file-content-container_size_md"]
+    }
+  }
+});
 const FileUploadItem = ({
   fileName,
   fileSize,
@@ -77,21 +60,30 @@ const FileUploadItem = ({
   inline = false
 }) => {
   const isError = !showSuccess && !showProgress;
-  return /* @__PURE__ */ jsxRuntime.jsxs(FileItemContainer, { $isError: isError, $inline: inline, $size: size, children: [
-    showSuccess ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "xs", state: "success", name: "check" }) : /* @__PURE__ */ jsxRuntime.jsx(DocumentIcon, { name: "document", $size: size }),
-    /* @__PURE__ */ jsxRuntime.jsxs(FileContentContainer, { $size: size, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(FileDetails, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(fileItemContainerVariants({
+    inline: inline ? void 0 : false,
+    error: !inline && isError
+  })), children: [
+    showSuccess ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "xs", state: "success", name: "check" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "document", className: cva.cn(documentIconVariants({
+      size
+    })) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(fileContentContainerVariants({
+      size
+    })), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FileUploadItem_module.default["file-details"], children: [
         /* @__PURE__ */ jsxRuntime.jsx(MiddleTruncator.MiddleTruncator, { text: fileName }),
-        showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsxs(FileUploadDescription, { children: [
+        showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { className: FileUploadItem_module.default.description, children: [
           progress,
           "%"
         ] })
       ] }),
-      isError && /* @__PURE__ */ jsxRuntime.jsx(FileUploadDescription, { $isError: true, children: failureMessage }),
-      showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsx(ProgressBarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar.ProgressBar, { progress, type: "small" }) }),
-      showSuccess && /* @__PURE__ */ jsxRuntime.jsx(FileUploadDescription, { children: file.formatFileSize(fileSize) })
+      isError && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { className: cva.cn(descriptionVariants({
+        error: true
+      })), children: failureMessage }),
+      showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsx("div", { className: FileUploadItem_module.default["progress-bar-wrapper"], children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar.ProgressBar, { progress, type: "small" }) }),
+      showSuccess && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { className: FileUploadItem_module.default.description, children: file.formatFileSize(fileSize) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(FileActions, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FileUploadItem_module.default["file-actions"], children: [
       isError && onRetry && /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { size: "sm", icon: "refresh", type: "ghost", onClick: onRetry }),
       onRemove && /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { size: "sm", icon: "cross", type: "ghost", onClick: onRemove })
     ] })

package/dist/cjs/components/FileUpload/FileUploadItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadItem.cjs","sources":["../../../../src/components/FileUpload/FileUploadItem.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { styled, css } from 'styled-components';\nimport { Text } from '@/components/Text';\nimport { Icon } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport { ProgressBar } from '@/components/ProgressBar';\nimport { MiddleTruncator } from '@/components/MiddleTruncator';\nimport { formatFileSize } from '@/utils/file';\n\nexport interface FileUploadItemProps {\n  fileName: string;\n  fileSize: number;\n  progress?: number;\n  showSuccess?: boolean;\n  showProgress?: boolean;\n  failureMessage?: string;\n  onRetry?: () => void;\n  onRemove?: () => void;\n  size?: 'sm' | 'md';\n  inline?: boolean;\n}\n\nconst FileItemContainer = styled.div<{\n  $isError?: boolean;\n  $inline?: boolean;\n  $size?: 'sm' | 'md';\n}>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: ${({ theme }) => theme.click.fileUpload.sm.space.gap};\n  flex: 1;\n  min-width: 0;\n\n  ${props =>\n    !props.$inline &&\n    css`\n      background-color: ${({ theme }) => theme.click.fileUpload.color.background.default};\n      border: ${({ theme }) =>\n        `1px solid ${theme.click.fileUpload.color.stroke.default}`};\n      border-radius: ${({ theme }) => theme.click.fileUpload.sm.radii.all};\n      padding: ${({ theme }) =>\n        `${theme.click.fileUpload.sm.space.y} ${theme.click.fileUpload.sm.space.x}`};\n\n      ${props.$isError &&\n      css`\n        background-color: ${({ theme }) => theme.click.fileUpload.color.background.error};\n        border-color: transparent;\n      `}\n    `}\n`;\n\nconst DocumentIcon = styled(Icon)<{ $size?: 'sm' | 'md' }>`\n  svg {\n    width: ${({ theme, $size }) =>\n      $size === 'sm'\n        ? theme.click.fileUpload.sm.icon.size.width\n        : theme.click.fileUpload.md.icon.size.width};\n    height: ${({ theme, $size }) =>\n      $size === 'sm'\n        ? theme.click.fileUpload.sm.icon.size.height\n        : theme.click.fileUpload.md.icon.size.height};\n    color: ${({ theme, $size }) =>\n      $size === 'sm'\n        ? theme.click.fileUpload.sm.color.icon.default\n        : theme.click.fileUpload.md.color.icon.default};\n  }\n`;\n\nconst FileUploadDescription = styled(Text)<{ $isError?: boolean }>`\n  font: ${({ theme }) => theme.click.fileUpload.typography.description.default};\n  color: ${({ theme, $isError }) =>\n    $isError\n      ? theme.click.fileUpload.color.title.error\n      : theme.click.fileUpload.color.description.default};\n`;\n\nconst FileDetails = styled.div`\n  display: flex;\n  gap: ${({ theme }) => theme.click.fileUpload.md.space.gap};\n  border: none;\n  min-width: 0;\n`;\n\nconst FileActions = styled.div`\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  gap: 0;\n`;\n\nconst FileContentContainer = styled.div<{ $size: 'sm' | 'md' }>`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: ${({ $size }) => ($size === 'sm' ? '24px' : 'auto')};\n  min-width: 0;\n`;\n\nconst ProgressBarWrapper = styled.div`\n  margin-top: ${({ theme }) => theme.click.fileUpload.md.space.gap};\n  margin-bottom: 9px;\n`;\n\nexport const FileUploadItem: FC<FileUploadItemProps> = ({\n  fileName,\n  fileSize,\n  progress = 0,\n  showSuccess = false,\n  showProgress = false,\n  failureMessage = 'Upload failed',\n  onRetry,\n  onRemove,\n  size = 'sm',\n  inline = false,\n}) => {\n  const isError = !showSuccess && !showProgress;\n\n  return (\n    <FileItemContainer\n      $isError={isError}\n      $inline={inline}\n      $size={size}\n    >\n      {showSuccess ? (\n        <Icon\n          size={'xs'}\n          state={'success'}\n          name={'check'}\n        />\n      ) : (\n        <DocumentIcon\n          name={'document'}\n          $size={size}\n        />\n      )}\n\n      <FileContentContainer $size={size}>\n        <FileDetails>\n          <MiddleTruncator text={fileName} />\n          {showProgress && !showSuccess && (\n            <FileUploadDescription>{progress}%</FileUploadDescription>\n          )}\n        </FileDetails>\n\n        {isError && (\n          <FileUploadDescription $isError>{failureMessage}</FileUploadDescription>\n        )}\n\n        {showProgress && !showSuccess && (\n          <ProgressBarWrapper>\n            <ProgressBar\n              progress={progress}\n              type={'small'}\n            />\n          </ProgressBarWrapper>\n        )}\n\n        {showSuccess && (\n          <FileUploadDescription>{formatFileSize(fileSize)}</FileUploadDescription>\n        )}\n      </FileContentContainer>\n\n      <FileActions>\n        {isError && onRetry && (\n          <IconButton\n            size={'sm'}\n            icon={'refresh'}\n            type={'ghost'}\n            onClick={onRetry}\n          />\n        )}\n        {onRemove && (\n          <IconButton\n            size={'sm'}\n            icon={'cross'}\n            type={'ghost'}\n            onClick={onRemove}\n          />\n        )}\n      </FileActions>\n    </FileItemContainer>\n  );\n};\n"],"names":["FileItemContainer","styled","div","withConfig","componentId","theme","click","fileUpload","sm","space","gap","props","$inline","css","color","background","default","stroke","radii","all","y","x","$isError","error","DocumentIcon","Icon","$size","icon","size","width","md","height","FileUploadDescription","Text","typography","description","title","FileDetails","FileActions","FileContentContainer","ProgressBarWrapper","FileUploadItem","fileName","fileSize","progress","showSuccess","showProgress","failureMessage","onRetry","onRemove","inline","isError","jsx","jsxs","MiddleTruncator","ProgressBar","formatFileSize","IconButton"],"mappings":"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"}
+{"version":3,"file":"FileUploadItem.cjs","sources":["../../../../src/components/FileUpload/FileUploadItem.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Text } from '@/components/Text';\nimport { Icon } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport { ProgressBar } from '@/components/ProgressBar';\nimport { MiddleTruncator } from '@/components/MiddleTruncator';\nimport { formatFileSize } from '@/utils/file';\nimport styles from './FileUploadItem.module.css';\n\nexport interface FileUploadItemProps {\n  fileName: string;\n  fileSize: number;\n  progress?: number;\n  showSuccess?: boolean;\n  showProgress?: boolean;\n  failureMessage?: string;\n  onRetry?: () => void;\n  onRemove?: () => void;\n  size?: 'sm' | 'md';\n  inline?: boolean;\n}\n\nconst fileItemContainerVariants = cva(styles['file-item-container'], {\n  variants: {\n    inline: {\n      false: styles['file-item-container_inline_false'],\n    },\n    error: {\n      true: styles['file-item-container_error_true'],\n    },\n  },\n});\n\nconst documentIconVariants = cva(styles['document-icon'], {\n  variants: {\n    size: {\n      sm: styles['document-icon_size_sm'],\n      md: styles['document-icon_size_md'],\n    },\n  },\n});\n\nconst descriptionVariants = cva(styles.description, {\n  variants: {\n    error: {\n      true: styles['description_error_true'],\n    },\n  },\n});\n\nconst fileContentContainerVariants = cva(styles['file-content-container'], {\n  variants: {\n    size: {\n      sm: styles['file-content-container_size_sm'],\n      md: styles['file-content-container_size_md'],\n    },\n  },\n});\n\nexport const FileUploadItem: FC<FileUploadItemProps> = ({\n  fileName,\n  fileSize,\n  progress = 0,\n  showSuccess = false,\n  showProgress = false,\n  failureMessage = 'Upload failed',\n  onRetry,\n  onRemove,\n  size = 'sm',\n  inline = false,\n}) => {\n  const isError = !showSuccess && !showProgress;\n\n  return (\n    <div\n      className={cn(\n        fileItemContainerVariants({\n          inline: inline ? undefined : false,\n          error: !inline && isError,\n        })\n      )}\n    >\n      {showSuccess ? (\n        <Icon\n          size={'xs'}\n          state={'success'}\n          name={'check'}\n        />\n      ) : (\n        <Icon\n          name={'document'}\n          className={cn(documentIconVariants({ size }))}\n        />\n      )}\n\n      <div className={cn(fileContentContainerVariants({ size }))}>\n        <div className={styles['file-details']}>\n          <MiddleTruncator text={fileName} />\n          {showProgress && !showSuccess && (\n            <Text className={styles.description}>{progress}%</Text>\n          )}\n        </div>\n\n        {isError && (\n          <Text className={cn(descriptionVariants({ error: true }))}>\n            {failureMessage}\n          </Text>\n        )}\n\n        {showProgress && !showSuccess && (\n          <div className={styles['progress-bar-wrapper']}>\n            <ProgressBar\n              progress={progress}\n              type={'small'}\n            />\n          </div>\n        )}\n\n        {showSuccess && (\n          <Text className={styles.description}>{formatFileSize(fileSize)}</Text>\n        )}\n      </div>\n\n      <div className={styles['file-actions']}>\n        {isError && onRetry && (\n          <IconButton\n            size={'sm'}\n            icon={'refresh'}\n            type={'ghost'}\n            onClick={onRetry}\n          />\n        )}\n        {onRemove && (\n          <IconButton\n            size={'sm'}\n            icon={'cross'}\n            type={'ghost'}\n            onClick={onRemove}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["fileItemContainerVariants","cva","styles","variants","inline","false","error","true","documentIconVariants","size","sm","md","descriptionVariants","description","fileContentContainerVariants","FileUploadItem","fileName","fileSize","progress","showSuccess","showProgress","failureMessage","onRetry","onRemove","isError","jsxs","cn","undefined","jsx","Icon","MiddleTruncator","Text","ProgressBar","formatFileSize","IconButton"],"mappings":"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"}

package/dist/cjs/components/FileUpload/FileUploadItem.css

@@ -0,0 +1,82 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+.file-item-container__86J-i {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--click-fileUpload-sm-space-gap);
+}
+
+.file-item-container_inline_false__QqJXZ {
+  padding: var(--click-fileUpload-sm-space-y) var(--click-fileUpload-sm-space-x);
+  border: 1px solid var(--click-fileUpload-color-stroke-default);
+  border-radius: var(--click-fileUpload-sm-radii-all);
+  background-color: var(--click-fileUpload-color-background-default);
+}
+
+.file-item-container_inline_false__QqJXZ.file-item-container_error_true__uRfbn {
+  border-color: transparent;
+  background-color: var(--click-fileUpload-color-background-error);
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.document-icon__CX1O5 {
+}
+
+.document-icon_size_sm__sEIPl svg {
+  width: var(--click-fileUpload-sm-icon-size-width);
+  height: var(--click-fileUpload-sm-icon-size-height);
+  color: var(--click-fileUpload-sm-color-icon-default);
+}
+
+.document-icon_size_md__dqfzB svg {
+  width: var(--click-fileUpload-md-icon-size-width);
+  height: var(--click-fileUpload-md-icon-size-height);
+  color: var(--click-fileUpload-md-color-icon-default);
+}
+
+.description__sjgXO {
+  color: var(--click-fileUpload-color-description-default);
+  font: var(--click-fileUpload-typography-description-default);
+}
+
+.description_error_true__wbkov {
+  color: var(--click-fileUpload-color-title-error);
+}
+
+.file-details__aAMdx {
+  display: flex;
+  min-width: 0;
+  gap: var(--click-fileUpload-md-space-gap);
+  border: none;
+}
+
+.file-actions__OUaMv {
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+  gap: 0;
+}
+
+.file-content-container__40JkR {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.file-content-container_size_sm__8od-v {
+  min-height: 24px;
+}
+
+.file-content-container_size_md__U6Hwr {
+  min-height: auto;
+}
+
+.progress-bar-wrapper__q0i9x {
+  margin-top: var(--click-fileUpload-md-space-gap);
+  margin-bottom: 9px;
+}

package/dist/cjs/components/FileUpload/FileUploadItem.module.css.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const description = "description__sjgXO";
+const description_error_true = "description_error_true__wbkov";
+const styles = {
+	"file-item-container": "file-item-container__86J-i",
+	"file-item-container_inline_false": "file-item-container_inline_false__QqJXZ",
+	"file-item-container_error_true": "file-item-container_error_true__uRfbn",
+	"document-icon": "document-icon__CX1O5",
+	"document-icon_size_sm": "document-icon_size_sm__sEIPl",
+	"document-icon_size_md": "document-icon_size_md__dqfzB",
+	description: description,
+	description_error_true: description_error_true,
+	"file-details": "file-details__aAMdx",
+	"file-actions": "file-actions__OUaMv",
+	"file-content-container": "file-content-container__40JkR",
+	"file-content-container_size_sm": "file-content-container_size_sm__8od-v",
+	"file-content-container_size_md": "file-content-container_size_md__U6Hwr",
+	"progress-bar-wrapper": "progress-bar-wrapper__q0i9x"
+};
+
+exports.default = styles;
+exports.description = description;
+exports.description_error_true = description_error_true;
+//# sourceMappingURL=FileUploadItem.module.css.cjs.map

package/dist/cjs/components/FileUpload/FileUploadItem.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadItem.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/FormContainer/Error.cjs

@@ -1,17 +1,16 @@
+require("./Error.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styledComponents = require('styled-components');
+const jsxRuntime = require('react/jsx-runtime');
+const cva = require('../../lib/cva.cjs');
+const Error_module = require('./Error.module.css.cjs');
 
-const Error = styledComponents.styled.div.withConfig({
-  componentId: "sc-qn2f3u-0"
-})(["", ";"], ({
-  theme
-}) => `
-  font: ${theme.click.field.typography.label.error};
-  color: ${theme.click.field.color.label.error};
-`);
+const Error = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(Error_module.default.error, className) });
 
 exports.Error = Error;
 //# sourceMappingURL=Error.cjs.map

package/dist/cjs/components/FormContainer/Error.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Error.cjs","sources":["../../../../src/components/FormContainer/Error.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const Error = styled.div`\n  ${({ theme }) => `\n  font: ${theme.click.field.typography.label.error};\n  color: ${theme.click.field.color.label.error};\n`};\n`;\n"],"names":["Error","styled","div","withConfig","componentId","theme","click","field","typography","label","error","color"],"mappings":";;;;;;AAEO,MAAMA,KAAAA,GAAQC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,GAAA,GAC3B,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,QAAA,EACTA,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWC,MAAMC,KAAK,CAAA;AAAA,SAAA,EACvCL,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMI,KAAAA,CAAMF,MAAMC,KAAK,CAAA;AAAA,CAC7C;;;;"}
+{"version":3,"file":"Error.cjs","sources":["../../../../src/components/FormContainer/Error.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './Error.module.css';\n\nexport const Error = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles.error, className)}\n  />\n);\n"],"names":["Error","className","props","jsx","cn","styles","error"],"mappings":";;;;;;;;AAIO,MAAMA,QAAQA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAAW,GAAGC;AAAsC,CAAA,qBAC1EC,cAAA,CAAC,SACC,GAAID,KAAAA,EACJ,WAAWE,MAAAA,CAAGC,oBAAAA,CAAOC,KAAAA,EAAOL,SAAS,CAAA,EAAE;;;;"}

package/dist/cjs/components/FormContainer/Error.css

@@ -0,0 +1,4 @@
+.error__Wvrfq {
+  color: var(--click-field-color-label-error);
+  font: var(--click-field-typography-label-error);
+}

package/dist/cjs/components/FormContainer/Error.module.css.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const error = "error__Wvrfq";
+const styles = {
+	error: error
+};
+
+exports.default = styles;
+exports.error = error;
+//# sourceMappingURL=Error.module.css.cjs.map

package/dist/cjs/components/FormContainer/Error.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Error.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/cjs/components/FormContainer/FormElementContainer.cjs

@@ -1,14 +1,16 @@
+require("./FormElementContainer.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styledComponents = require('styled-components');
+const jsxRuntime = require('react/jsx-runtime');
+const cva = require('../../lib/cva.cjs');
+const FormElementContainer_module = require('./FormElementContainer.module.css.cjs');
 
-const FormElementContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-u5pkx7-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
-  theme
-}) => theme.click.field.space.gap);
+const FormElementContainer = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(FormElementContainer_module.default["form-element-container"], className) });
 
 exports.FormElementContainer = FormElementContainer;
 //# sourceMappingURL=FormElementContainer.cjs.map

package/dist/cjs/components/FormContainer/FormElementContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementContainer.cjs","sources":["../../../../src/components/FormContainer/FormElementContainer.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const FormElementContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  gap: ${({ theme }) => theme.click.field.space.gap};\n`;\n"],"names":["FormElementContainer","styled","div","withConfig","componentId","theme","click","field","space","gap"],"mappings":";;;;;;AAEO,MAAMA,oBAAAA,GAAuBC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,2IAAA,EAAA,GAAA,GAQrC,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,GAAG;;;;"}
+{"version":3,"file":"FormElementContainer.cjs","sources":["../../../../src/components/FormContainer/FormElementContainer.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './FormElementContainer.module.css';\n\nexport const FormElementContainer = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles['form-element-container'], className)}\n  />\n);\n"],"names":["FormElementContainer","className","props","jsx","cn","styles"],"mappings":";;;;;;;;AAIO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC,SAAAA;AAAAA,EACA,GAAGC;AAC2B,CAAA,qBAC9BC,cAAA,CAAC,KAAA,EAAA,EACC,GAAID,KAAAA,EACJ,SAAA,EAAWE,OAAGC,mCAAAA,CAAO,wBAAwB,CAAA,EAAGJ,SAAS,CAAA,EAAE;;;;"}