@flipdish/portal-library 7.7.0 → 7.9.0

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

@@ -1 +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"}
+{"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 CircularProgress from '@fd/components/atoms/CircularProgress';\nimport Grid from '@fd/components/atoms/Grid';\nimport Tab from '@fd/components/atoms/Tab';\nimport EmptyState from '@fd/components/molecules/EmptyState';\nimport Modal from '@fd/components/molecules/Modal';\nimport Tabs from '@fd/components/molecules/Tabs';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\n\nimport { useGetAssets } from './hooks/useAssets';\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  /**\n   * Organization ID for fetching assets\n   */\n  orgId: string;\n  /** Whether multiple assets can be selected. Defaults to false */\n  multiSelect?: boolean;\n}\n\nconst StyledLoadingContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  minHeight: '200px',\n  padding: theme.spacing(4),\n}));\n\nconst StyledErrorContainer = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(4),\n}));\n\nconst AssetManager: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  orgId,\n  multiSelect = false,\n}) => {\n  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);\n\n  // Fetch assets from API - service handles everything\n  const { data: assets, isLoading, error } = useGetAssets(orgId, open);\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: 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 getActions = () => {\n    return [\n      {\n        label: 'Cancel',\n        onClick: handleCancel,\n        variant: 'secondary' as const,\n        tone: 'neutral' as const,\n        id: 'asset-manager-cancel',\n      },\n      {\n        label: 'Select',\n        onClick: handleSelect,\n        variant: 'primary' as const,\n        disabled: selectedAssetIds.length === 0,\n        id: 'asset-manager-select',\n      },\n    ];\n  };\n\n  const renderBrowseTab = (): React.ReactElement => {\n    if (isLoading) {\n      return (\n        <StyledLoadingContainer>\n          <CircularProgress size=\"large\" />\n        </StyledLoadingContainer>\n      );\n    }\n\n    if (error) {\n      return (\n        <StyledErrorContainer>\n          <EmptyState\n            description=\"Failed to load assets. Please try again later.\"\n            title=\"Error loading assets\"\n          />\n        </StyledErrorContainer>\n      );\n    }\n\n    if (!assets || assets.length === 0) {\n      return (\n        <StyledErrorContainer>\n          <EmptyState description=\"No assets available to display.\" title=\"No assets found\" />\n        </StyledErrorContainer>\n      );\n    }\n\n    return (\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\n  return (\n    // TODO: replace this with a new modal component when available\n    <Modal actions={getActions()} onClose={handleCancel} open={open} title=\"Select Images\">\n      <StyledTabsContainer>\n        {/* TODO: replace this with a new tabs component when available */}\n        <Tabs fdKey=\"asset-manager-tabs\" onChange={() => {}} value={1}>\n          <Tab label=\"Upload\" />\n          <Tab label=\"Library\" />\n        </Tabs>\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","StyledLoadingContainer","display","justifyContent","alignItems","minHeight","padding","StyledErrorContainer","AssetManager","open","onClose","onSelect","orgId","multiSelect","selectedAssetIds","setSelectedAssetIds","useState","data","assets","isLoading","error","useGetAssets","useEffect","handleCancel","handleAssetClick","assetId","prev","includes","filter","id","_jsxs","Modal","actions","label","onClick","variant","tone","selectedAssets","asset","disabled","length","title","children","_jsx","Tabs","fdKey","onChange","value","Tab","CircularProgress","size","EmptyState","description","Grid","container","component","sx","listStyle","margin","map","isSelected","widescreen","desktop","mobile","tablet","fileName","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"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"}

package/dist/components/organisms/AssetManager/services/asset.service.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const t=t=>{if(!t)return;return`${(()=>{const t=window.location?.host?.includes("portal.flipdish.com"),e=window.location?.host?.includes("portal.flipdishdev.com");return t?"https://asset-management-service.portal.flipdish.com":e?"https://asset-management-service.portal.flipdishdev.com":"https://ci.asset-management-service.clients-ephemeral.flipdishdev.com"})()}/${t}/assets`};exports.getAssets=async e=>{const s=t(e);if(!s)throw new Error("Organization ID is required to fetch assets");const i=await fetch(s,{method:"GET",credentials:"include"});if(!i.ok)throw new Error(`Failed to fetch assets: ${i.statusText}`);return await i.json()},exports.getAssetsKey="getAssets";
+//# sourceMappingURL=asset.service.cjs.js.map

package/dist/components/organisms/AssetManager/services/asset.service.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset.service.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/services/asset.service.ts"],"sourcesContent":["import type { Asset } from '../types';\n\nexport const getAssetsKey = 'getAssets';\n\nconst PROD_API_URL = 'https://asset-management-service.portal.flipdish.com';\nconst STAGING_API_URL = 'https://asset-management-service.portal.flipdishdev.com';\nconst CI_API_URL = 'https://ci.asset-management-service.clients-ephemeral.flipdishdev.com';\n\n/**\n * Gets the asset management API base URL based on the current environment\n * @returns The appropriate API URL for the current environment\n */\nconst getAssetManagementApiUrl = (): string => {\n  const isProd = window.location?.host?.includes('portal.flipdish.com');\n  const isStaging = window.location?.host?.includes('portal.flipdishdev.com');\n\n  if (isProd) {\n    return PROD_API_URL;\n  }\n\n  if (isStaging) {\n    return STAGING_API_URL;\n  }\n\n  // Default to CI/dev environment\n  return CI_API_URL;\n};\n\n/**\n * Builds the complete API URL for fetching assets\n * @param orgId - Optional organization ID.\n * @returns The complete API URL or undefined if no orgId available\n */\nconst buildApiUrl = (orgId: string): string | undefined => {\n  if (!orgId) return undefined;\n\n  const baseUrl = getAssetManagementApiUrl();\n  return `${baseUrl}/${orgId}/assets`;\n};\n\n/**\n * Fetches assets from the asset management service API\n * @param orgId - organization ID.\n * @returns Promise resolving to an array of assets\n */\nexport const getAssets = async (orgId: string): Promise<Asset[]> => {\n  const apiUrl = buildApiUrl(orgId);\n\n  if (!apiUrl) {\n    throw new Error('Organization ID is required to fetch assets');\n  }\n\n  const response = await fetch(apiUrl, {\n    method: 'GET',\n    credentials: 'include',\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to fetch assets: ${response.statusText}`);\n  }\n\n  return (await response.json()) as Asset[];\n};\n"],"names":["buildApiUrl","orgId","isProd","window","location","host","includes","isStaging","getAssetManagementApiUrl","async","apiUrl","Error","response","fetch","method","credentials","ok","statusText","json"],"mappings":"aAEO,MA+BDA,EAAeC,IACnB,IAAKA,EAAO,OAGZ,MAAO,GAzBwB,MAC/B,MAAMC,EAASC,OAAOC,UAAUC,MAAMC,SAAS,uBACzCC,EAAYJ,OAAOC,UAAUC,MAAMC,SAAS,0BAElD,OAAIJ,EAZe,uDAgBfK,EAfkB,0DACL,yEA8BDC,MACKP,8BAQEQ,MAAOR,IAC9B,MAAMS,EAASV,EAAYC,GAE3B,IAAKS,EACH,MAAM,IAAIC,MAAM,+CAGlB,MAAMC,QAAiBC,MAAMH,EAAQ,CACnCI,OAAQ,MACRC,YAAa,YAGf,IAAKH,EAASI,GACZ,MAAM,IAAIL,MAAM,2BAA2BC,EAASK,cAGtD,aAAcL,EAASM,6BA3DG"}

package/dist/components/organisms/AssetManager/services/asset.service.d.ts

@@ -0,0 +1,11 @@
+import { Asset } from '../types/index.js';
+
+declare const getAssetsKey = "getAssets";
+/**
+ * Fetches assets from the asset management service API
+ * @param orgId - organization ID.
+ * @returns Promise resolving to an array of assets
+ */
+declare const getAssets: (orgId: string) => Promise<Asset[]>;
+
+export { getAssets, getAssetsKey };

package/dist/components/organisms/AssetManager/services/asset.service.js

@@ -0,0 +1,2 @@
+const t="getAssets",e=t=>{if(!t)return;return`${(()=>{const t=window.location?.host?.includes("portal.flipdish.com"),e=window.location?.host?.includes("portal.flipdishdev.com");return t?"https://asset-management-service.portal.flipdish.com":e?"https://asset-management-service.portal.flipdishdev.com":"https://ci.asset-management-service.clients-ephemeral.flipdishdev.com"})()}/${t}/assets`},s=async t=>{const s=e(t);if(!s)throw new Error("Organization ID is required to fetch assets");const i=await fetch(s,{method:"GET",credentials:"include"});if(!i.ok)throw new Error(`Failed to fetch assets: ${i.statusText}`);return await i.json()};export{s as getAssets,t as getAssetsKey};
+//# sourceMappingURL=asset.service.js.map

package/dist/components/organisms/AssetManager/services/asset.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset.service.js","sources":["../../../../../src/components/organisms/AssetManager/services/asset.service.ts"],"sourcesContent":["import type { Asset } from '../types';\n\nexport const getAssetsKey = 'getAssets';\n\nconst PROD_API_URL = 'https://asset-management-service.portal.flipdish.com';\nconst STAGING_API_URL = 'https://asset-management-service.portal.flipdishdev.com';\nconst CI_API_URL = 'https://ci.asset-management-service.clients-ephemeral.flipdishdev.com';\n\n/**\n * Gets the asset management API base URL based on the current environment\n * @returns The appropriate API URL for the current environment\n */\nconst getAssetManagementApiUrl = (): string => {\n  const isProd = window.location?.host?.includes('portal.flipdish.com');\n  const isStaging = window.location?.host?.includes('portal.flipdishdev.com');\n\n  if (isProd) {\n    return PROD_API_URL;\n  }\n\n  if (isStaging) {\n    return STAGING_API_URL;\n  }\n\n  // Default to CI/dev environment\n  return CI_API_URL;\n};\n\n/**\n * Builds the complete API URL for fetching assets\n * @param orgId - Optional organization ID.\n * @returns The complete API URL or undefined if no orgId available\n */\nconst buildApiUrl = (orgId: string): string | undefined => {\n  if (!orgId) return undefined;\n\n  const baseUrl = getAssetManagementApiUrl();\n  return `${baseUrl}/${orgId}/assets`;\n};\n\n/**\n * Fetches assets from the asset management service API\n * @param orgId - organization ID.\n * @returns Promise resolving to an array of assets\n */\nexport const getAssets = async (orgId: string): Promise<Asset[]> => {\n  const apiUrl = buildApiUrl(orgId);\n\n  if (!apiUrl) {\n    throw new Error('Organization ID is required to fetch assets');\n  }\n\n  const response = await fetch(apiUrl, {\n    method: 'GET',\n    credentials: 'include',\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to fetch assets: ${response.statusText}`);\n  }\n\n  return (await response.json()) as Asset[];\n};\n"],"names":["getAssetsKey","buildApiUrl","orgId","isProd","window","location","host","includes","isStaging","getAssetManagementApiUrl","getAssets","async","apiUrl","Error","response","fetch","method","credentials","ok","statusText","json"],"mappings":"AAEO,MAAMA,EAAe,YA+BtBC,EAAeC,IACnB,IAAKA,EAAO,OAGZ,MAAO,GAzBwB,MAC/B,MAAMC,EAASC,OAAOC,UAAUC,MAAMC,SAAS,uBACzCC,EAAYJ,OAAOC,UAAUC,MAAMC,SAAS,0BAElD,OAAIJ,EAZe,uDAgBfK,EAfkB,0DACL,yEA8BDC,MACKP,YAQVQ,EAAYC,MAAOT,IAC9B,MAAMU,EAASX,EAAYC,GAE3B,IAAKU,EACH,MAAM,IAAIC,MAAM,+CAGlB,MAAMC,QAAiBC,MAAMH,EAAQ,CACnCI,OAAQ,MACRC,YAAa,YAGf,IAAKH,EAASI,GACZ,MAAM,IAAIL,MAAM,2BAA2BC,EAASK,cAGtD,aAAcL,EAASM"}

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\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;"],"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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"}
+{"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\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;"],"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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"}
+{"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> = ({ 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;"],"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"}
+{"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> = ({ 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;"],"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"}
+{"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 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;"],"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"}
+{"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 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;"],"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"}
+{"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/Heading/Heading.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("@mui/material/Toolbar"),i=require("@mui/material/styles"),a=require("@mui/material/Box"),n=require("../../atoms/BreadCrumbs/index.cjs.js"),l=require("../../atoms/Button/index.cjs.js"),s=require("@mui/material/Typography"),r=require("../../molecules/ButtonGroup/index.cjs.js"),o=require("../../molecules/Combobox/index.cjs.js");const d=i.styled(t)((({theme:e})=>({flexDirection:"column",alignItems:"stretch",[e.breakpoints.up("tablet")]:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",paddingTop:e.spacing(2),paddingBottom:e.spacing(2)},[e.breakpoints.down("tablet")]:{paddingTop:e.spacing(2),paddingBottom:e.spacing(2)}}))),p=i.styled(a)((({theme:e})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",flex:"1 1 auto",gap:e.spacing(.5),minWidth:0,maxWidth:"100%",[e.breakpoints.up("tablet")]:{marginRight:e.spacing(2)}}))),c=i.styled(a)((({theme:e})=>({display:"flex",justifyContent:"flex-end",alignItems:"center",gap:e.spacing(1),flexShrink:0,alignSelf:"flex-start",paddingTop:e.spacing(.5),[e.breakpoints.down("tablet")]:{justifyContent:"flex-end",marginTop:e.spacing(1),paddingTop:0,alignSelf:"stretch",width:"100%"}}))),u=i.styled(a)((({theme:e})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",gap:e.spacing(2),width:"100%",maxWidth:"100%",[e.breakpoints.up("tablet")]:{flexDirection:"row",alignItems:"center",paddingTop:e.spacing(2),flexWrap:"wrap"},[e.breakpoints.down("tablet")]:{flexDirection:"column",alignItems:"flex-start",paddingTop:e.spacing(2),paddingBottom:e.spacing(2),width:"100%"}}))),g=({title:t,buttons:i,description:a,breadcrumbItems:g,selectBoxes:m})=>e.jsxs(d,{children:[e.jsxs(p,{children:[g&&e.jsx(n,{items:g}),t&&e.jsx(s,{variant:"h1Strong",children:t}),a&&e.jsx(s,{color:"semantic.text.text-weak",variant:"captionWeak",children:a}),m?.length?e.jsx(u,{children:m.map((t=>e.jsx(o.Combobox,{fdKey:t.fdKey,label:t.label,onChange:t.onChange,options:t.options,placeholder:t.placeholder,translations:t.translations,value:t.value??null},t.fdKey)))}):null]}),i?.length?e.jsx(c,{children:e.jsx(r,{align:"right",fdKey:"heading-button-group",layout:"horizontal",size:"medium",children:i.map((t=>{const i=t.variant;return e.jsx(l.Button,{disabled:t.disabled??!1,fdKey:t.fdKey,onClick:t.onClick,variant:i,children:t.label},t.fdKey)}))})}):null]});exports.Heading=g,exports.default=g;
+//# sourceMappingURL=Heading.cjs.js.map

