npm - @flipdish/portal-library - Versions diffs - 8.5.7 → 8.6.1 - Mend

@flipdish/portal-library 8.5.7 → 8.6.1

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 (2302) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Card/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiCard from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport CardMedia from '@mui/material/CardMedia';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport RightArrowIcon from '../../../icons/ArrowRight02';\nimport Badge from '../Badge';\nimport IconContainer from '../IconContainer';\nimport Link, { type LinkProps } from '../Link';\n\nexport interface CardProps {\n fdKey?: string;\n heading?: string;\n content: string;\n imageSrc?: string;\n imageAlt?: string;\n icon?: React.ReactElement<typeof IconContainer>;\n badge?: React.ReactElement<typeof Badge>;\n link?: {\n label: string;\n href?: string;\n onClick?: () => void;\n };\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n type?: 'horizontal' \| 'vertical';\n}\n\nconst StyledCard = styled(MuiCard)<{ type?: 'horizontal' \| 'vertical' }>(({ theme, type }) => ({\n borderRadius: theme.radius['radius-16'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n ...(type === 'horizontal' && {\n display: 'flex',\n flexDirection: 'row',\n overflow: 'hidden',\n }),\n}));\n\nconst StyledCardContent = styled(CardContent)<{ type?: 'horizontal' \| 'vertical' }>(({ theme, type }) => ({\n '&:last-child': {\n paddingBottom: theme.spacing(2),\n },\n ...(type === 'horizontal' && {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n }),\n}));\n\nconst StyledHorizontalContentWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'flex-start',\n gap: theme.spacing(2),\n flex: 1,\n}));\n\nconst StyledHorizontalTextContent = styled(Box)(() => ({\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n}));\n\nconst StyledHeading = styled(Typography)(({ theme }) => ({\n marginBottom: theme.spacing(1),\n}));\n\nconst StyledContent = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledLinkContainer = styled(Box)(({ theme }) => ({\n marginTop: theme.spacing(1.5),\n}));\n\nconst StyledLink = styled(Link)<{ component?: LinkProps['component'] }>(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n}));\n\nconst StyledCardMedia = styled(CardMedia)<{\n alt?: string;\n component?: string;\n type?: 'horizontal' \| 'vertical';\n}>(({ theme, type }) => ({\n ...(type === 'horizontal'\n ? {\n width: 200,\n height: 'auto',\n borderRight: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n borderBottom: 'none',\n flexShrink: 0,\n }\n : {\n height: 204,\n borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n }),\n}));\n\ninterface StyledTopContentContainerProps {\n hasIcon: boolean;\n hasBadge: boolean;\n}\n\nconst StyledTopContentContainer = styled(Box, {\n shouldForwardProp: (prop) => !['hasIcon', 'hasBadge'].includes(prop as string),\n})<StyledTopContentContainerProps>(({ theme, hasIcon, hasBadge }) => {\n const onlyHasRightContent = hasBadge && !hasIcon;\n return {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: onlyHasRightContent ? 'flex-end' : 'space-between',\n alignItems: 'flex-start',\n gap: theme.spacing(2),\n marginBottom: theme.spacing(1.5),\n };\n});\n\n// Validation function to ensure only IconContainer components are passed\nconst isValidIconContainer = (element: React.ReactElement): boolean => {\n return element?.type === IconContainer;\n};\n\nconst isValidBadge = (element: React.ReactElement): boolean => {\n return element?.type === Badge;\n};\n\nconst Card = ({\n fdKey,\n heading,\n content,\n imageSrc,\n imageAlt,\n icon,\n badge,\n link,\n onMouseEnter,\n onMouseLeave,\n type = 'vertical',\n ...rest\n}: CardProps): React.ReactElement => {\n if (icon && !isValidIconContainer(icon)) {\n throw new Error('Card icon prop must be an IconContainer component');\n }\n if (badge && !isValidBadge(badge)) {\n throw new Error('Card badge prop must be a Badge component');\n }\n\n const hasTopContent = !!badge \|\| !!icon;\n\n const renderImage = (): React.ReactElement \| null => {\n if (!imageSrc) return null;\n return <StyledCardMedia alt={imageAlt \|\| ''} component=\"img\" image={imageSrc} type={type} />;\n };\n\n const renderLink = (): React.ReactElement \| null => {\n if (!link) return null;\n return (\n <StyledLinkContainer>\n <StyledLink\n fdKey={`card-link-${link.label}`}\n href={link.href}\n iconRight={<RightArrowIcon />}\n onClick={link.onClick}\n underline={false}\n >\n {link.label}\n </StyledLink>\n </StyledLinkContainer>\n );\n };\n\n const renderHeading = (): React.ReactElement \| null => {\n if (!heading) return null;\n return <StyledHeading variant=\"h4Strong\">{heading}</StyledHeading>;\n };\n\n const renderContent = (): React.ReactElement => {\n return <StyledContent variant=\"b1Weak\">{content}</StyledContent>;\n };\n\n const renderHorizontalContent = (): React.ReactElement => {\n return (\n <>\n <StyledHorizontalContentWrapper>\n {icon && icon}\n <StyledHorizontalTextContent>\n {renderHeading()}\n {renderContent()}\n </StyledHorizontalTextContent>\n {badge && badge}\n </StyledHorizontalContentWrapper>\n {renderLink()}\n </>\n );\n };\n\n const renderVerticalContent = (): React.ReactElement => {\n return (\n <>\n {hasTopContent && (\n <StyledTopContentContainer hasBadge={!!badge} hasIcon={!!icon}>\n {icon && icon}\n {badge && badge}\n </StyledTopContentContainer>\n )}\n {renderHeading()}\n {renderContent()}\n {renderLink()}\n </>\n );\n };\n\n const renderCardContent = (): React.ReactElement => {\n if (type === 'horizontal') {\n return renderHorizontalContent();\n }\n return renderVerticalContent();\n };\n\n return (\n <StyledCard data-fd={fdKey} type={type} {...rest} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n {renderImage()}\n <StyledCardContent type={type}>{renderCardContent()}</StyledCardContent>\n </StyledCard>\n );\n};\n\nexport default Card;\n"],"names":["StyledCard","styled","MuiCard","theme","type","borderRadius","radius","border","palette","semantic","stroke","display","flexDirection","overflow","StyledCardContent","CardContent","paddingBottom","spacing","flex","justifyContent","StyledHorizontalContentWrapper","Box","alignItems","gap","StyledHorizontalTextContent","StyledHeading","Typography","marginBottom","StyledContent","color","text","StyledLinkContainer","marginTop","StyledLink","Link","StyledCardMedia","CardMedia","width","height","borderRight","borderBottom","flexShrink","StyledTopContentContainer","shouldForwardProp","prop","includes","hasIcon","hasBadge","fdKey","heading","content","imageSrc","imageAlt","icon","badge","link","onMouseEnter","onMouseLeave","rest","element","IconContainer","Error","Badge","isValidBadge","hasTopContent","renderLink","_jsx","label","href","iconRight","RightArrowIcon","onClick","underline","renderHeading","variant","children","renderContent","_jsxs","alt","component","image","_Fragment"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Card/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiCard from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport CardMedia from '@mui/material/CardMedia';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport RightArrowIcon from '../../../icons/ArrowRight02';\nimport Badge from '../Badge';\nimport IconContainer from '../IconContainer';\nimport Link, { type LinkProps } from '../Link';\n\nexport interface CardProps {\n fdKey?: string;\n heading?: string;\n content: string;\n imageSrc?: string;\n imageAlt?: string;\n icon?: React.ReactElement<typeof IconContainer>;\n badge?: React.ReactElement<typeof Badge>;\n link?: {\n label: string;\n href?: string;\n onClick?: () => void;\n };\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n type?: 'horizontal' \| 'vertical';\n}\n\nconst StyledCard = styled(MuiCard)<{ type?: 'horizontal' \| 'vertical' }>(({ theme, type }) => ({\n borderRadius: theme.radius['radius-16'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n ...(type === 'horizontal' && {\n display: 'flex',\n flexDirection: 'row',\n overflow: 'hidden',\n }),\n}));\n\nconst StyledCardContent = styled(CardContent)<{ type?: 'horizontal' \| 'vertical' }>(({ theme, type }) => ({\n '&:last-child': {\n paddingBottom: theme.spacing(2),\n },\n ...(type === 'horizontal' && {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n }),\n}));\n\nconst StyledHorizontalContentWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'flex-start',\n gap: theme.spacing(2),\n flex: 1,\n}));\n\nconst StyledHorizontalTextContent = styled(Box)(() => ({\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n}));\n\nconst StyledHeading = styled(Typography)(({ theme }) => ({\n marginBottom: theme.spacing(1),\n}));\n\nconst StyledContent = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledLinkContainer = styled(Box)(({ theme }) => ({\n marginTop: theme.spacing(1.5),\n}));\n\nconst StyledLink = styled(Link)<{ component?: LinkProps['component'] }>(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n}));\n\nconst StyledCardMedia = styled(CardMedia)<{\n alt?: string;\n component?: string;\n type?: 'horizontal' \| 'vertical';\n}>(({ theme, type }) => ({\n ...(type === 'horizontal'\n ? {\n width: 200,\n height: 'auto',\n borderRight: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n borderBottom: 'none',\n flexShrink: 0,\n }\n : {\n height: 204,\n borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n }),\n}));\n\ninterface StyledTopContentContainerProps {\n hasIcon: boolean;\n hasBadge: boolean;\n}\n\nconst StyledTopContentContainer = styled(Box, {\n shouldForwardProp: (prop) => !['hasIcon', 'hasBadge'].includes(prop as string),\n})<StyledTopContentContainerProps>(({ theme, hasIcon, hasBadge }) => {\n const onlyHasRightContent = hasBadge && !hasIcon;\n return {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: onlyHasRightContent ? 'flex-end' : 'space-between',\n alignItems: 'flex-start',\n gap: theme.spacing(2),\n marginBottom: theme.spacing(1.5),\n };\n});\n\n// Validation function to ensure only IconContainer components are passed\nconst isValidIconContainer = (element: React.ReactElement): boolean => {\n return element?.type === IconContainer;\n};\n\nconst isValidBadge = (element: React.ReactElement): boolean => {\n return element?.type === Badge;\n};\n\nconst Card = ({\n fdKey,\n heading,\n content,\n imageSrc,\n imageAlt,\n icon,\n badge,\n link,\n onMouseEnter,\n onMouseLeave,\n type = 'vertical',\n ...rest\n}: CardProps): React.ReactElement => {\n if (icon && !isValidIconContainer(icon)) {\n throw new Error('Card icon prop must be an IconContainer component');\n }\n if (badge && !isValidBadge(badge)) {\n throw new Error('Card badge prop must be a Badge component');\n }\n\n const hasTopContent = !!badge \|\| !!icon;\n\n const renderImage = (): React.ReactElement \| null => {\n if (!imageSrc) return null;\n return <StyledCardMedia alt={imageAlt \|\| ''} component=\"img\" image={imageSrc} type={type} />;\n };\n\n const renderLink = (): React.ReactElement \| null => {\n if (!link) return null;\n return (\n <StyledLinkContainer>\n <StyledLink\n fdKey={`card-link-${link.label}`}\n href={link.href}\n iconRight={<RightArrowIcon />}\n onClick={link.onClick}\n underline={false}\n >\n {link.label}\n </StyledLink>\n </StyledLinkContainer>\n );\n };\n\n const renderHeading = (): React.ReactElement \| null => {\n if (!heading) return null;\n return <StyledHeading variant=\"h4Strong\">{heading}</StyledHeading>;\n };\n\n const renderContent = (): React.ReactElement => {\n return <StyledContent variant=\"b1Weak\">{content}</StyledContent>;\n };\n\n const renderHorizontalContent = (): React.ReactElement => {\n return (\n <>\n <StyledHorizontalContentWrapper>\n {icon && icon}\n <StyledHorizontalTextContent>\n {renderHeading()}\n {renderContent()}\n </StyledHorizontalTextContent>\n {badge && badge}\n </StyledHorizontalContentWrapper>\n {renderLink()}\n </>\n );\n };\n\n const renderVerticalContent = (): React.ReactElement => {\n return (\n <>\n {hasTopContent && (\n <StyledTopContentContainer hasBadge={!!badge} hasIcon={!!icon}>\n {icon && icon}\n {badge && badge}\n </StyledTopContentContainer>\n )}\n {renderHeading()}\n {renderContent()}\n {renderLink()}\n </>\n );\n };\n\n const renderCardContent = (): React.ReactElement => {\n if (type === 'horizontal') {\n return renderHorizontalContent();\n }\n return renderVerticalContent();\n };\n\n return (\n <StyledCard data-fd={fdKey} type={type} {...rest} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n {renderImage()}\n <StyledCardContent type={type}>{renderCardContent()}</StyledCardContent>\n </StyledCard>\n );\n};\n\nexport default Card;\n"],"names":["StyledCard","styled","MuiCard","theme","type","borderRadius","radius","border","palette","semantic","stroke","display","flexDirection","overflow","StyledCardContent","CardContent","paddingBottom","spacing","flex","justifyContent","StyledHorizontalContentWrapper","Box","alignItems","gap","StyledHorizontalTextContent","StyledHeading","Typography","marginBottom","StyledContent","color","text","StyledLinkContainer","marginTop","StyledLink","Link","StyledCardMedia","CardMedia","width","height","borderRight","borderBottom","flexShrink","StyledTopContentContainer","shouldForwardProp","prop","includes","hasIcon","hasBadge","fdKey","heading","content","imageSrc","imageAlt","icon","badge","link","onMouseEnter","onMouseLeave","rest","element","IconContainer","Error","Badge","isValidBadge","hasTopContent","renderLink","_jsx","label","href","iconRight","RightArrowIcon","onClick","underline","renderHeading","variant","children","renderContent","_jsxs","alt","component","image","_Fragment"],"mappings":"yaA8BA,MAAMA,EAAaC,EAAAA,OAAOC,EAAPD,CAAsD,EAAGE,QAAOC,WAAM,CACvFC,aAAcF,EAAMG,OAAO,aAC3BC,OAAQ,aAAaJ,EAAMK,QAAQC,SAASC,OAAO,oBACtC,eAATN,GAAyB,CAC3BO,QAAS,OACTC,cAAe,MACfC,SAAU,aAIRC,EAAoBb,EAAAA,OAAOc,EAAPd,CAA0D,EAAGE,QAAOC,WAAM,CAClG,eAAgB,CACdY,cAAeb,EAAMc,QAAQ,OAElB,eAATb,GAAyB,CAC3Bc,KAAM,EACNP,QAAS,OACTC,cAAe,SACfO,eAAgB,oBAIdC,EAAiCnB,EAAAA,OAAOoB,EAAPpB,CAAY,EAAGE,YAAO,CAC3DQ,QAAS,OACTW,WAAY,aACZC,IAAKpB,EAAMc,QAAQ,GACnBC,KAAM,KAGFM,EAA8BvB,EAAAA,OAAOoB,EAAPpB,CAAY,KAAA,CAC9CiB,KAAM,EACNP,QAAS,OACTC,cAAe,YAGXa,EAAgBxB,EAAAA,OAAOyB,EAAPzB,CAAmB,EAAGE,YAAO,CACjDwB,aAAcxB,EAAMc,QAAQ,MAGxBW,EAAgB3B,EAAAA,OAAOyB,EAAPzB,CAAmB,EAAGE,YAAO,CACjD0B,MAAO1B,EAAMK,QAAQC,SAASqB,KAAK,gBAG/BC,EAAsB9B,EAAAA,OAAOoB,EAAPpB,CAAY,EAAGE,YAAO,CAChD6B,UAAW7B,EAAMc,QAAQ,QAGrBgB,EAAahC,EAAAA,OAAOiC,EAAAA,KAAPjC,CAAqD,EAAGE,YAAO,CAChFQ,QAAS,OACTW,WAAY,SACZC,IAAKpB,EAAMc,QAAQ,MAGfkB,EAAkBlC,EAAAA,OAAOmC,EAAPnC,CAIrB,EAAGE,QAAOC,WAAM,IACJ,eAATA,EACA,CACEiC,MAAO,IACPC,OAAQ,OACRC,YAAa,aAAapC,EAAMK,QAAQC,SAASC,OAAO,iBACxD8B,aAAc,OACdC,WAAY,GAEd,CACEH,OAAQ,IACRE,aAAc,aAAarC,EAAMK,QAAQC,SAASC,OAAO,qBAS3DgC,EAA4BzC,EAAAA,OAAOoB,EAAK,CAC5CsB,kBAAoBC,IAAU,CAAC,UAAW,YAAYC,SAASD,IAD/B3C,CAEC,EAAGE,QAAO2C,UAASC,eAE7C,CACLpC,QAAS,OACTC,cAAe,MACfO,eAJ0B4B,IAAaD,EAID,WAAa,gBACnDxB,WAAY,aACZC,IAAKpB,EAAMc,QAAQ,GACnBU,aAAcxB,EAAMc,QAAQ,uBAanB,EACX+B,QACAC,UACAC,UACAC,WACAC,WACAC,OACAC,QACAC,OACAC,eACAC,eACArD,OAAO,cACJsD,MAEH,GAAIL,IAtBwBM,EAsBMN,EArB3BM,GAASvD,OAASwD,GAsBvB,MAAM,IAAIC,MAAM,qDAvBS,IAACF,EAyB5B,GAAIL,IArBe,CAACK,GACbA,GAASvD,OAAS0D,EAAAA,MAoBXC,CAAaT,GACzB,MAAM,IAAIO,MAAM,6CAGlB,MAAMG,IAAkBV,KAAWD,EAO7BY,EAAa,IACZV,EAEHW,EAAAA,IAACnC,YACCmC,EAAAA,IAACjC,GACCe,MAAO,aAAaO,EAAKY,QACzBC,KAAMb,EAAKa,KACXC,UAAWH,EAAAA,IAACI,EAAc,CAAA,GAC1BC,QAAShB,EAAKgB,QACdC,WAAW,WAEVjB,EAAKY,UAVM,KAgBdM,EAAgB,IACfxB,EACEiB,EAAAA,IAACzC,EAAa,CAACiD,QAAQ,WAAUC,SAAE1B,IADrB,KAIjB2B,EAAgB,IACbV,EAAAA,IAACtC,EAAa,CAAC8C,QAAQ,SAAQC,SAAEzB,IA0C1C,OACE2B,OAAC7E,EAAU,CAAA,UAAUgD,EAAO5C,KAAMA,KAAUsD,EAAMF,aAAcA,EAAcC,aAAcA,YAtEvFN,EACEe,EAAAA,IAAC/B,EAAe,CAAC2C,IAAK1B,GAAY,GAAI2B,UAAU,MAAMC,MAAO7B,EAAU/C,KAAMA,IAD9D,KAwEpB8D,EAAAA,IAACpD,EAAiB,CAACV,KAAMA,WATd,eAATA,EA/BFyE,OAAAI,EAAAA,SAAA,CAAAN,SAAA,CACEE,EAAAA,KAACzD,EAA8B,CAAAuD,SAAA,CAC5BtB,GAAQA,EACTwB,EAAAA,KAACrD,EAA2B,CAAAmD,SAAA,CACzBF,IACAG,OAEFtB,GAASA,KAEXW,OAOHY,EAAAA,KAAAI,EAAAA,SAAA,CAAAN,SAAA,CACGX,GACCa,EAAAA,KAACnC,EAAyB,CAACK,WAAYO,EAAOR,UAAWO,EAAIsB,SAAA,CAC1DtB,GAAQA,EACRC,GAASA,KAGbmB,IACAG,IACAX"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Card/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiCard from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport CardMedia from '@mui/material/CardMedia';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport RightArrowIcon from '../../../icons/ArrowRight02';\nimport Badge from '../Badge';\nimport IconContainer from '../IconContainer';\nimport Link, { type LinkProps } from '../Link';\n\nexport interface CardProps {\n fdKey?: string;\n heading?: string;\n content: string;\n imageSrc?: string;\n imageAlt?: string;\n icon?: React.ReactElement<typeof IconContainer>;\n badge?: React.ReactElement<typeof Badge>;\n link?: {\n label: string;\n href?: string;\n onClick?: () => void;\n };\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n type?: 'horizontal' \| 'vertical';\n}\n\nconst StyledCard = styled(MuiCard)<{ type?: 'horizontal' \| 'vertical' }>(({ theme, type }) => ({\n borderRadius: theme.radius['radius-16'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n ...(type === 'horizontal' && {\n display: 'flex',\n flexDirection: 'row',\n overflow: 'hidden',\n }),\n}));\n\nconst StyledCardContent = styled(CardContent)<{ type?: 'horizontal' \| 'vertical' }>(({ theme, type }) => ({\n '&:last-child': {\n paddingBottom: theme.spacing(2),\n },\n ...(type === 'horizontal' && {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n }),\n}));\n\nconst StyledHorizontalContentWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'flex-start',\n gap: theme.spacing(2),\n flex: 1,\n}));\n\nconst StyledHorizontalTextContent = styled(Box)(() => ({\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n}));\n\nconst StyledHeading = styled(Typography)(({ theme }) => ({\n marginBottom: theme.spacing(1),\n}));\n\nconst StyledContent = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledLinkContainer = styled(Box)(({ theme }) => ({\n marginTop: theme.spacing(1.5),\n}));\n\nconst StyledLink = styled(Link)<{ component?: LinkProps['component'] }>(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n}));\n\nconst StyledCardMedia = styled(CardMedia)<{\n alt?: string;\n component?: string;\n type?: 'horizontal' \| 'vertical';\n}>(({ theme, type }) => ({\n ...(type === 'horizontal'\n ? {\n width: 200,\n height: 'auto',\n borderRight: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n borderBottom: 'none',\n flexShrink: 0,\n }\n : {\n height: 204,\n borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n }),\n}));\n\ninterface StyledTopContentContainerProps {\n hasIcon: boolean;\n hasBadge: boolean;\n}\n\nconst StyledTopContentContainer = styled(Box, {\n shouldForwardProp: (prop) => !['hasIcon', 'hasBadge'].includes(prop as string),\n})<StyledTopContentContainerProps>(({ theme, hasIcon, hasBadge }) => {\n const onlyHasRightContent = hasBadge && !hasIcon;\n return {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: onlyHasRightContent ? 'flex-end' : 'space-between',\n alignItems: 'flex-start',\n gap: theme.spacing(2),\n marginBottom: theme.spacing(1.5),\n };\n});\n\n// Validation function to ensure only IconContainer components are passed\nconst isValidIconContainer = (element: React.ReactElement): boolean => {\n return element?.type === IconContainer;\n};\n\nconst isValidBadge = (element: React.ReactElement): boolean => {\n return element?.type === Badge;\n};\n\nconst Card = ({\n fdKey,\n heading,\n content,\n imageSrc,\n imageAlt,\n icon,\n badge,\n link,\n onMouseEnter,\n onMouseLeave,\n type = 'vertical',\n ...rest\n}: CardProps): React.ReactElement => {\n if (icon && !isValidIconContainer(icon)) {\n throw new Error('Card icon prop must be an IconContainer component');\n }\n if (badge && !isValidBadge(badge)) {\n throw new Error('Card badge prop must be a Badge component');\n }\n\n const hasTopContent = !!badge \|\| !!icon;\n\n const renderImage = (): React.ReactElement \| null => {\n if (!imageSrc) return null;\n return <StyledCardMedia alt={imageAlt \|\| ''} component=\"img\" image={imageSrc} type={type} />;\n };\n\n const renderLink = (): React.ReactElement \| null => {\n if (!link) return null;\n return (\n <StyledLinkContainer>\n <StyledLink\n fdKey={`card-link-${link.label}`}\n href={link.href}\n iconRight={<RightArrowIcon />}\n onClick={link.onClick}\n underline={false}\n >\n {link.label}\n </StyledLink>\n </StyledLinkContainer>\n );\n };\n\n const renderHeading = (): React.ReactElement \| null => {\n if (!heading) return null;\n return <StyledHeading variant=\"h4Strong\">{heading}</StyledHeading>;\n };\n\n const renderContent = (): React.ReactElement => {\n return <StyledContent variant=\"b1Weak\">{content}</StyledContent>;\n };\n\n const renderHorizontalContent = (): React.ReactElement => {\n return (\n <>\n <StyledHorizontalContentWrapper>\n {icon && icon}\n <StyledHorizontalTextContent>\n {renderHeading()}\n {renderContent()}\n </StyledHorizontalTextContent>\n {badge && badge}\n </StyledHorizontalContentWrapper>\n {renderLink()}\n </>\n );\n };\n\n const renderVerticalContent = (): React.ReactElement => {\n return (\n <>\n {hasTopContent && (\n <StyledTopContentContainer hasBadge={!!badge} hasIcon={!!icon}>\n {icon && icon}\n {badge && badge}\n </StyledTopContentContainer>\n )}\n {renderHeading()}\n {renderContent()}\n {renderLink()}\n </>\n );\n };\n\n const renderCardContent = (): React.ReactElement => {\n if (type === 'horizontal') {\n return renderHorizontalContent();\n }\n return renderVerticalContent();\n };\n\n return (\n <StyledCard data-fd={fdKey} type={type} {...rest} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n {renderImage()}\n <StyledCardContent type={type}>{renderCardContent()}</StyledCardContent>\n </StyledCard>\n );\n};\n\nexport default Card;\n"],"names":["StyledCard","styled","MuiCard","theme","type","borderRadius","radius","border","palette","semantic","stroke","display","flexDirection","overflow","StyledCardContent","CardContent","paddingBottom","spacing","flex","justifyContent","StyledHorizontalContentWrapper","Box","alignItems","gap","StyledHorizontalTextContent","StyledHeading","Typography","marginBottom","StyledContent","color","text","StyledLinkContainer","marginTop","StyledLink","Link","StyledCardMedia","CardMedia","width","height","borderRight","borderBottom","flexShrink","StyledTopContentContainer","shouldForwardProp","prop","includes","hasIcon","hasBadge","Card","fdKey","heading","content","imageSrc","imageAlt","icon","badge","link","onMouseEnter","onMouseLeave","rest","element","IconContainer","Error","Badge","isValidBadge","hasTopContent","renderLink","_jsx","label","href","iconRight","RightArrowIcon","onClick","underline","renderHeading","variant","children","renderContent","_jsxs","alt","component","image","_Fragment"],"mappings":"wdA8BA,MAAMA,EAAaC,EAAOC,EAAPD,~~EAAsD~~,EAAGE,QAAOC,WAAM,CACvFC,aAAcF,EAAMG,OAAO,aAC3BC,OAAQ,aAAaJ,EAAMK,QAAQC,SAASC,OAAO,oBACtC,eAATN,GAAyB,CAC3BO,QAAS,OACTC,cAAe,MACfC,SAAU,~~cAIRC~~,EAAoBb,EAAOc,EAAPd,~~EAA0D~~,EAAGE,QAAOC,WAAM,CAClG,eAAgB,CACdY,cAAeb,EAAMc,QAAQ,OAElB,eAATb,GAAyB,CAC3Bc,KAAM,EACNP,QAAS,OACTC,cAAe,SACfO,eAAgB,~~qBAIdC~~,EAAiCnB,EAAOoB,EAAPpB,~~EAAY~~,EAAGE,YAAO,CAC3DQ,QAAS,OACTW,WAAY,aACZC,IAAKpB,EAAMc,QAAQ,GACnBC,KAAM,~~MAGFM~~,EAA8BvB,EAAOoB,EAAPpB,~~EAAY~~,KAAA,CAC9CiB,KAAM,EACNP,QAAS,OACTC,cAAe,~~aAGXa~~,EAAgBxB,EAAOyB,EAAPzB,~~EAAmB~~,EAAGE,YAAO,CACjDwB,aAAcxB,EAAMc,QAAQ,~~OAGxBW~~,EAAgB3B,EAAOyB,EAAPzB,~~EAAmB~~,EAAGE,YAAO,CACjD0B,MAAO1B,EAAMK,QAAQC,SAASqB,KAAK,~~iBAG~~/BC,EAAsB9B,EAAOoB,EAAPpB,~~EAAY~~,EAAGE,YAAO,CAChD6B,UAAW7B,EAAMc,QAAQ,~~SAGrBgB~~,EAAahC,EAAOiC,EAAPjC,~~EAAqD~~,EAAGE,YAAO,CAChFQ,QAAS,OACTW,WAAY,SACZC,IAAKpB,EAAMc,QAAQ,~~OAGfkB~~,EAAkBlC,EAAOmC,EAAPnC,~~EAIrB~~,EAAGE,QAAOC,WAAM,IACJ,eAATA,EACA,CACEiC,MAAO,IACPC,OAAQ,OACRC,YAAa,aAAapC,EAAMK,QAAQC,SAASC,OAAO,iBACxD8B,aAAc,OACdC,WAAY,GAEd,CACEH,OAAQ,IACRE,aAAc,aAAarC,EAAMK,QAAQC,SAASC,OAAO,~~sBAS3DgC~~,EAA4BzC,EAAOoB,EAAK,CAC5CsB,kBAAoBC,IAAU,CAAC,UAAW,YAAYC,SAASD,IAD/B3C,~~EAEC~~,EAAGE,QAAO2C,UAASC,eAE7C,CACLpC,QAAS,OACTC,cAAe,MACfO,eAJ0B4B,IAAaD,EAID,WAAa,gBACnDxB,WAAY,aACZC,IAAKpB,EAAMc,QAAQ,GACnBU,aAAcxB,EAAMc,QAAQ,~~SAa1B~~+B,EAAO,EACXC,QACAC,UACAC,UACAC,WACAC,WACAC,OACAC,QACAC,OACAC,eACAC,eACAtD,OAAO,cACJuD,MAEH,GAAIL,IAtBwBM,EAsBMN,EArB3BM,GAASxD,OAASyD,GAsBvB,MAAM,IAAIC,MAAM,qDAvBS,IAACF,EAyB5B,GAAIL,IArBe,CAACK,GACbA,GAASxD,OAAS2D,EAoBXC,CAAaT,GACzB,MAAM,IAAIO,MAAM,6CAGlB,MAAMG,IAAkBV,KAAWD,EAO7BY,EAAa,IACZV,EAEHW,EAACpC,YACCoC,EAAClC,GACCgB,MAAO,aAAaO,EAAKY,QACzBC,KAAMb,EAAKa,KACXC,UAAWH,EAACI,EAAc,CAAA,GAC1BC,QAAShB,EAAKgB,QACdC,WAAW,WAEVjB,EAAKY,UAVM,KAgBdM,EAAgB,IACfxB,EACEiB,EAAC1C,EAAa,CAACkD,QAAQ,WAAUC,SAAE1B,IADrB,KAIjB2B,EAAgB,IACbV,EAACvC,EAAa,CAAC+C,QAAQ,SAAQC,SAAEzB,IA0C1C,OACE2B,EAAC9E,EAAU,CAAA,UAAUiD,EAAO7C,KAAMA,KAAUuD,EAAMF,aAAcA,EAAcC,aAAcA,YAtEvFN,EACEe,EAAChC,EAAe,CAAC4C,IAAK1B,GAAY,GAAI2B,UAAU,MAAMC,MAAO7B,EAAUhD,KAAMA,IAD9D,KAwEpB+D,EAACrD,EAAiB,CAACV,KAAMA,WAxCzB0E,EAAAI,EA+BW,eAAT9E,EA/BF,CAAAwE,SAAA,CACEE,EAAC1D,EAA8B,CAAAwD,SAAA,CAC5BtB,GAAQA,EACTwB,EAACtD,EAA2B,CAAAoD,SAAA,CACzBF,IACAG,OAEFtB,GAASA,KAEXW,MAOH,CAAAU,SAAA,CACGX,GACCa,EAACpC,EAAyB,CAACK,WAAYQ,EAAOT,UAAWQ,EAAIsB,SAAA,CAC1DtB,GAAQA,EACRC,GAASA,KAGbmB,IACAG,IACAX"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Card/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiCard from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport CardMedia from '@mui/material/CardMedia';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport RightArrowIcon from '../../../icons/ArrowRight02';\nimport Badge from '../Badge';\nimport IconContainer from '../IconContainer';\nimport Link, { type LinkProps } from '../Link';\n\nexport interface CardProps {\n fdKey?: string;\n heading?: string;\n content: string;\n imageSrc?: string;\n imageAlt?: string;\n icon?: React.ReactElement<typeof IconContainer>;\n badge?: React.ReactElement<typeof Badge>;\n link?: {\n label: string;\n href?: string;\n onClick?: () => void;\n };\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n type?: 'horizontal' \| 'vertical';\n}\n\nconst StyledCard = styled(MuiCard)<{ type?: 'horizontal' \| 'vertical' }>(({ theme, type }) => ({\n borderRadius: theme.radius['radius-16'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n ...(type === 'horizontal' && {\n display: 'flex',\n flexDirection: 'row',\n overflow: 'hidden',\n }),\n}));\n\nconst StyledCardContent = styled(CardContent)<{ type?: 'horizontal' \| 'vertical' }>(({ theme, type }) => ({\n '&:last-child': {\n paddingBottom: theme.spacing(2),\n },\n ...(type === 'horizontal' && {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n }),\n}));\n\nconst StyledHorizontalContentWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'flex-start',\n gap: theme.spacing(2),\n flex: 1,\n}));\n\nconst StyledHorizontalTextContent = styled(Box)(() => ({\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n}));\n\nconst StyledHeading = styled(Typography)(({ theme }) => ({\n marginBottom: theme.spacing(1),\n}));\n\nconst StyledContent = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledLinkContainer = styled(Box)(({ theme }) => ({\n marginTop: theme.spacing(1.5),\n}));\n\nconst StyledLink = styled(Link)<{ component?: LinkProps['component'] }>(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n}));\n\nconst StyledCardMedia = styled(CardMedia)<{\n alt?: string;\n component?: string;\n type?: 'horizontal' \| 'vertical';\n}>(({ theme, type }) => ({\n ...(type === 'horizontal'\n ? {\n width: 200,\n height: 'auto',\n borderRight: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n borderBottom: 'none',\n flexShrink: 0,\n }\n : {\n height: 204,\n borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n }),\n}));\n\ninterface StyledTopContentContainerProps {\n hasIcon: boolean;\n hasBadge: boolean;\n}\n\nconst StyledTopContentContainer = styled(Box, {\n shouldForwardProp: (prop) => !['hasIcon', 'hasBadge'].includes(prop as string),\n})<StyledTopContentContainerProps>(({ theme, hasIcon, hasBadge }) => {\n const onlyHasRightContent = hasBadge && !hasIcon;\n return {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: onlyHasRightContent ? 'flex-end' : 'space-between',\n alignItems: 'flex-start',\n gap: theme.spacing(2),\n marginBottom: theme.spacing(1.5),\n };\n});\n\n// Validation function to ensure only IconContainer components are passed\nconst isValidIconContainer = (element: React.ReactElement): boolean => {\n return element?.type === IconContainer;\n};\n\nconst isValidBadge = (element: React.ReactElement): boolean => {\n return element?.type === Badge;\n};\n\nconst Card = ({\n fdKey,\n heading,\n content,\n imageSrc,\n imageAlt,\n icon,\n badge,\n link,\n onMouseEnter,\n onMouseLeave,\n type = 'vertical',\n ...rest\n}: CardProps): React.ReactElement => {\n if (icon && !isValidIconContainer(icon)) {\n throw new Error('Card icon prop must be an IconContainer component');\n }\n if (badge && !isValidBadge(badge)) {\n throw new Error('Card badge prop must be a Badge component');\n }\n\n const hasTopContent = !!badge \|\| !!icon;\n\n const renderImage = (): React.ReactElement \| null => {\n if (!imageSrc) return null;\n return <StyledCardMedia alt={imageAlt \|\| ''} component=\"img\" image={imageSrc} type={type} />;\n };\n\n const renderLink = (): React.ReactElement \| null => {\n if (!link) return null;\n return (\n <StyledLinkContainer>\n <StyledLink\n fdKey={`card-link-${link.label}`}\n href={link.href}\n iconRight={<RightArrowIcon />}\n onClick={link.onClick}\n underline={false}\n >\n {link.label}\n </StyledLink>\n </StyledLinkContainer>\n );\n };\n\n const renderHeading = (): React.ReactElement \| null => {\n if (!heading) return null;\n return <StyledHeading variant=\"h4Strong\">{heading}</StyledHeading>;\n };\n\n const renderContent = (): React.ReactElement => {\n return <StyledContent variant=\"b1Weak\">{content}</StyledContent>;\n };\n\n const renderHorizontalContent = (): React.ReactElement => {\n return (\n <>\n <StyledHorizontalContentWrapper>\n {icon && icon}\n <StyledHorizontalTextContent>\n {renderHeading()}\n {renderContent()}\n </StyledHorizontalTextContent>\n {badge && badge}\n </StyledHorizontalContentWrapper>\n {renderLink()}\n </>\n );\n };\n\n const renderVerticalContent = (): React.ReactElement => {\n return (\n <>\n {hasTopContent && (\n <StyledTopContentContainer hasBadge={!!badge} hasIcon={!!icon}>\n {icon && icon}\n {badge && badge}\n </StyledTopContentContainer>\n )}\n {renderHeading()}\n {renderContent()}\n {renderLink()}\n </>\n );\n };\n\n const renderCardContent = (): React.ReactElement => {\n if (type === 'horizontal') {\n return renderHorizontalContent();\n }\n return renderVerticalContent();\n };\n\n return (\n <StyledCard data-fd={fdKey} type={type} {...rest} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n {renderImage()}\n <StyledCardContent type={type}>{renderCardContent()}</StyledCardContent>\n </StyledCard>\n );\n};\n\nexport default Card;\n"],"names":["StyledCard","styled","MuiCard","theme","type","borderRadius","radius","border","palette","semantic","stroke","display","flexDirection","overflow","StyledCardContent","CardContent","paddingBottom","spacing","flex","justifyContent","StyledHorizontalContentWrapper","Box","alignItems","gap","StyledHorizontalTextContent","StyledHeading","Typography","marginBottom","StyledContent","color","text","StyledLinkContainer","marginTop","StyledLink","Link","StyledCardMedia","CardMedia","width","height","borderRight","borderBottom","flexShrink","StyledTopContentContainer","shouldForwardProp","prop","includes","hasIcon","hasBadge","Card","fdKey","heading","content","imageSrc","imageAlt","icon","badge","link","onMouseEnter","onMouseLeave","rest","element","IconContainer","Error","Badge","isValidBadge","hasTopContent","renderLink","_jsx","label","href","iconRight","RightArrowIcon","onClick","underline","renderHeading","variant","children","renderContent","_jsxs","alt","component","image","_Fragment"],"mappings":"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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiCheckbox, { type CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';\nimport MuiFormControlLabel from '@mui/material/FormControlLabel';\nimport { styled } from '@mui/material/styles';\n\nimport RemoveIcon from '@fd/icons/Remove';\nimport TickIcon from '@fd/icons/Tick';\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { getMobileTextStyle, typography } from '@fd/themes/typography';\n\ninterface CheckboxProps extends Omit<MuiCheckboxProps, 'size'> {\n fdKey: string;\n label?: string;\n size?: 'medium' \| 'small';\n valid?: boolean;\n}\n\nconst UncheckedControl = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' \| 'small'; valid: boolean; disabled?: boolean }>(({ theme, size, valid, disabled }) => {\n const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n return {\n width: dimensions,\n height: dimensions,\n borderRadius: theme.radius['radius-4'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n position: 'relative',\n\n ...(disabled && {\n border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n }),\n\n ...(!valid &&\n !disabled && {\n border: `2px solid ${theme.palette.semantic.stroke['stroke-error-strong']}`,\n backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n }),\n\n ...(!disabled && {\n '&::before': {\n content: '\"\"',\n width: dimensions,\n height: dimensions,\n inset: valid ? '-1px 0 0 -1px' : '-2px 0 0 -2px',\n position: 'absolute',\n borderRadius: theme.radius['radius-4'],\n pointerEvents: 'none',\n },\n 'input:hover ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n 'input:active ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n }),\n };\n});\n\nconst IconControl = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' \| 'small'; valid: boolean; disabled?: boolean }>(({ theme, size, valid, disabled }) => {\n const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n return {\n width: dimensions,\n height: dimensions,\n borderRadius: theme.radius['radius-4'],\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n position: 'relative',\n\n ...(disabled && {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n }),\n\n ...(!valid &&\n !disabled && {\n backgroundColor: theme.palette.semantic.fill['fill-error-strong'],\n }),\n\n ...(!disabled && {\n '&::before': {\n content: '\"\"',\n inset: 0,\n position: 'absolute',\n borderRadius: theme.radius['radius-4'],\n pointerEvents: 'none',\n },\n 'input:hover ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n 'input:active ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n }),\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n '& svg': {\n width: dimensions,\n height: dimensions,\n color: theme.palette.semantic.fill['fill-inverse-strong'],\n flexShrink: 0,\n display: 'block',\n overflow: 'visible',\n '& g, & path': {\n transform: 'scale(1.08)',\n transformOrigin: 'center',\n },\n },\n };\n});\n\nconst StyledFormControlLabel = styled(MuiFormControlLabel, {\n shouldForwardProp: (prop) => !['size', 'valid'].includes(prop as string),\n})<{ size: 'medium' \| 'small' }>(({ theme, size }) => ({\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n margin: 0,\n padding: 0,\n\n ...(size === 'small' && { gap: theme.spacing(1) }),\n ...(size === 'medium' && { gap: theme.spacing(1.5) }),\n\n '& .MuiTypography-root': {\n ...(size === 'small' && {\n ...typography.captionWeak,\n [theme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.body,\n ...getMobileTextStyle('caption'),\n },\n }),\n },\n}));\n\nconst StyledMuiCheckbox = styled(MuiCheckbox, {\n shouldForwardProp: (prop) => prop !== 'valid',\n})<{ valid: boolean }>(({ theme, valid, disabled }) => ({\n padding: 0,\n margin: 0,\n\n ...(!valid &&\n !disabled && {\n color: theme.palette.semantic.fill['fill-error-strong'],\n '&.Mui-checked': {\n color: theme.palette.semantic.fill['fill-error-strong'],\n },\n }),\n}));\n\nconst Checkbox = ({\n fdKey,\n label,\n size = 'medium',\n valid = true,\n disabled,\n ...props\n}: CheckboxProps): JSX.Element => {\n return (\n <StyledFormControlLabel\n control={\n <StyledMuiCheckbox\n disableFocusRipple\n disableRipple\n disableTouchRipple\n checkedIcon={\n <IconControl disabled={disabled} size={size} valid={valid}>\n <TickIcon />\n </IconControl>\n }\n data-fd={fdKey}\n icon={<UncheckedControl disabled={disabled} size={size} valid={valid} />}\n indeterminateIcon={\n <IconControl disabled={disabled} size={size} valid={valid}>\n <RemoveIcon />\n </IconControl>\n }\n size={size}\n valid={valid}\n {...props}\n />\n }\n data-fd={`${fdKey}-label`}\n disabled={disabled}\n label={label}\n size={size}\n />\n );\n};\n\nexport default Checkbox;\n"],"names":["UncheckedControl","styled","Box","shouldForwardProp","prop","theme","size","valid","disabled","dimensions","spacing","width","height","borderRadius","radius","border","palette","semantic","stroke","backgroundColor","fill","position","content","inset","pointerEvents","outline","outlineOffset","IconControl","display","alignItems","justifyContent","color","flexShrink","overflow","transform","transformOrigin","StyledFormControlLabel","MuiFormControlLabel","includes","margin","padding","gap","typography","captionWeak","breakpoints","down","fontFamily","mobile","body","getMobileTextStyle","StyledMuiCheckbox","MuiCheckbox","fdKey","label","props","_jsx","control","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","children","TickIcon","icon","indeterminateIcon","RemoveIcon"],"mappings":"gZAiBA,MAAMA,EAAmBC,EAAAA,OAAOC,EAAK,CACnCC,kBAAoBC,GAAkB,SAATA,GAA4B,UAATA,GAA6B,aAATA,GAD7CH,~~EAE4C~~,EAAGI,QAAOC,OAAMC,QAAOC,eAC1F,MAAMC,EAAaJ,EAAMK,QAAiB,UAATJ,EAAmB,EAAI,GAExD,MAAO,CACLK,MAAOF,EACPG,OAAQH,EACRI,aAAcR,EAAMS,OAAO,YAC3BC,OAAQ,aAAaV,EAAMW,QAAQC,SAASC,OAAO,mBACnDC,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,uBAC7CC,SAAU,cAENb,GAAY,CACdO,OAAQ,aAAaV,EAAMW,QAAQC,SAASC,OAAO,qBACnDC,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,4BAG1Cb,IACFC,GAAY,CACXO,OAAQ,aAAaV,EAAMW,QAAQC,SAASC,OAAO,yBACnDC,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,wBAG5CZ,GAAY,CACf,YAAa,CACXc,QAAS,KACTX,MAAOF,EACPG,OAAQH,EACRc,MAAOhB,EAAQ,gBAAkB,gBACjCc,SAAU,WACVR,aAAcR,EAAMS,OAAO,YAC3BU,cAAe,QAEjB,0BAA2B,CACzBL,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,eAE/C,2BAA4B,CAC1BD,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,eAE/C,kBAAmB,CACjBK,QAAS,aAAapB,EAAMW,QAAQC,SAASC,OAAO,kBACpDQ,cAAe,~~YAMjBC~~,EAAc1B,EAAAA,OAAOC,EAAK,CAC9BC,kBAAoBC,GAAkB,SAATA,GAA4B,UAATA,GAA6B,aAATA,GADlDH,~~EAEiD~~,EAAGI,QAAOC,OAAMC,QAAOC,eAC1F,MAAMC,EAAaJ,EAAMK,QAAiB,UAATJ,EAAmB,EAAI,GAExD,MAAO,CACLK,MAAOF,EACPG,OAAQH,EACRI,aAAcR,EAAMS,OAAO,YAC3BK,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,iBAC7CC,SAAU,cAENb,GAAY,CACdW,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,sBAG1Cb,IACFC,GAAY,CACXW,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,0BAG5CZ,GAAY,CACf,YAAa,CACXc,QAAS,KACTC,MAAO,EACPF,SAAU,WACVR,aAAcR,EAAMS,OAAO,YAC3BU,cAAe,QAEjB,0BAA2B,CACzBL,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,eAE/C,2BAA4B,CAC1BD,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,eAE/C,kBAAmB,CACjBK,QAAS,aAAapB,EAAMW,QAAQC,SAASC,OAAO,kBACpDQ,cAAe,QAInBE,QAAS,OACTC,WAAY,SACZC,eAAgB,SAEhB,QAAS,CACPnB,MAAOF,EACPG,OAAQH,EACRsB,MAAO1B,EAAMW,QAAQC,SAASG,KAAK,uBACnCY,WAAY,EACZJ,QAAS,QACTK,SAAU,UACV,cAAe,CACbC,UAAW,cACXC,gBAAiB,~~eAMnBC~~,EAAyBnC,EAAAA,OAAOoC,EAAqB,CACzDlC,kBAAoBC,IAAU,CAAC,OAAQ,SAASkC,SAASlC,IAD5BH,~~EAEE~~,EAAGI,QAAOC,WAAM,CAC/CuB,WAAY,SACZD,QAAS,OACTE,eAAgB,aAChBS,OAAQ,EACRC,QAAS,KAEI,UAATlC,GAAoB,CAAEmC,IAAKpC,EAAMK,QAAQ,OAChC,WAATJ,GAAqB,CAAEmC,IAAKpC,EAAMK,QAAQ,MAE9C,wBAAyB,IACV,UAATJ,GAAoB,IACnBoC,EAAAA,WAAWC,YACd,CAACtC,EAAMuC,YAAYC,KAAK,WAAY,CAClCC,WAAYA,EAAAA,WAAWC,OAAOC,QAC3BC,EAAAA,mBAAmB,~~kBAMxBC~~,EAAoBjD,EAAAA,OAAOkD,EAAa,CAC5ChD,kBAAoBC,GAAkB,UAATA,GADLH,~~EAEH~~,EAAGI,QAAOE,QAAOC,eAAU,CAChDgC,QAAS,EACTD,OAAQ,MAEHhC,IACFC,GAAY,CACXuB,MAAO1B,EAAMW,QAAQC,SAASG,KAAK,qBACnC,gBAAiB,CACfW,MAAO1B,EAAMW,QAAQC,SAASG,KAAK,~~0CAK1B~~,EACfgC,QACAC,QACA/C,OAAO,SACPC,SAAQ,EACRC,cACG8C,KAGDC,EAAAA,IAACnB,EAAsB,CACrBoB,QACED,EAAAA,IAACL,EAAiB,CAChBO,oBAAkB,EAClBC,eAAa,EACbC,oBAAkB,EAClBC,YACEL,MAAC5B,EAAW,CAACnB,SAAUA,EAAUF,KAAMA,EAAMC,MAAOA,EAAKsD,SACvDN,EAAAA,IAACO,EAAQ,MACG,UAEPV,EACTW,KAAMR,EAAAA,IAACvD,EAAgB,CAACQ,SAAUA,EAAUF,KAAMA,EAAMC,MAAOA,IAC/DyD,kBACET,EAAAA,IAAC5B,EAAW,CAACnB,SAAUA,EAAUF,KAAMA,EAAMC,MAAOA,EAAKsD,SACvDN,MAACU,EAAU,CAAA,KAGf3D,KAAMA,EACNC,MAAOA,KACH+C,IACJ,UAEK,GAAGF,UACZ5C,SAAUA,EACV6C,MAAOA,EACP/C,KAAMA"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiCheckbox, { type CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';\nimport MuiFormControlLabel from '@mui/material/FormControlLabel';\nimport { styled } from '@mui/material/styles';\n\nimport RemoveIcon from '@fd/icons/Remove';\nimport TickIcon from '@fd/icons/Tick';\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { getMobileTextStyle, typography } from '@fd/themes/typography';\n\ninterface CheckboxProps extends Omit<MuiCheckboxProps, 'size'> {\n fdKey: string;\n label?: string;\n size?: 'medium' \| 'small';\n valid?: boolean;\n}\n\nconst UncheckedControl = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' \| 'small'; valid: boolean; disabled?: boolean }>(({ theme, size, valid, disabled }) => {\n const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n return {\n width: dimensions,\n height: dimensions,\n borderRadius: theme.radius['radius-4'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n position: 'relative',\n\n ...(disabled && {\n border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n }),\n\n ...(!valid &&\n !disabled && {\n border: `2px solid ${theme.palette.semantic.stroke['stroke-error-strong']}`,\n backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n }),\n\n ...(!disabled && {\n '&::before': {\n content: '\"\"',\n width: dimensions,\n height: dimensions,\n inset: valid ? '-1px 0 0 -1px' : '-2px 0 0 -2px',\n position: 'absolute',\n borderRadius: theme.radius['radius-4'],\n pointerEvents: 'none',\n },\n 'input:hover ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n 'input:active ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n }),\n };\n});\n\nconst IconControl = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' \| 'small'; valid: boolean; disabled?: boolean }>(({ theme, size, valid, disabled }) => {\n const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n return {\n width: dimensions,\n height: dimensions,\n borderRadius: theme.radius['radius-4'],\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n position: 'relative',\n\n ...(disabled && {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n }),\n\n ...(!valid &&\n !disabled && {\n backgroundColor: theme.palette.semantic.fill['fill-error-strong'],\n }),\n\n ...(!disabled && {\n '&::before': {\n content: '\"\"',\n inset: 0,\n position: 'absolute',\n borderRadius: theme.radius['radius-4'],\n pointerEvents: 'none',\n },\n 'input:hover ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n 'input:active ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n }),\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n '& svg': {\n width: dimensions,\n height: dimensions,\n color: theme.palette.semantic.fill['fill-inverse-strong'],\n flexShrink: 0,\n display: 'block',\n overflow: 'visible',\n '& g, & path': {\n transform: 'scale(1.08)',\n transformOrigin: 'center',\n },\n },\n };\n});\n\nconst StyledFormControlLabel = styled(MuiFormControlLabel, {\n shouldForwardProp: (prop) => !['size', 'valid'].includes(prop as string),\n})<{ size: 'medium' \| 'small' }>(({ theme, size }) => ({\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n margin: 0,\n padding: 0,\n\n ...(size === 'small' && { gap: theme.spacing(1) }),\n ...(size === 'medium' && { gap: theme.spacing(1.5) }),\n\n '& .MuiTypography-root': {\n ...(size === 'small' && {\n ...typography.captionWeak,\n [theme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.body,\n ...getMobileTextStyle('caption'),\n },\n }),\n },\n}));\n\nconst StyledMuiCheckbox = styled(MuiCheckbox, {\n shouldForwardProp: (prop) => prop !== 'valid',\n})<{ valid: boolean }>(({ theme, valid, disabled }) => ({\n padding: 0,\n margin: 0,\n\n ...(!valid &&\n !disabled && {\n color: theme.palette.semantic.fill['fill-error-strong'],\n '&.Mui-checked': {\n color: theme.palette.semantic.fill['fill-error-strong'],\n },\n }),\n}));\n\nconst Checkbox = ({\n fdKey,\n label,\n size = 'medium',\n valid = true,\n disabled,\n ...props\n}: CheckboxProps): JSX.Element => {\n return (\n <StyledFormControlLabel\n control={\n <StyledMuiCheckbox\n disableFocusRipple\n disableRipple\n disableTouchRipple\n checkedIcon={\n <IconControl disabled={disabled} size={size} valid={valid}>\n <TickIcon />\n </IconControl>\n }\n data-fd={fdKey}\n icon={<UncheckedControl disabled={disabled} size={size} valid={valid} />}\n indeterminateIcon={\n <IconControl disabled={disabled} size={size} valid={valid}>\n <RemoveIcon />\n </IconControl>\n }\n size={size}\n valid={valid}\n {...props}\n />\n }\n data-fd={`${fdKey}-label`}\n disabled={disabled}\n label={label}\n size={size}\n />\n );\n};\n\nexport default Checkbox;\n"],"names":["UncheckedControl","styled","Box","shouldForwardProp","prop","theme","size","valid","disabled","dimensions","spacing","width","height","borderRadius","radius","border","palette","semantic","stroke","backgroundColor","fill","position","content","inset","pointerEvents","outline","outlineOffset","IconControl","display","alignItems","justifyContent","color","flexShrink","overflow","transform","transformOrigin","StyledFormControlLabel","MuiFormControlLabel","includes","margin","padding","gap","typography","captionWeak","breakpoints","down","fontFamily","mobile","body","getMobileTextStyle","StyledMuiCheckbox","MuiCheckbox","fdKey","label","props","_jsx","control","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","children","TickIcon","icon","indeterminateIcon","RemoveIcon"],"mappings":"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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiCheckbox, { type CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';\nimport MuiFormControlLabel from '@mui/material/FormControlLabel';\nimport { styled } from '@mui/material/styles';\n\nimport RemoveIcon from '@fd/icons/Remove';\nimport TickIcon from '@fd/icons/Tick';\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { getMobileTextStyle, typography } from '@fd/themes/typography';\n\ninterface CheckboxProps extends Omit<MuiCheckboxProps, 'size'> {\n fdKey: string;\n label?: string;\n size?: 'medium' \| 'small';\n valid?: boolean;\n}\n\nconst UncheckedControl = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' \| 'small'; valid: boolean; disabled?: boolean }>(({ theme, size, valid, disabled }) => {\n const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n return {\n width: dimensions,\n height: dimensions,\n borderRadius: theme.radius['radius-4'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n position: 'relative',\n\n ...(disabled && {\n border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n }),\n\n ...(!valid &&\n !disabled && {\n border: `2px solid ${theme.palette.semantic.stroke['stroke-error-strong']}`,\n backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n }),\n\n ...(!disabled && {\n '&::before': {\n content: '\"\"',\n width: dimensions,\n height: dimensions,\n inset: valid ? '-1px 0 0 -1px' : '-2px 0 0 -2px',\n position: 'absolute',\n borderRadius: theme.radius['radius-4'],\n pointerEvents: 'none',\n },\n 'input:hover ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n 'input:active ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n }),\n };\n});\n\nconst IconControl = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' \| 'small'; valid: boolean; disabled?: boolean }>(({ theme, size, valid, disabled }) => {\n const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n return {\n width: dimensions,\n height: dimensions,\n borderRadius: theme.radius['radius-4'],\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n position: 'relative',\n\n ...(disabled && {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n }),\n\n ...(!valid &&\n !disabled && {\n backgroundColor: theme.palette.semantic.fill['fill-error-strong'],\n }),\n\n ...(!disabled && {\n '&::before': {\n content: '\"\"',\n inset: 0,\n position: 'absolute',\n borderRadius: theme.radius['radius-4'],\n pointerEvents: 'none',\n },\n 'input:hover ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n 'input:active ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n }),\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n '& svg': {\n width: dimensions,\n height: dimensions,\n color: theme.palette.semantic.fill['fill-inverse-strong'],\n flexShrink: 0,\n display: 'block',\n overflow: 'visible',\n '& g, & path': {\n transform: 'scale(1.08)',\n transformOrigin: 'center',\n },\n },\n };\n});\n\nconst StyledFormControlLabel = styled(MuiFormControlLabel, {\n shouldForwardProp: (prop) => !['size', 'valid'].includes(prop as string),\n})<{ size: 'medium' \| 'small' }>(({ theme, size }) => ({\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n margin: 0,\n padding: 0,\n\n ...(size === 'small' && { gap: theme.spacing(1) }),\n ...(size === 'medium' && { gap: theme.spacing(1.5) }),\n\n '& .MuiTypography-root': {\n ...(size === 'small' && {\n ...typography.captionWeak,\n [theme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.body,\n ...getMobileTextStyle('caption'),\n },\n }),\n },\n}));\n\nconst StyledMuiCheckbox = styled(MuiCheckbox, {\n shouldForwardProp: (prop) => prop !== 'valid',\n})<{ valid: boolean }>(({ theme, valid, disabled }) => ({\n padding: 0,\n margin: 0,\n\n ...(!valid &&\n !disabled && {\n color: theme.palette.semantic.fill['fill-error-strong'],\n '&.Mui-checked': {\n color: theme.palette.semantic.fill['fill-error-strong'],\n },\n }),\n}));\n\nconst Checkbox = ({\n fdKey,\n label,\n size = 'medium',\n valid = true,\n disabled,\n ...props\n}: CheckboxProps): JSX.Element => {\n return (\n <StyledFormControlLabel\n control={\n <StyledMuiCheckbox\n disableFocusRipple\n disableRipple\n disableTouchRipple\n checkedIcon={\n <IconControl disabled={disabled} size={size} valid={valid}>\n <TickIcon />\n </IconControl>\n }\n data-fd={fdKey}\n icon={<UncheckedControl disabled={disabled} size={size} valid={valid} />}\n indeterminateIcon={\n <IconControl disabled={disabled} size={size} valid={valid}>\n <RemoveIcon />\n </IconControl>\n }\n size={size}\n valid={valid}\n {...props}\n />\n }\n data-fd={`${fdKey}-label`}\n disabled={disabled}\n label={label}\n size={size}\n />\n );\n};\n\nexport default Checkbox;\n"],"names":["UncheckedControl","styled","Box","shouldForwardProp","prop","theme","size","valid","disabled","dimensions","spacing","width","height","borderRadius","radius","border","palette","semantic","stroke","backgroundColor","fill","position","content","inset","pointerEvents","outline","outlineOffset","IconControl","display","alignItems","justifyContent","color","flexShrink","overflow","transform","transformOrigin","StyledFormControlLabel","MuiFormControlLabel","includes","margin","padding","gap","typography","captionWeak","breakpoints","down","fontFamily","mobile","body","getMobileTextStyle","StyledMuiCheckbox","MuiCheckbox","Checkbox","fdKey","label","props","_jsx","control","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","children","TickIcon","icon","indeterminateIcon","RemoveIcon"],"mappings":"scAiBA,MAAMA,EAAmBC,EAAOC,EAAK,CACnCC,kBAAoBC,GAAkB,SAATA,GAA4B,UAATA,GAA6B,aAATA,GAD7CH,~~EAE4C~~,EAAGI,QAAOC,OAAMC,QAAOC,eAC1F,MAAMC,EAAaJ,EAAMK,QAAiB,UAATJ,EAAmB,EAAI,GAExD,MAAO,CACLK,MAAOF,EACPG,OAAQH,EACRI,aAAcR,EAAMS,OAAO,YAC3BC,OAAQ,aAAaV,EAAMW,QAAQC,SAASC,OAAO,mBACnDC,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,uBAC7CC,SAAU,cAENb,GAAY,CACdO,OAAQ,aAAaV,EAAMW,QAAQC,SAASC,OAAO,qBACnDC,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,4BAG1Cb,IACFC,GAAY,CACXO,OAAQ,aAAaV,EAAMW,QAAQC,SAASC,OAAO,yBACnDC,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,wBAG5CZ,GAAY,CACf,YAAa,CACXc,QAAS,KACTX,MAAOF,EACPG,OAAQH,EACRc,MAAOhB,EAAQ,gBAAkB,gBACjCc,SAAU,WACVR,aAAcR,EAAMS,OAAO,YAC3BU,cAAe,QAEjB,0BAA2B,CACzBL,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,eAE/C,2BAA4B,CAC1BD,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,eAE/C,kBAAmB,CACjBK,QAAS,aAAapB,EAAMW,QAAQC,SAASC,OAAO,kBACpDQ,cAAe,~~YAMjBC~~,EAAc1B,EAAOC,EAAK,CAC9BC,kBAAoBC,GAAkB,SAATA,GAA4B,UAATA,GAA6B,aAATA,GADlDH,~~EAEiD~~,EAAGI,QAAOC,OAAMC,QAAOC,eAC1F,MAAMC,EAAaJ,EAAMK,QAAiB,UAATJ,EAAmB,EAAI,GAExD,MAAO,CACLK,MAAOF,EACPG,OAAQH,EACRI,aAAcR,EAAMS,OAAO,YAC3BK,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,iBAC7CC,SAAU,cAENb,GAAY,CACdW,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,sBAG1Cb,IACFC,GAAY,CACXW,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,0BAG5CZ,GAAY,CACf,YAAa,CACXc,QAAS,KACTC,MAAO,EACPF,SAAU,WACVR,aAAcR,EAAMS,OAAO,YAC3BU,cAAe,QAEjB,0BAA2B,CACzBL,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,eAE/C,2BAA4B,CAC1BD,gBAAiBd,EAAMW,QAAQC,SAASG,KAAK,eAE/C,kBAAmB,CACjBK,QAAS,aAAapB,EAAMW,QAAQC,SAASC,OAAO,kBACpDQ,cAAe,QAInBE,QAAS,OACTC,WAAY,SACZC,eAAgB,SAEhB,QAAS,CACPnB,MAAOF,EACPG,OAAQH,EACRsB,MAAO1B,EAAMW,QAAQC,SAASG,KAAK,uBACnCY,WAAY,EACZJ,QAAS,QACTK,SAAU,UACV,cAAe,CACbC,UAAW,cACXC,gBAAiB,~~eAMnBC~~,EAAyBnC,EAAOoC,EAAqB,CACzDlC,kBAAoBC,IAAU,CAAC,OAAQ,SAASkC,SAASlC,IAD5BH,~~EAEE~~,EAAGI,QAAOC,WAAM,CAC/CuB,WAAY,SACZD,QAAS,OACTE,eAAgB,aAChBS,OAAQ,EACRC,QAAS,KAEI,UAATlC,GAAoB,CAAEmC,IAAKpC,EAAMK,QAAQ,OAChC,WAATJ,GAAqB,CAAEmC,IAAKpC,EAAMK,QAAQ,MAE9C,wBAAyB,IACV,UAATJ,GAAoB,IACnBoC,EAAWC,YACd,CAACtC,EAAMuC,YAAYC,KAAK,WAAY,CAClCC,WAAYA,EAAWC,OAAOC,QAC3BC,EAAmB,~~kBAMxBC~~,EAAoBjD,EAAOkD,EAAa,CAC5ChD,kBAAoBC,GAAkB,UAATA,GADLH,~~EAEH~~,EAAGI,QAAOE,QAAOC,eAAU,CAChDgC,QAAS,EACTD,OAAQ,MAEHhC,IACFC,GAAY,CACXuB,MAAO1B,EAAMW,QAAQC,SAASG,KAAK,qBACnC,gBAAiB,CACfW,MAAO1B,EAAMW,QAAQC,SAASG,KAAK,~~2BAKrCgC~~,EAAW,EACfC,QACAC,QACAhD,OAAO,SACPC,SAAQ,EACRC,cACG+C,KAGDC,EAACpB,EAAsB,CACrBqB,QACED,EAACN,EAAiB,CAChBQ,oBAAkB,EAClBC,eAAa,EACbC,oBAAkB,EAClBC,YACEL,EAAC7B,EAAW,CAACnB,SAAUA,EAAUF,KAAMA,EAAMC,MAAOA,EAAKuD,SACvDN,EAACO,EAAQ,MACG,UAEPV,EACTW,KAAMR,EAACxD,EAAgB,CAACQ,SAAUA,EAAUF,KAAMA,EAAMC,MAAOA,IAC/D0D,kBACET,EAAC7B,EAAW,CAACnB,SAAUA,EAAUF,KAAMA,EAAMC,MAAOA,EAAKuD,SACvDN,EAACU,EAAU,CAAA,KAGf5D,KAAMA,EACNC,MAAOA,KACHgD,IACJ,UAEK,GAAGF,UACZ7C,SAAUA,EACV8C,MAAOA,EACPhD,KAAMA"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiCheckbox, { type CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';\nimport MuiFormControlLabel from '@mui/material/FormControlLabel';\nimport { styled } from '@mui/material/styles';\n\nimport RemoveIcon from '@fd/icons/Remove';\nimport TickIcon from '@fd/icons/Tick';\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { getMobileTextStyle, typography } from '@fd/themes/typography';\n\ninterface CheckboxProps extends Omit<MuiCheckboxProps, 'size'> {\n fdKey: string;\n label?: string;\n size?: 'medium' \| 'small';\n valid?: boolean;\n}\n\nconst UncheckedControl = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' \| 'small'; valid: boolean; disabled?: boolean }>(({ theme, size, valid, disabled }) => {\n const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n return {\n width: dimensions,\n height: dimensions,\n borderRadius: theme.radius['radius-4'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n position: 'relative',\n\n ...(disabled && {\n border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n }),\n\n ...(!valid &&\n !disabled && {\n border: `2px solid ${theme.palette.semantic.stroke['stroke-error-strong']}`,\n backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n }),\n\n ...(!disabled && {\n '&::before': {\n content: '\"\"',\n width: dimensions,\n height: dimensions,\n inset: valid ? '-1px 0 0 -1px' : '-2px 0 0 -2px',\n position: 'absolute',\n borderRadius: theme.radius['radius-4'],\n pointerEvents: 'none',\n },\n 'input:hover ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n 'input:active ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n }),\n };\n});\n\nconst IconControl = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'valid' && prop !== 'disabled',\n})<{ size: 'medium' \| 'small'; valid: boolean; disabled?: boolean }>(({ theme, size, valid, disabled }) => {\n const dimensions = theme.spacing(size === 'small' ? 3 : 4);\n\n return {\n width: dimensions,\n height: dimensions,\n borderRadius: theme.radius['radius-4'],\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n position: 'relative',\n\n ...(disabled && {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n }),\n\n ...(!valid &&\n !disabled && {\n backgroundColor: theme.palette.semantic.fill['fill-error-strong'],\n }),\n\n ...(!disabled && {\n '&::before': {\n content: '\"\"',\n inset: 0,\n position: 'absolute',\n borderRadius: theme.radius['radius-4'],\n pointerEvents: 'none',\n },\n 'input:hover ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n 'input:active ~ &::before': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n }),\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n '& svg': {\n width: dimensions,\n height: dimensions,\n color: theme.palette.semantic.fill['fill-inverse-strong'],\n flexShrink: 0,\n display: 'block',\n overflow: 'visible',\n '& g, & path': {\n transform: 'scale(1.08)',\n transformOrigin: 'center',\n },\n },\n };\n});\n\nconst StyledFormControlLabel = styled(MuiFormControlLabel, {\n shouldForwardProp: (prop) => !['size', 'valid'].includes(prop as string),\n})<{ size: 'medium' \| 'small' }>(({ theme, size }) => ({\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n margin: 0,\n padding: 0,\n\n ...(size === 'small' && { gap: theme.spacing(1) }),\n ...(size === 'medium' && { gap: theme.spacing(1.5) }),\n\n '& .MuiTypography-root': {\n ...(size === 'small' && {\n ...typography.captionWeak,\n [theme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.body,\n ...getMobileTextStyle('caption'),\n },\n }),\n },\n}));\n\nconst StyledMuiCheckbox = styled(MuiCheckbox, {\n shouldForwardProp: (prop) => prop !== 'valid',\n})<{ valid: boolean }>(({ theme, valid, disabled }) => ({\n padding: 0,\n margin: 0,\n\n ...(!valid &&\n !disabled && {\n color: theme.palette.semantic.fill['fill-error-strong'],\n '&.Mui-checked': {\n color: theme.palette.semantic.fill['fill-error-strong'],\n },\n }),\n}));\n\nconst Checkbox = ({\n fdKey,\n label,\n size = 'medium',\n valid = true,\n disabled,\n ...props\n}: CheckboxProps): JSX.Element => {\n return (\n <StyledFormControlLabel\n control={\n <StyledMuiCheckbox\n disableFocusRipple\n disableRipple\n disableTouchRipple\n checkedIcon={\n <IconControl disabled={disabled} size={size} valid={valid}>\n <TickIcon />\n </IconControl>\n }\n data-fd={fdKey}\n icon={<UncheckedControl disabled={disabled} size={size} valid={valid} />}\n indeterminateIcon={\n <IconControl disabled={disabled} size={size} valid={valid}>\n <RemoveIcon />\n </IconControl>\n }\n size={size}\n valid={valid}\n {...props}\n />\n }\n data-fd={`${fdKey}-label`}\n disabled={disabled}\n label={label}\n size={size}\n />\n );\n};\n\nexport default Checkbox;\n"],"names":["UncheckedControl","styled","Box","shouldForwardProp","prop","theme","size","valid","disabled","dimensions","spacing","width","height","borderRadius","radius","border","palette","semantic","stroke","backgroundColor","fill","position","content","inset","pointerEvents","outline","outlineOffset","IconControl","display","alignItems","justifyContent","color","flexShrink","overflow","transform","transformOrigin","StyledFormControlLabel","MuiFormControlLabel","includes","margin","padding","gap","typography","captionWeak","breakpoints","down","fontFamily","mobile","body","getMobileTextStyle","StyledMuiCheckbox","MuiCheckbox","Checkbox","fdKey","label","props","_jsx","control","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","children","TickIcon","icon","indeterminateIcon","RemoveIcon"],"mappings":"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"}

