npm - @flipdish/portal-library - Versions diffs - 6.0.0 → 6.0.2 - Mend

@flipdish/portal-library 6.0.0 → 6.0.2

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

Files changed (236) hide show

package/dist/components/atoms/FlipdishLogo/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as i}from"react/jsx-runtime";import{styled as e}from"@mui/material/styles";import t from"@mui/material/styles/useTheme";import s from"../../../assets/images/flipdish-icon.svg.js";import a from"../../../assets/images/flipdish-icon-dark.svg.js";import m from"../../../assets/images/flipdish-logo.svg.js";import r from"../../../assets/images/flipdish-logo-dark.svg.js";import d from"../../../assets/images/flipdish-powered-by.svg.js";import o from"../../../assets/images/flipdish-powered-by-dark.svg.js";const h={small:{minWidth:120,minHeight:32},medium:{minWidth:180,minHeight:48},large:{minWidth:240,minHeight:64}},g={default:{light:m,dark:r},icon:{light:s,dark:a},poweredBy:{light:d,dark:o}},n=e("div",{shouldForwardProp:i=>"size"!==i})((({theme:i,size:e})=>{const t=h[e];return{display:"inline-flex",alignItems:"center",justifyContent:"center",padding:i.spacing({small:1,medium:1.5,large:2}[e]),minWidth:`${t.minWidth}px`,minHeight:`${t.minHeight}px`,imageRendering:"crisp-edges",contain:"layout"}})),l=e("img",{shouldForwardProp:i=>"size"!==i&&"variant"!==i})((({size:i,variant:e})=>{const t={small:.67,medium:1,large:1.33}[i],s={icon:{width:3.58538,height:3,aspectRatio:"57.37/48.00"},default:{width:10.16581,height:3,aspectRatio:"162.65/48.00"},poweredBy:{width:9.42856,height:3,aspectRatio:"150.86/48.00"}}[e];return{objectFit:"contain",imageRendering:"crisp-edges",width:s.widtht+"rem",height:s.heightt+"rem",aspectRatio:s.aspectRatio,minWidth:s.widtht+"rem",minHeight:s.heightt+"rem",maxWidth:"100%",maxHeight:"100%"}})),p=({variant:e="default",theme:s="auto",size:a="medium",ariaLabel:m,className:r,fdKey:d})=>{const o=t(),h="auto"===s?"dark"===o.palette.mode?"dark":"light":s,p=g[e],c="dark"===h?p.dark:p.light;return i(n,{className:r,"data-fd":d,size:a,children:i(l,{alt:m,role:"img",size:a,src:c,variant:e})})};p.displayName="FlipdishLogo";export{p as FlipdishLogo};
2	+ //# sourceMappingURL=index.js.map