package/dist/components/organisms/Heading/Heading.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.cjs.js","sources":["../../../../src/components/organisms/Heading/Heading.tsx"],"sourcesContent":["import React from 'react';\n\nimport Toolbar from '@mui/material/Toolbar';\n\nimport styled from '@fd/utilities/styledUtilities';\n\nimport Box from '../../atoms/Box';\nimport BreadCrumbs, { type BreadcrumbItem } from '../../atoms/BreadCrumbs';\nimport Button from '../../atoms/Button';\nimport { type ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Typography from '../../atoms/Typography';\nimport  ButtonGroup from \"../../molecules/ButtonGroup\";\nimport {Combobox, type ComboboxOption, type ComboboxProps} from '../../molecules/Combobox';\n\nexport interface ButtonConfig {\n  variant: ButtonType;\n  onClick: () => void;\n  label: string;\n  fdKey: string;\n  disabled?: boolean;\n}\n\nexport interface SelectConfig {\n  options: ComboboxOption[];\n  label: string;\n  placeholder?: string;\n  fdKey: string;\n  onChange?: ComboboxProps['onChange'];\n  value?: ComboboxProps['value'];\n  translations: ComboboxProps['translations'];\n}\n\nexport interface HeadingProps {\n  title?: string;\n  buttons?: ButtonConfig[];\n  description?: string;\n  breadcrumbItems?: BreadcrumbItem[];\n  selectBoxes?: SelectConfig[];\n}\n\nconst StyledToolbar = styled(Toolbar)(({ theme }) => ({\n  flexDirection: 'column',\n  alignItems: 'stretch',\n  [theme.breakpoints.up('tablet')]: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    justifyContent: 'space-between',\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  [theme.breakpoints.down('tablet')]: {\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n}));\n\nconst StyledLeftSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  flex: '1 1 auto',\n  gap: theme.spacing(0.5),\n  minWidth: 0,\n  maxWidth: '100%',\n  [theme.breakpoints.up('tablet')]: {\n    marginRight: theme.spacing(2),\n  },\n}));\n\nconst StyledRightSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'flex-end',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  flexShrink: 0,\n  alignSelf: 'flex-start',\n  paddingTop: theme.spacing(0.5),\n  [theme.breakpoints.down('tablet')]: {\n    justifyContent: 'flex-end',\n    marginTop: theme.spacing(1),\n    paddingTop: 0,\n    alignSelf: 'stretch',\n    width: '100%',\n  },\n}));\n\nconst StyledSelectedSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  gap: theme.spacing(2),\n  width: '100%',\n  maxWidth: '100%',\n  [theme.breakpoints.up('tablet')]: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingTop: theme.spacing(2),\n    flexWrap: 'wrap',\n  },\n  [theme.breakpoints.down('tablet')]: {\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n    width: '100%',\n  },\n}));\n\nexport const Heading: React.FC<HeadingProps> = ({\n  title,\n  buttons,\n  description,\n  breadcrumbItems,\n  selectBoxes,\n}: HeadingProps) => {\n    const renderSelectedSection = () => {\n      if (!selectBoxes?.length) {\n        return null;\n      }\n\n      return (\n        <StyledSelectedSection>\n          {selectBoxes.map((selectConfig) => (\n            <Combobox\n              key={selectConfig.fdKey}\n              fdKey={selectConfig.fdKey}\n              label={selectConfig.label}\n              onChange={selectConfig.onChange}\n              options={selectConfig.options}\n              placeholder={selectConfig.placeholder}\n              translations={selectConfig.translations}\n              value={selectConfig.value ?? null}\n            />\n          ))}\n        </StyledSelectedSection>\n      );\n    };\n\n  const renderLeftSection = () => (\n    <StyledLeftSection>\n        {breadcrumbItems && <BreadCrumbs items={breadcrumbItems} />}\n        {title && <Typography variant=\"h1Strong\">{title}</Typography>}\n        {description && <Typography color = 'semantic.text.text-weak' variant=\"captionWeak\">{description}</Typography>}\n        {renderSelectedSection()}\n    </StyledLeftSection>\n  );\n\n  const renderRightSection = () => {\n    if (!buttons?.length) {\n      return null;\n    }\n\n    return (\n      <StyledRightSection>\n        <ButtonGroup align=\"right\" fdKey=\"heading-button-group\" layout=\"horizontal\" size=\"medium\">\n          {buttons.map((buttonConfig: ButtonConfig) => {\n            const variant: ButtonType = buttonConfig.variant;\n            return (\n              <Button\n                key={buttonConfig.fdKey}\n                disabled={buttonConfig.disabled ?? false}\n                fdKey={buttonConfig.fdKey}\n                onClick={buttonConfig.onClick}\n                variant={variant}\n              >\n                {buttonConfig.label}\n              </Button>\n            );\n          })}\n        </ButtonGroup>\n      </StyledRightSection>\n    );\n  };\n\n  return (\n    <StyledToolbar>\n        {renderLeftSection()}\n        {renderRightSection()}\n      </StyledToolbar>\n  );\n};\n\nexport default Heading;"],"names":["StyledToolbar","styled","Toolbar","theme","flexDirection","alignItems","breakpoints","up","justifyContent","paddingTop","spacing","paddingBottom","down","StyledLeftSection","Box","display","flex","gap","minWidth","maxWidth","marginRight","StyledRightSection","flexShrink","alignSelf","marginTop","width","StyledSelectedSection","flexWrap","Heading","title","buttons","description","breadcrumbItems","selectBoxes","_jsxs","children","_jsx","BreadCrumbs","items","Typography","variant","color","length","map","selectConfig","Combobox","fdKey","label","onChange","options","placeholder","translations","value","ButtonGroup","align","layout","size","buttonConfig","Button","disabled","onClick"],"mappings":"8cAwCA,MAAMA,EAAgBC,EAAAA,OAAOC,EAAPD,EAAgB,EAAGE,YAAO,CAC9CC,cAAe,SACfC,WAAY,UACZ,CAACF,EAAMG,YAAYC,GAAG,WAAY,CAChCH,cAAe,MACfC,WAAY,aACZG,eAAgB,gBAChBC,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,IAE/B,CAACP,EAAMG,YAAYM,KAAK,WAAY,CAClCH,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,QAI3BG,EAAoBZ,EAAAA,OAAOa,EAAPb,EAAY,EAAGE,YAAO,CAC9CY,QAAS,OACTX,cAAe,SACfC,WAAY,aACZW,KAAM,WACNC,IAAKd,EAAMO,QAAQ,IACnBQ,SAAU,EACVC,SAAU,OACV,CAAChB,EAAMG,YAAYC,GAAG,WAAY,CAChCa,YAAajB,EAAMO,QAAQ,QAIzBW,EAAqBpB,EAAAA,OAAOa,EAAPb,EAAY,EAAGE,YAAO,CAC/CY,QAAS,OACTP,eAAgB,WAChBH,WAAY,SACZY,IAAKd,EAAMO,QAAQ,GACnBY,WAAY,EACZC,UAAW,aACXd,WAAYN,EAAMO,QAAQ,IAC1B,CAACP,EAAMG,YAAYM,KAAK,WAAY,CAClCJ,eAAgB,WAChBgB,UAAWrB,EAAMO,QAAQ,GACzBD,WAAY,EACZc,UAAW,UACXE,MAAO,YAILC,EAAwBzB,EAAAA,OAAOa,EAAPb,EAAY,EAAGE,YAAO,CAClDY,QAAS,OACTX,cAAe,SACfC,WAAY,aACZY,IAAKd,EAAMO,QAAQ,GACnBe,MAAO,OACPN,SAAU,OACV,CAAChB,EAAMG,YAAYC,GAAG,WAAY,CAChCH,cAAe,MACfC,WAAY,SACZI,WAAYN,EAAMO,QAAQ,GAC1BiB,SAAU,QAEZ,CAACxB,EAAMG,YAAYM,KAAK,WAAY,CAClCR,cAAe,SACfC,WAAY,aACZI,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,GAC7Be,MAAO,YAIEG,EAAkC,EAC7CC,QACAC,UACAC,cACAC,kBACAC,iBA8DEC,EAAAA,KAAClC,EAAa,CAAAmC,SAAA,CApCdD,OAACrB,EAAiB,CAAAsB,SAAA,CACbH,GAAmBI,EAAAA,IAACC,EAAW,CAACC,MAAON,IACvCH,GAASO,EAAAA,IAACG,EAAU,CAACC,QAAQ,WAAUL,SAAEN,IACzCE,GAAeK,EAAAA,IAACG,EAAU,CAACE,MAAQ,0BAA0BD,QAAQ,cAAaL,SAAEJ,IA1BlFE,GAAaS,OAKhBN,EAAAA,IAACV,EAAqB,CAAAS,SACnBF,EAAYU,KAAKC,GAChBR,EAAAA,IAACS,EAAAA,SAAQ,CAEPC,MAAOF,EAAaE,MACpBC,MAAOH,EAAaG,MACpBC,SAAUJ,EAAaI,SACvBC,QAASL,EAAaK,QACtBC,YAAaN,EAAaM,YAC1BC,aAAcP,EAAaO,aAC3BC,MAAOR,EAAaQ,OAAS,MAPxBR,EAAaE,WAPjB,QA+BNhB,GAASY,OAKZN,EAAAA,IAACf,EAAkB,CAAAc,SACjBC,EAAAA,IAACiB,EAAW,CAACC,MAAM,QAAQR,MAAM,uBAAuBS,OAAO,aAAaC,KAAK,SAAQrB,SACtFL,EAAQa,KAAKc,IACZ,MAAMjB,EAAsBiB,EAAajB,QACzC,OACEJ,EAAAA,IAACsB,SAAM,CAELC,SAAUF,EAAaE,WAAY,EACnCb,MAAOW,EAAaX,MACpBc,QAASH,EAAaG,QACtBpB,QAASA,EAAOL,SAEfsB,EAAaV,OANTU,EAAaX,cAVrB"}

