@flipdish/portal-library 5.9.1 → 6.0.1

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

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/Box";import i from"@mui/material/Typography";import{styled as r}from"@mui/material/styles";const a=r(t)((({theme:e})=>({border:`1px dashed ${e.palette.semantic.stroke["stroke-strong"]}`,padding:`${e.spacing(3)} ${e.spacing(4)}`,display:"flex",justifyContent:"center",alignItems:"center",background:e.palette.semantic.fill["fill-weaker"],borderRadius:e.radius["radius-8"],height:"100%"}))),o=r(i)((({theme:e})=>({color:e.palette.semantic.text["text-weak"],textAlign:"center",fontSize:"14px",fontWeight:"400",lineHeight:"20px"}))),n=()=>e(a,{children:e(o,{children:"Swap with your component"})});export{n as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Slot/index.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\n\nimport styled from \"@fd/utilities/styledUtilities\";\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n\tborder: `1px dashed ${theme.palette.semantic.stroke[\"stroke-strong\"]}`,\n\tpadding: `${theme.spacing(3)} ${theme.spacing(4)}`,\n\tdisplay: \"flex\",\n\tjustifyContent: \"center\",\n\talignItems: \"center\",\n\tbackground: theme.palette.semantic.fill[\"fill-weaker\"],\n\tborderRadius: theme.radius[\"radius-8\"],\n\theight: \"100%\",\n}));\n\nconst StyledTypography = styled(Typography)(({ theme }) => ({\n\tcolor: theme.palette.semantic.text[\"text-weak\"],\n\ttextAlign: \"center\",\n\tfontSize: \"14px\",\n\tfontWeight: \"400\",\n\tlineHeight: \"20px\",\n}));\n\nconst Slot: React.FC = () => {\n\treturn (\n\t\t<StyledBox>\n\t\t\t<StyledTypography>Swap with your component</StyledTypography>\n\t\t</StyledBox>\n\t);\n};\n\nexport default Slot;\n"],"names":["StyledBox","styled","Box","theme","border","palette","semantic","stroke","padding","spacing","display","justifyContent","alignItems","background","fill","borderRadius","radius","height","StyledTypography","Typography","color","text","textAlign","fontSize","fontWeight","lineHeight","Slot","_jsx","children"],"mappings":"+JAKA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACvCC,OAAQ,cAAcD,EAAME,QAAQC,SAASC,OAAO,mBACpDC,QAAS,GAAGL,EAAMM,QAAQ,MAAMN,EAAMM,QAAQ,KAC9CC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,WAAYV,EAAME,QAAQC,SAASQ,KAAK,eACxCC,aAAcZ,EAAMa,OAAO,YAC3BC,OAAQ,WAGHC,EAAmBjB,EAAOkB,EAAPlB,EAAmB,EAAGE,YAAO,CACrDiB,MAAOjB,EAAME,QAAQC,SAASe,KAAK,aACnCC,UAAW,SACXC,SAAU,OACVC,WAAY,MACZC,WAAY,WAGPC,EAAiB,IAErBC,EAAC3B,EAAS,CAAA4B,SACTD,EAACT,EAAgB,CAAAU,SAAA"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../TextField/index.cjs.js");const r=({fdKey:r,rows:s=6,...i})=>e.jsx(t.TextField,{...i,multiline:!0,fdKey:r,rows:s,type:"text"});exports.TextArea=r,exports.default=r;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/TextArea/index.tsx"],"sourcesContent":["import TextField, { type TextFieldProps } from '../TextField';\n\nexport type TextAreaProps = Omit<\n  TextFieldProps,\n  'hidePasswordAriaLabel' | 'multiline' | 'showPasswordAriaLabel' | 'type'\n> & {\n  rows?: number;\n};\n\nexport const TextArea = ({ fdKey, rows = 6, ...props }: TextAreaProps): JSX.Element => {\n  return <TextField {...props} multiline fdKey={fdKey} rows={rows} type=\"text\" />;\n};\n\nexport default TextArea;\n"],"names":["TextArea","fdKey","rows","props","_jsx","TextField","multiline","type"],"mappings":"8IASO,MAAMA,EAAW,EAAGC,QAAOC,OAAO,KAAMC,KACtCC,EAAAA,IAACC,EAAAA,UAAS,IAAKF,EAAOG,aAAUL,MAAOA,EAAOC,KAAMA,EAAMK,KAAK"}

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

