npm - @flipdish/portal-library - Versions diffs - 7.3.5 → 7.4.0 - Mend

@flipdish/portal-library 7.3.5 → 7.4.0

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"sourcesContent":["import MuiAvatar, { type AvatarProps as MuiAvatarProps } from '@mui/material/Avatar';\nimport type { CSSObject } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { fontSize } from '@fd/themes/tokens/typography/font-size';\nimport { getMobileTextStyle } from '@fd/themes/typography';\nimport styled from '@fd/utilities/styledUtilities';\n\ntype Size = 'large' \| 'medium' \| 'small' \| undefined;\ntype Type = 'icon' \| 'initials' \| 'logo' \| 'photo' \| undefined;\n\ninterface CommonProps {\n /** Size of the avatar, defaults to 'medium' /\n size?: Size;\n /* Test ID for testing and automation /\n fdKey?: string;\n /* Alternative text for the avatar image /\n alt?: string;\n}\n\ninterface LogoProps {\n /* Type of avatar - displays a logo image /\n type: 'logo'\n /* Source URL for the logo image /\n src: string;\n /* Alternative text for the logo image /\n alt: string;\n}\n\ninterface PhotoProps {\n /* Type of avatar - displays a photo image /\n type: 'photo'\n /* Source URL for the photo image /\n src: string;\n /* Alternative text for the photo image /\n alt: string;\n}\n\ninterface InitialsProps {\n /* Type of avatar - displays initials text /\n type: 'initials'\n /* Initials text to display in the avatar /\n initials: string;\n}\n\ninterface IconProps {\n /* Type of avatar - displays an icon /\n type?: 'icon'\n /* Icon component to display in the avatar /\n icon?: React.ReactNode;\n}\n\n/* Props for the Avatar component /\nexport type AvatarProps = CommonProps & (IconProps \| InitialsProps \| LogoProps \| PhotoProps);\n\ntype StyledAvatarProps = MuiAvatarProps & {\n size: Size;\n type: Type;\n}\n\nconst StyledAvatar = styled(MuiAvatar, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'type',\n})<StyledAvatarProps>(({ theme, size = 'medium', type }): CSSObject => {\n\n const pixels = {\n small: '32',\n medium: '48',\n large: '64'\n } as const;\n\n const fontSizes = {\n small: fontSize.desktop.caption,\n medium: fontSize.desktop.h4,\n large: fontSize.desktop.h3,\n }\n\n const mobileKeys = {\n small: 'caption' ,\n medium: 'h4',\n large: 'h3',\n } as const;\n\n const dim = pixels[size];\n\n const customBorderRadius = type !== 'photo' ? {\n borderRadius: '8px'\n } : {};\n\n return {\n fontStyle: 'normal',\n fontWeight: 600,\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSizes[size],\n color: theme.palette.grey[700],\n backgroundColor: '#f5f5f5',\n width: `${dim}px`,\n height: `${dim}px`,\n border: `1px solid #ddd`,\n ...customBorderRadius,\n [theme.breakpoints.down('tablet')]: {\n ...getMobileTextStyle(mobileKeys[size]), // mobile typography override\n },\n };\n});\n\n/\n Avatar component displays user avatars in different formats: photos, logos, initials, or icons.\n * The component automatically adjusts styling based on the avatar type - photos use circular shape\n * while logos use rounded corners. Size can be controlled via the size prop (small, medium, large).\n */\nconst Avatar: React.FC<AvatarProps> = (props) => {\n\n const { type, fdKey } = props;\n\n const getVariant = (): MuiAvatarProps['variant'] => {\n switch (type) {\n case 'photo':\n return 'circular'\n case 'logo':\n default:\n return 'rounded'\n }\n }\n\n const getChildren = (): React.ReactNode => {\n switch (type) {\n case 'icon':\n return props.icon;\n case 'initials':\n return props.initials;\n default:\n return null;\n }\n }\n\n const getSrc = (): string \| undefined => {\n switch (type) {\n case 'logo':\n case 'photo':\n return props.src;\n default:\n return undefined;\n }\n }\n\n return (\n <StyledAvatar\n alt={props.alt \|\| props.type}\n data-fd={fdKey}\n size={props.size}\n src={getSrc()}\n type={props.type}\n variant={getVariant()}>\n {getChildren()}\n </StyledAvatar>\n );\n};\n\nexport default Avatar;"],"names":["StyledAvatar","styled","MuiAvatar","shouldForwardProp","prop","theme","size","type","fontSizes","small","fontSize","desktop","caption","medium","h4","large","h3","dim","customBorderRadius","borderRadius","fontStyle","fontWeight","fontFamily","body","color","palette","grey","backgroundColor","width","height","border","breakpoints","down","getMobileTextStyle","props","fdKey","_jsx","alt","src","getSrc","variant","children","icon","initials","getChildren"],"mappings":"mQA4DA,MAAMA,kCAAeC,OAAOC,EAAW,~~CACnCC~~,kBAAoBC,GAAkB,SAATA,GAA4B,SAATA,~~GAD/BH~~,EAEC,EAAGI,QAAOC,OAAO,SAAUC,~~WAE7C~~,MAMMC,EAAY,~~CACdC~~,MAAOC,EAAAA,SAASC,QAAQC,QACxBC,OAAQH,EAAAA,SAASC,QAAQG,GACzBC,MAAOL,EAAAA,SAASC,QAAQK,~~IAStBC~~,EAlBS,~~CACXR~~,MAAO,KACPI,OAAQ,KACRE,MAAO,~~MAeQT~~,GAEbY,~~EAA8B~~,UAATX,~~EAAmB~~,~~CAC1CY~~,aAAc,~~OACd~~,CAAA,~~EAEJ~~,MAAO,~~CACHC~~,UAAW,SACXC,WAAY,IACZC,WAAYA,EAAAA,WAAWX,QAAQY,KAC/Bb,SAAUF,EAAUF,GACpBkB,MAAOnB,EAAMoB,QAAQC,KAAK,KAC1BC,gBAAiB,UACjBC,MAAO,GAAGX,MACVY,OAAQ,GAAGZ,MACXa,OAAQ,oBACLZ,EACH,CAACb,EAAM0B,YAAYC,KAAK,WAAY,~~IAC7BC~~,EAAAA,~~mBAxBQ~~,~~CACfxB~~,MAAO,UACPI,OAAQ,KACRE,MAAO,~~MAqB8BT~~,~~wBAUN4B~~,~~IAEnC~~,MAAM3B,KAAEA,EAAI4B,MAAEA,GAAUD,EAiCxB,~~OACIE~~,MAACpC,~~GACGqC~~,IAAKH,EAAMG,KAAOH,EAAM3B,KAAI,UACnB4B,EACT7B,KAAM4B,EAAM5B,KACZgC,~~IAfO~~,~~MACX~~,OAAQ/B,~~GACJ~~,IAAK,OACL,IAAK,~~QACD~~,OAAO2B,EAAMI,~~IACjB~~,~~QACI~~,~~SASCC~~,GACLhC,KAAM2B,EAAM3B,KACZiC,QApCK,~~UADDjC~~,~~EAEO~~,WAGA,~~UAgCUkC~~,~~SA5BT~~,~~MAChB~~,OAAQlC,~~GACJ~~,IAAK,~~OACD~~,OAAO2B,EAAMQ,~~KACjB~~,IAAK,~~WACD~~,OAAOR,EAAMS,~~SACjB~~,~~QACI~~,OAAO,~~OAsBVC~~"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"sourcesContent":["import MuiAvatar, { type AvatarProps as MuiAvatarProps } from '@mui/material/Avatar';\nimport type { CSSObject } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { fontSize } from '@fd/themes/tokens/typography/font-size';\nimport { getMobileTextStyle } from '@fd/themes/typography';\nimport styled from '@fd/utilities/styledUtilities';\n\ntype Size = 'large' \| 'medium' \| 'small' \| undefined;\ntype Type = 'icon' \| 'initials' \| 'logo' \| 'photo' \| undefined;\n\ninterface CommonProps {\n /** Size of the avatar, defaults to 'medium' /\n size?: Size;\n /* Test ID for testing and automation /\n fdKey?: string;\n /* Alternative text for the avatar image /\n alt?: string;\n}\n\ninterface LogoProps {\n /* Type of avatar - displays a logo image /\n type: 'logo';\n /* Source URL for the logo image /\n src: string;\n /* Alternative text for the logo image /\n alt: string;\n}\n\ninterface PhotoProps {\n /* Type of avatar - displays a photo image /\n type: 'photo';\n /* Source URL for the photo image /\n src: string;\n /* Alternative text for the photo image /\n alt: string;\n}\n\ninterface InitialsProps {\n /* Type of avatar - displays initials text /\n type: 'initials';\n /* Initials text to display in the avatar /\n initials: string;\n}\n\ninterface IconProps {\n /* Type of avatar - displays an icon /\n type?: 'icon';\n /* Icon component to display in the avatar /\n icon?: React.ReactNode;\n}\n\n/* Props for the Avatar component /\nexport type AvatarProps = CommonProps & (IconProps \| InitialsProps \| LogoProps \| PhotoProps);\n\ntype StyledAvatarProps = MuiAvatarProps & {\n size: Size;\n type: Type;\n};\n\nconst StyledAvatar = styled(MuiAvatar, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'type',\n})<StyledAvatarProps>(({ theme, size = 'medium', type }): CSSObject => {\n const pixels = {\n small: '32',\n medium: '48',\n large: '64',\n } as const;\n\n const fontSizes = {\n small: fontSize.desktop.caption,\n medium: fontSize.desktop.h4,\n large: fontSize.desktop.h3,\n };\n\n const mobileKeys = {\n small: 'caption',\n medium: 'h4',\n large: 'h3',\n } as const;\n\n const dim = pixels[size];\n\n const customBorderRadius =\n type !== 'photo'\n ? {\n borderRadius: '8px',\n }\n : {};\n\n return {\n fontStyle: 'normal',\n fontWeight: 600,\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSizes[size],\n color: theme.palette.grey[700],\n backgroundColor: '#f5f5f5',\n width: `${dim}px`,\n height: `${dim}px`,\n border: `1px solid #ddd`,\n ...customBorderRadius,\n [theme.breakpoints.down('tablet')]: {\n ...getMobileTextStyle(mobileKeys[size]), // mobile typography override\n },\n };\n});\n\n/\n Avatar component displays user avatars in different formats: photos, logos, initials, or icons.\n * The component automatically adjusts styling based on the avatar type - photos use circular shape\n * while logos use rounded corners. Size can be controlled via the size prop (small, medium, large).\n */\nconst Avatar: React.FC<AvatarProps> = (props) => {\n const { type, fdKey } = props;\n\n const getVariant = (): MuiAvatarProps['variant'] => {\n switch (type) {\n case 'photo':\n return 'circular';\n case 'logo':\n default:\n return 'rounded';\n }\n };\n\n const getChildren = (): React.ReactNode => {\n switch (type) {\n case 'icon':\n return props.icon;\n case 'initials':\n return props.initials;\n default:\n return null;\n }\n };\n\n const getSrc = (): string \| undefined => {\n switch (type) {\n case 'logo':\n case 'photo':\n return props.src;\n default:\n return undefined;\n }\n };\n\n return (\n <StyledAvatar\n alt={props.alt \|\| props.type}\n data-fd={fdKey}\n size={props.size}\n src={getSrc()}\n type={props.type}\n variant={getVariant()}\n >\n {getChildren()}\n </StyledAvatar>\n );\n};\n\nexport default Avatar;\n"],"names":["StyledAvatar","styled","MuiAvatar","shouldForwardProp","prop","theme","size","type","fontSizes","small","fontSize","desktop","caption","medium","h4","large","h3","dim","customBorderRadius","borderRadius","fontStyle","fontWeight","fontFamily","body","color","palette","grey","backgroundColor","width","height","border","breakpoints","down","getMobileTextStyle","props","fdKey","_jsx","alt","src","getSrc","variant","children","icon","initials","getChildren"],"mappings":"mQA4DA,MAAMA,kCAAeC,OAAOC,EAAW,CACrCC,kBAAoBC,GAAkB,SAATA,GAA4B,SAATA,GAD7BH,EAEC,EAAGI,QAAOC,OAAO,SAAUC,WAC/C,MAMMC,EAAY,CAChBC,MAAOC,EAAAA,SAASC,QAAQC,QACxBC,OAAQH,EAAAA,SAASC,QAAQG,GACzBC,MAAOL,EAAAA,SAASC,QAAQK,IASpBC,EAlBS,CACbR,MAAO,KACPI,OAAQ,KACRE,MAAO,MAeUT,GAEbY,EACK,UAATX,EACI,CACEY,aAAc,OAEhB,CAAA,EAEN,MAAO,CACLC,UAAW,SACXC,WAAY,IACZC,WAAYA,EAAAA,WAAWX,QAAQY,KAC/Bb,SAAUF,EAAUF,GACpBkB,MAAOnB,EAAMoB,QAAQC,KAAK,KAC1BC,gBAAiB,UACjBC,MAAO,GAAGX,MACVY,OAAQ,GAAGZ,MACXa,OAAQ,oBACLZ,EACH,CAACb,EAAM0B,YAAYC,KAAK,WAAY,IAC/BC,EAAAA,mBA3BY,CACjBxB,MAAO,UACPI,OAAQ,KACRE,MAAO,MAwB4BT,wBAUA4B,IACrC,MAAM3B,KAAEA,EAAI4B,MAAEA,GAAUD,EAiCxB,OACEE,MAACpC,GACCqC,IAAKH,EAAMG,KAAOH,EAAM3B,KAAI,UACnB4B,EACT7B,KAAM4B,EAAM5B,KACZgC,IAfW,MACb,OAAQ/B,GACN,IAAK,OACL,IAAK,QACH,OAAO2B,EAAMI,IACf,QACE,SASGC,GACLhC,KAAM2B,EAAM3B,KACZiC,QApCK,UADCjC,EAEG,WAGA,UAgCYkC,SA5BL,MAClB,OAAQlC,GACN,IAAK,OACH,OAAO2B,EAAMQ,KACf,IAAK,WACH,OAAOR,EAAMS,SACf,QACE,OAAO,OAuBRC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"sourcesContent":["import MuiAvatar, { type AvatarProps as MuiAvatarProps } from '@mui/material/Avatar';\nimport type { CSSObject } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { fontSize } from '@fd/themes/tokens/typography/font-size';\nimport { getMobileTextStyle } from '@fd/themes/typography';\nimport styled from '@fd/utilities/styledUtilities';\n\ntype Size = 'large' \| 'medium' \| 'small' \| undefined;\ntype Type = 'icon' \| 'initials' \| 'logo' \| 'photo' \| undefined;\n\ninterface CommonProps {\n /** Size of the avatar, defaults to 'medium' /\n size?: Size;\n /* Test ID for testing and automation /\n fdKey?: string;\n /* Alternative text for the avatar image /\n alt?: string;\n}\n\ninterface LogoProps {\n /* Type of avatar - displays a logo image /\n type: 'logo'\n /* Source URL for the logo image /\n src: string;\n /* Alternative text for the logo image /\n alt: string;\n}\n\ninterface PhotoProps {\n /* Type of avatar - displays a photo image /\n type: 'photo'\n /* Source URL for the photo image /\n src: string;\n /* Alternative text for the photo image /\n alt: string;\n}\n\ninterface InitialsProps {\n /* Type of avatar - displays initials text /\n type: 'initials'\n /* Initials text to display in the avatar /\n initials: string;\n}\n\ninterface IconProps {\n /* Type of avatar - displays an icon /\n type?: 'icon'\n /* Icon component to display in the avatar /\n icon?: React.ReactNode;\n}\n\n/* Props for the Avatar component /\nexport type AvatarProps = CommonProps & (IconProps \| InitialsProps \| LogoProps \| PhotoProps);\n\ntype StyledAvatarProps = MuiAvatarProps & {\n size: Size;\n type: Type;\n}\n\nconst StyledAvatar = styled(MuiAvatar, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'type',\n})<StyledAvatarProps>(({ theme, size = 'medium', type }): CSSObject => {\n\n const pixels = {\n small: '32',\n medium: '48',\n large: '64'\n } as const;\n\n const fontSizes = {\n small: fontSize.desktop.caption,\n medium: fontSize.desktop.h4,\n large: fontSize.desktop.h3,\n }\n\n const mobileKeys = {\n small: 'caption' ,\n medium: 'h4',\n large: 'h3',\n } as const;\n\n const dim = pixels[size];\n\n const customBorderRadius = type !== 'photo' ? {\n borderRadius: '8px'\n } : {};\n\n return {\n fontStyle: 'normal',\n fontWeight: 600,\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSizes[size],\n color: theme.palette.grey[700],\n backgroundColor: '#f5f5f5',\n width: `${dim}px`,\n height: `${dim}px`,\n border: `1px solid #ddd`,\n ...customBorderRadius,\n [theme.breakpoints.down('tablet')]: {\n ...getMobileTextStyle(mobileKeys[size]), // mobile typography override\n },\n };\n});\n\n/\n Avatar component displays user avatars in different formats: photos, logos, initials, or icons.\n * The component automatically adjusts styling based on the avatar type - photos use circular shape\n * while logos use rounded corners. Size can be controlled via the size prop (small, medium, large).\n */\nconst Avatar: React.FC<AvatarProps> = (props) => {\n\n const { type, fdKey } = props;\n\n const getVariant = (): MuiAvatarProps['variant'] => {\n switch (type) {\n case 'photo':\n return 'circular'\n case 'logo':\n default:\n return 'rounded'\n }\n }\n\n const getChildren = (): React.ReactNode => {\n switch (type) {\n case 'icon':\n return props.icon;\n case 'initials':\n return props.initials;\n default:\n return null;\n }\n }\n\n const getSrc = (): string \| undefined => {\n switch (type) {\n case 'logo':\n case 'photo':\n return props.src;\n default:\n return undefined;\n }\n }\n\n return (\n <StyledAvatar\n alt={props.alt \|\| props.type}\n data-fd={fdKey}\n size={props.size}\n src={getSrc()}\n type={props.type}\n variant={getVariant()}>\n {getChildren()}\n </StyledAvatar>\n );\n};\n\nexport default Avatar;"],"names":["StyledAvatar","styled","MuiAvatar","shouldForwardProp","prop","theme","size","type","fontSizes","small","fontSize","desktop","caption","medium","h4","large","h3","dim","customBorderRadius","borderRadius","fontStyle","fontWeight","fontFamily","body","color","palette","grey","backgroundColor","width","height","border","breakpoints","down","getMobileTextStyle","Avatar","props","fdKey","_jsx","alt","src","getSrc","variant","children","icon","initials","getChildren"],"mappings":"qVA4DA,MAAMA,EAAeC,EAAOC,EAAW,~~CACnCC~~,kBAAoBC,GAAkB,SAATA,GAA4B,SAATA,~~GAD/BH~~,EAEC,EAAGI,QAAOC,OAAO,SAAUC,~~WAE7C~~,MAMMC,EAAY,~~CACdC~~,MAAOC,EAASC,QAAQC,QACxBC,OAAQH,EAASC,QAAQG,GACzBC,MAAOL,EAASC,QAAQK,~~IAStBC~~,EAlBS,~~CACXR~~,MAAO,KACPI,OAAQ,KACRE,MAAO,~~MAeQT~~,GAEbY,~~EAA8B~~,UAATX,~~EAAmB~~,~~CAC1CY~~,aAAc,~~OACd~~,CAAA,~~EAEJ~~,MAAO,~~CACHC~~,UAAW,SACXC,WAAY,IACZC,WAAYA,EAAWX,QAAQY,KAC/Bb,SAAUF,EAAUF,GACpBkB,MAAOnB,EAAMoB,QAAQC,KAAK,KAC1BC,gBAAiB,UACjBC,MAAO,GAAGX,MACVY,OAAQ,GAAGZ,MACXa,OAAQ,oBACLZ,EACH,CAACb,EAAM0B,YAAYC,KAAK,WAAY,~~IAC7BC~~,~~EAxBQ~~,~~CACfxB~~,MAAO,UACPI,OAAQ,KACRE,MAAO,~~MAqB8BT~~,~~SAUvC4B~~,EAAiCC,~~IAEnC~~,MAAM5B,KAAEA,EAAI6B,MAAEA,GAAUD,EAiCxB,~~OACIE~~,EAACrC,~~GACGsC~~,IAAKH,EAAMG,KAAOH,EAAM5B,KAAI,UACnB6B,EACT9B,KAAM6B,EAAM7B,KACZiC,~~IAfO~~,~~MACX~~,OAAQhC,~~GACJ~~,IAAK,OACL,IAAK,~~QACD~~,OAAO4B,EAAMI,~~IACjB~~,~~QACI~~,~~SASCC~~,GACLjC,KAAM4B,EAAM5B,KACZkC,QApCK,~~UADDlC~~,~~EAEO~~,WAGA,~~UAgCUmC~~,~~SA5BT~~,~~MAChB~~,OAAQnC,~~GACJ~~,IAAK,~~OACD~~,OAAO4B,EAAMQ,~~KACjB~~,IAAK,~~WACD~~,OAAOR,EAAMS,~~SACjB~~,~~QACI~~,OAAO,~~OAsBVC~~"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"sourcesContent":["import MuiAvatar, { type AvatarProps as MuiAvatarProps } from '@mui/material/Avatar';\nimport type { CSSObject } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { fontSize } from '@fd/themes/tokens/typography/font-size';\nimport { getMobileTextStyle } from '@fd/themes/typography';\nimport styled from '@fd/utilities/styledUtilities';\n\ntype Size = 'large' \| 'medium' \| 'small' \| undefined;\ntype Type = 'icon' \| 'initials' \| 'logo' \| 'photo' \| undefined;\n\ninterface CommonProps {\n /** Size of the avatar, defaults to 'medium' /\n size?: Size;\n /* Test ID for testing and automation /\n fdKey?: string;\n /* Alternative text for the avatar image /\n alt?: string;\n}\n\ninterface LogoProps {\n /* Type of avatar - displays a logo image /\n type: 'logo';\n /* Source URL for the logo image /\n src: string;\n /* Alternative text for the logo image /\n alt: string;\n}\n\ninterface PhotoProps {\n /* Type of avatar - displays a photo image /\n type: 'photo';\n /* Source URL for the photo image /\n src: string;\n /* Alternative text for the photo image /\n alt: string;\n}\n\ninterface InitialsProps {\n /* Type of avatar - displays initials text /\n type: 'initials';\n /* Initials text to display in the avatar /\n initials: string;\n}\n\ninterface IconProps {\n /* Type of avatar - displays an icon /\n type?: 'icon';\n /* Icon component to display in the avatar /\n icon?: React.ReactNode;\n}\n\n/* Props for the Avatar component /\nexport type AvatarProps = CommonProps & (IconProps \| InitialsProps \| LogoProps \| PhotoProps);\n\ntype StyledAvatarProps = MuiAvatarProps & {\n size: Size;\n type: Type;\n};\n\nconst StyledAvatar = styled(MuiAvatar, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'type',\n})<StyledAvatarProps>(({ theme, size = 'medium', type }): CSSObject => {\n const pixels = {\n small: '32',\n medium: '48',\n large: '64',\n } as const;\n\n const fontSizes = {\n small: fontSize.desktop.caption,\n medium: fontSize.desktop.h4,\n large: fontSize.desktop.h3,\n };\n\n const mobileKeys = {\n small: 'caption',\n medium: 'h4',\n large: 'h3',\n } as const;\n\n const dim = pixels[size];\n\n const customBorderRadius =\n type !== 'photo'\n ? {\n borderRadius: '8px',\n }\n : {};\n\n return {\n fontStyle: 'normal',\n fontWeight: 600,\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSizes[size],\n color: theme.palette.grey[700],\n backgroundColor: '#f5f5f5',\n width: `${dim}px`,\n height: `${dim}px`,\n border: `1px solid #ddd`,\n ...customBorderRadius,\n [theme.breakpoints.down('tablet')]: {\n ...getMobileTextStyle(mobileKeys[size]), // mobile typography override\n },\n };\n});\n\n/\n Avatar component displays user avatars in different formats: photos, logos, initials, or icons.\n * The component automatically adjusts styling based on the avatar type - photos use circular shape\n * while logos use rounded corners. Size can be controlled via the size prop (small, medium, large).\n */\nconst Avatar: React.FC<AvatarProps> = (props) => {\n const { type, fdKey } = props;\n\n const getVariant = (): MuiAvatarProps['variant'] => {\n switch (type) {\n case 'photo':\n return 'circular';\n case 'logo':\n default:\n return 'rounded';\n }\n };\n\n const getChildren = (): React.ReactNode => {\n switch (type) {\n case 'icon':\n return props.icon;\n case 'initials':\n return props.initials;\n default:\n return null;\n }\n };\n\n const getSrc = (): string \| undefined => {\n switch (type) {\n case 'logo':\n case 'photo':\n return props.src;\n default:\n return undefined;\n }\n };\n\n return (\n <StyledAvatar\n alt={props.alt \|\| props.type}\n data-fd={fdKey}\n size={props.size}\n src={getSrc()}\n type={props.type}\n variant={getVariant()}\n >\n {getChildren()}\n </StyledAvatar>\n );\n};\n\nexport default Avatar;\n"],"names":["StyledAvatar","styled","MuiAvatar","shouldForwardProp","prop","theme","size","type","fontSizes","small","fontSize","desktop","caption","medium","h4","large","h3","dim","customBorderRadius","borderRadius","fontStyle","fontWeight","fontFamily","body","color","palette","grey","backgroundColor","width","height","border","breakpoints","down","getMobileTextStyle","Avatar","props","fdKey","_jsx","alt","src","getSrc","variant","children","icon","initials","getChildren"],"mappings":"qVA4DA,MAAMA,EAAeC,EAAOC,EAAW,CACrCC,kBAAoBC,GAAkB,SAATA,GAA4B,SAATA,GAD7BH,EAEC,EAAGI,QAAOC,OAAO,SAAUC,WAC/C,MAMMC,EAAY,CAChBC,MAAOC,EAASC,QAAQC,QACxBC,OAAQH,EAASC,QAAQG,GACzBC,MAAOL,EAASC,QAAQK,IASpBC,EAlBS,CACbR,MAAO,KACPI,OAAQ,KACRE,MAAO,MAeUT,GAEbY,EACK,UAATX,EACI,CACEY,aAAc,OAEhB,CAAA,EAEN,MAAO,CACLC,UAAW,SACXC,WAAY,IACZC,WAAYA,EAAWX,QAAQY,KAC/Bb,SAAUF,EAAUF,GACpBkB,MAAOnB,EAAMoB,QAAQC,KAAK,KAC1BC,gBAAiB,UACjBC,MAAO,GAAGX,MACVY,OAAQ,GAAGZ,MACXa,OAAQ,oBACLZ,EACH,CAACb,EAAM0B,YAAYC,KAAK,WAAY,IAC/BC,EA3BY,CACjBxB,MAAO,UACPI,OAAQ,KACRE,MAAO,MAwB4BT,SAUjC4B,EAAiCC,IACrC,MAAM5B,KAAEA,EAAI6B,MAAEA,GAAUD,EAiCxB,OACEE,EAACrC,GACCsC,IAAKH,EAAMG,KAAOH,EAAM5B,KAAI,UACnB6B,EACT9B,KAAM6B,EAAM7B,KACZiC,IAfW,MACb,OAAQhC,GACN,IAAK,OACL,IAAK,QACH,OAAO4B,EAAMI,IACf,QACE,SASGC,GACLjC,KAAM4B,EAAM5B,KACZkC,QApCK,UADClC,EAEG,WAGA,UAgCYmC,SA5BL,MAClB,OAAQnC,GACN,IAAK,OACH,OAAO4B,EAAMQ,KACf,IAAK,WACH,OAAOR,EAAMS,SACf,QACE,OAAO,OAuBRC"}

package/dist/components/atoms/Button/buttonThemeOverrides.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"buttonThemeOverrides.cjs.js","sources":["../../../../src/components/atoms/Button/buttonThemeOverrides.ts"],"sourcesContent":["import { type Theme } from \"@mui/material/styles\";\n\nimport { fontFamily } from \"@fd/themes/tokens/typography/font-family\";\nimport { fontSize } from \"@fd/themes/tokens/typography/font-size~~\"\~~nimport { letterSpacing } from \"@fd/themes/tokens/typography/letter-spacing~~\"\~~nimport { lineHeight } from \"@fd/themes/tokens/typography/line-height~~\"\~~n\ninterface ButtonStyleOverrides {\n styleOverrides: {\n root: Record<string, string \| { [key: string]: string }>;\n sizeSmall: Record<string, string \| { [key: string]: string }>;\n sizeMedium: Record<string, string \| { [key: string]: string }>;\n sizeLarge: Record<string, string \| { [key: string]: string }>;\n };\n}\n\nexport const buttonStyleOverrides = (baseTheme: Theme): ButtonStyleOverrides => ({\n styleOverrides: {\n root: {\n textAlign: 'center',\n textTransform: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flex: '1 0 0',\n alignSelf: 'stretch',\n },\n sizeSmall: {\n height: '32px',\n padding: '0px 12px',\n fontStyle: 'normal',\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSize.desktop.caption,\n lineHeight: 'normal', // normal vs lineHeight.desktop.caption due to mui issue with text alignment https://github.com/mui/material-ui/issues/29965\n letterSpacing: letterSpacing.desktop.caption,\n fontWeight: '600',\n [baseTheme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.body,\n fontSize: fontSize.mobile.caption,\n lineHeight: lineHeight.mobile.caption,\n letterSpacing: letterSpacing.mobile.caption,\n },\n },\n sizeMedium: {\n height: '48px',\n gap: '4px',\n padding: '0px 16px',\n fontStyle: 'normal',\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSize.desktop.b1,\n lineHeight: 'normal',\n letterSpacing: letterSpacing.desktop.b1,\n fontWeight: '600',\n [baseTheme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.body,\n fontSize: fontSize.mobile.b1,\n lineHeight: lineHeight.mobile.b1,\n letterSpacing: letterSpacing.mobile.b1,\n },\n },\n sizeLarge: {\n height: '64px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flex: '1 0 0',\n alignSelf: 'stretch',\n gap: '4px',\n padding: '0px 24px',\n fontStyle: 'normal',\n fontFamily: fontFamily.desktop.heading,\n fontSize: fontSize.desktop.h4,\n lineHeight: 'normal',\n letterSpacing: letterSpacing.desktop.h4,\n fontWeight: '600',\n [baseTheme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.heading,\n fontSize: fontSize.mobile.h4,\n lineHeight: lineHeight.mobile.h4,\n letterSpacing: letterSpacing.mobile.h4,\n },\n },\n },\n})\n"],"names":["baseTheme","styleOverrides","root","textAlign","textTransform","display","alignItems","justifyContent","flex","alignSelf","sizeSmall","height","padding","fontStyle","fontFamily","desktop","body","fontSize","caption","lineHeight","letterSpacing","fontWeight","breakpoints","down","mobile","sizeMedium","gap","b1","sizeLarge","heading","h4"],"mappings":"uVAgBqCA,IAAgB,~~CACjDC~~,eAAgB,~~CAChBC~~,KAAM,CACJC,UAAW,SACXC,cAAe,OACfC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,KAAM,QACNC,UAAW,WAEbC,UAAW,CACTC,OAAQ,OACRC,QAAS,WACTC,UAAW,SACXC,WAAYA,EAAAA,WAAWC,QAAQC,KAC/BC,SAAUA,EAAAA,SAASF,QAAQG,QAC3BC,WAAY,SACZC,cAAeA,EAAAA,cAAcL,QAAQG,QACrCG,WAAY,MACZ,CAACrB,EAAUsB,YAAYC,KAAK,WAAY,CACtCT,WAAYA,EAAAA,WAAWU,OAAOR,KAC9BC,SAAUA,EAAAA,SAASO,OAAON,QAC1BC,WAAYA,EAAAA,WAAWK,OAAON,QAC9BE,cAAeA,EAAAA,cAAcI,OAAON,UAGxCO,WAAY,CACVd,OAAQ,OACRe,IAAK,MACLd,QAAS,WACTC,UAAW,SACXC,WAAYA,EAAAA,WAAWC,QAAQC,KAC/BC,SAAUA,EAAAA,SAASF,QAAQY,GAC3BR,WAAY,SACZC,cAAeA,EAAAA,cAAcL,QAAQY,GACrCN,WAAY,MACZ,CAACrB,EAAUsB,YAAYC,KAAK,WAAY,CACtCT,WAAYA,EAAAA,WAAWU,OAAOR,KAC9BC,SAAUA,EAAAA,SAASO,OAAOG,GAC1BR,WAAYA,EAAAA,WAAWK,OAAOG,GAC9BP,cAAeA,EAAAA,cAAcI,OAAOG,KAGxCC,UAAW,CACTjB,OAAQ,OACRN,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,KAAM,QACNC,UAAW,UACXiB,IAAK,MACLd,QAAS,WACTC,UAAW,SACXC,WAAYA,EAAAA,WAAWC,QAAQc,QAC/BZ,SAAUA,EAAAA,SAASF,QAAQe,GAC3BX,WAAY,SACZC,cAAeA,EAAAA,cAAcL,QAAQe,GACrCT,WAAY,MACZ,CAACrB,EAAUsB,YAAYC,KAAK,WAAY,CACtCT,WAAYA,EAAAA,WAAWU,OAAOK,QAC9BZ,SAAUA,EAAAA,SAASO,OAAOM,GAC1BX,WAAYA,EAAAA,WAAWK,OAAOM,GAC9BV,cAAeA,EAAAA,cAAcI,OAAOM"}
1	+ {"version":3,"file":"buttonThemeOverrides.cjs.js","sources":["../../../../src/components/atoms/Button/buttonThemeOverrides.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { fontSize } from '@fd/themes/tokens/typography/font-size';\nimport { letterSpacing } from '@fd/themes/tokens/typography/letter-spacing';\nimport { lineHeight } from '@fd/themes/tokens/typography/line-height';\n\ninterface ButtonStyleOverrides {\n styleOverrides: {\n root: Record<string, string \| { [key: string]: string }>;\n sizeSmall: Record<string, string \| { [key: string]: string }>;\n sizeMedium: Record<string, string \| { [key: string]: string }>;\n sizeLarge: Record<string, string \| { [key: string]: string }>;\n };\n}\n\nexport const buttonStyleOverrides = (baseTheme: Theme): ButtonStyleOverrides => ({\n styleOverrides: {\n root: {\n textAlign: 'center',\n textTransform: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flex: '1 0 0',\n alignSelf: 'stretch',\n },\n sizeSmall: {\n height: '32px',\n padding: '0px 12px',\n fontStyle: 'normal',\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSize.desktop.caption,\n lineHeight: 'normal', // normal vs lineHeight.desktop.caption due to mui issue with text alignment https://github.com/mui/material-ui/issues/29965\n letterSpacing: letterSpacing.desktop.caption,\n fontWeight: '600',\n [baseTheme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.body,\n fontSize: fontSize.mobile.caption,\n lineHeight: lineHeight.mobile.caption,\n letterSpacing: letterSpacing.mobile.caption,\n },\n },\n sizeMedium: {\n height: '48px',\n gap: '4px',\n padding: '0px 16px',\n fontStyle: 'normal',\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSize.desktop.b1,\n lineHeight: 'normal',\n letterSpacing: letterSpacing.desktop.b1,\n fontWeight: '600',\n [baseTheme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.body,\n fontSize: fontSize.mobile.b1,\n lineHeight: lineHeight.mobile.b1,\n letterSpacing: letterSpacing.mobile.b1,\n },\n },\n sizeLarge: {\n height: '64px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flex: '1 0 0',\n alignSelf: 'stretch',\n gap: '4px',\n padding: '0px 24px',\n fontStyle: 'normal',\n fontFamily: fontFamily.desktop.heading,\n fontSize: fontSize.desktop.h4,\n lineHeight: 'normal',\n letterSpacing: letterSpacing.desktop.h4,\n fontWeight: '600',\n [baseTheme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.heading,\n fontSize: fontSize.mobile.h4,\n lineHeight: lineHeight.mobile.h4,\n letterSpacing: letterSpacing.mobile.h4,\n },\n },\n },\n});\n"],"names":["baseTheme","styleOverrides","root","textAlign","textTransform","display","alignItems","justifyContent","flex","alignSelf","sizeSmall","height","padding","fontStyle","fontFamily","desktop","body","fontSize","caption","lineHeight","letterSpacing","fontWeight","breakpoints","down","mobile","sizeMedium","gap","b1","sizeLarge","heading","h4"],"mappings":"uVAgBqCA,IAAgB,CACnDC,eAAgB,CACdC,KAAM,CACJC,UAAW,SACXC,cAAe,OACfC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,KAAM,QACNC,UAAW,WAEbC,UAAW,CACTC,OAAQ,OACRC,QAAS,WACTC,UAAW,SACXC,WAAYA,EAAAA,WAAWC,QAAQC,KAC/BC,SAAUA,EAAAA,SAASF,QAAQG,QAC3BC,WAAY,SACZC,cAAeA,EAAAA,cAAcL,QAAQG,QACrCG,WAAY,MACZ,CAACrB,EAAUsB,YAAYC,KAAK,WAAY,CACtCT,WAAYA,EAAAA,WAAWU,OAAOR,KAC9BC,SAAUA,EAAAA,SAASO,OAAON,QAC1BC,WAAYA,EAAAA,WAAWK,OAAON,QAC9BE,cAAeA,EAAAA,cAAcI,OAAON,UAGxCO,WAAY,CACVd,OAAQ,OACRe,IAAK,MACLd,QAAS,WACTC,UAAW,SACXC,WAAYA,EAAAA,WAAWC,QAAQC,KAC/BC,SAAUA,EAAAA,SAASF,QAAQY,GAC3BR,WAAY,SACZC,cAAeA,EAAAA,cAAcL,QAAQY,GACrCN,WAAY,MACZ,CAACrB,EAAUsB,YAAYC,KAAK,WAAY,CACtCT,WAAYA,EAAAA,WAAWU,OAAOR,KAC9BC,SAAUA,EAAAA,SAASO,OAAOG,GAC1BR,WAAYA,EAAAA,WAAWK,OAAOG,GAC9BP,cAAeA,EAAAA,cAAcI,OAAOG,KAGxCC,UAAW,CACTjB,OAAQ,OACRN,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,KAAM,QACNC,UAAW,UACXiB,IAAK,MACLd,QAAS,WACTC,UAAW,SACXC,WAAYA,EAAAA,WAAWC,QAAQc,QAC/BZ,SAAUA,EAAAA,SAASF,QAAQe,GAC3BX,WAAY,SACZC,cAAeA,EAAAA,cAAcL,QAAQe,GACrCT,WAAY,MACZ,CAACrB,EAAUsB,YAAYC,KAAK,WAAY,CACtCT,WAAYA,EAAAA,WAAWU,OAAOK,QAC9BZ,SAAUA,EAAAA,SAASO,OAAOM,GAC1BX,WAAYA,EAAAA,WAAWK,OAAOM,GAC9BV,cAAeA,EAAAA,cAAcI,OAAOM"}

package/dist/components/atoms/Button/buttonThemeOverrides.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"buttonThemeOverrides.js","sources":["../../../../src/components/atoms/Button/buttonThemeOverrides.ts"],"sourcesContent":["import { type Theme } from \"@mui/material/styles\";\n\nimport { fontFamily } from \"@fd/themes/tokens/typography/font-family\";\nimport { fontSize } from \"@fd/themes/tokens/typography/font-size~~\"\~~nimport { letterSpacing } from \"@fd/themes/tokens/typography/letter-spacing~~\"\~~nimport { lineHeight } from \"@fd/themes/tokens/typography/line-height~~\"\~~n\ninterface ButtonStyleOverrides {\n styleOverrides: {\n root: Record<string, string \| { [key: string]: string }>;\n sizeSmall: Record<string, string \| { [key: string]: string }>;\n sizeMedium: Record<string, string \| { [key: string]: string }>;\n sizeLarge: Record<string, string \| { [key: string]: string }>;\n };\n}\n\nexport const buttonStyleOverrides = (baseTheme: Theme): ButtonStyleOverrides => ({\n styleOverrides: {\n root: {\n textAlign: 'center',\n textTransform: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flex: '1 0 0',\n alignSelf: 'stretch',\n },\n sizeSmall: {\n height: '32px',\n padding: '0px 12px',\n fontStyle: 'normal',\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSize.desktop.caption,\n lineHeight: 'normal', // normal vs lineHeight.desktop.caption due to mui issue with text alignment https://github.com/mui/material-ui/issues/29965\n letterSpacing: letterSpacing.desktop.caption,\n fontWeight: '600',\n [baseTheme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.body,\n fontSize: fontSize.mobile.caption,\n lineHeight: lineHeight.mobile.caption,\n letterSpacing: letterSpacing.mobile.caption,\n },\n },\n sizeMedium: {\n height: '48px',\n gap: '4px',\n padding: '0px 16px',\n fontStyle: 'normal',\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSize.desktop.b1,\n lineHeight: 'normal',\n letterSpacing: letterSpacing.desktop.b1,\n fontWeight: '600',\n [baseTheme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.body,\n fontSize: fontSize.mobile.b1,\n lineHeight: lineHeight.mobile.b1,\n letterSpacing: letterSpacing.mobile.b1,\n },\n },\n sizeLarge: {\n height: '64px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flex: '1 0 0',\n alignSelf: 'stretch',\n gap: '4px',\n padding: '0px 24px',\n fontStyle: 'normal',\n fontFamily: fontFamily.desktop.heading,\n fontSize: fontSize.desktop.h4,\n lineHeight: 'normal',\n letterSpacing: letterSpacing.desktop.h4,\n fontWeight: '600',\n [baseTheme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.heading,\n fontSize: fontSize.mobile.h4,\n lineHeight: lineHeight.mobile.h4,\n letterSpacing: letterSpacing.mobile.h4,\n },\n },\n },\n})\n"],"names":["buttonStyleOverrides","baseTheme","styleOverrides","root","textAlign","textTransform","display","alignItems","justifyContent","flex","alignSelf","sizeSmall","height","padding","fontStyle","fontFamily","desktop","body","fontSize","caption","lineHeight","letterSpacing","fontWeight","breakpoints","down","mobile","sizeMedium","gap","b1","sizeLarge","heading","h4"],"mappings":"6VAgBaA,EAAwBC,IAAgB,~~CACjDC~~,eAAgB,~~CAChBC~~,KAAM,CACJC,UAAW,SACXC,cAAe,OACfC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,KAAM,QACNC,UAAW,WAEbC,UAAW,CACTC,OAAQ,OACRC,QAAS,WACTC,UAAW,SACXC,WAAYA,EAAWC,QAAQC,KAC/BC,SAAUA,EAASF,QAAQG,QAC3BC,WAAY,SACZC,cAAeA,EAAcL,QAAQG,QACrCG,WAAY,MACZ,CAACrB,EAAUsB,YAAYC,KAAK,WAAY,CACtCT,WAAYA,EAAWU,OAAOR,KAC9BC,SAAUA,EAASO,OAAON,QAC1BC,WAAYA,EAAWK,OAAON,QAC9BE,cAAeA,EAAcI,OAAON,UAGxCO,WAAY,CACVd,OAAQ,OACRe,IAAK,MACLd,QAAS,WACTC,UAAW,SACXC,WAAYA,EAAWC,QAAQC,KAC/BC,SAAUA,EAASF,QAAQY,GAC3BR,WAAY,SACZC,cAAeA,EAAcL,QAAQY,GACrCN,WAAY,MACZ,CAACrB,EAAUsB,YAAYC,KAAK,WAAY,CACtCT,WAAYA,EAAWU,OAAOR,KAC9BC,SAAUA,EAASO,OAAOG,GAC1BR,WAAYA,EAAWK,OAAOG,GAC9BP,cAAeA,EAAcI,OAAOG,KAGxCC,UAAW,CACTjB,OAAQ,OACRN,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,KAAM,QACNC,UAAW,UACXiB,IAAK,MACLd,QAAS,WACTC,UAAW,SACXC,WAAYA,EAAWC,QAAQc,QAC/BZ,SAAUA,EAASF,QAAQe,GAC3BX,WAAY,SACZC,cAAeA,EAAcL,QAAQe,GACrCT,WAAY,MACZ,CAACrB,EAAUsB,YAAYC,KAAK,WAAY,CACtCT,WAAYA,EAAWU,OAAOK,QAC9BZ,SAAUA,EAASO,OAAOM,GAC1BX,WAAYA,EAAWK,OAAOM,GAC9BV,cAAeA,EAAcI,OAAOM"}
1	+ {"version":3,"file":"buttonThemeOverrides.js","sources":["../../../../src/components/atoms/Button/buttonThemeOverrides.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { fontSize } from '@fd/themes/tokens/typography/font-size';\nimport { letterSpacing } from '@fd/themes/tokens/typography/letter-spacing';\nimport { lineHeight } from '@fd/themes/tokens/typography/line-height';\n\ninterface ButtonStyleOverrides {\n styleOverrides: {\n root: Record<string, string \| { [key: string]: string }>;\n sizeSmall: Record<string, string \| { [key: string]: string }>;\n sizeMedium: Record<string, string \| { [key: string]: string }>;\n sizeLarge: Record<string, string \| { [key: string]: string }>;\n };\n}\n\nexport const buttonStyleOverrides = (baseTheme: Theme): ButtonStyleOverrides => ({\n styleOverrides: {\n root: {\n textAlign: 'center',\n textTransform: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flex: '1 0 0',\n alignSelf: 'stretch',\n },\n sizeSmall: {\n height: '32px',\n padding: '0px 12px',\n fontStyle: 'normal',\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSize.desktop.caption,\n lineHeight: 'normal', // normal vs lineHeight.desktop.caption due to mui issue with text alignment https://github.com/mui/material-ui/issues/29965\n letterSpacing: letterSpacing.desktop.caption,\n fontWeight: '600',\n [baseTheme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.body,\n fontSize: fontSize.mobile.caption,\n lineHeight: lineHeight.mobile.caption,\n letterSpacing: letterSpacing.mobile.caption,\n },\n },\n sizeMedium: {\n height: '48px',\n gap: '4px',\n padding: '0px 16px',\n fontStyle: 'normal',\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSize.desktop.b1,\n lineHeight: 'normal',\n letterSpacing: letterSpacing.desktop.b1,\n fontWeight: '600',\n [baseTheme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.body,\n fontSize: fontSize.mobile.b1,\n lineHeight: lineHeight.mobile.b1,\n letterSpacing: letterSpacing.mobile.b1,\n },\n },\n sizeLarge: {\n height: '64px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flex: '1 0 0',\n alignSelf: 'stretch',\n gap: '4px',\n padding: '0px 24px',\n fontStyle: 'normal',\n fontFamily: fontFamily.desktop.heading,\n fontSize: fontSize.desktop.h4,\n lineHeight: 'normal',\n letterSpacing: letterSpacing.desktop.h4,\n fontWeight: '600',\n [baseTheme.breakpoints.down('tablet')]: {\n fontFamily: fontFamily.mobile.heading,\n fontSize: fontSize.mobile.h4,\n lineHeight: lineHeight.mobile.h4,\n letterSpacing: letterSpacing.mobile.h4,\n },\n },\n },\n});\n"],"names":["buttonStyleOverrides","baseTheme","styleOverrides","root","textAlign","textTransform","display","alignItems","justifyContent","flex","alignSelf","sizeSmall","height","padding","fontStyle","fontFamily","desktop","body","fontSize","caption","lineHeight","letterSpacing","fontWeight","breakpoints","down","mobile","sizeMedium","gap","b1","sizeLarge","heading","h4"],"mappings":"6VAgBaA,EAAwBC,IAAgB,CACnDC,eAAgB,CACdC,KAAM,CACJC,UAAW,SACXC,cAAe,OACfC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,KAAM,QACNC,UAAW,WAEbC,UAAW,CACTC,OAAQ,OACRC,QAAS,WACTC,UAAW,SACXC,WAAYA,EAAWC,QAAQC,KAC/BC,SAAUA,EAASF,QAAQG,QAC3BC,WAAY,SACZC,cAAeA,EAAcL,QAAQG,QACrCG,WAAY,MACZ,CAACrB,EAAUsB,YAAYC,KAAK,WAAY,CACtCT,WAAYA,EAAWU,OAAOR,KAC9BC,SAAUA,EAASO,OAAON,QAC1BC,WAAYA,EAAWK,OAAON,QAC9BE,cAAeA,EAAcI,OAAON,UAGxCO,WAAY,CACVd,OAAQ,OACRe,IAAK,MACLd,QAAS,WACTC,UAAW,SACXC,WAAYA,EAAWC,QAAQC,KAC/BC,SAAUA,EAASF,QAAQY,GAC3BR,WAAY,SACZC,cAAeA,EAAcL,QAAQY,GACrCN,WAAY,MACZ,CAACrB,EAAUsB,YAAYC,KAAK,WAAY,CACtCT,WAAYA,EAAWU,OAAOR,KAC9BC,SAAUA,EAASO,OAAOG,GAC1BR,WAAYA,EAAWK,OAAOG,GAC9BP,cAAeA,EAAcI,OAAOG,KAGxCC,UAAW,CACTjB,OAAQ,OACRN,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,KAAM,QACNC,UAAW,UACXiB,IAAK,MACLd,QAAS,WACTC,UAAW,SACXC,WAAYA,EAAWC,QAAQc,QAC/BZ,SAAUA,EAASF,QAAQe,GAC3BX,WAAY,SACZC,cAAeA,EAAcL,QAAQe,GACrCT,WAAY,MACZ,CAACrB,EAAUsB,YAAYC,KAAK,WAAY,CACtCT,WAAYA,EAAWU,OAAOK,QAC9BZ,SAAUA,EAASO,OAAOM,GAC1BX,WAAYA,EAAWK,OAAOM,GAC9BV,cAAeA,EAAcI,OAAOM"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Radio/index.tsx"],"sourcesContent":["import MuiRadio, { type RadioProps as MuiRadioProps } from '@mui/material/Radio';\nimport { styled, useTheme } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\n\nconst IconWrapper = styled('span')(({ theme }) => ({\n display: 'inline-flex',\n borderRadius: '50%',\n position: 'relative',\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '95%',\n height: '95%',\n borderRadius: '50%',\n pointerEvents: 'none',\n opacity: 0,\n transition: 'opacity 150ms ease',\n },\n}));\n\n// Custom unchecked icon - gray or red border circle\nconst RadioUncheckedIcon = ({\n error = false,\n disabled = false,\n size = 'medium'\n}: {\n error?: boolean;\n disabled?: boolean;\n size?: 'medium' \| 'small';\n}): React.ReactElement => {\n const theme = useTheme();\n const strokeColor = disabled\n ? theme.palette.semantic.fill['fill-disabled']\n : error\n ? theme.palette.semantic.fill['fill-error-strong']\n : theme.palette.semantic.stroke['stroke-strong'];\n const svgSize = size === 'small' ? 24 : 32;\n const fillBackground = error ? theme.palette.semantic.fill['fill-error-weak'] : theme.palette.semantic.fill['fill-inverse-strong'];\n return (\n <IconWrapper>\n <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n <circle\n cx=\"10\"\n cy=\"10\"\n fill={fillBackground}\n r=\"9\"\n stroke={strokeColor}\n strokeWidth=\"1\"\n />\n </svg>\n </IconWrapper>\n );\n};\n\n// Custom checked icon - blue or red filled circle with white center dot\nconst RadioCheckedIcon = ({\n error = false,\n disabled = false,\n size = 'medium'\n}: {\n error?: boolean;\n disabled?: boolean;\n size?: 'medium' \| 'small';\n}): React.ReactElement => {\n const theme = useTheme();\n const fillColor = disabled\n ? theme.palette.action.disabled\n : error\n ? theme.palette.semantic.fill['fill-error-strong']\n : theme.palette.semantic.fill['fill-selected'];\n const svgSize = size === 'small' ? 24 : 32;\n return (\n <IconWrapper>\n <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n <circle\n cx=\"10\"\n cy=\"10\"\n fill={fillColor}\n r=\"9\"\n stroke={fillColor}\n strokeWidth=\"1\"\n />\n <circle\n cx=\"10\"\n cy=\"10\"\n fill={theme.palette.semantic.fill['fill-inverse-strong']}\n r=\"3\"\n />\n </svg>\n </IconWrapper>\n );\n};\n\n// Styled Radio with custom icons\nconst StyledRadio = styled(MuiRadio)(({ theme }) => ({\n padding: 0,\n '&:hover:not(.Mui-disabled) span::before': {\n opacity: 1,\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active:not(.Mui-disabled) span::before': {\n opacity: 1,\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n}));\n\n/** Props for a radio /\nexport type RadioProps = Omit<MuiRadioProps, 'size'> & {\n /* Whether the radio is disabled. /\n disabled?: boolean;\n /* The size of the radio. /\n size?: 'medium' \| 'small';\n /* Whether the radio is required. /\n required?: boolean;\n /* The identifier of the radio. /\n fdKey?: string;\n /* Whether the radio is in an error state. /\n error?: boolean;\n};\n\nconst StyledRadioContainer = styled(Box)(() => ({\n margin: 0,\n position: 'relative',\n}));\n\n/\n Radio component is a wrapper component for a radio.\n \n @param checked - Whether the radio is checked.\n * @param size - The size of the radio.\n * @param fdKey - The identifier of the radio.\n * @param disabled - Whether the radio is disabled.\n * @param error - Whether the radio is in an error state.\n * @param props - Additional props to pass to the underlying MUI Radio component.\n * @returns The Radio component.\n */\nexport const Radio = ({\n disabled = false,\n size = 'medium',\n fdKey = 'basic-radio',\n error = false,\n checked,\n ...props\n}: RadioProps): React.ReactElement => {\n const isError = error && !disabled;\n\n return (\n <StyledRadioContainer>\n <StyledRadio\n disableFocusRipple\n disableRipple\n disableTouchRipple\n checked={checked}\n checkedIcon={<RadioCheckedIcon disabled={disabled} error={isError} size={size} />}\n data-fd={fdKey}\n disabled={disabled}\n icon={<RadioUncheckedIcon disabled={disabled} error={isError} size={size} />}\n size={size}\n {...props}\n />\n </StyledRadioContainer>\n );\n};\n\nexport default Radio;\n"],"names":["IconWrapper","styled","theme","display","borderRadius","position","outline","palette","semantic","stroke","outlineOffset","content","top","left","transform","width","height","pointerEvents","opacity","transition","RadioUncheckedIcon","error","disabled","size","useTheme","strokeColor","fill","svgSize","fillBackground","_jsx","children","viewBox","cx","cy","r","strokeWidth","RadioCheckedIcon","fillColor","action","_jsxs","StyledRadio","MuiRadio","padding","backgroundColor","StyledRadioContainer","Box","margin","Radio","fdKey","checked","props","isError","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","icon"],"mappings":"yMAKA,MAAMA,EAAcC,EAAAA,OAAO,OAAPA,EAAe,EAAGC,YAAO,CAC3CC,QAAS,cACTC,aAAc,MACdC,SAAU,WACV,kBAAmB,CACjBC,QAAS,aAAaJ,EAAMK,QAAQC,SAASC,OAAO,kBACpDC,cAAe,OAEjB,YAAa,CACXC,QAAS,KACTN,SAAU,WACVO,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,MAAO,MACPC,OAAQ,MACRZ,aAAc,MACda,cAAe,OACfC,QAAS,EACTC,WAAY,0BAKVC,EAAqB,EACzBC,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,EAAAA,WACRC,EAAcH,EAChBpB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BL,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASC,OAAO,iBAC9BkB,EAAmB,UAATJ,EAAmB,GAAK,GAClCK,EAAiBP,~~EAAQnB~~,EAAMK,QAAQC,SAASkB,KAAK,~~mBAAqBxB~~,EAAMK,QAAQC,SAASkB,KAAK,~~uBAC5G~~,OACEG,EAAAA,IAAC7B,EAAW,CAAA8B,SACVD,EAAAA,WAAKH,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,EAAOG,SAClED,EAAAA,IAAA,SAAA,~~CACEG~~,GAAG,~~KACHC~~,GAAG,~~KACHP~~,KAAME,~~EACNM~~,EAAE,~~IACFzB~~,OAAQgB,~~EACRU~~,YAAY,~~WAQhBC~~,EAAmB,EACvBf,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,EAAAA,WACRa,EAAYf,EACdpB,EAAMK,QAAQ+B,OAAOhB,SACrBD,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BC,EAAmB,UAATJ,EAAmB,GAAK,GACxC,OACEM,MAAC7B,EAAW,CAAA8B,SACVS,EAAAA,KAAA,MAAA,CAAKb,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,YAC3DE,EAAAA,IAAA,SAAA,~~CACEG~~,GAAG,~~KACHC~~,GAAG,~~KACHP~~,KAAMW,~~EACNH~~,EAAE,~~IACFzB~~,OAAQ4B,~~EACRF~~,YAAY,~~MAEdN~~,EAAAA,IAAA,SAAA,~~CACEG~~,GAAG,~~KACHC~~,GAAG,~~KACHP~~,KAAMxB,EAAMK,QAAQC,SAASkB,KAAK,~~uBAClCQ~~,EAAE,~~YAQNM~~,EAAcvC,EAAAA,OAAOwC,EAAPxC,EAAiB,EAAGC,YAAO,CAC7CwC,QAAS,EACT,0CAA2C,CACzCxB,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,eAE/C,2CAA4C,CAC1CR,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,mBAkB3CkB,EAAuB3C,EAAAA,OAAO4C,EAAP5C,EAAY,KAAA,CACvC6C,OAAQ,EACRzC,SAAU,eAcC0C,EAAQ,EACnBzB,YAAW,EACXC,OAAO,SACPyB,QAAQ,cACR3B,SAAQ,EACR4B,aACGC,MAEH,MAAMC,EAAU9B,IAAUC,EAE1B,OACEO,EAAAA,IAACe,EAAoB,CAAAd,SACnBD,EAAAA,IAACW,EAAW,CACVY,oBAAkB,EAClBC,eAAa,EACbC,sBACAL,QAASA,EACTM,YAAa1B,EAAAA,IAACO,GAAiBd,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IAAQ,UACxEyB,EACT1B,SAAUA,EACVkC,KAAM3B,EAAAA,IAACT,EAAkB,CAACE,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IACpEA,KAAMA,KACF2B"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Radio/index.tsx"],"sourcesContent":["import MuiRadio, { type RadioProps as MuiRadioProps } from '@mui/material/Radio';\nimport { styled, useTheme } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\n\nconst IconWrapper = styled('span')(({ theme }) => ({\n display: 'inline-flex',\n borderRadius: '50%',\n position: 'relative',\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '95%',\n height: '95%',\n borderRadius: '50%',\n pointerEvents: 'none',\n opacity: 0,\n transition: 'opacity 150ms ease',\n },\n}));\n\n// Custom unchecked icon - gray or red border circle\nconst RadioUncheckedIcon = ({\n error = false,\n disabled = false,\n size = 'medium',\n}: {\n error?: boolean;\n disabled?: boolean;\n size?: 'medium' \| 'small';\n}): React.ReactElement => {\n const theme = useTheme();\n const strokeColor = disabled\n ? theme.palette.semantic.fill['fill-disabled']\n : error\n ? theme.palette.semantic.fill['fill-error-strong']\n : theme.palette.semantic.stroke['stroke-strong'];\n const svgSize = size === 'small' ? 24 : 32;\n const fillBackground = error\n ? theme.palette.semantic.fill['fill-error-weak']\n : theme.palette.semantic.fill['fill-inverse-strong'];\n return (\n <IconWrapper>\n <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n <circle cx=\"10\" cy=\"10\" fill={fillBackground} r=\"9\" stroke={strokeColor} strokeWidth=\"1\" />\n </svg>\n </IconWrapper>\n );\n};\n\n// Custom checked icon - blue or red filled circle with white center dot\nconst RadioCheckedIcon = ({\n error = false,\n disabled = false,\n size = 'medium',\n}: {\n error?: boolean;\n disabled?: boolean;\n size?: 'medium' \| 'small';\n}): React.ReactElement => {\n const theme = useTheme();\n const fillColor = disabled\n ? theme.palette.action.disabled\n : error\n ? theme.palette.semantic.fill['fill-error-strong']\n : theme.palette.semantic.fill['fill-selected'];\n const svgSize = size === 'small' ? 24 : 32;\n return (\n <IconWrapper>\n <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n <circle cx=\"10\" cy=\"10\" fill={fillColor} r=\"9\" stroke={fillColor} strokeWidth=\"1\" />\n <circle cx=\"10\" cy=\"10\" fill={theme.palette.semantic.fill['fill-inverse-strong']} r=\"3\" />\n </svg>\n </IconWrapper>\n );\n};\n\n// Styled Radio with custom icons\nconst StyledRadio = styled(MuiRadio)(({ theme }) => ({\n padding: 0,\n '&:hover:not(.Mui-disabled) span::before': {\n opacity: 1,\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active:not(.Mui-disabled) span::before': {\n opacity: 1,\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n}));\n\n/** Props for a radio /\nexport type RadioProps = Omit<MuiRadioProps, 'size'> & {\n /* Whether the radio is disabled. /\n disabled?: boolean;\n /* The size of the radio. /\n size?: 'medium' \| 'small';\n /* Whether the radio is required. /\n required?: boolean;\n /* The identifier of the radio. /\n fdKey?: string;\n /* Whether the radio is in an error state. /\n error?: boolean;\n};\n\nconst StyledRadioContainer = styled(Box)(() => ({\n margin: 0,\n position: 'relative',\n}));\n\n/\n Radio component is a wrapper component for a radio.\n \n @param checked - Whether the radio is checked.\n * @param size - The size of the radio.\n * @param fdKey - The identifier of the radio.\n * @param disabled - Whether the radio is disabled.\n * @param error - Whether the radio is in an error state.\n * @param props - Additional props to pass to the underlying MUI Radio component.\n * @returns The Radio component.\n */\nexport const Radio = ({\n disabled = false,\n size = 'medium',\n fdKey = 'basic-radio',\n error = false,\n checked,\n ...props\n}: RadioProps): React.ReactElement => {\n const isError = error && !disabled;\n\n return (\n <StyledRadioContainer>\n <StyledRadio\n disableFocusRipple\n disableRipple\n disableTouchRipple\n checked={checked}\n checkedIcon={<RadioCheckedIcon disabled={disabled} error={isError} size={size} />}\n data-fd={fdKey}\n disabled={disabled}\n icon={<RadioUncheckedIcon disabled={disabled} error={isError} size={size} />}\n size={size}\n {...props}\n />\n </StyledRadioContainer>\n );\n};\n\nexport default Radio;\n"],"names":["IconWrapper","styled","theme","display","borderRadius","position","outline","palette","semantic","stroke","outlineOffset","content","top","left","transform","width","height","pointerEvents","opacity","transition","RadioUncheckedIcon","error","disabled","size","useTheme","strokeColor","fill","svgSize","fillBackground","_jsx","children","viewBox","cx","cy","r","strokeWidth","RadioCheckedIcon","fillColor","action","_jsxs","StyledRadio","MuiRadio","padding","backgroundColor","StyledRadioContainer","Box","margin","Radio","fdKey","checked","props","isError","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","icon"],"mappings":"yMAKA,MAAMA,EAAcC,EAAAA,OAAO,OAAPA,EAAe,EAAGC,YAAO,CAC3CC,QAAS,cACTC,aAAc,MACdC,SAAU,WACV,kBAAmB,CACjBC,QAAS,aAAaJ,EAAMK,QAAQC,SAASC,OAAO,kBACpDC,cAAe,OAEjB,YAAa,CACXC,QAAS,KACTN,SAAU,WACVO,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,MAAO,MACPC,OAAQ,MACRZ,aAAc,MACda,cAAe,OACfC,QAAS,EACTC,WAAY,0BAKVC,EAAqB,EACzBC,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,EAAAA,WACRC,EAAcH,EAChBpB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BL,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASC,OAAO,iBAC9BkB,EAAmB,UAATJ,EAAmB,GAAK,GAClCK,EAAiBP,EACnBnB,EAAMK,QAAQC,SAASkB,KAAK,mBAC5BxB,EAAMK,QAAQC,SAASkB,KAAK,uBAChC,OACEG,EAAAA,IAAC7B,EAAW,CAAA8B,SACVD,EAAAA,WAAKH,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,EAAOG,SAClED,EAAAA,IAAA,SAAA,CAAQG,GAAG,KAAKC,GAAG,KAAKP,KAAME,EAAgBM,EAAE,IAAIzB,OAAQgB,EAAaU,YAAY,WAOvFC,EAAmB,EACvBf,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,EAAAA,WACRa,EAAYf,EACdpB,EAAMK,QAAQ+B,OAAOhB,SACrBD,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BC,EAAmB,UAATJ,EAAmB,GAAK,GACxC,OACEM,MAAC7B,EAAW,CAAA8B,SACVS,EAAAA,KAAA,MAAA,CAAKb,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,YAC3DE,EAAAA,IAAA,SAAA,CAAQG,GAAG,KAAKC,GAAG,KAAKP,KAAMW,EAAWH,EAAE,IAAIzB,OAAQ4B,EAAWF,YAAY,MAC9EN,EAAAA,IAAA,SAAA,CAAQG,GAAG,KAAKC,GAAG,KAAKP,KAAMxB,EAAMK,QAAQC,SAASkB,KAAK,uBAAwBQ,EAAE,YAOtFM,EAAcvC,EAAAA,OAAOwC,EAAPxC,EAAiB,EAAGC,YAAO,CAC7CwC,QAAS,EACT,0CAA2C,CACzCxB,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,eAE/C,2CAA4C,CAC1CR,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,mBAkB3CkB,EAAuB3C,EAAAA,OAAO4C,EAAP5C,EAAY,KAAA,CACvC6C,OAAQ,EACRzC,SAAU,eAcC0C,EAAQ,EACnBzB,YAAW,EACXC,OAAO,SACPyB,QAAQ,cACR3B,SAAQ,EACR4B,aACGC,MAEH,MAAMC,EAAU9B,IAAUC,EAE1B,OACEO,EAAAA,IAACe,EAAoB,CAAAd,SACnBD,EAAAA,IAACW,EAAW,CACVY,oBAAkB,EAClBC,eAAa,EACbC,sBACAL,QAASA,EACTM,YAAa1B,EAAAA,IAACO,GAAiBd,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IAAQ,UACxEyB,EACT1B,SAAUA,EACVkC,KAAM3B,EAAAA,IAACT,EAAkB,CAACE,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IACpEA,KAAMA,KACF2B"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Radio/index.tsx"],"sourcesContent":["import MuiRadio, { type RadioProps as MuiRadioProps } from '@mui/material/Radio';\nimport { styled, useTheme } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\n\nconst IconWrapper = styled('span')(({ theme }) => ({\n display: 'inline-flex',\n borderRadius: '50%',\n position: 'relative',\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '95%',\n height: '95%',\n borderRadius: '50%',\n pointerEvents: 'none',\n opacity: 0,\n transition: 'opacity 150ms ease',\n },\n}));\n\n// Custom unchecked icon - gray or red border circle\nconst RadioUncheckedIcon = ({\n error = false,\n disabled = false,\n size = 'medium'\n}: {\n error?: boolean;\n disabled?: boolean;\n size?: 'medium' \| 'small';\n}): React.ReactElement => {\n const theme = useTheme();\n const strokeColor = disabled\n ? theme.palette.semantic.fill['fill-disabled']\n : error\n ? theme.palette.semantic.fill['fill-error-strong']\n : theme.palette.semantic.stroke['stroke-strong'];\n const svgSize = size === 'small' ? 24 : 32;\n const fillBackground = error ? theme.palette.semantic.fill['fill-error-weak'] : theme.palette.semantic.fill['fill-inverse-strong'];\n return (\n <IconWrapper>\n <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n <circle\n cx=\"10\"\n cy=\"10\"\n fill={fillBackground}\n r=\"9\"\n stroke={strokeColor}\n strokeWidth=\"1\"\n />\n </svg>\n </IconWrapper>\n );\n};\n\n// Custom checked icon - blue or red filled circle with white center dot\nconst RadioCheckedIcon = ({\n error = false,\n disabled = false,\n size = 'medium'\n}: {\n error?: boolean;\n disabled?: boolean;\n size?: 'medium' \| 'small';\n}): React.ReactElement => {\n const theme = useTheme();\n const fillColor = disabled\n ? theme.palette.action.disabled\n : error\n ? theme.palette.semantic.fill['fill-error-strong']\n : theme.palette.semantic.fill['fill-selected'];\n const svgSize = size === 'small' ? 24 : 32;\n return (\n <IconWrapper>\n <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n <circle\n cx=\"10\"\n cy=\"10\"\n fill={fillColor}\n r=\"9\"\n stroke={fillColor}\n strokeWidth=\"1\"\n />\n <circle\n cx=\"10\"\n cy=\"10\"\n fill={theme.palette.semantic.fill['fill-inverse-strong']}\n r=\"3\"\n />\n </svg>\n </IconWrapper>\n );\n};\n\n// Styled Radio with custom icons\nconst StyledRadio = styled(MuiRadio)(({ theme }) => ({\n padding: 0,\n '&:hover:not(.Mui-disabled) span::before': {\n opacity: 1,\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active:not(.Mui-disabled) span::before': {\n opacity: 1,\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n}));\n\n/** Props for a radio /\nexport type RadioProps = Omit<MuiRadioProps, 'size'> & {\n /* Whether the radio is disabled. /\n disabled?: boolean;\n /* The size of the radio. /\n size?: 'medium' \| 'small';\n /* Whether the radio is required. /\n required?: boolean;\n /* The identifier of the radio. /\n fdKey?: string;\n /* Whether the radio is in an error state. /\n error?: boolean;\n};\n\nconst StyledRadioContainer = styled(Box)(() => ({\n margin: 0,\n position: 'relative',\n}));\n\n/\n Radio component is a wrapper component for a radio.\n \n @param checked - Whether the radio is checked.\n * @param size - The size of the radio.\n * @param fdKey - The identifier of the radio.\n * @param disabled - Whether the radio is disabled.\n * @param error - Whether the radio is in an error state.\n * @param props - Additional props to pass to the underlying MUI Radio component.\n * @returns The Radio component.\n */\nexport const Radio = ({\n disabled = false,\n size = 'medium',\n fdKey = 'basic-radio',\n error = false,\n checked,\n ...props\n}: RadioProps): React.ReactElement => {\n const isError = error && !disabled;\n\n return (\n <StyledRadioContainer>\n <StyledRadio\n disableFocusRipple\n disableRipple\n disableTouchRipple\n checked={checked}\n checkedIcon={<RadioCheckedIcon disabled={disabled} error={isError} size={size} />}\n data-fd={fdKey}\n disabled={disabled}\n icon={<RadioUncheckedIcon disabled={disabled} error={isError} size={size} />}\n size={size}\n {...props}\n />\n </StyledRadioContainer>\n );\n};\n\nexport default Radio;\n"],"names":["IconWrapper","styled","theme","display","borderRadius","position","outline","palette","semantic","stroke","outlineOffset","content","top","left","transform","width","height","pointerEvents","opacity","transition","RadioUncheckedIcon","error","disabled","size","useTheme","strokeColor","fill","svgSize","fillBackground","_jsx","children","viewBox","cx","cy","r","strokeWidth","RadioCheckedIcon","fillColor","action","_jsxs","StyledRadio","MuiRadio","padding","backgroundColor","StyledRadioContainer","Box","margin","Radio","fdKey","checked","props","isError","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","icon"],"mappings":"kLAKA,MAAMA,EAAcC,EAAO,OAAPA,EAAe,EAAGC,YAAO,CAC3CC,QAAS,cACTC,aAAc,MACdC,SAAU,WACV,kBAAmB,CACjBC,QAAS,aAAaJ,EAAMK,QAAQC,SAASC,OAAO,kBACpDC,cAAe,OAEjB,YAAa,CACXC,QAAS,KACTN,SAAU,WACVO,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,MAAO,MACPC,OAAQ,MACRZ,aAAc,MACda,cAAe,OACfC,QAAS,EACTC,WAAY,0BAKVC,EAAqB,EACzBC,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,IACRC,EAAcH,EAChBpB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BL,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASC,OAAO,iBAC9BkB,EAAmB,UAATJ,EAAmB,GAAK,GAClCK,EAAiBP,~~EAAQnB~~,EAAMK,QAAQC,SAASkB,KAAK,~~mBAAqBxB~~,EAAMK,QAAQC,SAASkB,KAAK,~~uBAC5G~~,OACEG,EAAC7B,EAAW,CAAA8B,SACVD,SAAKH,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,EAAOG,SAClED,EAAA,SAAA,~~CACEG~~,GAAG,~~KACHC~~,GAAG,~~KACHP~~,KAAME,~~EACNM~~,EAAE,~~IACFzB~~,OAAQgB,~~EACRU~~,YAAY,~~WAQhBC~~,EAAmB,EACvBf,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,IACRa,EAAYf,EACdpB,EAAMK,QAAQ+B,OAAOhB,SACrBD,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BC,EAAmB,UAATJ,EAAmB,GAAK,GACxC,OACEM,EAAC7B,EAAW,CAAA8B,SACVS,EAAA,MAAA,CAAKb,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,YAC3DE,EAAA,SAAA,~~CACEG~~,GAAG,~~KACHC~~,GAAG,~~KACHP~~,KAAMW,~~EACNH~~,EAAE,~~IACFzB~~,OAAQ4B,~~EACRF~~,YAAY,~~MAEdN~~,EAAA,SAAA,~~CACEG~~,GAAG,~~KACHC~~,GAAG,~~KACHP~~,KAAMxB,EAAMK,QAAQC,SAASkB,KAAK,~~uBAClCQ~~,EAAE,~~YAQNM~~,EAAcvC,EAAOwC,EAAPxC,EAAiB,EAAGC,YAAO,CAC7CwC,QAAS,EACT,0CAA2C,CACzCxB,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,eAE/C,2CAA4C,CAC1CR,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,mBAkB3CkB,EAAuB3C,EAAO4C,EAAP5C,EAAY,KAAA,CACvC6C,OAAQ,EACRzC,SAAU,eAcC0C,EAAQ,EACnBzB,YAAW,EACXC,OAAO,SACPyB,QAAQ,cACR3B,SAAQ,EACR4B,aACGC,MAEH,MAAMC,EAAU9B,IAAUC,EAE1B,OACEO,EAACe,EAAoB,CAAAd,SACnBD,EAACW,EAAW,CACVY,oBAAkB,EAClBC,eAAa,EACbC,sBACAL,QAASA,EACTM,YAAa1B,EAACO,GAAiBd,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IAAQ,UACxEyB,EACT1B,SAAUA,EACVkC,KAAM3B,EAACT,EAAkB,CAACE,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IACpEA,KAAMA,KACF2B"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Radio/index.tsx"],"sourcesContent":["import MuiRadio, { type RadioProps as MuiRadioProps } from '@mui/material/Radio';\nimport { styled, useTheme } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\n\nconst IconWrapper = styled('span')(({ theme }) => ({\n display: 'inline-flex',\n borderRadius: '50%',\n position: 'relative',\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '95%',\n height: '95%',\n borderRadius: '50%',\n pointerEvents: 'none',\n opacity: 0,\n transition: 'opacity 150ms ease',\n },\n}));\n\n// Custom unchecked icon - gray or red border circle\nconst RadioUncheckedIcon = ({\n error = false,\n disabled = false,\n size = 'medium',\n}: {\n error?: boolean;\n disabled?: boolean;\n size?: 'medium' \| 'small';\n}): React.ReactElement => {\n const theme = useTheme();\n const strokeColor = disabled\n ? theme.palette.semantic.fill['fill-disabled']\n : error\n ? theme.palette.semantic.fill['fill-error-strong']\n : theme.palette.semantic.stroke['stroke-strong'];\n const svgSize = size === 'small' ? 24 : 32;\n const fillBackground = error\n ? theme.palette.semantic.fill['fill-error-weak']\n : theme.palette.semantic.fill['fill-inverse-strong'];\n return (\n <IconWrapper>\n <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n <circle cx=\"10\" cy=\"10\" fill={fillBackground} r=\"9\" stroke={strokeColor} strokeWidth=\"1\" />\n </svg>\n </IconWrapper>\n );\n};\n\n// Custom checked icon - blue or red filled circle with white center dot\nconst RadioCheckedIcon = ({\n error = false,\n disabled = false,\n size = 'medium',\n}: {\n error?: boolean;\n disabled?: boolean;\n size?: 'medium' \| 'small';\n}): React.ReactElement => {\n const theme = useTheme();\n const fillColor = disabled\n ? theme.palette.action.disabled\n : error\n ? theme.palette.semantic.fill['fill-error-strong']\n : theme.palette.semantic.fill['fill-selected'];\n const svgSize = size === 'small' ? 24 : 32;\n return (\n <IconWrapper>\n <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n <circle cx=\"10\" cy=\"10\" fill={fillColor} r=\"9\" stroke={fillColor} strokeWidth=\"1\" />\n <circle cx=\"10\" cy=\"10\" fill={theme.palette.semantic.fill['fill-inverse-strong']} r=\"3\" />\n </svg>\n </IconWrapper>\n );\n};\n\n// Styled Radio with custom icons\nconst StyledRadio = styled(MuiRadio)(({ theme }) => ({\n padding: 0,\n '&:hover:not(.Mui-disabled) span::before': {\n opacity: 1,\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active:not(.Mui-disabled) span::before': {\n opacity: 1,\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n}));\n\n/** Props for a radio /\nexport type RadioProps = Omit<MuiRadioProps, 'size'> & {\n /* Whether the radio is disabled. /\n disabled?: boolean;\n /* The size of the radio. /\n size?: 'medium' \| 'small';\n /* Whether the radio is required. /\n required?: boolean;\n /* The identifier of the radio. /\n fdKey?: string;\n /* Whether the radio is in an error state. /\n error?: boolean;\n};\n\nconst StyledRadioContainer = styled(Box)(() => ({\n margin: 0,\n position: 'relative',\n}));\n\n/\n Radio component is a wrapper component for a radio.\n \n @param checked - Whether the radio is checked.\n * @param size - The size of the radio.\n * @param fdKey - The identifier of the radio.\n * @param disabled - Whether the radio is disabled.\n * @param error - Whether the radio is in an error state.\n * @param props - Additional props to pass to the underlying MUI Radio component.\n * @returns The Radio component.\n */\nexport const Radio = ({\n disabled = false,\n size = 'medium',\n fdKey = 'basic-radio',\n error = false,\n checked,\n ...props\n}: RadioProps): React.ReactElement => {\n const isError = error && !disabled;\n\n return (\n <StyledRadioContainer>\n <StyledRadio\n disableFocusRipple\n disableRipple\n disableTouchRipple\n checked={checked}\n checkedIcon={<RadioCheckedIcon disabled={disabled} error={isError} size={size} />}\n data-fd={fdKey}\n disabled={disabled}\n icon={<RadioUncheckedIcon disabled={disabled} error={isError} size={size} />}\n size={size}\n {...props}\n />\n </StyledRadioContainer>\n );\n};\n\nexport default Radio;\n"],"names":["IconWrapper","styled","theme","display","borderRadius","position","outline","palette","semantic","stroke","outlineOffset","content","top","left","transform","width","height","pointerEvents","opacity","transition","RadioUncheckedIcon","error","disabled","size","useTheme","strokeColor","fill","svgSize","fillBackground","_jsx","children","viewBox","cx","cy","r","strokeWidth","RadioCheckedIcon","fillColor","action","_jsxs","StyledRadio","MuiRadio","padding","backgroundColor","StyledRadioContainer","Box","margin","Radio","fdKey","checked","props","isError","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","icon"],"mappings":"kLAKA,MAAMA,EAAcC,EAAO,OAAPA,EAAe,EAAGC,YAAO,CAC3CC,QAAS,cACTC,aAAc,MACdC,SAAU,WACV,kBAAmB,CACjBC,QAAS,aAAaJ,EAAMK,QAAQC,SAASC,OAAO,kBACpDC,cAAe,OAEjB,YAAa,CACXC,QAAS,KACTN,SAAU,WACVO,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,MAAO,MACPC,OAAQ,MACRZ,aAAc,MACda,cAAe,OACfC,QAAS,EACTC,WAAY,0BAKVC,EAAqB,EACzBC,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,IACRC,EAAcH,EAChBpB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BL,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASC,OAAO,iBAC9BkB,EAAmB,UAATJ,EAAmB,GAAK,GAClCK,EAAiBP,EACnBnB,EAAMK,QAAQC,SAASkB,KAAK,mBAC5BxB,EAAMK,QAAQC,SAASkB,KAAK,uBAChC,OACEG,EAAC7B,EAAW,CAAA8B,SACVD,SAAKH,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,EAAOG,SAClED,EAAA,SAAA,CAAQG,GAAG,KAAKC,GAAG,KAAKP,KAAME,EAAgBM,EAAE,IAAIzB,OAAQgB,EAAaU,YAAY,WAOvFC,EAAmB,EACvBf,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,IACRa,EAAYf,EACdpB,EAAMK,QAAQ+B,OAAOhB,SACrBD,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BC,EAAmB,UAATJ,EAAmB,GAAK,GACxC,OACEM,EAAC7B,EAAW,CAAA8B,SACVS,EAAA,MAAA,CAAKb,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,YAC3DE,EAAA,SAAA,CAAQG,GAAG,KAAKC,GAAG,KAAKP,KAAMW,EAAWH,EAAE,IAAIzB,OAAQ4B,EAAWF,YAAY,MAC9EN,EAAA,SAAA,CAAQG,GAAG,KAAKC,GAAG,KAAKP,KAAMxB,EAAMK,QAAQC,SAASkB,KAAK,uBAAwBQ,EAAE,YAOtFM,EAAcvC,EAAOwC,EAAPxC,EAAiB,EAAGC,YAAO,CAC7CwC,QAAS,EACT,0CAA2C,CACzCxB,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,eAE/C,2CAA4C,CAC1CR,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,mBAkB3CkB,EAAuB3C,EAAO4C,EAAP5C,EAAY,KAAA,CACvC6C,OAAQ,EACRzC,SAAU,eAcC0C,EAAQ,EACnBzB,YAAW,EACXC,OAAO,SACPyB,QAAQ,cACR3B,SAAQ,EACR4B,aACGC,MAEH,MAAMC,EAAU9B,IAAUC,EAE1B,OACEO,EAACe,EAAoB,CAAAd,SACnBD,EAACW,EAAW,CACVY,oBAAkB,EAClBC,eAAa,EACbC,sBACAL,QAASA,EACTM,YAAa1B,EAACO,GAAiBd,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IAAQ,UACxEyB,EACT1B,SAAUA,EACVkC,KAAM3B,EAACT,EAAkB,CAACE,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IACpEA,KAAMA,KACF2B"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel)<{ $size?: 'medium' \| 'small' }>(({ theme, $size = 'medium' }) => ({\n color: theme.palette.semantic.text['text-strong'],\n gap: '12px',\n margin: 0,\n '& .MuiFormControlLabel-label': {\n ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n },\n}));\n\nconst StyledSwitch = styled(MuiSwitch)<{ $size?: 'medium' \| 'small' }>(({ theme, $size = 'medium', checked }) => {\n const isSmall = $size === 'small';\n const width = isSmall ? 48 : 64;\n const height = isSmall ? 24 : 32;\n const thumbSize = isSmall ? 24 : 32;\n const translateX = isSmall ? 24 : 32;\n\n return {\n width,\n height,\n padding: 0,\n overflow: 'visible',\n '& .MuiSwitch-switchBase': {\n padding: 0,\n transitionDuration: '200ms',\n '&.Mui-checked': {\n transform: `translateX(${translateX}px)`,\n color: theme.palette.semantic.fill['fill-white'],\n '& .MuiSwitch-thumb': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n },\n '& + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n opacity: 1,\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '&.Mui-focusVisible + .MuiSwitch-track': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&.Mui-disabled .MuiSwitch-thumb': {\n opacity: 0.5,\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n backgroundColor: theme.palette.semantic.background['background-raised'],\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '& .MuiSwitch-thumb': {\n width: thumbSize,\n height: thumbSize,\n backgroundColor: theme.palette.semantic.background['background-raised'],\n border: `2px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n transition: theme.transitions.create(['border-color'], {\n duration: 200,\n }),\n },\n '& .MuiSwitch-track': {\n borderRadius: height,\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n boxShadow: checked ? 'none' : theme.customShadows?.sunken,\n opacity: 1,\n transition: theme.transitions.create(['background-color', 'border-color', 'outline'], {\n duration: 200,\n }),\n },\n '&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n };\n});\n\nexport interface SwitchProps {\n /** Whether the switch is checked (on) or unchecked (off) /\n checked?: boolean;\n /* Whether the switch is disabled and cannot be interacted with /\n disabled?: boolean;\n /* Optional label text to display next to the switch /\n label?: string;\n /* Position of the label relative to the switch. Options: 'start', 'end', 'top', 'bottom'. Default: 'end' /\n labelPlacement?: FormControlLabelProps['labelPlacement'];\n /* Callback fired when the switch state changes. Receives the event and checked state /\n onChange?: MuiSwitchProps['onChange'];\n /* Size of the switch. Options: 'small' (48x24px), 'medium' (64x32px). Default: 'medium' /\n size?: 'medium' \| 'small';\n /* Test ID for the switch element */\n fdKey: string;\n}\n\nconst Switch = ({ checked, disabled = false, label, labelPlacement = 'end', onChange, size = 'medium', fdKey }: SwitchProps): ReactElement => {\n if (!label) {\n return <StyledSwitch disableRipple $size={size} checked={checked} data-fd={fdKey} disabled={disabled} onChange={onChange} ~~/>;\~~n }\n\n return (\n <StyledFormControlLabel\n $size={size}\n control={<StyledSwitch disableRipple $size={size} checked={checked} data-fd={fdKey} disabled={disabled} onChange={onChange} />}\n disabled={disabled}\n label={label}\n labelPlacement={labelPlacement}\n />\n );\n};\n\nexport default Switch;\n"],"names":["StyledFormControlLabel","styled","FormControlLabel","theme","$size","color","palette","semantic","text","gap","margin","typography","StyledSwitch","MuiSwitch","checked","isSmall","height","thumbSize","width","padding","overflow","transitionDuration","transform","fill","borderColor","stroke","backgroundColor","opacity","outline","outlineOffset","background","border","transition","transitions","create","duration","borderRadius","boxShadow","customShadows","sunken","disabled","label","labelPlacement","onChange","size","fdKey","_jsx","control","disableRipple"],"mappings":"gKAMA,MAAMA,EAAyBC,EAAAA,OAAOC,EAAPD,~~EAAyD~~,EAAGE,QAAOC,QAAQ,aAAU,~~CAChHC~~,MAAOF,EAAMG,QAAQC,SAASC,KAAK,eACnCC,IAAK,OACLC,OAAQ,EACR,+BAAgC,~~IACzBP~~,EAAMQ,WAAqB,UAAVP,EAAoB,cAAgB,~~eAI1DQ~~,EAAeX,EAAAA,OAAOY,EAAPZ,EAAkD,~~EAAGE~~,~~QAAOC~~,QAAQ,~~SAAUU~~,~~cAC/F~~,MAAMC,EAAoB,UAAVX,EAEVY,EAASD,EAAU,GAAK,GACxBE,EAAYF,EAAU,GAAK,GAGjC,MAAO,~~CACHG~~,~~MANUH~~,EAAU,GAAK,~~GAOzBC~~,SACAG,QAAS,EACTC,SAAU,UACV,0BAA2B,~~CACvBD~~,QAAS,EACTE,mBAAoB,QACpB,gBAAiB,~~CACbC~~,UAAW,~~cAXJP~~,EAAU,GAAK,~~QAYtBV~~,MAAOF,EAAMG,QAAQC,SAASgB,KAAK,cACnC,qBAAsB,~~CAClBC~~,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,~~oBAE/C~~,uBAAwB,~~CACpBC~~,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,~~GAEb~~,oCAAqC,~~CACjCD~~,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,~~KAGjB~~,wCAAyC,~~CACrCC~~,QAAS,aAAazB,EAAMG,QAAQC,SAASkB,OAAO,kBACpDI,cAAe,~~OAEnB~~,kCAAmC,~~CAC/BF~~,QAAS,GACTH,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CC,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,~~sBAEvD~~,oCAAqC,~~CACjCJ~~,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,~~KAGjB~~,qBAAsB,~~CAClBT~~,MAAOD,EACPD,OAAQC,EACRS,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,qBACnDC,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDO,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,gBAAiB,~~CACnDC~~,SAAU,~~OAGlB~~,qBAAsB,~~CAClBC~~,aAAcpB,EACdU,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,aAC7CQ,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDY,UAAWvB,EAAU,OAASX,EAAMmC,eAAeC,OACnDZ,QAAS,EACTK,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,mBAAoB,eAAgB,WAAY,~~CAClFC~~,SAAU,~~OAGlB~~,wFAAyF,~~CACrFT~~,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,~~eAEjD~~,yFAA0F,~~CACtFG~~,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,~~kCAsB1C~~,~~EAAGT~~,~~UAAS0B~~,YAAW,~~EAAOC~~,~~QAAOC~~,iBAAiB,~~MAAOC~~,~~WAAUC~~,OAAO,~~SAAUC~~,~~WAC9FJ~~,~~EAKDK~~,EAAAA,IAAC9C,~~SACU4C~~,EACPG,~~QAASD~~,MAAClC,EAAY,~~CAACoC~~,~~uBAAqBJ~~,~~EAAM9B~~,QAASA,~~YAAkB~~+B,~~EAAOL~~,SAAUA,~~EAAUG~~,SAAUA,~~IAClHH~~,SAAUA,EACVC,MAAOA,EACPC,eAAgBA,~~IATbI~~,EAAAA,IAAClC,EAAY,~~CAACoC~~,~~uBAAqBJ~~,~~EAAM9B~~,QAASA,~~YAAkB~~+B,~~EAAOL~~,SAAUA,~~EAAUG~~,SAAUA"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel)<{ $size?: 'medium' \| 'small' }>(\n ({ theme, $size = 'medium' }) => ({\n color: theme.palette.semantic.text['text-strong'],\n gap: '12px',\n margin: 0,\n '& .MuiFormControlLabel-label': {\n ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n },\n }),\n);\n\nconst StyledSwitch = styled(MuiSwitch)<{ $size?: 'medium' \| 'small' }>(({\n theme,\n $size = 'medium',\n checked,\n}) => {\n const isSmall = $size === 'small';\n const width = isSmall ? 48 : 64;\n const height = isSmall ? 24 : 32;\n const thumbSize = isSmall ? 24 : 32;\n const translateX = isSmall ? 24 : 32;\n\n return {\n width,\n height,\n padding: 0,\n overflow: 'visible',\n '& .MuiSwitch-switchBase': {\n padding: 0,\n transitionDuration: '200ms',\n '&.Mui-checked': {\n transform: `translateX(${translateX}px)`,\n color: theme.palette.semantic.fill['fill-white'],\n '& .MuiSwitch-thumb': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n },\n '& + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n opacity: 1,\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '&.Mui-focusVisible + .MuiSwitch-track': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&.Mui-disabled .MuiSwitch-thumb': {\n opacity: 0.5,\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n backgroundColor: theme.palette.semantic.background['background-raised'],\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '& .MuiSwitch-thumb': {\n width: thumbSize,\n height: thumbSize,\n backgroundColor: theme.palette.semantic.background['background-raised'],\n border: `2px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n transition: theme.transitions.create(['border-color'], {\n duration: 200,\n }),\n },\n '& .MuiSwitch-track': {\n borderRadius: height,\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n boxShadow: checked ? 'none' : theme.customShadows?.sunken,\n opacity: 1,\n transition: theme.transitions.create(['background-color', 'border-color', 'outline'], {\n duration: 200,\n }),\n },\n '&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n };\n});\n\nexport interface SwitchProps {\n /** Whether the switch is checked (on) or unchecked (off) /\n checked?: boolean;\n /* Whether the switch is disabled and cannot be interacted with /\n disabled?: boolean;\n /* Optional label text to display next to the switch /\n label?: string;\n /* Position of the label relative to the switch. Options: 'start', 'end', 'top', 'bottom'. Default: 'end' /\n labelPlacement?: FormControlLabelProps['labelPlacement'];\n /* Callback fired when the switch state changes. Receives the event and checked state /\n onChange?: MuiSwitchProps['onChange'];\n /* Size of the switch. Options: 'small' (48x24px), 'medium' (64x32px). Default: 'medium' /\n size?: 'medium' \| 'small';\n /* Test ID for the switch element */\n fdKey: string;\n}\n\nconst Switch = ({\n checked,\n disabled = false,\n label,\n labelPlacement = 'end',\n onChange,\n size = 'medium',\n fdKey,\n}: SwitchProps): ReactElement => {\n if (!label) {\n return (\n <StyledSwitch\n disableRipple\n $size={size}\n checked={checked}\n data-fd={fdKey}\n disabled={disabled}\n onChange={onChange}\n />\n );\n }\n\n return (\n <StyledFormControlLabel\n $size={size}\n control={\n <StyledSwitch\n disableRipple\n $size={size}\n checked={checked}\n data-fd={fdKey}\n disabled={disabled}\n onChange={onChange}\n />\n }\n disabled={disabled}\n label={label}\n labelPlacement={labelPlacement}\n />\n );\n};\n\nexport default Switch;\n"],"names":["StyledFormControlLabel","styled","FormControlLabel","theme","$size","color","palette","semantic","text","gap","margin","typography","StyledSwitch","MuiSwitch","checked","isSmall","height","thumbSize","width","padding","overflow","transitionDuration","transform","fill","borderColor","stroke","backgroundColor","opacity","outline","outlineOffset","background","border","transition","transitions","create","duration","borderRadius","boxShadow","customShadows","sunken","disabled","label","labelPlacement","onChange","size","fdKey","_jsx","control","disableRipple"],"mappings":"gKAMA,MAAMA,EAAyBC,EAAAA,OAAOC,EAAPD,EAC7B,EAAGE,QAAOC,QAAQ,aAAU,CAC1BC,MAAOF,EAAMG,QAAQC,SAASC,KAAK,eACnCC,IAAK,OACLC,OAAQ,EACR,+BAAgC,IAC3BP,EAAMQ,WAAqB,UAAVP,EAAoB,cAAgB,eAKxDQ,EAAeX,EAAAA,OAAOY,EAAPZ,EAAkD,EACrEE,QACAC,QAAQ,SACRU,cAEA,MAAMC,EAAoB,UAAVX,EAEVY,EAASD,EAAU,GAAK,GACxBE,EAAYF,EAAU,GAAK,GAGjC,MAAO,CACLG,MANYH,EAAU,GAAK,GAO3BC,SACAG,QAAS,EACTC,SAAU,UACV,0BAA2B,CACzBD,QAAS,EACTE,mBAAoB,QACpB,gBAAiB,CACfC,UAAW,cAXEP,EAAU,GAAK,QAY5BV,MAAOF,EAAMG,QAAQC,SAASgB,KAAK,cACnC,qBAAsB,CACpBC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,oBAE7C,uBAAwB,CACtBC,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,GAEX,oCAAqC,CACnCD,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,wCAAyC,CACvCC,QAAS,aAAazB,EAAMG,QAAQC,SAASkB,OAAO,kBACpDI,cAAe,OAEjB,kCAAmC,CACjCF,QAAS,GACTH,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CC,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,sBAErD,oCAAqC,CACnCJ,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,qBAAsB,CACpBT,MAAOD,EACPD,OAAQC,EACRS,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,qBACnDC,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDO,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,gBAAiB,CACrDC,SAAU,OAGd,qBAAsB,CACpBC,aAAcpB,EACdU,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,aAC7CQ,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDY,UAAWvB,EAAU,OAASX,EAAMmC,eAAeC,OACnDZ,QAAS,EACTK,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,mBAAoB,eAAgB,WAAY,CACpFC,SAAU,OAGd,wFAAyF,CACvFT,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,eAE/C,yFAA0F,CACxFG,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,kCAsBpC,EACbT,UACA0B,YAAW,EACXC,QACAC,iBAAiB,MACjBC,WACAC,OAAO,SACPC,WAEKJ,EAcHK,EAAAA,IAAC9C,SACQ4C,EACPG,QACED,MAAClC,EAAY,CACXoC,uBACOJ,EACP9B,QAASA,YACA+B,EACTL,SAAUA,EACVG,SAAUA,IAGdH,SAAUA,EACVC,MAAOA,EACPC,eAAgBA,IA1BhBI,EAAAA,IAAClC,EAAY,CACXoC,eAAa,EAAA5C,MACNwC,EACP9B,QAASA,YACA+B,EACTL,SAAUA,EACVG,SAAUA"}

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

