@flipdish/portal-library 8.0.1 → 8.0.3

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel)<{ $size?: 'medium' | 'small' }>(\n  ({ theme, $size = 'medium' }) => ({\n    color: theme.palette.semantic.text['text-strong'],\n    gap: '12px',\n    margin: 0,\n    '& .MuiFormControlLabel-label': {\n      ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n    },\n  }),\n);\n\nconst StyledSwitch = styled(MuiSwitch)<{ $size?: 'medium' | 'small' }>(({\n  theme,\n  $size = 'medium',\n  checked,\n}) => {\n  const isSmall = $size === 'small';\n  const width = isSmall ? 48 : 64;\n  const height = isSmall ? 24 : 32;\n  const thumbSize = isSmall ? 24 : 32;\n  const translateX = isSmall ? 24 : 32;\n\n  return {\n    width,\n    height,\n    padding: 0,\n    overflow: 'visible',\n    '& .MuiSwitch-switchBase': {\n      padding: 0,\n      transitionDuration: '200ms',\n      '&.Mui-checked': {\n        transform: `translateX(${translateX}px)`,\n        color: theme.palette.semantic.fill['fill-white'],\n        '& .MuiSwitch-thumb': {\n          borderColor: theme.palette.semantic.stroke['stroke-selected'],\n        },\n        '& + .MuiSwitch-track': {\n          backgroundColor: theme.palette.semantic.fill['fill-selected'],\n          borderColor: theme.palette.semantic.stroke['stroke-selected'],\n          opacity: 1,\n        },\n        '&.Mui-disabled + .MuiSwitch-track': {\n          backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n          borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n          opacity: 0.5,\n        },\n      },\n      '&.Mui-focusVisible + .MuiSwitch-track': {\n        outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n        outlineOffset: '2px',\n      },\n      '&.Mui-disabled .MuiSwitch-thumb': {\n        opacity: 0.5,\n        borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n        backgroundColor: theme.palette.semantic.background['background-raised'],\n      },\n      '&.Mui-disabled + .MuiSwitch-track': {\n        backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n        borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n        opacity: 0.5,\n      },\n    },\n    '& .MuiSwitch-thumb': {\n      width: thumbSize,\n      height: thumbSize,\n      backgroundColor: theme.palette.semantic.background['background-raised'],\n      border: `2px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n      transition: theme.transitions.create(['border-color'], {\n        duration: 200,\n      }),\n    },\n    '& .MuiSwitch-track': {\n      borderRadius: height,\n      backgroundColor: theme.palette.semantic.fill['fill-weak'],\n      border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n      boxShadow: checked ? 'none' : theme.customShadows?.sunken,\n      opacity: 1,\n      transition: theme.transitions.create(['background-color', 'border-color', 'outline'], {\n        duration: 200,\n      }),\n    },\n    '&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n      backgroundColor: theme.palette.semantic.fill['fill-hover'],\n    },\n    '&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n      backgroundColor: theme.palette.semantic.fill['fill-press'],\n    },\n  };\n});\n\nexport interface SwitchProps {\n  /** Whether the switch is checked (on) or unchecked (off) */\n  checked?: boolean;\n  /** Whether the switch is disabled and cannot be interacted with */\n  disabled?: boolean;\n  /** Optional label text to display next to the switch */\n  label?: string;\n  /** Position of the label relative to the switch. Options: 'start', 'end', 'top', 'bottom'. Default: 'end' */\n  labelPlacement?: FormControlLabelProps['labelPlacement'];\n  /** Callback fired when the switch state changes. Receives the event and checked state */\n  onChange?: MuiSwitchProps['onChange'];\n  /** Size of the switch. Options: 'small' (48x24px), 'medium' (64x32px). Default: 'medium' */\n  size?: 'medium' | 'small';\n  /** Test ID for the switch element */\n  fdKey: string;\n}\n\nconst Switch = ({\n  checked,\n  disabled = false,\n  label,\n  labelPlacement = 'end',\n  onChange,\n  size = 'medium',\n  fdKey,\n}: SwitchProps): ReactElement => {\n  if (!label) {\n    return (\n      <StyledSwitch\n        disableRipple\n        $size={size}\n        checked={checked}\n        data-fd={fdKey}\n        disabled={disabled}\n        onChange={onChange}\n      />\n    );\n  }\n\n  return (\n    <StyledFormControlLabel\n      $size={size}\n      control={\n        <StyledSwitch\n          disableRipple\n          $size={size}\n          checked={checked}\n          data-fd={fdKey}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      }\n      disabled={disabled}\n      label={label}\n      labelPlacement={labelPlacement}\n    />\n  );\n};\n\nexport default Switch;\n"],"names":["StyledFormControlLabel","styled","FormControlLabel","theme","$size","color","palette","semantic","text","gap","margin","typography","StyledSwitch","MuiSwitch","checked","isSmall","height","thumbSize","width","padding","overflow","transitionDuration","transform","fill","borderColor","stroke","backgroundColor","opacity","outline","outlineOffset","background","border","transition","transitions","create","duration","borderRadius","boxShadow","customShadows","sunken","Switch","disabled","label","labelPlacement","onChange","size","fdKey","_jsx","control","disableRipple"],"mappings":"wKAMA,MAAMA,EAAyBC,EAAOC,EAAPD,EAC7B,EAAGE,QAAOC,QAAQ,aAAU,CAC1BC,MAAOF,EAAMG,QAAQC,SAASC,KAAK,eACnCC,IAAK,OACLC,OAAQ,EACR,+BAAgC,IAC3BP,EAAMQ,WAAqB,UAAVP,EAAoB,cAAgB,eAKxDQ,EAAeX,EAAOY,EAAPZ,EAAkD,EACrEE,QACAC,QAAQ,SACRU,cAEA,MAAMC,EAAoB,UAAVX,EAEVY,EAASD,EAAU,GAAK,GACxBE,EAAYF,EAAU,GAAK,GAGjC,MAAO,CACLG,MANYH,EAAU,GAAK,GAO3BC,SACAG,QAAS,EACTC,SAAU,UACV,0BAA2B,CACzBD,QAAS,EACTE,mBAAoB,QACpB,gBAAiB,CACfC,UAAW,cAXEP,EAAU,GAAK,QAY5BV,MAAOF,EAAMG,QAAQC,SAASgB,KAAK,cACnC,qBAAsB,CACpBC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,oBAE7C,uBAAwB,CACtBC,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,GAEX,oCAAqC,CACnCD,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,wCAAyC,CACvCC,QAAS,aAAazB,EAAMG,QAAQC,SAASkB,OAAO,kBACpDI,cAAe,OAEjB,kCAAmC,CACjCF,QAAS,GACTH,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CC,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,sBAErD,oCAAqC,CACnCJ,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,qBAAsB,CACpBT,MAAOD,EACPD,OAAQC,EACRS,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,qBACnDC,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDO,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,gBAAiB,CACrDC,SAAU,OAGd,qBAAsB,CACpBC,aAAcpB,EACdU,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,aAC7CQ,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDY,UAAWvB,EAAU,OAASX,EAAMmC,eAAeC,OACnDZ,QAAS,EACTK,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,mBAAoB,eAAgB,WAAY,CACpFC,SAAU,OAGd,wFAAyF,CACvFT,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,eAE/C,yFAA0F,CACxFG,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,mBAsB7CiB,EAAS,EACb1B,UACA2B,YAAW,EACXC,QACAC,iBAAiB,MACjBC,WACAC,OAAO,SACPC,WAEKJ,EAcHK,EAAC/C,SACQ6C,EACPG,QACED,EAACnC,EAAY,CACXqC,uBACOJ,EACP/B,QAASA,YACAgC,EACTL,SAAUA,EACVG,SAAUA,IAGdH,SAAUA,EACVC,MAAOA,EACPC,eAAgBA,IA1BhBI,EAACnC,EAAY,CACXqC,eAAa,EAAA7C,MACNyC,EACP/B,QAASA,YACAgC,EACTL,SAAUA,EACVG,SAAUA"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel, {\n  shouldForwardProp: (prop) => prop !== '$size',\n})<{ $size?: 'medium' | 'small' }>(({ theme, $size = 'medium' }) => ({\n  color: theme.palette.semantic.text['text-strong'],\n  gap: '12px',\n  margin: 0,\n  '& .MuiFormControlLabel-label': {\n    ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n  },\n}));\n\nconst StyledSwitch = styled(MuiSwitch, {\n  shouldForwardProp: (prop) => prop !== '$size',\n})<{ $size?: 'medium' | 'small' }>(({ theme, $size = 'medium', checked }) => {\n  const isSmall = $size === 'small';\n  const width = isSmall ? 48 : 64;\n  const height = isSmall ? 24 : 32;\n  const thumbSize = isSmall ? 24 : 32;\n  const translateX = isSmall ? 24 : 32;\n\n  return {\n    width,\n    height,\n    padding: 0,\n    overflow: 'visible',\n    '& .MuiSwitch-switchBase': {\n      padding: 0,\n      transitionDuration: '200ms',\n      '&.Mui-checked': {\n        transform: `translateX(${translateX}px)`,\n        color: theme.palette.semantic.fill['fill-white'],\n        '& .MuiSwitch-thumb': {\n          borderColor: theme.palette.semantic.stroke['stroke-selected'],\n        },\n        '& + .MuiSwitch-track': {\n          backgroundColor: theme.palette.semantic.fill['fill-selected'],\n          borderColor: theme.palette.semantic.stroke['stroke-selected'],\n          opacity: 1,\n        },\n        '&.Mui-disabled + .MuiSwitch-track': {\n          backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n          borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n          opacity: 0.5,\n        },\n      },\n      '&.Mui-focusVisible + .MuiSwitch-track': {\n        outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n        outlineOffset: '2px',\n      },\n      '&.Mui-disabled .MuiSwitch-thumb': {\n        opacity: 0.5,\n        borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n        backgroundColor: theme.palette.semantic.background['background-raised'],\n      },\n      '&.Mui-disabled + .MuiSwitch-track': {\n        backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n        borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n        opacity: 0.5,\n      },\n    },\n    '& .MuiSwitch-thumb': {\n      width: thumbSize,\n      height: thumbSize,\n      backgroundColor: theme.palette.semantic.background['background-raised'],\n      border: `2px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n      transition: theme.transitions.create(['border-color'], {\n        duration: 200,\n      }),\n    },\n    '& .MuiSwitch-track': {\n      borderRadius: height,\n      backgroundColor: theme.palette.semantic.fill['fill-weak'],\n      border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n      boxShadow: checked ? 'none' : theme.customShadows?.sunken,\n      opacity: 1,\n      transition: theme.transitions.create(['background-color', 'border-color', 'outline'], {\n        duration: 200,\n      }),\n    },\n    '&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n      backgroundColor: theme.palette.semantic.fill['fill-hover'],\n    },\n    '&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n      backgroundColor: theme.palette.semantic.fill['fill-press'],\n    },\n  };\n});\n\n/**\n * Props for the Switch component.\n */\nexport interface SwitchProps {\n  /** Aria label for the switch if there is no label */\n  ariaLabel?: string;\n  /** Whether the switch is checked (on) or unchecked (off) */\n  checked?: boolean;\n  /** Whether the switch is disabled and cannot be interacted with */\n  disabled?: boolean;\n  /** Optional label text to display next to the switch */\n  label?: string;\n  /** Position of the label relative to the switch. Options: 'start', 'end', 'top', 'bottom'. Default: 'end' */\n  labelPlacement?: FormControlLabelProps['labelPlacement'];\n  /** Callback fired when the switch state changes. Receives the event and checked state */\n  onChange?: MuiSwitchProps['onChange'];\n  /** Size of the switch. Options: 'small' (48x24px), 'medium' (64x32px). Default: 'medium' */\n  size?: 'medium' | 'small';\n  /** Test ID for the switch element */\n  fdKey: string;\n}\n\n/**\n * A customizable Switch component.\n *\n * @param props - The component props\n * @returns The rendered Switch component\n */\nexport const Switch = ({\n  ariaLabel,\n  checked,\n  disabled = false,\n  fdKey,\n  label,\n  labelPlacement = 'end',\n  onChange,\n  size = 'medium',\n}: SwitchProps): ReactElement => {\n  if (!label) {\n    return (\n      <StyledSwitch\n        disableRipple\n        $size={size}\n        checked={checked}\n        data-fd={fdKey}\n        disabled={disabled}\n        onChange={onChange}\n        slotProps={{ input: { 'aria-label': ariaLabel } }}\n      />\n    );\n  }\n\n  return (\n    <StyledFormControlLabel\n      $size={size}\n      control={\n        <StyledSwitch\n          disableRipple\n          $size={size}\n          checked={checked}\n          data-fd={fdKey}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      }\n      disabled={disabled}\n      label={label}\n      labelPlacement={labelPlacement}\n    />\n  );\n};\n\nexport default Switch;\n"],"names":["StyledFormControlLabel","styled","FormControlLabel","shouldForwardProp","prop","theme","$size","color","palette","semantic","text","gap","margin","typography","StyledSwitch","MuiSwitch","checked","isSmall","height","thumbSize","width","padding","overflow","transitionDuration","transform","fill","borderColor","stroke","backgroundColor","opacity","outline","outlineOffset","background","border","transition","transitions","create","duration","borderRadius","boxShadow","customShadows","sunken","Switch","ariaLabel","disabled","fdKey","label","labelPlacement","onChange","size","_jsx","control","disableRipple","slotProps","input"],"mappings":"wKAMA,MAAMA,EAAyBC,EAAOC,EAAkB,CACtDC,kBAAoBC,GAAkB,UAATA,GADAH,EAEI,EAAGI,QAAOC,QAAQ,aAAU,CAC7DC,MAAOF,EAAMG,QAAQC,SAASC,KAAK,eACnCC,IAAK,OACLC,OAAQ,EACR,+BAAgC,IAC3BP,EAAMQ,WAAqB,UAAVP,EAAoB,cAAgB,eAItDQ,EAAeb,EAAOc,EAAW,CACrCZ,kBAAoBC,GAAkB,UAATA,GADVH,EAEc,EAAGI,QAAOC,QAAQ,SAAUU,cAC7D,MAAMC,EAAoB,UAAVX,EAEVY,EAASD,EAAU,GAAK,GACxBE,EAAYF,EAAU,GAAK,GAGjC,MAAO,CACLG,MANYH,EAAU,GAAK,GAO3BC,SACAG,QAAS,EACTC,SAAU,UACV,0BAA2B,CACzBD,QAAS,EACTE,mBAAoB,QACpB,gBAAiB,CACfC,UAAW,cAXEP,EAAU,GAAK,QAY5BV,MAAOF,EAAMG,QAAQC,SAASgB,KAAK,cACnC,qBAAsB,CACpBC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,oBAE7C,uBAAwB,CACtBC,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,GAEX,oCAAqC,CACnCD,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,wCAAyC,CACvCC,QAAS,aAAazB,EAAMG,QAAQC,SAASkB,OAAO,kBACpDI,cAAe,OAEjB,kCAAmC,CACjCF,QAAS,GACTH,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CC,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,sBAErD,oCAAqC,CACnCJ,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,qBAAsB,CACpBT,MAAOD,EACPD,OAAQC,EACRS,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,qBACnDC,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDO,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,gBAAiB,CACrDC,SAAU,OAGd,qBAAsB,CACpBC,aAAcpB,EACdU,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,aAC7CQ,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDY,UAAWvB,EAAU,OAASX,EAAMmC,eAAeC,OACnDZ,QAAS,EACTK,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,mBAAoB,eAAgB,WAAY,CACpFC,SAAU,OAGd,wFAAyF,CACvFT,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,eAE/C,yFAA0F,CACxFG,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,mBAiCtCiB,EAAS,EACpBC,YACA3B,UACA4B,YAAW,EACXC,QACAC,QACAC,iBAAiB,MACjBC,WACAC,OAAO,YAEFH,EAeHI,EAAClD,SACQiD,EACPE,QACED,EAACpC,EAAY,CACXsC,uBACOH,EACPjC,QAASA,YACA6B,EACTD,SAAUA,EACVI,SAAUA,IAGdJ,SAAUA,EACVE,MAAOA,EACPC,eAAgBA,IA3BhBG,EAACpC,EAAY,CACXsC,eAAa,EAAA9C,MACN2C,EACPjC,QAASA,EAAO,UACP6B,EACTD,SAAUA,EACVI,SAAUA,EACVK,UAAW,CAAEC,MAAO,CAAE,aAAcX"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/styles"),s=require("@mui/material/Tab"),r=require("../BadgeCount/index.cjs.js"),t=require("@mui/material/Box");const a=i.styled(t)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1)})));module.exports=({iconPosition:i="start",badgeCount:t,badgeEmphasis:n="strong",label:l,...o})=>{const u=void 0!==t?e.jsxs(a,{children:[l,e.jsx(r,{emphasis:n,children:t})]}):l;return e.jsx(s,{iconPosition:i,label:u,...o})};
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/styles"),s=require("@mui/material/Tab"),r=require("../BadgeCount/index.cjs.js"),t=require("@mui/material/Box");const a=i.styled(t)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1)})));module.exports=({badgeCount:i,badgeEmphasis:t="strong",fdKey:n,iconPosition:o="start",label:l,...u})=>{const d=void 0!==i?e.jsxs(a,{children:[l,e.jsx(r.BadgeCount,{emphasis:t,children:i})]}):l;return e.jsx(s,{...u,"data-fd":n,iconPosition:o,label:d})};
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Tab/index.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport MuiTab, { type TabProps as MuiTabProps } from '@mui/material/Tab';\n\nimport BadgeCount, { type BadgeCountProps } from '../BadgeCount';\nimport Box from '../Box';\n\nexport interface TabProps {\n  badgeCount?: number;\n  badgeEmphasis?: BadgeCountProps['emphasis'];\n  iconPosition?: MuiTabProps['iconPosition'];\n  icon?: MuiTabProps['icon'];\n  label: string;\n  value?: MuiTabProps['value'];\n  disabled?: boolean;\n  className?: string;\n  onClick?: () => void;\n}\n\nconst StyledTabLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nconst Tab = ({\n  iconPosition = 'start',\n  badgeCount,\n  badgeEmphasis = 'strong',\n  label,\n  ...props\n}: TabProps): JSX.Element => {\n  const tabLabel =\n    badgeCount !== undefined ? (\n      <StyledTabLabelContainer>\n        {label}\n        <BadgeCount emphasis={badgeEmphasis}>{badgeCount}</BadgeCount>\n      </StyledTabLabelContainer>\n    ) : (\n      label\n    );\n\n  return <MuiTab iconPosition={iconPosition} label={tabLabel} {...props} />;\n};\n\nexport default Tab;\n"],"names":["StyledTabLabelContainer","styled","Box","theme","display","alignItems","gap","spacing","iconPosition","badgeCount","badgeEmphasis","label","props","tabLabel","undefined","_jsxs","children","_jsx","BadgeCount","emphasis","MuiTab"],"mappings":"wLAkBA,MAAMA,EAA0BC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACpDC,QAAS,OACTC,WAAY,SACZC,IAAKH,EAAMI,QAAQ,sBAGT,EACVC,eAAe,QACfC,aACAC,gBAAgB,SAChBC,WACGC,MAEH,MAAMC,OACWC,IAAfL,EACEM,EAAAA,KAACf,EAAuB,CAAAgB,SAAA,CACrBL,EACDM,EAAAA,IAACC,EAAU,CAACC,SAAUT,EAAaM,SAAGP,OACd,EAK9B,OAAOQ,EAAAA,IAACG,EAAM,CAACZ,aAAcA,EAAcG,MAAOE,KAAcD"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Tab/index.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport MuiTab, { type TabProps as MuiTabProps } from '@mui/material/Tab';\n\nimport BadgeCount, { type BadgeCountProps } from '../BadgeCount';\nimport Box from '../Box';\n\nexport interface TabProps {\n  badgeCount?: number;\n  badgeEmphasis?: BadgeCountProps['emphasis'];\n  className?: string;\n  disabled?: boolean;\n  fdKey?: string;\n  icon?: MuiTabProps['icon'];\n  iconPosition?: MuiTabProps['iconPosition'];\n  label: string;\n  onClick?: () => void;\n  value?: MuiTabProps['value'];\n}\n\nconst StyledTabLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nconst Tab = ({\n  badgeCount,\n  badgeEmphasis = 'strong',\n  fdKey,\n  iconPosition = 'start',\n  label,\n  ...props\n}: TabProps): JSX.Element => {\n  const tabLabel =\n    badgeCount !== undefined ? (\n      <StyledTabLabelContainer>\n        {label}\n        <BadgeCount emphasis={badgeEmphasis}>{badgeCount}</BadgeCount>\n      </StyledTabLabelContainer>\n    ) : (\n      label\n    );\n\n  return <MuiTab {...props} data-fd={fdKey} iconPosition={iconPosition} label={tabLabel} />;\n};\n\nexport default Tab;\n"],"names":["StyledTabLabelContainer","styled","Box","theme","display","alignItems","gap","spacing","badgeCount","badgeEmphasis","fdKey","iconPosition","label","props","tabLabel","undefined","_jsxs","children","_jsx","BadgeCount","emphasis","MuiTab"],"mappings":"wLAmBA,MAAMA,EAA0BC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACpDC,QAAS,OACTC,WAAY,SACZC,IAAKH,EAAMI,QAAQ,sBAGT,EACVC,aACAC,gBAAgB,SAChBC,QACAC,eAAe,QACfC,WACGC,MAEH,MAAMC,OACWC,IAAfP,EACEQ,EAAAA,KAAChB,EAAuB,CAAAiB,SAAA,CACrBL,EACDM,EAAAA,IAACC,EAAAA,WAAU,CAACC,SAAUX,EAAaQ,SAAGT,OACd,EAK9B,OAAOU,MAACG,EAAM,IAAKR,YAAgBH,EAAOC,aAAcA,EAAcC,MAAOE"}

