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

@flipdish/portal-library 6.0.0 → 6.0.2

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

Files changed (236) hide show

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

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

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

@@ -1,2 +1,23 @@
-import Card from '@mui/material/Card';
-export { default } from '@mui/material/Card';
+import Badge from '../Badge/index.js';
+import IconContainer from '../IconContainer/index.js';
+interface CardProps {
+    fdKey?: string;
+    heading: string;
+    content: string;
+    imageSrc?: string;
+    icon?: React.ReactElement<typeof IconContainer>;
+    badge?: React.ReactElement<typeof Badge>;
+    link?: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    };
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    type?: 'horizontal' | 'vertical';
+}
+declare const Card: ({ fdKey, heading, content, imageSrc, icon, badge, link, onMouseEnter, onMouseLeave, type, ...rest }: CardProps) => React.ReactElement;
+export { Card as default };
+export type { CardProps };

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

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

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

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

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

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

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

@@ -1,2 +1,11 @@
-import Checkbox from '@mui/material/Checkbox';
-export { default } from '@mui/material/Checkbox';
+import { CheckboxProps as CheckboxProps$1 } from '@mui/material/Checkbox';
+interface CheckboxProps extends Omit<CheckboxProps$1, 'size'> {
+    fdKey: string;
+    label: string;
+    size?: 'medium' | 'small';
+    valid?: boolean;
+}
+declare const Checkbox: ({ fdKey, label, size, valid, disabled, ...props }: CheckboxProps) => JSX.Element;
+export { Checkbox as default };

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

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

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

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

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

