@flipdish/portal-library 8.0.2 → 8.0.3

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/IconButton"),a=require("@mui/material/styles"),s=require("../BadgeCount/index.cjs.js"),n=require("../BadgeDot/index.cjs.js"),r=require("@mui/material/Box"),o=require("./getIconButtonStyles.cjs.js");const d=a.styled(i,{shouldForwardProp:e=>!["variant","tone","badgeDot","badgeCount","fdKey"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const a=o(e,t,i),s="inverse"===i?e.palette.semantic.stroke["stroke-inverse-strong"]:e.palette.semantic.stroke["stroke-focus"];return{...a.default,overflow:"visible","&.Mui-disabled":{...a.disabled,overflow:"visible"},"&.Mui-focusVisible":{outlineColor:s}}})),l=a.styled(r,{shouldForwardProp:e=>!["variant","tone"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const a=o(e,t,i);return{alignItems:"center",borderRadius:"inherit",display:"flex",height:"100%",justifyContent:"center",overflow:"hidden",pointerEvents:"none",width:"100%","[data-variant]:hover:not(.Mui-disabled) > &":a.hover,"[data-variant]:active:not(.Mui-disabled) > &":a.press}})),u=a.styled(s,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),c=a.styled(n,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),p=t.forwardRef((({badgeCount:t,badgeDot:i=!1,children:a,className:s,disabled:n=!1,fdKey:r,onClick:o,size:p="medium",tone:m="brand",variant:b="primary",...v},g)=>e.jsxs(d,{ref:g,disableRipple:!0,className:s,"data-fd":r,"data-tone":m,"data-variant":b,disabled:n,onClick:o,size:p,tone:m,variant:b,...v,children:[e.jsx(l,{tone:m,variant:b,children:a}),!!t&&e.jsx(u,{"data-testid":"icon-button-badge-count",size:p,children:t}),i&&!t&&e.jsx(c,{"data-testid":"icon-button-badge-dot",size:p})]})));p.displayName="IconButton",exports.IconButton=p,exports.default=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/IconButton"),a=require("@mui/material/styles"),n=require("../BadgeCount/index.cjs.js"),s=require("../BadgeDot/index.cjs.js"),r=require("@mui/material/Box"),o=require("./getIconButtonStyles.cjs.js");const d=a.styled(i,{shouldForwardProp:e=>!["variant","tone","badgeDot","badgeCount","fdKey"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const a=o(e,t,i),n="inverse"===i?e.palette.semantic.stroke["stroke-inverse-strong"]:e.palette.semantic.stroke["stroke-focus"];return{...a.default,overflow:"visible","&.Mui-disabled":{...a.disabled,overflow:"visible"},"&.Mui-focusVisible":{outlineColor:n}}})),l=a.styled(r,{shouldForwardProp:e=>!["variant","tone"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const a=o(e,t,i);return{alignItems:"center",borderRadius:"inherit",display:"flex",height:"100%",justifyContent:"center",overflow:"hidden",pointerEvents:"none",width:"100%","[data-variant]:hover:not(.Mui-disabled) > &":a.hover,"[data-variant]:active:not(.Mui-disabled) > &":a.press}})),u=a.styled(n.BadgeCount,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),c=a.styled(s.BadgeDot,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),p=t.forwardRef((({badgeCount:t,badgeDot:i=!1,children:a,className:n,disabled:s=!1,fdKey:r,onClick:o,size:p="medium",tone:m="brand",variant:b="primary",...v},g)=>e.jsxs(d,{ref:g,disableRipple:!0,className:n,"data-fd":r,"data-tone":m,"data-variant":b,disabled:s,onClick:o,size:p,tone:m,variant:b,...v,children:[e.jsx(l,{tone:m,variant:b,children:a}),!!t&&e.jsx(u,{fdKey:"icon-button-badge-count",size:p,children:t}),i&&!t&&e.jsx(c,{fdKey:"icon-button-badge-dot",size:p})]})));p.displayName="IconButton",exports.IconButton=p,exports.default=p;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconButton/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport MuiIconButton, { type IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';\nimport { styled } from '@mui/material/styles';\n\nimport BadgeCount from '../BadgeCount';\nimport BadgeDot from '../BadgeDot';\nimport Box from '../Box';\nimport getIconButtonStyles, { type IconButtonTone, type IconButtonVariant } from './getIconButtonStyles';\n\n/**\n * Custom IconButton atom for Flipdish design system.\n * - icon: The icon to display (required, use local icon library)\n * - badgeDot: Show a small dot badge (optional)\n * - badgeCount: Show a count badge (optional)\n * - variant: Visual style (primary | secondary | tertiary)\n * - tone: Visual tone (brand | destructive | inverse | neutral)\n * - state: Visual state (default | disabled | focus | hover | press)\n * - aria-label: Accessibility label\n * - fdKey: Data attribute for testing/analytics\n * - ...rest: All other props are passed to MuiIconButton\n */\nexport interface IconButtonProps extends Omit<MuiIconButtonProps, 'color'> {\n  'aria-label': string;\n  badgeCount?: number;\n  badgeDot?: boolean;\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  fdKey?: string;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  size?: 'medium' | 'small';\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n}\n\nconst StyledIconButton = styled(MuiIconButton, {\n  shouldForwardProp: (prop) =>\n    !['variant', 'tone', 'badgeDot', 'badgeCount', 'fdKey'].includes(prop as string),\n})<{\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n  iconColor?: string;\n}>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n  const focusColor =\n    tone === 'inverse'\n      ? theme.palette.semantic.stroke['stroke-inverse-strong']\n      : theme.palette.semantic.stroke['stroke-focus'];\n\n  return {\n    ...styles.default,\n    overflow: 'visible', // Allow badges to overflow\n    '&.Mui-disabled': { ...styles.disabled, overflow: 'visible' },\n    '&.Mui-focusVisible': {\n      outlineColor: focusColor,\n    },\n  };\n});\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['variant', 'tone'].includes(prop as string),\n})<{ variant: IconButtonVariant; tone: IconButtonTone }>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n\n  return {\n    alignItems: 'center',\n    borderRadius: 'inherit',\n    display: 'flex',\n    height: '100%',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    width: '100%',\n    '[data-variant]:hover:not(.Mui-disabled) > &': styles.hover,\n    '[data-variant]:active:not(.Mui-disabled) > &': styles.press,\n  };\n});\n\nconst StyledBadgeCount = styled(BadgeCount, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nconst StyledBadgeDot = styled(BadgeDot, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      badgeCount,\n      badgeDot = false,\n      children,\n      className,\n      disabled = false,\n      fdKey,\n      onClick,\n      size = 'medium',\n      tone = 'brand',\n      variant = 'primary',\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <StyledIconButton\n        ref={ref}\n        disableRipple\n        className={className}\n        data-fd={fdKey}\n        data-tone={tone}\n        data-variant={variant}\n        disabled={disabled}\n        onClick={onClick}\n        size={size}\n        tone={tone}\n        variant={variant}\n        {...rest}\n      >\n        <StyledBox tone={tone} variant={variant}>\n          {children}\n        </StyledBox>\n        {!!badgeCount && (\n          <StyledBadgeCount data-testid=\"icon-button-badge-count\" size={size}>\n            {badgeCount}\n          </StyledBadgeCount>\n        )}\n\n        {badgeDot && !badgeCount && <StyledBadgeDot data-testid=\"icon-button-badge-dot\" size={size} />}\n      </StyledIconButton>\n    );\n  },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["StyledIconButton","styled","MuiIconButton","shouldForwardProp","prop","includes","theme","variant","tone","styles","getIconButtonStyles","focusColor","palette","semantic","stroke","default","overflow","disabled","outlineColor","StyledBox","Box","alignItems","borderRadius","display","height","justifyContent","pointerEvents","width","hover","press","StyledBadgeCount","BadgeCount","size","position","bottom","spacing","left","zIndex","StyledBadgeDot","BadgeDot","IconButton","forwardRef","badgeCount","badgeDot","children","className","fdKey","onClick","rest","ref","_jsxs","disableRipple","_jsx","displayName"],"mappings":"yVAoCA,MAAMA,EAAmBC,EAAAA,OAAOC,EAAe,CAC7CC,kBAAoBC,IACjB,CAAC,UAAW,OAAQ,WAAY,aAAc,SAASC,SAASD,IAF5CH,EAOtB,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YACvC,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAC7CG,EACK,YAATH,EACIF,EAAMM,QAAQC,SAASC,OAAO,yBAC9BR,EAAMM,QAAQC,SAASC,OAAO,gBAEpC,MAAO,IACFL,EAAOM,QACVC,SAAU,UACV,iBAAkB,IAAKP,EAAOQ,SAAUD,SAAU,WAClD,qBAAsB,CACpBE,aAAcP,OAKdQ,EAAYlB,EAAAA,OAAOmB,EAAK,CAC5BjB,kBAAoBC,IAAU,CAAC,UAAW,QAAQC,SAASD,IAD3CH,EAEuC,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YAC7F,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAEnD,MAAO,CACLa,WAAY,SACZC,aAAc,UACdC,QAAS,OACTC,OAAQ,OACRC,eAAgB,SAChBT,SAAU,SACVU,cAAe,OACfC,MAAO,OACP,8CAA+ClB,EAAOmB,MACtD,+CAAgDnB,EAAOoB,UAIrDC,EAAmB7B,EAAAA,OAAO8B,EAAY,CAC1C5B,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IADzBH,EAEQ,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGXY,EAAiBrC,EAAAA,OAAOsC,EAAU,CACtCpC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD3BH,EAEU,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGJc,EAAaC,EAAAA,YACxB,EAEIC,aACAC,YAAW,EACXC,WACAC,YACA5B,YAAW,EACX6B,QACAC,UACAf,OAAO,SACPxB,OAAO,QACPD,UAAU,aACPyC,GAELC,IAGEC,EAAAA,KAAClD,GACCiD,IAAKA,EACLE,iBACAN,UAAWA,EAAS,UACXC,cACEtC,EAAI,eACDD,EACdU,SAAUA,EACV8B,QAASA,EACTf,KAAMA,EACNxB,KAAMA,EACND,QAASA,KACLyC,EAAIJ,SAAA,CAERQ,EAAAA,IAACjC,EAAS,CAACX,KAAMA,EAAMD,QAASA,EAAOqC,SACpCA,MAEAF,GACDU,EAAAA,IAACtB,EAAgB,CAAA,cAAa,0BAA0BE,KAAMA,EAAIY,SAC/DF,IAIJC,IAAaD,GAAcU,EAAAA,IAACd,EAAc,CAAA,cAAa,wBAAwBN,KAAMA,SAM9FQ,EAAWa,YAAc"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconButton/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport MuiIconButton, { type IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';\nimport { styled } from '@mui/material/styles';\n\nimport BadgeCount from '../BadgeCount';\nimport BadgeDot from '../BadgeDot';\nimport Box from '../Box';\nimport getIconButtonStyles, { type IconButtonTone, type IconButtonVariant } from './getIconButtonStyles';\n\n/**\n * Custom IconButton atom for Flipdish design system.\n * - icon: The icon to display (required, use local icon library)\n * - badgeDot: Show a small dot badge (optional)\n * - badgeCount: Show a count badge (optional)\n * - variant: Visual style (primary | secondary | tertiary)\n * - tone: Visual tone (brand | destructive | inverse | neutral)\n * - state: Visual state (default | disabled | focus | hover | press)\n * - aria-label: Accessibility label\n * - fdKey: Data attribute for testing/analytics\n * - ...rest: All other props are passed to MuiIconButton\n */\nexport interface IconButtonProps extends Omit<MuiIconButtonProps, 'color'> {\n  'aria-label': string;\n  badgeCount?: number;\n  badgeDot?: boolean;\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  fdKey?: string;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  size?: 'medium' | 'small';\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n}\n\nconst StyledIconButton = styled(MuiIconButton, {\n  shouldForwardProp: (prop) =>\n    !['variant', 'tone', 'badgeDot', 'badgeCount', 'fdKey'].includes(prop as string),\n})<{\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n  iconColor?: string;\n}>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n  const focusColor =\n    tone === 'inverse'\n      ? theme.palette.semantic.stroke['stroke-inverse-strong']\n      : theme.palette.semantic.stroke['stroke-focus'];\n\n  return {\n    ...styles.default,\n    overflow: 'visible', // Allow badges to overflow\n    '&.Mui-disabled': { ...styles.disabled, overflow: 'visible' },\n    '&.Mui-focusVisible': {\n      outlineColor: focusColor,\n    },\n  };\n});\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['variant', 'tone'].includes(prop as string),\n})<{ variant: IconButtonVariant; tone: IconButtonTone }>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n\n  return {\n    alignItems: 'center',\n    borderRadius: 'inherit',\n    display: 'flex',\n    height: '100%',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    width: '100%',\n    '[data-variant]:hover:not(.Mui-disabled) > &': styles.hover,\n    '[data-variant]:active:not(.Mui-disabled) > &': styles.press,\n  };\n});\n\nconst StyledBadgeCount = styled(BadgeCount, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nconst StyledBadgeDot = styled(BadgeDot, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      badgeCount,\n      badgeDot = false,\n      children,\n      className,\n      disabled = false,\n      fdKey,\n      onClick,\n      size = 'medium',\n      tone = 'brand',\n      variant = 'primary',\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <StyledIconButton\n        ref={ref}\n        disableRipple\n        className={className}\n        data-fd={fdKey}\n        data-tone={tone}\n        data-variant={variant}\n        disabled={disabled}\n        onClick={onClick}\n        size={size}\n        tone={tone}\n        variant={variant}\n        {...rest}\n      >\n        <StyledBox tone={tone} variant={variant}>\n          {children}\n        </StyledBox>\n        {!!badgeCount && (\n          <StyledBadgeCount fdKey=\"icon-button-badge-count\" size={size}>\n            {badgeCount}\n          </StyledBadgeCount>\n        )}\n\n        {badgeDot && !badgeCount && <StyledBadgeDot fdKey=\"icon-button-badge-dot\" size={size} />}\n      </StyledIconButton>\n    );\n  },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["StyledIconButton","styled","MuiIconButton","shouldForwardProp","prop","includes","theme","variant","tone","styles","getIconButtonStyles","focusColor","palette","semantic","stroke","default","overflow","disabled","outlineColor","StyledBox","Box","alignItems","borderRadius","display","height","justifyContent","pointerEvents","width","hover","press","StyledBadgeCount","BadgeCount","size","position","bottom","spacing","left","zIndex","StyledBadgeDot","BadgeDot","IconButton","forwardRef","badgeCount","badgeDot","children","className","fdKey","onClick","rest","ref","_jsxs","disableRipple","_jsx","displayName"],"mappings":"yVAoCA,MAAMA,EAAmBC,EAAAA,OAAOC,EAAe,CAC7CC,kBAAoBC,IACjB,CAAC,UAAW,OAAQ,WAAY,aAAc,SAASC,SAASD,IAF5CH,EAOtB,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YACvC,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAC7CG,EACK,YAATH,EACIF,EAAMM,QAAQC,SAASC,OAAO,yBAC9BR,EAAMM,QAAQC,SAASC,OAAO,gBAEpC,MAAO,IACFL,EAAOM,QACVC,SAAU,UACV,iBAAkB,IAAKP,EAAOQ,SAAUD,SAAU,WAClD,qBAAsB,CACpBE,aAAcP,OAKdQ,EAAYlB,EAAAA,OAAOmB,EAAK,CAC5BjB,kBAAoBC,IAAU,CAAC,UAAW,QAAQC,SAASD,IAD3CH,EAEuC,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YAC7F,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAEnD,MAAO,CACLa,WAAY,SACZC,aAAc,UACdC,QAAS,OACTC,OAAQ,OACRC,eAAgB,SAChBT,SAAU,SACVU,cAAe,OACfC,MAAO,OACP,8CAA+ClB,EAAOmB,MACtD,+CAAgDnB,EAAOoB,UAIrDC,EAAmB7B,EAAAA,OAAO8B,aAAY,CAC1C5B,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IADzBH,EAEQ,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGXY,EAAiBrC,EAAAA,OAAOsC,WAAU,CACtCpC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD3BH,EAEU,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGJc,EAAaC,EAAAA,YACxB,EAEIC,aACAC,YAAW,EACXC,WACAC,YACA5B,YAAW,EACX6B,QACAC,UACAf,OAAO,SACPxB,OAAO,QACPD,UAAU,aACPyC,GAELC,IAGEC,EAAAA,KAAClD,EAAgB,CACfiD,IAAKA,EACLE,eAAa,EACbN,UAAWA,YACFC,EAAK,YACHtC,EAAI,eACDD,EACdU,SAAUA,EACV8B,QAASA,EACTf,KAAMA,EACNxB,KAAMA,EACND,QAASA,KACLyC,EAAIJ,SAAA,CAERQ,EAAAA,IAACjC,EAAS,CAACX,KAAMA,EAAMD,QAASA,EAAOqC,SACpCA,MAEAF,GACDU,EAAAA,IAACtB,EAAgB,CAACgB,MAAM,0BAA0Bd,KAAMA,WACrDU,IAIJC,IAAaD,GAAcU,EAAAA,IAACd,GAAeQ,MAAM,wBAAwBd,KAAMA,SAMxFQ,EAAWa,YAAc"}

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as i}from"react";import o from"@mui/material/IconButton";import{styled as a}from"@mui/material/styles";import n from"../BadgeCount/index.js";import r from"../BadgeDot/index.js";import s from"@mui/material/Box";import d from"./getIconButtonStyles.js";const l=a(o,{shouldForwardProp:e=>!["variant","tone","badgeDot","badgeCount","fdKey"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const o=d(e,t,i),a="inverse"===i?e.palette.semantic.stroke["stroke-inverse-strong"]:e.palette.semantic.stroke["stroke-focus"];return{...o.default,overflow:"visible","&.Mui-disabled":{...o.disabled,overflow:"visible"},"&.Mui-focusVisible":{outlineColor:a}}})),m=a(s,{shouldForwardProp:e=>!["variant","tone"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const o=d(e,t,i);return{alignItems:"center",borderRadius:"inherit",display:"flex",height:"100%",justifyContent:"center",overflow:"hidden",pointerEvents:"none",width:"100%","[data-variant]:hover:not(.Mui-disabled) > &":o.hover,"[data-variant]:active:not(.Mui-disabled) > &":o.press}})),c=a(n,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),u=a(r,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),p=i((({badgeCount:i,badgeDot:o=!1,children:a,className:n,disabled:r=!1,fdKey:s,onClick:d,size:p="medium",tone:b="brand",variant:f="primary",...v},g)=>e(l,{ref:g,disableRipple:!0,className:n,"data-fd":s,"data-tone":b,"data-variant":f,disabled:r,onClick:d,size:p,tone:b,variant:f,...v,children:[t(m,{tone:b,variant:f,children:a}),!!i&&t(c,{"data-testid":"icon-button-badge-count",size:p,children:i}),o&&!i&&t(u,{"data-testid":"icon-button-badge-dot",size:p})]})));p.displayName="IconButton";export{p as IconButton,p as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as i}from"react";import o from"@mui/material/IconButton";import{styled as a}from"@mui/material/styles";import{BadgeCount as n}from"../BadgeCount/index.js";import{BadgeDot as r}from"../BadgeDot/index.js";import s from"@mui/material/Box";import d from"./getIconButtonStyles.js";const l=a(o,{shouldForwardProp:e=>!["variant","tone","badgeDot","badgeCount","fdKey"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const o=d(e,t,i),a="inverse"===i?e.palette.semantic.stroke["stroke-inverse-strong"]:e.palette.semantic.stroke["stroke-focus"];return{...o.default,overflow:"visible","&.Mui-disabled":{...o.disabled,overflow:"visible"},"&.Mui-focusVisible":{outlineColor:a}}})),m=a(s,{shouldForwardProp:e=>!["variant","tone"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const o=d(e,t,i);return{alignItems:"center",borderRadius:"inherit",display:"flex",height:"100%",justifyContent:"center",overflow:"hidden",pointerEvents:"none",width:"100%","[data-variant]:hover:not(.Mui-disabled) > &":o.hover,"[data-variant]:active:not(.Mui-disabled) > &":o.press}})),c=a(n,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),u=a(r,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),p=i((({badgeCount:i,badgeDot:o=!1,children:a,className:n,disabled:r=!1,fdKey:s,onClick:d,size:p="medium",tone:b="brand",variant:f="primary",...v},g)=>e(l,{ref:g,disableRipple:!0,className:n,"data-fd":s,"data-tone":b,"data-variant":f,disabled:r,onClick:d,size:p,tone:b,variant:f,...v,children:[t(m,{tone:b,variant:f,children:a}),!!i&&t(c,{fdKey:"icon-button-badge-count",size:p,children:i}),o&&!i&&t(u,{fdKey:"icon-button-badge-dot",size:p})]})));p.displayName="IconButton";export{p as IconButton,p as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconButton/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport MuiIconButton, { type IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';\nimport { styled } from '@mui/material/styles';\n\nimport BadgeCount from '../BadgeCount';\nimport BadgeDot from '../BadgeDot';\nimport Box from '../Box';\nimport getIconButtonStyles, { type IconButtonTone, type IconButtonVariant } from './getIconButtonStyles';\n\n/**\n * Custom IconButton atom for Flipdish design system.\n * - icon: The icon to display (required, use local icon library)\n * - badgeDot: Show a small dot badge (optional)\n * - badgeCount: Show a count badge (optional)\n * - variant: Visual style (primary | secondary | tertiary)\n * - tone: Visual tone (brand | destructive | inverse | neutral)\n * - state: Visual state (default | disabled | focus | hover | press)\n * - aria-label: Accessibility label\n * - fdKey: Data attribute for testing/analytics\n * - ...rest: All other props are passed to MuiIconButton\n */\nexport interface IconButtonProps extends Omit<MuiIconButtonProps, 'color'> {\n  'aria-label': string;\n  badgeCount?: number;\n  badgeDot?: boolean;\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  fdKey?: string;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  size?: 'medium' | 'small';\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n}\n\nconst StyledIconButton = styled(MuiIconButton, {\n  shouldForwardProp: (prop) =>\n    !['variant', 'tone', 'badgeDot', 'badgeCount', 'fdKey'].includes(prop as string),\n})<{\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n  iconColor?: string;\n}>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n  const focusColor =\n    tone === 'inverse'\n      ? theme.palette.semantic.stroke['stroke-inverse-strong']\n      : theme.palette.semantic.stroke['stroke-focus'];\n\n  return {\n    ...styles.default,\n    overflow: 'visible', // Allow badges to overflow\n    '&.Mui-disabled': { ...styles.disabled, overflow: 'visible' },\n    '&.Mui-focusVisible': {\n      outlineColor: focusColor,\n    },\n  };\n});\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['variant', 'tone'].includes(prop as string),\n})<{ variant: IconButtonVariant; tone: IconButtonTone }>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n\n  return {\n    alignItems: 'center',\n    borderRadius: 'inherit',\n    display: 'flex',\n    height: '100%',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    width: '100%',\n    '[data-variant]:hover:not(.Mui-disabled) > &': styles.hover,\n    '[data-variant]:active:not(.Mui-disabled) > &': styles.press,\n  };\n});\n\nconst StyledBadgeCount = styled(BadgeCount, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nconst StyledBadgeDot = styled(BadgeDot, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      badgeCount,\n      badgeDot = false,\n      children,\n      className,\n      disabled = false,\n      fdKey,\n      onClick,\n      size = 'medium',\n      tone = 'brand',\n      variant = 'primary',\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <StyledIconButton\n        ref={ref}\n        disableRipple\n        className={className}\n        data-fd={fdKey}\n        data-tone={tone}\n        data-variant={variant}\n        disabled={disabled}\n        onClick={onClick}\n        size={size}\n        tone={tone}\n        variant={variant}\n        {...rest}\n      >\n        <StyledBox tone={tone} variant={variant}>\n          {children}\n        </StyledBox>\n        {!!badgeCount && (\n          <StyledBadgeCount data-testid=\"icon-button-badge-count\" size={size}>\n            {badgeCount}\n          </StyledBadgeCount>\n        )}\n\n        {badgeDot && !badgeCount && <StyledBadgeDot data-testid=\"icon-button-badge-dot\" size={size} />}\n      </StyledIconButton>\n    );\n  },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["StyledIconButton","styled","MuiIconButton","shouldForwardProp","prop","includes","theme","variant","tone","styles","getIconButtonStyles","focusColor","palette","semantic","stroke","default","overflow","disabled","outlineColor","StyledBox","Box","alignItems","borderRadius","display","height","justifyContent","pointerEvents","width","hover","press","StyledBadgeCount","BadgeCount","size","position","bottom","spacing","left","zIndex","StyledBadgeDot","BadgeDot","IconButton","forwardRef","badgeCount","badgeDot","children","className","fdKey","onClick","rest","ref","_jsxs","disableRipple","_jsx","displayName"],"mappings":"8TAoCA,MAAMA,EAAmBC,EAAOC,EAAe,CAC7CC,kBAAoBC,IACjB,CAAC,UAAW,OAAQ,WAAY,aAAc,SAASC,SAASD,IAF5CH,EAOtB,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YACvC,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAC7CG,EACK,YAATH,EACIF,EAAMM,QAAQC,SAASC,OAAO,yBAC9BR,EAAMM,QAAQC,SAASC,OAAO,gBAEpC,MAAO,IACFL,EAAOM,QACVC,SAAU,UACV,iBAAkB,IAAKP,EAAOQ,SAAUD,SAAU,WAClD,qBAAsB,CACpBE,aAAcP,OAKdQ,EAAYlB,EAAOmB,EAAK,CAC5BjB,kBAAoBC,IAAU,CAAC,UAAW,QAAQC,SAASD,IAD3CH,EAEuC,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YAC7F,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAEnD,MAAO,CACLa,WAAY,SACZC,aAAc,UACdC,QAAS,OACTC,OAAQ,OACRC,eAAgB,SAChBT,SAAU,SACVU,cAAe,OACfC,MAAO,OACP,8CAA+ClB,EAAOmB,MACtD,+CAAgDnB,EAAOoB,UAIrDC,EAAmB7B,EAAO8B,EAAY,CAC1C5B,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IADzBH,EAEQ,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGXY,EAAiBrC,EAAOsC,EAAU,CACtCpC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD3BH,EAEU,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGJc,EAAaC,GACxB,EAEIC,aACAC,YAAW,EACXC,WACAC,YACA5B,YAAW,EACX6B,QACAC,UACAf,OAAO,SACPxB,OAAO,QACPD,UAAU,aACPyC,GAELC,IAGEC,EAAClD,GACCiD,IAAKA,EACLE,iBACAN,UAAWA,EAAS,UACXC,cACEtC,EAAI,eACDD,EACdU,SAAUA,EACV8B,QAASA,EACTf,KAAMA,EACNxB,KAAMA,EACND,QAASA,KACLyC,EAAIJ,SAAA,CAERQ,EAACjC,EAAS,CAACX,KAAMA,EAAMD,QAASA,EAAOqC,SACpCA,MAEAF,GACDU,EAACtB,EAAgB,CAAA,cAAa,0BAA0BE,KAAMA,EAAIY,SAC/DF,IAIJC,IAAaD,GAAcU,EAACd,EAAc,CAAA,cAAa,wBAAwBN,KAAMA,SAM9FQ,EAAWa,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconButton/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport MuiIconButton, { type IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';\nimport { styled } from '@mui/material/styles';\n\nimport BadgeCount from '../BadgeCount';\nimport BadgeDot from '../BadgeDot';\nimport Box from '../Box';\nimport getIconButtonStyles, { type IconButtonTone, type IconButtonVariant } from './getIconButtonStyles';\n\n/**\n * Custom IconButton atom for Flipdish design system.\n * - icon: The icon to display (required, use local icon library)\n * - badgeDot: Show a small dot badge (optional)\n * - badgeCount: Show a count badge (optional)\n * - variant: Visual style (primary | secondary | tertiary)\n * - tone: Visual tone (brand | destructive | inverse | neutral)\n * - state: Visual state (default | disabled | focus | hover | press)\n * - aria-label: Accessibility label\n * - fdKey: Data attribute for testing/analytics\n * - ...rest: All other props are passed to MuiIconButton\n */\nexport interface IconButtonProps extends Omit<MuiIconButtonProps, 'color'> {\n  'aria-label': string;\n  badgeCount?: number;\n  badgeDot?: boolean;\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  fdKey?: string;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  size?: 'medium' | 'small';\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n}\n\nconst StyledIconButton = styled(MuiIconButton, {\n  shouldForwardProp: (prop) =>\n    !['variant', 'tone', 'badgeDot', 'badgeCount', 'fdKey'].includes(prop as string),\n})<{\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n  iconColor?: string;\n}>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n  const focusColor =\n    tone === 'inverse'\n      ? theme.palette.semantic.stroke['stroke-inverse-strong']\n      : theme.palette.semantic.stroke['stroke-focus'];\n\n  return {\n    ...styles.default,\n    overflow: 'visible', // Allow badges to overflow\n    '&.Mui-disabled': { ...styles.disabled, overflow: 'visible' },\n    '&.Mui-focusVisible': {\n      outlineColor: focusColor,\n    },\n  };\n});\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['variant', 'tone'].includes(prop as string),\n})<{ variant: IconButtonVariant; tone: IconButtonTone }>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n\n  return {\n    alignItems: 'center',\n    borderRadius: 'inherit',\n    display: 'flex',\n    height: '100%',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    width: '100%',\n    '[data-variant]:hover:not(.Mui-disabled) > &': styles.hover,\n    '[data-variant]:active:not(.Mui-disabled) > &': styles.press,\n  };\n});\n\nconst StyledBadgeCount = styled(BadgeCount, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nconst StyledBadgeDot = styled(BadgeDot, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      badgeCount,\n      badgeDot = false,\n      children,\n      className,\n      disabled = false,\n      fdKey,\n      onClick,\n      size = 'medium',\n      tone = 'brand',\n      variant = 'primary',\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <StyledIconButton\n        ref={ref}\n        disableRipple\n        className={className}\n        data-fd={fdKey}\n        data-tone={tone}\n        data-variant={variant}\n        disabled={disabled}\n        onClick={onClick}\n        size={size}\n        tone={tone}\n        variant={variant}\n        {...rest}\n      >\n        <StyledBox tone={tone} variant={variant}>\n          {children}\n        </StyledBox>\n        {!!badgeCount && (\n          <StyledBadgeCount fdKey=\"icon-button-badge-count\" size={size}>\n            {badgeCount}\n          </StyledBadgeCount>\n        )}\n\n        {badgeDot && !badgeCount && <StyledBadgeDot fdKey=\"icon-button-badge-dot\" size={size} />}\n      </StyledIconButton>\n    );\n  },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["StyledIconButton","styled","MuiIconButton","shouldForwardProp","prop","includes","theme","variant","tone","styles","getIconButtonStyles","focusColor","palette","semantic","stroke","default","overflow","disabled","outlineColor","StyledBox","Box","alignItems","borderRadius","display","height","justifyContent","pointerEvents","width","hover","press","StyledBadgeCount","BadgeCount","size","position","bottom","spacing","left","zIndex","StyledBadgeDot","BadgeDot","IconButton","forwardRef","badgeCount","badgeDot","children","className","fdKey","onClick","rest","ref","_jsxs","disableRipple","_jsx","displayName"],"mappings":"wVAoCA,MAAMA,EAAmBC,EAAOC,EAAe,CAC7CC,kBAAoBC,IACjB,CAAC,UAAW,OAAQ,WAAY,aAAc,SAASC,SAASD,IAF5CH,EAOtB,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YACvC,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAC7CG,EACK,YAATH,EACIF,EAAMM,QAAQC,SAASC,OAAO,yBAC9BR,EAAMM,QAAQC,SAASC,OAAO,gBAEpC,MAAO,IACFL,EAAOM,QACVC,SAAU,UACV,iBAAkB,IAAKP,EAAOQ,SAAUD,SAAU,WAClD,qBAAsB,CACpBE,aAAcP,OAKdQ,EAAYlB,EAAOmB,EAAK,CAC5BjB,kBAAoBC,IAAU,CAAC,UAAW,QAAQC,SAASD,IAD3CH,EAEuC,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YAC7F,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAEnD,MAAO,CACLa,WAAY,SACZC,aAAc,UACdC,QAAS,OACTC,OAAQ,OACRC,eAAgB,SAChBT,SAAU,SACVU,cAAe,OACfC,MAAO,OACP,8CAA+ClB,EAAOmB,MACtD,+CAAgDnB,EAAOoB,UAIrDC,EAAmB7B,EAAO8B,EAAY,CAC1C5B,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IADzBH,EAEQ,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGXY,EAAiBrC,EAAOsC,EAAU,CACtCpC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD3BH,EAEU,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGJc,EAAaC,GACxB,EAEIC,aACAC,YAAW,EACXC,WACAC,YACA5B,YAAW,EACX6B,QACAC,UACAf,OAAO,SACPxB,OAAO,QACPD,UAAU,aACPyC,GAELC,IAGEC,EAAClD,EAAgB,CACfiD,IAAKA,EACLE,eAAa,EACbN,UAAWA,YACFC,EAAK,YACHtC,EAAI,eACDD,EACdU,SAAUA,EACV8B,QAASA,EACTf,KAAMA,EACNxB,KAAMA,EACND,QAASA,KACLyC,EAAIJ,SAAA,CAERQ,EAACjC,EAAS,CAACX,KAAMA,EAAMD,QAASA,EAAOqC,SACpCA,MAEAF,GACDU,EAACtB,EAAgB,CAACgB,MAAM,0BAA0Bd,KAAMA,WACrDU,IAIJC,IAAaD,GAAcU,EAACd,GAAeQ,MAAM,wBAAwBd,KAAMA,SAMxFQ,EAAWa,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Box"),a=require("@mui/material/styles");function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=n(t);const s={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],neutral:e=>e.palette.semantic.fill["fill-weak"]},stroked:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"}},border:{filled:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"},stroked:{brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],neutral:e=>e.palette.semantic.stroke["stroke-weak"]}},icon:{brand:e=>e.palette.semantic.icon["icon-primary"],destructive:e=>e.palette.semantic.icon["icon-error"],warning:e=>e.palette.semantic.icon["icon-warning"],success:e=>e.palette.semantic.icon["icon-success"],information:e=>e.palette.semantic.icon["icon-information"],neutral:e=>e.palette.semantic.icon["icon-strong"]}},o=(e,t,r)=>s.background[r][t](e),l=(e,t,r)=>s.border[r][t](e),c=(e,t)=>s.icon[t](e),d=a.styled(r,{shouldForwardProp:e=>!["tone","containerStyle"].includes(e)})((({theme:e,tone:t,containerStyle:r})=>({display:"flex",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",borderRadius:"50%",backgroundColor:o(e,t,r),border:"stroked"===r?"1px solid":"none",borderColor:l(e,t,r),boxSizing:"border-box",color:c(e,t)}))),u=i.memo((({icon:t,tone:r="neutral",style:a="filled",ariaLabel:n,className:i,"data-testid":s})=>{const o=n?{"aria-label":n,role:"graphics-symbol"}:{"aria-hidden":!0};return e.jsx(d,{tone:r,containerStyle:a,className:i,"data-testid":s,...o,children:t})}));u.displayName="IconContainer",module.exports=u;
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Box"),a=require("@mui/material/styles");function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=n(t);const s={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],neutral:e=>e.palette.semantic.fill["fill-weak"]},stroked:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"}},border:{filled:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"},stroked:{brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],neutral:e=>e.palette.semantic.stroke["stroke-weak"]}},icon:{brand:e=>e.palette.semantic.icon["icon-primary"],destructive:e=>e.palette.semantic.icon["icon-error"],warning:e=>e.palette.semantic.icon["icon-warning"],success:e=>e.palette.semantic.icon["icon-success"],information:e=>e.palette.semantic.icon["icon-information"],neutral:e=>e.palette.semantic.icon["icon-strong"]}},o=(e,t,r)=>s.background[r][t](e),l=(e,t,r)=>s.border[r][t](e),c=(e,t)=>s.icon[t](e),u=a.styled(r,{shouldForwardProp:e=>!["tone","containerStyle"].includes(e)})((({theme:e,tone:t,containerStyle:r})=>({display:"flex",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",borderRadius:"50%",backgroundColor:o(e,t,r),border:"stroked"===r?"1px solid":"none",borderColor:l(e,t,r),boxSizing:"border-box",color:c(e,t)}))),d=i.memo((({ariaLabel:t,className:r,fdKey:a,icon:n,style:i="filled",tone:s="neutral"})=>{const o=t?{"aria-label":t,role:"graphics-symbol"}:{"aria-hidden":!0};return e.jsx(u,{className:r,containerStyle:i,"data-fd":a,tone:s,...o,children:n})}));d.displayName="IconContainer",module.exports=d;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = 'neutral' | 'brand' | 'destructive' | 'warning' | 'success' | 'information';\nexport type IconContainerStyle = 'filled' | 'stroked';\n\nexport interface IconContainerProps {\n    /** Icon element to display in the container */\n    icon: React.ReactNode;\n    /** Visual tone of the container */\n    tone?: IconContainerTones;\n    /** Visual style of the container */\n    style?: IconContainerStyle;\n    /** Accessible description of the icon (for screen readers) */\n    ariaLabel?: string;\n    /** Additional class names */\n    className?: string;\n    /** Test ID for testing and automation */\n    'data-testid'?: string;\n}\n\n/** Color mapping for different tones and styles */\nconst COLORS = {\n    background: {\n        filled: {\n            brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n            destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n            warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n            success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n            information: (theme: Theme) => theme.palette.semantic.fill['fill-information-weak'],\n            neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n        },\n        stroked: {\n            brand: () => 'transparent',\n            destructive: () => 'transparent',\n            warning: () => 'transparent',\n            success: () => 'transparent',\n            information: () => 'transparent',\n            neutral: () => 'transparent',\n        },\n    },\n    border: {\n        filled: {\n            brand: () => 'transparent',\n            destructive: () => 'transparent',\n            warning: () => 'transparent',\n            success: () => 'transparent',\n            information: () => 'transparent',\n            neutral: () => 'transparent',\n        },\n        stroked: {\n            brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n            destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n            warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n            success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n            information: (theme: Theme) => theme.palette.semantic.stroke['stroke-information-weak'],\n            neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n        },\n    },\n    icon: {\n        brand: (theme: Theme) => theme.palette.semantic.icon['icon-primary'],\n        destructive: (theme: Theme) => theme.palette.semantic.icon['icon-error'],\n        warning: (theme: Theme) => theme.palette.semantic.icon['icon-warning'],\n        success: (theme: Theme) => theme.palette.semantic.icon['icon-success'],\n        information: (theme: Theme) => theme.palette.semantic.icon['icon-information'],\n        neutral: (theme: Theme) => theme.palette.semantic.icon['icon-strong'],\n    },\n};\n\nconst getBackgroundColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n    return COLORS.background[style][tone](theme);\n};\n\nconst getBorderColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n    return COLORS.border[style][tone](theme);\n};\n\nconst getIconColor = (theme: Theme, tone: IconContainerTones): string => {\n    return COLORS.icon[tone](theme);\n};\n\ninterface StyledBoxProps {\n    tone: IconContainerTones;\n    containerStyle: IconContainerStyle;\n}\n\nconst StyledBox = styled(Box, {\n    shouldForwardProp: (prop) => !['tone', 'containerStyle'].includes(prop as string),\n})<StyledBoxProps>(({ theme, tone, containerStyle }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '48px',\n    height: '48px',\n    borderRadius: '50%',\n    backgroundColor: getBackgroundColor(theme, tone, containerStyle),\n    border: containerStyle === 'stroked' ? '1px solid' : 'none',\n    borderColor: getBorderColor(theme, tone, containerStyle),\n    boxSizing: 'border-box',\n    color: getIconColor(theme, tone),\n}));\n\n/**\n * IconContainer component is used to make icons appear larger and more prominent while \ngiving them a consistent shape.\n *\n * React.memo is used to optimize performance by preventing unnecessary re-renders\n * when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst IconContainer = React.memo(\n    ({ icon, tone = 'neutral', style = 'filled', ariaLabel, className, 'data-testid': dataTestId }: IconContainerProps) => {\n        // Only set aria-hidden if no ariaLabel is provided\n        const ariaProps = ariaLabel ? { 'aria-label': ariaLabel, role: 'graphics-symbol' } : { 'aria-hidden': true };\n\n        return (\n            <StyledBox tone={tone} containerStyle={style} className={className} data-testid={dataTestId} {...ariaProps}>\n                {icon}\n            </StyledBox>\n        );\n    },\n);\n\nIconContainer.displayName = 'IconContainer';\n\nexport default IconContainer;\n"],"names":["COLORS","background","filled","brand","theme","palette","semantic","fill","destructive","warning","success","information","neutral","stroked","border","stroke","icon","getBackgroundColor","tone","style","getBorderColor","getIconColor","StyledBox","styled","Box","shouldForwardProp","prop","includes","containerStyle","display","alignItems","justifyContent","width","height","borderRadius","backgroundColor","borderColor","boxSizing","color","IconContainer","React","memo","ariaLabel","className","dataTestId","ariaProps","role","_jsx","children","displayName"],"mappings":"kZAuBA,MAAMA,EAAS,CACXC,WAAY,CACRC,OAAQ,CACJC,MAAQC,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACrDC,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,mBAC3DE,QAAUL,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDG,QAAUN,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDI,YAAcP,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,yBAC3DK,QAAUR,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,cAE3DM,QAAS,CACLV,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,gBAGvBE,OAAQ,CACJZ,OAAQ,CACJC,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,eAEnBC,QAAS,CACLV,MAAQC,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACvDP,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,qBAC7DN,QAAUL,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDL,QAAUN,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDJ,YAAcP,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,2BAC7DH,QAAUR,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,iBAGjEC,KAAM,CACFb,MAAQC,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACrDR,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,cAC3DP,QAAUL,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDN,QAAUN,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDL,YAAcP,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,oBAC3DJ,QAAUR,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,iBAIzDC,EAAqB,CAACb,EAAcc,EAA0BC,IACzDnB,EAAOC,WAAWkB,GAAOD,GAAMd,GAGpCgB,EAAiB,CAAChB,EAAcc,EAA0BC,IACrDnB,EAAOc,OAAOK,GAAOD,GAAMd,GAGhCiB,EAAe,CAACjB,EAAcc,IACzBlB,EAAOgB,KAAKE,GAAMd,GAQvBkB,EAAYC,EAAAA,OAAOC,EAAK,CAC1BC,kBAAoBC,IAAU,CAAC,OAAQ,kBAAkBC,SAASD,IADpDH,EAEC,EAAGnB,QAAOc,OAAMU,qBAAgB,CAC/CC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,MAAO,OACPC,OAAQ,OACRC,aAAc,MACdC,gBAAiBlB,EAAmBb,EAAOc,EAAMU,GACjDd,OAA2B,YAAnBc,EAA+B,YAAc,OACrDQ,YAAahB,EAAehB,EAAOc,EAAMU,GACzCS,UAAW,aACXC,MAAOjB,EAAajB,EAAOc,OAWzBqB,EAAgBC,EAAMC,MACxB,EAAGzB,OAAME,OAAO,UAAWC,QAAQ,SAAUuB,YAAWC,YAAW,cAAeC,MAE9E,MAAMC,EAAYH,EAAY,CAAE,aAAcA,EAAWI,KAAM,mBAAsB,CAAE,eAAe,GAEtG,OACIC,EAAAA,IAACzB,EAAS,CAACJ,KAAMA,EAAMU,eAAgBT,EAAOwB,UAAWA,EAAS,cAAeC,KAAgBC,EAASG,SACrGhC,OAMjBuB,EAAcU,YAAc"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = 'brand' | 'destructive' | 'information' | 'neutral' | 'success' | 'warning';\nexport type IconContainerStyle = 'filled' | 'stroked';\n\nexport interface IconContainerProps {\n  /** Accessible description of the icon (for screen readers) */\n  ariaLabel?: string;\n  /** Additional class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n  /** Icon element to display in the container */\n  icon: React.ReactNode;\n  /** Visual style of the container */\n  style?: IconContainerStyle;\n  /** Visual tone of the container */\n  tone?: IconContainerTones;\n}\n\n/** Color mapping for different tones and styles */\nconst COLORS = {\n  background: {\n    filled: {\n      brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n      destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n      warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n      success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n      information: (theme: Theme) => theme.palette.semantic.fill['fill-information-weak'],\n      neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n    },\n    stroked: {\n      brand: () => 'transparent',\n      destructive: () => 'transparent',\n      warning: () => 'transparent',\n      success: () => 'transparent',\n      information: () => 'transparent',\n      neutral: () => 'transparent',\n    },\n  },\n  border: {\n    filled: {\n      brand: () => 'transparent',\n      destructive: () => 'transparent',\n      warning: () => 'transparent',\n      success: () => 'transparent',\n      information: () => 'transparent',\n      neutral: () => 'transparent',\n    },\n    stroked: {\n      brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n      destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n      warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n      success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n      information: (theme: Theme) => theme.palette.semantic.stroke['stroke-information-weak'],\n      neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n    },\n  },\n  icon: {\n    brand: (theme: Theme) => theme.palette.semantic.icon['icon-primary'],\n    destructive: (theme: Theme) => theme.palette.semantic.icon['icon-error'],\n    warning: (theme: Theme) => theme.palette.semantic.icon['icon-warning'],\n    success: (theme: Theme) => theme.palette.semantic.icon['icon-success'],\n    information: (theme: Theme) => theme.palette.semantic.icon['icon-information'],\n    neutral: (theme: Theme) => theme.palette.semantic.icon['icon-strong'],\n  },\n};\n\nconst getBackgroundColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n  return COLORS.background[style][tone](theme);\n};\n\nconst getBorderColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n  return COLORS.border[style][tone](theme);\n};\n\nconst getIconColor = (theme: Theme, tone: IconContainerTones): string => {\n  return COLORS.icon[tone](theme);\n};\n\ninterface StyledBoxProps {\n  tone: IconContainerTones;\n  containerStyle: IconContainerStyle;\n}\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'containerStyle'].includes(prop as string),\n})<StyledBoxProps>(({ theme, tone, containerStyle }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '48px',\n  height: '48px',\n  borderRadius: '50%',\n  backgroundColor: getBackgroundColor(theme, tone, containerStyle),\n  border: containerStyle === 'stroked' ? '1px solid' : 'none',\n  borderColor: getBorderColor(theme, tone, containerStyle),\n  boxSizing: 'border-box',\n  color: getIconColor(theme, tone),\n}));\n\n/**\n * IconContainer component is used to make icons appear larger and more prominent while\ngiving them a consistent shape.\n *\n * React.memo is used to optimize performance by preventing unnecessary re-renders\n * when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst IconContainer = React.memo(\n  ({ ariaLabel, className, fdKey, icon, style = 'filled', tone = 'neutral' }: IconContainerProps) => {\n    // Only set aria-hidden if no ariaLabel is provided\n    const ariaProps = ariaLabel\n      ? { 'aria-label': ariaLabel, role: 'graphics-symbol' }\n      : { 'aria-hidden': true };\n\n    return (\n      <StyledBox className={className} containerStyle={style} data-fd={fdKey} tone={tone} {...ariaProps}>\n        {icon}\n      </StyledBox>\n    );\n  },\n);\n\nIconContainer.displayName = 'IconContainer';\n\nexport default IconContainer;\n"],"names":["COLORS","background","filled","brand","theme","palette","semantic","fill","destructive","warning","success","information","neutral","stroked","border","stroke","icon","getBackgroundColor","tone","style","getBorderColor","getIconColor","StyledBox","styled","Box","shouldForwardProp","prop","includes","containerStyle","display","alignItems","justifyContent","width","height","borderRadius","backgroundColor","borderColor","boxSizing","color","IconContainer","React","memo","ariaLabel","className","fdKey","ariaProps","role","_jsx","children","displayName"],"mappings":"kZAwBA,MAAMA,EAAS,CACbC,WAAY,CACVC,OAAQ,CACNC,MAAQC,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACrDC,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,mBAC3DE,QAAUL,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDG,QAAUN,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDI,YAAcP,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,yBAC3DK,QAAUR,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,cAEzDM,QAAS,CACPV,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,gBAGnBE,OAAQ,CACNZ,OAAQ,CACNC,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,eAEjBC,QAAS,CACPV,MAAQC,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACvDP,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,qBAC7DN,QAAUL,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDL,QAAUN,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDJ,YAAcP,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,2BAC7DH,QAAUR,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,iBAG7DC,KAAM,CACJb,MAAQC,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACrDR,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,cAC3DP,QAAUL,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDN,QAAUN,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDL,YAAcP,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,oBAC3DJ,QAAUR,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,iBAIrDC,EAAqB,CAACb,EAAcc,EAA0BC,IAC3DnB,EAAOC,WAAWkB,GAAOD,GAAMd,GAGlCgB,EAAiB,CAAChB,EAAcc,EAA0BC,IACvDnB,EAAOc,OAAOK,GAAOD,GAAMd,GAG9BiB,EAAe,CAACjB,EAAcc,IAC3BlB,EAAOgB,KAAKE,GAAMd,GAQrBkB,EAAYC,EAAAA,OAAOC,EAAK,CAC5BC,kBAAoBC,IAAU,CAAC,OAAQ,kBAAkBC,SAASD,IADlDH,EAEC,EAAGnB,QAAOc,OAAMU,qBAAgB,CACjDC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,MAAO,OACPC,OAAQ,OACRC,aAAc,MACdC,gBAAiBlB,EAAmBb,EAAOc,EAAMU,GACjDd,OAA2B,YAAnBc,EAA+B,YAAc,OACrDQ,YAAahB,EAAehB,EAAOc,EAAMU,GACzCS,UAAW,aACXC,MAAOjB,EAAajB,EAAOc,OAWvBqB,EAAgBC,EAAMC,MAC1B,EAAGC,YAAWC,YAAWC,QAAO5B,OAAMG,QAAQ,SAAUD,OAAO,cAE7D,MAAM2B,EAAYH,EACd,CAAE,aAAcA,EAAWI,KAAM,mBACjC,CAAE,eAAe,GAErB,OACEC,EAAAA,IAACzB,EAAS,CAACqB,UAAWA,EAAWf,eAAgBT,YAAgByB,EAAO1B,KAAMA,KAAU2B,EAASG,SAC9FhC,OAMTuB,EAAcU,YAAc"}

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

@@ -1,21 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 
-type IconContainerTones = 'neutral' | 'brand' | 'destructive' | 'warning' | 'success' | 'information';
+type IconContainerTones = 'brand' | 'destructive' | 'information' | 'neutral' | 'success' | 'warning';
 type IconContainerStyle = 'filled' | 'stroked';
 interface IconContainerProps {
-    /** Icon element to display in the container */
-    icon: react.ReactNode;
-    /** Visual tone of the container */
-    tone?: IconContainerTones;
-    /** Visual style of the container */
-    style?: IconContainerStyle;
     /** Accessible description of the icon (for screen readers) */
     ariaLabel?: string;
     /** Additional class names */
     className?: string;
     /** Test ID for testing and automation */