package/dist/components/organisms/Heading/Heading.d.ts

@@ -0,0 +1,32 @@
+import react__default from 'react';
+import { BreadcrumbItem } from '../../atoms/BreadCrumbs/index.js';
+import { ButtonType } from '../../atoms/Button/getButtonStyles.js';
+import { ComboboxOption, ComboboxProps } from '../../molecules/Combobox/index.js';
+
+interface ButtonConfig {
+    variant: ButtonType;
+    onClick: () => void;
+    label: string;
+    fdKey: string;
+    disabled?: boolean;
+}
+interface SelectConfig {
+    options: ComboboxOption[];
+    label: string;
+    placeholder?: string;
+    fdKey: string;
+    onChange?: ComboboxProps['onChange'];
+    value?: ComboboxProps['value'];
+    translations: ComboboxProps['translations'];
+}
+interface HeadingProps {
+    title?: string;
+    buttons?: ButtonConfig[];
+    description?: string;
+    breadcrumbItems?: BreadcrumbItem[];
+    selectBoxes?: SelectConfig[];
+}
+declare const Heading: react__default.FC<HeadingProps>;
+
+export { Heading, Heading as default };
+export type { ButtonConfig, HeadingProps, SelectConfig };

package/dist/components/organisms/Heading/Heading.js