package/dist/components/atoms/CircularProgress/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"),a=require("@mui/material/Box"),t=require("@mui/material/CircularProgress"),i=require("@mui/material/styles"),s=require("@mui/material/Typography");const o={small:20,medium:40,large:60},n=i.styled(a)({display:"inline-flex",flexDirection:"column",alignItems:"center",gap:8}),l=i.styled(t,{shouldForwardProp:e=>"gradientId"!==e})((({variant:e,theme:r,gradientId:a})=>{const t="dark"===r.palette.mode,i="determinate"===e;return{"& .MuiCircularProgress-svg":{animation:""+(i?"none":"rotate-circular 1.4s linear infinite"),filter:t?"drop-shadow(0px 2px 4px rgba(255, 255, 255, 0.1))":"drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1))"},"& .MuiCircularProgress-circle":{stroke:`url(#${`${a}-${t?"dark":"light"}-${i?"determinate":"indeterminate"}`})`,strokeLinecap:"round",strokeDasharray:"110, 200",strokeDashoffset:0,animation:"none"},"@keyframes rotate-circular":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}}})),d=({size:a="medium",text:t,value:i,variant:d="indeterminate",...m})=>{const u=r.useId().replace(/:/g,""),c="determinate"===d,x=o[a];c&&(i=Math.min(100,Math.max(0,Number(i)||0)));const p=`${u}-light-${c?"determinate":"indeterminate"}`,g=`${u}-dark-${c?"determinate":"indeterminate"}`;return e.jsxs(n,{children:[e.jsx("svg",{width:"0",height:"0",style:{position:"absolute"},children:e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:p,x1:"0%",y1:"95%",x2:"100%",y2:"100%",children:[e.jsx("stop",{offset:"0%",stopColor:"rgba(0, 0, 0, 1)"}),e.jsx("stop",{offset:"100%",stopColor:""+(c?"rgba(0, 0, 0, 1)":"rgba(0, 0, 0, 0)")})]}),e.jsxs("linearGradient",{id:g,x1:"0%",y1:"95%",x2:"100%",y2:"100%",children:[e.jsx("stop",{offset:"0%",stopColor:"rgba(255, 255, 255, 1)"}),e.jsx("stop",{offset:"100%",stopColor:""+(c?"rgba(255, 255, 255, 1)":"rgba(255, 255, 255, 0)")})]})]})}),e.jsx(l,{gradientId:u,size:x,variant:d,value:i,"aria-label":t||"Loading","aria-valuenow":"determinate"===d?i:void 0,"aria-valuemin":"determinate"===d?0:void 0,"aria-valuemax":"determinate"===d?100:void 0,...m}),t&&e.jsx(s,{variant:"caption",color:"text.secondary","aria-live":"polite",children:t})]})};exports.CircularProgress=d,exports.default=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),a=require("@mui/material/Box"),t=require("@mui/material/CircularProgress"),i=require("@mui/material/styles"),s=require("@mui/material/Typography");const o={small:20,medium:40,large:60},n=i.styled(a)({display:"inline-flex",flexDirection:"column",alignItems:"center",gap:8}),l=i.styled(t,{shouldForwardProp:e=>"gradientId"!==e})(({variant:e,theme:r,gradientId:a})=>{const t="dark"===r.palette.mode,i="determinate"===e;return{"& .MuiCircularProgress-svg":{animation:""+(i?"none":"rotate-circular 1.4s linear infinite"),filter:t?"drop-shadow(0px 2px 4px rgba(255, 255, 255, 0.1))":"drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1))"},"& .MuiCircularProgress-circle":{stroke:`url(#${`${a}-${t?"dark":"light"}-${i?"determinate":"indeterminate"}`})`,strokeLinecap:"round",strokeDasharray:"110, 200",strokeDashoffset:0,animation:"none"},"@keyframes rotate-circular":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}}}),d=({size:a="medium",text:t,value:i,variant:d="indeterminate",...m})=>{const u=r.useId().replace(/:/g,""),c="determinate"===d,x=o[a];c&&(i=Math.min(100,Math.max(0,Number(i)||0)));const p=`${u}-light-${c?"determinate":"indeterminate"}`,g=`${u}-dark-${c?"determinate":"indeterminate"}`;return e.jsxs(n,{children:[e.jsx("svg",{width:"0",height:"0",style:{position:"absolute"},children:e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:p,x1:"0%",y1:"95%",x2:"100%",y2:"100%",children:[e.jsx("stop",{offset:"0%",stopColor:"rgba(0, 0, 0, 1)"}),e.jsx("stop",{offset:"100%",stopColor:""+(c?"rgba(0, 0, 0, 1)":"rgba(0, 0, 0, 0)")})]}),e.jsxs("linearGradient",{id:g,x1:"0%",y1:"95%",x2:"100%",y2:"100%",children:[e.jsx("stop",{offset:"0%",stopColor:"rgba(255, 255, 255, 1)"}),e.jsx("stop",{offset:"100%",stopColor:""+(c?"rgba(255, 255, 255, 1)":"rgba(255, 255, 255, 0)")})]})]})}),e.jsx(l,{gradientId:u,size:x,variant:d,value:i,"aria-label":t||"Loading","aria-valuenow":"determinate"===d?i:void 0,"aria-valuemin":"determinate"===d?0:void 0,"aria-valuemax":"determinate"===d?100:void 0,...m}),t&&e.jsx(s,{variant:"caption",color:"text.secondary","aria-live":"polite",children:t})]})};exports.CircularProgress=d,exports.default=d;
 //# sourceMappingURL=index.cjs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/CircularProgress/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/sort-type-constituents /\n/ eslint-disable react/jsx-sort-props /\n// atoms/CircularProgress/CircularProgress.tsx\nimport { useId } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiCircularProgress, {\n type CircularProgressProps as MuiCircularProgressProps,\n} from '@mui/material/CircularProgress';\nimport { styled } from '@mui/material/styles';\n\nimport Typography from '../Typography';\n\n/\n Key Features:\n ✅ Based on MUI CircularProgress - Extends the base component\n ✅ Light & Dark mode support - Uses conic gradient provided in Figma design specs\n ✅ Optional status text - Pass text prop to display below spinner\n ✅ Determinate progress - Set variant=\"determinate\" and value when duration is known\n ✅ Custom sizes - small=20px, medium=40px, large=60px\n ✅ ARIA compliant - Includes proper aria labels and live regions\n ✅ Simple API - Only size, value, text, and variant props\n/\n\ntype CircularProgressSize = 'small' \| 'medium' \| 'large';\n\nconst SIZE_MAP: Record<CircularProgressSize, number> = {\n small: 20,\n medium: 40,\n large: 60,\n};\n\nexport interface CircularProgressProps extends Omit<MuiCircularProgressProps, 'color' \| 'size'> {\n /\n The size of the circular progress\n * @default 'medium'\n /\n size?: CircularProgressSize;\n /\n Optional text to display below the progress indicator\n /\n text?: string;\n /\n The value of the progress indicator for determinate variant\n * Value between 0 and 100\n /\n value?: number;\n /\n The variant of the progress indicator\n * @default 'indeterminate'\n /\n variant?: 'determinate' \| 'indeterminate';\n}\n\nconst ProgressWrapper = styled(Box)({\n display: 'inline-flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: 8,\n});\n\nconst StyledCircularProgress = styled(MuiCircularProgress, {\n shouldForwardProp: (prop) => prop !== 'gradientId',\n})<{ gradientId: string }>(({ variant, theme, gradientId }) => {\n const isDark = theme.palette.mode === 'dark';\n const isDeterminate = variant === 'determinate';\n const progressGradientId = `${gradientId}-${isDark ? 'dark' : 'light'}-${isDeterminate ? 'determinate' : 'indeterminate'}`;\n\n return {\n '& .MuiCircularProgress-svg': {\n animation: `${isDeterminate ? 'none' : 'rotate-circular 1.4s linear infinite'}`, // Smooth continuous rotation for indeterminate\n filter: isDark\n ? 'drop-shadow(0px 2px 4px rgba(255, 255, 255, 0.1))'\n : 'drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1))',\n },\n '& .MuiCircularProgress-circle': {\n stroke: `url(#${progressGradientId})`,\n strokeLinecap: 'round',\n strokeDasharray: '110, 200', // Adjust the gap - increase first value to reduce gap\n strokeDashoffset: 0,\n animation: 'none', // Suppress default animation as we handle rotation at SVG level\n },\n '@keyframes rotate-circular': {\n '0%': {\n transform: 'rotate(0deg)',\n },\n '100%': {\n transform: 'rotate(360deg)',\n },\n },\n };\n});\n\n/\n CircularProgress component for showing process progress on buttons or UI elements.\n * Supports light and dark themes with conic gradient styling.\n /\n\nexport const CircularProgress: React.FC<CircularProgressProps> = ({\n size = 'medium',\n text,\n value,\n variant = 'indeterminate',\n ...props\n}) => {\n const uniqueId = useId().replace(/:/g, '');\n const isDeterminate = variant === 'determinate';\n const sizeInPixels = SIZE_MAP[size];\n\n if (isDeterminate) {\n // Clamp value between 0 and 100 for determinate variant\n value = Math.min(100, Math.max(0, Number(value) \|\| 0));\n }\n\n // Define unique gradient IDs based on theme and variant to support simultaneous instances (avoid DOM gradient ID conflicts)\n const progressGradientLightId = `${uniqueId}-light-${isDeterminate ? 'determinate' : 'indeterminate'}`;\n const progressGradientDarkId = `${uniqueId}-dark-${isDeterminate ? 'determinate' : 'indeterminate'}`;\n\n return (\n <ProgressWrapper>\n {/ Hidden SVG for gradient definitions /}\n <svg width=\"0\" height=\"0\" style={{ position: 'absolute' }}>\n <defs>\n {/ Light mode gradient /}\n <linearGradient id={progressGradientLightId} x1=\"0%\" y1=\"95%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor=\"rgba(0, 0, 0, 1)\" />\n <stop offset=\"100%\" stopColor={`${isDeterminate ? 'rgba(0, 0, 0, 1)' : 'rgba(0, 0, 0, 0)'}`} />\n </linearGradient>\n\n {/ Dark mode gradient */}\n <linearGradient id={progressGradientDarkId} x1=\"0%\" y1=\"95%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor=\"rgba(255, 255, 255, 1)\" />\n <stop\n offset=\"100%\"\n stopColor={`${isDeterminate ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, 0)'}`}\n />\n </linearGradient>\n </defs>\n </svg>\n\n <StyledCircularProgress\n gradientId={uniqueId}\n size={sizeInPixels}\n variant={variant}\n value={value}\n aria-label={text \|\| 'Loading'}\n aria-valuenow={variant === 'determinate' ? value : undefined}\n aria-valuemin={variant === 'determinate' ? 0 : undefined}\n aria-valuemax={variant === 'determinate' ? 100 : undefined}\n {...props}\n />\n\n {text && (\n <Typography variant=\"caption\" color=\"text.secondary\" aria-live=\"polite\">\n {text}\n </Typography>\n )}\n </ProgressWrapper>\n );\n};\n\nexport default CircularProgress;\n"],"names":["SIZE_MAP","small","medium","large","ProgressWrapper","styled","Box","display","flexDirection","alignItems","gap","StyledCircularProgress","MuiCircularProgress","shouldForwardProp","prop","variant","theme","gradientId","isDark","palette","mode","isDeterminate","animation","filter","stroke","strokeLinecap","strokeDasharray","strokeDashoffset","transform","CircularProgress","size","text","value","props","uniqueId","useId","replace","sizeInPixels","Math","min","max","Number","progressGradientLightId","progressGradientDarkId","_jsxs","children","_jsx","width","height","style","position","id","x1","y1","x2","y2","offset","stopColor","undefined","Typography","color"],"mappings":"6QA0BA,MAAMA,EAAiD,CACrDC,MAAO,GACPC,OAAQ,GACRC,MAAO,IAyBHC,EAAkBC,EAAAA,OAAOC,EAAPD,CAAY,CAClCE,QAAS,cACTC,cAAe,SACfC,WAAY,SACZC,IAAK,IAGDC,EAAyBN,EAAAA,OAAOO,EAAqB,CACzDC,kBAAoBC,GAAkB,eAATA,GADAT,~~EAEJ~~,EAAGU,UAASC,QAAOC,iBAC5C,MAAMC,EAAgC,SAAvBF,EAAMG,QAAQC,KACvBC,EAA4B,gBAAZN,EAGtB,MAAO,CACL,6BAA8B,CAC5BO,UAAW,IAAGD,EAAgB,OAAS,wCACvCE,OAAQL,EACJ,oDACA,+CAEN,gCAAiC,CAC/BM,OAAQ,QAVe,GAAGP,KAAcC,EAAS,OAAS,WAAWG,EAAgB,cAAgB,qBAWrGI,cAAe,QACfC,gBAAiB,WACjBC,iBAAkB,EAClBL,UAAW,QAEb,6BAA8B,CAC5B,KAAM,CACJM,UAAW,gBAEb,OAAQ,CACNA,UAAW,~~uBAWNC~~,EAAoD,EAC/DC,OAAO,SACPC,OACAC,QACAjB,UAAU,mBACPkB,MAEH,MAAMC,EAAWC,EAAAA,QAAQC,QAAQ,KAAM,IACjCf,EAA4B,gBAAZN,EAChBsB,EAAerC,EAAS8B,GAE1BT,IAEFW,EAAQM,KAAKC,IAAI,IAAKD,KAAKE,IAAI,EAAGC,OAAOT,IAAU,KAIrD,MAAMU,EAA0B,GAAGR,WAAkBb,EAAgB,cAAgB,kBAC/EsB,EAAyB,GAAGT,UAAiBb,EAAgB,cAAgB,kBAEnF,OACEuB,EAAAA,KAACxC,EAAe,CAAAyC,SAAA,CAEdC,EAAAA,WAAKC,MAAM,IAAIC,OAAO,IAAIC,MAAO,CAAEC,SAAU,YAAYL,SACvDD,EAAAA,KAAA,OAAA,CAAAC,SAAA,CAEED,EAAAA,KAAA,iBAAA,CAAgBO,GAAIT,EAAyBU,GAAG,KAAKC,GAAG,MAAMC,GAAG,OAAOC,GAAG,OAAMV,SAAA,CAC/EC,EAAAA,IAAA,OAAA,CAAMU,OAAO,KAAKC,UAAU,qBAC5BX,EAAAA,IAAA,OAAA,CAAMU,OAAO,OAAOC,UAAW,IAAGpC,EAAgB,mBAAqB,yBAIzEuB,EAAAA,KAAA,iBAAA,CAAgBO,GAAIR,EAAwBS,GAAG,KAAKC,GAAG,MAAMC,GAAG,OAAOC,GAAG,OAAMV,SAAA,CAC9EC,EAAAA,IAAA,OAAA,CAAMU,OAAO,KAAKC,UAAU,2BAC5BX,EAAAA,YACEU,OAAO,OACPC,UAAW,IAAGpC,EAAgB,yBAA2B,oCAMjEyB,EAAAA,IAACnC,EAAsB,CACrBM,WAAYiB,EACZJ,KAAMO,EACNtB,QAASA,EACTiB,MAAOA,EAAK,aACAD,GAAQ,UAAS,gBACF,gBAAZhB,EAA4BiB,OAAQ0B,kBACxB,gBAAZ3C,EAA4B,OAAI2C,EAAS,gBAC7B,gBAAZ3C,EAA4B,SAAM2C,KAC7CzB,IAGLF,GACCe,EAAAA,IAACa,EAAU,CAAC5C,QAAQ,UAAU6C,MAAM,iBAAgB,YAAW,SAAQf,SACpEd"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/CircularProgress/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/sort-type-constituents /\n/ eslint-disable react/jsx-sort-props /\n// atoms/CircularProgress/CircularProgress.tsx\nimport { useId } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiCircularProgress, {\n type CircularProgressProps as MuiCircularProgressProps,\n} from '@mui/material/CircularProgress';\nimport { styled } from '@mui/material/styles';\n\nimport Typography from '../Typography';\n\n/\n Key Features:\n ✅ Based on MUI CircularProgress - Extends the base component\n ✅ Light & Dark mode support - Uses conic gradient provided in Figma design specs\n ✅ Optional status text - Pass text prop to display below spinner\n ✅ Determinate progress - Set variant=\"determinate\" and value when duration is known\n ✅ Custom sizes - small=20px, medium=40px, large=60px\n ✅ ARIA compliant - Includes proper aria labels and live regions\n ✅ Simple API - Only size, value, text, and variant props\n/\n\ntype CircularProgressSize = 'small' \| 'medium' \| 'large';\n\nconst SIZE_MAP: Record<CircularProgressSize, number> = {\n small: 20,\n medium: 40,\n large: 60,\n};\n\nexport interface CircularProgressProps extends Omit<MuiCircularProgressProps, 'color' \| 'size'> {\n /\n The size of the circular progress\n * @default 'medium'\n /\n size?: CircularProgressSize;\n /\n Optional text to display below the progress indicator\n /\n text?: string;\n /\n The value of the progress indicator for determinate variant\n * Value between 0 and 100\n /\n value?: number;\n /\n The variant of the progress indicator\n * @default 'indeterminate'\n /\n variant?: 'determinate' \| 'indeterminate';\n}\n\nconst ProgressWrapper = styled(Box)({\n display: 'inline-flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: 8,\n});\n\nconst StyledCircularProgress = styled(MuiCircularProgress, {\n shouldForwardProp: (prop) => prop !== 'gradientId',\n})<{ gradientId: string }>(({ variant, theme, gradientId }) => {\n const isDark = theme.palette.mode === 'dark';\n const isDeterminate = variant === 'determinate';\n const progressGradientId = `${gradientId}-${isDark ? 'dark' : 'light'}-${isDeterminate ? 'determinate' : 'indeterminate'}`;\n\n return {\n '& .MuiCircularProgress-svg': {\n animation: `${isDeterminate ? 'none' : 'rotate-circular 1.4s linear infinite'}`, // Smooth continuous rotation for indeterminate\n filter: isDark\n ? 'drop-shadow(0px 2px 4px rgba(255, 255, 255, 0.1))'\n : 'drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1))',\n },\n '& .MuiCircularProgress-circle': {\n stroke: `url(#${progressGradientId})`,\n strokeLinecap: 'round',\n strokeDasharray: '110, 200', // Adjust the gap - increase first value to reduce gap\n strokeDashoffset: 0,\n animation: 'none', // Suppress default animation as we handle rotation at SVG level\n },\n '@keyframes rotate-circular': {\n '0%': {\n transform: 'rotate(0deg)',\n },\n '100%': {\n transform: 'rotate(360deg)',\n },\n },\n };\n});\n\n/\n CircularProgress component for showing process progress on buttons or UI elements.\n * Supports light and dark themes with conic gradient styling.\n /\n\nexport const CircularProgress: React.FC<CircularProgressProps> = ({\n size = 'medium',\n text,\n value,\n variant = 'indeterminate',\n ...props\n}) => {\n const uniqueId = useId().replace(/:/g, '');\n const isDeterminate = variant === 'determinate';\n const sizeInPixels = SIZE_MAP[size];\n\n if (isDeterminate) {\n // Clamp value between 0 and 100 for determinate variant\n value = Math.min(100, Math.max(0, Number(value) \|\| 0));\n }\n\n // Define unique gradient IDs based on theme and variant to support simultaneous instances (avoid DOM gradient ID conflicts)\n const progressGradientLightId = `${uniqueId}-light-${isDeterminate ? 'determinate' : 'indeterminate'}`;\n const progressGradientDarkId = `${uniqueId}-dark-${isDeterminate ? 'determinate' : 'indeterminate'}`;\n\n return (\n <ProgressWrapper>\n {/ Hidden SVG for gradient definitions /}\n <svg width=\"0\" height=\"0\" style={{ position: 'absolute' }}>\n <defs>\n {/ Light mode gradient /}\n <linearGradient id={progressGradientLightId} x1=\"0%\" y1=\"95%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor=\"rgba(0, 0, 0, 1)\" />\n <stop offset=\"100%\" stopColor={`${isDeterminate ? 'rgba(0, 0, 0, 1)' : 'rgba(0, 0, 0, 0)'}`} />\n </linearGradient>\n\n {/ Dark mode gradient */}\n <linearGradient id={progressGradientDarkId} x1=\"0%\" y1=\"95%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor=\"rgba(255, 255, 255, 1)\" />\n <stop\n offset=\"100%\"\n stopColor={`${isDeterminate ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, 0)'}`}\n />\n </linearGradient>\n </defs>\n </svg>\n\n <StyledCircularProgress\n gradientId={uniqueId}\n size={sizeInPixels}\n variant={variant}\n value={value}\n aria-label={text \|\| 'Loading'}\n aria-valuenow={variant === 'determinate' ? value : undefined}\n aria-valuemin={variant === 'determinate' ? 0 : undefined}\n aria-valuemax={variant === 'determinate' ? 100 : undefined}\n {...props}\n />\n\n {text && (\n <Typography variant=\"caption\" color=\"text.secondary\" aria-live=\"polite\">\n {text}\n </Typography>\n )}\n </ProgressWrapper>\n );\n};\n\nexport default CircularProgress;\n"],"names":["SIZE_MAP","small","medium","large","ProgressWrapper","styled","Box","display","flexDirection","alignItems","gap","StyledCircularProgress","MuiCircularProgress","shouldForwardProp","prop","variant","theme","gradientId","isDark","palette","mode","isDeterminate","animation","filter","stroke","strokeLinecap","strokeDasharray","strokeDashoffset","transform","CircularProgress","size","text","value","props","uniqueId","useId","replace","sizeInPixels","Math","min","max","Number","progressGradientLightId","progressGradientDarkId","_jsxs","children","_jsx","width","height","style","position","id","x1","y1","x2","y2","offset","stopColor","undefined","Typography","color"],"mappings":"6QA0BA,MAAMA,EAAiD,CACrDC,MAAO,GACPC,OAAQ,GACRC,MAAO,IAyBHC,EAAkBC,EAAAA,OAAOC,EAAPD,CAAY,CAClCE,QAAS,cACTC,cAAe,SACfC,WAAY,SACZC,IAAK,IAGDC,EAAyBN,EAAAA,OAAOO,EAAqB,CACzDC,kBAAoBC,GAAkB,eAATA,GADAT,CAEJ,EAAGU,UAASC,QAAOC,iBAC5C,MAAMC,EAAgC,SAAvBF,EAAMG,QAAQC,KACvBC,EAA4B,gBAAZN,EAGtB,MAAO,CACL,6BAA8B,CAC5BO,UAAW,IAAGD,EAAgB,OAAS,wCACvCE,OAAQL,EACJ,oDACA,+CAEN,gCAAiC,CAC/BM,OAAQ,QAVe,GAAGP,KAAcC,EAAS,OAAS,WAAWG,EAAgB,cAAgB,qBAWrGI,cAAe,QACfC,gBAAiB,WACjBC,iBAAkB,EAClBL,UAAW,QAEb,6BAA8B,CAC5B,KAAM,CACJM,UAAW,gBAEb,OAAQ,CACNA,UAAW,sBAWNC,EAAoD,EAC/DC,OAAO,SACPC,OACAC,QACAjB,UAAU,mBACPkB,MAEH,MAAMC,EAAWC,EAAAA,QAAQC,QAAQ,KAAM,IACjCf,EAA4B,gBAAZN,EAChBsB,EAAerC,EAAS8B,GAE1BT,IAEFW,EAAQM,KAAKC,IAAI,IAAKD,KAAKE,IAAI,EAAGC,OAAOT,IAAU,KAIrD,MAAMU,EAA0B,GAAGR,WAAkBb,EAAgB,cAAgB,kBAC/EsB,EAAyB,GAAGT,UAAiBb,EAAgB,cAAgB,kBAEnF,OACEuB,EAAAA,KAACxC,EAAe,CAAAyC,SAAA,CAEdC,EAAAA,WAAKC,MAAM,IAAIC,OAAO,IAAIC,MAAO,CAAEC,SAAU,YAAYL,SACvDD,EAAAA,KAAA,OAAA,CAAAC,SAAA,CAEED,EAAAA,KAAA,iBAAA,CAAgBO,GAAIT,EAAyBU,GAAG,KAAKC,GAAG,MAAMC,GAAG,OAAOC,GAAG,OAAMV,SAAA,CAC/EC,EAAAA,IAAA,OAAA,CAAMU,OAAO,KAAKC,UAAU,qBAC5BX,EAAAA,IAAA,OAAA,CAAMU,OAAO,OAAOC,UAAW,IAAGpC,EAAgB,mBAAqB,yBAIzEuB,EAAAA,KAAA,iBAAA,CAAgBO,GAAIR,EAAwBS,GAAG,KAAKC,GAAG,MAAMC,GAAG,OAAOC,GAAG,OAAMV,SAAA,CAC9EC,EAAAA,IAAA,OAAA,CAAMU,OAAO,KAAKC,UAAU,2BAC5BX,EAAAA,YACEU,OAAO,OACPC,UAAW,IAAGpC,EAAgB,yBAA2B,oCAMjEyB,EAAAA,IAACnC,EAAsB,CACrBM,WAAYiB,EACZJ,KAAMO,EACNtB,QAASA,EACTiB,MAAOA,EAAK,aACAD,GAAQ,UAAS,gBACF,gBAAZhB,EAA4BiB,OAAQ0B,kBACxB,gBAAZ3C,EAA4B,OAAI2C,EAAS,gBAC7B,gBAAZ3C,EAA4B,SAAM2C,KAC7CzB,IAGLF,GACCe,EAAAA,IAACa,EAAU,CAAC5C,QAAQ,UAAU6C,MAAM,iBAAgB,YAAW,SAAQf,SACpEd"}

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useId as a}from"react";import t from"@mui/material/Box";import i from"@mui/material/CircularProgress";import{styled as o}from"@mui/material/styles";import n from"@mui/material/Typography";const l={small:20,medium:40,large:60},d=o(t)({display:"inline-flex",flexDirection:"column",alignItems:"center",gap:8}),m=o(i,{shouldForwardProp:e=>"gradientId"!==e})((({variant:e,theme:r,gradientId:a})=>{const t="dark"===r.palette.mode,i="determinate"===e;return{"& .MuiCircularProgress-svg":{animation:""+(i?"none":"rotate-circular 1.4s linear infinite"),filter:t?"drop-shadow(0px 2px 4px rgba(255, 255, 255, 0.1))":"drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1))"},"& .MuiCircularProgress-circle":{stroke:`url(#${`${a}-${t?"dark":"light"}-${i?"determinate":"indeterminate"}`})`,strokeLinecap:"round",strokeDasharray:"110, 200",strokeDashoffset:0,animation:"none"},"@keyframes rotate-circular":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}}})),s=({size:t="medium",text:i,value:o,variant:s="indeterminate",...p})=>{const c=a().replace(/:/g,""),u="determinate"===s,g=l[t];u&&(o=Math.min(100,Math.max(0,Number(o)||0)));const f=`${c}-dark-${u?"determinate":"indeterminate"}`;return e(d,{children:[r("svg",{width:"0",height:"0",style:{position:"absolute"},children:e("defs",{children:[e("linearGradient",{id:`${c}-light-${u?"determinate":"indeterminate"}`,x1:"0%",y1:"95%",x2:"100%",y2:"100%",children:[r("stop",{offset:"0%",stopColor:"rgba(0, 0, 0, 1)"}),r("stop",{offset:"100%",stopColor:""+(u?"rgba(0, 0, 0, 1)":"rgba(0, 0, 0, 0)")})]}),e("linearGradient",{id:f,x1:"0%",y1:"95%",x2:"100%",y2:"100%",children:[r("stop",{offset:"0%",stopColor:"rgba(255, 255, 255, 1)"}),r("stop",{offset:"100%",stopColor:""+(u?"rgba(255, 255, 255, 1)":"rgba(255, 255, 255, 0)")})]})]})}),r(m,{gradientId:c,size:g,variant:s,value:o,"aria-label":i||"Loading","aria-valuenow":"determinate"===s?o:void 0,"aria-valuemin":"determinate"===s?0:void 0,"aria-valuemax":"determinate"===s?100:void 0,...p}),i&&r(n,{variant:"caption",color:"text.secondary","aria-live":"polite",children:i})]})};export{s as CircularProgress,s as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useId as a}from"react";import t from"@mui/material/Box";import i from"@mui/material/CircularProgress";import{styled as o}from"@mui/material/styles";import n from"@mui/material/Typography";const l={small:20,medium:40,large:60},d=o(t)({display:"inline-flex",flexDirection:"column",alignItems:"center",gap:8}),m=o(i,{shouldForwardProp:e=>"gradientId"!==e})(({variant:e,theme:r,gradientId:a})=>{const t="dark"===r.palette.mode,i="determinate"===e;return{"& .MuiCircularProgress-svg":{animation:""+(i?"none":"rotate-circular 1.4s linear infinite"),filter:t?"drop-shadow(0px 2px 4px rgba(255, 255, 255, 0.1))":"drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1))"},"& .MuiCircularProgress-circle":{stroke:`url(#${`${a}-${t?"dark":"light"}-${i?"determinate":"indeterminate"}`})`,strokeLinecap:"round",strokeDasharray:"110, 200",strokeDashoffset:0,animation:"none"},"@keyframes rotate-circular":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}}}),s=({size:t="medium",text:i,value:o,variant:s="indeterminate",...p})=>{const c=a().replace(/:/g,""),u="determinate"===s,g=l[t];u&&(o=Math.min(100,Math.max(0,Number(o)||0)));const f=`${c}-dark-${u?"determinate":"indeterminate"}`;return e(d,{children:[r("svg",{width:"0",height:"0",style:{position:"absolute"},children:e("defs",{children:[e("linearGradient",{id:`${c}-light-${u?"determinate":"indeterminate"}`,x1:"0%",y1:"95%",x2:"100%",y2:"100%",children:[r("stop",{offset:"0%",stopColor:"rgba(0, 0, 0, 1)"}),r("stop",{offset:"100%",stopColor:""+(u?"rgba(0, 0, 0, 1)":"rgba(0, 0, 0, 0)")})]}),e("linearGradient",{id:f,x1:"0%",y1:"95%",x2:"100%",y2:"100%",children:[r("stop",{offset:"0%",stopColor:"rgba(255, 255, 255, 1)"}),r("stop",{offset:"100%",stopColor:""+(u?"rgba(255, 255, 255, 1)":"rgba(255, 255, 255, 0)")})]})]})}),r(m,{gradientId:c,size:g,variant:s,value:o,"aria-label":i||"Loading","aria-valuenow":"determinate"===s?o:void 0,"aria-valuemin":"determinate"===s?0:void 0,"aria-valuemax":"determinate"===s?100:void 0,...p}),i&&r(n,{variant:"caption",color:"text.secondary","aria-live":"polite",children:i})]})};export{s as CircularProgress,s as default};
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/CircularProgress/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/sort-type-constituents /\n/ eslint-disable react/jsx-sort-props /\n// atoms/CircularProgress/CircularProgress.tsx\nimport { useId } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiCircularProgress, {\n type CircularProgressProps as MuiCircularProgressProps,\n} from '@mui/material/CircularProgress';\nimport { styled } from '@mui/material/styles';\n\nimport Typography from '../Typography';\n\n/\n Key Features:\n ✅ Based on MUI CircularProgress - Extends the base component\n ✅ Light & Dark mode support - Uses conic gradient provided in Figma design specs\n ✅ Optional status text - Pass text prop to display below spinner\n ✅ Determinate progress - Set variant=\"determinate\" and value when duration is known\n ✅ Custom sizes - small=20px, medium=40px, large=60px\n ✅ ARIA compliant - Includes proper aria labels and live regions\n ✅ Simple API - Only size, value, text, and variant props\n/\n\ntype CircularProgressSize = 'small' \| 'medium' \| 'large';\n\nconst SIZE_MAP: Record<CircularProgressSize, number> = {\n small: 20,\n medium: 40,\n large: 60,\n};\n\nexport interface CircularProgressProps extends Omit<MuiCircularProgressProps, 'color' \| 'size'> {\n /\n The size of the circular progress\n * @default 'medium'\n /\n size?: CircularProgressSize;\n /\n Optional text to display below the progress indicator\n /\n text?: string;\n /\n The value of the progress indicator for determinate variant\n * Value between 0 and 100\n /\n value?: number;\n /\n The variant of the progress indicator\n * @default 'indeterminate'\n /\n variant?: 'determinate' \| 'indeterminate';\n}\n\nconst ProgressWrapper = styled(Box)({\n display: 'inline-flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: 8,\n});\n\nconst StyledCircularProgress = styled(MuiCircularProgress, {\n shouldForwardProp: (prop) => prop !== 'gradientId',\n})<{ gradientId: string }>(({ variant, theme, gradientId }) => {\n const isDark = theme.palette.mode === 'dark';\n const isDeterminate = variant === 'determinate';\n const progressGradientId = `${gradientId}-${isDark ? 'dark' : 'light'}-${isDeterminate ? 'determinate' : 'indeterminate'}`;\n\n return {\n '& .MuiCircularProgress-svg': {\n animation: `${isDeterminate ? 'none' : 'rotate-circular 1.4s linear infinite'}`, // Smooth continuous rotation for indeterminate\n filter: isDark\n ? 'drop-shadow(0px 2px 4px rgba(255, 255, 255, 0.1))'\n : 'drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1))',\n },\n '& .MuiCircularProgress-circle': {\n stroke: `url(#${progressGradientId})`,\n strokeLinecap: 'round',\n strokeDasharray: '110, 200', // Adjust the gap - increase first value to reduce gap\n strokeDashoffset: 0,\n animation: 'none', // Suppress default animation as we handle rotation at SVG level\n },\n '@keyframes rotate-circular': {\n '0%': {\n transform: 'rotate(0deg)',\n },\n '100%': {\n transform: 'rotate(360deg)',\n },\n },\n };\n});\n\n/\n CircularProgress component for showing process progress on buttons or UI elements.\n * Supports light and dark themes with conic gradient styling.\n /\n\nexport const CircularProgress: React.FC<CircularProgressProps> = ({\n size = 'medium',\n text,\n value,\n variant = 'indeterminate',\n ...props\n}) => {\n const uniqueId = useId().replace(/:/g, '');\n const isDeterminate = variant === 'determinate';\n const sizeInPixels = SIZE_MAP[size];\n\n if (isDeterminate) {\n // Clamp value between 0 and 100 for determinate variant\n value = Math.min(100, Math.max(0, Number(value) \|\| 0));\n }\n\n // Define unique gradient IDs based on theme and variant to support simultaneous instances (avoid DOM gradient ID conflicts)\n const progressGradientLightId = `${uniqueId}-light-${isDeterminate ? 'determinate' : 'indeterminate'}`;\n const progressGradientDarkId = `${uniqueId}-dark-${isDeterminate ? 'determinate' : 'indeterminate'}`;\n\n return (\n <ProgressWrapper>\n {/ Hidden SVG for gradient definitions /}\n <svg width=\"0\" height=\"0\" style={{ position: 'absolute' }}>\n <defs>\n {/ Light mode gradient /}\n <linearGradient id={progressGradientLightId} x1=\"0%\" y1=\"95%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor=\"rgba(0, 0, 0, 1)\" />\n <stop offset=\"100%\" stopColor={`${isDeterminate ? 'rgba(0, 0, 0, 1)' : 'rgba(0, 0, 0, 0)'}`} />\n </linearGradient>\n\n {/ Dark mode gradient */}\n <linearGradient id={progressGradientDarkId} x1=\"0%\" y1=\"95%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor=\"rgba(255, 255, 255, 1)\" />\n <stop\n offset=\"100%\"\n stopColor={`${isDeterminate ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, 0)'}`}\n />\n </linearGradient>\n </defs>\n </svg>\n\n <StyledCircularProgress\n gradientId={uniqueId}\n size={sizeInPixels}\n variant={variant}\n value={value}\n aria-label={text \|\| 'Loading'}\n aria-valuenow={variant === 'determinate' ? value : undefined}\n aria-valuemin={variant === 'determinate' ? 0 : undefined}\n aria-valuemax={variant === 'determinate' ? 100 : undefined}\n {...props}\n />\n\n {text && (\n <Typography variant=\"caption\" color=\"text.secondary\" aria-live=\"polite\">\n {text}\n </Typography>\n )}\n </ProgressWrapper>\n );\n};\n\nexport default CircularProgress;\n"],"names":["SIZE_MAP","small","medium","large","ProgressWrapper","styled","Box","display","flexDirection","alignItems","gap","StyledCircularProgress","MuiCircularProgress","shouldForwardProp","prop","variant","theme","gradientId","isDark","palette","mode","isDeterminate","animation","filter","stroke","strokeLinecap","strokeDasharray","strokeDashoffset","transform","CircularProgress","size","text","value","props","uniqueId","useId","replace","sizeInPixels","Math","min","max","Number","progressGradientDarkId","_jsxs","children","_jsx","width","height","style","position","id","x1","y1","x2","y2","offset","stopColor","undefined","Typography","color"],"mappings":"qPA0BA,MAAMA,EAAiD,CACrDC,MAAO,GACPC,OAAQ,GACRC,MAAO,IAyBHC,EAAkBC,EAAOC,EAAPD,CAAY,CAClCE,QAAS,cACTC,cAAe,SACfC,WAAY,SACZC,IAAK,IAGDC,EAAyBN,EAAOO,EAAqB,CACzDC,kBAAoBC,GAAkB,eAATA,GADAT,~~EAEJ~~,EAAGU,UAASC,QAAOC,iBAC5C,MAAMC,EAAgC,SAAvBF,EAAMG,QAAQC,KACvBC,EAA4B,gBAAZN,EAGtB,MAAO,CACL,6BAA8B,CAC5BO,UAAW,IAAGD,EAAgB,OAAS,wCACvCE,OAAQL,EACJ,oDACA,+CAEN,gCAAiC,CAC/BM,OAAQ,QAVe,GAAGP,KAAcC,EAAS,OAAS,WAAWG,EAAgB,cAAgB,qBAWrGI,cAAe,QACfC,gBAAiB,WACjBC,iBAAkB,EAClBL,UAAW,QAEb,6BAA8B,CAC5B,KAAM,CACJM,UAAW,gBAEb,OAAQ,CACNA,UAAW,~~uBAWNC~~,EAAoD,EAC/DC,OAAO,SACPC,OACAC,QACAjB,UAAU,mBACPkB,MAEH,MAAMC,EAAWC,IAAQC,QAAQ,KAAM,IACjCf,EAA4B,gBAAZN,EAChBsB,EAAerC,EAAS8B,GAE1BT,IAEFW,EAAQM,KAAKC,IAAI,IAAKD,KAAKE,IAAI,EAAGC,OAAOT,IAAU,KAIrD,MACMU,EAAyB,GAAGR,UAAiBb,EAAgB,cAAgB,kBAEnF,OACEsB,EAACvC,EAAe,CAAAwC,SAAA,CAEdC,SAAKC,MAAM,IAAIC,OAAO,IAAIC,MAAO,CAAEC,SAAU,YAAYL,SACvDD,EAAA,OAAA,CAAAC,SAAA,CAEED,EAAA,iBAAA,CAAgBO,GATQ,GAAGhB,WAAkBb,EAAgB,cAAgB,kBAShC8B,GAAG,KAAKC,GAAG,MAAMC,GAAG,OAAOC,GAAG,OAAMV,SAAA,CAC/EC,EAAA,OAAA,CAAMU,OAAO,KAAKC,UAAU,qBAC5BX,EAAA,OAAA,CAAMU,OAAO,OAAOC,UAAW,IAAGnC,EAAgB,mBAAqB,yBAIzEsB,EAAA,iBAAA,CAAgBO,GAAIR,EAAwBS,GAAG,KAAKC,GAAG,MAAMC,GAAG,OAAOC,GAAG,OAAMV,SAAA,CAC9EC,EAAA,OAAA,CAAMU,OAAO,KAAKC,UAAU,2BAC5BX,UACEU,OAAO,OACPC,UAAW,IAAGnC,EAAgB,yBAA2B,oCAMjEwB,EAAClC,EAAsB,CACrBM,WAAYiB,EACZJ,KAAMO,EACNtB,QAASA,EACTiB,MAAOA,EAAK,aACAD,GAAQ,UAAS,gBACF,gBAAZhB,EAA4BiB,OAAQyB,kBACxB,gBAAZ1C,EAA4B,OAAI0C,EAAS,gBAC7B,gBAAZ1C,EAA4B,SAAM0C,KAC7CxB,IAGLF,GACCc,EAACa,EAAU,CAAC3C,QAAQ,UAAU4C,MAAM,iBAAgB,YAAW,SAAQf,SACpEb"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/CircularProgress/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/sort-type-constituents /\n/ eslint-disable react/jsx-sort-props /\n// atoms/CircularProgress/CircularProgress.tsx\nimport { useId } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiCircularProgress, {\n type CircularProgressProps as MuiCircularProgressProps,\n} from '@mui/material/CircularProgress';\nimport { styled } from '@mui/material/styles';\n\nimport Typography from '../Typography';\n\n/\n Key Features:\n ✅ Based on MUI CircularProgress - Extends the base component\n ✅ Light & Dark mode support - Uses conic gradient provided in Figma design specs\n ✅ Optional status text - Pass text prop to display below spinner\n ✅ Determinate progress - Set variant=\"determinate\" and value when duration is known\n ✅ Custom sizes - small=20px, medium=40px, large=60px\n ✅ ARIA compliant - Includes proper aria labels and live regions\n ✅ Simple API - Only size, value, text, and variant props\n/\n\ntype CircularProgressSize = 'small' \| 'medium' \| 'large';\n\nconst SIZE_MAP: Record<CircularProgressSize, number> = {\n small: 20,\n medium: 40,\n large: 60,\n};\n\nexport interface CircularProgressProps extends Omit<MuiCircularProgressProps, 'color' \| 'size'> {\n /\n The size of the circular progress\n * @default 'medium'\n /\n size?: CircularProgressSize;\n /\n Optional text to display below the progress indicator\n /\n text?: string;\n /\n The value of the progress indicator for determinate variant\n * Value between 0 and 100\n /\n value?: number;\n /\n The variant of the progress indicator\n * @default 'indeterminate'\n /\n variant?: 'determinate' \| 'indeterminate';\n}\n\nconst ProgressWrapper = styled(Box)({\n display: 'inline-flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: 8,\n});\n\nconst StyledCircularProgress = styled(MuiCircularProgress, {\n shouldForwardProp: (prop) => prop !== 'gradientId',\n})<{ gradientId: string }>(({ variant, theme, gradientId }) => {\n const isDark = theme.palette.mode === 'dark';\n const isDeterminate = variant === 'determinate';\n const progressGradientId = `${gradientId}-${isDark ? 'dark' : 'light'}-${isDeterminate ? 'determinate' : 'indeterminate'}`;\n\n return {\n '& .MuiCircularProgress-svg': {\n animation: `${isDeterminate ? 'none' : 'rotate-circular 1.4s linear infinite'}`, // Smooth continuous rotation for indeterminate\n filter: isDark\n ? 'drop-shadow(0px 2px 4px rgba(255, 255, 255, 0.1))'\n : 'drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1))',\n },\n '& .MuiCircularProgress-circle': {\n stroke: `url(#${progressGradientId})`,\n strokeLinecap: 'round',\n strokeDasharray: '110, 200', // Adjust the gap - increase first value to reduce gap\n strokeDashoffset: 0,\n animation: 'none', // Suppress default animation as we handle rotation at SVG level\n },\n '@keyframes rotate-circular': {\n '0%': {\n transform: 'rotate(0deg)',\n },\n '100%': {\n transform: 'rotate(360deg)',\n },\n },\n };\n});\n\n/\n CircularProgress component for showing process progress on buttons or UI elements.\n * Supports light and dark themes with conic gradient styling.\n /\n\nexport const CircularProgress: React.FC<CircularProgressProps> = ({\n size = 'medium',\n text,\n value,\n variant = 'indeterminate',\n ...props\n}) => {\n const uniqueId = useId().replace(/:/g, '');\n const isDeterminate = variant === 'determinate';\n const sizeInPixels = SIZE_MAP[size];\n\n if (isDeterminate) {\n // Clamp value between 0 and 100 for determinate variant\n value = Math.min(100, Math.max(0, Number(value) \|\| 0));\n }\n\n // Define unique gradient IDs based on theme and variant to support simultaneous instances (avoid DOM gradient ID conflicts)\n const progressGradientLightId = `${uniqueId}-light-${isDeterminate ? 'determinate' : 'indeterminate'}`;\n const progressGradientDarkId = `${uniqueId}-dark-${isDeterminate ? 'determinate' : 'indeterminate'}`;\n\n return (\n <ProgressWrapper>\n {/ Hidden SVG for gradient definitions /}\n <svg width=\"0\" height=\"0\" style={{ position: 'absolute' }}>\n <defs>\n {/ Light mode gradient /}\n <linearGradient id={progressGradientLightId} x1=\"0%\" y1=\"95%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor=\"rgba(0, 0, 0, 1)\" />\n <stop offset=\"100%\" stopColor={`${isDeterminate ? 'rgba(0, 0, 0, 1)' : 'rgba(0, 0, 0, 0)'}`} />\n </linearGradient>\n\n {/ Dark mode gradient */}\n <linearGradient id={progressGradientDarkId} x1=\"0%\" y1=\"95%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor=\"rgba(255, 255, 255, 1)\" />\n <stop\n offset=\"100%\"\n stopColor={`${isDeterminate ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, 0)'}`}\n />\n </linearGradient>\n </defs>\n </svg>\n\n <StyledCircularProgress\n gradientId={uniqueId}\n size={sizeInPixels}\n variant={variant}\n value={value}\n aria-label={text \|\| 'Loading'}\n aria-valuenow={variant === 'determinate' ? value : undefined}\n aria-valuemin={variant === 'determinate' ? 0 : undefined}\n aria-valuemax={variant === 'determinate' ? 100 : undefined}\n {...props}\n />\n\n {text && (\n <Typography variant=\"caption\" color=\"text.secondary\" aria-live=\"polite\">\n {text}\n </Typography>\n )}\n </ProgressWrapper>\n );\n};\n\nexport default CircularProgress;\n"],"names":["SIZE_MAP","small","medium","large","ProgressWrapper","styled","Box","display","flexDirection","alignItems","gap","StyledCircularProgress","MuiCircularProgress","shouldForwardProp","prop","variant","theme","gradientId","isDark","palette","mode","isDeterminate","animation","filter","stroke","strokeLinecap","strokeDasharray","strokeDashoffset","transform","CircularProgress","size","text","value","props","uniqueId","useId","replace","sizeInPixels","Math","min","max","Number","progressGradientDarkId","_jsxs","children","_jsx","width","height","style","position","id","x1","y1","x2","y2","offset","stopColor","undefined","Typography","color"],"mappings":"qPA0BA,MAAMA,EAAiD,CACrDC,MAAO,GACPC,OAAQ,GACRC,MAAO,IAyBHC,EAAkBC,EAAOC,EAAPD,CAAY,CAClCE,QAAS,cACTC,cAAe,SACfC,WAAY,SACZC,IAAK,IAGDC,EAAyBN,EAAOO,EAAqB,CACzDC,kBAAoBC,GAAkB,eAATA,GADAT,CAEJ,EAAGU,UAASC,QAAOC,iBAC5C,MAAMC,EAAgC,SAAvBF,EAAMG,QAAQC,KACvBC,EAA4B,gBAAZN,EAGtB,MAAO,CACL,6BAA8B,CAC5BO,UAAW,IAAGD,EAAgB,OAAS,wCACvCE,OAAQL,EACJ,oDACA,+CAEN,gCAAiC,CAC/BM,OAAQ,QAVe,GAAGP,KAAcC,EAAS,OAAS,WAAWG,EAAgB,cAAgB,qBAWrGI,cAAe,QACfC,gBAAiB,WACjBC,iBAAkB,EAClBL,UAAW,QAEb,6BAA8B,CAC5B,KAAM,CACJM,UAAW,gBAEb,OAAQ,CACNA,UAAW,sBAWNC,EAAoD,EAC/DC,OAAO,SACPC,OACAC,QACAjB,UAAU,mBACPkB,MAEH,MAAMC,EAAWC,IAAQC,QAAQ,KAAM,IACjCf,EAA4B,gBAAZN,EAChBsB,EAAerC,EAAS8B,GAE1BT,IAEFW,EAAQM,KAAKC,IAAI,IAAKD,KAAKE,IAAI,EAAGC,OAAOT,IAAU,KAIrD,MACMU,EAAyB,GAAGR,UAAiBb,EAAgB,cAAgB,kBAEnF,OACEsB,EAACvC,EAAe,CAAAwC,SAAA,CAEdC,SAAKC,MAAM,IAAIC,OAAO,IAAIC,MAAO,CAAEC,SAAU,YAAYL,SACvDD,EAAA,OAAA,CAAAC,SAAA,CAEED,EAAA,iBAAA,CAAgBO,GATQ,GAAGhB,WAAkBb,EAAgB,cAAgB,kBAShC8B,GAAG,KAAKC,GAAG,MAAMC,GAAG,OAAOC,GAAG,OAAMV,SAAA,CAC/EC,EAAA,OAAA,CAAMU,OAAO,KAAKC,UAAU,qBAC5BX,EAAA,OAAA,CAAMU,OAAO,OAAOC,UAAW,IAAGnC,EAAgB,mBAAqB,yBAIzEsB,EAAA,iBAAA,CAAgBO,GAAIR,EAAwBS,GAAG,KAAKC,GAAG,MAAMC,GAAG,OAAOC,GAAG,OAAMV,SAAA,CAC9EC,EAAA,OAAA,CAAMU,OAAO,KAAKC,UAAU,2BAC5BX,UACEU,OAAO,OACPC,UAAW,IAAGnC,EAAgB,yBAA2B,oCAMjEwB,EAAClC,EAAsB,CACrBM,WAAYiB,EACZJ,KAAMO,EACNtB,QAASA,EACTiB,MAAOA,EAAK,aACAD,GAAQ,UAAS,gBACF,gBAAZhB,EAA4BiB,OAAQyB,kBACxB,gBAAZ1C,EAA4B,OAAI0C,EAAS,gBAC7B,gBAAZ1C,EAA4B,SAAM0C,KAC7CxB,IAGLF,GACCc,EAACa,EAAU,CAAC3C,QAAQ,UAAU4C,MAAM,iBAAgB,YAAW,SAAQf,SACpEb"}

