@flipdish/portal-library 7.6.0 → 7.8.0

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

@@ -1,38 +1,70 @@
 import { MenuItemProps as MenuItemProps$1 } from '@mui/material/MenuItem';
 
 type BaseProps = Omit<MenuItemProps$1, 'children'> & {
+    /** Children of the menu item */
     children?: React.ReactNode;
+    /** Label of the menu item */
     label?: React.ReactNode;
+    /** Secondary text of the menu item */
     secondaryText?: React.ReactNode;
-    type?: 'avatar' | 'checkbox' | 'icon' | 'text';
 };
-type AvatarMenuItemProps = BaseProps & {
-    avatar: React.ReactNode;
+/** Props for an avatar menu item */
+interface AvatarMenuItemProps extends BaseProps {
+    /** Source URL for the avatar image */
+    avatarSrc: string;
+    /** Checkbox of the menu item */
     checkbox?: never;
+    /** Icon of the menu item */
     icon?: never;
+    /** Type of the menu item */
     type: 'avatar';
-};
-type CheckboxMenuItemProps = BaseProps & {
+}
+/** Props for a checkbox menu item */
+interface CheckboxMenuItemProps extends BaseProps {
+    /** Avatar of the menu item */
     avatar?: never;
-    checked?: boolean;
+    /** Checked state of the menu item */
+    checked: boolean;
+    /** Icon of the menu item */
     icon?: never;
-    onCheckedChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLIElement>) => void;
+    /** Function to call when the checkbox is changed */
+    onCheckedChange: (checked: boolean, e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLIElement>) => void;
+    /** Function to call when the menu item is clicked */
+    onClick?: never;
+    /** Type of the menu item */
     type: 'checkbox';
-};
-type IconMenuItemProps = BaseProps & {
+}
+/** Props for an icon menu item */
+interface IconMenuItemProps extends BaseProps {
+    /** Avatar of the menu item */
     avatar?: never;
+    /** Checkbox of the menu item */
     checkbox?: never;
+    /** Icon of the menu item */
     icon: React.ReactNode;
+    /** Type of the menu item */
     type: 'icon';
-};
-type TextMenuItemProps = BaseProps & {
+}
+/** Props for a text menu item */
+interface TextMenuItemProps extends BaseProps {
+    /** Avatar of the menu item */
     avatar?: never;
+    /** Checkbox of the menu item */
     checkbox?: never;
+    /** Icon of the menu item */
     icon?: never;
+    /** Type of the menu item */
     type?: 'text';
-};
+}
+/** Props for the MenuItem component */
 type MenuItemProps = AvatarMenuItemProps | CheckboxMenuItemProps | IconMenuItemProps | TextMenuItemProps;
+/**
+ * A customizable MenuItem component supporting text, avatar, icon and checkbox menu items.
+ *
+ * @param props - The component props
+ * @returns The rendered MenuItem component
+ */
 declare const MenuItem: ({ children, disabled, label, secondaryText, type, ...props }: MenuItemProps) => JSX.Element;
 
 export { MenuItem, MenuItem as default };