@@ -0,0 +1,2 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import"react";import i from"@mui/material/Toolbar";import{styled as a}from"@mui/material/styles";import n from"@mui/material/Box";import o from"../../atoms/BreadCrumbs/index.js";import{Button as l}from"../../atoms/Button/index.js";import r from"@mui/material/Typography";import s from"../../molecules/ButtonGroup/index.js";import{Combobox as p}from"../../molecules/Combobox/index.js";const m=a(i)((({theme:t})=>({flexDirection:"column",alignItems:"stretch",[t.breakpoints.up("tablet")]:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",paddingTop:t.spacing(2),paddingBottom:t.spacing(2)},[t.breakpoints.down("tablet")]:{paddingTop:t.spacing(2),paddingBottom:t.spacing(2)}}))),d=a(n)((({theme:t})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",flex:"1 1 auto",gap:t.spacing(.5),minWidth:0,maxWidth:"100%",[t.breakpoints.up("tablet")]:{marginRight:t.spacing(2)}}))),c=a(n)((({theme:t})=>({display:"flex",justifyContent:"flex-end",alignItems:"center",gap:t.spacing(1),flexShrink:0,alignSelf:"flex-start",paddingTop:t.spacing(.5),[t.breakpoints.down("tablet")]:{justifyContent:"flex-end",marginTop:t.spacing(1),paddingTop:0,alignSelf:"stretch",width:"100%"}}))),g=a(n)((({theme:t})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",gap:t.spacing(2),width:"100%",maxWidth:"100%",[t.breakpoints.up("tablet")]:{flexDirection:"row",alignItems:"center",paddingTop:t.spacing(2),flexWrap:"wrap"},[t.breakpoints.down("tablet")]:{flexDirection:"column",alignItems:"flex-start",paddingTop:t.spacing(2),paddingBottom:t.spacing(2),width:"100%"}}))),f=({title:i,buttons:a,description:n,breadcrumbItems:f,selectBoxes:u})=>t(m,{children:[t(d,{children:[f&&e(o,{items:f}),i&&e(r,{variant:"h1Strong",children:i}),n&&e(r,{color:"semantic.text.text-weak",variant:"captionWeak",children:n}),u?.length?e(g,{children:u.map((t=>e(p,{fdKey:t.fdKey,label:t.label,onChange:t.onChange,options:t.options,placeholder:t.placeholder,translations:t.translations,value:t.value??null},t.fdKey)))}):null]}),a?.length?e(c,{children:e(s,{align:"right",fdKey:"heading-button-group",layout:"horizontal",size:"medium",children:a.map((t=>{const i=t.variant;return e(l,{disabled:t.disabled??!1,fdKey:t.fdKey,onClick:t.onClick,variant:i,children:t.label},t.fdKey)}))})}):null]});export{f as Heading,f as default};
+//# sourceMappingURL=Heading.js.map

package/dist/components/organisms/Heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sources":["../../../../src/components/organisms/Heading/Heading.tsx"],"sourcesContent":["import React from 'react';\n\nimport Toolbar from '@mui/material/Toolbar';\n\nimport styled from '@fd/utilities/styledUtilities';\n\nimport Box from '../../atoms/Box';\nimport BreadCrumbs, { type BreadcrumbItem } from '../../atoms/BreadCrumbs';\nimport Button from '../../atoms/Button';\nimport { type ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Typography from '../../atoms/Typography';\nimport  ButtonGroup from \"../../molecules/ButtonGroup\";\nimport {Combobox, type ComboboxOption, type ComboboxProps} from '../../molecules/Combobox';\n\nexport interface ButtonConfig {\n  variant: ButtonType;\n  onClick: () => void;\n  label: string;\n  fdKey: string;\n  disabled?: boolean;\n}\n\nexport interface SelectConfig {\n  options: ComboboxOption[];\n  label: string;\n  placeholder?: string;\n  fdKey: string;\n  onChange?: ComboboxProps['onChange'];\n  value?: ComboboxProps['value'];\n  translations: ComboboxProps['translations'];\n}\n\nexport interface HeadingProps {\n  title?: string;\n  buttons?: ButtonConfig[];\n  description?: string;\n  breadcrumbItems?: BreadcrumbItem[];\n  selectBoxes?: SelectConfig[];\n}\n\nconst StyledToolbar = styled(Toolbar)(({ theme }) => ({\n  flexDirection: 'column',\n  alignItems: 'stretch',\n  [theme.breakpoints.up('tablet')]: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    justifyContent: 'space-between',\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  [theme.breakpoints.down('tablet')]: {\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n}));\n\nconst StyledLeftSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  flex: '1 1 auto',\n  gap: theme.spacing(0.5),\n  minWidth: 0,\n  maxWidth: '100%',\n  [theme.breakpoints.up('tablet')]: {\n    marginRight: theme.spacing(2),\n  },\n}));\n\nconst StyledRightSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'flex-end',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  flexShrink: 0,\n  alignSelf: 'flex-start',\n  paddingTop: theme.spacing(0.5),\n  [theme.breakpoints.down('tablet')]: {\n    justifyContent: 'flex-end',\n    marginTop: theme.spacing(1),\n    paddingTop: 0,\n    alignSelf: 'stretch',\n    width: '100%',\n  },\n}));\n\nconst StyledSelectedSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  gap: theme.spacing(2),\n  width: '100%',\n  maxWidth: '100%',\n  [theme.breakpoints.up('tablet')]: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingTop: theme.spacing(2),\n    flexWrap: 'wrap',\n  },\n  [theme.breakpoints.down('tablet')]: {\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n    width: '100%',\n  },\n}));\n\nexport const Heading: React.FC<HeadingProps> = ({\n  title,\n  buttons,\n  description,\n  breadcrumbItems,\n  selectBoxes,\n}: HeadingProps) => {\n    const renderSelectedSection = () => {\n      if (!selectBoxes?.length) {\n        return null;\n      }\n\n      return (\n        <StyledSelectedSection>\n          {selectBoxes.map((selectConfig) => (\n            <Combobox\n              key={selectConfig.fdKey}\n              fdKey={selectConfig.fdKey}\n              label={selectConfig.label}\n              onChange={selectConfig.onChange}\n              options={selectConfig.options}\n              placeholder={selectConfig.placeholder}\n              translations={selectConfig.translations}\n              value={selectConfig.value ?? null}\n            />\n          ))}\n        </StyledSelectedSection>\n      );\n    };\n\n  const renderLeftSection = () => (\n    <StyledLeftSection>\n        {breadcrumbItems && <BreadCrumbs items={breadcrumbItems} />}\n        {title && <Typography variant=\"h1Strong\">{title}</Typography>}\n        {description && <Typography color = 'semantic.text.text-weak' variant=\"captionWeak\">{description}</Typography>}\n        {renderSelectedSection()}\n    </StyledLeftSection>\n  );\n\n  const renderRightSection = () => {\n    if (!buttons?.length) {\n      return null;\n    }\n\n    return (\n      <StyledRightSection>\n        <ButtonGroup align=\"right\" fdKey=\"heading-button-group\" layout=\"horizontal\" size=\"medium\">\n          {buttons.map((buttonConfig: ButtonConfig) => {\n            const variant: ButtonType = buttonConfig.variant;\n            return (\n              <Button\n                key={buttonConfig.fdKey}\n                disabled={buttonConfig.disabled ?? false}\n                fdKey={buttonConfig.fdKey}\n                onClick={buttonConfig.onClick}\n                variant={variant}\n              >\n                {buttonConfig.label}\n              </Button>\n            );\n          })}\n        </ButtonGroup>\n      </StyledRightSection>\n    );\n  };\n\n  return (\n    <StyledToolbar>\n        {renderLeftSection()}\n        {renderRightSection()}\n      </StyledToolbar>\n  );\n};\n\nexport default Heading;"],"names":["StyledToolbar","styled","Toolbar","theme","flexDirection","alignItems","breakpoints","up","justifyContent","paddingTop","spacing","paddingBottom","down","StyledLeftSection","Box","display","flex","gap","minWidth","maxWidth","marginRight","StyledRightSection","flexShrink","alignSelf","marginTop","width","StyledSelectedSection","flexWrap","Heading","title","buttons","description","breadcrumbItems","selectBoxes","_jsxs","children","_jsx","BreadCrumbs","items","Typography","variant","color","length","map","selectConfig","Combobox","fdKey","label","onChange","options","placeholder","translations","value","ButtonGroup","align","layout","size","buttonConfig","Button","disabled","onClick"],"mappings":"kbAwCA,MAAMA,EAAgBC,EAAOC,EAAPD,EAAgB,EAAGE,YAAO,CAC9CC,cAAe,SACfC,WAAY,UACZ,CAACF,EAAMG,YAAYC,GAAG,WAAY,CAChCH,cAAe,MACfC,WAAY,aACZG,eAAgB,gBAChBC,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,IAE/B,CAACP,EAAMG,YAAYM,KAAK,WAAY,CAClCH,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,QAI3BG,EAAoBZ,EAAOa,EAAPb,EAAY,EAAGE,YAAO,CAC9CY,QAAS,OACTX,cAAe,SACfC,WAAY,aACZW,KAAM,WACNC,IAAKd,EAAMO,QAAQ,IACnBQ,SAAU,EACVC,SAAU,OACV,CAAChB,EAAMG,YAAYC,GAAG,WAAY,CAChCa,YAAajB,EAAMO,QAAQ,QAIzBW,EAAqBpB,EAAOa,EAAPb,EAAY,EAAGE,YAAO,CAC/CY,QAAS,OACTP,eAAgB,WAChBH,WAAY,SACZY,IAAKd,EAAMO,QAAQ,GACnBY,WAAY,EACZC,UAAW,aACXd,WAAYN,EAAMO,QAAQ,IAC1B,CAACP,EAAMG,YAAYM,KAAK,WAAY,CAClCJ,eAAgB,WAChBgB,UAAWrB,EAAMO,QAAQ,GACzBD,WAAY,EACZc,UAAW,UACXE,MAAO,YAILC,EAAwBzB,EAAOa,EAAPb,EAAY,EAAGE,YAAO,CAClDY,QAAS,OACTX,cAAe,SACfC,WAAY,aACZY,IAAKd,EAAMO,QAAQ,GACnBe,MAAO,OACPN,SAAU,OACV,CAAChB,EAAMG,YAAYC,GAAG,WAAY,CAChCH,cAAe,MACfC,WAAY,SACZI,WAAYN,EAAMO,QAAQ,GAC1BiB,SAAU,QAEZ,CAACxB,EAAMG,YAAYM,KAAK,WAAY,CAClCR,cAAe,SACfC,WAAY,aACZI,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,GAC7Be,MAAO,YAIEG,EAAkC,EAC7CC,QACAC,UACAC,cACAC,kBACAC,iBA8DEC,EAAClC,EAAa,CAAAmC,SAAA,CApCdD,EAACrB,EAAiB,CAAAsB,SAAA,CACbH,GAAmBI,EAACC,EAAW,CAACC,MAAON,IACvCH,GAASO,EAACG,EAAU,CAACC,QAAQ,WAAUL,SAAEN,IACzCE,GAAeK,EAACG,EAAU,CAACE,MAAQ,0BAA0BD,QAAQ,cAAaL,SAAEJ,IA1BlFE,GAAaS,OAKhBN,EAACV,EAAqB,CAAAS,SACnBF,EAAYU,KAAKC,GAChBR,EAACS,EAAQ,CAEPC,MAAOF,EAAaE,MACpBC,MAAOH,EAAaG,MACpBC,SAAUJ,EAAaI,SACvBC,QAASL,EAAaK,QACtBC,YAAaN,EAAaM,YAC1BC,aAAcP,EAAaO,aAC3BC,MAAOR,EAAaQ,OAAS,MAPxBR,EAAaE,WAPjB,QA+BNhB,GAASY,OAKZN,EAACf,EAAkB,CAAAc,SACjBC,EAACiB,EAAW,CAACC,MAAM,QAAQR,MAAM,uBAAuBS,OAAO,aAAaC,KAAK,SAAQrB,SACtFL,EAAQa,KAAKc,IACZ,MAAMjB,EAAsBiB,EAAajB,QACzC,OACEJ,EAACsB,EAAM,CAELC,SAAUF,EAAaE,WAAY,EACnCb,MAAOW,EAAaX,MACpBc,QAASH,EAAaG,QACtBpB,QAASA,EAAOL,SAEfsB,EAAaV,OANTU,EAAaX,cAVrB"}

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;"],"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.map

@@ -1 +1 @@
-{"version":3,"file":"FlipdishFonts.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;"],"names":["fontStyles","css","FlipdishFonts","_jsx","Global","styles"],"mappings":"yFAEA,MAAMA,EAAaC,CAAG;;;EAKhBC,EAA0B,IACvBC,EAACC,EAAM,CAACC,OAAQL"}
+{"version":3,"file":"FlipdishFonts.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","FlipdishFonts","_jsx","Global","styles"],"mappings":"yFAEA,MAAMA,EAAaC,CAAG;;;EAKhBC,EAA0B,IACvBC,EAACC,EAAM,CAACC,OAAQL"}

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