package/dist/components/atoms/Tab/index.d.ts

@@ -4,15 +4,16 @@ import { BadgeCountProps } from '../BadgeCount/index.js';
 interface TabProps {
     badgeCount?: number;
     badgeEmphasis?: BadgeCountProps['emphasis'];
-    iconPosition?: TabProps$1['iconPosition'];
+    className?: string;
+    disabled?: boolean;
+    fdKey?: string;
     icon?: TabProps$1['icon'];
+    iconPosition?: TabProps$1['iconPosition'];
     label: string;
-    value?: TabProps$1['value'];
-    disabled?: boolean;
-    className?: string;
     onClick?: () => void;
+    value?: TabProps$1['value'];
 }
-declare const Tab: ({ iconPosition, badgeCount, badgeEmphasis, label, ...props }: TabProps) => JSX.Element;
+declare const Tab: ({ badgeCount, badgeEmphasis, fdKey, iconPosition, label, ...props }: TabProps) => JSX.Element;
 
 export { Tab as default };
 export type { TabProps };

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

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as t}from"react/jsx-runtime";import{styled as e}from"@mui/material/styles";import o from"@mui/material/Tab";import r from"../BadgeCount/index.js";import a from"@mui/material/Box";const m=e(a)((({theme:i})=>({display:"flex",alignItems:"center",gap:i.spacing(1)}))),s=({iconPosition:e="start",badgeCount:a,badgeEmphasis:s="strong",label:n,...l})=>{const p=void 0!==a?i(m,{children:[n,t(r,{emphasis:s,children:a})]}):n;return t(o,{iconPosition:e,label:p,...l})};export{s as default};
+import{jsxs as i,jsx as t}from"react/jsx-runtime";import{styled as e}from"@mui/material/styles";import a from"@mui/material/Tab";import{BadgeCount as o}from"../BadgeCount/index.js";import r from"@mui/material/Box";const m=e(r)((({theme:i})=>({display:"flex",alignItems:"center",gap:i.spacing(1)}))),s=({badgeCount:e,badgeEmphasis:r="strong",fdKey:s,iconPosition:n="start",label:l,...d})=>{const p=void 0!==e?i(m,{children:[l,t(o,{emphasis:r,children:e})]}):l;return t(a,{...d,"data-fd":s,iconPosition:n,label:p})};export{s as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Tab/index.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport MuiTab, { type TabProps as MuiTabProps } from '@mui/material/Tab';\n\nimport BadgeCount, { type BadgeCountProps } from '../BadgeCount';\nimport Box from '../Box';\n\nexport interface TabProps {\n  badgeCount?: number;\n  badgeEmphasis?: BadgeCountProps['emphasis'];\n  iconPosition?: MuiTabProps['iconPosition'];\n  icon?: MuiTabProps['icon'];\n  label: string;\n  value?: MuiTabProps['value'];\n  disabled?: boolean;\n  className?: string;\n  onClick?: () => void;\n}\n\nconst StyledTabLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nconst Tab = ({\n  iconPosition = 'start',\n  badgeCount,\n  badgeEmphasis = 'strong',\n  label,\n  ...props\n}: TabProps): JSX.Element => {\n  const tabLabel =\n    badgeCount !== undefined ? (\n      <StyledTabLabelContainer>\n        {label}\n        <BadgeCount emphasis={badgeEmphasis}>{badgeCount}</BadgeCount>\n      </StyledTabLabelContainer>\n    ) : (\n      label\n    );\n\n  return <MuiTab iconPosition={iconPosition} label={tabLabel} {...props} />;\n};\n\nexport default Tab;\n"],"names":["StyledTabLabelContainer","styled","Box","theme","display","alignItems","gap","spacing","Tab","iconPosition","badgeCount","badgeEmphasis","label","props","tabLabel","undefined","_jsxs","children","_jsx","BadgeCount","emphasis","MuiTab"],"mappings":"wMAkBA,MAAMA,EAA0BC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACpDC,QAAS,OACTC,WAAY,SACZC,IAAKH,EAAMI,QAAQ,OAGfC,EAAM,EACVC,eAAe,QACfC,aACAC,gBAAgB,SAChBC,WACGC,MAEH,MAAMC,OACWC,IAAfL,EACEM,EAAChB,EAAuB,CAAAiB,SAAA,CACrBL,EACDM,EAACC,EAAU,CAACC,SAAUT,EAAaM,SAAGP,OACd,EAK9B,OAAOQ,EAACG,EAAM,CAACZ,aAAcA,EAAcG,MAAOE,KAAcD"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Tab/index.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport MuiTab, { type TabProps as MuiTabProps } from '@mui/material/Tab';\n\nimport BadgeCount, { type BadgeCountProps } from '../BadgeCount';\nimport Box from '../Box';\n\nexport interface TabProps {\n  badgeCount?: number;\n  badgeEmphasis?: BadgeCountProps['emphasis'];\n  className?: string;\n  disabled?: boolean;\n  fdKey?: string;\n  icon?: MuiTabProps['icon'];\n  iconPosition?: MuiTabProps['iconPosition'];\n  label: string;\n  onClick?: () => void;\n  value?: MuiTabProps['value'];\n}\n\nconst StyledTabLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nconst Tab = ({\n  badgeCount,\n  badgeEmphasis = 'strong',\n  fdKey,\n  iconPosition = 'start',\n  label,\n  ...props\n}: TabProps): JSX.Element => {\n  const tabLabel =\n    badgeCount !== undefined ? (\n      <StyledTabLabelContainer>\n        {label}\n        <BadgeCount emphasis={badgeEmphasis}>{badgeCount}</BadgeCount>\n      </StyledTabLabelContainer>\n    ) : (\n      label\n    );\n\n  return <MuiTab {...props} data-fd={fdKey} iconPosition={iconPosition} label={tabLabel} />;\n};\n\nexport default Tab;\n"],"names":["StyledTabLabelContainer","styled","Box","theme","display","alignItems","gap","spacing","Tab","badgeCount","badgeEmphasis","fdKey","iconPosition","label","props","tabLabel","undefined","_jsxs","children","_jsx","BadgeCount","emphasis","MuiTab"],"mappings":"sNAmBA,MAAMA,EAA0BC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACpDC,QAAS,OACTC,WAAY,SACZC,IAAKH,EAAMI,QAAQ,OAGfC,EAAM,EACVC,aACAC,gBAAgB,SAChBC,QACAC,eAAe,QACfC,WACGC,MAEH,MAAMC,OACWC,IAAfP,EACEQ,EAACjB,EAAuB,CAAAkB,SAAA,CACrBL,EACDM,EAACC,EAAU,CAACC,SAAUX,EAAaQ,SAAGT,OACd,EAK9B,OAAOU,EAACG,EAAM,IAAKR,YAAgBH,EAAOC,aAAcA,EAAcC,MAAOE"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),i=require("@mui/material/Chip"),s=require("@mui/material/styles"),l=require("../../../icons/Cancel/index.cjs.js"),o=require("../../../providers/TranslationProvider.cjs.js");const r=s.styled(t,{shouldForwardProp:e=>"disabled"!==e})((({disabled:e})=>({cursor:e?"not-allowed":void 0}))),a=s.styled(i,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({...t&&{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"],"&:hover:not(.Mui-disabled)":{color:e.palette.semantic.text["text-inverse-strong"]}},"&:hover:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:active:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:focus-visible, &.Mui-focusVisible":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&.Mui-disabled":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.fill["fill-disabled"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"]}}}}))),d=({className:t,disabled:i=!1,fdKey:s,label:d,onClick:n,onDismiss:c,selected:u=!1,size:m="medium"})=>{const{translate:p}=o.useTranslation();return e.jsx(r,{disabled:i,children:e.jsx(a,{"aria-label":n?d:c?p("Dismiss_dismissible",{dismissible:d}):void 0,className:t,clickable:!i&&!!n,"data-fd":s,"data-fd-variant":"tag",deleteIcon:(()=>{if(c)return e.jsx(l,{"aria-hidden":!0,"data-testid":"tag-dismiss-icon",size:"sm"})})(),disabled:i,label:d,onClick:i?void 0:n,onDelete:i?void 0:c,onKeyDown:e=>{i||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),c?c(e):n&&n(e))},selected:u,size:m})})};d.displayName="Tag",exports.Tag=d,exports.default=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),i=require("@mui/material/Chip"),l=require("@mui/material/styles"),s=require("../../../icons/Cancel/index.cjs.js"),o=require("../../../providers/TranslationProvider.cjs.js");const r=l.styled(t,{shouldForwardProp:e=>"disabled"!==e})((({disabled:e})=>({cursor:e?"not-allowed":void 0}))),a=l.styled(i,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({...t&&{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"],"&:hover:not(.Mui-disabled)":{color:e.palette.semantic.text["text-inverse-strong"]}},"&:hover:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:active:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:focus-visible, &.Mui-focusVisible":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&.Mui-disabled":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.fill["fill-disabled"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"]}}}}))),d=({className:t,disabled:i=!1,fdKey:l,label:d,onClick:n,onDismiss:c,selected:u=!1,size:m="medium"})=>{const{translate:p}=o.useTranslation();return e.jsx(r,{disabled:i,children:e.jsx(a,{"aria-label":n?d:c?p("Dismiss_dismissible",{dismissible:d}):void 0,className:t,clickable:!i&&!!n,"data-fd":l,"data-fd-variant":"tag",deleteIcon:(()=>{if(c)return e.jsx(s,{"aria-hidden":!0,"data-fd":"tag-dismiss-icon",size:"sm"})})(),disabled:i,label:d,onClick:i?void 0:n,onDelete:i?void 0:c,onKeyDown:e=>{i||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),c?c(e):n&&n(e))},selected:u,size:m})})};d.displayName="Tag",exports.Tag=d,exports.default=d;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.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-testid=\"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":"mTAwCA,MAAMA,EAAqBC,EAAAA,OAAOC,EAAK,CACrCC,kBAAoBC,GAAkB,aAATA,GADJH,EAEA,EAAGI,eAAU,CACtCC,OAAQD,EAAW,mBAAgBE,MAG/BC,EAAYP,EAAAA,OAAOQ,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,mBAsCtB,OACEC,EAAAA,IAAC9B,GAAmBK,SAAUA,EAAQ0B,SACpCD,EAAAA,IAACtB,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,EAAAA,IAACK,EAAU,CAAA,eAAc,EAAI,cAAc,mBAAmBR,KAAK,QAW1DS,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.cjs.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":"mTAwCA,MAAMA,EAAqBC,EAAAA,OAAOC,EAAK,CACrCC,kBAAoBC,GAAkB,aAATA,GADJH,EAEA,EAAGI,eAAU,CACtCC,OAAQD,EAAW,mBAAgBE,MAG/BC,EAAYP,EAAAA,OAAOQ,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,mBAsCtB,OACEC,EAAAA,IAAC9B,GAAmBK,SAAUA,EAAQ0B,SACpCD,EAAAA,IAACtB,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,EAAAA,IAACK,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/Tag/index.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/Box";import i from"@mui/material/Chip";import{styled as o}from"@mui/material/styles";import l from"../../../icons/Cancel/index.js";import{useTranslation as s}from"../../../providers/TranslationProvider.js";const r=o(t,{shouldForwardProp:e=>"disabled"!==e})((({disabled:e})=>({cursor:e?"not-allowed":void 0}))),a=o(i,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({...t&&{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"],"&:hover:not(.Mui-disabled)":{color:e.palette.semantic.text["text-inverse-strong"]}},"&:hover:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:active:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:focus-visible, &.Mui-focusVisible":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&.Mui-disabled":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.fill["fill-disabled"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"]}}}}))),n=({className:t,disabled:i=!1,fdKey:o,label:n,onClick:d,onDismiss:c,selected:m=!1,size:p="medium"})=>{const{translate:b}=s();return e(r,{disabled:i,children:e(a,{"aria-label":d?n:c?b("Dismiss_dismissible",{dismissible:n}):void 0,className:t,clickable:!i&&!!d,"data-fd":o,"data-fd-variant":"tag",deleteIcon:(()=>{if(c)return e(l,{"aria-hidden":!0,"data-testid":"tag-dismiss-icon",size:"sm"})})(),disabled:i,label:n,onClick:i?void 0:d,onDelete:i?void 0:c,onKeyDown:e=>{i||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),c?c(e):d&&d(e))},selected:m,size:p})})};n.displayName="Tag";export{n as Tag,n as default};
+import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/Box";import i from"@mui/material/Chip";import{styled as o}from"@mui/material/styles";import l from"../../../icons/Cancel/index.js";import{useTranslation as s}from"../../../providers/TranslationProvider.js";const r=o(t,{shouldForwardProp:e=>"disabled"!==e})((({disabled:e})=>({cursor:e?"not-allowed":void 0}))),a=o(i,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({...t&&{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"],"&:hover:not(.Mui-disabled)":{color:e.palette.semantic.text["text-inverse-strong"]}},"&:hover:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:active:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:focus-visible, &.Mui-focusVisible":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&.Mui-disabled":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.fill["fill-disabled"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"]}}}}))),n=({className:t,disabled:i=!1,fdKey:o,label:n,onClick:d,onDismiss:c,selected:m=!1,size:p="medium"})=>{const{translate:b}=s();return e(r,{disabled:i,children:e(a,{"aria-label":d?n:c?b("Dismiss_dismissible",{dismissible:n}):void 0,className:t,clickable:!i&&!!d,"data-fd":o,"data-fd-variant":"tag",deleteIcon:(()=>{if(c)return e(l,{"aria-hidden":!0,"data-fd":"tag-dismiss-icon",size:"sm"})})(),disabled:i,label:n,onClick:i?void 0:d,onDelete:i?void 0:c,onKeyDown:e=>{i||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),c?c(e):d&&d(e))},selected:m,size:p})})};n.displayName="Tag";export{n as Tag,n as default};
 //# sourceMappingURL=index.js.map

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-testid=\"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,cAAc,mBAAmBR,KAAK,QAW1DS,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,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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Alert"),r=require("@mui/material/AlertTitle"),i=require("@mui/material/Box"),n=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"),m=require("../../../icons/InformationCircle/index.cjs.js"),d=require("../../atoms/Button/index.cjs.js");const u={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(m,{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"]})},x={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":()=>"transparant","brand-inverse":()=>"transparant"},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"]}},p=(e,t)=>u[t](e),k=(e,t)=>x.background[t](e),w=(e,t)=>x.border[t](e),b=(e,t)=>x.header[t](e),f=(e,t)=>x.text[t](e),j=n.styled(i)((()=>({marginTop:"16px"}))),g=n.styled(a,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:k(e,t),border:"1px solid",borderColor:w(e,t),color:f(e,t)}))),v=t.memo((({title:t,description:a,tone:s="neutral",onClose:l,className:o,"data-testid":c,action:m})=>{const u=n.useTheme();return e.jsxs(g,{"aria-describedby":`alert-description-${c??"default"}`,"aria-labelledby":`alert-title-${c??"default"}`,className:o,"data-testid":c,icon:p(u,s),onClose:l,role:"alert",tone:s,children:[e.jsx(r,{color:b(u,s),id:`alert-title-${c??"default"}`,children:t}),e.jsx(i,{id:`alert-description-${c??"default"}`,children:a}),(()=>{if(!m)return null;const a=m["data-testid"]??`action-button-${m.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(j,{children:e.jsx(d.Button,{"aria-label":`${m.label} - ${t}`,"data-testid":a,fdKey:m.label,onClick:m.onClick,size:"small",variant:m.type??"primary",children:m.label})})})()]})}));v.displayName="Alert",module.exports=v;
+"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"),m=require("../../../icons/InformationCircle/index.cjs.js"),d=require("../../atoms/Button/index.cjs.js");const u={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(m,{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"]})},x={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"},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"]}},p=(e,t)=>u[t](e),k=(e,t)=>x.background[t](e),w=(e,t)=>x.border[t](e),b=(e,t)=>x.header[t](e),f=(e,t)=>x.text[t](e),j=i.styled(n)((()=>({marginTop:"16px"}))),g=i.styled(r,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:k(e,t),border:"1px solid",borderColor:w(e,t),color:f(e,t)}))),v=t.memo((({title:r,description:s,tone:l="neutral",onClose:o,className:c,fdKey:m,action:u})=>{const x=i.useTheme(),k=t.useId();return e.jsxs(g,{"aria-describedby":`alert-description-${m??k}`,"aria-labelledby":`alert-title-${m??k}`,className:c,"data-fd":m,icon:p(x,l),onClose:o,role:"alert",tone:l,children:[e.jsx(a,{color:b(x,l),id:`alert-title-${m??k}`,children:r}),e.jsx(n,{id:`alert-description-${m??k}`,children:s}),(()=>{if(!u)return null;const t=u.fdKey??`action-button-${u.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(j,{children:e.jsx(d.Button,{"aria-label":`${u.label} - ${r}`,fdKey:t,onClick:u.onClick,size:"small",variant:u.type??"primary",children:u.label})})})()]})}));v.displayName="Alert",module.exports=v;
 //# 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":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nimport { memo } 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';\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  /** Main heading text of the alert */\n  title: string;\n  /** Detailed description text of the alert */\n  description: string;\n  /** Visual tone of the alert */\n  tone?: AlertTones;\n  /** Callback function when the alert is closed */\n  onClose?: () => void;\n  /** Action button configuration */\n  action?: {\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    'data-testid'?: string;\n  };\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n}\n\nconst ICONS = {\n  neutral: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n  brand: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n  destructive: (theme: Theme) => <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />,\n  warning: (theme: Theme) => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n  information: (theme: Theme) => (\n    <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n  ),\n  'neutral-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n  'brand-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n  success: (theme: Theme) => <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />,\n};\n\nconst COLOURS = {\n  background: {\n    neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n    success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n    information: (theme: Theme) => theme.palette.semantic.fill['fill-information-weak'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.background['background-inverse'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.fill['fill-primary-strong'],\n  },\n  border: {\n    neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n    success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n    information: (theme: Theme) => theme.palette.semantic.stroke['stroke-information-weak'],\n    'neutral-inverse': () => 'transparant',\n    'brand-inverse': () => 'transparant',\n  },\n  header: {\n    neutral: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    brand: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    destructive: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    warning: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    success: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    information: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n  },\n  text: {\n    neutral: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    success: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    information: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-weak'],\n    'brand-inverse': (theme: Theme) => 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 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    tone = 'neutral',\n    onClose,\n    className,\n    'data-testid': dataTestId,\n    action,\n  }: AlertProps) => {\n    const theme = useTheme();\n\n    const renderAction = (): JSX.Element | null => {\n      if (!action) {\n        return null;\n      }\n\n      const actionTestId =\n        action['data-testid'] ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n      return (\n        <StyledActionContainer>\n          <Button\n            aria-label={`${action.label} - ${title}`}\n            data-testid={actionTestId}\n            fdKey={action.label}\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={`alert-description-${dataTestId ?? 'default'}`}\n        aria-labelledby={`alert-title-${dataTestId ?? 'default'}`}\n        className={className}\n        data-testid={dataTestId}\n        icon={getIcon(theme, tone)}\n        onClose={onClose}\n        role=\"alert\"\n        tone={tone}\n      >\n        <MuiAlertTitle color={getHeaderColour(theme, tone)} id={`alert-title-${dataTestId ?? 'default'}`}>\n          {title}\n        </MuiAlertTitle>\n        <Box id={`alert-description-${dataTestId ?? 'default'}`}>{description}</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","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","onClose","className","dataTestId","action","useTheme","_jsxs","role","children","MuiAlertTitle","id","actionTestId","label","replace","toLowerCase","Button","fdKey","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, 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';\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  /** Main heading text of the alert */\n  title: string;\n  /** Detailed description text of the alert */\n  description: string;\n  /** Visual tone of the alert */\n  tone?: AlertTones;\n  /** Callback function when the alert is closed */\n  onClose?: () => void;\n  /** Action button configuration */\n  action?: {\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  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n}\n\nconst ICONS = {\n  neutral: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n  brand: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n  destructive: (theme: Theme) => <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />,\n  warning: (theme: Theme) => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n  information: (theme: Theme) => (\n    <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n  ),\n  'neutral-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n  'brand-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n  success: (theme: Theme) => <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />,\n};\n\nconst COLOURS = {\n  background: {\n    neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n    success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n    information: (theme: Theme) => theme.palette.semantic.fill['fill-information-weak'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.background['background-inverse'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.fill['fill-primary-strong'],\n  },\n  border: {\n    neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n    success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n    information: (theme: Theme) => theme.palette.semantic.stroke['stroke-information-weak'],\n    'neutral-inverse': () => 'transparent',\n    'brand-inverse': () => 'transparent',\n  },\n  header: {\n    neutral: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    brand: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    destructive: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    warning: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    success: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    information: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n  },\n  text: {\n    neutral: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    success: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    information: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-weak'],\n    'brand-inverse': (theme: Theme) => 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 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  ({ title, description, tone = 'neutral', onClose, className, fdKey, action }: AlertProps) => {\n    const theme = useTheme();\n    const alertId = useId();\n\n    const renderAction = (): JSX.Element | null => {\n      if (!action) {\n        return null;\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={`${action.label} - ${title}`}\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={`alert-description-${fdKey ?? alertId}`}\n        aria-labelledby={`alert-title-${fdKey ?? alertId}`}\n        className={className}\n        data-fd={fdKey}\n        icon={getIcon(theme, tone)}\n        onClose={onClose}\n        role=\"alert\"\n        tone={tone}\n      >\n        <MuiAlertTitle color={getHeaderColour(theme, tone)} id={`alert-title-${fdKey ?? alertId}`}>\n          {title}\n        </MuiAlertTitle>\n        <Box id={`alert-description-${fdKey ?? alertId}`}>{description}</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","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","onClose","className","fdKey","action","useTheme","alertId","useId","_jsxs","role","children","MuiAlertTitle","id","actionFdKey","label","replace","toLowerCase","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}

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

@@ -23,12 +23,12 @@ interface AlertProps {
         /** Callback function when the action button is clicked */
         onClick: () => void;
         /** Test ID for the action button */
-        'data-testid'?: string;
+        fdKey?: string;
     };
     /** Additional CSS class names */
     className?: string;
     /** Test ID for testing and automation */
-    'data-testid'?: string;
+    fdKey?: string;
 }
 /**
  * Alert component is used to display important messages or notifications to users.
@@ -39,7 +39,7 @@ interface AlertProps {
  * re-renders when the component's props haven't changed, which is beneficial for components
  * that may be used frequently throughout the application.
  */
