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

@flipdish/portal-library 8.0.2 → 8.1.0

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

Files changed (336) hide show

package/dist/components/atoms/Card/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import Badge from '../Badge/index.js';
+import { Badge } from '../Badge/index.js';
 import IconContainer from '../IconContainer/index.js';
 interface CardProps {

package/dist/components/atoms/Checkbox/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import i from"@mui/material/Box";import t from"@mui/material/Checkbox";import o from"@mui/material/FormControlLabel";import{styled as l}from"@mui/material/styles";import r from"../../../icons/Remove/index.js";import a from"../../../icons/Tick/index.js";import{fontFamily as s}from"../../../themes/tokens/typography/font-family.js";import{getMobileTextStyle as n,typography as d}from"../../../themes/typography.js";const p=l(i,{shouldForwardProp:e=>"size"!==e&&"valid"!==e&&"disabled"!==e})((({theme:e,size:i,valid:t,disabled:o})=>{const l=e.spacing("small"===i?3:4);return{width:l,height:l,borderRadius:e.radius["radius-4"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],position:"relative",...o&&{border:`1px solid ${e.palette.semantic.stroke["stroke-disabled"]}`,backgroundColor:e.palette.semantic.fill["fill-inverse-strong"]},...!t&&!o&&{border:`2px solid ${e.palette.semantic.stroke["stroke-error-strong"]}`,backgroundColor:e.palette.semantic.fill["fill-error-weak"]},...!o&&{"&::before":{content:'""',width:l,height:l,inset:t?"-1px 0 0 -1px":"-2px 0 0 -2px",position:"absolute",borderRadius:e.radius["radius-4"],pointerEvents:"none"},"input:hover ~ &::before":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"input:active ~ &::before":{backgroundColor:e.palette.semantic.fill["fill-press"]},"input:focus ~ &":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"}}}})),c=l(i,{shouldForwardProp:e=>"size"!==e&&"valid"!==e&&"disabled"!==e})((({theme:e,size:i,valid:t,disabled:o})=>{const l=e.spacing("small"===i?3:4);return{width:l,height:l,borderRadius:e.radius["radius-4"],backgroundColor:e.palette.semantic.fill["fill-selected"],position:"relative",...o&&{backgroundColor:e.palette.semantic.fill["fill-disabled"]},...!t&&!o&&{backgroundColor:e.palette.semantic.fill["fill-error-strong"]},...!o&&{"&::before":{content:'""',inset:0,position:"absolute",borderRadius:e.radius["radius-4"],pointerEvents:"none"},"input:hover ~ &::before":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"input:active ~ &::before":{backgroundColor:e.palette.semantic.fill["fill-press"]},"input:focus ~ &":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"}},display:"flex",alignItems:"center",justifyContent:"center","& svg":{width:l,height:l,color:e.palette.semantic.fill["fill-inverse-strong"],flexShrink:0,display:"block",overflow:"visible","& g, & path":{transform:"scale(1.08)",transformOrigin:"center"}}}})),m=l(o,{shouldForwardProp:e=>!["size","valid"].includes(e)})((({theme:e,size:i})=>({alignItems:"center",display:"flex",justifyContent:"flex-start",margin:0,padding:0,..."small"===i&&{gap:e.spacing(1)},..."medium"===i&&{gap:e.spacing(1.5)},"& .MuiTypography-root":{..."small"===i&&{...d.captionWeak,[e.breakpoints.down("tablet")]:{fontFamily:s.mobile.body,...n("caption")}}}}))),f=l(t,{shouldForwardProp:e=>"valid"!==e})((({theme:e,valid:i,disabled:t})=>({padding:0,margin:0,...!i&&!t&&{color:e.palette.semantic.fill["fill-error-strong"],"&.Mui-checked":{color:e.palette.semantic.fill["fill-error-strong"]}}}))),u=({fdKey:i,label:t,size:o="medium",valid:l=!0,disabled:s,...n})=>e(m,{control:e(f,{disableFocusRipple:!0,disableRipple:!0,disableTouchRipple:!0,checkedIcon:e(c,{disabled:s,size:o,valid:l,children:e(a,{})}),"data-fd":i,icon:e(p,{disabled:s,size:o,valid:l}),indeterminateIcon:e(c,{disabled:s,size:o,valid:l,children:e(r,{})}),size:o,valid:l,...n}),"data-fd":`${i}-label`,disabled:s,label:t,size:o});export{u as default};
+import{jsx as e}from"react/jsx-runtime";import i from"@mui/material/Box";import t from"@mui/material/Checkbox";import o from"@mui/material/FormControlLabel";import{styled as l}from"@mui/material/styles";import r from"../../../icons/Remove/index.js";import a from"../../../icons/Tick/index.js";import{fontFamily as s}from"../../../themes/tokens/typography/font-family.js";import{typography as n,getMobileTextStyle as d}from"../../../themes/typography.js";const p=l(i,{shouldForwardProp:e=>"size"!==e&&"valid"!==e&&"disabled"!==e})((({theme:e,size:i,valid:t,disabled:o})=>{const l=e.spacing("small"===i?3:4);return{width:l,height:l,borderRadius:e.radius["radius-4"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],position:"relative",...o&&{border:`1px solid ${e.palette.semantic.stroke["stroke-disabled"]}`,backgroundColor:e.palette.semantic.fill["fill-inverse-strong"]},...!t&&!o&&{border:`2px solid ${e.palette.semantic.stroke["stroke-error-strong"]}`,backgroundColor:e.palette.semantic.fill["fill-error-weak"]},...!o&&{"&::before":{content:'""',width:l,height:l,inset:t?"-1px 0 0 -1px":"-2px 0 0 -2px",position:"absolute",borderRadius:e.radius["radius-4"],pointerEvents:"none"},"input:hover ~ &::before":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"input:active ~ &::before":{backgroundColor:e.palette.semantic.fill["fill-press"]},"input:focus ~ &":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"}}}})),c=l(i,{shouldForwardProp:e=>"size"!==e&&"valid"!==e&&"disabled"!==e})((({theme:e,size:i,valid:t,disabled:o})=>{const l=e.spacing("small"===i?3:4);return{width:l,height:l,borderRadius:e.radius["radius-4"],backgroundColor:e.palette.semantic.fill["fill-selected"],position:"relative",...o&&{backgroundColor:e.palette.semantic.fill["fill-disabled"]},...!t&&!o&&{backgroundColor:e.palette.semantic.fill["fill-error-strong"]},...!o&&{"&::before":{content:'""',inset:0,position:"absolute",borderRadius:e.radius["radius-4"],pointerEvents:"none"},"input:hover ~ &::before":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"input:active ~ &::before":{backgroundColor:e.palette.semantic.fill["fill-press"]},"input:focus ~ &":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"}},display:"flex",alignItems:"center",justifyContent:"center","& svg":{width:l,height:l,color:e.palette.semantic.fill["fill-inverse-strong"],flexShrink:0,display:"block",overflow:"visible","& g, & path":{transform:"scale(1.08)",transformOrigin:"center"}}}})),m=l(o,{shouldForwardProp:e=>!["size","valid"].includes(e)})((({theme:e,size:i})=>({alignItems:"center",display:"flex",justifyContent:"flex-start",margin:0,padding:0,..."small"===i&&{gap:e.spacing(1)},..."medium"===i&&{gap:e.spacing(1.5)},"& .MuiTypography-root":{..."small"===i&&{...n.captionWeak,[e.breakpoints.down("tablet")]:{fontFamily:s.mobile.body,...d("caption")}}}}))),f=l(t,{shouldForwardProp:e=>"valid"!==e})((({theme:e,valid:i,disabled:t})=>({padding:0,margin:0,...!i&&!t&&{color:e.palette.semantic.fill["fill-error-strong"],"&.Mui-checked":{color:e.palette.semantic.fill["fill-error-strong"]}}}))),u=({fdKey:i,label:t,size:o="medium",valid:l=!0,disabled:s,...n})=>e(m,{control:e(f,{disableFocusRipple:!0,disableRipple:!0,disableTouchRipple:!0,checkedIcon:e(c,{disabled:s,size:o,valid:l,children:e(a,{})}),"data-fd":i,icon:e(p,{disabled:s,size:o,valid:l}),indeterminateIcon:e(c,{disabled:s,size:o,valid:l,children:e(r,{})}),size:o,valid:l,...n}),"data-fd":`${i}-label`,disabled:s,label:t,size:o});export{u as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("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 CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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