@@ -1 +1 @@
-{"version":3,"file":"ImageDisplay.cjs.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/ImageDisplay.tsx"],"sourcesContent":["\nimport { useMemo, useState } from 'react';\n\nimport Skeleton from '@mui/material/Skeleton/Skeleton';\nimport styled from '@mui/material/styles/styled';\n\nimport { AdvancedImage } from '@cloudinary/react';\nimport { Cloudinary, type CloudinaryImage } from '@cloudinary/url-gen';\nimport Imgix from 'react-imgix';\n\ninterface ImageDisplayProps {\n  src: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n}\n\nconst StyledSkeleton = styled(Skeleton)({\n  width: '100%',\n  height: '100%',\n});\n\nconst ImageDisplay: React.FC<ImageDisplayProps> = ({ src, isCloudinaryAsset, cdnCloudName }) => {\n  const [loading, setLoading] = useState(true);\n\n  const handleLoadingChange = (loadingState: boolean): void => {\n    setLoading(loadingState);\n  };\n\n  const cloudinaryImage = useMemo<CloudinaryImage | null>(() => {\n    if (isCloudinaryAsset) {\n      const cloudinaryInstance = new Cloudinary({\n        cloud: {\n          cloudName: cdnCloudName,\n        },\n      });\n      return cloudinaryInstance.image(src);\n    }\n    return null;\n  }, [src, isCloudinaryAsset, cdnCloudName]);\n\n  if (isCloudinaryAsset && cloudinaryImage) {\n    return (\n      <>\n        <AdvancedImage\n          cldImg={cloudinaryImage}\n          onError={() => handleLoadingChange(false)}\n          onLoad={() => handleLoadingChange(false)}\n          style={{ maxWidth: loading ? '0%' : '100%', maxHeight: '100%', objectFit: 'cover' }}\n        />\n        {loading && <StyledSkeleton animation=\"wave\" variant=\"rounded\" />}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <Imgix\n        htmlAttributes={{\n          onLoad: () => handleLoadingChange(false),\n          onError: () => handleLoadingChange(false),\n          style: {\n            maxWidth: loading ? '0%' : '100%',\n            maxHeight: '100%',\n            objectFit: 'cover',\n          },\n        }}\n        src={src}\n      />\n      {loading && <StyledSkeleton animation=\"wave\" variant=\"rounded\" />}\n    </>\n  );\n};\n\nexport default ImageDisplay;\n"],"names":["StyledSkeleton","styled","Skeleton","width","height","src","isCloudinaryAsset","cdnCloudName","loading","setLoading","useState","handleLoadingChange","loadingState","cloudinaryImage","useMemo","Cloudinary","cloud","cloudName","image","_jsxs","_Fragment","children","_jsx","AdvancedImage","cldImg","onError","onLoad","style","maxWidth","maxHeight","objectFit","animation","variant","Imgix","htmlAttributes"],"mappings":"kPAgBA,MAAMA,EAAiBC,EAAOC,EAAPD,CAAiB,CACtCE,MAAO,OACPC,OAAQ,wBAGwC,EAAGC,MAAKC,oBAAmBC,mBAC3E,MAAOC,EAASC,GAAcC,EAAAA,UAAS,GAEjCC,EAAuBC,IAC3BH,EAAWG,IAGPC,EAAkBC,EAAAA,SAAgC,KACtD,GAAIR,EAAmB,CAMrB,OAL2B,IAAIS,aAAW,CACxCC,MAAO,CACLC,UAAWV,KAGWW,MAAMb,EAClC,CACA,OAAO,OACN,CAACA,EAAKC,EAAmBC,IAE5B,OAAID,GAAqBO,EAErBM,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACEC,MAACC,EAAAA,eACCC,OAAQX,EACRY,QAAS,IAAMd,GAAoB,GACnCe,OAAQ,IAAMf,GAAoB,GAClCgB,MAAO,CAAEC,SAAUpB,EAAU,KAAO,OAAQqB,UAAW,OAAQC,UAAW,WAE3EtB,GAAWc,MAACtB,GAAe+B,UAAU,OAAOC,QAAQ,eAMzDb,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACEC,MAACW,EAAK,CACJC,eAAgB,CACdR,OAAQ,IAAMf,GAAoB,GAClCc,QAAS,IAAMd,GAAoB,GACnCgB,MAAO,CACLC,SAAUpB,EAAU,KAAO,OAC3BqB,UAAW,OACXC,UAAW,UAGfzB,IAAKA,IAENG,GAAWc,EAAAA,IAACtB,EAAc,CAAC+B,UAAU,OAAOC,QAAQ"}
+{"version":3,"file":"ImageDisplay.cjs.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/ImageDisplay.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport Skeleton from '@mui/material/Skeleton/Skeleton';\nimport styled from '@mui/material/styles/styled';\n\nimport { AdvancedImage } from '@cloudinary/react';\nimport { Cloudinary, type CloudinaryImage } from '@cloudinary/url-gen';\nimport Imgix from 'react-imgix';\n\ninterface ImageDisplayProps {\n  src: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n}\n\nconst StyledSkeleton = styled(Skeleton)({\n  width: '100%',\n  height: '100%',\n});\n\nconst ImageDisplay: React.FC<ImageDisplayProps> = ({ src, isCloudinaryAsset, cdnCloudName }) => {\n  const [loading, setLoading] = useState(true);\n\n  const handleLoadingChange = (loadingState: boolean): void => {\n    setLoading(loadingState);\n  };\n\n  const cloudinaryImage = useMemo<CloudinaryImage | null>(() => {\n    if (isCloudinaryAsset) {\n      const cloudinaryInstance = new Cloudinary({\n        cloud: {\n          cloudName: cdnCloudName,\n        },\n      });\n      return cloudinaryInstance.image(src);\n    }\n    return null;\n  }, [src, isCloudinaryAsset, cdnCloudName]);\n\n  if (isCloudinaryAsset && cloudinaryImage) {\n    return (\n      <>\n        <AdvancedImage\n          cldImg={cloudinaryImage}\n          onError={() => handleLoadingChange(false)}\n          onLoad={() => handleLoadingChange(false)}\n          style={{ maxWidth: loading ? '0%' : '100%', maxHeight: '100%', objectFit: 'cover' }}\n        />\n        {loading && <StyledSkeleton animation=\"wave\" variant=\"rounded\" />}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <Imgix\n        htmlAttributes={{\n          onLoad: () => handleLoadingChange(false),\n          onError: () => handleLoadingChange(false),\n          style: {\n            maxWidth: loading ? '0%' : '100%',\n            maxHeight: '100%',\n            objectFit: 'cover',\n          },\n        }}\n        src={src}\n      />\n      {loading && <StyledSkeleton animation=\"wave\" variant=\"rounded\" />}\n    </>\n  );\n};\n\nexport default ImageDisplay;\n"],"names":["StyledSkeleton","styled","Skeleton","width","height","src","isCloudinaryAsset","cdnCloudName","loading","setLoading","useState","handleLoadingChange","loadingState","cloudinaryImage","useMemo","Cloudinary","cloud","cloudName","image","_jsxs","_Fragment","children","_jsx","AdvancedImage","cldImg","onError","onLoad","style","maxWidth","maxHeight","objectFit","animation","variant","Imgix","htmlAttributes"],"mappings":"kPAeA,MAAMA,EAAiBC,EAAOC,EAAPD,CAAiB,CACtCE,MAAO,OACPC,OAAQ,wBAGwC,EAAGC,MAAKC,oBAAmBC,mBAC3E,MAAOC,EAASC,GAAcC,EAAAA,UAAS,GAEjCC,EAAuBC,IAC3BH,EAAWG,IAGPC,EAAkBC,EAAAA,SAAgC,KACtD,GAAIR,EAAmB,CAMrB,OAL2B,IAAIS,aAAW,CACxCC,MAAO,CACLC,UAAWV,KAGWW,MAAMb,EAClC,CACA,OAAO,OACN,CAACA,EAAKC,EAAmBC,IAE5B,OAAID,GAAqBO,EAErBM,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACEC,MAACC,EAAAA,eACCC,OAAQX,EACRY,QAAS,IAAMd,GAAoB,GACnCe,OAAQ,IAAMf,GAAoB,GAClCgB,MAAO,CAAEC,SAAUpB,EAAU,KAAO,OAAQqB,UAAW,OAAQC,UAAW,WAE3EtB,GAAWc,MAACtB,GAAe+B,UAAU,OAAOC,QAAQ,eAMzDb,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACEC,MAACW,EAAK,CACJC,eAAgB,CACdR,OAAQ,IAAMf,GAAoB,GAClCc,QAAS,IAAMd,GAAoB,GACnCgB,MAAO,CACLC,SAAUpB,EAAU,KAAO,OAC3BqB,UAAW,OACXC,UAAW,UAGfzB,IAAKA,IAENG,GAAWc,EAAAA,IAACtB,EAAc,CAAC+B,UAAU,OAAOC,QAAQ"}