@@ -0,0 +1,9 @@
+import { TextFieldProps } from '../TextField/index.js';
+
+type TextAreaProps = Omit<TextFieldProps, 'hidePasswordAriaLabel' | 'multiline' | 'showPasswordAriaLabel' | 'type'> & {
+    rows?: number;
+};
+declare const TextArea: ({ fdKey, rows, ...props }: TextAreaProps) => JSX.Element;
+
+export { TextArea, TextArea as default };
+export type { TextAreaProps };

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

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{TextField as t}from"../TextField/index.js";const r=({fdKey:r,rows:o=6,...i})=>e(t,{...i,multiline:!0,fdKey:r,rows:o,type:"text"});export{r as TextArea,r as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/TextArea/index.tsx"],"sourcesContent":["import TextField, { type TextFieldProps } from '../TextField';\n\nexport type TextAreaProps = Omit<\n  TextFieldProps,\n  'hidePasswordAriaLabel' | 'multiline' | 'showPasswordAriaLabel' | 'type'\n> & {\n  rows?: number;\n};\n\nexport const TextArea = ({ fdKey, rows = 6, ...props }: TextAreaProps): JSX.Element => {\n  return <TextField {...props} multiline fdKey={fdKey} rows={rows} type=\"text\" />;\n};\n\nexport default TextArea;\n"],"names":["TextArea","fdKey","rows","props","_jsx","TextField","multiline","type"],"mappings":"0FASO,MAAMA,EAAW,EAAGC,QAAOC,OAAO,KAAMC,KACtCC,EAACC,EAAS,IAAKF,EAAOG,aAAUL,MAAOA,EAAOC,KAAMA,EAAMK,KAAK"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'type' | 'variant'> & {\n  errorText?: string;\n  fdKey: string;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n  type: 'password';\n  showPasswordAriaLabel: string;\n  hidePasswordAriaLabel: string;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n  type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n  showPasswordAriaLabel?: never;\n  hidePasswordAriaLabel?: never;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n};\n\nexport type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  display: 'flex',\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nconst TextField = ({\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  hidePasswordAriaLabel,\n  label,\n  multiline = false,\n  required = false,\n  showPasswordAriaLabel,\n  type = 'text',\n  startAdornment = '',\n  endAdornment = '',\n  ...props\n}: TextFieldProps): JSX.Element => {\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const isPassword = type === 'password';\n\n  const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n  const getFieldType = (): MuiTextFieldProps['type'] => {\n    if (isPassword) {\n      return showPassword ? 'text' : 'password';\n    }\n\n    return type;\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    if (isPassword) {\n      if (!showPasswordAriaLabel || !hidePasswordAriaLabel) {\n        return undefined;\n      }\n\n      return (\n        <MuiInputAdornment position=\"end\">\n          <IconButton\n            aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n            disabled={disabled}\n            onClick={handleClickShowPassword}\n            size=\"small\"\n            tone=\"neutral\"\n            variant=\"tertiary\"\n          >\n            {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n          </IconButton>\n        </MuiInputAdornment>\n      );\n    }\n    if (endAdornment) {\n      return (\n        <MuiInputAdornment position=\"end\">\n          {endAdornment}\n        </MuiInputAdornment>\n      )\n    }\n\n    return undefined;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    if(startAdornment) {\n      return (\n        <MuiInputAdornment position=\"start\" >\n          {startAdornment}\n        </MuiInputAdornment>\n      )\n    }\n    return undefined;\n  }\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      {label && (\n        <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n          {label}\n        </MuiInputLabel>\n      )}\n\n      {helperText && (\n        <MuiFormHelperText disabled={disabled} id={helperTextId}>\n          {helperText}\n        </MuiFormHelperText>\n      )}\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledTextField\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        id={fdKey}\n        label=\"\" // Remove label from TextField since we're rendering it separately\n        multiline={multiline}\n        required={required}\n        slotProps={{\n          input: {\n            endAdornment: renderEndAdornment(),\n            startAdornment: renderStartAdornment(),\n          },\n          htmlInput: {\n            'aria-describedby': ariaDescribedBy,\n          },\n        }}\n        type={getFieldType()}\n        variant=\"outlined\"\n        {...props}\n      />\n    </StyledContainer>\n  );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","disabled","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","type","startAdornment","endAdornment","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","isPassword","handleClickShowPassword","show","_jsxs","_jsx","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","children","CancelCircleIcon","slotProps","input","MuiInputAdornment","position","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","renderStartAdornment","htmlInput"],"mappings":"geAyCA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAAA,OAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,0BAGZ,EAChBQ,YAAW,EACXC,YACAC,QACAV,aAAY,EACZW,aACAC,wBACAC,QACAC,aAAY,EACZC,YAAW,EACXC,wBACAC,OAAO,OACPC,iBAAiB,GACjBC,eAAe,MACZC,MAEH,MAAOC,EAAcC,GAAmBC,EAAAA,UAAkB,GAEpDC,EAAeb,EAAa,GAAGD,qBAAsBe,EACrDC,EAAiBjB,EAAY,GAAGC,uBAAwBe,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAE9EM,IAAYtB,IAAcD,EAC1BwB,EAAsB,aAATf,EAEbgB,EAA0B,IAAYX,GAAiBY,IAAUA,IAqDvE,OACEC,EAAAA,KAACzC,EAAe,CAACM,UAAWA,YACzBa,GACCuB,EAAAA,IAACC,GAAc7B,SAAUA,EAAU8B,QAAS5B,EAAOK,SAAUA,WAC1DF,IAIJF,GACCyB,EAAAA,IAACG,EAAiB,CAAC/B,SAAUA,EAAUgC,GAAIhB,WACxCb,IAIJoB,GACCI,EAAAA,KAACI,EAAiB,CAACE,SAAMD,GAAId,EAAcgB,SAAA,CACzCN,EAAAA,IAACO,EAAgB,CAAA,GAEhBlC,KAIL2B,EAAAA,IAAC9B,aACUI,EACTF,SAAUA,EACViC,MAAOV,EACP/B,UAAWA,EACXwC,GAAI9B,EACJG,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACV6B,UAAW,CACTC,MAAO,CACL1B,aA5EiB,MACzB,GAAIa,EAAY,CACd,IAAKhB,IAA0BJ,EAC7B,OAGF,OACEwB,EAAAA,IAACU,EAAiB,CAACC,SAAS,MAAKL,SAC/BN,MAACY,EAAAA,WAAU,CAAA,aACG3B,EAAeT,EAAwBI,EACnDR,SAAUA,EACVyC,QAAShB,EACTiB,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUV,SAEjBrB,EAAee,EAAAA,IAACiB,EAAW,CAAA,GAAMjB,EAAAA,IAACkB,EAAQ,CAAA,MAInD,CACA,GAAInC,EACF,OACEiB,EAAAA,IAACU,EAAiB,CAACC,SAAS,MAAKL,SAC9BvB,KAoDeoC,GACdrC,eA7CmB,MAC3B,GAAGA,EACD,OACEkB,EAAAA,IAACU,EAAiB,CAACC,SAAS,QAAOL,SAChCxB,KAyCiBsC,IAElBC,UAAW,CACT,mBAAoB9B,IAGxBV,KA1FAe,EACKX,EAAe,OAAS,WAG1BJ,EAuFHmC,QAAQ,cACJhC"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'type' | 'variant'> & {\n  endAdornment?: ReactNode;\n  errorText?: string;\n  fdKey: string;\n  startAdornment?: ReactNode;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n  type: 'password';\n  hidePasswordAriaLabel: string;\n  showPasswordAriaLabel: string;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n  type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n  hidePasswordAriaLabel?: never;\n  showPasswordAriaLabel?: never;\n};\n\nexport type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  display: 'flex',\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nexport const TextField = ({\n  disabled = false,\n  endAdornment = undefined,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  hidePasswordAriaLabel,\n  label,\n  multiline = false,\n  required = false,\n  showPasswordAriaLabel,\n  startAdornment = undefined,\n  type = 'text',\n  ...props\n}: TextFieldProps): JSX.Element => {\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const isPassword = type === 'password';\n\n  const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n  const getFieldType = (): MuiTextFieldProps['type'] => {\n    if (isPassword) {\n      return showPassword ? 'text' : 'password';\n    }\n\n    return type;\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    if (isPassword) {\n      if (!showPasswordAriaLabel || !hidePasswordAriaLabel) {\n        return undefined;\n      }\n\n      return (\n        <MuiInputAdornment position=\"end\">\n          <IconButton\n            aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n            disabled={disabled}\n            onClick={handleClickShowPassword}\n            size=\"small\"\n            tone=\"neutral\"\n            variant=\"tertiary\"\n          >\n            {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n          </IconButton>\n        </MuiInputAdornment>\n      );\n    }\n    if (endAdornment) {\n      return <MuiInputAdornment position=\"end\">{endAdornment}</MuiInputAdornment>;\n    }\n\n    return undefined;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    if (startAdornment) {\n      return <MuiInputAdornment position=\"start\">{startAdornment}</MuiInputAdornment>;\n    }\n\n    return undefined;\n  };\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      <Box>\n        {label && (\n          <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n            {label}\n          </MuiInputLabel>\n        )}\n\n        {helperText && (\n          <MuiFormHelperText disabled={disabled} id={helperTextId}>\n            {helperText}\n          </MuiFormHelperText>\n        )}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledTextField\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        id={fdKey}\n        label=\"\" // Remove label from TextField since we're rendering it separately\n        multiline={multiline}\n        required={required}\n        slotProps={{\n          input: {\n            endAdornment: renderEndAdornment(),\n            startAdornment: renderStartAdornment(),\n          },\n          htmlInput: {\n            'aria-describedby': ariaDescribedBy,\n          },\n        }}\n        type={getFieldType()}\n        variant=\"outlined\"\n        {...props}\n      />\n    </StyledContainer>\n  );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","TextField","disabled","endAdornment","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","startAdornment","type","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","isPassword","handleClickShowPassword","show","_jsxs","_jsx","MuiInputLabel","htmlFor","children","MuiFormHelperText","id","error","CancelCircleIcon","slotProps","input","MuiInputAdornment","position","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","renderStartAdornment","htmlInput"],"mappings":"uhBAuCA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAAA,OAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,WAGjBQ,EAAY,EACvBC,YAAW,EACXC,eACAC,YACAC,QACAZ,aAAY,EACZa,aACAC,wBACAC,QACAC,aAAY,EACZC,YAAW,EACXC,wBACAC,iBACAC,OAAO,UACJC,MAEH,MAAOC,EAAcC,GAAmBC,EAAAA,UAAkB,GAEpDC,EAAeZ,EAAa,GAAGD,qBAAsBc,EACrDC,EAAiBhB,EAAY,GAAGC,uBAAwBc,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAE9EM,IAAYrB,IAAcF,EAC1BwB,EAAsB,aAATb,EAEbc,EAA0B,IAAYX,GAAiBY,IAAUA,IA8CvE,OACEC,EAAAA,KAAC1C,EAAe,CAACM,UAAWA,YAC1BoC,EAAAA,KAACxC,aACEmB,GACCsB,EAAAA,IAACC,GAAc7B,SAAUA,EAAU8B,QAAS3B,EAAOK,SAAUA,EAAQuB,SAClEzB,IAIJF,GACCwB,EAAAA,IAACI,GAAkBhC,SAAUA,EAAUiC,GAAIjB,EAAYe,SACpD3B,OAKNmB,GACCI,EAAAA,KAACK,GAAkBE,OAAK,EAACD,GAAIf,YAC3BU,EAAAA,IAACO,MAEAjC,KAIL0B,EAAAA,IAAC/B,EAAe,CAAA,UACLM,EACTH,SAAUA,EACVkC,MAAOX,EACPhC,UAAWA,EACX0C,GAAI9B,EACJG,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACV4B,UAAW,CACTC,MAAO,CACLpC,aAvEiB,MACzB,GAAIuB,EAAY,CACd,IAAKf,IAA0BJ,EAC7B,OAGF,OACEuB,EAAAA,IAACU,EAAiB,CAACC,SAAS,MAAKR,SAC/BH,MAACY,EAAAA,WAAU,CAAA,aACG3B,EAAeR,EAAwBI,EACnDT,SAAUA,EACVyC,QAAShB,EACTiB,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUb,SAEjBlB,EAAee,EAAAA,IAACiB,EAAW,CAAA,GAAMjB,EAAAA,IAACkB,EAAQ,CAAA,MAInD,CACA,GAAI7C,EACF,OAAO2B,EAAAA,IAACU,EAAiB,CAACC,SAAS,MAAKR,SAAE9B,KAiDtB8C,GACdrC,eA5CmB,MAC3B,GAAIA,EACF,OAAOkB,EAAAA,IAACU,EAAiB,CAACC,SAAS,QAAOR,SAAErB,KA0CtBsC,IAElBC,UAAW,CACT,mBAAoB9B,IAGxBR,KArFAa,EACKX,EAAe,OAAS,WAG1BF,EAkFHiC,QAAQ,cACJhC"}

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

@@ -2,25 +2,23 @@ import { ReactNode } from 'react';
 import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
 
 type BaseTextFieldProps = Omit<TextFieldProps$1, 'error' | 'id' | 'type' | 'variant'> & {
+    endAdornment?: ReactNode;
     errorText?: string;
     fdKey: string;
+    startAdornment?: ReactNode;
 };
 type PasswordTextFieldProps = BaseTextFieldProps & {
     type: 'password';
-    showPasswordAriaLabel: string;
     hidePasswordAriaLabel: string;
-    startAdornment?: ReactNode;
-    endAdornment?: ReactNode;
+    showPasswordAriaLabel: string;
 };
 type GenericTextFieldProps = BaseTextFieldProps & {
     type?: Exclude<TextFieldProps$1['type'], 'password'>;
-    showPasswordAriaLabel?: never;
     hidePasswordAriaLabel?: never;
-    startAdornment?: ReactNode;
-    endAdornment?: ReactNode;
+    showPasswordAriaLabel?: never;
 };
 type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;
-declare const TextField: ({ disabled, errorText, fdKey, fullWidth, helperText, hidePasswordAriaLabel, label, multiline, required, showPasswordAriaLabel, type, startAdornment, endAdornment, ...props }: TextFieldProps) => JSX.Element;
+declare const TextField: ({ disabled, endAdornment, errorText, fdKey, fullWidth, helperText, hidePasswordAriaLabel, label, multiline, required, showPasswordAriaLabel, startAdornment, type, ...props }: TextFieldProps) => JSX.Element;
 
-export { TextField as default };
+export { TextField, TextField as default };
 export type { TextFieldProps };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'type' | 'variant'> & {\n  errorText?: string;\n  fdKey: string;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n  type: 'password';\n  showPasswordAriaLabel: string;\n  hidePasswordAriaLabel: string;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n  type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n  showPasswordAriaLabel?: never;\n  hidePasswordAriaLabel?: never;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n};\n\nexport type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  display: 'flex',\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nconst TextField = ({\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  hidePasswordAriaLabel,\n  label,\n  multiline = false,\n  required = false,\n  showPasswordAriaLabel,\n  type = 'text',\n  startAdornment = '',\n  endAdornment = '',\n  ...props\n}: TextFieldProps): JSX.Element => {\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const isPassword = type === 'password';\n\n  const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n  const getFieldType = (): MuiTextFieldProps['type'] => {\n    if (isPassword) {\n      return showPassword ? 'text' : 'password';\n    }\n\n    return type;\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    if (isPassword) {\n      if (!showPasswordAriaLabel || !hidePasswordAriaLabel) {\n        return undefined;\n      }\n\n      return (\n        <MuiInputAdornment position=\"end\">\n          <IconButton\n            aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n            disabled={disabled}\n            onClick={handleClickShowPassword}\n            size=\"small\"\n            tone=\"neutral\"\n            variant=\"tertiary\"\n          >\n            {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n          </IconButton>\n        </MuiInputAdornment>\n      );\n    }\n    if (endAdornment) {\n      return (\n        <MuiInputAdornment position=\"end\">\n          {endAdornment}\n        </MuiInputAdornment>\n      )\n    }\n\n    return undefined;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    if(startAdornment) {\n      return (\n        <MuiInputAdornment position=\"start\" >\n          {startAdornment}\n        </MuiInputAdornment>\n      )\n    }\n    return undefined;\n  }\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      {label && (\n        <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n          {label}\n        </MuiInputLabel>\n      )}\n\n      {helperText && (\n        <MuiFormHelperText disabled={disabled} id={helperTextId}>\n          {helperText}\n        </MuiFormHelperText>\n      )}\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledTextField\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        id={fdKey}\n        label=\"\" // Remove label from TextField since we're rendering it separately\n        multiline={multiline}\n        required={required}\n        slotProps={{\n          input: {\n            endAdornment: renderEndAdornment(),\n            startAdornment: renderStartAdornment(),\n          },\n          htmlInput: {\n            'aria-describedby': ariaDescribedBy,\n          },\n        }}\n        type={getFieldType()}\n        variant=\"outlined\"\n        {...props}\n      />\n    </StyledContainer>\n  );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","TextField","disabled","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","type","startAdornment","endAdornment","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","isPassword","handleClickShowPassword","show","_jsxs","_jsx","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","children","CancelCircleIcon","slotProps","input","MuiInputAdornment","position","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","renderStartAdornment","htmlInput"],"mappings":"4gBAyCA,MAAMA,EAAkBC,EAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,WAGxBQ,EAAY,EAChBC,YAAW,EACXC,YACAC,QACAX,aAAY,EACZY,aACAC,wBACAC,QACAC,aAAY,EACZC,YAAW,EACXC,wBACAC,OAAO,OACPC,iBAAiB,GACjBC,eAAe,MACZC,MAEH,MAAOC,EAAcC,GAAmBC,GAAkB,GAEpDC,EAAeb,EAAa,GAAGD,qBAAsBe,EACrDC,EAAiBjB,EAAY,GAAGC,uBAAwBe,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAE9EM,IAAYtB,IAAcD,EAC1BwB,EAAsB,aAATf,EAEbgB,EAA0B,IAAYX,GAAiBY,IAAUA,IAqDvE,OACEC,EAAC1C,EAAe,CAACM,UAAWA,YACzBc,GACCuB,EAACC,GAAc7B,SAAUA,EAAU8B,QAAS5B,EAAOK,SAAUA,WAC1DF,IAIJF,GACCyB,EAACG,EAAiB,CAAC/B,SAAUA,EAAUgC,GAAIhB,WACxCb,IAIJoB,GACCI,EAACI,EAAiB,CAACE,SAAMD,GAAId,EAAcgB,SAAA,CACzCN,EAACO,EAAgB,CAAA,GAEhBlC,KAIL2B,EAAC/B,aACUK,EACTF,SAAUA,EACViC,MAAOV,EACPhC,UAAWA,EACXyC,GAAI9B,EACJG,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACV6B,UAAW,CACTC,MAAO,CACL1B,aA5EiB,MACzB,GAAIa,EAAY,CACd,IAAKhB,IAA0BJ,EAC7B,OAGF,OACEwB,EAACU,EAAiB,CAACC,SAAS,MAAKL,SAC/BN,EAACY,EAAU,CAAA,aACG3B,EAAeT,EAAwBI,EACnDR,SAAUA,EACVyC,QAAShB,EACTiB,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUV,SAEFN,EAAff,EAAgBgC,EAAkBC,EAAP,CAAA,MAIpC,CACA,GAAInC,EACF,OACEiB,EAACU,EAAiB,CAACC,SAAS,MAAKL,SAC9BvB,KAoDeoC,GACdrC,eA7CmB,MAC3B,GAAGA,EACD,OACEkB,EAACU,EAAiB,CAACC,SAAS,QAAOL,SAChCxB,KAyCiBsC,IAElBC,UAAW,CACT,mBAAoB9B,IAGxBV,KA1FAe,EACKX,EAAe,OAAS,WAG1BJ,EAuFHmC,QAAQ,cACJhC"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'type' | 'variant'> & {\n  endAdornment?: ReactNode;\n  errorText?: string;\n  fdKey: string;\n  startAdornment?: ReactNode;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n  type: 'password';\n  hidePasswordAriaLabel: string;\n  showPasswordAriaLabel: string;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n  type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n  hidePasswordAriaLabel?: never;\n  showPasswordAriaLabel?: never;\n};\n\nexport type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  display: 'flex',\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nexport const TextField = ({\n  disabled = false,\n  endAdornment = undefined,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  hidePasswordAriaLabel,\n  label,\n  multiline = false,\n  required = false,\n  showPasswordAriaLabel,\n  startAdornment = undefined,\n  type = 'text',\n  ...props\n}: TextFieldProps): JSX.Element => {\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const isPassword = type === 'password';\n\n  const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n  const getFieldType = (): MuiTextFieldProps['type'] => {\n    if (isPassword) {\n      return showPassword ? 'text' : 'password';\n    }\n\n    return type;\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    if (isPassword) {\n      if (!showPasswordAriaLabel || !hidePasswordAriaLabel) {\n        return undefined;\n      }\n\n      return (\n        <MuiInputAdornment position=\"end\">\n          <IconButton\n            aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n            disabled={disabled}\n            onClick={handleClickShowPassword}\n            size=\"small\"\n            tone=\"neutral\"\n            variant=\"tertiary\"\n          >\n            {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n          </IconButton>\n        </MuiInputAdornment>\n      );\n    }\n    if (endAdornment) {\n      return <MuiInputAdornment position=\"end\">{endAdornment}</MuiInputAdornment>;\n    }\n\n    return undefined;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    if (startAdornment) {\n      return <MuiInputAdornment position=\"start\">{startAdornment}</MuiInputAdornment>;\n    }\n\n    return undefined;\n  };\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      <Box>\n        {label && (\n          <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n            {label}\n          </MuiInputLabel>\n        )}\n\n        {helperText && (\n          <MuiFormHelperText disabled={disabled} id={helperTextId}>\n            {helperText}\n          </MuiFormHelperText>\n        )}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledTextField\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        id={fdKey}\n        label=\"\" // Remove label from TextField since we're rendering it separately\n        multiline={multiline}\n        required={required}\n        slotProps={{\n          input: {\n            endAdornment: renderEndAdornment(),\n            startAdornment: renderStartAdornment(),\n          },\n          htmlInput: {\n            'aria-describedby': ariaDescribedBy,\n          },\n        }}\n        type={getFieldType()}\n        variant=\"outlined\"\n        {...props}\n      />\n    </StyledContainer>\n  );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","TextField","disabled","endAdornment","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","startAdornment","type","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","isPassword","handleClickShowPassword","show","_jsxs","_jsx","MuiInputLabel","htmlFor","children","MuiFormHelperText","id","error","CancelCircleIcon","slotProps","input","MuiInputAdornment","position","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","renderStartAdornment","htmlInput"],"mappings":"4gBAuCA,MAAMA,EAAkBC,EAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,WAGjBQ,EAAY,EACvBC,YAAW,EACXC,eACAC,YACAC,QACAZ,aAAY,EACZa,aACAC,wBACAC,QACAC,aAAY,EACZC,YAAW,EACXC,wBACAC,iBACAC,OAAO,UACJC,MAEH,MAAOC,EAAcC,GAAmBC,GAAkB,GAEpDC,EAAeZ,EAAa,GAAGD,qBAAsBc,EACrDC,EAAiBhB,EAAY,GAAGC,uBAAwBc,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAE9EM,IAAYrB,IAAcF,EAC1BwB,EAAsB,aAATb,EAEbc,EAA0B,IAAYX,GAAiBY,IAAUA,IA8CvE,OACEC,EAAC1C,EAAe,CAACM,UAAWA,YAC1BoC,EAACxC,aACEmB,GACCsB,EAACC,GAAc7B,SAAUA,EAAU8B,QAAS3B,EAAOK,SAAUA,EAAQuB,SAClEzB,IAIJF,GACCwB,EAACI,GAAkBhC,SAAUA,EAAUiC,GAAIjB,EAAYe,SACpD3B,OAKNmB,GACCI,EAACK,GAAkBE,OAAK,EAACD,GAAIf,YAC3BU,EAACO,MAEAjC,KAIL0B,EAAC/B,EAAe,CAAA,UACLM,EACTH,SAAUA,EACVkC,MAAOX,EACPhC,UAAWA,EACX0C,GAAI9B,EACJG,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACV4B,UAAW,CACTC,MAAO,CACLpC,aAvEiB,MACzB,GAAIuB,EAAY,CACd,IAAKf,IAA0BJ,EAC7B,OAGF,OACEuB,EAACU,EAAiB,CAACC,SAAS,MAAKR,SAC/BH,EAACY,EAAU,CAAA,aACG3B,EAAeR,EAAwBI,EACnDT,SAAUA,EACVyC,QAAShB,EACTiB,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUb,SAEFH,EAAff,EAAgBgC,EAAkBC,EAAP,CAAA,MAIpC,CACA,GAAI7C,EACF,OAAO2B,EAACU,EAAiB,CAACC,SAAS,MAAKR,SAAE9B,KAiDtB8C,GACdrC,eA5CmB,MAC3B,GAAIA,EACF,OAAOkB,EAACU,EAAiB,CAACC,SAAS,QAAOR,SAAErB,KA0CtBsC,IAElBC,UAAW,CACT,mBAAoB9B,IAGxBR,KArFAa,EACKX,EAAe,OAAS,WAG1BF,EAkFHiC,QAAQ,cACJhC"}

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

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

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

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

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

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

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

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

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

@@ -0,0 +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;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,56 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonType } from '../../atoms/Button/getButtonStyles.js';
+
+/** Action button configuration */
+interface ActionButton {
+    /** Text label for the action button */
+    label: string;
+    /** Visual style of the action button */
+    type?: ButtonType;
+    /** Callback function when the action button is clicked */
+    onClick: () => void;
+    /** Test ID for the action button */
+    'data-testid'?: string;
+}
+/** Text link configuration */
+interface TextLink {
+    /** Text label for the link */
+    label: string;
+    /** Callback function when the link is clicked */
+    onClick: () => void;
+    /** Test ID for the link */
+    'data-testid'?: string;
+}
+/** Props for the AlertSnackbar component */
+interface AlertSnackbarProps {
+    /** Content of the alert snackbar  */
+    content: string;
+    /** Callback function when the alert snackbar is closed */
+    onClose?: () => void;
+    /** Action buttons configuration - supports Primary, Secondary, Tertiary buttons via ButtonGroup */
+    actions?: ActionButton[];
+    /** Text link configuration - separate from action buttons */
+    textLink?: TextLink;
+    /** Additional CSS class names */
+    className?: string;
+    /** Test ID for testing and automation */
+    'data-testid'?: string;
+    /** Whether the snackbar is open */
+    open?: boolean;
+    /** Duration in milliseconds the snackbar should be displayed */
+    autoHideDuration?: number;
+}
+/**
+ * AlertSnackbar component is used to display important notifications to users.
+ * It can include optional action buttons (via ButtonGroup supporting Primary, Secondary, Tertiary variants)
+ * and/or a text link component.
+ * The component wraps MUI's Snackbar component to provide a consistent,
+ * accessible notification experience. It is wrapped with React.memo to optimize
+ * performance by preventing unnecessary re-renders when props haven't changed.
+ * Uses semantic design tokens for colors and typography to ensure proper light/dark mode support.
+ */
+declare const AlertSnackbar: react.MemoExoticComponent<({ content, onClose, className, "data-testid": dataTestId, actions, textLink, open: controlledOpen, autoHideDuration, }: AlertSnackbarProps) => react_jsx_runtime.JSX.Element>;
+
+export { AlertSnackbar as default };
+export type { ActionButton, AlertSnackbarProps, TextLink };

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

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{memo as i,useState as n,useCallback as r}from"react";import o from"@mui/material/Box";import a from"@mui/material/Snackbar";import{styled as l}from"@mui/material/styles";import s from"../../../icons/Cancel/index.js";import c from"../../../icons/Diamond/index.js";import{Button as p}from"../../atoms/Button/index.js";import d from"../ButtonGroup/index.js";const m=e=>e.palette.semantic.icon["icon-inverse-strong"],g=l(o)((({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"}})),f=l(o)((({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}))),h=l(o)({display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}),y=l(h)((({theme:e})=>({color:m(e)}))),u=l(o)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),flex:1,minWidth:0}))),b=l(o)((({theme:e})=>({display:"flex",gap:e.spacing(1),alignItems:"center",flexShrink:0}))),k=l("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=l("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"]}}))),W=l(o)({maxWidth:"60vw"}),C=i((({content:i,onClose:o,className:l,"data-testid":m,actions:h,textLink:C,open:S,autoHideDuration:v=5e3})=>{const[j,w]=n(S??!0),z=void 0!==S?S:j,H=r(((e,t)=>{"clickaway"!==t&&(void 0===S&&w(!1),o?.())}),[o,S]);return e(a,{anchorOrigin:{horizontal:"center",vertical:"bottom"},autoHideDuration:v,className:l,"data-testid":m,onClose:H,open:z,children:e(W,{children:t(g,{role:"alert",children:[t(u,{children:[e(y,{children:e(c,{})}),e(f,{children:i})]}),t(b,{children:[C&&(()=>{if(!C)return;const t=C["data-testid"]??`text-link-${C.label.replace(/\s+/g,"-").toLowerCase()}`;return e(x,{"aria-label":C.label,"data-testid":t,onClick:()=>{C.onClick(),H()},type:"button",children:C.label})})(),h&&h.length>0&&(()=>{if(!h||0===h.length)return;const t=[...h].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(d,{align:"right",size:"small",children:t.map((t=>{const i=t["data-testid"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`;return e(p,{"aria-label":t.label,"data-testid":i,fdKey:t.label,onClick:()=>{t.onClick(),H()},tone:"inverse",variant:t.type??"primary",children:t.label},i)}))})})(),o&&e(k,{"aria-label":"Close notification",onClick:H,type:"button",children:e(s,{})})]})]})})})}));C.displayName="AlertSnackbar";export{C as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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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"}