@@ -18,7 +18,7 @@ interface SwitchProps {
     /** Test ID for the switch element */
     fdKey: string;
 }
-declare const Switch: ({ checked, disabled, label, labelPlacement, onChange, size, fdKey }: SwitchProps) => ReactElement;
+declare const Switch: ({ checked, disabled, label, labelPlacement, onChange, size, fdKey, }: SwitchProps) => ReactElement;
 export { Switch as default };
 export type { SwitchProps };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel)<{ $size?: 'medium' \| 'small' }>(({ theme, $size = 'medium' }) => ({\n color: theme.palette.semantic.text['text-strong'],\n gap: '12px',\n margin: 0,\n '& .MuiFormControlLabel-label': {\n ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n },\n}));\n\nconst StyledSwitch = styled(MuiSwitch)<{ $size?: 'medium' \| 'small' }>(({ theme, $size = 'medium', checked }) => {\n const isSmall = $size === 'small';\n const width = isSmall ? 48 : 64;\n const height = isSmall ? 24 : 32;\n const thumbSize = isSmall ? 24 : 32;\n const translateX = isSmall ? 24 : 32;\n\n return {\n width,\n height,\n padding: 0,\n overflow: 'visible',\n '& .MuiSwitch-switchBase': {\n padding: 0,\n transitionDuration: '200ms',\n '&.Mui-checked': {\n transform: `translateX(${translateX}px)`,\n color: theme.palette.semantic.fill['fill-white'],\n '& .MuiSwitch-thumb': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n },\n '& + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n opacity: 1,\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '&.Mui-focusVisible + .MuiSwitch-track': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&.Mui-disabled .MuiSwitch-thumb': {\n opacity: 0.5,\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n backgroundColor: theme.palette.semantic.background['background-raised'],\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '& .MuiSwitch-thumb': {\n width: thumbSize,\n height: thumbSize,\n backgroundColor: theme.palette.semantic.background['background-raised'],\n border: `2px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n transition: theme.transitions.create(['border-color'], {\n duration: 200,\n }),\n },\n '& .MuiSwitch-track': {\n borderRadius: height,\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n boxShadow: checked ? 'none' : theme.customShadows?.sunken,\n opacity: 1,\n transition: theme.transitions.create(['background-color', 'border-color', 'outline'], {\n duration: 200,\n }),\n },\n '&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n };\n});\n\nexport interface SwitchProps {\n /** Whether the switch is checked (on) or unchecked (off) /\n checked?: boolean;\n /* Whether the switch is disabled and cannot be interacted with /\n disabled?: boolean;\n /* Optional label text to display next to the switch /\n label?: string;\n /* Position of the label relative to the switch. Options: 'start', 'end', 'top', 'bottom'. Default: 'end' /\n labelPlacement?: FormControlLabelProps['labelPlacement'];\n /* Callback fired when the switch state changes. Receives the event and checked state /\n onChange?: MuiSwitchProps['onChange'];\n /* Size of the switch. Options: 'small' (48x24px), 'medium' (64x32px). Default: 'medium' /\n size?: 'medium' \| 'small';\n /* Test ID for the switch element */\n fdKey: string;\n}\n\nconst Switch = ({ checked, disabled = false, label, labelPlacement = 'end', onChange, size = 'medium', fdKey }: SwitchProps): ReactElement => {\n if (!label) {\n return <StyledSwitch disableRipple $size={size} checked={checked} data-fd={fdKey} disabled={disabled} onChange={onChange} ~~/>;\~~n }\n\n return (\n <StyledFormControlLabel\n $size={size}\n control={<StyledSwitch disableRipple $size={size} checked={checked} data-fd={fdKey} disabled={disabled} onChange={onChange} />}\n disabled={disabled}\n label={label}\n labelPlacement={labelPlacement}\n />\n );\n};\n\nexport default Switch;\n"],"names":["StyledFormControlLabel","styled","FormControlLabel","theme","$size","color","palette","semantic","text","gap","margin","typography","StyledSwitch","MuiSwitch","checked","isSmall","height","thumbSize","width","padding","overflow","transitionDuration","transform","fill","borderColor","stroke","backgroundColor","opacity","outline","outlineOffset","background","border","transition","transitions","create","duration","borderRadius","boxShadow","customShadows","sunken","Switch","disabled","label","labelPlacement","onChange","size","fdKey","_jsx","control","disableRipple"],"mappings":"wKAMA,MAAMA,EAAyBC,EAAOC,EAAPD,~~EAAyD~~,EAAGE,QAAOC,QAAQ,aAAU,~~CAChHC~~,MAAOF,EAAMG,QAAQC,SAASC,KAAK,eACnCC,IAAK,OACLC,OAAQ,EACR,+BAAgC,~~IACzBP~~,EAAMQ,WAAqB,UAAVP,EAAoB,cAAgB,~~eAI1DQ~~,EAAeX,EAAOY,EAAPZ,EAAkD,~~EAAGE~~,~~QAAOC~~,QAAQ,~~SAAUU~~,~~cAC/F~~,MAAMC,EAAoB,UAAVX,EAEVY,EAASD,EAAU,GAAK,GACxBE,EAAYF,EAAU,GAAK,GAGjC,MAAO,~~CACHG~~,~~MANUH~~,EAAU,GAAK,~~GAOzBC~~,SACAG,QAAS,EACTC,SAAU,UACV,0BAA2B,~~CACvBD~~,QAAS,EACTE,mBAAoB,QACpB,gBAAiB,~~CACbC~~,UAAW,~~cAXJP~~,EAAU,GAAK,~~QAYtBV~~,MAAOF,EAAMG,QAAQC,SAASgB,KAAK,cACnC,qBAAsB,~~CAClBC~~,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,~~oBAE/C~~,uBAAwB,~~CACpBC~~,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,~~GAEb~~,oCAAqC,~~CACjCD~~,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,~~KAGjB~~,wCAAyC,~~CACrCC~~,QAAS,aAAazB,EAAMG,QAAQC,SAASkB,OAAO,kBACpDI,cAAe,~~OAEnB~~,kCAAmC,~~CAC/BF~~,QAAS,GACTH,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CC,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,~~sBAEvD~~,oCAAqC,~~CACjCJ~~,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,~~KAGjB~~,qBAAsB,~~CAClBT~~,MAAOD,EACPD,OAAQC,EACRS,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,qBACnDC,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDO,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,gBAAiB,~~CACnDC~~,SAAU,~~OAGlB~~,qBAAsB,~~CAClBC~~,aAAcpB,EACdU,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,aAC7CQ,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDY,UAAWvB,EAAU,OAASX,EAAMmC,eAAeC,OACnDZ,QAAS,EACTK,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,mBAAoB,eAAgB,WAAY,~~CAClFC~~,SAAU,~~OAGlB~~,wFAAyF,~~CACrFT~~,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,~~eAEjD~~,yFAA0F,~~CACtFG~~,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,~~mBAsBnDiB~~,EAAS,~~EAAG1B~~,~~UAAS2B~~,YAAW,~~EAAOC~~,~~QAAOC~~,iBAAiB,~~MAAOC~~,~~WAAUC~~,OAAO,~~SAAUC~~,~~WAC9FJ~~,~~EAKDK~~,EAAC/C,~~SACU6C~~,EACPG,~~QAASD~~,EAACnC,EAAY,~~CAACqC~~,~~uBAAqBJ~~,~~EAAM~~/B,QAASA,~~YAAkBgC~~,~~EAAOL~~,SAAUA,~~EAAUG~~,SAAUA,~~IAClHH~~,SAAUA,EACVC,MAAOA,EACPC,eAAgBA,~~IATbI~~,EAACnC,EAAY,~~CAACqC~~,~~uBAAqBJ~~,~~EAAM~~/B,QAASA,~~YAAkBgC~~,~~EAAOL~~,SAAUA,~~EAAUG~~,SAAUA"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel)<{ $size?: 'medium' \| 'small' }>(\n ({ theme, $size = 'medium' }) => ({\n color: theme.palette.semantic.text['text-strong'],\n gap: '12px',\n margin: 0,\n '& .MuiFormControlLabel-label': {\n ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n },\n }),\n);\n\nconst StyledSwitch = styled(MuiSwitch)<{ $size?: 'medium' \| 'small' }>(({\n theme,\n $size = 'medium',\n checked,\n}) => {\n const isSmall = $size === 'small';\n const width = isSmall ? 48 : 64;\n const height = isSmall ? 24 : 32;\n const thumbSize = isSmall ? 24 : 32;\n const translateX = isSmall ? 24 : 32;\n\n return {\n width,\n height,\n padding: 0,\n overflow: 'visible',\n '& .MuiSwitch-switchBase': {\n padding: 0,\n transitionDuration: '200ms',\n '&.Mui-checked': {\n transform: `translateX(${translateX}px)`,\n color: theme.palette.semantic.fill['fill-white'],\n '& .MuiSwitch-thumb': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n },\n '& + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n opacity: 1,\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '&.Mui-focusVisible + .MuiSwitch-track': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&.Mui-disabled .MuiSwitch-thumb': {\n opacity: 0.5,\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n backgroundColor: theme.palette.semantic.background['background-raised'],\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '& .MuiSwitch-thumb': {\n width: thumbSize,\n height: thumbSize,\n backgroundColor: theme.palette.semantic.background['background-raised'],\n border: `2px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n transition: theme.transitions.create(['border-color'], {\n duration: 200,\n }),\n },\n '& .MuiSwitch-track': {\n borderRadius: height,\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n boxShadow: checked ? 'none' : theme.customShadows?.sunken,\n opacity: 1,\n transition: theme.transitions.create(['background-color', 'border-color', 'outline'], {\n duration: 200,\n }),\n },\n '&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n };\n});\n\nexport interface SwitchProps {\n /** Whether the switch is checked (on) or unchecked (off) /\n checked?: boolean;\n /* Whether the switch is disabled and cannot be interacted with /\n disabled?: boolean;\n /* Optional label text to display next to the switch /\n label?: string;\n /* Position of the label relative to the switch. Options: 'start', 'end', 'top', 'bottom'. Default: 'end' /\n labelPlacement?: FormControlLabelProps['labelPlacement'];\n /* Callback fired when the switch state changes. Receives the event and checked state /\n onChange?: MuiSwitchProps['onChange'];\n /* Size of the switch. Options: 'small' (48x24px), 'medium' (64x32px). Default: 'medium' /\n size?: 'medium' \| 'small';\n /* Test ID for the switch element */\n fdKey: string;\n}\n\nconst Switch = ({\n checked,\n disabled = false,\n label,\n labelPlacement = 'end',\n onChange,\n size = 'medium',\n fdKey,\n}: SwitchProps): ReactElement => {\n if (!label) {\n return (\n <StyledSwitch\n disableRipple\n $size={size}\n checked={checked}\n data-fd={fdKey}\n disabled={disabled}\n onChange={onChange}\n />\n );\n }\n\n return (\n <StyledFormControlLabel\n $size={size}\n control={\n <StyledSwitch\n disableRipple\n $size={size}\n checked={checked}\n data-fd={fdKey}\n disabled={disabled}\n onChange={onChange}\n />\n }\n disabled={disabled}\n label={label}\n labelPlacement={labelPlacement}\n />\n );\n};\n\nexport default Switch;\n"],"names":["StyledFormControlLabel","styled","FormControlLabel","theme","$size","color","palette","semantic","text","gap","margin","typography","StyledSwitch","MuiSwitch","checked","isSmall","height","thumbSize","width","padding","overflow","transitionDuration","transform","fill","borderColor","stroke","backgroundColor","opacity","outline","outlineOffset","background","border","transition","transitions","create","duration","borderRadius","boxShadow","customShadows","sunken","Switch","disabled","label","labelPlacement","onChange","size","fdKey","_jsx","control","disableRipple"],"mappings":"wKAMA,MAAMA,EAAyBC,EAAOC,EAAPD,EAC7B,EAAGE,QAAOC,QAAQ,aAAU,CAC1BC,MAAOF,EAAMG,QAAQC,SAASC,KAAK,eACnCC,IAAK,OACLC,OAAQ,EACR,+BAAgC,IAC3BP,EAAMQ,WAAqB,UAAVP,EAAoB,cAAgB,eAKxDQ,EAAeX,EAAOY,EAAPZ,EAAkD,EACrEE,QACAC,QAAQ,SACRU,cAEA,MAAMC,EAAoB,UAAVX,EAEVY,EAASD,EAAU,GAAK,GACxBE,EAAYF,EAAU,GAAK,GAGjC,MAAO,CACLG,MANYH,EAAU,GAAK,GAO3BC,SACAG,QAAS,EACTC,SAAU,UACV,0BAA2B,CACzBD,QAAS,EACTE,mBAAoB,QACpB,gBAAiB,CACfC,UAAW,cAXEP,EAAU,GAAK,QAY5BV,MAAOF,EAAMG,QAAQC,SAASgB,KAAK,cACnC,qBAAsB,CACpBC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,oBAE7C,uBAAwB,CACtBC,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,GAEX,oCAAqC,CACnCD,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,wCAAyC,CACvCC,QAAS,aAAazB,EAAMG,QAAQC,SAASkB,OAAO,kBACpDI,cAAe,OAEjB,kCAAmC,CACjCF,QAAS,GACTH,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CC,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,sBAErD,oCAAqC,CACnCJ,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,qBAAsB,CACpBT,MAAOD,EACPD,OAAQC,EACRS,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,qBACnDC,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDO,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,gBAAiB,CACrDC,SAAU,OAGd,qBAAsB,CACpBC,aAAcpB,EACdU,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,aAC7CQ,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDY,UAAWvB,EAAU,OAASX,EAAMmC,eAAeC,OACnDZ,QAAS,EACTK,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,mBAAoB,eAAgB,WAAY,CACpFC,SAAU,OAGd,wFAAyF,CACvFT,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,eAE/C,yFAA0F,CACxFG,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,mBAsB7CiB,EAAS,EACb1B,UACA2B,YAAW,EACXC,QACAC,iBAAiB,MACjBC,WACAC,OAAO,SACPC,WAEKJ,EAcHK,EAAC/C,SACQ6C,EACPG,QACED,EAACnC,EAAY,CACXqC,uBACOJ,EACP/B,QAASA,YACAgC,EACTL,SAAUA,EACVG,SAAUA,IAGdH,SAAUA,EACVC,MAAOA,EACPC,eAAgBA,IA1BhBI,EAACnC,EAAY,CACXqC,eAAa,EAAA7C,MACNyC,EACP/B,QAASA,YACAgC,EACTL,SAAUA,EACVG,SAAUA"}

package/dist/components/molecules/AlertGlobal/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from \"react\";\n\nimport MuiAlert from \"@mui/material/Alert\";\n\nimport Box from \"@fd/components/atoms/Box\";\nimport Button from \"@fd/components/atoms/Button\";\nimport type { ButtonType } from \"@fd/components/atoms/Button/getButtonStyles\";\nimport IconButton from \"@fd/components/atoms/IconButton\";\nimport type { AlertTones } from \"@fd/components/molecules/Alert\";\nimport ButtonGroup from \"@fd/components/molecules/ButtonGroup\";\nimport CancelIcon from \"@fd/icons/Cancel\";\nimport styled from \"@fd/utilities/styledUtilities\";\nimport useMediaQuery from \"@fd/utilities/useMediaQuery\";\nimport useTheme from \"@fd/utilities/useTheme\";\n\nimport { getAlertGlobalBackgroundColour, getAlertGlobalBorderColour, getAlertGlobalIcon, getAlertGlobalTextColour } from \"./alertGlobalTokens\";\n\n/*\n Global alert component for prominent, page-level messages.\n \n - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n * (use an array to render multiple buttons side-by-side)\n * - Consumers are responsible for providing localized strings for any\n * user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).\n /\nexport interface AlertGlobalProps {\n /\n Message content shown in the alert. Provide a localized string.\n /\n description: string;\n /\n Visual tone of the alert which controls icon and colors.\n * Defaults to `neutral`.\n /\n tone?: AlertTones;\n /\n Called when the close button is pressed. When omitted, no close button is rendered.\n /\n onClose?: () => void;\n /\n One or more actions to render as buttons. A single object renders one button;\n * an array renders multiple buttons. Provide localized `label` values.\n /\n action?: AlertAction \| AlertAction[];\n /\n Accessible label for the close icon button. Provide a localized string.\n * Defaults to \"Close\".\n /\n closeAriaLabel?: string;\n /* Optional CSS class name for the root element. /\n className?: string;\n /* Optional test id for the root element. /\n 'data-fd'?: string;\n}\n\n/\n Describes a user action rendered as a button in the alert.\n /\nexport interface AlertAction {\n /* Optional unique identifier for this action. Recommended for stable React keys. /\n id?: string;\n /* Button text. Provide a localized string. /\n label: string;\n /* Visual variant of the button. Defaults to `secondary`. /\n type?: ButtonType;\n /* Click handler for the action. /\n onClick: () => void;\n /* Optional test id applied to the button. */\n 'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n alignItems: 'center',\n backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n borderBottom: '1px solid',\n borderRadius: 0,\n borderColor: getAlertGlobalBorderColour(theme, tone),\n color: getAlertGlobalTextColour(theme, tone),\n padding: theme.spacing(3),\n paddingTop: theme.spacing(1.5),\n paddingBottom: theme.spacing(1.5),\n width: '100%',\n display: 'flex',\n position: 'relative',\n '& .MuiAlert-icon': {\n alignSelf: 'flex-start',\n },\n '& .MuiAlert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n flexGrow: 1,\n minWidth: 0,\n },\n '& .MuiAlert-action': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n marginLeft: 'auto',\n },\n '& .MuiAlert-action .MuiIconButton-root': {\n outline: 'none',\n boxShadow: 'none',\n border: 'none',\n },\n '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n outline: 'none',\n boxShadow: 'none',\n },\n // Inline actions inside message container\n '& .fd-alert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n width: '100%',\n },\n '& .fd-alert-description': {\n flexGrow: 1,\n minWidth: 0,\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 'auto',\n display: 'none',\n },\n '& .fd-alert-actions-action': {\n display: 'flex',\n },\n // Mobile layout: stack and right-align button group below description\n [theme.breakpoints.down('tablet')]: {\n '& .fd-alert-message': {\n flexDirection: 'column',\n alignItems: 'stretch',\n gap: theme.spacing(2),\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 0,\n marginTop: theme.spacing(2),\n width: '100%',\n justifyContent: 'flex-end',\n display: 'flex',\n },\n '& .fd-alert-actions-action': {\n display: 'none',\n },\n '& .MuiAlert-action': {\n position: 'absolute',\n top: theme.spacing(3),\n right: theme.spacing(3),\n marginLeft: 0,\n },\n },\n}));\n\nconst ActionContainer = styled(Box)(({ theme }): Record<string, unknown> => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n}));\n\nconst AlertGlobalComponent = ({\n description,\n tone = 'neutral',\n onClose,\n action,\n className,\n closeAriaLabel = 'Close',\n 'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n const actionButtons = actionsArray.map((actionItem) => {\n const uniqueKey = actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`\n return (\n <Button\n key={uniqueKey}\n data-fd={actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`}\n fdKey={actionItem.label}\n onClick={actionItem.onClick}\n size=\"small\"\n tone=\"neutral\"\n variant={actionItem.type ?? 'secondary'}\n >\n {actionItem.label}\n </Button>\n )\n }\n );\n\n const nodes: ReactNode[] = [];\n if (actionButtons.length && !isMobile) {\n nodes.push(\n <ButtonGroup key=\"action-group-action\" align=\"right\" className=\"fd-alert-actions-action\" layout=\"horizontal\" size=\"small\">\n {actionButtons}\n </ButtonGroup>\n );\n }\n if (onClose) {\n nodes.push(\n <IconButton\n key=\"close\"\n aria-label={closeAriaLabel}\n data-fd=\"close-button\"\n onClick={onClose}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n <CancelIcon />\n </IconButton>\n );\n }\n\n return (\n <StyledGlobalAlert\n action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n className={className}\n data-fd={dataFd}\n icon={getAlertGlobalIcon(theme, tone)}\n role=\"alert\"\n tone={tone}\n >\n <Box className=\"fd-alert-message\">\n <Box className=\"fd-alert-description\">{description}</Box>\n {isMobile && actionButtons.length ? (\n <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n {actionButtons}\n </ButtonGroup>\n ) : null}\n </Box>\n </StyledGlobalAlert>\n );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","closeAriaLabel","dataFd","useTheme","isMobile","useMediaQuery","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport type { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';\nimport IconButton from '@fd/components/atoms/IconButton';\nimport type { AlertTones } from '@fd/components/molecules/Alert';\nimport ButtonGroup from '@fd/components/molecules/ButtonGroup';\nimport CancelIcon from '@fd/icons/Cancel';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport {\n getAlertGlobalBackgroundColour,\n getAlertGlobalBorderColour,\n getAlertGlobalIcon,\n getAlertGlobalTextColour,\n} from './alertGlobalTokens';\n\n/*\n Global alert component for prominent, page-level messages.\n \n - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n * (use an array to render multiple buttons side-by-side)\n * - Consumers are responsible for providing localized strings for any\n * user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).\n /\nexport interface AlertGlobalProps {\n /\n Message content shown in the alert. Provide a localized string.\n /\n description: string;\n /\n Visual tone of the alert which controls icon and colors.\n * Defaults to `neutral`.\n /\n tone?: AlertTones;\n /\n Called when the close button is pressed. When omitted, no close button is rendered.\n /\n onClose?: () => void;\n /\n One or more actions to render as buttons. A single object renders one button;\n * an array renders multiple buttons. Provide localized `label` values.\n /\n action?: AlertAction \| AlertAction[];\n /\n Accessible label for the close icon button. Provide a localized string.\n * Defaults to \"Close\".\n /\n closeAriaLabel?: string;\n /* Optional CSS class name for the root element. /\n className?: string;\n /* Optional test id for the root element. /\n 'data-fd'?: string;\n}\n\n/\n Describes a user action rendered as a button in the alert.\n /\nexport interface AlertAction {\n /* Optional unique identifier for this action. Recommended for stable React keys. /\n id?: string;\n /* Button text. Provide a localized string. /\n label: string;\n /* Visual variant of the button. Defaults to `secondary`. /\n type?: ButtonType;\n /* Click handler for the action. /\n onClick: () => void;\n /* Optional test id applied to the button. */\n 'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n alignItems: 'center',\n backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n borderBottom: '1px solid',\n borderRadius: 0,\n borderColor: getAlertGlobalBorderColour(theme, tone),\n color: getAlertGlobalTextColour(theme, tone),\n padding: theme.spacing(3),\n paddingTop: theme.spacing(1.5),\n paddingBottom: theme.spacing(1.5),\n width: '100%',\n display: 'flex',\n position: 'relative',\n '& .MuiAlert-icon': {\n alignSelf: 'flex-start',\n },\n '& .MuiAlert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n flexGrow: 1,\n minWidth: 0,\n },\n '& .MuiAlert-action': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n marginLeft: 'auto',\n },\n '& .MuiAlert-action .MuiIconButton-root': {\n outline: 'none',\n boxShadow: 'none',\n border: 'none',\n },\n '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n outline: 'none',\n boxShadow: 'none',\n },\n // Inline actions inside message container\n '& .fd-alert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n width: '100%',\n },\n '& .fd-alert-description': {\n flexGrow: 1,\n minWidth: 0,\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 'auto',\n display: 'none',\n },\n '& .fd-alert-actions-action': {\n display: 'flex',\n },\n // Mobile layout: stack and right-align button group below description\n [theme.breakpoints.down('tablet')]: {\n '& .fd-alert-message': {\n flexDirection: 'column',\n alignItems: 'stretch',\n gap: theme.spacing(2),\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 0,\n marginTop: theme.spacing(2),\n width: '100%',\n justifyContent: 'flex-end',\n display: 'flex',\n },\n '& .fd-alert-actions-action': {\n display: 'none',\n },\n '& .MuiAlert-action': {\n position: 'absolute',\n top: theme.spacing(3),\n right: theme.spacing(3),\n marginLeft: 0,\n },\n },\n}));\n\nconst ActionContainer = styled(Box)(\n ({ theme }): Record<string, unknown> => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n }),\n);\n\nconst AlertGlobalComponent = ({\n description,\n tone = 'neutral',\n onClose,\n action,\n className,\n closeAriaLabel = 'Close',\n 'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n const actionButtons = actionsArray.map((actionItem) => {\n const uniqueKey =\n actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`;\n return (\n <Button\n key={uniqueKey}\n data-fd={\n actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`\n }\n fdKey={actionItem.label}\n onClick={actionItem.onClick}\n size=\"small\"\n tone=\"neutral\"\n variant={actionItem.type ?? 'secondary'}\n >\n {actionItem.label}\n </Button>\n );\n });\n\n const nodes: ReactNode[] = [];\n if (actionButtons.length && !isMobile) {\n nodes.push(\n <ButtonGroup\n key=\"action-group-action\"\n align=\"right\"\n className=\"fd-alert-actions-action\"\n layout=\"horizontal\"\n size=\"small\"\n >\n {actionButtons}\n </ButtonGroup>,\n );\n }\n if (onClose) {\n nodes.push(\n <IconButton\n key=\"close\"\n aria-label={closeAriaLabel}\n data-fd=\"close-button\"\n onClick={onClose}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n <CancelIcon />\n </IconButton>,\n );\n }\n\n return (\n <StyledGlobalAlert\n action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n className={className}\n data-fd={dataFd}\n icon={getAlertGlobalIcon(theme, tone)}\n role=\"alert\"\n tone={tone}\n >\n <Box className=\"fd-alert-message\">\n <Box className=\"fd-alert-description\">{description}</Box>\n {isMobile && actionButtons.length ? (\n <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n {actionButtons}\n </ButtonGroup>\n ) : null}\n </Box>\n </StyledGlobalAlert>\n );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","closeAriaLabel","dataFd","useTheme","isMobile","useMediaQuery","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}

package/dist/components/molecules/AlertGlobal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from \"react\";\n\nimport MuiAlert from \"@mui/material/Alert\";\n\nimport Box from \"@fd/components/atoms/Box\";\nimport Button from \"@fd/components/atoms/Button\";\nimport type { ButtonType } from \"@fd/components/atoms/Button/getButtonStyles\";\nimport IconButton from \"@fd/components/atoms/IconButton\";\nimport type { AlertTones } from \"@fd/components/molecules/Alert\";\nimport ButtonGroup from \"@fd/components/molecules/ButtonGroup\";\nimport CancelIcon from \"@fd/icons/Cancel\";\nimport styled from \"@fd/utilities/styledUtilities\";\nimport useMediaQuery from \"@fd/utilities/useMediaQuery\";\nimport useTheme from \"@fd/utilities/useTheme\";\n\nimport { getAlertGlobalBackgroundColour, getAlertGlobalBorderColour, getAlertGlobalIcon, getAlertGlobalTextColour } from \"./alertGlobalTokens\";\n\n/*\n Global alert component for prominent, page-level messages.\n \n - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n * (use an array to render multiple buttons side-by-side)\n * - Consumers are responsible for providing localized strings for any\n * user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).\n /\nexport interface AlertGlobalProps {\n /\n Message content shown in the alert. Provide a localized string.\n /\n description: string;\n /\n Visual tone of the alert which controls icon and colors.\n * Defaults to `neutral`.\n /\n tone?: AlertTones;\n /\n Called when the close button is pressed. When omitted, no close button is rendered.\n /\n onClose?: () => void;\n /\n One or more actions to render as buttons. A single object renders one button;\n * an array renders multiple buttons. Provide localized `label` values.\n /\n action?: AlertAction \| AlertAction[];\n /\n Accessible label for the close icon button. Provide a localized string.\n * Defaults to \"Close\".\n /\n closeAriaLabel?: string;\n /* Optional CSS class name for the root element. /\n className?: string;\n /* Optional test id for the root element. /\n 'data-fd'?: string;\n}\n\n/\n Describes a user action rendered as a button in the alert.\n /\nexport interface AlertAction {\n /* Optional unique identifier for this action. Recommended for stable React keys. /\n id?: string;\n /* Button text. Provide a localized string. /\n label: string;\n /* Visual variant of the button. Defaults to `secondary`. /\n type?: ButtonType;\n /* Click handler for the action. /\n onClick: () => void;\n /* Optional test id applied to the button. */\n 'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n alignItems: 'center',\n backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n borderBottom: '1px solid',\n borderRadius: 0,\n borderColor: getAlertGlobalBorderColour(theme, tone),\n color: getAlertGlobalTextColour(theme, tone),\n padding: theme.spacing(3),\n paddingTop: theme.spacing(1.5),\n paddingBottom: theme.spacing(1.5),\n width: '100%',\n display: 'flex',\n position: 'relative',\n '& .MuiAlert-icon': {\n alignSelf: 'flex-start',\n },\n '& .MuiAlert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n flexGrow: 1,\n minWidth: 0,\n },\n '& .MuiAlert-action': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n marginLeft: 'auto',\n },\n '& .MuiAlert-action .MuiIconButton-root': {\n outline: 'none',\n boxShadow: 'none',\n border: 'none',\n },\n '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n outline: 'none',\n boxShadow: 'none',\n },\n // Inline actions inside message container\n '& .fd-alert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n width: '100%',\n },\n '& .fd-alert-description': {\n flexGrow: 1,\n minWidth: 0,\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 'auto',\n display: 'none',\n },\n '& .fd-alert-actions-action': {\n display: 'flex',\n },\n // Mobile layout: stack and right-align button group below description\n [theme.breakpoints.down('tablet')]: {\n '& .fd-alert-message': {\n flexDirection: 'column',\n alignItems: 'stretch',\n gap: theme.spacing(2),\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 0,\n marginTop: theme.spacing(2),\n width: '100%',\n justifyContent: 'flex-end',\n display: 'flex',\n },\n '& .fd-alert-actions-action': {\n display: 'none',\n },\n '& .MuiAlert-action': {\n position: 'absolute',\n top: theme.spacing(3),\n right: theme.spacing(3),\n marginLeft: 0,\n },\n },\n}));\n\nconst ActionContainer = styled(Box)(({ theme }): Record<string, unknown> => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n}));\n\nconst AlertGlobalComponent = ({\n description,\n tone = 'neutral',\n onClose,\n action,\n className,\n closeAriaLabel = 'Close',\n 'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n const actionButtons = actionsArray.map((actionItem) => {\n const uniqueKey = actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`\n return (\n <Button\n key={uniqueKey}\n data-fd={actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`}\n fdKey={actionItem.label}\n onClick={actionItem.onClick}\n size=\"small\"\n tone=\"neutral\"\n variant={actionItem.type ?? 'secondary'}\n >\n {actionItem.label}\n </Button>\n )\n }\n );\n\n const nodes: ReactNode[] = [];\n if (actionButtons.length && !isMobile) {\n nodes.push(\n <ButtonGroup key=\"action-group-action\" align=\"right\" className=\"fd-alert-actions-action\" layout=\"horizontal\" size=\"small\">\n {actionButtons}\n </ButtonGroup>\n );\n }\n if (onClose) {\n nodes.push(\n <IconButton\n key=\"close\"\n aria-label={closeAriaLabel}\n data-fd=\"close-button\"\n onClick={onClose}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n <CancelIcon />\n </IconButton>\n );\n }\n\n return (\n <StyledGlobalAlert\n action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n className={className}\n data-fd={dataFd}\n icon={getAlertGlobalIcon(theme, tone)}\n role=\"alert\"\n tone={tone}\n >\n <Box className=\"fd-alert-message\">\n <Box className=\"fd-alert-description\">{description}</Box>\n {isMobile && actionButtons.length ? (\n <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n {actionButtons}\n </ButtonGroup>\n ) : null}\n </Box>\n </StyledGlobalAlert>\n );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","closeAriaLabel","dataFd","useTheme","isMobile","useMediaQuery","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport type { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';\nimport IconButton from '@fd/components/atoms/IconButton';\nimport type { AlertTones } from '@fd/components/molecules/Alert';\nimport ButtonGroup from '@fd/components/molecules/ButtonGroup';\nimport CancelIcon from '@fd/icons/Cancel';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport {\n getAlertGlobalBackgroundColour,\n getAlertGlobalBorderColour,\n getAlertGlobalIcon,\n getAlertGlobalTextColour,\n} from './alertGlobalTokens';\n\n/*\n Global alert component for prominent, page-level messages.\n \n - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n * (use an array to render multiple buttons side-by-side)\n * - Consumers are responsible for providing localized strings for any\n * user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).\n /\nexport interface AlertGlobalProps {\n /\n Message content shown in the alert. Provide a localized string.\n /\n description: string;\n /\n Visual tone of the alert which controls icon and colors.\n * Defaults to `neutral`.\n /\n tone?: AlertTones;\n /\n Called when the close button is pressed. When omitted, no close button is rendered.\n /\n onClose?: () => void;\n /\n One or more actions to render as buttons. A single object renders one button;\n * an array renders multiple buttons. Provide localized `label` values.\n /\n action?: AlertAction \| AlertAction[];\n /\n Accessible label for the close icon button. Provide a localized string.\n * Defaults to \"Close\".\n /\n closeAriaLabel?: string;\n /* Optional CSS class name for the root element. /\n className?: string;\n /* Optional test id for the root element. /\n 'data-fd'?: string;\n}\n\n/\n Describes a user action rendered as a button in the alert.\n /\nexport interface AlertAction {\n /* Optional unique identifier for this action. Recommended for stable React keys. /\n id?: string;\n /* Button text. Provide a localized string. /\n label: string;\n /* Visual variant of the button. Defaults to `secondary`. /\n type?: ButtonType;\n /* Click handler for the action. /\n onClick: () => void;\n /* Optional test id applied to the button. */\n 'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n alignItems: 'center',\n backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n borderBottom: '1px solid',\n borderRadius: 0,\n borderColor: getAlertGlobalBorderColour(theme, tone),\n color: getAlertGlobalTextColour(theme, tone),\n padding: theme.spacing(3),\n paddingTop: theme.spacing(1.5),\n paddingBottom: theme.spacing(1.5),\n width: '100%',\n display: 'flex',\n position: 'relative',\n '& .MuiAlert-icon': {\n alignSelf: 'flex-start',\n },\n '& .MuiAlert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n flexGrow: 1,\n minWidth: 0,\n },\n '& .MuiAlert-action': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n marginLeft: 'auto',\n },\n '& .MuiAlert-action .MuiIconButton-root': {\n outline: 'none',\n boxShadow: 'none',\n border: 'none',\n },\n '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n outline: 'none',\n boxShadow: 'none',\n },\n // Inline actions inside message container\n '& .fd-alert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n width: '100%',\n },\n '& .fd-alert-description': {\n flexGrow: 1,\n minWidth: 0,\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 'auto',\n display: 'none',\n },\n '& .fd-alert-actions-action': {\n display: 'flex',\n },\n // Mobile layout: stack and right-align button group below description\n [theme.breakpoints.down('tablet')]: {\n '& .fd-alert-message': {\n flexDirection: 'column',\n alignItems: 'stretch',\n gap: theme.spacing(2),\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 0,\n marginTop: theme.spacing(2),\n width: '100%',\n justifyContent: 'flex-end',\n display: 'flex',\n },\n '& .fd-alert-actions-action': {\n display: 'none',\n },\n '& .MuiAlert-action': {\n position: 'absolute',\n top: theme.spacing(3),\n right: theme.spacing(3),\n marginLeft: 0,\n },\n },\n}));\n\nconst ActionContainer = styled(Box)(\n ({ theme }): Record<string, unknown> => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n }),\n);\n\nconst AlertGlobalComponent = ({\n description,\n tone = 'neutral',\n onClose,\n action,\n className,\n closeAriaLabel = 'Close',\n 'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n const actionButtons = actionsArray.map((actionItem) => {\n const uniqueKey =\n actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`;\n return (\n <Button\n key={uniqueKey}\n data-fd={\n actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`\n }\n fdKey={actionItem.label}\n onClick={actionItem.onClick}\n size=\"small\"\n tone=\"neutral\"\n variant={actionItem.type ?? 'secondary'}\n >\n {actionItem.label}\n </Button>\n );\n });\n\n const nodes: ReactNode[] = [];\n if (actionButtons.length && !isMobile) {\n nodes.push(\n <ButtonGroup\n key=\"action-group-action\"\n align=\"right\"\n className=\"fd-alert-actions-action\"\n layout=\"horizontal\"\n size=\"small\"\n >\n {actionButtons}\n </ButtonGroup>,\n );\n }\n if (onClose) {\n nodes.push(\n <IconButton\n key=\"close\"\n aria-label={closeAriaLabel}\n data-fd=\"close-button\"\n onClick={onClose}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n <CancelIcon />\n </IconButton>,\n );\n }\n\n return (\n <StyledGlobalAlert\n action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n className={className}\n data-fd={dataFd}\n icon={getAlertGlobalIcon(theme, tone)}\n role=\"alert\"\n tone={tone}\n >\n <Box className=\"fd-alert-message\">\n <Box className=\"fd-alert-description\">{description}</Box>\n {isMobile && actionButtons.length ? (\n <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n {actionButtons}\n </ButtonGroup>\n ) : null}\n </Box>\n </StyledGlobalAlert>\n );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","closeAriaLabel","dataFd","useTheme","isMobile","useMediaQuery","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}

package/dist/components/molecules/EmptyState/index.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),i=require("@mui/material/styles"),l=require("@mui/material/Typography"),r=require("../../atoms/Button/index.cjs.js"),a=require("../../atoms/IconContainer/index.cjs.js"),n=require("../ButtonGroup/index.cjs.js");const s=i.styled(t,{shouldForwardProp:e=>"fullWidth"!==e})((({theme:e,fullWidth:t})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",gap:e.spacing(3),width:t?"100%":"536px"}))),o=i.styled(t)((()=>({display:"flex",justifyContent:"flex-end",width:"100%"}))),d=i.styled(t)((({theme:e})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",gap:e.spacing(1)}))),c=i.styled(l)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),u=({title:t,description:i,icon:u,actionButtons:x,fullWidth:m=!1})=>e.jsxs(s,{"data-testid":"empty-state-container",fullWidth:m,children:[u?e.jsx(a,{"data-testid":"empty-state-icon-container",icon:u,style:"filled",tone:"neutral"}):null,e.jsxs(d,{children:[e.jsx(l,{variant:"h3Strong",children:t}),e.jsx(c,{variant:"b1Weak",children:i})]}),(()=>{if(x)return Array.isArray(x)?e.jsx(n,{align:"right",layout:"horizontal",order:"default",size:"medium",children:x.map((t=>{const i=`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(r.Button,{fdKey:t.label,onClick:t.onClick,variant:t.variant,children:t.label},i)}))}):e.jsx(o,{children:e.jsx(r.Button,{fdKey:x.label,onClick:x.onClick,variant:x.variant,children:x.label})})})()]});exports.EmptyState=u,exports.default=u;
2	+ //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/EmptyState/index.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/EmptyState/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport Button from '@fd/components/atoms/Button';\nimport type { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';\nimport IconContainer from '@fd/components/atoms/IconContainer';\n\nimport ButtonGroup from '../ButtonGroup';\n\n/** Action button configuration */\nexport interface ActionButton {\n /** Text label for the action button */\n label: string;\n /** Visual variant of the action button */\n variant?: ButtonType;\n /** Callback function when the action button is clicked */\n onClick: () => void;\n}\n\n/** EmptyState component props */\nexport interface EmptyStateProps {\n /** Main heading text of the empty state */\n title: string;\n /** Detailed description text of the empty state */\n description: string;\n /** Icon to display */\n icon?: React.ReactNode;\n /** Action buttons to display */\n actionButtons?: ActionButton | ActionButton[];\n /** Whether the empty state should be full width */\n fullWidth?: boolean;\n}\n\nconst StyledContainer = styled(Box, { shouldForwardProp: (prop) => prop !== 'fullWidth' })<{\n fullWidth?: boolean;\n}>(({ theme, fullWidth }) => ({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: theme.spacing(3),\n width: fullWidth ? '100%' : '536px',\n}));\n\nconst StyledOneActionButtonContainer = styled(Box)(() => ({\n display: 'flex',\n justifyContent: 'flex-end',\n width: '100%',\n}));\n\nconst StyledTextContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: theme.spacing(1),\n}));\n\nconst StyledDescription = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n}));\n\n/**\n * EmptyState component is used when a table, list, or chart has no data to display.\n *\n * @param props - The component props\n * @returns The empty state component\n */\n\nexport const EmptyState = ({\n title,\n description,\n icon,\n actionButtons,\n fullWidth = false,\n}: EmptyStateProps): JSX.Element => {\n const renderActions = (): React.ReactNode => {\n if (!actionButtons) {\n return undefined;\n }\n\n if (Array.isArray(actionButtons)) {\n return (\n <ButtonGroup align=\"right\" layout=\"horizontal\" order=\"default\" size=\"medium\">\n {actionButtons.map((button) => {\n const key = `action-button-${button.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <Button key={key} fdKey={button.label} onClick={button.onClick} variant={button.variant}>\n {button.label}\n </Button>\n );\n })}\n </ButtonGroup>\n );\n }\n\n return (\n <StyledOneActionButtonContainer>\n <Button fdKey={actionButtons.label} onClick={actionButtons.onClick} variant={actionButtons.variant}>\n {actionButtons.label}\n </Button>\n </StyledOneActionButtonContainer>\n );\n };\n\n const renderIcon = (): React.ReactNode => {\n if (!icon) {\n return null;\n }\n\n return (\n <IconContainer data-testid=\"empty-state-icon-container\" icon={icon} style=\"filled\" tone=\"neutral\" />\n );\n };\n\n return (\n <StyledContainer data-testid=\"empty-state-container\" fullWidth={fullWidth}>\n {renderIcon()}\n <StyledTextContainer>\n <Typography variant=\"h3Strong\">{title}</Typography>\n <StyledDescription variant=\"b1Weak\">{description}</StyledDescription>\n </StyledTextContainer>\n {renderActions()}\n </StyledContainer>\n );\n};\n\nexport default EmptyState;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","alignItems","gap","spacing","width","StyledOneActionButtonContainer","justifyContent","StyledTextContainer","StyledDescription","Typography","color","palette","semantic","text","EmptyState","title","description","icon","actionButtons","_jsxs","children","_jsx","IconContainer","style","tone","variant","Array","isArray","ButtonGroup","align","layout","order","size","map","button","key","label","replace","toLowerCase","Button","fdKey","onClick","renderActions"],"mappings":"wVAkCA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAAEC,kBAAoBC,GAAkB,cAATA,GAA3CH,EAErB,EAAGI,QAAOC,gBAAW,CACtBC,QAAS,OACTC,cAAe,SACfC,WAAY,aACZC,IAAKL,EAAMM,QAAQ,GACnBC,MAAON,EAAY,OAAS,YAGxBO,EAAiCZ,EAAAA,OAAOC,EAAPD,EAAY,KAAA,CACjDM,QAAS,OACTO,eAAgB,WAChBF,MAAO,WAGHG,EAAsBd,EAAAA,OAAOC,EAAPD,EAAY,EAAGI,YAAO,CAChDE,QAAS,OACTC,cAAe,SACfC,WAAY,aACZC,IAAKL,EAAMM,QAAQ,OAGfK,EAAoBf,EAAAA,OAAOgB,EAAPhB,EAAmB,EAAGI,YAAO,CACrDa,MAAOb,EAAMc,QAAQC,SAASC,KAAK,iBAUxBC,EAAa,EACxBC,QACAC,cACAC,OACAC,gBACApB,aAAY,KA2CVqB,EAAAA,KAAC3B,iBAA4B,wBAAwBM,UAAWA,EAASsB,SAAA,CAVpEH,EAKHI,MAACC,iBAA0B,6BAA6BL,KAAMA,EAAMM,MAAM,SAASC,KAAK,YAJjF,KAWPL,EAAAA,KAACZ,EAAmB,CAAAa,SAAA,CAClBC,EAAAA,IAACZ,EAAU,CAACgB,QAAQ,oBAAYV,IAChCM,EAAAA,IAACb,GAAkBiB,QAAQ,SAAQL,SAAEJ,OA7CrB,MACpB,GAAKE,EAIL,OAAIQ,MAAMC,QAAQT,GAEdG,EAAAA,IAACO,EAAW,CAACC,MAAM,QAAQC,OAAO,aAAaC,MAAM,UAAUC,KAAK,SAAQZ,SACzEF,EAAce,KAAKC,IAClB,MAAMC,EAAM,iBAAiBD,EAAOE,MAAMC,QAAQ,OAAQ,KAAKC,gBAE/D,OACEjB,EAAAA,IAACkB,EAAAA,OAAM,CAAWC,MAAON,EAAOE,MAAOK,QAASP,EAAOO,QAAShB,QAASS,EAAOT,QAAOL,SACpFc,EAAOE,OADGD,QAUrBd,EAAAA,IAAChB,EAA8B,CAAAe,SAC7BC,EAAAA,IAACkB,SAAM,CAACC,MAAOtB,EAAckB,MAAOK,QAASvB,EAAcuB,QAAShB,QAASP,EAAcO,QAAOL,SAC/FF,EAAckB,WAuBlBM"}

package/dist/components/molecules/EmptyState/index.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';
+/** Action button configuration */
+interface ActionButton {
+    /** Text label for the action button */
+    label: string;
+    /** Visual variant of the action button */
+    variant?: ButtonType;
+    /** Callback function when the action button is clicked */
+    onClick: () => void;
+}
+/** EmptyState component props */
+interface EmptyStateProps {
+    /** Main heading text of the empty state */
+    title: string;
+    /** Detailed description text of the empty state */
+    description: string;
+    /** Icon to display */
+    icon?: React.ReactNode;
+    /** Action buttons to display */
+    actionButtons?: ActionButton | ActionButton[];
+    /** Whether the empty state should be full width */
+    fullWidth?: boolean;
+}
+/**
+ * EmptyState component is used when a table, list, or chart has no data to display.
+ *
+ * @param props - The component props
+ * @returns The empty state component
+ */
+declare const EmptyState: ({ title, description, icon, actionButtons, fullWidth, }: EmptyStateProps) => JSX.Element;
+export { EmptyState, EmptyState as default };
+export type { ActionButton, EmptyStateProps };

package/dist/components/molecules/EmptyState/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsxs as t,jsx as e}from"react/jsx-runtime";import i from"@mui/material/Box";import{styled as a}from"@mui/material/styles";import l from"@mui/material/Typography";import{Button as r}from"../../atoms/Button/index.js";import n from"../../atoms/IconContainer/index.js";import o from"../ButtonGroup/index.js";const m=a(i,{shouldForwardProp:t=>"fullWidth"!==t})((({theme:t,fullWidth:e})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",gap:t.spacing(3),width:e?"100%":"536px"}))),d=a(i)((()=>({display:"flex",justifyContent:"flex-end",width:"100%"}))),s=a(i)((({theme:t})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",gap:t.spacing(1)}))),c=a(l)((({theme:t})=>({color:t.palette.semantic.text["text-weak"]}))),f=({title:i,description:a,icon:f,actionButtons:p,fullWidth:u=!1})=>t(m,{"data-testid":"empty-state-container",fullWidth:u,children:[f?e(n,{"data-testid":"empty-state-icon-container",icon:f,style:"filled",tone:"neutral"}):null,t(s,{children:[e(l,{variant:"h3Strong",children:i}),e(c,{variant:"b1Weak",children:a})]}),(()=>{if(p)return Array.isArray(p)?e(o,{align:"right",layout:"horizontal",order:"default",size:"medium",children:p.map((t=>{const i=`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`;return e(r,{fdKey:t.label,onClick:t.onClick,variant:t.variant,children:t.label},i)}))}):e(d,{children:e(r,{fdKey:p.label,onClick:p.onClick,variant:p.variant,children:p.label})})})()]});export{f as EmptyState,f as default};
2	+ //# sourceMappingURL=index.js.map

package/dist/components/molecules/EmptyState/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/EmptyState/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport Button from '@fd/components/atoms/Button';\nimport type { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';\nimport IconContainer from '@fd/components/atoms/IconContainer';\n\nimport ButtonGroup from '../ButtonGroup';\n\n/** Action button configuration */\nexport interface ActionButton {\n /** Text label for the action button */\n label: string;\n /** Visual variant of the action button */\n variant?: ButtonType;\n /** Callback function when the action button is clicked */\n onClick: () => void;\n}\n\n/** EmptyState component props */\nexport interface EmptyStateProps {\n /** Main heading text of the empty state */\n title: string;\n /** Detailed description text of the empty state */\n description: string;\n /** Icon to display */\n icon?: React.ReactNode;\n /** Action buttons to display */\n actionButtons?: ActionButton | ActionButton[];\n /** Whether the empty state should be full width */\n fullWidth?: boolean;\n}\n\nconst StyledContainer = styled(Box, { shouldForwardProp: (prop) => prop !== 'fullWidth' })<{\n fullWidth?: boolean;\n}>(({ theme, fullWidth }) => ({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: theme.spacing(3),\n width: fullWidth ? '100%' : '536px',\n}));\n\nconst StyledOneActionButtonContainer = styled(Box)(() => ({\n display: 'flex',\n justifyContent: 'flex-end',\n width: '100%',\n}));\n\nconst StyledTextContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: theme.spacing(1),\n}));\n\nconst StyledDescription = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n}));\n\n/**\n * EmptyState component is used when a table, list, or chart has no data to display.\n *\n * @param props - The component props\n * @returns The empty state component\n */\n\nexport const EmptyState = ({\n title,\n description,\n icon,\n actionButtons,\n fullWidth = false,\n}: EmptyStateProps): JSX.Element => {\n const renderActions = (): React.ReactNode => {\n if (!actionButtons) {\n return undefined;\n }\n\n if (Array.isArray(actionButtons)) {\n return (\n <ButtonGroup align=\"right\" layout=\"horizontal\" order=\"default\" size=\"medium\">\n {actionButtons.map((button) => {\n const key = `action-button-${button.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <Button key={key} fdKey={button.label} onClick={button.onClick} variant={button.variant}>\n {button.label}\n </Button>\n );\n })}\n </ButtonGroup>\n );\n }\n\n return (\n <StyledOneActionButtonContainer>\n <Button fdKey={actionButtons.label} onClick={actionButtons.onClick} variant={actionButtons.variant}>\n {actionButtons.label}\n </Button>\n </StyledOneActionButtonContainer>\n );\n };\n\n const renderIcon = (): React.ReactNode => {\n if (!icon) {\n return null;\n }\n\n return (\n <IconContainer data-testid=\"empty-state-icon-container\" icon={icon} style=\"filled\" tone=\"neutral\" />\n );\n };\n\n return (\n <StyledContainer data-testid=\"empty-state-container\" fullWidth={fullWidth}>\n {renderIcon()}\n <StyledTextContainer>\n <Typography variant=\"h3Strong\">{title}</Typography>\n <StyledDescription variant=\"b1Weak\">{description}</StyledDescription>\n </StyledTextContainer>\n {renderActions()}\n </StyledContainer>\n );\n};\n\nexport default EmptyState;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","alignItems","gap","spacing","width","StyledOneActionButtonContainer","justifyContent","StyledTextContainer","StyledDescription","Typography","color","palette","semantic","text","EmptyState","title","description","icon","actionButtons","_jsxs","children","_jsx","IconContainer","style","tone","variant","Array","isArray","ButtonGroup","align","layout","order","size","map","button","key","label","replace","toLowerCase","Button","fdKey","onClick","renderActions"],"mappings":"uTAkCA,MAAMA,EAAkBC,EAAOC,EAAK,CAAEC,kBAAoBC,GAAkB,cAATA,GAA3CH,EAErB,EAAGI,QAAOC,gBAAW,CACtBC,QAAS,OACTC,cAAe,SACfC,WAAY,aACZC,IAAKL,EAAMM,QAAQ,GACnBC,MAAON,EAAY,OAAS,YAGxBO,EAAiCZ,EAAOC,EAAPD,EAAY,KAAA,CACjDM,QAAS,OACTO,eAAgB,WAChBF,MAAO,WAGHG,EAAsBd,EAAOC,EAAPD,EAAY,EAAGI,YAAO,CAChDE,QAAS,OACTC,cAAe,SACfC,WAAY,aACZC,IAAKL,EAAMM,QAAQ,OAGfK,EAAoBf,EAAOgB,EAAPhB,EAAmB,EAAGI,YAAO,CACrDa,MAAOb,EAAMc,QAAQC,SAASC,KAAK,iBAUxBC,EAAa,EACxBC,QACAC,cACAC,OACAC,gBACApB,aAAY,KA2CVqB,EAAC3B,iBAA4B,wBAAwBM,UAAWA,EAASsB,SAAA,CAVpEH,EAKHI,EAACC,iBAA0B,6BAA6BL,KAAMA,EAAMM,MAAM,SAASC,KAAK,YAJjF,KAWPL,EAACZ,EAAmB,CAAAa,SAAA,CAClBC,EAACZ,EAAU,CAACgB,QAAQ,oBAAYV,IAChCM,EAACb,GAAkBiB,QAAQ,SAAQL,SAAEJ,OA7CrB,MACpB,GAAKE,EAIL,OAAIQ,MAAMC,QAAQT,GAEdG,EAACO,EAAW,CAACC,MAAM,QAAQC,OAAO,aAAaC,MAAM,UAAUC,KAAK,SAAQZ,SACzEF,EAAce,KAAKC,IAClB,MAAMC,EAAM,iBAAiBD,EAAOE,MAAMC,QAAQ,OAAQ,KAAKC,gBAE/D,OACEjB,EAACkB,EAAM,CAAWC,MAAON,EAAOE,MAAOK,QAASP,EAAOO,QAAShB,QAASS,EAAOT,QAAOL,SACpFc,EAAOE,OADGD,QAUrBd,EAAChB,EAA8B,CAAAe,SAC7BC,EAACkB,EAAM,CAACC,MAAOtB,EAAckB,MAAOK,QAASvB,EAAcuB,QAAShB,QAASP,EAAcO,QAAOL,SAC/FF,EAAckB,WAuBlBM"}

package/dist/components/molecules/RadioGroup/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n ...({ marginTop: theme.spacing(2), marginBottom: 0 }),\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n marginTop: theme.spacing(2),\n marginLeft: theme.spacing(1.75),\n paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group /\nexport interface RadioGroupProps\n extends Omit<MuiRadioGroupProps, 'name' \| 'onChange' \| 'value'> {\n /* Identifier applied to the radio group; also used for the radio name attribute. /\n fdKey?: string;\n /* Currently selected option value; use null or undefined when no option should be selected. /\n value?: string \| null;\n /* Callback fired whenever the selection changes with the event and newly selected value. /\n onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n /* Label rendered above the group; accepts plain text or a custom node. /\n label: React.ReactNode;\n /* Marks the radio group as required and surfaces the required indicator. /\n required?: boolean;\n /* Helper text displayed below the label to provide additional guidance. /\n helperText?: string;\n /* Error message shown below the helper text and marks the inputs as invalid. /\n errorText?: string;\n /* The children of the radio group. /\n children?: React.ReactNode;\n}\n\n/\n RadioGroup component is a wrapper component for a radio group.\n \n @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n /\n\nexport const RadioGroup = ({\n fdKey = 'radio-default',\n value = '',\n onChange,\n label,\n required = false,\n helperText,\n errorText,\n children,\n ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n\n const labelId = `${fdKey}-label`;\n const helperId = helperText ? `${fdKey}-helper` : undefined;\n const errorId = errorText ? `${fdKey}-error` : undefined;\n const describedBy = [helperId, errorId].filter(Boolean).join(' ') \|\| undefined;\n\n const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n return (\n <Box>\n <StyledLabelContainer>\n <FormLabel id={labelId}>\n {label} {required && <WeakText>{' '}</WeakText>}\n </FormLabel>\n {helperText ? ~~(\n~~ <MuiFormHelperText id={helperId}~~>\n~~ {helperText}\n </MuiFormHelperText~~>\n )~~ : null}\n\n {!!errorText && (\n <MuiFormHelperText error id={errorId}>\n <CancelCircleIcon size={\"md\"} />\n {errorText}\n </MuiFormHelperText>\n )}\n\n </StyledLabelContainer>\n\n <MuiRadioGroup\n aria-describedby={describedBy}\n aria-invalid={errorText ? true : undefined}\n aria-labelledby={labelId}\n name={fdKey}\n onChange={handleChange}\n value={value}\n {...groupProps}\n >\n {React.Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n // Check if child has FormControlLabel-specific props (value and control)\n // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n const childProps = child.props as Partial<FormControlLabelProps>;\n if (!('value' in childProps) \|\| !('control' in childProps)) {\n return child;\n }\n\n const formControlLabelProps = childProps as FormControlLabelProps;\n const radioValue = typeof formControlLabelProps.value === 'string' ? formControlLabelProps.value : String(formControlLabelProps.value ?? '');\n const isSelected = value === radioValue;\n\n // Extract Radio component from FormControlLabel's control prop\n const radioControl = formControlLabelProps.control;\n\n const optionConditionalChildren = formControlLabelProps.children;\n\n // Clone the Radio component with updated children and checked state\n const updatedRadio = isValidElement(radioControl)\n ? React.cloneElement(radioControl, {\n ...(radioControl.props as Record<string, unknown>),\n checked: isSelected,\n error: !!errorText,\n name: fdKey,\n } as Partial<unknown>)\n : radioControl;\n\n return (\n <StyledBox key={radioValue}>\n {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n ...formControlLabelProps,\n children: undefined,\n control: updatedRadio,\n })}\n\n {/* conditional block under the selected option */}\n {isSelected && optionConditionalChildren && (\n <ConditionalContainer~~>\n~~ {optionConditionalChildren}\n </ConditionalContainer>\n )}\n </StyledBox>\n );\n })}\n </MuiRadioGroup>\n </Box>\n );\n}\n\nexport default RadioGroup;"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","name","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"oZAWA,MAAMA,EAAYC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,~~CAChCC~~,UAAWD,EAAME,QAAQ,GAAIC,aAAc,~~MAG7CC~~,EAAuBN,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAAA,OAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,~~QAuCfgB~~,EAAa,EACxBC,QAAQ,gBACRC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,~~MAGH~~,MAAMC,EAAU,GAAGT,UACbU,EAAWL,EAAa,GAAGL,gBAAiBW,EAC5CC,EAAUN,EAAY,GAAGN,eAAgBW,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAAAA,KAACrC,EAAG,CAAA2B,SAAA,CACFU,EAAAA,KAAChC,EAAoB,CAAAsB,SAAA,CACnBU,EAAAA,KAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,MAACxB,EAAQ,CAAAW,SAAE,UAEjCF,~~EACCe~~,EAAAA,IAACC,EAAiB,CAACF,GAAIT,EAAQH,~~SAC5BF~~,~~IAED~~,~~OAEDC~~,GACDW,EAAAA,KAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,~~EAAOL~~,~~SAAA,CAClCa,~~EAAAA,IAACG,EAAgB,CAACC,KAAM,OACvBlB,~~QAMPc~~,EAAAA,IAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,~~oBAChBF~~,EACjBiB,KAAM1B,EACNE,~~SA5B~~+C,CAACyB,EAAGC,IAAW1B,EAASyB,EAAGC,~~GA6B1E3B~~,MAAOA,KACHO,EAAUD,SAEbsB,EAAMC,SAASC,IAAIxB,GAAWyB,IAC7B,IAAKC,EAAAA,eAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,~~EAAoD~~,iBAAhCD,EAAsBnC,~~MAAqBmC~~,EAAsBnC,~~MAAQqC~~,OAAOF,EAAsBnC,OAAS,~~IACnIsC~~,EAAatC,IAAUoC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB7B,SAGlDoC,EAAeV,EAAAA,eAAeO,GAChCX,EAAMe,aAAaJ,EAAc,~~IAC7BA~~,EAAaL,MACjBU,QAASN,EACTjB,QAAShB,EACToB,KAAM1B,~~IAENwC~~,EAEJ,OACEvB,EAAAA,KAACvC,EAAS,CAAA6B,SAAA,CACPsB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH7B,cAAUI,EACV8B,QAASE,IAIVJ,GAAcG,GACbtB,EAAAA,IAAChC,EAAoB,CAAAmB,~~SAClBmC~~,~~MAVSL~~"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n ...{ marginTop: theme.spacing(2), marginBottom: 0 },\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n marginTop: theme.spacing(2),\n marginLeft: theme.spacing(1.75),\n paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group /\nexport interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'name' \| 'onChange' \| 'value'> {\n /* Identifier applied to the radio group; also used for the radio name attribute. /\n fdKey?: string;\n /* Currently selected option value; use null or undefined when no option should be selected. /\n value?: string \| null;\n /* Callback fired whenever the selection changes with the event and newly selected value. /\n onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n /* Label rendered above the group; accepts plain text or a custom node. /\n label: React.ReactNode;\n /* Marks the radio group as required and surfaces the required indicator. /\n required?: boolean;\n /* Helper text displayed below the label to provide additional guidance. /\n helperText?: string;\n /* Error message shown below the helper text and marks the inputs as invalid. /\n errorText?: string;\n /* The children of the radio group. /\n children?: React.ReactNode;\n}\n\n/\n RadioGroup component is a wrapper component for a radio group.\n \n @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n /\n\nexport const RadioGroup = ({\n fdKey = 'radio-default',\n value = '',\n onChange,\n label,\n required = false,\n helperText,\n errorText,\n children,\n ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n const labelId = `${fdKey}-label`;\n const helperId = helperText ? `${fdKey}-helper` : undefined;\n const errorId = errorText ? `${fdKey}-error` : undefined;\n const describedBy = [helperId, errorId].filter(Boolean).join(' ') \|\| undefined;\n\n const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n return (\n <Box>\n <StyledLabelContainer>\n <FormLabel id={labelId}>\n {label} {required && <WeakText>{' '}</WeakText>}\n </FormLabel>\n {helperText ? <MuiFormHelperText id={helperId}>{helperText}</MuiFormHelperText> : null}\n\n {!!errorText && (\n <MuiFormHelperText error id={errorId}>\n <CancelCircleIcon size={'md'} />\n {errorText}\n </MuiFormHelperText>\n )}\n </StyledLabelContainer>\n\n <MuiRadioGroup\n aria-describedby={describedBy}\n aria-invalid={errorText ? true : undefined}\n aria-labelledby={labelId}\n name={fdKey}\n onChange={handleChange}\n value={value}\n {...groupProps}\n >\n {React.Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n // Check if child has FormControlLabel-specific props (value and control)\n // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n const childProps = child.props as Partial<FormControlLabelProps>;\n if (!('value' in childProps) \|\| !('control' in childProps)) {\n return child;\n }\n\n const formControlLabelProps = childProps as FormControlLabelProps;\n const radioValue =\n typeof formControlLabelProps.value === 'string'\n ? formControlLabelProps.value\n : String(formControlLabelProps.value ?? '');\n const isSelected = value === radioValue;\n\n // Extract Radio component from FormControlLabel's control prop\n const radioControl = formControlLabelProps.control;\n\n const optionConditionalChildren = formControlLabelProps.children;\n\n // Clone the Radio component with updated children and checked state\n const updatedRadio = isValidElement(radioControl)\n ? React.cloneElement(radioControl, {\n ...(radioControl.props as Record<string, unknown>),\n checked: isSelected,\n error: !!errorText,\n name: fdKey,\n } as Partial<unknown>)\n : radioControl;\n\n return (\n <StyledBox key={radioValue}>\n {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n ...formControlLabelProps,\n children: undefined,\n control: updatedRadio,\n })}\n\n {/* conditional block under the selected option */}\n {isSelected && optionConditionalChildren && (\n <ConditionalContainer>{optionConditionalChildren}</ConditionalContainer>\n )}\n </StyledBox>\n );\n })}\n </MuiRadioGroup>\n </Box>\n );\n};\n\nexport default RadioGroup;\n"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","name","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"oZAWA,MAAMA,EAAYC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG5CC,EAAuBN,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAAA,OAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAsCfgB,EAAa,EACxBC,QAAQ,gBACRC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAEH,MAAMC,EAAU,GAAGT,UACbU,EAAWL,EAAa,GAAGL,gBAAiBW,EAC5CC,EAAUN,EAAY,GAAGN,eAAgBW,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAAAA,KAACrC,EAAG,CAAA2B,SAAA,CACFU,EAAAA,KAAChC,EAAoB,CAAAsB,SAAA,CACnBU,EAAAA,KAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,MAACxB,EAAQ,CAAAW,SAAE,UAEjCF,EAAae,EAAAA,IAACC,EAAiB,CAACF,GAAIT,EAAQH,SAAGF,IAAkC,OAE/EC,GACDW,EAAAA,KAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,YAC3BQ,EAAAA,IAACG,EAAgB,CAACC,KAAM,OACvBlB,QAKPc,EAAAA,IAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,EAAS,kBACzBF,EACjBiB,KAAM1B,EACNE,SAvB+C,CAACyB,EAAGC,IAAW1B,EAASyB,EAAGC,GAwB1E3B,MAAOA,KACHO,EAAUD,SAEbsB,EAAMC,SAASC,IAAIxB,GAAWyB,IAC7B,IAAKC,EAAAA,eAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EACmC,iBAAhCD,EAAsBnC,MACzBmC,EAAsBnC,MACtBqC,OAAOF,EAAsBnC,OAAS,IACtCsC,EAAatC,IAAUoC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB7B,SAGlDoC,EAAeV,EAAAA,eAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC3BA,EAAaL,MACjBU,QAASN,EACTjB,QAAShB,EACToB,KAAM1B,IAERwC,EAEJ,OACEvB,EAAAA,KAACvC,EAAS,CAAA6B,SAAA,CACPsB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH7B,cAAUI,EACV8B,QAASE,IAIVJ,GAAcG,GACbtB,EAAAA,IAAChC,EAAoB,CAAAmB,SAAEmC,MATXL"}