package/dist/components/organisms/ImageUploadWidget/components/ImageDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageDisplay.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/ImageDisplay.tsx"],"sourcesContent":["\nimport { useMemo, useState } from 'react';\n\nimport Skeleton from '@mui/material/Skeleton/Skeleton';\nimport styled from '@mui/material/styles/styled';\n\nimport { AdvancedImage } from '@cloudinary/react';\nimport { Cloudinary, type CloudinaryImage } from '@cloudinary/url-gen';\nimport Imgix from 'react-imgix';\n\ninterface ImageDisplayProps {\n  src: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n}\n\nconst StyledSkeleton = styled(Skeleton)({\n  width: '100%',\n  height: '100%',\n});\n\nconst ImageDisplay: React.FC<ImageDisplayProps> = ({ src, isCloudinaryAsset, cdnCloudName }) => {\n  const [loading, setLoading] = useState(true);\n\n  const handleLoadingChange = (loadingState: boolean): void => {\n    setLoading(loadingState);\n  };\n\n  const cloudinaryImage = useMemo<CloudinaryImage | null>(() => {\n    if (isCloudinaryAsset) {\n      const cloudinaryInstance = new Cloudinary({\n        cloud: {\n          cloudName: cdnCloudName,\n        },\n      });\n      return cloudinaryInstance.image(src);\n    }\n    return null;\n  }, [src, isCloudinaryAsset, cdnCloudName]);\n\n  if (isCloudinaryAsset && cloudinaryImage) {\n    return (\n      <>\n        <AdvancedImage\n          cldImg={cloudinaryImage}\n          onError={() => handleLoadingChange(false)}\n          onLoad={() => handleLoadingChange(false)}\n          style={{ maxWidth: loading ? '0%' : '100%', maxHeight: '100%', objectFit: 'cover' }}\n        />\n        {loading && <StyledSkeleton animation=\"wave\" variant=\"rounded\" />}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <Imgix\n        htmlAttributes={{\n          onLoad: () => handleLoadingChange(false),\n          onError: () => handleLoadingChange(false),\n          style: {\n            maxWidth: loading ? '0%' : '100%',\n            maxHeight: '100%',\n            objectFit: 'cover',\n          },\n        }}\n        src={src}\n      />\n      {loading && <StyledSkeleton animation=\"wave\" variant=\"rounded\" />}\n    </>\n  );\n};\n\nexport default ImageDisplay;\n"],"names":["StyledSkeleton","styled","Skeleton","width","height","ImageDisplay","src","isCloudinaryAsset","cdnCloudName","loading","setLoading","useState","handleLoadingChange","loadingState","cloudinaryImage","useMemo","Cloudinary","cloud","cloudName","image","_jsxs","_Fragment","children","_jsx","AdvancedImage","cldImg","onError","onLoad","style","maxWidth","maxHeight","objectFit","animation","variant","Imgix","htmlAttributes"],"mappings":"sUAgBA,MAAMA,EAAiBC,EAAOC,EAAPD,CAAiB,CACtCE,MAAO,OACPC,OAAQ,SAGJC,EAA4C,EAAGC,MAAKC,oBAAmBC,mBAC3E,MAAOC,EAASC,GAAcC,GAAS,GAEjCC,EAAuBC,IAC3BH,EAAWG,IAGPC,EAAkBC,GAAgC,KACtD,GAAIR,EAAmB,CAMrB,OAL2B,IAAIS,EAAW,CACxCC,MAAO,CACLC,UAAWV,KAGWW,MAAMb,EAClC,CACA,OAAO,OACN,CAACA,EAAKC,EAAmBC,IAE5B,OAEIY,EAAAC,EAFAd,GAAqBO,EAErB,CAAAQ,SAAA,CACEC,EAACC,GACCC,OAAQX,EACRY,QAAS,IAAMd,GAAoB,GACnCe,OAAQ,IAAMf,GAAoB,GAClCgB,MAAO,CAAEC,SAAUpB,EAAU,KAAO,OAAQqB,UAAW,OAAQC,UAAW,WAE3EtB,GAAWc,EAACvB,GAAegC,UAAU,OAAOC,QAAQ,cAMzD,CAAAX,SAAA,CACEC,EAACW,EAAK,CACJC,eAAgB,CACdR,OAAQ,IAAMf,GAAoB,GAClCc,QAAS,IAAMd,GAAoB,GACnCgB,MAAO,CACLC,SAAUpB,EAAU,KAAO,OAC3BqB,UAAW,OACXC,UAAW,UAGfzB,IAAKA,IAENG,GAAWc,EAACvB,EAAc,CAACgC,UAAU,OAAOC,QAAQ"}
+{"version":3,"file":"ImageDisplay.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/ImageDisplay.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport Skeleton from '@mui/material/Skeleton/Skeleton';\nimport styled from '@mui/material/styles/styled';\n\nimport { AdvancedImage } from '@cloudinary/react';\nimport { Cloudinary, type CloudinaryImage } from '@cloudinary/url-gen';\nimport Imgix from 'react-imgix';\n\ninterface ImageDisplayProps {\n  src: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n}\n\nconst StyledSkeleton = styled(Skeleton)({\n  width: '100%',\n  height: '100%',\n});\n\nconst ImageDisplay: React.FC<ImageDisplayProps> = ({ src, isCloudinaryAsset, cdnCloudName }) => {\n  const [loading, setLoading] = useState(true);\n\n  const handleLoadingChange = (loadingState: boolean): void => {\n    setLoading(loadingState);\n  };\n\n  const cloudinaryImage = useMemo<CloudinaryImage | null>(() => {\n    if (isCloudinaryAsset) {\n      const cloudinaryInstance = new Cloudinary({\n        cloud: {\n          cloudName: cdnCloudName,\n        },\n      });\n      return cloudinaryInstance.image(src);\n    }\n    return null;\n  }, [src, isCloudinaryAsset, cdnCloudName]);\n\n  if (isCloudinaryAsset && cloudinaryImage) {\n    return (\n      <>\n        <AdvancedImage\n          cldImg={cloudinaryImage}\n          onError={() => handleLoadingChange(false)}\n          onLoad={() => handleLoadingChange(false)}\n          style={{ maxWidth: loading ? '0%' : '100%', maxHeight: '100%', objectFit: 'cover' }}\n        />\n        {loading && <StyledSkeleton animation=\"wave\" variant=\"rounded\" />}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <Imgix\n        htmlAttributes={{\n          onLoad: () => handleLoadingChange(false),\n          onError: () => handleLoadingChange(false),\n          style: {\n            maxWidth: loading ? '0%' : '100%',\n            maxHeight: '100%',\n            objectFit: 'cover',\n          },\n        }}\n        src={src}\n      />\n      {loading && <StyledSkeleton animation=\"wave\" variant=\"rounded\" />}\n    </>\n  );\n};\n\nexport default ImageDisplay;\n"],"names":["StyledSkeleton","styled","Skeleton","width","height","ImageDisplay","src","isCloudinaryAsset","cdnCloudName","loading","setLoading","useState","handleLoadingChange","loadingState","cloudinaryImage","useMemo","Cloudinary","cloud","cloudName","image","_jsxs","_Fragment","children","_jsx","AdvancedImage","cldImg","onError","onLoad","style","maxWidth","maxHeight","objectFit","animation","variant","Imgix","htmlAttributes"],"mappings":"sUAeA,MAAMA,EAAiBC,EAAOC,EAAPD,CAAiB,CACtCE,MAAO,OACPC,OAAQ,SAGJC,EAA4C,EAAGC,MAAKC,oBAAmBC,mBAC3E,MAAOC,EAASC,GAAcC,GAAS,GAEjCC,EAAuBC,IAC3BH,EAAWG,IAGPC,EAAkBC,GAAgC,KACtD,GAAIR,EAAmB,CAMrB,OAL2B,IAAIS,EAAW,CACxCC,MAAO,CACLC,UAAWV,KAGWW,MAAMb,EAClC,CACA,OAAO,OACN,CAACA,EAAKC,EAAmBC,IAE5B,OAEIY,EAAAC,EAFAd,GAAqBO,EAErB,CAAAQ,SAAA,CACEC,EAACC,GACCC,OAAQX,EACRY,QAAS,IAAMd,GAAoB,GACnCe,OAAQ,IAAMf,GAAoB,GAClCgB,MAAO,CAAEC,SAAUpB,EAAU,KAAO,OAAQqB,UAAW,OAAQC,UAAW,WAE3EtB,GAAWc,EAACvB,GAAegC,UAAU,OAAOC,QAAQ,cAMzD,CAAAX,SAAA,CACEC,EAACW,EAAK,CACJC,eAAgB,CACdR,OAAQ,IAAMf,GAAoB,GAClCc,QAAS,IAAMd,GAAoB,GACnCgB,MAAO,CACLC,SAAUpB,EAAU,KAAO,OAC3BqB,UAAW,OACXC,UAAW,UAGfzB,IAAKA,IAENG,GAAWc,EAACvB,EAAc,CAACgC,UAAU,OAAOC,QAAQ"}