@flipdish/portal-library 7.3.5 → 7.5.0

package/dist/components/organisms/FileUpload/components/FileDropZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropZone.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileDropZone.tsx"],"sourcesContent":["import React, { useCallback,useRef, useState } from 'react';\n\nimport Box from '@mui/material/Box/Box';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport FlipdishButton from '@fd/components/atoms/Button';\nimport FlipdishFormHelperText from '@fd/components/atoms/FormHelperText';\nimport FlipdishTypography from '@fd/components/atoms/Typography';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport UploadIcon from '@fd/icons/Upload';\n\nconst StyledUploadAreaContainer = styled(Box, {\n  shouldForwardProp: (prop) =>  prop !== 'hasError',\n})<{  hasError?: boolean }>(({ theme,  hasError }) => ({\n  flex: '1',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: theme.spacing(4),\n  borderRadius: theme.radius['radius-8'],\n  border: hasError\n    ? `1px solid ${theme.palette.semantic.stroke['stroke-error-weak']}`\n    : `1px dashed ${theme.palette.semantic.stroke['stroke-strong']}`,\n  background: hasError\n    ? theme.palette.semantic.fill['fill-error-weak']\n    : theme.palette.semantic.fill['fill-weaker'],\n  cursor: 'pointer',\n  transition: 'all 0.2s ease-in-out',\n  [theme.breakpoints.only('mobile')]: {\n    justifyContent: 'center',\n    gap: theme.spacing(4),\n  },\n}));\n\nconst VisuallyHiddenInput = styled('input')({\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(50%)',\n  height: 1,\n  overflow: 'hidden',\n  position: 'absolute',\n  bottom: 0,\n  left: 0,\n  whiteSpace: 'nowrap',\n  width: 1,\n});\n\nconst StyledIconContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'hasError',\n})<{ hasError?: boolean }>(({  hasError, theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: theme.radius['radius-32'],\n  backgroundColor: hasError ? theme.palette.semantic.fill['fill-error-weak'] : theme.palette.semantic.fill['fill-primary-weak'],\n}));\n\nconst StyledButton = styled(FlipdishButton)({\n  alignSelf: 'center',\n});\n\n/**\n * Props for the FileDropZone component.\n * Provides a drag-and-drop file upload interface with validation.\n */\nexport interface FileDropZoneProps {\n  /**\n   * Callback function invoked when files are successfully validated and ready to upload.\n   * @param files - Array of File objects to be uploaded\n   */\n  handleUpload: (files: File[]) => void;\n\n  /**\n   * Whether multiple files can be selected at once.\n   * @default true\n   */\n  multiple?: boolean;\n\n  /**\n   * Maximum number of files that can be selected in a single operation.\n   * If exceeded, an error message will be displayed.\n   * @default undefined (no limit)\n   */\n  maxFiles?: number;\n\n  /**\n   * Maximum file size allowed in bytes.\n   * Files exceeding this size will be rejected with an error message.\n   * Example: 10 * 1024 * 1024 for 10MB\n   * @default undefined (no limit)\n   */\n  maxFileSize?: number;\n\n  /**\n   * Array of allowed file extensions (without dots).\n   * Files with extensions not in this list will be rejected.\n   * Example: ['jpg', 'png', 'pdf']\n   * @default [] (all file types allowed)\n   */\n  allowedFileTypes?: string[];\n\n  /**\n   * Whether the file drop zone is disabled.\n   * When true, prevents all file selection and drag-and-drop interactions.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Text displayed when files are being dragged over the drop zone.\n   * @default 'Drop files here'\n   */\n  dragActiveText?: string;\n\n  /**\n   * Text displayed when no files are being dragged (idle state).\n   * @default 'Drag and drop files here'\n   */\n  dragInactiveText?: string;\n\n  /**\n   * Text displayed on the browse/upload button.\n   * @default 'Browse files'\n   */\n  browseButtonText?: string;\n\n  /**\n   * Text displayed when a file type is not allowed.\n   * @default 'File type is not allowed. Allowed types: {allowedFileTypes}'\n   */\n  invalidFileTypesText?: string;\n\n  /**\n   * Text displayed when a file size is too large.\n   * @default 'File size is too large. Maximum size: {maxFileSize}'\n   */\n  invalidFileSizeText?: string;\n\n  /**\n   * Text displayed when too many files are selected.\n   * @default 'Too many files selected. Maximum allowed: {maxFiles}'\n   */\n  invalidFileCountText?: string;\n}\n\nconst FileDropZone: React.FC<FileDropZoneProps> = ({\n  handleUpload,\n  multiple,\n  maxFiles,\n  maxFileSize,\n  allowedFileTypes = [],\n  disabled = false,\n  dragActiveText = 'Drop files here',\n  dragInactiveText = 'Drag and drop files here',\n  browseButtonText = 'Browse files',\n  invalidFileTypesText = 'File type is not allowed. Allowed types: {allowedFileTypes}',\n  invalidFileSizeText = 'File size is too large. Maximum size: {maxFileSize}',\n  invalidFileCountText = 'Too many files selected. Maximum allowed: {maxFiles}',\n}) => {\n  const theme = useTheme();\n  const [isDragActive, setIsDragActive] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  const validateFile = useCallback((file: File): boolean => {\n    // Check file size\n    if (maxFileSize && file.size > maxFileSize) {\n      setError(invalidFileSizeText);\n      return false;\n    }\n\n    // Check file type\n    const fileExtension = file.name.split('.').pop()?.toLowerCase();\n    if (allowedFileTypes.length > 0 && fileExtension && !allowedFileTypes.includes(fileExtension)) {\n      setError(invalidFileTypesText);\n      return false;\n    }\n\n    return true;\n  }, [maxFileSize, allowedFileTypes]);\n\n  const processFiles = useCallback( (files: File[] | FileList) => {\n    const fileArray = Array.from(files);\n    const validFiles: File[] = [];\n\n    // Check max files limit\n    if (maxFiles && fileArray.length > maxFiles) {\n      setError(invalidFileCountText);\n      return;\n    }\n\n    // Validate each file\n    fileArray.forEach(file => {\n      if (validateFile(file)) {\n        validFiles.push(file);\n      }\n    });\n\n    if (validFiles.length > 0) {\n      setError(null);\n      handleUpload(validFiles);\n    }\n  }, [maxFiles, validateFile, handleUpload]);\n\n  const handleDragEnter = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (disabled) return;\n\n    setIsDragActive(true);\n  }, [disabled]);\n\n  const handleDragLeave = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (disabled) return;\n\n    setIsDragActive(false);\n  }, [disabled]);\n\n  const handleDragOver = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (disabled) return;\n\n    setIsDragActive(false);\n\n    const files = e.dataTransfer.files;\n    if (files && files.length > 0) {\n      processFiles(files);\n    }\n  }, [disabled, processFiles]);\n\n  const handleFileInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n\n    const files = e.target.files;\n    if (files && files.length > 0) {\n      processFiles(files);\n    }\n\n    // Reset input value to allow selecting the same file again\n    if (fileInputRef.current) {\n      fileInputRef.current.value = '';\n    }\n  }, [disabled, processFiles]);\n\n  const handleButtonClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    fileInputRef.current?.click();\n  }, []);\n\n  const handleContainerClick = useCallback(() => {\n    if (disabled) return;\n\n    fileInputRef.current?.click();\n  }, [disabled]);\n\n  return (\n    <>\n    {!!error && (\n      <FlipdishFormHelperText error>\n        <CancelCircleIcon />\n        {error}\n      </FlipdishFormHelperText>\n    )}\n    <StyledUploadAreaContainer data-testid=\"file-drop-zone\"\n      hasError={!!error}\n      onClick={disabled ? undefined : handleContainerClick}\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onDragOver={handleDragOver}\n      onDrop={handleDrop}\n    >\n      <VisuallyHiddenInput\n        ref={fileInputRef}\n        data-testid=\"file-upload-input\"\n        disabled={disabled}\n        multiple={multiple}\n        onChange={handleFileInputChange}\n        type=\"file\"\n      />\n\n      <Stack alignItems=\"center\" direction=\"column\" gap={theme.spacing(2)} justifyContent=\"center\" width=\"100%\">\n        <StyledIconContainer\n           hasError={!!error}\n        >\n         <UploadIcon color={error ? theme.palette.semantic.icon['icon-error'] : theme.palette.semantic.icon['icon-primary']} />\n        </StyledIconContainer>\n\n        <FlipdishTypography variant=\"b1Strong\">\n          {isDragActive ? dragActiveText : dragInactiveText}\n        </FlipdishTypography>\n\n          <StyledButton\n            disabled={disabled}\n            fdKey=\"file-upload-btn\"\n            onClick={disabled ? undefined : handleButtonClick}\n            variant=\"secondary\"\n          >\n            {browseButtonText}\n          </StyledButton>\n      </Stack>\n    </StyledUploadAreaContainer>\n    </>\n  );\n};\n\nexport default FileDropZone;\n"],"names":["StyledUploadAreaContainer","styled","Box","shouldForwardProp","prop","theme","hasError","flex","display","flexDirection","height","boxSizing","alignItems","justifyContent","padding","spacing","borderRadius","radius","border","palette","semantic","stroke","background","fill","cursor","transition","breakpoints","only","gap","VisuallyHiddenInput","clip","clipPath","overflow","position","bottom","left","whiteSpace","width","StyledIconContainer","backgroundColor","StyledButton","FlipdishButton","alignSelf","FileDropZone","handleUpload","multiple","maxFiles","maxFileSize","allowedFileTypes","disabled","dragActiveText","dragInactiveText","browseButtonText","invalidFileTypesText","invalidFileSizeText","invalidFileCountText","useTheme","isDragActive","setIsDragActive","useState","fileInputRef","useRef","error","setError","validateFile","useCallback","file","size","fileExtension","name","split","pop","toLowerCase","length","includes","processFiles","files","fileArray","Array","from","validFiles","forEach","push","handleDragEnter","e","preventDefault","stopPropagation","handleDragLeave","handleDragOver","handleDrop","dataTransfer","handleFileInputChange","target","current","value","handleButtonClick","event","click","handleContainerClick","_jsxs","FlipdishFormHelperText","_jsx","CancelCircleIcon","onClick","undefined","onDragEnter","onDragLeave","onDragOver","onDrop","children","ref","onChange","type","Stack","direction","UploadIcon","color","icon","FlipdishTypography","variant","fdKey"],"mappings":"whBAaA,MAAMA,EAA4BC,EAAOC,EAAK,CAC5CC,kBAAoBC,GAAmB,aAATA,GADEH,EAEN,EAAGI,QAAQC,eAAU,CAC/CC,KAAM,IACNC,QAAS,OACTC,cAAe,SACfC,OAAQ,OACRC,UAAW,aACXC,WAAY,SACZC,eAAgB,SAChBC,QAAST,EAAMU,QAAQ,GACvBC,aAAcX,EAAMY,OAAO,YAC3BC,OAAQZ,EACJ,aAAaD,EAAMc,QAAQC,SAASC,OAAO,uBAC3C,cAAchB,EAAMc,QAAQC,SAASC,OAAO,mBAChDC,WAAYhB,EACRD,EAAMc,QAAQC,SAASG,KAAK,mBAC5BlB,EAAMc,QAAQC,SAASG,KAAK,eAChCC,OAAQ,UACRC,WAAY,uBACZ,CAACpB,EAAMqB,YAAYC,KAAK,WAAY,CAClCd,eAAgB,SAChBe,IAAKvB,EAAMU,QAAQ,QAIjBc,EAAsB5B,EAAO,QAAPA,CAAgB,CAC1C6B,KAAM,gBACNC,SAAU,aACVrB,OAAQ,EACRsB,SAAU,SACVC,SAAU,WACVC,OAAQ,EACRC,KAAM,EACNC,WAAY,SACZC,MAAO,IAGHC,EAAsBrC,EAAOC,EAAK,CACtCC,kBAAoBC,GAAkB,aAATA,GADHH,EAED,EAAIK,WAAUD,YAAO,CAC9CG,QAAS,OACTC,cAAe,SACf4B,MAAO,OACP3B,OAAQ,OACRI,QAAS,MACTD,eAAgB,SAChBD,WAAY,SACZI,aAAcX,EAAMY,OAAO,aAC3BsB,gBAAiBjC,EAAWD,EAAMc,QAAQC,SAASG,KAAK,mBAAqBlB,EAAMc,QAAQC,SAASG,KAAK,yBAGrGiB,EAAevC,EAAOwC,EAAPxC,CAAuB,CAC1CyC,UAAW,WAuFPC,EAA4C,EAChDC,eACAC,WACAC,WACAC,cACAC,mBAAmB,GACnBC,YAAW,EACXC,iBAAiB,kBACjBC,mBAAmB,2BACnBC,mBAAmB,eACnBC,uBAAuB,8DACvBC,sBAAsB,sDACtBC,uBAAuB,2DAEvB,MAAMlD,EAAQmD,KACPC,EAAcC,GAAmBC,GAAS,GAC3CC,EAAeC,EAAyB,OACvCC,EAAOC,GAAYJ,EAAwB,MAE5CK,EAAeC,GAAaC,IAEhC,GAAInB,GAAemB,EAAKC,KAAOpB,EAE7B,OADAgB,EAAST,IACF,EAIT,MAAMc,EAAgBF,EAAKG,KAAKC,MAAM,KAAKC,OAAOC,cAClD,QAAIxB,EAAiByB,OAAS,GAAKL,IAAkBpB,EAAiB0B,SAASN,MAC7EL,EAASV,IACF,KAIR,CAACN,EAAaC,IAEX2B,EAAeV,GAAcW,IACjC,MAAMC,EAAYC,MAAMC,KAAKH,GACvBI,EAAqB,GAGvBlC,GAAY+B,EAAUJ,OAAS3B,EACjCiB,EAASR,IAKXsB,EAAUI,SAAQf,IACZF,EAAaE,IACfc,EAAWE,KAAKhB,MAIhBc,EAAWP,OAAS,IACtBV,EAAS,MACTnB,EAAaoC,OAEd,CAAClC,EAAUkB,EAAcpB,IAEtBuC,EAAkBlB,GAAamB,IACnCA,EAAEC,iBACFD,EAAEE,kBAEErC,GAEJS,GAAgB,KACf,CAACT,IAEEsC,EAAkBtB,GAAamB,IACnCA,EAAEC,iBACFD,EAAEE,kBAEErC,GAEJS,GAAgB,KACf,CAACT,IAEEuC,EAAiBvB,GAAamB,IAClCA,EAAEC,iBACFD,EAAEE,oBACD,IAEGG,EAAaxB,GAAamB,IAI9B,GAHAA,EAAEC,iBACFD,EAAEE,kBAEErC,EAAU,OAEdS,GAAgB,GAEhB,MAAMkB,EAAQQ,EAAEM,aAAad,MACzBA,GAASA,EAAMH,OAAS,GAC1BE,EAAaC,KAEd,CAAC3B,EAAU0B,IAERgB,EAAwB1B,GAAamB,IACzC,GAAInC,EAAU,OAEd,MAAM2B,EAAQQ,EAAEQ,OAAOhB,MACnBA,GAASA,EAAMH,OAAS,GAC1BE,EAAaC,GAIXhB,EAAaiC,UACfjC,EAAaiC,QAAQC,MAAQ,MAE9B,CAAC7C,EAAU0B,IAERoB,EAAoB9B,GAAa+B,IACrCA,EAAMX,iBACNW,EAAMV,kBACN1B,EAAaiC,SAASI,UACrB,IAEGC,EAAuBjC,GAAY,KACnChB,GAEJW,EAAaiC,SAASI,UACrB,CAAChD,IAEJ,OACEkD,iBACGrC,GACDqC,EAACC,EAAsB,CAACtC,mBACtBuC,EAACC,MACAxC,KAGLqC,EAACnG,EAAyB,CAAA,cAAa,iBACrCM,WAAYwD,EACZyC,QAAStD,OAAWuD,EAAYN,EAChCO,YAAatB,EACbuB,YAAanB,EACboB,WAAYnB,EACZoB,OAAQnB,EAAUoB,SAAA,CAElBR,EAACxE,EAAmB,CAClBiF,IAAKlD,EAAY,cACL,oBACZX,SAAUA,EACVJ,SAAUA,EACVkE,SAAUpB,EACVqB,KAAK,SAGPb,EAACc,EAAK,CAACrG,WAAW,SAASsG,UAAU,SAAStF,IAAKvB,EAAMU,QAAQ,GAAIF,eAAe,SAASwB,MAAM,OAAMwE,SAAA,CACvGR,EAAC/D,EAAmB,CACjBhC,WAAYwD,EAAK+C,SAEnBR,EAACc,EAAU,CAACC,MAAOtD,EAAQzD,EAAMc,QAAQC,SAASiG,KAAK,cAAgBhH,EAAMc,QAAQC,SAASiG,KAAK,oBAGpGhB,EAACiB,EAAkB,CAACC,QAAQ,oBACzB9D,EAAeP,EAAiBC,IAGjCkD,EAAC7D,EAAY,CACXS,SAAUA,EACVuE,MAAM,kBACNjB,QAAStD,OAAWuD,EAAYT,EAChCwB,QAAQ,YAAWV,SAElBzD"}

package/dist/components/organisms/FileUpload/components/FileItem.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime");require("react");var r=require("@mui/material/Box"),t=require("@mui/material/Stack"),i=require("@mui/material/styles/styled"),a=require("@mui/material/styles/useTheme"),s=require("../../../atoms/IconButton/index.cjs.js"),n=require("../../../atoms/LinearProgress/index.cjs.js"),o=require("@mui/material/Typography"),l=require("../../../../icons/Cancel/index.cjs.js"),c=require("./FileThumbnail.cjs.js");const d=i(r,{shouldForwardProp:e=>"hasError"!==e})((({theme:e,hasError:r})=>({display:"flex",alignItems:"center",width:"100%",gap:e.spacing(2),padding:e.spacing(2),borderBottom:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,backgroundColor:r?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.background["background-raised"]}))),u=i(r)((()=>({display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end",width:"100%"}))),m=i(o)((()=>({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}))),x=i(n.LinearProgress)({width:"250px"});module.exports=({file:r,error:i=null,isUploading:n=!1,onRemove:p})=>{const h=a();return e.jsxs(d,{hasError:!!i,children:[e.jsx(c,{file:r}),e.jsxs(t,{direction:"row",flex:1,gap:h.spacing(1),children:[e.jsxs(t,{direction:"column",width:"100%",children:[e.jsx(m,{color:h.palette.semantic.text["text-strong"],variant:"captionWeak",children:r.name}),e.jsx(o,{color:h.palette.semantic.text["text-weak"],variant:"captionWeak",children:(e=>{if(0===e)return"0 Bytes";const r=Math.floor(Math.log(e)/Math.log(1024));return`${Math.round(e/Math.pow(1024,r)*100)/100} ${["B","KB","MB","GB"][r]}`})(r.size)})]}),e.jsxs(u,{children:[i&&e.jsx(o,{color:h.palette.semantic.text["text-error"],variant:"captionWeak",children:i}),n&&e.jsx(x,{})]})]}),e.jsx(s.IconButton,{"aria-label":"Remove file",onClick:()=>{p(r)},size:"small",tone:"neutral",variant:"tertiary",children:e.jsx(l,{})})]})};
+//# sourceMappingURL=FileItem.cjs.js.map

