@flipdish/portal-library 8.0.2 → 8.1.0

package/dist/components/molecules/Rating/index.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import a from"@mui/material/Rating";import{styled as i}from"@mui/material/styles";import r from"@mui/material/Box";import o from"@mui/material/Typography";import{useTranslation as n}from"../../../providers/TranslationProvider.js";import{Link as l}from"../../atoms/Link/index.js";import{StarFilledIcon as m,StarEmptyIcon as s,HeartFilledIcon as d,HeartEmptyIcon as p}from"./icons/index.js";const c=i(r,{shouldForwardProp:t=>"layout"!==t})((({theme:t,layout:e})=>({display:"flex",flexDirection:"horizontal"===e?"row":"column",gap:"horizontal"===e?t.spacing(1):t.spacing(.5),justifyContent:"center"}))),f=i(r)((({theme:t})=>({alignItems:"center",display:"flex",gap:t.spacing(1),justifyContent:"center"}))),h=i(r)((({theme:t})=>({alignItems:"center",display:"flex",gap:t.spacing(.5),justifyContent:"flex-start"}))),u=i(o)((({theme:t})=>({color:t.palette.semantic.text["text-strong"]}))),y=i(o)((({theme:t})=>({color:t.palette.semantic.text["text-weak"]}))),x={heart:{empty:t(p,{"data-testid":"heart-empty-icon"}),filled:t(d,{"data-testid":"heart-filled-icon"})},star:{empty:t(s,{"data-testid":"star-empty-icon"}),filled:t(m,{"data-testid":"star-filled-icon"})}},g=({fdKey:i,layout:r="horizontal",linkFdKey:o,linkHref:m,max:s=5,onChange:d,reviews:p=0,type:g="star",value:v,..._})=>{const{translate:j}=n(),w=x[g].empty,b=x[g].filled,k=p>0&&o&&m;return e(c,{layout:r,children:[e(f,{children:[t(a,{..._,"data-fd":i,emptyIcon:w,getLabelText:t=>j("heart"===g?"number_out_of_total_hearts":"number_out_of_total_stars",{number:t,total:s}),icon:b,max:s,name:i,onChange:(t,e)=>{d?.(t,null!==e?e:0)},precision:.5,readOnly:void 0===d,value:v}),t(u,{"aria-hidden":!0,variant:"b1Strong",children:v?.toFixed(1)})]}),k&&e(h,{children:["vertical"===r&&e(y,{variant:"captionWeak",children:[j("From")," "]}),t(l,{fdKey:o,href:m,size:"caption",tone:"Brand",children:1===p?j("one_review"):j("total_reviews",{total:p})})]})]})};export{g as Rating,g as default};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import a from"@mui/material/Rating";import{styled as r}from"@mui/material/styles";import i from"@mui/material/Box";import o from"@mui/material/Typography";import{useTranslation as n}from"../../../providers/TranslationProvider.js";import{Link as l}from"../../atoms/Link/index.js";import{StarFilledIcon as m,StarEmptyIcon as s,HeartFilledIcon as d,HeartEmptyIcon as p}from"./icons/index.js";const c=r(i,{shouldForwardProp:t=>"layout"!==t})((({theme:t,layout:e})=>({display:"flex",flexDirection:"horizontal"===e?"row":"column",gap:"horizontal"===e?t.spacing(1):t.spacing(.5),justifyContent:"center"}))),f=r(i)((({theme:t})=>({alignItems:"center",display:"flex",gap:t.spacing(1),justifyContent:"center"}))),h=r(i)((({theme:t})=>({alignItems:"center",display:"flex",gap:t.spacing(.5),justifyContent:"flex-start"}))),u=r(o)((({theme:t})=>({color:t.palette.semantic.text["text-strong"]}))),y=r(o)((({theme:t})=>({color:t.palette.semantic.text["text-weak"]}))),x={heart:{empty:t(p,{"data-fd":"heart-empty-icon"}),filled:t(d,{"data-fd":"heart-filled-icon"})},star:{empty:t(s,{"data-fd":"star-empty-icon"}),filled:t(m,{"data-fd":"star-filled-icon"})}},g=({fdKey:r,layout:i="horizontal",linkFdKey:o,linkHref:m,max:s=5,onChange:d,reviews:p=0,type:g="star",value:v,..._})=>{const{translate:j}=n(),w=x[g].empty,b=x[g].filled,k=p>0&&o&&m;return e(c,{layout:i,children:[e(f,{children:[t(a,{..._,"data-fd":r,emptyIcon:w,getLabelText:t=>j("heart"===g?"number_out_of_total_hearts":"number_out_of_total_stars",{number:t,total:s}),icon:b,max:s,name:r,onChange:(t,e)=>{d?.(t,null!==e?e:0)},precision:.5,readOnly:void 0===d,value:v}),t(u,{"aria-hidden":!0,variant:"b1Strong",children:v?.toFixed(1)})]}),k&&e(h,{children:["vertical"===i&&e(y,{variant:"captionWeak",children:[j("From")," "]}),t(l,{fdKey:o,href:m,size:"caption",tone:"Brand",children:1===p?j("one_review"):j("total_reviews",{total:p})})]})]})};export{g as Rating,g as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Rating/index.tsx"],"sourcesContent":["import MuiRating, { type RatingProps as MuiRatingProps } from '@mui/material/Rating';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport Link from '../../atoms/Link';\nimport { HeartEmptyIcon, HeartFilledIcon, StarEmptyIcon, StarFilledIcon } from './icons';\n\ntype BaseRatingProps = Omit<\n  MuiRatingProps,\n  'emptyIcon' | 'icon' | 'onChange' | 'precision' | 'readOnly' | 'value'\n> & {\n  /** The identifier for the rating component */\n  fdKey: string;\n  /** The function to call when the rating value changes */\n  onChange?: (event: React.SyntheticEvent, value: number) => void;\n  /** The type of rating component to use */\n  type?: 'heart' | 'star';\n  /** The value of the rating component */\n  value: number;\n};\n\ninterface NonReviewRatingProps extends BaseRatingProps {\n  /** The layout of the rating component */\n  layout?: 'horizontal' | undefined;\n  /** The identifier for the link component */\n  linkFdKey?: never;\n  /** The href for the link component */\n  linkHref?: never;\n  /** The number of reviews */\n  reviews?: never;\n}\n\ninterface ReviewRatingProps extends BaseRatingProps {\n  /** The layout of the rating component */\n  layout?: 'horizontal' | 'vertical';\n  /** The identifier for the link component */\n  linkFdKey: string;\n  /** The href for the link component */\n  linkHref: string;\n  /** The number of reviews */\n  reviews: number;\n}\n\n/**\n * The props for the Rating component.\n */\nexport type RatingProps = NonReviewRatingProps | ReviewRatingProps;\n\nconst StyledContainer = styled(Box, { shouldForwardProp: (prop) => prop !== 'layout' })<{\n  layout: RatingProps['layout'];\n}>(({ theme, layout }) => ({\n  display: 'flex',\n  flexDirection: layout === 'horizontal' ? 'row' : 'column',\n  gap: layout === 'horizontal' ? theme.spacing(1) : theme.spacing(0.5),\n  justifyContent: 'center',\n}));\n\nconst StyledIconContainer = styled(Box)(({ theme }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  gap: theme.spacing(1),\n  justifyContent: 'center',\n}));\n\nconst StyledReviewsContainer = styled(Box)(({ theme }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  gap: theme.spacing(0.5),\n  justifyContent: 'flex-start',\n}));\n\nconst StyledValueText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-strong'],\n}));\n\nconst StyledReviewsText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst iconMap = {\n  heart: {\n    empty: <HeartEmptyIcon data-testid=\"heart-empty-icon\" />,\n    filled: <HeartFilledIcon data-testid=\"heart-filled-icon\" />,\n  },\n  star: {\n    empty: <StarEmptyIcon data-testid=\"star-empty-icon\" />,\n    filled: <StarFilledIcon data-testid=\"star-filled-icon\" />,\n  },\n};\n\n/**\n * Rating component allows users to provide feedback by rating items with stars.\n *\n * @param props - Additional props to pass to the underlying MUI Rating component\n * @returns A Rating component\n */\nexport const Rating: React.FC<RatingProps> = ({\n  fdKey,\n  layout = 'horizontal',\n  linkFdKey,\n  linkHref,\n  max = 5,\n  onChange,\n  reviews = 0,\n  type = 'star',\n  value,\n  ...props\n}) => {\n  const { translate } = useTranslation();\n\n  const emptyIcon = iconMap[type].empty;\n  const icon = iconMap[type].filled;\n\n  const isReview = reviews > 0 && linkFdKey && linkHref;\n\n  const handleChange = (event: React.SyntheticEvent, value: number | null): void => {\n    if (value !== null) onChange?.(event, value);\n    else onChange?.(event, 0);\n  };\n\n  const getLabelText = (labelValue: number): string => {\n    if (type === 'heart') {\n      return translate('number_out_of_total_hearts', { number: labelValue, total: max });\n    }\n    return translate('number_out_of_total_stars', { number: labelValue, total: max });\n  };\n\n  return (\n    <StyledContainer layout={layout}>\n      <StyledIconContainer>\n        <MuiRating\n          {...props}\n          data-fd={fdKey}\n          emptyIcon={emptyIcon}\n          getLabelText={getLabelText}\n          icon={icon}\n          max={max}\n          name={fdKey}\n          onChange={handleChange}\n          precision={0.5}\n          readOnly={onChange === undefined}\n          value={value}\n        />\n        <StyledValueText aria-hidden variant=\"b1Strong\">\n          {value?.toFixed(1)}\n        </StyledValueText>\n      </StyledIconContainer>\n      {isReview && (\n        <StyledReviewsContainer>\n          {layout === 'vertical' && (\n            <StyledReviewsText variant=\"captionWeak\">{translate('From')} </StyledReviewsText>\n          )}\n          <Link fdKey={linkFdKey} href={linkHref} size=\"caption\" tone=\"Brand\">\n            {reviews === 1 ? translate('one_review') : translate('total_reviews', { total: reviews })}\n          </Link>\n        </StyledReviewsContainer>\n      )}\n    </StyledContainer>\n  );\n};\n\nexport default Rating;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","layout","display","flexDirection","gap","spacing","justifyContent","StyledIconContainer","alignItems","StyledReviewsContainer","StyledValueText","Typography","color","palette","semantic","text","StyledReviewsText","iconMap","heart","empty","_jsx","HeartEmptyIcon","filled","HeartFilledIcon","star","StarEmptyIcon","StarFilledIcon","Rating","fdKey","linkFdKey","linkHref","max","onChange","reviews","type","value","props","translate","useTranslation","emptyIcon","icon","isReview","_jsxs","children","MuiRating","getLabelText","labelValue","number","total","name","event","precision","readOnly","undefined","variant","toFixed","Link","href","size","tone"],"mappings":"ubAmDA,MAAMA,EAAkBC,EAAOC,EAAK,CAAEC,kBAAoBC,GAAkB,WAATA,GAA3CH,EAErB,EAAGI,QAAOC,aAAQ,CACnBC,QAAS,OACTC,cAA0B,eAAXF,EAA0B,MAAQ,SACjDG,IAAgB,eAAXH,EAA0BD,EAAMK,QAAQ,GAAKL,EAAMK,QAAQ,IAChEC,eAAgB,aAGZC,EAAsBX,EAAOC,EAAPD,EAAY,EAAGI,YAAO,CAChDQ,WAAY,SACZN,QAAS,OACTE,IAAKJ,EAAMK,QAAQ,GACnBC,eAAgB,aAGZG,EAAyBb,EAAOC,EAAPD,EAAY,EAAGI,YAAO,CACnDQ,WAAY,SACZN,QAAS,OACTE,IAAKJ,EAAMK,QAAQ,IACnBC,eAAgB,iBAGZI,EAAkBd,EAAOe,EAAPf,EAAmB,EAAGI,YAAO,CACnDY,MAAOZ,EAAMa,QAAQC,SAASC,KAAK,mBAG/BC,EAAoBpB,EAAOe,EAAPf,EAAmB,EAAGI,YAAO,CACrDY,MAAOZ,EAAMa,QAAQC,SAASC,KAAK,iBAG/BE,EAAU,CACdC,MAAO,CACLC,MAAOC,EAACC,EAAc,CAAA,cAAa,qBACnCC,OAAQF,EAACG,EAAe,CAAA,cAAa,uBAEvCC,KAAM,CACJL,MAAOC,EAACK,EAAa,CAAA,cAAa,oBAClCH,OAAQF,EAACM,EAAc,CAAA,cAAa,uBAU3BC,EAAgC,EAC3CC,QACA3B,SAAS,aACT4B,YACAC,WACAC,MAAM,EACNC,WACAC,UAAU,EACVC,OAAO,OACPC,WACGC,MAEH,MAAMC,UAAEA,GAAcC,IAEhBC,EAAYtB,EAAQiB,GAAMf,MAC1BqB,EAAOvB,EAAQiB,GAAMZ,OAErBmB,EAAWR,EAAU,GAAKJ,GAAaC,EAc7C,OACEY,EAAC/C,EAAe,CAACM,OAAQA,EAAM0C,SAAA,CAC7BD,EAACnC,EAAmB,CAAAoC,SAAA,CAClBvB,EAACwB,MACKR,EAAK,UACAR,EACTW,UAAWA,EACXM,aAdcC,GAEXT,EADI,UAATH,EACe,6BAEF,4BAFgC,CAAEa,OAAQD,EAAYE,MAAOjB,IAaxES,KAAMA,EACNT,IAAKA,EACLkB,KAAMrB,EACNI,SAvBa,CAACkB,EAA6Bf,KAC7BH,IAAWkB,EAAjB,OAAVf,EAAkCA,EACf,IAsBjBgB,UAAW,GACXC,cAAuBC,IAAbrB,EACVG,MAAOA,IAETf,EAACV,oBAA4B4C,QAAQ,WAAUX,SAC5CR,GAAOoB,QAAQ,QAGnBd,GACCC,EAACjC,aACa,aAAXR,GACCyC,EAAC1B,EAAiB,CAACsC,QAAQ,cAAaX,SAAA,CAAEN,EAAU,QAAO,OAE7DjB,EAACoC,EAAI,CAAC5B,MAAOC,EAAW4B,KAAM3B,EAAU4B,KAAK,UAAUC,KAAK,QAAOhB,SACpD,IAAZV,EAAgBI,EAAU,cAAgBA,EAAU,gBAAiB,CAAEW,MAAOf"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Rating/index.tsx"],"sourcesContent":["import MuiRating, { type RatingProps as MuiRatingProps } from '@mui/material/Rating';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport Link from '../../atoms/Link';\nimport { HeartEmptyIcon, HeartFilledIcon, StarEmptyIcon, StarFilledIcon } from './icons';\n\ntype BaseRatingProps = Omit<\n  MuiRatingProps,\n  'emptyIcon' | 'icon' | 'onChange' | 'precision' | 'readOnly' | 'value'\n> & {\n  /** The identifier for the rating component */\n  fdKey: string;\n  /** The function to call when the rating value changes */\n  onChange?: (event: React.SyntheticEvent, value: number) => void;\n  /** The type of rating component to use */\n  type?: 'heart' | 'star';\n  /** The value of the rating component */\n  value: number;\n};\n\ninterface NonReviewRatingProps extends BaseRatingProps {\n  /** The layout of the rating component */\n  layout?: 'horizontal' | undefined;\n  /** The identifier for the link component */\n  linkFdKey?: never;\n  /** The href for the link component */\n  linkHref?: never;\n  /** The number of reviews */\n  reviews?: never;\n}\n\ninterface ReviewRatingProps extends BaseRatingProps {\n  /** The layout of the rating component */\n  layout?: 'horizontal' | 'vertical';\n  /** The identifier for the link component */\n  linkFdKey: string;\n  /** The href for the link component */\n  linkHref: string;\n  /** The number of reviews */\n  reviews: number;\n}\n\n/**\n * The props for the Rating component.\n */\nexport type RatingProps = NonReviewRatingProps | ReviewRatingProps;\n\nconst StyledContainer = styled(Box, { shouldForwardProp: (prop) => prop !== 'layout' })<{\n  layout: RatingProps['layout'];\n}>(({ theme, layout }) => ({\n  display: 'flex',\n  flexDirection: layout === 'horizontal' ? 'row' : 'column',\n  gap: layout === 'horizontal' ? theme.spacing(1) : theme.spacing(0.5),\n  justifyContent: 'center',\n}));\n\nconst StyledIconContainer = styled(Box)(({ theme }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  gap: theme.spacing(1),\n  justifyContent: 'center',\n}));\n\nconst StyledReviewsContainer = styled(Box)(({ theme }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  gap: theme.spacing(0.5),\n  justifyContent: 'flex-start',\n}));\n\nconst StyledValueText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-strong'],\n}));\n\nconst StyledReviewsText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst iconMap = {\n  heart: {\n    empty: <HeartEmptyIcon data-fd=\"heart-empty-icon\" />,\n    filled: <HeartFilledIcon data-fd=\"heart-filled-icon\" />,\n  },\n  star: {\n    empty: <StarEmptyIcon data-fd=\"star-empty-icon\" />,\n    filled: <StarFilledIcon data-fd=\"star-filled-icon\" />,\n  },\n};\n\n/**\n * Rating component allows users to provide feedback by rating items with stars.\n *\n * @param props - Additional props to pass to the underlying MUI Rating component\n * @returns A Rating component\n */\nexport const Rating: React.FC<RatingProps> = ({\n  fdKey,\n  layout = 'horizontal',\n  linkFdKey,\n  linkHref,\n  max = 5,\n  onChange,\n  reviews = 0,\n  type = 'star',\n  value,\n  ...props\n}) => {\n  const { translate } = useTranslation();\n\n  const emptyIcon = iconMap[type].empty;\n  const icon = iconMap[type].filled;\n\n  const isReview = reviews > 0 && linkFdKey && linkHref;\n\n  const handleChange = (event: React.SyntheticEvent, value: number | null): void => {\n    if (value !== null) onChange?.(event, value);\n    else onChange?.(event, 0);\n  };\n\n  const getLabelText = (labelValue: number): string => {\n    if (type === 'heart') {\n      return translate('number_out_of_total_hearts', { number: labelValue, total: max });\n    }\n    return translate('number_out_of_total_stars', { number: labelValue, total: max });\n  };\n\n  return (\n    <StyledContainer layout={layout}>\n      <StyledIconContainer>\n        <MuiRating\n          {...props}\n          data-fd={fdKey}\n          emptyIcon={emptyIcon}\n          getLabelText={getLabelText}\n          icon={icon}\n          max={max}\n          name={fdKey}\n          onChange={handleChange}\n          precision={0.5}\n          readOnly={onChange === undefined}\n          value={value}\n        />\n        <StyledValueText aria-hidden variant=\"b1Strong\">\n          {value?.toFixed(1)}\n        </StyledValueText>\n      </StyledIconContainer>\n      {isReview && (\n        <StyledReviewsContainer>\n          {layout === 'vertical' && (\n            <StyledReviewsText variant=\"captionWeak\">{translate('From')} </StyledReviewsText>\n          )}\n          <Link fdKey={linkFdKey} href={linkHref} size=\"caption\" tone=\"Brand\">\n            {reviews === 1 ? translate('one_review') : translate('total_reviews', { total: reviews })}\n          </Link>\n        </StyledReviewsContainer>\n      )}\n    </StyledContainer>\n  );\n};\n\nexport default Rating;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","layout","display","flexDirection","gap","spacing","justifyContent","StyledIconContainer","alignItems","StyledReviewsContainer","StyledValueText","Typography","color","palette","semantic","text","StyledReviewsText","iconMap","heart","empty","_jsx","HeartEmptyIcon","filled","HeartFilledIcon","star","StarEmptyIcon","StarFilledIcon","Rating","fdKey","linkFdKey","linkHref","max","onChange","reviews","type","value","props","translate","useTranslation","emptyIcon","icon","isReview","_jsxs","children","MuiRating","getLabelText","labelValue","number","total","name","event","precision","readOnly","undefined","variant","toFixed","Link","href","size","tone"],"mappings":"ubAmDA,MAAMA,EAAkBC,EAAOC,EAAK,CAAEC,kBAAoBC,GAAkB,WAATA,GAA3CH,EAErB,EAAGI,QAAOC,aAAQ,CACnBC,QAAS,OACTC,cAA0B,eAAXF,EAA0B,MAAQ,SACjDG,IAAgB,eAAXH,EAA0BD,EAAMK,QAAQ,GAAKL,EAAMK,QAAQ,IAChEC,eAAgB,aAGZC,EAAsBX,EAAOC,EAAPD,EAAY,EAAGI,YAAO,CAChDQ,WAAY,SACZN,QAAS,OACTE,IAAKJ,EAAMK,QAAQ,GACnBC,eAAgB,aAGZG,EAAyBb,EAAOC,EAAPD,EAAY,EAAGI,YAAO,CACnDQ,WAAY,SACZN,QAAS,OACTE,IAAKJ,EAAMK,QAAQ,IACnBC,eAAgB,iBAGZI,EAAkBd,EAAOe,EAAPf,EAAmB,EAAGI,YAAO,CACnDY,MAAOZ,EAAMa,QAAQC,SAASC,KAAK,mBAG/BC,EAAoBpB,EAAOe,EAAPf,EAAmB,EAAGI,YAAO,CACrDY,MAAOZ,EAAMa,QAAQC,SAASC,KAAK,iBAG/BE,EAAU,CACdC,MAAO,CACLC,MAAOC,EAACC,EAAc,CAAA,UAAS,qBAC/BC,OAAQF,EAACG,EAAe,CAAA,UAAS,uBAEnCC,KAAM,CACJL,MAAOC,EAACK,EAAa,CAAA,UAAS,oBAC9BH,OAAQF,EAACM,EAAc,CAAA,UAAS,uBAUvBC,EAAgC,EAC3CC,QACA3B,SAAS,aACT4B,YACAC,WACAC,MAAM,EACNC,WACAC,UAAU,EACVC,OAAO,OACPC,WACGC,MAEH,MAAMC,UAAEA,GAAcC,IAEhBC,EAAYtB,EAAQiB,GAAMf,MAC1BqB,EAAOvB,EAAQiB,GAAMZ,OAErBmB,EAAWR,EAAU,GAAKJ,GAAaC,EAc7C,OACEY,EAAC/C,EAAe,CAACM,OAAQA,EAAM0C,SAAA,CAC7BD,EAACnC,EAAmB,CAAAoC,SAAA,CAClBvB,EAACwB,MACKR,EAAK,UACAR,EACTW,UAAWA,EACXM,aAdcC,GAEXT,EADI,UAATH,EACe,6BAEF,4BAFgC,CAAEa,OAAQD,EAAYE,MAAOjB,IAaxES,KAAMA,EACNT,IAAKA,EACLkB,KAAMrB,EACNI,SAvBa,CAACkB,EAA6Bf,KAC7BH,IAAWkB,EAAjB,OAAVf,EAAkCA,EACf,IAsBjBgB,UAAW,GACXC,cAAuBC,IAAbrB,EACVG,MAAOA,IAETf,EAACV,oBAA4B4C,QAAQ,WAAUX,SAC5CR,GAAOoB,QAAQ,QAGnBd,GACCC,EAACjC,aACa,aAAXR,GACCyC,EAAC1B,EAAiB,CAACsC,QAAQ,cAAaX,SAAA,CAAEN,EAAU,QAAO,OAE7DjB,EAACoC,EAAI,CAAC5B,MAAOC,EAAW4B,KAAM3B,EAAU4B,KAAK,UAAUC,KAAK,QAAOhB,SACpD,IAAZV,EAAgBI,EAAU,cAAgBA,EAAU,gBAAiB,CAAEW,MAAOf"}