package/dist/components/atoms/DatePicker/CalendarHeader.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material/IconButton"),r=require("@mui/material/Typography"),i=require("../../../icons/ArrowLeft02/index.cjs.js"),s=require("../../../icons/ArrowRight02/index.cjs.js"),n=require("@mui/material/styles"),a=require("@mui/material/styles/useTheme"),l=require("moment");const o=n.styled("div")((({theme:e})=>({display:"flex",justifyContent:"space-between",alignItems:"center",padding:`${e.spacing(2)} ${e.spacing(1.5)} ${e.spacing(0)} ${e.spacing(1.5)} `}))),c=n.styled(t)({width:"48px",height:"48px"});exports.CalendarHeader=t=>{const n=a(),{currentMonth:m,onMonthChange:d}=t,u=m.isAfter(l().subtract(10,"years")),h=m.isBefore(l().add(10,"years"));return e.jsxs(o,{children:[e.jsx(c,{"aria-label":"Previous month",disabled:!u,onClick:()=>d(m.clone().subtract(1,"month"),"right"),size:"small",title:"Previous month",children:e.jsx(i,{})}),e.jsx(r,{color:n.palette.semantic.text["text-strong"],variant:"h4Strong",children:m.format("MMMM YYYY")}),e.jsx(c,{"aria-label":"Next month",disabled:!h,onClick:()=>d(m.clone().add(1,"month"),"left"),size:"small",title:"Next month",children:e.jsx(s,{})})]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material/IconButton"),r=require("@mui/material/Typography"),i=require("../../../icons/ArrowLeft02/index.cjs.js"),s=require("../../../icons/ArrowRight02/index.cjs.js"),n=require("@mui/material/styles"),a=require("@mui/material/styles/useTheme"),l=require("moment");const o=n.styled("div")(({theme:e})=>({display:"flex",justifyContent:"space-between",alignItems:"center",padding:`${e.spacing(2)} ${e.spacing(1.5)} ${e.spacing(0)} ${e.spacing(1.5)} `})),c=n.styled(t)({width:"48px",height:"48px"});exports.CalendarHeader=t=>{const n=a(),{currentMonth:m,onMonthChange:d}=t,u=m.isAfter(l().subtract(10,"years")),h=m.isBefore(l().add(10,"years"));return e.jsxs(o,{children:[e.jsx(c,{"aria-label":"Previous month",disabled:!u,onClick:()=>d(m.clone().subtract(1,"month"),"right"),size:"small",title:"Previous month",children:e.jsx(i,{})}),e.jsx(r,{color:n.palette.semantic.text["text-strong"],variant:"h4Strong",children:m.format("MMMM YYYY")}),e.jsx(c,{"aria-label":"Next month",disabled:!h,onClick:()=>d(m.clone().add(1,"month"),"left"),size:"small",title:"Next month",children:e.jsx(s,{})})]})};
 //# sourceMappingURL=CalendarHeader.cjs.js.map