-export type { MenuItemProps };
+export type { AvatarMenuItemProps, CheckboxMenuItemProps, IconMenuItemProps, MenuItemProps, TextMenuItemProps };

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"@mui/material/Box";import a from"@mui/material/ListItemText";import n from"@mui/material/MenuItem";import{styled as o}from"@mui/material/styles";import c from"../Checkbox/index.js";const i=o(r,{shouldForwardProp:e=>"disabled"!==e})((({theme:e,disabled:t=!1})=>({alignItems:"center",display:"inline-flex",justifyContent:"center","& .MuiAvatar-img":{opacity:t?e.palette.action.disabledOpacity:1}}))),s=o(c)((()=>({pointerEvents:"none"}))),l=({children:r,disabled:o=!1,label:c,secondaryText:l,type:d="text",...m})=>{const u=(()=>{switch(d){case"checkbox":{const{checked:e,onCheckedChange:t,...r}=m;return r}case"avatar":{const{avatar:e,...t}=m;return t}case"icon":{const{icon:e,...t}=m;return t}default:return m}})();return e(n,{...u,disabled:o,onClick:e=>{if(!o)if("checkbox"!==d)u?.onClick?.(e);else{e.preventDefault(),e.stopPropagation();const{checked:t,onCheckedChange:r}=m,a="boolean"==typeof t?t:Boolean(m.selected);r?.(!a,e)}},children:[(()=>{switch(d){case"avatar":return(()=>{const{avatar:e}=m;return t(i,{disabled:o,children:e})})();case"checkbox":return(()=>{const{checked:e}=m,r="boolean"==typeof e?e:Boolean(m.selected);return t(s,{"aria-hidden":!0,checked:r,disabled:o,fdKey:"checkbox-menu-item",size:"small",tabIndex:-1})})();case"icon":return(()=>{const{icon:e}=m;return t(i,{children:e})})();default:return null}})(),c||l?t(a,{primary:c,secondary:l}):r]})};export{l as MenuItem,l as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"@mui/material/MenuItem";import{styled as a}from"@mui/material/styles";import n from"../Avatar/index.js";import o from"@mui/material/Box";import c from"../Checkbox/index.js";import i from"@mui/material/ListItemText";const s=a(o,{shouldForwardProp:e=>"disabled"!==e})((({theme:e,disabled:t=!1})=>({alignItems:"center",display:"inline-flex",justifyContent:"center","& .MuiAvatar-img":{opacity:t?e.palette.action.disabledOpacity:1}}))),l=a(c)((()=>({pointerEvents:"none"}))),d=({children:a,disabled:o=!1,label:c,secondaryText:d,type:m="text",...u})=>{const h=(()=>{switch(m){case"checkbox":{const{checked:e,onCheckedChange:t,...r}=u;return r}case"avatar":{const{avatarSrc:e,...t}=u;return t}case"icon":{const{icon:e,...t}=u;return t}default:return u}})();return e(r,{...h,disabled:o,onClick:e=>{if(!o)if("checkbox"!==m)h?.onClick?.(e);else{e.preventDefault(),e.stopPropagation();const{checked:t,onCheckedChange:r}=u,a="boolean"==typeof t?t:Boolean(u.selected);r?.(!a,e)}},children:[(()=>{switch(m){case"avatar":return(()=>{const{avatarSrc:e}=u;return t(s,{className:"fd-MenuItem-startAdornment",disabled:o,children:t(n,{alt:"",src:e,type:"logo"})})})();case"checkbox":return(()=>{const{checked:e}=u,r="boolean"==typeof e?e:Boolean(u.selected);return t(l,{"aria-hidden":!0,checked:r,disabled:o,fdKey:"checkbox-menu-item",size:"small",tabIndex:-1})})();case"icon":return(()=>{const{icon:e}=u;return t(s,{className:"fd-MenuItem-startAdornment",children:e})})();default:return null}})(),c||d?t(i,{primary:c,secondary:d}):a]})};export{d as MenuItem,d as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/MenuItem/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport ListItemText from '@mui/material/ListItemText';\nimport MuiMenuItem, { type MenuItemProps as MuiMenuItemProps } from '@mui/material/MenuItem';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '../Checkbox';\n\ntype BaseProps = Omit<MuiMenuItemProps, 'children'> & {\n  children?: React.ReactNode;\n  label?: React.ReactNode;\n  secondaryText?: React.ReactNode;\n  type?: 'avatar' | 'checkbox' | 'icon' | 'text';\n};\n\ntype AvatarMenuItemProps = BaseProps & {\n  avatar: React.ReactNode;\n  checkbox?: never;\n  icon?: never;\n  type: 'avatar';\n};\n\ntype CheckboxMenuItemProps = BaseProps & {\n  avatar?: never;\n  checked?: boolean;\n  icon?: never;\n  onCheckedChange?: (\n    checked: boolean,\n    e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLIElement>,\n  ) => void;\n  type: 'checkbox';\n};\n\ntype IconMenuItemProps = BaseProps & {\n  avatar?: never;\n  checkbox?: never;\n  icon: React.ReactNode;\n  type: 'icon';\n};\n\ntype TextMenuItemProps = BaseProps & {\n  avatar?: never;\n  checkbox?: never;\n  icon?: never;\n  type?: 'text';\n};\n\nexport type MenuItemProps =\n  | AvatarMenuItemProps\n  | CheckboxMenuItemProps\n  | IconMenuItemProps\n  | TextMenuItemProps;\n\nconst StyledStartAdornment = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n\n  '& .MuiAvatar-img': {\n    opacity: disabled ? theme.palette.action.disabledOpacity : 1,\n  },\n}));\n\nconst StyledCheckbox = styled(Checkbox)(() => ({\n  pointerEvents: 'none',\n}));\n\nexport const MenuItem = ({\n  children,\n  disabled = false,\n  label,\n  secondaryText,\n  type = 'text',\n  ...props\n}: MenuItemProps): JSX.Element => {\n  // Remove type-specific props from props object to avoid passing them to MuiMenuItem\n  const muiProps: MuiMenuItemProps = ((): MuiMenuItemProps => {\n    switch (type) {\n      case 'checkbox': {\n        const { checked: _c, onCheckedChange: _h, ...rest } = props as CheckboxMenuItemProps;\n        return rest as MuiMenuItemProps;\n      }\n      case 'avatar': {\n        const { avatar: _a, ...rest } = props as AvatarMenuItemProps;\n        return rest as MuiMenuItemProps;\n      }\n      case 'icon': {\n        const { icon: _i, ...rest } = props as IconMenuItemProps;\n        return rest as MuiMenuItemProps;\n      }\n      default:\n        return props as MuiMenuItemProps;\n    }\n  })();\n\n  const handleClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n    if (disabled) {\n      return;\n    }\n\n    // If menu item is a checkbox, clicking the menu item will toggle the checkbox\n    if (type === 'checkbox') {\n      event.preventDefault();\n      event.stopPropagation();\n\n      const { checked, onCheckedChange } = props as CheckboxMenuItemProps;\n      const isChecked =\n        typeof checked === 'boolean' ? checked : Boolean((props as MuiMenuItemProps).selected);\n\n      onCheckedChange?.(!isChecked, event);\n      return;\n    }\n\n    muiProps?.onClick?.(event);\n  };\n\n  const renderAvatar = (): React.ReactNode => {\n    const { avatar } = props as AvatarMenuItemProps;\n    return <StyledStartAdornment disabled={disabled}>{avatar}</StyledStartAdornment>;\n  };\n\n  const renderCheckbox = (): React.ReactNode => {\n    const { checked } = props as CheckboxMenuItemProps;\n    const isChecked = typeof checked === 'boolean' ? checked : Boolean((props as MuiMenuItemProps).selected);\n\n    return (\n      <StyledCheckbox\n        aria-hidden\n        checked={isChecked}\n        disabled={disabled}\n        fdKey=\"checkbox-menu-item\"\n        size=\"small\"\n        tabIndex={-1}\n      />\n    );\n  };\n\n  const renderIcon = (): React.ReactNode => {\n    const { icon } = props as IconMenuItemProps;\n    return <StyledStartAdornment>{icon}</StyledStartAdornment>;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    switch (type) {\n      case 'avatar':\n        return renderAvatar();\n      case 'checkbox':\n        return renderCheckbox();\n      case 'icon':\n        return renderIcon();\n      default:\n        return null;\n    }\n  };\n\n  const renderText = (): React.ReactNode => {\n    if (label || secondaryText) {\n      return <ListItemText primary={label} secondary={secondaryText} />;\n    }\n\n    return children;\n  };\n\n  return (\n    <MuiMenuItem {...muiProps} disabled={disabled} onClick={handleClick}>\n      {renderStartAdornment()}\n      {renderText()}\n    </MuiMenuItem>\n  );\n};\n\nexport default MenuItem;\n"],"names":["StyledStartAdornment","styled","Box","shouldForwardProp","prop","theme","disabled","alignItems","display","justifyContent","opacity","palette","action","disabledOpacity","StyledCheckbox","Checkbox","pointerEvents","MenuItem","children","label","secondaryText","type","props","muiProps","checked","_c","onCheckedChange","_h","rest","avatar","_a","icon","_i","_jsxs","MuiMenuItem","onClick","event","preventDefault","stopPropagation","isChecked","Boolean","selected","_jsx","renderAvatar","fdKey","size","tabIndex","renderCheckbox","renderIcon","renderStartAdornment","ListItemText","primary","secondary"],"mappings":"qPAoDA,MAAMA,EAAuBC,EAAOC,EAAK,CACvCC,kBAAoBC,GAAkB,aAATA,GADFH,EAEF,EAAGI,QAAOC,YAAW,MAAO,CACrDC,WAAY,SACZC,QAAS,cACTC,eAAgB,SAEhB,mBAAoB,CAClBC,QAASJ,EAAWD,EAAMM,QAAQC,OAAOC,gBAAkB,OAIzDC,EAAiBb,EAAOc,EAAPd,EAAiB,KAAA,CACtCe,cAAe,WAGJC,EAAW,EACtBC,WACAZ,YAAW,EACXa,QACAC,gBACAC,OAAO,UACJC,MAGH,MAAMC,EAA6B,MACjC,OAAQF,GACN,IAAK,WAAY,CACf,MAAQG,QAASC,EAAIC,gBAAiBC,KAAOC,GAASN,EACtD,OAAOM,CACT,CACA,IAAK,SAAU,CACb,MAAQC,OAAQC,KAAOF,GAASN,EAChC,OAAOM,CACT,CACA,IAAK,OAAQ,CACX,MAAQG,KAAMC,KAAOJ,GAASN,EAC9B,OAAOM,CACT,CACA,QACE,OAAON,EAEZ,EAjBkC,GAuFnC,OACEW,EAACC,EAAW,IAAKX,EAAUjB,SAAUA,EAAU6B,QArE5BC,IACnB,IAAI9B,EAKJ,GAAa,aAATe,EAYJE,GAAUY,UAAUC,OAZpB,CACEA,EAAMC,iBACND,EAAME,kBAEN,MAAMd,QAAEA,EAAOE,gBAAEA,GAAoBJ,EAC/BiB,EACe,kBAAZf,EAAwBA,EAAUgB,QAASlB,EAA2BmB,UAE/Ef,KAAmBa,EAAWH,EAEhC,aA+B2B,MAC3B,OAAQf,GACN,IAAK,SACH,MA7Be,MACnB,MAAMQ,OAAEA,GAAWP,EACnB,OAAOoB,EAAC1C,EAAoB,CAACM,SAAUA,EAAQY,SAAGW,KA2BvCc,GACT,IAAK,WACH,MA1BiB,MACrB,MAAMnB,QAAEA,GAAYF,EACdiB,EAA+B,kBAAZf,EAAwBA,EAAUgB,QAASlB,EAA2BmB,UAE/F,OACEC,EAAC5B,EAAc,CAAA,eAAA,EAEbU,QAASe,EACTjC,SAAUA,EACVsC,MAAM,qBACNC,KAAK,QACLC,UAAU,KAeHC,GACT,IAAK,OACH,MAZa,MACjB,MAAMhB,KAAEA,GAAST,EACjB,OAAOoB,EAAC1C,EAAoB,CAAAkB,SAAEa,KAUnBiB,GACT,QACE,OAAO,OAcRC,GATC9B,GAASC,EACJsB,EAACQ,EAAY,CAACC,QAAShC,EAAOiC,UAAWhC,IAG3CF"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/MenuItem/index.tsx"],"sourcesContent":["import MuiMenuItem, { type MenuItemProps as MuiMenuItemProps } from '@mui/material/MenuItem';\nimport { styled } from '@mui/material/styles';\n\nimport Avatar from '../Avatar';\nimport Box from '../Box';\nimport Checkbox from '../Checkbox';\nimport ListItemText from '../ListItemText';\n\ntype BaseProps = Omit<MuiMenuItemProps, 'children'> & {\n  /** Children of the menu item */\n  children?: React.ReactNode;\n  /** Label of the menu item */\n  label?: React.ReactNode;\n  /** Secondary text of the menu item */\n  secondaryText?: React.ReactNode;\n};\n\n/** Props for an avatar menu item */\nexport interface AvatarMenuItemProps extends BaseProps {\n  /** Source URL for the avatar image */\n  avatarSrc: string;\n  /** Checkbox of the menu item */\n  checkbox?: never;\n  /** Icon of the menu item */\n  icon?: never;\n  /** Type of the menu item */\n  type: 'avatar';\n}\n\n/** Props for a checkbox menu item */\nexport interface CheckboxMenuItemProps extends BaseProps {\n  /** Avatar of the menu item */\n  avatar?: never;\n  /** Checked state of the menu item */\n  checked: boolean;\n  /** Icon of the menu item */\n  icon?: never;\n  /** Function to call when the checkbox is changed */\n  onCheckedChange: (\n    checked: boolean,\n    e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLIElement>,\n  ) => void;\n  /** Function to call when the menu item is clicked */\n  onClick?: never;\n  /** Type of the menu item */\n  type: 'checkbox';\n}\n\n/** Props for an icon menu item */\nexport interface IconMenuItemProps extends BaseProps {\n  /** Avatar of the menu item */\n  avatar?: never;\n  /** Checkbox of the menu item */\n  checkbox?: never;\n  /** Icon of the menu item */\n  icon: React.ReactNode;\n  /** Type of the menu item */\n  type: 'icon';\n}\n\n/** Props for a text menu item */\nexport interface TextMenuItemProps extends BaseProps {\n  /** Avatar of the menu item */\n  avatar?: never;\n  /** Checkbox of the menu item */\n  checkbox?: never;\n  /** Icon of the menu item */\n  icon?: never;\n  /** Type of the menu item */\n  type?: 'text';\n}\n\n/** Props for the MenuItem component */\nexport type MenuItemProps =\n  | AvatarMenuItemProps\n  | CheckboxMenuItemProps\n  | IconMenuItemProps\n  | TextMenuItemProps;\n\nconst StyledStartAdornment = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n\n  '& .MuiAvatar-img': {\n    opacity: disabled ? theme.palette.action.disabledOpacity : 1,\n  },\n}));\n\nconst StyledCheckbox = styled(Checkbox)(() => ({\n  pointerEvents: 'none',\n}));\n\n/**\n * A customizable MenuItem component supporting text, avatar, icon and checkbox menu items.\n *\n * @param props - The component props\n * @returns The rendered MenuItem component\n */\nexport const MenuItem = ({\n  children,\n  disabled = false,\n  label,\n  secondaryText,\n  type = 'text',\n  ...props\n}: MenuItemProps): JSX.Element => {\n  // Remove type-specific props from props object to avoid passing them to MuiMenuItem\n  const muiProps: MuiMenuItemProps = ((): MuiMenuItemProps => {\n    switch (type) {\n      case 'checkbox': {\n        const { checked: _c, onCheckedChange: _h, ...rest } = props as CheckboxMenuItemProps;\n        return rest as MuiMenuItemProps;\n      }\n      case 'avatar': {\n        const { avatarSrc: _avatarSrc, ...rest } = props as AvatarMenuItemProps;\n        return rest as MuiMenuItemProps;\n      }\n      case 'icon': {\n        const { icon: _i, ...rest } = props as IconMenuItemProps;\n        return rest as MuiMenuItemProps;\n      }\n      default:\n        return props as MuiMenuItemProps;\n    }\n  })();\n\n  const handleClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n    if (disabled) {\n      return;\n    }\n\n    // If menu item is a checkbox, clicking the menu item will toggle the checkbox\n    if (type === 'checkbox') {\n      event.preventDefault();\n      event.stopPropagation();\n\n      const { checked, onCheckedChange } = props as CheckboxMenuItemProps;\n      const isChecked =\n        typeof checked === 'boolean' ? checked : Boolean((props as MuiMenuItemProps).selected);\n\n      onCheckedChange?.(!isChecked, event);\n      return;\n    }\n\n    muiProps?.onClick?.(event);\n  };\n\n  const renderAvatar = (): React.ReactNode => {\n    const { avatarSrc } = props as AvatarMenuItemProps;\n    return (\n      <StyledStartAdornment className=\"fd-MenuItem-startAdornment\" disabled={disabled}>\n        <Avatar\n          alt=\"\" // Avatar is described by the label\n          src={avatarSrc}\n          type=\"logo\"\n        />\n      </StyledStartAdornment>\n    );\n  };\n\n  const renderCheckbox = (): React.ReactNode => {\n    const { checked } = props as CheckboxMenuItemProps;\n    const isChecked = typeof checked === 'boolean' ? checked : Boolean((props as MuiMenuItemProps).selected);\n\n    return (\n      <StyledCheckbox\n        aria-hidden\n        checked={isChecked}\n        disabled={disabled}\n        fdKey=\"checkbox-menu-item\"\n        size=\"small\"\n        tabIndex={-1}\n      />\n    );\n  };\n\n  const renderIcon = (): React.ReactNode => {\n    const { icon } = props as IconMenuItemProps;\n    return <StyledStartAdornment className=\"fd-MenuItem-startAdornment\">{icon}</StyledStartAdornment>;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    switch (type) {\n      case 'avatar':\n        return renderAvatar();\n      case 'checkbox':\n        return renderCheckbox();\n      case 'icon':\n        return renderIcon();\n      default:\n        return null;\n    }\n  };\n\n  const renderText = (): React.ReactNode => {\n    if (label || secondaryText) {\n      return <ListItemText primary={label} secondary={secondaryText} />;\n    }\n\n    return children;\n  };\n\n  return (\n    <MuiMenuItem {...muiProps} disabled={disabled} onClick={handleClick}>\n      {renderStartAdornment()}\n      {renderText()}\n    </MuiMenuItem>\n  );\n};\n\nexport default MenuItem;\n"],"names":["StyledStartAdornment","styled","Box","shouldForwardProp","prop","theme","disabled","alignItems","display","justifyContent","opacity","palette","action","disabledOpacity","StyledCheckbox","Checkbox","pointerEvents","MenuItem","children","label","secondaryText","type","props","muiProps","checked","_c","onCheckedChange","_h","rest","avatarSrc","_avatarSrc","icon","_i","_jsxs","MuiMenuItem","onClick","event","preventDefault","stopPropagation","isChecked","Boolean","selected","_jsx","className","Avatar","alt","src","renderAvatar","fdKey","size","tabIndex","renderCheckbox","renderIcon","renderStartAdornment","ListItemText","primary","secondary"],"mappings":"uRA+EA,MAAMA,EAAuBC,EAAOC,EAAK,CACvCC,kBAAoBC,GAAkB,aAATA,GADFH,EAEF,EAAGI,QAAOC,YAAW,MAAO,CACrDC,WAAY,SACZC,QAAS,cACTC,eAAgB,SAEhB,mBAAoB,CAClBC,QAASJ,EAAWD,EAAMM,QAAQC,OAAOC,gBAAkB,OAIzDC,EAAiBb,EAAOc,EAAPd,EAAiB,KAAA,CACtCe,cAAe,WASJC,EAAW,EACtBC,WACAZ,YAAW,EACXa,QACAC,gBACAC,OAAO,UACJC,MAGH,MAAMC,EAA6B,MACjC,OAAQF,GACN,IAAK,WAAY,CACf,MAAQG,QAASC,EAAIC,gBAAiBC,KAAOC,GAASN,EACtD,OAAOM,CACT,CACA,IAAK,SAAU,CACb,MAAQC,UAAWC,KAAeF,GAASN,EAC3C,OAAOM,CACT,CACA,IAAK,OAAQ,CACX,MAAQG,KAAMC,KAAOJ,GAASN,EAC9B,OAAOM,CACT,CACA,QACE,OAAON,EAEZ,EAjBkC,GA+FnC,OACEW,EAACC,EAAW,IAAKX,EAAUjB,SAAUA,EAAU6B,QA7E5BC,IACnB,IAAI9B,EAKJ,GAAa,aAATe,EAYJE,GAAUY,UAAUC,OAZpB,CACEA,EAAMC,iBACND,EAAME,kBAEN,MAAMd,QAAEA,EAAOE,gBAAEA,GAAoBJ,EAC/BiB,EACe,kBAAZf,EAAwBA,EAAUgB,QAASlB,EAA2BmB,UAE/Ef,KAAmBa,EAAWH,EAEhC,aAuC2B,MAC3B,OAAQf,GACN,IAAK,SACH,MArCe,MACnB,MAAMQ,UAAEA,GAAcP,EACtB,OACEoB,EAAC1C,GAAqB2C,UAAU,6BAA6BrC,SAAUA,EAAQY,SAC7EwB,EAACE,EAAM,CACLC,IAAI,GACJC,IAAKjB,EACLR,KAAK,YA8BA0B,GACT,IAAK,WACH,MA1BiB,MACrB,MAAMvB,QAAEA,GAAYF,EACdiB,EAA+B,kBAAZf,EAAwBA,EAAUgB,QAASlB,EAA2BmB,UAE/F,OACEC,EAAC5B,EAAc,CAAA,eAAA,EAEbU,QAASe,EACTjC,SAAUA,EACV0C,MAAM,qBACNC,KAAK,QACLC,UAAU,KAeHC,GACT,IAAK,OACH,MAZa,MACjB,MAAMpB,KAAEA,GAAST,EACjB,OAAOoB,EAAC1C,EAAoB,CAAC2C,UAAU,6BAA4BzB,SAAEa,KAU1DqB,GACT,QACE,OAAO,OAcRC,GATClC,GAASC,EACJsB,EAACY,EAAY,CAACC,QAASpC,EAAOqC,UAAWpC,IAG3CF"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Alert"),i=require("@mui/material/Box"),l=require("../../atoms/Button/index.cjs.js"),n=require("../../atoms/IconButton/index.cjs.js"),o=require("../ButtonGroup/index.cjs.js"),r=require("../../../icons/Cancel/index.cjs.js"),s=require("@mui/material/styles"),c=require("@mui/material/useMediaQuery"),d=require("@mui/material/styles/useTheme"),u=require("./alertGlobalTokens.cjs.js");const g=s.styled(a,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({alignItems:"center",backgroundColor:u.getAlertGlobalBackgroundColour(e,t),borderBottom:"1px solid",borderRadius:0,borderColor:u.getAlertGlobalBorderColour(e,t),color:u.getAlertGlobalTextColour(e,t),padding:e.spacing(3),paddingTop:e.spacing(1.5),paddingBottom:e.spacing(1.5),width:"100%",display:"flex",position:"relative","& .MuiAlert-icon":{alignSelf:"flex-start"},"& .MuiAlert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),flexGrow:1,minWidth:0},"& .MuiAlert-action":{display:"flex",alignItems:"center",gap:e.spacing(3),marginLeft:"auto"},"& .MuiAlert-action .MuiIconButton-root":{outline:"none",boxShadow:"none",border:"none"},"& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible":{outline:"none",boxShadow:"none"},"& .fd-alert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),width:"100%"},"& .fd-alert-description":{flexGrow:1,minWidth:0},"& .fd-alert-actions-inline":{marginLeft:"auto",display:"none"},"& .fd-alert-actions-action":{display:"flex"},[e.breakpoints.down("tablet")]:{"& .fd-alert-message":{flexDirection:"column",alignItems:"stretch",gap:e.spacing(2)},"& .fd-alert-actions-inline":{marginLeft:0,marginTop:e.spacing(2),width:"100%",justifyContent:"flex-end",display:"flex"},"& .fd-alert-actions-action":{display:"none"},"& .MuiAlert-action":{position:"absolute",top:e.spacing(3),right:e.spacing(3),marginLeft:0}}}))),p=s.styled(i)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(3)}))),m=t.memo((({description:t,tone:a="neutral",onClose:s,action:m,className:f,closeAriaLabel:x="Close","data-fd":h})=>{const b=d(),y=c(b.breakpoints.down("tablet")),j=(m?Array.isArray(m)?m:[m]:[]).map((t=>{const a=t.id??`${t.label.replace(/\s+/g,"-").toLowerCase()}-${t.type??"type"}`;return e.jsx(l.Button,{"data-fd":t["data-fd"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`,fdKey:t.label,onClick:t.onClick,size:"small",tone:"neutral",variant:t.type??"secondary",children:t.label},a)})),A=[];return j.length&&!y&&A.push(e.jsx(o,{align:"right",className:"fd-alert-actions-action",layout:"horizontal",size:"small",children:j},"action-group-action")),s&&A.push(e.jsx(n.IconButton,{"aria-label":x,"data-fd":"close-button",onClick:s,size:"small",tone:"neutral",variant:"tertiary",children:e.jsx(r,{})},"close")),e.jsx(g,{action:A.length?e.jsx(p,{children:A}):void 0,className:f,"data-fd":h,icon:u.getAlertGlobalIcon(b,a),role:"alert",tone:a,children:e.jsxs(i,{className:"fd-alert-message",children:[e.jsx(i,{className:"fd-alert-description",children:t}),y&&j.length?e.jsx(o,{align:"right",className:"fd-alert-actions-inline",layout:"horizontal",size:"small",children:j}):null]})})}));m.displayName="AlertGlobal",module.exports=m;
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Alert"),i=require("@mui/material/Box"),l=require("../../atoms/Button/index.cjs.js"),n=require("../../atoms/IconButton/index.cjs.js"),o=require("../ButtonGroup/index.cjs.js"),r=require("../../../icons/Cancel/index.cjs.js"),s=require("@mui/material/styles"),c=require("@mui/material/useMediaQuery"),d=require("@mui/material/styles/useTheme"),u=require("./alertGlobalTokens.cjs.js");const g=s.styled(a,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({alignItems:"center",backgroundColor:u.getAlertGlobalBackgroundColour(e,t),borderBottom:"1px solid",borderRadius:0,borderColor:u.getAlertGlobalBorderColour(e,t),color:u.getAlertGlobalTextColour(e,t),padding:e.spacing(3),paddingTop:e.spacing(1.5),paddingBottom:e.spacing(1.5),width:"100%",display:"flex",position:"relative","& .MuiAlert-icon":{alignSelf:"flex-start"},"& .MuiAlert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),flexGrow:1,minWidth:0},"& .MuiAlert-action":{display:"flex",alignItems:"center",gap:e.spacing(3),marginLeft:"auto"},"& .MuiAlert-action .MuiIconButton-root":{outline:"none",boxShadow:"none",border:"none"},"& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible":{outline:"none",boxShadow:"none"},"& .fd-alert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),width:"100%"},"& .fd-alert-description":{flexGrow:1,minWidth:0},"& .fd-alert-actions-inline":{marginLeft:"auto",display:"none"},"& .fd-alert-actions-action":{display:"flex"},[e.breakpoints.down("tablet")]:{"& .fd-alert-message":{flexDirection:"column",alignItems:"stretch",gap:e.spacing(2)},"& .fd-alert-actions-inline":{marginLeft:0,marginTop:e.spacing(2),width:"100%",justifyContent:"flex-end",display:"flex"},"& .fd-alert-actions-action":{display:"none"},"& .MuiAlert-action":{position:"absolute",top:e.spacing(3),right:e.spacing(3),marginLeft:0}}}))),p=s.styled(i)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(3)}))),m=t.memo((({description:t,tone:a="neutral",onClose:s,action:m,className:f,closeAriaLabel:x="Close","data-fd":h})=>{const b=d(),y=c(b.breakpoints.down("tablet")),j=(m?Array.isArray(m)?m:[m]:[]).map((t=>{const a=t.id??`${t.label.replace(/\s+/g,"-").toLowerCase()}-${t.type??"type"}`;return e.jsx(l.Button,{fdKey:t["data-fd"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`,onClick:t.onClick,size:"small",tone:"neutral",variant:t.type??"secondary",children:t.label},a)})),A=[];return j.length&&!y&&A.push(e.jsx(o,{align:"right",className:"fd-alert-actions-action",layout:"horizontal",size:"small",children:j},"action-group-action")),s&&A.push(e.jsx(n.IconButton,{"aria-label":x,"data-fd":"close-button",onClick:s,size:"small",tone:"neutral",variant:"tertiary",children:e.jsx(r,{})},"close")),e.jsx(g,{action:A.length?e.jsx(p,{children:A}):void 0,className:f,"data-fd":h,icon:u.getAlertGlobalIcon(b,a),role:"alert",tone:a,children:e.jsxs(i,{className:"fd-alert-message",children:[e.jsx(i,{className:"fd-alert-description",children:t}),y&&j.length?e.jsx(o,{align:"right",className:"fd-alert-actions-inline",layout:"horizontal",size:"small",children:j}):null]})})}));m.displayName="AlertGlobal",module.exports=m;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport type { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';\nimport IconButton from '@fd/components/atoms/IconButton';\nimport type { AlertTones } from '@fd/components/molecules/Alert';\nimport ButtonGroup from '@fd/components/molecules/ButtonGroup';\nimport CancelIcon from '@fd/icons/Cancel';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport {\n  getAlertGlobalBackgroundColour,\n  getAlertGlobalBorderColour,\n  getAlertGlobalIcon,\n  getAlertGlobalTextColour,\n} from './alertGlobalTokens';\n\n/**\n * Global alert component for prominent, page-level messages.\n *\n * - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n *   (use an array to render multiple buttons side-by-side)\n * - Consumers are responsible for providing localized strings for any\n *   user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).\n */\nexport interface AlertGlobalProps {\n  /**\n   * Message content shown in the alert. Provide a localized string.\n   */\n  description: string;\n  /**\n   * Visual tone of the alert which controls icon and colors.\n   * Defaults to `neutral`.\n   */\n  tone?: AlertTones;\n  /**\n   * Called when the close button is pressed. When omitted, no close button is rendered.\n   */\n  onClose?: () => void;\n  /**\n   * One or more actions to render as buttons. A single object renders one button;\n   * an array renders multiple buttons. Provide localized `label` values.\n   */\n  action?: AlertAction | AlertAction[];\n  /**\n   * Accessible label for the close icon button. Provide a localized string.\n   * Defaults to \"Close\".\n   */\n  closeAriaLabel?: string;\n  /** Optional CSS class name for the root element. */\n  className?: string;\n  /** Optional test id for the root element. */\n  'data-fd'?: string;\n}\n\n/**\n * Describes a user action rendered as a button in the alert.\n */\nexport interface AlertAction {\n  /** Optional unique identifier for this action. Recommended for stable React keys. */\n  id?: string;\n  /** Button text. Provide a localized string. */\n  label: string;\n  /** Visual variant of the button. Defaults to `secondary`. */\n  type?: ButtonType;\n  /** Click handler for the action. */\n  onClick: () => void;\n  /** Optional test id applied to the button. */\n  'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n  tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n  alignItems: 'center',\n  backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n  borderBottom: '1px solid',\n  borderRadius: 0,\n  borderColor: getAlertGlobalBorderColour(theme, tone),\n  color: getAlertGlobalTextColour(theme, tone),\n  padding: theme.spacing(3),\n  paddingTop: theme.spacing(1.5),\n  paddingBottom: theme.spacing(1.5),\n  width: '100%',\n  display: 'flex',\n  position: 'relative',\n  '& .MuiAlert-icon': {\n    alignSelf: 'flex-start',\n  },\n  '& .MuiAlert-message': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  '& .MuiAlert-action': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n    marginLeft: 'auto',\n  },\n  '& .MuiAlert-action .MuiIconButton-root': {\n    outline: 'none',\n    boxShadow: 'none',\n    border: 'none',\n  },\n  '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n    outline: 'none',\n    boxShadow: 'none',\n  },\n  // Inline actions inside message container\n  '& .fd-alert-message': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    width: '100%',\n  },\n  '& .fd-alert-description': {\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  '& .fd-alert-actions-inline': {\n    marginLeft: 'auto',\n    display: 'none',\n  },\n  '& .fd-alert-actions-action': {\n    display: 'flex',\n  },\n  // Mobile layout: stack and right-align button group below description\n  [theme.breakpoints.down('tablet')]: {\n    '& .fd-alert-message': {\n      flexDirection: 'column',\n      alignItems: 'stretch',\n      gap: theme.spacing(2),\n    },\n    '& .fd-alert-actions-inline': {\n      marginLeft: 0,\n      marginTop: theme.spacing(2),\n      width: '100%',\n      justifyContent: 'flex-end',\n      display: 'flex',\n    },\n    '& .fd-alert-actions-action': {\n      display: 'none',\n    },\n    '& .MuiAlert-action': {\n      position: 'absolute',\n      top: theme.spacing(3),\n      right: theme.spacing(3),\n      marginLeft: 0,\n    },\n  },\n}));\n\nconst ActionContainer = styled(Box)(\n  ({ theme }): Record<string, unknown> => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n  }),\n);\n\nconst AlertGlobalComponent = ({\n  description,\n  tone = 'neutral',\n  onClose,\n  action,\n  className,\n  closeAriaLabel = 'Close',\n  'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n  const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n  const actionButtons = actionsArray.map((actionItem) => {\n    const uniqueKey =\n      actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`;\n    return (\n      <Button\n        key={uniqueKey}\n        data-fd={\n          actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`\n        }\n        fdKey={actionItem.label}\n        onClick={actionItem.onClick}\n        size=\"small\"\n        tone=\"neutral\"\n        variant={actionItem.type ?? 'secondary'}\n      >\n        {actionItem.label}\n      </Button>\n    );\n  });\n\n  const nodes: ReactNode[] = [];\n  if (actionButtons.length && !isMobile) {\n    nodes.push(\n      <ButtonGroup\n        key=\"action-group-action\"\n        align=\"right\"\n        className=\"fd-alert-actions-action\"\n        layout=\"horizontal\"\n        size=\"small\"\n      >\n        {actionButtons}\n      </ButtonGroup>,\n    );\n  }\n  if (onClose) {\n    nodes.push(\n      <IconButton\n        key=\"close\"\n        aria-label={closeAriaLabel}\n        data-fd=\"close-button\"\n        onClick={onClose}\n        size=\"small\"\n        tone=\"neutral\"\n        variant=\"tertiary\"\n      >\n        <CancelIcon />\n      </IconButton>,\n    );\n  }\n\n  return (\n    <StyledGlobalAlert\n      action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n      className={className}\n      data-fd={dataFd}\n      icon={getAlertGlobalIcon(theme, tone)}\n      role=\"alert\"\n      tone={tone}\n    >\n      <Box className=\"fd-alert-message\">\n        <Box className=\"fd-alert-description\">{description}</Box>\n        {isMobile && actionButtons.length ? (\n          <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n            {actionButtons}\n          </ButtonGroup>\n        ) : null}\n      </Box>\n    </StyledGlobalAlert>\n  );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","closeAriaLabel","dataFd","useTheme","isMobile","useMediaQuery","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport type { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';\nimport IconButton from '@fd/components/atoms/IconButton';\nimport type { AlertTones } from '@fd/components/molecules/Alert';\nimport ButtonGroup from '@fd/components/molecules/ButtonGroup';\nimport CancelIcon from '@fd/icons/Cancel';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport {\n  getAlertGlobalBackgroundColour,\n  getAlertGlobalBorderColour,\n  getAlertGlobalIcon,\n  getAlertGlobalTextColour,\n} from './alertGlobalTokens';\n\n/**\n * Global alert component for prominent, page-level messages.\n *\n * - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n *   (use an array to render multiple buttons side-by-side)\n * - Consumers are responsible for providing localized strings for any\n *   user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).\n */\nexport interface AlertGlobalProps {\n  /**\n   * Message content shown in the alert. Provide a localized string.\n   */\n  description: string;\n  /**\n   * Visual tone of the alert which controls icon and colors.\n   * Defaults to `neutral`.\n   */\n  tone?: AlertTones;\n  /**\n   * Called when the close button is pressed. When omitted, no close button is rendered.\n   */\n  onClose?: () => void;\n  /**\n   * One or more actions to render as buttons. A single object renders one button;\n   * an array renders multiple buttons. Provide localized `label` values.\n   */\n  action?: AlertAction | AlertAction[];\n  /**\n   * Accessible label for the close icon button. Provide a localized string.\n   * Defaults to \"Close\".\n   */\n  closeAriaLabel?: string;\n  /** Optional CSS class name for the root element. */\n  className?: string;\n  /** Optional test id for the root element. */\n  'data-fd'?: string;\n}\n\n/**\n * Describes a user action rendered as a button in the alert.\n */\nexport interface AlertAction {\n  /** Optional unique identifier for this action. Recommended for stable React keys. */\n  id?: string;\n  /** Button text. Provide a localized string. */\n  label: string;\n  /** Visual variant of the button. Defaults to `secondary`. */\n  type?: ButtonType;\n  /** Click handler for the action. */\n  onClick: () => void;\n  /** Optional test id applied to the button. */\n  'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n  tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n  alignItems: 'center',\n  backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n  borderBottom: '1px solid',\n  borderRadius: 0,\n  borderColor: getAlertGlobalBorderColour(theme, tone),\n  color: getAlertGlobalTextColour(theme, tone),\n  padding: theme.spacing(3),\n  paddingTop: theme.spacing(1.5),\n  paddingBottom: theme.spacing(1.5),\n  width: '100%',\n  display: 'flex',\n  position: 'relative',\n  '& .MuiAlert-icon': {\n    alignSelf: 'flex-start',\n  },\n  '& .MuiAlert-message': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  '& .MuiAlert-action': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n    marginLeft: 'auto',\n  },\n  '& .MuiAlert-action .MuiIconButton-root': {\n    outline: 'none',\n    boxShadow: 'none',\n    border: 'none',\n  },\n  '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n    outline: 'none',\n    boxShadow: 'none',\n  },\n  // Inline actions inside message container\n  '& .fd-alert-message': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    width: '100%',\n  },\n  '& .fd-alert-description': {\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  '& .fd-alert-actions-inline': {\n    marginLeft: 'auto',\n    display: 'none',\n  },\n  '& .fd-alert-actions-action': {\n    display: 'flex',\n  },\n  // Mobile layout: stack and right-align button group below description\n  [theme.breakpoints.down('tablet')]: {\n    '& .fd-alert-message': {\n      flexDirection: 'column',\n      alignItems: 'stretch',\n      gap: theme.spacing(2),\n    },\n    '& .fd-alert-actions-inline': {\n      marginLeft: 0,\n      marginTop: theme.spacing(2),\n      width: '100%',\n      justifyContent: 'flex-end',\n      display: 'flex',\n    },\n    '& .fd-alert-actions-action': {\n      display: 'none',\n    },\n    '& .MuiAlert-action': {\n      position: 'absolute',\n      top: theme.spacing(3),\n      right: theme.spacing(3),\n      marginLeft: 0,\n    },\n  },\n}));\n\nconst ActionContainer = styled(Box)(\n  ({ theme }): Record<string, unknown> => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n  }),\n);\n\nconst AlertGlobalComponent = ({\n  description,\n  tone = 'neutral',\n  onClose,\n  action,\n  className,\n  closeAriaLabel = 'Close',\n  'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n  const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n  const actionButtons = actionsArray.map((actionItem) => {\n    const uniqueKey =\n      actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`;\n    return (\n      <Button\n        key={uniqueKey}\n        fdKey={\n          actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`\n        }\n        onClick={actionItem.onClick}\n        size=\"small\"\n        tone=\"neutral\"\n        variant={actionItem.type ?? 'secondary'}\n      >\n        {actionItem.label}\n      </Button>\n    );\n  });\n\n  const nodes: ReactNode[] = [];\n  if (actionButtons.length && !isMobile) {\n    nodes.push(\n      <ButtonGroup\n        key=\"action-group-action\"\n        align=\"right\"\n        className=\"fd-alert-actions-action\"\n        layout=\"horizontal\"\n        size=\"small\"\n      >\n        {actionButtons}\n      </ButtonGroup>,\n    );\n  }\n  if (onClose) {\n    nodes.push(\n      <IconButton\n        key=\"close\"\n        aria-label={closeAriaLabel}\n        data-fd=\"close-button\"\n        onClick={onClose}\n        size=\"small\"\n        tone=\"neutral\"\n        variant=\"tertiary\"\n      >\n        <CancelIcon />\n      </IconButton>,\n    );\n  }\n\n  return (\n    <StyledGlobalAlert\n      action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n      className={className}\n      data-fd={dataFd}\n      icon={getAlertGlobalIcon(theme, tone)}\n      role=\"alert\"\n      tone={tone}\n    >\n      <Box className=\"fd-alert-message\">\n        <Box className=\"fd-alert-description\">{description}</Box>\n        {isMobile && actionButtons.length ? (\n          <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n            {actionButtons}\n          </ButtonGroup>\n        ) : null}\n      </Box>\n    </StyledGlobalAlert>\n  );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","closeAriaLabel","dataFd","useTheme","isMobile","useMediaQuery","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{memo as a}from"react";import i from"@mui/material/Alert";import o from"@mui/material/Box";import{Button as n}from"../../atoms/Button/index.js";import{IconButton as l}from"../../atoms/IconButton/index.js";import r from"../ButtonGroup/index.js";import s from"../../../icons/Cancel/index.js";import{styled as c}from"@mui/material/styles";import d from"@mui/material/useMediaQuery";import m from"@mui/material/styles/useTheme";import{getAlertGlobalTextColour as p,getAlertGlobalBorderColour as u,getAlertGlobalBackgroundColour as f,getAlertGlobalIcon as g}from"./alertGlobalTokens.js";const h=c(i,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({alignItems:"center",backgroundColor:f(e,t),borderBottom:"1px solid",borderRadius:0,borderColor:u(e,t),color:p(e,t),padding:e.spacing(3),paddingTop:e.spacing(1.5),paddingBottom:e.spacing(1.5),width:"100%",display:"flex",position:"relative","& .MuiAlert-icon":{alignSelf:"flex-start"},"& .MuiAlert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),flexGrow:1,minWidth:0},"& .MuiAlert-action":{display:"flex",alignItems:"center",gap:e.spacing(3),marginLeft:"auto"},"& .MuiAlert-action .MuiIconButton-root":{outline:"none",boxShadow:"none",border:"none"},"& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible":{outline:"none",boxShadow:"none"},"& .fd-alert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),width:"100%"},"& .fd-alert-description":{flexGrow:1,minWidth:0},"& .fd-alert-actions-inline":{marginLeft:"auto",display:"none"},"& .fd-alert-actions-action":{display:"flex"},[e.breakpoints.down("tablet")]:{"& .fd-alert-message":{flexDirection:"column",alignItems:"stretch",gap:e.spacing(2)},"& .fd-alert-actions-inline":{marginLeft:0,marginTop:e.spacing(2),width:"100%",justifyContent:"flex-end",display:"flex"},"& .fd-alert-actions-action":{display:"none"},"& .MuiAlert-action":{position:"absolute",top:e.spacing(3),right:e.spacing(3),marginLeft:0}}}))),y=c(o)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(3)}))),b=a((({description:a,tone:i="neutral",onClose:c,action:p,className:u,closeAriaLabel:f="Close","data-fd":b})=>{const x=m(),w=d(x.breakpoints.down("tablet")),A=(p?Array.isArray(p)?p:[p]:[]).map((t=>{const a=t.id??`${t.label.replace(/\s+/g,"-").toLowerCase()}-${t.type??"type"}`;return e(n,{"data-fd":t["data-fd"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`,fdKey:t.label,onClick:t.onClick,size:"small",tone:"neutral",variant:t.type??"secondary",children:t.label},a)})),C=[];return A.length&&!w&&C.push(e(r,{align:"right",className:"fd-alert-actions-action",layout:"horizontal",size:"small",children:A},"action-group-action")),c&&C.push(e(l,{"aria-label":f,"data-fd":"close-button",onClick:c,size:"small",tone:"neutral",variant:"tertiary",children:e(s,{})},"close")),e(h,{action:C.length?e(y,{children:C}):void 0,className:u,"data-fd":b,icon:g(x,i),role:"alert",tone:i,children:t(o,{className:"fd-alert-message",children:[e(o,{className:"fd-alert-description",children:a}),w&&A.length?e(r,{align:"right",className:"fd-alert-actions-inline",layout:"horizontal",size:"small",children:A}):null]})})}));b.displayName="AlertGlobal";export{b as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{memo as a}from"react";import i from"@mui/material/Alert";import o from"@mui/material/Box";import{Button as n}from"../../atoms/Button/index.js";import{IconButton as l}from"../../atoms/IconButton/index.js";import r from"../ButtonGroup/index.js";import s from"../../../icons/Cancel/index.js";import{styled as c}from"@mui/material/styles";import d from"@mui/material/useMediaQuery";import m from"@mui/material/styles/useTheme";import{getAlertGlobalTextColour as p,getAlertGlobalBorderColour as u,getAlertGlobalBackgroundColour as f,getAlertGlobalIcon as g}from"./alertGlobalTokens.js";const h=c(i,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({alignItems:"center",backgroundColor:f(e,t),borderBottom:"1px solid",borderRadius:0,borderColor:u(e,t),color:p(e,t),padding:e.spacing(3),paddingTop:e.spacing(1.5),paddingBottom:e.spacing(1.5),width:"100%",display:"flex",position:"relative","& .MuiAlert-icon":{alignSelf:"flex-start"},"& .MuiAlert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),flexGrow:1,minWidth:0},"& .MuiAlert-action":{display:"flex",alignItems:"center",gap:e.spacing(3),marginLeft:"auto"},"& .MuiAlert-action .MuiIconButton-root":{outline:"none",boxShadow:"none",border:"none"},"& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible":{outline:"none",boxShadow:"none"},"& .fd-alert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),width:"100%"},"& .fd-alert-description":{flexGrow:1,minWidth:0},"& .fd-alert-actions-inline":{marginLeft:"auto",display:"none"},"& .fd-alert-actions-action":{display:"flex"},[e.breakpoints.down("tablet")]:{"& .fd-alert-message":{flexDirection:"column",alignItems:"stretch",gap:e.spacing(2)},"& .fd-alert-actions-inline":{marginLeft:0,marginTop:e.spacing(2),width:"100%",justifyContent:"flex-end",display:"flex"},"& .fd-alert-actions-action":{display:"none"},"& .MuiAlert-action":{position:"absolute",top:e.spacing(3),right:e.spacing(3),marginLeft:0}}}))),y=c(o)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(3)}))),b=a((({description:a,tone:i="neutral",onClose:c,action:p,className:u,closeAriaLabel:f="Close","data-fd":b})=>{const x=m(),w=d(x.breakpoints.down("tablet")),A=(p?Array.isArray(p)?p:[p]:[]).map((t=>{const a=t.id??`${t.label.replace(/\s+/g,"-").toLowerCase()}-${t.type??"type"}`;return e(n,{fdKey:t["data-fd"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`,onClick:t.onClick,size:"small",tone:"neutral",variant:t.type??"secondary",children:t.label},a)})),C=[];return A.length&&!w&&C.push(e(r,{align:"right",className:"fd-alert-actions-action",layout:"horizontal",size:"small",children:A},"action-group-action")),c&&C.push(e(l,{"aria-label":f,"data-fd":"close-button",onClick:c,size:"small",tone:"neutral",variant:"tertiary",children:e(s,{})},"close")),e(h,{action:C.length?e(y,{children:C}):void 0,className:u,"data-fd":b,icon:g(x,i),role:"alert",tone:i,children:t(o,{className:"fd-alert-message",children:[e(o,{className:"fd-alert-description",children:a}),w&&A.length?e(r,{align:"right",className:"fd-alert-actions-inline",layout:"horizontal",size:"small",children:A}):null]})})}));b.displayName="AlertGlobal";export{b as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport type { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';\nimport IconButton from '@fd/components/atoms/IconButton';\nimport type { AlertTones } from '@fd/components/molecules/Alert';\nimport ButtonGroup from '@fd/components/molecules/ButtonGroup';\nimport CancelIcon from '@fd/icons/Cancel';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport {\n  getAlertGlobalBackgroundColour,\n  getAlertGlobalBorderColour,\n  getAlertGlobalIcon,\n  getAlertGlobalTextColour,\n} from './alertGlobalTokens';\n\n/**\n * Global alert component for prominent, page-level messages.\n *\n * - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n *   (use an array to render multiple buttons side-by-side)\n * - Consumers are responsible for providing localized strings for any\n *   user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).\n */\nexport interface AlertGlobalProps {\n  /**\n   * Message content shown in the alert. Provide a localized string.\n   */\n  description: string;\n  /**\n   * Visual tone of the alert which controls icon and colors.\n   * Defaults to `neutral`.\n   */\n  tone?: AlertTones;\n  /**\n   * Called when the close button is pressed. When omitted, no close button is rendered.\n   */\n  onClose?: () => void;\n  /**\n   * One or more actions to render as buttons. A single object renders one button;\n   * an array renders multiple buttons. Provide localized `label` values.\n   */\n  action?: AlertAction | AlertAction[];\n  /**\n   * Accessible label for the close icon button. Provide a localized string.\n   * Defaults to \"Close\".\n   */\n  closeAriaLabel?: string;\n  /** Optional CSS class name for the root element. */\n  className?: string;\n  /** Optional test id for the root element. */\n  'data-fd'?: string;\n}\n\n/**\n * Describes a user action rendered as a button in the alert.\n */\nexport interface AlertAction {\n  /** Optional unique identifier for this action. Recommended for stable React keys. */\n  id?: string;\n  /** Button text. Provide a localized string. */\n  label: string;\n  /** Visual variant of the button. Defaults to `secondary`. */\n  type?: ButtonType;\n  /** Click handler for the action. */\n  onClick: () => void;\n  /** Optional test id applied to the button. */\n  'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n  tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n  alignItems: 'center',\n  backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n  borderBottom: '1px solid',\n  borderRadius: 0,\n  borderColor: getAlertGlobalBorderColour(theme, tone),\n  color: getAlertGlobalTextColour(theme, tone),\n  padding: theme.spacing(3),\n  paddingTop: theme.spacing(1.5),\n  paddingBottom: theme.spacing(1.5),\n  width: '100%',\n  display: 'flex',\n  position: 'relative',\n  '& .MuiAlert-icon': {\n    alignSelf: 'flex-start',\n  },\n  '& .MuiAlert-message': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  '& .MuiAlert-action': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n    marginLeft: 'auto',\n  },\n  '& .MuiAlert-action .MuiIconButton-root': {\n    outline: 'none',\n    boxShadow: 'none',\n    border: 'none',\n  },\n  '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n    outline: 'none',\n    boxShadow: 'none',\n  },\n  // Inline actions inside message container\n  '& .fd-alert-message': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    width: '100%',\n  },\n  '& .fd-alert-description': {\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  '& .fd-alert-actions-inline': {\n    marginLeft: 'auto',\n    display: 'none',\n  },\n  '& .fd-alert-actions-action': {\n    display: 'flex',\n  },\n  // Mobile layout: stack and right-align button group below description\n  [theme.breakpoints.down('tablet')]: {\n    '& .fd-alert-message': {\n      flexDirection: 'column',\n      alignItems: 'stretch',\n      gap: theme.spacing(2),\n    },\n    '& .fd-alert-actions-inline': {\n      marginLeft: 0,\n      marginTop: theme.spacing(2),\n      width: '100%',\n      justifyContent: 'flex-end',\n      display: 'flex',\n    },\n    '& .fd-alert-actions-action': {\n      display: 'none',\n    },\n    '& .MuiAlert-action': {\n      position: 'absolute',\n      top: theme.spacing(3),\n      right: theme.spacing(3),\n      marginLeft: 0,\n    },\n  },\n}));\n\nconst ActionContainer = styled(Box)(\n  ({ theme }): Record<string, unknown> => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n  }),\n);\n\nconst AlertGlobalComponent = ({\n  description,\n  tone = 'neutral',\n  onClose,\n  action,\n  className,\n  closeAriaLabel = 'Close',\n  'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n  const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n  const actionButtons = actionsArray.map((actionItem) => {\n    const uniqueKey =\n      actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`;\n    return (\n      <Button\n        key={uniqueKey}\n        data-fd={\n          actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`\n        }\n        fdKey={actionItem.label}\n        onClick={actionItem.onClick}\n        size=\"small\"\n        tone=\"neutral\"\n        variant={actionItem.type ?? 'secondary'}\n      >\n        {actionItem.label}\n      </Button>\n    );\n  });\n\n  const nodes: ReactNode[] = [];\n  if (actionButtons.length && !isMobile) {\n    nodes.push(\n      <ButtonGroup\n        key=\"action-group-action\"\n        align=\"right\"\n        className=\"fd-alert-actions-action\"\n        layout=\"horizontal\"\n        size=\"small\"\n      >\n        {actionButtons}\n      </ButtonGroup>,\n    );\n  }\n  if (onClose) {\n    nodes.push(\n      <IconButton\n        key=\"close\"\n        aria-label={closeAriaLabel}\n        data-fd=\"close-button\"\n        onClick={onClose}\n        size=\"small\"\n        tone=\"neutral\"\n        variant=\"tertiary\"\n      >\n        <CancelIcon />\n      </IconButton>,\n    );\n  }\n\n  return (\n    <StyledGlobalAlert\n      action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n      className={className}\n      data-fd={dataFd}\n      icon={getAlertGlobalIcon(theme, tone)}\n      role=\"alert\"\n      tone={tone}\n    >\n      <Box className=\"fd-alert-message\">\n        <Box className=\"fd-alert-description\">{description}</Box>\n        {isMobile && actionButtons.length ? (\n          <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n            {actionButtons}\n          </ButtonGroup>\n        ) : null}\n      </Box>\n    </StyledGlobalAlert>\n  );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","closeAriaLabel","dataFd","useTheme","isMobile","useMediaQuery","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport type { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';\nimport IconButton from '@fd/components/atoms/IconButton';\nimport type { AlertTones } from '@fd/components/molecules/Alert';\nimport ButtonGroup from '@fd/components/molecules/ButtonGroup';\nimport CancelIcon from '@fd/icons/Cancel';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport {\n  getAlertGlobalBackgroundColour,\n  getAlertGlobalBorderColour,\n  getAlertGlobalIcon,\n  getAlertGlobalTextColour,\n} from './alertGlobalTokens';\n\n/**\n * Global alert component for prominent, page-level messages.\n *\n * - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n *   (use an array to render multiple buttons side-by-side)\n * - Consumers are responsible for providing localized strings for any\n *   user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).\n */\nexport interface AlertGlobalProps {\n  /**\n   * Message content shown in the alert. Provide a localized string.\n   */\n  description: string;\n  /**\n   * Visual tone of the alert which controls icon and colors.\n   * Defaults to `neutral`.\n   */\n  tone?: AlertTones;\n  /**\n   * Called when the close button is pressed. When omitted, no close button is rendered.\n   */\n  onClose?: () => void;\n  /**\n   * One or more actions to render as buttons. A single object renders one button;\n   * an array renders multiple buttons. Provide localized `label` values.\n   */\n  action?: AlertAction | AlertAction[];\n  /**\n   * Accessible label for the close icon button. Provide a localized string.\n   * Defaults to \"Close\".\n   */\n  closeAriaLabel?: string;\n  /** Optional CSS class name for the root element. */\n  className?: string;\n  /** Optional test id for the root element. */\n  'data-fd'?: string;\n}\n\n/**\n * Describes a user action rendered as a button in the alert.\n */\nexport interface AlertAction {\n  /** Optional unique identifier for this action. Recommended for stable React keys. */\n  id?: string;\n  /** Button text. Provide a localized string. */\n  label: string;\n  /** Visual variant of the button. Defaults to `secondary`. */\n  type?: ButtonType;\n  /** Click handler for the action. */\n  onClick: () => void;\n  /** Optional test id applied to the button. */\n  'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n  tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n  alignItems: 'center',\n  backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n  borderBottom: '1px solid',\n  borderRadius: 0,\n  borderColor: getAlertGlobalBorderColour(theme, tone),\n  color: getAlertGlobalTextColour(theme, tone),\n  padding: theme.spacing(3),\n  paddingTop: theme.spacing(1.5),\n  paddingBottom: theme.spacing(1.5),\n  width: '100%',\n  display: 'flex',\n  position: 'relative',\n  '& .MuiAlert-icon': {\n    alignSelf: 'flex-start',\n  },\n  '& .MuiAlert-message': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  '& .MuiAlert-action': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n    marginLeft: 'auto',\n  },\n  '& .MuiAlert-action .MuiIconButton-root': {\n    outline: 'none',\n    boxShadow: 'none',\n    border: 'none',\n  },\n  '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n    outline: 'none',\n    boxShadow: 'none',\n  },\n  // Inline actions inside message container\n  '& .fd-alert-message': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    width: '100%',\n  },\n  '& .fd-alert-description': {\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  '& .fd-alert-actions-inline': {\n    marginLeft: 'auto',\n    display: 'none',\n  },\n  '& .fd-alert-actions-action': {\n    display: 'flex',\n  },\n  // Mobile layout: stack and right-align button group below description\n  [theme.breakpoints.down('tablet')]: {\n    '& .fd-alert-message': {\n      flexDirection: 'column',\n      alignItems: 'stretch',\n      gap: theme.spacing(2),\n    },\n    '& .fd-alert-actions-inline': {\n      marginLeft: 0,\n      marginTop: theme.spacing(2),\n      width: '100%',\n      justifyContent: 'flex-end',\n      display: 'flex',\n    },\n    '& .fd-alert-actions-action': {\n      display: 'none',\n    },\n    '& .MuiAlert-action': {\n      position: 'absolute',\n      top: theme.spacing(3),\n      right: theme.spacing(3),\n      marginLeft: 0,\n    },\n  },\n}));\n\nconst ActionContainer = styled(Box)(\n  ({ theme }): Record<string, unknown> => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n  }),\n);\n\nconst AlertGlobalComponent = ({\n  description,\n  tone = 'neutral',\n  onClose,\n  action,\n  className,\n  closeAriaLabel = 'Close',\n  'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n  const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n  const actionButtons = actionsArray.map((actionItem) => {\n    const uniqueKey =\n      actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`;\n    return (\n      <Button\n        key={uniqueKey}\n        fdKey={\n          actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`\n        }\n        onClick={actionItem.onClick}\n        size=\"small\"\n        tone=\"neutral\"\n        variant={actionItem.type ?? 'secondary'}\n      >\n        {actionItem.label}\n      </Button>\n    );\n  });\n\n  const nodes: ReactNode[] = [];\n  if (actionButtons.length && !isMobile) {\n    nodes.push(\n      <ButtonGroup\n        key=\"action-group-action\"\n        align=\"right\"\n        className=\"fd-alert-actions-action\"\n        layout=\"horizontal\"\n        size=\"small\"\n      >\n        {actionButtons}\n      </ButtonGroup>,\n    );\n  }\n  if (onClose) {\n    nodes.push(\n      <IconButton\n        key=\"close\"\n        aria-label={closeAriaLabel}\n        data-fd=\"close-button\"\n        onClick={onClose}\n        size=\"small\"\n        tone=\"neutral\"\n        variant=\"tertiary\"\n      >\n        <CancelIcon />\n      </IconButton>,\n    );\n  }\n\n  return (\n    <StyledGlobalAlert\n      action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n      className={className}\n      data-fd={dataFd}\n      icon={getAlertGlobalIcon(theme, tone)}\n      role=\"alert\"\n      tone={tone}\n    >\n      <Box className=\"fd-alert-message\">\n        <Box className=\"fd-alert-description\">{description}</Box>\n        {isMobile && actionButtons.length ? (\n          <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n            {actionButtons}\n          </ButtonGroup>\n        ) : null}\n      </Box>\n    </StyledGlobalAlert>\n  );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","closeAriaLabel","dataFd","useTheme","isMobile","useMediaQuery","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/Box"),a=require("@mui/material/FormControl"),t=require("@mui/material/FormGroup"),l=require("@mui/material/FormHelperText"),s=require("@mui/material/FormLabel"),n=require("@mui/material/styles"),d=require("../../atoms/Checkbox/index.cjs.js"),c=require("../../../icons/CancelCircle/index.cjs.js");const o=n.styled(a)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)}))),u=n.styled(t)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2)}))),m=({fdKey:a,options:t,value:n,size:m="medium",label:x,hintText:p,errorText:h,valid:j=!0,required:f=!1,onChange:q})=>{const[b,g]=r.useState([]),y=n??b,C=e=>{const{name:r,checked:i}=e.target,a=i?[...y,r]:y.filter((e=>e!==r));void 0===n&&g(a),q&&q(e,a)},v=!j&&!!h;return e.jsxs(o,{"data-fd":a,children:[e.jsxs(i,{children:[e.jsx(s,{"data-fd":`${a}-label`,required:f,children:x}),p&&e.jsx(l,{"data-fd":`${a}-hint`,children:p})]}),v&&e.jsxs(l,{error:!0,children:[e.jsx(c,{}),h]}),e.jsx(u,{"data-fd":`${a}-checkboxes`,children:t.map((r=>{const i=y.includes(r.name);return e.jsx(d,{checked:i,disabled:r.disabled,fdKey:`${a}-${r.name}`,label:r.label,name:r.name,onChange:C,size:m,valid:j},r.name)}))})]})};exports.CheckboxGroup=m,exports.default=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/Box"),n=require("@mui/material/FormControl"),r=require("@mui/material/FormGroup"),o=require("@mui/material/FormHelperText"),s=require("@mui/material/FormLabel"),a=require("@mui/material/styles"),l=require("../../atoms/Checkbox/index.cjs.js"),c=require("../../../icons/CancelCircle/index.cjs.js");const d=a.styled(n)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)}))),p=a.styled(r)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),overflow:"visible"}))),u=a.styled(i)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingLeft:e.spacing(5.75),paddingTop:e.spacing(2),position:"relative",overflow:"visible","&::before":{content:'""',position:"absolute",left:e.spacing(1.75),top:e.spacing(2),bottom:0,width:"4px",backgroundColor:e.palette.semantic.stroke["stroke-weak"],zIndex:0}}))),m=({fdKey:n,options:r,value:a,size:m="medium",label:f,hintText:h,errorText:x,valid:g=!0,required:b=!1,onChange:j})=>{const[v,k]=t.useState([]),q=a??v,y=e=>{const t=[];return e.forEach((e=>{t.push(e.name),e.options&&t.push(...y(e.options))})),t},C=(e,t)=>{for(const i of e){if(i.name===t)return i;if(i.options){const e=C(i.options,t);if(e)return e}}},w=e=>e.options?y(e.options).filter((t=>{const i=C(e.options||[],t);return!i?.disabled})):[],T=e=>{const t=w(e);return 0!==t.length&&t.every((e=>q.includes(e)))},$=e=>{const t=e.options&&e.options.length>0,i=q.includes(e.name);if(!t)return{checked:i,indeterminate:!1};const n=T(e),r=(e=>{const t=w(e);if(0===t.length)return!1;const i=t.filter((e=>q.includes(e))).length;return i>0&&i<t.length})(e);return{checked:n,indeterminate:r&&!n}},F=e=>{const{name:t}=e.target,i=C(r,t);if(!i)return;let n;if(i.options&&i.options.length>0){if(T(i)){const e=(o=i).options?y(o.options):[];n=q.filter((t=>!e.includes(t)))}else{const e=w(i);n=[...new Set([...q,...e])]}n=n.filter((e=>e!==i.name))}else{const{checked:i}=e.target;n=i?[...q,t]:q.filter((e=>e!==t))}var o;void 0===a&&k(n),j&&j(e,n)},z=t=>t.map((t=>{const{checked:r,indeterminate:o}=$(t),s=t.options&&t.options.length>0;return e.jsxs(i,{children:[e.jsx(l,{checked:r,disabled:t.disabled,fdKey:`${n}-${t.name}`,indeterminate:o,label:t.label,name:t.name,onChange:F,size:m,valid:g}),s&&e.jsx(u,{children:z(t.options??[])})]},t.name)})),D=!g&&!!x;return e.jsxs(d,{"data-fd":n,children:[e.jsxs(i,{children:[e.jsx(s,{"data-fd":`${n}-label`,required:b,children:f}),h&&e.jsx(o,{"data-fd":`${n}-hint`,children:h})]}),D&&e.jsxs(o,{error:!0,children:[e.jsx(c,{}),x]}),e.jsx(p,{"data-fd":`${n}-checkboxes`,children:z(r)})]})};exports.CheckboxGroup=m,exports.default=m;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/CheckboxGroup/index.tsx"],"sourcesContent":["import { type ChangeEvent, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormControl from '@mui/material/FormControl';\nimport MuiFormGroup from '@mui/material/FormGroup';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiFormLabel from '@mui/material/FormLabel';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '@fd/components/atoms/Checkbox';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nexport interface CheckboxOption {\n  name: string;\n  label: string;\n  disabled?: boolean;\n}\n\ninterface CheckboxGroupProps {\n  fdKey: string;\n  options: CheckboxOption[];\n  label: string;\n  /**\n   * The selected values. When provided, the component is controlled.\n   * When omitted, the component is uncontrolled and manages its own state.\n   */\n  value?: string[];\n  size?: 'medium' | 'small';\n  hintText?: string;\n  errorText?: string;\n  valid?: boolean;\n  required?: boolean;\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;\n}\n\nconst StyledFormControl = styled(MuiFormControl)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n}));\n\nconst StyledFormGroup = styled(MuiFormGroup)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n}));\n\nexport const CheckboxGroup = ({\n  fdKey,\n  options,\n  value,\n  size = 'medium',\n  label,\n  hintText,\n  errorText,\n  valid = true,\n  required = false,\n  onChange,\n}: CheckboxGroupProps): JSX.Element => {\n  const [internalValue, setInternalValue] = useState<string[]>([]);\n\n  const resolvedValue = value ?? internalValue;\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const { name: optionName, checked } = event.target;\n\n    const newValue = checked\n      ? [...resolvedValue, optionName]\n      : resolvedValue.filter((name) => name !== optionName);\n\n    // If value is undefined, we're in uncontrolled mode - update internal state\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n\n    if (onChange) {\n      onChange(event, newValue);\n    }\n  };\n\n  const isError = !valid && !!errorText;\n\n  return (\n    <StyledFormControl data-fd={fdKey}>\n      <Box>\n        <MuiFormLabel data-fd={`${fdKey}-label`} required={required}>\n          {label}\n        </MuiFormLabel>\n\n        {hintText && <MuiFormHelperText data-fd={`${fdKey}-hint`}>{hintText}</MuiFormHelperText>}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledFormGroup data-fd={`${fdKey}-checkboxes`}>\n        {options.map((option) => {\n          const isChecked = resolvedValue.includes(option.name);\n\n          return (\n            <Checkbox\n              key={option.name}\n              checked={isChecked}\n              disabled={option.disabled}\n              fdKey={`${fdKey}-${option.name}`}\n              label={option.label}\n              name={option.name}\n              onChange={handleChange}\n              size={size}\n              valid={valid}\n            />\n          );\n        })}\n      </StyledFormGroup>\n    </StyledFormControl>\n  );\n};\n\nexport default CheckboxGroup;\n"],"names":["StyledFormControl","styled","MuiFormControl","theme","display","flexDirection","gap","spacing","StyledFormGroup","MuiFormGroup","paddingTop","CheckboxGroup","fdKey","options","value","size","label","hintText","errorText","valid","required","onChange","internalValue","setInternalValue","useState","resolvedValue","handleChange","event","name","optionName","checked","target","newValue","filter","undefined","isError","_jsxs","children","Box","_jsx","MuiFormLabel","MuiFormHelperText","error","CancelCircleIcon","map","option","isChecked","includes","Checkbox","disabled"],"mappings":"2bAmCA,MAAMA,EAAoBC,EAAAA,OAAOC,EAAPD,EAAuB,EAAGE,YAAO,CACzDC,QAAS,OACTC,cAAe,SACfC,IAAKH,EAAMI,QAAQ,QAGfC,EAAkBP,EAAAA,OAAOQ,EAAPR,EAAqB,EAAGE,YAAO,CACrDC,QAAS,OACTC,cAAe,SACfC,IAAKH,EAAMI,QAAQ,GACnBG,WAAYP,EAAMI,QAAQ,OAGfI,EAAgB,EAC3BC,QACAC,UACAC,QACAC,OAAO,SACPC,QACAC,WACAC,YACAC,SAAQ,EACRC,YAAW,EACXC,eAEA,MAAOC,EAAeC,GAAoBC,EAAAA,SAAmB,IAEvDC,EAAgBX,GAASQ,EAEzBI,EAAgBC,IACpB,MAAQC,KAAMC,EAAUC,QAAEA,GAAYH,EAAMI,OAEtCC,EAAWF,EACb,IAAIL,EAAeI,GACnBJ,EAAcQ,QAAQL,GAASA,IAASC,SAG9BK,IAAVpB,GACFS,EAAiBS,GAGfX,GACFA,EAASM,EAAOK,IAIdG,GAAWhB,KAAWD,EAE5B,OACEkB,EAAAA,KAACpC,EAAiB,CAAA,UAAUY,EAAKyB,SAAA,CAC/BD,OAACE,EAAG,CAAAD,SAAA,CACFE,EAAAA,IAACC,EAAY,CAAA,UAAU,GAAG5B,UAAeQ,SAAUA,EAAQiB,SACxDrB,IAGFC,GAAYsB,EAAAA,IAACE,EAAiB,CAAA,UAAU,GAAG7B,SAAYyB,SAAGpB,OAG5DkB,GACCC,EAAAA,KAACK,EAAiB,CAACC,OAAK,EAAAL,SAAA,CACtBE,EAAAA,IAACI,EAAgB,CAAA,GAEhBzB,KAILqB,EAAAA,IAAC/B,EAAe,CAAA,UAAU,GAAGI,eAAkByB,SAC5CxB,EAAQ+B,KAAKC,IACZ,MAAMC,EAAYrB,EAAcsB,SAASF,EAAOjB,MAEhD,OACEW,EAAAA,IAACS,EAAQ,CAEPlB,QAASgB,EACTG,SAAUJ,EAAOI,SACjBrC,MAAO,GAAGA,KAASiC,EAAOjB,OAC1BZ,MAAO6B,EAAO7B,MACdY,KAAMiB,EAAOjB,KACbP,SAAUK,EACVX,KAAMA,EACNI,MAAOA,GARF0B,EAAOjB"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/CheckboxGroup/index.tsx"],"sourcesContent":["import { type ChangeEvent, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormControl from '@mui/material/FormControl';\nimport MuiFormGroup from '@mui/material/FormGroup';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiFormLabel from '@mui/material/FormLabel';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '@fd/components/atoms/Checkbox';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\n/**\n * Represents a checkbox option in the CheckboxGroup.\n * Supports hierarchical nesting through the `options` property.\n */\nexport interface CheckboxOption {\n  /** Unique identifier for the option. */\n  name: string;\n  /** Display label for the checkbox. */\n  label: string;\n  /** Whether the checkbox is disabled. */\n  disabled?: boolean;\n  /** Nested child options, creating a hierarchical structure. */\n  options?: CheckboxOption[];\n}\n\n/**\n * Props for the CheckboxGroup component.\n * Supports hierarchical checkbox groups with parent-child relationships.\n * Parent checkboxes automatically reflect the selection state of their children,\n * showing indeterminate state when some (but not all) children are selected.\n */\ninterface CheckboxGroupProps {\n  /** Unique identifier forwarded to the root element as `data-fd` for testing and identification. */\n  fdKey: string;\n  /** Array of checkbox options. Supports nested options for hierarchical structures. */\n  options: CheckboxOption[];\n  /** Label displayed above the checkbox group. */\n  label: string;\n  /**\n   * The selected values. When provided, the component is controlled.\n   * When omitted, the component is uncontrolled and manages its own state.\n   */\n  value?: string[];\n  /** Size of the checkboxes. */\n  size?: 'medium' | 'small';\n  /** Helper text displayed below the label. */\n  hintText?: string;\n  /** Error message displayed when validation fails. */\n  errorText?: string;\n  /** Whether the input is valid. When false and errorText is provided, error styling is applied. */\n  valid?: boolean;\n  /** Whether the field is required. Adds a required indicator to the label. */\n  required?: boolean;\n  /** Called when the selection changes. Receives the change event and the updated array of selected option names. */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;\n}\n\nconst StyledFormControl = styled(MuiFormControl)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n}));\n\nconst StyledFormGroup = styled(MuiFormGroup)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  overflow: 'visible',\n}));\n\nconst StyledChildrenContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingLeft: theme.spacing(5.75),\n  paddingTop: theme.spacing(2),\n  position: 'relative',\n  overflow: 'visible',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    left: theme.spacing(1.75),\n    top: theme.spacing(2),\n    bottom: 0,\n    width: '4px',\n    backgroundColor: theme.palette.semantic.stroke['stroke-weak'],\n    zIndex: 0,\n  },\n}));\n\n/**\n * A hierarchical checkbox group component that supports nested options and parent-child relationships.\n * When a parent option is selected, all enabled child options are automatically selected.\n * Parent checkboxes show an indeterminate state when some (but not all) children are selected.\n * Supports both controlled and uncontrolled modes.\n *\n * @param props - The component props\n * @returns The rendered CheckboxGroup component\n */\nexport const CheckboxGroup = ({\n  fdKey,\n  options,\n  value,\n  size = 'medium',\n  label,\n  hintText,\n  errorText,\n  valid = true,\n  required = false,\n  onChange,\n}: CheckboxGroupProps): JSX.Element => {\n  const [internalValue, setInternalValue] = useState<string[]>([]);\n\n  const resolvedValue = value ?? internalValue;\n\n  // Flatten all option names (including children) for easy lookup\n  const getAllOptionNames = (opts: CheckboxOption[]): string[] => {\n    const names: string[] = [];\n    opts.forEach((opt) => {\n      names.push(opt.name);\n      if (opt.options) {\n        names.push(...getAllOptionNames(opt.options));\n      }\n    });\n    return names;\n  };\n\n  // Get all child option names for a given option (including disabled)\n  const getChildOptionNames = (option: CheckboxOption): string[] => {\n    if (!option.options) return [];\n    return getAllOptionNames(option.options);\n  };\n\n  // Helper to find an option by name in the hierarchy\n  const findOption = (opts: CheckboxOption[], targetName: string): CheckboxOption | undefined => {\n    for (const opt of opts) {\n      if (opt.name === targetName) return opt;\n      if (opt.options) {\n        const found = findOption(opt.options, targetName);\n        if (found) return found;\n      }\n    }\n    return undefined;\n  };\n\n  // Get all enabled child names for a given option\n  const getEnabledChildNames = (option: CheckboxOption): string[] => {\n    if (!option.options) return [];\n    return getAllOptionNames(option.options).filter((childName) => {\n      const childOption = findOption(option.options || [], childName);\n      return !childOption?.disabled;\n    });\n  };\n\n  // Check if all enabled children of an option are selected\n  const areAllChildrenSelected = (option: CheckboxOption): boolean => {\n    const enabledChildNames = getEnabledChildNames(option);\n    if (enabledChildNames.length === 0) return false;\n    return enabledChildNames.every((name) => resolvedValue.includes(name));\n  };\n\n  // Check if some (but not all) enabled children of an option are selected\n  const areSomeChildrenSelected = (option: CheckboxOption): boolean => {\n    const enabledChildNames = getEnabledChildNames(option);\n    if (enabledChildNames.length === 0) return false;\n    const selectedCount = enabledChildNames.filter((name) => resolvedValue.includes(name)).length;\n    return selectedCount > 0 && selectedCount < enabledChildNames.length;\n  };\n\n  // Calculate checkbox state for an option\n  const getCheckboxState = (option: CheckboxOption): { checked: boolean; indeterminate: boolean } => {\n    const hasChildren = option.options && option.options.length > 0;\n    const isDirectlySelected = resolvedValue.includes(option.name);\n\n    if (!hasChildren) {\n      return { checked: isDirectlySelected, indeterminate: false };\n    }\n\n    const allSelected = areAllChildrenSelected(option);\n    const someSelected = areSomeChildrenSelected(option);\n\n    return {\n      checked: allSelected,\n      indeterminate: someSelected && !allSelected,\n    };\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const { name: optionName } = event.target;\n    const clickedOption = findOption(options, optionName);\n    if (!clickedOption) return;\n\n    let newValue: string[];\n\n    // If option has children, toggle all children based on current state\n    if (clickedOption.options && clickedOption.options.length > 0) {\n      const allChildrenSelected = areAllChildrenSelected(clickedOption);\n\n      if (allChildrenSelected) {\n        // All children are selected - deselect all children\n        const childNames = getChildOptionNames(clickedOption);\n        newValue = resolvedValue.filter((name) => !childNames.includes(name));\n      } else {\n        // Not all children are selected - select all enabled children\n        const enabledChildNames = getEnabledChildNames(clickedOption);\n        // Add all enabled children that aren't already selected\n        newValue = [...new Set([...resolvedValue, ...enabledChildNames])];\n      }\n      // Ensure parent names are not persisted in the value for hierarchical options\n      newValue = newValue.filter((name) => name !== clickedOption.name);\n    } else {\n      // Regular checkbox toggle - use event.checked for leaf nodes\n      const { checked } = event.target;\n      newValue = checked\n        ? [...resolvedValue, optionName]\n        : resolvedValue.filter((name) => name !== optionName);\n    }\n\n    // If value is undefined, we're in uncontrolled mode - update internal state\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n\n    if (onChange) {\n      onChange(event, newValue);\n    }\n  };\n\n  // Render checkbox options recursively\n  const renderOptions = (opts: CheckboxOption[]): JSX.Element[] => {\n    return opts.map((option) => {\n      const { checked, indeterminate } = getCheckboxState(option);\n      const hasOptions = option.options && option.options.length > 0;\n\n      return (\n        <Box key={option.name}>\n          <Checkbox\n            checked={checked}\n            disabled={option.disabled}\n            fdKey={`${fdKey}-${option.name}`}\n            indeterminate={indeterminate}\n            label={option.label}\n            name={option.name}\n            onChange={handleChange}\n            size={size}\n            valid={valid}\n          />\n          {hasOptions && (\n            <StyledChildrenContainer>{renderOptions(option.options ?? [])}</StyledChildrenContainer>\n          )}\n        </Box>\n      );\n    });\n  };\n\n  const isError = !valid && !!errorText;\n\n  return (\n    <StyledFormControl data-fd={fdKey}>\n      <Box>\n        <MuiFormLabel data-fd={`${fdKey}-label`} required={required}>\n          {label}\n        </MuiFormLabel>\n\n        {hintText && <MuiFormHelperText data-fd={`${fdKey}-hint`}>{hintText}</MuiFormHelperText>}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledFormGroup data-fd={`${fdKey}-checkboxes`}>{renderOptions(options)}</StyledFormGroup>\n    </StyledFormControl>\n  );\n};\n\nexport default CheckboxGroup;\n"],"names":["StyledFormControl","styled","MuiFormControl","theme","display","flexDirection","gap","spacing","StyledFormGroup","MuiFormGroup","paddingTop","overflow","StyledChildrenContainer","Box","paddingLeft","position","content","left","top","bottom","width","backgroundColor","palette","semantic","stroke","zIndex","CheckboxGroup","fdKey","options","value","size","label","hintText","errorText","valid","required","onChange","internalValue","setInternalValue","useState","resolvedValue","getAllOptionNames","opts","names","forEach","opt","push","name","findOption","targetName","found","getEnabledChildNames","option","filter","childName","childOption","disabled","areAllChildrenSelected","enabledChildNames","length","every","includes","getCheckboxState","hasChildren","isDirectlySelected","checked","indeterminate","allSelected","someSelected","selectedCount","areSomeChildrenSelected","handleChange","event","optionName","target","clickedOption","newValue","childNames","Set","undefined","renderOptions","map","hasOptions","_jsxs","children","_jsx","Checkbox","isError","MuiFormLabel","MuiFormHelperText","error","CancelCircleIcon"],"mappings":"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"}

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

@@ -1,26 +1,59 @@
 import { ChangeEvent } from 'react';
 
+/**
+ * Represents a checkbox option in the CheckboxGroup.
+ * Supports hierarchical nesting through the `options` property.
+ */
 interface CheckboxOption {
+    /** Unique identifier for the option. */
     name: string;
+    /** Display label for the checkbox. */
     label: string;
+    /** Whether the checkbox is disabled. */
     disabled?: boolean;
+    /** Nested child options, creating a hierarchical structure. */
+    options?: CheckboxOption[];
 }
+/**
+ * Props for the CheckboxGroup component.
+ * Supports hierarchical checkbox groups with parent-child relationships.
+ * Parent checkboxes automatically reflect the selection state of their children,
+ * showing indeterminate state when some (but not all) children are selected.
+ */
 interface CheckboxGroupProps {
+    /** Unique identifier forwarded to the root element as `data-fd` for testing and identification. */
     fdKey: string;
+    /** Array of checkbox options. Supports nested options for hierarchical structures. */
     options: CheckboxOption[];
+    /** Label displayed above the checkbox group. */
     label: string;
     /**
      * The selected values. When provided, the component is controlled.
      * When omitted, the component is uncontrolled and manages its own state.
      */
     value?: string[];
+    /** Size of the checkboxes. */
     size?: 'medium' | 'small';
+    /** Helper text displayed below the label. */
     hintText?: string;
+    /** Error message displayed when validation fails. */
     errorText?: string;
+    /** Whether the input is valid. When false and errorText is provided, error styling is applied. */
     valid?: boolean;
+    /** Whether the field is required. Adds a required indicator to the label. */
     required?: boolean;
+    /** Called when the selection changes. Receives the change event and the updated array of selected option names. */
     onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;
 }
+/**
+ * A hierarchical checkbox group component that supports nested options and parent-child relationships.
+ * When a parent option is selected, all enabled child options are automatically selected.
+ * Parent checkboxes show an indeterminate state when some (but not all) children are selected.
+ * Supports both controlled and uncontrolled modes.
+ *
+ * @param props - The component props
+ * @returns The rendered CheckboxGroup component
+ */
 declare const CheckboxGroup: ({ fdKey, options, value, size, label, hintText, errorText, valid, required, onChange, }: CheckboxGroupProps) => JSX.Element;
 
 export { CheckboxGroup, CheckboxGroup as default };

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as i}from"react";import a from"@mui/material/Box";import m from"@mui/material/FormControl";import o from"@mui/material/FormGroup";import t from"@mui/material/FormHelperText";import l from"@mui/material/FormLabel";import{styled as n}from"@mui/material/styles";import d from"../../atoms/Checkbox/index.js";import c from"../../../icons/CancelCircle/index.js";const p=n(m)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)}))),s=n(o)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2)}))),f=({fdKey:m,options:o,value:n,size:f="medium",label:u,hintText:h,errorText:x,valid:b=!0,required:g=!1,onChange:C})=>{const[y,$]=i([]),k=n??y,v=e=>{const{name:r,checked:i}=e.target,a=i?[...k,r]:k.filter((e=>e!==r));void 0===n&&$(a),C&&C(e,a)},F=!b&&!!x;return e(p,{"data-fd":m,children:[e(a,{children:[r(l,{"data-fd":`${m}-label`,required:g,children:u}),h&&r(t,{"data-fd":`${m}-hint`,children:h})]}),F&&e(t,{error:!0,children:[r(c,{}),x]}),r(s,{"data-fd":`${m}-checkboxes`,children:o.map((e=>{const i=k.includes(e.name);return r(d,{checked:i,disabled:e.disabled,fdKey:`${m}-${e.name}`,label:e.label,name:e.name,onChange:v,size:f,valid:b},e.name)}))})]})};export{f as CheckboxGroup,f as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i}from"react";import n from"@mui/material/Box";import o from"@mui/material/FormControl";import r from"@mui/material/FormGroup";import a from"@mui/material/FormHelperText";import l from"@mui/material/FormLabel";import{styled as s}from"@mui/material/styles";import c from"../../atoms/Checkbox/index.js";import m from"../../../icons/CancelCircle/index.js";const d=s(o)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)}))),p=s(r)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),overflow:"visible"}))),f=s(n)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingLeft:e.spacing(5.75),paddingTop:e.spacing(2),position:"relative",overflow:"visible","&::before":{content:'""',position:"absolute",left:e.spacing(1.75),top:e.spacing(2),bottom:0,width:"4px",backgroundColor:e.palette.semantic.stroke["stroke-weak"],zIndex:0}}))),u=({fdKey:o,options:r,value:s,size:u="medium",label:h,hintText:g,errorText:x,valid:b=!0,required:k=!1,onChange:v})=>{const[y,C]=i([]),w=s??y,T=e=>{const t=[];return e.forEach((e=>{t.push(e.name),e.options&&t.push(...T(e.options))})),t},$=(e,t)=>{for(const i of e){if(i.name===t)return i;if(i.options){const e=$(i.options,t);if(e)return e}}},F=e=>e.options?T(e.options).filter((t=>{const i=$(e.options||[],t);return!i?.disabled})):[],j=e=>{const t=F(e);return 0!==t.length&&t.every((e=>w.includes(e)))},z=e=>{const t=e.options&&e.options.length>0,i=w.includes(e.name);if(!t)return{checked:i,indeterminate:!1};const n=j(e),o=(e=>{const t=F(e);if(0===t.length)return!1;const i=t.filter((e=>w.includes(e))).length;return i>0&&i<t.length})(e);return{checked:n,indeterminate:o&&!n}},D=e=>{const{name:t}=e.target,i=$(r,t);if(!i)return;let n;if(i.options&&i.options.length>0){if(j(i)){const e=(o=i).options?T(o.options):[];n=w.filter((t=>!e.includes(t)))}else{const e=F(i);n=[...new Set([...w,...e])]}n=n.filter((e=>e!==i.name))}else{const{checked:i}=e.target;n=i?[...w,t]:w.filter((e=>e!==t))}var o;void 0===s&&C(n),v&&v(e,n)},q=i=>i.map((i=>{const{checked:r,indeterminate:a}=z(i),l=i.options&&i.options.length>0;return e(n,{children:[t(c,{checked:r,disabled:i.disabled,fdKey:`${o}-${i.name}`,indeterminate:a,label:i.label,name:i.name,onChange:D,size:u,valid:b}),l&&t(f,{children:q(i.options??[])})]},i.name)})),K=!b&&!!x;return e(d,{"data-fd":o,children:[e(n,{children:[t(l,{"data-fd":`${o}-label`,required:k,children:h}),g&&t(a,{"data-fd":`${o}-hint`,children:g})]}),K&&e(a,{error:!0,children:[t(m,{}),x]}),t(p,{"data-fd":`${o}-checkboxes`,children:q(r)})]})};export{u as CheckboxGroup,u as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/CheckboxGroup/index.tsx"],"sourcesContent":["import { type ChangeEvent, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormControl from '@mui/material/FormControl';\nimport MuiFormGroup from '@mui/material/FormGroup';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiFormLabel from '@mui/material/FormLabel';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '@fd/components/atoms/Checkbox';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nexport interface CheckboxOption {\n  name: string;\n  label: string;\n  disabled?: boolean;\n}\n\ninterface CheckboxGroupProps {\n  fdKey: string;\n  options: CheckboxOption[];\n  label: string;\n  /**\n   * The selected values. When provided, the component is controlled.\n   * When omitted, the component is uncontrolled and manages its own state.\n   */\n  value?: string[];\n  size?: 'medium' | 'small';\n  hintText?: string;\n  errorText?: string;\n  valid?: boolean;\n  required?: boolean;\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;\n}\n\nconst StyledFormControl = styled(MuiFormControl)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n}));\n\nconst StyledFormGroup = styled(MuiFormGroup)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n}));\n\nexport const CheckboxGroup = ({\n  fdKey,\n  options,\n  value,\n  size = 'medium',\n  label,\n  hintText,\n  errorText,\n  valid = true,\n  required = false,\n  onChange,\n}: CheckboxGroupProps): JSX.Element => {\n  const [internalValue, setInternalValue] = useState<string[]>([]);\n\n  const resolvedValue = value ?? internalValue;\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const { name: optionName, checked } = event.target;\n\n    const newValue = checked\n      ? [...resolvedValue, optionName]\n      : resolvedValue.filter((name) => name !== optionName);\n\n    // If value is undefined, we're in uncontrolled mode - update internal state\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n\n    if (onChange) {\n      onChange(event, newValue);\n    }\n  };\n\n  const isError = !valid && !!errorText;\n\n  return (\n    <StyledFormControl data-fd={fdKey}>\n      <Box>\n        <MuiFormLabel data-fd={`${fdKey}-label`} required={required}>\n          {label}\n        </MuiFormLabel>\n\n        {hintText && <MuiFormHelperText data-fd={`${fdKey}-hint`}>{hintText}</MuiFormHelperText>}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledFormGroup data-fd={`${fdKey}-checkboxes`}>\n        {options.map((option) => {\n          const isChecked = resolvedValue.includes(option.name);\n\n          return (\n            <Checkbox\n              key={option.name}\n              checked={isChecked}\n              disabled={option.disabled}\n              fdKey={`${fdKey}-${option.name}`}\n              label={option.label}\n              name={option.name}\n              onChange={handleChange}\n              size={size}\n              valid={valid}\n            />\n          );\n        })}\n      </StyledFormGroup>\n    </StyledFormControl>\n  );\n};\n\nexport default CheckboxGroup;\n"],"names":["StyledFormControl","styled","MuiFormControl","theme","display","flexDirection","gap","spacing","StyledFormGroup","MuiFormGroup","paddingTop","CheckboxGroup","fdKey","options","value","size","label","hintText","errorText","valid","required","onChange","internalValue","setInternalValue","useState","resolvedValue","handleChange","event","name","optionName","checked","target","newValue","filter","undefined","isError","_jsxs","children","Box","_jsx","MuiFormLabel","MuiFormHelperText","error","CancelCircleIcon","map","option","isChecked","includes","Checkbox","disabled"],"mappings":"saAmCA,MAAMA,EAAoBC,EAAOC,EAAPD,EAAuB,EAAGE,YAAO,CACzDC,QAAS,OACTC,cAAe,SACfC,IAAKH,EAAMI,QAAQ,QAGfC,EAAkBP,EAAOQ,EAAPR,EAAqB,EAAGE,YAAO,CACrDC,QAAS,OACTC,cAAe,SACfC,IAAKH,EAAMI,QAAQ,GACnBG,WAAYP,EAAMI,QAAQ,OAGfI,EAAgB,EAC3BC,QACAC,UACAC,QACAC,OAAO,SACPC,QACAC,WACAC,YACAC,SAAQ,EACRC,YAAW,EACXC,eAEA,MAAOC,EAAeC,GAAoBC,EAAmB,IAEvDC,EAAgBX,GAASQ,EAEzBI,EAAgBC,IACpB,MAAQC,KAAMC,EAAUC,QAAEA,GAAYH,EAAMI,OAEtCC,EAAWF,EACb,IAAIL,EAAeI,GACnBJ,EAAcQ,QAAQL,GAASA,IAASC,SAG9BK,IAAVpB,GACFS,EAAiBS,GAGfX,GACFA,EAASM,EAAOK,IAIdG,GAAWhB,KAAWD,EAE5B,OACEkB,EAACpC,EAAiB,CAAA,UAAUY,EAAKyB,SAAA,CAC/BD,EAACE,EAAG,CAAAD,SAAA,CACFE,EAACC,EAAY,CAAA,UAAU,GAAG5B,UAAeQ,SAAUA,EAAQiB,SACxDrB,IAGFC,GAAYsB,EAACE,EAAiB,CAAA,UAAU,GAAG7B,SAAYyB,SAAGpB,OAG5DkB,GACCC,EAACK,EAAiB,CAACC,OAAK,EAAAL,SAAA,CACtBE,EAACI,EAAgB,CAAA,GAEhBzB,KAILqB,EAAC/B,EAAe,CAAA,UAAU,GAAGI,eAAkByB,SAC5CxB,EAAQ+B,KAAKC,IACZ,MAAMC,EAAYrB,EAAcsB,SAASF,EAAOjB,MAEhD,OACEW,EAACS,EAAQ,CAEPlB,QAASgB,EACTG,SAAUJ,EAAOI,SACjBrC,MAAO,GAAGA,KAASiC,EAAOjB,OAC1BZ,MAAO6B,EAAO7B,MACdY,KAAMiB,EAAOjB,KACbP,SAAUK,EACVX,KAAMA,EACNI,MAAOA,GARF0B,EAAOjB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/CheckboxGroup/index.tsx"],"sourcesContent":["import { type ChangeEvent, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormControl from '@mui/material/FormControl';\nimport MuiFormGroup from '@mui/material/FormGroup';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiFormLabel from '@mui/material/FormLabel';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '@fd/components/atoms/Checkbox';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\n/**\n * Represents a checkbox option in the CheckboxGroup.\n * Supports hierarchical nesting through the `options` property.\n */\nexport interface CheckboxOption {\n  /** Unique identifier for the option. */\n  name: string;\n  /** Display label for the checkbox. */\n  label: string;\n  /** Whether the checkbox is disabled. */\n  disabled?: boolean;\n  /** Nested child options, creating a hierarchical structure. */\n  options?: CheckboxOption[];\n}\n\n/**\n * Props for the CheckboxGroup component.\n * Supports hierarchical checkbox groups with parent-child relationships.\n * Parent checkboxes automatically reflect the selection state of their children,\n * showing indeterminate state when some (but not all) children are selected.\n */\ninterface CheckboxGroupProps {\n  /** Unique identifier forwarded to the root element as `data-fd` for testing and identification. */\n  fdKey: string;\n  /** Array of checkbox options. Supports nested options for hierarchical structures. */\n  options: CheckboxOption[];\n  /** Label displayed above the checkbox group. */\n  label: string;\n  /**\n   * The selected values. When provided, the component is controlled.\n   * When omitted, the component is uncontrolled and manages its own state.\n   */\n  value?: string[];\n  /** Size of the checkboxes. */\n  size?: 'medium' | 'small';\n  /** Helper text displayed below the label. */\n  hintText?: string;\n  /** Error message displayed when validation fails. */\n  errorText?: string;\n  /** Whether the input is valid. When false and errorText is provided, error styling is applied. */\n  valid?: boolean;\n  /** Whether the field is required. Adds a required indicator to the label. */\n  required?: boolean;\n  /** Called when the selection changes. Receives the change event and the updated array of selected option names. */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;\n}\n\nconst StyledFormControl = styled(MuiFormControl)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n}));\n\nconst StyledFormGroup = styled(MuiFormGroup)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  overflow: 'visible',\n}));\n\nconst StyledChildrenContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingLeft: theme.spacing(5.75),\n  paddingTop: theme.spacing(2),\n  position: 'relative',\n  overflow: 'visible',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    left: theme.spacing(1.75),\n    top: theme.spacing(2),\n    bottom: 0,\n    width: '4px',\n    backgroundColor: theme.palette.semantic.stroke['stroke-weak'],\n    zIndex: 0,\n  },\n}));\n\n/**\n * A hierarchical checkbox group component that supports nested options and parent-child relationships.\n * When a parent option is selected, all enabled child options are automatically selected.\n * Parent checkboxes show an indeterminate state when some (but not all) children are selected.\n * Supports both controlled and uncontrolled modes.\n *\n * @param props - The component props\n * @returns The rendered CheckboxGroup component\n */\nexport const CheckboxGroup = ({\n  fdKey,\n  options,\n  value,\n  size = 'medium',\n  label,\n  hintText,\n  errorText,\n  valid = true,\n  required = false,\n  onChange,\n}: CheckboxGroupProps): JSX.Element => {\n  const [internalValue, setInternalValue] = useState<string[]>([]);\n\n  const resolvedValue = value ?? internalValue;\n\n  // Flatten all option names (including children) for easy lookup\n  const getAllOptionNames = (opts: CheckboxOption[]): string[] => {\n    const names: string[] = [];\n    opts.forEach((opt) => {\n      names.push(opt.name);\n      if (opt.options) {\n        names.push(...getAllOptionNames(opt.options));\n      }\n    });\n    return names;\n  };\n\n  // Get all child option names for a given option (including disabled)\n  const getChildOptionNames = (option: CheckboxOption): string[] => {\n    if (!option.options) return [];\n    return getAllOptionNames(option.options);\n  };\n\n  // Helper to find an option by name in the hierarchy\n  const findOption = (opts: CheckboxOption[], targetName: string): CheckboxOption | undefined => {\n    for (const opt of opts) {\n      if (opt.name === targetName) return opt;\n      if (opt.options) {\n        const found = findOption(opt.options, targetName);\n        if (found) return found;\n      }\n    }\n    return undefined;\n  };\n\n  // Get all enabled child names for a given option\n  const getEnabledChildNames = (option: CheckboxOption): string[] => {\n    if (!option.options) return [];\n    return getAllOptionNames(option.options).filter((childName) => {\n      const childOption = findOption(option.options || [], childName);\n      return !childOption?.disabled;\n    });\n  };\n\n  // Check if all enabled children of an option are selected\n  const areAllChildrenSelected = (option: CheckboxOption): boolean => {\n    const enabledChildNames = getEnabledChildNames(option);\n    if (enabledChildNames.length === 0) return false;\n    return enabledChildNames.every((name) => resolvedValue.includes(name));\n  };\n\n  // Check if some (but not all) enabled children of an option are selected\n  const areSomeChildrenSelected = (option: CheckboxOption): boolean => {\n    const enabledChildNames = getEnabledChildNames(option);\n    if (enabledChildNames.length === 0) return false;\n    const selectedCount = enabledChildNames.filter((name) => resolvedValue.includes(name)).length;\n    return selectedCount > 0 && selectedCount < enabledChildNames.length;\n  };\n\n  // Calculate checkbox state for an option\n  const getCheckboxState = (option: CheckboxOption): { checked: boolean; indeterminate: boolean } => {\n    const hasChildren = option.options && option.options.length > 0;\n    const isDirectlySelected = resolvedValue.includes(option.name);\n\n    if (!hasChildren) {\n      return { checked: isDirectlySelected, indeterminate: false };\n    }\n\n    const allSelected = areAllChildrenSelected(option);\n    const someSelected = areSomeChildrenSelected(option);\n\n    return {\n      checked: allSelected,\n      indeterminate: someSelected && !allSelected,\n    };\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const { name: optionName } = event.target;\n    const clickedOption = findOption(options, optionName);\n    if (!clickedOption) return;\n\n    let newValue: string[];\n\n    // If option has children, toggle all children based on current state\n    if (clickedOption.options && clickedOption.options.length > 0) {\n      const allChildrenSelected = areAllChildrenSelected(clickedOption);\n\n      if (allChildrenSelected) {\n        // All children are selected - deselect all children\n        const childNames = getChildOptionNames(clickedOption);\n        newValue = resolvedValue.filter((name) => !childNames.includes(name));\n      } else {\n        // Not all children are selected - select all enabled children\n        const enabledChildNames = getEnabledChildNames(clickedOption);\n        // Add all enabled children that aren't already selected\n        newValue = [...new Set([...resolvedValue, ...enabledChildNames])];\n      }\n      // Ensure parent names are not persisted in the value for hierarchical options\n      newValue = newValue.filter((name) => name !== clickedOption.name);\n    } else {\n      // Regular checkbox toggle - use event.checked for leaf nodes\n      const { checked } = event.target;\n      newValue = checked\n        ? [...resolvedValue, optionName]\n        : resolvedValue.filter((name) => name !== optionName);\n    }\n\n    // If value is undefined, we're in uncontrolled mode - update internal state\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n\n    if (onChange) {\n      onChange(event, newValue);\n    }\n  };\n\n  // Render checkbox options recursively\n  const renderOptions = (opts: CheckboxOption[]): JSX.Element[] => {\n    return opts.map((option) => {\n      const { checked, indeterminate } = getCheckboxState(option);\n      const hasOptions = option.options && option.options.length > 0;\n\n      return (\n        <Box key={option.name}>\n          <Checkbox\n            checked={checked}\n            disabled={option.disabled}\n            fdKey={`${fdKey}-${option.name}`}\n            indeterminate={indeterminate}\n            label={option.label}\n            name={option.name}\n            onChange={handleChange}\n            size={size}\n            valid={valid}\n          />\n          {hasOptions && (\n            <StyledChildrenContainer>{renderOptions(option.options ?? [])}</StyledChildrenContainer>\n          )}\n        </Box>\n      );\n    });\n  };\n\n  const isError = !valid && !!errorText;\n\n  return (\n    <StyledFormControl data-fd={fdKey}>\n      <Box>\n        <MuiFormLabel data-fd={`${fdKey}-label`} required={required}>\n          {label}\n        </MuiFormLabel>\n\n        {hintText && <MuiFormHelperText data-fd={`${fdKey}-hint`}>{hintText}</MuiFormHelperText>}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledFormGroup data-fd={`${fdKey}-checkboxes`}>{renderOptions(options)}</StyledFormGroup>\n    </StyledFormControl>\n  );\n};\n\nexport default CheckboxGroup;\n"],"names":["StyledFormControl","styled","MuiFormControl","theme","display","flexDirection","gap","spacing","StyledFormGroup","MuiFormGroup","paddingTop","overflow","StyledChildrenContainer","Box","paddingLeft","position","content","left","top","bottom","width","backgroundColor","palette","semantic","stroke","zIndex","CheckboxGroup","fdKey","options","value","size","label","hintText","errorText","valid","required","onChange","internalValue","setInternalValue","useState","resolvedValue","getAllOptionNames","opts","names","forEach","opt","push","name","findOption","targetName","found","getEnabledChildNames","option","filter","childName","childOption","disabled","areAllChildrenSelected","enabledChildNames","length","every","includes","getCheckboxState","hasChildren","isDirectlySelected","checked","indeterminate","allSelected","someSelected","selectedCount","areSomeChildrenSelected","handleChange","event","optionName","target","clickedOption","newValue","childNames","Set","undefined","renderOptions","map","hasOptions","_jsxs","children","_jsx","Checkbox","isError","MuiFormLabel","MuiFormHelperText","error","CancelCircleIcon"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/ListSubheader"),r=require("@mui/material/styles"),a=require("../../atoms/Avatar/index.cjs.js"),o=require("@mui/material/Box"),n=require("../../atoms/Button/index.cjs.js"),s=require("@mui/material/Divider"),l=require("../../atoms/IconButton/index.cjs.js"),c=require("@mui/material/ListItemText"),d=require("../../atoms/MenuItem/index.cjs.js"),u=require("@mui/material/Menu"),m=require("../../../icons/ArrowDown01/index.cjs.js"),p=require("../../../icons/ArrowUp01/index.cjs.js"),x=require("../../../icons/MoreVertical/index.cjs.js");const h=r.styled(n.Button)((({theme:e,size:t,disabled:i})=>({height:"small"===t?48:64,padding:e.spacing(1,2),textDecoration:"none","& .MuiButton-icon":{color:i?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]},"&:focus-visible, &.Mui-focusVisible":{backgroundColor:e.palette.semantic.fill["fill-weak"]}}))),b=r.styled(i)((({theme:e})=>({borderBottom:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,padding:e.spacing(1,2)})));b.muiName=i.muiName,b.muiSkipListHighlight=i.muiSkipListHighlight??!0;const g=r.styled(o,{shouldForwardProp:e=>!["disabled","size"].includes(e)})((({theme:e,disabled:t,size:i})=>({display:"flex",gap:"small"===i?e.spacing(1):e.spacing(1.5),alignItems:"center",textAlign:"left",...t&&{"& .MuiAvatar-root":{opacity:e.palette.action.disabledOpacity}," & .MuiListItemText-root, & .MuiListItemText-primary, & .MuiListItemText-secondary":{color:e.palette.semantic.text["text-disabled"]}}}))),j=({align:r="bottom-left",ariaLabel:o="",avatarSrc:j="",disabled:y=!1,fdKey:f,label:v,options:k=[],optionsType:z="text",secondaryText:M,size:q="medium",type:T="button",...C})=>{const[I,$]=t.useState(null),L=Boolean(I),O=`${f}-trigger`,w=`${f}-menu`,B=e=>{y||$(e.currentTarget)},A=()=>{$(null)},P=e=>t=>{e?.(t),A()},S=t=>e.jsxs(g,{disabled:y,size:t,children:[e.jsx(a,{"aria-hidden":!0,alt:"",size:t,src:j,type:"logo"}),e.jsx(c,{primary:v,secondary:M})]}),D=(t,i="text",r="root")=>{switch(i){case"checkboxes":return((t,i)=>t.map(((t,r)=>e.jsx(d.MenuItem,{checked:t.checked,disabled:t.disabled,label:t.label,onCheckedChange:t.onCheckedChange,secondaryText:t.secondaryText,type:"checkbox"},t.id??`${i}-checkbox-${r}`))))(t,r);case"icons":return((t,i)=>t.map(((t,r)=>e.jsx(d.MenuItem,{disabled:t.disabled,icon:t.icon,label:t.label,onClick:P(t.onClick),secondaryText:t.secondaryText,type:"icon"},t.id??`${i}-icon-${r}`))))(t,r);default:return((t,i)=>t.map(((t,r)=>e.jsx(d.MenuItem,{disabled:t.disabled,label:t.label,onClick:P(t.onClick),secondaryText:t.secondaryText,type:"text"},t.id??`${i}-text-${r}`))))(t,r)}},K=t.useMemo((()=>{return k&&0!==k.length?"groups"===z?(t=k).flatMap(((r,a)=>{const o=r.id??`group-${a}`;return[r.groupLabel?e.jsx(i,{children:r.groupLabel},`subheader-${o}`):null,...D(r.options,r.optionsType,o),a<t.length-1?e.jsx(s,{},`divider-${o}`):null]})):D(k,z):null;var t}),[k,z]),F=((e="bottom-left")=>{switch(e){case"bottom-left":default:return{anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"}};case"bottom-right":return{anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"}};case"top-left":return{anchorOrigin:{vertical:"top",horizontal:"left"},transformOrigin:{vertical:"bottom",horizontal:"left"}};case"top-right":return{anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"bottom",horizontal:"right"}}}})(r);return e.jsxs(e.Fragment,{children:["icon-button"===T?e.jsx(l.IconButton,{"aria-controls":L?w:void 0,"aria-expanded":L,"aria-haspopup":"menu","aria-label":o,disabled:y,fdKey:f,id:O,onClick:B,size:q,variant:"secondary",children:e.jsx(x,{})}):"avatar"===T?e.jsx(h,{"aria-controls":L?w:void 0,"aria-expanded":L,"aria-haspopup":"menu",disabled:y,endIcon:L?e.jsx(p,{}):e.jsx(m,{}),fdKey:f,id:O,onClick:B,size:q,variant:"tertiary",children:S(q)}):e.jsx(n.Button,{"aria-controls":L?w:void 0,"aria-expanded":L,"aria-haspopup":"menu",disabled:y,endIcon:L?e.jsx(p,{}):e.jsx(m,{}),fdKey:f,id:O,onClick:B,size:q,variant:"secondary",children:v}),e.jsxs(u,{...C,...F,anchorEl:I,onClose:A,open:L,slotProps:{...C.slotProps,list:{...C.slotProps?.list??{},id:w,"aria-labelledby":O}},children:["avatar"===T&&e.jsx(b,{children:S("medium")}),K]})]})};exports.DropdownMenu=j,exports.default=j;
+//# sourceMappingURL=index.cjs.js.map