@flipdish/portal-library 8.5.7 → 8.6.0

package/dist/components/atoms/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Tag/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\n\nimport CancelIcon from '@fd/icons/Cancel';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\n/** Props for the Tag component */\ninterface TagBaseProps {\n  /** Additional CSS class names */\n  className?: string;\n  /** Whether the tag is disabled */\n  disabled?: boolean;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n  /** Text label displayed in the tag */\n  label: string;\n  /** Whether the tag is selected */\n  selected?: boolean;\n  /** Size of the tag */\n  size?: MuiChipProps['size'];\n}\n\ninterface TagDismissibleProps extends TagBaseProps {\n  /** Callback function when the tag is clicked */\n  onClick?: never;\n  /** Callback function when the tag is dismissed */\n  onDismiss: NonNullable<MuiChipProps['onDelete']>;\n}\n\ninterface TagNonDismissibleProps extends TagBaseProps {\n  /** Callback function when the tag is clicked */\n  onClick?: MuiChipProps['onClick'];\n  /** No dismiss handler in this variant */\n  onDismiss?: never;\n}\n\n/** Props for the Tag component */\nexport type TagProps = TagDismissibleProps | TagNonDismissibleProps;\n\nconst StyledTagContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ disabled }) => ({\n  cursor: disabled ? 'not-allowed' : undefined,\n}));\n\nconst StyledTag = styled(MuiChip, {\n  shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n  ...(selected && {\n    backgroundColor: theme.palette.semantic.fill['fill-selected'],\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    color: theme.palette.semantic.text['text-inverse-strong'],\n\n    '& .MuiChip-deleteIcon, & .MuiChip-icon': {\n      color: theme.palette.semantic.icon['icon-inverse-strong'],\n\n      '&:hover:not(.Mui-disabled)': {\n        color: theme.palette.semantic.text['text-inverse-strong'],\n      },\n    },\n    '&:hover:not(.Mui-disabled)': {\n      backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      borderColor: theme.palette.semantic.stroke['stroke-selected'],\n      color: theme.palette.semantic.text['text-inverse-strong'],\n    },\n    '&:active:not(.Mui-disabled)': {\n      backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      borderColor: theme.palette.semantic.stroke['stroke-selected'],\n      color: theme.palette.semantic.text['text-inverse-strong'],\n    },\n    '&:focus-visible, &.Mui-focusVisible': {\n      backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      borderColor: theme.palette.semantic.stroke['stroke-selected'],\n      color: theme.palette.semantic.text['text-inverse-strong'],\n    },\n    '&.Mui-disabled': {\n      backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n      borderColor: theme.palette.semantic.fill['fill-disabled'],\n      color: theme.palette.semantic.text['text-inverse-strong'],\n\n      '& .MuiChip-deleteIcon, & .MuiChip-icon': {\n        color: theme.palette.semantic.icon['icon-inverse-strong'],\n      },\n    },\n  }),\n}));\n\n/**\n * Tag component used for categorization and filtering.\n * It supports two variants: dismissible (with delete icon) and clickable (entire tag is interactive).\n * Both variants support a selected state.\n */\nexport const Tag = ({\n  className,\n  disabled = false,\n  fdKey,\n  label,\n  onClick,\n  onDismiss,\n  selected = false,\n  size = 'medium',\n}: TagProps): JSX.Element => {\n  const { translate } = useTranslation();\n\n  const getAriaLabel = (): string | undefined => {\n    if (onClick) {\n      return label;\n    }\n    if (onDismiss) {\n      return translate('Dismiss_dismissible', { dismissible: label });\n    }\n\n    return undefined;\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (disabled) {\n      return;\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (onDismiss) {\n        onDismiss(event as unknown as React.MouseEvent<HTMLDivElement>);\n      } else if (onClick) {\n        onClick(event as unknown as React.MouseEvent<HTMLDivElement>);\n      }\n    }\n  };\n\n  const renderDismissIcon = (): React.ReactElement<unknown> | undefined => {\n    if (!onDismiss) {\n      return undefined;\n    }\n\n    return <CancelIcon aria-hidden={true} data-fd=\"tag-dismiss-icon\" size=\"sm\" />;\n  };\n\n  return (\n    <StyledTagContainer disabled={disabled}>\n      <StyledTag\n        aria-label={getAriaLabel()}\n        className={className}\n        clickable={disabled ? false : !!onClick}\n        data-fd={fdKey}\n        data-fd-variant=\"tag\"\n        deleteIcon={renderDismissIcon()}\n        disabled={disabled}\n        label={label}\n        onClick={disabled ? undefined : onClick}\n        onDelete={disabled ? undefined : onDismiss}\n        onKeyDown={handleKeyDown}\n        selected={selected}\n        size={size}\n      />\n    </StyledTagContainer>\n  );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"names":["StyledTagContainer","styled","Box","shouldForwardProp","prop","disabled","cursor","undefined","StyledTag","MuiChip","theme","selected","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","icon","Tag","className","fdKey","label","onClick","onDismiss","size","translate","useTranslation","_jsx","children","dismissible","clickable","deleteIcon","CancelIcon","renderDismissIcon","onDelete","onKeyDown","event","key","preventDefault","stopPropagation","displayName"],"mappings":"kRAwCA,MAAMA,EAAqBC,EAAOC,EAAK,CACrCC,kBAAoBC,GAAkB,aAATA,GADJH,EAEA,EAAGI,eAAU,CACtCC,OAAQD,EAAW,mBAAgBE,MAG/BC,EAAYP,EAAOQ,EAAS,CAChCN,kBAAoBC,GAAkB,aAATA,GADbH,EAES,EAAGS,QAAOC,eAAU,IACzCA,GAAY,CACdC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,uBAEnC,yCAA0C,CACxCD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,uBAEnC,6BAA8B,CAC5BF,MAAOR,EAAMG,QAAQC,SAASK,KAAK,yBAGvC,6BAA8B,CAC5BP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,8BAA+B,CAC7BP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,sCAAuC,CACrCP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,iBAAkB,CAChBP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASC,KAAK,iBACzCG,MAAOR,EAAMG,QAAQC,SAASK,KAAK,uBAEnC,yCAA0C,CACxCD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,8BAW9BC,EAAM,EACjBC,YACAjB,YAAW,EACXkB,QACAC,QACAC,UACAC,YACAf,YAAW,EACXgB,OAAO,aAEP,MAAMC,UAAEA,GAAcC,IAsCtB,OACEC,EAAC9B,GAAmBK,SAAUA,EAAQ0B,SACpCD,EAACtB,EAAS,CAAA,aArCRiB,EACKD,EAELE,EACKE,EAAU,sBAAuB,CAAEI,YAAaR,SADzD,EAoCIF,UAAWA,EACXW,WAAW5B,KAAqBoB,YACvBF,EAAK,kBACE,MAChBW,WAhBoB,MACxB,GAAKR,EAIL,OAAOI,EAACK,EAAU,CAAA,eAAc,EAAI,UAAU,mBAAmBR,KAAK,QAWtDS,GACZ/B,SAAUA,EACVmB,MAAOA,EACPC,QAASpB,OAAWE,EAAYkB,EAChCY,SAAUhC,OAAWE,EAAYmB,EACjCY,UAtCiBC,IACjBlC,GAIc,UAAdkC,EAAMC,KAAiC,MAAdD,EAAMC,MACjCD,EAAME,iBACNF,EAAMG,kBAEFhB,EACFA,EAAUa,GACDd,GACTA,EAAQc,KA2BR5B,SAAUA,EACVgB,KAAMA,OAMdN,EAAIsB,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Tag/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\n\nimport CancelIcon from '@fd/icons/Cancel';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\n/** Props for the Tag component */\ninterface TagBaseProps {\n  /** Additional CSS class names */\n  className?: string;\n  /** Whether the tag is disabled */\n  disabled?: boolean;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n  /** Text label displayed in the tag */\n  label: string;\n  /** Whether the tag is selected */\n  selected?: boolean;\n  /** Size of the tag */\n  size?: MuiChipProps['size'];\n}\n\ninterface TagDismissibleProps extends TagBaseProps {\n  /** Callback function when the tag is clicked */\n  onClick?: never;\n  /** Callback function when the tag is dismissed */\n  onDismiss: NonNullable<MuiChipProps['onDelete']>;\n}\n\ninterface TagNonDismissibleProps extends TagBaseProps {\n  /** Callback function when the tag is clicked */\n  onClick?: MuiChipProps['onClick'];\n  /** No dismiss handler in this variant */\n  onDismiss?: never;\n}\n\n/** Props for the Tag component */\nexport type TagProps = TagDismissibleProps | TagNonDismissibleProps;\n\nconst StyledTagContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ disabled }) => ({\n  cursor: disabled ? 'not-allowed' : undefined,\n}));\n\nconst StyledTag = styled(MuiChip, {\n  shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n  ...(selected && {\n    backgroundColor: theme.palette.semantic.fill['fill-selected'],\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    color: theme.palette.semantic.text['text-inverse-strong'],\n\n    '& .MuiChip-deleteIcon, & .MuiChip-icon': {\n      color: theme.palette.semantic.icon['icon-inverse-strong'],\n\n      '&:hover:not(.Mui-disabled)': {\n        color: theme.palette.semantic.text['text-inverse-strong'],\n      },\n    },\n    '&:hover:not(.Mui-disabled)': {\n      backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      borderColor: theme.palette.semantic.stroke['stroke-selected'],\n      color: theme.palette.semantic.text['text-inverse-strong'],\n    },\n    '&:active:not(.Mui-disabled)': {\n      backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      borderColor: theme.palette.semantic.stroke['stroke-selected'],\n      color: theme.palette.semantic.text['text-inverse-strong'],\n    },\n    '&:focus-visible, &.Mui-focusVisible': {\n      backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      borderColor: theme.palette.semantic.stroke['stroke-selected'],\n      color: theme.palette.semantic.text['text-inverse-strong'],\n    },\n    '&.Mui-disabled': {\n      backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n      borderColor: theme.palette.semantic.fill['fill-disabled'],\n      color: theme.palette.semantic.text['text-inverse-strong'],\n\n      '& .MuiChip-deleteIcon, & .MuiChip-icon': {\n        color: theme.palette.semantic.icon['icon-inverse-strong'],\n      },\n    },\n  }),\n}));\n\n/**\n * Tag component used for categorization and filtering.\n * It supports two variants: dismissible (with delete icon) and clickable (entire tag is interactive).\n * Both variants support a selected state.\n */\nexport const Tag = ({\n  className,\n  disabled = false,\n  fdKey,\n  label,\n  onClick,\n  onDismiss,\n  selected = false,\n  size = 'medium',\n}: TagProps): JSX.Element => {\n  const { translate } = useTranslation();\n\n  const getAriaLabel = (): string | undefined => {\n    if (onClick) {\n      return label;\n    }\n    if (onDismiss) {\n      return translate('Dismiss_dismissible', { dismissible: label });\n    }\n\n    return undefined;\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (disabled) {\n      return;\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (onDismiss) {\n        onDismiss(event as unknown as React.MouseEvent<HTMLDivElement>);\n      } else if (onClick) {\n        onClick(event as unknown as React.MouseEvent<HTMLDivElement>);\n      }\n    }\n  };\n\n  const renderDismissIcon = (): React.ReactElement<unknown> | undefined => {\n    if (!onDismiss) {\n      return undefined;\n    }\n\n    return <CancelIcon aria-hidden={true} data-fd=\"tag-dismiss-icon\" size=\"sm\" />;\n  };\n\n  return (\n    <StyledTagContainer disabled={disabled}>\n      <StyledTag\n        aria-label={getAriaLabel()}\n        className={className}\n        clickable={disabled ? false : !!onClick}\n        data-fd={fdKey}\n        data-fd-variant=\"tag\"\n        deleteIcon={renderDismissIcon()}\n        disabled={disabled}\n        label={label}\n        onClick={disabled ? undefined : onClick}\n        onDelete={disabled ? undefined : onDismiss}\n        onKeyDown={handleKeyDown}\n        selected={selected}\n        size={size}\n      />\n    </StyledTagContainer>\n  );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"names":["StyledTagContainer","styled","Box","shouldForwardProp","prop","disabled","cursor","undefined","StyledTag","MuiChip","theme","selected","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","icon","Tag","className","fdKey","label","onClick","onDismiss","size","translate","useTranslation","_jsx","children","dismissible","clickable","deleteIcon","CancelIcon","renderDismissIcon","onDelete","onKeyDown","event","key","preventDefault","stopPropagation","displayName"],"mappings":"kRAwCA,MAAMA,EAAqBC,EAAOC,EAAK,CACrCC,kBAAoBC,GAAkB,aAATA,GADJH,CAEA,EAAGI,eAAU,CACtCC,OAAQD,EAAW,mBAAgBE,KAG/BC,EAAYP,EAAOQ,EAAS,CAChCN,kBAAoBC,GAAkB,aAATA,GADbH,CAES,EAAGS,QAAOC,eAAU,IACzCA,GAAY,CACdC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,uBAEnC,yCAA0C,CACxCD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,uBAEnC,6BAA8B,CAC5BF,MAAOR,EAAMG,QAAQC,SAASK,KAAK,yBAGvC,6BAA8B,CAC5BP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,8BAA+B,CAC7BP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,sCAAuC,CACrCP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,iBAAkB,CAChBP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASC,KAAK,iBACzCG,MAAOR,EAAMG,QAAQC,SAASK,KAAK,uBAEnC,yCAA0C,CACxCD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,6BAW9BC,EAAM,EACjBC,YACAjB,YAAW,EACXkB,QACAC,QACAC,UACAC,YACAf,YAAW,EACXgB,OAAO,aAEP,MAAMC,UAAEA,GAAcC,IAsCtB,OACEC,EAAC9B,GAAmBK,SAAUA,EAAQ0B,SACpCD,EAACtB,EAAS,CAAA,aArCRiB,EACKD,EAELE,EACKE,EAAU,sBAAuB,CAAEI,YAAaR,SADzD,EAoCIF,UAAWA,EACXW,WAAW5B,KAAqBoB,YACvBF,EAAK,kBACE,MAChBW,WAhBoB,MACxB,GAAKR,EAIL,OAAOI,EAACK,EAAU,CAAA,eAAc,EAAI,UAAU,mBAAmBR,KAAK,QAWtDS,GACZ/B,SAAUA,EACVmB,MAAOA,EACPC,QAASpB,OAAWE,EAAYkB,EAChCY,SAAUhC,OAAWE,EAAYmB,EACjCY,UAtCiBC,IACjBlC,GAIc,UAAdkC,EAAMC,KAAiC,MAAdD,EAAMC,MACjCD,EAAME,iBACNF,EAAMG,kBAEFhB,EACFA,EAAUa,GACDd,GACTA,EAAQc,KA2BR5B,SAAUA,EACVgB,KAAMA,OAMdN,EAAIsB,YAAc"}

package/dist/components/atoms/Text/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/Box"),t=require("../../../themes/tokens/typography/line-height.cjs.js");require("../../../themes/typography.cjs.js");var i=require("@mui/material/styles"),a=require("@mui/material/Typography");const h=i.styled(r,{shouldForwardProp:e=>"variant"!==e})((({variant:e})=>({flex:"1 0 0",height:t.lineHeight.desktop[{h1:"h1",h2:"h2",h3:"h3",h4:"h4",body:"b1",caption:"caption"}[e]],display:"flex"})));module.exports=({variant:r,children:t})=>e.jsx(h,{variant:r,children:e.jsx(a,{variant:{h1:"h1Strong",h2:"h2Strong",h3:"h3Strong",h4:"h4Strong",body:"b1Weak",caption:"captionWeak"}[r],children:t})});
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/Box"),t=require("../../../themes/tokens/typography/line-height.cjs.js");require("../../../themes/typography.cjs.js");var i=require("@mui/material/styles"),a=require("@mui/material/Typography");const h=i.styled(r,{shouldForwardProp:e=>"variant"!==e})(({variant:e})=>({flex:"1 0 0",height:t.lineHeight.desktop[{h1:"h1",h2:"h2",h3:"h3",h4:"h4",body:"b1",caption:"caption"}[e]],display:"flex"}));module.exports=({variant:r,children:t})=>e.jsx(h,{variant:r,children:e.jsx(a,{variant:{h1:"h1Strong",h2:"h2Strong",h3:"h3Strong",h4:"h4Strong",body:"b1Weak",caption:"captionWeak"}[r],children:t})});
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/Text/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Text/index.tsx"],"sourcesContent":["import Box from '@fd/components/atoms/Box';\nimport { lineHeight } from '@fd/themes/tokens/typography/line-height';\nimport { typography } from '@fd/themes/typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nimport Typography from '../Typography';\n\nexport type TextVariant = 'body' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4';\n\nexport interface TextProps {\n  variant: TextVariant;\n  children: React.ReactNode;\n}\n\ntype TypographyVariant = keyof typeof typography;\n\nconst TextFrame = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant: TextVariant }>(({ variant }) => {\n  const lineHeightMap: Record<TextVariant, keyof typeof lineHeight.desktop> = {\n    h1: 'h1',\n    h2: 'h2',\n    h3: 'h3',\n    h4: 'h4',\n    body: 'b1',\n    caption: 'caption',\n  };\n\n  return {\n    flex: '1 0 0',\n    height: lineHeight.desktop[lineHeightMap[variant]],\n    display: 'flex',\n  };\n});\n\nconst Text: React.FC<TextProps> = ({ variant, children }) => {\n  const variantMap: Record<TextVariant, TypographyVariant> = {\n    h1: 'h1Strong',\n    h2: 'h2Strong',\n    h3: 'h3Strong',\n    h4: 'h4Strong',\n    body: 'b1Weak',\n    caption: 'captionWeak',\n  };\n\n  return (\n    <TextFrame variant={variant}>\n      <Typography variant={variantMap[variant]}>{children}</Typography>\n    </TextFrame>\n  );\n};\n\nexport default Text;\n"],"names":["TextFrame","styled","Box","shouldForwardProp","prop","variant","flex","height","lineHeight","desktop","h1","h2","h3","h4","body","caption","display","children","_jsx","Typography"],"mappings":"0QAgBA,MAAMA,EAAYC,EAAAA,OAAOC,EAAK,CAC5BC,kBAAoBC,GAAkB,YAATA,GADbH,EAEW,EAAGI,cAUvB,CACLC,KAAM,QACNC,OAAQC,EAAAA,WAAWC,QAXuD,CAC1EC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,KAAM,KACNC,QAAS,WAKgCV,IACzCW,QAAS,0BAIqB,EAAGX,UAASY,cAW1CC,EAAAA,IAAClB,EAAS,CAACK,QAASA,EAAOY,SACzBC,MAACC,EAAU,CAACd,QAX2C,CACzDK,GAAI,WACJC,GAAI,WACJC,GAAI,WACJC,GAAI,WACJC,KAAM,SACNC,QAAS,eAKyBV,YAAWY"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Text/index.tsx"],"sourcesContent":["import Box from '@fd/components/atoms/Box';\nimport { lineHeight } from '@fd/themes/tokens/typography/line-height';\nimport { typography } from '@fd/themes/typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nimport Typography from '../Typography';\n\nexport type TextVariant = 'body' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4';\n\nexport interface TextProps {\n  variant: TextVariant;\n  children: React.ReactNode;\n}\n\ntype TypographyVariant = keyof typeof typography;\n\nconst TextFrame = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant: TextVariant }>(({ variant }) => {\n  const lineHeightMap: Record<TextVariant, keyof typeof lineHeight.desktop> = {\n    h1: 'h1',\n    h2: 'h2',\n    h3: 'h3',\n    h4: 'h4',\n    body: 'b1',\n    caption: 'caption',\n  };\n\n  return {\n    flex: '1 0 0',\n    height: lineHeight.desktop[lineHeightMap[variant]],\n    display: 'flex',\n  };\n});\n\nconst Text: React.FC<TextProps> = ({ variant, children }) => {\n  const variantMap: Record<TextVariant, TypographyVariant> = {\n    h1: 'h1Strong',\n    h2: 'h2Strong',\n    h3: 'h3Strong',\n    h4: 'h4Strong',\n    body: 'b1Weak',\n    caption: 'captionWeak',\n  };\n\n  return (\n    <TextFrame variant={variant}>\n      <Typography variant={variantMap[variant]}>{children}</Typography>\n    </TextFrame>\n  );\n};\n\nexport default Text;\n"],"names":["TextFrame","styled","Box","shouldForwardProp","prop","variant","flex","height","lineHeight","desktop","h1","h2","h3","h4","body","caption","display","children","_jsx","Typography"],"mappings":"0QAgBA,MAAMA,EAAYC,EAAAA,OAAOC,EAAK,CAC5BC,kBAAoBC,GAAkB,YAATA,GADbH,CAEW,EAAGI,cAUvB,CACLC,KAAM,QACNC,OAAQC,EAAAA,WAAWC,QAXuD,CAC1EC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,KAAM,KACNC,QAAS,WAKgCV,IACzCW,QAAS,yBAIqB,EAAGX,UAASY,cAW1CC,EAAAA,IAAClB,EAAS,CAACK,QAASA,EAAOY,SACzBC,MAACC,EAAU,CAACd,QAX2C,CACzDK,GAAI,WACJC,GAAI,WACJC,GAAI,WACJC,GAAI,WACJC,KAAM,SACNC,QAAS,eAKyBV,YAAWY"}

