@flipdish/portal-library 8.0.2 → 8.1.0

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

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

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

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

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ButtonType } from '../../atoms/Button/getButtonStyles.js';
 
@@ -6,30 +7,48 @@ import { ButtonType } from '../../atoms/Button/getButtonStyles.js';
 type AlertTones = 'brand-inverse' | 'brand' | 'destructive' | 'information' | 'neutral-inverse' | 'neutral' | 'success' | 'warning';
 /** Props for the Alert component */
 interface AlertProps {
-    /** Main heading text of the alert */
-    title: string;
+    /** Optional main heading text of the alert */
+    title?: string;
     /** Detailed description text of the alert */
     description: string;
     /** Visual tone of the alert */
     tone?: AlertTones;
+    /** Optional icon override; pass null to hide the icon */
+    icon?: ReactNode | null;
     /** Callback function when the alert is closed */
     onClose?: () => void;
-    /** Action button configuration */
-    action?: {
-        /** Text label for the action button */
-        label: string;
-        /** Visual style of the action button */
-        type?: ButtonType;
-        /** Callback function when the action button is clicked */
-        onClick: () => void;
-        /** Test ID for the action button */
-        'data-testid'?: string;
-    };
+    /** Action configuration (button by default, or link) */
+    action?: AlertAction;
     /** Additional CSS class names */
     className?: string;
     /** Test ID for testing and automation */
-    'data-testid'?: string;
+    fdKey?: string;
 }
+type AlertAction = {
+    /** Defaults to button when omitted */
+    kind?: 'button';
+    /** Text label for the action button */
+    label: string;
+    /** Visual style of the action button */
+    type?: ButtonType;
+    /** Callback function when the action button is clicked */
+    onClick: () => void;
+    /** Test ID for the action button */
+    fdKey?: string;
+} | {
+    /** Render a link action */
+    kind: 'link';
+    /** Text label for the link */
+    label: string;
+    /** Destination URL */
+    href: string;
+    /** Target for the link */
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    /** rel attribute for the link */
+    rel?: string;
+    /** Test ID for the link */
+    fdKey?: string;
+};
 /**
  * Alert component is used to display important messages or notifications to users.
  * It supports different visual tones to convey different semantic meanings and can include
@@ -39,7 +58,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, icon, onClose, className, fdKey, action }: AlertProps) => react_jsx_runtime.JSX.Element>;
 
 export { Alert as default };
-export type { AlertProps, AlertTones };
+export type { AlertAction, 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 l,useTheme as s}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 f from"../../../icons/InformationCircle/index.js";import{Button as x}from"../../atoms/Button/index.js";import{Link as k}from"../../atoms/Link/index.js";const u={neutral:e=>t(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(f,{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"]})},b={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":e=>"transparent","brand-inverse":e=>"transparent"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}},w=(e,t)=>u[t](e),g=(e,t)=>b.background[t](e),v=(e,t)=>b.border[t](e),y=(e,t)=>b.header[t](e),h=(e,t)=>b.text[t](e),C=l(o)((()=>({marginTop:"16px"}))),j=l(k)((()=>({padding:0}))),$=l(n,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:g(e,t),border:"1px solid",borderColor:v(e,t),color:h(e,t)}))),K=r((({title:r,description:n,tone:l="neutral",icon:c,onClose:m,className:p,fdKey:d,action:f})=>{const k=s(),u=a(),b=Boolean(r),g=b?`alert-title-${d??u}`:void 0,v=`alert-description-${d??u}`;return e($,{"aria-describedby":v,"aria-labelledby":g,className:p,"data-fd":d,icon:void 0===c?w(k,l):c,onClose:m,role:"alert",tone:l,children:[b&&t(i,{color:y(k,l),id:g,children:r}),t(o,{id:v,children:n}),(()=>{if(!f)return null;const e=r?`${f.label} - ${r}`:f.label;if("link"===f.kind){const r=f.fdKey??`action-link-${f.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(j,{"aria-label":e,fdKey:r,href:f.href,rel:f.rel,target:f.target,children:f.label})})}const a=f.fdKey??`action-button-${f.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(x,{"aria-label":e,fdKey:a,onClick:f.onClick,size:"small",variant:f.type??"primary",children:f.label})})})()]})}));K.displayName="Alert";export{K as default};
 //# sourceMappingURL=index.js.map

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

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

package/dist/components/molecules/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