package/dist/components/atoms/FlipdishLogo/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/FlipdishLogo/index.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\r\nimport useTheme from '@mui/material/styles/useTheme';\r\n\r\nimport flipdishIcon from '../../../assets/images/flipdish-icon.svg';\r\nimport flipdishIconDark from '../../../assets/images/flipdish-icon-dark.svg';\r\nimport flipdishLogo from '../../../assets/images/flipdish-logo.svg';\r\nimport flipdishLogoDark from '../../../assets/images/flipdish-logo-dark.svg';\r\nimport flipdishPoweredBy from '../../../assets/images/flipdish-powered-by.svg';\r\nimport flipdishPoweredByDark from '../../../assets/images/flipdish-powered-by-dark.svg';\r\n\r\nexport type FlipdishLogoVariant = 'default' | 'icon' | 'poweredBy';\r\nexport type FlipdishLogoTheme = 'auto' | 'dark' | 'light';\r\nexport type FlipdishLogoSize = 'large' | 'medium' | 'small';\r\n\r\n/**\r\n * Size configuration mapping to ensure minimum sizes and clear space\r\n * Minimum sizes are enforced to maintain logo clarity and brand guidelines\r\n */\r\nconst SIZE_CONFIG: Record<FlipdishLogoSize, { minWidth: number; minHeight: number }> = {\r\n small: {\r\n minWidth: 120,\r\n minHeight: 32,\r\n },\r\n medium: {\r\n minWidth: 180,\r\n minHeight: 48,\r\n },\r\n large: {\r\n minWidth: 240,\r\n minHeight: 64,\r\n },\r\n};\r\n\r\n/**\r\n * Asset mapping for different variants and themes\r\n */\r\nconst ASSET_MAP: Record<FlipdishLogoVariant, { light: string; dark: string }> = {\r\n default: {\r\n light: flipdishLogo,\r\n dark: flipdishLogoDark,\r\n },\r\n icon: {\r\n light: flipdishIcon,\r\n dark: flipdishIconDark,\r\n },\r\n poweredBy: {\r\n light: flipdishPoweredBy,\r\n dark: flipdishPoweredByDark,\r\n },\r\n};\r\n\r\nexport interface FlipdishLogoProps {\r\n /**\r\n * Logo variant to display\r\n * - \"default\": Full Flipdish logo\r\n * - \"icon\": Flipdish icon only\r\n * - \"poweredBy\": \"Powered by Flipdish\" logo\r\n */\r\n variant?: FlipdishLogoVariant;\r\n /**\r\n * Theme variant for the logo\r\n * - \"light\": Light theme logo (for dark backgrounds)\r\n * - \"dark\": Dark theme logo (for light backgrounds)\r\n * - \"auto\": Automatically selects based on current theme context\r\n *\r\n * @default \"auto\"\r\n */\r\n theme?: FlipdishLogoTheme;\r\n /**\r\n * Size of the logo\r\n * Each size enforces minimum dimensions and clear space\r\n *\r\n * @default \"medium\"\r\n */\r\n size?: FlipdishLogoSize;\r\n /**\r\n * Accessible label for screen readers\r\n * Maps to the image's alt attribute\r\n */\r\n ariaLabel: string;\r\n /**\r\n * Additional CSS class name\r\n */\r\n className?: string;\r\n /**\r\n * Test ID for testing purposes\r\n */\r\n fdKey?: string;\r\n}\r\n\r\ninterface StyledContainerProps {\r\n size: FlipdishLogoSize;\r\n}\r\n\r\nconst StyledContainer = styled('div', {\r\n shouldForwardProp: (prop) => prop !== 'size',\r\n})<StyledContainerProps & { 'data-fd'?: string }>(({ theme, size }) => {\r\n const config = SIZE_CONFIG[size];\r\n // MUI spacing: spacing(1) = 8px, spacing(1.5) = 12px, spacing(2) = 16px\r\n const paddingMap: Record<FlipdishLogoSize, number> = {\r\n small: 1,\r\n medium: 1.5,\r\n large: 2,\r\n };\r\n\r\n return {\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n padding: theme.spacing(paddingMap[size]),\r\n minWidth: `${config.minWidth}px`,\r\n minHeight: `${config.minHeight}px`,\r\n // Ensure pixel-snapped rendering for crisp edges\r\n imageRendering: 'crisp-edges',\r\n // Prevent layout shifts\r\n contain: 'layout',\r\n };\r\n});\r\n\r\ninterface StyledImageProps {\r\n size: FlipdishLogoSize;\r\n variant: FlipdishLogoVariant;\r\n}\r\n\r\nconst StyledImage = styled('img', {\r\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'variant',\r\n})<StyledImageProps>(({ size, variant }) => {\r\n // Base dimensions for each variant (medium size)\r\n const variantDimensions = {\r\n icon: {\r\n width: 3.58538,\r\n height: 3,\r\n aspectRatio: '57.37/48.00',\r\n },\r\n default: {\r\n width: 10.16581,\r\n height: 3,\r\n aspectRatio: '162.65/48.00',\r\n },\r\n poweredBy: {\r\n width: 9.42856,\r\n height: 3,\r\n aspectRatio: '150.86/48.00',\r\n },\r\n };\r\n\r\n // Size scaling factors\r\n const sizeScale: Record<FlipdishLogoSize, number> = {\r\n small: 0.67, // ~2/3 of medium\r\n medium: 1,\r\n large: 1.33, // ~4/3 of medium\r\n };\r\n\r\n const scale = sizeScale[size];\r\n const variantDims = variantDimensions[variant];\r\n\r\n return {\r\n // Prevent distortion\r\n objectFit: 'contain',\r\n // Ensure pixel-snapped rendering\r\n imageRendering: 'crisp-edges',\r\n // Variant-specific dimensions scaled by size\r\n width: `${variantDims.width * scale}rem`,\r\n height: `${variantDims.height * scale}rem`,\r\n aspectRatio: variantDims.aspectRatio,\r\n minWidth: `${variantDims.width * scale}rem`,\r\n minHeight: `${variantDims.height * scale}rem`,\r\n maxWidth: '100%',\r\n maxHeight: '100%',\r\n };\r\n});\r\n\r\n/**\r\n * FlipdishLogo component displays the Flipdish company logo with support for multiple variants,\r\n * themes, and sizes.\r\n *\r\n * **Design Guidelines:**\r\n * - Respects clear space and minimum sizes for each variant\r\n * - Preserves intrinsic logo aspect ratios\r\n * - Supports both light and dark themes\r\n *\r\n * **Consumer Responsibilities:**\r\n * - Ensure logos are placed on backgrounds with sufficient contrast\r\n * - Use \"light\" theme logos on dark backgrounds\r\n * - Use \"dark\" theme logos on light backgrounds\r\n * - When using \"auto\" theme, ensure the component is within a themed context\r\n *\r\n * **Minimum Sizes:**\r\n * - Small: 120x32px minimum\r\n * - Medium: 180x48px minimum\r\n * - Large: 240x64px minimum\r\n *\r\n * @example\r\n * ```tsx\r\n * // Default usage with auto theme\r\n * <FlipdishLogo variant=\"default\" ariaLabel=\"Flipdish logo\" />\r\n *\r\n * // Explicit theme for dark background\r\n * <FlipdishLogo variant=\"icon\" theme=\"light\" size=\"large\" ariaLabel=\"Flipdish icon\" />\r\n *\r\n * // Powered by variant\r\n * <FlipdishLogo variant=\"poweredBy\" theme=\"dark\" ariaLabel=\"Powered by Flipdish\" />\r\n * ```\r\n */\r\nconst FlipdishLogo = ({\r\n variant = 'default',\r\n theme: themeProp = 'auto',\r\n size = 'medium',\r\n ariaLabel,\r\n className,\r\n fdKey,\r\n}: FlipdishLogoProps): JSX.Element => {\r\n const theme = useTheme();\r\n const actualTheme = themeProp === 'auto' ? (theme.palette.mode === 'dark' ? 'dark' : 'light') : themeProp;\r\n const assets = ASSET_MAP[variant];\r\n const src = actualTheme === 'dark' ? assets.dark : assets.light;\r\n\r\n return (\r\n <StyledContainer\r\n className={className}\r\n data-fd={fdKey}\r\n size={size}\r\n >\r\n <StyledImage\r\n alt={ariaLabel}\r\n role=\"img\"\r\n size={size}\r\n src={src}\r\n variant={variant}\r\n />\r\n </StyledContainer>\r\n );\r\n};\r\n\r\nFlipdishLogo.displayName = 'FlipdishLogo';\r\n\r\nexport { FlipdishLogo };\r\n"],"names":["SIZE_CONFIG","small","minWidth","minHeight","medium","large","ASSET_MAP","default","light","flipdishLogo","dark","flipdishLogoDark","icon","flipdishIcon","flipdishIconDark","poweredBy","flipdishPoweredBy","flipdishPoweredByDark","StyledContainer","styled","shouldForwardProp","prop","theme","size","config","display","alignItems","justifyContent","padding","spacing","imageRendering","contain","StyledImage","variant","scale","variantDims","width","height","aspectRatio","objectFit","maxWidth","maxHeight","FlipdishLogo","themeProp","ariaLabel","className","fdKey","useTheme","actualTheme","palette","mode","assets","src","_jsx","alt","role","displayName"],"mappings":"ggBAkBA,MAAMA,EAAiF,CACrFC,MAAO,CACLC,SAAU,IACVC,UAAW,IAEbC,OAAQ,CACNF,SAAU,IACVC,UAAW,IAEbE,MAAO,CACLH,SAAU,IACVC,UAAW,KAOTG,EAA0E,CAC9EC,QAAS,CACPC,MAAOC,EACPC,KAAMC,GAERC,KAAM,CACJJ,MAAOK,EACPH,KAAMI,GAERC,UAAW,CACTP,MAAOQ,EACPN,KAAMO,IA+CJC,EAAkBC,EAAO,MAAO,CACpCC,kBAAoBC,GAAkB,SAATA,GADPF,EAE0B,EAAGG,QAAOC,WAC1D,MAAMC,EAASxB,EAAYuB,GAQ3B,MAAO,CACLE,QAAS,cACTC,WAAY,SACZC,eAAgB,SAChBC,QAASN,EAAMO,QAVoC,CACnD5B,MAAO,EACPG,OAAQ,IACRC,MAAO,GAO2BkB,IAClCrB,SAAU,GAAGsB,EAAOtB,aACpBC,UAAW,GAAGqB,EAAOrB,cAErB2B,eAAgB,cAEhBC,QAAS,aASPC,EAAcb,EAAO,MAAO,CAChCC,kBAAoBC,GAAkB,SAATA,GAA4B,YAATA,GAD9BF,EAEC,EAAGI,OAAMU,cAE5B,MAyBMC,EAN8C,CAClDjC,MAAO,IACPG,OAAQ,EACRC,MAAO,MAGekB,GAClBY,EA1BoB,CACxBvB,KAAM,CACJwB,MAAO,QACPC,OAAQ,EACRC,YAAa,eAEf/B,QAAS,CACP6B,MAAO,SACPC,OAAQ,EACRC,YAAa,gBAEfvB,UAAW,CACTqB,MAAO,QACPC,OAAQ,EACRC,YAAa,iBAYqBL,GAEtC,MAAO,CAELM,UAAW,UAEXT,eAAgB,cAEhBM,MAAUD,EAAYC,MAAQF,EAAvB,MACPG,OAAWF,EAAYE,OAASH,EAAxB,MACRI,YAAaH,EAAYG,YACzBpC,SAAaiC,EAAYC,MAAQF,EAAvB,MACV/B,UAAcgC,EAAYE,OAASH,EAAxB,MACXM,SAAU,OACVC,UAAW,WAoCTC,EAAe,EACnBT,UAAU,UACVX,MAAOqB,EAAY,OACnBpB,OAAO,SACPqB,YACAC,YACAC,YAEA,MAAMxB,EAAQyB,IACRC,EAA4B,SAAdL,EAA+C,SAAvBrB,EAAM2B,QAAQC,KAAkB,OAAS,QAAWP,EAC1FQ,EAAS7C,EAAU2B,GACnBmB,EAAsB,SAAhBJ,EAAyBG,EAAOzC,KAAOyC,EAAO3C,MAE1D,OACE6C,EAACnC,EAAe,CACd2B,UAAWA,EAAS,UACXC,EACTvB,KAAMA,WAEN8B,EAACrB,GACCsB,IAAKV,EACLW,KAAK,MACLhC,KAAMA,EACN6B,IAAKA,EACLnB,QAASA,OAMjBS,EAAac,YAAc"}

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

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

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

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

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

@@ -10,7 +10,8 @@ interface LinearProgressProps extends LinearProgressProps$1 {
  * Extends MUI's LinearProgressProps.
  * - label: Optional label text (falls back to percentage when `value` is provided).
  * - showLabel: When true, renders the label to the right of the bar.
+ * - color: we don't support changing the color in our design
  */
-declare const LinearProgress: React.FC<LinearProgressProps>;
+declare const LinearProgress: React.FC<Omit<LinearProgressProps, 'color'>>;
 export { LinearProgress, LinearProgress as default };

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

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

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

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

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

	@@ -0,0 +1,2 @@
1	+ "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"}}};
2	+ //# sourceMappingURL=getLinkStyles.cjs.js.map

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

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

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

	@@ -0,0 +1,2 @@