-    'data-testid'?: string;
+    fdKey?: string;
+    /** Icon element to display in the container */
+    icon: react.ReactNode;
+    /** Visual style of the container */
+    style?: IconContainerStyle;
+    /** Visual tone of the container */
+    tone?: IconContainerTones;
 }
 /**
  * IconContainer component is used to make icons appear larger and more prominent while
@@ -25,7 +25,7 @@ giving them a consistent shape.
  * when the component's props haven't changed, which is beneficial for components
  * that may be used frequently throughout the application.
  */
-declare const IconContainer: react.MemoExoticComponent<({ icon, tone, style, ariaLabel, className, "data-testid": dataTestId }: IconContainerProps) => react_jsx_runtime.JSX.Element>;
+declare const IconContainer: react.MemoExoticComponent<({ ariaLabel, className, fdKey, icon, style, tone }: IconContainerProps) => react_jsx_runtime.JSX.Element>;
 
 export { IconContainer as default };
 export type { IconContainerProps, IconContainerStyle, IconContainerTones };

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

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import*as t from"react";import a from"@mui/material/Box";import{styled as r}from"@mui/material/styles";const n={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],neutral:e=>e.palette.semantic.fill["fill-weak"]},stroked:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"}},border:{filled:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"},stroked:{brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],neutral:e=>e.palette.semantic.stroke["stroke-weak"]}},icon:{brand:e=>e.palette.semantic.icon["icon-primary"],destructive:e=>e.palette.semantic.icon["icon-error"],warning:e=>e.palette.semantic.icon["icon-warning"],success:e=>e.palette.semantic.icon["icon-success"],information:e=>e.palette.semantic.icon["icon-information"],neutral:e=>e.palette.semantic.icon["icon-strong"]}},i=(e,t,a)=>n.background[a][t](e),s=(e,t,a)=>n.border[a][t](e),o=(e,t)=>n.icon[t](e),l=r(a,{shouldForwardProp:e=>!["tone","containerStyle"].includes(e)})((({theme:e,tone:t,containerStyle:a})=>({display:"flex",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",borderRadius:"50%",backgroundColor:i(e,t,a),border:"stroked"===a?"1px solid":"none",borderColor:s(e,t,a),boxSizing:"border-box",color:o(e,t)}))),c=t.memo((({icon:t,tone:a="neutral",style:r="filled",ariaLabel:n,className:i,"data-testid":s})=>e(l,{tone:a,containerStyle:r,className:i,"data-testid":s,...n?{"aria-label":n,role:"graphics-symbol"}:{"aria-hidden":!0},children:t})));c.displayName="IconContainer";export{c as default};
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import a from"@mui/material/Box";import{styled as r}from"@mui/material/styles";const n={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],neutral:e=>e.palette.semantic.fill["fill-weak"]},stroked:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"}},border:{filled:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"},stroked:{brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],neutral:e=>e.palette.semantic.stroke["stroke-weak"]}},icon:{brand:e=>e.palette.semantic.icon["icon-primary"],destructive:e=>e.palette.semantic.icon["icon-error"],warning:e=>e.palette.semantic.icon["icon-warning"],success:e=>e.palette.semantic.icon["icon-success"],information:e=>e.palette.semantic.icon["icon-information"],neutral:e=>e.palette.semantic.icon["icon-strong"]}},i=(e,t,a)=>n.background[a][t](e),o=(e,t,a)=>n.border[a][t](e),s=(e,t)=>n.icon[t](e),l=r(a,{shouldForwardProp:e=>!["tone","containerStyle"].includes(e)})((({theme:e,tone:t,containerStyle:a})=>({display:"flex",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",borderRadius:"50%",backgroundColor:i(e,t,a),border:"stroked"===a?"1px solid":"none",borderColor:o(e,t,a),boxSizing:"border-box",color:s(e,t)}))),c=t.memo((({ariaLabel:t,className:a,fdKey:r,icon:n,style:i="filled",tone:o="neutral"})=>e(l,{className:a,containerStyle:i,"data-fd":r,tone:o,...t?{"aria-label":t,role:"graphics-symbol"}:{"aria-hidden":!0},children:n})));c.displayName="IconContainer";export{c as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = 'neutral' | 'brand' | 'destructive' | 'warning' | 'success' | 'information';\nexport type IconContainerStyle = 'filled' | 'stroked';\n\nexport interface IconContainerProps {\n    /** Icon element to display in the container */\n    icon: React.ReactNode;\n    /** Visual tone of the container */\n    tone?: IconContainerTones;\n    /** Visual style of the container */\n    style?: IconContainerStyle;\n    /** Accessible description of the icon (for screen readers) */\n    ariaLabel?: string;\n    /** Additional class names */\n    className?: string;\n    /** Test ID for testing and automation */\n    'data-testid'?: string;\n}\n\n/** Color mapping for different tones and styles */\nconst COLORS = {\n    background: {\n        filled: {\n            brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n            destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n            warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n            success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n            information: (theme: Theme) => theme.palette.semantic.fill['fill-information-weak'],\n            neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n        },\n        stroked: {\n            brand: () => 'transparent',\n            destructive: () => 'transparent',\n            warning: () => 'transparent',\n            success: () => 'transparent',\n            information: () => 'transparent',\n            neutral: () => 'transparent',\n        },\n    },\n    border: {\n        filled: {\n            brand: () => 'transparent',\n            destructive: () => 'transparent',\n            warning: () => 'transparent',\n            success: () => 'transparent',\n            information: () => 'transparent',\n            neutral: () => 'transparent',\n        },\n        stroked: {\n            brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n            destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n            warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n            success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n            information: (theme: Theme) => theme.palette.semantic.stroke['stroke-information-weak'],\n            neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n        },\n    },\n    icon: {\n        brand: (theme: Theme) => theme.palette.semantic.icon['icon-primary'],\n        destructive: (theme: Theme) => theme.palette.semantic.icon['icon-error'],\n        warning: (theme: Theme) => theme.palette.semantic.icon['icon-warning'],\n        success: (theme: Theme) => theme.palette.semantic.icon['icon-success'],\n        information: (theme: Theme) => theme.palette.semantic.icon['icon-information'],\n        neutral: (theme: Theme) => theme.palette.semantic.icon['icon-strong'],\n    },\n};\n\nconst getBackgroundColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n    return COLORS.background[style][tone](theme);\n};\n\nconst getBorderColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n    return COLORS.border[style][tone](theme);\n};\n\nconst getIconColor = (theme: Theme, tone: IconContainerTones): string => {\n    return COLORS.icon[tone](theme);\n};\n\ninterface StyledBoxProps {\n    tone: IconContainerTones;\n    containerStyle: IconContainerStyle;\n}\n\nconst StyledBox = styled(Box, {\n    shouldForwardProp: (prop) => !['tone', 'containerStyle'].includes(prop as string),\n})<StyledBoxProps>(({ theme, tone, containerStyle }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '48px',\n    height: '48px',\n    borderRadius: '50%',\n    backgroundColor: getBackgroundColor(theme, tone, containerStyle),\n    border: containerStyle === 'stroked' ? '1px solid' : 'none',\n    borderColor: getBorderColor(theme, tone, containerStyle),\n    boxSizing: 'border-box',\n    color: getIconColor(theme, tone),\n}));\n\n/**\n * IconContainer component is used to make icons appear larger and more prominent while \ngiving them a consistent shape.\n *\n * React.memo is used to optimize performance by preventing unnecessary re-renders\n * when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst IconContainer = React.memo(\n    ({ icon, tone = 'neutral', style = 'filled', ariaLabel, className, 'data-testid': dataTestId }: IconContainerProps) => {\n        // Only set aria-hidden if no ariaLabel is provided\n        const ariaProps = ariaLabel ? { 'aria-label': ariaLabel, role: 'graphics-symbol' } : { 'aria-hidden': true };\n\n        return (\n            <StyledBox tone={tone} containerStyle={style} className={className} data-testid={dataTestId} {...ariaProps}>\n                {icon}\n            </StyledBox>\n        );\n    },\n);\n\nIconContainer.displayName = 'IconContainer';\n\nexport default IconContainer;\n"],"names":["COLORS","background","filled","brand","theme","palette","semantic","fill","destructive","warning","success","information","neutral","stroked","border","stroke","icon","getBackgroundColor","tone","style","getBorderColor","getIconColor","StyledBox","styled","Box","shouldForwardProp","prop","includes","containerStyle","display","alignItems","justifyContent","width","height","borderRadius","backgroundColor","borderColor","boxSizing","color","IconContainer","React","memo","ariaLabel","className","dataTestId","_jsx","role","children","displayName"],"mappings":"+IAuBA,MAAMA,EAAS,CACXC,WAAY,CACRC,OAAQ,CACJC,MAAQC,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACrDC,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,mBAC3DE,QAAUL,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDG,QAAUN,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDI,YAAcP,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,yBAC3DK,QAAUR,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,cAE3DM,QAAS,CACLV,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,gBAGvBE,OAAQ,CACJZ,OAAQ,CACJC,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,eAEnBC,QAAS,CACLV,MAAQC,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACvDP,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,qBAC7DN,QAAUL,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDL,QAAUN,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDJ,YAAcP,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,2BAC7DH,QAAUR,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,iBAGjEC,KAAM,CACFb,MAAQC,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACrDR,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,cAC3DP,QAAUL,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDN,QAAUN,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDL,YAAcP,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,oBAC3DJ,QAAUR,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,iBAIzDC,EAAqB,CAACb,EAAcc,EAA0BC,IACzDnB,EAAOC,WAAWkB,GAAOD,GAAMd,GAGpCgB,EAAiB,CAAChB,EAAcc,EAA0BC,IACrDnB,EAAOc,OAAOK,GAAOD,GAAMd,GAGhCiB,EAAe,CAACjB,EAAcc,IACzBlB,EAAOgB,KAAKE,GAAMd,GAQvBkB,EAAYC,EAAOC,EAAK,CAC1BC,kBAAoBC,IAAU,CAAC,OAAQ,kBAAkBC,SAASD,IADpDH,EAEC,EAAGnB,QAAOc,OAAMU,qBAAgB,CAC/CC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,MAAO,OACPC,OAAQ,OACRC,aAAc,MACdC,gBAAiBlB,EAAmBb,EAAOc,EAAMU,GACjDd,OAA2B,YAAnBc,EAA+B,YAAc,OACrDQ,YAAahB,EAAehB,EAAOc,EAAMU,GACzCS,UAAW,aACXC,MAAOjB,EAAajB,EAAOc,OAWzBqB,EAAgBC,EAAMC,MACxB,EAAGzB,OAAME,OAAO,UAAWC,QAAQ,SAAUuB,YAAWC,YAAW,cAAeC,KAK1EC,EAACvB,EAAS,CAACJ,KAAMA,EAAMU,eAAgBT,EAAOwB,UAAWA,EAAS,cAAeC,KAHnEF,EAAY,CAAE,aAAcA,EAAWI,KAAM,mBAAsB,CAAE,eAAe,GAGQC,SACrG/B,MAMjBuB,EAAcS,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = 'brand' | 'destructive' | 'information' | 'neutral' | 'success' | 'warning';\nexport type IconContainerStyle = 'filled' | 'stroked';\n\nexport interface IconContainerProps {\n  /** Accessible description of the icon (for screen readers) */\n  ariaLabel?: string;\n  /** Additional class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n  /** Icon element to display in the container */\n  icon: React.ReactNode;\n  /** Visual style of the container */\n  style?: IconContainerStyle;\n  /** Visual tone of the container */\n  tone?: IconContainerTones;\n}\n\n/** Color mapping for different tones and styles */\nconst COLORS = {\n  background: {\n    filled: {\n      brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n      destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n      warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n      success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n      information: (theme: Theme) => theme.palette.semantic.fill['fill-information-weak'],\n      neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n    },\n    stroked: {\n      brand: () => 'transparent',\n      destructive: () => 'transparent',\n      warning: () => 'transparent',\n      success: () => 'transparent',\n      information: () => 'transparent',\n      neutral: () => 'transparent',\n    },\n  },\n  border: {\n    filled: {\n      brand: () => 'transparent',\n      destructive: () => 'transparent',\n      warning: () => 'transparent',\n      success: () => 'transparent',\n      information: () => 'transparent',\n      neutral: () => 'transparent',\n    },\n    stroked: {\n      brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n      destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n      warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n      success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n      information: (theme: Theme) => theme.palette.semantic.stroke['stroke-information-weak'],\n      neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n    },\n  },\n  icon: {\n    brand: (theme: Theme) => theme.palette.semantic.icon['icon-primary'],\n    destructive: (theme: Theme) => theme.palette.semantic.icon['icon-error'],\n    warning: (theme: Theme) => theme.palette.semantic.icon['icon-warning'],\n    success: (theme: Theme) => theme.palette.semantic.icon['icon-success'],\n    information: (theme: Theme) => theme.palette.semantic.icon['icon-information'],\n    neutral: (theme: Theme) => theme.palette.semantic.icon['icon-strong'],\n  },\n};\n\nconst getBackgroundColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n  return COLORS.background[style][tone](theme);\n};\n\nconst getBorderColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n  return COLORS.border[style][tone](theme);\n};\n\nconst getIconColor = (theme: Theme, tone: IconContainerTones): string => {\n  return COLORS.icon[tone](theme);\n};\n\ninterface StyledBoxProps {\n  tone: IconContainerTones;\n  containerStyle: IconContainerStyle;\n}\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'containerStyle'].includes(prop as string),\n})<StyledBoxProps>(({ theme, tone, containerStyle }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '48px',\n  height: '48px',\n  borderRadius: '50%',\n  backgroundColor: getBackgroundColor(theme, tone, containerStyle),\n  border: containerStyle === 'stroked' ? '1px solid' : 'none',\n  borderColor: getBorderColor(theme, tone, containerStyle),\n  boxSizing: 'border-box',\n  color: getIconColor(theme, tone),\n}));\n\n/**\n * IconContainer component is used to make icons appear larger and more prominent while\ngiving them a consistent shape.\n *\n * React.memo is used to optimize performance by preventing unnecessary re-renders\n * when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst IconContainer = React.memo(\n  ({ ariaLabel, className, fdKey, icon, style = 'filled', tone = 'neutral' }: IconContainerProps) => {\n    // Only set aria-hidden if no ariaLabel is provided\n    const ariaProps = ariaLabel\n      ? { 'aria-label': ariaLabel, role: 'graphics-symbol' }\n      : { 'aria-hidden': true };\n\n    return (\n      <StyledBox className={className} containerStyle={style} data-fd={fdKey} tone={tone} {...ariaProps}>\n        {icon}\n      </StyledBox>\n    );\n  },\n);\n\nIconContainer.displayName = 'IconContainer';\n\nexport default IconContainer;\n"],"names":["COLORS","background","filled","brand","theme","palette","semantic","fill","destructive","warning","success","information","neutral","stroked","border","stroke","icon","getBackgroundColor","tone","style","getBorderColor","getIconColor","StyledBox","styled","Box","shouldForwardProp","prop","includes","containerStyle","display","alignItems","justifyContent","width","height","borderRadius","backgroundColor","borderColor","boxSizing","color","IconContainer","React","memo","ariaLabel","className","fdKey","_jsx","role","children","displayName"],"mappings":"+IAwBA,MAAMA,EAAS,CACbC,WAAY,CACVC,OAAQ,CACNC,MAAQC,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACrDC,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,mBAC3DE,QAAUL,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDG,QAAUN,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDI,YAAcP,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,yBAC3DK,QAAUR,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,cAEzDM,QAAS,CACPV,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,gBAGnBE,OAAQ,CACNZ,OAAQ,CACNC,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,eAEjBC,QAAS,CACPV,MAAQC,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACvDP,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,qBAC7DN,QAAUL,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDL,QAAUN,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDJ,YAAcP,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,2BAC7DH,QAAUR,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,iBAG7DC,KAAM,CACJb,MAAQC,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACrDR,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,cAC3DP,QAAUL,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDN,QAAUN,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDL,YAAcP,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,oBAC3DJ,QAAUR,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,iBAIrDC,EAAqB,CAACb,EAAcc,EAA0BC,IAC3DnB,EAAOC,WAAWkB,GAAOD,GAAMd,GAGlCgB,EAAiB,CAAChB,EAAcc,EAA0BC,IACvDnB,EAAOc,OAAOK,GAAOD,GAAMd,GAG9BiB,EAAe,CAACjB,EAAcc,IAC3BlB,EAAOgB,KAAKE,GAAMd,GAQrBkB,EAAYC,EAAOC,EAAK,CAC5BC,kBAAoBC,IAAU,CAAC,OAAQ,kBAAkBC,SAASD,IADlDH,EAEC,EAAGnB,QAAOc,OAAMU,qBAAgB,CACjDC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,MAAO,OACPC,OAAQ,OACRC,aAAc,MACdC,gBAAiBlB,EAAmBb,EAAOc,EAAMU,GACjDd,OAA2B,YAAnBc,EAA+B,YAAc,OACrDQ,YAAahB,EAAehB,EAAOc,EAAMU,GACzCS,UAAW,aACXC,MAAOjB,EAAajB,EAAOc,OAWvBqB,EAAgBC,EAAMC,MAC1B,EAAGC,YAAWC,YAAWC,QAAO5B,OAAMG,QAAQ,SAAUD,OAAO,aAO3D2B,EAACvB,EAAS,CAACqB,UAAWA,EAAWf,eAAgBT,YAAgByB,EAAO1B,KAAMA,KAL9DwB,EACd,CAAE,aAAcA,EAAWI,KAAM,mBACjC,CAAE,eAAe,GAG8EC,SAC9F/B,MAMTuB,EAAcS,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),s=require("@mui/material/LinearProgress"),a=require("@mui/material/Box"),l=require("@mui/material/Typography"),i=require("@mui/material/styles");const t=i.styled(s)((({theme:e})=>({height:8,[`&.${s.linearProgressClasses.root}`]:{borderRadius:e.radius["radius-8"],overflow:"hidden",backgroundColor:e.palette.semantic.fill["fill-weak"],...e.applyStyles("dark",{backgroundColor:e.palette.grey[800]}),boxShadow:e.customShadows?.sunken},[`&.${s.linearProgressClasses.colorPrimary} .${s.linearProgressClasses.bar}`]:{backgroundColor:e.palette.semantic.fill["fill-selected"],...e.applyStyles("dark",{backgroundColor:e.palette.semantic.fill["fill-selected"]})},[`& .${s.linearProgressClasses.bar1}`]:{borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken},[`& .${s.linearProgressClasses.bar2}`]:{borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken},[`& .${s.linearProgressClasses.dashed}`]:{marginTop:2}}))),o=i.styled(a)((({theme:e})=>({lineHeight:"20px",gap:e.spacing(1),alignItems:"center",display:"flex"}))),d=i.styled(l)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),n=i.styled(a)((()=>({alignItems:"center",display:"flex",height:"20px",justifyContent:"flex-end",minWidth:"40px"}))),u=({value:s,label:l,showLabel:i,...u})=>{const c=r.useId(),m=r.useMemo((()=>l||(void 0!==s?`${s}%`:void 0)),[l,s]);return e.jsxs(o,{children:[e.jsx(a,{flex:1,children:e.jsx(t,{"aria-label":!i&&m?m:void 0,"aria-labelledby":i&&m?c:void 0,...u,value:s})}),i&&e.jsx(n,{children:e.jsx(d,{id:c,variant:"captionWeak",children:m})})]})};Object.defineProperty(exports,"linearProgressClasses",{enumerable:!0,get:function(){return s.linearProgressClasses}}),exports.LinearProgress=u,exports.default=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),s=require("@mui/material/LinearProgress"),a=require("@mui/material/Box"),l=require("@mui/material/Typography"),i=require("@mui/material/styles");const t=i.styled(s)((({theme:e})=>({height:8,[`&.${s.linearProgressClasses.root}`]:{borderRadius:e.radius["radius-8"],overflow:"hidden",backgroundColor:e.palette.semantic.fill["fill-weak"],...e.applyStyles("dark",{backgroundColor:e.palette.grey[800]}),boxShadow:e.customShadows?.sunken},[`&.${s.linearProgressClasses.colorPrimary} .${s.linearProgressClasses.bar}`]:{backgroundColor:e.palette.semantic.fill["fill-selected"],...e.applyStyles("dark",{backgroundColor:e.palette.semantic.fill["fill-selected"]})},[`& .${s.linearProgressClasses.bar1}`]:{borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken},[`& .${s.linearProgressClasses.bar2}`]:{borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken},[`& .${s.linearProgressClasses.dashed}`]:{marginTop:2}}))),o=i.styled(a)((({theme:e})=>({lineHeight:"20px",gap:e.spacing(1),alignItems:"center",display:"flex"}))),d=i.styled(l)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),n=i.styled(a)((()=>({alignItems:"center",display:"flex",height:"20px",justifyContent:"flex-end",minWidth:"40px"}))),u=({fdKey:s,label:l,showLabel:i,value:u,...c})=>{const m=r.useId(),p=r.useMemo((()=>l||(void 0!==u?`${u}%`:void 0)),[l,u]);return e.jsxs(o,{children:[e.jsx(a,{flex:1,children:e.jsx(t,{"aria-label":!i&&p?p:void 0,"aria-labelledby":i&&p?m:void 0,...c,"data-fd":s,value:u})}),i&&e.jsx(n,{children:e.jsx(d,{id:m,variant:"captionWeak",children:p})})]})};Object.defineProperty(exports,"linearProgressClasses",{enumerable:!0,get:function(){return s.linearProgressClasses}}),exports.LinearProgress=u,exports.default=u;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/LinearProgress/index.tsx"],"sourcesContent":["import { useId, useMemo } from 'react';\n\nimport MuiLinearProgress, {\n  linearProgressClasses,\n  type LinearProgressProps as MuiLinearProgressProps,\n} from '@mui/material/LinearProgress';\n\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nconst StyledLinearProgress = styled(MuiLinearProgress)(({ theme }) => {\n  return {\n    height: 8,\n    [`&.${linearProgressClasses.root}`]: {\n      borderRadius: theme.radius['radius-8'],\n      overflow: 'hidden',\n      backgroundColor: theme.palette.semantic.fill['fill-weak'],\n      ...theme.applyStyles('dark', {\n        backgroundColor: theme.palette.grey[800],\n      }),\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`&.${linearProgressClasses.colorPrimary} .${linearProgressClasses.bar}`]: {\n      backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      ...theme.applyStyles('dark', {\n        backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      }),\n    },\n    [`& .${linearProgressClasses.bar1}`]: {\n      borderRadius: theme.radius['radius-8'],\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`& .${linearProgressClasses.bar2}`]: {\n      borderRadius: theme.radius['radius-8'],\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`& .${linearProgressClasses.dashed}`]: {\n      marginTop: 2,\n    },\n  };\n});\n\ninterface LinearProgressProps extends MuiLinearProgressProps {\n  label?: string;\n  showLabel?: boolean;\n}\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  lineHeight: '20px',\n  gap: theme.spacing(1),\n  alignItems: 'center',\n  display: 'flex',\n}));\n\nconst StyledTypography = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst LabelBox = styled(Box)(() => ({\n  alignItems: 'center',\n  display: 'flex',\n  height: '20px',\n  justifyContent: 'flex-end',\n  minWidth: '40px',\n}));\n\n/**\n * Props for the themed LinearProgress component.\n * Extends MUI's LinearProgressProps.\n * - label: Optional label text (falls back to percentage when `value` is provided).\n * - showLabel: When true, renders the label to the right of the bar.\n * - color: we don't support changing the color in our design\n */\nexport const LinearProgress: React.FC<Omit<LinearProgressProps, 'color'>> = ({ value, label, showLabel, ...rest }) => {\n  const labelId = useId();\n  const parsedLabel = useMemo(() => label || (value !== undefined ? `${value}%` : undefined), [label, value]);\n  return (\n    <StyledBox>\n      <Box flex={1}>\n        <StyledLinearProgress\n          aria-label={!showLabel && parsedLabel ? parsedLabel : undefined}\n          aria-labelledby={showLabel && parsedLabel ? labelId : undefined}\n          {...rest}\n          value={value}\n        />\n      </Box>\n      {showLabel && (\n        <LabelBox>\n          <StyledTypography id={labelId} variant=\"captionWeak\">\n            {parsedLabel}\n          </StyledTypography>\n        </LabelBox>\n      )}\n    </StyledBox>\n  );\n};\n\nexport default LinearProgress;\n\nexport { linearProgressClasses };\n"],"names":["StyledLinearProgress","styled","MuiLinearProgress","theme","height","linearProgressClasses","root","borderRadius","radius","overflow","backgroundColor","palette","semantic","fill","applyStyles","grey","boxShadow","customShadows","sunken","colorPrimary","bar","bar1","bar2","dashed","marginTop","StyledBox","Box","lineHeight","gap","spacing","alignItems","display","StyledTypography","Typography","color","text","LabelBox","justifyContent","minWidth","LinearProgress","value","label","showLabel","rest","labelId","useId","parsedLabel","useMemo","undefined","_jsxs","children","_jsx","flex","id","variant"],"mappings":"2QAWA,MAAMA,EAAuBC,EAAAA,OAAOC,EAAPD,EAA0B,EAAGE,YACjD,CACLC,OAAQ,EACR,CAAC,KAAKC,wBAAsBC,QAAS,CACnCC,aAAcJ,EAAMK,OAAO,YAC3BC,SAAU,SACVC,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,gBAC1CV,EAAMW,YAAY,OAAQ,CAC3BJ,gBAAiBP,EAAMQ,QAAQI,KAAK,OAEtCC,UAAWb,EAAMc,eAAeC,QAElC,CAAC,KAAKb,wBAAsBc,iBAAiBd,EAAAA,sBAAsBe,OAAQ,CACzEV,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,oBAC1CV,EAAMW,YAAY,OAAQ,CAC3BJ,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,oBAGjD,CAAC,MAAMR,wBAAsBgB,QAAS,CACpCd,aAAcJ,EAAMK,OAAO,YAC3BQ,UAAWb,EAAMc,eAAeC,QAElC,CAAC,MAAMb,wBAAsBiB,QAAS,CACpCf,aAAcJ,EAAMK,OAAO,YAC3BQ,UAAWb,EAAMc,eAAeC,QAElC,CAAC,MAAMb,wBAAsBkB,UAAW,CACtCC,UAAW,OAUXC,EAAYxB,EAAAA,OAAOyB,EAAPzB,EAAY,EAAGE,YAAO,CACtCwB,WAAY,OACZC,IAAKzB,EAAM0B,QAAQ,GACnBC,WAAY,SACZC,QAAS,WAGLC,EAAmB/B,EAAAA,OAAOgC,EAAPhC,EAAmB,EAAGE,YAAO,CACpD+B,MAAO/B,EAAMQ,QAAQC,SAASuB,KAAK,iBAG/BC,EAAWnC,EAAAA,OAAOyB,EAAPzB,EAAY,KAAA,CAC3B6B,WAAY,SACZC,QAAS,OACT3B,OAAQ,OACRiC,eAAgB,WAChBC,SAAU,WAUCC,EAA+D,EAAGC,QAAOC,QAAOC,eAAcC,MACzG,MAAMC,EAAUC,EAAAA,QACVC,EAAcC,EAAAA,SAAQ,IAAMN,SAAoBO,IAAVR,EAAsB,GAAGA,UAAWQ,IAAY,CAACP,EAAOD,IACpG,OACES,EAAAA,KAACxB,EAAS,CAAAyB,SAAA,CACRC,MAACzB,EAAG,CAAC0B,KAAM,EAACF,SACVC,EAAAA,IAACnD,iBACc0C,GAAaI,EAAcA,OAAcE,EAAS,kBAC9CN,GAAaI,EAAcF,OAAUI,KAClDL,EACJH,MAAOA,MAGVE,GACCS,EAAAA,IAACf,EAAQ,CAAAc,SACPC,EAAAA,IAACnB,EAAgB,CAACqB,GAAIT,EAASU,QAAQ,cAAaJ,SACjDJ"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/LinearProgress/index.tsx"],"sourcesContent":["import { useId, useMemo } from 'react';\n\nimport MuiLinearProgress, {\n  linearProgressClasses,\n  type LinearProgressProps as MuiLinearProgressProps,\n} from '@mui/material/LinearProgress';\n\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nconst StyledLinearProgress = styled(MuiLinearProgress)(({ theme }) => {\n  return {\n    height: 8,\n    [`&.${linearProgressClasses.root}`]: {\n      borderRadius: theme.radius['radius-8'],\n      overflow: 'hidden',\n      backgroundColor: theme.palette.semantic.fill['fill-weak'],\n      ...theme.applyStyles('dark', {\n        backgroundColor: theme.palette.grey[800],\n      }),\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`&.${linearProgressClasses.colorPrimary} .${linearProgressClasses.bar}`]: {\n      backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      ...theme.applyStyles('dark', {\n        backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      }),\n    },\n    [`& .${linearProgressClasses.bar1}`]: {\n      borderRadius: theme.radius['radius-8'],\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`& .${linearProgressClasses.bar2}`]: {\n      borderRadius: theme.radius['radius-8'],\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`& .${linearProgressClasses.dashed}`]: {\n      marginTop: 2,\n    },\n  };\n});\n\nexport interface LinearProgressProps extends MuiLinearProgressProps {\n  fdKey?: string;\n  label?: string;\n  showLabel?: boolean;\n}\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  lineHeight: '20px',\n  gap: theme.spacing(1),\n  alignItems: 'center',\n  display: 'flex',\n}));\n\nconst StyledTypography = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst LabelBox = styled(Box)(() => ({\n  alignItems: 'center',\n  display: 'flex',\n  height: '20px',\n  justifyContent: 'flex-end',\n  minWidth: '40px',\n}));\n\n/**\n * Props for the themed LinearProgress component.\n * Extends MUI's LinearProgressProps.\n * - label: Optional label text (falls back to percentage when `value` is provided).\n * - showLabel: When true, renders the label to the right of the bar.\n * - color: we don't support changing the color in our design\n */\nexport const LinearProgress: React.FC<Omit<LinearProgressProps, 'color'>> = ({\n  fdKey,\n  label,\n  showLabel,\n  value,\n  ...rest\n}) => {\n  const labelId = useId();\n  const parsedLabel = useMemo(() => label || (value !== undefined ? `${value}%` : undefined), [label, value]);\n  return (\n    <StyledBox>\n      <Box flex={1}>\n        <StyledLinearProgress\n          aria-label={!showLabel && parsedLabel ? parsedLabel : undefined}\n          aria-labelledby={showLabel && parsedLabel ? labelId : undefined}\n          {...rest}\n          data-fd={fdKey}\n          value={value}\n        />\n      </Box>\n      {showLabel && (\n        <LabelBox>\n          <StyledTypography id={labelId} variant=\"captionWeak\">\n            {parsedLabel}\n          </StyledTypography>\n        </LabelBox>\n      )}\n    </StyledBox>\n  );\n};\n\nexport default LinearProgress;\n\nexport { linearProgressClasses };\n"],"names":["StyledLinearProgress","styled","MuiLinearProgress","theme","height","linearProgressClasses","root","borderRadius","radius","overflow","backgroundColor","palette","semantic","fill","applyStyles","grey","boxShadow","customShadows","sunken","colorPrimary","bar","bar1","bar2","dashed","marginTop","StyledBox","Box","lineHeight","gap","spacing","alignItems","display","StyledTypography","Typography","color","text","LabelBox","justifyContent","minWidth","LinearProgress","fdKey","label","showLabel","value","rest","labelId","useId","parsedLabel","useMemo","undefined","_jsxs","children","_jsx","flex","id","variant"],"mappings":"2QAWA,MAAMA,EAAuBC,EAAAA,OAAOC,EAAPD,EAA0B,EAAGE,YACjD,CACLC,OAAQ,EACR,CAAC,KAAKC,wBAAsBC,QAAS,CACnCC,aAAcJ,EAAMK,OAAO,YAC3BC,SAAU,SACVC,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,gBAC1CV,EAAMW,YAAY,OAAQ,CAC3BJ,gBAAiBP,EAAMQ,QAAQI,KAAK,OAEtCC,UAAWb,EAAMc,eAAeC,QAElC,CAAC,KAAKb,wBAAsBc,iBAAiBd,EAAAA,sBAAsBe,OAAQ,CACzEV,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,oBAC1CV,EAAMW,YAAY,OAAQ,CAC3BJ,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,oBAGjD,CAAC,MAAMR,wBAAsBgB,QAAS,CACpCd,aAAcJ,EAAMK,OAAO,YAC3BQ,UAAWb,EAAMc,eAAeC,QAElC,CAAC,MAAMb,wBAAsBiB,QAAS,CACpCf,aAAcJ,EAAMK,OAAO,YAC3BQ,UAAWb,EAAMc,eAAeC,QAElC,CAAC,MAAMb,wBAAsBkB,UAAW,CACtCC,UAAW,OAWXC,EAAYxB,EAAAA,OAAOyB,EAAPzB,EAAY,EAAGE,YAAO,CACtCwB,WAAY,OACZC,IAAKzB,EAAM0B,QAAQ,GACnBC,WAAY,SACZC,QAAS,WAGLC,EAAmB/B,EAAAA,OAAOgC,EAAPhC,EAAmB,EAAGE,YAAO,CACpD+B,MAAO/B,EAAMQ,QAAQC,SAASuB,KAAK,iBAG/BC,EAAWnC,EAAAA,OAAOyB,EAAPzB,EAAY,KAAA,CAC3B6B,WAAY,SACZC,QAAS,OACT3B,OAAQ,OACRiC,eAAgB,WAChBC,SAAU,WAUCC,EAA+D,EAC1EC,QACAC,QACAC,YACAC,WACGC,MAEH,MAAMC,EAAUC,EAAAA,QACVC,EAAcC,EAAAA,SAAQ,IAAMP,SAAoBQ,IAAVN,EAAsB,GAAGA,UAAWM,IAAY,CAACR,EAAOE,IACpG,OACEO,OAACzB,EAAS,CAAA0B,SAAA,CACRC,EAAAA,IAAC1B,EAAG,CAAC2B,KAAM,EAACF,SACVC,EAAAA,IAACpD,EAAoB,CAAA,cACN0C,GAAaK,EAAcA,OAAcE,EAAS,kBAC9CP,GAAaK,EAAcF,OAAUI,KAClDL,EAAI,UACCJ,EACTG,MAAOA,MAGVD,GACCU,EAAAA,IAAChB,EAAQ,CAAAe,SACPC,MAACpB,EAAgB,CAACsB,GAAIT,EAASU,QAAQ,cAAaJ,SACjDJ"}

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

@@ -2,6 +2,7 @@ import { LinearProgressProps as LinearProgressProps$1 } from '@mui/material/Line
 export { linearProgressClasses } from '@mui/material/LinearProgress';
 
 interface LinearProgressProps extends LinearProgressProps$1 {
+    fdKey?: string;
     label?: string;
     showLabel?: boolean;
 }
@@ -15,3 +16,4 @@ interface LinearProgressProps extends LinearProgressProps$1 {
 declare const LinearProgress: React.FC<Omit<LinearProgressProps, 'color'>>;
 
 export { LinearProgress, LinearProgress as default };
+export type { LinearProgressProps };

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as a}from"react/jsx-runtime";import{useId as r,useMemo as i}from"react";import o,{linearProgressClasses as t}from"@mui/material/LinearProgress";export{linearProgressClasses}from"@mui/material/LinearProgress";import l from"@mui/material/Box";import s from"@mui/material/Typography";import{styled as d}from"@mui/material/styles";const m=d(o)((({theme:e})=>({height:8,[`&.${t.root}`]:{borderRadius:e.radius["radius-8"],overflow:"hidden",backgroundColor:e.palette.semantic.fill["fill-weak"],...e.applyStyles("dark",{backgroundColor:e.palette.grey[800]}),boxShadow:e.customShadows?.sunken},[`&.${t.colorPrimary} .${t.bar}`]:{backgroundColor:e.palette.semantic.fill["fill-selected"],...e.applyStyles("dark",{backgroundColor:e.palette.semantic.fill["fill-selected"]})},[`& .${t.bar1}`]:{borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken},[`& .${t.bar2}`]:{borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken},[`& .${t.dashed}`]:{marginTop:2}}))),n=d(l)((({theme:e})=>({lineHeight:"20px",gap:e.spacing(1),alignItems:"center",display:"flex"}))),u=d(s)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),p=d(l)((()=>({alignItems:"center",display:"flex",height:"20px",justifyContent:"flex-end",minWidth:"40px"}))),c=({value:o,label:t,showLabel:s,...d})=>{const c=r(),h=i((()=>t||(void 0!==o?`${o}%`:void 0)),[t,o]);return e(n,{children:[a(l,{flex:1,children:a(m,{"aria-label":!s&&h?h:void 0,"aria-labelledby":s&&h?c:void 0,...d,value:o})}),s&&a(p,{children:a(u,{id:c,variant:"captionWeak",children:h})})]})};export{c as LinearProgress,c as default};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import{useId as r,useMemo as i}from"react";import o,{linearProgressClasses as t}from"@mui/material/LinearProgress";export{linearProgressClasses}from"@mui/material/LinearProgress";import l from"@mui/material/Box";import s from"@mui/material/Typography";import{styled as d}from"@mui/material/styles";const m=d(o)((({theme:e})=>({height:8,[`&.${t.root}`]:{borderRadius:e.radius["radius-8"],overflow:"hidden",backgroundColor:e.palette.semantic.fill["fill-weak"],...e.applyStyles("dark",{backgroundColor:e.palette.grey[800]}),boxShadow:e.customShadows?.sunken},[`&.${t.colorPrimary} .${t.bar}`]:{backgroundColor:e.palette.semantic.fill["fill-selected"],...e.applyStyles("dark",{backgroundColor:e.palette.semantic.fill["fill-selected"]})},[`& .${t.bar1}`]:{borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken},[`& .${t.bar2}`]:{borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken},[`& .${t.dashed}`]:{marginTop:2}}))),n=d(l)((({theme:e})=>({lineHeight:"20px",gap:e.spacing(1),alignItems:"center",display:"flex"}))),u=d(s)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),p=d(l)((()=>({alignItems:"center",display:"flex",height:"20px",justifyContent:"flex-end",minWidth:"40px"}))),c=({fdKey:o,label:t,showLabel:s,value:d,...c})=>{const h=r(),f=i((()=>t||(void 0!==d?`${d}%`:void 0)),[t,d]);return e(n,{children:[a(l,{flex:1,children:a(m,{"aria-label":!s&&f?f:void 0,"aria-labelledby":s&&f?h:void 0,...c,"data-fd":o,value:d})}),s&&a(p,{children:a(u,{id:h,variant:"captionWeak",children:f})})]})};export{c as LinearProgress,c as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/LinearProgress/index.tsx"],"sourcesContent":["import { useId, useMemo } from 'react';\n\nimport MuiLinearProgress, {\n  linearProgressClasses,\n  type LinearProgressProps as MuiLinearProgressProps,\n} from '@mui/material/LinearProgress';\n\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nconst StyledLinearProgress = styled(MuiLinearProgress)(({ theme }) => {\n  return {\n    height: 8,\n    [`&.${linearProgressClasses.root}`]: {\n      borderRadius: theme.radius['radius-8'],\n      overflow: 'hidden',\n      backgroundColor: theme.palette.semantic.fill['fill-weak'],\n      ...theme.applyStyles('dark', {\n        backgroundColor: theme.palette.grey[800],\n      }),\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`&.${linearProgressClasses.colorPrimary} .${linearProgressClasses.bar}`]: {\n      backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      ...theme.applyStyles('dark', {\n        backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      }),\n    },\n    [`& .${linearProgressClasses.bar1}`]: {\n      borderRadius: theme.radius['radius-8'],\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`& .${linearProgressClasses.bar2}`]: {\n      borderRadius: theme.radius['radius-8'],\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`& .${linearProgressClasses.dashed}`]: {\n      marginTop: 2,\n    },\n  };\n});\n\ninterface LinearProgressProps extends MuiLinearProgressProps {\n  label?: string;\n  showLabel?: boolean;\n}\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  lineHeight: '20px',\n  gap: theme.spacing(1),\n  alignItems: 'center',\n  display: 'flex',\n}));\n\nconst StyledTypography = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst LabelBox = styled(Box)(() => ({\n  alignItems: 'center',\n  display: 'flex',\n  height: '20px',\n  justifyContent: 'flex-end',\n  minWidth: '40px',\n}));\n\n/**\n * Props for the themed LinearProgress component.\n * Extends MUI's LinearProgressProps.\n * - label: Optional label text (falls back to percentage when `value` is provided).\n * - showLabel: When true, renders the label to the right of the bar.\n * - color: we don't support changing the color in our design\n */\nexport const LinearProgress: React.FC<Omit<LinearProgressProps, 'color'>> = ({ value, label, showLabel, ...rest }) => {\n  const labelId = useId();\n  const parsedLabel = useMemo(() => label || (value !== undefined ? `${value}%` : undefined), [label, value]);\n  return (\n    <StyledBox>\n      <Box flex={1}>\n        <StyledLinearProgress\n          aria-label={!showLabel && parsedLabel ? parsedLabel : undefined}\n          aria-labelledby={showLabel && parsedLabel ? labelId : undefined}\n          {...rest}\n          value={value}\n        />\n      </Box>\n      {showLabel && (\n        <LabelBox>\n          <StyledTypography id={labelId} variant=\"captionWeak\">\n            {parsedLabel}\n          </StyledTypography>\n        </LabelBox>\n      )}\n    </StyledBox>\n  );\n};\n\nexport default LinearProgress;\n\nexport { linearProgressClasses };\n"],"names":["StyledLinearProgress","styled","MuiLinearProgress","theme","height","linearProgressClasses","root","borderRadius","radius","overflow","backgroundColor","palette","semantic","fill","applyStyles","grey","boxShadow","customShadows","sunken","colorPrimary","bar","bar1","bar2","dashed","marginTop","StyledBox","Box","lineHeight","gap","spacing","alignItems","display","StyledTypography","Typography","color","text","LabelBox","justifyContent","minWidth","LinearProgress","value","label","showLabel","rest","labelId","useId","parsedLabel","useMemo","undefined","_jsxs","children","_jsx","flex","id","variant"],"mappings":"4VAWA,MAAMA,EAAuBC,EAAOC,EAAPD,EAA0B,EAAGE,YACjD,CACLC,OAAQ,EACR,CAAC,KAAKC,EAAsBC,QAAS,CACnCC,aAAcJ,EAAMK,OAAO,YAC3BC,SAAU,SACVC,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,gBAC1CV,EAAMW,YAAY,OAAQ,CAC3BJ,gBAAiBP,EAAMQ,QAAQI,KAAK,OAEtCC,UAAWb,EAAMc,eAAeC,QAElC,CAAC,KAAKb,EAAsBc,iBAAiBd,EAAsBe,OAAQ,CACzEV,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,oBAC1CV,EAAMW,YAAY,OAAQ,CAC3BJ,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,oBAGjD,CAAC,MAAMR,EAAsBgB,QAAS,CACpCd,aAAcJ,EAAMK,OAAO,YAC3BQ,UAAWb,EAAMc,eAAeC,QAElC,CAAC,MAAMb,EAAsBiB,QAAS,CACpCf,aAAcJ,EAAMK,OAAO,YAC3BQ,UAAWb,EAAMc,eAAeC,QAElC,CAAC,MAAMb,EAAsBkB,UAAW,CACtCC,UAAW,OAUXC,EAAYxB,EAAOyB,EAAPzB,EAAY,EAAGE,YAAO,CACtCwB,WAAY,OACZC,IAAKzB,EAAM0B,QAAQ,GACnBC,WAAY,SACZC,QAAS,WAGLC,EAAmB/B,EAAOgC,EAAPhC,EAAmB,EAAGE,YAAO,CACpD+B,MAAO/B,EAAMQ,QAAQC,SAASuB,KAAK,iBAG/BC,EAAWnC,EAAOyB,EAAPzB,EAAY,KAAA,CAC3B6B,WAAY,SACZC,QAAS,OACT3B,OAAQ,OACRiC,eAAgB,WAChBC,SAAU,WAUCC,EAA+D,EAAGC,QAAOC,QAAOC,eAAcC,MACzG,MAAMC,EAAUC,IACVC,EAAcC,GAAQ,IAAMN,SAAoBO,IAAVR,EAAsB,GAAGA,UAAWQ,IAAY,CAACP,EAAOD,IACpG,OACES,EAACxB,EAAS,CAAAyB,SAAA,CACRC,EAACzB,EAAG,CAAC0B,KAAM,EAACF,SACVC,EAACnD,iBACc0C,GAAaI,EAAcA,OAAcE,EAAS,kBAC9CN,GAAaI,EAAcF,OAAUI,KAClDL,EACJH,MAAOA,MAGVE,GACCS,EAACf,EAAQ,CAAAc,SACPC,EAACnB,EAAgB,CAACqB,GAAIT,EAASU,QAAQ,cAAaJ,SACjDJ"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/LinearProgress/index.tsx"],"sourcesContent":["import { useId, useMemo } from 'react';\n\nimport MuiLinearProgress, {\n  linearProgressClasses,\n  type LinearProgressProps as MuiLinearProgressProps,\n} from '@mui/material/LinearProgress';\n\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nconst StyledLinearProgress = styled(MuiLinearProgress)(({ theme }) => {\n  return {\n    height: 8,\n    [`&.${linearProgressClasses.root}`]: {\n      borderRadius: theme.radius['radius-8'],\n      overflow: 'hidden',\n      backgroundColor: theme.palette.semantic.fill['fill-weak'],\n      ...theme.applyStyles('dark', {\n        backgroundColor: theme.palette.grey[800],\n      }),\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`&.${linearProgressClasses.colorPrimary} .${linearProgressClasses.bar}`]: {\n      backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      ...theme.applyStyles('dark', {\n        backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      }),\n    },\n    [`& .${linearProgressClasses.bar1}`]: {\n      borderRadius: theme.radius['radius-8'],\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`& .${linearProgressClasses.bar2}`]: {\n      borderRadius: theme.radius['radius-8'],\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`& .${linearProgressClasses.dashed}`]: {\n      marginTop: 2,\n    },\n  };\n});\n\nexport interface LinearProgressProps extends MuiLinearProgressProps {\n  fdKey?: string;\n  label?: string;\n  showLabel?: boolean;\n}\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  lineHeight: '20px',\n  gap: theme.spacing(1),\n  alignItems: 'center',\n  display: 'flex',\n}));\n\nconst StyledTypography = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst LabelBox = styled(Box)(() => ({\n  alignItems: 'center',\n  display: 'flex',\n  height: '20px',\n  justifyContent: 'flex-end',\n  minWidth: '40px',\n}));\n\n/**\n * Props for the themed LinearProgress component.\n * Extends MUI's LinearProgressProps.\n * - label: Optional label text (falls back to percentage when `value` is provided).\n * - showLabel: When true, renders the label to the right of the bar.\n * - color: we don't support changing the color in our design\n */\nexport const LinearProgress: React.FC<Omit<LinearProgressProps, 'color'>> = ({\n  fdKey,\n  label,\n  showLabel,\n  value,\n  ...rest\n}) => {\n  const labelId = useId();\n  const parsedLabel = useMemo(() => label || (value !== undefined ? `${value}%` : undefined), [label, value]);\n  return (\n    <StyledBox>\n      <Box flex={1}>\n        <StyledLinearProgress\n          aria-label={!showLabel && parsedLabel ? parsedLabel : undefined}\n          aria-labelledby={showLabel && parsedLabel ? labelId : undefined}\n          {...rest}\n          data-fd={fdKey}\n          value={value}\n        />\n      </Box>\n      {showLabel && (\n        <LabelBox>\n          <StyledTypography id={labelId} variant=\"captionWeak\">\n            {parsedLabel}\n          </StyledTypography>\n        </LabelBox>\n      )}\n    </StyledBox>\n  );\n};\n\nexport default LinearProgress;\n\nexport { linearProgressClasses };\n"],"names":["StyledLinearProgress","styled","MuiLinearProgress","theme","height","linearProgressClasses","root","borderRadius","radius","overflow","backgroundColor","palette","semantic","fill","applyStyles","grey","boxShadow","customShadows","sunken","colorPrimary","bar","bar1","bar2","dashed","marginTop","StyledBox","Box","lineHeight","gap","spacing","alignItems","display","StyledTypography","Typography","color","text","LabelBox","justifyContent","minWidth","LinearProgress","fdKey","label","showLabel","value","rest","labelId","useId","parsedLabel","useMemo","undefined","_jsxs","children","_jsx","flex","id","variant"],"mappings":"4VAWA,MAAMA,EAAuBC,EAAOC,EAAPD,EAA0B,EAAGE,YACjD,CACLC,OAAQ,EACR,CAAC,KAAKC,EAAsBC,QAAS,CACnCC,aAAcJ,EAAMK,OAAO,YAC3BC,SAAU,SACVC,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,gBAC1CV,EAAMW,YAAY,OAAQ,CAC3BJ,gBAAiBP,EAAMQ,QAAQI,KAAK,OAEtCC,UAAWb,EAAMc,eAAeC,QAElC,CAAC,KAAKb,EAAsBc,iBAAiBd,EAAsBe,OAAQ,CACzEV,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,oBAC1CV,EAAMW,YAAY,OAAQ,CAC3BJ,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,oBAGjD,CAAC,MAAMR,EAAsBgB,QAAS,CACpCd,aAAcJ,EAAMK,OAAO,YAC3BQ,UAAWb,EAAMc,eAAeC,QAElC,CAAC,MAAMb,EAAsBiB,QAAS,CACpCf,aAAcJ,EAAMK,OAAO,YAC3BQ,UAAWb,EAAMc,eAAeC,QAElC,CAAC,MAAMb,EAAsBkB,UAAW,CACtCC,UAAW,OAWXC,EAAYxB,EAAOyB,EAAPzB,EAAY,EAAGE,YAAO,CACtCwB,WAAY,OACZC,IAAKzB,EAAM0B,QAAQ,GACnBC,WAAY,SACZC,QAAS,WAGLC,EAAmB/B,EAAOgC,EAAPhC,EAAmB,EAAGE,YAAO,CACpD+B,MAAO/B,EAAMQ,QAAQC,SAASuB,KAAK,iBAG/BC,EAAWnC,EAAOyB,EAAPzB,EAAY,KAAA,CAC3B6B,WAAY,SACZC,QAAS,OACT3B,OAAQ,OACRiC,eAAgB,WAChBC,SAAU,WAUCC,EAA+D,EAC1EC,QACAC,QACAC,YACAC,WACGC,MAEH,MAAMC,EAAUC,IACVC,EAAcC,GAAQ,IAAMP,SAAoBQ,IAAVN,EAAsB,GAAGA,UAAWM,IAAY,CAACR,EAAOE,IACpG,OACEO,EAACzB,EAAS,CAAA0B,SAAA,CACRC,EAAC1B,EAAG,CAAC2B,KAAM,EAACF,SACVC,EAACpD,EAAoB,CAAA,cACN0C,GAAaK,EAAcA,OAAcE,EAAS,kBAC9CP,GAAaK,EAAcF,OAAUI,KAClDL,EAAI,UACCJ,EACTG,MAAOA,MAGVD,GACCU,EAAChB,EAAQ,CAAAe,SACPC,EAACpB,EAAgB,CAACsB,GAAIT,EAASU,QAAQ,cAAaJ,SACjDJ"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material/FormControlLabel"),i=require("@mui/material/Switch"),a=require("@mui/material/styles");const o=a.styled(t)((({theme:e,$size:t="medium"})=>({color:e.palette.semantic.text["text-strong"],gap:"12px",margin:0,"& .MuiFormControlLabel-label":{...e.typography["small"===t?"captionWeak":"b1Weak"]}}))),l=a.styled(i)((({theme:e,$size:t="medium",checked:i})=>{const a="small"===t,o=a?24:32,l=a?24:32;return{width:a?48:64,height:o,padding:0,overflow:"visible","& .MuiSwitch-switchBase":{padding:0,transitionDuration:"200ms","&.Mui-checked":{transform:`translateX(${a?24:32}px)`,color:e.palette.semantic.fill["fill-white"],"& .MuiSwitch-thumb":{borderColor:e.palette.semantic.stroke["stroke-selected"]},"& + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],opacity:1},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"&.Mui-focusVisible + .MuiSwitch-track":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&.Mui-disabled .MuiSwitch-thumb":{opacity:.5,borderColor:e.palette.semantic.stroke["stroke-disabled"],backgroundColor:e.palette.semantic.background["background-raised"]},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"& .MuiSwitch-thumb":{width:l,height:l,backgroundColor:e.palette.semantic.background["background-raised"],border:`2px solid ${e.palette.semantic.stroke["stroke-strong"]}`,transition:e.transitions.create(["border-color"],{duration:200})},"& .MuiSwitch-track":{borderRadius:o,backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,boxShadow:i?"none":e.customShadows?.sunken,opacity:1,transition:e.transitions.create(["background-color","border-color","outline"],{duration:200})},"&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-press"]}}}));module.exports=({checked:t,disabled:i=!1,label:a,labelPlacement:r="end",onChange:s,size:c="medium",fdKey:d})=>a?e.jsx(o,{$size:c,control:e.jsx(l,{disableRipple:!0,$size:c,checked:t,"data-fd":d,disabled:i,onChange:s}),disabled:i,label:a,labelPlacement:r}):e.jsx(l,{disableRipple:!0,$size:c,checked:t,"data-fd":d,disabled:i,onChange:s});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/FormControlLabel"),i=require("@mui/material/Switch"),a=require("@mui/material/styles");const o=a.styled(t,{shouldForwardProp:e=>"$size"!==e})((({theme:e,$size:t="medium"})=>({color:e.palette.semantic.text["text-strong"],gap:"12px",margin:0,"& .MuiFormControlLabel-label":{...e.typography["small"===t?"captionWeak":"b1Weak"]}}))),r=a.styled(i,{shouldForwardProp:e=>"$size"!==e})((({theme:e,$size:t="medium",checked:i})=>{const a="small"===t,o=a?24:32,r=a?24:32;return{width:a?48:64,height:o,padding:0,overflow:"visible","& .MuiSwitch-switchBase":{padding:0,transitionDuration:"200ms","&.Mui-checked":{transform:`translateX(${a?24:32}px)`,color:e.palette.semantic.fill["fill-white"],"& .MuiSwitch-thumb":{borderColor:e.palette.semantic.stroke["stroke-selected"]},"& + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],opacity:1},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"&.Mui-focusVisible + .MuiSwitch-track":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&.Mui-disabled .MuiSwitch-thumb":{opacity:.5,borderColor:e.palette.semantic.stroke["stroke-disabled"],backgroundColor:e.palette.semantic.background["background-raised"]},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"& .MuiSwitch-thumb":{width:r,height:r,backgroundColor:e.palette.semantic.background["background-raised"],border:`2px solid ${e.palette.semantic.stroke["stroke-strong"]}`,transition:e.transitions.create(["border-color"],{duration:200})},"& .MuiSwitch-track":{borderRadius:o,backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,boxShadow:i?"none":e.customShadows?.sunken,opacity:1,transition:e.transitions.create(["background-color","border-color","outline"],{duration:200})},"&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-press"]}}})),l=({ariaLabel:t,checked:i,disabled:a=!1,fdKey:l,label:s,labelPlacement:c="end",onChange:d,size:n="medium"})=>s?e.jsx(o,{$size:n,control:e.jsx(r,{disableRipple:!0,$size:n,checked:i,"data-fd":l,disabled:a,onChange:d}),disabled:a,label:s,labelPlacement:c}):e.jsx(r,{disableRipple:!0,$size:n,checked:i,"data-fd":l,disabled:a,onChange:d,slotProps:{input:{"aria-label":t}}});exports.Switch=l,exports.default=l;
 //# sourceMappingURL=index.cjs.js.map

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

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

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