package/dist/components/atoms/DatePicker/CalendarHeader.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarHeader.cjs.js","sources":["../../../../src/components/atoms/DatePicker/CalendarHeader.tsx"],"sourcesContent":["import IconButton from '@mui/material/IconButton';\nimport type { PickersCalendarHeaderProps } from \"@mui/x-date-pickers\";\n\nimport Typography from '@fd/components/atoms/Typography';\nimport ArrowLeft02 from \"@fd/icons/ArrowLeft02\";\nimport ArrowRight02 from \"@fd/icons/ArrowRight02\";\nimport styled from '@fd/utilities/styledUtilities'\nimport useTheme from '@fd/utilities/useTheme'\nimport moment, { type Moment } from \"moment\";\n\nconst CustomCalendarHeaderRoot = styled('div')(({ theme }) => ({\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: `${theme.spacing(2)} ${theme.spacing(1.5)} ${theme.spacing(0)} ${theme.spacing(1.5)} `,\n}));\n\nconst StyledIconButton = styled(IconButton)({\n width: '48px',\n height: '48px',\n});\n\nexport const CalendarHeader: React.ElementType<PickersCalendarHeaderProps<Moment>> = (props: PickersCalendarHeaderProps<Moment>): JSX.Element => {\n const theme = useTheme();\n const { currentMonth, onMonthChange } = props;\n\n const selectNextMonth = (): void => onMonthChange(currentMonth.clone().add(1, 'month'), 'left');\n const selectPreviousMonth = (): void => onMonthChange(currentMonth.clone().subtract(1, 'month'), 'right');\n\n const canGoBack = currentMonth.isAfter(moment().subtract(10, 'years'));\n const canGoForward = currentMonth.isBefore(moment().add(10, 'years'));\n\n return (\n <CustomCalendarHeaderRoot>\n <StyledIconButton\n aria-label=\"Previous month\"\n disabled={!canGoBack}\n onClick={selectPreviousMonth}\n size=\"small\"\n title=\"Previous month\"\n >\n <ArrowLeft02 />\n </StyledIconButton>\n <Typography color={theme.palette.semantic.text['text-strong']} variant=\"h4Strong\">\n {currentMonth.format('MMMM YYYY')}\n </Typography>\n <StyledIconButton\n aria-label=\"Next month\"\n disabled={!canGoForward}\n onClick={selectNextMonth}\n size=\"small\"\n title=\"Next month\"\n >\n <ArrowRight02 />\n </StyledIconButton>\n </CustomCalendarHeaderRoot>\n );\n};"],"names":["CustomCalendarHeaderRoot","styled","theme","display","justifyContent","alignItems","padding","spacing","StyledIconButton","IconButton","width","height","props","useTheme","currentMonth","onMonthChange","canGoBack","isAfter","moment","subtract","canGoForward","isBefore","add","_jsxs","_jsx","disabled","onClick","clone","size","title","ArrowLeft02","Typography","color","palette","semantic","text","variant","children","format","ArrowRight02"],"mappings":"wUAUA,MAAMA,EAA2BC,EAAAA,OAAO,MAAPA,~~EAAc~~,EAAGC,YAAO,~~CACrDC~~,QAAS,OACTC,eAAgB,gBAChBC,WAAY,SACZC,QAAS,GAAGJ,EAAMK,QAAQ,MAAML,EAAMK,QAAQ,QAAQL,EAAMK,QAAQ,MAAML,EAAMK,QAAQ,~~YAGtFC~~,EAAmBP,EAAAA,OAAOQ,EAAPR,CAAmB,~~CACxCS~~,MAAO,OACPC,OAAQ,~~gCAG0EC~~,~~IAClF~~,MAAMV,EAAQW,KACRC,aAAEA,EAAYC,cAAEA,GAAkBH,EAKlCI,EAAYF,EAAaG,QAAQC,IAASC,SAAS,GAAI,UACvDC,EAAeN,EAAaO,SAASH,IAASI,IAAI,GAAI,UAE5D,~~OACIC~~,EAAAA,KAACvB,~~aACGwB~~,EAAAA,IAAChB,~~gBACc~~,iBACXiB,UAAWT,EACXU,~~QAVgB~~,IAAYX,EAAcD,EAAaa,QAAQR,SAAS,EAAG,SAAU,~~SAWrFS~~,KAAK,QACLC,MAAM,0BAENL,EAAAA,IAACM,~~QAELN~~,EAAAA,IAACO,EAAU,CAACC,MAAO9B,EAAM+B,QAAQC,SAASC,KAAK,eAAgBC,QAAQ,WAAUC,~~SAC5EvB~~,EAAawB,OAAO,~~eAEzBd~~,EAAAA,IAAChB,EAAgB,CAAA,~~aACF~~,aACXiB,UAAWL,EACXM,~~QAvBY~~,IAAYX,EAAcD,EAAaa,QAAQL,IAAI,EAAG,SAAU,~~QAwB5EM~~,KAAK,QACLC,MAAM,sBAENL,EAAAA,IAACe"}
1	+ {"version":3,"file":"CalendarHeader.cjs.js","sources":["../../../../src/components/atoms/DatePicker/CalendarHeader.tsx"],"sourcesContent":["import IconButton from '@mui/material/IconButton';\nimport type { PickersCalendarHeaderProps } from '@mui/x-date-pickers';\n\nimport Typography from '@fd/components/atoms/Typography';\nimport ArrowLeft02 from '@fd/icons/ArrowLeft02';\nimport ArrowRight02 from '@fd/icons/ArrowRight02';\nimport styled from '@fd/utilities/styledUtilities';\nimport useTheme from '@fd/utilities/useTheme';\nimport moment, { type Moment } from 'moment';\n\nconst CustomCalendarHeaderRoot = styled('div')(({ theme }) => ({\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: `${theme.spacing(2)} ${theme.spacing(1.5)} ${theme.spacing(0)} ${theme.spacing(1.5)} `,\n}));\n\nconst StyledIconButton = styled(IconButton)({\n width: '48px',\n height: '48px',\n});\n\nexport const CalendarHeader: React.ElementType<PickersCalendarHeaderProps<Moment>> = (\n props: PickersCalendarHeaderProps<Moment>,\n): JSX.Element => {\n const theme = useTheme();\n const { currentMonth, onMonthChange } = props;\n\n const selectNextMonth = (): void => onMonthChange(currentMonth.clone().add(1, 'month'), 'left');\n const selectPreviousMonth = (): void => onMonthChange(currentMonth.clone().subtract(1, 'month'), 'right');\n\n const canGoBack = currentMonth.isAfter(moment().subtract(10, 'years'));\n const canGoForward = currentMonth.isBefore(moment().add(10, 'years'));\n\n return (\n <CustomCalendarHeaderRoot>\n <StyledIconButton\n aria-label=\"Previous month\"\n disabled={!canGoBack}\n onClick={selectPreviousMonth}\n size=\"small\"\n title=\"Previous month\"\n >\n <ArrowLeft02 />\n </StyledIconButton>\n <Typography color={theme.palette.semantic.text['text-strong']} variant=\"h4Strong\">\n {currentMonth.format('MMMM YYYY')}\n </Typography>\n <StyledIconButton\n aria-label=\"Next month\"\n disabled={!canGoForward}\n onClick={selectNextMonth}\n size=\"small\"\n title=\"Next month\"\n >\n <ArrowRight02 />\n </StyledIconButton>\n </CustomCalendarHeaderRoot>\n );\n};\n"],"names":["CustomCalendarHeaderRoot","styled","theme","display","justifyContent","alignItems","padding","spacing","StyledIconButton","IconButton","width","height","props","useTheme","currentMonth","onMonthChange","canGoBack","isAfter","moment","subtract","canGoForward","isBefore","add","_jsxs","_jsx","disabled","onClick","clone","size","title","ArrowLeft02","Typography","color","palette","semantic","text","variant","children","format","ArrowRight02"],"mappings":"wUAUA,MAAMA,EAA2BC,EAAAA,OAAO,MAAPA,CAAc,EAAGC,YAAO,CACvDC,QAAS,OACTC,eAAgB,gBAChBC,WAAY,SACZC,QAAS,GAAGJ,EAAMK,QAAQ,MAAML,EAAMK,QAAQ,QAAQL,EAAMK,QAAQ,MAAML,EAAMK,QAAQ,WAGpFC,EAAmBP,EAAAA,OAAOQ,EAAPR,CAAmB,CAC1CS,MAAO,OACPC,OAAQ,gCAIRC,IAEA,MAAMV,EAAQW,KACRC,aAAEA,EAAYC,cAAEA,GAAkBH,EAKlCI,EAAYF,EAAaG,QAAQC,IAASC,SAAS,GAAI,UACvDC,EAAeN,EAAaO,SAASH,IAASI,IAAI,GAAI,UAE5D,OACEC,EAAAA,KAACvB,aACCwB,EAAAA,IAAChB,gBACY,iBACXiB,UAAWT,EACXU,QAVsB,IAAYX,EAAcD,EAAaa,QAAQR,SAAS,EAAG,SAAU,SAW3FS,KAAK,QACLC,MAAM,0BAENL,EAAAA,IAACM,QAEHN,EAAAA,IAACO,EAAU,CAACC,MAAO9B,EAAM+B,QAAQC,SAASC,KAAK,eAAgBC,QAAQ,WAAUC,SAC9EvB,EAAawB,OAAO,eAEvBd,EAAAA,IAAChB,EAAgB,CAAA,aACJ,aACXiB,UAAWL,EACXM,QAvBkB,IAAYX,EAAcD,EAAaa,QAAQL,IAAI,EAAG,SAAU,QAwBlFM,KAAK,QACLC,MAAM,sBAENL,EAAAA,IAACe"}