1	+ 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};
2	+ //# sourceMappingURL=getLinkStyles.js.map

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

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

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

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

@@ -1,2 +1,27 @@
-import Link from '@mui/material/Link';
-export { default } from '@mui/material/Link';
+import react__default, { ReactElement } from 'react';
+import { LinkProps } from '@mui/material/Link';
+export { 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 CHANGED Viewed

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Link/index.tsx"],"sourcesContent":["import React, { type ReactElement } from 'react';\n\nimport MuiLink, { type LinkProps, 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;\nexport type { LinkProps };"],"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 CHANGED Viewed

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/MenuItem/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport ListItemText from '@mui/material/ListItemText';\nimport MuiMenuItem, { type MenuItemProps as MuiMenuItemProps } from '@mui/material/MenuItem';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '../Checkbox';\n\ntype BaseProps = Omit<MuiMenuItemProps, 'children'> & {\n children?: React.ReactNode;\n label?: React.ReactNode;\n secondaryText?: React.ReactNode;\n type?: 'avatar' \| 'checkbox' \| 'icon' \| 'text';\n};\n\ntype AvatarMenuItemProps = BaseProps & {\n avatar: React.ReactNode;\n checkbox?: never;\n icon?: never;\n type: 'avatar';\n};\n\ntype CheckboxMenuItemProps = BaseProps & {\n avatar?: never;\n checked?: boolean;\n icon?: never;\n onCheckedChange?: (\n checked: boolean,\n e: React.ChangeEvent<HTMLInputElement> \| React.MouseEvent<HTMLLIElement>,\n ) => void;\n type: 'checkbox';\n};\n\ntype IconMenuItemProps = BaseProps & {\n avatar?: never;\n checkbox?: never;\n icon: React.ReactNode;\n type: 'icon';\n};\n\ntype TextMenuItemProps = BaseProps & {\n avatar?: never;\n checkbox?: never;\n icon?: never;\n type?: 'text';\n};\n\nexport type MenuItemProps =\n \| AvatarMenuItemProps\n \| CheckboxMenuItemProps\n \| IconMenuItemProps\n \| TextMenuItemProps;\n\nconst StyledStartAdornment = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n\n '& .MuiAvatar-img': {\n opacity: disabled ? theme.palette.action.disabledOpacity : 1,\n },\n}));\n\nconst StyledCheckbox = styled(Checkbox)(() => ({\n 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 CHANGED Viewed

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

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

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

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

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

	@@ -0,0 +1,2 @@
1	+ "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;
2	+ //# sourceMappingURL=index.cjs.js.map