@@ -2,7 +2,12 @@ import { FormControlLabelProps } from '@mui/material/FormControlLabel';
 import { SwitchProps as SwitchProps$1 } from '@mui/material/Switch';
 import { ReactElement } from 'react';
 
+/**
+ * Props for the Switch component.
+ */
 interface SwitchProps {
+    /** Aria label for the switch if there is no label */
+    ariaLabel?: string;
     /** Whether the switch is checked (on) or unchecked (off) */
     checked?: boolean;
     /** Whether the switch is disabled and cannot be interacted with */
@@ -18,7 +23,13 @@ interface SwitchProps {
     /** Test ID for the switch element */
     fdKey: string;
 }
-declare const Switch: ({ checked, disabled, label, labelPlacement, onChange, size, fdKey, }: SwitchProps) => ReactElement;
+/**
+ * A customizable Switch component.
+ *
+ * @param props - The component props
+ * @returns The rendered Switch component
+ */
+declare const Switch: ({ ariaLabel, checked, disabled, fdKey, label, labelPlacement, onChange, size, }: SwitchProps) => ReactElement;
 
-export { Switch as default };
+export { Switch, Switch as default };
 export type { SwitchProps };

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

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/FormControlLabel";import i from"@mui/material/Switch";import{styled as o}from"@mui/material/styles";const a=o(t)((({theme:e,$size:t="medium"})=>({color:e.palette.semantic.text["text-strong"],gap:"12px",margin:0,"& .MuiFormControlLabel-label":{...e.typography["small"===t?"captionWeak":"b1Weak"]}}))),l=o(i)((({theme:e,$size:t="medium",checked:i})=>{const o="small"===t,a=o?24:32,l=o?24:32;return{width:o?48:64,height:a,padding:0,overflow:"visible","& .MuiSwitch-switchBase":{padding:0,transitionDuration:"200ms","&.Mui-checked":{transform:`translateX(${o?24:32}px)`,color:e.palette.semantic.fill["fill-white"],"& .MuiSwitch-thumb":{borderColor:e.palette.semantic.stroke["stroke-selected"]},"& + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],opacity:1},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"&.Mui-focusVisible + .MuiSwitch-track":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&.Mui-disabled .MuiSwitch-thumb":{opacity:.5,borderColor:e.palette.semantic.stroke["stroke-disabled"],backgroundColor:e.palette.semantic.background["background-raised"]},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"& .MuiSwitch-thumb":{width:l,height:l,backgroundColor:e.palette.semantic.background["background-raised"],border:`2px solid ${e.palette.semantic.stroke["stroke-strong"]}`,transition:e.transitions.create(["border-color"],{duration:200})},"& .MuiSwitch-track":{borderRadius:a,backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,boxShadow:i?"none":e.customShadows?.sunken,opacity:1,transition:e.transitions.create(["background-color","border-color","outline"],{duration:200})},"&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-press"]}}})),r=({checked:t,disabled:i=!1,label:o,labelPlacement:r="end",onChange:s,size:c="medium",fdKey:d})=>o?e(a,{$size:c,control:e(l,{disableRipple:!0,$size:c,checked:t,"data-fd":d,disabled:i,onChange:s}),disabled:i,label:o,labelPlacement:r}):e(l,{disableRipple:!0,$size:c,checked:t,"data-fd":d,disabled:i,onChange:s});export{r as default};
+import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/FormControlLabel";import i from"@mui/material/Switch";import{styled as o}from"@mui/material/styles";const a=o(t,{shouldForwardProp:e=>"$size"!==e})((({theme:e,$size:t="medium"})=>({color:e.palette.semantic.text["text-strong"],gap:"12px",margin:0,"& .MuiFormControlLabel-label":{...e.typography["small"===t?"captionWeak":"b1Weak"]}}))),r=o(i,{shouldForwardProp:e=>"$size"!==e})((({theme:e,$size:t="medium",checked:i})=>{const o="small"===t,a=o?24:32,r=o?24:32;return{width:o?48:64,height:a,padding:0,overflow:"visible","& .MuiSwitch-switchBase":{padding:0,transitionDuration:"200ms","&.Mui-checked":{transform:`translateX(${o?24:32}px)`,color:e.palette.semantic.fill["fill-white"],"& .MuiSwitch-thumb":{borderColor:e.palette.semantic.stroke["stroke-selected"]},"& + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],opacity:1},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"&.Mui-focusVisible + .MuiSwitch-track":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&.Mui-disabled .MuiSwitch-thumb":{opacity:.5,borderColor:e.palette.semantic.stroke["stroke-disabled"],backgroundColor:e.palette.semantic.background["background-raised"]},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"& .MuiSwitch-thumb":{width:r,height:r,backgroundColor:e.palette.semantic.background["background-raised"],border:`2px solid ${e.palette.semantic.stroke["stroke-strong"]}`,transition:e.transitions.create(["border-color"],{duration:200})},"& .MuiSwitch-track":{borderRadius:a,backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,boxShadow:i?"none":e.customShadows?.sunken,opacity:1,transition:e.transitions.create(["background-color","border-color","outline"],{duration:200})},"&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-press"]}}})),l=({ariaLabel:t,checked:i,disabled:o=!1,fdKey:l,label:s,labelPlacement:c="end",onChange:d,size:n="medium"})=>s?e(a,{$size:n,control:e(r,{disableRipple:!0,$size:n,checked:i,"data-fd":l,disabled:o,onChange:d}),disabled:o,label:s,labelPlacement:c}):e(r,{disableRipple:!0,$size:n,checked:i,"data-fd":l,disabled:o,onChange:d,slotProps:{input:{"aria-label":t}}});export{l as Switch,l as default};
 //# sourceMappingURL=index.js.map