package/dist/components/atoms/DatePicker/CalendarHeader.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import i from"@mui/material/IconButton";import r from"@mui/material/Typography";import o from"../../../icons/ArrowLeft02/index.js";import n from"../../../icons/ArrowRight02/index.js";import{styled as a}from"@mui/material/styles";import m from"@mui/material/styles/useTheme";import s from"moment";const l=a("div")((({theme:t})=>({display:"flex",justifyContent:"space-between",alignItems:"center",padding:`${t.spacing(2)} ${t.spacing(1.5)} ${t.spacing(0)} ${t.spacing(1.5)} `}))),c=a(i)({width:"48px",height:"48px"}),h=i=>{const a=m(),{currentMonth:h,onMonthChange:p}=i,d=h.isAfter(s().subtract(10,"years")),f=h.isBefore(s().add(10,"years"));return t(l,{children:[e(c,{"aria-label":"Previous month",disabled:!d,onClick:()=>p(h.clone().subtract(1,"month"),"right"),size:"small",title:"Previous month",children:e(o,{})}),e(r,{color:a.palette.semantic.text["text-strong"],variant:"h4Strong",children:h.format("MMMM YYYY")}),e(c,{"aria-label":"Next month",disabled:!f,onClick:()=>p(h.clone().add(1,"month"),"left"),size:"small",title:"Next month",children:e(n,{})})]})};export{h as CalendarHeader};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import i from"@mui/material/IconButton";import r from"@mui/material/Typography";import o from"../../../icons/ArrowLeft02/index.js";import n from"../../../icons/ArrowRight02/index.js";import{styled as a}from"@mui/material/styles";import m from"@mui/material/styles/useTheme";import s from"moment";const l=a("div")(({theme:t})=>({display:"flex",justifyContent:"space-between",alignItems:"center",padding:`${t.spacing(2)} ${t.spacing(1.5)} ${t.spacing(0)} ${t.spacing(1.5)} `})),c=a(i)({width:"48px",height:"48px"}),h=i=>{const a=m(),{currentMonth:h,onMonthChange:p}=i,d=h.isAfter(s().subtract(10,"years")),f=h.isBefore(s().add(10,"years"));return t(l,{children:[e(c,{"aria-label":"Previous month",disabled:!d,onClick:()=>p(h.clone().subtract(1,"month"),"right"),size:"small",title:"Previous month",children:e(o,{})}),e(r,{color:a.palette.semantic.text["text-strong"],variant:"h4Strong",children:h.format("MMMM YYYY")}),e(c,{"aria-label":"Next month",disabled:!f,onClick:()=>p(h.clone().add(1,"month"),"left"),size:"small",title:"Next month",children:e(n,{})})]})};export{h as CalendarHeader};
 //# sourceMappingURL=CalendarHeader.js.map