package/dist/components/atoms/Text/index.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import r from"@mui/material/Box";import{lineHeight as o}from"../../../themes/tokens/typography/line-height.js";import"../../../themes/typography.js";import{styled as a}from"@mui/material/styles";import h from"@mui/material/Typography";const i=a(r,{shouldForwardProp:t=>"variant"!==t})((({variant:t})=>({flex:"1 0 0",height:o.desktop[{h1:"h1",h2:"h2",h3:"h3",h4:"h4",body:"b1",caption:"caption"}[t]],display:"flex"}))),e=({variant:r,children:o})=>t(i,{variant:r,children:t(h,{variant:{h1:"h1Strong",h2:"h2Strong",h3:"h3Strong",h4:"h4Strong",body:"b1Weak",caption:"captionWeak"}[r],children:o})});export{e as default};
+import{jsx as t}from"react/jsx-runtime";import r from"@mui/material/Box";import{lineHeight as o}from"../../../themes/tokens/typography/line-height.js";import"../../../themes/typography.js";import{styled as a}from"@mui/material/styles";import h from"@mui/material/Typography";const i=a(r,{shouldForwardProp:t=>"variant"!==t})(({variant:t})=>({flex:"1 0 0",height:o.desktop[{h1:"h1",h2:"h2",h3:"h3",h4:"h4",body:"b1",caption:"caption"}[t]],display:"flex"})),e=({variant:r,children:o})=>t(i,{variant:r,children:t(h,{variant:{h1:"h1Strong",h2:"h2Strong",h3:"h3Strong",h4:"h4Strong",body:"b1Weak",caption:"captionWeak"}[r],children:o})});export{e as default};
 //# sourceMappingURL=index.js.map

package/dist/components/atoms/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Text/index.tsx"],"sourcesContent":["import Box from '@fd/components/atoms/Box';\nimport { lineHeight } from '@fd/themes/tokens/typography/line-height';\nimport { typography } from '@fd/themes/typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nimport Typography from '../Typography';\n\nexport type TextVariant = 'body' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4';\n\nexport interface TextProps {\n  variant: TextVariant;\n  children: React.ReactNode;\n}\n\ntype TypographyVariant = keyof typeof typography;\n\nconst TextFrame = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant: TextVariant }>(({ variant }) => {\n  const lineHeightMap: Record<TextVariant, keyof typeof lineHeight.desktop> = {\n    h1: 'h1',\n    h2: 'h2',\n    h3: 'h3',\n    h4: 'h4',\n    body: 'b1',\n    caption: 'caption',\n  };\n\n  return {\n    flex: '1 0 0',\n    height: lineHeight.desktop[lineHeightMap[variant]],\n    display: 'flex',\n  };\n});\n\nconst Text: React.FC<TextProps> = ({ variant, children }) => {\n  const variantMap: Record<TextVariant, TypographyVariant> = {\n    h1: 'h1Strong',\n    h2: 'h2Strong',\n    h3: 'h3Strong',\n    h4: 'h4Strong',\n    body: 'b1Weak',\n    caption: 'captionWeak',\n  };\n\n  return (\n    <TextFrame variant={variant}>\n      <Typography variant={variantMap[variant]}>{children}</Typography>\n    </TextFrame>\n  );\n};\n\nexport default Text;\n"],"names":["TextFrame","styled","Box","shouldForwardProp","prop","variant","flex","height","lineHeight","desktop","h1","h2","h3","h4","body","caption","display","Text","children","_jsx","Typography"],"mappings":"mRAgBA,MAAMA,EAAYC,EAAOC,EAAK,CAC5BC,kBAAoBC,GAAkB,YAATA,GADbH,EAEW,EAAGI,cAUvB,CACLC,KAAM,QACNC,OAAQC,EAAWC,QAXuD,CAC1EC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,KAAM,KACNC,QAAS,WAKgCV,IACzCW,QAAS,WAIPC,EAA4B,EAAGZ,UAASa,cAW1CC,EAACnB,EAAS,CAACK,QAASA,EAAOa,SACzBC,EAACC,EAAU,CAACf,QAX2C,CACzDK,GAAI,WACJC,GAAI,WACJC,GAAI,WACJC,GAAI,WACJC,KAAM,SACNC,QAAS,eAKyBV,YAAWa"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Text/index.tsx"],"sourcesContent":["import Box from '@fd/components/atoms/Box';\nimport { lineHeight } from '@fd/themes/tokens/typography/line-height';\nimport { typography } from '@fd/themes/typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nimport Typography from '../Typography';\n\nexport type TextVariant = 'body' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4';\n\nexport interface TextProps {\n  variant: TextVariant;\n  children: React.ReactNode;\n}\n\ntype TypographyVariant = keyof typeof typography;\n\nconst TextFrame = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant: TextVariant }>(({ variant }) => {\n  const lineHeightMap: Record<TextVariant, keyof typeof lineHeight.desktop> = {\n    h1: 'h1',\n    h2: 'h2',\n    h3: 'h3',\n    h4: 'h4',\n    body: 'b1',\n    caption: 'caption',\n  };\n\n  return {\n    flex: '1 0 0',\n    height: lineHeight.desktop[lineHeightMap[variant]],\n    display: 'flex',\n  };\n});\n\nconst Text: React.FC<TextProps> = ({ variant, children }) => {\n  const variantMap: Record<TextVariant, TypographyVariant> = {\n    h1: 'h1Strong',\n    h2: 'h2Strong',\n    h3: 'h3Strong',\n    h4: 'h4Strong',\n    body: 'b1Weak',\n    caption: 'captionWeak',\n  };\n\n  return (\n    <TextFrame variant={variant}>\n      <Typography variant={variantMap[variant]}>{children}</Typography>\n    </TextFrame>\n  );\n};\n\nexport default Text;\n"],"names":["TextFrame","styled","Box","shouldForwardProp","prop","variant","flex","height","lineHeight","desktop","h1","h2","h3","h4","body","caption","display","Text","children","_jsx","Typography"],"mappings":"mRAgBA,MAAMA,EAAYC,EAAOC,EAAK,CAC5BC,kBAAoBC,GAAkB,YAATA,GADbH,CAEW,EAAGI,cAUvB,CACLC,KAAM,QACNC,OAAQC,EAAWC,QAXuD,CAC1EC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,KAAM,KACNC,QAAS,WAKgCV,IACzCW,QAAS,UAIPC,EAA4B,EAAGZ,UAASa,cAW1CC,EAACnB,EAAS,CAACK,QAASA,EAAOa,SACzBC,EAACC,EAAU,CAACf,QAX2C,CACzDK,GAAI,WACJC,GAAI,WACJC,GAAI,WACJC,GAAI,WACJC,KAAM,SACNC,QAAS,eAKyBV,YAAWa"}