package/dist/components/molecules/TextBlock/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("@mui/material/styles"),i=require("@mui/material/Box"),n=require("../../atoms/IconContainer/index.cjs.js"),r=require("../../atoms/Link/index.cjs.js"),a=require("@mui/material/Typography");const l=t.styled(i,{shouldForwardProp:e=>!["align"].includes(e)})((({theme:e,align:t="left"})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),alignItems:"center"===t?"center":"flex-start",textAlign:"center"===t?"center":"left"}))),s=t.styled(i)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(1),width:"100%"}))),o=({className:t,icon:i=!0,iconAriaLabel:o="Icon",heading:c=!0,secondaryText:d=!0,textLink:x=!0,headingValue:p,secondaryTextValue:m,iconComponent:u,textLinkContent:g="Label",textLinkHref:h,align:f="left",fdKey:y})=>{const k=h&&""!==h.trim()&&"#"!==h;return(void 0).DEV&&x&&!k&&console.warn('TextBlock: textLink is enabled but textLinkHref is missing, empty, or set to "#". The link will not be rendered. Please provide a valid href when textLink is true.'),e.jsxs(l,{align:f,className:t,"data-fd":y,"data-testid":y,children:[i&&u&&e.jsx(n,{ariaLabel:o,icon:u,style:"filled",tone:"brand"}),(c||d)&&e.jsxs(s,{children:[c&&e.jsx(a,{sx:e=>({color:e.palette.semantic?.text?.["text-strong"]||e.palette.text.primary,margin:0}),variant:"h3Strong",children:p}),d&&e.jsx(a,{sx:e=>({color:e.palette.semantic?.text?.["text-weak"]||e.palette.text.secondary,margin:0}),variant:"b1Weak",children:m})]}),x&&k&&e.jsx(r.Link,{fdKey:y?`${y}-link`:"text-block-link",href:h,size:"body",sx:{whiteSpace:"nowrap"},tone:"Brand",underline:!0,weight:"bold",children:g})]})};exports.TextBlock=o,exports.default=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("@mui/material/styles"),i=require("@mui/material/Box"),n=require("../../atoms/IconContainer/index.cjs.js"),r=require("../../atoms/Link/index.cjs.js"),a=require("@mui/material/Typography");const l=t.styled(i,{shouldForwardProp:e=>!["align"].includes(e)})((({theme:e,align:t="left"})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),alignItems:"center"===t?"center":"flex-start",textAlign:"center"===t?"center":"left"}))),s=t.styled(i)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(1),width:"100%"}))),o=({className:t,icon:i=!0,iconAriaLabel:o="Icon",heading:c=!0,secondaryText:d=!0,textLink:x=!0,headingValue:p,secondaryTextValue:m,iconComponent:u,textLinkContent:g="Label",textLinkHref:h,align:f="left",fdKey:y})=>{const k=h&&""!==h.trim()&&"#"!==h;return(void 0).DEV&&x&&!k&&console.warn('TextBlock: textLink is enabled but textLinkHref is missing, empty, or set to "#". The link will not be rendered. Please provide a valid href when textLink is true.'),e.jsxs(l,{align:f,className:t,"data-fd":y,children:[i&&u&&e.jsx(n,{ariaLabel:o,icon:u,style:"filled",tone:"brand"}),(c||d)&&e.jsxs(s,{children:[c&&e.jsx(a,{sx:e=>({color:e.palette.semantic?.text?.["text-strong"]||e.palette.text.primary,margin:0}),variant:"h3Strong",children:p}),d&&e.jsx(a,{sx:e=>({color:e.palette.semantic?.text?.["text-weak"]||e.palette.text.secondary,margin:0}),variant:"b1Weak",children:m})]}),x&&k&&e.jsx(r.Link,{fdKey:y?`${y}-link`:"text-block-link",href:h,size:"body",sx:{whiteSpace:"nowrap"},tone:"Brand",underline:!0,weight:"bold",children:g})]})};exports.TextBlock=o,exports.default=o;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/TextBlock/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/TextBlock/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport IconContainer from '@fd/components/atoms/IconContainer';\nimport Link from '@fd/components/atoms/Link';\nimport Typography from '@fd/components/atoms/Typography';\n\n/**\n * Props for the TextBlock component.\n * Displays a flexible content block with optional icon, heading, secondary text, and link.\n */\nexport interface TextBlockProps {\n    /** Optional CSS class name for custom styling */\n    className?: string;\n    /** Controls visibility of the icon */\n    icon?: boolean;\n    /** Accessible label for the icon (used by screen readers) */\n    iconAriaLabel?: string;\n    /** Controls visibility of the heading */\n    heading?: boolean;\n    /** Controls visibility of the secondary text */\n    secondaryText?: boolean;\n    /** Controls visibility of the text link */\n    textLink?: boolean;\n    /** Text content for the heading */\n    headingValue?: string;\n    /** Text content for the secondary text */\n    secondaryTextValue?: string;\n    /** React node to render as the icon */\n    iconComponent?: React.ReactNode;\n    /** Text content for the link */\n    textLinkContent?: string;\n    /** URL for the text link */\n    textLinkHref?: string;\n    /** Horizontal alignment of content */\n    align?: 'center' | 'left';\n    /** Unique identifier for data-fd and data-testid attributes */\n    fdKey?: string;\n}\n\nconst StyledContainer = styled(Box, {\n    shouldForwardProp: (prop) => !['align'].includes(prop as string),\n})<{ align?: 'center' | 'left' }>(({ theme, align = 'left' }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(2),\n    paddingTop: theme.spacing(2),\n    alignItems: align === 'center' ? 'center' : 'flex-start',\n    textAlign: align === 'center' ? 'center' : 'left',\n}));\n\nconst StyledTextContainer = styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1),\n    width: '100%',\n}));\n\n/**\n * TextBlock component for displaying flexible content blocks with optional elements.\n *\n * This component provides a flexible layout for displaying content with optional icon,\n * heading, secondary text, and link elements. All elements can be individually controlled\n * for visibility and content, making it suitable for various use cases like feature cards,\n * informational blocks, or call-to-action sections.\n *\n * @param props - Component props\n * @returns A styled content block with optional icon, heading, secondary text, and link\n */\nexport const TextBlock: React.FC<TextBlockProps> = ({\n    className,\n    icon = true,\n    iconAriaLabel = 'Icon',\n    heading = true,\n    secondaryText = true,\n    textLink = true,\n    headingValue,\n    secondaryTextValue,\n    iconComponent,\n    textLinkContent = 'Label',\n    textLinkHref,\n    align = 'left',\n    fdKey,\n}) => {\n    // Validate textLinkHref when textLink is enabled\n    const isValidHref = textLinkHref && textLinkHref.trim() !== '' && textLinkHref !== '#';\n\n    if (import.meta.env.DEV && textLink && !isValidHref) {\n        console.warn(\n            'TextBlock: textLink is enabled but textLinkHref is missing, empty, or set to \"#\". ' +\n            'The link will not be rendered. Please provide a valid href when textLink is true.'\n        );\n    }\n\n    return (\n        <StyledContainer align={align} className={className} data-fd={fdKey} data-testid={fdKey}>\n            {icon && iconComponent && (\n                <IconContainer\n                    ariaLabel={iconAriaLabel}\n                    icon={iconComponent}\n                    style=\"filled\"\n                    tone=\"brand\"\n                />\n            )}\n\n            {(heading || secondaryText) && (\n                <StyledTextContainer>\n                    {heading && (\n                        <Typography\n                            sx={(theme) => ({\n                                color:\n                                    theme.palette.semantic?.text?.['text-strong'] ||\n                                    theme.palette.text.primary,\n                                margin: 0,\n                            })}\n                            variant=\"h3Strong\"\n                        >\n                            {headingValue}\n                        </Typography>\n                    )}\n                    {secondaryText && (\n                        <Typography\n                            sx={(theme) => ({\n                                color:\n                                    theme.palette.semantic?.text?.['text-weak'] ||\n                                    theme.palette.text.secondary,\n                                margin: 0,\n                            })}\n                            variant=\"b1Weak\"\n                        >\n                            {secondaryTextValue}\n                        </Typography>\n                    )}\n                </StyledTextContainer>\n            )}\n\n            {textLink && isValidHref && (\n                <Link\n                    fdKey={fdKey ? `${fdKey}-link` : 'text-block-link'}\n                    href={textLinkHref}\n                    size=\"body\"\n                    sx={{ whiteSpace: 'nowrap' }}\n                    tone=\"Brand\"\n                    underline={true}\n                    weight=\"bold\"\n                >\n                    {textLinkContent}\n                </Link>\n            )}\n        </StyledContainer>\n    );\n};\n\nexport default TextBlock;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","includes","theme","align","display","flexDirection","gap","spacing","paddingTop","alignItems","textAlign","StyledTextContainer","width","TextBlock","className","icon","iconAriaLabel","heading","secondaryText","textLink","headingValue","secondaryTextValue","iconComponent","textLinkContent","textLinkHref","fdKey","isValidHref","trim","undefined","DEV","console","warn","_jsxs","children","_jsx","IconContainer","ariaLabel","style","tone","Typography","sx","color","palette","semantic","text","primary","margin","variant","secondary","Link","href","size","whiteSpace","underline","weight"],"mappings":"kUA0CA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAChCC,kBAAoBC,IAAU,CAAC,SAASC,SAASD,IAD7BH,EAEU,EAAGK,QAAOC,QAAQ,WAAQ,CACxDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,GACnBC,WAAYN,EAAMK,QAAQ,GAC1BE,WAAsB,WAAVN,EAAqB,SAAW,aAC5CO,UAAqB,WAAVP,EAAqB,SAAW,WAGzCQ,EAAsBd,EAAAA,OAAOC,EAAPD,EAAY,EAAGK,YAAO,CAC9CE,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,GACnBK,MAAO,WAcEC,EAAsC,EAC/CC,YACAC,QAAO,EACPC,gBAAgB,OAChBC,WAAU,EACVC,iBAAgB,EAChBC,YAAW,EACXC,eACAC,qBACAC,gBACAC,kBAAkB,QAClBC,eACArB,QAAQ,OACRsB,YAGA,MAAMC,EAAcF,GAAwC,KAAxBA,EAAaG,QAAkC,MAAjBH,EASlE,YAPII,GAAgBC,KAAOV,IAAaO,GACpCI,QAAQC,KACJ,uKAMJC,EAAAA,KAACpC,EAAe,CAACO,MAAOA,EAAOW,UAAWA,EAAS,UAAWW,EAAK,cAAeA,EAAKQ,SAAA,CAClFlB,GAAQO,GACLY,EAAAA,IAACC,EAAa,CACVC,UAAWpB,EACXD,KAAMO,EACNe,MAAM,SACNC,KAAK,WAIXrB,GAAWC,IACTc,EAAAA,KAACrB,EAAmB,CAAAsB,SAAA,CACfhB,GACGiB,EAAAA,IAACK,EAAU,CACPC,GAAKtC,IAAK,CACNuC,MACIvC,EAAMwC,QAAQC,UAAUC,OAAO,gBAC/B1C,EAAMwC,QAAQE,KAAKC,QACvBC,OAAQ,IAEZC,QAAQ,oBAEP3B,IAGRF,GACGgB,EAAAA,IAACK,GACGC,GAAKtC,IAAK,CACNuC,MACIvC,EAAMwC,QAAQC,UAAUC,OAAO,cAC/B1C,EAAMwC,QAAQE,KAAKI,UACvBF,OAAQ,IAEZC,QAAQ,SAAQd,SAEfZ,OAMhBF,GAAYO,GACTQ,EAAAA,IAACe,EAAAA,KAAI,CACDxB,MAAOA,EAAQ,GAAGA,SAAe,kBACjCyB,KAAM1B,EACN2B,KAAK,OACLX,GAAI,CAAEY,WAAY,UAClBd,KAAK,QACLe,WAAW,EACXC,OAAO,OAAMrB,SAEZV"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/TextBlock/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport IconContainer from '@fd/components/atoms/IconContainer';\nimport Link from '@fd/components/atoms/Link';\nimport Typography from '@fd/components/atoms/Typography';\n\n/**\n * Props for the TextBlock component.\n * Displays a flexible content block with optional icon, heading, secondary text, and link.\n */\nexport interface TextBlockProps {\n  /** Optional CSS class name for custom styling */\n  className?: string;\n  /** Controls visibility of the icon */\n  icon?: boolean;\n  /** Accessible label for the icon (used by screen readers) */\n  iconAriaLabel?: string;\n  /** Controls visibility of the heading */\n  heading?: boolean;\n  /** Controls visibility of the secondary text */\n  secondaryText?: boolean;\n  /** Controls visibility of the text link */\n  textLink?: boolean;\n  /** Text content for the heading */\n  headingValue?: string;\n  /** Text content for the secondary text */\n  secondaryTextValue?: string;\n  /** React node to render as the icon */\n  iconComponent?: React.ReactNode;\n  /** Text content for the link */\n  textLinkContent?: string;\n  /** URL for the text link */\n  textLinkHref?: string;\n  /** Horizontal alignment of content */\n  align?: 'center' | 'left';\n  /** Unique identifier for data-fd attribute */\n  fdKey?: string;\n}\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['align'].includes(prop as string),\n})<{ align?: 'center' | 'left' }>(({ theme, align = 'left' }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  alignItems: align === 'center' ? 'center' : 'flex-start',\n  textAlign: align === 'center' ? 'center' : 'left',\n}));\n\nconst StyledTextContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n  width: '100%',\n}));\n\n/**\n * TextBlock component for displaying flexible content blocks with optional elements.\n *\n * This component provides a flexible layout for displaying content with optional icon,\n * heading, secondary text, and link elements. All elements can be individually controlled\n * for visibility and content, making it suitable for various use cases like feature cards,\n * informational blocks, or call-to-action sections.\n *\n * @param props - Component props\n * @returns A styled content block with optional icon, heading, secondary text, and link\n */\nexport const TextBlock: React.FC<TextBlockProps> = ({\n  className,\n  icon = true,\n  iconAriaLabel = 'Icon',\n  heading = true,\n  secondaryText = true,\n  textLink = true,\n  headingValue,\n  secondaryTextValue,\n  iconComponent,\n  textLinkContent = 'Label',\n  textLinkHref,\n  align = 'left',\n  fdKey,\n}) => {\n  // Validate textLinkHref when textLink is enabled\n  const isValidHref = textLinkHref && textLinkHref.trim() !== '' && textLinkHref !== '#';\n\n  if (import.meta.env.DEV && textLink && !isValidHref) {\n    console.warn(\n      'TextBlock: textLink is enabled but textLinkHref is missing, empty, or set to \"#\". ' +\n        'The link will not be rendered. Please provide a valid href when textLink is true.',\n    );\n  }\n\n  return (\n    <StyledContainer align={align} className={className} data-fd={fdKey}>\n      {icon && iconComponent && (\n        <IconContainer ariaLabel={iconAriaLabel} icon={iconComponent} style=\"filled\" tone=\"brand\" />\n      )}\n\n      {(heading || secondaryText) && (\n        <StyledTextContainer>\n          {heading && (\n            <Typography\n              sx={(theme) => ({\n                color: theme.palette.semantic?.text?.['text-strong'] || theme.palette.text.primary,\n                margin: 0,\n              })}\n              variant=\"h3Strong\"\n            >\n              {headingValue}\n            </Typography>\n          )}\n          {secondaryText && (\n            <Typography\n              sx={(theme) => ({\n                color: theme.palette.semantic?.text?.['text-weak'] || theme.palette.text.secondary,\n                margin: 0,\n              })}\n              variant=\"b1Weak\"\n            >\n              {secondaryTextValue}\n            </Typography>\n          )}\n        </StyledTextContainer>\n      )}\n\n      {textLink && isValidHref && (\n        <Link\n          fdKey={fdKey ? `${fdKey}-link` : 'text-block-link'}\n          href={textLinkHref}\n          size=\"body\"\n          sx={{ whiteSpace: 'nowrap' }}\n          tone=\"Brand\"\n          underline={true}\n          weight=\"bold\"\n        >\n          {textLinkContent}\n        </Link>\n      )}\n    </StyledContainer>\n  );\n};\n\nexport default TextBlock;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","includes","theme","align","display","flexDirection","gap","spacing","paddingTop","alignItems","textAlign","StyledTextContainer","width","TextBlock","className","icon","iconAriaLabel","heading","secondaryText","textLink","headingValue","secondaryTextValue","iconComponent","textLinkContent","textLinkHref","fdKey","isValidHref","trim","undefined","DEV","console","warn","_jsxs","children","_jsx","IconContainer","ariaLabel","style","tone","Typography","sx","color","palette","semantic","text","primary","margin","variant","secondary","Link","href","size","whiteSpace","underline","weight"],"mappings":"kUA0CA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAClCC,kBAAoBC,IAAU,CAAC,SAASC,SAASD,IAD3BH,EAEU,EAAGK,QAAOC,QAAQ,WAAQ,CAC1DC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,GACnBC,WAAYN,EAAMK,QAAQ,GAC1BE,WAAsB,WAAVN,EAAqB,SAAW,aAC5CO,UAAqB,WAAVP,EAAqB,SAAW,WAGvCQ,EAAsBd,EAAAA,OAAOC,EAAPD,EAAY,EAAGK,YAAO,CAChDE,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,GACnBK,MAAO,WAcIC,EAAsC,EACjDC,YACAC,QAAO,EACPC,gBAAgB,OAChBC,WAAU,EACVC,iBAAgB,EAChBC,YAAW,EACXC,eACAC,qBACAC,gBACAC,kBAAkB,QAClBC,eACArB,QAAQ,OACRsB,YAGA,MAAMC,EAAcF,GAAwC,KAAxBA,EAAaG,QAAkC,MAAjBH,EASlE,YAPII,GAAgBC,KAAOV,IAAaO,GACtCI,QAAQC,KACN,uKAMFC,EAAAA,KAACpC,EAAe,CAACO,MAAOA,EAAOW,UAAWA,EAAS,UAAWW,EAAKQ,SAAA,CAChElB,GAAQO,GACPY,EAAAA,IAACC,EAAa,CAACC,UAAWpB,EAAeD,KAAMO,EAAee,MAAM,SAASC,KAAK,WAGlFrB,GAAWC,IACXc,EAAAA,KAACrB,EAAmB,CAAAsB,SAAA,CACjBhB,GACCiB,EAAAA,IAACK,EAAU,CACTC,GAAKtC,IAAK,CACRuC,MAAOvC,EAAMwC,QAAQC,UAAUC,OAAO,gBAAkB1C,EAAMwC,QAAQE,KAAKC,QAC3EC,OAAQ,IAEVC,QAAQ,oBAEP3B,IAGJF,GACCgB,EAAAA,IAACK,GACCC,GAAKtC,IAAK,CACRuC,MAAOvC,EAAMwC,QAAQC,UAAUC,OAAO,cAAgB1C,EAAMwC,QAAQE,KAAKI,UACzEF,OAAQ,IAEVC,QAAQ,SAAQd,SAEfZ,OAMRF,GAAYO,GACXQ,EAAAA,IAACe,EAAAA,KAAI,CACHxB,MAAOA,EAAQ,GAAGA,SAAe,kBACjCyB,KAAM1B,EACN2B,KAAK,OACLX,GAAI,CAAEY,WAAY,UAClBd,KAAK,QACLe,WAAW,EACXC,OAAO,OAAMrB,SAEZV"}

package/dist/components/molecules/TextBlock/index.d.ts

@@ -29,7 +29,7 @@ interface TextBlockProps {
     textLinkHref?: string;
     /** Horizontal alignment of content */
     align?: 'center' | 'left';
-    /** Unique identifier for data-fd and data-testid attributes */
+    /** Unique identifier for data-fd attribute */
     fdKey?: string;
 }
 /**

package/dist/components/molecules/TextBlock/index.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import{styled as i}from"@mui/material/styles";import n from"@mui/material/Box";import a from"../../atoms/IconContainer/index.js";import{Link as r}from"../../atoms/Link/index.js";import o from"@mui/material/Typography";const l=i(n,{shouldForwardProp:e=>!["align"].includes(e)})((({theme:e,align:t="left"})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),alignItems:"center"===t?"center":"flex-start",textAlign:"center"===t?"center":"left"}))),s=i(n)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(1),width:"100%"}))),c=({className:i,icon:n=!0,iconAriaLabel:c="Icon",heading:m=!0,secondaryText:d=!0,textLink:p=!0,headingValue:x,secondaryTextValue:f,iconComponent:g,textLinkContent:h="Label",textLinkHref:u,align:k="left",fdKey:y})=>{const b=u&&""!==u.trim()&&"#"!==u;return import.meta.env.DEV&&p&&!b&&console.warn('TextBlock: textLink is enabled but textLinkHref is missing, empty, or set to "#". The link will not be rendered. Please provide a valid href when textLink is true.'),e(l,{align:k,className:i,"data-fd":y,"data-testid":y,children:[n&&g&&t(a,{ariaLabel:c,icon:g,style:"filled",tone:"brand"}),(m||d)&&e(s,{children:[m&&t(o,{sx:e=>({color:e.palette.semantic?.text?.["text-strong"]||e.palette.text.primary,margin:0}),variant:"h3Strong",children:x}),d&&t(o,{sx:e=>({color:e.palette.semantic?.text?.["text-weak"]||e.palette.text.secondary,margin:0}),variant:"b1Weak",children:f})]}),p&&b&&t(r,{fdKey:y?`${y}-link`:"text-block-link",href:u,size:"body",sx:{whiteSpace:"nowrap"},tone:"Brand",underline:!0,weight:"bold",children:h})]})};export{c as TextBlock,c as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import{styled as i}from"@mui/material/styles";import n from"@mui/material/Box";import a from"../../atoms/IconContainer/index.js";import{Link as r}from"../../atoms/Link/index.js";import o from"@mui/material/Typography";const l=i(n,{shouldForwardProp:e=>!["align"].includes(e)})((({theme:e,align:t="left"})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),alignItems:"center"===t?"center":"flex-start",textAlign:"center"===t?"center":"left"}))),s=i(n)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(1),width:"100%"}))),c=({className:i,icon:n=!0,iconAriaLabel:c="Icon",heading:m=!0,secondaryText:d=!0,textLink:p=!0,headingValue:x,secondaryTextValue:f,iconComponent:g,textLinkContent:h="Label",textLinkHref:u,align:k="left",fdKey:y})=>{const b=u&&""!==u.trim()&&"#"!==u;return import.meta.env.DEV&&p&&!b&&console.warn('TextBlock: textLink is enabled but textLinkHref is missing, empty, or set to "#". The link will not be rendered. Please provide a valid href when textLink is true.'),e(l,{align:k,className:i,"data-fd":y,children:[n&&g&&t(a,{ariaLabel:c,icon:g,style:"filled",tone:"brand"}),(m||d)&&e(s,{children:[m&&t(o,{sx:e=>({color:e.palette.semantic?.text?.["text-strong"]||e.palette.text.primary,margin:0}),variant:"h3Strong",children:x}),d&&t(o,{sx:e=>({color:e.palette.semantic?.text?.["text-weak"]||e.palette.text.secondary,margin:0}),variant:"b1Weak",children:f})]}),p&&b&&t(r,{fdKey:y?`${y}-link`:"text-block-link",href:u,size:"body",sx:{whiteSpace:"nowrap"},tone:"Brand",underline:!0,weight:"bold",children:h})]})};export{c as TextBlock,c as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/TextBlock/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport IconContainer from '@fd/components/atoms/IconContainer';\nimport Link from '@fd/components/atoms/Link';\nimport Typography from '@fd/components/atoms/Typography';\n\n/**\n * Props for the TextBlock component.\n * Displays a flexible content block with optional icon, heading, secondary text, and link.\n */\nexport interface TextBlockProps {\n    /** Optional CSS class name for custom styling */\n    className?: string;\n    /** Controls visibility of the icon */\n    icon?: boolean;\n    /** Accessible label for the icon (used by screen readers) */\n    iconAriaLabel?: string;\n    /** Controls visibility of the heading */\n    heading?: boolean;\n    /** Controls visibility of the secondary text */\n    secondaryText?: boolean;\n    /** Controls visibility of the text link */\n    textLink?: boolean;\n    /** Text content for the heading */\n    headingValue?: string;\n    /** Text content for the secondary text */\n    secondaryTextValue?: string;\n    /** React node to render as the icon */\n    iconComponent?: React.ReactNode;\n    /** Text content for the link */\n    textLinkContent?: string;\n    /** URL for the text link */\n    textLinkHref?: string;\n    /** Horizontal alignment of content */\n    align?: 'center' | 'left';\n    /** Unique identifier for data-fd and data-testid attributes */\n    fdKey?: string;\n}\n\nconst StyledContainer = styled(Box, {\n    shouldForwardProp: (prop) => !['align'].includes(prop as string),\n})<{ align?: 'center' | 'left' }>(({ theme, align = 'left' }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(2),\n    paddingTop: theme.spacing(2),\n    alignItems: align === 'center' ? 'center' : 'flex-start',\n    textAlign: align === 'center' ? 'center' : 'left',\n}));\n\nconst StyledTextContainer = styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1),\n    width: '100%',\n}));\n\n/**\n * TextBlock component for displaying flexible content blocks with optional elements.\n *\n * This component provides a flexible layout for displaying content with optional icon,\n * heading, secondary text, and link elements. All elements can be individually controlled\n * for visibility and content, making it suitable for various use cases like feature cards,\n * informational blocks, or call-to-action sections.\n *\n * @param props - Component props\n * @returns A styled content block with optional icon, heading, secondary text, and link\n */\nexport const TextBlock: React.FC<TextBlockProps> = ({\n    className,\n    icon = true,\n    iconAriaLabel = 'Icon',\n    heading = true,\n    secondaryText = true,\n    textLink = true,\n    headingValue,\n    secondaryTextValue,\n    iconComponent,\n    textLinkContent = 'Label',\n    textLinkHref,\n    align = 'left',\n    fdKey,\n}) => {\n    // Validate textLinkHref when textLink is enabled\n    const isValidHref = textLinkHref && textLinkHref.trim() !== '' && textLinkHref !== '#';\n\n    if (import.meta.env.DEV && textLink && !isValidHref) {\n        console.warn(\n            'TextBlock: textLink is enabled but textLinkHref is missing, empty, or set to \"#\". ' +\n            'The link will not be rendered. Please provide a valid href when textLink is true.'\n        );\n    }\n\n    return (\n        <StyledContainer align={align} className={className} data-fd={fdKey} data-testid={fdKey}>\n            {icon && iconComponent && (\n                <IconContainer\n                    ariaLabel={iconAriaLabel}\n                    icon={iconComponent}\n                    style=\"filled\"\n                    tone=\"brand\"\n                />\n            )}\n\n            {(heading || secondaryText) && (\n                <StyledTextContainer>\n                    {heading && (\n                        <Typography\n                            sx={(theme) => ({\n                                color:\n                                    theme.palette.semantic?.text?.['text-strong'] ||\n                                    theme.palette.text.primary,\n                                margin: 0,\n                            })}\n                            variant=\"h3Strong\"\n                        >\n                            {headingValue}\n                        </Typography>\n                    )}\n                    {secondaryText && (\n                        <Typography\n                            sx={(theme) => ({\n                                color:\n                                    theme.palette.semantic?.text?.['text-weak'] ||\n                                    theme.palette.text.secondary,\n                                margin: 0,\n                            })}\n                            variant=\"b1Weak\"\n                        >\n                            {secondaryTextValue}\n                        </Typography>\n                    )}\n                </StyledTextContainer>\n            )}\n\n            {textLink && isValidHref && (\n                <Link\n                    fdKey={fdKey ? `${fdKey}-link` : 'text-block-link'}\n                    href={textLinkHref}\n                    size=\"body\"\n                    sx={{ whiteSpace: 'nowrap' }}\n                    tone=\"Brand\"\n                    underline={true}\n                    weight=\"bold\"\n                >\n                    {textLinkContent}\n                </Link>\n            )}\n        </StyledContainer>\n    );\n};\n\nexport default TextBlock;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","includes","theme","align","display","flexDirection","gap","spacing","paddingTop","alignItems","textAlign","StyledTextContainer","width","TextBlock","className","icon","iconAriaLabel","heading","secondaryText","textLink","headingValue","secondaryTextValue","iconComponent","textLinkContent","textLinkHref","fdKey","isValidHref","trim","env","DEV","console","warn","_jsxs","children","_jsx","IconContainer","ariaLabel","style","tone","Typography","sx","color","palette","semantic","text","primary","margin","variant","secondary","Link","href","size","whiteSpace","underline","weight"],"mappings":"0RA0CA,MAAMA,EAAkBC,EAAOC,EAAK,CAChCC,kBAAoBC,IAAU,CAAC,SAASC,SAASD,IAD7BH,EAEU,EAAGK,QAAOC,QAAQ,WAAQ,CACxDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,GACnBC,WAAYN,EAAMK,QAAQ,GAC1BE,WAAsB,WAAVN,EAAqB,SAAW,aAC5CO,UAAqB,WAAVP,EAAqB,SAAW,WAGzCQ,EAAsBd,EAAOC,EAAPD,EAAY,EAAGK,YAAO,CAC9CE,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,GACnBK,MAAO,WAcEC,EAAsC,EAC/CC,YACAC,QAAO,EACPC,gBAAgB,OAChBC,WAAU,EACVC,iBAAgB,EAChBC,YAAW,EACXC,eACAC,qBACAC,gBACAC,kBAAkB,QAClBC,eACArB,QAAQ,OACRsB,YAGA,MAAMC,EAAcF,GAAwC,KAAxBA,EAAaG,QAAkC,MAAjBH,EASlE,mBAPgBI,IAAIC,KAAOV,IAAaO,GACpCI,QAAQC,KACJ,uKAMJC,EAACpC,EAAe,CAACO,MAAOA,EAAOW,UAAWA,EAAS,UAAWW,EAAK,cAAeA,EAAKQ,SAAA,CAClFlB,GAAQO,GACLY,EAACC,EAAa,CACVC,UAAWpB,EACXD,KAAMO,EACNe,MAAM,SACNC,KAAK,WAIXrB,GAAWC,IACTc,EAACrB,EAAmB,CAAAsB,SAAA,CACfhB,GACGiB,EAACK,EAAU,CACPC,GAAKtC,IAAK,CACNuC,MACIvC,EAAMwC,QAAQC,UAAUC,OAAO,gBAC/B1C,EAAMwC,QAAQE,KAAKC,QACvBC,OAAQ,IAEZC,QAAQ,oBAEP3B,IAGRF,GACGgB,EAACK,GACGC,GAAKtC,IAAK,CACNuC,MACIvC,EAAMwC,QAAQC,UAAUC,OAAO,cAC/B1C,EAAMwC,QAAQE,KAAKI,UACvBF,OAAQ,IAEZC,QAAQ,SAAQd,SAEfZ,OAMhBF,GAAYO,GACTQ,EAACe,EAAI,CACDxB,MAAOA,EAAQ,GAAGA,SAAe,kBACjCyB,KAAM1B,EACN2B,KAAK,OACLX,GAAI,CAAEY,WAAY,UAClBd,KAAK,QACLe,WAAW,EACXC,OAAO,OAAMrB,SAEZV"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/TextBlock/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport IconContainer from '@fd/components/atoms/IconContainer';\nimport Link from '@fd/components/atoms/Link';\nimport Typography from '@fd/components/atoms/Typography';\n\n/**\n * Props for the TextBlock component.\n * Displays a flexible content block with optional icon, heading, secondary text, and link.\n */\nexport interface TextBlockProps {\n  /** Optional CSS class name for custom styling */\n  className?: string;\n  /** Controls visibility of the icon */\n  icon?: boolean;\n  /** Accessible label for the icon (used by screen readers) */\n  iconAriaLabel?: string;\n  /** Controls visibility of the heading */\n  heading?: boolean;\n  /** Controls visibility of the secondary text */\n  secondaryText?: boolean;\n  /** Controls visibility of the text link */\n  textLink?: boolean;\n  /** Text content for the heading */\n  headingValue?: string;\n  /** Text content for the secondary text */\n  secondaryTextValue?: string;\n  /** React node to render as the icon */\n  iconComponent?: React.ReactNode;\n  /** Text content for the link */\n  textLinkContent?: string;\n  /** URL for the text link */\n  textLinkHref?: string;\n  /** Horizontal alignment of content */\n  align?: 'center' | 'left';\n  /** Unique identifier for data-fd attribute */\n  fdKey?: string;\n}\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['align'].includes(prop as string),\n})<{ align?: 'center' | 'left' }>(({ theme, align = 'left' }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  alignItems: align === 'center' ? 'center' : 'flex-start',\n  textAlign: align === 'center' ? 'center' : 'left',\n}));\n\nconst StyledTextContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n  width: '100%',\n}));\n\n/**\n * TextBlock component for displaying flexible content blocks with optional elements.\n *\n * This component provides a flexible layout for displaying content with optional icon,\n * heading, secondary text, and link elements. All elements can be individually controlled\n * for visibility and content, making it suitable for various use cases like feature cards,\n * informational blocks, or call-to-action sections.\n *\n * @param props - Component props\n * @returns A styled content block with optional icon, heading, secondary text, and link\n */\nexport const TextBlock: React.FC<TextBlockProps> = ({\n  className,\n  icon = true,\n  iconAriaLabel = 'Icon',\n  heading = true,\n  secondaryText = true,\n  textLink = true,\n  headingValue,\n  secondaryTextValue,\n  iconComponent,\n  textLinkContent = 'Label',\n  textLinkHref,\n  align = 'left',\n  fdKey,\n}) => {\n  // Validate textLinkHref when textLink is enabled\n  const isValidHref = textLinkHref && textLinkHref.trim() !== '' && textLinkHref !== '#';\n\n  if (import.meta.env.DEV && textLink && !isValidHref) {\n    console.warn(\n      'TextBlock: textLink is enabled but textLinkHref is missing, empty, or set to \"#\". ' +\n        'The link will not be rendered. Please provide a valid href when textLink is true.',\n    );\n  }\n\n  return (\n    <StyledContainer align={align} className={className} data-fd={fdKey}>\n      {icon && iconComponent && (\n        <IconContainer ariaLabel={iconAriaLabel} icon={iconComponent} style=\"filled\" tone=\"brand\" />\n      )}\n\n      {(heading || secondaryText) && (\n        <StyledTextContainer>\n          {heading && (\n            <Typography\n              sx={(theme) => ({\n                color: theme.palette.semantic?.text?.['text-strong'] || theme.palette.text.primary,\n                margin: 0,\n              })}\n              variant=\"h3Strong\"\n            >\n              {headingValue}\n            </Typography>\n          )}\n          {secondaryText && (\n            <Typography\n              sx={(theme) => ({\n                color: theme.palette.semantic?.text?.['text-weak'] || theme.palette.text.secondary,\n                margin: 0,\n              })}\n              variant=\"b1Weak\"\n            >\n              {secondaryTextValue}\n            </Typography>\n          )}\n        </StyledTextContainer>\n      )}\n\n      {textLink && isValidHref && (\n        <Link\n          fdKey={fdKey ? `${fdKey}-link` : 'text-block-link'}\n          href={textLinkHref}\n          size=\"body\"\n          sx={{ whiteSpace: 'nowrap' }}\n          tone=\"Brand\"\n          underline={true}\n          weight=\"bold\"\n        >\n          {textLinkContent}\n        </Link>\n      )}\n    </StyledContainer>\n  );\n};\n\nexport default TextBlock;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","includes","theme","align","display","flexDirection","gap","spacing","paddingTop","alignItems","textAlign","StyledTextContainer","width","TextBlock","className","icon","iconAriaLabel","heading","secondaryText","textLink","headingValue","secondaryTextValue","iconComponent","textLinkContent","textLinkHref","fdKey","isValidHref","trim","env","DEV","console","warn","_jsxs","children","_jsx","IconContainer","ariaLabel","style","tone","Typography","sx","color","palette","semantic","text","primary","margin","variant","secondary","Link","href","size","whiteSpace","underline","weight"],"mappings":"0RA0CA,MAAMA,EAAkBC,EAAOC,EAAK,CAClCC,kBAAoBC,IAAU,CAAC,SAASC,SAASD,IAD3BH,EAEU,EAAGK,QAAOC,QAAQ,WAAQ,CAC1DC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,GACnBC,WAAYN,EAAMK,QAAQ,GAC1BE,WAAsB,WAAVN,EAAqB,SAAW,aAC5CO,UAAqB,WAAVP,EAAqB,SAAW,WAGvCQ,EAAsBd,EAAOC,EAAPD,EAAY,EAAGK,YAAO,CAChDE,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,GACnBK,MAAO,WAcIC,EAAsC,EACjDC,YACAC,QAAO,EACPC,gBAAgB,OAChBC,WAAU,EACVC,iBAAgB,EAChBC,YAAW,EACXC,eACAC,qBACAC,gBACAC,kBAAkB,QAClBC,eACArB,QAAQ,OACRsB,YAGA,MAAMC,EAAcF,GAAwC,KAAxBA,EAAaG,QAAkC,MAAjBH,EASlE,mBAPgBI,IAAIC,KAAOV,IAAaO,GACtCI,QAAQC,KACN,uKAMFC,EAACpC,EAAe,CAACO,MAAOA,EAAOW,UAAWA,EAAS,UAAWW,EAAKQ,SAAA,CAChElB,GAAQO,GACPY,EAACC,EAAa,CAACC,UAAWpB,EAAeD,KAAMO,EAAee,MAAM,SAASC,KAAK,WAGlFrB,GAAWC,IACXc,EAACrB,EAAmB,CAAAsB,SAAA,CACjBhB,GACCiB,EAACK,EAAU,CACTC,GAAKtC,IAAK,CACRuC,MAAOvC,EAAMwC,QAAQC,UAAUC,OAAO,gBAAkB1C,EAAMwC,QAAQE,KAAKC,QAC3EC,OAAQ,IAEVC,QAAQ,oBAEP3B,IAGJF,GACCgB,EAACK,GACCC,GAAKtC,IAAK,CACRuC,MAAOvC,EAAMwC,QAAQC,UAAUC,OAAO,cAAgB1C,EAAMwC,QAAQE,KAAKI,UACzEF,OAAQ,IAEVC,QAAQ,SAAQd,SAEfZ,OAMRF,GAAYO,GACXQ,EAACe,EAAI,CACHxB,MAAOA,EAAQ,GAAGA,SAAe,kBACjCyB,KAAM1B,EACN2B,KAAK,OACLX,GAAI,CAAEY,WAAY,UAClBd,KAAK,QACLe,WAAW,EACXC,OAAO,OAAMrB,SAEZV"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/Box/Box"),i=require("@mui/material/Stack/Stack"),a=require("@mui/material/styles/styled"),l=require("@mui/material/styles/useTheme"),n=require("../../../atoms/Button/index.cjs.js"),s=require("@mui/material/FormHelperText"),o=require("@mui/material/Typography"),c=require("../../../../icons/CancelCircle/index.cjs.js"),u=require("../../../../icons/Upload/index.cjs.js"),d=require("../../../../providers/TranslationProvider.cjs.js");const p=a(t,{shouldForwardProp:e=>"hasError"!==e})((({theme:e,hasError:r})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"center",padding:e.spacing(4),borderRadius:e.radius["radius-8"],border:r?`1px solid ${e.palette.semantic.stroke["stroke-error-weak"]}`:`1px dashed ${e.palette.semantic.stroke["stroke-strong"]}`,background:r?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.fill["fill-weaker"],cursor:"pointer",transition:"all 0.2s ease-in-out",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:e.spacing(4)}}))),m=a("input")({clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:1,overflow:"hidden",position:"absolute",bottom:0,left:0,whiteSpace:"nowrap",width:1}),f=a(t,{shouldForwardProp:e=>"hasError"!==e})((({hasError:e,theme:r})=>({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:r.radius["radius-32"],backgroundColor:e?r.palette.semantic.fill["fill-error-weak"]:r.palette.semantic.fill["fill-primary-weak"]}))),h=a(n.Button)({alignSelf:"center"});module.exports=({handleUpload:t,multiple:a,maxFiles:n,maxFileSize:g,allowedFileTypes:x=[],disabled:b=!1,dragActiveText:k,dragInactiveText:j,browseButtonText:y,invalidFileTypesText:v,invalidFileSizeText:C,invalidFileCountText:w})=>{const _=l(),[T,F]=r.useState(!1),D=r.useRef(null),[S,q]=r.useState(null),{translate:P}=d.useTranslation(),E=r.useCallback((e=>{if(g&&e.size>g)return q(C||P("File_size_is_too_large",{maxFileSize:g?.toString()||""})),!1;const r=e.name.split(".").pop()?.toLowerCase();return!(x.length>0&&r&&!x.includes(r))||(q(v||P("File_type_is_not_allowed",{allowedFileTypes:x.join(", ")})),!1)}),[g,x,v,C,P]),z=r.useCallback((e=>{const r=Array.from(e),i=[];n&&r.length>n?q(w||P("Too_many_files_selected",{maxFiles:n.toString()})):(r.forEach((e=>{E(e)&&i.push(e)})),i.length>0&&(q(null),t(i)))}),[n,E,t,w,P]),B=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),b||F(!0)}),[b]),I=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),b||F(!1)}),[b]),R=r.useCallback((e=>{e.preventDefault(),e.stopPropagation()}),[]),A=r.useCallback((e=>{if(e.preventDefault(),e.stopPropagation(),b)return;F(!1);const r=e.dataTransfer.files;r&&r.length>0&&z(r)}),[b,z]),L=r.useCallback((e=>{if(b)return;const r=e.target.files;r&&r.length>0&&z(r),D.current&&(D.current.value="")}),[b,z]),U=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),D.current?.click()}),[]),$=r.useCallback((()=>{b||D.current?.click()}),[b]);return e.jsxs(e.Fragment,{children:[!!S&&e.jsxs(s,{error:!0,children:[e.jsx(c,{}),S]}),e.jsxs(p,{"data-testid":"file-drop-zone",hasError:!!S,onClick:b?void 0:$,onDragEnter:B,onDragLeave:I,onDragOver:R,onDrop:A,children:[e.jsx(m,{ref:D,"data-testid":"file-upload-input",disabled:b,multiple:a,onChange:L,type:"file"}),e.jsxs(i,{alignItems:"center",direction:"column",gap:_.spacing(2),justifyContent:"center",width:"100%",children:[e.jsx(f,{hasError:!!S,children:e.jsx(u,{color:S?_.palette.semantic.icon["icon-error"]:_.palette.semantic.icon["icon-primary"]})}),e.jsx(o,{variant:"b1Strong",children:T?k||P("Drop_files_here"):j||P("Drag_and_drop_files_here")}),e.jsx(h,{disabled:b,fdKey:"file-upload-btn",onClick:b?void 0:U,variant:"secondary",children:y||P("Browse_files")})]})]})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/Box/Box"),i=require("@mui/material/Stack/Stack"),a=require("@mui/material/styles/styled"),l=require("@mui/material/styles/useTheme"),n=require("../../../atoms/Button/index.cjs.js"),o=require("@mui/material/FormHelperText"),s=require("@mui/material/Typography"),c=require("../../../../icons/CancelCircle/index.cjs.js"),u=require("../../../../icons/Upload/index.cjs.js"),d=require("../../../../providers/TranslationProvider.cjs.js");const p=a(t,{shouldForwardProp:e=>"hasError"!==e})((({theme:e,hasError:r})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"center",padding:e.spacing(4),borderRadius:e.radius["radius-8"],border:r?`1px solid ${e.palette.semantic.stroke["stroke-error-weak"]}`:`1px dashed ${e.palette.semantic.stroke["stroke-strong"]}`,background:r?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.fill["fill-weaker"],cursor:"pointer",transition:"all 0.2s ease-in-out",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:e.spacing(4)}}))),m=a("input")({clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:1,overflow:"hidden",position:"absolute",bottom:0,left:0,whiteSpace:"nowrap",width:1}),f=a(t,{shouldForwardProp:e=>"hasError"!==e})((({hasError:e,theme:r})=>({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:r.radius["radius-32"],backgroundColor:e?r.palette.semantic.fill["fill-error-weak"]:r.palette.semantic.fill["fill-primary-weak"]}))),h=a(n.Button)({alignSelf:"center"});module.exports=({handleUpload:t,multiple:a,maxFiles:n,maxFileSize:g,allowedFileTypes:x=[],disabled:b=!1,dragActiveText:k,dragInactiveText:j,browseButtonText:y,invalidFileTypesText:v,invalidFileSizeText:C,invalidFileCountText:w})=>{const _=l(),[T,F]=r.useState(!1),D=r.useRef(null),[S,q]=r.useState(null),{translate:P}=d.useTranslation(),E=r.useCallback((e=>{if(g&&e.size>g)return q(C||P("File_size_is_too_large",{maxFileSize:g?.toString()||""})),!1;const r=e.name.split(".").pop()?.toLowerCase();return!(x.length>0&&r&&!x.includes(r))||(q(v||P("File_type_is_not_allowed",{allowedFileTypes:x.join(", ")})),!1)}),[g,x,v,C,P]),z=r.useCallback((e=>{const r=Array.from(e),i=[];n&&r.length>n?q(w||P("Too_many_files_selected",{maxFiles:n.toString()})):(r.forEach((e=>{E(e)&&i.push(e)})),i.length>0&&(q(null),t(i)))}),[n,E,t,w,P]),B=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),b||F(!0)}),[b]),I=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),b||F(!1)}),[b]),R=r.useCallback((e=>{e.preventDefault(),e.stopPropagation()}),[]),A=r.useCallback((e=>{if(e.preventDefault(),e.stopPropagation(),b)return;F(!1);const r=e.dataTransfer.files;r&&r.length>0&&z(r)}),[b,z]),L=r.useCallback((e=>{if(b)return;const r=e.target.files;r&&r.length>0&&z(r),D.current&&(D.current.value="")}),[b,z]),U=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),D.current?.click()}),[]),$=r.useCallback((()=>{b||D.current?.click()}),[b]);return e.jsxs(e.Fragment,{children:[!!S&&e.jsxs(o,{error:!0,children:[e.jsx(c,{}),S]}),e.jsxs(p,{"data-fd":"file-drop-zone",hasError:!!S,onClick:b?void 0:$,onDragEnter:B,onDragLeave:I,onDragOver:R,onDrop:A,children:[e.jsx(m,{ref:D,"data-fd":"file-upload-input",disabled:b,multiple:a,onChange:L,type:"file"}),e.jsxs(i,{alignItems:"center",direction:"column",gap:_.spacing(2),justifyContent:"center",width:"100%",children:[e.jsx(f,{hasError:!!S,children:e.jsx(u,{color:S?_.palette.semantic.icon["icon-error"]:_.palette.semantic.icon["icon-primary"]})}),e.jsx(s,{variant:"b1Strong",children:T?k||P("Drop_files_here"):j||P("Drag_and_drop_files_here")}),e.jsx(h,{disabled:b,fdKey:"file-upload-btn",onClick:b?void 0:U,variant:"secondary",children:y||P("Browse_files")})]})]})]})};
 //# sourceMappingURL=FileDropZone.cjs.js.map

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';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\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,\n  dragInactiveText,\n  browseButtonText,\n  invalidFileTypesText,\n  invalidFileSizeText,\n  invalidFileCountText,\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  const { translate } = useTranslation();\n\n  const validateFile = useCallback(\n    (file: File): boolean => {\n      // Check file size\n      if (maxFileSize && file.size > maxFileSize) {\n        setError(\n          invalidFileSizeText ||\n            translate('File_size_is_too_large', { maxFileSize: maxFileSize?.toString() || '' }),\n        );\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(\n          invalidFileTypesText ||\n            translate('File_type_is_not_allowed', { allowedFileTypes: allowedFileTypes.join(', ') }),\n        );\n        return false;\n      }\n\n      return true;\n    },\n    [maxFileSize, allowedFileTypes, invalidFileTypesText, invalidFileSizeText, translate],\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(\n          invalidFileCountText || translate('Too_many_files_selected', { maxFiles: maxFiles.toString() }),\n        );\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, invalidFileCountText, translate],\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\n              ? dragActiveText || translate('Drop_files_here')\n              : dragInactiveText || translate('Drag_and_drop_files_here')}\n          </FlipdishTypography>\n\n          <StyledButton\n            disabled={disabled}\n            fdKey=\"file-upload-btn\"\n            onClick={disabled ? undefined : handleButtonClick}\n            variant=\"secondary\"\n          >\n            {browseButtonText || translate('Browse_files')}\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","translate","useTranslation","validateFile","useCallback","file","size","toString","fileExtension","name","split","pop","toLowerCase","length","includes","join","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';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\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,\n  dragInactiveText,\n  browseButtonText,\n  invalidFileTypesText,\n  invalidFileSizeText,\n  invalidFileCountText,\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  const { translate } = useTranslation();\n\n  const validateFile = useCallback(\n    (file: File): boolean => {\n      // Check file size\n      if (maxFileSize && file.size > maxFileSize) {\n        setError(\n          invalidFileSizeText ||\n            translate('File_size_is_too_large', { maxFileSize: maxFileSize?.toString() || '' }),\n        );\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(\n          invalidFileTypesText ||\n            translate('File_type_is_not_allowed', { allowedFileTypes: allowedFileTypes.join(', ') }),\n        );\n        return false;\n      }\n\n      return true;\n    },\n    [maxFileSize, allowedFileTypes, invalidFileTypesText, invalidFileSizeText, translate],\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(\n          invalidFileCountText || translate('Too_many_files_selected', { maxFiles: maxFiles.toString() }),\n        );\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, invalidFileCountText, translate],\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-fd=\"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-fd=\"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\n              ? dragActiveText || translate('Drop_files_here')\n              : dragInactiveText || translate('Drag_and_drop_files_here')}\n          </FlipdishTypography>\n\n          <StyledButton\n            disabled={disabled}\n            fdKey=\"file-upload-btn\"\n            onClick={disabled ? undefined : handleButtonClick}\n            variant=\"secondary\"\n          >\n            {browseButtonText || translate('Browse_files')}\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","translate","useTranslation","validateFile","useCallback","file","size","toString","fileExtension","name","split","pop","toLowerCase","length","includes","join","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

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{useState as i,useRef as o,useCallback as a}from"react";import l from"@mui/material/Box/Box";import n from"@mui/material/Stack/Stack";import s from"@mui/material/styles/styled";import p from"@mui/material/styles/useTheme";import{Button as d}from"../../../atoms/Button/index.js";import c from"@mui/material/FormHelperText";import m from"@mui/material/Typography";import u from"../../../../icons/CancelCircle/index.js";import f from"../../../../icons/Upload/index.js";import{useTranslation as h}from"../../../../providers/TranslationProvider.js";const g=s(l,{shouldForwardProp:e=>"hasError"!==e})((({theme:e,hasError:r})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"center",padding:e.spacing(4),borderRadius:e.radius["radius-8"],border:r?`1px solid ${e.palette.semantic.stroke["stroke-error-weak"]}`:`1px dashed ${e.palette.semantic.stroke["stroke-strong"]}`,background:r?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.fill["fill-weaker"],cursor:"pointer",transition:"all 0.2s ease-in-out",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:e.spacing(4)}}))),x=s("input")({clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:1,overflow:"hidden",position:"absolute",bottom:0,left:0,whiteSpace:"nowrap",width:1}),y=s(l,{shouldForwardProp:e=>"hasError"!==e})((({hasError:e,theme:r})=>({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:r.radius["radius-32"],backgroundColor:e?r.palette.semantic.fill["fill-error-weak"]:r.palette.semantic.fill["fill-primary-weak"]}))),v=s(d)({alignSelf:"center"}),w=({handleUpload:l,multiple:s,maxFiles:d,maxFileSize:w,allowedFileTypes:b=[],disabled:k=!1,dragActiveText:_,dragInactiveText:T,browseButtonText:F,invalidFileTypesText:D,invalidFileSizeText:C,invalidFileCountText:S})=>{const j=p(),[P,E]=i(!1),z=o(null),[B,I]=i(null),{translate:A}=h(),L=a((e=>{if(w&&e.size>w)return I(C||A("File_size_is_too_large",{maxFileSize:w?.toString()||""})),!1;const r=e.name.split(".").pop()?.toLowerCase();return!(b.length>0&&r&&!b.includes(r))||(I(D||A("File_type_is_not_allowed",{allowedFileTypes:b.join(", ")})),!1)}),[w,b,D,C,A]),R=a((e=>{const r=Array.from(e),t=[];d&&r.length>d?I(S||A("Too_many_files_selected",{maxFiles:d.toString()})):(r.forEach((e=>{L(e)&&t.push(e)})),t.length>0&&(I(null),l(t)))}),[d,L,l,S,A]),U=a((e=>{e.preventDefault(),e.stopPropagation(),k||E(!0)}),[k]),$=a((e=>{e.preventDefault(),e.stopPropagation(),k||E(!1)}),[k]),H=a((e=>{e.preventDefault(),e.stopPropagation()}),[]),K=a((e=>{if(e.preventDefault(),e.stopPropagation(),k)return;E(!1);const r=e.dataTransfer.files;r&&r.length>0&&R(r)}),[k,R]),O=a((e=>{if(k)return;const r=e.target.files;r&&r.length>0&&R(r),z.current&&(z.current.value="")}),[k,R]),q=a((e=>{e.preventDefault(),e.stopPropagation(),z.current?.click()}),[]),G=a((()=>{k||z.current?.click()}),[k]);return e(r,{children:[!!B&&e(c,{error:!0,children:[t(u,{}),B]}),e(g,{"data-testid":"file-drop-zone",hasError:!!B,onClick:k?void 0:G,onDragEnter:U,onDragLeave:$,onDragOver:H,onDrop:K,children:[t(x,{ref:z,"data-testid":"file-upload-input",disabled:k,multiple:s,onChange:O,type:"file"}),e(n,{alignItems:"center",direction:"column",gap:j.spacing(2),justifyContent:"center",width:"100%",children:[t(y,{hasError:!!B,children:t(f,{color:B?j.palette.semantic.icon["icon-error"]:j.palette.semantic.icon["icon-primary"]})}),t(m,{variant:"b1Strong",children:P?_||A("Drop_files_here"):T||A("Drag_and_drop_files_here")}),t(v,{disabled:k,fdKey:"file-upload-btn",onClick:k?void 0:q,variant:"secondary",children:F||A("Browse_files")})]})]})]})};export{w as default};
+import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{useState as i,useRef as o,useCallback as a}from"react";import l from"@mui/material/Box/Box";import n from"@mui/material/Stack/Stack";import s from"@mui/material/styles/styled";import p from"@mui/material/styles/useTheme";import{Button as d}from"../../../atoms/Button/index.js";import c from"@mui/material/FormHelperText";import m from"@mui/material/Typography";import f from"../../../../icons/CancelCircle/index.js";import u from"../../../../icons/Upload/index.js";import{useTranslation as h}from"../../../../providers/TranslationProvider.js";const g=s(l,{shouldForwardProp:e=>"hasError"!==e})((({theme:e,hasError:r})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"center",padding:e.spacing(4),borderRadius:e.radius["radius-8"],border:r?`1px solid ${e.palette.semantic.stroke["stroke-error-weak"]}`:`1px dashed ${e.palette.semantic.stroke["stroke-strong"]}`,background:r?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.fill["fill-weaker"],cursor:"pointer",transition:"all 0.2s ease-in-out",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:e.spacing(4)}}))),x=s("input")({clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:1,overflow:"hidden",position:"absolute",bottom:0,left:0,whiteSpace:"nowrap",width:1}),y=s(l,{shouldForwardProp:e=>"hasError"!==e})((({hasError:e,theme:r})=>({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:r.radius["radius-32"],backgroundColor:e?r.palette.semantic.fill["fill-error-weak"]:r.palette.semantic.fill["fill-primary-weak"]}))),v=s(d)({alignSelf:"center"}),w=({handleUpload:l,multiple:s,maxFiles:d,maxFileSize:w,allowedFileTypes:b=[],disabled:k=!1,dragActiveText:_,dragInactiveText:T,browseButtonText:F,invalidFileTypesText:D,invalidFileSizeText:C,invalidFileCountText:S})=>{const j=p(),[P,E]=i(!1),z=o(null),[B,I]=i(null),{translate:A}=h(),L=a((e=>{if(w&&e.size>w)return I(C||A("File_size_is_too_large",{maxFileSize:w?.toString()||""})),!1;const r=e.name.split(".").pop()?.toLowerCase();return!(b.length>0&&r&&!b.includes(r))||(I(D||A("File_type_is_not_allowed",{allowedFileTypes:b.join(", ")})),!1)}),[w,b,D,C,A]),R=a((e=>{const r=Array.from(e),t=[];d&&r.length>d?I(S||A("Too_many_files_selected",{maxFiles:d.toString()})):(r.forEach((e=>{L(e)&&t.push(e)})),t.length>0&&(I(null),l(t)))}),[d,L,l,S,A]),U=a((e=>{e.preventDefault(),e.stopPropagation(),k||E(!0)}),[k]),$=a((e=>{e.preventDefault(),e.stopPropagation(),k||E(!1)}),[k]),H=a((e=>{e.preventDefault(),e.stopPropagation()}),[]),K=a((e=>{if(e.preventDefault(),e.stopPropagation(),k)return;E(!1);const r=e.dataTransfer.files;r&&r.length>0&&R(r)}),[k,R]),O=a((e=>{if(k)return;const r=e.target.files;r&&r.length>0&&R(r),z.current&&(z.current.value="")}),[k,R]),q=a((e=>{e.preventDefault(),e.stopPropagation(),z.current?.click()}),[]),G=a((()=>{k||z.current?.click()}),[k]);return e(r,{children:[!!B&&e(c,{error:!0,children:[t(f,{}),B]}),e(g,{"data-fd":"file-drop-zone",hasError:!!B,onClick:k?void 0:G,onDragEnter:U,onDragLeave:$,onDragOver:H,onDrop:K,children:[t(x,{ref:z,"data-fd":"file-upload-input",disabled:k,multiple:s,onChange:O,type:"file"}),e(n,{alignItems:"center",direction:"column",gap:j.spacing(2),justifyContent:"center",width:"100%",children:[t(y,{hasError:!!B,children:t(u,{color:B?j.palette.semantic.icon["icon-error"]:j.palette.semantic.icon["icon-primary"]})}),t(m,{variant:"b1Strong",children:P?_||A("Drop_files_here"):T||A("Drag_and_drop_files_here")}),t(v,{disabled:k,fdKey:"file-upload-btn",onClick:k?void 0:q,variant:"secondary",children:F||A("Browse_files")})]})]})]})};export{w as default};
 //# sourceMappingURL=FileDropZone.js.map

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';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\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,\n  dragInactiveText,\n  browseButtonText,\n  invalidFileTypesText,\n  invalidFileSizeText,\n  invalidFileCountText,\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  const { translate } = useTranslation();\n\n  const validateFile = useCallback(\n    (file: File): boolean => {\n      // Check file size\n      if (maxFileSize && file.size > maxFileSize) {\n        setError(\n          invalidFileSizeText ||\n            translate('File_size_is_too_large', { maxFileSize: maxFileSize?.toString() || '' }),\n        );\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(\n          invalidFileTypesText ||\n            translate('File_type_is_not_allowed', { allowedFileTypes: allowedFileTypes.join(', ') }),\n        );\n        return false;\n      }\n\n      return true;\n    },\n    [maxFileSize, allowedFileTypes, invalidFileTypesText, invalidFileSizeText, translate],\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(\n          invalidFileCountText || translate('Too_many_files_selected', { maxFiles: maxFiles.toString() }),\n        );\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, invalidFileCountText, translate],\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\n              ? dragActiveText || translate('Drop_files_here')\n              : dragInactiveText || translate('Drag_and_drop_files_here')}\n          </FlipdishTypography>\n\n          <StyledButton\n            disabled={disabled}\n            fdKey=\"file-upload-btn\"\n            onClick={disabled ? undefined : handleButtonClick}\n            variant=\"secondary\"\n          >\n            {browseButtonText || translate('Browse_files')}\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","translate","useTranslation","validateFile","useCallback","file","size","toString","fileExtension","name","split","pop","toLowerCase","length","includes","join","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';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\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,\n  dragInactiveText,\n  browseButtonText,\n  invalidFileTypesText,\n  invalidFileSizeText,\n  invalidFileCountText,\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  const { translate } = useTranslation();\n\n  const validateFile = useCallback(\n    (file: File): boolean => {\n      // Check file size\n      if (maxFileSize && file.size > maxFileSize) {\n        setError(\n          invalidFileSizeText ||\n            translate('File_size_is_too_large', { maxFileSize: maxFileSize?.toString() || '' }),\n        );\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(\n          invalidFileTypesText ||\n            translate('File_type_is_not_allowed', { allowedFileTypes: allowedFileTypes.join(', ') }),\n        );\n        return false;\n      }\n\n      return true;\n    },\n    [maxFileSize, allowedFileTypes, invalidFileTypesText, invalidFileSizeText, translate],\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(\n          invalidFileCountText || translate('Too_many_files_selected', { maxFiles: maxFiles.toString() }),\n        );\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, invalidFileCountText, translate],\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-fd=\"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-fd=\"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\n              ? dragActiveText || translate('Drop_files_here')\n              : dragInactiveText || translate('Drag_and_drop_files_here')}\n          </FlipdishTypography>\n\n          <StyledButton\n            disabled={disabled}\n            fdKey=\"file-upload-btn\"\n            onClick={disabled ? undefined : handleButtonClick}\n            variant=\"secondary\"\n          >\n            {browseButtonText || translate('Browse_files')}\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","translate","useTranslation","validateFile","useCallback","file","size","toString","fileExtension","name","split","pop","toLowerCase","length","includes","join","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/ImageUploadWidget/components/ImageDropZone.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/Box/Box"),t=require("@mui/material/Stack/Stack"),o=require("@mui/material/styles/styled"),n=require("@mui/material/Typography/Typography"),r=require("../../../atoms/TextField/index.cjs.js"),l=require("react-images-uploading");const a=o(i)((({theme:e})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"space-between",padding:"12px",borderRadius:"4px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FAFAFA",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:"32px"}}))),d=o(i)({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:"32px",backgroundColor:"rgba(0, 0, 0, 0.04)"}),s=o(n)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",textDecoration:"underline",textDecorationStyle:"solid",textDecorationSkipInk:"auto",textDecorationThickness:"auto",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer"}),c=o(n)({fontFamily:"Roboto",fontSize:"14px",fontStyle:"normal",fontWeight:400,lineHeight:"20px",letterSpacing:"0px",textAlign:"center"}),g=o("img")({maxWidth:"100%",maxHeight:"100%",borderRadius:"4px",objectFit:"cover"}),p=o("form")({width:"100%",maxWidth:"400px"}),x=["jpg","jpeg","png","gif","bmp"];module.exports=({selectedImage:i,onImageSelect:o,uploadingError:n,allowImageLinkUpload:C,imageLink:m,onImageLinkChange:h=()=>{},onUploadImageLink:u=()=>{}})=>{const f=e=>{e.preventDefault(),u(m)};return e.jsx(l,{acceptType:x,onChange:e=>{const i=e[0];i&&o(i)},value:i?[i]:[],children:({onImageUpload:o,dragProps:l})=>{const x=`Error occurred while uploading image: ${n?.message?n.message:""}`;return i?.dataURL?e.jsx(g,{src:i.dataURL}):e.jsxs(a,{...l,children:[e.jsx(d,{children:e.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("title",{children:"Upload icon"}),e.jsx("path",{clipRule:"evenodd",d:"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"}),e.jsx("path",{clipRule:"evenodd",d:"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"})]})}),e.jsxs(t,{alignItems:"center",direction:"column",gap:"8px",width:"100%",children:[e.jsx(s,{onClick:o,children:"Select an image"}),e.jsxs(c,{color:"rgba(0, 0, 0, 0.90)",children:["OR drop it here",C&&" OR paste the image URL below"]}),C&&e.jsx(p,{"data-testid":"image-link-form",onSubmit:f,children:e.jsx(r.TextField,{fullWidth:!0,fdKey:"img-link",onChange:e=>h(e.target.value),placeholder:"Enter image URL",value:m})})]}),e.jsx(c,{color:"rgba(0, 0, 0, 0.60)",children:"Minimum dimensions: 1280 × 720 - up to 10 MB"}),e.jsx(c,{color:"rgba(184, 0, 34, 0.80)",sx:e=>({overflowY:"scroll",height:"30px",[e.breakpoints.only("mobile")]:{height:"120px"}}),children:n?x:""})]})}})};
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/Box/Box"),t=require("@mui/material/Stack/Stack"),o=require("@mui/material/styles/styled"),n=require("@mui/material/Typography/Typography"),r=require("../../../atoms/TextField/index.cjs.js"),l=require("react-images-uploading");const a=o(i)((({theme:e})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"space-between",padding:"12px",borderRadius:"4px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FAFAFA",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:"32px"}}))),d=o(i)({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:"32px",backgroundColor:"rgba(0, 0, 0, 0.04)"}),s=o(n)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",textDecoration:"underline",textDecorationStyle:"solid",textDecorationSkipInk:"auto",textDecorationThickness:"auto",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer"}),c=o(n)({fontFamily:"Roboto",fontSize:"14px",fontStyle:"normal",fontWeight:400,lineHeight:"20px",letterSpacing:"0px",textAlign:"center"}),g=o("img")({maxWidth:"100%",maxHeight:"100%",borderRadius:"4px",objectFit:"cover"}),p=o("form")({width:"100%",maxWidth:"400px"}),x=["jpg","jpeg","png","gif","bmp"];module.exports=({selectedImage:i,onImageSelect:o,uploadingError:n,allowImageLinkUpload:C,imageLink:m,onImageLinkChange:h=()=>{},onUploadImageLink:u=()=>{}})=>{const f=e=>{e.preventDefault(),u(m)};return e.jsx(l,{acceptType:x,onChange:e=>{const i=e[0];i&&o(i)},value:i?[i]:[],children:({onImageUpload:o,dragProps:l})=>{const x=`Error occurred while uploading image: ${n?.message?n.message:""}`;return i?.dataURL?e.jsx(g,{src:i.dataURL}):e.jsxs(a,{...l,children:[e.jsx(d,{children:e.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("title",{children:"Upload icon"}),e.jsx("path",{clipRule:"evenodd",d:"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"}),e.jsx("path",{clipRule:"evenodd",d:"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"})]})}),e.jsxs(t,{alignItems:"center",direction:"column",gap:"8px",width:"100%",children:[e.jsx(s,{onClick:o,children:"Select an image"}),e.jsxs(c,{color:"rgba(0, 0, 0, 0.90)",children:["OR drop it here",C&&" OR paste the image URL below"]}),C&&e.jsx(p,{"data-fd":"image-link-form",onSubmit:f,children:e.jsx(r.TextField,{fullWidth:!0,fdKey:"img-link",onChange:e=>h(e.target.value),placeholder:"Enter image URL",value:m})})]}),e.jsx(c,{color:"rgba(0, 0, 0, 0.60)",children:"Minimum dimensions: 1280 × 720 - up to 10 MB"}),e.jsx(c,{color:"rgba(184, 0, 34, 0.80)",sx:e=>({overflowY:"scroll",height:"30px",[e.breakpoints.only("mobile")]:{height:"120px"}}),children:n?x:""})]})}})};
 //# sourceMappingURL=ImageDropZone.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageDropZone.cjs.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/ImageDropZone.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography/Typography';\n\nimport TextField from '@fd/components/atoms/TextField';\nimport ReactImageUploading, { type ImageListType, type ImageType } from 'react-images-uploading';\n\nconst StyledUploadAreaContainer = styled(Box)(({ theme }) => ({\n  flex: '1',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: '12px',\n  borderRadius: '4px',\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FAFAFA',\n  [theme.breakpoints.only('mobile')]: {\n    justifyContent: 'center',\n    gap: '32px',\n  },\n}));\n\nconst StyledIconContainer = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '32px',\n  backgroundColor: 'rgba(0, 0, 0, 0.04)',\n});\n\nconst StyledPrimaryText = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '16px',\n  fontStyle: 'normal',\n  fontWeight: '600',\n  lineHeight: '24px',\n  letterSpacing: '0px',\n  textDecoration: 'underline',\n  textDecorationStyle: 'solid',\n  textDecorationSkipInk: 'auto',\n  textDecorationThickness: 'auto',\n  textUnderlineOffset: '25%',\n  textUnderlinePosition: 'from-font',\n  cursor: 'pointer',\n});\n\nconst StyledSecondaryText = styled(Typography)({\n  fontFamily: 'Roboto',\n  fontSize: '14px',\n  fontStyle: 'normal',\n  fontWeight: 400,\n  lineHeight: '20px',\n  letterSpacing: '0px',\n  textAlign: 'center',\n});\n\nconst StyledImageComponent = styled('img')({\n  maxWidth: '100%',\n  maxHeight: '100%',\n  borderRadius: '4px',\n  objectFit: 'cover',\n});\n\nconst StyledForm = styled('form')({\n  width: '100%',\n  maxWidth: '400px',\n});\n\ninterface ImageDropZoneProps {\n  selectedImage: ImageType | null;\n  onImageSelect: (selectedImage: ImageType) => void;\n  allowImageLinkUpload: boolean;\n  imageLink: string;\n  onUploadImageLink?: (link: string) => void;\n  onImageLinkChange?: (link: string) => void;\n  uploadingError: Error | null;\n}\n\nconst allowedFileTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];\n\nconst ImageDropZone: React.FC<ImageDropZoneProps> = ({\n  selectedImage,\n  onImageSelect,\n  uploadingError,\n  allowImageLinkUpload,\n  imageLink,\n  onImageLinkChange = (): void => {},\n  onUploadImageLink = (): void => {},\n}) => {\n  const handleImageSelect = (value: ImageListType): void => {\n    const firstImage = value[0] as ImageType | undefined;\n    if (firstImage) {\n      onImageSelect(firstImage);\n    }\n  };\n\n  const handleImageLinkUpload = (e: React.FormEvent): void => {\n    e.preventDefault();\n    onUploadImageLink(imageLink);\n  };\n\n  return (\n    <ReactImageUploading\n      acceptType={allowedFileTypes}\n      onChange={handleImageSelect}\n      value={selectedImage ? [selectedImage] : []}\n    >\n      {({ onImageUpload, dragProps }) => {\n        const uploadErrorMessage = `Error occurred while uploading image: ${uploadingError?.message ? uploadingError.message : ''}`;\n\n        if (selectedImage?.dataURL) {\n          return <StyledImageComponent src={selectedImage.dataURL} />;\n        }\n\n        return (\n          <StyledUploadAreaContainer {...dragProps}>\n            <StyledIconContainer>\n              <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n                <title>Upload icon</title>\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n              </svg>\n            </StyledIconContainer>\n            <Stack alignItems=\"center\" direction=\"column\" gap=\"8px\" width=\"100%\">\n              <StyledPrimaryText onClick={onImageUpload}>Select an image</StyledPrimaryText>\n              <StyledSecondaryText color=\"rgba(0, 0, 0, 0.90)\">\n                OR drop it here{allowImageLinkUpload && ' OR paste the image URL below'}\n              </StyledSecondaryText>\n              {allowImageLinkUpload && (\n                <StyledForm data-testid=\"image-link-form\" onSubmit={handleImageLinkUpload}>\n                  <TextField\n                    fullWidth\n                    fdKey=\"img-link\"\n                    onChange={(e) => onImageLinkChange(e.target.value)}\n                    placeholder=\"Enter image URL\"\n                    value={imageLink}\n                  />\n                </StyledForm>\n              )}\n            </Stack>\n            <StyledSecondaryText color=\"rgba(0, 0, 0, 0.60)\">\n              Minimum dimensions: 1280 × 720 - up to 10 MB\n            </StyledSecondaryText>\n            <StyledSecondaryText\n              color=\"rgba(184, 0, 34, 0.80)\"\n              sx={(theme) => ({\n                overflowY: 'scroll',\n                height: '30px',\n                [theme.breakpoints.only('mobile')]: {\n                  height: '120px',\n                },\n              })}\n            >\n              {uploadingError ? uploadErrorMessage : ''}\n            </StyledSecondaryText>\n          </StyledUploadAreaContainer>\n        );\n      }}\n    </ReactImageUploading>\n  );\n};\n\nexport default ImageDropZone;\n"],"names":["StyledUploadAreaContainer","styled","Box","theme","flex","display","flexDirection","height","boxSizing","alignItems","justifyContent","padding","borderRadius","border","background","breakpoints","only","gap","StyledIconContainer","width","backgroundColor","StyledPrimaryText","Typography","color","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","letterSpacing","textDecoration","textDecorationStyle","textDecorationSkipInk","textDecorationThickness","textUnderlineOffset","textUnderlinePosition","cursor","StyledSecondaryText","textAlign","StyledImageComponent","maxWidth","maxHeight","objectFit","StyledForm","allowedFileTypes","selectedImage","onImageSelect","uploadingError","allowImageLinkUpload","imageLink","onImageLinkChange","onUploadImageLink","handleImageLinkUpload","e","preventDefault","_jsx","ReactImageUploading","acceptType","onChange","value","firstImage","children","onImageUpload","dragProps","uploadErrorMessage","message","dataURL","src","_jsxs","fill","viewBox","xmlns","clipRule","d","fillOpacity","fillRule","Stack","direction","onClick","onSubmit","TextField","fullWidth","fdKey","target","placeholder","sx","overflowY"],"mappings":"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"}
+{"version":3,"file":"ImageDropZone.cjs.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/ImageDropZone.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography/Typography';\n\nimport TextField from '@fd/components/atoms/TextField';\nimport ReactImageUploading, { type ImageListType, type ImageType } from 'react-images-uploading';\n\nconst StyledUploadAreaContainer = styled(Box)(({ theme }) => ({\n  flex: '1',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: '12px',\n  borderRadius: '4px',\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FAFAFA',\n  [theme.breakpoints.only('mobile')]: {\n    justifyContent: 'center',\n    gap: '32px',\n  },\n}));\n\nconst StyledIconContainer = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '32px',\n  backgroundColor: 'rgba(0, 0, 0, 0.04)',\n});\n\nconst StyledPrimaryText = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '16px',\n  fontStyle: 'normal',\n  fontWeight: '600',\n  lineHeight: '24px',\n  letterSpacing: '0px',\n  textDecoration: 'underline',\n  textDecorationStyle: 'solid',\n  textDecorationSkipInk: 'auto',\n  textDecorationThickness: 'auto',\n  textUnderlineOffset: '25%',\n  textUnderlinePosition: 'from-font',\n  cursor: 'pointer',\n});\n\nconst StyledSecondaryText = styled(Typography)({\n  fontFamily: 'Roboto',\n  fontSize: '14px',\n  fontStyle: 'normal',\n  fontWeight: 400,\n  lineHeight: '20px',\n  letterSpacing: '0px',\n  textAlign: 'center',\n});\n\nconst StyledImageComponent = styled('img')({\n  maxWidth: '100%',\n  maxHeight: '100%',\n  borderRadius: '4px',\n  objectFit: 'cover',\n});\n\nconst StyledForm = styled('form')({\n  width: '100%',\n  maxWidth: '400px',\n});\n\ninterface ImageDropZoneProps {\n  selectedImage: ImageType | null;\n  onImageSelect: (selectedImage: ImageType) => void;\n  allowImageLinkUpload: boolean;\n  imageLink: string;\n  onUploadImageLink?: (link: string) => void;\n  onImageLinkChange?: (link: string) => void;\n  uploadingError: Error | null;\n}\n\nconst allowedFileTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];\n\nconst ImageDropZone: React.FC<ImageDropZoneProps> = ({\n  selectedImage,\n  onImageSelect,\n  uploadingError,\n  allowImageLinkUpload,\n  imageLink,\n  onImageLinkChange = (): void => {},\n  onUploadImageLink = (): void => {},\n}) => {\n  const handleImageSelect = (value: ImageListType): void => {\n    const firstImage = value[0] as ImageType | undefined;\n    if (firstImage) {\n      onImageSelect(firstImage);\n    }\n  };\n\n  const handleImageLinkUpload = (e: React.FormEvent): void => {\n    e.preventDefault();\n    onUploadImageLink(imageLink);\n  };\n\n  return (\n    <ReactImageUploading\n      acceptType={allowedFileTypes}\n      onChange={handleImageSelect}\n      value={selectedImage ? [selectedImage] : []}\n    >\n      {({ onImageUpload, dragProps }) => {\n        const uploadErrorMessage = `Error occurred while uploading image: ${uploadingError?.message ? uploadingError.message : ''}`;\n\n        if (selectedImage?.dataURL) {\n          return <StyledImageComponent src={selectedImage.dataURL} />;\n        }\n\n        return (\n          <StyledUploadAreaContainer {...dragProps}>\n            <StyledIconContainer>\n              <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n                <title>Upload icon</title>\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n              </svg>\n            </StyledIconContainer>\n            <Stack alignItems=\"center\" direction=\"column\" gap=\"8px\" width=\"100%\">\n              <StyledPrimaryText onClick={onImageUpload}>Select an image</StyledPrimaryText>\n              <StyledSecondaryText color=\"rgba(0, 0, 0, 0.90)\">\n                OR drop it here{allowImageLinkUpload && ' OR paste the image URL below'}\n              </StyledSecondaryText>\n              {allowImageLinkUpload && (\n                <StyledForm data-fd=\"image-link-form\" onSubmit={handleImageLinkUpload}>\n                  <TextField\n                    fullWidth\n                    fdKey=\"img-link\"\n                    onChange={(e) => onImageLinkChange(e.target.value)}\n                    placeholder=\"Enter image URL\"\n                    value={imageLink}\n                  />\n                </StyledForm>\n              )}\n            </Stack>\n            <StyledSecondaryText color=\"rgba(0, 0, 0, 0.60)\">\n              Minimum dimensions: 1280 × 720 - up to 10 MB\n            </StyledSecondaryText>\n            <StyledSecondaryText\n              color=\"rgba(184, 0, 34, 0.80)\"\n              sx={(theme) => ({\n                overflowY: 'scroll',\n                height: '30px',\n                [theme.breakpoints.only('mobile')]: {\n                  height: '120px',\n                },\n              })}\n            >\n              {uploadingError ? uploadErrorMessage : ''}\n            </StyledSecondaryText>\n          </StyledUploadAreaContainer>\n        );\n      }}\n    </ReactImageUploading>\n  );\n};\n\nexport default ImageDropZone;\n"],"names":["StyledUploadAreaContainer","styled","Box","theme","flex","display","flexDirection","height","boxSizing","alignItems","justifyContent","padding","borderRadius","border","background","breakpoints","only","gap","StyledIconContainer","width","backgroundColor","StyledPrimaryText","Typography","color","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","letterSpacing","textDecoration","textDecorationStyle","textDecorationSkipInk","textDecorationThickness","textUnderlineOffset","textUnderlinePosition","cursor","StyledSecondaryText","textAlign","StyledImageComponent","maxWidth","maxHeight","objectFit","StyledForm","allowedFileTypes","selectedImage","onImageSelect","uploadingError","allowImageLinkUpload","imageLink","onImageLinkChange","onUploadImageLink","handleImageLinkUpload","e","preventDefault","_jsx","ReactImageUploading","acceptType","onChange","value","firstImage","children","onImageUpload","dragProps","uploadErrorMessage","message","dataURL","src","_jsxs","fill","viewBox","xmlns","clipRule","d","fillOpacity","fillRule","Stack","direction","onClick","onSubmit","TextField","fullWidth","fdKey","target","placeholder","sx","overflowY"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"@mui/material/Box/Box";import o from"@mui/material/Stack/Stack";import n from"@mui/material/styles/styled";import r from"@mui/material/Typography/Typography";import{TextField as l}from"../../../atoms/TextField/index.js";import a from"react-images-uploading";const d=n(i)((({theme:e})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"space-between",padding:"12px",borderRadius:"4px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FAFAFA",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:"32px"}}))),p=n(i)({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:"32px",backgroundColor:"rgba(0, 0, 0, 0.04)"}),c=n(r)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",textDecoration:"underline",textDecorationStyle:"solid",textDecorationSkipInk:"auto",textDecorationThickness:"auto",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer"}),m=n(r)({fontFamily:"Roboto",fontSize:"14px",fontStyle:"normal",fontWeight:400,lineHeight:"20px",letterSpacing:"0px",textAlign:"center"}),g=n("img")({maxWidth:"100%",maxHeight:"100%",borderRadius:"4px",objectFit:"cover"}),C=n("form")({width:"100%",maxWidth:"400px"}),s=["jpg","jpeg","png","gif","bmp"],h=({selectedImage:i,onImageSelect:n,uploadingError:r,allowImageLinkUpload:h,imageLink:x,onImageLinkChange:f=()=>{},onUploadImageLink:u=()=>{}})=>{const b=e=>{e.preventDefault(),u(x)};return e(a,{acceptType:s,onChange:e=>{const t=e[0];t&&n(t)},value:i?[i]:[],children:({onImageUpload:n,dragProps:a})=>{const s=`Error occurred while uploading image: ${r?.message?r.message:""}`;return i?.dataURL?e(g,{src:i.dataURL}):t(d,{...a,children:[e(p,{children:t("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e("title",{children:"Upload icon"}),e("path",{clipRule:"evenodd",d:"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"}),e("path",{clipRule:"evenodd",d:"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"})]})}),t(o,{alignItems:"center",direction:"column",gap:"8px",width:"100%",children:[e(c,{onClick:n,children:"Select an image"}),t(m,{color:"rgba(0, 0, 0, 0.90)",children:["OR drop it here",h&&" OR paste the image URL below"]}),h&&e(C,{"data-testid":"image-link-form",onSubmit:b,children:e(l,{fullWidth:!0,fdKey:"img-link",onChange:e=>f(e.target.value),placeholder:"Enter image URL",value:x})})]}),e(m,{color:"rgba(0, 0, 0, 0.60)",children:"Minimum dimensions: 1280 × 720 - up to 10 MB"}),e(m,{color:"rgba(184, 0, 34, 0.80)",sx:e=>({overflowY:"scroll",height:"30px",[e.breakpoints.only("mobile")]:{height:"120px"}}),children:r?s:""})]})}})};export{h as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"@mui/material/Box/Box";import o from"@mui/material/Stack/Stack";import n from"@mui/material/styles/styled";import r from"@mui/material/Typography/Typography";import{TextField as l}from"../../../atoms/TextField/index.js";import a from"react-images-uploading";const d=n(i)((({theme:e})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"space-between",padding:"12px",borderRadius:"4px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FAFAFA",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:"32px"}}))),p=n(i)({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:"32px",backgroundColor:"rgba(0, 0, 0, 0.04)"}),c=n(r)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",textDecoration:"underline",textDecorationStyle:"solid",textDecorationSkipInk:"auto",textDecorationThickness:"auto",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer"}),m=n(r)({fontFamily:"Roboto",fontSize:"14px",fontStyle:"normal",fontWeight:400,lineHeight:"20px",letterSpacing:"0px",textAlign:"center"}),g=n("img")({maxWidth:"100%",maxHeight:"100%",borderRadius:"4px",objectFit:"cover"}),C=n("form")({width:"100%",maxWidth:"400px"}),s=["jpg","jpeg","png","gif","bmp"],h=({selectedImage:i,onImageSelect:n,uploadingError:r,allowImageLinkUpload:h,imageLink:x,onImageLinkChange:f=()=>{},onUploadImageLink:u=()=>{}})=>{const b=e=>{e.preventDefault(),u(x)};return e(a,{acceptType:s,onChange:e=>{const t=e[0];t&&n(t)},value:i?[i]:[],children:({onImageUpload:n,dragProps:a})=>{const s=`Error occurred while uploading image: ${r?.message?r.message:""}`;return i?.dataURL?e(g,{src:i.dataURL}):t(d,{...a,children:[e(p,{children:t("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e("title",{children:"Upload icon"}),e("path",{clipRule:"evenodd",d:"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"}),e("path",{clipRule:"evenodd",d:"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"})]})}),t(o,{alignItems:"center",direction:"column",gap:"8px",width:"100%",children:[e(c,{onClick:n,children:"Select an image"}),t(m,{color:"rgba(0, 0, 0, 0.90)",children:["OR drop it here",h&&" OR paste the image URL below"]}),h&&e(C,{"data-fd":"image-link-form",onSubmit:b,children:e(l,{fullWidth:!0,fdKey:"img-link",onChange:e=>f(e.target.value),placeholder:"Enter image URL",value:x})})]}),e(m,{color:"rgba(0, 0, 0, 0.60)",children:"Minimum dimensions: 1280 × 720 - up to 10 MB"}),e(m,{color:"rgba(184, 0, 34, 0.80)",sx:e=>({overflowY:"scroll",height:"30px",[e.breakpoints.only("mobile")]:{height:"120px"}}),children:r?s:""})]})}})};export{h as default};
 //# sourceMappingURL=ImageDropZone.js.map