package/dist/components/atoms/DatePicker/CalendarHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarHeader.js","sources":["../../../../src/components/atoms/DatePicker/CalendarHeader.tsx"],"sourcesContent":["import IconButton from '@mui/material/IconButton';\nimport type { PickersCalendarHeaderProps } from \"@mui/x-date-pickers\";\n\nimport Typography from '@fd/components/atoms/Typography';\nimport ArrowLeft02 from \"@fd/icons/ArrowLeft02\";\nimport ArrowRight02 from \"@fd/icons/ArrowRight02\";\nimport styled from '@fd/utilities/styledUtilities'\nimport useTheme from '@fd/utilities/useTheme'\nimport moment, { type Moment } from \"moment\";\n\nconst CustomCalendarHeaderRoot = styled('div')(({ theme }) => ({\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: `${theme.spacing(2)} ${theme.spacing(1.5)} ${theme.spacing(0)} ${theme.spacing(1.5)} `,\n}));\n\nconst StyledIconButton = styled(IconButton)({\n width: '48px',\n height: '48px',\n});\n\nexport const CalendarHeader: React.ElementType<PickersCalendarHeaderProps<Moment>> = (props: PickersCalendarHeaderProps<Moment>): JSX.Element => {\n const theme = useTheme();\n const { currentMonth, onMonthChange } = props;\n\n const selectNextMonth = (): void => onMonthChange(currentMonth.clone().add(1, 'month'), 'left');\n const selectPreviousMonth = (): void => onMonthChange(currentMonth.clone().subtract(1, 'month'), 'right');\n\n const canGoBack = currentMonth.isAfter(moment().subtract(10, 'years'));\n const canGoForward = currentMonth.isBefore(moment().add(10, 'years'));\n\n return (\n <CustomCalendarHeaderRoot>\n <StyledIconButton\n aria-label=\"Previous month\"\n disabled={!canGoBack}\n onClick={selectPreviousMonth}\n size=\"small\"\n title=\"Previous month\"\n >\n <ArrowLeft02 />\n </StyledIconButton>\n <Typography color={theme.palette.semantic.text['text-strong']} variant=\"h4Strong\">\n {currentMonth.format('MMMM YYYY')}\n </Typography>\n <StyledIconButton\n aria-label=\"Next month\"\n disabled={!canGoForward}\n onClick={selectNextMonth}\n size=\"small\"\n title=\"Next month\"\n >\n <ArrowRight02 />\n </StyledIconButton>\n </CustomCalendarHeaderRoot>\n );\n};"],"names":["CustomCalendarHeaderRoot","styled","theme","display","justifyContent","alignItems","padding","spacing","StyledIconButton","IconButton","width","height","CalendarHeader","props","useTheme","currentMonth","onMonthChange","canGoBack","isAfter","moment","subtract","canGoForward","isBefore","add","_jsxs","_jsx","disabled","onClick","clone","size","title","ArrowLeft02","Typography","color","palette","semantic","text","variant","children","format","ArrowRight02"],"mappings":"0VAUA,MAAMA,EAA2BC,EAAO,MAAPA,~~EAAc~~,EAAGC,YAAO,~~CACrDC~~,QAAS,OACTC,eAAgB,gBAChBC,WAAY,SACZC,QAAS,GAAGJ,EAAMK,QAAQ,MAAML,EAAMK,QAAQ,QAAQL,EAAMK,QAAQ,MAAML,EAAMK,QAAQ,~~YAGtFC~~,EAAmBP,EAAOQ,EAAPR,CAAmB,~~CACxCS~~,MAAO,OACPC,OAAQ,~~SAGCC~~,~~EAAyEC~~,~~IAClF~~,MAAMX,EAAQY,KACRC,aAAEA,EAAYC,cAAEA,GAAkBH,EAKlCI,EAAYF,EAAaG,QAAQC,IAASC,SAAS,GAAI,UACvDC,EAAeN,EAAaO,SAASH,IAASI,IAAI,GAAI,UAE5D,~~OACIC~~,EAACxB,~~aACGyB~~,EAACjB,~~gBACc~~,iBACXkB,UAAWT,EACXU,~~QAVgB~~,IAAYX,EAAcD,EAAaa,QAAQR,SAAS,EAAG,SAAU,~~SAWrFS~~,KAAK,QACLC,MAAM,0BAENL,EAACM,~~QAELN~~,EAACO,EAAU,CAACC,MAAO/B,EAAMgC,QAAQC,SAASC,KAAK,eAAgBC,QAAQ,WAAUC,~~SAC5EvB~~,EAAawB,OAAO,~~eAEzBd~~,EAACjB,EAAgB,CAAA,~~aACF~~,aACXkB,UAAWL,EACXM,~~QAvBY~~,IAAYX,EAAcD,EAAaa,QAAQL,IAAI,EAAG,SAAU,~~QAwB5EM~~,KAAK,QACLC,MAAM,sBAENL,EAACe"}
1	+ {"version":3,"file":"CalendarHeader.js","sources":["../../../../src/components/atoms/DatePicker/CalendarHeader.tsx"],"sourcesContent":["import IconButton from '@mui/material/IconButton';\nimport type { PickersCalendarHeaderProps } from '@mui/x-date-pickers';\n\nimport Typography from '@fd/components/atoms/Typography';\nimport ArrowLeft02 from '@fd/icons/ArrowLeft02';\nimport ArrowRight02 from '@fd/icons/ArrowRight02';\nimport styled from '@fd/utilities/styledUtilities';\nimport useTheme from '@fd/utilities/useTheme';\nimport moment, { type Moment } from 'moment';\n\nconst CustomCalendarHeaderRoot = styled('div')(({ theme }) => ({\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: `${theme.spacing(2)} ${theme.spacing(1.5)} ${theme.spacing(0)} ${theme.spacing(1.5)} `,\n}));\n\nconst StyledIconButton = styled(IconButton)({\n width: '48px',\n height: '48px',\n});\n\nexport const CalendarHeader: React.ElementType<PickersCalendarHeaderProps<Moment>> = (\n props: PickersCalendarHeaderProps<Moment>,\n): JSX.Element => {\n const theme = useTheme();\n const { currentMonth, onMonthChange } = props;\n\n const selectNextMonth = (): void => onMonthChange(currentMonth.clone().add(1, 'month'), 'left');\n const selectPreviousMonth = (): void => onMonthChange(currentMonth.clone().subtract(1, 'month'), 'right');\n\n const canGoBack = currentMonth.isAfter(moment().subtract(10, 'years'));\n const canGoForward = currentMonth.isBefore(moment().add(10, 'years'));\n\n return (\n <CustomCalendarHeaderRoot>\n <StyledIconButton\n aria-label=\"Previous month\"\n disabled={!canGoBack}\n onClick={selectPreviousMonth}\n size=\"small\"\n title=\"Previous month\"\n >\n <ArrowLeft02 />\n </StyledIconButton>\n <Typography color={theme.palette.semantic.text['text-strong']} variant=\"h4Strong\">\n {currentMonth.format('MMMM YYYY')}\n </Typography>\n <StyledIconButton\n aria-label=\"Next month\"\n disabled={!canGoForward}\n onClick={selectNextMonth}\n size=\"small\"\n title=\"Next month\"\n >\n <ArrowRight02 />\n </StyledIconButton>\n </CustomCalendarHeaderRoot>\n );\n};\n"],"names":["CustomCalendarHeaderRoot","styled","theme","display","justifyContent","alignItems","padding","spacing","StyledIconButton","IconButton","width","height","CalendarHeader","props","useTheme","currentMonth","onMonthChange","canGoBack","isAfter","moment","subtract","canGoForward","isBefore","add","_jsxs","_jsx","disabled","onClick","clone","size","title","ArrowLeft02","Typography","color","palette","semantic","text","variant","children","format","ArrowRight02"],"mappings":"0VAUA,MAAMA,EAA2BC,EAAO,MAAPA,CAAc,EAAGC,YAAO,CACvDC,QAAS,OACTC,eAAgB,gBAChBC,WAAY,SACZC,QAAS,GAAGJ,EAAMK,QAAQ,MAAML,EAAMK,QAAQ,QAAQL,EAAMK,QAAQ,MAAML,EAAMK,QAAQ,WAGpFC,EAAmBP,EAAOQ,EAAPR,CAAmB,CAC1CS,MAAO,OACPC,OAAQ,SAGGC,EACXC,IAEA,MAAMX,EAAQY,KACRC,aAAEA,EAAYC,cAAEA,GAAkBH,EAKlCI,EAAYF,EAAaG,QAAQC,IAASC,SAAS,GAAI,UACvDC,EAAeN,EAAaO,SAASH,IAASI,IAAI,GAAI,UAE5D,OACEC,EAACxB,aACCyB,EAACjB,gBACY,iBACXkB,UAAWT,EACXU,QAVsB,IAAYX,EAAcD,EAAaa,QAAQR,SAAS,EAAG,SAAU,SAW3FS,KAAK,QACLC,MAAM,0BAENL,EAACM,QAEHN,EAACO,EAAU,CAACC,MAAO/B,EAAMgC,QAAQC,SAASC,KAAK,eAAgBC,QAAQ,WAAUC,SAC9EvB,EAAawB,OAAO,eAEvBd,EAACjB,EAAgB,CAAA,aACJ,aACXkB,UAAWL,EACXM,QAvBkB,IAAYX,EAAcD,EAAaa,QAAQL,IAAI,EAAG,SAAU,QAwBlFM,KAAK,QACLC,MAAM,sBAENL,EAACe"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/FormHelperText"),i=require("@mui/material/InputLabel"),t=require("@mui/material/styles"),a=require("@mui/x-date-pickers"),s=require("@mui/x-date-pickers/AdapterMoment"),o=require("@mui/material/Box"),d=require("@mui/material/Typography"),l=require("../../../icons/Calendar02/index.cjs.js"),n=require("../../../icons/CancelCircle/index.cjs.js"),u=require("../../../providers/DateTimeLocalizationProvider.cjs.js"),c=require("@mui/material/styles/useTheme"),p=require("./CalendarHeader.cjs.js");const m=t.styled(o,{shouldForwardProp:e=>"fullWidth"!==e})((({fullWidth:e=!1})=>({width:e?"100%":"auto"}))),x=({fullWidth:t=!1,label:s="",helperText:u="(dd/mm/yyyy)",errorText:x="",disabled:h=!1,required:b=!1,format:f="DD/MM/YYYY",fdKey:j,optionalText:y,...g})=>{const k=c(),q=u?`${j}-helper-text`:void 0,P=x?`${j}-error-message`:void 0,T=!!x&&!h;return e.jsxs(m,{fullWidth:t,children:[e.jsxs(o,{mb:k.spacing(.5),children:[s&&e.jsxs(i,{disabled:h,htmlFor:j,required:b,children:[s," ",y&&e.jsx(d,{variant:"captionWeak",children:y})]}),u&&e.jsx(r,{disabled:h,id:q,children:u})]}),e.jsx(o,{mb:k.spacing(.5),children:T&&e.jsxs(r,{error:!0,id:P,children:[e.jsx(n,{}),x]})}),e.jsx(a.DesktopDatePicker,{dayOfWeekFormatter:e=>{const r=e.format("dd");return{Su:"Su",Mo:"Mo",Tu:"Tu",We:"We",Th:"Th",Fr:"Fr",Sa:"Sa"}[r]||r},disabled:h,format:f,slotProps:{...g.slotProps,textField:{id:j,"aria-describedby":[q,P].filter(Boolean).join(" "),error:T,...g.slotProps?.textField},day:{disableRipple:!0,sx:{borderRadius:k.radius["radius-8"],"&.Mui-selected":{backgroundColor:k.palette.semantic.fill["fill-selected"],"&.MuiPickersDay-today":{border:"none","&::after":{content:'""',position:"absolute",bottom:"2px",left:"50%",transform:"translateX(-50%)",width:"6px",height:"6px",borderRadius:"50%",backgroundColor:k.palette.semantic.fill["fill-inverse-strong"]}}},"&.MuiPickersDay-today":{border:"none","&::after":{content:'""',position:"absolute",bottom:"2px",left:"50%",transform:"translateX(-50%)",width:"6px",height:"6px",borderRadius:"50%",backgroundColor:k.palette.semantic.fill["fill-selected"]}}},...g.slotProps?.day},desktopPaper:{sx:{borderRadius:k.radius["radius-8"],boxShadow:k.customShadows?.overlay,marginTop:k.spacing(1),"& .MuiDayCalendar-header":{borderBottom:`1px solid ${k.palette.semantic.stroke["stroke-weak"]}`,marginLeft:k.spacing(1),marginRight:k.spacing(1)}},...g.slotProps?.desktopPaper}},slots:{openPickerIcon:()=>e.jsx(l,{color:k.palette.semantic.icon["icon-strong"]}),calendarHeader:p.CalendarHeader,...g.slots},sx:{width:t?"100%":"auto",...g.sx},...g})]})};module.exports=r=>e.jsx(u,{dateAdapter:s.AdapterMoment,children:e.jsx(x,{...r})});
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/FormHelperText"),i=require("@mui/material/InputLabel"),t=require("@mui/material/styles"),a=require("@mui/x-date-pickers"),s=require("@mui/x-date-pickers/AdapterMoment"),o=require("@mui/material/Box"),d=require("@mui/material/Typography"),l=require("../../../icons/Calendar02/index.cjs.js"),n=require("../../../icons/CancelCircle/index.cjs.js"),u=require("../../../providers/DateTimeLocalizationProvider.cjs.js"),c=require("@mui/material/styles/useTheme"),p=require("./CalendarHeader.cjs.js");const m=t.styled(o,{shouldForwardProp:e=>"fullWidth"!==e})(({fullWidth:e=!1})=>({width:e?"100%":"auto"})),x=({fullWidth:t=!1,label:s="",helperText:u="(dd/mm/yyyy)",errorText:x="",disabled:h=!1,required:b=!1,format:f="DD/MM/YYYY",fdKey:j,optionalText:y,...g})=>{const k=c(),q=u?`${j}-helper-text`:void 0,P=x?`${j}-error-message`:void 0,T=!!x&&!h;return e.jsxs(m,{fullWidth:t,children:[e.jsxs(o,{mb:k.spacing(.5),children:[s&&e.jsxs(i,{disabled:h,htmlFor:j,required:b,children:[s," ",y&&e.jsx(d,{variant:"captionWeak",children:y})]}),u&&e.jsx(r,{disabled:h,id:q,children:u})]}),e.jsx(o,{mb:k.spacing(.5),children:T&&e.jsxs(r,{error:!0,id:P,children:[e.jsx(n,{}),x]})}),e.jsx(a.DesktopDatePicker,{dayOfWeekFormatter:e=>{const r=e.format("dd");return{Su:"Su",Mo:"Mo",Tu:"Tu",We:"We",Th:"Th",Fr:"Fr",Sa:"Sa"}[r]||r},disabled:h,format:f,slotProps:{...g.slotProps,textField:{id:j,"aria-describedby":[q,P].filter(Boolean).join(" "),error:T,...g.slotProps?.textField},day:{disableRipple:!0,sx:{borderRadius:k.radius["radius-8"],"&.Mui-selected":{backgroundColor:k.palette.semantic.fill["fill-selected"],"&.MuiPickersDay-today":{border:"none","&::after":{content:'""',position:"absolute",bottom:"2px",left:"50%",transform:"translateX(-50%)",width:"6px",height:"6px",borderRadius:"50%",backgroundColor:k.palette.semantic.fill["fill-inverse-strong"]}}},"&.MuiPickersDay-today":{border:"none","&::after":{content:'""',position:"absolute",bottom:"2px",left:"50%",transform:"translateX(-50%)",width:"6px",height:"6px",borderRadius:"50%",backgroundColor:k.palette.semantic.fill["fill-selected"]}}},...g.slotProps?.day},desktopPaper:{sx:{borderRadius:k.radius["radius-8"],boxShadow:k.customShadows?.overlay,marginTop:k.spacing(1),"& .MuiDayCalendar-header":{borderBottom:`1px solid ${k.palette.semantic.stroke["stroke-weak"]}`,marginLeft:k.spacing(1),marginRight:k.spacing(1)}},...g.slotProps?.desktopPaper}},slots:{openPickerIcon:()=>e.jsx(l,{color:k.palette.semantic.icon["icon-strong"]}),calendarHeader:p.CalendarHeader,...g.slots},sx:{width:t?"100%":"auto",...g.sx},...g})]})};module.exports=r=>e.jsx(u,{dateAdapter:s.AdapterMoment,children:e.jsx(x,{...r})});
 //# sourceMappingURL=index.cjs.js.map