@flipdish/portal-library 7.3.5 → 7.5.0

package/README.md

@@ -76,6 +76,12 @@ import FlipdishUIThemeProvider from '@flipdish/portal-library/themes/ThemeProvid
 </FlipdishUIThemeProvider>;
 ```
 
+## Contributing
+
+Start with the contributing guide for editor setup, conventions, and component guidelines:
+
+- [CONTRIBUTING.md](./CONTRIBUTING.md)
+
 ## Using Icons
 
 To use an icon in your project, import the icon and use it like any other component. You can specify the size using the `size` prop.

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

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

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

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

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

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

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

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

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

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

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

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