-declare const Alert: react.MemoExoticComponent<({ title, description, tone, onClose, className, "data-testid": dataTestId, action, }: AlertProps) => react_jsx_runtime.JSX.Element>;
+declare const Alert: react.MemoExoticComponent<({ title, description, tone, onClose, className, fdKey, action }: AlertProps) => react_jsx_runtime.JSX.Element>;
 
 export { Alert as default };
 export type { AlertProps, AlertTones };

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 a}from"react";import r from"@mui/material/Alert";import i from"@mui/material/AlertTitle";import n from"@mui/material/Box";import{styled as o,useTheme as l}from"@mui/material/styles";import s from"../../../icons/Alert/index.js";import c from"../../../icons/CancelCircle/index.js";import m from"../../../icons/CheckmarkCircle/index.js";import p from"../../../icons/Diamond/index.js";import d from"../../../icons/InformationCircle/index.js";import{Button as u}from"../../atoms/Button/index.js";const x={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(c,{color:e.palette.semantic.icon["icon-error"]}),warning:e=>t(s,{color:e.palette.semantic.icon["icon-warning"]}),information:e=>t(d,{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(m,{color:e.palette.semantic.icon["icon-success"]})},f={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":()=>"transparant","brand-inverse":()=>"transparant"},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),w=(e,t)=>f.background[t](e),b=(e,t)=>f.border[t](e),g=(e,t)=>f.header[t](e),v=(e,t)=>f.text[t](e),C=o(n)((()=>({marginTop:"16px"}))),y=o(r,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:w(e,t),border:"1px solid",borderColor:b(e,t),color:v(e,t)}))),h=a((({title:a,description:r,tone:o="neutral",onClose:s,className:c,"data-testid":m,action:p})=>{const d=l();return e(y,{"aria-describedby":`alert-description-${m??"default"}`,"aria-labelledby":`alert-title-${m??"default"}`,className:c,"data-testid":m,icon:k(d,o),onClose:s,role:"alert",tone:o,children:[t(i,{color:g(d,o),id:`alert-title-${m??"default"}`,children:a}),t(n,{id:`alert-description-${m??"default"}`,children:r}),(()=>{if(!p)return null;const e=p["data-testid"]??`action-button-${p.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(u,{"aria-label":`${p.label} - ${a}`,"data-testid":e,fdKey:p.label,onClick:p.onClick,size:"small",variant:p.type??"primary",children:p.label})})})()]})}));h.displayName="Alert";export{h 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 s,useTheme as l}from"@mui/material/styles";import c from"../../../icons/Alert/index.js";import m from"../../../icons/CancelCircle/index.js";import p from"../../../icons/CheckmarkCircle/index.js";import d from"../../../icons/Diamond/index.js";import x from"../../../icons/InformationCircle/index.js";import{Button as u}from"../../atoms/Button/index.js";const f={neutral:e=>t(d,{color:e.palette.semantic.icon["icon-strong"]}),brand:e=>t(d,{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(x,{color:e.palette.semantic.icon["icon-information"]}),"neutral-inverse":e=>t(d,{color:e.palette.semantic.icon["icon-inverse"]}),"brand-inverse":e=>t(d,{color:e.palette.semantic.icon["icon-inverse"]}),success:e=>t(p,{color:e.palette.semantic.icon["icon-success"]})},k={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"},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)=>f[t](e),b=(e,t)=>k.background[t](e),g=(e,t)=>k.border[t](e),v=(e,t)=>k.header[t](e),y=(e,t)=>k.text[t](e),C=s(o)((()=>({marginTop:"16px"}))),h=s(n,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:b(e,t),border:"1px solid",borderColor:g(e,t),color:y(e,t)}))),j=r((({title:r,description:n,tone:s="neutral",onClose:c,className:m,fdKey:p,action:d})=>{const x=l(),f=a();return e(h,{"aria-describedby":`alert-description-${p??f}`,"aria-labelledby":`alert-title-${p??f}`,className:m,"data-fd":p,icon:w(x,s),onClose:c,role:"alert",tone:s,children:[t(i,{color:v(x,s),id:`alert-title-${p??f}`,children:r}),t(o,{id:`alert-description-${p??f}`,children:n}),(()=>{if(!d)return null;const e=d.fdKey??`action-button-${d.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(u,{"aria-label":`${d.label} - ${r}`,fdKey:e,onClick:d.onClick,size:"small",variant:d.type??"primary",children:d.label})})})()]})}));j.displayName="Alert";export{j 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":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nimport { memo } 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';\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  /** Main heading text of the alert */\n  title: string;\n  /** Detailed description text of the alert */\n  description: string;\n  /** Visual tone of the alert */\n  tone?: AlertTones;\n  /** Callback function when the alert is closed */\n  onClose?: () => void;\n  /** Action button configuration */\n  action?: {\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    'data-testid'?: string;\n  };\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n}\n\nconst ICONS = {\n  neutral: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n  brand: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n  destructive: (theme: Theme) => <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />,\n  warning: (theme: Theme) => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n  information: (theme: Theme) => (\n    <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n  ),\n  'neutral-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n  'brand-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n  success: (theme: Theme) => <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />,\n};\n\nconst COLOURS = {\n  background: {\n    neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n    success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n    information: (theme: Theme) => theme.palette.semantic.fill['fill-information-weak'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.background['background-inverse'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.fill['fill-primary-strong'],\n  },\n  border: {\n    neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n    success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n    information: (theme: Theme) => theme.palette.semantic.stroke['stroke-information-weak'],\n    'neutral-inverse': () => 'transparant',\n    'brand-inverse': () => 'transparant',\n  },\n  header: {\n    neutral: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    brand: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    destructive: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    warning: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    success: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    information: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n  },\n  text: {\n    neutral: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    success: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    information: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-weak'],\n    'brand-inverse': (theme: Theme) => 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 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    tone = 'neutral',\n    onClose,\n    className,\n    'data-testid': dataTestId,\n    action,\n  }: AlertProps) => {\n    const theme = useTheme();\n\n    const renderAction = (): JSX.Element | null => {\n      if (!action) {\n        return null;\n      }\n\n      const actionTestId =\n        action['data-testid'] ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n      return (\n        <StyledActionContainer>\n          <Button\n            aria-label={`${action.label} - ${title}`}\n            data-testid={actionTestId}\n            fdKey={action.label}\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={`alert-description-${dataTestId ?? 'default'}`}\n        aria-labelledby={`alert-title-${dataTestId ?? 'default'}`}\n        className={className}\n        data-testid={dataTestId}\n        icon={getIcon(theme, tone)}\n        onClose={onClose}\n        role=\"alert\"\n        tone={tone}\n      >\n        <MuiAlertTitle color={getHeaderColour(theme, tone)} id={`alert-title-${dataTestId ?? 'default'}`}>\n          {title}\n        </MuiAlertTitle>\n        <Box id={`alert-description-${dataTestId ?? 'default'}`}>{description}</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","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","onClose","className","dataTestId","action","useTheme","_jsxs","role","children","MuiAlertTitle","id","actionTestId","label","replace","toLowerCase","Button","fdKey","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, 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';\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  /** Main heading text of the alert */\n  title: string;\n  /** Detailed description text of the alert */\n  description: string;\n  /** Visual tone of the alert */\n  tone?: AlertTones;\n  /** Callback function when the alert is closed */\n  onClose?: () => void;\n  /** Action button configuration */\n  action?: {\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  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n}\n\nconst ICONS = {\n  neutral: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n  brand: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n  destructive: (theme: Theme) => <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />,\n  warning: (theme: Theme) => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n  information: (theme: Theme) => (\n    <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n  ),\n  'neutral-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n  'brand-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n  success: (theme: Theme) => <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />,\n};\n\nconst COLOURS = {\n  background: {\n    neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n    success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n    information: (theme: Theme) => theme.palette.semantic.fill['fill-information-weak'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.background['background-inverse'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.fill['fill-primary-strong'],\n  },\n  border: {\n    neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n    success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n    information: (theme: Theme) => theme.palette.semantic.stroke['stroke-information-weak'],\n    'neutral-inverse': () => 'transparent',\n    'brand-inverse': () => 'transparent',\n  },\n  header: {\n    neutral: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    brand: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    destructive: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    warning: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    success: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    information: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n  },\n  text: {\n    neutral: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    success: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    information: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-weak'],\n    'brand-inverse': (theme: Theme) => 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 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  ({ title, description, tone = 'neutral', onClose, className, fdKey, action }: AlertProps) => {\n    const theme = useTheme();\n    const alertId = useId();\n\n    const renderAction = (): JSX.Element | null => {\n      if (!action) {\n        return null;\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={`${action.label} - ${title}`}\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={`alert-description-${fdKey ?? alertId}`}\n        aria-labelledby={`alert-title-${fdKey ?? alertId}`}\n        className={className}\n        data-fd={fdKey}\n        icon={getIcon(theme, tone)}\n        onClose={onClose}\n        role=\"alert\"\n        tone={tone}\n      >\n        <MuiAlertTitle color={getHeaderColour(theme, tone)} id={`alert-title-${fdKey ?? alertId}`}>\n          {title}\n        </MuiAlertTitle>\n        <Box id={`alert-description-${fdKey ?? alertId}`}>{description}</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","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","onClose","className","fdKey","action","useTheme","alertId","useId","_jsxs","role","children","MuiAlertTitle","id","actionFdKey","label","replace","toLowerCase","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/Box"),n=require("@mui/material/Snackbar"),r=require("@mui/material/styles"),a=require("../../../icons/Cancel/index.cjs.js"),o=require("../../../icons/Diamond/index.cjs.js"),s=require("../../atoms/Button/index.cjs.js"),l=require("../ButtonGroup/index.cjs.js");const c=e=>e.palette.semantic.icon["icon-inverse-strong"],d=r.styled(i)((({theme:e})=>{const t=(e=>({bg:e.palette.semantic.fill["fill-strong"],text:e.palette.semantic.text["text-inverse-strong"],border:e.palette.semantic.stroke["stroke-strong"]}))(e);return{display:"flex",alignItems:"center",justifyContent:"space-between",gap:e.spacing(3),padding:e.spacing(1.5,2),backgroundColor:t.bg,color:t.text,border:`1px solid ${t.border}`,borderRadius:e.radius["radius-8"],role:"alert"}})),p=r.styled(i)((({theme:e})=>({fontSize:e.typography.b1Weak.fontSize,lineHeight:e.typography.b1Weak.lineHeight,fontFamily:e.typography.b1Weak.fontFamily,fontWeight:e.typography.b1Weak.fontWeight,letterSpacing:e.typography.b1Weak.letterSpacing,flexShrink:1,minWidth:0}))),u=r.styled(i)({display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}),y=r.styled(u)((({theme:e})=>({color:c(e)}))),g=r.styled(i)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),flex:1,minWidth:0}))),h=r.styled(i)((({theme:e})=>({display:"flex",gap:e.spacing(1),alignItems:"center",flexShrink:0}))),m=r.styled("button")((({theme:e})=>({background:"none",border:"none",color:"inherit",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",padding:e.spacing(.5),margin:e.spacing(0,-.5),"&:hover":{opacity:.8},"&:focus":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"}}))),x=r.styled("button")((({theme:e})=>({background:"none",border:"none",fontSize:e.typography.b1Weak.fontSize,lineHeight:e.typography.b1Weak.lineHeight,fontFamily:e.typography.b1Weak.fontFamily,fontWeight:e.typography.b1Weak.fontWeight,letterSpacing:e.typography.b1Weak.letterSpacing,textDecoration:"underline",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer",color:"inherit",padding:0,whiteSpace:"nowrap","&:hover":{opacity:.8},"&:focus":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px",borderRadius:e.radius["radius-8"]}}))),b=r.styled(i)({maxWidth:"60vw"}),f=t.memo((({content:i,onClose:r,className:c,"data-testid":u,actions:f,textLink:k,open:j,autoHideDuration:W=5e3})=>{const[C,S]=t.useState(j??!0),v=void 0!==j?j:C,q=t.useCallback(((e,t)=>{"clickaway"!==t&&(void 0===j&&S(!1),r?.())}),[r,j]);return e.jsx(n,{anchorOrigin:{horizontal:"center",vertical:"bottom"},autoHideDuration:W,className:c,"data-testid":u,onClose:q,open:v,children:e.jsx(b,{children:e.jsxs(d,{role:"alert",children:[e.jsxs(g,{children:[e.jsx(y,{children:e.jsx(o,{})}),e.jsx(p,{children:i})]}),e.jsxs(h,{children:[k&&(()=>{if(!k)return;const t=k["data-testid"]??`text-link-${k.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(x,{"aria-label":k.label,"data-testid":t,onClick:()=>{k.onClick(),q()},type:"button",children:k.label})})(),f&&f.length>0&&(()=>{if(!f||0===f.length)return;const t=[...f].sort(((e,t)=>{const i={tertiary:0,secondary:1,primary:2},n=e.type??"primary",r=t.type??"primary";return i[n]-i[r]}));return e.jsx(l,{align:"right",size:"small",children:t.map((t=>{const i=t["data-testid"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(s.Button,{"aria-label":t.label,"data-testid":i,fdKey:t.label,onClick:()=>{t.onClick(),q()},tone:"inverse",variant:t.type??"primary",children:t.label},i)}))})})(),r&&e.jsx(m,{"aria-label":"Close notification",onClick:q,type:"button",children:e.jsx(a,{})})]})]})})})}));f.displayName="AlertSnackbar",module.exports=f;
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("@mui/material/Box"),r=require("@mui/material/Snackbar"),i=require("@mui/material/styles"),a=require("../../../icons/Cancel/index.cjs.js"),o=require("../../../icons/Diamond/index.cjs.js"),l=require("../../atoms/Button/index.cjs.js"),s=require("../ButtonGroup/index.cjs.js");const c=e=>e.palette.semantic.icon["icon-inverse-strong"],d=i.styled(n)((({theme:e})=>{const t=(e=>({bg:e.palette.semantic.fill["fill-strong"],text:e.palette.semantic.text["text-inverse-strong"],border:e.palette.semantic.stroke["stroke-strong"]}))(e);return{display:"flex",alignItems:"center",justifyContent:"space-between",gap:e.spacing(3),padding:e.spacing(1.5,2),backgroundColor:t.bg,color:t.text,border:`1px solid ${t.border}`,borderRadius:e.radius["radius-8"],role:"alert"}})),p=i.styled(n)((({theme:e})=>({fontSize:e.typography.b1Weak.fontSize,lineHeight:e.typography.b1Weak.lineHeight,fontFamily:e.typography.b1Weak.fontFamily,fontWeight:e.typography.b1Weak.fontWeight,letterSpacing:e.typography.b1Weak.letterSpacing,flexShrink:1,minWidth:0}))),u=i.styled(n)({display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}),y=i.styled(u)((({theme:e})=>({color:c(e)}))),g=i.styled(n)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),flex:1,minWidth:0}))),h=i.styled(n)((({theme:e})=>({display:"flex",gap:e.spacing(1),alignItems:"center",flexShrink:0}))),m=i.styled("button")((({theme:e})=>({background:"none",border:"none",color:"inherit",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",padding:e.spacing(.5),margin:e.spacing(0,-.5),"&:hover":{opacity:.8},"&:focus":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"}}))),f=i.styled("button")((({theme:e})=>({background:"none",border:"none",fontSize:e.typography.b1Weak.fontSize,lineHeight:e.typography.b1Weak.lineHeight,fontFamily:e.typography.b1Weak.fontFamily,fontWeight:e.typography.b1Weak.fontWeight,letterSpacing:e.typography.b1Weak.letterSpacing,textDecoration:"underline",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer",color:"inherit",padding:0,whiteSpace:"nowrap","&:hover":{opacity:.8},"&:focus":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px",borderRadius:e.radius["radius-8"]}}))),x=i.styled(n)({maxWidth:"60vw"}),b=t.memo((({content:n,onClose:i,className:c,fdKey:u,actions:b,textLink:k,open:j,autoHideDuration:W=5e3})=>{const[C,S]=t.useState(j??!0),v=void 0!==j?j:C,q=t.useCallback(((e,t)=>{"clickaway"!==t&&(void 0===j&&S(!1),i?.())}),[i,j]);return e.jsx(r,{anchorOrigin:{horizontal:"center",vertical:"bottom"},autoHideDuration:W,className:c,"data-fd":u,onClose:q,open:v,children:e.jsx(x,{children:e.jsxs(d,{role:"alert",children:[e.jsxs(g,{children:[e.jsx(y,{children:e.jsx(o,{})}),e.jsx(p,{children:n})]}),e.jsxs(h,{children:[k&&(()=>{if(!k)return;const t=k.fdKey??`text-link-${k.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(f,{"aria-label":k.label,"data-fd":t,onClick:()=>{k.onClick(),q()},type:"button",children:k.label})})(),b&&b.length>0&&(()=>{if(!b||0===b.length)return;const t=[...b].sort(((e,t)=>{const n={tertiary:0,secondary:1,primary:2},r=e.type??"primary",i=t.type??"primary";return n[r]-n[i]}));return e.jsx(s,{align:"right",size:"small",children:t.map((t=>{const n=t.fdKey??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(l.Button,{"aria-label":t.label,fdKey:n,onClick:()=>{t.onClick(),q()},tone:"inverse",variant:t.type??"primary",children:t.label},n)}))})})(),i&&e.jsx(m,{"aria-label":"Close notification",onClick:q,type:"button",children:e.jsx(a,{})})]})]})})})}));b.displayName="AlertSnackbar",module.exports=b;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/AlertSnackbar/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo, useCallback, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Snackbar from '@mui/material/Snackbar';\nimport { styled, type Theme } from '@mui/material/styles';\n\nimport CancelIcon from '@fd/icons/Cancel';\nimport DiamondIcon from '@fd/icons/Diamond';\n\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport ButtonGroup from '../ButtonGroup';\n\n/** Action button configuration */\nexport interface ActionButton {\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  'data-testid'?: string;\n}\n\n/** Text link configuration */\nexport interface TextLink {\n  /** Text label for the link */\n  label: string;\n  /** Callback function when the link is clicked */\n  onClick: () => void;\n  /** Test ID for the link */\n  'data-testid'?: string;\n}\n\n/** Props for the AlertSnackbar component */\nexport interface AlertSnackbarProps {\n  /** Content of the alert snackbar  */\n  content: string;\n  /** Callback function when the alert snackbar is closed */\n  onClose?: () => void;\n  /** Action buttons configuration - supports Primary, Secondary, Tertiary buttons via ButtonGroup */\n  actions?: ActionButton[];\n  /** Text link configuration - separate from action buttons */\n  textLink?: TextLink;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n  /** Whether the snackbar is open */\n  open?: boolean;\n  /** Duration in milliseconds the snackbar should be displayed */\n  autoHideDuration?: number;\n}\n\nconst getDefaultColors = (theme: Theme) => {\n  return {\n    bg: theme.palette.semantic.fill['fill-strong'],\n    text: theme.palette.semantic.text['text-inverse-strong'],\n    border: theme.palette.semantic.stroke['stroke-strong'],\n  };\n};\n\nconst getDefaultIconColor = (theme: Theme): string => {\n  return theme.palette.semantic.icon['icon-inverse-strong'];\n};\n\nconst StyledContent = styled(Box)(({ theme }) => {\n  const colors = getDefaultColors(theme);\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: theme.spacing(3),\n    padding: theme.spacing(1.5, 2),\n    backgroundColor: colors.bg,\n    color: colors.text,\n    border: `1px solid ${colors.border}`,\n    borderRadius: theme.radius['radius-8'],\n    role: 'alert',\n  };\n});\n\nconst StyledText = styled(Box)(({ theme }) => ({\n  fontSize: theme.typography.b1Weak.fontSize,\n  lineHeight: theme.typography.b1Weak.lineHeight,\n  fontFamily: theme.typography.b1Weak.fontFamily,\n  fontWeight: theme.typography.b1Weak.fontWeight,\n  letterSpacing: theme.typography.b1Weak.letterSpacing,\n  flexShrink: 1,\n  minWidth: 0,\n}));\n\nconst StyledIcon = styled(Box)({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n});\n\nconst StyledIconWrapper = styled(StyledIcon)(({ theme }) => ({\n  color: getDefaultIconColor(theme),\n}));\n\nconst StyledContentLeft = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  flex: 1,\n  minWidth: 0,\n}));\n\nconst StyledActions = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1),\n  alignItems: 'center',\n  flexShrink: 0,\n}));\n\nconst StyledCloseButton = styled('button')(({ theme }) => ({\n  background: 'none',\n  border: 'none',\n  color: 'inherit',\n  cursor: 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: theme.spacing(0.5),\n  margin: theme.spacing(0, -0.5),\n  '&:hover': {\n    opacity: 0.8,\n  },\n  '&:focus': {\n    outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    outlineOffset: '2px',\n  },\n}));\n\nconst StyledTextLink = styled('button')(({ theme }) => ({\n  background: 'none',\n  border: 'none',\n  fontSize: theme.typography.b1Weak.fontSize,\n  lineHeight: theme.typography.b1Weak.lineHeight,\n  fontFamily: theme.typography.b1Weak.fontFamily,\n  fontWeight: theme.typography.b1Weak.fontWeight,\n  letterSpacing: theme.typography.b1Weak.letterSpacing,\n  textDecoration: 'underline',\n  textUnderlineOffset: '25%',\n  textUnderlinePosition: 'from-font',\n  cursor: 'pointer',\n  color: 'inherit',\n  padding: 0,\n  whiteSpace: 'nowrap',\n  '&:hover': {\n    opacity: 0.8,\n  },\n  '&:focus': {\n    outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    outlineOffset: '2px',\n    borderRadius: theme.radius['radius-8'],\n  },\n}));\n\nconst SnackbarPaper = styled(Box)({\n  maxWidth: '60vw',\n});\n\n/**\n * AlertSnackbar component is used to display important notifications to users.\n * It can include optional action buttons (via ButtonGroup supporting Primary, Secondary, Tertiary variants)\n * and/or a text link component.\n * The component wraps MUI's Snackbar component to provide a consistent,\n * accessible notification experience. It is wrapped with React.memo to optimize\n * performance by preventing unnecessary re-renders when props haven't changed.\n * Uses semantic design tokens for colors and typography to ensure proper light/dark mode support.\n */\nconst AlertSnackbar = memo(\n  ({\n    content,\n    onClose,\n    className,\n    'data-testid': dataTestId,\n    actions,\n    textLink,\n    open: controlledOpen,\n    autoHideDuration = 5000,\n  }: AlertSnackbarProps) => {\n    // Use internal state when not controlled\n    const [internalOpen, setInternalOpen] = useState(controlledOpen ?? true);\n    // When controlled (open prop is defined), use it; otherwise use internal state\n    const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n    const handleClose = useCallback(\n      (_event?: Event | React.SyntheticEvent, reason?: string) => {\n        if (reason === 'clickaway') {\n          return;\n        }\n        // Update internal state for uncontrolled mode\n        if (controlledOpen === undefined) {\n          setInternalOpen(false);\n        }\n        // Call external callback if provided\n        onClose?.();\n      },\n      [onClose, controlledOpen],\n    );\n\n    const renderActions = (): React.ReactNode => {\n      if (!actions || actions.length === 0) {\n        return undefined;\n      }\n\n      // Sort actions: Tertiary (left), Secondary (middle), Primary (right)\n      const sortedActions = [...actions].sort((a, b) => {\n        const orderMap: Record<ButtonType, number> = {\n          tertiary: 0,\n          secondary: 1,\n          primary: 2,\n        };\n        const aType = a.type ?? 'primary';\n        const bType = b.type ?? 'primary';\n        return orderMap[aType] - orderMap[bType];\n      });\n\n      return (\n        <ButtonGroup align=\"right\" size=\"small\">\n          {sortedActions.map((action) => {\n            const actionTestId =\n              action['data-testid'] ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n            return (\n              <Button\n                key={actionTestId}\n                aria-label={action.label}\n                data-testid={actionTestId}\n                fdKey={action.label}\n                onClick={() => {\n                  action.onClick();\n                  handleClose();\n                }}\n                tone=\"inverse\"\n                variant={action.type ?? 'primary'}\n              >\n                {action.label}\n              </Button>\n            );\n          })}\n        </ButtonGroup>\n      );\n    };\n\n    const renderTextLink = (): React.ReactNode => {\n      if (!textLink) {\n        return undefined;\n      }\n\n      const linkTestId =\n        textLink['data-testid'] ?? `text-link-${textLink.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n      return (\n        <StyledTextLink\n          aria-label={textLink.label}\n          data-testid={linkTestId}\n          onClick={() => {\n            textLink.onClick();\n            handleClose();\n          }}\n          type=\"button\"\n        >\n          {textLink.label}\n        </StyledTextLink>\n      );\n    };\n\n    return (\n      <Snackbar\n        anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}\n        autoHideDuration={autoHideDuration}\n        className={className}\n        data-testid={dataTestId}\n        onClose={handleClose}\n        open={isOpen}\n      >\n        <SnackbarPaper>\n          <StyledContent role=\"alert\">\n            <StyledContentLeft>\n              <StyledIconWrapper>\n                <DiamondIcon />\n              </StyledIconWrapper>\n              <StyledText>{content}</StyledText>\n            </StyledContentLeft>\n            <StyledActions>\n              {textLink && renderTextLink()}\n              {actions && actions.length > 0 && renderActions()}\n              {onClose && (\n                <StyledCloseButton\n                  aria-label=\"Close notification\"\n                  onClick={handleClose}\n                  type=\"button\"\n                >\n                  <CancelIcon />\n                </StyledCloseButton>\n              )}\n            </StyledActions>\n          </StyledContent>\n        </SnackbarPaper>\n      </Snackbar>\n    );\n  },\n);\n\nAlertSnackbar.displayName = 'AlertSnackbar';\n\nexport default AlertSnackbar;\n"],"names":["getDefaultIconColor","theme","palette","semantic","icon","StyledContent","styled","Box","colors","bg","fill","text","border","stroke","getDefaultColors","display","alignItems","justifyContent","gap","spacing","padding","backgroundColor","color","borderRadius","radius","role","StyledText","fontSize","typography","b1Weak","lineHeight","fontFamily","fontWeight","letterSpacing","flexShrink","minWidth","StyledIcon","StyledIconWrapper","StyledContentLeft","flex","StyledActions","StyledCloseButton","background","cursor","margin","opacity","outline","outlineOffset","StyledTextLink","textDecoration","textUnderlineOffset","textUnderlinePosition","whiteSpace","SnackbarPaper","maxWidth","AlertSnackbar","memo","content","onClose","className","dataTestId","actions","textLink","open","controlledOpen","autoHideDuration","internalOpen","setInternalOpen","useState","isOpen","undefined","handleClose","useCallback","_event","reason","_jsx","Snackbar","anchorOrigin","horizontal","vertical","children","_jsxs","DiamondIcon","linkTestId","label","replace","toLowerCase","onClick","type","renderTextLink","length","sortedActions","sort","a","b","orderMap","tertiary","secondary","primary","aType","bType","ButtonGroup","align","size","map","action","actionTestId","Button","fdKey","tone","variant","renderActions","CancelIcon","displayName"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/AlertSnackbar/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo, useCallback, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Snackbar from '@mui/material/Snackbar';\nimport { styled, type Theme } from '@mui/material/styles';\n\nimport CancelIcon from '@fd/icons/Cancel';\nimport DiamondIcon from '@fd/icons/Diamond';\n\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport ButtonGroup from '../ButtonGroup';\n\n/** Action button configuration */\nexport interface ActionButton {\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/** Text link configuration */\nexport interface TextLink {\n  /** Text label for the link */\n  label: string;\n  /** Callback function when the link is clicked */\n  onClick: () => void;\n  /** Test ID for the link */\n  fdKey?: string;\n}\n\n/** Props for the AlertSnackbar component */\nexport interface AlertSnackbarProps {\n  /** Content of the alert snackbar  */\n  content: string;\n  /** Callback function when the alert snackbar is closed */\n  onClose?: () => void;\n  /** Action buttons configuration - supports Primary, Secondary, Tertiary buttons via ButtonGroup */\n  actions?: ActionButton[];\n  /** Text link configuration - separate from action buttons */\n  textLink?: TextLink;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n  /** Whether the snackbar is open */\n  open?: boolean;\n  /** Duration in milliseconds the snackbar should be displayed */\n  autoHideDuration?: number;\n}\n\nconst getDefaultColors = (theme: Theme) => {\n  return {\n    bg: theme.palette.semantic.fill['fill-strong'],\n    text: theme.palette.semantic.text['text-inverse-strong'],\n    border: theme.palette.semantic.stroke['stroke-strong'],\n  };\n};\n\nconst getDefaultIconColor = (theme: Theme): string => {\n  return theme.palette.semantic.icon['icon-inverse-strong'];\n};\n\nconst StyledContent = styled(Box)(({ theme }) => {\n  const colors = getDefaultColors(theme);\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: theme.spacing(3),\n    padding: theme.spacing(1.5, 2),\n    backgroundColor: colors.bg,\n    color: colors.text,\n    border: `1px solid ${colors.border}`,\n    borderRadius: theme.radius['radius-8'],\n    role: 'alert',\n  };\n});\n\nconst StyledText = styled(Box)(({ theme }) => ({\n  fontSize: theme.typography.b1Weak.fontSize,\n  lineHeight: theme.typography.b1Weak.lineHeight,\n  fontFamily: theme.typography.b1Weak.fontFamily,\n  fontWeight: theme.typography.b1Weak.fontWeight,\n  letterSpacing: theme.typography.b1Weak.letterSpacing,\n  flexShrink: 1,\n  minWidth: 0,\n}));\n\nconst StyledIcon = styled(Box)({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n});\n\nconst StyledIconWrapper = styled(StyledIcon)(({ theme }) => ({\n  color: getDefaultIconColor(theme),\n}));\n\nconst StyledContentLeft = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  flex: 1,\n  minWidth: 0,\n}));\n\nconst StyledActions = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1),\n  alignItems: 'center',\n  flexShrink: 0,\n}));\n\nconst StyledCloseButton = styled('button')(({ theme }) => ({\n  background: 'none',\n  border: 'none',\n  color: 'inherit',\n  cursor: 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: theme.spacing(0.5),\n  margin: theme.spacing(0, -0.5),\n  '&:hover': {\n    opacity: 0.8,\n  },\n  '&:focus': {\n    outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    outlineOffset: '2px',\n  },\n}));\n\nconst StyledTextLink = styled('button')(({ theme }) => ({\n  background: 'none',\n  border: 'none',\n  fontSize: theme.typography.b1Weak.fontSize,\n  lineHeight: theme.typography.b1Weak.lineHeight,\n  fontFamily: theme.typography.b1Weak.fontFamily,\n  fontWeight: theme.typography.b1Weak.fontWeight,\n  letterSpacing: theme.typography.b1Weak.letterSpacing,\n  textDecoration: 'underline',\n  textUnderlineOffset: '25%',\n  textUnderlinePosition: 'from-font',\n  cursor: 'pointer',\n  color: 'inherit',\n  padding: 0,\n  whiteSpace: 'nowrap',\n  '&:hover': {\n    opacity: 0.8,\n  },\n  '&:focus': {\n    outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    outlineOffset: '2px',\n    borderRadius: theme.radius['radius-8'],\n  },\n}));\n\nconst SnackbarPaper = styled(Box)({\n  maxWidth: '60vw',\n});\n\n/**\n * AlertSnackbar component is used to display important notifications to users.\n * It can include optional action buttons (via ButtonGroup supporting Primary, Secondary, Tertiary variants)\n * and/or a text link component.\n * The component wraps MUI's Snackbar component to provide a consistent,\n * accessible notification experience. It is wrapped with React.memo to optimize\n * performance by preventing unnecessary re-renders when props haven't changed.\n * Uses semantic design tokens for colors and typography to ensure proper light/dark mode support.\n */\nconst AlertSnackbar = memo(\n  ({\n    content,\n    onClose,\n    className,\n    fdKey,\n    actions,\n    textLink,\n    open: controlledOpen,\n    autoHideDuration = 5000,\n  }: AlertSnackbarProps) => {\n    // Use internal state when not controlled\n    const [internalOpen, setInternalOpen] = useState(controlledOpen ?? true);\n    // When controlled (open prop is defined), use it; otherwise use internal state\n    const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n    const handleClose = useCallback(\n      (_event?: Event | React.SyntheticEvent, reason?: string) => {\n        if (reason === 'clickaway') {\n          return;\n        }\n        // Update internal state for uncontrolled mode\n        if (controlledOpen === undefined) {\n          setInternalOpen(false);\n        }\n        // Call external callback if provided\n        onClose?.();\n      },\n      [onClose, controlledOpen],\n    );\n\n    const renderActions = (): React.ReactNode => {\n      if (!actions || actions.length === 0) {\n        return undefined;\n      }\n\n      // Sort actions: Tertiary (left), Secondary (middle), Primary (right)\n      const sortedActions = [...actions].sort((a, b) => {\n        const orderMap: Record<ButtonType, number> = {\n          tertiary: 0,\n          secondary: 1,\n          primary: 2,\n        };\n        const aType = a.type ?? 'primary';\n        const bType = b.type ?? 'primary';\n        return orderMap[aType] - orderMap[bType];\n      });\n\n      return (\n        <ButtonGroup align=\"right\" size=\"small\">\n          {sortedActions.map((action) => {\n            const actionTestId =\n              action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n            return (\n              <Button\n                key={actionTestId}\n                aria-label={action.label}\n                fdKey={actionTestId}\n                onClick={() => {\n                  action.onClick();\n                  handleClose();\n                }}\n                tone=\"inverse\"\n                variant={action.type ?? 'primary'}\n              >\n                {action.label}\n              </Button>\n            );\n          })}\n        </ButtonGroup>\n      );\n    };\n\n    const renderTextLink = (): React.ReactNode => {\n      if (!textLink) {\n        return undefined;\n      }\n\n      const linkTestId = textLink.fdKey ?? `text-link-${textLink.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n      return (\n        <StyledTextLink\n          aria-label={textLink.label}\n          data-fd={linkTestId}\n          onClick={() => {\n            textLink.onClick();\n            handleClose();\n          }}\n          type=\"button\"\n        >\n          {textLink.label}\n        </StyledTextLink>\n      );\n    };\n\n    return (\n      <Snackbar\n        anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}\n        autoHideDuration={autoHideDuration}\n        className={className}\n        data-fd={fdKey}\n        onClose={handleClose}\n        open={isOpen}\n      >\n        <SnackbarPaper>\n          <StyledContent role=\"alert\">\n            <StyledContentLeft>\n              <StyledIconWrapper>\n                <DiamondIcon />\n              </StyledIconWrapper>\n              <StyledText>{content}</StyledText>\n            </StyledContentLeft>\n            <StyledActions>\n              {textLink && renderTextLink()}\n              {actions && actions.length > 0 && renderActions()}\n              {onClose && (\n                <StyledCloseButton aria-label=\"Close notification\" onClick={handleClose} type=\"button\">\n                  <CancelIcon />\n                </StyledCloseButton>\n              )}\n            </StyledActions>\n          </StyledContent>\n        </SnackbarPaper>\n      </Snackbar>\n    );\n  },\n);\n\nAlertSnackbar.displayName = 'AlertSnackbar';\n\nexport default AlertSnackbar;\n"],"names":["getDefaultIconColor","theme","palette","semantic","icon","StyledContent","styled","Box","colors","bg","fill","text","border","stroke","getDefaultColors","display","alignItems","justifyContent","gap","spacing","padding","backgroundColor","color","borderRadius","radius","role","StyledText","fontSize","typography","b1Weak","lineHeight","fontFamily","fontWeight","letterSpacing","flexShrink","minWidth","StyledIcon","StyledIconWrapper","StyledContentLeft","flex","StyledActions","StyledCloseButton","background","cursor","margin","opacity","outline","outlineOffset","StyledTextLink","textDecoration","textUnderlineOffset","textUnderlinePosition","whiteSpace","SnackbarPaper","maxWidth","AlertSnackbar","memo","content","onClose","className","fdKey","actions","textLink","open","controlledOpen","autoHideDuration","internalOpen","setInternalOpen","useState","isOpen","undefined","handleClose","useCallback","_event","reason","_jsx","Snackbar","anchorOrigin","horizontal","vertical","children","_jsxs","DiamondIcon","linkTestId","label","replace","toLowerCase","onClick","type","renderTextLink","length","sortedActions","sort","a","b","orderMap","tertiary","secondary","primary","aType","bType","ButtonGroup","align","size","map","action","actionTestId","Button","tone","variant","renderActions","CancelIcon","displayName"],"mappings":"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"}