@flipdish/portal-library 6.0.2 → 7.1.0

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Chip"),a=require("@mui/material/styles");function o(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=o(t);const l=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"]},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"]},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"]},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"]},information:{backgroundColor:t.palette.semantic.fill["fill-information-weak"],borderColor:t.palette.semantic.stroke["stroke-information-weak"],color:t.palette.semantic.text["text-information"]},brand:{backgroundColor:t.palette.semantic.fill["fill-primary-weak"],borderColor:t.palette.semantic.stroke["stroke-primary-weak"],color:t.palette.semantic.text["text-primary"]}}[e]),n=a.styled(r,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t,size:r})=>({fontSize:"small"===r?e.typography.caption.fontSize:e.typography.body1.fontSize,lineHeight:"small"===r?e.typography.caption.lineHeight:e.typography.body1.lineHeight,fontWeight:400,padding:e.spacing(0,1),borderRadius:"small"===r?e.radius["radius-4"]:e.radius["radius-8"],borderWidth:"1px",borderStyle:"solid","& .MuiChip-label":{padding:e.spacing(0,.5)},"& .MuiChip-icon":{paddingRight:e.spacing(.5),color:"neutral"===t?e.palette.semantic.icon["icon-strong"]:"inherit",fontSize:"inherit"},...l(t,e)}))),s=i.memo((({label:t,tone:r="neutral",size:a="medium",icon:o,className:i,"data-testid":l})=>e.jsx(n,{className:i,"data-testid":l,icon:o,label:t,size:a,tone:r})));s.displayName="Badge",exports.BADGE_TONES=["neutral","error","warning","success","information","brand"],exports.default=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Chip"),o=require("@mui/material/styles"),a=require("../../../icons/Cancel/index.cjs.js");function i(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=i(t);const l=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"]},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"]},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"]},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"]},information:{backgroundColor:t.palette.semantic.fill["fill-information-weak"],borderColor:t.palette.semantic.stroke["stroke-information-weak"],color:t.palette.semantic.text["text-information"]},brand:{backgroundColor:t.palette.semantic.fill["fill-primary-weak"],borderColor:t.palette.semantic.stroke["stroke-primary-weak"],color:t.palette.semantic.text["text-primary"]}}[e]),s=o.styled(r,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t,size:r})=>({fontSize:"small"===r?e.typography.caption.fontSize:e.typography.body1.fontSize,lineHeight:"small"===r?e.typography.caption.lineHeight:e.typography.body1.lineHeight,fontWeight:400,padding:e.spacing(0,1),borderRadius:e.radius["radius-16"],borderWidth:"1px",borderStyle:"solid","& .MuiChip-label":{padding:e.spacing(0,.5)},"& .MuiChip-icon":{paddingRight:e.spacing(.5),color:"neutral"===t?e.palette.semantic.icon["icon-strong"]:"inherit",fontSize:"inherit"},"& .MuiChip-deleteIcon":{color:e.palette.semantic.icon["icon-strong"],margin:0},...l(t,e)}))),c=n.memo((({className:t,icon:r,label:o,onDismiss:i,size:n="medium",tone:l="neutral","data-testid":c})=>e.jsx(s,{className:t,"data-testid":c,deleteIcon:e.jsx(a,{size:"sm"}),icon:r,label:o,onDelete:i,size:n,tone:l})));c.displayName="Badge",exports.BADGE_TONES=["neutral","error","warning","success","information","brand"],exports.Badge=c,exports.default=c;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', 'information', 'brand'] as const;\nexport type BadgeTone = (typeof BADGE_TONES)[number];\n\n/** Props for the Badge component */\nexport interface BadgeProps {\n  /** Text label displayed in the badge */\n  label: string;\n  /** Visual tone/color of the badge */\n  tone?: BadgeTone;\n  /** Size of the badge */\n  size?: MuiChipProps['size'];\n  /** Optional icon to display within the badge */\n  icon?: MuiChipProps['icon'];\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n}\n\ninterface StyledBadgeProps {\n  tone: BadgeTone;\n  size: MuiChipProps['size'];\n}\n\n/** Color mapping for different tones */\nconst getToneStyles = (\n  tone: BadgeTone,\n  theme: Theme,\n): {\n  backgroundColor: string;\n  borderColor: string;\n  color: string;\n} => {\n  const colorMap = {\n    neutral: {\n      backgroundColor: theme.palette.semantic.fill['fill-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-weak'],\n      color: theme.palette.semantic.text['text-strong'],\n    },\n    error: {\n      backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-error-weak'],\n      color: theme.palette.semantic.text['text-error'],\n    },\n    warning: {\n      backgroundColor: theme.palette.semantic.fill['fill-warning-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-warning-weak'],\n      color: theme.palette.semantic.text['text-warning'],\n    },\n    success: {\n      backgroundColor: theme.palette.semantic.fill['fill-success-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-success-weak'],\n      color: theme.palette.semantic.text['text-success'],\n    },\n    information: {\n      backgroundColor: theme.palette.semantic.fill['fill-information-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-information-weak'],\n      color: theme.palette.semantic.text['text-information'],\n    },\n    brand: {\n      backgroundColor: theme.palette.semantic.fill['fill-primary-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-primary-weak'],\n      color: theme.palette.semantic.text['text-primary'],\n    },\n  } satisfies Record<BadgeTone, object>;\n\n  return colorMap[tone];\n};\n\nconst StyledBadge = styled(MuiChip, {\n  shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledBadgeProps>(({ theme, tone, size }) => ({\n  fontSize: size === 'small' ? theme.typography.caption.fontSize : theme.typography.body1.fontSize,\n  lineHeight: size === 'small' ? theme.typography.caption.lineHeight : theme.typography.body1.lineHeight,\n  fontWeight: 400,\n  padding: theme.spacing(0, 1),\n  borderRadius: size === 'small' ? theme.radius['radius-4'] : theme.radius['radius-8'],\n  borderWidth: '1px',\n  borderStyle: 'solid',\n  '& .MuiChip-label': {\n    padding: theme.spacing(0, 0.5),\n  },\n  '& .MuiChip-icon': {\n    paddingRight: theme.spacing(0.5),\n    color: tone === 'neutral' ? theme.palette.semantic.icon['icon-strong'] : 'inherit',\n    fontSize: 'inherit',\n  },\n  ...getToneStyles(tone, theme),\n}));\n\n/**\n * Badge component is used to highlight and categorize information using short text labels.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional icon.\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 Badge = React.memo(\n  ({\n    label,\n    tone = 'neutral',\n    size = 'medium',\n    icon,\n    className,\n    'data-testid': dataTestId,\n  }: BadgeProps): JSX.Element => (\n    <StyledBadge\n      className={className}\n      data-testid={dataTestId}\n      icon={icon}\n      label={label}\n      size={size}\n      tone={tone}\n    />\n  ),\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["getToneStyles","tone","theme","neutral","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","error","warning","success","information","brand","StyledBadge","styled","MuiChip","shouldForwardProp","prop","includes","size","fontSize","typography","caption","body1","lineHeight","fontWeight","padding","spacing","borderRadius","radius","borderWidth","borderStyle","paddingRight","icon","Badge","React","memo","label","className","dataTestId","_jsx","displayName"],"mappings":"0cAMO,MAyBDA,EAAgB,CACpBC,EACAC,KAMiB,CACfC,QAAS,CACPC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,aAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,eAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBAErCC,MAAO,CACLR,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,mBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,qBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,eAErCE,QAAS,CACPT,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,iBAErCG,QAAS,CACPV,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,iBAErCI,YAAa,CACXX,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,yBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,2BAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,qBAErCK,MAAO,CACLZ,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,kBAIvBV,IAGZgB,EAAcC,EAAAA,OAAOC,EAAS,CAClCC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD9BH,EAEC,EAAGhB,QAAOD,OAAMsB,WAAM,CACzCC,SAAmB,UAATD,EAAmBrB,EAAMuB,WAAWC,QAAQF,SAAWtB,EAAMuB,WAAWE,MAAMH,SACxFI,WAAqB,UAATL,EAAmBrB,EAAMuB,WAAWC,QAAQE,WAAa1B,EAAMuB,WAAWE,MAAMC,WAC5FC,WAAY,IACZC,QAAS5B,EAAM6B,QAAQ,EAAG,GAC1BC,aAAuB,UAATT,EAAmBrB,EAAM+B,OAAO,YAAc/B,EAAM+B,OAAO,YACzEC,YAAa,MACbC,YAAa,QACb,mBAAoB,CAClBL,QAAS5B,EAAM6B,QAAQ,EAAG,KAE5B,kBAAmB,CACjBK,aAAclC,EAAM6B,QAAQ,IAC5BrB,MAAgB,YAATT,EAAqBC,EAAMG,QAAQC,SAAS+B,KAAK,eAAiB,UACzEb,SAAU,cAETxB,EAAcC,EAAMC,OAYnBoC,EAAQC,EAAMC,MAClB,EACEC,QACAxC,OAAO,UACPsB,OAAO,SACPc,OACAK,YACA,cAAeC,KAEfC,EAAAA,IAAC3B,EAAW,CACVyB,UAAWA,EAAS,cACPC,EACbN,KAAMA,EACNI,MAAOA,EACPlB,KAAMA,EACNtB,KAAMA,MAKZqC,EAAMO,YAAc,4BAvHO,CAAC,UAAW,QAAS,UAAW,UAAW,cAAe"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\nimport CancelIcon from '@fd/icons/Cancel';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', 'information', 'brand'] as const;\nexport type BadgeTone = (typeof BADGE_TONES)[number];\n\n/** Props for the Badge component */\nexport interface BadgeProps {\n  /** Additional CSS class names */\n  className?: string;\n  /** Optional icon to display within the badge */\n  icon?: MuiChipProps['icon'];\n  /** Text label displayed in the badge */\n  label: string;\n  /** Visual tone/color of the badge */\n  tone?: BadgeTone;\n  /** Size of the badge */\n  size?: MuiChipProps['size'];\n  /** Callback function when the badge is dismissed */\n  onDismiss?: MuiChipProps['onDelete'];\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n}\n\ninterface StyledBadgeProps {\n  tone: BadgeTone;\n  size: MuiChipProps['size'];\n}\n\n/** Color mapping for different tones */\nconst getToneStyles = (\n  tone: BadgeTone,\n  theme: Theme,\n): {\n  backgroundColor: string;\n  borderColor: string;\n  color: string;\n} => {\n  const colorMap = {\n    neutral: {\n      backgroundColor: theme.palette.semantic.fill['fill-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-weak'],\n      color: theme.palette.semantic.text['text-strong'],\n    },\n    error: {\n      backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-error-weak'],\n      color: theme.palette.semantic.text['text-error'],\n    },\n    warning: {\n      backgroundColor: theme.palette.semantic.fill['fill-warning-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-warning-weak'],\n      color: theme.palette.semantic.text['text-warning'],\n    },\n    success: {\n      backgroundColor: theme.palette.semantic.fill['fill-success-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-success-weak'],\n      color: theme.palette.semantic.text['text-success'],\n    },\n    information: {\n      backgroundColor: theme.palette.semantic.fill['fill-information-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-information-weak'],\n      color: theme.palette.semantic.text['text-information'],\n    },\n    brand: {\n      backgroundColor: theme.palette.semantic.fill['fill-primary-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-primary-weak'],\n      color: theme.palette.semantic.text['text-primary'],\n    },\n  } satisfies Record<BadgeTone, object>;\n\n  return colorMap[tone];\n};\n\nconst StyledBadge = styled(MuiChip, {\n  shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledBadgeProps>(({ theme, tone, size }) => ({\n  fontSize: size === 'small' ? theme.typography.caption.fontSize : theme.typography.body1.fontSize,\n  lineHeight: size === 'small' ? theme.typography.caption.lineHeight : theme.typography.body1.lineHeight,\n  fontWeight: 400,\n  padding: theme.spacing(0, 1),\n  borderRadius: theme.radius['radius-16'],\n  borderWidth: '1px',\n  borderStyle: 'solid',\n\n  '& .MuiChip-label': {\n    padding: theme.spacing(0, 0.5),\n  },\n  '& .MuiChip-icon': {\n    paddingRight: theme.spacing(0.5),\n    color: tone === 'neutral' ? theme.palette.semantic.icon['icon-strong'] : 'inherit',\n    fontSize: 'inherit',\n  },\n  '& .MuiChip-deleteIcon': {\n    color: theme.palette.semantic.icon['icon-strong'],\n    margin: 0,\n  },\n  ...getToneStyles(tone, theme),\n}));\n\n/**\n * Badge component is used to highlight and categorize information using short text labels.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional icon.\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 */\nexport const Badge = React.memo(\n  ({\n    className,\n    icon,\n    label,\n    onDismiss,\n    size = 'medium',\n    tone = 'neutral',\n    'data-testid': dataTestId,\n  }: BadgeProps): JSX.Element => (\n    <StyledBadge\n      className={className}\n      data-testid={dataTestId}\n      deleteIcon={<CancelIcon size=\"sm\" />}\n      icon={icon}\n      label={label}\n      onDelete={onDismiss}\n      size={size}\n      tone={tone}\n    />\n  ),\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["getToneStyles","tone","theme","neutral","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","error","warning","success","information","brand","StyledBadge","styled","MuiChip","shouldForwardProp","prop","includes","size","fontSize","typography","caption","body1","lineHeight","fontWeight","padding","spacing","borderRadius","radius","borderWidth","borderStyle","paddingRight","icon","margin","Badge","React","memo","className","label","onDismiss","dataTestId","_jsx","deleteIcon","CancelIcon","onDelete","displayName"],"mappings":"0fAQO,MA2BDA,EAAgB,CACpBC,EACAC,KAMiB,CACfC,QAAS,CACPC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,aAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,eAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBAErCC,MAAO,CACLR,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,mBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,qBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,eAErCE,QAAS,CACPT,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,iBAErCG,QAAS,CACPV,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,iBAErCI,YAAa,CACXX,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,yBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,2BAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,qBAErCK,MAAO,CACLZ,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,kBAIvBV,IAGZgB,EAAcC,EAAAA,OAAOC,EAAS,CAClCC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD9BH,EAEC,EAAGhB,QAAOD,OAAMsB,WAAM,CACzCC,SAAmB,UAATD,EAAmBrB,EAAMuB,WAAWC,QAAQF,SAAWtB,EAAMuB,WAAWE,MAAMH,SACxFI,WAAqB,UAATL,EAAmBrB,EAAMuB,WAAWC,QAAQE,WAAa1B,EAAMuB,WAAWE,MAAMC,WAC5FC,WAAY,IACZC,QAAS5B,EAAM6B,QAAQ,EAAG,GAC1BC,aAAc9B,EAAM+B,OAAO,aAC3BC,YAAa,MACbC,YAAa,QAEb,mBAAoB,CAClBL,QAAS5B,EAAM6B,QAAQ,EAAG,KAE5B,kBAAmB,CACjBK,aAAclC,EAAM6B,QAAQ,IAC5BrB,MAAgB,YAATT,EAAqBC,EAAMG,QAAQC,SAAS+B,KAAK,eAAiB,UACzEb,SAAU,WAEZ,wBAAyB,CACvBd,MAAOR,EAAMG,QAAQC,SAAS+B,KAAK,eACnCC,OAAQ,MAEPtC,EAAcC,EAAMC,OAYZqC,EAAQC,EAAMC,MACzB,EACEC,YACAL,OACAM,QACAC,YACArB,OAAO,SACPtB,OAAO,UACP,cAAe4C,KAEfC,EAAAA,IAAC7B,EAAW,CACVyB,UAAWA,EAAS,cACPG,EACbE,WAAYD,EAAAA,IAACE,EAAU,CAACzB,KAAK,OAC7Bc,KAAMA,EACNM,MAAOA,EACPM,SAAUL,EACVrB,KAAMA,EACNtB,KAAMA,MAKZsC,EAAMW,YAAc,4BAjIO,CAAC,UAAW,QAAS,UAAW,UAAW,cAAe"}

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

@@ -6,16 +6,18 @@ declare const BADGE_TONES: readonly ["neutral", "error", "warning", "success", "
 type BadgeTone = (typeof BADGE_TONES)[number];
 /** Props for the Badge component */
 interface BadgeProps {
+    /** Additional CSS class names */
+    className?: string;
+    /** Optional icon to display within the badge */
+    icon?: ChipProps['icon'];
     /** Text label displayed in the badge */
     label: string;
     /** Visual tone/color of the badge */
     tone?: BadgeTone;
     /** Size of the badge */
     size?: ChipProps['size'];
-    /** Optional icon to display within the badge */
-    icon?: ChipProps['icon'];
-    /** Additional CSS class names */
-    className?: string;
+    /** Callback function when the badge is dismissed */
+    onDismiss?: ChipProps['onDelete'];
     /** Test ID for testing and automation */
     'data-testid'?: string;
 }
@@ -28,7 +30,7 @@ interface BadgeProps {
  * when the component's props haven't changed, which is beneficial for components
  * that may be used frequently throughout the application.
  */
-declare const Badge: react.MemoExoticComponent<({ label, tone, size, icon, className, "data-testid": dataTestId, }: BadgeProps) => JSX.Element>;
+declare const Badge: react.MemoExoticComponent<({ className, icon, label, onDismiss, size, tone, "data-testid": dataTestId, }: BadgeProps) => JSX.Element>;
 
-export { BADGE_TONES, Badge as default };
+export { BADGE_TONES, Badge, Badge as default };
 export type { BadgeProps, BadgeTone };

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

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import*as t from"react";import r from"@mui/material/Chip";import{styled as a}from"@mui/material/styles";const o=["neutral","error","warning","success","information","brand"],i=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"]},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"]},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"]},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"]},information:{backgroundColor:t.palette.semantic.fill["fill-information-weak"],borderColor:t.palette.semantic.stroke["stroke-information-weak"],color:t.palette.semantic.text["text-information"]},brand:{backgroundColor:t.palette.semantic.fill["fill-primary-weak"],borderColor:t.palette.semantic.stroke["stroke-primary-weak"],color:t.palette.semantic.text["text-primary"]}}[e]),l=a(r,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t,size:r})=>({fontSize:"small"===r?e.typography.caption.fontSize:e.typography.body1.fontSize,lineHeight:"small"===r?e.typography.caption.lineHeight:e.typography.body1.lineHeight,fontWeight:400,padding:e.spacing(0,1),borderRadius:"small"===r?e.radius["radius-4"]:e.radius["radius-8"],borderWidth:"1px",borderStyle:"solid","& .MuiChip-label":{padding:e.spacing(0,.5)},"& .MuiChip-icon":{paddingRight:e.spacing(.5),color:"neutral"===t?e.palette.semantic.icon["icon-strong"]:"inherit",fontSize:"inherit"},...i(t,e)}))),n=t.memo((({label:t,tone:r="neutral",size:a="medium",icon:o,className:i,"data-testid":n})=>e(l,{className:i,"data-testid":n,icon:o,label:t,size:a,tone:r})));n.displayName="Badge";export{o as BADGE_TONES,n as default};
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import o from"@mui/material/Chip";import{styled as r}from"@mui/material/styles";import a from"../../../icons/Cancel/index.js";const i=["neutral","error","warning","success","information","brand"],l=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"]},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"]},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"]},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"]},information:{backgroundColor:t.palette.semantic.fill["fill-information-weak"],borderColor:t.palette.semantic.stroke["stroke-information-weak"],color:t.palette.semantic.text["text-information"]},brand:{backgroundColor:t.palette.semantic.fill["fill-primary-weak"],borderColor:t.palette.semantic.stroke["stroke-primary-weak"],color:t.palette.semantic.text["text-primary"]}}[e]),n=r(o,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t,size:o})=>({fontSize:"small"===o?e.typography.caption.fontSize:e.typography.body1.fontSize,lineHeight:"small"===o?e.typography.caption.lineHeight:e.typography.body1.lineHeight,fontWeight:400,padding:e.spacing(0,1),borderRadius:e.radius["radius-16"],borderWidth:"1px",borderStyle:"solid","& .MuiChip-label":{padding:e.spacing(0,.5)},"& .MuiChip-icon":{paddingRight:e.spacing(.5),color:"neutral"===t?e.palette.semantic.icon["icon-strong"]:"inherit",fontSize:"inherit"},"& .MuiChip-deleteIcon":{color:e.palette.semantic.icon["icon-strong"],margin:0},...l(t,e)}))),s=t.memo((({className:t,icon:o,label:r,onDismiss:i,size:l="medium",tone:s="neutral","data-testid":c})=>e(n,{className:t,"data-testid":c,deleteIcon:e(a,{size:"sm"}),icon:o,label:r,onDelete:i,size:l,tone:s})));s.displayName="Badge";export{i as BADGE_TONES,s as Badge,s as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', 'information', 'brand'] as const;\nexport type BadgeTone = (typeof BADGE_TONES)[number];\n\n/** Props for the Badge component */\nexport interface BadgeProps {\n  /** Text label displayed in the badge */\n  label: string;\n  /** Visual tone/color of the badge */\n  tone?: BadgeTone;\n  /** Size of the badge */\n  size?: MuiChipProps['size'];\n  /** Optional icon to display within the badge */\n  icon?: MuiChipProps['icon'];\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n}\n\ninterface StyledBadgeProps {\n  tone: BadgeTone;\n  size: MuiChipProps['size'];\n}\n\n/** Color mapping for different tones */\nconst getToneStyles = (\n  tone: BadgeTone,\n  theme: Theme,\n): {\n  backgroundColor: string;\n  borderColor: string;\n  color: string;\n} => {\n  const colorMap = {\n    neutral: {\n      backgroundColor: theme.palette.semantic.fill['fill-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-weak'],\n      color: theme.palette.semantic.text['text-strong'],\n    },\n    error: {\n      backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-error-weak'],\n      color: theme.palette.semantic.text['text-error'],\n    },\n    warning: {\n      backgroundColor: theme.palette.semantic.fill['fill-warning-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-warning-weak'],\n      color: theme.palette.semantic.text['text-warning'],\n    },\n    success: {\n      backgroundColor: theme.palette.semantic.fill['fill-success-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-success-weak'],\n      color: theme.palette.semantic.text['text-success'],\n    },\n    information: {\n      backgroundColor: theme.palette.semantic.fill['fill-information-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-information-weak'],\n      color: theme.palette.semantic.text['text-information'],\n    },\n    brand: {\n      backgroundColor: theme.palette.semantic.fill['fill-primary-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-primary-weak'],\n      color: theme.palette.semantic.text['text-primary'],\n    },\n  } satisfies Record<BadgeTone, object>;\n\n  return colorMap[tone];\n};\n\nconst StyledBadge = styled(MuiChip, {\n  shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledBadgeProps>(({ theme, tone, size }) => ({\n  fontSize: size === 'small' ? theme.typography.caption.fontSize : theme.typography.body1.fontSize,\n  lineHeight: size === 'small' ? theme.typography.caption.lineHeight : theme.typography.body1.lineHeight,\n  fontWeight: 400,\n  padding: theme.spacing(0, 1),\n  borderRadius: size === 'small' ? theme.radius['radius-4'] : theme.radius['radius-8'],\n  borderWidth: '1px',\n  borderStyle: 'solid',\n  '& .MuiChip-label': {\n    padding: theme.spacing(0, 0.5),\n  },\n  '& .MuiChip-icon': {\n    paddingRight: theme.spacing(0.5),\n    color: tone === 'neutral' ? theme.palette.semantic.icon['icon-strong'] : 'inherit',\n    fontSize: 'inherit',\n  },\n  ...getToneStyles(tone, theme),\n}));\n\n/**\n * Badge component is used to highlight and categorize information using short text labels.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional icon.\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 Badge = React.memo(\n  ({\n    label,\n    tone = 'neutral',\n    size = 'medium',\n    icon,\n    className,\n    'data-testid': dataTestId,\n  }: BadgeProps): JSX.Element => (\n    <StyledBadge\n      className={className}\n      data-testid={dataTestId}\n      icon={icon}\n      label={label}\n      size={size}\n      tone={tone}\n    />\n  ),\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["BADGE_TONES","getToneStyles","tone","theme","neutral","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","error","warning","success","information","brand","StyledBadge","styled","MuiChip","shouldForwardProp","prop","includes","size","fontSize","typography","caption","body1","lineHeight","fontWeight","padding","spacing","borderRadius","radius","borderWidth","borderStyle","paddingRight","icon","Badge","React","memo","label","className","dataTestId","_jsx","displayName"],"mappings":"gJAMO,MAAMA,EAAc,CAAC,UAAW,QAAS,UAAW,UAAW,cAAe,SAyB/EC,EAAgB,CACpBC,EACAC,KAMiB,CACfC,QAAS,CACPC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,aAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,eAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBAErCC,MAAO,CACLR,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,mBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,qBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,eAErCE,QAAS,CACPT,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,iBAErCG,QAAS,CACPV,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,iBAErCI,YAAa,CACXX,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,yBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,2BAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,qBAErCK,MAAO,CACLZ,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,kBAIvBV,IAGZgB,EAAcC,EAAOC,EAAS,CAClCC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD9BH,EAEC,EAAGhB,QAAOD,OAAMsB,WAAM,CACzCC,SAAmB,UAATD,EAAmBrB,EAAMuB,WAAWC,QAAQF,SAAWtB,EAAMuB,WAAWE,MAAMH,SACxFI,WAAqB,UAATL,EAAmBrB,EAAMuB,WAAWC,QAAQE,WAAa1B,EAAMuB,WAAWE,MAAMC,WAC5FC,WAAY,IACZC,QAAS5B,EAAM6B,QAAQ,EAAG,GAC1BC,aAAuB,UAATT,EAAmBrB,EAAM+B,OAAO,YAAc/B,EAAM+B,OAAO,YACzEC,YAAa,MACbC,YAAa,QACb,mBAAoB,CAClBL,QAAS5B,EAAM6B,QAAQ,EAAG,KAE5B,kBAAmB,CACjBK,aAAclC,EAAM6B,QAAQ,IAC5BrB,MAAgB,YAATT,EAAqBC,EAAMG,QAAQC,SAAS+B,KAAK,eAAiB,UACzEb,SAAU,cAETxB,EAAcC,EAAMC,OAYnBoC,EAAQC,EAAMC,MAClB,EACEC,QACAxC,OAAO,UACPsB,OAAO,SACPc,OACAK,YACA,cAAeC,KAEfC,EAAC3B,EAAW,CACVyB,UAAWA,EAAS,cACPC,EACbN,KAAMA,EACNI,MAAOA,EACPlB,KAAMA,EACNtB,KAAMA,MAKZqC,EAAMO,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\nimport CancelIcon from '@fd/icons/Cancel';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', 'information', 'brand'] as const;\nexport type BadgeTone = (typeof BADGE_TONES)[number];\n\n/** Props for the Badge component */\nexport interface BadgeProps {\n  /** Additional CSS class names */\n  className?: string;\n  /** Optional icon to display within the badge */\n  icon?: MuiChipProps['icon'];\n  /** Text label displayed in the badge */\n  label: string;\n  /** Visual tone/color of the badge */\n  tone?: BadgeTone;\n  /** Size of the badge */\n  size?: MuiChipProps['size'];\n  /** Callback function when the badge is dismissed */\n  onDismiss?: MuiChipProps['onDelete'];\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n}\n\ninterface StyledBadgeProps {\n  tone: BadgeTone;\n  size: MuiChipProps['size'];\n}\n\n/** Color mapping for different tones */\nconst getToneStyles = (\n  tone: BadgeTone,\n  theme: Theme,\n): {\n  backgroundColor: string;\n  borderColor: string;\n  color: string;\n} => {\n  const colorMap = {\n    neutral: {\n      backgroundColor: theme.palette.semantic.fill['fill-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-weak'],\n      color: theme.palette.semantic.text['text-strong'],\n    },\n    error: {\n      backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-error-weak'],\n      color: theme.palette.semantic.text['text-error'],\n    },\n    warning: {\n      backgroundColor: theme.palette.semantic.fill['fill-warning-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-warning-weak'],\n      color: theme.palette.semantic.text['text-warning'],\n    },\n    success: {\n      backgroundColor: theme.palette.semantic.fill['fill-success-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-success-weak'],\n      color: theme.palette.semantic.text['text-success'],\n    },\n    information: {\n      backgroundColor: theme.palette.semantic.fill['fill-information-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-information-weak'],\n      color: theme.palette.semantic.text['text-information'],\n    },\n    brand: {\n      backgroundColor: theme.palette.semantic.fill['fill-primary-weak'],\n      borderColor: theme.palette.semantic.stroke['stroke-primary-weak'],\n      color: theme.palette.semantic.text['text-primary'],\n    },\n  } satisfies Record<BadgeTone, object>;\n\n  return colorMap[tone];\n};\n\nconst StyledBadge = styled(MuiChip, {\n  shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledBadgeProps>(({ theme, tone, size }) => ({\n  fontSize: size === 'small' ? theme.typography.caption.fontSize : theme.typography.body1.fontSize,\n  lineHeight: size === 'small' ? theme.typography.caption.lineHeight : theme.typography.body1.lineHeight,\n  fontWeight: 400,\n  padding: theme.spacing(0, 1),\n  borderRadius: theme.radius['radius-16'],\n  borderWidth: '1px',\n  borderStyle: 'solid',\n\n  '& .MuiChip-label': {\n    padding: theme.spacing(0, 0.5),\n  },\n  '& .MuiChip-icon': {\n    paddingRight: theme.spacing(0.5),\n    color: tone === 'neutral' ? theme.palette.semantic.icon['icon-strong'] : 'inherit',\n    fontSize: 'inherit',\n  },\n  '& .MuiChip-deleteIcon': {\n    color: theme.palette.semantic.icon['icon-strong'],\n    margin: 0,\n  },\n  ...getToneStyles(tone, theme),\n}));\n\n/**\n * Badge component is used to highlight and categorize information using short text labels.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional icon.\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 */\nexport const Badge = React.memo(\n  ({\n    className,\n    icon,\n    label,\n    onDismiss,\n    size = 'medium',\n    tone = 'neutral',\n    'data-testid': dataTestId,\n  }: BadgeProps): JSX.Element => (\n    <StyledBadge\n      className={className}\n      data-testid={dataTestId}\n      deleteIcon={<CancelIcon size=\"sm\" />}\n      icon={icon}\n      label={label}\n      onDelete={onDismiss}\n      size={size}\n      tone={tone}\n    />\n  ),\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["BADGE_TONES","getToneStyles","tone","theme","neutral","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","error","warning","success","information","brand","StyledBadge","styled","MuiChip","shouldForwardProp","prop","includes","size","fontSize","typography","caption","body1","lineHeight","fontWeight","padding","spacing","borderRadius","radius","borderWidth","borderStyle","paddingRight","icon","margin","Badge","React","memo","className","label","onDismiss","dataTestId","_jsx","deleteIcon","CancelIcon","onDelete","displayName"],"mappings":"8LAQO,MAAMA,EAAc,CAAC,UAAW,QAAS,UAAW,UAAW,cAAe,SA2B/EC,EAAgB,CACpBC,EACAC,KAMiB,CACfC,QAAS,CACPC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,aAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,eAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBAErCC,MAAO,CACLR,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,mBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,qBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,eAErCE,QAAS,CACPT,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,iBAErCG,QAAS,CACPV,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,iBAErCI,YAAa,CACXX,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,yBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,2BAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,qBAErCK,MAAO,CACLZ,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,kBAIvBV,IAGZgB,EAAcC,EAAOC,EAAS,CAClCC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD9BH,EAEC,EAAGhB,QAAOD,OAAMsB,WAAM,CACzCC,SAAmB,UAATD,EAAmBrB,EAAMuB,WAAWC,QAAQF,SAAWtB,EAAMuB,WAAWE,MAAMH,SACxFI,WAAqB,UAATL,EAAmBrB,EAAMuB,WAAWC,QAAQE,WAAa1B,EAAMuB,WAAWE,MAAMC,WAC5FC,WAAY,IACZC,QAAS5B,EAAM6B,QAAQ,EAAG,GAC1BC,aAAc9B,EAAM+B,OAAO,aAC3BC,YAAa,MACbC,YAAa,QAEb,mBAAoB,CAClBL,QAAS5B,EAAM6B,QAAQ,EAAG,KAE5B,kBAAmB,CACjBK,aAAclC,EAAM6B,QAAQ,IAC5BrB,MAAgB,YAATT,EAAqBC,EAAMG,QAAQC,SAAS+B,KAAK,eAAiB,UACzEb,SAAU,WAEZ,wBAAyB,CACvBd,MAAOR,EAAMG,QAAQC,SAAS+B,KAAK,eACnCC,OAAQ,MAEPtC,EAAcC,EAAMC,OAYZqC,EAAQC,EAAMC,MACzB,EACEC,YACAL,OACAM,QACAC,YACArB,OAAO,SACPtB,OAAO,UACP,cAAe4C,KAEfC,EAAC7B,EAAW,CACVyB,UAAWA,EAAS,cACPG,EACbE,WAAYD,EAACE,EAAU,CAACzB,KAAK,OAC7Bc,KAAMA,EACNM,MAAOA,EACPM,SAAUL,EACVrB,KAAMA,EACNtB,KAAMA,MAKZsC,EAAMW,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),r=require("@mui/material/Card"),i=require("@mui/material/CardContent"),n=require("@mui/material/CardMedia"),a=require("@mui/material/styles"),s=require("@mui/material/Typography"),o=require("../../../icons/ArrowRight02/index.cjs.js"),l=require("../Badge/index.cjs.js"),d=require("../IconContainer/index.cjs.js"),c=require("../Link/index.cjs.js");const h=a.styled(r)((({theme:e,type:t})=>({borderRadius:e.radius["radius-16"],border:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,..."horizontal"===t&&{display:"flex",flexDirection:"row",overflow:"hidden"}}))),m=a.styled(i)((({theme:e,type:t})=>({"&:last-child":{paddingBottom:e.spacing(2)},..."horizontal"===t&&{flex:1,display:"flex",flexDirection:"column",justifyContent:"space-between"}}))),p=a.styled(t)((({theme:e})=>({display:"flex",alignItems:"flex-start",gap:e.spacing(2),flex:1}))),u=a.styled(t)((()=>({flex:1,display:"flex",flexDirection:"column"}))),x=a.styled(s)((({theme:e})=>({marginBottom:e.spacing(1)}))),g=a.styled(t)((({theme:e})=>({marginTop:e.spacing(1.5)}))),y=a.styled(c.Link)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1)}))),f=a.styled(n)((({theme:e,type:t})=>({..."horizontal"===t?{width:200,height:"auto",borderRight:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,borderBottom:"none",flexShrink:0}:{height:204,borderBottom:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`}}))),j=a.styled(t,{shouldForwardProp:e=>!["hasIcon","hasBadge"].includes(e)})((({theme:e,hasIcon:t,hasBadge:r})=>({display:"flex",flexDirection:"row",justifyContent:r&&!t?"flex-end":"space-between",alignItems:"flex-start",gap:e.spacing(2),marginBottom:e.spacing(1.5)})));module.exports=({fdKey:t,heading:r,content:i,imageSrc:n,icon:a,badge:c,link:k,onMouseEnter:w,onMouseLeave:b,type:C="vertical",...q})=>{if(a&&(B=a,B?.type!==d))throw new Error("Card icon prop must be an IconContainer component");var B;if(c&&!(e=>e?.type===l.default)(c))throw new Error("Card badge prop must be a Badge component");const v=!!c||!!a,I=()=>k?e.jsx(g,{children:e.jsx(y,{fdKey:`card-link-${k.label}`,href:k.href,iconRight:e.jsx(o,{}),onClick:k.onClick,underline:!1,children:k.label})}):null,M=()=>e.jsx(x,{variant:"h4Strong",children:r}),z=()=>e.jsx(s,{variant:"b1Weak",children:i});return e.jsxs(h,{"data-fd":t,type:C,...q,onMouseEnter:w,onMouseLeave:b,children:[n?e.jsx(f,{image:n,type:C}):null,e.jsx(m,{type:C,children:"horizontal"===C?e.jsxs(e.Fragment,{children:[e.jsxs(p,{children:[a&&a,e.jsxs(u,{children:[M(),z()]}),c&&c]}),I()]}):e.jsxs(e.Fragment,{children:[v&&e.jsxs(j,{hasBadge:!!c,hasIcon:!!a,children:[a&&a,c&&c]}),M(),z(),I()]})})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/Box"),t=require("@mui/material/Card"),i=require("@mui/material/CardContent"),n=require("@mui/material/CardMedia"),a=require("@mui/material/styles"),s=require("@mui/material/Typography"),o=require("../../../icons/ArrowRight02/index.cjs.js"),l=require("../Badge/index.cjs.js"),d=require("../IconContainer/index.cjs.js"),c=require("../Link/index.cjs.js");const h=a.styled(t)((({theme:e,type:r})=>({borderRadius:e.radius["radius-16"],border:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,..."horizontal"===r&&{display:"flex",flexDirection:"row",overflow:"hidden"}}))),m=a.styled(i)((({theme:e,type:r})=>({"&:last-child":{paddingBottom:e.spacing(2)},..."horizontal"===r&&{flex:1,display:"flex",flexDirection:"column",justifyContent:"space-between"}}))),p=a.styled(r)((({theme:e})=>({display:"flex",alignItems:"flex-start",gap:e.spacing(2),flex:1}))),u=a.styled(r)((()=>({flex:1,display:"flex",flexDirection:"column"}))),x=a.styled(s)((({theme:e})=>({marginBottom:e.spacing(1)}))),g=a.styled(r)((({theme:e})=>({marginTop:e.spacing(1.5)}))),y=a.styled(c.Link)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1)}))),f=a.styled(n)((({theme:e,type:r})=>({..."horizontal"===r?{width:200,height:"auto",borderRight:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,borderBottom:"none",flexShrink:0}:{height:204,borderBottom:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`}}))),j=a.styled(r,{shouldForwardProp:e=>!["hasIcon","hasBadge"].includes(e)})((({theme:e,hasIcon:r,hasBadge:t})=>({display:"flex",flexDirection:"row",justifyContent:t&&!r?"flex-end":"space-between",alignItems:"flex-start",gap:e.spacing(2),marginBottom:e.spacing(1.5)})));module.exports=({fdKey:r,heading:t,content:i,imageSrc:n,icon:a,badge:c,link:k,onMouseEnter:w,onMouseLeave:b,type:B="vertical",...C})=>{if(a&&(q=a,q?.type!==d))throw new Error("Card icon prop must be an IconContainer component");var q;if(c&&!(e=>e?.type===l.Badge)(c))throw new Error("Card badge prop must be a Badge component");const v=!!c||!!a,I=()=>k?e.jsx(g,{children:e.jsx(y,{fdKey:`card-link-${k.label}`,href:k.href,iconRight:e.jsx(o,{}),onClick:k.onClick,underline:!1,children:k.label})}):null,M=()=>e.jsx(x,{variant:"h4Strong",children:t}),z=()=>e.jsx(s,{variant:"b1Weak",children:i});return e.jsxs(h,{"data-fd":r,type:B,...C,onMouseEnter:w,onMouseLeave:b,children:[n?e.jsx(f,{image:n,type:B}):null,e.jsx(m,{type:B,children:"horizontal"===B?e.jsxs(e.Fragment,{children:[e.jsxs(p,{children:[a&&a,e.jsxs(u,{children:[M(),z()]}),c&&c]}),I()]}):e.jsxs(e.Fragment,{children:[v&&e.jsxs(j,{hasBadge:!!c,hasIcon:!!a,children:[a&&a,c&&c]}),M(),z(),I()]})})]})};
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Card/index.tsx"],"sourcesContent":["\nimport Box from '@mui/material/Box';\nimport MuiCard from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport CardMedia from '@mui/material/CardMedia';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport RightArrowIcon from '../../../icons/ArrowRight02';\nimport Badge from '../Badge';\nimport IconContainer from '../IconContainer';\nimport Link, { type LinkProps } from '../Link';\n\nexport interface CardProps {\n  fdKey?: string;\n  heading: string;\n  content: string;\n  imageSrc?: string;\n  icon?: React.ReactElement<typeof IconContainer>;\n  badge?: React.ReactElement<typeof Badge>;\n  link?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  }\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  type?: 'horizontal' | 'vertical';\n}\n\nconst StyledCard = styled(MuiCard)<{ type?: 'horizontal' | 'vertical' }>(({ theme, type }) => ({\n  borderRadius: theme.radius['radius-16'],\n  border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  ...(type === 'horizontal' && {\n    display: 'flex',\n    flexDirection: 'row',\n    overflow: 'hidden',\n  }),\n}));\n\nconst StyledCardContent = styled(CardContent)<{ type?: 'horizontal' | 'vertical' }>(({ theme, type }) => ({\n  '&:last-child': {\n    paddingBottom: theme.spacing(2),\n  },\n  ...(type === 'horizontal' && {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n  }),\n}));\n\nconst StyledHorizontalContentWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'flex-start',\n  gap: theme.spacing(2),\n  flex: 1,\n}));\n\nconst StyledHorizontalTextContent = styled(Box)(() => ({\n  flex: 1,\n  display: 'flex',\n  flexDirection: 'column',\n}));\n\nconst StyledHeading = styled(Typography)(({ theme }) => ({\n  marginBottom: theme.spacing(1),\n}));\n\nconst StyledLinkContainer = styled(Box)(({ theme }) => ({\n  marginTop: theme.spacing(1.5),\n}));\n\nconst StyledLink = styled(Link)<{ component?: LinkProps['component'] }>(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nconst StyledCardMedia = styled(CardMedia)<{ type?: 'horizontal' | 'vertical' }>(({ theme, type }) => ({\n  ...(type === 'horizontal' ? {\n    width: 200,\n    height: 'auto',\n    borderRight: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n    borderBottom: 'none',\n    flexShrink: 0,\n  } : {\n    height: 204,\n    borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  }),\n}));\n\ninterface StyledTopContentContainerProps {\n  hasIcon: boolean;\n  hasBadge: boolean;\n}\n\nconst StyledTopContentContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['hasIcon', 'hasBadge'].includes(prop as string),\n})<StyledTopContentContainerProps>(({ theme, hasIcon, hasBadge }) => {\n\n  const onlyHasRightContent = hasBadge && !hasIcon;\n  return {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: onlyHasRightContent ? 'flex-end' : 'space-between',\n    alignItems: 'flex-start',\n    gap: theme.spacing(2),\n    marginBottom: theme.spacing(1.5),\n  }\n});\n\n// Validation function to ensure only IconContainer components are passed\nconst isValidIconContainer = (element: React.ReactElement): boolean => {\n  return element?.type === IconContainer;\n};\n\nconst isValidBadge = (element: React.ReactElement): boolean => {\n  return element?.type === Badge;\n};\n\nconst Card = ({\n  fdKey,\n  heading,\n  content,\n  imageSrc,\n  icon,\n  badge,\n  link,\n  onMouseEnter,\n  onMouseLeave,\n  type = 'vertical',\n  ...rest\n}: CardProps): React.ReactElement => {\n  if (icon && !isValidIconContainer(icon)) {\n    throw new Error('Card icon prop must be an IconContainer component');\n  }\n  if (badge && !isValidBadge(badge)) {\n    throw new Error('Card badge prop must be a Badge component');\n  }\n\n  const hasTopContent = !!badge || !!icon;\n\n  const renderImage = (): React.ReactElement | null => {\n    if (!imageSrc) return null;\n    return <StyledCardMedia image={imageSrc} type={type} />;\n  };\n\n  const renderLink = (): React.ReactElement | null => {\n    if (!link) return null;\n    return (\n      <StyledLinkContainer>\n        <StyledLink\n          fdKey={`card-link-${link.label}`}\n          href={link.href}\n          iconRight={<RightArrowIcon />}\n          onClick={link.onClick}\n          underline={false}\n        >\n          {link.label}\n        </StyledLink>\n      </StyledLinkContainer>\n    );\n  };\n\n  const renderHeading = (): React.ReactElement => {\n    return (\n      <StyledHeading variant=\"h4Strong\">\n        {heading}\n      </StyledHeading>\n    );\n  };\n\n  const renderContent = (): React.ReactElement => {\n    return (\n      <Typography variant=\"b1Weak\">\n        {content}\n      </Typography>\n    );\n  };\n\n  const renderHorizontalContent = (): React.ReactElement => {\n    return (\n      <>\n        <StyledHorizontalContentWrapper>\n          {icon && icon}\n          <StyledHorizontalTextContent>\n            {renderHeading()}\n            {renderContent()}\n          </StyledHorizontalTextContent>\n          {badge && badge}\n        </StyledHorizontalContentWrapper>\n        {renderLink()}\n      </>\n    );\n  };\n\n  const renderVerticalContent = (): React.ReactElement => {\n    return (\n      <>\n        {hasTopContent && (\n          <StyledTopContentContainer hasBadge={!!badge} hasIcon={!!icon}>\n            {icon && icon}\n            {badge && badge}\n          </StyledTopContentContainer>\n        )}\n        {renderHeading()}\n        {renderContent()}\n        {renderLink()}\n      </>\n    );\n  };\n\n  const renderCardContent = (): React.ReactElement => {\n    if (type === 'horizontal') {\n      return renderHorizontalContent();\n    }\n    return renderVerticalContent();\n  };\n\n  return (\n    <StyledCard data-fd={fdKey} type={type} {...rest} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n      {renderImage()}\n      <StyledCardContent type={type}>\n        {renderCardContent()}\n      </StyledCardContent>\n    </StyledCard>\n  );\n};\n\nexport default Card;"],"names":["StyledCard","styled","MuiCard","theme","type","borderRadius","radius","border","palette","semantic","stroke","display","flexDirection","overflow","StyledCardContent","CardContent","paddingBottom","spacing","flex","justifyContent","StyledHorizontalContentWrapper","Box","alignItems","gap","StyledHorizontalTextContent","StyledHeading","Typography","marginBottom","StyledLinkContainer","marginTop","StyledLink","Link","StyledCardMedia","CardMedia","width","height","borderRight","borderBottom","flexShrink","StyledTopContentContainer","shouldForwardProp","prop","includes","hasIcon","hasBadge","fdKey","heading","content","imageSrc","icon","badge","link","onMouseEnter","onMouseLeave","rest","element","IconContainer","Error","Badge","isValidBadge","hasTopContent","renderLink","_jsx","label","href","iconRight","RightArrowIcon","onClick","underline","renderHeading","variant","children","renderContent","_jsxs","image","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Card/index.tsx"],"sourcesContent":["\nimport Box from '@mui/material/Box';\nimport MuiCard from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport CardMedia from '@mui/material/CardMedia';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport RightArrowIcon from '../../../icons/ArrowRight02';\nimport Badge from '../Badge';\nimport IconContainer from '../IconContainer';\nimport Link, { type LinkProps } from '../Link';\n\nexport interface CardProps {\n  fdKey?: string;\n  heading: string;\n  content: string;\n  imageSrc?: string;\n  icon?: React.ReactElement<typeof IconContainer>;\n  badge?: React.ReactElement<typeof Badge>;\n  link?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  }\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  type?: 'horizontal' | 'vertical';\n}\n\nconst StyledCard = styled(MuiCard)<{ type?: 'horizontal' | 'vertical' }>(({ theme, type }) => ({\n  borderRadius: theme.radius['radius-16'],\n  border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  ...(type === 'horizontal' && {\n    display: 'flex',\n    flexDirection: 'row',\n    overflow: 'hidden',\n  }),\n}));\n\nconst StyledCardContent = styled(CardContent)<{ type?: 'horizontal' | 'vertical' }>(({ theme, type }) => ({\n  '&:last-child': {\n    paddingBottom: theme.spacing(2),\n  },\n  ...(type === 'horizontal' && {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n  }),\n}));\n\nconst StyledHorizontalContentWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'flex-start',\n  gap: theme.spacing(2),\n  flex: 1,\n}));\n\nconst StyledHorizontalTextContent = styled(Box)(() => ({\n  flex: 1,\n  display: 'flex',\n  flexDirection: 'column',\n}));\n\nconst StyledHeading = styled(Typography)(({ theme }) => ({\n  marginBottom: theme.spacing(1),\n}));\n\nconst StyledLinkContainer = styled(Box)(({ theme }) => ({\n  marginTop: theme.spacing(1.5),\n}));\n\nconst StyledLink = styled(Link)<{ component?: LinkProps['component'] }>(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nconst StyledCardMedia = styled(CardMedia)<{ type?: 'horizontal' | 'vertical' }>(({ theme, type }) => ({\n  ...(type === 'horizontal' ? {\n    width: 200,\n    height: 'auto',\n    borderRight: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n    borderBottom: 'none',\n    flexShrink: 0,\n  } : {\n    height: 204,\n    borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  }),\n}));\n\ninterface StyledTopContentContainerProps {\n  hasIcon: boolean;\n  hasBadge: boolean;\n}\n\nconst StyledTopContentContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['hasIcon', 'hasBadge'].includes(prop as string),\n})<StyledTopContentContainerProps>(({ theme, hasIcon, hasBadge }) => {\n\n  const onlyHasRightContent = hasBadge && !hasIcon;\n  return {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: onlyHasRightContent ? 'flex-end' : 'space-between',\n    alignItems: 'flex-start',\n    gap: theme.spacing(2),\n    marginBottom: theme.spacing(1.5),\n  }\n});\n\n// Validation function to ensure only IconContainer components are passed\nconst isValidIconContainer = (element: React.ReactElement): boolean => {\n  return element?.type === IconContainer;\n};\n\nconst isValidBadge = (element: React.ReactElement): boolean => {\n  return element?.type === Badge;\n};\n\nconst Card = ({\n  fdKey,\n  heading,\n  content,\n  imageSrc,\n  icon,\n  badge,\n  link,\n  onMouseEnter,\n  onMouseLeave,\n  type = 'vertical',\n  ...rest\n}: CardProps): React.ReactElement => {\n  if (icon && !isValidIconContainer(icon)) {\n    throw new Error('Card icon prop must be an IconContainer component');\n  }\n  if (badge && !isValidBadge(badge)) {\n    throw new Error('Card badge prop must be a Badge component');\n  }\n\n  const hasTopContent = !!badge || !!icon;\n\n  const renderImage = (): React.ReactElement | null => {\n    if (!imageSrc) return null;\n    return <StyledCardMedia image={imageSrc} type={type} />;\n  };\n\n  const renderLink = (): React.ReactElement | null => {\n    if (!link) return null;\n    return (\n      <StyledLinkContainer>\n        <StyledLink\n          fdKey={`card-link-${link.label}`}\n          href={link.href}\n          iconRight={<RightArrowIcon />}\n          onClick={link.onClick}\n          underline={false}\n        >\n          {link.label}\n        </StyledLink>\n      </StyledLinkContainer>\n    );\n  };\n\n  const renderHeading = (): React.ReactElement => {\n    return (\n      <StyledHeading variant=\"h4Strong\">\n        {heading}\n      </StyledHeading>\n    );\n  };\n\n  const renderContent = (): React.ReactElement => {\n    return (\n      <Typography variant=\"b1Weak\">\n        {content}\n      </Typography>\n    );\n  };\n\n  const renderHorizontalContent = (): React.ReactElement => {\n    return (\n      <>\n        <StyledHorizontalContentWrapper>\n          {icon && icon}\n          <StyledHorizontalTextContent>\n            {renderHeading()}\n            {renderContent()}\n          </StyledHorizontalTextContent>\n          {badge && badge}\n        </StyledHorizontalContentWrapper>\n        {renderLink()}\n      </>\n    );\n  };\n\n  const renderVerticalContent = (): React.ReactElement => {\n    return (\n      <>\n        {hasTopContent && (\n          <StyledTopContentContainer hasBadge={!!badge} hasIcon={!!icon}>\n            {icon && icon}\n            {badge && badge}\n          </StyledTopContentContainer>\n        )}\n        {renderHeading()}\n        {renderContent()}\n        {renderLink()}\n      </>\n    );\n  };\n\n  const renderCardContent = (): React.ReactElement => {\n    if (type === 'horizontal') {\n      return renderHorizontalContent();\n    }\n    return renderVerticalContent();\n  };\n\n  return (\n    <StyledCard data-fd={fdKey} type={type} {...rest} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n      {renderImage()}\n      <StyledCardContent type={type}>\n        {renderCardContent()}\n      </StyledCardContent>\n    </StyledCard>\n  );\n};\n\nexport default Card;"],"names":["StyledCard","styled","MuiCard","theme","type","borderRadius","radius","border","palette","semantic","stroke","display","flexDirection","overflow","StyledCardContent","CardContent","paddingBottom","spacing","flex","justifyContent","StyledHorizontalContentWrapper","Box","alignItems","gap","StyledHorizontalTextContent","StyledHeading","Typography","marginBottom","StyledLinkContainer","marginTop","StyledLink","Link","StyledCardMedia","CardMedia","width","height","borderRight","borderBottom","flexShrink","StyledTopContentContainer","shouldForwardProp","prop","includes","hasIcon","hasBadge","fdKey","heading","content","imageSrc","icon","badge","link","onMouseEnter","onMouseLeave","rest","element","IconContainer","Error","Badge","isValidBadge","hasTopContent","renderLink","_jsx","label","href","iconRight","RightArrowIcon","onClick","underline","renderHeading","variant","children","renderContent","_jsxs","image","_Fragment"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import i from"@mui/material/Box";import o from"@mui/material/Card";import a from"@mui/material/CardContent";import n from"@mui/material/CardMedia";import{styled as l}from"@mui/material/styles";import m from"@mui/material/Typography";import d from"../../../icons/ArrowRight02/index.js";import s from"../Badge/index.js";import p from"../IconContainer/index.js";import{Link as c}from"../Link/index.js";const h=l(o)((({theme:e,type:t})=>({borderRadius:e.radius["radius-16"],border:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,..."horizontal"===t&&{display:"flex",flexDirection:"row",overflow:"hidden"}}))),f=l(a)((({theme:e,type:t})=>({"&:last-child":{paddingBottom:e.spacing(2)},..."horizontal"===t&&{flex:1,display:"flex",flexDirection:"column",justifyContent:"space-between"}}))),g=l(i)((({theme:e})=>({display:"flex",alignItems:"flex-start",gap:e.spacing(2),flex:1}))),u=l(i)((()=>({flex:1,display:"flex",flexDirection:"column"}))),x=l(m)((({theme:e})=>({marginBottom:e.spacing(1)}))),y=l(i)((({theme:e})=>({marginTop:e.spacing(1.5)}))),k=l(c)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1)}))),w=l(n)((({theme:e,type:t})=>({..."horizontal"===t?{width:200,height:"auto",borderRight:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,borderBottom:"none",flexShrink:0}:{height:204,borderBottom:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`}}))),b=l(i,{shouldForwardProp:e=>!["hasIcon","hasBadge"].includes(e)})((({theme:e,hasIcon:t,hasBadge:r})=>({display:"flex",flexDirection:"row",justifyContent:r&&!t?"flex-end":"space-between",alignItems:"flex-start",gap:e.spacing(2),marginBottom:e.spacing(1.5)}))),C=({fdKey:i,heading:o,content:a,imageSrc:n,icon:l,badge:c,link:C,onMouseEnter:B,onMouseLeave:I,type:j="vertical",...v})=>{if(l&&(M=l,M?.type!==p))throw new Error("Card icon prop must be an IconContainer component");var M;if(c&&!(e=>e?.type===s)(c))throw new Error("Card badge prop must be a Badge component");const z=!!c||!!l,D=()=>C?t(y,{children:t(k,{fdKey:`card-link-${C.label}`,href:C.href,iconRight:t(d,{}),onClick:C.onClick,underline:!1,children:C.label})}):null,E=()=>t(x,{variant:"h4Strong",children:o}),R=()=>t(m,{variant:"b1Weak",children:a});return e(h,{"data-fd":i,type:j,...v,onMouseEnter:B,onMouseLeave:I,children:[n?t(w,{image:n,type:j}):null,t(f,{type:j,children:e(r,"horizontal"===j?{children:[e(g,{children:[l&&l,e(u,{children:[E(),R()]}),c&&c]}),D()]}:{children:[z&&e(b,{hasBadge:!!c,hasIcon:!!l,children:[l&&l,c&&c]}),E(),R(),D()]})})]})};export{C as default};
+import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import i from"@mui/material/Box";import o from"@mui/material/Card";import a from"@mui/material/CardContent";import n from"@mui/material/CardMedia";import{styled as l}from"@mui/material/styles";import m from"@mui/material/Typography";import d from"../../../icons/ArrowRight02/index.js";import{Badge as s}from"../Badge/index.js";import p from"../IconContainer/index.js";import{Link as c}from"../Link/index.js";const h=l(o)((({theme:e,type:t})=>({borderRadius:e.radius["radius-16"],border:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,..."horizontal"===t&&{display:"flex",flexDirection:"row",overflow:"hidden"}}))),f=l(a)((({theme:e,type:t})=>({"&:last-child":{paddingBottom:e.spacing(2)},..."horizontal"===t&&{flex:1,display:"flex",flexDirection:"column",justifyContent:"space-between"}}))),g=l(i)((({theme:e})=>({display:"flex",alignItems:"flex-start",gap:e.spacing(2),flex:1}))),u=l(i)((()=>({flex:1,display:"flex",flexDirection:"column"}))),x=l(m)((({theme:e})=>({marginBottom:e.spacing(1)}))),y=l(i)((({theme:e})=>({marginTop:e.spacing(1.5)}))),k=l(c)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1)}))),w=l(n)((({theme:e,type:t})=>({..."horizontal"===t?{width:200,height:"auto",borderRight:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,borderBottom:"none",flexShrink:0}:{height:204,borderBottom:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`}}))),b=l(i,{shouldForwardProp:e=>!["hasIcon","hasBadge"].includes(e)})((({theme:e,hasIcon:t,hasBadge:r})=>({display:"flex",flexDirection:"row",justifyContent:r&&!t?"flex-end":"space-between",alignItems:"flex-start",gap:e.spacing(2),marginBottom:e.spacing(1.5)}))),C=({fdKey:i,heading:o,content:a,imageSrc:n,icon:l,badge:c,link:C,onMouseEnter:B,onMouseLeave:I,type:j="vertical",...v})=>{if(l&&(M=l,M?.type!==p))throw new Error("Card icon prop must be an IconContainer component");var M;if(c&&!(e=>e?.type===s)(c))throw new Error("Card badge prop must be a Badge component");const z=!!c||!!l,D=()=>C?t(y,{children:t(k,{fdKey:`card-link-${C.label}`,href:C.href,iconRight:t(d,{}),onClick:C.onClick,underline:!1,children:C.label})}):null,E=()=>t(x,{variant:"h4Strong",children:o}),R=()=>t(m,{variant:"b1Weak",children:a});return e(h,{"data-fd":i,type:j,...v,onMouseEnter:B,onMouseLeave:I,children:[n?t(w,{image:n,type:j}):null,t(f,{type:j,children:e(r,"horizontal"===j?{children:[e(g,{children:[l&&l,e(u,{children:[E(),R()]}),c&&c]}),D()]}:{children:[z&&e(b,{hasBadge:!!c,hasIcon:!!l,children:[l&&l,c&&c]}),E(),R(),D()]})})]})};export{C as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Card/index.tsx"],"sourcesContent":["\nimport Box from '@mui/material/Box';\nimport MuiCard from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport CardMedia from '@mui/material/CardMedia';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport RightArrowIcon from '../../../icons/ArrowRight02';\nimport Badge from '../Badge';\nimport IconContainer from '../IconContainer';\nimport Link, { type LinkProps } from '../Link';\n\nexport interface CardProps {\n  fdKey?: string;\n  heading: string;\n  content: string;\n  imageSrc?: string;\n  icon?: React.ReactElement<typeof IconContainer>;\n  badge?: React.ReactElement<typeof Badge>;\n  link?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  }\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  type?: 'horizontal' | 'vertical';\n}\n\nconst StyledCard = styled(MuiCard)<{ type?: 'horizontal' | 'vertical' }>(({ theme, type }) => ({\n  borderRadius: theme.radius['radius-16'],\n  border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  ...(type === 'horizontal' && {\n    display: 'flex',\n    flexDirection: 'row',\n    overflow: 'hidden',\n  }),\n}));\n\nconst StyledCardContent = styled(CardContent)<{ type?: 'horizontal' | 'vertical' }>(({ theme, type }) => ({\n  '&:last-child': {\n    paddingBottom: theme.spacing(2),\n  },\n  ...(type === 'horizontal' && {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n  }),\n}));\n\nconst StyledHorizontalContentWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'flex-start',\n  gap: theme.spacing(2),\n  flex: 1,\n}));\n\nconst StyledHorizontalTextContent = styled(Box)(() => ({\n  flex: 1,\n  display: 'flex',\n  flexDirection: 'column',\n}));\n\nconst StyledHeading = styled(Typography)(({ theme }) => ({\n  marginBottom: theme.spacing(1),\n}));\n\nconst StyledLinkContainer = styled(Box)(({ theme }) => ({\n  marginTop: theme.spacing(1.5),\n}));\n\nconst StyledLink = styled(Link)<{ component?: LinkProps['component'] }>(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nconst StyledCardMedia = styled(CardMedia)<{ type?: 'horizontal' | 'vertical' }>(({ theme, type }) => ({\n  ...(type === 'horizontal' ? {\n    width: 200,\n    height: 'auto',\n    borderRight: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n    borderBottom: 'none',\n    flexShrink: 0,\n  } : {\n    height: 204,\n    borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  }),\n}));\n\ninterface StyledTopContentContainerProps {\n  hasIcon: boolean;\n  hasBadge: boolean;\n}\n\nconst StyledTopContentContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['hasIcon', 'hasBadge'].includes(prop as string),\n})<StyledTopContentContainerProps>(({ theme, hasIcon, hasBadge }) => {\n\n  const onlyHasRightContent = hasBadge && !hasIcon;\n  return {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: onlyHasRightContent ? 'flex-end' : 'space-between',\n    alignItems: 'flex-start',\n    gap: theme.spacing(2),\n    marginBottom: theme.spacing(1.5),\n  }\n});\n\n// Validation function to ensure only IconContainer components are passed\nconst isValidIconContainer = (element: React.ReactElement): boolean => {\n  return element?.type === IconContainer;\n};\n\nconst isValidBadge = (element: React.ReactElement): boolean => {\n  return element?.type === Badge;\n};\n\nconst Card = ({\n  fdKey,\n  heading,\n  content,\n  imageSrc,\n  icon,\n  badge,\n  link,\n  onMouseEnter,\n  onMouseLeave,\n  type = 'vertical',\n  ...rest\n}: CardProps): React.ReactElement => {\n  if (icon && !isValidIconContainer(icon)) {\n    throw new Error('Card icon prop must be an IconContainer component');\n  }\n  if (badge && !isValidBadge(badge)) {\n    throw new Error('Card badge prop must be a Badge component');\n  }\n\n  const hasTopContent = !!badge || !!icon;\n\n  const renderImage = (): React.ReactElement | null => {\n    if (!imageSrc) return null;\n    return <StyledCardMedia image={imageSrc} type={type} />;\n  };\n\n  const renderLink = (): React.ReactElement | null => {\n    if (!link) return null;\n    return (\n      <StyledLinkContainer>\n        <StyledLink\n          fdKey={`card-link-${link.label}`}\n          href={link.href}\n          iconRight={<RightArrowIcon />}\n          onClick={link.onClick}\n          underline={false}\n        >\n          {link.label}\n        </StyledLink>\n      </StyledLinkContainer>\n    );\n  };\n\n  const renderHeading = (): React.ReactElement => {\n    return (\n      <StyledHeading variant=\"h4Strong\">\n        {heading}\n      </StyledHeading>\n    );\n  };\n\n  const renderContent = (): React.ReactElement => {\n    return (\n      <Typography variant=\"b1Weak\">\n        {content}\n      </Typography>\n    );\n  };\n\n  const renderHorizontalContent = (): React.ReactElement => {\n    return (\n      <>\n        <StyledHorizontalContentWrapper>\n          {icon && icon}\n          <StyledHorizontalTextContent>\n            {renderHeading()}\n            {renderContent()}\n          </StyledHorizontalTextContent>\n          {badge && badge}\n        </StyledHorizontalContentWrapper>\n        {renderLink()}\n      </>\n    );\n  };\n\n  const renderVerticalContent = (): React.ReactElement => {\n    return (\n      <>\n        {hasTopContent && (\n          <StyledTopContentContainer hasBadge={!!badge} hasIcon={!!icon}>\n            {icon && icon}\n            {badge && badge}\n          </StyledTopContentContainer>\n        )}\n        {renderHeading()}\n        {renderContent()}\n        {renderLink()}\n      </>\n    );\n  };\n\n  const renderCardContent = (): React.ReactElement => {\n    if (type === 'horizontal') {\n      return renderHorizontalContent();\n    }\n    return renderVerticalContent();\n  };\n\n  return (\n    <StyledCard data-fd={fdKey} type={type} {...rest} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n      {renderImage()}\n      <StyledCardContent type={type}>\n        {renderCardContent()}\n      </StyledCardContent>\n    </StyledCard>\n  );\n};\n\nexport default Card;"],"names":["StyledCard","styled","MuiCard","theme","type","borderRadius","radius","border","palette","semantic","stroke","display","flexDirection","overflow","StyledCardContent","CardContent","paddingBottom","spacing","flex","justifyContent","StyledHorizontalContentWrapper","Box","alignItems","gap","StyledHorizontalTextContent","StyledHeading","Typography","marginBottom","StyledLinkContainer","marginTop","StyledLink","Link","StyledCardMedia","CardMedia","width","height","borderRight","borderBottom","flexShrink","StyledTopContentContainer","shouldForwardProp","prop","includes","hasIcon","hasBadge","Card","fdKey","heading","content","imageSrc","icon","badge","link","onMouseEnter","onMouseLeave","rest","element","IconContainer","Error","Badge","isValidBadge","hasTopContent","renderLink","_jsx","label","href","iconRight","RightArrowIcon","onClick","underline","renderHeading","variant","children","renderContent","_jsxs","image","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Card/index.tsx"],"sourcesContent":["\nimport Box from '@mui/material/Box';\nimport MuiCard from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport CardMedia from '@mui/material/CardMedia';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport RightArrowIcon from '../../../icons/ArrowRight02';\nimport Badge from '../Badge';\nimport IconContainer from '../IconContainer';\nimport Link, { type LinkProps } from '../Link';\n\nexport interface CardProps {\n  fdKey?: string;\n  heading: string;\n  content: string;\n  imageSrc?: string;\n  icon?: React.ReactElement<typeof IconContainer>;\n  badge?: React.ReactElement<typeof Badge>;\n  link?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  }\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  type?: 'horizontal' | 'vertical';\n}\n\nconst StyledCard = styled(MuiCard)<{ type?: 'horizontal' | 'vertical' }>(({ theme, type }) => ({\n  borderRadius: theme.radius['radius-16'],\n  border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  ...(type === 'horizontal' && {\n    display: 'flex',\n    flexDirection: 'row',\n    overflow: 'hidden',\n  }),\n}));\n\nconst StyledCardContent = styled(CardContent)<{ type?: 'horizontal' | 'vertical' }>(({ theme, type }) => ({\n  '&:last-child': {\n    paddingBottom: theme.spacing(2),\n  },\n  ...(type === 'horizontal' && {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n  }),\n}));\n\nconst StyledHorizontalContentWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'flex-start',\n  gap: theme.spacing(2),\n  flex: 1,\n}));\n\nconst StyledHorizontalTextContent = styled(Box)(() => ({\n  flex: 1,\n  display: 'flex',\n  flexDirection: 'column',\n}));\n\nconst StyledHeading = styled(Typography)(({ theme }) => ({\n  marginBottom: theme.spacing(1),\n}));\n\nconst StyledLinkContainer = styled(Box)(({ theme }) => ({\n  marginTop: theme.spacing(1.5),\n}));\n\nconst StyledLink = styled(Link)<{ component?: LinkProps['component'] }>(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nconst StyledCardMedia = styled(CardMedia)<{ type?: 'horizontal' | 'vertical' }>(({ theme, type }) => ({\n  ...(type === 'horizontal' ? {\n    width: 200,\n    height: 'auto',\n    borderRight: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n    borderBottom: 'none',\n    flexShrink: 0,\n  } : {\n    height: 204,\n    borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  }),\n}));\n\ninterface StyledTopContentContainerProps {\n  hasIcon: boolean;\n  hasBadge: boolean;\n}\n\nconst StyledTopContentContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['hasIcon', 'hasBadge'].includes(prop as string),\n})<StyledTopContentContainerProps>(({ theme, hasIcon, hasBadge }) => {\n\n  const onlyHasRightContent = hasBadge && !hasIcon;\n  return {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: onlyHasRightContent ? 'flex-end' : 'space-between',\n    alignItems: 'flex-start',\n    gap: theme.spacing(2),\n    marginBottom: theme.spacing(1.5),\n  }\n});\n\n// Validation function to ensure only IconContainer components are passed\nconst isValidIconContainer = (element: React.ReactElement): boolean => {\n  return element?.type === IconContainer;\n};\n\nconst isValidBadge = (element: React.ReactElement): boolean => {\n  return element?.type === Badge;\n};\n\nconst Card = ({\n  fdKey,\n  heading,\n  content,\n  imageSrc,\n  icon,\n  badge,\n  link,\n  onMouseEnter,\n  onMouseLeave,\n  type = 'vertical',\n  ...rest\n}: CardProps): React.ReactElement => {\n  if (icon && !isValidIconContainer(icon)) {\n    throw new Error('Card icon prop must be an IconContainer component');\n  }\n  if (badge && !isValidBadge(badge)) {\n    throw new Error('Card badge prop must be a Badge component');\n  }\n\n  const hasTopContent = !!badge || !!icon;\n\n  const renderImage = (): React.ReactElement | null => {\n    if (!imageSrc) return null;\n    return <StyledCardMedia image={imageSrc} type={type} />;\n  };\n\n  const renderLink = (): React.ReactElement | null => {\n    if (!link) return null;\n    return (\n      <StyledLinkContainer>\n        <StyledLink\n          fdKey={`card-link-${link.label}`}\n          href={link.href}\n          iconRight={<RightArrowIcon />}\n          onClick={link.onClick}\n          underline={false}\n        >\n          {link.label}\n        </StyledLink>\n      </StyledLinkContainer>\n    );\n  };\n\n  const renderHeading = (): React.ReactElement => {\n    return (\n      <StyledHeading variant=\"h4Strong\">\n        {heading}\n      </StyledHeading>\n    );\n  };\n\n  const renderContent = (): React.ReactElement => {\n    return (\n      <Typography variant=\"b1Weak\">\n        {content}\n      </Typography>\n    );\n  };\n\n  const renderHorizontalContent = (): React.ReactElement => {\n    return (\n      <>\n        <StyledHorizontalContentWrapper>\n          {icon && icon}\n          <StyledHorizontalTextContent>\n            {renderHeading()}\n            {renderContent()}\n          </StyledHorizontalTextContent>\n          {badge && badge}\n        </StyledHorizontalContentWrapper>\n        {renderLink()}\n      </>\n    );\n  };\n\n  const renderVerticalContent = (): React.ReactElement => {\n    return (\n      <>\n        {hasTopContent && (\n          <StyledTopContentContainer hasBadge={!!badge} hasIcon={!!icon}>\n            {icon && icon}\n            {badge && badge}\n          </StyledTopContentContainer>\n        )}\n        {renderHeading()}\n        {renderContent()}\n        {renderLink()}\n      </>\n    );\n  };\n\n  const renderCardContent = (): React.ReactElement => {\n    if (type === 'horizontal') {\n      return renderHorizontalContent();\n    }\n    return renderVerticalContent();\n  };\n\n  return (\n    <StyledCard data-fd={fdKey} type={type} {...rest} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n      {renderImage()}\n      <StyledCardContent type={type}>\n        {renderCardContent()}\n      </StyledCardContent>\n    </StyledCard>\n  );\n};\n\nexport default Card;"],"names":["StyledCard","styled","MuiCard","theme","type","borderRadius","radius","border","palette","semantic","stroke","display","flexDirection","overflow","StyledCardContent","CardContent","paddingBottom","spacing","flex","justifyContent","StyledHorizontalContentWrapper","Box","alignItems","gap","StyledHorizontalTextContent","StyledHeading","Typography","marginBottom","StyledLinkContainer","marginTop","StyledLink","Link","StyledCardMedia","CardMedia","width","height","borderRight","borderBottom","flexShrink","StyledTopContentContainer","shouldForwardProp","prop","includes","hasIcon","hasBadge","Card","fdKey","heading","content","imageSrc","icon","badge","link","onMouseEnter","onMouseLeave","rest","element","IconContainer","Error","Badge","isValidBadge","hasTopContent","renderLink","_jsx","label","href","iconRight","RightArrowIcon","onClick","underline","renderHeading","variant","children","renderContent","_jsxs","image","_Fragment"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/Box"),l=require("@mui/material/Checkbox"),t=require("@mui/material/FormControlLabel"),r=require("@mui/material/styles"),s=require("../../../icons/Remove/index.cjs.js"),o=require("../../../icons/Tick/index.cjs.js"),a=require("../../../themes/tokens/typography/font-family.cjs.js"),d=require("../../../themes/typography.cjs.js");const n=r.styled(i,{shouldForwardProp:e=>"size"!==e&&"valid"!==e&&"disabled"!==e})((({theme:e,size:i,valid:l,disabled:t})=>{const r=e.spacing("small"===i?3:4);return{width:r,height:r,borderRadius:e.radius["radius-4"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],position:"relative",...t&&{border:`1px solid ${e.palette.semantic.stroke["stroke-disabled"]}`,backgroundColor:e.palette.semantic.fill["fill-inverse-strong"]},...!l&&!t&&{border:`2px solid ${e.palette.semantic.stroke["stroke-error-strong"]}`,backgroundColor:e.palette.semantic.fill["fill-error-weak"]},...!t&&{"&::before":{content:'""',width:r,height:r,inset:l?"-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=r.styled(i,{shouldForwardProp:e=>"size"!==e&&"valid"!==e&&"disabled"!==e})((({theme:e,size:i,valid:l,disabled:t})=>{const r=e.spacing("small"===i?3:4);return{width:r,height:r,borderRadius:e.radius["radius-4"],backgroundColor:e.palette.semantic.fill["fill-selected"],position:"relative",...t&&{backgroundColor:e.palette.semantic.fill["fill-disabled"]},...!l&&!t&&{backgroundColor:e.palette.semantic.fill["fill-error-strong"]},...!t&&{"&::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:r,height:r,color:e.palette.semantic.fill["fill-inverse-strong"],flexShrink:0,display:"block",overflow:"visible","& g, & path":{transform:"scale(1.08)",transformOrigin:"center"}}}})),p=r.styled(t,{shouldForwardProp:e=>!["size","valid"].includes(e)})((({theme:e,size:i})=>({marginLeft:`-${e.spacing(1)}`,"& .MuiTypography-root":{..."small"===i&&{...d.typography.captionWeak,[e.breakpoints.down("tablet")]:{fontFamily:a.fontFamily.mobile.body,...d.getMobileTextStyle("caption")}}}}))),u=r.styled(l,{shouldForwardProp:e=>"valid"!==e&&"size"!==e})((({theme:e,valid:i,disabled:l,size:t})=>({...!i&&!l&&{color:e.palette.semantic.fill["fill-error-strong"],"&.Mui-checked":{color:e.palette.semantic.fill["fill-error-strong"]}},..."small"===t&&{paddingRight:e.spacing(1)}})));module.exports=({fdKey:i,label:l,size:t="medium",valid:r=!0,disabled:a,...d})=>e.jsx(p,{control:e.jsx(u,{disableFocusRipple:!0,disableRipple:!0,disableTouchRipple:!0,checkedIcon:e.jsx(c,{disabled:a,size:t,valid:r,children:e.jsx(o,{})}),"data-fd":i,icon:e.jsx(n,{disabled:a,size:t,valid:r}),indeterminateIcon:e.jsx(c,{disabled:a,size:t,valid:r,children:e.jsx(s,{})}),size:t,valid:r,...d}),"data-fd":`${i}-label`,disabled:a,label:l,size:t});
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/Box"),l=require("@mui/material/Checkbox"),t=require("@mui/material/FormControlLabel"),r=require("@mui/material/styles"),s=require("../../../icons/Remove/index.cjs.js"),o=require("../../../icons/Tick/index.cjs.js"),a=require("../../../themes/tokens/typography/font-family.cjs.js"),n=require("../../../themes/typography.cjs.js");const d=r.styled(i,{shouldForwardProp:e=>"size"!==e&&"valid"!==e&&"disabled"!==e})((({theme:e,size:i,valid:l,disabled:t})=>{const r=e.spacing("small"===i?3:4);return{width:r,height:r,borderRadius:e.radius["radius-4"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,backgroundColor:"transparent",position:"relative",...t&&{border:`1px solid ${e.palette.semantic.stroke["stroke-disabled"]}`,backgroundColor:e.palette.semantic.fill["fill-inverse-strong"]},...!l&&!t&&{border:`2px solid ${e.palette.semantic.stroke["stroke-error-strong"]}`,backgroundColor:e.palette.semantic.fill["fill-error-weak"]},...!t&&{"&::before":{content:'""',width:r,height:r,inset:l?"-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=r.styled(i,{shouldForwardProp:e=>"size"!==e&&"valid"!==e&&"disabled"!==e})((({theme:e,size:i,valid:l,disabled:t})=>{const r=e.spacing("small"===i?3:4);return{width:r,height:r,borderRadius:e.radius["radius-4"],backgroundColor:e.palette.semantic.fill["fill-selected"],position:"relative",...t&&{backgroundColor:e.palette.semantic.fill["fill-disabled"]},...!l&&!t&&{backgroundColor:e.palette.semantic.fill["fill-error-strong"]},...!t&&{"&::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:r,height:r,color:e.palette.semantic.fill["fill-inverse-strong"],flexShrink:0,display:"block",overflow:"visible","& g, & path":{transform:"scale(1.08)",transformOrigin:"center"}}}})),p=r.styled(t,{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.typography.captionWeak,[e.breakpoints.down("tablet")]:{fontFamily:a.fontFamily.mobile.body,...n.getMobileTextStyle("caption")}}}}))),u=r.styled(l,{shouldForwardProp:e=>"valid"!==e})((({theme:e,valid:i,disabled:l})=>({padding:0,margin:0,...!i&&!l&&{color:e.palette.semantic.fill["fill-error-strong"],"&.Mui-checked":{color:e.palette.semantic.fill["fill-error-strong"]}}})));module.exports=({fdKey:i,label:l,size:t="medium",valid:r=!0,disabled:a,...n})=>e.jsx(p,{control:e.jsx(u,{disableFocusRipple:!0,disableRipple:!0,disableTouchRipple:!0,checkedIcon:e.jsx(c,{disabled:a,size:t,valid:r,children:e.jsx(o,{})}),"data-fd":i,icon:e.jsx(d,{disabled:a,size:t,valid:r}),indeterminateIcon:e.jsx(c,{disabled:a,size:t,valid:r,children:e.jsx(s,{})}),size:t,valid:r,...n}),"data-fd":`${i}-label`,disabled:a,label:l,size:t});
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiCheckbox, { type CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';\nimport MuiFormControlLabel from '@mui/material/FormControlLabel';\nimport { styled } from '@mui/material/styles';\n\nimport RemoveIcon from '@fd/icons/Remove';\nimport TickIcon from '@fd/icons/Tick';\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { getMobileTextStyle, typography } from '@fd/themes/typography';\n\ninterface CheckboxProps extends Omit<MuiCheckboxProps, 'size'> {\n  fdKey: string;\n  label: string;\n  size?: 'medium' | 'small';\n  valid?: boolean;\n}\n\nconst UncheckedControl = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' | 'small'; valid: boolean; disabled?: boolean }>(({\n  theme,\n  size,\n  valid,\n  disabled,\n}) => {\n  const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n  return {\n    width: dimensions,\n    height: dimensions,\n    borderRadius: theme.radius['radius-4'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n    backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n    position: 'relative',\n\n    ...(disabled && {\n      border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n      backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n    }),\n\n    ...(!valid && !disabled && {\n      border: `2px solid ${theme.palette.semantic.stroke['stroke-error-strong']}`,\n      backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n    }),\n\n    ...(!disabled && {\n      '&::before': {\n        content: '\"\"',\n        width: dimensions,\n        height: dimensions,\n        inset: valid ? '-1px 0 0 -1px' : '-2px 0 0 -2px',\n        position: 'absolute',\n        borderRadius: theme.radius['radius-4'],\n        pointerEvents: 'none',\n      },\n      'input:hover ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-hover'],\n      },\n      'input:active ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-press'],\n      },\n      'input:focus ~ &': {\n        outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n        outlineOffset: '2px',\n      },\n    }),\n  };\n});\n\nconst IconControl = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' | 'small'; valid: boolean; disabled?: boolean }>(({\n  theme,\n  size,\n  valid,\n  disabled,\n}) => {\n  const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n  return {\n    width: dimensions,\n    height: dimensions,\n    borderRadius: theme.radius['radius-4'],\n    backgroundColor: theme.palette.semantic.fill['fill-selected'],\n    position: 'relative',\n\n    ...(disabled && {\n      backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n    }),\n\n    ...(!valid &&\n      !disabled && {\n        backgroundColor: theme.palette.semantic.fill['fill-error-strong'],\n      }),\n\n    ...(!disabled && {\n      '&::before': {\n        content: '\"\"',\n        inset: 0,\n        position: 'absolute',\n        borderRadius: theme.radius['radius-4'],\n        pointerEvents: 'none',\n      },\n      'input:hover ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-hover'],\n      },\n      'input:active ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-press'],\n      },\n      'input:focus ~ &': {\n        outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n        outlineOffset: '2px',\n      },\n    }),\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    '& svg': {\n      width: dimensions,\n      height: dimensions,\n      color: theme.palette.semantic.fill['fill-inverse-strong'],\n      flexShrink: 0,\n      display: 'block',\n      overflow: 'visible',\n      '& g, & path': {\n        transform: 'scale(1.08)',\n        transformOrigin: 'center',\n      },\n    },\n  };\n});\n\nconst StyledFormControlLabel = styled(MuiFormControlLabel, {\n  shouldForwardProp: (prop) => !['size', 'valid'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  marginLeft: `-${theme.spacing(1)}`,\n  '& .MuiTypography-root': {\n    ...(size === 'small' && {\n      ...typography.captionWeak,\n      [theme.breakpoints.down('tablet')]: {\n        fontFamily: fontFamily.mobile.body,\n        ...getMobileTextStyle('caption'),\n      },\n    }),\n  },\n}));\n\nconst StyledMuiCheckbox = styled(MuiCheckbox, {\n  shouldForwardProp: (prop) => prop !== 'valid' && prop !== 'size',\n})<{ valid: boolean; size: 'medium' | 'small' }>(({ theme, valid, disabled, size }) => ({\n  ...(!valid &&\n    !disabled && {\n      color: theme.palette.semantic.fill['fill-error-strong'],\n      '&.Mui-checked': {\n        color: theme.palette.semantic.fill['fill-error-strong'],\n      },\n    }),\n  ...(size === 'small' && {\n    paddingRight: theme.spacing(1),\n  }),\n}));\n\nconst Checkbox = ({\n  fdKey,\n  label,\n  size = 'medium',\n  valid = true,\n  disabled,\n  ...props\n}: CheckboxProps): JSX.Element => {\n  return (\n    <StyledFormControlLabel\n      control={\n        <StyledMuiCheckbox\n          disableFocusRipple\n          disableRipple\n          disableTouchRipple\n          checkedIcon={\n            <IconControl disabled={disabled} size={size} valid={valid}>\n              <TickIcon />\n            </IconControl>\n          }\n          data-fd={fdKey}\n          icon={<UncheckedControl disabled={disabled} size={size} valid={valid} />}\n          indeterminateIcon={\n            <IconControl disabled={disabled} size={size} valid={valid}>\n              <RemoveIcon />\n            </IconControl>\n          }\n          size={size}\n          valid={valid}\n          {...props}\n        />\n      }\n      data-fd={`${fdKey}-label`}\n      disabled={disabled}\n      label={label}\n      size={size}\n    />\n  );\n};\n\nexport default Checkbox;\n"],"names":["UncheckedControl","styled","Box","shouldForwardProp","prop","theme","size","valid","disabled","dimensions","spacing","width","height","borderRadius","radius","border","palette","semantic","stroke","backgroundColor","fill","position","content","inset","pointerEvents","outline","outlineOffset","IconControl","display","alignItems","justifyContent","color","flexShrink","overflow","transform","transformOrigin","StyledFormControlLabel","MuiFormControlLabel","includes","marginLeft","typography","captionWeak","breakpoints","down","fontFamily","mobile","body","getMobileTextStyle","StyledMuiCheckbox","MuiCheckbox","paddingRight","fdKey","label","props","_jsx","control","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","children","TickIcon","icon","indeterminateIcon","RemoveIcon"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiCheckbox, { type CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';\nimport MuiFormControlLabel from '@mui/material/FormControlLabel';\nimport { styled } from '@mui/material/styles';\n\nimport RemoveIcon from '@fd/icons/Remove';\nimport TickIcon from '@fd/icons/Tick';\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { getMobileTextStyle, typography } from '@fd/themes/typography';\n\ninterface CheckboxProps extends Omit<MuiCheckboxProps, 'size'> {\n  fdKey: string;\n  label?: string;\n  size?: 'medium' | 'small';\n  valid?: boolean;\n}\n\nconst UncheckedControl = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' | 'small'; valid: boolean; disabled?: boolean }>(({ theme, size, valid, disabled }) => {\n  const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n  return {\n    width: dimensions,\n    height: dimensions,\n    borderRadius: theme.radius['radius-4'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n    backgroundColor: 'transparent',\n    position: 'relative',\n\n    ...(disabled && {\n      border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n      backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n    }),\n\n    ...(!valid &&\n      !disabled && {\n        border: `2px solid ${theme.palette.semantic.stroke['stroke-error-strong']}`,\n        backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n      }),\n\n    ...(!disabled && {\n      '&::before': {\n        content: '\"\"',\n        width: dimensions,\n        height: dimensions,\n        inset: valid ? '-1px 0 0 -1px' : '-2px 0 0 -2px',\n        position: 'absolute',\n        borderRadius: theme.radius['radius-4'],\n        pointerEvents: 'none',\n      },\n      'input:hover ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-hover'],\n      },\n      'input:active ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-press'],\n      },\n      'input:focus ~ &': {\n        outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n        outlineOffset: '2px',\n      },\n    }),\n  };\n});\n\nconst IconControl = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' | 'small'; valid: boolean; disabled?: boolean }>(({ theme, size, valid, disabled }) => {\n  const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n  return {\n    width: dimensions,\n    height: dimensions,\n    borderRadius: theme.radius['radius-4'],\n    backgroundColor: theme.palette.semantic.fill['fill-selected'],\n    position: 'relative',\n\n    ...(disabled && {\n      backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n    }),\n\n    ...(!valid &&\n      !disabled && {\n        backgroundColor: theme.palette.semantic.fill['fill-error-strong'],\n      }),\n\n    ...(!disabled && {\n      '&::before': {\n        content: '\"\"',\n        inset: 0,\n        position: 'absolute',\n        borderRadius: theme.radius['radius-4'],\n        pointerEvents: 'none',\n      },\n      'input:hover ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-hover'],\n      },\n      'input:active ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-press'],\n      },\n      'input:focus ~ &': {\n        outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n        outlineOffset: '2px',\n      },\n    }),\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    '& svg': {\n      width: dimensions,\n      height: dimensions,\n      color: theme.palette.semantic.fill['fill-inverse-strong'],\n      flexShrink: 0,\n      display: 'block',\n      overflow: 'visible',\n      '& g, & path': {\n        transform: 'scale(1.08)',\n        transformOrigin: 'center',\n      },\n    },\n  };\n});\n\nconst StyledFormControlLabel = styled(MuiFormControlLabel, {\n  shouldForwardProp: (prop) => !['size', 'valid'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'flex-start',\n  margin: 0,\n  padding: 0,\n\n  ...(size === 'small' && { gap: theme.spacing(1) }),\n  ...(size === 'medium' && { gap: theme.spacing(1.5) }),\n\n  '& .MuiTypography-root': {\n    ...(size === 'small' && {\n      ...typography.captionWeak,\n      [theme.breakpoints.down('tablet')]: {\n        fontFamily: fontFamily.mobile.body,\n        ...getMobileTextStyle('caption'),\n      },\n    }),\n  },\n}));\n\nconst StyledMuiCheckbox = styled(MuiCheckbox, {\n  shouldForwardProp: (prop) => prop !== 'valid',\n})<{ valid: boolean }>(({ theme, valid, disabled }) => ({\n  padding: 0,\n  margin: 0,\n\n  ...(!valid &&\n    !disabled && {\n      color: theme.palette.semantic.fill['fill-error-strong'],\n      '&.Mui-checked': {\n        color: theme.palette.semantic.fill['fill-error-strong'],\n      },\n    }),\n}));\n\nconst Checkbox = ({\n  fdKey,\n  label,\n  size = 'medium',\n  valid = true,\n  disabled,\n  ...props\n}: CheckboxProps): JSX.Element => {\n  return (\n    <StyledFormControlLabel\n      control={\n        <StyledMuiCheckbox\n          disableFocusRipple\n          disableRipple\n          disableTouchRipple\n          checkedIcon={\n            <IconControl disabled={disabled} size={size} valid={valid}>\n              <TickIcon />\n            </IconControl>\n          }\n          data-fd={fdKey}\n          icon={<UncheckedControl disabled={disabled} size={size} valid={valid} />}\n          indeterminateIcon={\n            <IconControl disabled={disabled} size={size} valid={valid}>\n              <RemoveIcon />\n            </IconControl>\n          }\n          size={size}\n          valid={valid}\n          {...props}\n        />\n      }\n      data-fd={`${fdKey}-label`}\n      disabled={disabled}\n      label={label}\n      size={size}\n    />\n  );\n};\n\nexport default Checkbox;\n"],"names":["UncheckedControl","styled","Box","shouldForwardProp","prop","theme","size","valid","disabled","dimensions","spacing","width","height","borderRadius","radius","border","palette","semantic","stroke","backgroundColor","position","fill","content","inset","pointerEvents","outline","outlineOffset","IconControl","display","alignItems","justifyContent","color","flexShrink","overflow","transform","transformOrigin","StyledFormControlLabel","MuiFormControlLabel","includes","margin","padding","gap","typography","captionWeak","breakpoints","down","fontFamily","mobile","body","getMobileTextStyle","StyledMuiCheckbox","MuiCheckbox","fdKey","label","props","_jsx","control","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","children","TickIcon","icon","indeterminateIcon","RemoveIcon"],"mappings":"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"}

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

@@ -2,7 +2,7 @@ import { CheckboxProps as CheckboxProps$1 } from '@mui/material/Checkbox';
 
 interface CheckboxProps extends Omit<CheckboxProps$1, 'size'> {
     fdKey: string;
-    label: string;
+    label?: string;
     size?: 'medium' | 'small';
     valid?: boolean;
 }

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

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import i from"@mui/material/Box";import o from"@mui/material/Checkbox";import t from"@mui/material/FormControlLabel";import{styled as l}from"@mui/material/styles";import r from"../../../icons/Remove/index.js";import s from"../../../icons/Tick/index.js";import{fontFamily as a}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:o,disabled:t})=>{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",...t&&{border:`1px solid ${e.palette.semantic.stroke["stroke-disabled"]}`,backgroundColor:e.palette.semantic.fill["fill-inverse-strong"]},...!o&&!t&&{border:`2px solid ${e.palette.semantic.stroke["stroke-error-strong"]}`,backgroundColor:e.palette.semantic.fill["fill-error-weak"]},...!t&&{"&::before":{content:'""',width:l,height:l,inset:o?"-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:o,disabled:t})=>{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",...t&&{backgroundColor:e.palette.semantic.fill["fill-disabled"]},...!o&&!t&&{backgroundColor:e.palette.semantic.fill["fill-error-strong"]},...!t&&{"&::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(t,{shouldForwardProp:e=>!["size","valid"].includes(e)})((({theme:e,size:i})=>({marginLeft:`-${e.spacing(1)}`,"& .MuiTypography-root":{..."small"===i&&{...d.captionWeak,[e.breakpoints.down("tablet")]:{fontFamily:a.mobile.body,...n("caption")}}}}))),f=l(o,{shouldForwardProp:e=>"valid"!==e&&"size"!==e})((({theme:e,valid:i,disabled:o,size:t})=>({...!i&&!o&&{color:e.palette.semantic.fill["fill-error-strong"],"&.Mui-checked":{color:e.palette.semantic.fill["fill-error-strong"]}},..."small"===t&&{paddingRight:e.spacing(1)}}))),u=({fdKey:i,label:o,size:t="medium",valid:l=!0,disabled:a,...n})=>e(m,{control:e(f,{disableFocusRipple:!0,disableRipple:!0,disableTouchRipple:!0,checkedIcon:e(c,{disabled:a,size:t,valid:l,children:e(s,{})}),"data-fd":i,icon:e(p,{disabled:a,size:t,valid:l}),indeterminateIcon:e(c,{disabled:a,size:t,valid:l,children:e(r,{})}),size:t,valid:l,...n}),"data-fd":`${i}-label`,disabled:a,label:o,size:t});export{u as default};
+import{jsx as e}from"react/jsx-runtime";import i from"@mui/material/Box";import o from"@mui/material/Checkbox";import t 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:o,disabled:t})=>{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:"transparent",position:"relative",...t&&{border:`1px solid ${e.palette.semantic.stroke["stroke-disabled"]}`,backgroundColor:e.palette.semantic.fill["fill-inverse-strong"]},...!o&&!t&&{border:`2px solid ${e.palette.semantic.stroke["stroke-error-strong"]}`,backgroundColor:e.palette.semantic.fill["fill-error-weak"]},...!t&&{"&::before":{content:'""',width:l,height:l,inset:o?"-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:o,disabled:t})=>{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",...t&&{backgroundColor:e.palette.semantic.fill["fill-disabled"]},...!o&&!t&&{backgroundColor:e.palette.semantic.fill["fill-error-strong"]},...!t&&{"&::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(t,{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(o,{shouldForwardProp:e=>"valid"!==e})((({theme:e,valid:i,disabled:o})=>({padding:0,margin:0,...!i&&!o&&{color:e.palette.semantic.fill["fill-error-strong"],"&.Mui-checked":{color:e.palette.semantic.fill["fill-error-strong"]}}}))),u=({fdKey:i,label:o,size:t="medium",valid:l=!0,disabled:s,...n})=>e(m,{control:e(f,{disableFocusRipple:!0,disableRipple:!0,disableTouchRipple:!0,checkedIcon:e(c,{disabled:s,size:t,valid:l,children:e(a,{})}),"data-fd":i,icon:e(p,{disabled:s,size:t,valid:l}),indeterminateIcon:e(c,{disabled:s,size:t,valid:l,children:e(r,{})}),size:t,valid:l,...n}),"data-fd":`${i}-label`,disabled:s,label:o,size:t});export{u as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiCheckbox, { type CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';\nimport MuiFormControlLabel from '@mui/material/FormControlLabel';\nimport { styled } from '@mui/material/styles';\n\nimport RemoveIcon from '@fd/icons/Remove';\nimport TickIcon from '@fd/icons/Tick';\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { getMobileTextStyle, typography } from '@fd/themes/typography';\n\ninterface CheckboxProps extends Omit<MuiCheckboxProps, 'size'> {\n  fdKey: string;\n  label: string;\n  size?: 'medium' | 'small';\n  valid?: boolean;\n}\n\nconst UncheckedControl = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' | 'small'; valid: boolean; disabled?: boolean }>(({\n  theme,\n  size,\n  valid,\n  disabled,\n}) => {\n  const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n  return {\n    width: dimensions,\n    height: dimensions,\n    borderRadius: theme.radius['radius-4'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n    backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n    position: 'relative',\n\n    ...(disabled && {\n      border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n      backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n    }),\n\n    ...(!valid && !disabled && {\n      border: `2px solid ${theme.palette.semantic.stroke['stroke-error-strong']}`,\n      backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n    }),\n\n    ...(!disabled && {\n      '&::before': {\n        content: '\"\"',\n        width: dimensions,\n        height: dimensions,\n        inset: valid ? '-1px 0 0 -1px' : '-2px 0 0 -2px',\n        position: 'absolute',\n        borderRadius: theme.radius['radius-4'],\n        pointerEvents: 'none',\n      },\n      'input:hover ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-hover'],\n      },\n      'input:active ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-press'],\n      },\n      'input:focus ~ &': {\n        outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n        outlineOffset: '2px',\n      },\n    }),\n  };\n});\n\nconst IconControl = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' | 'small'; valid: boolean; disabled?: boolean }>(({\n  theme,\n  size,\n  valid,\n  disabled,\n}) => {\n  const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n  return {\n    width: dimensions,\n    height: dimensions,\n    borderRadius: theme.radius['radius-4'],\n    backgroundColor: theme.palette.semantic.fill['fill-selected'],\n    position: 'relative',\n\n    ...(disabled && {\n      backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n    }),\n\n    ...(!valid &&\n      !disabled && {\n        backgroundColor: theme.palette.semantic.fill['fill-error-strong'],\n      }),\n\n    ...(!disabled && {\n      '&::before': {\n        content: '\"\"',\n        inset: 0,\n        position: 'absolute',\n        borderRadius: theme.radius['radius-4'],\n        pointerEvents: 'none',\n      },\n      'input:hover ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-hover'],\n      },\n      'input:active ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-press'],\n      },\n      'input:focus ~ &': {\n        outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n        outlineOffset: '2px',\n      },\n    }),\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    '& svg': {\n      width: dimensions,\n      height: dimensions,\n      color: theme.palette.semantic.fill['fill-inverse-strong'],\n      flexShrink: 0,\n      display: 'block',\n      overflow: 'visible',\n      '& g, & path': {\n        transform: 'scale(1.08)',\n        transformOrigin: 'center',\n      },\n    },\n  };\n});\n\nconst StyledFormControlLabel = styled(MuiFormControlLabel, {\n  shouldForwardProp: (prop) => !['size', 'valid'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  marginLeft: `-${theme.spacing(1)}`,\n  '& .MuiTypography-root': {\n    ...(size === 'small' && {\n      ...typography.captionWeak,\n      [theme.breakpoints.down('tablet')]: {\n        fontFamily: fontFamily.mobile.body,\n        ...getMobileTextStyle('caption'),\n      },\n    }),\n  },\n}));\n\nconst StyledMuiCheckbox = styled(MuiCheckbox, {\n  shouldForwardProp: (prop) => prop !== 'valid' && prop !== 'size',\n})<{ valid: boolean; size: 'medium' | 'small' }>(({ theme, valid, disabled, size }) => ({\n  ...(!valid &&\n    !disabled && {\n      color: theme.palette.semantic.fill['fill-error-strong'],\n      '&.Mui-checked': {\n        color: theme.palette.semantic.fill['fill-error-strong'],\n      },\n    }),\n  ...(size === 'small' && {\n    paddingRight: theme.spacing(1),\n  }),\n}));\n\nconst Checkbox = ({\n  fdKey,\n  label,\n  size = 'medium',\n  valid = true,\n  disabled,\n  ...props\n}: CheckboxProps): JSX.Element => {\n  return (\n    <StyledFormControlLabel\n      control={\n        <StyledMuiCheckbox\n          disableFocusRipple\n          disableRipple\n          disableTouchRipple\n          checkedIcon={\n            <IconControl disabled={disabled} size={size} valid={valid}>\n              <TickIcon />\n            </IconControl>\n          }\n          data-fd={fdKey}\n          icon={<UncheckedControl disabled={disabled} size={size} valid={valid} />}\n          indeterminateIcon={\n            <IconControl disabled={disabled} size={size} valid={valid}>\n              <RemoveIcon />\n            </IconControl>\n          }\n          size={size}\n          valid={valid}\n          {...props}\n        />\n      }\n      data-fd={`${fdKey}-label`}\n      disabled={disabled}\n      label={label}\n      size={size}\n    />\n  );\n};\n\nexport default Checkbox;\n"],"names":["UncheckedControl","styled","Box","shouldForwardProp","prop","theme","size","valid","disabled","dimensions","spacing","width","height","borderRadius","radius","border","palette","semantic","stroke","backgroundColor","fill","position","content","inset","pointerEvents","outline","outlineOffset","IconControl","display","alignItems","justifyContent","color","flexShrink","overflow","transform","transformOrigin","StyledFormControlLabel","MuiFormControlLabel","includes","marginLeft","typography","captionWeak","breakpoints","down","fontFamily","mobile","body","getMobileTextStyle","StyledMuiCheckbox","MuiCheckbox","paddingRight","Checkbox","fdKey","label","props","_jsx","control","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","children","TickIcon","icon","indeterminateIcon","RemoveIcon"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiCheckbox, { type CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';\nimport MuiFormControlLabel from '@mui/material/FormControlLabel';\nimport { styled } from '@mui/material/styles';\n\nimport RemoveIcon from '@fd/icons/Remove';\nimport TickIcon from '@fd/icons/Tick';\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { getMobileTextStyle, typography } from '@fd/themes/typography';\n\ninterface CheckboxProps extends Omit<MuiCheckboxProps, 'size'> {\n  fdKey: string;\n  label?: string;\n  size?: 'medium' | 'small';\n  valid?: boolean;\n}\n\nconst UncheckedControl = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' | 'small'; valid: boolean; disabled?: boolean }>(({ theme, size, valid, disabled }) => {\n  const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n  return {\n    width: dimensions,\n    height: dimensions,\n    borderRadius: theme.radius['radius-4'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n    backgroundColor: 'transparent',\n    position: 'relative',\n\n    ...(disabled && {\n      border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n      backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n    }),\n\n    ...(!valid &&\n      !disabled && {\n        border: `2px solid ${theme.palette.semantic.stroke['stroke-error-strong']}`,\n        backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n      }),\n\n    ...(!disabled && {\n      '&::before': {\n        content: '\"\"',\n        width: dimensions,\n        height: dimensions,\n        inset: valid ? '-1px 0 0 -1px' : '-2px 0 0 -2px',\n        position: 'absolute',\n        borderRadius: theme.radius['radius-4'],\n        pointerEvents: 'none',\n      },\n      'input:hover ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-hover'],\n      },\n      'input:active ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-press'],\n      },\n      'input:focus ~ &': {\n        outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n        outlineOffset: '2px',\n      },\n    }),\n  };\n});\n\nconst IconControl = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' | 'small'; valid: boolean; disabled?: boolean }>(({ theme, size, valid, disabled }) => {\n  const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n  return {\n    width: dimensions,\n    height: dimensions,\n    borderRadius: theme.radius['radius-4'],\n    backgroundColor: theme.palette.semantic.fill['fill-selected'],\n    position: 'relative',\n\n    ...(disabled && {\n      backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n    }),\n\n    ...(!valid &&\n      !disabled && {\n        backgroundColor: theme.palette.semantic.fill['fill-error-strong'],\n      }),\n\n    ...(!disabled && {\n      '&::before': {\n        content: '\"\"',\n        inset: 0,\n        position: 'absolute',\n        borderRadius: theme.radius['radius-4'],\n        pointerEvents: 'none',\n      },\n      'input:hover ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-hover'],\n      },\n      'input:active ~ &::before': {\n        backgroundColor: theme.palette.semantic.fill['fill-press'],\n      },\n      'input:focus ~ &': {\n        outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n        outlineOffset: '2px',\n      },\n    }),\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    '& svg': {\n      width: dimensions,\n      height: dimensions,\n      color: theme.palette.semantic.fill['fill-inverse-strong'],\n      flexShrink: 0,\n      display: 'block',\n      overflow: 'visible',\n      '& g, & path': {\n        transform: 'scale(1.08)',\n        transformOrigin: 'center',\n      },\n    },\n  };\n});\n\nconst StyledFormControlLabel = styled(MuiFormControlLabel, {\n  shouldForwardProp: (prop) => !['size', 'valid'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'flex-start',\n  margin: 0,\n  padding: 0,\n\n  ...(size === 'small' && { gap: theme.spacing(1) }),\n  ...(size === 'medium' && { gap: theme.spacing(1.5) }),\n\n  '& .MuiTypography-root': {\n    ...(size === 'small' && {\n      ...typography.captionWeak,\n      [theme.breakpoints.down('tablet')]: {\n        fontFamily: fontFamily.mobile.body,\n        ...getMobileTextStyle('caption'),\n      },\n    }),\n  },\n}));\n\nconst StyledMuiCheckbox = styled(MuiCheckbox, {\n  shouldForwardProp: (prop) => prop !== 'valid',\n})<{ valid: boolean }>(({ theme, valid, disabled }) => ({\n  padding: 0,\n  margin: 0,\n\n  ...(!valid &&\n    !disabled && {\n      color: theme.palette.semantic.fill['fill-error-strong'],\n      '&.Mui-checked': {\n        color: theme.palette.semantic.fill['fill-error-strong'],\n      },\n    }),\n}));\n\nconst Checkbox = ({\n  fdKey,\n  label,\n  size = 'medium',\n  valid = true,\n  disabled,\n  ...props\n}: CheckboxProps): JSX.Element => {\n  return (\n    <StyledFormControlLabel\n      control={\n        <StyledMuiCheckbox\n          disableFocusRipple\n          disableRipple\n          disableTouchRipple\n          checkedIcon={\n            <IconControl disabled={disabled} size={size} valid={valid}>\n              <TickIcon />\n            </IconControl>\n          }\n          data-fd={fdKey}\n          icon={<UncheckedControl disabled={disabled} size={size} valid={valid} />}\n          indeterminateIcon={\n            <IconControl disabled={disabled} size={size} valid={valid}>\n              <RemoveIcon />\n            </IconControl>\n          }\n          size={size}\n          valid={valid}\n          {...props}\n        />\n      }\n      data-fd={`${fdKey}-label`}\n      disabled={disabled}\n      label={label}\n      size={size}\n    />\n  );\n};\n\nexport default Checkbox;\n"],"names":["UncheckedControl","styled","Box","shouldForwardProp","prop","theme","size","valid","disabled","dimensions","spacing","width","height","borderRadius","radius","border","palette","semantic","stroke","backgroundColor","position","fill","content","inset","pointerEvents","outline","outlineOffset","IconControl","display","alignItems","justifyContent","color","flexShrink","overflow","transform","transformOrigin","StyledFormControlLabel","MuiFormControlLabel","includes","margin","padding","gap","typography","captionWeak","breakpoints","down","fontFamily","mobile","body","getMobileTextStyle","StyledMuiCheckbox","MuiCheckbox","Checkbox","fdKey","label","props","_jsx","control","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","children","TickIcon","icon","indeterminateIcon","RemoveIcon"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),r=require("@mui/material/ListItemText"),a=require("@mui/material/MenuItem"),c=require("@mui/material/styles"),n=require("../Checkbox/index.cjs.js");const i=c.styled(t,{shouldForwardProp:e=>"disabled"!==e})((({theme:e,disabled:t=!1})=>({alignItems:"center",display:"inline-flex",justifyContent:"center","& .MuiAvatar-img":{opacity:t?e.palette.action.disabledOpacity:1}}))),o=c.styled(n)((()=>({padding:0,margin:0}))),s=({children:t,disabled:c=!1,label:n,secondaryText:s,type:d="text",...l})=>{const u=(()=>{switch(d){case"checkbox":{const{checked:e,onCheckedChange:t,...r}=l;return r}case"avatar":{const{avatar:e,...t}=l;return t}case"icon":{const{icon:e,...t}=l;return t}default:return l}})(),h="checkbox"===d?{role:"menuitemcheckbox","aria-checked":l.checked}:void 0;return e.jsxs(a,{...u,disabled:c,onClick:e=>{if(!c)if("checkbox"!==d)u?.onClick?.(e);else{e.preventDefault(),e.stopPropagation();const{checked:t,onCheckedChange:r}=l,a="boolean"==typeof t?t:Boolean(l.selected);r?.(!a,e)}},...h,children:[(()=>{switch(d){case"avatar":return(()=>{const{avatar:t}=l;return e.jsx(i,{disabled:c,children:t})})();case"checkbox":return(()=>{const{checked:t,onCheckedChange:r}=l,a="boolean"==typeof t?t:Boolean(l.selected);return e.jsx(i,{children:e.jsx(o,{checked:a,disabled:c,fdKey:"checkbox-menu-item",label:"Checkbox",onChange:e=>{e.stopPropagation(),r?.(e.target.checked,e)},size:"small",tabIndex:-1})})})();case"icon":return(()=>{const{icon:t}=l;return e.jsx(i,{children:t})})();default:return null}})(),n||s?e.jsx(r,{primary:n,secondary:s}):t]})};exports.MenuItem=s,exports.default=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),r=require("@mui/material/ListItemText"),a=require("@mui/material/MenuItem"),n=require("@mui/material/styles"),c=require("../Checkbox/index.cjs.js");const i=n.styled(t,{shouldForwardProp:e=>"disabled"!==e})((({theme:e,disabled:t=!1})=>({alignItems:"center",display:"inline-flex",justifyContent:"center","& .MuiAvatar-img":{opacity:t?e.palette.action.disabledOpacity:1}}))),s=n.styled(c)((()=>({pointerEvents:"none"}))),o=({children:t,disabled:n=!1,label:c,secondaryText:o,type:l="text",...d})=>{const u=(()=>{switch(l){case"checkbox":{const{checked:e,onCheckedChange:t,...r}=d;return r}case"avatar":{const{avatar:e,...t}=d;return t}case"icon":{const{icon:e,...t}=d;return t}default:return d}})();return e.jsxs(a,{...u,disabled:n,onClick:e=>{if(!n)if("checkbox"!==l)u?.onClick?.(e);else{e.preventDefault(),e.stopPropagation();const{checked:t,onCheckedChange:r}=d,a="boolean"==typeof t?t:Boolean(d.selected);r?.(!a,e)}},children:[(()=>{switch(l){case"avatar":return(()=>{const{avatar:t}=d;return e.jsx(i,{disabled:n,children:t})})();case"checkbox":return(()=>{const{checked:t}=d,r="boolean"==typeof t?t:Boolean(d.selected);return e.jsx(s,{"aria-hidden":!0,checked:r,disabled:n,fdKey:"checkbox-menu-item",size:"small",tabIndex:-1})})();case"icon":return(()=>{const{icon:t}=d;return e.jsx(i,{children:t})})();default:return null}})(),c||o?e.jsx(r,{primary:c,secondary:o}):t]})};exports.MenuItem=o,exports.default=o;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/MenuItem/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport ListItemText from '@mui/material/ListItemText';\nimport MuiMenuItem, { type MenuItemProps as MuiMenuItemProps } from '@mui/material/MenuItem';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '../Checkbox';\n\ntype BaseProps = Omit<MuiMenuItemProps, 'children'> & {\n  children?: React.ReactNode;\n  label?: React.ReactNode;\n  secondaryText?: React.ReactNode;\n  type?: 'avatar' | 'checkbox' | 'icon' | 'text';\n};\n\ntype AvatarMenuItemProps = BaseProps & {\n  avatar: React.ReactNode;\n  checkbox?: never;\n  icon?: never;\n  type: 'avatar';\n};\n\ntype CheckboxMenuItemProps = BaseProps & {\n  avatar?: never;\n  checked?: boolean;\n  icon?: never;\n  onCheckedChange?: (\n    checked: boolean,\n    e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLIElement>,\n  ) => void;\n  type: 'checkbox';\n};\n\ntype IconMenuItemProps = BaseProps & {\n  avatar?: never;\n  checkbox?: never;\n  icon: React.ReactNode;\n  type: 'icon';\n};\n\ntype TextMenuItemProps = BaseProps & {\n  avatar?: never;\n  checkbox?: never;\n  icon?: never;\n  type?: 'text';\n};\n\nexport type MenuItemProps =\n  | AvatarMenuItemProps\n  | CheckboxMenuItemProps\n  | IconMenuItemProps\n  | TextMenuItemProps;\n\nconst StyledStartAdornment = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n\n  '& .MuiAvatar-img': {\n    opacity: disabled ? theme.palette.action.disabledOpacity : 1,\n  },\n}));\n\nconst StyledCheckbox = styled(Checkbox)(() => ({\n  padding: 0,\n  margin: 0,\n}));\n\nexport const MenuItem = ({\n  children,\n  disabled = false,\n  label,\n  secondaryText,\n  type = 'text',\n  ...props\n}: MenuItemProps): JSX.Element => {\n  // Remove type-specific props from props object to avoid passing them to MuiMenuItem\n  const muiProps: MuiMenuItemProps = ((): MuiMenuItemProps => {\n    switch (type) {\n      case 'checkbox': {\n        const { checked: _c, onCheckedChange: _h, ...rest } = props as CheckboxMenuItemProps;\n        return rest as MuiMenuItemProps;\n      }\n      case 'avatar': {\n        const { avatar: _a, ...rest } = props as AvatarMenuItemProps;\n        return rest as MuiMenuItemProps;\n      }\n      case 'icon': {\n        const { icon: _i, ...rest } = props as IconMenuItemProps;\n        return rest as MuiMenuItemProps;\n      }\n      default:\n        return props as MuiMenuItemProps;\n    }\n  })();\n\n  const handleClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n    if (disabled) {\n      return;\n    }\n\n    // If menu item is a checkbox, clicking the menu item will toggle the checkbox\n    if (type === 'checkbox') {\n      event.preventDefault();\n      event.stopPropagation();\n\n      const { checked, onCheckedChange } = props as CheckboxMenuItemProps;\n      const isChecked =\n        typeof checked === 'boolean' ? checked : Boolean((props as MuiMenuItemProps).selected);\n\n      onCheckedChange?.(!isChecked, event);\n      return;\n    }\n\n    muiProps?.onClick?.(event);\n  };\n\n  const renderAvatar = (): React.ReactNode => {\n    const { avatar } = props as AvatarMenuItemProps;\n    return <StyledStartAdornment disabled={disabled}>{avatar}</StyledStartAdornment>;\n  };\n\n  const renderCheckbox = (): React.ReactNode => {\n    const { checked, onCheckedChange } = props as CheckboxMenuItemProps;\n\n    const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n      event.stopPropagation();\n      onCheckedChange?.(event.target.checked, event);\n    };\n\n    const isChecked = typeof checked === 'boolean' ? checked : Boolean((props as MuiMenuItemProps).selected);\n\n    return (\n      <StyledStartAdornment>\n        <StyledCheckbox\n          checked={isChecked}\n          disabled={disabled}\n          fdKey='checkbox-menu-item'\n          label='Checkbox'\n          onChange={handleCheckboxChange}\n          size=\"small\"\n          tabIndex={-1}\n        />\n      </StyledStartAdornment>\n    );\n  };\n\n  const renderIcon = (): React.ReactNode => {\n    const { icon } = props as IconMenuItemProps;\n    return <StyledStartAdornment>{icon}</StyledStartAdornment>;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    switch (type) {\n      case 'avatar':\n        return renderAvatar();\n      case 'checkbox':\n        return renderCheckbox();\n      case 'icon':\n        return renderIcon();\n      default:\n        return null;\n    }\n  };\n\n  const renderText = (): React.ReactNode => {\n    if (label || secondaryText) {\n      return <ListItemText primary={label} secondary={secondaryText} />;\n    }\n\n    return children;\n  };\n\n  const a11yProps =\n    type === 'checkbox'\n      ? ({\n          role: 'menuitemcheckbox',\n          'aria-checked': (props as CheckboxMenuItemProps).checked,\n        } as const)\n      : undefined;\n\n  return (\n    <MuiMenuItem {...muiProps} disabled={disabled} onClick={handleClick} {...a11yProps}>\n      {renderStartAdornment()}\n      {renderText()}\n    </MuiMenuItem>\n  );\n};\n\nexport default MenuItem;\n"],"names":["StyledStartAdornment","styled","Box","shouldForwardProp","prop","theme","disabled","alignItems","display","justifyContent","opacity","palette","action","disabledOpacity","StyledCheckbox","Checkbox","padding","margin","MenuItem","children","label","secondaryText","type","props","muiProps","checked","_c","onCheckedChange","_h","rest","avatar","_a","icon","_i","a11yProps","role","undefined","_jsxs","MuiMenuItem","onClick","event","preventDefault","stopPropagation","isChecked","Boolean","selected","_jsx","renderAvatar","fdKey","onChange","target","size","tabIndex","renderCheckbox","renderIcon","renderStartAdornment","ListItemText","primary","secondary"],"mappings":"0RAoDA,MAAMA,EAAuBC,EAAAA,OAAOC,EAAK,CACvCC,kBAAoBC,GAAkB,aAATA,GADFH,EAEF,EAAGI,QAAOC,YAAW,MAAO,CACrDC,WAAY,SACZC,QAAS,cACTC,eAAgB,SAEhB,mBAAoB,CAClBC,QAASJ,EAAWD,EAAMM,QAAQC,OAAOC,gBAAkB,OAIzDC,EAAiBb,EAAAA,OAAOc,EAAPd,EAAiB,KAAA,CACtCe,QAAS,EACTC,OAAQ,MAGGC,EAAW,EACtBC,WACAb,YAAW,EACXc,QACAC,gBACAC,OAAO,UACJC,MAGH,MAAMC,EAA6B,MACjC,OAAQF,GACN,IAAK,WAAY,CACf,MAAQG,QAASC,EAAIC,gBAAiBC,KAAOC,GAASN,EACtD,OAAOM,CACT,CACA,IAAK,SAAU,CACb,MAAQC,OAAQC,KAAOF,GAASN,EAChC,OAAOM,CACT,CACA,IAAK,OAAQ,CACX,MAAQG,KAAMC,KAAOJ,GAASN,EAC9B,OAAOM,CACT,CACA,QACE,OAAON,EAEZ,EAjBkC,GAgG7BW,EACK,aAATZ,EACK,CACCa,KAAM,mBACN,eAAiBZ,EAAgCE,cAEnDW,EAEN,OACEC,EAAAA,KAACC,EAAW,IAAKd,EAAUlB,SAAUA,EAAUiC,QAtF5BC,IACnB,IAAIlC,EAKJ,GAAa,aAATgB,EAYJE,GAAUe,UAAUC,OAZpB,CACEA,EAAMC,iBACND,EAAME,kBAEN,MAAMjB,QAAEA,EAAOE,gBAAEA,GAAoBJ,EAC/BoB,EACe,kBAAZlB,EAAwBA,EAAUmB,QAASrB,EAA2BsB,UAE/ElB,KAAmBgB,EAAWH,EAEhC,MAsEyEN,EAASf,SAAA,CA9BvD,MAC3B,OAAQG,GACN,IAAK,SACH,MAtCe,MACnB,MAAMQ,OAAEA,GAAWP,EACnB,OAAOuB,EAAAA,IAAC9C,EAAoB,CAACM,SAAUA,EAAQa,SAAGW,KAoCvCiB,GACT,IAAK,WACH,MAnCiB,MACrB,MAAMtB,QAAEA,EAAOE,gBAAEA,GAAoBJ,EAO/BoB,EAA+B,kBAAZlB,EAAwBA,EAAUmB,QAASrB,EAA2BsB,UAE/F,OACEC,EAAAA,IAAC9C,EAAoB,CAAAmB,SACnB2B,EAAAA,IAAChC,EAAc,CACbW,QAASkB,EACTrC,SAAUA,EACV0C,MAAM,qBACN5B,MAAM,WACN6B,SAdwBT,IAC5BA,EAAME,kBACNf,IAAkBa,EAAMU,OAAOzB,QAASe,IAapCW,KAAK,QACLC,iBAgBKC,GACT,IAAK,OACH,MAZa,MACjB,MAAMrB,KAAEA,GAAST,EACjB,OAAOuB,EAAAA,IAAC9C,EAAoB,CAAAmB,SAAEa,KAUnBsB,GACT,QACE,OAAO,OAsBRC,GAjBCnC,GAASC,EACJyB,EAAAA,IAACU,EAAY,CAACC,QAASrC,EAAOsC,UAAWrC,IAG3CF"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/MenuItem/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport ListItemText from '@mui/material/ListItemText';\nimport MuiMenuItem, { type MenuItemProps as MuiMenuItemProps } from '@mui/material/MenuItem';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '../Checkbox';\n\ntype BaseProps = Omit<MuiMenuItemProps, 'children'> & {\n  children?: React.ReactNode;\n  label?: React.ReactNode;\n  secondaryText?: React.ReactNode;\n  type?: 'avatar' | 'checkbox' | 'icon' | 'text';\n};\n\ntype AvatarMenuItemProps = BaseProps & {\n  avatar: React.ReactNode;\n  checkbox?: never;\n  icon?: never;\n  type: 'avatar';\n};\n\ntype CheckboxMenuItemProps = BaseProps & {\n  avatar?: never;\n  checked?: boolean;\n  icon?: never;\n  onCheckedChange?: (\n    checked: boolean,\n    e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLIElement>,\n  ) => void;\n  type: 'checkbox';\n};\n\ntype IconMenuItemProps = BaseProps & {\n  avatar?: never;\n  checkbox?: never;\n  icon: React.ReactNode;\n  type: 'icon';\n};\n\ntype TextMenuItemProps = BaseProps & {\n  avatar?: never;\n  checkbox?: never;\n  icon?: never;\n  type?: 'text';\n};\n\nexport type MenuItemProps =\n  | AvatarMenuItemProps\n  | CheckboxMenuItemProps\n  | IconMenuItemProps\n  | TextMenuItemProps;\n\nconst StyledStartAdornment = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n\n  '& .MuiAvatar-img': {\n    opacity: disabled ? theme.palette.action.disabledOpacity : 1,\n  },\n}));\n\nconst StyledCheckbox = styled(Checkbox)(() => ({\n  pointerEvents: 'none',\n}));\n\nexport const MenuItem = ({\n  children,\n  disabled = false,\n  label,\n  secondaryText,\n  type = 'text',\n  ...props\n}: MenuItemProps): JSX.Element => {\n  // Remove type-specific props from props object to avoid passing them to MuiMenuItem\n  const muiProps: MuiMenuItemProps = ((): MuiMenuItemProps => {\n    switch (type) {\n      case 'checkbox': {\n        const { checked: _c, onCheckedChange: _h, ...rest } = props as CheckboxMenuItemProps;\n        return rest as MuiMenuItemProps;\n      }\n      case 'avatar': {\n        const { avatar: _a, ...rest } = props as AvatarMenuItemProps;\n        return rest as MuiMenuItemProps;\n      }\n      case 'icon': {\n        const { icon: _i, ...rest } = props as IconMenuItemProps;\n        return rest as MuiMenuItemProps;\n      }\n      default:\n        return props as MuiMenuItemProps;\n    }\n  })();\n\n  const handleClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n    if (disabled) {\n      return;\n    }\n\n    // If menu item is a checkbox, clicking the menu item will toggle the checkbox\n    if (type === 'checkbox') {\n      event.preventDefault();\n      event.stopPropagation();\n\n      const { checked, onCheckedChange } = props as CheckboxMenuItemProps;\n      const isChecked =\n        typeof checked === 'boolean' ? checked : Boolean((props as MuiMenuItemProps).selected);\n\n      onCheckedChange?.(!isChecked, event);\n      return;\n    }\n\n    muiProps?.onClick?.(event);\n  };\n\n  const renderAvatar = (): React.ReactNode => {\n    const { avatar } = props as AvatarMenuItemProps;\n    return <StyledStartAdornment disabled={disabled}>{avatar}</StyledStartAdornment>;\n  };\n\n  const renderCheckbox = (): React.ReactNode => {\n    const { checked } = props as CheckboxMenuItemProps;\n    const isChecked = typeof checked === 'boolean' ? checked : Boolean((props as MuiMenuItemProps).selected);\n\n    return (\n      <StyledCheckbox\n        aria-hidden\n        checked={isChecked}\n        disabled={disabled}\n        fdKey=\"checkbox-menu-item\"\n        size=\"small\"\n        tabIndex={-1}\n      />\n    );\n  };\n\n  const renderIcon = (): React.ReactNode => {\n    const { icon } = props as IconMenuItemProps;\n    return <StyledStartAdornment>{icon}</StyledStartAdornment>;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    switch (type) {\n      case 'avatar':\n        return renderAvatar();\n      case 'checkbox':\n        return renderCheckbox();\n      case 'icon':\n        return renderIcon();\n      default:\n        return null;\n    }\n  };\n\n  const renderText = (): React.ReactNode => {\n    if (label || secondaryText) {\n      return <ListItemText primary={label} secondary={secondaryText} />;\n    }\n\n    return children;\n  };\n\n  return (\n    <MuiMenuItem {...muiProps} disabled={disabled} onClick={handleClick}>\n      {renderStartAdornment()}\n      {renderText()}\n    </MuiMenuItem>\n  );\n};\n\nexport default MenuItem;\n"],"names":["StyledStartAdornment","styled","Box","shouldForwardProp","prop","theme","disabled","alignItems","display","justifyContent","opacity","palette","action","disabledOpacity","StyledCheckbox","Checkbox","pointerEvents","MenuItem","children","label","secondaryText","type","props","muiProps","checked","_c","onCheckedChange","_h","rest","avatar","_a","icon","_i","_jsxs","MuiMenuItem","onClick","event","preventDefault","stopPropagation","isChecked","Boolean","selected","_jsx","renderAvatar","fdKey","size","tabIndex","renderCheckbox","renderIcon","renderStartAdornment","ListItemText","primary","secondary"],"mappings":"0RAoDA,MAAMA,EAAuBC,EAAAA,OAAOC,EAAK,CACvCC,kBAAoBC,GAAkB,aAATA,GADFH,EAEF,EAAGI,QAAOC,YAAW,MAAO,CACrDC,WAAY,SACZC,QAAS,cACTC,eAAgB,SAEhB,mBAAoB,CAClBC,QAASJ,EAAWD,EAAMM,QAAQC,OAAOC,gBAAkB,OAIzDC,EAAiBb,EAAAA,OAAOc,EAAPd,EAAiB,KAAA,CACtCe,cAAe,WAGJC,EAAW,EACtBC,WACAZ,YAAW,EACXa,QACAC,gBACAC,OAAO,UACJC,MAGH,MAAMC,EAA6B,MACjC,OAAQF,GACN,IAAK,WAAY,CACf,MAAQG,QAASC,EAAIC,gBAAiBC,KAAOC,GAASN,EACtD,OAAOM,CACT,CACA,IAAK,SAAU,CACb,MAAQC,OAAQC,KAAOF,GAASN,EAChC,OAAOM,CACT,CACA,IAAK,OAAQ,CACX,MAAQG,KAAMC,KAAOJ,GAASN,EAC9B,OAAOM,CACT,CACA,QACE,OAAON,EAEZ,EAjBkC,GAuFnC,OACEW,EAAAA,KAACC,EAAW,IAAKX,EAAUjB,SAAUA,EAAU6B,QArE5BC,IACnB,IAAI9B,EAKJ,GAAa,aAATe,EAYJE,GAAUY,UAAUC,OAZpB,CACEA,EAAMC,iBACND,EAAME,kBAEN,MAAMd,QAAEA,EAAOE,gBAAEA,GAAoBJ,EAC/BiB,EACe,kBAAZf,EAAwBA,EAAUgB,QAASlB,EAA2BmB,UAE/Ef,KAAmBa,EAAWH,EAEhC,aA+B2B,MAC3B,OAAQf,GACN,IAAK,SACH,MA7Be,MACnB,MAAMQ,OAAEA,GAAWP,EACnB,OAAOoB,EAAAA,IAAC1C,EAAoB,CAACM,SAAUA,EAAQY,SAAGW,KA2BvCc,GACT,IAAK,WACH,MA1BiB,MACrB,MAAMnB,QAAEA,GAAYF,EACdiB,EAA+B,kBAAZf,EAAwBA,EAAUgB,QAASlB,EAA2BmB,UAE/F,OACEC,EAAAA,IAAC5B,EAAc,CAAA,eAAA,EAEbU,QAASe,EACTjC,SAAUA,EACVsC,MAAM,qBACNC,KAAK,QACLC,UAAU,KAeHC,GACT,IAAK,OACH,MAZa,MACjB,MAAMhB,KAAEA,GAAST,EACjB,OAAOoB,EAAAA,IAAC1C,EAAoB,CAAAkB,SAAEa,KAUnBiB,GACT,QACE,OAAO,OAcRC,GATC9B,GAASC,EACJsB,EAAAA,IAACQ,EAAY,CAACC,QAAShC,EAAOiC,UAAWhC,IAG3CF"}

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

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