package/dist/components/atoms/TextField/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/Box"),t=require("@mui/material/FormHelperText"),l=require("@mui/material/InputAdornment"),s=require("@mui/material/InputLabel"),d=require("@mui/material/styles"),o=require("@mui/material/TextField"),n=require("../../../icons/CancelCircle/index.cjs.js"),a=require("../../../icons/View/index.cjs.js"),u=require("../../../icons/ViewOff/index.cjs.js"),c=require("../../../providers/TranslationProvider.cjs.js"),p=require("../IconButton/index.cjs.js");const x=d.styled(i,{shouldForwardProp:e=>"fullWidth"!==e})((({theme:e,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),width:r?"100%":"min(364px, 100%)"}))),m=d.styled(o,{shouldForwardProp:e=>"fullWidth"!==e})((({fullWidth:e=!1})=>({display:"flex",width:e?"100%":"auto"}))),h=d.styled(l,{shouldForwardProp:e=>"disabled"!==e})((({theme:e,disabled:r=!1})=>({color:r?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]}))),j=({disabled:l=!1,endAdornment:d,errorText:o,fdKey:j,fullWidth:b=!1,helperText:f,label:q,multiline:y=!1,required:w=!1,startAdornment:v,type:P="text",...F})=>{const[I,T]=r.useState(!1),{translate:W}=c.useTranslation(),A=f?`${j}-helper-text`:void 0,B=o?`${j}-error-message`:void 0,g=[A,B].filter(Boolean).join(" ")||void 0,_=F.slotProps?.htmlInput?.["aria-describedby"],C=[_,g].filter(Boolean).join(" ")||void 0,H=!!o&&!l,O="password"===P,S=()=>T((e=>!e)),V=O?e.jsx(h,{position:"end",children:e.jsx(p.IconButton,{"aria-label":W(I?"Hide_password":"Show_password"),disabled:l,onClick:S,size:"small",tone:"neutral",variant:"tertiary",children:I?e.jsx(u,{}):e.jsx(a,{})})}):d?e.jsx(h,{disabled:l,position:"end",children:d}):void 0,$=(()=>{if(v)return e.jsx(h,{disabled:l,position:"start",children:v})})();return e.jsxs(x,{fullWidth:b,children:[e.jsxs(i,{children:[q&&e.jsx(s,{disabled:l,htmlFor:j,required:w,children:q}),f&&e.jsx(t,{disabled:l,id:A,children:f})]}),H&&e.jsxs(t,{error:!0,id:B,children:[e.jsx(n,{}),o]}),e.jsx(m,{...F,"data-fd":j,disabled:l,error:H,fullWidth:b,id:j,label:"",multiline:y,required:w,slotProps:{input:{...F.slotProps?.input??{},...$&&{startAdornment:$},...V&&{endAdornment:V}},htmlInput:{...F.slotProps?.htmlInput??{},"aria-describedby":C}},type:O?I?"text":"password":P,variant:"outlined"})]})};exports.TextField=j,exports.default=j;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/Box"),t=require("@mui/material/FormHelperText"),l=require("@mui/material/InputAdornment"),s=require("@mui/material/InputLabel"),d=require("@mui/material/styles"),o=require("@mui/material/TextField"),n=require("../../../icons/CancelCircle/index.cjs.js"),a=require("../../../icons/View/index.cjs.js"),u=require("../../../icons/ViewOff/index.cjs.js"),c=require("../../../providers/TranslationProvider.cjs.js"),p=require("../IconButton/index.cjs.js");const x=d.styled(i,{shouldForwardProp:e=>"fullWidth"!==e})(({theme:e,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),width:r?"100%":"min(364px, 100%)"})),m=d.styled(o,{shouldForwardProp:e=>"fullWidth"!==e})(({fullWidth:e=!1})=>({display:"flex",width:e?"100%":"auto"})),h=d.styled(l,{shouldForwardProp:e=>"disabled"!==e})(({theme:e,disabled:r=!1})=>({color:r?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]})),j=({disabled:l=!1,endAdornment:d,errorText:o,fdKey:j,fullWidth:b=!1,helperText:f,label:q,multiline:y=!1,required:w=!1,startAdornment:v,type:P="text",...F})=>{const[I,T]=r.useState(!1),{translate:W}=c.useTranslation(),A=f?`${j}-helper-text`:void 0,B=o?`${j}-error-message`:void 0,g=[A,B].filter(Boolean).join(" ")||void 0,_=F.slotProps?.htmlInput?.["aria-describedby"],C=[_,g].filter(Boolean).join(" ")||void 0,H=!!o&&!l,O="password"===P,S=()=>T(e=>!e),V=O?e.jsx(h,{position:"end",children:e.jsx(p.IconButton,{"aria-label":W(I?"Hide_password":"Show_password"),disabled:l,onClick:S,size:"small",tone:"neutral",variant:"tertiary",children:I?e.jsx(u,{}):e.jsx(a,{})})}):d?e.jsx(h,{disabled:l,position:"end",children:d}):void 0,$=(()=>{if(v)return e.jsx(h,{disabled:l,position:"start",children:v})})();return e.jsxs(x,{fullWidth:b,children:[e.jsxs(i,{children:[q&&e.jsx(s,{disabled:l,htmlFor:j,required:w,children:q}),f&&e.jsx(t,{disabled:l,id:A,children:f})]}),H&&e.jsxs(t,{error:!0,id:B,children:[e.jsx(n,{}),o]}),e.jsx(m,{...F,"data-fd":j,disabled:l,error:H,fullWidth:b,id:j,label:"",multiline:y,required:w,slotProps:{input:{...F.slotProps?.input??{},...$&&{startAdornment:$},...V&&{endAdornment:V}},htmlInput:{...F.slotProps?.htmlInput??{},"aria-describedby":C}},type:O?I?"text":"password":P,variant:"outlined"})]})};exports.TextField=j,exports.default=j;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/TextField/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport IconButton from '../IconButton';\n\n/**\n * The props for the TextField component.\n */\nexport type TextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'variant'> & {\n  /** The content rendered at the end of the input (suffix). */\n  endAdornment?: ReactNode;\n  /** The error text to display. */\n  errorText?: string;\n  /** The key for the input. */\n  fdKey: string;\n  /** The content rendered at the start of the input (prefix). */\n  startAdornment?: ReactNode;\n};\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  display: 'flex',\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nconst StyledInputAdornment = styled(MuiInputAdornment, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  color: disabled ? theme.palette.semantic.icon['icon-disabled'] : theme.palette.semantic.icon['icon-strong'],\n}));\n\n/**\n * A TextField component.\n *\n * @param props - The component props\n * @returns The rendered TextField component\n */\nexport const TextField = ({\n  disabled = false,\n  endAdornment = undefined,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  multiline = false,\n  required = false,\n  startAdornment = undefined,\n  type = 'text',\n  ...props\n}: TextFieldProps): JSX.Element => {\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n\n  const { translate } = useTranslation();\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n  const incomingAriaDescribedBy = (props.slotProps?.htmlInput as Record<string, unknown>)?.[\n    'aria-describedby'\n  ] as string | undefined;\n  const mergedAriaDescribedBy =\n    [incomingAriaDescribedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const isPassword = type === 'password';\n\n  const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n  const getFieldType = (): MuiTextFieldProps['type'] => {\n    if (isPassword) {\n      return showPassword ? 'text' : 'password';\n    }\n\n    return type;\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    if (isPassword) {\n      return (\n        <StyledInputAdornment position=\"end\">\n          <IconButton\n            aria-label={showPassword ? translate('Hide_password') : translate('Show_password')}\n            disabled={disabled}\n            onClick={handleClickShowPassword}\n            size=\"small\"\n            tone=\"neutral\"\n            variant=\"tertiary\"\n          >\n            {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n          </IconButton>\n        </StyledInputAdornment>\n      );\n    }\n    if (endAdornment) {\n      return (\n        <StyledInputAdornment disabled={disabled} position=\"end\">\n          {endAdornment}\n        </StyledInputAdornment>\n      );\n    }\n\n    return undefined;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    if (startAdornment) {\n      return (\n        <StyledInputAdornment disabled={disabled} position=\"start\">\n          {startAdornment}\n        </StyledInputAdornment>\n      );\n    }\n\n    return undefined;\n  };\n\n  const renderedEndAdornment = renderEndAdornment();\n  const renderedStartAdornment = renderStartAdornment();\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      <Box>\n        {label && (\n          <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n            {label}\n          </MuiInputLabel>\n        )}\n\n        {helperText && (\n          <MuiFormHelperText disabled={disabled} id={helperTextId}>\n            {helperText}\n          </MuiFormHelperText>\n        )}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledTextField\n        {...props}\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        id={fdKey}\n        label=\"\" // Remove label from TextField since we're rendering it separately\n        multiline={multiline}\n        required={required}\n        slotProps={{\n          input: {\n            ...(props.slotProps?.input ?? {}),\n            // Only pass startAdornment and endAdornment if they are defined\n            ...(renderedStartAdornment && { startAdornment: renderedStartAdornment }),\n            ...(renderedEndAdornment && { endAdornment: renderedEndAdornment }),\n          },\n          htmlInput: {\n            ...(props.slotProps?.htmlInput ?? {}),\n            'aria-describedby': mergedAriaDescribedBy,\n          },\n        }}\n        type={getFieldType()}\n        variant=\"outlined\"\n      />\n    </StyledContainer>\n  );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","StyledInputAdornment","MuiInputAdornment","disabled","color","palette","semantic","icon","TextField","endAdornment","errorText","fdKey","helperText","label","multiline","required","startAdornment","type","props","showPassword","setShowPassword","useState","translate","useTranslation","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","incomingAriaDescribedBy","slotProps","htmlInput","mergedAriaDescribedBy","isError","isPassword","handleClickShowPassword","show","renderedEndAdornment","_jsx","position","children","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderedStartAdornment","renderStartAdornment","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","input"],"mappings":"klBA8BA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAAA,OAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,WAGxBQ,EAAuBb,EAAAA,OAAOc,EAAmB,CACrDZ,kBAAoBC,GAAkB,aAATA,GADFH,EAEF,EAAGI,QAAOW,YAAW,MAAO,CACrDC,MAAOD,EAAWX,EAAMa,QAAQC,SAASC,KAAK,iBAAmBf,EAAMa,QAAQC,SAASC,KAAK,mBASlFC,EAAY,EACvBL,YAAW,EACXM,eACAC,YACAC,QACAlB,aAAY,EACZmB,aACAC,QACAC,aAAY,EACZC,YAAW,EACXC,iBACAC,OAAO,UACJC,MAEH,MAAOC,EAAcC,GAAmBC,EAAAA,UAAkB,IAEpDC,UAAEA,GAAcC,mBAEhBC,EAAeZ,EAAa,GAAGD,qBAAsBc,EACrDC,EAAiBhB,EAAY,GAAGC,uBAAwBc,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAC9EM,EAA2Bb,EAAMc,WAAWC,YAChD,oBAEIC,EACJ,CAACH,EAAyBJ,GAAiBC,OAAOC,SAASC,KAAK,WAAQL,EAEpEU,IAAYzB,IAAcP,EAC1BiC,EAAsB,aAATnB,EAEboB,EAA0B,IAAYjB,GAAiBkB,IAAUA,IAkDjEC,EAvCAH,EAEAI,EAAAA,IAACvC,EAAoB,CAACwC,SAAS,MAAKC,SAClCF,EAAAA,IAACG,EAAAA,WAAU,CAAA,aACkBrB,EAAfH,EAAyB,gBAA6B,iBAClEhB,SAAUA,EACVyC,QAASP,EACTQ,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUL,SAEjBvB,EAAeqB,EAAAA,IAACQ,EAAW,CAAA,GAAMR,EAAAA,IAACS,EAAQ,CAAA,OAK/CxC,EAEA+B,EAAAA,IAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,MAAKC,SACrDjC,SAHP,EAwBIyC,EAbuB,MAC3B,GAAIlC,EACF,OACEwB,EAAAA,IAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,QAAOC,SACvD1B,KASsBmC,GAE/B,OACEC,EAAAA,KAACjE,EAAe,CAACM,UAAWA,YAC1B2D,EAAAA,KAAC/D,aACEwB,GACC2B,EAAAA,IAACa,GAAclD,SAAUA,EAAUmD,QAAS3C,EAAOI,SAAUA,EAAQ2B,SAClE7B,IAIJD,GACC4B,EAAAA,IAACe,EAAiB,CAACpD,SAAUA,EAAUqD,GAAIhC,EAAYkB,SACpD9B,OAKNuB,GACCiB,EAAAA,KAACG,EAAiB,CAACE,OAAK,EAACD,GAAI9B,EAAcgB,SAAA,CACzCF,EAAAA,IAACkB,EAAgB,CAAA,GAEhBhD,KAIL8B,EAAAA,IAACzC,EAAe,IACVmB,EAAK,UACAP,EACTR,SAAUA,EACVsD,MAAOtB,EACP1C,UAAWA,EACX+D,GAAI7C,EACJE,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACViB,UAAW,CACT2B,MAAO,IACDzC,EAAMc,WAAW2B,OAAS,MAE1BT,GAA0B,CAAElC,eAAgBkC,MAC5CX,GAAwB,CAAE9B,aAAc8B,IAE9CN,UAAW,IACLf,EAAMc,WAAWC,WAAa,GAClC,mBAAoBC,IAGxBjB,KAhGAmB,EACKjB,EAAe,OAAS,WAG1BF,EA6FH8B,QAAQ"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport IconButton from '../IconButton';\n\n/**\n * The props for the TextField component.\n */\nexport type TextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'variant'> & {\n  /** The content rendered at the end of the input (suffix). */\n  endAdornment?: ReactNode;\n  /** The error text to display. */\n  errorText?: string;\n  /** The key for the input. */\n  fdKey: string;\n  /** The content rendered at the start of the input (prefix). */\n  startAdornment?: ReactNode;\n};\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  display: 'flex',\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nconst StyledInputAdornment = styled(MuiInputAdornment, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  color: disabled ? theme.palette.semantic.icon['icon-disabled'] : theme.palette.semantic.icon['icon-strong'],\n}));\n\n/**\n * A TextField component.\n *\n * @param props - The component props\n * @returns The rendered TextField component\n */\nexport const TextField = ({\n  disabled = false,\n  endAdornment = undefined,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  multiline = false,\n  required = false,\n  startAdornment = undefined,\n  type = 'text',\n  ...props\n}: TextFieldProps): JSX.Element => {\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n\n  const { translate } = useTranslation();\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n  const incomingAriaDescribedBy = (props.slotProps?.htmlInput as Record<string, unknown>)?.[\n    'aria-describedby'\n  ] as string | undefined;\n  const mergedAriaDescribedBy =\n    [incomingAriaDescribedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const isPassword = type === 'password';\n\n  const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n  const getFieldType = (): MuiTextFieldProps['type'] => {\n    if (isPassword) {\n      return showPassword ? 'text' : 'password';\n    }\n\n    return type;\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    if (isPassword) {\n      return (\n        <StyledInputAdornment position=\"end\">\n          <IconButton\n            aria-label={showPassword ? translate('Hide_password') : translate('Show_password')}\n            disabled={disabled}\n            onClick={handleClickShowPassword}\n            size=\"small\"\n            tone=\"neutral\"\n            variant=\"tertiary\"\n          >\n            {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n          </IconButton>\n        </StyledInputAdornment>\n      );\n    }\n    if (endAdornment) {\n      return (\n        <StyledInputAdornment disabled={disabled} position=\"end\">\n          {endAdornment}\n        </StyledInputAdornment>\n      );\n    }\n\n    return undefined;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    if (startAdornment) {\n      return (\n        <StyledInputAdornment disabled={disabled} position=\"start\">\n          {startAdornment}\n        </StyledInputAdornment>\n      );\n    }\n\n    return undefined;\n  };\n\n  const renderedEndAdornment = renderEndAdornment();\n  const renderedStartAdornment = renderStartAdornment();\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      <Box>\n        {label && (\n          <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n            {label}\n          </MuiInputLabel>\n        )}\n\n        {helperText && (\n          <MuiFormHelperText disabled={disabled} id={helperTextId}>\n            {helperText}\n          </MuiFormHelperText>\n        )}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledTextField\n        {...props}\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        id={fdKey}\n        label=\"\" // Remove label from TextField since we're rendering it separately\n        multiline={multiline}\n        required={required}\n        slotProps={{\n          input: {\n            ...(props.slotProps?.input ?? {}),\n            // Only pass startAdornment and endAdornment if they are defined\n            ...(renderedStartAdornment && { startAdornment: renderedStartAdornment }),\n            ...(renderedEndAdornment && { endAdornment: renderedEndAdornment }),\n          },\n          htmlInput: {\n            ...(props.slotProps?.htmlInput ?? {}),\n            'aria-describedby': mergedAriaDescribedBy,\n          },\n        }}\n        type={getFieldType()}\n        variant=\"outlined\"\n      />\n    </StyledContainer>\n  );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","StyledInputAdornment","MuiInputAdornment","disabled","color","palette","semantic","icon","TextField","endAdornment","errorText","fdKey","helperText","label","multiline","required","startAdornment","type","props","showPassword","setShowPassword","useState","translate","useTranslation","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","incomingAriaDescribedBy","slotProps","htmlInput","mergedAriaDescribedBy","isError","isPassword","handleClickShowPassword","show","renderedEndAdornment","_jsx","position","children","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderedStartAdornment","renderStartAdornment","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","input"],"mappings":"klBA8BA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,CAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,sBAGxBM,EAAkBX,EAAAA,OAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,CAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,UAGxBQ,EAAuBb,EAAAA,OAAOc,EAAmB,CACrDZ,kBAAoBC,GAAkB,aAATA,GADFH,CAEF,EAAGI,QAAOW,YAAW,MAAO,CACrDC,MAAOD,EAAWX,EAAMa,QAAQC,SAASC,KAAK,iBAAmBf,EAAMa,QAAQC,SAASC,KAAK,kBASlFC,EAAY,EACvBL,YAAW,EACXM,eACAC,YACAC,QACAlB,aAAY,EACZmB,aACAC,QACAC,aAAY,EACZC,YAAW,EACXC,iBACAC,OAAO,UACJC,MAEH,MAAOC,EAAcC,GAAmBC,EAAAA,UAAkB,IAEpDC,UAAEA,GAAcC,mBAEhBC,EAAeZ,EAAa,GAAGD,qBAAsBc,EACrDC,EAAiBhB,EAAY,GAAGC,uBAAwBc,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAC9EM,EAA2Bb,EAAMc,WAAWC,YAChD,oBAEIC,EACJ,CAACH,EAAyBJ,GAAiBC,OAAOC,SAASC,KAAK,WAAQL,EAEpEU,IAAYzB,IAAcP,EAC1BiC,EAAsB,aAATnB,EAEboB,EAA0B,IAAYjB,EAAiBkB,IAAUA,GAkDjEC,EAvCAH,EAEAI,EAAAA,IAACvC,EAAoB,CAACwC,SAAS,MAAKC,SAClCF,EAAAA,IAACG,EAAAA,WAAU,CAAA,aACkBrB,EAAfH,EAAyB,gBAA6B,iBAClEhB,SAAUA,EACVyC,QAASP,EACTQ,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUL,SAEjBvB,EAAeqB,EAAAA,IAACQ,EAAW,CAAA,GAAMR,EAAAA,IAACS,EAAQ,CAAA,OAK/CxC,EAEA+B,EAAAA,IAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,MAAKC,SACrDjC,SAHP,EAwBIyC,EAbuB,MAC3B,GAAIlC,EACF,OACEwB,EAAAA,IAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,QAAOC,SACvD1B,KASsBmC,GAE/B,OACEC,EAAAA,KAACjE,EAAe,CAACM,UAAWA,YAC1B2D,EAAAA,KAAC/D,aACEwB,GACC2B,EAAAA,IAACa,GAAclD,SAAUA,EAAUmD,QAAS3C,EAAOI,SAAUA,EAAQ2B,SAClE7B,IAIJD,GACC4B,EAAAA,IAACe,EAAiB,CAACpD,SAAUA,EAAUqD,GAAIhC,EAAYkB,SACpD9B,OAKNuB,GACCiB,EAAAA,KAACG,EAAiB,CAACE,OAAK,EAACD,GAAI9B,EAAcgB,SAAA,CACzCF,EAAAA,IAACkB,EAAgB,CAAA,GAEhBhD,KAIL8B,EAAAA,IAACzC,EAAe,IACVmB,EAAK,UACAP,EACTR,SAAUA,EACVsD,MAAOtB,EACP1C,UAAWA,EACX+D,GAAI7C,EACJE,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACViB,UAAW,CACT2B,MAAO,IACDzC,EAAMc,WAAW2B,OAAS,MAE1BT,GAA0B,CAAElC,eAAgBkC,MAC5CX,GAAwB,CAAE9B,aAAc8B,IAE9CN,UAAW,IACLf,EAAMc,WAAWC,WAAa,GAClC,mBAAoBC,IAGxBjB,KAhGAmB,EACKjB,EAAe,OAAS,WAG1BF,EA6FH8B,QAAQ"}

package/dist/components/atoms/TextField/index.js

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as r}from"react/jsx-runtime";import{useState as e}from"react";import t from"@mui/material/Box";import o from"@mui/material/FormHelperText";import l from"@mui/material/InputAdornment";import d from"@mui/material/InputLabel";import{styled as n}from"@mui/material/styles";import a from"@mui/material/TextField";import s from"../../../icons/CancelCircle/index.js";import m from"../../../icons/View/index.js";import p from"../../../icons/ViewOff/index.js";import{useTranslation as u}from"../../../providers/TranslationProvider.js";import{IconButton as c}from"../IconButton/index.js";const f=n(t,{shouldForwardProp:i=>"fullWidth"!==i})((({theme:i,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:i.spacing(.5),width:r?"100%":"min(364px, 100%)"}))),h=n(a,{shouldForwardProp:i=>"fullWidth"!==i})((({fullWidth:i=!1})=>({display:"flex",width:i?"100%":"auto"}))),b=n(l,{shouldForwardProp:i=>"disabled"!==i})((({theme:i,disabled:r=!1})=>({color:r?i.palette.semantic.icon["icon-disabled"]:i.palette.semantic.icon["icon-strong"]}))),x=({disabled:l=!1,endAdornment:n,errorText:a,fdKey:x,fullWidth:w=!1,helperText:v,label:y,multiline:j=!1,required:P=!1,startAdornment:W,type:F="text",...I})=>{const[A,T]=e(!1),{translate:g}=u(),B=v?`${x}-helper-text`:void 0,q=a?`${x}-error-message`:void 0,C=[B,q].filter(Boolean).join(" ")||void 0,H=I.slotProps?.htmlInput?.["aria-describedby"],V=[H,C].filter(Boolean).join(" ")||void 0,$=!!a&&!l,_="password"===F,k=()=>T((i=>!i)),z=_?r(b,{position:"end",children:r(c,{"aria-label":g(A?"Hide_password":"Show_password"),disabled:l,onClick:k,size:"small",tone:"neutral",variant:"tertiary",children:r(A?p:m,{})})}):n?r(b,{disabled:l,position:"end",children:n}):void 0,D=(()=>{if(W)return r(b,{disabled:l,position:"start",children:W})})();return i(f,{fullWidth:w,children:[i(t,{children:[y&&r(d,{disabled:l,htmlFor:x,required:P,children:y}),v&&r(o,{disabled:l,id:B,children:v})]}),$&&i(o,{error:!0,id:q,children:[r(s,{}),a]}),r(h,{...I,"data-fd":x,disabled:l,error:$,fullWidth:w,id:x,label:"",multiline:j,required:P,slotProps:{input:{...I.slotProps?.input??{},...D&&{startAdornment:D},...z&&{endAdornment:z}},htmlInput:{...I.slotProps?.htmlInput??{},"aria-describedby":V}},type:_?A?"text":"password":F,variant:"outlined"})]})};export{x as TextField,x as default};
+import{jsxs as i,jsx as r}from"react/jsx-runtime";import{useState as e}from"react";import t from"@mui/material/Box";import o from"@mui/material/FormHelperText";import l from"@mui/material/InputAdornment";import d from"@mui/material/InputLabel";import{styled as n}from"@mui/material/styles";import a from"@mui/material/TextField";import s from"../../../icons/CancelCircle/index.js";import m from"../../../icons/View/index.js";import p from"../../../icons/ViewOff/index.js";import{useTranslation as u}from"../../../providers/TranslationProvider.js";import{IconButton as c}from"../IconButton/index.js";const f=n(t,{shouldForwardProp:i=>"fullWidth"!==i})(({theme:i,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:i.spacing(.5),width:r?"100%":"min(364px, 100%)"})),h=n(a,{shouldForwardProp:i=>"fullWidth"!==i})(({fullWidth:i=!1})=>({display:"flex",width:i?"100%":"auto"})),b=n(l,{shouldForwardProp:i=>"disabled"!==i})(({theme:i,disabled:r=!1})=>({color:r?i.palette.semantic.icon["icon-disabled"]:i.palette.semantic.icon["icon-strong"]})),x=({disabled:l=!1,endAdornment:n,errorText:a,fdKey:x,fullWidth:w=!1,helperText:v,label:y,multiline:j=!1,required:P=!1,startAdornment:W,type:F="text",...I})=>{const[A,T]=e(!1),{translate:g}=u(),B=v?`${x}-helper-text`:void 0,q=a?`${x}-error-message`:void 0,C=[B,q].filter(Boolean).join(" ")||void 0,H=I.slotProps?.htmlInput?.["aria-describedby"],V=[H,C].filter(Boolean).join(" ")||void 0,$=!!a&&!l,_="password"===F,k=()=>T(i=>!i),z=_?r(b,{position:"end",children:r(c,{"aria-label":g(A?"Hide_password":"Show_password"),disabled:l,onClick:k,size:"small",tone:"neutral",variant:"tertiary",children:r(A?p:m,{})})}):n?r(b,{disabled:l,position:"end",children:n}):void 0,D=(()=>{if(W)return r(b,{disabled:l,position:"start",children:W})})();return i(f,{fullWidth:w,children:[i(t,{children:[y&&r(d,{disabled:l,htmlFor:x,required:P,children:y}),v&&r(o,{disabled:l,id:B,children:v})]}),$&&i(o,{error:!0,id:q,children:[r(s,{}),a]}),r(h,{...I,"data-fd":x,disabled:l,error:$,fullWidth:w,id:x,label:"",multiline:j,required:P,slotProps:{input:{...I.slotProps?.input??{},...D&&{startAdornment:D},...z&&{endAdornment:z}},htmlInput:{...I.slotProps?.htmlInput??{},"aria-describedby":V}},type:_?A?"text":"password":F,variant:"outlined"})]})};export{x as TextField,x as default};
 //# sourceMappingURL=index.js.map

package/dist/components/atoms/TextField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport IconButton from '../IconButton';\n\n/**\n * The props for the TextField component.\n */\nexport type TextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'variant'> & {\n  /** The content rendered at the end of the input (suffix). */\n  endAdornment?: ReactNode;\n  /** The error text to display. */\n  errorText?: string;\n  /** The key for the input. */\n  fdKey: string;\n  /** The content rendered at the start of the input (prefix). */\n  startAdornment?: ReactNode;\n};\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  display: 'flex',\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nconst StyledInputAdornment = styled(MuiInputAdornment, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  color: disabled ? theme.palette.semantic.icon['icon-disabled'] : theme.palette.semantic.icon['icon-strong'],\n}));\n\n/**\n * A TextField component.\n *\n * @param props - The component props\n * @returns The rendered TextField component\n */\nexport const TextField = ({\n  disabled = false,\n  endAdornment = undefined,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  multiline = false,\n  required = false,\n  startAdornment = undefined,\n  type = 'text',\n  ...props\n}: TextFieldProps): JSX.Element => {\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n\n  const { translate } = useTranslation();\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n  const incomingAriaDescribedBy = (props.slotProps?.htmlInput as Record<string, unknown>)?.[\n    'aria-describedby'\n  ] as string | undefined;\n  const mergedAriaDescribedBy =\n    [incomingAriaDescribedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const isPassword = type === 'password';\n\n  const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n  const getFieldType = (): MuiTextFieldProps['type'] => {\n    if (isPassword) {\n      return showPassword ? 'text' : 'password';\n    }\n\n    return type;\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    if (isPassword) {\n      return (\n        <StyledInputAdornment position=\"end\">\n          <IconButton\n            aria-label={showPassword ? translate('Hide_password') : translate('Show_password')}\n            disabled={disabled}\n            onClick={handleClickShowPassword}\n            size=\"small\"\n            tone=\"neutral\"\n            variant=\"tertiary\"\n          >\n            {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n          </IconButton>\n        </StyledInputAdornment>\n      );\n    }\n    if (endAdornment) {\n      return (\n        <StyledInputAdornment disabled={disabled} position=\"end\">\n          {endAdornment}\n        </StyledInputAdornment>\n      );\n    }\n\n    return undefined;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    if (startAdornment) {\n      return (\n        <StyledInputAdornment disabled={disabled} position=\"start\">\n          {startAdornment}\n        </StyledInputAdornment>\n      );\n    }\n\n    return undefined;\n  };\n\n  const renderedEndAdornment = renderEndAdornment();\n  const renderedStartAdornment = renderStartAdornment();\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      <Box>\n        {label && (\n          <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n            {label}\n          </MuiInputLabel>\n        )}\n\n        {helperText && (\n          <MuiFormHelperText disabled={disabled} id={helperTextId}>\n            {helperText}\n          </MuiFormHelperText>\n        )}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledTextField\n        {...props}\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        id={fdKey}\n        label=\"\" // Remove label from TextField since we're rendering it separately\n        multiline={multiline}\n        required={required}\n        slotProps={{\n          input: {\n            ...(props.slotProps?.input ?? {}),\n            // Only pass startAdornment and endAdornment if they are defined\n            ...(renderedStartAdornment && { startAdornment: renderedStartAdornment }),\n            ...(renderedEndAdornment && { endAdornment: renderedEndAdornment }),\n          },\n          htmlInput: {\n            ...(props.slotProps?.htmlInput ?? {}),\n            'aria-describedby': mergedAriaDescribedBy,\n          },\n        }}\n        type={getFieldType()}\n        variant=\"outlined\"\n      />\n    </StyledContainer>\n  );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","StyledInputAdornment","MuiInputAdornment","disabled","color","palette","semantic","icon","TextField","endAdornment","errorText","fdKey","helperText","label","multiline","required","startAdornment","type","props","showPassword","setShowPassword","useState","translate","useTranslation","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","incomingAriaDescribedBy","slotProps","htmlInput","mergedAriaDescribedBy","isError","isPassword","handleClickShowPassword","show","renderedEndAdornment","_jsx","position","children","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderedStartAdornment","renderStartAdornment","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","input"],"mappings":"ulBA8BA,MAAMA,EAAkBC,EAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,WAGxBQ,EAAuBb,EAAOc,EAAmB,CACrDZ,kBAAoBC,GAAkB,aAATA,GADFH,EAEF,EAAGI,QAAOW,YAAW,MAAO,CACrDC,MAAOD,EAAWX,EAAMa,QAAQC,SAASC,KAAK,iBAAmBf,EAAMa,QAAQC,SAASC,KAAK,mBASlFC,EAAY,EACvBL,YAAW,EACXM,eACAC,YACAC,QACAlB,aAAY,EACZmB,aACAC,QACAC,aAAY,EACZC,YAAW,EACXC,iBACAC,OAAO,UACJC,MAEH,MAAOC,EAAcC,GAAmBC,GAAkB,IAEpDC,UAAEA,GAAcC,IAEhBC,EAAeZ,EAAa,GAAGD,qBAAsBc,EACrDC,EAAiBhB,EAAY,GAAGC,uBAAwBc,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAC9EM,EAA2Bb,EAAMc,WAAWC,YAChD,oBAEIC,EACJ,CAACH,EAAyBJ,GAAiBC,OAAOC,SAASC,KAAK,WAAQL,EAEpEU,IAAYzB,IAAcP,EAC1BiC,EAAsB,aAATnB,EAEboB,EAA0B,IAAYjB,GAAiBkB,IAAUA,IAkDjEC,EAvCAH,EAEAI,EAACvC,EAAoB,CAACwC,SAAS,MAAKC,SAClCF,EAACG,EAAU,CAAA,aACkBrB,EAAfH,EAAyB,gBAA6B,iBAClEhB,SAAUA,EACVyC,QAASP,EACTQ,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUL,SAEFF,EAAfrB,EAAgB6B,EAAkBC,EAAP,CAAA,OAKhCxC,EAEA+B,EAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,MAAKC,SACrDjC,SAHP,EAwBIyC,EAbuB,MAC3B,GAAIlC,EACF,OACEwB,EAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,QAAOC,SACvD1B,KASsBmC,GAE/B,OACEC,EAACjE,EAAe,CAACM,UAAWA,YAC1B2D,EAAC/D,aACEwB,GACC2B,EAACa,GAAclD,SAAUA,EAAUmD,QAAS3C,EAAOI,SAAUA,EAAQ2B,SAClE7B,IAIJD,GACC4B,EAACe,EAAiB,CAACpD,SAAUA,EAAUqD,GAAIhC,EAAYkB,SACpD9B,OAKNuB,GACCiB,EAACG,EAAiB,CAACE,OAAK,EAACD,GAAI9B,EAAcgB,SAAA,CACzCF,EAACkB,EAAgB,CAAA,GAEhBhD,KAIL8B,EAACzC,EAAe,IACVmB,EAAK,UACAP,EACTR,SAAUA,EACVsD,MAAOtB,EACP1C,UAAWA,EACX+D,GAAI7C,EACJE,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACViB,UAAW,CACT2B,MAAO,IACDzC,EAAMc,WAAW2B,OAAS,MAE1BT,GAA0B,CAAElC,eAAgBkC,MAC5CX,GAAwB,CAAE9B,aAAc8B,IAE9CN,UAAW,IACLf,EAAMc,WAAWC,WAAa,GAClC,mBAAoBC,IAGxBjB,KAhGAmB,EACKjB,EAAe,OAAS,WAG1BF,EA6FH8B,QAAQ"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport IconButton from '../IconButton';\n\n/**\n * The props for the TextField component.\n */\nexport type TextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'variant'> & {\n  /** The content rendered at the end of the input (suffix). */\n  endAdornment?: ReactNode;\n  /** The error text to display. */\n  errorText?: string;\n  /** The key for the input. */\n  fdKey: string;\n  /** The content rendered at the start of the input (prefix). */\n  startAdornment?: ReactNode;\n};\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  display: 'flex',\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nconst StyledInputAdornment = styled(MuiInputAdornment, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  color: disabled ? theme.palette.semantic.icon['icon-disabled'] : theme.palette.semantic.icon['icon-strong'],\n}));\n\n/**\n * A TextField component.\n *\n * @param props - The component props\n * @returns The rendered TextField component\n */\nexport const TextField = ({\n  disabled = false,\n  endAdornment = undefined,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  multiline = false,\n  required = false,\n  startAdornment = undefined,\n  type = 'text',\n  ...props\n}: TextFieldProps): JSX.Element => {\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n\n  const { translate } = useTranslation();\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n  const incomingAriaDescribedBy = (props.slotProps?.htmlInput as Record<string, unknown>)?.[\n    'aria-describedby'\n  ] as string | undefined;\n  const mergedAriaDescribedBy =\n    [incomingAriaDescribedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const isPassword = type === 'password';\n\n  const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n  const getFieldType = (): MuiTextFieldProps['type'] => {\n    if (isPassword) {\n      return showPassword ? 'text' : 'password';\n    }\n\n    return type;\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    if (isPassword) {\n      return (\n        <StyledInputAdornment position=\"end\">\n          <IconButton\n            aria-label={showPassword ? translate('Hide_password') : translate('Show_password')}\n            disabled={disabled}\n            onClick={handleClickShowPassword}\n            size=\"small\"\n            tone=\"neutral\"\n            variant=\"tertiary\"\n          >\n            {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n          </IconButton>\n        </StyledInputAdornment>\n      );\n    }\n    if (endAdornment) {\n      return (\n        <StyledInputAdornment disabled={disabled} position=\"end\">\n          {endAdornment}\n        </StyledInputAdornment>\n      );\n    }\n\n    return undefined;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    if (startAdornment) {\n      return (\n        <StyledInputAdornment disabled={disabled} position=\"start\">\n          {startAdornment}\n        </StyledInputAdornment>\n      );\n    }\n\n    return undefined;\n  };\n\n  const renderedEndAdornment = renderEndAdornment();\n  const renderedStartAdornment = renderStartAdornment();\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      <Box>\n        {label && (\n          <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n            {label}\n          </MuiInputLabel>\n        )}\n\n        {helperText && (\n          <MuiFormHelperText disabled={disabled} id={helperTextId}>\n            {helperText}\n          </MuiFormHelperText>\n        )}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledTextField\n        {...props}\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        id={fdKey}\n        label=\"\" // Remove label from TextField since we're rendering it separately\n        multiline={multiline}\n        required={required}\n        slotProps={{\n          input: {\n            ...(props.slotProps?.input ?? {}),\n            // Only pass startAdornment and endAdornment if they are defined\n            ...(renderedStartAdornment && { startAdornment: renderedStartAdornment }),\n            ...(renderedEndAdornment && { endAdornment: renderedEndAdornment }),\n          },\n          htmlInput: {\n            ...(props.slotProps?.htmlInput ?? {}),\n            'aria-describedby': mergedAriaDescribedBy,\n          },\n        }}\n        type={getFieldType()}\n        variant=\"outlined\"\n      />\n    </StyledContainer>\n  );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","StyledInputAdornment","MuiInputAdornment","disabled","color","palette","semantic","icon","TextField","endAdornment","errorText","fdKey","helperText","label","multiline","required","startAdornment","type","props","showPassword","setShowPassword","useState","translate","useTranslation","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","incomingAriaDescribedBy","slotProps","htmlInput","mergedAriaDescribedBy","isError","isPassword","handleClickShowPassword","show","renderedEndAdornment","_jsx","position","children","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderedStartAdornment","renderStartAdornment","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","input"],"mappings":"ulBA8BA,MAAMA,EAAkBC,EAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,CAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,sBAGxBM,EAAkBX,EAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,CAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,UAGxBQ,EAAuBb,EAAOc,EAAmB,CACrDZ,kBAAoBC,GAAkB,aAATA,GADFH,CAEF,EAAGI,QAAOW,YAAW,MAAO,CACrDC,MAAOD,EAAWX,EAAMa,QAAQC,SAASC,KAAK,iBAAmBf,EAAMa,QAAQC,SAASC,KAAK,kBASlFC,EAAY,EACvBL,YAAW,EACXM,eACAC,YACAC,QACAlB,aAAY,EACZmB,aACAC,QACAC,aAAY,EACZC,YAAW,EACXC,iBACAC,OAAO,UACJC,MAEH,MAAOC,EAAcC,GAAmBC,GAAkB,IAEpDC,UAAEA,GAAcC,IAEhBC,EAAeZ,EAAa,GAAGD,qBAAsBc,EACrDC,EAAiBhB,EAAY,GAAGC,uBAAwBc,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAC9EM,EAA2Bb,EAAMc,WAAWC,YAChD,oBAEIC,EACJ,CAACH,EAAyBJ,GAAiBC,OAAOC,SAASC,KAAK,WAAQL,EAEpEU,IAAYzB,IAAcP,EAC1BiC,EAAsB,aAATnB,EAEboB,EAA0B,IAAYjB,EAAiBkB,IAAUA,GAkDjEC,EAvCAH,EAEAI,EAACvC,EAAoB,CAACwC,SAAS,MAAKC,SAClCF,EAACG,EAAU,CAAA,aACkBrB,EAAfH,EAAyB,gBAA6B,iBAClEhB,SAAUA,EACVyC,QAASP,EACTQ,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUL,SAEFF,EAAfrB,EAAgB6B,EAAkBC,EAAP,CAAA,OAKhCxC,EAEA+B,EAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,MAAKC,SACrDjC,SAHP,EAwBIyC,EAbuB,MAC3B,GAAIlC,EACF,OACEwB,EAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,QAAOC,SACvD1B,KASsBmC,GAE/B,OACEC,EAACjE,EAAe,CAACM,UAAWA,YAC1B2D,EAAC/D,aACEwB,GACC2B,EAACa,GAAclD,SAAUA,EAAUmD,QAAS3C,EAAOI,SAAUA,EAAQ2B,SAClE7B,IAIJD,GACC4B,EAACe,EAAiB,CAACpD,SAAUA,EAAUqD,GAAIhC,EAAYkB,SACpD9B,OAKNuB,GACCiB,EAACG,EAAiB,CAACE,OAAK,EAACD,GAAI9B,EAAcgB,SAAA,CACzCF,EAACkB,EAAgB,CAAA,GAEhBhD,KAIL8B,EAACzC,EAAe,IACVmB,EAAK,UACAP,EACTR,SAAUA,EACVsD,MAAOtB,EACP1C,UAAWA,EACX+D,GAAI7C,EACJE,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACViB,UAAW,CACT2B,MAAO,IACDzC,EAAMc,WAAW2B,OAAS,MAE1BT,GAA0B,CAAElC,eAAgBkC,MAC5CX,GAAwB,CAAE9B,aAAc8B,IAE9CN,UAAW,IACLf,EAAMc,WAAWC,WAAa,GAClC,mBAAoBC,IAGxBjB,KAhGAmB,EACKjB,EAAe,OAAS,WAG1BF,EA6FH8B,QAAQ"}

package/dist/components/atoms/VisuallyHidden/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react");const s=require("@mui/material/styles").styled("span")((()=>({border:0,clip:"rect(0 0 0 0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",whiteSpace:"nowrap",width:1}))),a=r.forwardRef((({as:r="span",fdKey:a,...i},d)=>e.jsx(s,{ref:d,as:r,"data-fd":a,...i})));a.displayName="VisuallyHidden";exports.VisuallyHidden=a,exports.default=a,exports.useVisuallyHiddenId=(e="sr-")=>`${e}${r.useId()}`;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react");const s=require("@mui/material/styles").styled("span")(()=>({border:0,clip:"rect(0 0 0 0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",whiteSpace:"nowrap",width:1})),a=r.forwardRef(({as:r="span",fdKey:a,...i},d)=>e.jsx(s,{ref:d,as:r,"data-fd":a,...i}));a.displayName="VisuallyHidden";exports.VisuallyHidden=a,exports.default=a,exports.useVisuallyHiddenId=(e="sr-")=>`${e}${r.useId()}`;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/VisuallyHidden/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/VisuallyHidden/index.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\n/**\n * Props for the VisuallyHidden component.\n */\nexport interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** The id of the visually hidden element. */\n  id?: string;\n  /** The element type to render as. */\n  as?: React.ElementType;\n  /** The key for the visually hidden element. */\n  fdKey: string;\n}\n\nconst Root = styled('span')(() => ({\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: 1,\n  margin: -1,\n  overflow: 'hidden',\n  padding: 0,\n  position: 'absolute',\n  whiteSpace: 'nowrap',\n  width: 1,\n}));\n\n/**\n * A visually hidden component.\n *\n * @param props - The component props\n * @returns The rendered VisuallyHidden component\n */\nexport const VisuallyHidden = forwardRef<HTMLSpanElement, VisuallyHiddenProps>(\n  ({ as = 'span', fdKey, ...props }, ref) => {\n    return <Root ref={ref} as={as} data-fd={fdKey} {...props} />;\n  },\n);\nVisuallyHidden.displayName = 'VisuallyHidden';\n\n/**\n * Generates a unique id for a visually hidden element.\n *\n * @param prefix - The prefix for the id.\n * @returns The generated id.\n */\nexport const useVisuallyHiddenId = (prefix = 'sr-'): string => {\n  const reactId = useId();\n  return `${prefix}${reactId}`;\n};\n\nexport default VisuallyHidden;\n"],"names":["Root","styled","border","clip","height","margin","overflow","padding","position","whiteSpace","width","VisuallyHidden","forwardRef","as","fdKey","props","ref","_jsx","displayName","prefix","useId"],"mappings":"0HAgBA,MAAMA,kCAAOC,OAAO,OAAPA,EAAe,KAAA,CAC1BC,OAAQ,EACRC,KAAM,gBACNC,OAAQ,EACRC,QAAQ,EACRC,SAAU,SACVC,QAAS,EACTC,SAAU,WACVC,WAAY,SACZC,MAAO,MASIC,EAAiBC,EAAAA,YAC5B,EAAGC,KAAK,OAAQC,WAAUC,GAASC,IAC1BC,MAACjB,EAAI,CAACgB,IAAKA,EAAKH,GAAIA,EAAE,UAAWC,KAAWC,MAGvDJ,EAAeO,YAAc,wFAQM,CAACC,EAAS,QAEpC,GAAGA,IADMC,EAAAA"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/VisuallyHidden/index.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\n/**\n * Props for the VisuallyHidden component.\n */\nexport interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** The id of the visually hidden element. */\n  id?: string;\n  /** The element type to render as. */\n  as?: React.ElementType;\n  /** The key for the visually hidden element. */\n  fdKey: string;\n}\n\nconst Root = styled('span')(() => ({\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: 1,\n  margin: -1,\n  overflow: 'hidden',\n  padding: 0,\n  position: 'absolute',\n  whiteSpace: 'nowrap',\n  width: 1,\n}));\n\n/**\n * A visually hidden component.\n *\n * @param props - The component props\n * @returns The rendered VisuallyHidden component\n */\nexport const VisuallyHidden = forwardRef<HTMLSpanElement, VisuallyHiddenProps>(\n  ({ as = 'span', fdKey, ...props }, ref) => {\n    return <Root ref={ref} as={as} data-fd={fdKey} {...props} />;\n  },\n);\nVisuallyHidden.displayName = 'VisuallyHidden';\n\n/**\n * Generates a unique id for a visually hidden element.\n *\n * @param prefix - The prefix for the id.\n * @returns The generated id.\n */\nexport const useVisuallyHiddenId = (prefix = 'sr-'): string => {\n  const reactId = useId();\n  return `${prefix}${reactId}`;\n};\n\nexport default VisuallyHidden;\n"],"names":["Root","styled","border","clip","height","margin","overflow","padding","position","whiteSpace","width","VisuallyHidden","forwardRef","as","fdKey","props","ref","_jsx","displayName","prefix","useId"],"mappings":"0HAgBA,MAAMA,kCAAOC,OAAO,OAAPA,CAAe,KAAA,CAC1BC,OAAQ,EACRC,KAAM,gBACNC,OAAQ,EACRC,QAAQ,EACRC,SAAU,SACVC,QAAS,EACTC,SAAU,WACVC,WAAY,SACZC,MAAO,KASIC,EAAiBC,EAAAA,WAC5B,EAAGC,KAAK,OAAQC,WAAUC,GAASC,IAC1BC,MAACjB,EAAI,CAACgB,IAAKA,EAAKH,GAAIA,EAAE,UAAWC,KAAWC,KAGvDJ,EAAeO,YAAc,wFAQM,CAACC,EAAS,QAEpC,GAAGA,IADMC,EAAAA"}

package/dist/components/atoms/VisuallyHidden/index.js

@@ -1,2 +1,2 @@
-import{jsx as a}from"react/jsx-runtime";import{forwardRef as e,useId as r}from"react";import{styled as t}from"@mui/material/styles";const i=t("span")((()=>({border:0,clip:"rect(0 0 0 0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",whiteSpace:"nowrap",width:1}))),o=e((({as:e="span",fdKey:r,...t},o)=>a(i,{ref:o,as:e,"data-fd":r,...t})));o.displayName="VisuallyHidden";const s=(a="sr-")=>`${a}${r()}`;export{o as VisuallyHidden,o as default,s as useVisuallyHiddenId};
+import{jsx as a}from"react/jsx-runtime";import{forwardRef as e,useId as r}from"react";import{styled as t}from"@mui/material/styles";const i=t("span")(()=>({border:0,clip:"rect(0 0 0 0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",whiteSpace:"nowrap",width:1})),o=e(({as:e="span",fdKey:r,...t},o)=>a(i,{ref:o,as:e,"data-fd":r,...t}));o.displayName="VisuallyHidden";const s=(a="sr-")=>`${a}${r()}`;export{o as VisuallyHidden,o as default,s as useVisuallyHiddenId};
 //# sourceMappingURL=index.js.map

package/dist/components/atoms/VisuallyHidden/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/VisuallyHidden/index.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\n/**\n * Props for the VisuallyHidden component.\n */\nexport interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** The id of the visually hidden element. */\n  id?: string;\n  /** The element type to render as. */\n  as?: React.ElementType;\n  /** The key for the visually hidden element. */\n  fdKey: string;\n}\n\nconst Root = styled('span')(() => ({\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: 1,\n  margin: -1,\n  overflow: 'hidden',\n  padding: 0,\n  position: 'absolute',\n  whiteSpace: 'nowrap',\n  width: 1,\n}));\n\n/**\n * A visually hidden component.\n *\n * @param props - The component props\n * @returns The rendered VisuallyHidden component\n */\nexport const VisuallyHidden = forwardRef<HTMLSpanElement, VisuallyHiddenProps>(\n  ({ as = 'span', fdKey, ...props }, ref) => {\n    return <Root ref={ref} as={as} data-fd={fdKey} {...props} />;\n  },\n);\nVisuallyHidden.displayName = 'VisuallyHidden';\n\n/**\n * Generates a unique id for a visually hidden element.\n *\n * @param prefix - The prefix for the id.\n * @returns The generated id.\n */\nexport const useVisuallyHiddenId = (prefix = 'sr-'): string => {\n  const reactId = useId();\n  return `${prefix}${reactId}`;\n};\n\nexport default VisuallyHidden;\n"],"names":["Root","styled","border","clip","height","margin","overflow","padding","position","whiteSpace","width","VisuallyHidden","forwardRef","as","fdKey","props","ref","_jsx","displayName","useVisuallyHiddenId","prefix","useId"],"mappings":"oIAgBA,MAAMA,EAAOC,EAAO,OAAPA,EAAe,KAAA,CAC1BC,OAAQ,EACRC,KAAM,gBACNC,OAAQ,EACRC,QAAQ,EACRC,SAAU,SACVC,QAAS,EACTC,SAAU,WACVC,WAAY,SACZC,MAAO,MASIC,EAAiBC,GAC5B,EAAGC,KAAK,OAAQC,WAAUC,GAASC,IAC1BC,EAACjB,EAAI,CAACgB,IAAKA,EAAKH,GAAIA,EAAE,UAAWC,KAAWC,MAGvDJ,EAAeO,YAAc,uBAQhBC,EAAsB,CAACC,EAAS,QAEpC,GAAGA,IADMC"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/VisuallyHidden/index.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\n/**\n * Props for the VisuallyHidden component.\n */\nexport interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** The id of the visually hidden element. */\n  id?: string;\n  /** The element type to render as. */\n  as?: React.ElementType;\n  /** The key for the visually hidden element. */\n  fdKey: string;\n}\n\nconst Root = styled('span')(() => ({\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: 1,\n  margin: -1,\n  overflow: 'hidden',\n  padding: 0,\n  position: 'absolute',\n  whiteSpace: 'nowrap',\n  width: 1,\n}));\n\n/**\n * A visually hidden component.\n *\n * @param props - The component props\n * @returns The rendered VisuallyHidden component\n */\nexport const VisuallyHidden = forwardRef<HTMLSpanElement, VisuallyHiddenProps>(\n  ({ as = 'span', fdKey, ...props }, ref) => {\n    return <Root ref={ref} as={as} data-fd={fdKey} {...props} />;\n  },\n);\nVisuallyHidden.displayName = 'VisuallyHidden';\n\n/**\n * Generates a unique id for a visually hidden element.\n *\n * @param prefix - The prefix for the id.\n * @returns The generated id.\n */\nexport const useVisuallyHiddenId = (prefix = 'sr-'): string => {\n  const reactId = useId();\n  return `${prefix}${reactId}`;\n};\n\nexport default VisuallyHidden;\n"],"names":["Root","styled","border","clip","height","margin","overflow","padding","position","whiteSpace","width","VisuallyHidden","forwardRef","as","fdKey","props","ref","_jsx","displayName","useVisuallyHiddenId","prefix","useId"],"mappings":"oIAgBA,MAAMA,EAAOC,EAAO,OAAPA,CAAe,KAAA,CAC1BC,OAAQ,EACRC,KAAM,gBACNC,OAAQ,EACRC,QAAQ,EACRC,SAAU,SACVC,QAAS,EACTC,SAAU,WACVC,WAAY,SACZC,MAAO,KASIC,EAAiBC,EAC5B,EAAGC,KAAK,OAAQC,WAAUC,GAASC,IAC1BC,EAACjB,EAAI,CAACgB,IAAKA,EAAKH,GAAIA,EAAE,UAAWC,KAAWC,KAGvDJ,EAAeO,YAAc,uBAQhBC,EAAsB,CAACC,EAAS,QAEpC,GAAGA,IADMC"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Alert"),a=require("@mui/material/AlertTitle"),n=require("@mui/material/Box"),i=require("@mui/material/styles"),s=require("../../../icons/Alert/index.cjs.js"),l=require("../../../icons/CancelCircle/index.cjs.js"),o=require("../../../icons/CheckmarkCircle/index.cjs.js"),c=require("../../../icons/Diamond/index.cjs.js"),d=require("../../../icons/InformationCircle/index.cjs.js"),m=require("../../atoms/Button/index.cjs.js"),u=require("../../atoms/Link/index.cjs.js");const x={neutral:t=>e.jsx(c,{color:t.palette.semantic.icon["icon-strong"]}),brand:t=>e.jsx(c,{color:t.palette.semantic.icon["icon-primary"]}),destructive:t=>e.jsx(l,{color:t.palette.semantic.icon["icon-error"]}),warning:t=>e.jsx(s,{color:t.palette.semantic.icon["icon-warning"]}),information:t=>e.jsx(d,{color:t.palette.semantic.icon["icon-information"]}),"neutral-inverse":t=>e.jsx(c,{color:t.palette.semantic.icon["icon-inverse"]}),"brand-inverse":t=>e.jsx(c,{color:t.palette.semantic.icon["icon-inverse"]}),success:t=>e.jsx(o,{color:t.palette.semantic.icon["icon-success"]})},p={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":e=>"transparent","brand-inverse":e=>"transparent"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}},k=(e,t)=>x[t](e),f=(e,t)=>p.background[t](e),b=(e,t)=>p.border[t](e),j=(e,t)=>p.header[t](e),w=(e,t)=>p.text[t](e),g=i.styled(n)((()=>({marginTop:"16px"}))),v=i.styled(u.Link)((()=>({padding:0}))),y=i.styled(r,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:f(e,t),border:"1px solid",borderColor:b(e,t),color:w(e,t)}))),h=t.memo((({title:r,description:s,children:l,tone:o="neutral",icon:c,onClose:d,className:u,fdKey:x,action:p})=>{const f=i.useTheme(),b=t.useId(),w=l??s,h=Boolean(r),q=null!=w,C=h?`alert-title-${x??b}`:void 0,$=q?`alert-description-${x??b}`:void 0;return e.jsxs(y,{"aria-describedby":$,"aria-labelledby":C,className:u,"data-fd":x,icon:void 0===c?e.jsx("span",{"data-fd":"alert-icon",children:k(f,o)}):c??!1,onClose:d,role:"alert",tone:o,children:[h&&e.jsx(a,{color:j(f,o),id:C,children:r}),q&&e.jsx(n,{id:$,children:w}),(()=>{if(!p)return null;const t=r?`${p.label} - ${r}`:p.label;if("link"===p.kind){const r=p.fdKey??`action-link-${p.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(g,{children:e.jsx(v,{"aria-label":t,fdKey:r,href:p.href,rel:p.rel,target:p.target,children:p.label})})}const a=p.fdKey??`action-button-${p.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(g,{children:e.jsx(m.Button,{"aria-label":t,fdKey:a,onClick:p.onClick,size:"small",variant:p.type??"primary",children:p.label})})})()]})}));h.displayName="Alert",module.exports=h;
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Alert"),a=require("@mui/material/AlertTitle"),n=require("@mui/material/Box"),i=require("@mui/material/styles"),s=require("../../../icons/Alert/index.cjs.js"),l=require("../../../icons/CancelCircle/index.cjs.js"),o=require("../../../icons/CheckmarkCircle/index.cjs.js"),c=require("../../../icons/Diamond/index.cjs.js"),d=require("../../../icons/InformationCircle/index.cjs.js"),m=require("../../atoms/Button/index.cjs.js"),u=require("../../atoms/Link/index.cjs.js");const x={neutral:t=>e.jsx(c,{color:t.palette.semantic.icon["icon-strong"]}),brand:t=>e.jsx(c,{color:t.palette.semantic.icon["icon-primary"]}),destructive:t=>e.jsx(l,{color:t.palette.semantic.icon["icon-error"]}),warning:t=>e.jsx(s,{color:t.palette.semantic.icon["icon-warning"]}),information:t=>e.jsx(d,{color:t.palette.semantic.icon["icon-information"]}),"neutral-inverse":t=>e.jsx(c,{color:t.palette.semantic.icon["icon-inverse"]}),"brand-inverse":t=>e.jsx(c,{color:t.palette.semantic.icon["icon-inverse"]}),success:t=>e.jsx(o,{color:t.palette.semantic.icon["icon-success"]})},p={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":e=>"transparent","brand-inverse":e=>"transparent"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}},k=(e,t)=>x[t](e),f=(e,t)=>p.background[t](e),b=(e,t)=>p.border[t](e),j=(e,t)=>p.header[t](e),w=(e,t)=>p.text[t](e),g=i.styled(n)(()=>({marginTop:"16px"})),v=i.styled(u.Link)(()=>({padding:0})),y=i.styled(r,{shouldForwardProp:e=>!["tone"].includes(e)})(({theme:e,tone:t})=>({backgroundColor:f(e,t),border:"1px solid",borderColor:b(e,t),color:w(e,t)})),h=t.memo(({title:r,description:s,children:l,tone:o="neutral",icon:c,onClose:d,className:u,fdKey:x,action:p})=>{const f=i.useTheme(),b=t.useId(),w=l??s,h=Boolean(r),q=null!=w,C=h?`alert-title-${x??b}`:void 0,$=q?`alert-description-${x??b}`:void 0;return e.jsxs(y,{"aria-describedby":$,"aria-labelledby":C,className:u,"data-fd":x,icon:void 0===c?e.jsx("span",{"data-fd":"alert-icon",children:k(f,o)}):c??!1,onClose:d,role:"alert",tone:o,children:[h&&e.jsx(a,{color:j(f,o),id:C,children:r}),q&&e.jsx(n,{id:$,children:w}),(()=>{if(!p)return null;const t=r?`${p.label} - ${r}`:p.label;if("link"===p.kind){const r=p.fdKey??`action-link-${p.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(g,{children:e.jsx(v,{"aria-label":t,fdKey:r,href:p.href,rel:p.rel,target:p.target,children:p.label})})}const a=p.fdKey??`action-button-${p.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(g,{children:e.jsx(m.Button,{"aria-label":t,fdKey:a,onClick:p.onClick,size:"small",variant:p.type??"primary",children:p.label})})})()]})});h.displayName="Alert",module.exports=h;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["import { memo, type ReactNode, useId } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Link from '../../atoms/Link';\n\n/** Visual tone of the alert */\nexport type AlertTones =\n  | 'brand-inverse'\n  | 'brand'\n  | 'destructive'\n  | 'information'\n  | 'neutral-inverse'\n  | 'neutral'\n  | 'success'\n  | 'warning';\n\n/** Props for the Alert component */\nexport interface AlertProps {\n  /** Optional main heading text of the alert */\n  title?: string;\n  /** Detailed description text of the alert */\n  description?: string;\n  /** Optional custom content; when provided it replaces description */\n  children?: ReactNode;\n  /** Visual tone of the alert */\n  tone?: AlertTones;\n  /** Optional icon override; pass null to hide the icon */\n  icon?: ReactNode | null;\n  /** Callback function when the alert is closed */\n  onClose?: () => void;\n  /** Action configuration (button by default, or link) */\n  action?: AlertAction;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n}\n\nexport type AlertAction =\n  | {\n      /** Defaults to button when omitted */\n      kind?: 'button';\n      /** Text label for the action button */\n      label: string;\n      /** Visual style of the action button */\n      type?: ButtonType;\n      /** Callback function when the action button is clicked */\n      onClick: () => void;\n      /** Test ID for the action button */\n      fdKey?: string;\n    }\n  | {\n      /** Render a link action */\n      kind: 'link';\n      /** Text label for the link */\n      label: string;\n      /** Destination URL */\n      href: string;\n      /** Target for the link */\n      target?: '_blank' | '_parent' | '_self' | '_top';\n      /** rel attribute for the link */\n      rel?: string;\n      /** Test ID for the link */\n      fdKey?: string;\n    };\n\nconst ICONS = {\n  neutral: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n  brand: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n  destructive: (theme: Theme): JSX.Element => (\n    <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n  ),\n  warning: (theme: Theme): JSX.Element => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n  information: (theme: Theme): JSX.Element => (\n    <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n  ),\n  'neutral-inverse': (theme: Theme): JSX.Element => (\n    <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n  ),\n  'brand-inverse': (theme: Theme): JSX.Element => (\n    <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n  ),\n  success: (theme: Theme): JSX.Element => (\n    <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\n  ),\n};\n\nconst COLOURS = {\n  background: {\n    neutral: (theme: Theme): string => theme.palette.semantic.fill['fill-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.fill['fill-primary-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.fill['fill-error-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.fill['fill-warning-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.fill['fill-success-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.fill['fill-information-weak'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.background['background-inverse'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.fill['fill-primary-strong'],\n  },\n  border: {\n    neutral: (theme: Theme): string => theme.palette.semantic.stroke['stroke-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.stroke['stroke-primary-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.stroke['stroke-error-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.stroke['stroke-warning-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.stroke['stroke-success-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.stroke['stroke-information-weak'],\n    'neutral-inverse': (_theme: Theme): string => 'transparent',\n    'brand-inverse': (_theme: Theme): string => 'transparent',\n  },\n  header: {\n    neutral: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    brand: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    destructive: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    warning: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    success: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    information: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n  },\n  text: {\n    neutral: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n  },\n};\n\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n  return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.text[tone](theme);\n};\n\ninterface StyledAlertProps {\n  tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n  marginTop: '16px',\n}));\n\nconst StyledActionLink = styled(Link)(() => ({\n  padding: 0,\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n  backgroundColor: getBackgroundColour(theme, tone),\n  border: '1px solid',\n  borderColor: getBorderColour(theme, tone),\n  color: getTextColour(theme, tone),\n}));\n\n/**\n * Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n  ({\n    title,\n    description,\n    children,\n    tone = 'neutral',\n    icon,\n    onClose,\n    className,\n    fdKey,\n    action,\n  }: AlertProps) => {\n    const theme = useTheme();\n    const alertId = useId();\n    const content = children ?? description;\n    const hasTitle = Boolean(title);\n    const hasContent = content !== undefined && content !== null;\n    const titleId = hasTitle ? `alert-title-${fdKey ?? alertId}` : undefined;\n    const descriptionId = hasContent ? `alert-description-${fdKey ?? alertId}` : undefined;\n\n    const renderAction = (): JSX.Element | null => {\n      if (!action) {\n        return null;\n      }\n\n      const actionLabel = title ? `${action.label} - ${title}` : action.label;\n\n      if (action.kind === 'link') {\n        const actionFdKey = action.fdKey ?? `action-link-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n        return (\n          <StyledActionContainer>\n            <StyledActionLink\n              aria-label={actionLabel}\n              fdKey={actionFdKey}\n              href={action.href}\n              rel={action.rel}\n              target={action.target}\n            >\n              {action.label}\n            </StyledActionLink>\n          </StyledActionContainer>\n        );\n      }\n\n      const actionFdKey = action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n      return (\n        <StyledActionContainer>\n          <Button\n            aria-label={actionLabel}\n            fdKey={actionFdKey}\n            onClick={action.onClick}\n            size=\"small\"\n            variant={action.type ?? 'primary'}\n          >\n            {action.label}\n          </Button>\n        </StyledActionContainer>\n      );\n    };\n\n    return (\n      <StyledAlert\n        aria-describedby={descriptionId}\n        aria-labelledby={titleId}\n        className={className}\n        data-fd={fdKey}\n        icon={icon === undefined ? <span data-fd=\"alert-icon\">{getIcon(theme, tone)}</span> : (icon ?? false)}\n        onClose={onClose}\n        role=\"alert\"\n        tone={tone}\n      >\n        {hasTitle && (\n          <MuiAlertTitle color={getHeaderColour(theme, tone)} id={titleId}>\n            {title}\n          </MuiAlertTitle>\n        )}\n        {hasContent && <Box id={descriptionId}>{content}</Box>}\n        {renderAction()}\n      </StyledAlert>\n    );\n  },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","_theme","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledActionLink","Link","padding","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","children","onClose","className","fdKey","action","useTheme","alertId","useId","content","hasTitle","Boolean","hasContent","titleId","undefined","descriptionId","_jsxs","role","MuiAlertTitle","id","actionLabel","label","kind","actionFdKey","replace","toLowerCase","href","rel","target","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["import { memo, type ReactNode, useId } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Link from '../../atoms/Link';\n\n/** Visual tone of the alert */\nexport type AlertTones =\n  | 'brand-inverse'\n  | 'brand'\n  | 'destructive'\n  | 'information'\n  | 'neutral-inverse'\n  | 'neutral'\n  | 'success'\n  | 'warning';\n\n/** Props for the Alert component */\nexport interface AlertProps {\n  /** Optional main heading text of the alert */\n  title?: string;\n  /** Detailed description text of the alert */\n  description?: string;\n  /** Optional custom content; when provided it replaces description */\n  children?: ReactNode;\n  /** Visual tone of the alert */\n  tone?: AlertTones;\n  /** Optional icon override; pass null to hide the icon */\n  icon?: ReactNode | null;\n  /** Callback function when the alert is closed */\n  onClose?: () => void;\n  /** Action configuration (button by default, or link) */\n  action?: AlertAction;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n}\n\nexport type AlertAction =\n  | {\n      /** Defaults to button when omitted */\n      kind?: 'button';\n      /** Text label for the action button */\n      label: string;\n      /** Visual style of the action button */\n      type?: ButtonType;\n      /** Callback function when the action button is clicked */\n      onClick: () => void;\n      /** Test ID for the action button */\n      fdKey?: string;\n    }\n  | {\n      /** Render a link action */\n      kind: 'link';\n      /** Text label for the link */\n      label: string;\n      /** Destination URL */\n      href: string;\n      /** Target for the link */\n      target?: '_blank' | '_parent' | '_self' | '_top';\n      /** rel attribute for the link */\n      rel?: string;\n      /** Test ID for the link */\n      fdKey?: string;\n    };\n\nconst ICONS = {\n  neutral: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n  brand: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n  destructive: (theme: Theme): JSX.Element => (\n    <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n  ),\n  warning: (theme: Theme): JSX.Element => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n  information: (theme: Theme): JSX.Element => (\n    <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n  ),\n  'neutral-inverse': (theme: Theme): JSX.Element => (\n    <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n  ),\n  'brand-inverse': (theme: Theme): JSX.Element => (\n    <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n  ),\n  success: (theme: Theme): JSX.Element => (\n    <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\n  ),\n};\n\nconst COLOURS = {\n  background: {\n    neutral: (theme: Theme): string => theme.palette.semantic.fill['fill-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.fill['fill-primary-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.fill['fill-error-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.fill['fill-warning-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.fill['fill-success-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.fill['fill-information-weak'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.background['background-inverse'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.fill['fill-primary-strong'],\n  },\n  border: {\n    neutral: (theme: Theme): string => theme.palette.semantic.stroke['stroke-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.stroke['stroke-primary-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.stroke['stroke-error-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.stroke['stroke-warning-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.stroke['stroke-success-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.stroke['stroke-information-weak'],\n    'neutral-inverse': (_theme: Theme): string => 'transparent',\n    'brand-inverse': (_theme: Theme): string => 'transparent',\n  },\n  header: {\n    neutral: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    brand: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    destructive: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    warning: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    success: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    information: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n  },\n  text: {\n    neutral: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n  },\n};\n\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n  return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.text[tone](theme);\n};\n\ninterface StyledAlertProps {\n  tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n  marginTop: '16px',\n}));\n\nconst StyledActionLink = styled(Link)(() => ({\n  padding: 0,\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n  backgroundColor: getBackgroundColour(theme, tone),\n  border: '1px solid',\n  borderColor: getBorderColour(theme, tone),\n  color: getTextColour(theme, tone),\n}));\n\n/**\n * Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n  ({\n    title,\n    description,\n    children,\n    tone = 'neutral',\n    icon,\n    onClose,\n    className,\n    fdKey,\n    action,\n  }: AlertProps) => {\n    const theme = useTheme();\n    const alertId = useId();\n    const content = children ?? description;\n    const hasTitle = Boolean(title);\n    const hasContent = content !== undefined && content !== null;\n    const titleId = hasTitle ? `alert-title-${fdKey ?? alertId}` : undefined;\n    const descriptionId = hasContent ? `alert-description-${fdKey ?? alertId}` : undefined;\n\n    const renderAction = (): JSX.Element | null => {\n      if (!action) {\n        return null;\n      }\n\n      const actionLabel = title ? `${action.label} - ${title}` : action.label;\n\n      if (action.kind === 'link') {\n        const actionFdKey = action.fdKey ?? `action-link-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n        return (\n          <StyledActionContainer>\n            <StyledActionLink\n              aria-label={actionLabel}\n              fdKey={actionFdKey}\n              href={action.href}\n              rel={action.rel}\n              target={action.target}\n            >\n              {action.label}\n            </StyledActionLink>\n          </StyledActionContainer>\n        );\n      }\n\n      const actionFdKey = action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n      return (\n        <StyledActionContainer>\n          <Button\n            aria-label={actionLabel}\n            fdKey={actionFdKey}\n            onClick={action.onClick}\n            size=\"small\"\n            variant={action.type ?? 'primary'}\n          >\n            {action.label}\n          </Button>\n        </StyledActionContainer>\n      );\n    };\n\n    return (\n      <StyledAlert\n        aria-describedby={descriptionId}\n        aria-labelledby={titleId}\n        className={className}\n        data-fd={fdKey}\n        icon={icon === undefined ? <span data-fd=\"alert-icon\">{getIcon(theme, tone)}</span> : (icon ?? false)}\n        onClose={onClose}\n        role=\"alert\"\n        tone={tone}\n      >\n        {hasTitle && (\n          <MuiAlertTitle color={getHeaderColour(theme, tone)} id={titleId}>\n            {title}\n          </MuiAlertTitle>\n        )}\n        {hasContent && <Box id={descriptionId}>{content}</Box>}\n        {renderAction()}\n      </StyledAlert>\n    );\n  },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","_theme","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledActionLink","Link","padding","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","children","onClose","className","fdKey","action","useTheme","alertId","useId","content","hasTitle","Boolean","hasContent","titleId","undefined","descriptionId","_jsxs","role","MuiAlertTitle","id","actionLabel","label","kind","actionFdKey","replace","toLowerCase","href","rel","target","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{memo as r,useId as a}from"react";import n from"@mui/material/Alert";import i from"@mui/material/AlertTitle";import o from"@mui/material/Box";import{styled as l,useTheme as s}from"@mui/material/styles";import c from"../../../icons/Alert/index.js";import m from"../../../icons/CancelCircle/index.js";import d from"../../../icons/CheckmarkCircle/index.js";import p from"../../../icons/Diamond/index.js";import f from"../../../icons/InformationCircle/index.js";import{Button as x}from"../../atoms/Button/index.js";import{Link as k}from"../../atoms/Link/index.js";const u={neutral:e=>t(p,{color:e.palette.semantic.icon["icon-strong"]}),brand:e=>t(p,{color:e.palette.semantic.icon["icon-primary"]}),destructive:e=>t(m,{color:e.palette.semantic.icon["icon-error"]}),warning:e=>t(c,{color:e.palette.semantic.icon["icon-warning"]}),information:e=>t(f,{color:e.palette.semantic.icon["icon-information"]}),"neutral-inverse":e=>t(p,{color:e.palette.semantic.icon["icon-inverse"]}),"brand-inverse":e=>t(p,{color:e.palette.semantic.icon["icon-inverse"]}),success:e=>t(d,{color:e.palette.semantic.icon["icon-success"]})},b={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":e=>"transparent","brand-inverse":e=>"transparent"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}},w=(e,t)=>u[t](e),g=(e,t)=>b.background[t](e),v=(e,t)=>b.border[t](e),h=(e,t)=>b.header[t](e),y=(e,t)=>b.text[t](e),C=l(o)((()=>({marginTop:"16px"}))),j=l(k)((()=>({padding:0}))),$=l(n,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:g(e,t),border:"1px solid",borderColor:v(e,t),color:y(e,t)}))),K=r((({title:r,description:n,children:l,tone:c="neutral",icon:m,onClose:d,className:p,fdKey:f,action:k})=>{const u=s(),b=a(),g=l??n,v=Boolean(r),y=null!=g,K=v?`alert-title-${f??b}`:void 0,A=y?`alert-description-${f??b}`:void 0;return e($,{"aria-describedby":A,"aria-labelledby":K,className:p,"data-fd":f,icon:void 0===m?t("span",{"data-fd":"alert-icon",children:w(u,c)}):m??!1,onClose:d,role:"alert",tone:c,children:[v&&t(i,{color:h(u,c),id:K,children:r}),y&&t(o,{id:A,children:g}),(()=>{if(!k)return null;const e=r?`${k.label} - ${r}`:k.label;if("link"===k.kind){const r=k.fdKey??`action-link-${k.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(j,{"aria-label":e,fdKey:r,href:k.href,rel:k.rel,target:k.target,children:k.label})})}const a=k.fdKey??`action-button-${k.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(x,{"aria-label":e,fdKey:a,onClick:k.onClick,size:"small",variant:k.type??"primary",children:k.label})})})()]})}));K.displayName="Alert";export{K as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{memo as r,useId as a}from"react";import n from"@mui/material/Alert";import i from"@mui/material/AlertTitle";import o from"@mui/material/Box";import{styled as l,useTheme as s}from"@mui/material/styles";import c from"../../../icons/Alert/index.js";import m from"../../../icons/CancelCircle/index.js";import d from"../../../icons/CheckmarkCircle/index.js";import p from"../../../icons/Diamond/index.js";import f from"../../../icons/InformationCircle/index.js";import{Button as x}from"../../atoms/Button/index.js";import{Link as k}from"../../atoms/Link/index.js";const u={neutral:e=>t(p,{color:e.palette.semantic.icon["icon-strong"]}),brand:e=>t(p,{color:e.palette.semantic.icon["icon-primary"]}),destructive:e=>t(m,{color:e.palette.semantic.icon["icon-error"]}),warning:e=>t(c,{color:e.palette.semantic.icon["icon-warning"]}),information:e=>t(f,{color:e.palette.semantic.icon["icon-information"]}),"neutral-inverse":e=>t(p,{color:e.palette.semantic.icon["icon-inverse"]}),"brand-inverse":e=>t(p,{color:e.palette.semantic.icon["icon-inverse"]}),success:e=>t(d,{color:e.palette.semantic.icon["icon-success"]})},b={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":e=>"transparent","brand-inverse":e=>"transparent"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}},w=(e,t)=>u[t](e),g=(e,t)=>b.background[t](e),v=(e,t)=>b.border[t](e),h=(e,t)=>b.header[t](e),y=(e,t)=>b.text[t](e),C=l(o)(()=>({marginTop:"16px"})),j=l(k)(()=>({padding:0})),$=l(n,{shouldForwardProp:e=>!["tone"].includes(e)})(({theme:e,tone:t})=>({backgroundColor:g(e,t),border:"1px solid",borderColor:v(e,t),color:y(e,t)})),K=r(({title:r,description:n,children:l,tone:c="neutral",icon:m,onClose:d,className:p,fdKey:f,action:k})=>{const u=s(),b=a(),g=l??n,v=Boolean(r),y=null!=g,K=v?`alert-title-${f??b}`:void 0,A=y?`alert-description-${f??b}`:void 0;return e($,{"aria-describedby":A,"aria-labelledby":K,className:p,"data-fd":f,icon:void 0===m?t("span",{"data-fd":"alert-icon",children:w(u,c)}):m??!1,onClose:d,role:"alert",tone:c,children:[v&&t(i,{color:h(u,c),id:K,children:r}),y&&t(o,{id:A,children:g}),(()=>{if(!k)return null;const e=r?`${k.label} - ${r}`:k.label;if("link"===k.kind){const r=k.fdKey??`action-link-${k.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(j,{"aria-label":e,fdKey:r,href:k.href,rel:k.rel,target:k.target,children:k.label})})}const a=k.fdKey??`action-button-${k.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(x,{"aria-label":e,fdKey:a,onClick:k.onClick,size:"small",variant:k.type??"primary",children:k.label})})})()]})});K.displayName="Alert";export{K as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["import { memo, type ReactNode, useId } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Link from '../../atoms/Link';\n\n/** Visual tone of the alert */\nexport type AlertTones =\n  | 'brand-inverse'\n  | 'brand'\n  | 'destructive'\n  | 'information'\n  | 'neutral-inverse'\n  | 'neutral'\n  | 'success'\n  | 'warning';\n\n/** Props for the Alert component */\nexport interface AlertProps {\n  /** Optional main heading text of the alert */\n  title?: string;\n  /** Detailed description text of the alert */\n  description?: string;\n  /** Optional custom content; when provided it replaces description */\n  children?: ReactNode;\n  /** Visual tone of the alert */\n  tone?: AlertTones;\n  /** Optional icon override; pass null to hide the icon */\n  icon?: ReactNode | null;\n  /** Callback function when the alert is closed */\n  onClose?: () => void;\n  /** Action configuration (button by default, or link) */\n  action?: AlertAction;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n}\n\nexport type AlertAction =\n  | {\n      /** Defaults to button when omitted */\n      kind?: 'button';\n      /** Text label for the action button */\n      label: string;\n      /** Visual style of the action button */\n      type?: ButtonType;\n      /** Callback function when the action button is clicked */\n      onClick: () => void;\n      /** Test ID for the action button */\n      fdKey?: string;\n    }\n  | {\n      /** Render a link action */\n      kind: 'link';\n      /** Text label for the link */\n      label: string;\n      /** Destination URL */\n      href: string;\n      /** Target for the link */\n      target?: '_blank' | '_parent' | '_self' | '_top';\n      /** rel attribute for the link */\n      rel?: string;\n      /** Test ID for the link */\n      fdKey?: string;\n    };\n\nconst ICONS = {\n  neutral: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n  brand: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n  destructive: (theme: Theme): JSX.Element => (\n    <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n  ),\n  warning: (theme: Theme): JSX.Element => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n  information: (theme: Theme): JSX.Element => (\n    <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n  ),\n  'neutral-inverse': (theme: Theme): JSX.Element => (\n    <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n  ),\n  'brand-inverse': (theme: Theme): JSX.Element => (\n    <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n  ),\n  success: (theme: Theme): JSX.Element => (\n    <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\n  ),\n};\n\nconst COLOURS = {\n  background: {\n    neutral: (theme: Theme): string => theme.palette.semantic.fill['fill-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.fill['fill-primary-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.fill['fill-error-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.fill['fill-warning-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.fill['fill-success-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.fill['fill-information-weak'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.background['background-inverse'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.fill['fill-primary-strong'],\n  },\n  border: {\n    neutral: (theme: Theme): string => theme.palette.semantic.stroke['stroke-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.stroke['stroke-primary-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.stroke['stroke-error-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.stroke['stroke-warning-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.stroke['stroke-success-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.stroke['stroke-information-weak'],\n    'neutral-inverse': (_theme: Theme): string => 'transparent',\n    'brand-inverse': (_theme: Theme): string => 'transparent',\n  },\n  header: {\n    neutral: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    brand: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    destructive: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    warning: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    success: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    information: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n  },\n  text: {\n    neutral: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n  },\n};\n\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n  return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.text[tone](theme);\n};\n\ninterface StyledAlertProps {\n  tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n  marginTop: '16px',\n}));\n\nconst StyledActionLink = styled(Link)(() => ({\n  padding: 0,\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n  backgroundColor: getBackgroundColour(theme, tone),\n  border: '1px solid',\n  borderColor: getBorderColour(theme, tone),\n  color: getTextColour(theme, tone),\n}));\n\n/**\n * Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n  ({\n    title,\n    description,\n    children,\n    tone = 'neutral',\n    icon,\n    onClose,\n    className,\n    fdKey,\n    action,\n  }: AlertProps) => {\n    const theme = useTheme();\n    const alertId = useId();\n    const content = children ?? description;\n    const hasTitle = Boolean(title);\n    const hasContent = content !== undefined && content !== null;\n    const titleId = hasTitle ? `alert-title-${fdKey ?? alertId}` : undefined;\n    const descriptionId = hasContent ? `alert-description-${fdKey ?? alertId}` : undefined;\n\n    const renderAction = (): JSX.Element | null => {\n      if (!action) {\n        return null;\n      }\n\n      const actionLabel = title ? `${action.label} - ${title}` : action.label;\n\n      if (action.kind === 'link') {\n        const actionFdKey = action.fdKey ?? `action-link-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n        return (\n          <StyledActionContainer>\n            <StyledActionLink\n              aria-label={actionLabel}\n              fdKey={actionFdKey}\n              href={action.href}\n              rel={action.rel}\n              target={action.target}\n            >\n              {action.label}\n            </StyledActionLink>\n          </StyledActionContainer>\n        );\n      }\n\n      const actionFdKey = action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n      return (\n        <StyledActionContainer>\n          <Button\n            aria-label={actionLabel}\n            fdKey={actionFdKey}\n            onClick={action.onClick}\n            size=\"small\"\n            variant={action.type ?? 'primary'}\n          >\n            {action.label}\n          </Button>\n        </StyledActionContainer>\n      );\n    };\n\n    return (\n      <StyledAlert\n        aria-describedby={descriptionId}\n        aria-labelledby={titleId}\n        className={className}\n        data-fd={fdKey}\n        icon={icon === undefined ? <span data-fd=\"alert-icon\">{getIcon(theme, tone)}</span> : (icon ?? false)}\n        onClose={onClose}\n        role=\"alert\"\n        tone={tone}\n      >\n        {hasTitle && (\n          <MuiAlertTitle color={getHeaderColour(theme, tone)} id={titleId}>\n            {title}\n          </MuiAlertTitle>\n        )}\n        {hasContent && <Box id={descriptionId}>{content}</Box>}\n        {renderAction()}\n      </StyledAlert>\n    );\n  },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","_theme","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledActionLink","Link","padding","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","children","onClose","className","fdKey","action","useTheme","alertId","useId","content","hasTitle","Boolean","hasContent","titleId","undefined","descriptionId","_jsxs","role","MuiAlertTitle","id","actionLabel","label","kind","actionFdKey","replace","toLowerCase","href","rel","target","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["import { memo, type ReactNode, useId } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Link from '../../atoms/Link';\n\n/** Visual tone of the alert */\nexport type AlertTones =\n  | 'brand-inverse'\n  | 'brand'\n  | 'destructive'\n  | 'information'\n  | 'neutral-inverse'\n  | 'neutral'\n  | 'success'\n  | 'warning';\n\n/** Props for the Alert component */\nexport interface AlertProps {\n  /** Optional main heading text of the alert */\n  title?: string;\n  /** Detailed description text of the alert */\n  description?: string;\n  /** Optional custom content; when provided it replaces description */\n  children?: ReactNode;\n  /** Visual tone of the alert */\n  tone?: AlertTones;\n  /** Optional icon override; pass null to hide the icon */\n  icon?: ReactNode | null;\n  /** Callback function when the alert is closed */\n  onClose?: () => void;\n  /** Action configuration (button by default, or link) */\n  action?: AlertAction;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n}\n\nexport type AlertAction =\n  | {\n      /** Defaults to button when omitted */\n      kind?: 'button';\n      /** Text label for the action button */\n      label: string;\n      /** Visual style of the action button */\n      type?: ButtonType;\n      /** Callback function when the action button is clicked */\n      onClick: () => void;\n      /** Test ID for the action button */\n      fdKey?: string;\n    }\n  | {\n      /** Render a link action */\n      kind: 'link';\n      /** Text label for the link */\n      label: string;\n      /** Destination URL */\n      href: string;\n      /** Target for the link */\n      target?: '_blank' | '_parent' | '_self' | '_top';\n      /** rel attribute for the link */\n      rel?: string;\n      /** Test ID for the link */\n      fdKey?: string;\n    };\n\nconst ICONS = {\n  neutral: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n  brand: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n  destructive: (theme: Theme): JSX.Element => (\n    <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n  ),\n  warning: (theme: Theme): JSX.Element => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n  information: (theme: Theme): JSX.Element => (\n    <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n  ),\n  'neutral-inverse': (theme: Theme): JSX.Element => (\n    <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n  ),\n  'brand-inverse': (theme: Theme): JSX.Element => (\n    <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n  ),\n  success: (theme: Theme): JSX.Element => (\n    <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\n  ),\n};\n\nconst COLOURS = {\n  background: {\n    neutral: (theme: Theme): string => theme.palette.semantic.fill['fill-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.fill['fill-primary-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.fill['fill-error-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.fill['fill-warning-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.fill['fill-success-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.fill['fill-information-weak'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.background['background-inverse'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.fill['fill-primary-strong'],\n  },\n  border: {\n    neutral: (theme: Theme): string => theme.palette.semantic.stroke['stroke-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.stroke['stroke-primary-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.stroke['stroke-error-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.stroke['stroke-warning-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.stroke['stroke-success-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.stroke['stroke-information-weak'],\n    'neutral-inverse': (_theme: Theme): string => 'transparent',\n    'brand-inverse': (_theme: Theme): string => 'transparent',\n  },\n  header: {\n    neutral: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    brand: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    destructive: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    warning: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    success: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    information: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n  },\n  text: {\n    neutral: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n  },\n};\n\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n  return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.text[tone](theme);\n};\n\ninterface StyledAlertProps {\n  tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n  marginTop: '16px',\n}));\n\nconst StyledActionLink = styled(Link)(() => ({\n  padding: 0,\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n  backgroundColor: getBackgroundColour(theme, tone),\n  border: '1px solid',\n  borderColor: getBorderColour(theme, tone),\n  color: getTextColour(theme, tone),\n}));\n\n/**\n * Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n  ({\n    title,\n    description,\n    children,\n    tone = 'neutral',\n    icon,\n    onClose,\n    className,\n    fdKey,\n    action,\n  }: AlertProps) => {\n    const theme = useTheme();\n    const alertId = useId();\n    const content = children ?? description;\n    const hasTitle = Boolean(title);\n    const hasContent = content !== undefined && content !== null;\n    const titleId = hasTitle ? `alert-title-${fdKey ?? alertId}` : undefined;\n    const descriptionId = hasContent ? `alert-description-${fdKey ?? alertId}` : undefined;\n\n    const renderAction = (): JSX.Element | null => {\n      if (!action) {\n        return null;\n      }\n\n      const actionLabel = title ? `${action.label} - ${title}` : action.label;\n\n      if (action.kind === 'link') {\n        const actionFdKey = action.fdKey ?? `action-link-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n        return (\n          <StyledActionContainer>\n            <StyledActionLink\n              aria-label={actionLabel}\n              fdKey={actionFdKey}\n              href={action.href}\n              rel={action.rel}\n              target={action.target}\n            >\n              {action.label}\n            </StyledActionLink>\n          </StyledActionContainer>\n        );\n      }\n\n      const actionFdKey = action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n      return (\n        <StyledActionContainer>\n          <Button\n            aria-label={actionLabel}\n            fdKey={actionFdKey}\n            onClick={action.onClick}\n            size=\"small\"\n            variant={action.type ?? 'primary'}\n          >\n            {action.label}\n          </Button>\n        </StyledActionContainer>\n      );\n    };\n\n    return (\n      <StyledAlert\n        aria-describedby={descriptionId}\n        aria-labelledby={titleId}\n        className={className}\n        data-fd={fdKey}\n        icon={icon === undefined ? <span data-fd=\"alert-icon\">{getIcon(theme, tone)}</span> : (icon ?? false)}\n        onClose={onClose}\n        role=\"alert\"\n        tone={tone}\n      >\n        {hasTitle && (\n          <MuiAlertTitle color={getHeaderColour(theme, tone)} id={titleId}>\n            {title}\n          </MuiAlertTitle>\n        )}\n        {hasContent && <Box id={descriptionId}>{content}</Box>}\n        {renderAction()}\n      </StyledAlert>\n    );\n  },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","_theme","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledActionLink","Link","padding","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","children","onClose","className","fdKey","action","useTheme","alertId","useId","content","hasTitle","Boolean","hasContent","titleId","undefined","descriptionId","_jsxs","role","MuiAlertTitle","id","actionLabel","label","kind","actionFdKey","replace","toLowerCase","href","rel","target","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}

package/dist/components/molecules/AlertGlobal/alertGlobalTokens.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../utilities/renderUtilities.cjs.js");function r(e){return Object.freeze({__proto__:null,default:e})}const i=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/Diamond/index.cjs.js"))})))),a=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/Alert/index.cjs.js"))})))),s=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/CancelCircle/index.cjs.js"))})))),l=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/CheckmarkCircle/index.cjs.js"))})))),c=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/InformationCircle/index.cjs.js"))})))),o={neutral:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-strong"]})}),brand:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-primary"]})}),destructive:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(s,{color:n.palette.semantic.icon["icon-error"]})}),warning:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(a,{color:n.palette.semantic.icon["icon-warning"]})}),information:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(c,{color:n.palette.semantic.icon["icon-information"]})}),"neutral-inverse":n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-inverse"]})}),"brand-inverse":n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-inverse"]})}),success:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(l,{color:n.palette.semantic.icon["icon-success"]})})},u={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":()=>"transparent","brand-inverse":()=>"transparent"},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}};exports.getAlertGlobalBackgroundColour=(e,t)=>u.background[t](e),exports.getAlertGlobalBorderColour=(e,t)=>u.border[t](e),exports.getAlertGlobalIcon=(e,t)=>o[t](e),exports.getAlertGlobalTextColour=(e,t)=>u.text[t](e);
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../utilities/renderUtilities.cjs.js");function r(e){return Object.freeze({__proto__:null,default:e})}const i=n.lazyWithRetry(()=>Promise.resolve().then(function(){return r(require("../../../icons/Diamond/index.cjs.js"))})),a=n.lazyWithRetry(()=>Promise.resolve().then(function(){return r(require("../../../icons/Alert/index.cjs.js"))})),s=n.lazyWithRetry(()=>Promise.resolve().then(function(){return r(require("../../../icons/CancelCircle/index.cjs.js"))})),l=n.lazyWithRetry(()=>Promise.resolve().then(function(){return r(require("../../../icons/CheckmarkCircle/index.cjs.js"))})),c=n.lazyWithRetry(()=>Promise.resolve().then(function(){return r(require("../../../icons/InformationCircle/index.cjs.js"))})),o={neutral:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-strong"]})}),brand:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-primary"]})}),destructive:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(s,{color:n.palette.semantic.icon["icon-error"]})}),warning:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(a,{color:n.palette.semantic.icon["icon-warning"]})}),information:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(c,{color:n.palette.semantic.icon["icon-information"]})}),"neutral-inverse":n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-inverse"]})}),"brand-inverse":n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-inverse"]})}),success:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(l,{color:n.palette.semantic.icon["icon-success"]})})},u={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":()=>"transparent","brand-inverse":()=>"transparent"},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}};exports.getAlertGlobalBackgroundColour=(e,t)=>u.background[t](e),exports.getAlertGlobalBorderColour=(e,t)=>u.border[t](e),exports.getAlertGlobalIcon=(e,t)=>o[t](e),exports.getAlertGlobalTextColour=(e,t)=>u.text[t](e);
 //# sourceMappingURL=alertGlobalTokens.cjs.js.map