package/dist/components/molecules/RadioGroup/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n ...({ marginTop: theme.spacing(2), marginBottom: 0 }),\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n marginTop: theme.spacing(2),\n marginLeft: theme.spacing(1.75),\n paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group /\nexport interface RadioGroupProps\n extends Omit<MuiRadioGroupProps, 'name' \| 'onChange' \| 'value'> {\n /* Identifier applied to the radio group; also used for the radio name attribute. /\n fdKey?: string;\n /* Currently selected option value; use null or undefined when no option should be selected. /\n value?: string \| null;\n /* Callback fired whenever the selection changes with the event and newly selected value. /\n onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n /* Label rendered above the group; accepts plain text or a custom node. /\n label: React.ReactNode;\n /* Marks the radio group as required and surfaces the required indicator. /\n required?: boolean;\n /* Helper text displayed below the label to provide additional guidance. /\n helperText?: string;\n /* Error message shown below the helper text and marks the inputs as invalid. /\n errorText?: string;\n /* The children of the radio group. /\n children?: React.ReactNode;\n}\n\n/\n RadioGroup component is a wrapper component for a radio group.\n \n @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n /\n\nexport const RadioGroup = ({\n fdKey = 'radio-default',\n value = '',\n onChange,\n label,\n required = false,\n helperText,\n errorText,\n children,\n ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n\n const labelId = `${fdKey}-label`;\n const helperId = helperText ? `${fdKey}-helper` : undefined;\n const errorId = errorText ? `${fdKey}-error` : undefined;\n const describedBy = [helperId, errorId].filter(Boolean).join(' ') \|\| undefined;\n\n const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n return (\n <Box>\n <StyledLabelContainer>\n <FormLabel id={labelId}>\n {label} {required && <WeakText>{' '}</WeakText>}\n </FormLabel>\n {helperText ? ~~(\n~~ <MuiFormHelperText id={helperId}~~>\n~~ {helperText}\n </MuiFormHelperText~~>\n )~~ : null}\n\n {!!errorText && (\n <MuiFormHelperText error id={errorId}>\n <CancelCircleIcon size={\"md\"} />\n {errorText}\n </MuiFormHelperText>\n )}\n\n </StyledLabelContainer>\n\n <MuiRadioGroup\n aria-describedby={describedBy}\n aria-invalid={errorText ? true : undefined}\n aria-labelledby={labelId}\n name={fdKey}\n onChange={handleChange}\n value={value}\n {...groupProps}\n >\n {React.Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n // Check if child has FormControlLabel-specific props (value and control)\n // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n const childProps = child.props as Partial<FormControlLabelProps>;\n if (!('value' in childProps) \|\| !('control' in childProps)) {\n return child;\n }\n\n const formControlLabelProps = childProps as FormControlLabelProps;\n const radioValue = typeof formControlLabelProps.value === 'string' ? formControlLabelProps.value : String(formControlLabelProps.value ?? '');\n const isSelected = value === radioValue;\n\n // Extract Radio component from FormControlLabel's control prop\n const radioControl = formControlLabelProps.control;\n\n const optionConditionalChildren = formControlLabelProps.children;\n\n // Clone the Radio component with updated children and checked state\n const updatedRadio = isValidElement(radioControl)\n ? React.cloneElement(radioControl, {\n ...(radioControl.props as Record<string, unknown>),\n checked: isSelected,\n error: !!errorText,\n name: fdKey,\n } as Partial<unknown>)\n : radioControl;\n\n return (\n <StyledBox key={radioValue}>\n {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n ...formControlLabelProps,\n children: undefined,\n control: updatedRadio,\n })}\n\n {/* conditional block under the selected option */}\n {isSelected && optionConditionalChildren && (\n <ConditionalContainer~~>\n~~ {optionConditionalChildren}\n </ConditionalContainer>\n )}\n </StyledBox>\n );\n })}\n </MuiRadioGroup>\n </Box>\n );\n}\n\nexport default RadioGroup;"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","name","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"iYAWA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,~~CAChCC~~,UAAWD,EAAME,QAAQ,GAAIC,aAAc,~~MAG7CC~~,EAAuBN,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,~~QAuCfgB~~,EAAa,EACxBC,QAAQ,gBACRC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,~~MAGH~~,MAAMC,EAAU,GAAGT,UACbU,EAAWL,EAAa,GAAGL,gBAAiBW,EAC5CC,EAAUN,EAAY,GAAGN,eAAgBW,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAACrC,EAAG,CAAA2B,SAAA,CACFU,EAAChC,EAAoB,CAAAsB,SAAA,CACnBU,EAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,EAACxB,EAAQ,CAAAW,SAAE,UAEjCF,~~EACCe~~,EAACC,EAAiB,CAACF,GAAIT,EAAQH,~~SAC5BF~~,~~IAED~~,~~OAEDC~~,GACDW,EAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,~~EAAOL~~,~~SAAA,CAClCa,~~EAACG,EAAgB,CAACC,KAAM,OACvBlB,~~QAMPc~~,EAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,~~oBAChBF~~,EACjBiB,KAAM1B,EACNE,~~SA5B~~+C,CAACyB,EAAGC,IAAW1B,EAASyB,EAAGC,~~GA6B1E3B~~,MAAOA,KACHO,EAAUD,SAEbsB,EAAMC,SAASC,IAAIxB,GAAWyB,IAC7B,IAAKC,EAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,~~EAAoD~~,iBAAhCD,EAAsBnC,~~MAAqBmC~~,EAAsBnC,~~MAAQqC~~,OAAOF,EAAsBnC,OAAS,~~IACnIsC~~,EAAatC,IAAUoC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB7B,SAGlDoC,EAAeV,EAAeO,GAChCX,EAAMe,aAAaJ,EAAc,~~IAC7BA~~,EAAaL,MACjBU,QAASN,EACTjB,QAAShB,EACToB,KAAM1B,~~IAENwC~~,EAEJ,OACEvB,EAACvC,EAAS,CAAA6B,SAAA,CACPsB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH7B,cAAUI,EACV8B,QAASE,IAIVJ,GAAcG,GACbtB,EAAChC,EAAoB,CAAAmB,~~SAClBmC~~,~~MAVSL~~"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n ...{ marginTop: theme.spacing(2), marginBottom: 0 },\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n marginTop: theme.spacing(2),\n marginLeft: theme.spacing(1.75),\n paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group /\nexport interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'name' \| 'onChange' \| 'value'> {\n /* Identifier applied to the radio group; also used for the radio name attribute. /\n fdKey?: string;\n /* Currently selected option value; use null or undefined when no option should be selected. /\n value?: string \| null;\n /* Callback fired whenever the selection changes with the event and newly selected value. /\n onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n /* Label rendered above the group; accepts plain text or a custom node. /\n label: React.ReactNode;\n /* Marks the radio group as required and surfaces the required indicator. /\n required?: boolean;\n /* Helper text displayed below the label to provide additional guidance. /\n helperText?: string;\n /* Error message shown below the helper text and marks the inputs as invalid. /\n errorText?: string;\n /* The children of the radio group. /\n children?: React.ReactNode;\n}\n\n/\n RadioGroup component is a wrapper component for a radio group.\n \n @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n /\n\nexport const RadioGroup = ({\n fdKey = 'radio-default',\n value = '',\n onChange,\n label,\n required = false,\n helperText,\n errorText,\n children,\n ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n const labelId = `${fdKey}-label`;\n const helperId = helperText ? `${fdKey}-helper` : undefined;\n const errorId = errorText ? `${fdKey}-error` : undefined;\n const describedBy = [helperId, errorId].filter(Boolean).join(' ') \|\| undefined;\n\n const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n return (\n <Box>\n <StyledLabelContainer>\n <FormLabel id={labelId}>\n {label} {required && <WeakText>{' '}</WeakText>}\n </FormLabel>\n {helperText ? <MuiFormHelperText id={helperId}>{helperText}</MuiFormHelperText> : null}\n\n {!!errorText && (\n <MuiFormHelperText error id={errorId}>\n <CancelCircleIcon size={'md'} />\n {errorText}\n </MuiFormHelperText>\n )}\n </StyledLabelContainer>\n\n <MuiRadioGroup\n aria-describedby={describedBy}\n aria-invalid={errorText ? true : undefined}\n aria-labelledby={labelId}\n name={fdKey}\n onChange={handleChange}\n value={value}\n {...groupProps}\n >\n {React.Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n // Check if child has FormControlLabel-specific props (value and control)\n // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n const childProps = child.props as Partial<FormControlLabelProps>;\n if (!('value' in childProps) \|\| !('control' in childProps)) {\n return child;\n }\n\n const formControlLabelProps = childProps as FormControlLabelProps;\n const radioValue =\n typeof formControlLabelProps.value === 'string'\n ? formControlLabelProps.value\n : String(formControlLabelProps.value ?? '');\n const isSelected = value === radioValue;\n\n // Extract Radio component from FormControlLabel's control prop\n const radioControl = formControlLabelProps.control;\n\n const optionConditionalChildren = formControlLabelProps.children;\n\n // Clone the Radio component with updated children and checked state\n const updatedRadio = isValidElement(radioControl)\n ? React.cloneElement(radioControl, {\n ...(radioControl.props as Record<string, unknown>),\n checked: isSelected,\n error: !!errorText,\n name: fdKey,\n } as Partial<unknown>)\n : radioControl;\n\n return (\n <StyledBox key={radioValue}>\n {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n ...formControlLabelProps,\n children: undefined,\n control: updatedRadio,\n })}\n\n {/* conditional block under the selected option */}\n {isSelected && optionConditionalChildren && (\n <ConditionalContainer>{optionConditionalChildren}</ConditionalContainer>\n )}\n </StyledBox>\n );\n })}\n </MuiRadioGroup>\n </Box>\n );\n};\n\nexport default RadioGroup;\n"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","name","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"iYAWA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG5CC,EAAuBN,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAsCfgB,EAAa,EACxBC,QAAQ,gBACRC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAEH,MAAMC,EAAU,GAAGT,UACbU,EAAWL,EAAa,GAAGL,gBAAiBW,EAC5CC,EAAUN,EAAY,GAAGN,eAAgBW,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAACrC,EAAG,CAAA2B,SAAA,CACFU,EAAChC,EAAoB,CAAAsB,SAAA,CACnBU,EAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,EAACxB,EAAQ,CAAAW,SAAE,UAEjCF,EAAae,EAACC,EAAiB,CAACF,GAAIT,EAAQH,SAAGF,IAAkC,OAE/EC,GACDW,EAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,YAC3BQ,EAACG,EAAgB,CAACC,KAAM,OACvBlB,QAKPc,EAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,EAAS,kBACzBF,EACjBiB,KAAM1B,EACNE,SAvB+C,CAACyB,EAAGC,IAAW1B,EAASyB,EAAGC,GAwB1E3B,MAAOA,KACHO,EAAUD,SAEbsB,EAAMC,SAASC,IAAIxB,GAAWyB,IAC7B,IAAKC,EAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EACmC,iBAAhCD,EAAsBnC,MACzBmC,EAAsBnC,MACtBqC,OAAOF,EAAsBnC,OAAS,IACtCsC,EAAatC,IAAUoC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB7B,SAGlDoC,EAAeV,EAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC3BA,EAAaL,MACjBU,QAASN,EACTjB,QAAShB,EACToB,KAAM1B,IAERwC,EAEJ,OACEvB,EAACvC,EAAS,CAAA6B,SAAA,CACPsB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH7B,cAAUI,EACV8B,QAASE,IAIVJ,GAAcG,GACbtB,EAAChC,EAAoB,CAAAmB,SAAEmC,MATXL"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/portal-library",
-  "version": "7.3.5",
+  "version": "7.4.0",
   "files": [
     "dist"
   ],