@flipdish/portal-library 7.5.2 → 7.6.0

package/dist/components/molecules/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Tooltip/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport MUITooltip, { type TooltipProps as MUITooltipProps } from '@mui/material/Tooltip';\n\nimport Button from '@fd/components/atoms/Button';\nimport type { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';\nimport Link, { type StyledLinkProps } from '@fd/components/atoms/Link';\nimport Typography from '@fd/components/atoms/Typography';\nimport ButtonGroup from '@fd/components/molecules/ButtonGroup';\n\ntype TooltipPlacement = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'left' | 'right';\n\n// Map custom placement values to MUI placement values\nconst mapPlacementToMUI = (placement: TooltipPlacement): MUITooltipProps['placement'] => {\n  const placementMap: Record<TooltipPlacement, MUITooltipProps['placement']> = {\n    'bottom-right': 'top-end',\n    'bottom-left': 'top-start',\n    'bottom-center': 'top',\n    left: 'left',\n    right: 'right',\n  };\n\n  return placementMap[placement] ?? 'top';\n};\n\nconst StyledTooltip = styled(\n  ({ className, ...props }: MUITooltipProps) => <MUITooltip {...props} classes={{ popper: className }} />,\n  { shouldForwardProp: (prop) => prop !== 'isLarge' },\n)<{ isLarge: boolean }>(({ theme, isLarge }) => ({\n  '& .MuiTooltip-tooltip': {\n    backgroundColor: theme.palette.semantic.background['background-inverse'],\n    color: theme.palette.semantic.text['text-weak'],\n    borderRadius: theme.radius['radius-8'],\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n    paddingTop: isLarge ? theme.spacing(2) : theme.spacing(1),\n    paddingBottom: isLarge ? theme.spacing(2) : theme.spacing(1),\n    width: isLarge ? '332px' : 'auto',\n    boxShadow: theme.customShadows?.overlay,\n  },\n  '& .MuiTooltip-arrow': {\n    color: theme.palette.semantic.background['background-inverse'],\n  },\n}));\n\nconst StyledTooltipContent = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginTop: theme.spacing(0.5),\n  gap: theme.spacing(1),\n  alignItems: 'flex-start',\n  justifyContent: 'center',\n  width: '100%',\n}));\n\nconst StyledTooltipActionContainer = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  width: '100%',\n  justifyContent: 'space-between',\n}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-inverse-strong'],\n}));\n\nconst StyledDescription = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-inverse-weak'],\n}));\n\nconst StyledSingleButtonContainer = styled(Box)(() => ({\n  display: 'flex',\n  justifyContent: 'flex-end',\n  flexGrow: 1,\n}));\n\n/** Props for the ActionButton component */\nexport interface ActionButton {\n  /** Text label for the action button */\n  label: string;\n  /** Visual variant of the action button */\n  variant?: ButtonType;\n  /** Callback function when the action button is clicked */\n  onClick: () => void;\n}\n\n/** Props for the Tooltip component */\nexport interface TooltipProps extends Omit<MUITooltipProps, 'arrow' | 'placement'> {\n  /** Placement of the tooltip */\n  placement?: TooltipPlacement;\n  /** Size of the tooltip */\n  size?: 'large' | 'small';\n  /** Description of the tooltip */\n  description?: string;\n  /** Action buttons of the tooltip */\n  actionButtons?: ActionButton | ActionButton[];\n  /** Text link of the tooltip */\n  textLink?: StyledLinkProps;\n}\n\n/**\n * A floating message that’s displayed on hover or press of an interactive element.\n *\n * @param props - The component props\n * @returns A component with a tooltip\n */\nexport const Tooltip = ({\n  children,\n  title,\n  description,\n  textLink,\n  size = 'small',\n  actionButtons,\n  placement = 'bottom-center',\n  ...props\n}: TooltipProps): JSX.Element => {\n  const isLarge = size === 'large';\n\n  const renderTextLink = (): React.ReactNode => {\n    if (!textLink) {\n      return undefined;\n    }\n\n    return (\n      <Link\n        fdKey={textLink.fdKey}\n        href={textLink.href}\n        iconLeft={textLink.iconLeft}\n        iconRight={textLink.iconRight}\n        size=\"caption\"\n        tone=\"Inverse Strong\"\n        underline={false}\n        weight=\"bold\"\n      >\n        {textLink.children}\n      </Link>\n    );\n  };\n\n  const renderActions = (): React.ReactNode => {\n    if (!actionButtons) {\n      return undefined;\n    }\n\n    if (Array.isArray(actionButtons)) {\n      return (\n        <ButtonGroup align=\"right\" layout=\"horizontal\" order=\"default\" size=\"small\">\n          {actionButtons.map((button, index) => {\n            const key = `action-button-${index}`;\n\n            return (\n              <Button\n                key={key}\n                fdKey={button.label}\n                onClick={button.onClick}\n                tone=\"inverse\"\n                variant={button.variant}\n              >\n                {button.label}\n              </Button>\n            );\n          })}\n        </ButtonGroup>\n      );\n    }\n\n    return (\n      <StyledSingleButtonContainer>\n        <Button\n          fdKey={actionButtons.label}\n          onClick={actionButtons.onClick}\n          size=\"small\"\n          tone=\"inverse\"\n          variant={actionButtons.variant}\n        >\n          {actionButtons.label}\n        </Button>\n      </StyledSingleButtonContainer>\n    );\n  };\n\n  const hasActionContent = Boolean(textLink || actionButtons);\n\n  const renderTooltipContent = (\n    <>\n      <StyledTitle variant={!isLarge ? 'captionWeak' : 'captionStrong'}>{title}</StyledTitle>\n      {isLarge && description && (\n        <StyledTooltipContent>\n          <StyledDescription variant=\"captionWeak\">{description}</StyledDescription>\n          {hasActionContent && (\n            <StyledTooltipActionContainer>\n              {renderTextLink()}\n              {renderActions()}\n            </StyledTooltipActionContainer>\n          )}\n        </StyledTooltipContent>\n      )}\n    </>\n  );\n\n  return (\n    <StyledTooltip\n      {...props}\n      arrow\n      isLarge={isLarge}\n      placement={mapPlacementToMUI(placement)}\n      title={renderTooltipContent}\n    >\n      {children}\n    </StyledTooltip>\n  );\n};\n\nexport default Tooltip;\n"],"names":["mapPlacementToMUI","placement","left","right","StyledTooltip","styled","className","props","_jsx","MUITooltip","classes","popper","shouldForwardProp","prop","theme","isLarge","backgroundColor","palette","semantic","background","color","text","borderRadius","radius","paddingLeft","spacing","paddingRight","paddingTop","paddingBottom","width","boxShadow","customShadows","overlay","StyledTooltipContent","Box","display","flexDirection","marginTop","gap","alignItems","justifyContent","StyledTooltipActionContainer","StyledTitle","Typography","StyledDescription","StyledSingleButtonContainer","flexGrow","Tooltip","children","title","description","textLink","size","actionButtons","hasActionContent","Boolean","renderTooltipContent","_jsxs","_Fragment","variant","Link","fdKey","href","iconLeft","iconRight","tone","underline","weight","renderTextLink","Array","isArray","ButtonGroup","align","layout","order","map","button","index","key","Button","label","onClick","renderActions","arrow"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/styles"),r=require("@mui/material/Box"),a=require("../../atoms/Card/index.cjs.js"),s=require("@mui/material/Grid2"),l=require("@mui/material/Typography"),o=require("../../molecules/Modal/index.cjs.js"),n=require("../../../icons/CheckmarkCircleSolid/index.cjs.js");const c=i.styled(r)((({theme:e})=>({marginBottom:e.spacing(3)}))),d=i.styled(r,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:"transparent",boxShadow:t?"none":`inset 0 0 0 1px ${e.palette.semantic.stroke["stroke-weak"]}`},"&:hover":{opacity:.9},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"}}))),m=i.styled(n)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}})));module.exports=({open:i,onClose:r,onSelect:n,assets:u,multiSelect:p=!1})=>{const[x,h]=t.useState([]);t.useEffect((()=>{i||h([])}),[i]);const g=()=>{h([]),r()},b=()=>{if(n&&u){const e=u.filter((e=>x.includes(e.id)));n(e)}h([]),r()},j=e=>{h((t=>p?t.includes(e)?t.filter((t=>t!==e)):[...t,e]:t.includes(e)?[]:[e]))};return e.jsxs(o,{actions:[{label:"Cancel",onClick:g,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},{label:"Select",onClick:b,variant:"primary",disabled:0===x.length,id:"asset-manager-select"}],onClose:g,open:i,size:"large",title:"Select Images",children:[e.jsx(c,{children:e.jsx(l,{variant:"h3Strong",children:"Tabs placeholder text"})}),e.jsx(s,{container:!0,component:"ul",spacing:1,sx:{listStyle:"none",margin:0,padding:0},children:u?.map((t=>{const i=x.includes(t.id);return e.jsx(s,{"aria-selected":i,component:"li",size:{widescreen:3,desktop:3,mobile:6,tablet:4},children:e.jsxs(d,{"aria-label":"Select "+t.fileName,onClick:()=>j(t.id),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),j(t.id))},role:"button",selected:i,tabIndex:0,children:[i&&e.jsx(m,{size:"lg"}),e.jsx(a,{content:t.fileName,heading:"",imageAlt:t.metadata.altText,imageSrc:t.url})]})},t.id)}))})]})};
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport Grid from '@fd/components/atoms/Grid';\nimport Typography from '@fd/components/atoms/Typography';\nimport Modal from '@fd/components/molecules/Modal';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\n\nimport type { Asset } from './types';\n\nconst StyledTabsContainer = styled(Box)(({ theme }) => ({\n  marginBottom: theme.spacing(3),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n  width: '100%',\n  cursor: 'pointer',\n  position: 'relative',\n  '& .MuiCard-root': {\n    // Always use 2px border to prevent layout shift\n    borderWidth: '2px',\n    borderColor: selected ? theme.palette.semantic.stroke['stroke-selected'] : 'transparent',\n    // Use box-shadow to create the visual 1px border when not selected\n    // This prevents layout shift while maintaining the visual appearance\n    boxShadow: selected ? 'none' : `inset 0 0 0 1px ${theme.palette.semantic.stroke['stroke-weak']}`,\n  },\n  '&:hover': {\n    opacity: 0.9,\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\n  },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(2),\n  left: theme.spacing(2),\n  zIndex: 1,\n  color: theme.palette.semantic.icon['icon-primary'],\n  '& circle': {\n    fill: theme.palette.common.white,\n  },\n}));\n\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /** Assets to display if no api is provided */\n  assets?: Asset[];\n  /** Whether multiple assets can be selected. Defaults to false */\n  multiSelect?: boolean;\n}\n\nconst AssetManager: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  assets,\n  multiSelect = false,\n}) => {\n  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);\n\n  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetIds([]);\n    }\n  }, [open]);\n\n  const handleCancel = (): void => {\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleSelect = (): void => {\n    if (onSelect && assets) {\n      const selectedAssets = assets.filter((asset) => selectedAssetIds.includes(asset.id));\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleAssetClick = (assetId: string): void => {\n    setSelectedAssetIds((prev) => {\n      if (multiSelect) {\n        if (prev.includes(assetId)) {\n          return prev.filter((id) => id !== assetId);\n        }\n        return [...prev, assetId];\n      } else {\n        if (prev.includes(assetId)) {\n          return [];\n        }\n        return [assetId];\n      }\n    });\n  };\n\n  const getActionButtons = (): Array<{\n    disabled?: boolean;\n    id: string;\n    label: string;\n    onClick: () => void;\n    tone?: 'brand' | 'neutral';\n    variant: 'primary' | 'secondary';\n  }> => {\n    return [\n      {\n        label: 'Cancel',\n        onClick: handleCancel,\n        variant: 'secondary',\n        tone: 'neutral',\n        id: 'asset-manager-cancel',\n      },\n      {\n        label: 'Select',\n        onClick: handleSelect,\n        variant: 'primary',\n        disabled: selectedAssetIds.length === 0,\n        id: 'asset-manager-select',\n      },\n    ];\n  };\n\n  const renderBrowseTab = (): React.ReactElement => (\n    <Grid container component=\"ul\" spacing={1} sx={{ listStyle: 'none', margin: 0, padding: 0 }}>\n      {assets?.map((asset: Asset) => {\n        const isSelected = selectedAssetIds.includes(asset.id);\n        return (\n          <Grid\n            key={asset.id}\n            aria-selected={isSelected}\n            component=\"li\"\n            size={{ widescreen: 3, desktop: 3, mobile: 6, tablet: 4 }}\n          >\n            <StyledCardWrapper\n              aria-label={'Select ' + asset.fileName} // TODO: translate this text when translate provider is added\n              onClick={() => handleAssetClick(asset.id)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  handleAssetClick(asset.id);\n                }\n              }}\n              role=\"button\"\n              selected={isSelected}\n              tabIndex={0}\n            >\n              {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n              <Card\n                content={asset.fileName}\n                heading=\"\"\n                imageAlt={asset.metadata.altText}\n                imageSrc={asset.url}\n              />\n            </StyledCardWrapper>\n          </Grid>\n        );\n      })}\n    </Grid>\n  );\n\n  return (\n    <Modal\n      actions={getActionButtons()}\n      onClose={handleCancel}\n      open={open}\n      size=\"large\"\n      title={'Select Images'} // TODO: translate this text when translate provider is added\n    >\n      <StyledTabsContainer>\n        {/* TODO: replace this with tabs component when available */}\n        <Typography variant=\"h3Strong\">Tabs placeholder text</Typography>\n      </StyledTabsContainer>\n      {renderBrowseTab()}\n    </Modal>\n  );\n};\n\nexport default AssetManager;\n"],"names":["StyledTabsContainer","styled","Box","theme","marginBottom","spacing","StyledCardWrapper","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","opacity","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","open","onClose","onSelect","assets","multiSelect","selectedAssetIds","setSelectedAssetIds","useState","useEffect","handleCancel","handleSelect","selectedAssets","filter","asset","includes","id","handleAssetClick","assetId","prev","_jsxs","Modal","actions","label","onClick","variant","tone","disabled","length","size","title","children","_jsx","Typography","Grid","container","component","sx","listStyle","margin","padding","map","isSelected","widescreen","desktop","mobile","tablet","fileName","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"oWAaA,MAAMA,EAAsBC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CAChDC,aAAcD,EAAME,QAAQ,OAGxBC,EAAoBL,EAAAA,OAAOC,EAAK,CACpCK,kBAAoBC,GAAkB,aAATA,GADLP,EAEC,EAAGE,QAAOM,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EAAWN,EAAMY,QAAQC,SAASC,OAAO,mBAAqB,cAG3EC,UAAWT,EAAW,OAAS,mBAAmBN,EAAMY,QAAQC,SAASC,OAAO,kBAElF,UAAW,CACTE,QAAS,IAEX,gCAAiC,CAC/BL,YAAaX,EAAMY,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,YAITE,EAAsBnB,EAAAA,OAAOoB,EAAPpB,EAAiC,EAAGE,YAAO,CACrES,SAAU,WACVU,IAAKnB,EAAME,QAAQ,GACnBkB,KAAMpB,EAAME,QAAQ,GACpBmB,OAAQ,EACRC,MAAOtB,EAAMY,QAAQC,SAASU,KAAK,gBACnC,WAAY,CACVC,KAAMxB,EAAMY,QAAQa,OAAOC,0BA2BmB,EAChDC,OACAC,UACAC,WACAC,SACAC,eAAc,MAEd,MAAOC,EAAkBC,GAAuBC,EAAAA,SAAmB,IAGnEC,EAAAA,WAAU,KACHR,GACHM,EAAoB,MAErB,CAACN,IAEJ,MAAMS,EAAe,KACnBH,EAAoB,IACpBL,KAGIS,EAAe,KACnB,GAAIR,GAAYC,EAAQ,CACtB,MAAMQ,EAAiBR,EAAOS,QAAQC,GAAUR,EAAiBS,SAASD,EAAME,MAChFb,EAASS,EACX,CACAL,EAAoB,IACpBL,KAGIe,EAAoBC,IACxBX,GAAqBY,GACfd,EACEc,EAAKJ,SAASG,GACTC,EAAKN,QAAQG,GAAOA,IAAOE,IAE7B,IAAIC,EAAMD,GAEbC,EAAKJ,SAASG,GACT,GAEF,CAACA,MAqEd,OACEE,EAAAA,KAACC,GACCC,QA1DK,CACL,CACEC,MAAO,SACPC,QAASd,EACTe,QAAS,YACTC,KAAM,UACNV,GAAI,wBAEN,CACEO,MAAO,SACPC,QAASb,EACTc,QAAS,UACTE,SAAsC,IAA5BrB,EAAiBsB,OAC3BZ,GAAI,yBA8CNd,QAASQ,EACTT,KAAMA,EACN4B,KAAK,QACLC,MAAO,gBAAeC,SAAA,CAEtBC,EAAAA,IAAC7D,EAAmB,CAAA4D,SAElBC,EAAAA,IAACC,EAAU,CAACR,QAAQ,gDA/CxBO,MAACE,EAAI,CAACC,WAAS,EAACC,UAAU,KAAK5D,QAAS,EAAG6D,GAAI,CAAEC,UAAW,OAAQC,OAAQ,EAAGC,QAAS,GAAGT,SACxF3B,GAAQqC,KAAK3B,IACZ,MAAM4B,EAAapC,EAAiBS,SAASD,EAAME,IACnD,OACEgB,EAAAA,IAACE,EAAI,CAAA,gBAEYQ,EACfN,UAAU,KACVP,KAAM,CAAEc,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGf,SAEzDX,EAAAA,KAAC3C,EAAiB,CAAA,aACJ,UAAYqC,EAAMiC,SAC9BvB,QAAS,IAAMP,EAAiBH,EAAME,IACtCgC,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACFlC,EAAiBH,EAAME,MAG3BoC,KAAK,SACLxE,SAAU8D,EACVW,SAAU,EAACtB,SAAA,CAEVW,GAAcV,EAAAA,IAACzC,EAAmB,CAACsC,KAAK,OACzCG,EAAAA,IAACsB,EAAI,CACHC,QAASzC,EAAMiC,SACfS,QAAQ,GACRC,SAAU3C,EAAM4C,SAASC,QACzBC,SAAU9C,EAAM+C,UAvBf/C,EAAME"}

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

@@ -0,0 +1,29 @@
+import react__default from 'react';
+import { Asset } from './types/index.js';
+
+/**
+ * Props for the AssetManager component.
+ * Provides a modal interface for selecting images from a grid display.
+ * It supports both single and multiple image selection modes.
+ *
+ * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';
+ *
+ * ```tsx
+ * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';
+ */
+interface AssetManagerProps {
+    /** Whether the asset manager modal is open */
+    open: boolean;
+    /** Callback function when the modal is closed or cancelled */
+    onClose: () => void;
+    /** Callback function when assets are selected */
+    onSelect?: (selectedAssets: Asset[]) => void;
+    /** Assets to display if no api is provided */
+    assets?: Asset[];
+    /** Whether multiple assets can be selected. Defaults to false */
+    multiSelect?: boolean;
+}
+declare const AssetManager: react__default.FC<AssetManagerProps>;
+
+export { AssetManager as default };
+export type { AssetManagerProps };

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

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as i}from"react";import{styled as r}from"@mui/material/styles";import a from"@mui/material/Box";import l from"../../atoms/Card/index.js";import n from"@mui/material/Grid2";import s from"@mui/material/Typography";import c from"../../molecules/Modal/index.js";import m from"../../../icons/CheckmarkCircleSolid/index.js";const d=r(a)((({theme:e})=>({marginBottom:e.spacing(3)}))),p=r(a,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:"transparent",boxShadow:t?"none":`inset 0 0 0 1px ${e.palette.semantic.stroke["stroke-weak"]}`},"&:hover":{opacity:.9},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"}}))),u=r(m)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}}))),h=({open:r,onClose:a,onSelect:m,assets:h,multiSelect:f=!1})=>{const[g,b]=o([]);i((()=>{r||b([])}),[r]);const k=()=>{b([]),a()},x=e=>{b((t=>f?t.includes(e)?t.filter((t=>t!==e)):[...t,e]:t.includes(e)?[]:[e]))};return e(c,{actions:[{label:"Cancel",onClick:k,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},{label:"Select",onClick:()=>{if(m&&h){const e=h.filter((e=>g.includes(e.id)));m(e)}b([]),a()},variant:"primary",disabled:0===g.length,id:"asset-manager-select"}],onClose:k,open:r,size:"large",title:"Select Images",children:[t(d,{children:t(s,{variant:"h3Strong",children:"Tabs placeholder text"})}),t(n,{container:!0,component:"ul",spacing:1,sx:{listStyle:"none",margin:0,padding:0},children:h?.map((o=>{const i=g.includes(o.id);return t(n,{"aria-selected":i,component:"li",size:{widescreen:3,desktop:3,mobile:6,tablet:4},children:e(p,{"aria-label":"Select "+o.fileName,onClick:()=>x(o.id),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),x(o.id))},role:"button",selected:i,tabIndex:0,children:[i&&t(u,{size:"lg"}),t(l,{content:o.fileName,heading:"",imageAlt:o.metadata.altText,imageSrc:o.url})]})},o.id)}))})]})};export{h as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport Grid from '@fd/components/atoms/Grid';\nimport Typography from '@fd/components/atoms/Typography';\nimport Modal from '@fd/components/molecules/Modal';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\n\nimport type { Asset } from './types';\n\nconst StyledTabsContainer = styled(Box)(({ theme }) => ({\n  marginBottom: theme.spacing(3),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n  width: '100%',\n  cursor: 'pointer',\n  position: 'relative',\n  '& .MuiCard-root': {\n    // Always use 2px border to prevent layout shift\n    borderWidth: '2px',\n    borderColor: selected ? theme.palette.semantic.stroke['stroke-selected'] : 'transparent',\n    // Use box-shadow to create the visual 1px border when not selected\n    // This prevents layout shift while maintaining the visual appearance\n    boxShadow: selected ? 'none' : `inset 0 0 0 1px ${theme.palette.semantic.stroke['stroke-weak']}`,\n  },\n  '&:hover': {\n    opacity: 0.9,\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\n  },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(2),\n  left: theme.spacing(2),\n  zIndex: 1,\n  color: theme.palette.semantic.icon['icon-primary'],\n  '& circle': {\n    fill: theme.palette.common.white,\n  },\n}));\n\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /** Assets to display if no api is provided */\n  assets?: Asset[];\n  /** Whether multiple assets can be selected. Defaults to false */\n  multiSelect?: boolean;\n}\n\nconst AssetManager: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  assets,\n  multiSelect = false,\n}) => {\n  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);\n\n  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetIds([]);\n    }\n  }, [open]);\n\n  const handleCancel = (): void => {\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleSelect = (): void => {\n    if (onSelect && assets) {\n      const selectedAssets = assets.filter((asset) => selectedAssetIds.includes(asset.id));\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleAssetClick = (assetId: string): void => {\n    setSelectedAssetIds((prev) => {\n      if (multiSelect) {\n        if (prev.includes(assetId)) {\n          return prev.filter((id) => id !== assetId);\n        }\n        return [...prev, assetId];\n      } else {\n        if (prev.includes(assetId)) {\n          return [];\n        }\n        return [assetId];\n      }\n    });\n  };\n\n  const getActionButtons = (): Array<{\n    disabled?: boolean;\n    id: string;\n    label: string;\n    onClick: () => void;\n    tone?: 'brand' | 'neutral';\n    variant: 'primary' | 'secondary';\n  }> => {\n    return [\n      {\n        label: 'Cancel',\n        onClick: handleCancel,\n        variant: 'secondary',\n        tone: 'neutral',\n        id: 'asset-manager-cancel',\n      },\n      {\n        label: 'Select',\n        onClick: handleSelect,\n        variant: 'primary',\n        disabled: selectedAssetIds.length === 0,\n        id: 'asset-manager-select',\n      },\n    ];\n  };\n\n  const renderBrowseTab = (): React.ReactElement => (\n    <Grid container component=\"ul\" spacing={1} sx={{ listStyle: 'none', margin: 0, padding: 0 }}>\n      {assets?.map((asset: Asset) => {\n        const isSelected = selectedAssetIds.includes(asset.id);\n        return (\n          <Grid\n            key={asset.id}\n            aria-selected={isSelected}\n            component=\"li\"\n            size={{ widescreen: 3, desktop: 3, mobile: 6, tablet: 4 }}\n          >\n            <StyledCardWrapper\n              aria-label={'Select ' + asset.fileName} // TODO: translate this text when translate provider is added\n              onClick={() => handleAssetClick(asset.id)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  handleAssetClick(asset.id);\n                }\n              }}\n              role=\"button\"\n              selected={isSelected}\n              tabIndex={0}\n            >\n              {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n              <Card\n                content={asset.fileName}\n                heading=\"\"\n                imageAlt={asset.metadata.altText}\n                imageSrc={asset.url}\n              />\n            </StyledCardWrapper>\n          </Grid>\n        );\n      })}\n    </Grid>\n  );\n\n  return (\n    <Modal\n      actions={getActionButtons()}\n      onClose={handleCancel}\n      open={open}\n      size=\"large\"\n      title={'Select Images'} // TODO: translate this text when translate provider is added\n    >\n      <StyledTabsContainer>\n        {/* TODO: replace this with tabs component when available */}\n        <Typography variant=\"h3Strong\">Tabs placeholder text</Typography>\n      </StyledTabsContainer>\n      {renderBrowseTab()}\n    </Modal>\n  );\n};\n\nexport default AssetManager;\n"],"names":["StyledTabsContainer","styled","Box","theme","marginBottom","spacing","StyledCardWrapper","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","opacity","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","AssetManager","open","onClose","onSelect","assets","multiSelect","selectedAssetIds","setSelectedAssetIds","useState","useEffect","handleCancel","handleAssetClick","assetId","prev","includes","filter","id","_jsxs","Modal","actions","label","onClick","variant","tone","selectedAssets","asset","disabled","length","size","title","children","_jsx","Typography","Grid","container","component","sx","listStyle","margin","padding","map","isSelected","widescreen","desktop","mobile","tablet","fileName","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"+YAaA,MAAMA,EAAsBC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CAChDC,aAAcD,EAAME,QAAQ,OAGxBC,EAAoBL,EAAOC,EAAK,CACpCK,kBAAoBC,GAAkB,aAATA,GADLP,EAEC,EAAGE,QAAOM,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EAAWN,EAAMY,QAAQC,SAASC,OAAO,mBAAqB,cAG3EC,UAAWT,EAAW,OAAS,mBAAmBN,EAAMY,QAAQC,SAASC,OAAO,kBAElF,UAAW,CACTE,QAAS,IAEX,gCAAiC,CAC/BL,YAAaX,EAAMY,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,YAITE,EAAsBnB,EAAOoB,EAAPpB,EAAiC,EAAGE,YAAO,CACrES,SAAU,WACVU,IAAKnB,EAAME,QAAQ,GACnBkB,KAAMpB,EAAME,QAAQ,GACpBmB,OAAQ,EACRC,MAAOtB,EAAMY,QAAQC,SAASU,KAAK,gBACnC,WAAY,CACVC,KAAMxB,EAAMY,QAAQa,OAAOC,WA2BzBC,EAA4C,EAChDC,OACAC,UACAC,WACAC,SACAC,eAAc,MAEd,MAAOC,EAAkBC,GAAuBC,EAAmB,IAGnEC,GAAU,KACHR,GACHM,EAAoB,MAErB,CAACN,IAEJ,MAAMS,EAAe,KACnBH,EAAoB,IACpBL,KAYIS,EAAoBC,IACxBL,GAAqBM,GACfR,EACEQ,EAAKC,SAASF,GACTC,EAAKE,QAAQC,GAAOA,IAAOJ,IAE7B,IAAIC,EAAMD,GAEbC,EAAKC,SAASF,GACT,GAEF,CAACA,MAqEd,OACEK,EAACC,GACCC,QA1DK,CACL,CACEC,MAAO,SACPC,QAASX,EACTY,QAAS,YACTC,KAAM,UACNP,GAAI,wBAEN,CACEI,MAAO,SACPC,QA3Ce,KACnB,GAAIlB,GAAYC,EAAQ,CACtB,MAAMoB,EAAiBpB,EAAOW,QAAQU,GAAUnB,EAAiBQ,SAASW,EAAMT,MAChFb,EAASqB,EACX,CACAjB,EAAoB,IACpBL,KAsCIoB,QAAS,UACTI,SAAsC,IAA5BpB,EAAiBqB,OAC3BX,GAAI,yBA8CNd,QAASQ,EACTT,KAAMA,EACN2B,KAAK,QACLC,MAAO,gBAAeC,SAAA,CAEtBC,EAAC7D,EAAmB,CAAA4D,SAElBC,EAACC,EAAU,CAACV,QAAQ,gDA/CxBS,EAACE,EAAI,CAACC,WAAS,EAACC,UAAU,KAAK5D,QAAS,EAAG6D,GAAI,CAAEC,UAAW,OAAQC,OAAQ,EAAGC,QAAS,GAAGT,SACxF1B,GAAQoC,KAAKf,IACZ,MAAMgB,EAAanC,EAAiBQ,SAASW,EAAMT,IACnD,OACEe,EAACE,EAAI,CAAA,gBAEYQ,EACfN,UAAU,KACVP,KAAM,CAAEc,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGf,SAEzDb,EAACzC,EAAiB,CAAA,aACJ,UAAYiD,EAAMqB,SAC9BzB,QAAS,IAAMV,EAAiBc,EAAMT,IACtC+B,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACFvC,EAAiBc,EAAMT,MAG3BmC,KAAK,SACLxE,SAAU8D,EACVW,SAAU,EAACtB,SAAA,CAEVW,GAAcV,EAACzC,EAAmB,CAACsC,KAAK,OACzCG,EAACsB,EAAI,CACHC,QAAS7B,EAAMqB,SACfS,QAAQ,GACRC,SAAU/B,EAAMgC,SAASC,QACzBC,SAAUlC,EAAMmC,UAvBfnC,EAAMT"}

package/dist/components/organisms/AssetManager/types/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var s;exports.AssetType=void 0,(s=exports.AssetType||(exports.AssetType={})).VIDEO="VIDEO",s.IMAGE="IMAGE";
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/organisms/AssetManager/types/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/types/index.ts"],"sourcesContent":["export enum AssetType {\n  VIDEO = 'VIDEO',\n  IMAGE = 'IMAGE',\n}\n\nexport interface AssetMetadata {\n  altText?: string;\n  tags: string[];\n  dimensions?: {\n    width: number;\n    height: number;\n  };\n}\n\nexport interface Asset {\n  id: string;\n  fileName: string;\n  contentType: string; // MIME type like \"image/jpeg\", \"video/mp4\"\n  createdBy: string;\n  updatedBy: string;\n  updatedAt: string;\n  uploadedAt: string;\n  url: string;\n  orgId: string;\n  brandId: string | null;\n  type: AssetType;\n  metadata: AssetMetadata;\n}\n"],"names":["AssetType"],"mappings":"aAAA,IAAYA,EAAAA,QAAAA,eAAAA,GAAAA,EAAAA,QAAAA,YAAAA,kBAAS,CAAA,IACnB,MAAA,QACAA,EAAA,MAAA"}

package/dist/components/organisms/AssetManager/types/index.d.ts

@@ -0,0 +1,29 @@
+declare enum AssetType {
+    VIDEO = "VIDEO",
+    IMAGE = "IMAGE"
+}
+interface AssetMetadata {
+    altText?: string;
+    tags: string[];
+    dimensions?: {
+        width: number;
+        height: number;
+    };
+}
+interface Asset {
+    id: string;
+    fileName: string;
+    contentType: string;
+    createdBy: string;
+    updatedBy: string;
+    updatedAt: string;
+    uploadedAt: string;
+    url: string;
+    orgId: string;
+    brandId: string | null;
+    type: AssetType;
+    metadata: AssetMetadata;
+}
+
+export { AssetType };
+export type { Asset, AssetMetadata };

package/dist/components/organisms/AssetManager/types/index.js

@@ -0,0 +1,2 @@
+var E;!function(E){E.VIDEO="VIDEO",E.IMAGE="IMAGE"}(E||(E={}));export{E as AssetType};
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/AssetManager/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/organisms/AssetManager/types/index.ts"],"sourcesContent":["export enum AssetType {\n  VIDEO = 'VIDEO',\n  IMAGE = 'IMAGE',\n}\n\nexport interface AssetMetadata {\n  altText?: string;\n  tags: string[];\n  dimensions?: {\n    width: number;\n    height: number;\n  };\n}\n\nexport interface Asset {\n  id: string;\n  fileName: string;\n  contentType: string; // MIME type like \"image/jpeg\", \"video/mp4\"\n  createdBy: string;\n  updatedBy: string;\n  updatedAt: string;\n  uploadedAt: string;\n  url: string;\n  orgId: string;\n  brandId: string | null;\n  type: AssetType;\n  metadata: AssetMetadata;\n}\n"],"names":["AssetType"],"mappings":"IAAYA,GAAZ,SAAYA,GACVA,EAAA,MAAA,QACAA,EAAA,MAAA,OACD,CAHD,CAAYA,IAAAA,EAAS,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.cjs.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","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":"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"}
+{"version":3,"file":"FileDropZone.cjs.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\n    ? theme.palette.semantic.fill['fill-error-weak']\n    : 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(\n    (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    },\n    [maxFileSize, allowedFileTypes],\n  );\n\n  const processFiles = useCallback(\n    (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    },\n    [maxFiles, validateFile, handleUpload],\n  );\n\n  const handleDragEnter = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(true);\n    },\n    [disabled],\n  );\n\n  const handleDragLeave = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(false);\n    },\n    [disabled],\n  );\n\n  const handleDragOver = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback(\n    (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    },\n    [disabled, processFiles],\n  );\n\n  const handleFileInputChange = useCallback(\n    (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    },\n    [disabled, processFiles],\n  );\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\n        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\n          alignItems=\"center\"\n          direction=\"column\"\n          gap={theme.spacing(2)}\n          justifyContent=\"center\"\n          width=\"100%\"\n        >\n          <StyledIconContainer hasError={!!error}>\n            <UploadIcon\n              color={\n                error\n                  ? theme.palette.semantic.icon['icon-error']\n                  : theme.palette.semantic.icon['icon-primary']\n              }\n            />\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","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","_Fragment","children","FlipdishFormHelperText","_jsx","CancelCircleIcon","onClick","undefined","onDragEnter","onDragLeave","onDragOver","onDrop","ref","onChange","type","Stack","direction","UploadIcon","color","icon","FlipdishTypography","variant","fdKey"],"mappings":"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"}

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

@@ -1 +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":"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"}
+{"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\n    ? theme.palette.semantic.fill['fill-error-weak']\n    : 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(\n    (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    },\n    [maxFileSize, allowedFileTypes],\n  );\n\n  const processFiles = useCallback(\n    (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    },\n    [maxFiles, validateFile, handleUpload],\n  );\n\n  const handleDragEnter = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(true);\n    },\n    [disabled],\n  );\n\n  const handleDragLeave = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(false);\n    },\n    [disabled],\n  );\n\n  const handleDragOver = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback(\n    (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    },\n    [disabled, processFiles],\n  );\n\n  const handleFileInputChange = useCallback(\n    (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    },\n    [disabled, processFiles],\n  );\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\n        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\n          alignItems=\"center\"\n          direction=\"column\"\n          gap={theme.spacing(2)}\n          justifyContent=\"center\"\n          width=\"100%\"\n        >\n          <StyledIconContainer hasError={!!error}>\n            <UploadIcon\n              color={\n                error\n                  ? theme.palette.semantic.icon['icon-error']\n                  : theme.palette.semantic.icon['icon-primary']\n              }\n            />\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","_Fragment","children","FlipdishFormHelperText","_jsx","CancelCircleIcon","onClick","undefined","onDragEnter","onDragLeave","onDragOver","onDrop","ref","onChange","type","Stack","direction","UploadIcon","color","icon","FlipdishTypography","variant","fdKey"],"mappings":"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"}

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

@@ -1 +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"}
+{"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> = ({ file, error = null, isUploading = false, onRemove }) => {\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 color={theme.palette.semantic.text['text-strong']} variant=\"captionWeak\">\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,EAAGqB,OAAMC,QAAQ,KAAMC,eAAc,EAAOC,eACpF,MAAM5B,EAAQ6B,IAcd,OACEC,EAAAA,KAACnC,EAAuB,CAACM,WAAYyB,EAAKK,SAAA,CACxCC,EAAAA,IAACC,EAAa,CAACR,KAAMA,IAErBK,OAACI,EAAK,CAACC,UAAU,MAAMC,KAAM,EAAG/B,IAAKL,EAAMM,QAAQ,GAAEyB,SAAA,CACnDD,EAAAA,KAACI,EAAK,CAACC,UAAU,SAAS/B,MAAM,iBAC9B4B,EAAAA,IAACd,EAAc,CAACmB,MAAOrC,EAAMS,QAAQC,SAAS4B,KAAK,eAAgBC,QAAQ,cAAaR,SACrFN,EAAKe,OAERR,MAACb,EAAU,CAACkB,MAAOrC,EAAMS,QAAQC,SAAS4B,KAAK,aAAcC,QAAQ,cAAaR,SAjBnE,CAACU,IACtB,GAAc,IAAVA,EAAa,MAAO,UACxB,MAEMC,EAAIC,KAAKC,MAAMD,KAAKE,IAAIJ,GAASE,KAAKE,IAFlC,OAGV,MAAO,GAAGF,KAAKG,MAAOL,EAAQE,KAAKI,IAHzB,KAGgCL,GAAM,KAAO,OAFzC,CAAC,IAAK,KAAM,KAAM,MAEoCA,MAa3DM,CAAevB,EAAKwB,WAIzBnB,OAACf,EAAqB,CAAAgB,SAAA,CACnBL,GACCM,EAAAA,IAACb,EAAU,CAACkB,MAAOrC,EAAMS,QAAQC,SAAS4B,KAAK,cAAeC,QAAQ,cAAaR,SAChFL,IAGJC,GAAeK,EAAAA,IAACT,EAAoB,CAAA,SAIzCS,EAAAA,IAACkB,EAAAA,WAAU,CAAA,aACE,cACXC,QAtCoB,KACxBvB,EAASH,IAsCLwB,KAAK,QACLG,KAAK,UACLb,QAAQ,oBAERP,EAAAA,IAACqB"}

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

@@ -1 +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"}
+{"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> = ({ file, error = null, isUploading = false, onRemove }) => {\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 color={theme.palette.semantic.text['text-strong']} variant=\"captionWeak\">\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,EAAGC,OAAMC,QAAQ,KAAMC,eAAc,EAAOC,eACpF,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,CAACC,UAAU,SAAShC,MAAM,iBAC9B6B,EAACf,EAAc,CAACoB,MAAOtC,EAAMS,QAAQC,SAAS6B,KAAK,eAAgBC,QAAQ,cAAaR,SACrFN,EAAKe,OAERR,EAACd,EAAU,CAACmB,MAAOtC,EAAMS,QAAQC,SAAS6B,KAAK,aAAcC,QAAQ,cAAaR,SAjBnE,CAACU,IACtB,GAAc,IAAVA,EAAa,MAAO,UACxB,MAEMC,EAAIC,KAAKC,MAAMD,KAAKE,IAAIJ,GAASE,KAAKE,IAFlC,OAGV,MAAO,GAAGF,KAAKG,MAAOL,EAAQE,KAAKI,IAHzB,KAGgCL,GAAM,KAAO,OAFzC,CAAC,IAAK,KAAM,KAAM,MAEoCA,MAa3DM,CAAevB,EAAKwB,WAIzBnB,EAAChB,EAAqB,CAAAiB,SAAA,CACnBL,GACCM,EAACd,EAAU,CAACmB,MAAOtC,EAAMS,QAAQC,SAAS6B,KAAK,cAAeC,QAAQ,cAAaR,SAChFL,IAGJC,GAAeK,EAACV,EAAoB,CAAA,SAIzCU,EAACkB,EAAU,CAAA,aACE,cACXC,QAtCoB,KACxBvB,EAASH,IAsCLwB,KAAK,QACLG,KAAK,UACLb,QAAQ,oBAERP,EAACqB"}

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

@@ -1 +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"}
+{"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 isImage && imageUrl ? (\n    <StyledThumbnailContainer>\n      <StyledImage alt={file.name} src={imageUrl} />\n    </StyledThumbnailContainer>\n  ) : (\n    <StyledIconContainer>\n      <FileIcon color={theme.palette.semantic.icon['icon-strong']} />\n    </StyledIconContainer>\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,EAAGE,YAAO,CAChDM,QAAS,OACTS,cAAe,SACfd,MAAO,OACPC,OAAQ,OACRc,QAAS,MACTR,eAAgB,SAChBD,WAAY,SACZJ,aAAcH,EAAMI,OAAO,aAC3BK,gBAAiBT,EAAMU,QAAQC,SAASC,KAAK,iBAGzCK,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,IAEGK,GAAWH,EAChBa,EAAAA,IAACrC,EAAwB,CAAAsC,SACvBD,EAAAA,IAACjB,EAAW,CAACmB,IAAKjB,EAAKkB,KAAMC,IAAKjB,MAGpCa,EAAAA,IAACpB,YACCoB,EAAAA,IAACK,EAAQ,CAACC,MAAOxC,EAAMU,QAAQC,SAAS8B,KAAK"}

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

@@ -1 +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"}
+{"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 isImage && imageUrl ? (\n    <StyledThumbnailContainer>\n      <StyledImage alt={file.name} src={imageUrl} />\n    </StyledThumbnailContainer>\n  ) : (\n    <StyledIconContainer>\n      <FileIcon color={theme.palette.semantic.icon['icon-strong']} />\n    </StyledIconContainer>\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,EAAGE,YAAO,CAChDM,QAAS,OACTS,cAAe,SACfd,MAAO,OACPC,OAAQ,OACRc,QAAS,MACTR,eAAgB,SAChBD,WAAY,SACZJ,aAAcH,EAAMI,OAAO,aAC3BK,gBAAiBT,EAAMU,QAAQC,SAASC,KAAK,iBAGzCK,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,IAEGK,GAAWH,EAChBa,EAACtC,EAAwB,CAAAuC,SACvBD,EAAClB,EAAW,CAACoB,IAAKjB,EAAKkB,KAAMC,IAAKjB,MAGpCa,EAACrB,YACCqB,EAACK,EAAQ,CAACC,MAAOzC,EAAMU,QAAQC,SAAS+B,KAAK"}

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

@@ -1 +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"}
+{"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\">\n        {label}\n      </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;\n"],"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,SAC1D1B,IAEHwB,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,aArCcC,IAEpB,MAAMC,EAAuCD,EAASE,KAAKnB,IAAI,CAC7DA,OACAoB,aAAa,MAGf1B,GAAmBO,GAAS,IAAIA,KAASiB,KAGzClC,EAASiC,IA4BHzB,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.js.map

@@ -1 +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"}
+{"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\">\n        {label}\n      </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;\n"],"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,SAC1D1B,IAEHwB,EAACQ,EAAK,CAACC,UAAU,SAASC,KAAM,EAAGC,IAAKrC,EAAMgC,QAAQ,GAAEJ,SAAA,CACtDC,EAACS,EAAY,CACXlC,iBAAkBA,EAClBQ,iBAAkBA,EAClBF,eAAgBA,EAChBC,iBAAkBA,EAClB4B,aArCcC,IAEpB,MAAMC,EAAuCD,EAASE,KAAKnB,IAAI,CAC7DA,OACAoB,aAAa,MAGf1B,GAAmBO,GAAS,IAAIA,KAASiB,KAGzClC,EAASiC,IA4BHzB,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/ImageUploadWidget/components/FlipdishFonts.cjs.js

@@ -1,5 +1,5 @@
 "use strict";var s=require("react/jsx-runtime"),t=require("@emotion/react");const o=t.css`
-    @import url('https://fonts.flipdish.com/Domine.css');
-    @import url('https://fonts.flipdish.com/Roboto.css');
+  @import url('https://fonts.flipdish.com/Domine.css');
+  @import url('https://fonts.flipdish.com/Roboto.css');
 `;module.exports=()=>s.jsx(t.Global,{styles:o});
 //# sourceMappingURL=FlipdishFonts.cjs.js.map

package/dist/components/organisms/ImageUploadWidget/components/FlipdishFonts.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlipdishFonts.cjs.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/FlipdishFonts.tsx"],"sourcesContent":["import { css,Global } from '@emotion/react';\n\nconst fontStyles = css`\n    @import url('https://fonts.flipdish.com/Domine.css');\n    @import url('https://fonts.flipdish.com/Roboto.css');\n`;\n\nconst FlipdishFonts: React.FC = () => {\n  return <Global styles={fontStyles} />;\n};\n\nexport default FlipdishFonts;\n"],"names":["fontStyles","css","_jsx","Global","styles"],"mappings":"4EAEA,MAAMA,EAAaC,EAAAA,GAAG;;;iBAKU,IACvBC,EAAAA,IAACC,EAAAA,OAAM,CAACC,OAAQJ"}
+{"version":3,"file":"FlipdishFonts.cjs.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/FlipdishFonts.tsx"],"sourcesContent":["import { css, Global } from '@emotion/react';\n\nconst fontStyles = css`\n  @import url('https://fonts.flipdish.com/Domine.css');\n  @import url('https://fonts.flipdish.com/Roboto.css');\n`;\n\nconst FlipdishFonts: React.FC = () => {\n  return <Global styles={fontStyles} />;\n};\n\nexport default FlipdishFonts;\n"],"names":["fontStyles","css","_jsx","Global","styles"],"mappings":"4EAEA,MAAMA,EAAaC,EAAAA,GAAG;;;iBAKU,IACvBC,EAAAA,IAACC,EAAAA,OAAM,CAACC,OAAQJ"}

package/dist/components/organisms/ImageUploadWidget/components/FlipdishFonts.js

@@ -1,5 +1,5 @@
 import{jsx as t}from"react/jsx-runtime";import{css as o,Global as s}from"@emotion/react";const r=o`
-    @import url('https://fonts.flipdish.com/Domine.css');
-    @import url('https://fonts.flipdish.com/Roboto.css');
+  @import url('https://fonts.flipdish.com/Domine.css');
+  @import url('https://fonts.flipdish.com/Roboto.css');
 `,i=()=>t(s,{styles:r});export{i as default};
 //# sourceMappingURL=FlipdishFonts.js.map