@@ -1,2 +1,2 @@
-"use strict";var r=require("@mui/material/CircularProgress");module.exports=r;
+"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":[],"sourcesContent":[],"names":[],"mappings":""}
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, { type CircularProgressProps as MuiCircularProgressProps } 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 /\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, { shouldForwardProp: (prop) => prop !== 'gradientId' })\n <{ gradientId: string }>(({ variant, theme, gradientId }) =>\n {\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{\n const uniqueId = useId().replace(/:/g, '');\n const isDeterminate = variant === 'determinate';\n const sizeInPixels = SIZE_MAP[size];\n\n if (isDeterminate)\n {\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 offset=\"100%\" stopColor={`${isDeterminate ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, 0)'}`} />\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\n variant=\"caption\"\n color=\"text.secondary\"\n aria-live=\"polite\"\n >\n {text}\n </Typography>\n )}\n </ProgressWrapper>\n );\n};\n\nexport default CircularProgress;"],"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":"6QAwBA,MAAMA,EAAiD,CACnDC,MAAO,GACPC,OAAQ,GACRC,MAAO,IA0BLC,EAAkBC,EAAAA,OAAOC,EAAPD,CAAY,CAChCE,QAAS,cACTC,cAAe,SACfC,WAAY,SACZC,IAAK,IAGHC,EAAyBN,EAAAA,OAAOO,EAAqB,CAAEC,kBAAoBC,GAAkB,eAATA,GAA3DT,EACF,EAAGU,UAASC,QAAOC,iBAExC,MAAMC,EAAgC,SAAvBF,EAAMG,QAAQC,KACvBC,EAA4B,gBAAZN,EAGtB,MAAO,CACH,6BAA8B,CAC1BO,UAAW,IAAGD,EAAgB,OAAS,wCACvCE,OAAQL,EACF,oDACA,+CAEV,gCAAiC,CAC7BM,OAAQ,QAVW,GAAGP,KAAcC,EAAS,OAAS,WAAWG,EAAgB,cAAgB,qBAWjGI,cAAe,QACfC,gBAAiB,WACjBC,iBAAkB,EAClBL,UAAW,QAEf,6BAA8B,CAC1B,KAAM,CACFM,UAAW,gBAEf,OAAQ,CACJA,UAAW,uBAWlBC,EAAoD,EAC7DC,OAAO,SACPC,OACAC,QACAjB,UAAU,mBACPkB,MAGH,MAAMC,EAAWC,EAAAA,QAAQC,QAAQ,KAAM,IACjCf,EAA4B,gBAAZN,EAChBsB,EAAerC,EAAS8B,GAE1BT,IAGAW,EAAQM,KAAKC,IAAI,IAAKD,KAAKE,IAAI,EAAGC,OAAOT,IAAU,KAIvD,MAAMU,EAA0B,GAAGR,WAAkBb,EAAgB,cAAgB,kBAC/EsB,EAAyB,GAAGT,UAAiBb,EAAgB,cAAgB,kBAEnF,OACIuB,EAAAA,KAACxC,EAAe,CAAAyC,SAAA,CAEZC,EAAAA,WAAKC,MAAM,IAAIC,OAAO,IAAIC,MAAO,CAAEC,SAAU,YAAYL,SACrDD,EAAAA,KAAA,OAAA,CAAAC,SAAA,CAEID,EAAAA,KAAA,iBAAA,CAAgBO,GAAIT,EAAyBU,GAAG,KAAKC,GAAG,MAAMC,GAAG,OAAOC,GAAG,OAAMV,SAAA,CAC7EC,EAAAA,IAAA,OAAA,CAAMU,OAAO,KAAKC,UAAU,qBAC5BX,EAAAA,IAAA,OAAA,CAAMU,OAAO,OAAOC,UAAW,IAAGpC,EAAgB,mBAAqB,yBAI3EuB,EAAAA,KAAA,iBAAA,CAAgBO,GAAIR,EAAwBS,GAAG,KAAKC,GAAG,MAAMC,GAAG,OAAOC,GAAG,OAAMV,SAAA,CAC5EC,EAAAA,IAAA,OAAA,CAAMU,OAAO,KAAKC,UAAU,2BAC5BX,EAAAA,YAAMU,OAAO,OAAOC,UAAW,IAAGpC,EAAgB,yBAA2B,oCAKzFyB,EAAAA,IAACnC,EAAsB,CACnBM,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,IAGPF,GACGe,EAAAA,IAACa,EAAU,CACP5C,QAAQ,UACR6C,MAAM,iBAAgB,YACZ,SAAQf,SAEjBd"}

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

@@ -1,2 +1,32 @@
-import CircularProgress from '@mui/material/CircularProgress';
-export { default } from '@mui/material/CircularProgress';
+import { CircularProgressProps as CircularProgressProps$1 } from '@mui/material/CircularProgress';
+type CircularProgressSize = 'small' | 'medium' | 'large';
+interface CircularProgressProps extends Omit<CircularProgressProps$1, 'color' | 'size'> {
+    /**
+     * The size of the circular progress
+     * @default 'medium'
+     */
+    size?: CircularProgressSize;
+    /**
+     * Optional text to display below the progress indicator
+     */
+    text?: string;
+    /**
+     * The value of the progress indicator for determinate variant
+     * Value between 0 and 100
+     */
+    value?: number;
+    /**
+     * The variant of the progress indicator
+     * @default 'indeterminate'
+     */
+    variant?: 'determinate' | 'indeterminate';
+}
+/**
+ * CircularProgress component for showing process progress on buttons or UI elements.
+ * Supports light and dark themes with conic gradient styling.
+ */
+declare const CircularProgress: React.FC<CircularProgressProps>;
+export { CircularProgress, CircularProgress as default };
+export type { CircularProgressProps };

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

@@ -1,2 +1,2 @@
-import r from"@mui/material/CircularProgress";export{default}from"@mui/material/CircularProgress";
+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":[],"sourcesContent":[],"names":[],"mappings":""}
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, { type CircularProgressProps as MuiCircularProgressProps } 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 /\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, { shouldForwardProp: (prop) => prop !== 'gradientId' })\n <{ gradientId: string }>(({ variant, theme, gradientId }) =>\n {\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{\n const uniqueId = useId().replace(/:/g, '');\n const isDeterminate = variant === 'determinate';\n const sizeInPixels = SIZE_MAP[size];\n\n if (isDeterminate)\n {\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 offset=\"100%\" stopColor={`${isDeterminate ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, 0)'}`} />\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\n variant=\"caption\"\n color=\"text.secondary\"\n aria-live=\"polite\"\n >\n {text}\n </Typography>\n )}\n </ProgressWrapper>\n );\n};\n\nexport default CircularProgress;"],"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":"qPAwBA,MAAMA,EAAiD,CACnDC,MAAO,GACPC,OAAQ,GACRC,MAAO,IA0BLC,EAAkBC,EAAOC,EAAPD,CAAY,CAChCE,QAAS,cACTC,cAAe,SACfC,WAAY,SACZC,IAAK,IAGHC,EAAyBN,EAAOO,EAAqB,CAAEC,kBAAoBC,GAAkB,eAATA,GAA3DT,EACF,EAAGU,UAASC,QAAOC,iBAExC,MAAMC,EAAgC,SAAvBF,EAAMG,QAAQC,KACvBC,EAA4B,gBAAZN,EAGtB,MAAO,CACH,6BAA8B,CAC1BO,UAAW,IAAGD,EAAgB,OAAS,wCACvCE,OAAQL,EACF,oDACA,+CAEV,gCAAiC,CAC7BM,OAAQ,QAVW,GAAGP,KAAcC,EAAS,OAAS,WAAWG,EAAgB,cAAgB,qBAWjGI,cAAe,QACfC,gBAAiB,WACjBC,iBAAkB,EAClBL,UAAW,QAEf,6BAA8B,CAC1B,KAAM,CACFM,UAAW,gBAEf,OAAQ,CACJA,UAAW,uBAWlBC,EAAoD,EAC7DC,OAAO,SACPC,OACAC,QACAjB,UAAU,mBACPkB,MAGH,MAAMC,EAAWC,IAAQC,QAAQ,KAAM,IACjCf,EAA4B,gBAAZN,EAChBsB,EAAerC,EAAS8B,GAE1BT,IAGAW,EAAQM,KAAKC,IAAI,IAAKD,KAAKE,IAAI,EAAGC,OAAOT,IAAU,KAIvD,MACMU,EAAyB,GAAGR,UAAiBb,EAAgB,cAAgB,kBAEnF,OACIsB,EAACvC,EAAe,CAAAwC,SAAA,CAEZC,SAAKC,MAAM,IAAIC,OAAO,IAAIC,MAAO,CAAEC,SAAU,YAAYL,SACrDD,EAAA,OAAA,CAAAC,SAAA,CAEID,EAAA,iBAAA,CAAgBO,GATA,GAAGhB,WAAkBb,EAAgB,cAAgB,kBASxB8B,GAAG,KAAKC,GAAG,MAAMC,GAAG,OAAOC,GAAG,OAAMV,SAAA,CAC7EC,EAAA,OAAA,CAAMU,OAAO,KAAKC,UAAU,qBAC5BX,EAAA,OAAA,CAAMU,OAAO,OAAOC,UAAW,IAAGnC,EAAgB,mBAAqB,yBAI3EsB,EAAA,iBAAA,CAAgBO,GAAIR,EAAwBS,GAAG,KAAKC,GAAG,MAAMC,GAAG,OAAOC,GAAG,OAAMV,SAAA,CAC5EC,EAAA,OAAA,CAAMU,OAAO,KAAKC,UAAU,2BAC5BX,UAAMU,OAAO,OAAOC,UAAW,IAAGnC,EAAgB,yBAA2B,oCAKzFwB,EAAClC,EAAsB,CACnBM,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,IAGPF,GACGc,EAACa,EAAU,CACP3C,QAAQ,UACR4C,MAAM,iBAAgB,YACZ,SAAQf,SAEjBb"}

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

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

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

@@ -0,0 +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"}

package/dist/components/atoms/DatePicker/CalendarHeader.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { PickersCalendarHeaderProps } from '@mui/x-date-pickers';
+import { Moment } from 'moment';
+declare const CalendarHeader: React.ElementType<PickersCalendarHeaderProps<Moment>>;
+export { CalendarHeader };

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

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

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

@@ -0,0 +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"}

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

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

package/dist/components/atoms/DatePicker/index.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/DatePicker/index.tsx"],"sourcesContent":["import MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport { type DatePickerProps as MuiDatePickerProps,DesktopDatePicker as MuiDatePicker } from '@mui/x-date-pickers';\n\nimport AdapterMoment from '@fd/adapters/Moment';\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport Calendar02Icon from '@fd/icons/Calendar02';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport DateTimeLocalizationProvider from '@fd/providers/DateTimeLocalizationProvider';\nimport useTheme from '@fd/utilities/useTheme';\nimport type { Moment } from 'moment';\n\nimport { CalendarHeader } from './CalendarHeader';\n\ninterface DatePickerProps extends MuiDatePickerProps<Moment> {\n fullWidth?: boolean;\n label?: string;\n helperText?: string;\n errorText?: string;\n disabled?: boolean;\n required?: boolean;\n fdKey: string;\n format?: string;\n optionalText?: string;\n}\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n width: fullWidth ? '100%' : 'auto',\n}));\n\nconst DatePicker: React.FC<DatePickerProps> = ({\n fullWidth = false,\n label = '',\n helperText = '(dd/mm/yyyy)',\n errorText = '',\n disabled = false,\n required = false,\n format = 'DD/MM/YYYY',\n fdKey,\n optionalText,\n ...props\n}) => {\n const theme = useTheme();\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n const isError = !!errorText && !disabled;\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n <Box mb={theme.spacing(0.5)}>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label} {optionalText && <Typography variant=\"captionWeak\">{optionalText}</Typography>}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n </Box>\n <Box mb={theme.spacing(0.5)}>\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n </Box>\n <MuiDatePicker\n dayOfWeekFormatter={(date) => {\n const dayMap: Record<string, string> = {\n 'Su': 'Su',\n 'Mo': 'Mo',\n 'Tu': 'Tu',\n 'We': 'We',\n 'Th': 'Th',\n 'Fr': 'Fr',\n 'Sa': 'Sa'\n };\n const dayAbbr = date.format('dd');\n return dayMap[dayAbbr] || dayAbbr;\n }}\n disabled={disabled}\n format={format}\n slotProps={{\n ...props.slotProps,\n textField: {\n id: fdKey,\n 'aria-describedby': [helperTextId, errorMessageId].filter(Boolean).join(' '),\n error: isError,\n ...props.slotProps?.textField,\n },\n day: {\n disableRipple: true,\n sx: {\n borderRadius: theme.radius['radius-8'],\n '&.Mui-selected': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n '&.MuiPickersDay-today': {\n border: 'none',\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n bottom: '2px',\n left: '50%',\n transform: 'translateX(-50%)',\n width: '6px',\n height: '6px',\n borderRadius: '50%',\n backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n },\n },\n },\n '&.MuiPickersDay-today': {\n border: 'none',\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n bottom: '2px',\n left: '50%',\n transform: 'translateX(-50%)',\n width: '6px',\n height: '6px',\n borderRadius: '50%',\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n },\n },\n },\n ...props.slotProps?.day,\n },\n desktopPaper: {\n sx: {\n borderRadius: theme.radius['radius-8'],\n boxShadow: theme.customShadows?.overlay,\n marginTop: theme.spacing(1),\n '& .MuiDayCalendar-header': {\n borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n marginLeft: theme.spacing(1),\n marginRight: theme.spacing(1),\n },\n },\n ...props.slotProps?.desktopPaper,\n },\n }}\n slots={{\n openPickerIcon: () => <Calendar02Icon color={theme.palette.semantic.icon['icon-strong']}/>,\n calendarHeader: CalendarHeader,\n ...props.slots,\n }}\n sx={{\n width: fullWidth ? '100%' : 'auto',\n ...props.sx,\n }}\n {...props}\n />\n </StyledContainer>\n );\n};\n\nconst DatePickerWithAdapter: React.FC<DatePickerProps> = (props) => {\n return <DateTimeLocalizationProvider dateAdapter={AdapterMoment}><DatePicker {...props} /></DateTimeLocalizationProvider>;\n};\n\nexport default DatePickerWithAdapter;"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","fullWidth","width","DatePicker","label","helperText","errorText","disabled","required","format","fdKey","optionalText","props","theme","useTheme","helperTextId","undefined","errorMessageId","isError","_jsxs","children","mb","spacing","MuiInputLabel","htmlFor","_jsx","Typography","variant","MuiFormHelperText","id","error","CancelCircleIcon","MuiDatePicker","dayOfWeekFormatter","date","dayAbbr","Su","Mo","Tu","We","Th","Fr","Sa","slotProps","textField","filter","Boolean","join","day","disableRipple","sx","borderRadius","radius","backgroundColor","palette","semantic","fill","border","content","position","bottom","left","transform","height","desktopPaper","boxShadow","customShadows","overlay","marginTop","borderBottom","stroke","marginLeft","marginRight","slots","openPickerIcon","Calendar02Icon","color","icon","calendarHeader","CalendarHeader","DateTimeLocalizationProvider","dateAdapter","AdapterMoment"],"mappings":"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"}

package/dist/components/atoms/DatePicker/index.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { DatePickerProps as DatePickerProps$1 } from '@mui/x-date-pickers';
+import { Moment } from 'moment';
+interface DatePickerProps extends DatePickerProps$1<Moment> {
+    fullWidth?: boolean;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    disabled?: boolean;
+    required?: boolean;
+    fdKey: string;
+    format?: string;
+    optionalText?: string;
+}
+declare const DatePickerWithAdapter: React.FC<DatePickerProps>;
+export { DatePickerWithAdapter as default };

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

	@@ -0,0 +1,2 @@
1	+ import{jsx as e,jsxs as r}from"react/jsx-runtime";import o from"@mui/material/FormHelperText";import t from"@mui/material/InputLabel";import{styled as i}from"@mui/material/styles";import{DesktopDatePicker as a}from"@mui/x-date-pickers";import{AdapterMoment as d}from"@mui/x-date-pickers/AdapterMoment";import l from"@mui/material/Box";import s from"@mui/material/Typography";import m from"../../../icons/Calendar02/index.js";import n from"../../../icons/CancelCircle/index.js";import p from"../../../providers/DateTimeLocalizationProvider.js";import c from"@mui/material/styles/useTheme";import{CalendarHeader as u}from"./CalendarHeader.js";const f=i(l,{shouldForwardProp:e=>"fullWidth"!==e})((({fullWidth:e=!1})=>({width:e?"100%":"auto"}))),h=({fullWidth:i=!1,label:d="",helperText:p="(dd/mm/yyyy)",errorText:h="",disabled:b=!1,required:x=!1,format:y="DD/MM/YYYY",fdKey:g,optionalText:k,...P})=>{const T=c(),M=p?`${g}-helper-text`:void 0,w=h?`${g}-error-message`:void 0,C=!!h&&!b;return r(f,{fullWidth:i,children:[r(l,{mb:T.spacing(.5),children:[d&&r(t,{disabled:b,htmlFor:g,required:x,children:[d," ",k&&e(s,{variant:"captionWeak",children:k})]}),p&&e(o,{disabled:b,id:M,children:p})]}),e(l,{mb:T.spacing(.5),children:C&&r(o,{error:!0,id:w,children:[e(n,{}),h]})}),e(a,{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:b,format:y,slotProps:{...P.slotProps,textField:{id:g,"aria-describedby":[M,w].filter(Boolean).join(" "),error:C,...P.slotProps?.textField},day:{disableRipple:!0,sx:{borderRadius:T.radius["radius-8"],"&.Mui-selected":{backgroundColor:T.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:T.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:T.palette.semantic.fill["fill-selected"]}}},...P.slotProps?.day},desktopPaper:{sx:{borderRadius:T.radius["radius-8"],boxShadow:T.customShadows?.overlay,marginTop:T.spacing(1),"& .MuiDayCalendar-header":{borderBottom:`1px solid ${T.palette.semantic.stroke["stroke-weak"]}`,marginLeft:T.spacing(1),marginRight:T.spacing(1)}},...P.slotProps?.desktopPaper}},slots:{openPickerIcon:()=>e(m,{color:T.palette.semantic.icon["icon-strong"]}),calendarHeader:u,...P.slots},sx:{width:i?"100%":"auto",...P.sx},...P})]})},b=r=>e(p,{dateAdapter:d,children:e(h,{...r})});export{b as default};
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/DatePicker/index.tsx"],"sourcesContent":["import MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport { type DatePickerProps as MuiDatePickerProps,DesktopDatePicker as MuiDatePicker } from '@mui/x-date-pickers';\n\nimport AdapterMoment from '@fd/adapters/Moment';\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport Calendar02Icon from '@fd/icons/Calendar02';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport DateTimeLocalizationProvider from '@fd/providers/DateTimeLocalizationProvider';\nimport useTheme from '@fd/utilities/useTheme';\nimport type { Moment } from 'moment';\n\nimport { CalendarHeader } from './CalendarHeader';\n\ninterface DatePickerProps extends MuiDatePickerProps<Moment> {\n fullWidth?: boolean;\n label?: string;\n helperText?: string;\n errorText?: string;\n disabled?: boolean;\n required?: boolean;\n fdKey: string;\n format?: string;\n optionalText?: string;\n}\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n width: fullWidth ? '100%' : 'auto',\n}));\n\nconst DatePicker: React.FC<DatePickerProps> = ({\n fullWidth = false,\n label = '',\n helperText = '(dd/mm/yyyy)',\n errorText = '',\n disabled = false,\n required = false,\n format = 'DD/MM/YYYY',\n fdKey,\n optionalText,\n ...props\n}) => {\n const theme = useTheme();\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n const isError = !!errorText && !disabled;\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n <Box mb={theme.spacing(0.5)}>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label} {optionalText && <Typography variant=\"captionWeak\">{optionalText}</Typography>}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n </Box>\n <Box mb={theme.spacing(0.5)}>\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n </Box>\n <MuiDatePicker\n dayOfWeekFormatter={(date) => {\n const dayMap: Record<string, string> = {\n 'Su': 'Su',\n 'Mo': 'Mo',\n 'Tu': 'Tu',\n 'We': 'We',\n 'Th': 'Th',\n 'Fr': 'Fr',\n 'Sa': 'Sa'\n };\n const dayAbbr = date.format('dd');\n return dayMap[dayAbbr] || dayAbbr;\n }}\n disabled={disabled}\n format={format}\n slotProps={{\n ...props.slotProps,\n textField: {\n id: fdKey,\n 'aria-describedby': [helperTextId, errorMessageId].filter(Boolean).join(' '),\n error: isError,\n ...props.slotProps?.textField,\n },\n day: {\n disableRipple: true,\n sx: {\n borderRadius: theme.radius['radius-8'],\n '&.Mui-selected': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n '&.MuiPickersDay-today': {\n border: 'none',\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n bottom: '2px',\n left: '50%',\n transform: 'translateX(-50%)',\n width: '6px',\n height: '6px',\n borderRadius: '50%',\n backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n },\n },\n },\n '&.MuiPickersDay-today': {\n border: 'none',\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n bottom: '2px',\n left: '50%',\n transform: 'translateX(-50%)',\n width: '6px',\n height: '6px',\n borderRadius: '50%',\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n },\n },\n },\n ...props.slotProps?.day,\n },\n desktopPaper: {\n sx: {\n borderRadius: theme.radius['radius-8'],\n boxShadow: theme.customShadows?.overlay,\n marginTop: theme.spacing(1),\n '& .MuiDayCalendar-header': {\n borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n marginLeft: theme.spacing(1),\n marginRight: theme.spacing(1),\n },\n },\n ...props.slotProps?.desktopPaper,\n },\n }}\n slots={{\n openPickerIcon: () => <Calendar02Icon color={theme.palette.semantic.icon['icon-strong']}/>,\n calendarHeader: CalendarHeader,\n ...props.slots,\n }}\n sx={{\n width: fullWidth ? '100%' : 'auto',\n ...props.sx,\n }}\n {...props}\n />\n </StyledContainer>\n );\n};\n\nconst DatePickerWithAdapter: React.FC<DatePickerProps> = (props) => {\n return <DateTimeLocalizationProvider dateAdapter={AdapterMoment}><DatePicker {...props} /></DateTimeLocalizationProvider>;\n};\n\nexport default DatePickerWithAdapter;"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","fullWidth","width","DatePicker","label","helperText","errorText","disabled","required","format","fdKey","optionalText","props","theme","useTheme","helperTextId","undefined","errorMessageId","isError","_jsxs","children","mb","spacing","MuiInputLabel","htmlFor","_jsx","Typography","variant","MuiFormHelperText","id","error","CancelCircleIcon","MuiDatePicker","dayOfWeekFormatter","date","dayAbbr","Su","Mo","Tu","We","Th","Fr","Sa","slotProps","textField","filter","Boolean","join","day","disableRipple","sx","borderRadius","radius","backgroundColor","palette","semantic","fill","border","content","position","bottom","left","transform","height","desktopPaper","boxShadow","customShadows","overlay","marginTop","borderBottom","stroke","marginLeft","marginRight","slots","openPickerIcon","Calendar02Icon","color","icon","calendarHeader","CalendarHeader","DatePickerWithAdapter","DateTimeLocalizationProvider","dateAdapter","AdapterMoment"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@

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

package/dist/components/atoms/FlipdishLogo/index.d.ts ADDED Viewed

@@ -0,0 +1,80 @@
+type FlipdishLogoVariant = 'default' | 'icon' | 'poweredBy';
+type FlipdishLogoTheme = 'auto' | 'dark' | 'light';
+type FlipdishLogoSize = 'large' | 'medium' | 'small';
+interface FlipdishLogoProps {
+    /**
+     * Logo variant to display
+     * - "default": Full Flipdish logo
+     * - "icon": Flipdish icon only
+     * - "poweredBy": "Powered by Flipdish" logo
+     */
+    variant?: FlipdishLogoVariant;
+    /**
+     * Theme variant for the logo
+     * - "light": Light theme logo (for dark backgrounds)
+     * - "dark": Dark theme logo (for light backgrounds)
+     * - "auto": Automatically selects based on current theme context
+     *
+     * @default "auto"
+     */
+    theme?: FlipdishLogoTheme;
+    /**
+     * Size of the logo
+     * Each size enforces minimum dimensions and clear space
+     *
+     * @default "medium"
+     */
+    size?: FlipdishLogoSize;
+    /**
+     * Accessible label for screen readers
+     * Maps to the image's alt attribute
+     */
+    ariaLabel: string;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Test ID for testing purposes
+     */
+    fdKey?: string;
+}
+/**
+ * FlipdishLogo component displays the Flipdish company logo with support for multiple variants,
+ * themes, and sizes.
+ *
+ * **Design Guidelines:**
+ * - Respects clear space and minimum sizes for each variant
+ * - Preserves intrinsic logo aspect ratios
+ * - Supports both light and dark themes
+ *
+ * **Consumer Responsibilities:**
+ * - Ensure logos are placed on backgrounds with sufficient contrast
+ * - Use "light" theme logos on dark backgrounds
+ * - Use "dark" theme logos on light backgrounds
+ * - When using "auto" theme, ensure the component is within a themed context
+ *
+ * **Minimum Sizes:**
+ * - Small: 120x32px minimum
+ * - Medium: 180x48px minimum
+ * - Large: 240x64px minimum
+ *
+ * @example
+ * ```tsx
+ * // Default usage with auto theme
+ * <FlipdishLogo variant="default" ariaLabel="Flipdish logo" />
+ *
+ * // Explicit theme for dark background
+ * <FlipdishLogo variant="icon" theme="light" size="large" ariaLabel="Flipdish icon" />
+ *
+ * // Powered by variant
+ * <FlipdishLogo variant="poweredBy" theme="dark" ariaLabel="Powered by Flipdish" />
+ * ```
+ */
+declare const FlipdishLogo: {
+    ({ variant, theme: themeProp, size, ariaLabel, className, fdKey, }: FlipdishLogoProps): JSX.Element;
+    displayName: string;
+};
+export { FlipdishLogo };
+export type { FlipdishLogoProps, FlipdishLogoSize, FlipdishLogoTheme, FlipdishLogoVariant };