package/dist/components/organisms/FileUpload/components/FileItem.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileItem.cjs.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport styled from '@mui/material/styles/styled';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport IconButton from '@fd/components/atoms/IconButton';\nimport LinearProgress from '@fd/components/atoms/LinearProgress';\nimport Typography from '@fd/components/atoms/Typography';\nimport CancelIcon from '@fd/icons/Cancel';\n\nimport FileThumbnail from './FileThumbnail';\n\nconst StyledFileItemContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'hasError',\n})<{ hasError?: boolean }>(({ theme, hasError }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  width: '100%',\n  gap: theme.spacing(2),\n  padding: theme.spacing(2),\n  borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  backgroundColor: hasError\n    ? theme.palette.semantic.fill['fill-error-weak']\n    : theme.palette.semantic.background['background-raised'],\n}));\n\nconst StyledFileItemContent = styled(Box)(() => ({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  width: '100%',\n}));\nconst StyledFileName = styled(Typography)(() => ({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst StyledLinearProgress = styled(LinearProgress)({\n  width: '250px',\n});\n\nexport interface FileItemProps {\n  file: File ;\n  error?: string | null;\n  isUploading?: boolean;\n  onRemove: (file: File) => void;\n}\n\nconst FileItem: React.FC<FileItemProps> = ({\n  file,\n  error = null,\n  isUploading = false,\n  onRemove\n}) => {\n  const theme = useTheme();\n\n  const handleRemoveClick = (): void => {\n    onRemove(file);\n  };\n\n  const formatFileSize = (bytes: number): string => {\n    if (bytes === 0) return '0 Bytes';\n    const k = 1024;\n    const sizes = ['B', 'KB', 'MB', 'GB'];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n    return `${Math.round(bytes / Math.pow(k, i) * 100) / 100} ${sizes[i]}`;\n  };\n\n  return (\n    <StyledFileItemContainer hasError={!!error}>\n      <FileThumbnail file={file} />\n\n      <Stack direction=\"row\" flex={1} gap={theme.spacing(1)}>\n        <Stack  direction=\"column\" width=\"100%\">\n          <StyledFileName\n            color={theme.palette.semantic.text['text-strong']}\n            variant=\"captionWeak\"\n          >\n            {file.name}\n          </StyledFileName>\n          <Typography color={theme.palette.semantic.text['text-weak']} variant=\"captionWeak\">\n            {formatFileSize(file.size)}\n          </Typography>\n        </Stack>\n\n        <StyledFileItemContent>\n        {error &&\n          <Typography color={theme.palette.semantic.text['text-error']} variant=\"captionWeak\">\n            {error}\n          </Typography>\n        }\n        {isUploading && <StyledLinearProgress />}\n        </StyledFileItemContent>\n      </Stack>\n\n      <IconButton\n        aria-label=\"Remove file\"\n        onClick={handleRemoveClick}\n        size=\"small\"\n        tone=\"neutral\"\n        variant=\"tertiary\"\n      >\n        <CancelIcon />\n      </IconButton>\n    </StyledFileItemContainer>\n  );\n};\n\nexport default FileItem;\n"],"names":["StyledFileItemContainer","styled","Box","shouldForwardProp","prop","theme","hasError","display","alignItems","width","gap","spacing","padding","borderBottom","palette","semantic","stroke","backgroundColor","fill","background","StyledFileItemContent","flexDirection","justifyContent","StyledFileName","Typography","overflow","textOverflow","whiteSpace","StyledLinearProgress","LinearProgress","file","error","isUploading","onRemove","useTheme","_jsxs","children","_jsx","FileThumbnail","Stack","direction","flex","color","text","variant","name","bytes","i","Math","floor","log","round","pow","formatFileSize","size","IconButton","onClick","tone","CancelIcon"],"mappings":"kcAcA,MAAMA,EAA0BC,EAAOC,EAAK,CAC1CC,kBAAoBC,GAAkB,aAATA,GADCH,EAEL,EAAGI,QAAOC,eAAU,CAC7CC,QAAS,OACTC,WAAY,SACZC,MAAO,OACPC,IAAKL,EAAMM,QAAQ,GACnBC,QAASP,EAAMM,QAAQ,GACvBE,aAAc,aAAaR,EAAMS,QAAQC,SAASC,OAAO,iBACzDC,gBAAiBX,EACbD,EAAMS,QAAQC,SAASG,KAAK,mBAC5Bb,EAAMS,QAAQC,SAASI,WAAW,yBAGlCC,EAAwBnB,EAAOC,EAAPD,EAAY,KAAA,CACxCM,QAAS,OACTc,cAAe,MACfb,WAAY,SACZc,eAAgB,WAChBb,MAAO,WAEHc,EAAiBtB,EAAOuB,EAAPvB,EAAmB,KAAA,CACxCwB,SAAU,SACVC,aAAc,WACdC,WAAY,aAGRC,EAAuB3B,EAAO4B,EAAAA,eAAP5B,CAAuB,CAClDQ,MAAO,yBAUiC,EACxCqB,OACAC,QAAQ,KACRC,eAAc,EACdC,eAEA,MAAM5B,EAAQ6B,IAcd,OACEC,EAAAA,KAACnC,EAAuB,CAACM,WAAYyB,EAAKK,SAAA,CACxCC,EAAAA,IAACC,EAAa,CAACR,KAAMA,IAErBK,EAAAA,KAACI,EAAK,CAACC,UAAU,MAAMC,KAAM,EAAG/B,IAAKL,EAAMM,QAAQ,GAAEyB,SAAA,CACnDD,EAAAA,KAACI,EAAK,CAAEC,UAAU,SAAS/B,MAAM,OAAM2B,SAAA,CACrCC,MAACd,EAAc,CACbmB,MAAOrC,EAAMS,QAAQC,SAAS4B,KAAK,eACnCC,QAAQ,cAAaR,SAEpBN,EAAKe,OAERR,EAAAA,IAACb,EAAU,CAACkB,MAAOrC,EAAMS,QAAQC,SAAS4B,KAAK,aAAcC,QAAQ,cAAaR,SApBnE,CAACU,IACtB,GAAc,IAAVA,EAAa,MAAO,UACxB,MAEMC,EAAIC,KAAKC,MAAMD,KAAKE,IAAIJ,GAASE,KAAKE,IAFlC,OAGV,MAAO,GAAGF,KAAKG,MAAML,EAAQE,KAAKI,IAHxB,KAG+BL,GAAK,KAAO,OAFvC,CAAC,IAAK,KAAM,KAAM,MAEkCA,MAgBzDM,CAAevB,EAAKwB,WAIzBnB,EAAAA,KAACf,EAAqB,CAAAgB,SAAA,CACrBL,GACCM,MAACb,EAAU,CAACkB,MAAOrC,EAAMS,QAAQC,SAAS4B,KAAK,cAAeC,QAAQ,cAAaR,SAChFL,IAGJC,GAAeK,EAAAA,IAACT,EAAoB,UAIvCS,EAAAA,IAACkB,EAAAA,WAAU,CAAA,aACE,cACXC,QAzCoB,KACxBvB,EAASH,IAyCLwB,KAAK,QACLG,KAAK,UACLb,QAAQ,WAAUR,SAElBC,EAAAA,IAACqB,EAAU,CAAA"}

package/dist/components/organisms/FileUpload/components/FileItem.d.ts

@@ -0,0 +1,12 @@
+import react__default from 'react';
+
+interface FileItemProps {
+    file: File;
+    error?: string | null;
+    isUploading?: boolean;
+    onRemove: (file: File) => void;
+}
+declare const FileItem: react__default.FC<FileItemProps>;
+
+export { FileItem as default };
+export type { FileItemProps };

package/dist/components/organisms/FileUpload/components/FileItem.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import r from"@mui/material/Box";import i from"@mui/material/Stack";import o from"@mui/material/styles/styled";import a from"@mui/material/styles/useTheme";import{IconButton as n}from"../../../atoms/IconButton/index.js";import{LinearProgress as l}from"../../../atoms/LinearProgress/index.js";import m from"@mui/material/Typography";import s from"../../../../icons/Cancel/index.js";import c from"./FileThumbnail.js";const p=o(r,{shouldForwardProp:e=>"hasError"!==e})((({theme:e,hasError:t})=>({display:"flex",alignItems:"center",width:"100%",gap:e.spacing(2),padding:e.spacing(2),borderBottom:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,backgroundColor:t?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.background["background-raised"]}))),d=o(r)((()=>({display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end",width:"100%"}))),h=o(m)((()=>({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}))),f=o(l)({width:"250px"}),u=({file:r,error:o=null,isUploading:l=!1,onRemove:u})=>{const x=a();return e(p,{hasError:!!o,children:[t(c,{file:r}),e(i,{direction:"row",flex:1,gap:x.spacing(1),children:[e(i,{direction:"column",width:"100%",children:[t(h,{color:x.palette.semantic.text["text-strong"],variant:"captionWeak",children:r.name}),t(m,{color:x.palette.semantic.text["text-weak"],variant:"captionWeak",children:(e=>{if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(1024));return`${Math.round(e/Math.pow(1024,t)*100)/100} ${["B","KB","MB","GB"][t]}`})(r.size)})]}),e(d,{children:[o&&t(m,{color:x.palette.semantic.text["text-error"],variant:"captionWeak",children:o}),l&&t(f,{})]})]}),t(n,{"aria-label":"Remove file",onClick:()=>{u(r)},size:"small",tone:"neutral",variant:"tertiary",children:t(s,{})})]})};export{u as default};
+//# sourceMappingURL=FileItem.js.map

package/dist/components/organisms/FileUpload/components/FileItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileItem.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport styled from '@mui/material/styles/styled';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport IconButton from '@fd/components/atoms/IconButton';\nimport LinearProgress from '@fd/components/atoms/LinearProgress';\nimport Typography from '@fd/components/atoms/Typography';\nimport CancelIcon from '@fd/icons/Cancel';\n\nimport FileThumbnail from './FileThumbnail';\n\nconst StyledFileItemContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'hasError',\n})<{ hasError?: boolean }>(({ theme, hasError }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  width: '100%',\n  gap: theme.spacing(2),\n  padding: theme.spacing(2),\n  borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  backgroundColor: hasError\n    ? theme.palette.semantic.fill['fill-error-weak']\n    : theme.palette.semantic.background['background-raised'],\n}));\n\nconst StyledFileItemContent = styled(Box)(() => ({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  width: '100%',\n}));\nconst StyledFileName = styled(Typography)(() => ({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst StyledLinearProgress = styled(LinearProgress)({\n  width: '250px',\n});\n\nexport interface FileItemProps {\n  file: File ;\n  error?: string | null;\n  isUploading?: boolean;\n  onRemove: (file: File) => void;\n}\n\nconst FileItem: React.FC<FileItemProps> = ({\n  file,\n  error = null,\n  isUploading = false,\n  onRemove\n}) => {\n  const theme = useTheme();\n\n  const handleRemoveClick = (): void => {\n    onRemove(file);\n  };\n\n  const formatFileSize = (bytes: number): string => {\n    if (bytes === 0) return '0 Bytes';\n    const k = 1024;\n    const sizes = ['B', 'KB', 'MB', 'GB'];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n    return `${Math.round(bytes / Math.pow(k, i) * 100) / 100} ${sizes[i]}`;\n  };\n\n  return (\n    <StyledFileItemContainer hasError={!!error}>\n      <FileThumbnail file={file} />\n\n      <Stack direction=\"row\" flex={1} gap={theme.spacing(1)}>\n        <Stack  direction=\"column\" width=\"100%\">\n          <StyledFileName\n            color={theme.palette.semantic.text['text-strong']}\n            variant=\"captionWeak\"\n          >\n            {file.name}\n          </StyledFileName>\n          <Typography color={theme.palette.semantic.text['text-weak']} variant=\"captionWeak\">\n            {formatFileSize(file.size)}\n          </Typography>\n        </Stack>\n\n        <StyledFileItemContent>\n        {error &&\n          <Typography color={theme.palette.semantic.text['text-error']} variant=\"captionWeak\">\n            {error}\n          </Typography>\n        }\n        {isUploading && <StyledLinearProgress />}\n        </StyledFileItemContent>\n      </Stack>\n\n      <IconButton\n        aria-label=\"Remove file\"\n        onClick={handleRemoveClick}\n        size=\"small\"\n        tone=\"neutral\"\n        variant=\"tertiary\"\n      >\n        <CancelIcon />\n      </IconButton>\n    </StyledFileItemContainer>\n  );\n};\n\nexport default FileItem;\n"],"names":["StyledFileItemContainer","styled","Box","shouldForwardProp","prop","theme","hasError","display","alignItems","width","gap","spacing","padding","borderBottom","palette","semantic","stroke","backgroundColor","fill","background","StyledFileItemContent","flexDirection","justifyContent","StyledFileName","Typography","overflow","textOverflow","whiteSpace","StyledLinearProgress","LinearProgress","FileItem","file","error","isUploading","onRemove","useTheme","_jsxs","children","_jsx","FileThumbnail","Stack","direction","flex","color","text","variant","name","bytes","i","Math","floor","log","round","pow","formatFileSize","size","IconButton","onClick","tone","CancelIcon"],"mappings":"+dAcA,MAAMA,EAA0BC,EAAOC,EAAK,CAC1CC,kBAAoBC,GAAkB,aAATA,GADCH,EAEL,EAAGI,QAAOC,eAAU,CAC7CC,QAAS,OACTC,WAAY,SACZC,MAAO,OACPC,IAAKL,EAAMM,QAAQ,GACnBC,QAASP,EAAMM,QAAQ,GACvBE,aAAc,aAAaR,EAAMS,QAAQC,SAASC,OAAO,iBACzDC,gBAAiBX,EACbD,EAAMS,QAAQC,SAASG,KAAK,mBAC5Bb,EAAMS,QAAQC,SAASI,WAAW,yBAGlCC,EAAwBnB,EAAOC,EAAPD,EAAY,KAAA,CACxCM,QAAS,OACTc,cAAe,MACfb,WAAY,SACZc,eAAgB,WAChBb,MAAO,WAEHc,EAAiBtB,EAAOuB,EAAPvB,EAAmB,KAAA,CACxCwB,SAAU,SACVC,aAAc,WACdC,WAAY,aAGRC,EAAuB3B,EAAO4B,EAAP5B,CAAuB,CAClDQ,MAAO,UAUHqB,EAAoC,EACxCC,OACAC,QAAQ,KACRC,eAAc,EACdC,eAEA,MAAM7B,EAAQ8B,IAcd,OACEC,EAACpC,EAAuB,CAACM,WAAY0B,EAAKK,SAAA,CACxCC,EAACC,EAAa,CAACR,KAAMA,IAErBK,EAACI,EAAK,CAACC,UAAU,MAAMC,KAAM,EAAGhC,IAAKL,EAAMM,QAAQ,GAAE0B,SAAA,CACnDD,EAACI,EAAK,CAAEC,UAAU,SAAShC,MAAM,OAAM4B,SAAA,CACrCC,EAACf,EAAc,CACboB,MAAOtC,EAAMS,QAAQC,SAAS6B,KAAK,eACnCC,QAAQ,cAAaR,SAEpBN,EAAKe,OAERR,EAACd,EAAU,CAACmB,MAAOtC,EAAMS,QAAQC,SAAS6B,KAAK,aAAcC,QAAQ,cAAaR,SApBnE,CAACU,IACtB,GAAc,IAAVA,EAAa,MAAO,UACxB,MAEMC,EAAIC,KAAKC,MAAMD,KAAKE,IAAIJ,GAASE,KAAKE,IAFlC,OAGV,MAAO,GAAGF,KAAKG,MAAML,EAAQE,KAAKI,IAHxB,KAG+BL,GAAK,KAAO,OAFvC,CAAC,IAAK,KAAM,KAAM,MAEkCA,MAgBzDM,CAAevB,EAAKwB,WAIzBnB,EAAChB,EAAqB,CAAAiB,SAAA,CACrBL,GACCM,EAACd,EAAU,CAACmB,MAAOtC,EAAMS,QAAQC,SAAS6B,KAAK,cAAeC,QAAQ,cAAaR,SAChFL,IAGJC,GAAeK,EAACV,EAAoB,UAIvCU,EAACkB,EAAU,CAAA,aACE,cACXC,QAzCoB,KACxBvB,EAASH,IAyCLwB,KAAK,QACLG,KAAK,UACLb,QAAQ,WAAUR,SAElBC,EAACqB,EAAU,CAAA"}

package/dist/components/organisms/FileUpload/components/FileThumbnail.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/Box"),r=require("@mui/material/styles/styled"),s=require("@mui/material/styles/useTheme"),l=require("../../../../icons/File/index.cjs.js");const a=r(i)((({theme:e})=>({width:"64px",height:"64px",borderRadius:e.radius["radius-4"],overflow:"hidden",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:e.palette.semantic.fill["fill-weak"],flexShrink:0}))),n=r(i)((({theme:e})=>({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:e.radius["radius-32"],backgroundColor:e.palette.semantic.fill["fill-weak"]}))),c=r("img")({width:"100%",height:"100%",objectFit:"cover"});module.exports=({file:i})=>{const r=s(),[o,u]=t.useState(null),[d,m]=t.useState(!1);return t.useEffect((()=>{const e=i.type.startsWith("image/");if(m(e),e){const e=URL.createObjectURL(i);return u(e),()=>{URL.revokeObjectURL(e)}}}),[i]),d&&o?e.jsx(a,{children:e.jsx(c,{alt:i.name,src:o})}):e.jsx(n,{children:e.jsx(l,{color:r.palette.semantic.icon["icon-strong"]})})};
+//# sourceMappingURL=FileThumbnail.cjs.js.map

package/dist/components/organisms/FileUpload/components/FileThumbnail.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileThumbnail.cjs.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileThumbnail.tsx"],"sourcesContent":["import React, { useEffect,useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport styled from '@mui/material/styles/styled';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport FileIcon from '@fd/icons/File';\n\nconst StyledThumbnailContainer = styled(Box)(({ theme }) => ({\n  width: '64px',\n  height: '64px',\n  borderRadius: theme.radius['radius-4'],\n  overflow: 'hidden',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: theme.palette.semantic.fill['fill-weak'],\n  flexShrink: 0,\n}));\n\nconst StyledIconContainer = styled(Box)(({   theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: theme.radius['radius-32'],\n  backgroundColor:  theme.palette.semantic.fill['fill-weak']\n}));\n\nconst StyledImage = styled('img')({\n  width: '100%',\n  height: '100%',\n  objectFit: 'cover',\n});\n\nexport interface FileThumbnailProps {\n  file: File;\n}\n\nconst FileThumbnail: React.FC<FileThumbnailProps> = ({ file }) => {\n  const theme = useTheme();\n  const [imageUrl, setImageUrl] = useState<string | null>(null);\n  const [isImage, setIsImage] = useState(false);\n\n  useEffect(() => {\n    // Check if the file is an image\n    const fileType = file.type;\n    const isImageFile = fileType.startsWith('image/');\n    setIsImage(isImageFile);\n\n    if (isImageFile) {\n      // Create object URL for image preview\n      const url = URL.createObjectURL(file);\n      setImageUrl(url);\n\n      // Cleanup function to revoke object URL\n      return (): void => {\n        URL.revokeObjectURL(url);\n      };\n    }\n\n    return undefined;\n  }, [file]);\n\n  return (\n    isImage && imageUrl ? (\n      <StyledThumbnailContainer>\n        <StyledImage alt={file.name} src={imageUrl} />\n      </StyledThumbnailContainer>\n    )  :\n     (\n        <StyledIconContainer>\n          <FileIcon\n          color={theme.palette.semantic.icon['icon-strong']}\n          />\n        </StyledIconContainer>\n      )\n\n  );\n};\n\nexport default FileThumbnail;\n"],"names":["StyledThumbnailContainer","styled","Box","theme","width","height","borderRadius","radius","overflow","display","alignItems","justifyContent","backgroundColor","palette","semantic","fill","flexShrink","StyledIconContainer","flexDirection","padding","StyledImage","objectFit","file","useTheme","imageUrl","setImageUrl","useState","isImage","setIsImage","useEffect","isImageFile","type","startsWith","url","URL","createObjectURL","revokeObjectURL","_jsx","children","alt","name","src","FileIcon","color","icon"],"mappings":"uOAQA,MAAMA,EAA2BC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACrDC,MAAO,OACPC,OAAQ,OACRC,aAAcH,EAAMI,OAAO,YAC3BC,SAAU,SACVC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,gBAAiBT,EAAMU,QAAQC,SAASC,KAAK,aAC7CC,WAAY,MAGRC,EAAsBhB,EAAOC,EAAPD,EAAY,EAAKE,YAAO,CAClDM,QAAS,OACTS,cAAe,SACfd,MAAO,OACPC,OAAQ,OACRc,QAAS,MACTR,eAAgB,SAChBD,WAAY,SACZJ,aAAcH,EAAMI,OAAO,aAC3BK,gBAAkBT,EAAMU,QAAQC,SAASC,KAAK,iBAG1CK,EAAcnB,EAAO,MAAPA,CAAc,CAChCG,MAAO,OACPC,OAAQ,OACRgB,UAAW,yBAOuC,EAAGC,WACrD,MAAMnB,EAAQoB,KACPC,EAAUC,GAAeC,EAAAA,SAAwB,OACjDC,EAASC,GAAcF,EAAAA,UAAS,GAsBvC,OApBAG,EAAAA,WAAU,KAER,MACMC,EADWR,EAAKS,KACOC,WAAW,UAGxC,GAFAJ,EAAWE,GAEPA,EAAa,CAEf,MAAMG,EAAMC,IAAIC,gBAAgBb,GAIhC,OAHAG,EAAYQ,GAGL,KACLC,IAAIE,gBAAgBH,GAExB,IAGC,CAACX,IAGFK,GAAWH,EACTa,EAAAA,IAACrC,EAAwB,CAAAsC,SACvBD,EAAAA,IAACjB,EAAW,CAACmB,IAAKjB,EAAKkB,KAAMC,IAAKjB,MAIlCa,EAAAA,IAACpB,EAAmB,CAAAqB,SAClBD,EAAAA,IAACK,EAAQ,CACTC,MAAOxC,EAAMU,QAAQC,SAAS8B,KAAK"}

package/dist/components/organisms/FileUpload/components/FileThumbnail.d.ts

@@ -0,0 +1,9 @@
+import react__default from 'react';
+
+interface FileThumbnailProps {
+    file: File;
+}
+declare const FileThumbnail: react__default.FC<FileThumbnailProps>;
+
+export { FileThumbnail as default };
+export type { FileThumbnailProps };

package/dist/components/organisms/FileUpload/components/FileThumbnail.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{useState as t,useEffect as i}from"react";import r from"@mui/material/Box";import o from"@mui/material/styles/styled";import l from"@mui/material/styles/useTheme";import a from"../../../../icons/File/index.js";const n=o(r)((({theme:e})=>({width:"64px",height:"64px",borderRadius:e.radius["radius-4"],overflow:"hidden",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:e.palette.semantic.fill["fill-weak"],flexShrink:0}))),s=o(r)((({theme:e})=>({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:e.radius["radius-32"],backgroundColor:e.palette.semantic.fill["fill-weak"]}))),m=o("img")({width:"100%",height:"100%",objectFit:"cover"}),c=({file:r})=>{const o=l(),[c,d]=t(null),[f,u]=t(!1);return i((()=>{const e=r.type.startsWith("image/");if(u(e),e){const e=URL.createObjectURL(r);return d(e),()=>{URL.revokeObjectURL(e)}}}),[r]),f&&c?e(n,{children:e(m,{alt:r.name,src:c})}):e(s,{children:e(a,{color:o.palette.semantic.icon["icon-strong"]})})};export{c as default};
+//# sourceMappingURL=FileThumbnail.js.map

package/dist/components/organisms/FileUpload/components/FileThumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileThumbnail.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileThumbnail.tsx"],"sourcesContent":["import React, { useEffect,useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport styled from '@mui/material/styles/styled';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport FileIcon from '@fd/icons/File';\n\nconst StyledThumbnailContainer = styled(Box)(({ theme }) => ({\n  width: '64px',\n  height: '64px',\n  borderRadius: theme.radius['radius-4'],\n  overflow: 'hidden',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: theme.palette.semantic.fill['fill-weak'],\n  flexShrink: 0,\n}));\n\nconst StyledIconContainer = styled(Box)(({   theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: theme.radius['radius-32'],\n  backgroundColor:  theme.palette.semantic.fill['fill-weak']\n}));\n\nconst StyledImage = styled('img')({\n  width: '100%',\n  height: '100%',\n  objectFit: 'cover',\n});\n\nexport interface FileThumbnailProps {\n  file: File;\n}\n\nconst FileThumbnail: React.FC<FileThumbnailProps> = ({ file }) => {\n  const theme = useTheme();\n  const [imageUrl, setImageUrl] = useState<string | null>(null);\n  const [isImage, setIsImage] = useState(false);\n\n  useEffect(() => {\n    // Check if the file is an image\n    const fileType = file.type;\n    const isImageFile = fileType.startsWith('image/');\n    setIsImage(isImageFile);\n\n    if (isImageFile) {\n      // Create object URL for image preview\n      const url = URL.createObjectURL(file);\n      setImageUrl(url);\n\n      // Cleanup function to revoke object URL\n      return (): void => {\n        URL.revokeObjectURL(url);\n      };\n    }\n\n    return undefined;\n  }, [file]);\n\n  return (\n    isImage && imageUrl ? (\n      <StyledThumbnailContainer>\n        <StyledImage alt={file.name} src={imageUrl} />\n      </StyledThumbnailContainer>\n    )  :\n     (\n        <StyledIconContainer>\n          <FileIcon\n          color={theme.palette.semantic.icon['icon-strong']}\n          />\n        </StyledIconContainer>\n      )\n\n  );\n};\n\nexport default FileThumbnail;\n"],"names":["StyledThumbnailContainer","styled","Box","theme","width","height","borderRadius","radius","overflow","display","alignItems","justifyContent","backgroundColor","palette","semantic","fill","flexShrink","StyledIconContainer","flexDirection","padding","StyledImage","objectFit","FileThumbnail","file","useTheme","imageUrl","setImageUrl","useState","isImage","setIsImage","useEffect","isImageFile","type","startsWith","url","URL","createObjectURL","revokeObjectURL","_jsx","children","alt","name","src","FileIcon","color","icon"],"mappings":"gQAQA,MAAMA,EAA2BC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACrDC,MAAO,OACPC,OAAQ,OACRC,aAAcH,EAAMI,OAAO,YAC3BC,SAAU,SACVC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,gBAAiBT,EAAMU,QAAQC,SAASC,KAAK,aAC7CC,WAAY,MAGRC,EAAsBhB,EAAOC,EAAPD,EAAY,EAAKE,YAAO,CAClDM,QAAS,OACTS,cAAe,SACfd,MAAO,OACPC,OAAQ,OACRc,QAAS,MACTR,eAAgB,SAChBD,WAAY,SACZJ,aAAcH,EAAMI,OAAO,aAC3BK,gBAAkBT,EAAMU,QAAQC,SAASC,KAAK,iBAG1CK,EAAcnB,EAAO,MAAPA,CAAc,CAChCG,MAAO,OACPC,OAAQ,OACRgB,UAAW,UAOPC,EAA8C,EAAGC,WACrD,MAAMpB,EAAQqB,KACPC,EAAUC,GAAeC,EAAwB,OACjDC,EAASC,GAAcF,GAAS,GAsBvC,OApBAG,GAAU,KAER,MACMC,EADWR,EAAKS,KACOC,WAAW,UAGxC,GAFAJ,EAAWE,GAEPA,EAAa,CAEf,MAAMG,EAAMC,IAAIC,gBAAgBb,GAIhC,OAHAG,EAAYQ,GAGL,KACLC,IAAIE,gBAAgBH,GAExB,IAGC,CAACX,IAGFK,GAAWH,EACTa,EAACtC,EAAwB,CAAAuC,SACvBD,EAAClB,EAAW,CAACoB,IAAKjB,EAAKkB,KAAMC,IAAKjB,MAIlCa,EAACrB,EAAmB,CAAAsB,SAClBD,EAACK,EAAQ,CACTC,MAAOzC,EAAMU,QAAQC,SAAS+B,KAAK"}

package/dist/components/organisms/FileUpload/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),i=require("react"),l=require("@mui/material/Stack/Stack"),a=require("@mui/material/styles/useTheme"),t=require("@mui/material/Typography"),s=require("./components/FileDropZone.cjs.js"),n=require("./components/FileItem.cjs.js");module.exports=o=>{const r=a(),{label:m="Upload File",files:d,allowedFileTypes:p,maxFiles:x,maxFileSize:c,onUpload:u,onRemove:F,multiple:T=!0,dragActiveText:g,dragInactiveText:v,browseButtonText:j,invalidFileTypesText:y="File type is not allowed. Allowed types: {allowedFileTypes}",invalidFileSizeText:f="File size is too large. Maximum size: {maxFileSize}",invalidFileCountText:h="Too many files selected. Maximum allowed: {maxFiles}"}=o,[w,S]=i.useState(d),q=e=>{w.some((i=>i.file===e))&&S((i=>i.filter((i=>i.file!==e)))),F(e)};return e.jsxs(e.Fragment,{children:[e.jsx(t,{paddingBottom:r.spacing(1),variant:"b1Weak",children:m}),e.jsxs(l,{direction:"column",flex:1,gap:r.spacing(1),children:[e.jsx(s,{allowedFileTypes:p,browseButtonText:j,dragActiveText:g,dragInactiveText:v,handleUpload:e=>{const i=e.map((e=>({file:e,isUploading:!0})));S((e=>[...e,...i])),u(e)},invalidFileCountText:h,invalidFileSizeText:f,invalidFileTypesText:y,maxFiles:x,maxFileSize:c,multiple:T}),w.length>0&&e.jsx(l,{direction:"column",gap:r.spacing(1.5),children:w.map((i=>e.jsx(n,{file:i.file,isUploading:i.isUploading,onRemove:q},i.file.name)))})]})]})};
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/organisms/FileUpload/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/FileUpload/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Stack from '@mui/material/Stack/Stack';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport Typography from '@fd/components/atoms/Typography';\n\nimport FileDropZone from './components/FileDropZone';\nimport FileItem from './components/FileItem';\n\nexport interface FileUploadState {\n  file: File;\n  isUploading?: boolean;\n}\n\nexport interface FileUploadProps {\n  /**\n   * Label text displayed above the file upload area.\n   * @default 'Upload File'\n   */\n  label?: string;\n\n  /**\n   * Array of file upload states (file object with optional isUploading flag).\n   */\n  files: FileUploadState[];\n\n  /**\n   * Array of allowed file extensions (without dots).\n   * Example: ['jpg', 'png', 'pdf']\n   */\n  allowedFileTypes: string[];\n\n  /**\n   * Whether multiple files can be selected at once.\n   * @default true\n   */\n  multiple?: boolean;\n\n  /**\n   * Maximum number of files that can be uploaded.\n   */\n  maxFiles: number;\n\n  /**\n   * Maximum file size allowed in bytes.\n   * Example: 10 * 1024 * 1024 for 10MB\n   */\n  maxFileSize: number;\n\n  /**\n   * Callback fired when files are uploaded.\n   */\n  onUpload: (files: File[]) => void;\n\n  /**\n   * Callback fired when a file is removed.\n   */\n  onRemove: (file: File) => void;\n\n  /**\n   * Text displayed when files are being dragged over the drop zone.\n   * @default 'Drop files here'\n   */\n  dragActiveText?: string;\n\n  /**\n   * Text displayed when no files are being dragged (idle state).\n   * @default 'Drag and drop files here'\n   */\n  dragInactiveText?: string;\n\n  /**\n   * Text displayed on the browse/upload button.\n   * @default 'Browse files'\n   */\n  browseButtonText?: string;\n\n  /**\n   * Text displayed when a file type is not allowed.\n   * @default 'File type is not allowed. Allowed types: {allowedFileTypes}'\n   */\n  invalidFileTypesText?: string;\n\n  /**\n   * Text displayed when a file size is too large.\n   * @default 'File size is too large. Maximum size: {maxFileSize}'\n   */\n  invalidFileSizeText?: string;\n\n  /**\n   * Text displayed when too many files are selected.\n   * @default 'Too many files selected. Maximum allowed: {maxFiles}'\n   */\n  invalidFileCountText?: string;\n}\n\nconst FileUpload: React.FC<FileUploadProps> = (props) => {\n  const theme = useTheme();\n  const {\n    label = 'Upload File',\n    files,\n    allowedFileTypes,\n    maxFiles,\n    maxFileSize,\n    onUpload,\n    onRemove,\n    multiple = true,\n    dragActiveText,\n    dragInactiveText,\n    browseButtonText,\n    invalidFileTypesText = 'File type is not allowed. Allowed types: {allowedFileTypes}',\n    invalidFileSizeText = 'File size is too large. Maximum size: {maxFileSize}',\n    invalidFileCountText = 'Too many files selected. Maximum allowed: {maxFiles}',\n  } = props;\n\n  // Local state for files being uploaded\n  const [uploadingFiles, setUploadingFiles] = useState<FileUploadState[]>(files);\n\n  const handleUpload = (newFiles: File[]): void => {\n    // Add new files to local uploading state\n    const newUploadingFiles: FileUploadState[] = newFiles.map((file) => ({\n      file,\n      isUploading: true,\n    }));\n\n    setUploadingFiles((prev) => [...prev, ...newUploadingFiles]);\n\n    // Call parent's upload handler\n    onUpload(newFiles);\n  };\n\n  const handleRemoveFile = (fileToRemove: File): void => {\n    // Check if file is in local uploading state\n    const isUploadingFile = uploadingFiles.some((state) => state.file === fileToRemove);\n\n    if (isUploadingFile) {\n      // Remove from local state\n      setUploadingFiles((prev) => prev.filter((state) => state.file !== fileToRemove));\n    }\n\n    // Always notify parent\n    onRemove(fileToRemove);\n  };\n\n  return (\n    <>\n      <Typography paddingBottom={theme.spacing(1)} variant=\"b1Weak\">{label}</Typography>\n      <Stack direction=\"column\" flex={1} gap={theme.spacing(1)}>\n        <FileDropZone\n          allowedFileTypes={allowedFileTypes}\n          browseButtonText={browseButtonText}\n          dragActiveText={dragActiveText}\n          dragInactiveText={dragInactiveText}\n          handleUpload={handleUpload}\n          invalidFileCountText={invalidFileCountText}\n          invalidFileSizeText={invalidFileSizeText}\n          invalidFileTypesText={invalidFileTypesText}\n          maxFiles={maxFiles}\n          maxFileSize={maxFileSize}\n          multiple={multiple}\n        />\n\n        {uploadingFiles.length > 0 && (\n          <Stack direction=\"column\" gap={theme.spacing(1.5)}>\n            {uploadingFiles.map((fileState) => (\n              <FileItem\n                key={fileState.file.name}\n                file={fileState.file}\n                isUploading={fileState.isUploading}\n                onRemove={handleRemoveFile}\n              />\n            ))}\n          </Stack>\n        )}\n      </Stack>\n    </>\n  );\n};\n\nexport default FileUpload;"],"names":["props","theme","useTheme","label","files","allowedFileTypes","maxFiles","maxFileSize","onUpload","onRemove","multiple","dragActiveText","dragInactiveText","browseButtonText","invalidFileTypesText","invalidFileSizeText","invalidFileCountText","uploadingFiles","setUploadingFiles","useState","handleRemoveFile","fileToRemove","some","state","file","prev","filter","_jsxs","_Fragment","children","_jsx","Typography","paddingBottom","spacing","variant","Stack","direction","flex","gap","FileDropZone","handleUpload","newFiles","newUploadingFiles","map","isUploading","length","fileState","FileItem","name"],"mappings":"kSAiG+CA,IAC7C,MAAMC,EAAQC,KACRC,MACJA,EAAQ,cAAaC,MACrBA,EAAKC,iBACLA,EAAgBC,SAChBA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,SACRA,EAAQC,SACRA,GAAW,EAAIC,eACfA,EAAcC,iBACdA,EAAgBC,iBAChBA,EAAgBC,qBAChBA,EAAuB,8DAA6DC,oBACpFA,EAAsB,sDAAqDC,qBAC3EA,EAAuB,wDACrBhB,GAGGiB,EAAgBC,GAAqBC,EAAAA,SAA4Bf,GAelEgB,EAAoBC,IAEAJ,EAAeK,MAAMC,GAAUA,EAAMC,OAASH,KAIpEH,GAAmBO,GAASA,EAAKC,QAAQH,GAAUA,EAAMC,OAASH,MAIpEZ,EAASY,IAGX,OACEM,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CACEC,MAACC,GAAWC,cAAe/B,EAAMgC,QAAQ,GAAIC,QAAQ,SAAQL,SAAE1B,IAC/DwB,EAAAA,KAACQ,EAAK,CAACC,UAAU,SAASC,KAAM,EAAGC,IAAKrC,EAAMgC,QAAQ,GAAEJ,SAAA,CACtDC,MAACS,EAAY,CACXlC,iBAAkBA,EAClBQ,iBAAkBA,EAClBF,eAAgBA,EAChBC,iBAAkBA,EAClB4B,aAnCcC,IAEpB,MAAMC,EAAuCD,EAASE,KAAKnB,IAAI,CAC7DA,OACAoB,aAAa,MAGf1B,GAAmBO,GAAS,IAAIA,KAASiB,KAGzClC,EAASiC,IA0BHzB,qBAAsBA,EACtBD,oBAAqBA,EACrBD,qBAAsBA,EACtBR,SAAUA,EACVC,YAAaA,EACbG,SAAUA,IAGXO,EAAe4B,OAAS,GACvBf,MAACK,GAAMC,UAAU,SAASE,IAAKrC,EAAMgC,QAAQ,KAAIJ,SAC9CZ,EAAe0B,KAAKG,GACnBhB,EAAAA,IAACiB,EAAQ,CAEPvB,KAAMsB,EAAUtB,KAChBoB,YAAaE,EAAUF,YACvBnC,SAAUW,GAHL0B,EAAUtB,KAAKwB"}

package/dist/components/organisms/FileUpload/index.d.ts

@@ -0,0 +1,78 @@
+import react__default from 'react';
+
+interface FileUploadState {
+    file: File;
+    isUploading?: boolean;
+}
+interface FileUploadProps {
+    /**
+     * Label text displayed above the file upload area.
+     * @default 'Upload File'
+     */
+    label?: string;
+    /**
+     * Array of file upload states (file object with optional isUploading flag).
+     */
+    files: FileUploadState[];
+    /**
+     * Array of allowed file extensions (without dots).
+     * Example: ['jpg', 'png', 'pdf']
+     */
+    allowedFileTypes: string[];
+    /**
+     * Whether multiple files can be selected at once.
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+     * Maximum number of files that can be uploaded.
+     */
+    maxFiles: number;
+    /**
+     * Maximum file size allowed in bytes.
+     * Example: 10 * 1024 * 1024 for 10MB
+     */
+    maxFileSize: number;
+    /**
+     * Callback fired when files are uploaded.
+     */
+    onUpload: (files: File[]) => void;
+    /**
+     * Callback fired when a file is removed.
+     */
+    onRemove: (file: File) => void;
+    /**
+     * Text displayed when files are being dragged over the drop zone.
+     * @default 'Drop files here'
+     */
+    dragActiveText?: string;
+    /**
+     * Text displayed when no files are being dragged (idle state).
+     * @default 'Drag and drop files here'
+     */
+    dragInactiveText?: string;
+    /**
+     * Text displayed on the browse/upload button.
+     * @default 'Browse files'
+     */
+    browseButtonText?: string;
+    /**
+     * Text displayed when a file type is not allowed.
+     * @default 'File type is not allowed. Allowed types: {allowedFileTypes}'
+     */
+    invalidFileTypesText?: string;
+    /**
+     * Text displayed when a file size is too large.
+     * @default 'File size is too large. Maximum size: {maxFileSize}'
+     */
+    invalidFileSizeText?: string;
+    /**
+     * Text displayed when too many files are selected.
+     * @default 'Too many files selected. Maximum allowed: {maxFiles}'
+     */
+    invalidFileCountText?: string;
+}
+declare const FileUpload: react__default.FC<FileUploadProps>;
+
+export { FileUpload as default };
+export type { FileUploadProps, FileUploadState };

package/dist/components/organisms/FileUpload/index.js

@@ -0,0 +1,2 @@
+import{jsxs as e,Fragment as i,jsx as l}from"react/jsx-runtime";import{useState as t}from"react";import a from"@mui/material/Stack/Stack";import o from"@mui/material/styles/useTheme";import m from"@mui/material/Typography";import n from"./components/FileDropZone.js";import r from"./components/FileItem.js";const s=s=>{const p=o(),{label:d="Upload File",files:c,allowedFileTypes:x,maxFiles:F,maxFileSize:T,onUpload:f,onRemove:u,multiple:g=!0,dragActiveText:v,dragInactiveText:y,browseButtonText:h,invalidFileTypesText:w="File type is not allowed. Allowed types: {allowedFileTypes}",invalidFileSizeText:z="File size is too large. Maximum size: {maxFileSize}",invalidFileCountText:S="Too many files selected. Maximum allowed: {maxFiles}"}=s,[U,b]=t(c),j=e=>{U.some((i=>i.file===e))&&b((i=>i.filter((i=>i.file!==e)))),u(e)};return e(i,{children:[l(m,{paddingBottom:p.spacing(1),variant:"b1Weak",children:d}),e(a,{direction:"column",flex:1,gap:p.spacing(1),children:[l(n,{allowedFileTypes:x,browseButtonText:h,dragActiveText:v,dragInactiveText:y,handleUpload:e=>{const i=e.map((e=>({file:e,isUploading:!0})));b((e=>[...e,...i])),f(e)},invalidFileCountText:S,invalidFileSizeText:z,invalidFileTypesText:w,maxFiles:F,maxFileSize:T,multiple:g}),U.length>0&&l(a,{direction:"column",gap:p.spacing(1.5),children:U.map((e=>l(r,{file:e.file,isUploading:e.isUploading,onRemove:j},e.file.name)))})]})]})};export{s as default};
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/FileUpload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/FileUpload/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Stack from '@mui/material/Stack/Stack';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport Typography from '@fd/components/atoms/Typography';\n\nimport FileDropZone from './components/FileDropZone';\nimport FileItem from './components/FileItem';\n\nexport interface FileUploadState {\n  file: File;\n  isUploading?: boolean;\n}\n\nexport interface FileUploadProps {\n  /**\n   * Label text displayed above the file upload area.\n   * @default 'Upload File'\n   */\n  label?: string;\n\n  /**\n   * Array of file upload states (file object with optional isUploading flag).\n   */\n  files: FileUploadState[];\n\n  /**\n   * Array of allowed file extensions (without dots).\n   * Example: ['jpg', 'png', 'pdf']\n   */\n  allowedFileTypes: string[];\n\n  /**\n   * Whether multiple files can be selected at once.\n   * @default true\n   */\n  multiple?: boolean;\n\n  /**\n   * Maximum number of files that can be uploaded.\n   */\n  maxFiles: number;\n\n  /**\n   * Maximum file size allowed in bytes.\n   * Example: 10 * 1024 * 1024 for 10MB\n   */\n  maxFileSize: number;\n\n  /**\n   * Callback fired when files are uploaded.\n   */\n  onUpload: (files: File[]) => void;\n\n  /**\n   * Callback fired when a file is removed.\n   */\n  onRemove: (file: File) => void;\n\n  /**\n   * Text displayed when files are being dragged over the drop zone.\n   * @default 'Drop files here'\n   */\n  dragActiveText?: string;\n\n  /**\n   * Text displayed when no files are being dragged (idle state).\n   * @default 'Drag and drop files here'\n   */\n  dragInactiveText?: string;\n\n  /**\n   * Text displayed on the browse/upload button.\n   * @default 'Browse files'\n   */\n  browseButtonText?: string;\n\n  /**\n   * Text displayed when a file type is not allowed.\n   * @default 'File type is not allowed. Allowed types: {allowedFileTypes}'\n   */\n  invalidFileTypesText?: string;\n\n  /**\n   * Text displayed when a file size is too large.\n   * @default 'File size is too large. Maximum size: {maxFileSize}'\n   */\n  invalidFileSizeText?: string;\n\n  /**\n   * Text displayed when too many files are selected.\n   * @default 'Too many files selected. Maximum allowed: {maxFiles}'\n   */\n  invalidFileCountText?: string;\n}\n\nconst FileUpload: React.FC<FileUploadProps> = (props) => {\n  const theme = useTheme();\n  const {\n    label = 'Upload File',\n    files,\n    allowedFileTypes,\n    maxFiles,\n    maxFileSize,\n    onUpload,\n    onRemove,\n    multiple = true,\n    dragActiveText,\n    dragInactiveText,\n    browseButtonText,\n    invalidFileTypesText = 'File type is not allowed. Allowed types: {allowedFileTypes}',\n    invalidFileSizeText = 'File size is too large. Maximum size: {maxFileSize}',\n    invalidFileCountText = 'Too many files selected. Maximum allowed: {maxFiles}',\n  } = props;\n\n  // Local state for files being uploaded\n  const [uploadingFiles, setUploadingFiles] = useState<FileUploadState[]>(files);\n\n  const handleUpload = (newFiles: File[]): void => {\n    // Add new files to local uploading state\n    const newUploadingFiles: FileUploadState[] = newFiles.map((file) => ({\n      file,\n      isUploading: true,\n    }));\n\n    setUploadingFiles((prev) => [...prev, ...newUploadingFiles]);\n\n    // Call parent's upload handler\n    onUpload(newFiles);\n  };\n\n  const handleRemoveFile = (fileToRemove: File): void => {\n    // Check if file is in local uploading state\n    const isUploadingFile = uploadingFiles.some((state) => state.file === fileToRemove);\n\n    if (isUploadingFile) {\n      // Remove from local state\n      setUploadingFiles((prev) => prev.filter((state) => state.file !== fileToRemove));\n    }\n\n    // Always notify parent\n    onRemove(fileToRemove);\n  };\n\n  return (\n    <>\n      <Typography paddingBottom={theme.spacing(1)} variant=\"b1Weak\">{label}</Typography>\n      <Stack direction=\"column\" flex={1} gap={theme.spacing(1)}>\n        <FileDropZone\n          allowedFileTypes={allowedFileTypes}\n          browseButtonText={browseButtonText}\n          dragActiveText={dragActiveText}\n          dragInactiveText={dragInactiveText}\n          handleUpload={handleUpload}\n          invalidFileCountText={invalidFileCountText}\n          invalidFileSizeText={invalidFileSizeText}\n          invalidFileTypesText={invalidFileTypesText}\n          maxFiles={maxFiles}\n          maxFileSize={maxFileSize}\n          multiple={multiple}\n        />\n\n        {uploadingFiles.length > 0 && (\n          <Stack direction=\"column\" gap={theme.spacing(1.5)}>\n            {uploadingFiles.map((fileState) => (\n              <FileItem\n                key={fileState.file.name}\n                file={fileState.file}\n                isUploading={fileState.isUploading}\n                onRemove={handleRemoveFile}\n              />\n            ))}\n          </Stack>\n        )}\n      </Stack>\n    </>\n  );\n};\n\nexport default FileUpload;"],"names":["FileUpload","props","theme","useTheme","label","files","allowedFileTypes","maxFiles","maxFileSize","onUpload","onRemove","multiple","dragActiveText","dragInactiveText","browseButtonText","invalidFileTypesText","invalidFileSizeText","invalidFileCountText","uploadingFiles","setUploadingFiles","useState","handleRemoveFile","fileToRemove","some","state","file","prev","filter","_jsxs","_Fragment","children","_jsx","Typography","paddingBottom","spacing","variant","Stack","direction","flex","gap","FileDropZone","handleUpload","newFiles","newUploadingFiles","map","isUploading","length","fileState","FileItem","name"],"mappings":"mTAiGA,MAAMA,EAAyCC,IAC7C,MAAMC,EAAQC,KACRC,MACJA,EAAQ,cAAaC,MACrBA,EAAKC,iBACLA,EAAgBC,SAChBA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,SACRA,EAAQC,SACRA,GAAW,EAAIC,eACfA,EAAcC,iBACdA,EAAgBC,iBAChBA,EAAgBC,qBAChBA,EAAuB,8DAA6DC,oBACpFA,EAAsB,sDAAqDC,qBAC3EA,EAAuB,wDACrBhB,GAGGiB,EAAgBC,GAAqBC,EAA4Bf,GAelEgB,EAAoBC,IAEAJ,EAAeK,MAAMC,GAAUA,EAAMC,OAASH,KAIpEH,GAAmBO,GAASA,EAAKC,QAAQH,GAAUA,EAAMC,OAASH,MAIpEZ,EAASY,IAGX,OACEM,EAAAC,EAAA,CAAAC,SAAA,CACEC,EAACC,GAAWC,cAAe/B,EAAMgC,QAAQ,GAAIC,QAAQ,SAAQL,SAAE1B,IAC/DwB,EAACQ,EAAK,CAACC,UAAU,SAASC,KAAM,EAAGC,IAAKrC,EAAMgC,QAAQ,GAAEJ,SAAA,CACtDC,EAACS,EAAY,CACXlC,iBAAkBA,EAClBQ,iBAAkBA,EAClBF,eAAgBA,EAChBC,iBAAkBA,EAClB4B,aAnCcC,IAEpB,MAAMC,EAAuCD,EAASE,KAAKnB,IAAI,CAC7DA,OACAoB,aAAa,MAGf1B,GAAmBO,GAAS,IAAIA,KAASiB,KAGzClC,EAASiC,IA0BHzB,qBAAsBA,EACtBD,oBAAqBA,EACrBD,qBAAsBA,EACtBR,SAAUA,EACVC,YAAaA,EACbG,SAAUA,IAGXO,EAAe4B,OAAS,GACvBf,EAACK,GAAMC,UAAU,SAASE,IAAKrC,EAAMgC,QAAQ,KAAIJ,SAC9CZ,EAAe0B,KAAKG,GACnBhB,EAACiB,EAAQ,CAEPvB,KAAMsB,EAAUtB,KAChBoB,YAAaE,EAAUF,YACvBnC,SAAUW,GAHL0B,EAAUtB,KAAKwB"}

package/dist/components/organisms/SummaryList/components/SummaryListCell.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material/Box/Box"),r=require("@mui/material/styles/styled"),i=require("@mui/material/TableCell/TableCell"),l=require("@mui/material/Typography");const a=r(i)((()=>({padding:0}))),n=r(l)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),s=r(l)((({theme:e})=>({color:e.palette.semantic.text["text-strong"]}))),o=r(t,{shouldForwardProp:e=>"isColumn"!==e})((({theme:e,isColumn:t})=>({display:"flex",flexDirection:t?"column":"row",height:"80px",paddingRight:e.spacing(3),alignItems:t?"flex-start":"center",justifyContent:t?"center":"flex-start",gap:0,flexShrink:0})));module.exports=({type:t,title:r,description:i})=>e.jsx(a,{children:(()=>{switch(t){case"Term":return e.jsx(o,{children:e.jsx(s,{variant:"body1",children:r})});case"Description":return e.jsx(o,{children:e.jsx(n,{variant:"body1",children:i})});case"SecondaryText":return e.jsxs(o,{isColumn:!0,children:[e.jsx(s,{variant:"body1",children:r}),e.jsx(n,{variant:"body1",children:i})]});default:return null}})()});
+//# sourceMappingURL=SummaryListCell.cjs.js.map

package/dist/components/organisms/SummaryList/components/SummaryListCell.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryListCell.cjs.js","sources":["../../../../../src/components/organisms/SummaryList/components/SummaryListCell.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport styled from '@mui/material/styles/styled';\nimport TableCell from '@mui/material/TableCell/TableCell';\n\nimport Typography from '@fd/components/atoms/Typography';\n\n/**\n * Props for the SummaryListColumnItem component.\n * Supports three display types: Term (title only), Description (description only), and SecondaryText (title with description).\n */\nexport type SummaryListColumnItemProps =\n  | { type: 'Description'; description: string; title?: never }\n  | { type: 'SecondaryText'; title: string; description: string }\n  | { type: 'Term'; title: string; description?: never };\n\nconst StyledCell = styled(TableCell)(() => ({\n  padding: 0,\n}));\n\nconst StyledDescription = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-strong'],\n}));\n\nconst StyledLeftLayoutContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'isColumn',\n})<{ isColumn?: boolean }>(({ theme, isColumn }) => ({\n  display: 'flex',\n  flexDirection: isColumn ? 'column' : 'row',\n  height: '80px',\n  paddingRight: theme.spacing(3),\n  alignItems: isColumn ? 'flex-start' : 'center',\n  justifyContent: isColumn ? 'center' : 'flex-start',\n  gap: 0,\n  flexShrink: 0,\n}));\n\n/**\n * A cell component for the SummaryList that renders different content types.\n * Supports three variants: Term (title only), Description (description only), and SecondaryText (title with description).\n *\n * @param props - The component props\n * @returns The rendered cell component\n */\nconst SummaryListColumnItem: React.FC<SummaryListColumnItemProps> = ({ type, title, description }) => {\n  /**\n   * Returns the appropriate content based on the cell type.\n   * Renders different layouts for Term, Description, and SecondaryText types.\n   *\n   * @returns The rendered content node for the cell\n   */\n  const getContent = (): React.ReactNode => {\n    switch (type) {\n      case 'Term':\n        return (\n          <StyledLeftLayoutContainer>\n            <StyledTitle variant=\"body1\">{title}</StyledTitle>\n          </StyledLeftLayoutContainer>\n        );\n      case 'Description':\n        return (\n          <StyledLeftLayoutContainer>\n            <StyledDescription variant=\"body1\">{description}</StyledDescription>\n          </StyledLeftLayoutContainer>\n        );\n      case 'SecondaryText':\n        return (\n          <StyledLeftLayoutContainer isColumn>\n            <StyledTitle variant=\"body1\">{title}</StyledTitle>\n            <StyledDescription variant=\"body1\">{description}</StyledDescription>\n          </StyledLeftLayoutContainer>\n        );\n      default:\n        return null;\n    }\n  };\n  return <StyledCell>{getContent()}</StyledCell>;\n};\nexport default SummaryListColumnItem;\n"],"names":["StyledCell","styled","TableCell","padding","StyledDescription","Typography","theme","color","palette","semantic","text","StyledTitle","StyledLeftLayoutContainer","Box","shouldForwardProp","prop","isColumn","display","flexDirection","height","paddingRight","spacing","alignItems","justifyContent","gap","flexShrink","type","title","description","_jsx","children","variant","_jsxs","getContent"],"mappings":"iNAeA,MAAMA,EAAaC,EAAOC,EAAPD,EAAkB,KAAA,CACnCE,QAAS,MAGLC,EAAoBH,EAAOI,EAAPJ,EAAmB,EAAGK,YAAO,CACrDC,MAAOD,EAAME,QAAQC,SAASC,KAAK,iBAG/BC,EAAcV,EAAOI,EAAPJ,EAAmB,EAAGK,YAAO,CAC/CC,MAAOD,EAAME,QAAQC,SAASC,KAAK,mBAG/BE,EAA4BX,EAAOY,EAAK,CAC5CC,kBAAoBC,GAAkB,aAATA,GADGd,EAEP,EAAGK,QAAOU,eAAU,CAC7CC,QAAS,OACTC,cAAeF,EAAW,SAAW,MACrCG,OAAQ,OACRC,aAAcd,EAAMe,QAAQ,GAC5BC,WAAYN,EAAW,aAAe,SACtCO,eAAgBP,EAAW,SAAW,aACtCQ,IAAK,EACLC,WAAY,qBAUsD,EAAGC,OAAMC,QAAOC,iBAgC3EC,EAAAA,IAAC7B,EAAU,CAAA8B,SAzBC,MACjB,OAAQJ,GACN,IAAK,OACH,OACEG,MAACjB,EAAyB,CAAAkB,SACxBD,EAAAA,IAAClB,EAAW,CAACoB,QAAQ,QAAOD,SAAEH,MAGpC,IAAK,cACH,OACEE,MAACjB,EAAyB,CAAAkB,SACxBD,EAAAA,IAACzB,EAAiB,CAAC2B,QAAQ,QAAOD,SAAEF,MAG1C,IAAK,gBACH,OACEI,OAACpB,EAAyB,CAACI,UAAQ,EAAAc,SAAA,CACjCD,MAAClB,EAAW,CAACoB,QAAQ,QAAOD,SAAEH,IAC9BE,MAACzB,EAAiB,CAAC2B,QAAQ,QAAOD,SAAEF,OAG1C,QACE,OAAO,OAGOK"}

package/dist/components/organisms/SummaryList/components/SummaryListCell.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Props for the SummaryListColumnItem component.
+ * Supports three display types: Term (title only), Description (description only), and SecondaryText (title with description).
+ */
+type SummaryListColumnItemProps = {
+    type: 'Description';
+    description: string;
+    title?: never;
+} | {
+    type: 'SecondaryText';
+    title: string;
+    description: string;
+} | {
+    type: 'Term';
+    title: string;
+    description?: never;
+};
+/**
+ * A cell component for the SummaryList that renders different content types.
+ * Supports three variants: Term (title only), Description (description only), and SecondaryText (title with description).
+ *
+ * @param props - The component props
+ * @returns The rendered cell component
+ */
+declare const SummaryListColumnItem: React.FC<SummaryListColumnItemProps>;
+
+export { SummaryListColumnItem as default };
+export type { SummaryListColumnItemProps };

package/dist/components/organisms/SummaryList/components/SummaryListCell.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"@mui/material/Box/Box";import i from"@mui/material/styles/styled";import a from"@mui/material/TableCell/TableCell";import l from"@mui/material/Typography";const n=i(a)((()=>({padding:0}))),o=i(l)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),m=i(l)((({theme:e})=>({color:e.palette.semantic.text["text-strong"]}))),c=i(r,{shouldForwardProp:e=>"isColumn"!==e})((({theme:e,isColumn:t})=>({display:"flex",flexDirection:t?"column":"row",height:"80px",paddingRight:e.spacing(3),alignItems:t?"flex-start":"center",justifyContent:t?"center":"flex-start",gap:0,flexShrink:0}))),s=({type:r,title:i,description:a})=>e(n,{children:(()=>{switch(r){case"Term":return e(c,{children:e(m,{variant:"body1",children:i})});case"Description":return e(c,{children:e(o,{variant:"body1",children:a})});case"SecondaryText":return t(c,{isColumn:!0,children:[e(m,{variant:"body1",children:i}),e(o,{variant:"body1",children:a})]});default:return null}})()});export{s as default};
+//# sourceMappingURL=SummaryListCell.js.map

package/dist/components/organisms/SummaryList/components/SummaryListCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryListCell.js","sources":["../../../../../src/components/organisms/SummaryList/components/SummaryListCell.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport styled from '@mui/material/styles/styled';\nimport TableCell from '@mui/material/TableCell/TableCell';\n\nimport Typography from '@fd/components/atoms/Typography';\n\n/**\n * Props for the SummaryListColumnItem component.\n * Supports three display types: Term (title only), Description (description only), and SecondaryText (title with description).\n */\nexport type SummaryListColumnItemProps =\n  | { type: 'Description'; description: string; title?: never }\n  | { type: 'SecondaryText'; title: string; description: string }\n  | { type: 'Term'; title: string; description?: never };\n\nconst StyledCell = styled(TableCell)(() => ({\n  padding: 0,\n}));\n\nconst StyledDescription = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-strong'],\n}));\n\nconst StyledLeftLayoutContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'isColumn',\n})<{ isColumn?: boolean }>(({ theme, isColumn }) => ({\n  display: 'flex',\n  flexDirection: isColumn ? 'column' : 'row',\n  height: '80px',\n  paddingRight: theme.spacing(3),\n  alignItems: isColumn ? 'flex-start' : 'center',\n  justifyContent: isColumn ? 'center' : 'flex-start',\n  gap: 0,\n  flexShrink: 0,\n}));\n\n/**\n * A cell component for the SummaryList that renders different content types.\n * Supports three variants: Term (title only), Description (description only), and SecondaryText (title with description).\n *\n * @param props - The component props\n * @returns The rendered cell component\n */\nconst SummaryListColumnItem: React.FC<SummaryListColumnItemProps> = ({ type, title, description }) => {\n  /**\n   * Returns the appropriate content based on the cell type.\n   * Renders different layouts for Term, Description, and SecondaryText types.\n   *\n   * @returns The rendered content node for the cell\n   */\n  const getContent = (): React.ReactNode => {\n    switch (type) {\n      case 'Term':\n        return (\n          <StyledLeftLayoutContainer>\n            <StyledTitle variant=\"body1\">{title}</StyledTitle>\n          </StyledLeftLayoutContainer>\n        );\n      case 'Description':\n        return (\n          <StyledLeftLayoutContainer>\n            <StyledDescription variant=\"body1\">{description}</StyledDescription>\n          </StyledLeftLayoutContainer>\n        );\n      case 'SecondaryText':\n        return (\n          <StyledLeftLayoutContainer isColumn>\n            <StyledTitle variant=\"body1\">{title}</StyledTitle>\n            <StyledDescription variant=\"body1\">{description}</StyledDescription>\n          </StyledLeftLayoutContainer>\n        );\n      default:\n        return null;\n    }\n  };\n  return <StyledCell>{getContent()}</StyledCell>;\n};\nexport default SummaryListColumnItem;\n"],"names":["StyledCell","styled","TableCell","padding","StyledDescription","Typography","theme","color","palette","semantic","text","StyledTitle","StyledLeftLayoutContainer","Box","shouldForwardProp","prop","isColumn","display","flexDirection","height","paddingRight","spacing","alignItems","justifyContent","gap","flexShrink","SummaryListColumnItem","type","title","description","_jsx","children","variant","_jsxs","getContent"],"mappings":"2NAeA,MAAMA,EAAaC,EAAOC,EAAPD,EAAkB,KAAA,CACnCE,QAAS,MAGLC,EAAoBH,EAAOI,EAAPJ,EAAmB,EAAGK,YAAO,CACrDC,MAAOD,EAAME,QAAQC,SAASC,KAAK,iBAG/BC,EAAcV,EAAOI,EAAPJ,EAAmB,EAAGK,YAAO,CAC/CC,MAAOD,EAAME,QAAQC,SAASC,KAAK,mBAG/BE,EAA4BX,EAAOY,EAAK,CAC5CC,kBAAoBC,GAAkB,aAATA,GADGd,EAEP,EAAGK,QAAOU,eAAU,CAC7CC,QAAS,OACTC,cAAeF,EAAW,SAAW,MACrCG,OAAQ,OACRC,aAAcd,EAAMe,QAAQ,GAC5BC,WAAYN,EAAW,aAAe,SACtCO,eAAgBP,EAAW,SAAW,aACtCQ,IAAK,EACLC,WAAY,MAURC,EAA8D,EAAGC,OAAMC,QAAOC,iBAgC3EC,EAAC9B,EAAU,CAAA+B,SAzBC,MACjB,OAAQJ,GACN,IAAK,OACH,OACEG,EAAClB,EAAyB,CAAAmB,SACxBD,EAACnB,EAAW,CAACqB,QAAQ,QAAOD,SAAEH,MAGpC,IAAK,cACH,OACEE,EAAClB,EAAyB,CAAAmB,SACxBD,EAAC1B,EAAiB,CAAC4B,QAAQ,QAAOD,SAAEF,MAG1C,IAAK,gBACH,OACEI,EAACrB,EAAyB,CAACI,UAAQ,EAAAe,SAAA,CACjCD,EAACnB,EAAW,CAACqB,QAAQ,QAAOD,SAAEH,IAC9BE,EAAC1B,EAAiB,CAAC4B,QAAQ,QAAOD,SAAEF,OAG1C,QACE,OAAO,OAGOK"}

package/dist/components/organisms/SummaryList/components/SummaryListRow.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/TableRow/TableRow");module.exports=({children:i})=>e.jsx(r,{children:i});
+//# sourceMappingURL=SummaryListRow.cjs.js.map

package/dist/components/organisms/SummaryList/components/SummaryListRow.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryListRow.cjs.js","sources":["../../../../../src/components/organisms/SummaryList/components/SummaryListRow.tsx"],"sourcesContent":["import TableRow from '@mui/material/TableRow/TableRow';\n\n/**\n * Props for the SummaryListRow component.\n */\nexport interface SummaryListRowProps {\n  /** The cell components to render within the row. */\n  children: React.ReactNode;\n}\n\n/**\n * A row component for the SummaryList that wraps cell components.\n * Provides the table row structure for SummaryListCell components.\n *\n * @param props - The component props\n * @returns The rendered table row component\n */\nconst SummaryListRow: React.FC<SummaryListRowProps> = ({ children }) => {\n  return <TableRow>{children}</TableRow>;\n};\n\nexport default SummaryListRow;\n"],"names":["children","_jsx","TableRow"],"mappings":"4GAiBsD,EAAGA,cAChDC,EAAAA,IAACC,EAAQ,CAAAF,SAAEA"}

package/dist/components/organisms/SummaryList/components/SummaryListRow.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props for the SummaryListRow component.
+ */
+interface SummaryListRowProps {
+    /** The cell components to render within the row. */
+    children: React.ReactNode;
+}
+/**
+ * A row component for the SummaryList that wraps cell components.
+ * Provides the table row structure for SummaryListCell components.
+ *
+ * @param props - The component props
+ * @returns The rendered table row component
+ */
+declare const SummaryListRow: React.FC<SummaryListRowProps>;
+
+export { SummaryListRow as default };
+export type { SummaryListRowProps };

package/dist/components/organisms/SummaryList/components/SummaryListRow.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import e from"@mui/material/TableRow/TableRow";const o=({children:o})=>r(e,{children:o});export{o as default};
+//# sourceMappingURL=SummaryListRow.js.map

package/dist/components/organisms/SummaryList/components/SummaryListRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryListRow.js","sources":["../../../../../src/components/organisms/SummaryList/components/SummaryListRow.tsx"],"sourcesContent":["import TableRow from '@mui/material/TableRow/TableRow';\n\n/**\n * Props for the SummaryListRow component.\n */\nexport interface SummaryListRowProps {\n  /** The cell components to render within the row. */\n  children: React.ReactNode;\n}\n\n/**\n * A row component for the SummaryList that wraps cell components.\n * Provides the table row structure for SummaryListCell components.\n *\n * @param props - The component props\n * @returns The rendered table row component\n */\nconst SummaryListRow: React.FC<SummaryListRowProps> = ({ children }) => {\n  return <TableRow>{children}</TableRow>;\n};\n\nexport default SummaryListRow;\n"],"names":["SummaryListRow","children","_jsx","TableRow"],"mappings":"uFAiBA,MAAMA,EAAgD,EAAGC,cAChDC,EAACC,EAAQ,CAAAF,SAAEA"}

package/dist/components/organisms/SummaryList/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/Box/Box"),i=require("@mui/material/styles/styled"),s=require("@mui/material/Table/Table"),l=require("@mui/material/TableBody/TableBody"),o=require("./components/SummaryListCell.cjs.js"),a=require("./components/SummaryListRow.cjs.js");const d=i(t)((()=>({flex:1,overflow:"auto"}))),n=i(s,{shouldForwardProp:e=>"hideLastDivider"!==e})((({hideLastDivider:e})=>({tableLayout:"fixed",...e&&{"& tbody tr:last-child td, & tbody tr:last-child th":{borderBottom:"none"}}})));exports.SummaryListCell=o,exports.SummaryListRow=a,exports.default=({children:t,hideLastDivider:i,rows:s})=>{const u=r.useMemo((()=>s&&0!==s.length?s.map(((r,t)=>e.jsx(a,{children:r.cells.map(((r,t)=>e.jsx(o,{...r},((e,r)=>{const t="title"in e?e.title:"",i="description"in e?e.description:"";return`summary-cell-${e.type}-${t}-${i}-${r}`})(r,t))))},((e,r)=>`summary-row-${e.cells.map((e=>{const r="title"in e?e.title:"",t="description"in e?e.description:"";return`${e.type}-${r}-${t}`})).join("|")}-${r}`)(r,t)))):[]),[s]);return e.jsx(d,{children:e.jsx(n,{hideLastDivider:i,children:e.jsx(l,{children:s&&s.length>0?u:t})})})};
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/organisms/SummaryList/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/SummaryList/index.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport Box from '@mui/material/Box/Box';\nimport styled from '@mui/material/styles/styled';\nimport Table from '@mui/material/Table/Table';\nimport TableBody from '@mui/material/TableBody/TableBody';\n\nimport SummaryListCell, { type SummaryListColumnItemProps } from './components/SummaryListCell';\nimport SummaryListRow from './components/SummaryListRow';\n\nconst StyledBox = styled(Box)(() => ({\n  flex: 1,\n  overflow: 'auto',\n}));\n\nconst StyledTable = styled(Table, {\n  shouldForwardProp: (prop) => prop !== 'hideLastDivider',\n})<{ hideLastDivider?: boolean }>(({ hideLastDivider }) => ({\n  tableLayout: 'fixed',\n  ...(hideLastDivider && {\n    '& tbody tr:last-child td, & tbody tr:last-child th': {\n      borderBottom: 'none',\n    },\n  }),\n}));\n\n/**\n * Data structure for a single row in the SummaryList.\n */\nexport interface SummaryListRowData {\n  /** Array of cell data for this row. */\n  cells: SummaryListColumnItemProps[];\n}\n\n/**\n * Props for the SummaryList component.\n */\nexport interface SummaryListProps {\n  /** The row components to render within the list. Used when rows prop is not provided. */\n  children?: React.ReactNode;\n  /** Hides the bottom border of the last row when true. */\n  hideLastDivider?: boolean;\n  /** Array of row data to render. Takes precedence over children when provided. */\n  rows?: SummaryListRowData[];\n}\n\n/**\n * A summary list component that displays data in a structured table format.\n * Supports optional hiding of the last row divider for cleaner visual presentation.\n * Can be used with either a `rows` prop for data-driven rendering or `children` for custom rendering.\n *\n * @param props - The component props\n * @returns The rendered summary list component\n */\nconst SummaryList: React.FC<SummaryListProps> = ({ children, hideLastDivider, rows }) => {\n  /**\n   * Generates a unique key for a row based on its content.\n   *\n   * @param row - The row data\n   * @param rowIndex - The index of the row in the array\n   * @returns A unique key string\n   */\n  const getRowKey = (row: SummaryListRowData, rowIndex: number): string => {\n    // Create a key from the row's cell content\n    const cellContent = row.cells\n      .map((cell) => {\n        const title = 'title' in cell ? cell.title : '';\n        const description = 'description' in cell ? cell.description : '';\n        return `${cell.type}-${title}-${description}`;\n      })\n      .join('|');\n    // Include index as fallback for uniqueness, but base it on content first\n    return `summary-row-${cellContent}-${rowIndex}`;\n  };\n\n  /**\n   * Generates a unique key for a cell based on its content.\n   *\n   * @param cell - The cell data\n   * @param cellIndex - The index of the cell in the row\n   * @returns A unique key string\n   */\n  const getCellKey = (cell: SummaryListColumnItemProps, cellIndex: number): string => {\n    const title = 'title' in cell ? cell.title : '';\n    const description = 'description' in cell ? cell.description : '';\n    // Base key on content, with index as fallback\n    return `summary-cell-${cell.type}-${title}-${description}-${cellIndex}`;\n  };\n\n  /**\n   * Renders rows from the rows prop data.\n   * Maps over the rows array and creates SummaryListRow and SummaryListCell components.\n   *\n   * @returns Array of rendered row components\n   */\n  const renderedRows = useMemo((): React.ReactNode[] => {\n    if (!rows || rows.length === 0) {\n      return [];\n    }\n\n    return rows.map((row, rowIndex) => (\n      <SummaryListRow key={getRowKey(row, rowIndex)}>\n        {row.cells.map((cell, cellIndex) => (\n          <SummaryListCell key={getCellKey(cell, cellIndex)} {...cell} />\n        ))}\n      </SummaryListRow>\n    ));\n  }, [rows]);\n\n  /**\n   * Determines what content to render in the table body.\n   * If rows are provided and have length > 0, render from rows.\n   * Otherwise, render children (existing pattern).\n   *\n   * @returns The content to render in the table body\n   */\n  const renderContent = (): React.ReactNode => {\n    if (rows && rows.length > 0) {\n      return renderedRows;\n    }\n\n    return children;\n  };\n\n  return (\n    <StyledBox>\n      <StyledTable hideLastDivider={hideLastDivider}>\n        <TableBody>{renderContent()}</TableBody>\n      </StyledTable>\n    </StyledBox>\n  );\n};\n\nexport default SummaryList;\nexport { SummaryListCell, SummaryListRow };\n"],"names":["StyledBox","styled","Box","flex","overflow","StyledTable","Table","shouldForwardProp","prop","hideLastDivider","tableLayout","borderBottom","children","rows","renderedRows","useMemo","length","map","row","rowIndex","_jsx","SummaryListRow","cells","cell","cellIndex","SummaryListCell","title","description","type","getCellKey","join","getRowKey","TableBody"],"mappings":"6XAUA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,KAAA,CAC5BE,KAAM,EACNC,SAAU,WAGNC,EAAcJ,EAAOK,EAAO,CAChCC,kBAAoBC,GAAkB,oBAATA,GADXP,EAEc,EAAGQ,sBAAiB,CACpDC,YAAa,WACTD,GAAmB,CACrB,qDAAsD,CACpDE,aAAc,gFAiC4B,EAAGC,WAAUH,kBAAiBI,WAQ5E,MAiCMC,EAAeC,EAAAA,SAAQ,IACtBF,GAAwB,IAAhBA,EAAKG,OAIXH,EAAKI,KAAI,CAACC,EAAKC,IACpBC,EAAAA,IAACC,EAAc,CAAAT,SACZM,EAAII,MAAML,KAAI,CAACM,EAAMC,IACpBJ,MAACK,EAAe,IAAuCF,GArB5C,EAACA,EAAkCC,KACpD,MAAME,EAAQ,UAAWH,EAAOA,EAAKG,MAAQ,GACvCC,EAAc,gBAAiBJ,EAAOA,EAAKI,YAAc,GAE/D,MAAO,gBAAgBJ,EAAKK,QAAQF,KAASC,KAAeH,KAiBhCK,CAAWN,EAAMC,OAzC7B,EAACN,EAAyBC,IAUnC,eARaD,EAAII,MACrBL,KAAKM,IACJ,MAAMG,EAAQ,UAAWH,EAAOA,EAAKG,MAAQ,GACvCC,EAAc,gBAAiBJ,EAAOA,EAAKI,YAAc,GAC/D,MAAO,GAAGJ,EAAKK,QAAQF,KAASC,OAEjCG,KAAK,QAE6BX,IA6BdY,CAAUb,EAAKC,MAJ7B,IAUR,CAACN,IAiBJ,OACEO,EAAAA,IAACpB,EAAS,CAAAY,SACRQ,EAAAA,IAACf,EAAW,CAACI,gBAAiBA,WAC5BW,EAAAA,IAACY,YAVDnB,GAAQA,EAAKG,OAAS,EACjBF,EAGFF"}

package/dist/components/organisms/SummaryList/index.d.ts

@@ -0,0 +1,34 @@
+import { SummaryListColumnItemProps } from './components/SummaryListCell.js';
+export { default as SummaryListCell } from './components/SummaryListCell.js';
+export { default as SummaryListRow } from './components/SummaryListRow.js';
+
+/**
+ * Data structure for a single row in the SummaryList.
+ */
+interface SummaryListRowData {
+    /** Array of cell data for this row. */
+    cells: SummaryListColumnItemProps[];
+}
+/**
+ * Props for the SummaryList component.
+ */
+interface SummaryListProps {
+    /** The row components to render within the list. Used when rows prop is not provided. */
+    children?: React.ReactNode;
+    /** Hides the bottom border of the last row when true. */
+    hideLastDivider?: boolean;
+    /** Array of row data to render. Takes precedence over children when provided. */
+    rows?: SummaryListRowData[];
+}
+/**
+ * A summary list component that displays data in a structured table format.
+ * Supports optional hiding of the last row divider for cleaner visual presentation.
+ * Can be used with either a `rows` prop for data-driven rendering or `children` for custom rendering.
+ *
+ * @param props - The component props
+ * @returns The rendered summary list component
+ */
+declare const SummaryList: React.FC<SummaryListProps>;
+
+export { SummaryList as default };
+export type { SummaryListProps, SummaryListRowData };

package/dist/components/organisms/SummaryList/index.js

@@ -0,0 +1,2 @@
+import{jsx as t}from"react/jsx-runtime";import{useMemo as r}from"react";import i from"@mui/material/Box/Box";import e from"@mui/material/styles/styled";import o from"@mui/material/Table/Table";import m from"@mui/material/TableBody/TableBody";import l from"./components/SummaryListCell.js";import a from"./components/SummaryListRow.js";const s=e(i)((()=>({flex:1,overflow:"auto"}))),d=e(o,{shouldForwardProp:t=>"hideLastDivider"!==t})((({hideLastDivider:t})=>({tableLayout:"fixed",...t&&{"& tbody tr:last-child td, & tbody tr:last-child th":{borderBottom:"none"}}}))),n=({children:i,hideLastDivider:e,rows:o})=>{const n=r((()=>o&&0!==o.length?o.map(((r,i)=>t(a,{children:r.cells.map(((r,i)=>t(l,{...r},((t,r)=>{const i="title"in t?t.title:"",e="description"in t?t.description:"";return`summary-cell-${t.type}-${i}-${e}-${r}`})(r,i))))},((t,r)=>`summary-row-${t.cells.map((t=>{const r="title"in t?t.title:"",i="description"in t?t.description:"";return`${t.type}-${r}-${i}`})).join("|")}-${r}`)(r,i)))):[]),[o]);return t(s,{children:t(d,{hideLastDivider:e,children:t(m,{children:o&&o.length>0?n:i})})})};export{l as SummaryListCell,a as SummaryListRow,n as default};
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/SummaryList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SummaryList/index.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport Box from '@mui/material/Box/Box';\nimport styled from '@mui/material/styles/styled';\nimport Table from '@mui/material/Table/Table';\nimport TableBody from '@mui/material/TableBody/TableBody';\n\nimport SummaryListCell, { type SummaryListColumnItemProps } from './components/SummaryListCell';\nimport SummaryListRow from './components/SummaryListRow';\n\nconst StyledBox = styled(Box)(() => ({\n  flex: 1,\n  overflow: 'auto',\n}));\n\nconst StyledTable = styled(Table, {\n  shouldForwardProp: (prop) => prop !== 'hideLastDivider',\n})<{ hideLastDivider?: boolean }>(({ hideLastDivider }) => ({\n  tableLayout: 'fixed',\n  ...(hideLastDivider && {\n    '& tbody tr:last-child td, & tbody tr:last-child th': {\n      borderBottom: 'none',\n    },\n  }),\n}));\n\n/**\n * Data structure for a single row in the SummaryList.\n */\nexport interface SummaryListRowData {\n  /** Array of cell data for this row. */\n  cells: SummaryListColumnItemProps[];\n}\n\n/**\n * Props for the SummaryList component.\n */\nexport interface SummaryListProps {\n  /** The row components to render within the list. Used when rows prop is not provided. */\n  children?: React.ReactNode;\n  /** Hides the bottom border of the last row when true. */\n  hideLastDivider?: boolean;\n  /** Array of row data to render. Takes precedence over children when provided. */\n  rows?: SummaryListRowData[];\n}\n\n/**\n * A summary list component that displays data in a structured table format.\n * Supports optional hiding of the last row divider for cleaner visual presentation.\n * Can be used with either a `rows` prop for data-driven rendering or `children` for custom rendering.\n *\n * @param props - The component props\n * @returns The rendered summary list component\n */\nconst SummaryList: React.FC<SummaryListProps> = ({ children, hideLastDivider, rows }) => {\n  /**\n   * Generates a unique key for a row based on its content.\n   *\n   * @param row - The row data\n   * @param rowIndex - The index of the row in the array\n   * @returns A unique key string\n   */\n  const getRowKey = (row: SummaryListRowData, rowIndex: number): string => {\n    // Create a key from the row's cell content\n    const cellContent = row.cells\n      .map((cell) => {\n        const title = 'title' in cell ? cell.title : '';\n        const description = 'description' in cell ? cell.description : '';\n        return `${cell.type}-${title}-${description}`;\n      })\n      .join('|');\n    // Include index as fallback for uniqueness, but base it on content first\n    return `summary-row-${cellContent}-${rowIndex}`;\n  };\n\n  /**\n   * Generates a unique key for a cell based on its content.\n   *\n   * @param cell - The cell data\n   * @param cellIndex - The index of the cell in the row\n   * @returns A unique key string\n   */\n  const getCellKey = (cell: SummaryListColumnItemProps, cellIndex: number): string => {\n    const title = 'title' in cell ? cell.title : '';\n    const description = 'description' in cell ? cell.description : '';\n    // Base key on content, with index as fallback\n    return `summary-cell-${cell.type}-${title}-${description}-${cellIndex}`;\n  };\n\n  /**\n   * Renders rows from the rows prop data.\n   * Maps over the rows array and creates SummaryListRow and SummaryListCell components.\n   *\n   * @returns Array of rendered row components\n   */\n  const renderedRows = useMemo((): React.ReactNode[] => {\n    if (!rows || rows.length === 0) {\n      return [];\n    }\n\n    return rows.map((row, rowIndex) => (\n      <SummaryListRow key={getRowKey(row, rowIndex)}>\n        {row.cells.map((cell, cellIndex) => (\n          <SummaryListCell key={getCellKey(cell, cellIndex)} {...cell} />\n        ))}\n      </SummaryListRow>\n    ));\n  }, [rows]);\n\n  /**\n   * Determines what content to render in the table body.\n   * If rows are provided and have length > 0, render from rows.\n   * Otherwise, render children (existing pattern).\n   *\n   * @returns The content to render in the table body\n   */\n  const renderContent = (): React.ReactNode => {\n    if (rows && rows.length > 0) {\n      return renderedRows;\n    }\n\n    return children;\n  };\n\n  return (\n    <StyledBox>\n      <StyledTable hideLastDivider={hideLastDivider}>\n        <TableBody>{renderContent()}</TableBody>\n      </StyledTable>\n    </StyledBox>\n  );\n};\n\nexport default SummaryList;\nexport { SummaryListCell, SummaryListRow };\n"],"names":["StyledBox","styled","Box","flex","overflow","StyledTable","Table","shouldForwardProp","prop","hideLastDivider","tableLayout","borderBottom","SummaryList","children","rows","renderedRows","useMemo","length","map","row","rowIndex","_jsx","SummaryListRow","cells","cell","cellIndex","SummaryListCell","title","description","type","getCellKey","join","getRowKey","TableBody"],"mappings":"+UAUA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,KAAA,CAC5BE,KAAM,EACNC,SAAU,WAGNC,EAAcJ,EAAOK,EAAO,CAChCC,kBAAoBC,GAAkB,oBAATA,GADXP,EAEc,EAAGQ,sBAAiB,CACpDC,YAAa,WACTD,GAAmB,CACrB,qDAAsD,CACpDE,aAAc,aAiCdC,EAA0C,EAAGC,WAAUJ,kBAAiBK,WAQ5E,MAiCMC,EAAeC,GAAQ,IACtBF,GAAwB,IAAhBA,EAAKG,OAIXH,EAAKI,KAAI,CAACC,EAAKC,IACpBC,EAACC,EAAc,CAAAT,SACZM,EAAII,MAAML,KAAI,CAACM,EAAMC,IACpBJ,EAACK,EAAe,IAAuCF,GArB5C,EAACA,EAAkCC,KACpD,MAAME,EAAQ,UAAWH,EAAOA,EAAKG,MAAQ,GACvCC,EAAc,gBAAiBJ,EAAOA,EAAKI,YAAc,GAE/D,MAAO,gBAAgBJ,EAAKK,QAAQF,KAASC,KAAeH,KAiBhCK,CAAWN,EAAMC,OAzC7B,EAACN,EAAyBC,IAUnC,eARaD,EAAII,MACrBL,KAAKM,IACJ,MAAMG,EAAQ,UAAWH,EAAOA,EAAKG,MAAQ,GACvCC,EAAc,gBAAiBJ,EAAOA,EAAKI,YAAc,GAC/D,MAAO,GAAGJ,EAAKK,QAAQF,KAASC,OAEjCG,KAAK,QAE6BX,IA6BdY,CAAUb,EAAKC,MAJ7B,IAUR,CAACN,IAiBJ,OACEO,EAACrB,EAAS,CAAAa,SACRQ,EAAChB,EAAW,CAACI,gBAAiBA,WAC5BY,EAACY,YAVDnB,GAAQA,EAAKG,OAAS,EACjBF,EAGFF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/portal-library",
-  "version": "7.3.5",
+  "version": "7.5.0",
   "files": [
     "dist"
   ],