@flipdish/portal-library 5.9.1 → 6.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/LinearProgress/index.tsx"],"sourcesContent":["import { useId, useMemo } from 'react';\n\nimport MuiLinearProgress, {\n  linearProgressClasses,\n  type LinearProgressProps as MuiLinearProgressProps,\n} from '@mui/material/LinearProgress';\n\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nconst StyledLinearProgress = styled(MuiLinearProgress)(({ theme }) => {\n  return {\n    height: 8,\n    [`&.${linearProgressClasses.root}`]: {\n      borderRadius: 5,\n      backgroundColor: theme.palette.grey[200],\n      ...theme.applyStyles('dark', {\n        backgroundColor: theme.palette.grey[800],\n      }),\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`&.${linearProgressClasses.colorPrimary} .${linearProgressClasses.bar}`]: {\n      backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      ...theme.applyStyles('dark', {\n        backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      }),\n    },\n    [`& .${linearProgressClasses.bar1}`]: {\n      borderRadius: 5,\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`& .${linearProgressClasses.bar2}`]: {\n      borderRadius: 5,\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`& .${linearProgressClasses.dashed}`]: {\n      marginTop: 2,\n    },\n  };\n});\n\ninterface LinearProgressProps extends MuiLinearProgressProps {\n  label?: string;\n  showLabel?: boolean;\n}\n\n/**\n * Props for the themed LinearProgress component.\n * Extends MUI's LinearProgressProps.\n * - label: Optional label text (falls back to percentage when `value` is provided).\n * - showLabel: When true, renders the label to the right of the bar.\n */\nexport const LinearProgress: React.FC<LinearProgressProps> = ({ value, label, showLabel, ...rest }) => {\n  const labelId = useId();\n  const parsedLabel = useMemo(() => label || (value !== undefined ? `${value}%` : undefined), [label, value]);\n  return (\n    <Box alignItems=\"center\" display=\"flex\" gap={1}>\n      <Box flex={1}>\n        <StyledLinearProgress\n          aria-label={!showLabel && parsedLabel ? parsedLabel : undefined}\n          aria-labelledby={showLabel && parsedLabel ? labelId : undefined}\n          {...rest}\n          value={value}\n        />\n      </Box>\n      {showLabel && (\n        <Box alignItems=\"center\" display=\"flex\" height={20} justifyContent=\"flex-end\" width={40}>\n          <Typography color=\"textSecondary\" id={labelId} variant=\"captionWeak\">\n            {parsedLabel}\n          </Typography>\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nexport default LinearProgress;\n\nexport { linearProgressClasses };\n"],"names":["StyledLinearProgress","styled","MuiLinearProgress","theme","height","linearProgressClasses","root","borderRadius","backgroundColor","palette","grey","applyStyles","boxShadow","customShadows","sunken","colorPrimary","bar","semantic","fill","bar1","bar2","dashed","marginTop","LinearProgress","value","label","showLabel","rest","labelId","useId","parsedLabel","useMemo","undefined","_jsxs","Box","alignItems","display","gap","children","_jsx","flex","justifyContent","width","Typography","color","id","variant"],"mappings":"4VAWA,MAAMA,EAAuBC,EAAOC,EAAPD,EAA0B,EAAGE,YACjD,CACLC,OAAQ,EACR,CAAC,KAAKC,EAAsBC,QAAS,CACnCC,aAAc,EACdC,gBAAiBL,EAAMM,QAAQC,KAAK,QACjCP,EAAMQ,YAAY,OAAQ,CAC3BH,gBAAiBL,EAAMM,QAAQC,KAAK,OAEtCE,UAAWT,EAAMU,eAAeC,QAElC,CAAC,KAAKT,EAAsBU,iBAAiBV,EAAsBW,OAAQ,CACzER,gBAAiBL,EAAMM,QAAQQ,SAASC,KAAK,oBAC1Cf,EAAMQ,YAAY,OAAQ,CAC3BH,gBAAiBL,EAAMM,QAAQQ,SAASC,KAAK,oBAGjD,CAAC,MAAMb,EAAsBc,QAAS,CACpCZ,aAAc,EACdK,UAAWT,EAAMU,eAAeC,QAElC,CAAC,MAAMT,EAAsBe,QAAS,CACpCb,aAAc,EACdK,UAAWT,EAAMU,eAAeC,QAElC,CAAC,MAAMT,EAAsBgB,UAAW,CACtCC,UAAW,OAgBJC,EAAgD,EAAGC,QAAOC,QAAOC,eAAcC,MAC1F,MAAMC,EAAUC,IACVC,EAAcC,GAAQ,IAAMN,SAAoBO,IAAVR,EAAsB,GAAGA,UAAWQ,IAAY,CAACP,EAAOD,IACpG,OACES,EAACC,EAAG,CAACC,WAAW,SAASC,QAAQ,OAAOC,IAAK,EAACC,SAAA,CAC5CC,EAACL,GAAIM,KAAM,EAACF,SACVC,EAACvC,iBACc0B,GAAaI,EAAcA,OAAcE,EAAS,kBAC9CN,GAAaI,EAAcF,OAAUI,KAClDL,EACJH,MAAOA,MAGVE,GACCa,EAACL,EAAG,CAACC,WAAW,SAASC,QAAQ,OAAOhC,OAAQ,GAAIqC,eAAe,WAAWC,MAAO,GAAEJ,SACrFC,EAACI,GAAWC,MAAM,gBAAgBC,GAAIjB,EAASkB,QAAQ,cAAaR,SACjER"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/LinearProgress/index.tsx"],"sourcesContent":["import { useId, useMemo } from 'react';\n\nimport MuiLinearProgress, {\n  linearProgressClasses,\n  type LinearProgressProps as MuiLinearProgressProps,\n} from '@mui/material/LinearProgress';\n\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nconst StyledLinearProgress = styled(MuiLinearProgress)(({ theme }) => {\n  return {\n    height: 8,\n    [`&.${linearProgressClasses.root}`]: {\n      borderRadius: theme.radius['radius-8'],\n      overflow: 'hidden',\n      backgroundColor: theme.palette.semantic.fill['fill-weak'],\n      ...theme.applyStyles('dark', {\n        backgroundColor: theme.palette.grey[800],\n      }),\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`&.${linearProgressClasses.colorPrimary} .${linearProgressClasses.bar}`]: {\n      backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      ...theme.applyStyles('dark', {\n        backgroundColor: theme.palette.semantic.fill['fill-selected'],\n      }),\n    },\n    [`& .${linearProgressClasses.bar1}`]: {\n      borderRadius: theme.radius['radius-8'],\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`& .${linearProgressClasses.bar2}`]: {\n      borderRadius: theme.radius['radius-8'],\n      boxShadow: theme.customShadows?.sunken,\n    },\n    [`& .${linearProgressClasses.dashed}`]: {\n      marginTop: 2,\n    },\n  };\n});\n\ninterface LinearProgressProps extends MuiLinearProgressProps {\n  label?: string;\n  showLabel?: boolean;\n}\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  lineHeight: '20px',\n  gap: theme.spacing(1),\n  alignItems: 'center',\n  display: 'flex',\n}));\n\nconst StyledTypography = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst LabelBox = styled(Box)(() => ({\n  alignItems: 'center',\n  display: 'flex',\n  height: '20px',\n  justifyContent: 'flex-end',\n  minWidth: '40px',\n}));\n\n/**\n * Props for the themed LinearProgress component.\n * Extends MUI's LinearProgressProps.\n * - label: Optional label text (falls back to percentage when `value` is provided).\n * - showLabel: When true, renders the label to the right of the bar.\n * - color: we don't support changing the color in our design\n */\nexport const LinearProgress: React.FC<Omit<LinearProgressProps, 'color'>> = ({ value, label, showLabel, ...rest }) => {\n  const labelId = useId();\n  const parsedLabel = useMemo(() => label || (value !== undefined ? `${value}%` : undefined), [label, value]);\n  return (\n    <StyledBox>\n      <Box flex={1}>\n        <StyledLinearProgress\n          aria-label={!showLabel && parsedLabel ? parsedLabel : undefined}\n          aria-labelledby={showLabel && parsedLabel ? labelId : undefined}\n          {...rest}\n          value={value}\n        />\n      </Box>\n      {showLabel && (\n        <LabelBox>\n          <StyledTypography id={labelId} variant=\"captionWeak\">\n            {parsedLabel}\n          </StyledTypography>\n        </LabelBox>\n      )}\n    </StyledBox>\n  );\n};\n\nexport default LinearProgress;\n\nexport { linearProgressClasses };\n"],"names":["StyledLinearProgress","styled","MuiLinearProgress","theme","height","linearProgressClasses","root","borderRadius","radius","overflow","backgroundColor","palette","semantic","fill","applyStyles","grey","boxShadow","customShadows","sunken","colorPrimary","bar","bar1","bar2","dashed","marginTop","StyledBox","Box","lineHeight","gap","spacing","alignItems","display","StyledTypography","Typography","color","text","LabelBox","justifyContent","minWidth","LinearProgress","value","label","showLabel","rest","labelId","useId","parsedLabel","useMemo","undefined","_jsxs","children","_jsx","flex","id","variant"],"mappings":"4VAWA,MAAMA,EAAuBC,EAAOC,EAAPD,EAA0B,EAAGE,YACjD,CACLC,OAAQ,EACR,CAAC,KAAKC,EAAsBC,QAAS,CACnCC,aAAcJ,EAAMK,OAAO,YAC3BC,SAAU,SACVC,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,gBAC1CV,EAAMW,YAAY,OAAQ,CAC3BJ,gBAAiBP,EAAMQ,QAAQI,KAAK,OAEtCC,UAAWb,EAAMc,eAAeC,QAElC,CAAC,KAAKb,EAAsBc,iBAAiBd,EAAsBe,OAAQ,CACzEV,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,oBAC1CV,EAAMW,YAAY,OAAQ,CAC3BJ,gBAAiBP,EAAMQ,QAAQC,SAASC,KAAK,oBAGjD,CAAC,MAAMR,EAAsBgB,QAAS,CACpCd,aAAcJ,EAAMK,OAAO,YAC3BQ,UAAWb,EAAMc,eAAeC,QAElC,CAAC,MAAMb,EAAsBiB,QAAS,CACpCf,aAAcJ,EAAMK,OAAO,YAC3BQ,UAAWb,EAAMc,eAAeC,QAElC,CAAC,MAAMb,EAAsBkB,UAAW,CACtCC,UAAW,OAUXC,EAAYxB,EAAOyB,EAAPzB,EAAY,EAAGE,YAAO,CACtCwB,WAAY,OACZC,IAAKzB,EAAM0B,QAAQ,GACnBC,WAAY,SACZC,QAAS,WAGLC,EAAmB/B,EAAOgC,EAAPhC,EAAmB,EAAGE,YAAO,CACpD+B,MAAO/B,EAAMQ,QAAQC,SAASuB,KAAK,iBAG/BC,EAAWnC,EAAOyB,EAAPzB,EAAY,KAAA,CAC3B6B,WAAY,SACZC,QAAS,OACT3B,OAAQ,OACRiC,eAAgB,WAChBC,SAAU,WAUCC,EAA+D,EAAGC,QAAOC,QAAOC,eAAcC,MACzG,MAAMC,EAAUC,IACVC,EAAcC,GAAQ,IAAMN,SAAoBO,IAAVR,EAAsB,GAAGA,UAAWQ,IAAY,CAACP,EAAOD,IACpG,OACES,EAACxB,EAAS,CAAAyB,SAAA,CACRC,EAACzB,EAAG,CAAC0B,KAAM,EAACF,SACVC,EAACnD,iBACc0C,GAAaI,EAAcA,OAAcE,EAAS,kBAC9CN,GAAaI,EAAcF,OAAUI,KAClDL,EACJH,MAAOA,MAGVE,GACCS,EAACf,EAAQ,CAAAc,SACPC,EAACnB,EAAgB,CAACqB,GAAIT,EAASU,QAAQ,cAAaJ,SACjDJ"}

package/dist/components/atoms/Link/getLinkStyles.cjs.js

@@ -0,0 +1,2 @@
+"use strict";require("@mui/material/styles"),require("./index.cjs.js");const e=e=>{switch(e){case"Brand":default:return"text-primary";case"Destructive":return"text-error";case"Inverse Strong":return"text-inverse-strong";case"Inverse Weak":return"text-inverse-weak";case"Neutral Strong":return"text-strong";case"Neutral Weak":return"text-weak"}},t=e=>{switch(e){case"Inverse Strong":case"Inverse Weak":return"text-inverse-disabled";default:return"text-disabled"}};exports.getLinkStyles=(r,n="Brand",s=!0)=>{const a=e(n),i=t(n);return{default:{color:r.palette.semantic.text[a],cursor:"pointer",borderRadius:r.radius?.["radius-4"],padding:r.spacing(.5,.5),display:"inline-flex",alignItems:"center",gap:r.spacing(1),textDecoration:s?"underline":"none",textUnderlineOffset:"25%",textUnderlinePosition:"from-font"},disabled:{color:r.palette.semantic.text[i],cursor:"not-allowed",textDecoration:"none"},press:{textDecoration:s?"none":"underline"},focus:{outlineOffset:"-2px",outline:`2px solid ${r.palette.semantic.stroke["stroke-focus"]}`,borderRadius:r.radius?.["radius-4"]||"4px",transition:"none"},hover:{textDecoration:s?"none":"underline"}}};
+//# sourceMappingURL=getLinkStyles.cjs.js.map

package/dist/components/atoms/Link/getLinkStyles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getLinkStyles.cjs.js","sources":["../../../../src/components/atoms/Link/getLinkStyles.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles';\nimport { type LinkState } from '.';\n\nexport type LinkTone = 'Brand' | 'Destructive' | 'Inverse Strong' | 'Inverse Weak' | 'Neutral Strong' | 'Neutral Weak' | undefined;\n\ninterface StyleObject {\n  [property: string]: number | string;\n}\n\ntype LinkStyles = {\n  [state in LinkState]?: StyleObject;\n};\n\nexport const getLinkStyles = (theme: Theme, tone: LinkTone = 'Brand', underline: boolean = true): LinkStyles => {\n  const textType = getTextType(tone);\n  const disabledType = getDisabledType(tone);\n\n  return {\n    default: {\n      color: theme.palette.semantic.text[textType],\n      cursor: 'pointer',\n      borderRadius: theme.radius?.['radius-4'],\n      padding: theme.spacing(0.5, 0.5),\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: theme.spacing(1),\n      textDecoration: underline ? 'underline' : 'none',\n      textUnderlineOffset: '25%',\n      textUnderlinePosition: 'from-font',\n    },\n    disabled: {\n      color: theme.palette.semantic.text[disabledType],\n      cursor: 'not-allowed',\n      textDecoration: 'none',\n    },\n    press: {\n      textDecoration: underline ? 'none' : 'underline',\n    },\n    focus: {\n      outlineOffset: '-2px',\n      outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n      borderRadius: theme.radius?.['radius-4'] || '4px',\n      transition: 'none',\n    },\n    hover: {\n      textDecoration: underline ? 'none' : 'underline',\n    },\n  };\n\n}\n\nconst getTextType = (tone: LinkTone): 'text-primary' | 'text-error' | 'text-inverse-strong' | 'text-inverse-weak' | 'text-strong' | 'text-weak' => {\n  switch (tone) {\n    case 'Brand':\n      return 'text-primary';\n    case 'Destructive':\n      return 'text-error';\n    case 'Inverse Strong':\n      return 'text-inverse-strong';\n    case 'Inverse Weak':\n      return 'text-inverse-weak';\n    case 'Neutral Strong':\n      return 'text-strong';\n    case 'Neutral Weak':\n      return 'text-weak';\n    default:\n      return 'text-primary';\n  }\n};\n\nconst getDisabledType = (tone: LinkTone): 'text-inverse-disabled' | 'text-disabled' => {\n  switch (tone) {\n    case 'Inverse Strong':\n    case 'Inverse Weak':\n      return 'text-inverse-disabled';\n    default:\n      return 'text-disabled';\n  }\n};"],"names":["getTextType","tone","getDisabledType","theme","underline","textType","disabledType","default","color","palette","semantic","text","cursor","borderRadius","radius","padding","spacing","display","alignItems","gap","textDecoration","textUnderlineOffset","textUnderlinePosition","disabled","press","focus","outlineOffset","outline","stroke","transition","hover"],"mappings":"uEAaO,MAsCDA,EAAeC,IACnB,OAAQA,GACN,IAAK,QAYL,QACE,MAAO,eAXT,IAAK,cACH,MAAO,aACT,IAAK,iBACH,MAAO,sBACT,IAAK,eACH,MAAO,oBACT,IAAK,iBACH,MAAO,cACT,IAAK,eACH,MAAO,cAMPC,EAAmBD,IACvB,OAAQA,GACN,IAAK,iBACL,IAAK,eACH,MAAO,wBACT,QACE,MAAO,wCA/DgB,CAACE,EAAcF,EAAiB,QAASG,GAAqB,KACzF,MAAMC,EAAWL,EAAYC,GACvBK,EAAeJ,EAAgBD,GAErC,MAAO,CACLM,QAAS,CACPC,MAAOL,EAAMM,QAAQC,SAASC,KAAKN,GACnCO,OAAQ,UACRC,aAAcV,EAAMW,SAAS,YAC7BC,QAASZ,EAAMa,QAAQ,GAAK,IAC5BC,QAAS,cACTC,WAAY,SACZC,IAAKhB,EAAMa,QAAQ,GACnBI,eAAgBhB,EAAY,YAAc,OAC1CiB,oBAAqB,MACrBC,sBAAuB,aAEzBC,SAAU,CACRf,MAAOL,EAAMM,QAAQC,SAASC,KAAKL,GACnCM,OAAQ,cACRQ,eAAgB,QAElBI,MAAO,CACLJ,eAAgBhB,EAAY,OAAS,aAEvCqB,MAAO,CACLC,cAAe,OACfC,QAAS,aAAaxB,EAAMM,QAAQC,SAASkB,OAAO,kBACpDf,aAAcV,EAAMW,SAAS,aAAe,MAC5Ce,WAAY,QAEdC,MAAO,CACLV,eAAgBhB,EAAY,OAAS"}

package/dist/components/atoms/Link/getLinkStyles.d.ts

@@ -0,0 +1,14 @@
+import { Theme } from '@mui/material/styles';
+import { LinkState } from './index.js';
+
+type LinkTone = 'Brand' | 'Destructive' | 'Inverse Strong' | 'Inverse Weak' | 'Neutral Strong' | 'Neutral Weak' | undefined;
+interface StyleObject {
+    [property: string]: number | string;
+}
+type LinkStyles = {
+    [state in LinkState]?: StyleObject;
+};
+declare const getLinkStyles: (theme: Theme, tone?: LinkTone, underline?: boolean) => LinkStyles;
+
+export { getLinkStyles };
+export type { LinkTone };

package/dist/components/atoms/Link/getLinkStyles.js

@@ -0,0 +1,2 @@
+import"@mui/material/styles";import"./index.js";const e=(e,n="Brand",s=!0)=>{const a=t(n),i=r(n);return{default:{color:e.palette.semantic.text[a],cursor:"pointer",borderRadius:e.radius?.["radius-4"],padding:e.spacing(.5,.5),display:"inline-flex",alignItems:"center",gap:e.spacing(1),textDecoration:s?"underline":"none",textUnderlineOffset:"25%",textUnderlinePosition:"from-font"},disabled:{color:e.palette.semantic.text[i],cursor:"not-allowed",textDecoration:"none"},press:{textDecoration:s?"none":"underline"},focus:{outlineOffset:"-2px",outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,borderRadius:e.radius?.["radius-4"]||"4px",transition:"none"},hover:{textDecoration:s?"none":"underline"}}},t=e=>{switch(e){case"Brand":default:return"text-primary";case"Destructive":return"text-error";case"Inverse Strong":return"text-inverse-strong";case"Inverse Weak":return"text-inverse-weak";case"Neutral Strong":return"text-strong";case"Neutral Weak":return"text-weak"}},r=e=>{switch(e){case"Inverse Strong":case"Inverse Weak":return"text-inverse-disabled";default:return"text-disabled"}};export{e as getLinkStyles};
+//# sourceMappingURL=getLinkStyles.js.map

package/dist/components/atoms/Link/getLinkStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getLinkStyles.js","sources":["../../../../src/components/atoms/Link/getLinkStyles.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles';\nimport { type LinkState } from '.';\n\nexport type LinkTone = 'Brand' | 'Destructive' | 'Inverse Strong' | 'Inverse Weak' | 'Neutral Strong' | 'Neutral Weak' | undefined;\n\ninterface StyleObject {\n  [property: string]: number | string;\n}\n\ntype LinkStyles = {\n  [state in LinkState]?: StyleObject;\n};\n\nexport const getLinkStyles = (theme: Theme, tone: LinkTone = 'Brand', underline: boolean = true): LinkStyles => {\n  const textType = getTextType(tone);\n  const disabledType = getDisabledType(tone);\n\n  return {\n    default: {\n      color: theme.palette.semantic.text[textType],\n      cursor: 'pointer',\n      borderRadius: theme.radius?.['radius-4'],\n      padding: theme.spacing(0.5, 0.5),\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: theme.spacing(1),\n      textDecoration: underline ? 'underline' : 'none',\n      textUnderlineOffset: '25%',\n      textUnderlinePosition: 'from-font',\n    },\n    disabled: {\n      color: theme.palette.semantic.text[disabledType],\n      cursor: 'not-allowed',\n      textDecoration: 'none',\n    },\n    press: {\n      textDecoration: underline ? 'none' : 'underline',\n    },\n    focus: {\n      outlineOffset: '-2px',\n      outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n      borderRadius: theme.radius?.['radius-4'] || '4px',\n      transition: 'none',\n    },\n    hover: {\n      textDecoration: underline ? 'none' : 'underline',\n    },\n  };\n\n}\n\nconst getTextType = (tone: LinkTone): 'text-primary' | 'text-error' | 'text-inverse-strong' | 'text-inverse-weak' | 'text-strong' | 'text-weak' => {\n  switch (tone) {\n    case 'Brand':\n      return 'text-primary';\n    case 'Destructive':\n      return 'text-error';\n    case 'Inverse Strong':\n      return 'text-inverse-strong';\n    case 'Inverse Weak':\n      return 'text-inverse-weak';\n    case 'Neutral Strong':\n      return 'text-strong';\n    case 'Neutral Weak':\n      return 'text-weak';\n    default:\n      return 'text-primary';\n  }\n};\n\nconst getDisabledType = (tone: LinkTone): 'text-inverse-disabled' | 'text-disabled' => {\n  switch (tone) {\n    case 'Inverse Strong':\n    case 'Inverse Weak':\n      return 'text-inverse-disabled';\n    default:\n      return 'text-disabled';\n  }\n};"],"names":["getLinkStyles","theme","tone","underline","textType","getTextType","disabledType","getDisabledType","default","color","palette","semantic","text","cursor","borderRadius","radius","padding","spacing","display","alignItems","gap","textDecoration","textUnderlineOffset","textUnderlinePosition","disabled","press","focus","outlineOffset","outline","stroke","transition","hover"],"mappings":"gDAaO,MAAMA,EAAgB,CAACC,EAAcC,EAAiB,QAASC,GAAqB,KACzF,MAAMC,EAAWC,EAAYH,GACvBI,EAAeC,EAAgBL,GAErC,MAAO,CACLM,QAAS,CACPC,MAAOR,EAAMS,QAAQC,SAASC,KAAKR,GACnCS,OAAQ,UACRC,aAAcb,EAAMc,SAAS,YAC7BC,QAASf,EAAMgB,QAAQ,GAAK,IAC5BC,QAAS,cACTC,WAAY,SACZC,IAAKnB,EAAMgB,QAAQ,GACnBI,eAAgBlB,EAAY,YAAc,OAC1CmB,oBAAqB,MACrBC,sBAAuB,aAEzBC,SAAU,CACRf,MAAOR,EAAMS,QAAQC,SAASC,KAAKN,GACnCO,OAAQ,cACRQ,eAAgB,QAElBI,MAAO,CACLJ,eAAgBlB,EAAY,OAAS,aAEvCuB,MAAO,CACLC,cAAe,OACfC,QAAS,aAAa3B,EAAMS,QAAQC,SAASkB,OAAO,kBACpDf,aAAcb,EAAMc,SAAS,aAAe,MAC5Ce,WAAY,QAEdC,MAAO,CACLV,eAAgBlB,EAAY,OAAS,eAMrCE,EAAeH,IACnB,OAAQA,GACN,IAAK,QAYL,QACE,MAAO,eAXT,IAAK,cACH,MAAO,aACT,IAAK,iBACH,MAAO,sBACT,IAAK,eACH,MAAO,oBACT,IAAK,iBACH,MAAO,cACT,IAAK,eACH,MAAO,cAMPK,EAAmBL,IACvB,OAAQA,GACN,IAAK,iBACL,IAAK,eACH,MAAO,wBACT,QACE,MAAO"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("@mui/material/Link");module.exports=e;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("@mui/material/Link"),r=require("@mui/material/styles"),i=require("./getLinkStyles.cjs.js");const n=r.styled(t,{shouldForwardProp:e=>!["tone","size","weight","state","underline","fdKey","iconLeft","iconRight"].includes(e)})((({theme:e,tone:t="Brand",size:r="body",weight:n="regular",underline:o,state:l="default"})=>{const a=i.getLinkStyles(e,t,o),u=e.typography[s(r,n)];return{...a.default,...a[l],...u,"&:hover":{...a.hover},"&:focus:not(:focus-visible)":{outline:"none"},"&:focus-visible":{...a.focus},"&:active":{...a.press},"& > svg":{flexShrink:0,verticalAlign:"middle",width:"20px",height:"20px"}}})),o=t=>{const{children:r,className:i,fdKey:o,href:s,state:l="default",target:a,rel:u,tone:d="Brand",underline:c=!0,size:f="body",weight:h="regular",iconLeft:g=null,iconRight:p=null,...y}=t,b={...y,className:i,"data-fd":o,fdKey:o,href:s,iconLeft:g,iconRight:p,rel:"_blank"!==a||u?u:"noopener noreferrer",size:f,state:l,target:a,tone:d,underline:c,weight:h};return e.jsxs(n,{...b,children:[g,r,p]})},s=(e,t)=>"caption"===e?"bold"===t?"captionStrong":"captionWeak":"body"===e&&"bold"===t?"b1Strong":"b1Weak";exports.Link=o,exports.default=o;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Link/index.tsx"],"sourcesContent":["import React, { type ReactElement } from 'react';\n\nimport MuiLink, { type LinkProps as MuiLinkProps } from '@mui/material/Link';\nimport { styled } from '@mui/material/styles';\n\nimport { getLinkStyles, type LinkTone } from './getLinkStyles';\n\nexport type LinkSize = 'body' | 'caption';\nexport type LinkWeight = 'bold' | 'regular';\nexport type LinkState = 'default' | 'disabled' | 'focus' | 'hover' | 'press';\n\nexport interface StyledLinkProps extends Omit<MuiLinkProps, 'color' | 'state' | 'underline'> {\n    className?: string;\n    state?: LinkState;\n    children: React.ReactNode;\n    href?: string;\n    target?: '_blank' | '_parent' | '_self' | '_top';\n    rel?: string;\n    fdKey: string;\n    tone?: LinkTone;\n    underline?: boolean;\n    size?: LinkSize;\n    weight?: LinkWeight;\n    iconLeft?: React.ReactNode;\n    iconRight?: React.ReactNode;\n}\n\nconst StyledLink = styled(MuiLink, {\n    shouldForwardProp: (prop: string) => !['tone', 'size', 'weight', 'state', 'underline', 'fdKey', 'iconLeft', 'iconRight'].includes(prop),\n})<StyledLinkProps>((\n    { theme, tone = 'Brand', size = 'body', weight = 'regular', underline, state = 'default' }\n) => {\n    const styles = getLinkStyles(theme, tone, underline);\n\n    const typographyStyle = theme.typography[getTypographyVariant(size, weight)];\n\n    return {\n        ...styles.default,\n        ...styles[state],\n        ...typographyStyle,\n\n        '&:hover': {\n            ...styles.hover,\n        },\n        '&:focus:not(:focus-visible)': {\n            outline: 'none', // Hide focus ring for mouse/touch only\n        },\n        // focus visible so that the focus ring only shows for keyboard users\n        '&:focus-visible': { ...styles.focus },\n        '&:active': {\n            ...styles.press,\n        },\n        // Style icons\n        '& > svg': {\n            flexShrink: 0,\n            verticalAlign: 'middle',\n            width: '20px',\n            height: '20px',\n        },\n    };\n});\n\nexport const Link = (props: StyledLinkProps): ReactElement => {\n    const { children, className, fdKey, href, state = 'default', target, rel, tone = 'Brand', underline = true, size = 'body', weight = 'regular', iconLeft = null, iconRight = null, ...rest } = props;\n    // Automatically add rel=\"noopener noreferrer\" for external links\n    const linkRel = target === '_blank' && !rel ? 'noopener noreferrer' : rel;\n\n    const styledLinkProps = {\n        ...rest,\n        className,\n        'data-fd': fdKey,\n        fdKey,\n        href,\n        iconLeft,\n        iconRight,\n        rel: linkRel,\n        size,\n        state,\n        target,\n        tone,\n        underline,\n        weight,\n    } as unknown as React.ComponentProps<typeof StyledLink>;\n\n    return (\n        <StyledLink {...styledLinkProps}>\n            {iconLeft}\n            {children}\n            {iconRight}\n        </StyledLink>\n    );\n};\n\nconst getTypographyVariant = (size: LinkSize, weight: LinkWeight): 'b1Strong' | 'b1Weak' | 'captionStrong' | 'captionWeak' => {\n    if (size === 'caption') {\n        return weight === 'bold' ? 'captionStrong' : 'captionWeak';\n    }\n    if (size === 'body') {\n        return weight === 'bold' ? 'b1Strong' : 'b1Weak';\n    }\n    return 'b1Weak';\n};\n\nexport default Link;\n"],"names":["StyledLink","styled","MuiLink","shouldForwardProp","prop","includes","theme","tone","size","weight","underline","state","styles","getLinkStyles","typographyStyle","typography","getTypographyVariant","default","hover","outline","focus","press","flexShrink","verticalAlign","width","height","Link","props","children","className","fdKey","href","target","rel","iconLeft","iconRight","rest","styledLinkProps","_jsxs"],"mappings":"kOA2BA,MAAMA,EAAaC,EAAAA,OAAOC,EAAS,CAC/BC,kBAAoBC,IAAkB,CAAC,OAAQ,OAAQ,SAAU,QAAS,YAAa,QAAS,WAAY,aAAaC,SAASD,IADnHH,EAEC,EACdK,QAAOC,OAAO,QAASC,OAAO,OAAQC,SAAS,UAAWC,YAAWC,QAAQ,cAE/E,MAAMC,EAASC,EAAAA,cAAcP,EAAOC,EAAMG,GAEpCI,EAAkBR,EAAMS,WAAWC,EAAqBR,EAAMC,IAEpE,MAAO,IACAG,EAAOK,WACPL,EAAOD,MACPG,EAEH,UAAW,IACJF,EAAOM,OAEd,8BAA+B,CAC3BC,QAAS,QAGb,kBAAmB,IAAKP,EAAOQ,OAC/B,WAAY,IACLR,EAAOS,OAGd,UAAW,CACPC,WAAY,EACZC,cAAe,SACfC,MAAO,OACPC,OAAQ,YAKPC,EAAQC,IACjB,MAAMC,SAAEA,EAAQC,UAAEA,EAASC,MAAEA,EAAKC,KAAEA,EAAIpB,MAAEA,EAAQ,UAASqB,OAAEA,EAAMC,IAAEA,EAAG1B,KAAEA,EAAO,QAAOG,UAAEA,GAAY,EAAIF,KAAEA,EAAO,OAAMC,OAAEA,EAAS,UAASyB,SAAEA,EAAW,KAAIC,UAAEA,EAAY,QAASC,GAAST,EAIxLU,EAAkB,IACjBD,EACHP,YACA,UAAWC,EACXA,QACAC,OACAG,WACAC,YACAF,IAVuB,WAAXD,GAAwBC,EAA8BA,EAAxB,sBAW1CzB,OACAG,QACAqB,SACAzB,OACAG,YACAD,UAGJ,OACI6B,EAAAA,KAACtC,EAAU,IAAKqC,EAAeT,SAAA,CAC1BM,EACAN,EACAO,MAKPnB,EAAuB,CAACR,EAAgBC,IAC7B,YAATD,EACkB,SAAXC,EAAoB,gBAAkB,cAEpC,SAATD,GACkB,SAAXC,EAAoB,WAExB"}

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

@@ -1,2 +1,26 @@
-import Link from '@mui/material/Link';
-export { default } from '@mui/material/Link';
+import react__default, { ReactElement } from 'react';
+import { LinkProps } from '@mui/material/Link';
+import { LinkTone } from './getLinkStyles.js';
+
+type LinkSize = 'body' | 'caption';
+type LinkWeight = 'bold' | 'regular';
+type LinkState = 'default' | 'disabled' | 'focus' | 'hover' | 'press';
+interface StyledLinkProps extends Omit<LinkProps, 'color' | 'state' | 'underline'> {
+    className?: string;
+    state?: LinkState;
+    children: react__default.ReactNode;
+    href?: string;
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    rel?: string;
+    fdKey: string;
+    tone?: LinkTone;
+    underline?: boolean;
+    size?: LinkSize;
+    weight?: LinkWeight;
+    iconLeft?: react__default.ReactNode;
+    iconRight?: react__default.ReactNode;
+}
+declare const Link: (props: StyledLinkProps) => ReactElement;
+
+export { Link, Link as default };
+export type { LinkSize, LinkState, LinkWeight, StyledLinkProps };

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

@@ -1,2 +1,2 @@
-import i from"@mui/material/Link";export{default}from"@mui/material/Link";
+import{jsxs as e}from"react/jsx-runtime";import"react";import t from"@mui/material/Link";import{styled as r}from"@mui/material/styles";import{getLinkStyles as i}from"./getLinkStyles.js";const o=r(t,{shouldForwardProp:e=>!["tone","size","weight","state","underline","fdKey","iconLeft","iconRight"].includes(e)})((({theme:e,tone:t="Brand",size:r="body",weight:o="regular",underline:n,state:l="default"})=>{const s=i(e,t,n),d=e.typography[a(r,o)];return{...s.default,...s[l],...d,"&:hover":{...s.hover},"&:focus:not(:focus-visible)":{outline:"none"},"&:focus-visible":{...s.focus},"&:active":{...s.press},"& > svg":{flexShrink:0,verticalAlign:"middle",width:"20px",height:"20px"}}})),n=t=>{const{children:r,className:i,fdKey:n,href:a,state:l="default",target:s,rel:d,tone:c="Brand",underline:u=!0,size:f="body",weight:h="regular",iconLeft:g=null,iconRight:m=null,...p}=t,b={...p,className:i,"data-fd":n,fdKey:n,href:a,iconLeft:g,iconRight:m,rel:"_blank"!==s||d?d:"noopener noreferrer",size:f,state:l,target:s,tone:c,underline:u,weight:h};return e(o,{...b,children:[g,r,m]})},a=(e,t)=>"caption"===e?"bold"===t?"captionStrong":"captionWeak":"body"===e&&"bold"===t?"b1Strong":"b1Weak";export{n as Link,n as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Link/index.tsx"],"sourcesContent":["import React, { type ReactElement } from 'react';\n\nimport MuiLink, { type LinkProps as MuiLinkProps } from '@mui/material/Link';\nimport { styled } from '@mui/material/styles';\n\nimport { getLinkStyles, type LinkTone } from './getLinkStyles';\n\nexport type LinkSize = 'body' | 'caption';\nexport type LinkWeight = 'bold' | 'regular';\nexport type LinkState = 'default' | 'disabled' | 'focus' | 'hover' | 'press';\n\nexport interface StyledLinkProps extends Omit<MuiLinkProps, 'color' | 'state' | 'underline'> {\n    className?: string;\n    state?: LinkState;\n    children: React.ReactNode;\n    href?: string;\n    target?: '_blank' | '_parent' | '_self' | '_top';\n    rel?: string;\n    fdKey: string;\n    tone?: LinkTone;\n    underline?: boolean;\n    size?: LinkSize;\n    weight?: LinkWeight;\n    iconLeft?: React.ReactNode;\n    iconRight?: React.ReactNode;\n}\n\nconst StyledLink = styled(MuiLink, {\n    shouldForwardProp: (prop: string) => !['tone', 'size', 'weight', 'state', 'underline', 'fdKey', 'iconLeft', 'iconRight'].includes(prop),\n})<StyledLinkProps>((\n    { theme, tone = 'Brand', size = 'body', weight = 'regular', underline, state = 'default' }\n) => {\n    const styles = getLinkStyles(theme, tone, underline);\n\n    const typographyStyle = theme.typography[getTypographyVariant(size, weight)];\n\n    return {\n        ...styles.default,\n        ...styles[state],\n        ...typographyStyle,\n\n        '&:hover': {\n            ...styles.hover,\n        },\n        '&:focus:not(:focus-visible)': {\n            outline: 'none', // Hide focus ring for mouse/touch only\n        },\n        // focus visible so that the focus ring only shows for keyboard users\n        '&:focus-visible': { ...styles.focus },\n        '&:active': {\n            ...styles.press,\n        },\n        // Style icons\n        '& > svg': {\n            flexShrink: 0,\n            verticalAlign: 'middle',\n            width: '20px',\n            height: '20px',\n        },\n    };\n});\n\nexport const Link = (props: StyledLinkProps): ReactElement => {\n    const { children, className, fdKey, href, state = 'default', target, rel, tone = 'Brand', underline = true, size = 'body', weight = 'regular', iconLeft = null, iconRight = null, ...rest } = props;\n    // Automatically add rel=\"noopener noreferrer\" for external links\n    const linkRel = target === '_blank' && !rel ? 'noopener noreferrer' : rel;\n\n    const styledLinkProps = {\n        ...rest,\n        className,\n        'data-fd': fdKey,\n        fdKey,\n        href,\n        iconLeft,\n        iconRight,\n        rel: linkRel,\n        size,\n        state,\n        target,\n        tone,\n        underline,\n        weight,\n    } as unknown as React.ComponentProps<typeof StyledLink>;\n\n    return (\n        <StyledLink {...styledLinkProps}>\n            {iconLeft}\n            {children}\n            {iconRight}\n        </StyledLink>\n    );\n};\n\nconst getTypographyVariant = (size: LinkSize, weight: LinkWeight): 'b1Strong' | 'b1Weak' | 'captionStrong' | 'captionWeak' => {\n    if (size === 'caption') {\n        return weight === 'bold' ? 'captionStrong' : 'captionWeak';\n    }\n    if (size === 'body') {\n        return weight === 'bold' ? 'b1Strong' : 'b1Weak';\n    }\n    return 'b1Weak';\n};\n\nexport default Link;\n"],"names":["StyledLink","styled","MuiLink","shouldForwardProp","prop","includes","theme","tone","size","weight","underline","state","styles","getLinkStyles","typographyStyle","typography","getTypographyVariant","default","hover","outline","focus","press","flexShrink","verticalAlign","width","height","Link","props","children","className","fdKey","href","target","rel","iconLeft","iconRight","rest","styledLinkProps","_jsxs"],"mappings":"0LA2BA,MAAMA,EAAaC,EAAOC,EAAS,CAC/BC,kBAAoBC,IAAkB,CAAC,OAAQ,OAAQ,SAAU,QAAS,YAAa,QAAS,WAAY,aAAaC,SAASD,IADnHH,EAEC,EACdK,QAAOC,OAAO,QAASC,OAAO,OAAQC,SAAS,UAAWC,YAAWC,QAAQ,cAE/E,MAAMC,EAASC,EAAcP,EAAOC,EAAMG,GAEpCI,EAAkBR,EAAMS,WAAWC,EAAqBR,EAAMC,IAEpE,MAAO,IACAG,EAAOK,WACPL,EAAOD,MACPG,EAEH,UAAW,IACJF,EAAOM,OAEd,8BAA+B,CAC3BC,QAAS,QAGb,kBAAmB,IAAKP,EAAOQ,OAC/B,WAAY,IACLR,EAAOS,OAGd,UAAW,CACPC,WAAY,EACZC,cAAe,SACfC,MAAO,OACPC,OAAQ,YAKPC,EAAQC,IACjB,MAAMC,SAAEA,EAAQC,UAAEA,EAASC,MAAEA,EAAKC,KAAEA,EAAIpB,MAAEA,EAAQ,UAASqB,OAAEA,EAAMC,IAAEA,EAAG1B,KAAEA,EAAO,QAAOG,UAAEA,GAAY,EAAIF,KAAEA,EAAO,OAAMC,OAAEA,EAAS,UAASyB,SAAEA,EAAW,KAAIC,UAAEA,EAAY,QAASC,GAAST,EAIxLU,EAAkB,IACjBD,EACHP,YACA,UAAWC,EACXA,QACAC,OACAG,WACAC,YACAF,IAVuB,WAAXD,GAAwBC,EAA8BA,EAAxB,sBAW1CzB,OACAG,QACAqB,SACAzB,OACAG,YACAD,UAGJ,OACI6B,EAACtC,EAAU,IAAKqC,EAAeT,SAAA,CAC1BM,EACAN,EACAO,MAKPnB,EAAuB,CAACR,EAAgBC,IAC7B,YAATD,EACkB,SAAXC,EAAoB,gBAAkB,cAEpC,SAATD,GACkB,SAAXC,EAAoB,WAExB"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("@mui/material/MenuItem");module.exports=e;
+"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;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"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"}

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

@@ -1,2 +1,38 @@
-import MenuItem from '@mui/material/MenuItem';
-export { default } from '@mui/material/MenuItem';
+import { MenuItemProps as MenuItemProps$1 } from '@mui/material/MenuItem';
+
+type BaseProps = Omit<MenuItemProps$1, 'children'> & {
+    children?: React.ReactNode;
+    label?: React.ReactNode;
+    secondaryText?: React.ReactNode;
+    type?: 'avatar' | 'checkbox' | 'icon' | 'text';
+};
+type AvatarMenuItemProps = BaseProps & {
+    avatar: React.ReactNode;
+    checkbox?: never;
+    icon?: never;
+    type: 'avatar';
+};
+type CheckboxMenuItemProps = BaseProps & {
+    avatar?: never;
+    checked?: boolean;
+    icon?: never;
+    onCheckedChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLIElement>) => void;
+    type: 'checkbox';
+};
+type IconMenuItemProps = BaseProps & {
+    avatar?: never;
+    checkbox?: never;
+    icon: React.ReactNode;
+    type: 'icon';
+};
+type TextMenuItemProps = BaseProps & {
+    avatar?: never;
+    checkbox?: never;
+    icon?: never;
+    type?: 'text';
+};
+type MenuItemProps = AvatarMenuItemProps | CheckboxMenuItemProps | IconMenuItemProps | TextMenuItemProps;
+declare const MenuItem: ({ children, disabled, label, secondaryText, type, ...props }: MenuItemProps) => JSX.Element;
+
+export { MenuItem, MenuItem as default };
+export type { MenuItemProps };

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

@@ -1,2 +1,2 @@
-import m from"@mui/material/MenuItem";export{default}from"@mui/material/MenuItem";
+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};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/MenuItem/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport ListItemText from '@mui/material/ListItemText';\nimport MuiMenuItem, { type MenuItemProps as MuiMenuItemProps } from '@mui/material/MenuItem';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '../Checkbox';\n\ntype BaseProps = Omit<MuiMenuItemProps, 'children'> & {\n  children?: React.ReactNode;\n  label?: React.ReactNode;\n  secondaryText?: React.ReactNode;\n  type?: 'avatar' | 'checkbox' | 'icon' | 'text';\n};\n\ntype AvatarMenuItemProps = BaseProps & {\n  avatar: React.ReactNode;\n  checkbox?: never;\n  icon?: never;\n  type: 'avatar';\n};\n\ntype CheckboxMenuItemProps = BaseProps & {\n  avatar?: never;\n  checked?: boolean;\n  icon?: never;\n  onCheckedChange?: (\n    checked: boolean,\n    e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLIElement>,\n  ) => void;\n  type: 'checkbox';\n};\n\ntype IconMenuItemProps = BaseProps & {\n  avatar?: never;\n  checkbox?: never;\n  icon: React.ReactNode;\n  type: 'icon';\n};\n\ntype TextMenuItemProps = BaseProps & {\n  avatar?: never;\n  checkbox?: never;\n  icon?: never;\n  type?: 'text';\n};\n\nexport type MenuItemProps =\n  | AvatarMenuItemProps\n  | CheckboxMenuItemProps\n  | IconMenuItemProps\n  | TextMenuItemProps;\n\nconst StyledStartAdornment = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n\n  '& .MuiAvatar-img': {\n    opacity: disabled ? theme.palette.action.disabledOpacity : 1,\n  },\n}));\n\nconst StyledCheckbox = styled(Checkbox)(() => ({\n  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":"qPAoDA,MAAMA,EAAuBC,EAAOC,EAAK,CACvCC,kBAAoBC,GAAkB,aAATA,GADFH,EAEF,EAAGI,QAAOC,YAAW,MAAO,CACrDC,WAAY,SACZC,QAAS,cACTC,eAAgB,SAEhB,mBAAoB,CAClBC,QAASJ,EAAWD,EAAMM,QAAQC,OAAOC,gBAAkB,OAIzDC,EAAiBb,EAAOc,EAAPd,EAAiB,KAAA,CACtCe,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,EAACC,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,EAAC9C,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,EAAC9C,EAAoB,CAAAmB,SACnB2B,EAAChC,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,EAAC9C,EAAoB,CAAAmB,SAAEa,KAUnBsB,GACT,QACE,OAAO,OAsBRC,GAjBCnC,GAASC,EACJyB,EAACU,EAAY,CAACC,QAASrC,EAAOsC,UAAWrC,IAG3CF"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/Box"),l=require("@mui/material/FormHelperText"),t=require("@mui/material/InputLabel"),s=require("@mui/material/MenuItem"),d=require("@mui/material/Select"),a=require("@mui/material/styles"),o=require("../../../icons/ArrowDown01/index.cjs.js"),n=require("../../../icons/ArrowUp01/index.cjs.js"),u=require("../../../icons/CancelCircle/index.cjs.js");const c=a.styled(i,{shouldForwardProp:e=>"fullWidth"!==e})((({theme:e,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),width:r?"100%":"min(364px, 100%)"}))),h=a.styled(d,{shouldForwardProp:e=>!["fullWidth","showPlaceholder"].includes(e)})((({theme:e,fullWidth:r=!1,showPlaceholder:i=!1})=>({display:"flex",width:r?"100%":"auto","& .MuiSelect-select":{color:i?e.palette.semantic.text["text-weak"]:e.palette.semantic.text["text-strong"]}}))),p=a.styled(i,{shouldForwardProp:e=>"disabled"!==e})((({theme:e,disabled:r=!1})=>({alignItems:"center",cursor:r?"not-allowed":"pointer",display:"flex",justifyContent:"center",pointerEvents:"auto","& svg":{color:r?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]}})));module.exports=({children:i,disabled:d=!1,errorText:a,fdKey:m,fullWidth:x=!1,helperText:j,label:b,onChange:f,options:q=[],placeholder:v,required:w=!1,value:g,...y})=>{const[C,P]=r.useState(!1),W=j?`${m}-helper-text`:void 0,F=a?`${m}-error-message`:void 0,I=[W,F].filter(Boolean).join(" ")||void 0,S=!!a&&!d,k=!(!v||g&&""!==g),M=()=>{d||P((e=>!e))},T=r.useMemo((()=>q.map((r=>e.jsx(s,{disabled:r.disabled,value:r.value,children:r.label},r.value)))),[q]);return e.jsxs(c,{fullWidth:x,children:[b&&e.jsx(t,{disabled:d,htmlFor:m,required:w,children:b}),j&&e.jsx(l,{disabled:d,id:W,children:j}),S&&e.jsxs(l,{error:!0,id:F,children:[e.jsx(u,{}),a]}),e.jsx(h,{"data-fd":m,disabled:d,error:S,fullWidth:x,IconComponent:()=>e.jsx(p,{disabled:d,onClick:e=>{d||(e.stopPropagation(),M())},children:C?e.jsx(n,{}):e.jsx(o,{})}),id:m,inputProps:{"aria-describedby":I},label:"",onChange:(e,r)=>{const i=r?.props?.disabled;i||f&&f(e,r)},onClick:M,open:C,required:w,showPlaceholder:k,value:k?v:String(g),variant:"outlined",...y,children:(()=>{const r=[];return k&&r.push(e.jsx(s,{disabled:!0,"aria-hidden":"true",sx:{display:"none"},value:v,children:v},"placeholder")),q?.length>0?r.push(...T):r.push(i),r})()})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("@mui/material/Box"),i=require("@mui/material/FormHelperText"),t=require("@mui/material/InputLabel"),s=require("@mui/material/Select"),d=require("@mui/material/styles"),o=require("../../../icons/ArrowDown01/index.cjs.js"),a=require("../../../icons/ArrowUp01/index.cjs.js"),n=require("../../../icons/CancelCircle/index.cjs.js"),u=require("../MenuItem/index.cjs.js");const c=d.styled(l,{shouldForwardProp:e=>"fullWidth"!==e})((({theme:e,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),width:r?"100%":"min(364px, 100%)"}))),p=d.styled(s,{shouldForwardProp:e=>!["fullWidth","showPlaceholder"].includes(e)})((({theme:e,fullWidth:r=!1,showPlaceholder:l=!1})=>({display:"flex",width:r?"100%":"auto","& .MuiSelect-select":{color:l?e.palette.semantic.text["text-weak"]:e.palette.semantic.text["text-strong"]}}))),h=d.styled(l,{shouldForwardProp:e=>"disabled"!==e})((({theme:e,disabled:r=!1})=>({alignItems:"center",cursor:r?"not-allowed":"pointer",display:"flex",justifyContent:"center",pointerEvents:"auto","& svg":{color:r?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]}}))),x=d.styled(u.MenuItem)((()=>({display:"none"}))),m=({children:s,disabled:d=!1,errorText:m,fdKey:j,fullWidth:b=!1,helperText:f,label:v,onChange:q,options:y=[],placeholder:w,required:g=!1,value:P,...C})=>{const[I,W]=r.useState(!1),M=f?`${j}-helper-text`:void 0,F=m?`${j}-error-message`:void 0,S=[M,F].filter(Boolean).join(" ")||void 0,k=!!m&&!d,D=!(!w||P&&""!==P),T=()=>{d||W((e=>!e))},A=r.useMemo((()=>y.map((r=>e.jsx(u.MenuItem,{disabled:r.disabled,value:r.value,children:r.label},r.value)))),[y]);return e.jsxs(c,{fullWidth:b,children:[e.jsxs(l,{children:[v&&e.jsx(t,{disabled:d,htmlFor:j,required:g,children:v}),f&&e.jsx(i,{disabled:d,id:M,children:f})]}),k&&e.jsxs(i,{error:!0,id:F,children:[e.jsx(n,{}),m]}),e.jsx(p,{"data-fd":j,disabled:d,error:k,fullWidth:b,IconComponent:()=>e.jsx(h,{disabled:d,onClick:e=>{d||(e.stopPropagation(),T())},children:I?e.jsx(a,{}):e.jsx(o,{})}),id:j,inputProps:{"aria-describedby":S},label:"",onChange:(e,r)=>{!(r&&"object"==typeof r&&"props"in r&&r.props?.disabled)?q&&q(e,r):e.preventDefault()},onClick:T,open:I,required:g,showPlaceholder:D,value:D?w:String(P),variant:"outlined",...C,children:(()=>{const r=[];return D&&r.push(e.jsx(x,{disabled:!0,"aria-hidden":"true",tabIndex:-1,value:w,children:w},"placeholder")),y?.length>0?r.push(...A):r.push(s),r})()})]})};exports.Select=m,exports.default=m;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Select/index.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport MuiMenuItem from '@mui/material/MenuItem';\nimport MuiSelect, { type SelectChangeEvent, type SelectProps as MuiSelectProps } from '@mui/material/Select';\nimport { styled } from '@mui/material/styles';\n\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nexport interface SelectOption {\n  value: number | string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport type SelectProps = Omit<MuiSelectProps, 'error' | 'id' | 'value' | 'variant'> & {\n  errorText?: string;\n  fdKey: string;\n  helperText?: string;\n  options?: SelectOption[];\n  placeholder?: string;\n  value?: number | string;\n};\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain minWidth to a maximum of 100% of the container width\n}));\n\nconst StyledSelect = styled(MuiSelect, {\n  shouldForwardProp: (prop) => !['fullWidth', 'showPlaceholder'].includes(prop as string),\n})<{ fullWidth?: boolean; showPlaceholder?: boolean }>(\n  ({ theme, fullWidth = false, showPlaceholder = false }) => ({\n    display: 'flex',\n    width: fullWidth ? '100%' : 'auto',\n\n    '& .MuiSelect-select': {\n      color: showPlaceholder\n        ? theme.palette.semantic.text['text-weak']\n        : theme.palette.semantic.text['text-strong'],\n    },\n  }),\n);\n\nconst StyledIconContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  alignItems: 'center',\n  cursor: disabled ? 'not-allowed' : 'pointer',\n  display: 'flex',\n  justifyContent: 'center',\n  pointerEvents: 'auto',\n\n  '& svg': {\n    color: disabled\n      ? theme.palette.semantic.icon['icon-disabled']\n      : theme.palette.semantic.icon['icon-strong'],\n  },\n}));\n\nconst Select = ({\n  children,\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  onChange,\n  options = [],\n  placeholder,\n  required = false,\n  value,\n  ...props\n}: SelectProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const showPlaceholder = !!placeholder && (!value || value === '');\n\n  const handleOpen = (): void => {\n    if (disabled) {\n      return;\n    }\n\n    setIsOpen((open) => !open);\n  };\n\n  const handleChange = (event: SelectChangeEvent<unknown>, child?: React.ReactNode): void => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n    const isMenuItemDisabled = (child as React.ReactElement)?.props?.disabled;\n    if (isMenuItemDisabled) {\n      return;\n    }\n\n    // Call the original onChange handler if provided\n    if (onChange) {\n      onChange(event, child);\n    }\n  };\n\n  const getDisplayValue = (): string => {\n    if (showPlaceholder) {\n      return placeholder;\n    }\n\n    return String(value);\n  };\n\n  const renderIcon = (): JSX.Element => {\n    const handleIconClick = (event: React.MouseEvent): void => {\n      if (disabled) {\n        return;\n      }\n\n      event.stopPropagation();\n      handleOpen();\n    };\n\n    return (\n      <StyledIconContainer disabled={disabled} onClick={handleIconClick}>\n        {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n      </StyledIconContainer>\n    );\n  };\n\n  const optionsMenuItems = useMemo((): React.ReactNode[] => {\n    return options.map((option) => (\n      <MuiMenuItem key={option.value} disabled={option.disabled} value={option.value}>\n        {option.label}\n      </MuiMenuItem>\n    ));\n  }, [options]);\n\n  const renderMenuItems = (): React.ReactNode => {\n    const menuItems = [];\n\n    // Workaround to get the placeholder to show up when no value is selected\n    // Placeholder must be a menu item to be displayed\n    if (showPlaceholder) {\n      menuItems.push(\n        <MuiMenuItem\n          key=\"placeholder\"\n          disabled\n          aria-hidden=\"true\"\n          sx={{ display: 'none' }}\n          value={placeholder}\n        >\n          {placeholder}\n        </MuiMenuItem>,\n      );\n    }\n\n    // Add either options or children\n    if (options?.length > 0) {\n      menuItems.push(...optionsMenuItems);\n    } else {\n      // If no options are provided, use the children\n      menuItems.push(children);\n    }\n\n    return menuItems;\n  };\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      {label && (\n        <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n          {label}\n        </MuiInputLabel>\n      )}\n\n      {helperText && (\n        <MuiFormHelperText disabled={disabled} id={helperTextId}>\n          {helperText}\n        </MuiFormHelperText>\n      )}\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledSelect\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        IconComponent={renderIcon}\n        id={fdKey}\n        inputProps={{\n          'aria-describedby': ariaDescribedBy,\n        }}\n        label=\"\" // Remove label from Select since we're rendering it separately\n        onChange={handleChange}\n        onClick={handleOpen}\n        open={isOpen}\n        required={required}\n        showPlaceholder={showPlaceholder}\n        value={getDisplayValue()}\n        variant=\"outlined\"\n        {...props}\n      >\n        {renderMenuItems()}\n      </StyledSelect>\n    </StyledContainer>\n  );\n};\nexport type { SelectChangeEvent };\nexport default Select;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledSelect","MuiSelect","includes","showPlaceholder","color","palette","semantic","text","StyledIconContainer","disabled","alignItems","cursor","justifyContent","pointerEvents","icon","children","errorText","fdKey","helperText","label","onChange","options","placeholder","required","value","props","isOpen","setIsOpen","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","handleOpen","open","optionsMenuItems","useMemo","map","option","_jsx","MuiMenuItem","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","IconComponent","onClick","event","stopPropagation","ArrowUp01Icon","ArrowDown01Icon","inputProps","child","isMenuItemDisabled","String","variant","menuItems","push","sx","length","renderMenuItems"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Select/index.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport MuiSelect, { type SelectChangeEvent, type SelectProps as MuiSelectProps } from '@mui/material/Select';\nimport { styled } from '@mui/material/styles';\n\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nimport MenuItem from '../MenuItem';\n\nexport interface SelectOption {\n  value: number | string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport type SelectProps = Omit<MuiSelectProps, 'error' | 'id' | 'value' | 'variant'> & {\n  errorText?: string;\n  fdKey: string;\n  helperText?: string;\n  options?: SelectOption[];\n  placeholder?: string;\n  value?: number | string;\n};\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain minWidth to a maximum of 100% of the container width\n}));\n\nconst StyledSelect = styled(MuiSelect, {\n  shouldForwardProp: (prop) => !['fullWidth', 'showPlaceholder'].includes(prop as string),\n})<{ fullWidth?: boolean; showPlaceholder?: boolean }>(\n  ({ theme, fullWidth = false, showPlaceholder = false }) => ({\n    display: 'flex',\n    width: fullWidth ? '100%' : 'auto',\n\n    '& .MuiSelect-select': {\n      color: showPlaceholder\n        ? theme.palette.semantic.text['text-weak']\n        : theme.palette.semantic.text['text-strong'],\n    },\n  }),\n);\n\nconst StyledIconContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  alignItems: 'center',\n  cursor: disabled ? 'not-allowed' : 'pointer',\n  display: 'flex',\n  justifyContent: 'center',\n  pointerEvents: 'auto',\n\n  '& svg': {\n    color: disabled\n      ? theme.palette.semantic.icon['icon-disabled']\n      : theme.palette.semantic.icon['icon-strong'],\n  },\n}));\n\nconst StyledHiddenPlaceholderMenuItem = styled(MenuItem)(() => ({\n  display: 'none',\n}));\n\nexport const Select = ({\n  children,\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  onChange,\n  options = [],\n  placeholder,\n  required = false,\n  value,\n  ...props\n}: SelectProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const showPlaceholder = !!placeholder && (!value || value === '');\n\n  const handleOpen = (): void => {\n    if (disabled) {\n      return;\n    }\n\n    setIsOpen((open) => !open);\n  };\n\n  const handleChange = (event: SelectChangeEvent<unknown>, child?: React.ReactNode): void => {\n    // Check if the child is disabled\n    const isMenuItemDisabled = !!(\n      child &&\n      typeof child === 'object' &&\n      'props' in (child as React.ReactElement) &&\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      (child as React.ReactElement).props?.disabled\n    );\n    if (isMenuItemDisabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // Call the original onChange handler if provided\n    if (onChange) {\n      onChange(event, child);\n    }\n  };\n\n  const getDisplayValue = (): string => {\n    if (showPlaceholder) {\n      return placeholder;\n    }\n\n    return String(value);\n  };\n\n  const renderIcon = (): JSX.Element => {\n    const handleIconClick = (event: React.MouseEvent): void => {\n      if (disabled) {\n        return;\n      }\n\n      event.stopPropagation();\n      handleOpen();\n    };\n\n    return (\n      <StyledIconContainer disabled={disabled} onClick={handleIconClick}>\n        {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n      </StyledIconContainer>\n    );\n  };\n\n  const optionsMenuItems = useMemo((): React.ReactNode[] => {\n    return options.map((option) => (\n      <MenuItem key={option.value} disabled={option.disabled} value={option.value}>\n        {option.label}\n      </MenuItem>\n    ));\n  }, [options]);\n\n  const renderMenuItems = (): React.ReactNode => {\n    const menuItems = [];\n\n    // Workaround to get the placeholder to show up when no value is selected\n    // Placeholder must be a menu item to be displayed\n    if (showPlaceholder) {\n      menuItems.push(\n        <StyledHiddenPlaceholderMenuItem\n          key=\"placeholder\"\n          disabled\n          aria-hidden=\"true\"\n          tabIndex={-1}\n          value={placeholder}\n        >\n          {placeholder}\n        </StyledHiddenPlaceholderMenuItem>,\n      );\n    }\n\n    // Add either options or children\n    if (options?.length > 0) {\n      menuItems.push(...optionsMenuItems);\n    } else {\n      // If no options are provided, use the children\n      menuItems.push(children);\n    }\n\n    return menuItems;\n  };\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      <Box>\n        {label && (\n          <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n            {label}\n          </MuiInputLabel>\n        )}\n\n        {helperText && (\n          <MuiFormHelperText disabled={disabled} id={helperTextId}>\n            {helperText}\n          </MuiFormHelperText>\n        )}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledSelect\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        IconComponent={renderIcon}\n        id={fdKey}\n        inputProps={{\n          'aria-describedby': ariaDescribedBy,\n        }}\n        label=\"\" // Remove label from Select since we're rendering it separately\n        onChange={handleChange}\n        onClick={handleOpen}\n        open={isOpen}\n        required={required}\n        showPlaceholder={showPlaceholder}\n        value={getDisplayValue()}\n        variant=\"outlined\"\n        {...props}\n      >\n        {renderMenuItems()}\n      </StyledSelect>\n    </StyledContainer>\n  );\n};\n\nexport type { SelectChangeEvent };\nexport default Select;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledSelect","MuiSelect","includes","showPlaceholder","color","palette","semantic","text","StyledIconContainer","disabled","alignItems","cursor","justifyContent","pointerEvents","icon","StyledHiddenPlaceholderMenuItem","MenuItem","Select","children","errorText","fdKey","helperText","label","onChange","options","placeholder","required","value","props","isOpen","setIsOpen","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","handleOpen","open","optionsMenuItems","useMemo","map","option","_jsx","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","IconComponent","onClick","event","stopPropagation","ArrowUp01Icon","ArrowDown01Icon","inputProps","child","preventDefault","String","variant","menuItems","push","tabIndex","length","renderMenuItems"],"mappings":"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"}

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

@@ -16,5 +16,5 @@ type SelectProps = Omit<SelectProps$1, 'error' | 'id' | 'value' | 'variant'> & {
 };
 declare const Select: ({ children, disabled, errorText, fdKey, fullWidth, helperText, label, onChange, options, placeholder, required, value, ...props }: SelectProps) => JSX.Element;
 
-export { Select as default };
+export { Select, Select as default };
 export type { SelectOption, SelectProps };

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as i,useMemo as l}from"react";import o from"@mui/material/Box";import t from"@mui/material/FormHelperText";import a from"@mui/material/InputLabel";import d from"@mui/material/MenuItem";import n from"@mui/material/Select";import{styled as s}from"@mui/material/styles";import m from"../../../icons/ArrowDown01/index.js";import c from"../../../icons/ArrowUp01/index.js";import p from"../../../icons/CancelCircle/index.js";const u=s(o,{shouldForwardProp:e=>"fullWidth"!==e})((({theme:e,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),width:r?"100%":"min(364px, 100%)"}))),h=s(n,{shouldForwardProp:e=>!["fullWidth","showPlaceholder"].includes(e)})((({theme:e,fullWidth:r=!1,showPlaceholder:i=!1})=>({display:"flex",width:r?"100%":"auto","& .MuiSelect-select":{color:i?e.palette.semantic.text["text-weak"]:e.palette.semantic.text["text-strong"]}}))),f=s(o,{shouldForwardProp:e=>"disabled"!==e})((({theme:e,disabled:r=!1})=>({alignItems:"center",cursor:r?"not-allowed":"pointer",display:"flex",justifyContent:"center",pointerEvents:"auto","& svg":{color:r?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]}}))),x=({children:o,disabled:n=!1,errorText:s,fdKey:x,fullWidth:b=!1,helperText:w,label:g,onChange:v,options:y=[],placeholder:C,required:P=!1,value:W,...j})=>{const[F,I]=i(!1),k=w?`${x}-helper-text`:void 0,q=s?`${x}-error-message`:void 0,S=[k,q].filter(Boolean).join(" ")||void 0,T=!!s&&!n,A=!(!C||W&&""!==W),B=()=>{n||I((e=>!e))},D=l((()=>y.map((r=>e(d,{disabled:r.disabled,value:r.value,children:r.label},r.value)))),[y]);return r(u,{fullWidth:b,children:[g&&e(a,{disabled:n,htmlFor:x,required:P,children:g}),w&&e(t,{disabled:n,id:k,children:w}),T&&r(t,{error:!0,id:q,children:[e(p,{}),s]}),e(h,{"data-fd":x,disabled:n,error:T,fullWidth:b,IconComponent:()=>e(f,{disabled:n,onClick:e=>{n||(e.stopPropagation(),B())},children:e(F?c:m,{})}),id:x,inputProps:{"aria-describedby":S},label:"",onChange:(e,r)=>{const i=r?.props?.disabled;i||v&&v(e,r)},onClick:B,open:F,required:P,showPlaceholder:A,value:A?C:String(W),variant:"outlined",...j,children:(()=>{const r=[];return A&&r.push(e(d,{disabled:!0,"aria-hidden":"true",sx:{display:"none"},value:C,children:C},"placeholder")),y?.length>0?r.push(...D):r.push(o),r})()})]})};export{x as default};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as i,useMemo as l}from"react";import o from"@mui/material/Box";import t from"@mui/material/FormHelperText";import d from"@mui/material/InputLabel";import a from"@mui/material/Select";import{styled as n}from"@mui/material/styles";import s from"../../../icons/ArrowDown01/index.js";import p from"../../../icons/ArrowUp01/index.js";import c from"../../../icons/CancelCircle/index.js";import{MenuItem as m}from"../MenuItem/index.js";const u=n(o,{shouldForwardProp:e=>"fullWidth"!==e})((({theme:e,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),width:r?"100%":"min(364px, 100%)"}))),h=n(a,{shouldForwardProp:e=>!["fullWidth","showPlaceholder"].includes(e)})((({theme:e,fullWidth:r=!1,showPlaceholder:i=!1})=>({display:"flex",width:r?"100%":"auto","& .MuiSelect-select":{color:i?e.palette.semantic.text["text-weak"]:e.palette.semantic.text["text-strong"]}}))),f=n(o,{shouldForwardProp:e=>"disabled"!==e})((({theme:e,disabled:r=!1})=>({alignItems:"center",cursor:r?"not-allowed":"pointer",display:"flex",justifyContent:"center",pointerEvents:"auto","& svg":{color:r?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]}}))),x=n(m)((()=>({display:"none"}))),b=({children:a,disabled:n=!1,errorText:b,fdKey:v,fullWidth:w=!1,helperText:g,label:y,onChange:j,options:C=[],placeholder:P,required:W=!1,value:F,...I})=>{const[k,q]=i(!1),D=g?`${v}-helper-text`:void 0,S=b?`${v}-error-message`:void 0,T=[D,S].filter(Boolean).join(" ")||void 0,A=!!b&&!n,B=!(!P||F&&""!==F),M=()=>{n||q((e=>!e))},$=l((()=>C.map((r=>e(m,{disabled:r.disabled,value:r.value,children:r.label},r.value)))),[C]);return r(u,{fullWidth:w,children:[r(o,{children:[y&&e(d,{disabled:n,htmlFor:v,required:W,children:y}),g&&e(t,{disabled:n,id:D,children:g})]}),A&&r(t,{error:!0,id:S,children:[e(c,{}),b]}),e(h,{"data-fd":v,disabled:n,error:A,fullWidth:w,IconComponent:()=>e(f,{disabled:n,onClick:e=>{n||(e.stopPropagation(),M())},children:e(k?p:s,{})}),id:v,inputProps:{"aria-describedby":T},label:"",onChange:(e,r)=>{!(r&&"object"==typeof r&&"props"in r&&r.props?.disabled)?j&&j(e,r):e.preventDefault()},onClick:M,open:k,required:W,showPlaceholder:B,value:B?P:String(F),variant:"outlined",...I,children:(()=>{const r=[];return B&&r.push(e(x,{disabled:!0,"aria-hidden":"true",tabIndex:-1,value:P,children:P},"placeholder")),C?.length>0?r.push(...$):r.push(a),r})()})]})};export{b as Select,b as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Select/index.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport MuiMenuItem from '@mui/material/MenuItem';\nimport MuiSelect, { type SelectChangeEvent, type SelectProps as MuiSelectProps } from '@mui/material/Select';\nimport { styled } from '@mui/material/styles';\n\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nexport interface SelectOption {\n  value: number | string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport type SelectProps = Omit<MuiSelectProps, 'error' | 'id' | 'value' | 'variant'> & {\n  errorText?: string;\n  fdKey: string;\n  helperText?: string;\n  options?: SelectOption[];\n  placeholder?: string;\n  value?: number | string;\n};\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain minWidth to a maximum of 100% of the container width\n}));\n\nconst StyledSelect = styled(MuiSelect, {\n  shouldForwardProp: (prop) => !['fullWidth', 'showPlaceholder'].includes(prop as string),\n})<{ fullWidth?: boolean; showPlaceholder?: boolean }>(\n  ({ theme, fullWidth = false, showPlaceholder = false }) => ({\n    display: 'flex',\n    width: fullWidth ? '100%' : 'auto',\n\n    '& .MuiSelect-select': {\n      color: showPlaceholder\n        ? theme.palette.semantic.text['text-weak']\n        : theme.palette.semantic.text['text-strong'],\n    },\n  }),\n);\n\nconst StyledIconContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  alignItems: 'center',\n  cursor: disabled ? 'not-allowed' : 'pointer',\n  display: 'flex',\n  justifyContent: 'center',\n  pointerEvents: 'auto',\n\n  '& svg': {\n    color: disabled\n      ? theme.palette.semantic.icon['icon-disabled']\n      : theme.palette.semantic.icon['icon-strong'],\n  },\n}));\n\nconst Select = ({\n  children,\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  onChange,\n  options = [],\n  placeholder,\n  required = false,\n  value,\n  ...props\n}: SelectProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const showPlaceholder = !!placeholder && (!value || value === '');\n\n  const handleOpen = (): void => {\n    if (disabled) {\n      return;\n    }\n\n    setIsOpen((open) => !open);\n  };\n\n  const handleChange = (event: SelectChangeEvent<unknown>, child?: React.ReactNode): void => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n    const isMenuItemDisabled = (child as React.ReactElement)?.props?.disabled;\n    if (isMenuItemDisabled) {\n      return;\n    }\n\n    // Call the original onChange handler if provided\n    if (onChange) {\n      onChange(event, child);\n    }\n  };\n\n  const getDisplayValue = (): string => {\n    if (showPlaceholder) {\n      return placeholder;\n    }\n\n    return String(value);\n  };\n\n  const renderIcon = (): JSX.Element => {\n    const handleIconClick = (event: React.MouseEvent): void => {\n      if (disabled) {\n        return;\n      }\n\n      event.stopPropagation();\n      handleOpen();\n    };\n\n    return (\n      <StyledIconContainer disabled={disabled} onClick={handleIconClick}>\n        {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n      </StyledIconContainer>\n    );\n  };\n\n  const optionsMenuItems = useMemo((): React.ReactNode[] => {\n    return options.map((option) => (\n      <MuiMenuItem key={option.value} disabled={option.disabled} value={option.value}>\n        {option.label}\n      </MuiMenuItem>\n    ));\n  }, [options]);\n\n  const renderMenuItems = (): React.ReactNode => {\n    const menuItems = [];\n\n    // Workaround to get the placeholder to show up when no value is selected\n    // Placeholder must be a menu item to be displayed\n    if (showPlaceholder) {\n      menuItems.push(\n        <MuiMenuItem\n          key=\"placeholder\"\n          disabled\n          aria-hidden=\"true\"\n          sx={{ display: 'none' }}\n          value={placeholder}\n        >\n          {placeholder}\n        </MuiMenuItem>,\n      );\n    }\n\n    // Add either options or children\n    if (options?.length > 0) {\n      menuItems.push(...optionsMenuItems);\n    } else {\n      // If no options are provided, use the children\n      menuItems.push(children);\n    }\n\n    return menuItems;\n  };\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      {label && (\n        <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n          {label}\n        </MuiInputLabel>\n      )}\n\n      {helperText && (\n        <MuiFormHelperText disabled={disabled} id={helperTextId}>\n          {helperText}\n        </MuiFormHelperText>\n      )}\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledSelect\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        IconComponent={renderIcon}\n        id={fdKey}\n        inputProps={{\n          'aria-describedby': ariaDescribedBy,\n        }}\n        label=\"\" // Remove label from Select since we're rendering it separately\n        onChange={handleChange}\n        onClick={handleOpen}\n        open={isOpen}\n        required={required}\n        showPlaceholder={showPlaceholder}\n        value={getDisplayValue()}\n        variant=\"outlined\"\n        {...props}\n      >\n        {renderMenuItems()}\n      </StyledSelect>\n    </StyledContainer>\n  );\n};\nexport type { SelectChangeEvent };\nexport default Select;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledSelect","MuiSelect","includes","showPlaceholder","color","palette","semantic","text","StyledIconContainer","disabled","alignItems","cursor","justifyContent","pointerEvents","icon","Select","children","errorText","fdKey","helperText","label","onChange","options","placeholder","required","value","props","isOpen","setIsOpen","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","handleOpen","open","optionsMenuItems","useMemo","map","option","_jsx","MuiMenuItem","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","IconComponent","onClick","event","stopPropagation","ArrowUp01Icon","ArrowDown01Icon","inputProps","child","isMenuItemDisabled","String","variant","menuItems","push","sx","length","renderMenuItems"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Select/index.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport MuiSelect, { type SelectChangeEvent, type SelectProps as MuiSelectProps } from '@mui/material/Select';\nimport { styled } from '@mui/material/styles';\n\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nimport MenuItem from '../MenuItem';\n\nexport interface SelectOption {\n  value: number | string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport type SelectProps = Omit<MuiSelectProps, 'error' | 'id' | 'value' | 'variant'> & {\n  errorText?: string;\n  fdKey: string;\n  helperText?: string;\n  options?: SelectOption[];\n  placeholder?: string;\n  value?: number | string;\n};\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain minWidth to a maximum of 100% of the container width\n}));\n\nconst StyledSelect = styled(MuiSelect, {\n  shouldForwardProp: (prop) => !['fullWidth', 'showPlaceholder'].includes(prop as string),\n})<{ fullWidth?: boolean; showPlaceholder?: boolean }>(\n  ({ theme, fullWidth = false, showPlaceholder = false }) => ({\n    display: 'flex',\n    width: fullWidth ? '100%' : 'auto',\n\n    '& .MuiSelect-select': {\n      color: showPlaceholder\n        ? theme.palette.semantic.text['text-weak']\n        : theme.palette.semantic.text['text-strong'],\n    },\n  }),\n);\n\nconst StyledIconContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  alignItems: 'center',\n  cursor: disabled ? 'not-allowed' : 'pointer',\n  display: 'flex',\n  justifyContent: 'center',\n  pointerEvents: 'auto',\n\n  '& svg': {\n    color: disabled\n      ? theme.palette.semantic.icon['icon-disabled']\n      : theme.palette.semantic.icon['icon-strong'],\n  },\n}));\n\nconst StyledHiddenPlaceholderMenuItem = styled(MenuItem)(() => ({\n  display: 'none',\n}));\n\nexport const Select = ({\n  children,\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  onChange,\n  options = [],\n  placeholder,\n  required = false,\n  value,\n  ...props\n}: SelectProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const showPlaceholder = !!placeholder && (!value || value === '');\n\n  const handleOpen = (): void => {\n    if (disabled) {\n      return;\n    }\n\n    setIsOpen((open) => !open);\n  };\n\n  const handleChange = (event: SelectChangeEvent<unknown>, child?: React.ReactNode): void => {\n    // Check if the child is disabled\n    const isMenuItemDisabled = !!(\n      child &&\n      typeof child === 'object' &&\n      'props' in (child as React.ReactElement) &&\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      (child as React.ReactElement).props?.disabled\n    );\n    if (isMenuItemDisabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // Call the original onChange handler if provided\n    if (onChange) {\n      onChange(event, child);\n    }\n  };\n\n  const getDisplayValue = (): string => {\n    if (showPlaceholder) {\n      return placeholder;\n    }\n\n    return String(value);\n  };\n\n  const renderIcon = (): JSX.Element => {\n    const handleIconClick = (event: React.MouseEvent): void => {\n      if (disabled) {\n        return;\n      }\n\n      event.stopPropagation();\n      handleOpen();\n    };\n\n    return (\n      <StyledIconContainer disabled={disabled} onClick={handleIconClick}>\n        {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n      </StyledIconContainer>\n    );\n  };\n\n  const optionsMenuItems = useMemo((): React.ReactNode[] => {\n    return options.map((option) => (\n      <MenuItem key={option.value} disabled={option.disabled} value={option.value}>\n        {option.label}\n      </MenuItem>\n    ));\n  }, [options]);\n\n  const renderMenuItems = (): React.ReactNode => {\n    const menuItems = [];\n\n    // Workaround to get the placeholder to show up when no value is selected\n    // Placeholder must be a menu item to be displayed\n    if (showPlaceholder) {\n      menuItems.push(\n        <StyledHiddenPlaceholderMenuItem\n          key=\"placeholder\"\n          disabled\n          aria-hidden=\"true\"\n          tabIndex={-1}\n          value={placeholder}\n        >\n          {placeholder}\n        </StyledHiddenPlaceholderMenuItem>,\n      );\n    }\n\n    // Add either options or children\n    if (options?.length > 0) {\n      menuItems.push(...optionsMenuItems);\n    } else {\n      // If no options are provided, use the children\n      menuItems.push(children);\n    }\n\n    return menuItems;\n  };\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      <Box>\n        {label && (\n          <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n            {label}\n          </MuiInputLabel>\n        )}\n\n        {helperText && (\n          <MuiFormHelperText disabled={disabled} id={helperTextId}>\n            {helperText}\n          </MuiFormHelperText>\n        )}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledSelect\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        IconComponent={renderIcon}\n        id={fdKey}\n        inputProps={{\n          'aria-describedby': ariaDescribedBy,\n        }}\n        label=\"\" // Remove label from Select since we're rendering it separately\n        onChange={handleChange}\n        onClick={handleOpen}\n        open={isOpen}\n        required={required}\n        showPlaceholder={showPlaceholder}\n        value={getDisplayValue()}\n        variant=\"outlined\"\n        {...props}\n      >\n        {renderMenuItems()}\n      </StyledSelect>\n    </StyledContainer>\n  );\n};\n\nexport type { SelectChangeEvent };\nexport default Select;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledSelect","MuiSelect","includes","showPlaceholder","color","palette","semantic","text","StyledIconContainer","disabled","alignItems","cursor","justifyContent","pointerEvents","icon","StyledHiddenPlaceholderMenuItem","MenuItem","Select","children","errorText","fdKey","helperText","label","onChange","options","placeholder","required","value","props","isOpen","setIsOpen","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","handleOpen","open","optionsMenuItems","useMemo","map","option","_jsx","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","IconComponent","onClick","event","stopPropagation","ArrowUp01Icon","ArrowDown01Icon","inputProps","child","preventDefault","String","variant","menuItems","push","tabIndex","length","renderMenuItems"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),t=require("@mui/material/Slider"),i=require("@mui/material/Box"),o=require("@mui/material/Typography"),r=require("@mui/material/styles");const l=r.styled(t)((({theme:e})=>({color:e.palette.semantic.fill["fill-primary-strong"],height:e.spacing(1),display:"flex",alignItems:"center",margin:e.spacing(0),padding:e.spacing(0),"& .MuiSlider-rail":{height:e.spacing(1),backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken,opacity:1,boxSizing:"border-box"},"& .MuiSlider-track":{height:e.spacing(1),backgroundColor:e.palette.semantic.fill["fill-primary-strong"],border:"none",borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken,paddingLeft:e.spacing(.5)},"& .MuiSlider-thumb":{width:e.spacing(3),height:e.spacing(3),flexShrink:0,aspectRatio:"1/1",backgroundColor:e.palette.semantic.background["background-overlay"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,borderRadius:e.radius["radius-24"],boxShadow:e.customShadows?.overlay,transition:"all 0.2s ease-in-out","&:hover":{backgroundColor:e.palette.semantic.background["background-overlay"],boxShadow:e.customShadows?.overlay},"&:active":{backgroundColor:e.palette.semantic.background["background-overlay"],boxShadow:e.customShadows?.overlay},"&.Mui-disabled":{width:e.spacing(3),height:e.spacing(3),backgroundColor:e.palette.semantic.fill["fill-disabled"],border:`1px solid ${e.palette.semantic.stroke["stroke-disabled"]}`,boxShadow:"none"}},"& .MuiSlider-markLabel":{color:e.palette.semantic.text["text-weak"],fontSize:e.typography.captionWeak.fontSize,fontWeight:e.typography.captionWeak.fontWeight,lineHeight:e.typography.captionWeak.lineHeight},"& .MuiSlider-valueLabel":{backgroundColor:e.palette.semantic.background["background-inverse"],color:e.palette.semantic.text["text-inverse-strong"],borderRadius:e.radius["radius-8"],padding:e.spacing(.5,1),fontSize:e.typography.captionStrong.fontSize,fontWeight:e.typography.captionStrong.fontWeight,lineHeight:e.typography.captionStrong.lineHeight},"&.Mui-disabled":{color:e.palette.semantic.fill["fill-disabled"],"& .MuiSlider-rail":{backgroundColor:e.palette.semantic.fill["fill-disabled"]},"& .MuiSlider-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"]},"& .MuiSlider-markLabel":{color:e.palette.semantic.text["text-disabled"]}}}))),n=r.styled(i)((({theme:e})=>({width:"100%",display:"flex",padding:e.spacing(0),flexDirection:"column",alignItems:"flex-start",gap:e.spacing(1),backgroundColor:"transparent"}))),s=r.styled(o)((({theme:e})=>({color:e.palette.semantic.text["text-strong"],fontSize:e.typography.b1Weak.fontSize,fontWeight:e.typography.b1Weak.fontWeight,lineHeight:e.typography.b1Weak.lineHeight,fontStyle:e.typography.b1Weak.fontStyle,margin:e.spacing(0),padding:e.spacing(0)}))),d=r.styled(o)((({theme:e})=>({color:e.palette.semantic.text["text-weak"],fontSize:e.typography.b1Weak.fontSize,fontWeight:e.typography.b1Weak.fontWeight,lineHeight:e.typography.b1Weak.lineHeight,fontStyle:e.typography.b1Weak.fontStyle,textAlign:"right",margin:e.spacing(0),padding:e.spacing(0)}))),g=a.memo((({className:t,fdKey:o,label:r,showLabel:g=!0,showValue:c=!1,valueFormat:p="number",valueSuffix:u="",value:h,defaultValue:m,min:b=0,max:y=100,onChange:f,...k})=>{const[S,x]=a.useState(h??m??0);a.useEffect((()=>{void 0!==h&&x(h)}),[h]);const w=void 0!==h?h:S,v=g&&(r||c);return e.jsxs(n,{className:t,children:[v&&e.jsxs(i,{alignItems:"center",display:"flex",justifyContent:"space-between",width:"100%",children:[r&&e.jsx(s,{children:r}),c&&e.jsx(d,{children:(W=w,Array.isArray(W)?"percentage"===p?`${W[0]}% - ${W[1]}%`:`${W[0]}${u} - ${W[1]}${u}`:"percentage"===p?`${W}%`:`${W}${u}`)})]}),e.jsx(l,{"data-fd":o,id:o,max:y,min:b,onChange:(e,a,t)=>{void 0===h&&x(a),f?.(e,a,t)},value:w,...k})]});var W}));g.displayName="Slider",module.exports=g;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Slider/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport MuiSlider, { type SliderProps as MuiSliderProps } from '@mui/material/Slider';\n\nimport Box from \"@fd/components/atoms/Box\"\nimport Typography from '@fd/components/atoms/Typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nexport interface SliderProps extends Omit<MuiSliderProps, 'color'> {\n  className?: string;\n  fdKey: string;\n  label?: string;\n  showLabel?: boolean;\n  showValue?: boolean;\n  valueFormat?: 'number' | 'percentage';\n  valueSuffix?: string;\n}\n\nconst StyledSlider = styled(MuiSlider)(({ theme }) => ({\n  color: theme.palette.semantic.fill['fill-primary-strong'],\n  height: theme.spacing(1),\n  display: 'flex',\n  alignItems: 'center',\n  margin: theme.spacing(0),\n  padding: theme.spacing(0),\n\n  // Rail (background track)\n  '& .MuiSlider-rail': {\n    height: theme.spacing(1),\n    backgroundColor: theme.palette.semantic.fill['fill-weak'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n    borderRadius: theme.radius['radius-8'],\n    boxShadow: theme.customShadows?.sunken,\n    opacity: 1,\n    boxSizing: 'border-box'\n  },\n\n  // Track (active portion)\n  '& .MuiSlider-track': {\n    height: theme.spacing(1),\n    backgroundColor: theme.palette.semantic.fill['fill-primary-strong'],\n    border: 'none',\n    borderRadius: theme.radius['radius-8'],\n    boxShadow: theme.customShadows?.sunken,\n    paddingLeft: theme.spacing(0.5),\n  },\n\n  // Thumb (draggable handle)\n  '& .MuiSlider-thumb': {\n    width: theme.spacing(3),\n    height: theme.spacing(3),\n    flexShrink: 0,\n    aspectRatio: '1/1',\n    backgroundColor: theme.palette.semantic.background['background-overlay'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n    borderRadius: theme.radius['radius-24'],\n    boxShadow: theme.customShadows?.overlay,\n    transition: 'all 0.2s ease-in-out',\n\n    '&:hover': {\n      backgroundColor: theme.palette.semantic.background['background-overlay'],\n      boxShadow: theme.customShadows?.overlay,\n    },\n\n    '&:active': {\n      backgroundColor: theme.palette.semantic.background['background-overlay'],\n      boxShadow: theme.customShadows?.overlay,\n    },\n\n    '&.Mui-disabled': {\n      width: theme.spacing(3),\n      height: theme.spacing(3),\n      backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n      border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n      boxShadow: 'none',\n    },\n  },\n\n  // Mark labels\n  '& .MuiSlider-markLabel': {\n    color: theme.palette.semantic.text['text-weak'],\n    fontSize: theme.typography.captionWeak.fontSize,\n    fontWeight: theme.typography.captionWeak.fontWeight,\n    lineHeight: theme.typography.captionWeak.lineHeight,\n  },\n\n  // Value label (tooltip)\n  '& .MuiSlider-valueLabel': {\n    backgroundColor: theme.palette.semantic.background['background-inverse'],\n    color: theme.palette.semantic.text['text-inverse-strong'],\n    borderRadius: theme.radius['radius-8'],\n    padding: theme.spacing(0.5, 1),\n    fontSize: theme.typography.captionStrong.fontSize,\n    fontWeight: theme.typography.captionStrong.fontWeight,\n    lineHeight: theme.typography.captionStrong.lineHeight,\n  },\n\n  // Disabled state\n  '&.Mui-disabled': {\n    color: theme.palette.semantic.fill['fill-disabled'],\n\n    '& .MuiSlider-rail': {\n      backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n    },\n\n    '& .MuiSlider-track': {\n      backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n    },\n\n    '& .MuiSlider-markLabel': {\n      color: theme.palette.semantic.text['text-disabled'],\n    },\n  },\n}));\n\nconst SliderContainer = styled(Box)(({ theme }) => ({\n  width: '100%',\n  display: 'flex',\n  padding: theme.spacing(0),\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  gap: theme.spacing(1),\n  backgroundColor: 'transparent',\n}));\n\nconst SliderLabel = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-strong'],\n  fontSize: theme.typography.b1Weak.fontSize,\n  fontWeight: theme.typography.b1Weak.fontWeight,\n  lineHeight: theme.typography.b1Weak.lineHeight,\n  fontStyle: theme.typography.b1Weak.fontStyle,\n  margin: theme.spacing(0),\n  padding: theme.spacing(0),\n}));\n\nconst SliderValue = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  fontSize: theme.typography.b1Weak.fontSize,\n  fontWeight: theme.typography.b1Weak.fontWeight,\n  lineHeight: theme.typography.b1Weak.lineHeight,\n  fontStyle: theme.typography.b1Weak.fontStyle,\n  textAlign: 'right',\n  margin: theme.spacing(0),\n  padding: theme.spacing(0),\n}));\n\nconst Slider = React.memo(\n  ({\n    className,\n    fdKey,\n    label,\n    showLabel = true,\n    showValue = false,\n    valueFormat = 'number',\n    valueSuffix = '',\n    value,\n    defaultValue,\n    min = 0,\n    max = 100,\n    onChange,\n    ...rest\n  }: SliderProps) => {\n    const [internalValue, setInternalValue] = React.useState<number[] | number>(\n      value ?? defaultValue ?? 0\n    );\n\n    // Update internal value when controlled value changes\n    React.useEffect(() => {\n      if (value !== undefined) {\n        setInternalValue(value);\n      }\n    }, [value]);\n\n    const handleChange = (event: Event, newValue: number[] | number, activeThumb: number): void => {\n      if (value === undefined) {\n        setInternalValue(newValue);\n      }\n      onChange?.(event, newValue, activeThumb);\n    };\n\n    const formatValue = (val: number[] | number): string => {\n      if (Array.isArray(val)) {\n        // For range sliders, show both values\n        if (valueFormat === 'percentage') {\n          return `${val[0]}% - ${val[1]}%`;\n        }\n        return `${val[0]}${valueSuffix} - ${val[1]}${valueSuffix}`;\n      }\n\n      if (valueFormat === 'percentage') {\n        return `${val}%`;\n      }\n      return `${val}${valueSuffix}`;\n    };\n\n    const displayValue = value !== undefined ? value : internalValue;\n\n    const shouldShowHeader = showLabel && (label || showValue);\n\n    return (\n      <SliderContainer className={className}>\n        {shouldShowHeader && (\n          <Box alignItems='center' display='flex' justifyContent='space-between' width='100%'>\n            {label && <SliderLabel>{label}</SliderLabel>}\n            {showValue && <SliderValue>{formatValue(displayValue)}</SliderValue>}\n          </Box>\n        )}\n        <StyledSlider\n          data-fd={fdKey}\n          id={fdKey}\n          max={max}\n          min={min}\n          onChange={handleChange}\n          value={displayValue}\n          {...rest}\n        />\n      </SliderContainer>\n    );\n  }\n);\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["StyledSlider","styled","MuiSlider","theme","color","palette","semantic","fill","height","spacing","display","alignItems","margin","padding","backgroundColor","border","stroke","borderRadius","radius","boxShadow","customShadows","sunken","opacity","boxSizing","paddingLeft","width","flexShrink","aspectRatio","background","overlay","transition","text","fontSize","typography","captionWeak","fontWeight","lineHeight","captionStrong","SliderContainer","Box","flexDirection","gap","SliderLabel","Typography","b1Weak","fontStyle","SliderValue","textAlign","Slider","React","memo","className","fdKey","label","showLabel","showValue","valueFormat","valueSuffix","value","defaultValue","min","max","onChange","rest","internalValue","setInternalValue","useState","useEffect","undefined","displayValue","shouldShowHeader","_jsxs","children","justifyContent","_jsx","val","Array","isArray","id","event","newValue","activeThumb","displayName"],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import react__default from 'react';
+import { SliderProps as SliderProps$1 } from '@mui/material/Slider';
+
+interface SliderProps extends Omit<SliderProps$1, 'color'> {
+    className?: string;
+    fdKey: string;
+    label?: string;
+    showLabel?: boolean;
+    showValue?: boolean;
+    valueFormat?: 'number' | 'percentage';
+    valueSuffix?: string;
+}
+declare const Slider: react__default.MemoExoticComponent<({ className, fdKey, label, showLabel, showValue, valueFormat, valueSuffix, value, defaultValue, min, max, onChange, ...rest }: SliderProps) => react_jsx_runtime.JSX.Element>;
+
+export { Slider as default };
+export type { SliderProps };

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

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import t from"react";import i from"@mui/material/Slider";import o from"@mui/material/Box";import r from"@mui/material/Typography";import{styled as n}from"@mui/material/styles";const l=n(i)((({theme:e})=>({color:e.palette.semantic.fill["fill-primary-strong"],height:e.spacing(1),display:"flex",alignItems:"center",margin:e.spacing(0),padding:e.spacing(0),"& .MuiSlider-rail":{height:e.spacing(1),backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken,opacity:1,boxSizing:"border-box"},"& .MuiSlider-track":{height:e.spacing(1),backgroundColor:e.palette.semantic.fill["fill-primary-strong"],border:"none",borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken,paddingLeft:e.spacing(.5)},"& .MuiSlider-thumb":{width:e.spacing(3),height:e.spacing(3),flexShrink:0,aspectRatio:"1/1",backgroundColor:e.palette.semantic.background["background-overlay"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,borderRadius:e.radius["radius-24"],boxShadow:e.customShadows?.overlay,transition:"all 0.2s ease-in-out","&:hover":{backgroundColor:e.palette.semantic.background["background-overlay"],boxShadow:e.customShadows?.overlay},"&:active":{backgroundColor:e.palette.semantic.background["background-overlay"],boxShadow:e.customShadows?.overlay},"&.Mui-disabled":{width:e.spacing(3),height:e.spacing(3),backgroundColor:e.palette.semantic.fill["fill-disabled"],border:`1px solid ${e.palette.semantic.stroke["stroke-disabled"]}`,boxShadow:"none"}},"& .MuiSlider-markLabel":{color:e.palette.semantic.text["text-weak"],fontSize:e.typography.captionWeak.fontSize,fontWeight:e.typography.captionWeak.fontWeight,lineHeight:e.typography.captionWeak.lineHeight},"& .MuiSlider-valueLabel":{backgroundColor:e.palette.semantic.background["background-inverse"],color:e.palette.semantic.text["text-inverse-strong"],borderRadius:e.radius["radius-8"],padding:e.spacing(.5,1),fontSize:e.typography.captionStrong.fontSize,fontWeight:e.typography.captionStrong.fontWeight,lineHeight:e.typography.captionStrong.lineHeight},"&.Mui-disabled":{color:e.palette.semantic.fill["fill-disabled"],"& .MuiSlider-rail":{backgroundColor:e.palette.semantic.fill["fill-disabled"]},"& .MuiSlider-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"]},"& .MuiSlider-markLabel":{color:e.palette.semantic.text["text-disabled"]}}}))),s=n(o)((({theme:e})=>({width:"100%",display:"flex",padding:e.spacing(0),flexDirection:"column",alignItems:"flex-start",gap:e.spacing(1),backgroundColor:"transparent"}))),d=n(r)((({theme:e})=>({color:e.palette.semantic.text["text-strong"],fontSize:e.typography.b1Weak.fontSize,fontWeight:e.typography.b1Weak.fontWeight,lineHeight:e.typography.b1Weak.lineHeight,fontStyle:e.typography.b1Weak.fontStyle,margin:e.spacing(0),padding:e.spacing(0)}))),p=n(r)((({theme:e})=>({color:e.palette.semantic.text["text-weak"],fontSize:e.typography.b1Weak.fontSize,fontWeight:e.typography.b1Weak.fontWeight,lineHeight:e.typography.b1Weak.lineHeight,fontStyle:e.typography.b1Weak.fontStyle,textAlign:"right",margin:e.spacing(0),padding:e.spacing(0)}))),g=t.memo((({className:i,fdKey:r,label:n,showLabel:g=!0,showValue:c=!1,valueFormat:h="number",valueSuffix:m="",value:u,defaultValue:b,min:f=0,max:y=100,onChange:k,...S})=>{const[x,w]=t.useState(u??b??0);t.useEffect((()=>{void 0!==u&&w(u)}),[u]);const v=void 0!==u?u:x;return e(s,{className:i,children:[g&&(n||c)&&e(o,{alignItems:"center",display:"flex",justifyContent:"space-between",width:"100%",children:[n&&a(d,{children:n}),c&&a(p,{children:(W=v,Array.isArray(W)?"percentage"===h?`${W[0]}% - ${W[1]}%`:`${W[0]}${m} - ${W[1]}${m}`:"percentage"===h?`${W}%`:`${W}${m}`)})]}),a(l,{"data-fd":r,id:r,max:y,min:f,onChange:(e,a,t)=>{void 0===u&&w(a),k?.(e,a,t)},value:v,...S})]});var W}));g.displayName="Slider";export{g as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Slider/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport MuiSlider, { type SliderProps as MuiSliderProps } from '@mui/material/Slider';\n\nimport Box from \"@fd/components/atoms/Box\"\nimport Typography from '@fd/components/atoms/Typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nexport interface SliderProps extends Omit<MuiSliderProps, 'color'> {\n  className?: string;\n  fdKey: string;\n  label?: string;\n  showLabel?: boolean;\n  showValue?: boolean;\n  valueFormat?: 'number' | 'percentage';\n  valueSuffix?: string;\n}\n\nconst StyledSlider = styled(MuiSlider)(({ theme }) => ({\n  color: theme.palette.semantic.fill['fill-primary-strong'],\n  height: theme.spacing(1),\n  display: 'flex',\n  alignItems: 'center',\n  margin: theme.spacing(0),\n  padding: theme.spacing(0),\n\n  // Rail (background track)\n  '& .MuiSlider-rail': {\n    height: theme.spacing(1),\n    backgroundColor: theme.palette.semantic.fill['fill-weak'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n    borderRadius: theme.radius['radius-8'],\n    boxShadow: theme.customShadows?.sunken,\n    opacity: 1,\n    boxSizing: 'border-box'\n  },\n\n  // Track (active portion)\n  '& .MuiSlider-track': {\n    height: theme.spacing(1),\n    backgroundColor: theme.palette.semantic.fill['fill-primary-strong'],\n    border: 'none',\n    borderRadius: theme.radius['radius-8'],\n    boxShadow: theme.customShadows?.sunken,\n    paddingLeft: theme.spacing(0.5),\n  },\n\n  // Thumb (draggable handle)\n  '& .MuiSlider-thumb': {\n    width: theme.spacing(3),\n    height: theme.spacing(3),\n    flexShrink: 0,\n    aspectRatio: '1/1',\n    backgroundColor: theme.palette.semantic.background['background-overlay'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n    borderRadius: theme.radius['radius-24'],\n    boxShadow: theme.customShadows?.overlay,\n    transition: 'all 0.2s ease-in-out',\n\n    '&:hover': {\n      backgroundColor: theme.palette.semantic.background['background-overlay'],\n      boxShadow: theme.customShadows?.overlay,\n    },\n\n    '&:active': {\n      backgroundColor: theme.palette.semantic.background['background-overlay'],\n      boxShadow: theme.customShadows?.overlay,\n    },\n\n    '&.Mui-disabled': {\n      width: theme.spacing(3),\n      height: theme.spacing(3),\n      backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n      border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n      boxShadow: 'none',\n    },\n  },\n\n  // Mark labels\n  '& .MuiSlider-markLabel': {\n    color: theme.palette.semantic.text['text-weak'],\n    fontSize: theme.typography.captionWeak.fontSize,\n    fontWeight: theme.typography.captionWeak.fontWeight,\n    lineHeight: theme.typography.captionWeak.lineHeight,\n  },\n\n  // Value label (tooltip)\n  '& .MuiSlider-valueLabel': {\n    backgroundColor: theme.palette.semantic.background['background-inverse'],\n    color: theme.palette.semantic.text['text-inverse-strong'],\n    borderRadius: theme.radius['radius-8'],\n    padding: theme.spacing(0.5, 1),\n    fontSize: theme.typography.captionStrong.fontSize,\n    fontWeight: theme.typography.captionStrong.fontWeight,\n    lineHeight: theme.typography.captionStrong.lineHeight,\n  },\n\n  // Disabled state\n  '&.Mui-disabled': {\n    color: theme.palette.semantic.fill['fill-disabled'],\n\n    '& .MuiSlider-rail': {\n      backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n    },\n\n    '& .MuiSlider-track': {\n      backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n    },\n\n    '& .MuiSlider-markLabel': {\n      color: theme.palette.semantic.text['text-disabled'],\n    },\n  },\n}));\n\nconst SliderContainer = styled(Box)(({ theme }) => ({\n  width: '100%',\n  display: 'flex',\n  padding: theme.spacing(0),\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  gap: theme.spacing(1),\n  backgroundColor: 'transparent',\n}));\n\nconst SliderLabel = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-strong'],\n  fontSize: theme.typography.b1Weak.fontSize,\n  fontWeight: theme.typography.b1Weak.fontWeight,\n  lineHeight: theme.typography.b1Weak.lineHeight,\n  fontStyle: theme.typography.b1Weak.fontStyle,\n  margin: theme.spacing(0),\n  padding: theme.spacing(0),\n}));\n\nconst SliderValue = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  fontSize: theme.typography.b1Weak.fontSize,\n  fontWeight: theme.typography.b1Weak.fontWeight,\n  lineHeight: theme.typography.b1Weak.lineHeight,\n  fontStyle: theme.typography.b1Weak.fontStyle,\n  textAlign: 'right',\n  margin: theme.spacing(0),\n  padding: theme.spacing(0),\n}));\n\nconst Slider = React.memo(\n  ({\n    className,\n    fdKey,\n    label,\n    showLabel = true,\n    showValue = false,\n    valueFormat = 'number',\n    valueSuffix = '',\n    value,\n    defaultValue,\n    min = 0,\n    max = 100,\n    onChange,\n    ...rest\n  }: SliderProps) => {\n    const [internalValue, setInternalValue] = React.useState<number[] | number>(\n      value ?? defaultValue ?? 0\n    );\n\n    // Update internal value when controlled value changes\n    React.useEffect(() => {\n      if (value !== undefined) {\n        setInternalValue(value);\n      }\n    }, [value]);\n\n    const handleChange = (event: Event, newValue: number[] | number, activeThumb: number): void => {\n      if (value === undefined) {\n        setInternalValue(newValue);\n      }\n      onChange?.(event, newValue, activeThumb);\n    };\n\n    const formatValue = (val: number[] | number): string => {\n      if (Array.isArray(val)) {\n        // For range sliders, show both values\n        if (valueFormat === 'percentage') {\n          return `${val[0]}% - ${val[1]}%`;\n        }\n        return `${val[0]}${valueSuffix} - ${val[1]}${valueSuffix}`;\n      }\n\n      if (valueFormat === 'percentage') {\n        return `${val}%`;\n      }\n      return `${val}${valueSuffix}`;\n    };\n\n    const displayValue = value !== undefined ? value : internalValue;\n\n    const shouldShowHeader = showLabel && (label || showValue);\n\n    return (\n      <SliderContainer className={className}>\n        {shouldShowHeader && (\n          <Box alignItems='center' display='flex' justifyContent='space-between' width='100%'>\n            {label && <SliderLabel>{label}</SliderLabel>}\n            {showValue && <SliderValue>{formatValue(displayValue)}</SliderValue>}\n          </Box>\n        )}\n        <StyledSlider\n          data-fd={fdKey}\n          id={fdKey}\n          max={max}\n          min={min}\n          onChange={handleChange}\n          value={displayValue}\n          {...rest}\n        />\n      </SliderContainer>\n    );\n  }\n);\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["StyledSlider","styled","MuiSlider","theme","color","palette","semantic","fill","height","spacing","display","alignItems","margin","padding","backgroundColor","border","stroke","borderRadius","radius","boxShadow","customShadows","sunken","opacity","boxSizing","paddingLeft","width","flexShrink","aspectRatio","background","overlay","transition","text","fontSize","typography","captionWeak","fontWeight","lineHeight","captionStrong","SliderContainer","Box","flexDirection","gap","SliderLabel","Typography","b1Weak","fontStyle","SliderValue","textAlign","Slider","React","memo","className","fdKey","label","showLabel","showValue","valueFormat","valueSuffix","value","defaultValue","min","max","onChange","rest","internalValue","setInternalValue","useState","useEffect","undefined","displayValue","_jsxs","children","justifyContent","_jsx","val","Array","isArray","id","event","newValue","activeThumb","displayName"],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1,3 @@
+declare const Slot: React.FC;
+
+export { Slot as default };