npm - @flipdish/portal-library - Versions diffs - 8.0.2 → 8.0.3 - Mend

@flipdish/portal-library 8.0.2 → 8.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

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

	@@ -1 +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"}
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, {\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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-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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

	@@ -1 +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":"4iBAuDA,MAAMA,EAAQ,CACZC,QAAUC,GAAiBC,EAACC,EAAW,CAACC,MAAOH,EAAMI,QAAQC,SAASC,KAAK,iBAC3EC,MAAQP,GAAiBC,EAACC,EAAW,CAACC,MAAOH,EAAMI,QAAQC,SAASC,KAAK,kBACzEE,YAAcR,GAAiBC,EAACQ,EAAgB,CAACN,MAAOH,EAAMI,QAAQC,SAASC,KAAK,gBACpFI,QAAUV,GAAiBC,EAACU,EAAS,CAACR,MAAOH,EAAMI,QAAQC,SAASC,KAAK,kBACzEM,YAAcZ,GACZC,EAACY,EAAqB,CAACV,MAAOH,EAAMI,QAAQC,SAASC,KAAK,sBAE5D,kBAAoBN,GAAiBC,EAACC,EAAW,CAACC,MAAOH,EAAMI,QAAQC,SAASC,KAAK,kBACrF,gBAAkBN,GAAiBC,EAACC,EAAW,CAACC,MAAOH,EAAMI,QAAQC,SAASC,KAAK,kBACnFQ,QAAUd,GAAiBC,EAACc,EAAmB,CAACZ,MAAOH,EAAMI,QAAQC,SAASC,KAAK,mBAG/EU,EAAU,CACdC,WAAY,CACVlB,QAAUC,GAAiBA,EAAMI,QAAQC,SAASa,KAAK,aACvDX,MAAQP,GAAiBA,EAAMI,QAAQC,SAASa,KAAK,qBACrDV,YAAcR,GAAiBA,EAAMI,QAAQC,SAASa,KAAK,mBAC3DR,QAAUV,GAAiBA,EAAMI,QAAQC,SAASa,KAAK,qBACvDJ,QAAUd,GAAiBA,EAAMI,QAAQC,SAASa,KAAK,qBACvDN,YAAcZ,GAAiBA,EAAMI,QAAQC,SAASa,KAAK,yBAC3D,kBAAoBlB,GAAiBA,EAAMI,QAAQC,SAASY,WAAW,sBACvE,gBAAkBjB,GAAiBA,EAAMI,QAAQC,SAASa,KAAK,wBAEjEC,OAAQ,CACNpB,QAAUC,GAAiBA,EAAMI,QAAQC,SAASe,OAAO,eACzDb,MAAQP,GAAiBA,EAAMI,QAAQC,SAASe,OAAO,uBACvDZ,YAAcR,GAAiBA,EAAMI,QAAQC,SAASe,OAAO,qBAC7DV,QAAUV,GAAiBA,EAAMI,QAAQC,SAASe,OAAO,uBACzDN,QAAUd,GAAiBA,EAAMI,QAAQC,SAASe,OAAO,uBACzDR,YAAcZ,GAAiBA,EAAMI,QAAQC,SAASe,OAAO,2BAC7D,kBAAmB,IAAM,cACzB,gBAAiB,IAAM,eAEzBC,OAAQ,CACNtB,QAAUC,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,eACvDf,MAAQP,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,eACrDd,YAAcR,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,eAC3DZ,QAAUV,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,eACvDR,QAAUd,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,eACvDV,YAAcZ,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,eAC3D,kBAAoBtB,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,uBACjE,gBAAkBtB,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,wBAEjEA,KAAM,CACJvB,QAAUC,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,aACvDf,MAAQP,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,aACrDd,YAAcR,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,aAC3DZ,QAAUV,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,aACvDR,QAAUd,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,aACvDV,YAAcZ,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,aAC3D,kBAAoBtB,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,qBACjE,gBAAkBtB,GAAiBA,EAAMI,QAAQC,SAASiB,KAAK,uBAI7DC,EAAU,CAACvB,EAAcwB,IACtB1B,EAAM0B,GAAMxB,GAGfyB,EAAsB,CAACzB,EAAcwB,IAClCR,EAAQC,WAAWO,GAAMxB,GAG5B0B,EAAkB,CAAC1B,EAAcwB,IAC9BR,EAAQG,OAAOK,GAAMxB,GAGxB2B,EAAkB,CAAC3B,EAAcwB,IAC9BR,EAAQK,OAAOG,GAAMxB,GAGxB4B,EAAgB,CAAC5B,EAAcwB,IAC5BR,EAAQM,KAAKE,GAAMxB,GAOtB6B,EAAwBC,EAAOC,EAAPD,EAAY,KAAA,CACxCE,UAAW,WAGPC,EAAcH,EAAOI,EAAU,CACnCC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD9BN,EAEC,EAAG9B,QAAOwB,WAAM,CACnCc,gBAAiBb,EAAoBzB,EAAOwB,GAC5CL,OAAQ,YACRoB,YAAab,EAAgB1B,EAAOwB,GACpCrB,MAAOyB,EAAc5B,EAAOwB,OAYxBgB,EAAQC,GACZ,EACEC,QACAC,cACAnB,OAAO,UACPoB,UACAC,YACA,cAAeC,EACfC,aAEA,MAAM/C,EAAQgD,IA0Bd,OACEC,EAAChB,sBACmB,qBAAqBa,GAAc,YAAW,kBAC/C,eAAeA,GAAc,YAC9CD,UAAWA,EAAS,cACPC,EACbxC,KAAMiB,EAAQvB,EAAOwB,GACrBoB,QAASA,EACTM,KAAK,QACL1B,KAAMA,EAAI2B,SAAA,CAEVlD,EAACmD,EAAa,CAACjD,MAAOwB,EAAgB3B,EAAOwB,GAAO6B,GAAI,eAAeP,GAAc,YAAWK,SAC7FT,IAEHzC,EAAC8B,EAAG,CAACsB,GAAI,qBAAqBP,GAAc,YAAWK,SAAGR,IAtCzC,MACnB,IAAKI,EACH,OAAO,KAGT,MAAMO,EACJP,EAAO,gBAAkB,iBAAiBA,EAAOQ,MAAMC,QAAQ,OAAQ,KAAKC,gBAE9E,OACExD,EAAC4B,EAAqB,CAAAsB,SACpBlD,EAACyD,EAAM,CAAA,aACO,GAAGX,EAAOQ,WAAWb,IAAO,cAC3BY,EACbK,MAAOZ,EAAOQ,MACdK,QAASb,EAAOa,QAChBC,KAAK,QACLC,QAASf,EAAOgB,MAAQ,UAASZ,SAEhCJ,EAAOQ,WAqBXS,SAMTxB,EAAMyB,YAAc"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["import { memo, useId } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\n\n/** Visual tone of the alert /\nexport type AlertTones =\n \| 'brand-inverse'\n \| 'brand'\n \| 'destructive'\n \| 'information'\n \| 'neutral-inverse'\n \| 'neutral'\n \| 'success'\n \| 'warning';\n\n/* Props for the Alert component /\nexport interface AlertProps {\n /* Main heading text of the alert /\n title: string;\n /* Detailed description text of the alert /\n description: string;\n /* Visual tone of the alert /\n tone?: AlertTones;\n /* Callback function when the alert is closed /\n onClose?: () => void;\n /* Action button configuration /\n action?: {\n /* Text label for the action button /\n label: string;\n /* Visual style of the action button /\n type?: ButtonType;\n /* Callback function when the action button is clicked /\n onClick: () => void;\n /* Test ID for the action button /\n fdKey?: string;\n };\n /* Additional CSS class names /\n className?: string;\n /* Test ID for testing and automation /\n fdKey?: string;\n}\n\nconst ICONS = {\n neutral: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n brand: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n destructive: (theme: Theme) => <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />,\n warning: (theme: Theme) => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n information: (theme: Theme) => (\n <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n ),\n 'neutral-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n 'brand-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n success: (theme: Theme) => <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />,\n};\n\nconst COLOURS = {\n background: {\n neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n information: (theme: Theme) => theme.palette.semantic.fill['fill-information-weak'],\n 'neutral-inverse': (theme: Theme) => theme.palette.semantic.background['background-inverse'],\n 'brand-inverse': (theme: Theme) => theme.palette.semantic.fill['fill-primary-strong'],\n },\n border: {\n neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n information: (theme: Theme) => theme.palette.semantic.stroke['stroke-information-weak'],\n 'neutral-inverse': () => 'transparent',\n 'brand-inverse': () => 'transparent',\n },\n header: {\n neutral: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n brand: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n destructive: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n warning: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n success: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n information: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n 'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n 'brand-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n },\n text: {\n neutral: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n brand: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n destructive: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n warning: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n success: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n information: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n 'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-weak'],\n 'brand-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-weak'],\n },\n};\n\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.text[tone](theme);\n};\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n marginTop: '16px',\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n backgroundColor: getBackgroundColour(theme, tone),\n border: '1px solid',\n borderColor: getBorderColour(theme, tone),\n color: getTextColour(theme, tone),\n}));\n\n/\n Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\n \n The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n ({ title, description, tone = 'neutral', onClose, className, fdKey, action }: AlertProps) => {\n const theme = useTheme();\n const alertId = useId();\n\n const renderAction = (): JSX.Element \| null => {\n if (!action) {\n return null;\n }\n\n const actionFdKey = action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <Button\n aria-label={`${action.label} - ${title}`}\n fdKey={actionFdKey}\n onClick={action.onClick}\n size=\"small\"\n variant={action.type ?? 'primary'}\n >\n {action.label}\n </Button>\n </StyledActionContainer>\n );\n };\n\n return (\n <StyledAlert\n aria-describedby={`alert-description-${fdKey ?? alertId}`}\n aria-labelledby={`alert-title-${fdKey ?? alertId}`}\n className={className}\n data-fd={fdKey}\n icon={getIcon(theme, tone)}\n onClose={onClose}\n role=\"alert\"\n tone={tone}\n >\n <MuiAlertTitle color={getHeaderColour(theme, tone)} id={`alert-title-${fdKey ?? alertId}`}>\n {title}\n </MuiAlertTitle>\n <Box id={`alert-description-${fdKey ?? alertId}`}>{description}</Box>\n {renderAction()}\n </StyledAlert>\n );\n },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","onClose","className","fdKey","action","useTheme","alertId","useId","_jsxs","role","children","MuiAlertTitle","id","actionFdKey","label","replace","toLowerCase","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}

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

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

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

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