@skodaflow/web-library 7.16.0 → 8.0.0

package/cjs/components/header/HeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderButton.js","sources":["../../../../../src/components/header/HeaderButton.tsx"],"sourcesContent":["import React, { ElementType, FC, ForwardedRef, forwardRef, useMemo } from 'react';\nimport {\n  IconButton,\n  IconButtonProps,\n  ButtonBase,\n  Tooltip,\n  TooltipProps,\n  Badge,\n  BadgeProps,\n  useTheme,\n} from '@mui/material';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { CarIcon } from '@/src/components/icon/stroke/CarIcon';\nimport { BellIcon } from '@/src/components/icon/stroke/BellIcon';\nimport { SearchIcon } from '@/src/components/icon/stroke/SearchIcon';\nimport { UserIcon } from '@/src/components/icon/stroke/UserIcon';\nimport { HeartIcon } from '@/src/components/icon/stroke/HeartIcon';\nimport { ShoppingBagIcon } from '@/src/components/icon/stroke/ShoppingBagIcon';\nimport { GlobeIcon } from '@/src/components/icon/stroke/GlobeIcon';\nimport { LoginIcon } from '@/src/components/icon/stroke/LoginIcon';\nimport { LogoutIcon } from '@/src/components/icon/stroke/LogoutIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { CircleQuestionIcon } from '@/src/components/icon/stroke/CircleQuestionIcon';\nimport { MenuIcon } from '@/src/components/icon/stroke/MenuIcon';\n\nexport interface HeaderButtonProps extends IconButtonProps<ElementType> {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: TooltipProps['title'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: BadgeProps;\n  /**\n   * @deprecated use badgeProps instead\n   */\n  indicator?: string;\n  /**\n   * @deprecated provide icon directly as children (e.g. <BellIcon />)\n   */\n  icon?:\n    | 'car'\n    | 'bell'\n    | 'search'\n    | 'profile'\n    | 'user'\n    | 'heart'\n    | 'shopping-bag'\n    | 'globe'\n    | 'login'\n    | 'logout'\n    | 'close'\n    | 'circle-question'\n    | 'hamburger';\n}\n\n/**\n * IconButton for the action links\n */\nexport const HeaderButton: FC<HeaderButtonProps> = forwardRef(\n  ({ children, sx, icon, label, indicator, extend, tooltipProps, badgeProps, ...rest }, ref) => {\n    const theme = useTheme();\n    const { title, ...restTooltip } = tooltipProps ?? {};\n\n    // mapper to previous api\n    const Icon = useMemo(() => {\n      switch (icon) {\n        case 'car':\n          return CarIcon;\n        case 'bell':\n          return BellIcon;\n        case 'search':\n          return SearchIcon;\n        case 'profile':\n        case 'user':\n          return UserIcon;\n        case 'heart':\n          return HeartIcon;\n        case 'shopping-bag':\n          return ShoppingBagIcon;\n        case 'globe':\n          return GlobeIcon;\n        case 'login':\n          return LoginIcon;\n        case 'logout':\n          return LogoutIcon;\n        case 'close':\n          return CloseIcon;\n        case 'circle-question':\n          return CircleQuestionIcon;\n        case 'hamburger':\n          return MenuIcon;\n        default:\n          return undefined;\n      }\n    }, [icon]);\n\n    if (extend) {\n      return (\n        <ButtonBase\n          sx={{\n            ...theme.typography.list,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'flex-start',\n            gap: 1.25,\n            py: 1.5,\n            px: 1.25,\n            // icon inside\n            '& .MuiSvgIcon-root': {\n              fontSize: '17px',\n            },\n            // disabled style\n            '&.Mui-disabled': {\n              color: 'disabled.tertiary',\n            },\n            // interactive style\n            ...getInteractiveStyle(\n              {\n                fontWeight: '300',\n              },\n              {\n                fontWeight: '700',\n              },\n            ),\n            // focus ring\n            ...getFocusRingStyle(theme),\n            '&&:before': {\n              borderRadius: '4px',\n            },\n            ...sx,\n          }}\n          ref={ref as ForwardedRef<HTMLButtonElement>}\n          data-testid=\"HeaderButton\"\n          {...rest}\n        >\n          <Badge {...(indicator && { variant: 'dot', invisible: false })} {...badgeProps}>\n            {children || <Icon />}\n          </Badge>\n          {label || title}\n        </ButtonBase>\n      );\n    }\n\n    return (\n      <Tooltip title={label || title} {...restTooltip}>\n        <IconButton\n          sx={sx}\n          size=\"medium\"\n          ref={ref as ForwardedRef<HTMLButtonElement>}\n          data-testid=\"HeaderButton\"\n          {...rest}\n        >\n          <Badge {...(indicator && { variant: 'dot', invisible: false })} {...badgeProps}>\n            {children || <Icon />}\n          </Badge>\n        </IconButton>\n      </Tooltip>\n    );\n  },\n);\n\n/** @deprecated use <HeaderButton> with icon of your choosing instead */\nexport const HeaderBellButton: FC<HeaderButtonProps> = forwardRef((props, ref) => (\n  <HeaderButton ref={ref} {...props}>\n    <BellIcon />\n  </HeaderButton>\n));\n/** @deprecated use <HeaderButton> with icon of your choosing instead */\nexport const HeaderSearchButton: FC<HeaderButtonProps> = forwardRef((props, ref) => (\n  <HeaderButton ref={ref} {...props}>\n    <SearchIcon />\n  </HeaderButton>\n));\n/** @deprecated use <HeaderButton> with icon of your choosing instead */\nexport const HeaderProfileButton: FC<HeaderButtonProps> = forwardRef((props, ref) => (\n  <HeaderButton ref={ref} {...props}>\n    <UserIcon />\n  </HeaderButton>\n));\n/** @deprecated use <HeaderButton> with icon of your choosing instead */\nexport const HeaderHeartButton: FC<HeaderButtonProps> = forwardRef((props, ref) => (\n  <HeaderButton ref={ref} {...props}>\n    <HeartIcon />\n  </HeaderButton>\n));\n/** @deprecated use <HeaderButton> with icon of your choosing instead */\nexport const HeaderCartButton: FC<HeaderButtonProps> = forwardRef((props, ref) => (\n  <HeaderButton ref={ref} {...props}>\n    <ShoppingBagIcon />\n  </HeaderButton>\n));\n/** @deprecated use <HeaderButton> with icon of your choosing instead */\nexport const HeaderLanguageButton: FC<HeaderButtonProps> = forwardRef((props, ref) => (\n  <HeaderButton ref={ref} {...props}>\n    <GlobeIcon />\n  </HeaderButton>\n));\n/** @deprecated use <HeaderButton> with icon of your choosing instead */\nexport const HeaderLoginButton: FC<HeaderButtonProps> = forwardRef((props, ref) => (\n  <HeaderButton ref={ref} {...props}>\n    <LoginIcon />\n  </HeaderButton>\n));\n/** @deprecated use <HeaderButton> with icon of your choosing instead */\nexport const HeaderLogoutButton: FC<HeaderButtonProps> = forwardRef((props, ref) => (\n  <HeaderButton ref={ref} {...props}>\n    <LogoutIcon />\n  </HeaderButton>\n));\n/** @deprecated use <HeaderButton> with icon of your choosing instead */\nexport const HeaderCloseButton: FC<HeaderButtonProps> = forwardRef((props, ref) => (\n  <HeaderButton ref={ref} {...props}>\n    <CloseIcon />\n  </HeaderButton>\n));\n/** @deprecated use <HeaderButton> with icon of your choosing instead */\nexport const HeaderFaqButton: FC<HeaderButtonProps> = forwardRef((props, ref) => (\n  <HeaderButton ref={ref} {...props}>\n    <CircleQuestionIcon />\n  </HeaderButton>\n));\n/** @deprecated use <HeaderButton> with icon of your choosing instead */\nexport const HeaderMenuButton: FC<HeaderButtonProps> = forwardRef((props, ref) => (\n  <HeaderButton ref={ref} {...props}>\n    <MenuIcon />\n  </HeaderButton>\n));\n"],"names":["HeaderButton","forwardRef","_a","ref","children","sx","icon","label","indicator","extend","tooltipProps","badgeProps","rest","__rest","theme","useTheme","_b","title","restTooltip","Icon","useMemo","CarIcon","BellIcon","SearchIcon","UserIcon","HeartIcon","ShoppingBagIcon","GlobeIcon","LoginIcon","LogoutIcon","CloseIcon","CircleQuestionIcon","MenuIcon","_jsxs","ButtonBase","Object","assign","typography","list","display","alignItems","justifyContent","gap","py","px","fontSize","color","getInteractiveStyle","fontWeight","getFocusRingStyle","borderRadius","_jsx","Badge","variant","invisible","Tooltip","IconButton","size","HeaderBellButton","props","HeaderSearchButton","HeaderProfileButton","HeaderHeartButton","HeaderCartButton","HeaderLanguageButton","HeaderLoginButton","HeaderLogoutButton","HeaderCloseButton","HeaderFaqButton","HeaderMenuButton"],"mappings":"osBAqEO,MAAMA,EAAsCC,EAAAA,WACjD,CAACC,EAAqFC,SAArFC,SAAEA,EAAQC,GAAEA,EAAEC,KAAEA,EAAIC,MAAEA,EAAKC,UAAEA,EAASC,OAAEA,EAAMC,aAAEA,EAAYC,WAAEA,GAAUT,EAAKU,EAAIC,EAAAA,OAAAX,EAAjF,mFACC,MAAMY,EAAQC,EAAAA,WACRC,EAA4BN,QAAAA,EAAgB,CAAA,GAA5CO,MAAEA,GAAKD,EAAKE,EAAWL,EAAAA,OAAAG,EAAvB,CAAA,UAGAG,EAAOC,EAAAA,QAAQ,KACnB,OAAQd,GACN,IAAK,MACH,OAAOe,EAAAA,QACT,IAAK,OACH,OAAOC,EAAAA,SACT,IAAK,SACH,OAAOC,EAAAA,WACT,IAAK,UACL,IAAK,OACH,OAAOC,EAAAA,SACT,IAAK,QACH,OAAOC,EAAAA,UACT,IAAK,eACH,OAAOC,EAAAA,gBACT,IAAK,QACH,OAAOC,EAAAA,UACT,IAAK,QACH,OAAOC,EAAAA,UACT,IAAK,SACH,OAAOC,EAAAA,WACT,IAAK,QACH,OAAOC,EAAAA,UACT,IAAK,kBACH,OAAOC,EAAAA,mBACT,IAAK,YACH,OAAOC,EAAAA,SACT,QACE,SAEH,CAAC1B,IAEJ,OAAIG,EAEAwB,EAAAA,KAACC,EAAAA,WAAUC,OAAAC,OAAA,CACT/B,GAAE8B,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACGtB,EAAMuB,WAAWC,MAAI,CACxBC,QAAS,OACTC,WAAY,SACZC,eAAgB,aAChBC,IAAK,KACLC,GAAI,IACJC,GAAI,KAEJ,qBAAsB,CACpBC,SAAU,QAGZ,iBAAkB,CAChBC,MAAO,uBAGNC,EAAAA,oBACD,CACEC,WAAY,OAEd,CACEA,WAAY,SAIbC,EAAAA,kBAAkBnC,IAAM,CAC3B,YAAa,CACXoC,aAAc,SAEb7C,GAELF,IAAKA,EAAsC,cAC/B,gBACRS,EAAI,CAAAR,SAAA,CAER+C,MAACC,EAAAA,MAAKjB,OAAAC,OAAA,CAAA,EAAM5B,GAAa,CAAE6C,QAAS,MAAOC,WAAW,GAAc3C,YACjEP,GAAY+C,EAAAA,IAAChC,EAAI,CAAA,MAEnBZ,GAASU,MAMdkC,MAACI,EAAAA,QAAOpB,OAAAC,OAAA,CAACnB,MAAOV,GAASU,GAAWC,EAAW,CAAAd,SAC7C+C,EAAAA,IAACK,EAAAA,WAAUrB,OAAAC,OAAA,CACT/B,GAAIA,EACJoD,KAAK,SACLtD,IAAKA,EAAsC,cAC/B,gBACRS,EAAI,CAAAR,SAER+C,EAAAA,IAACC,EAAAA,MAAKjB,OAAAC,OAAA,CAAA,EAAM5B,GAAa,CAAE6C,QAAS,MAAOC,WAAW,GAAc3C,EAAU,CAAAP,SAC3EA,GAAY+C,MAAChC,EAAI,CAAA,cASjBuC,EAA0CzD,EAAAA,WAAW,CAAC0D,EAAOxD,IACxEgD,EAAAA,IAACnD,EAAYmC,OAAAC,OAAA,CAACjC,IAAKA,GAASwD,EAAK,CAAAvD,SAC/B+C,EAAAA,IAAC7B,WAAQ,CAAA,OAIAsC,EAA4C3D,EAAAA,WAAW,CAAC0D,EAAOxD,IAC1EgD,EAAAA,IAACnD,EAAYmC,OAAAC,OAAA,CAACjC,IAAKA,GAASwD,EAAK,CAAAvD,SAC/B+C,EAAAA,IAAC5B,aAAU,CAAA,OAIFsC,EAA6C5D,EAAAA,WAAW,CAAC0D,EAAOxD,IAC3EgD,EAAAA,IAACnD,EAAYmC,OAAAC,OAAA,CAACjC,IAAKA,GAASwD,EAAK,CAAAvD,SAC/B+C,EAAAA,IAAC3B,WAAQ,CAAA,OAIAsC,EAA2C7D,EAAAA,WAAW,CAAC0D,EAAOxD,IACzEgD,EAAAA,IAACnD,EAAYmC,OAAAC,OAAA,CAACjC,IAAKA,GAASwD,EAAK,CAAAvD,SAC/B+C,EAAAA,IAAC1B,YAAS,CAAA,OAIDsC,EAA0C9D,EAAAA,WAAW,CAAC0D,EAAOxD,IACxEgD,EAAAA,IAACnD,EAAYmC,OAAAC,OAAA,CAACjC,IAAKA,GAASwD,EAAK,CAAAvD,SAC/B+C,EAAAA,IAACzB,kBAAe,CAAA,OAIPsC,EAA8C/D,EAAAA,WAAW,CAAC0D,EAAOxD,IAC5EgD,EAAAA,IAACnD,EAAYmC,OAAAC,OAAA,CAACjC,IAAKA,GAASwD,EAAK,CAAAvD,SAC/B+C,EAAAA,IAACxB,YAAS,CAAA,OAIDsC,EAA2ChE,EAAAA,WAAW,CAAC0D,EAAOxD,IACzEgD,EAAAA,IAACnD,EAAYmC,OAAAC,OAAA,CAACjC,IAAKA,GAASwD,EAAK,CAAAvD,SAC/B+C,EAAAA,IAACvB,YAAS,CAAA,OAIDsC,EAA4CjE,EAAAA,WAAW,CAAC0D,EAAOxD,IAC1EgD,EAAAA,IAACnD,EAAYmC,OAAAC,OAAA,CAACjC,IAAKA,GAASwD,EAAK,CAAAvD,SAC/B+C,EAAAA,IAACtB,aAAU,CAAA,OAIFsC,EAA2ClE,EAAAA,WAAW,CAAC0D,EAAOxD,IACzEgD,EAAAA,IAACnD,EAAYmC,OAAAC,OAAA,CAACjC,IAAKA,GAASwD,EAAK,CAAAvD,SAC/B+C,EAAAA,IAACrB,YAAS,CAAA,OAIDsC,EAAyCnE,EAAAA,WAAW,CAAC0D,EAAOxD,IACvEgD,EAAAA,IAACnD,EAAYmC,OAAAC,OAAA,CAACjC,IAAKA,GAASwD,EAAK,CAAAvD,SAC/B+C,EAAAA,IAACpB,qBAAkB,CAAA,OAIVsC,EAA0CpE,EAAAA,WAAW,CAAC0D,EAAOxD,IACxEgD,EAAAA,IAACnD,EAAYmC,OAAAC,OAAA,CAACjC,IAAKA,GAASwD,EAAK,CAAAvD,SAC/B+C,EAAAA,IAACnB,WAAQ,CAAA"}
+{"version":3,"file":"HeaderButton.js","sources":["../../../../../src/components/header/HeaderButton.tsx"],"sourcesContent":["import React, { ElementType, FC, ForwardedRef, forwardRef } from 'react';\nimport {\n  IconButton,\n  IconButtonProps,\n  ButtonBase,\n  Tooltip,\n  TooltipProps,\n  Badge,\n  BadgeProps,\n  useTheme,\n} from '@mui/material';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface HeaderButtonProps extends IconButtonProps<ElementType> {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: TooltipProps['title'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: BadgeProps;\n}\n\n/**\n * IconButton for the action links\n */\nexport const HeaderButton: FC<HeaderButtonProps> = forwardRef(\n  ({ children, sx, label, extend, tooltipProps, badgeProps, ...rest }, ref) => {\n    const theme = useTheme();\n    const { title, ...restTooltip } = tooltipProps ?? {};\n\n    if (extend) {\n      return (\n        <ButtonBase\n          sx={{\n            ...theme.typography.list,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'flex-start',\n            gap: 1.25,\n            py: 1.5,\n            px: 1.25,\n            // icon inside\n            '& .MuiSvgIcon-root': {\n              fontSize: '17px',\n            },\n            // disabled style\n            '&.Mui-disabled': {\n              color: 'disabled.tertiary',\n            },\n            // interactive style\n            ...getInteractiveStyle(\n              {\n                fontWeight: '300',\n              },\n              {\n                fontWeight: '700',\n              },\n            ),\n            // focus ring\n            ...getFocusRingStyle(theme),\n            '&&:before': {\n              borderRadius: '4px',\n            },\n            ...sx,\n          }}\n          ref={ref as ForwardedRef<HTMLButtonElement>}\n          data-testid=\"HeaderButton\"\n          {...rest}\n        >\n          <Badge {...badgeProps}>{children}</Badge>\n          {label || title}\n        </ButtonBase>\n      );\n    }\n\n    return (\n      <Tooltip title={label || title} {...restTooltip}>\n        <IconButton\n          sx={sx}\n          size=\"medium\"\n          ref={ref as ForwardedRef<HTMLButtonElement>}\n          data-testid=\"HeaderButton\"\n          {...rest}\n        >\n          <Badge {...badgeProps}>{children}</Badge>\n        </IconButton>\n      </Tooltip>\n    );\n  },\n);\n"],"names":["HeaderButton","forwardRef","_a","ref","children","sx","label","extend","tooltipProps","badgeProps","rest","__rest","theme","useTheme","_b","title","restTooltip","_jsxs","ButtonBase","Object","assign","typography","list","display","alignItems","justifyContent","gap","py","px","fontSize","color","getInteractiveStyle","fontWeight","getFocusRingStyle","borderRadius","_jsx","Badge","Tooltip","IconButton","size"],"mappings":"4MAoCO,MAAMA,EAAsCC,EAAAA,WACjD,CAACC,EAAoEC,KAApE,IAAAC,SAAEA,EAAQC,GAAEA,EAAEC,MAAEA,EAAKC,OAAEA,EAAMC,aAAEA,EAAYC,WAAEA,GAAUP,EAAKQ,EAAIC,EAAAA,OAAAT,EAAhE,gEACC,MAAMU,EAAQC,EAAAA,WACRC,EAA4BN,QAAAA,EAAgB,CAAA,GAA5CO,MAAEA,GAAKD,EAAKE,EAAWL,EAAAA,OAAAG,EAAvB,CAAA,UAEN,OAAIP,EAEAU,EAAAA,KAACC,EAAAA,WAAUC,OAAAC,OAAA,CACTf,GAAEc,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACGR,EAAMS,WAAWC,MAAI,CACxBC,QAAS,OACTC,WAAY,SACZC,eAAgB,aAChBC,IAAK,KACLC,GAAI,IACJC,GAAI,KAEJ,qBAAsB,CACpBC,SAAU,QAGZ,iBAAkB,CAChBC,MAAO,uBAGNC,EAAAA,oBACD,CACEC,WAAY,OAEd,CACEA,WAAY,SAIbC,EAAAA,kBAAkBrB,IAAM,CAC3B,YAAa,CACXsB,aAAc,SAEb7B,GAELF,IAAKA,EAAsC,cAC/B,gBACRO,EAAI,CAAAN,SAAA,CAER+B,EAAAA,IAACC,QAAKjB,OAAAC,OAAA,GAAKX,EAAU,CAAAL,SAAGA,KACvBE,GAASS,MAMdoB,EAAAA,IAACE,EAAAA,uBAAQtB,MAAOT,GAASS,GAAWC,YAClCmB,EAAAA,IAACG,EAAAA,0BACCjC,GAAIA,EACJkC,KAAK,SACLpC,IAAKA,EAAsC,cAC/B,gBACRO,EAAI,CAAAN,SAER+B,EAAAA,IAACC,QAAKjB,OAAAC,OAAA,CAAA,EAAKX,EAAU,CAAAL,SAAGA"}

package/cjs/components/header/HeaderLogo.d.ts

@@ -6,20 +6,8 @@ export interface HeaderLogoProps extends LinkProps {
      * Properties applied to Logo component
      */
     logoProps?: LogoProps;
-    /**
-     * @deprecated no longer has any effect
-     */
-    src?: string;
-    /**
-     * @deprecated no longer has any effect
-     */
-    alt?: string;
 }
 /**
  * Logo with link wrapper
  */
 export declare const HeaderLogo: FC<HeaderLogoProps>;
-/**
- * @deprecated use <HeaderLogo /> component instead
- */
-export declare const HeaderSkodaLogo: FC<HeaderLogoProps>;

package/cjs/components/header/HeaderLogo.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),s=require("react"),o=require("@mui/material"),i=require("../logo/Logo.js"),a=require("../focusring/focusring.js");const t=s.forwardRef((s,t)=>{var{sx:c,children:n,href:g,logoProps:l}=s,u=e.__rest(s,["sx","children","href","logoProps"]);const f=o.useTheme();return g||u.onClick?r.jsx(o.Link,Object.assign({sx:Object.assign(Object.assign({display:"block",position:"relative",py:1},a.getFocusRingStyle(f)),{"&.Mui-focusVisible":{boxShadow:"none"},"& .MuiSvgIcon-root":{display:"block"}}),href:g||"#",ref:t,"aria-label":"Home"},u,{children:n||r.jsx(i.Logo,Object.assign({},l))})):n||r.jsx(i.Logo,Object.assign({sx:c,ref:t},l))}),c=s.forwardRef((e,s)=>r.jsx(t,Object.assign({},e,{ref:s})));exports.HeaderLogo=t,exports.HeaderSkodaLogo=c;
+"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),s=require("react"),o=require("@mui/material"),i=require("../logo/Logo.js"),t=require("../focusring/focusring.js");const c=s.forwardRef((s,c)=>{var{sx:n,children:a,href:l,logoProps:g}=s,u=e.__rest(s,["sx","children","href","logoProps"]);const b=o.useTheme();return l||u.onClick?r.jsx(o.Link,Object.assign({sx:Object.assign(Object.assign({display:"block",position:"relative",py:1},t.getFocusRingStyle(b)),{"&.Mui-focusVisible":{boxShadow:"none"},"& .MuiSvgIcon-root":{display:"block"}}),href:l||"#",ref:c,"aria-label":"Home"},u,{children:a||r.jsx(i.Logo,Object.assign({},g))})):a||r.jsx(i.Logo,Object.assign({sx:n,ref:c},g))});exports.HeaderLogo=c;
 //# sourceMappingURL=HeaderLogo.js.map

package/cjs/components/header/HeaderLogo.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLogo.js","sources":["../../../../../src/components/header/HeaderLogo.tsx"],"sourcesContent":["import React, { FC, ForwardedRef, forwardRef } from 'react';\nimport { Link, LinkProps, useTheme } from '@mui/material';\nimport { Logo, LogoProps } from '@/src/components/logo/Logo';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface HeaderLogoProps extends LinkProps {\n  /**\n   * Properties applied to Logo component\n   */\n  logoProps?: LogoProps;\n  /**\n   * @deprecated no longer has any effect\n   */\n  src?: string;\n  /**\n   * @deprecated no longer has any effect\n   */\n  alt?: string;\n}\n\n/**\n * Logo with link wrapper\n */\nexport const HeaderLogo: FC<HeaderLogoProps> = forwardRef(({ sx, children, href, logoProps, ...rest }, ref) => {\n  const theme = useTheme();\n\n  if (href || rest.onClick) {\n    return (\n      <Link\n        sx={{\n          // same style is applied in Header logo wrapper\n          display: 'block',\n          position: 'relative',\n          py: 1,\n          // add proper focus ring\n          ...getFocusRingStyle(theme),\n          // remove default link box shadow\n          '&.Mui-focusVisible': {\n            boxShadow: 'none',\n          },\n          '& .MuiSvgIcon-root': {\n            display: 'block',\n          },\n        }}\n        href={href || '#'}\n        ref={ref}\n        aria-label=\"Home\"\n        {...rest}\n      >\n        {children || <Logo {...logoProps} />}\n      </Link>\n    );\n  }\n  return children || <Logo sx={sx} ref={ref as unknown as ForwardedRef<SVGSVGElement>} {...logoProps} />;\n});\n\n/**\n * @deprecated use <HeaderLogo /> component instead\n */\nexport const HeaderSkodaLogo: FC<HeaderLogoProps> = forwardRef((props, ref) => {\n  return <HeaderLogo {...props} ref={ref} />;\n});\n"],"names":["HeaderLogo","forwardRef","_a","ref","sx","children","href","logoProps","rest","__rest","theme","useTheme","onClick","_jsx","Link","Object","assign","display","position","py","getFocusRingStyle","boxShadow","Logo","HeaderSkodaLogo","props"],"mappings":"qLAuBO,MAAMA,EAAkCC,EAAAA,WAAW,CAACC,EAA4CC,KAA5C,IAAAC,GAAEA,EAAEC,SAAEA,EAAQC,KAAEA,EAAIC,UAAEA,GAASL,EAAKM,EAAIC,EAAAA,OAAAP,EAAxC,CAAA,KAAA,WAAA,OAAA,cACzD,MAAMQ,EAAQC,EAAAA,WAEd,OAAIL,GAAQE,EAAKI,QAEbC,EAAAA,IAACC,OAAIC,OAAAC,OAAA,CACHZ,GAAEW,OAAAC,OAAAD,OAAAC,OAAA,CAEAC,QAAS,QACTC,SAAU,WACVC,GAAI,GAEDC,EAAAA,kBAAkBV,IAAM,CAE3B,qBAAsB,CACpBW,UAAW,QAEb,qBAAsB,CACpBJ,QAAS,WAGbX,KAAMA,GAAQ,IACdH,IAAKA,EAAG,aACG,QACPK,EAAI,CAAAH,SAEPA,GAAYQ,MAACS,EAAAA,sBAASf,OAItBF,GAAYQ,EAAAA,IAACS,EAAAA,oBAAKlB,GAAIA,EAAID,IAAKA,GAAmDI,MAM9EgB,EAAuCtB,EAAAA,WAAW,CAACuB,EAAOrB,IAC9DU,EAAAA,IAACb,EAAUe,OAAAC,OAAA,GAAKQ,GAAOrB,IAAKA"}
+{"version":3,"file":"HeaderLogo.js","sources":["../../../../../src/components/header/HeaderLogo.tsx"],"sourcesContent":["import React, { FC, ForwardedRef, forwardRef } from 'react';\nimport { Link, LinkProps, useTheme } from '@mui/material';\nimport { Logo, LogoProps } from '@/src/components/logo/Logo';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface HeaderLogoProps extends LinkProps {\n  /**\n   * Properties applied to Logo component\n   */\n  logoProps?: LogoProps;\n}\n\n/**\n * Logo with link wrapper\n */\nexport const HeaderLogo: FC<HeaderLogoProps> = forwardRef(({ sx, children, href, logoProps, ...rest }, ref) => {\n  const theme = useTheme();\n\n  if (href || rest.onClick) {\n    return (\n      <Link\n        sx={{\n          // same style is applied in Header logo wrapper\n          display: 'block',\n          position: 'relative',\n          py: 1,\n          // add proper focus ring\n          ...getFocusRingStyle(theme),\n          // remove default link box shadow\n          '&.Mui-focusVisible': {\n            boxShadow: 'none',\n          },\n          '& .MuiSvgIcon-root': {\n            display: 'block',\n          },\n        }}\n        href={href || '#'}\n        ref={ref}\n        aria-label=\"Home\"\n        {...rest}\n      >\n        {children || <Logo {...logoProps} />}\n      </Link>\n    );\n  }\n  return children || <Logo sx={sx} ref={ref as unknown as ForwardedRef<SVGSVGElement>} {...logoProps} />;\n});\n"],"names":["HeaderLogo","forwardRef","_a","ref","sx","children","href","logoProps","rest","__rest","theme","useTheme","onClick","_jsx","Link","Object","assign","display","position","py","getFocusRingStyle","boxShadow","Logo"],"mappings":"qLAeO,MAAMA,EAAkCC,EAAAA,WAAW,CAACC,EAA4CC,KAA5C,IAAAC,GAAEA,EAAEC,SAAEA,EAAQC,KAAEA,EAAIC,UAAEA,GAASL,EAAKM,EAAIC,EAAAA,OAAAP,EAAxC,CAAA,KAAA,WAAA,OAAA,cACzD,MAAMQ,EAAQC,EAAAA,WAEd,OAAIL,GAAQE,EAAKI,QAEbC,EAAAA,IAACC,OAAIC,OAAAC,OAAA,CACHZ,GAAEW,OAAAC,OAAAD,OAAAC,OAAA,CAEAC,QAAS,QACTC,SAAU,WACVC,GAAI,GAEDC,EAAAA,kBAAkBV,IAAM,CAE3B,qBAAsB,CACpBW,UAAW,QAEb,qBAAsB,CACpBJ,QAAS,WAGbX,KAAMA,GAAQ,IACdH,IAAKA,EAAG,aACG,QACPK,EAAI,CAAAH,SAEPA,GAAYQ,MAACS,EAAAA,sBAASf,OAItBF,GAAYQ,EAAAA,IAACS,EAAAA,oBAAKlB,GAAIA,EAAID,IAAKA,GAAmDI"}

package/cjs/components/header/HeaderNavigationHero.d.ts

@@ -1,11 +1,7 @@
-import { FC, ReactNode, ElementType } from 'react';
+import { FC, ElementType } from 'react';
 import { BoxProps, ClickAwayListenerProps, ContainerProps, PortalProps, BackdropProps, CollapseProps } from '@mui/material';
 import { HeaderNavigationLinkProps } from './HeaderNavigationLink';
 export interface HeaderNavigationHeroProps extends HeaderNavigationLinkProps {
-    /**
-     * @deprecated provide as children instead
-     */
-    heroElement?: ReactNode;
     /**
      * Wrap the content into container
      * @default false
@@ -19,7 +15,7 @@ export interface HeaderNavigationHeroProps extends HeaderNavigationLinkProps {
     /**
      * Props applied to ClickAwayListener
      */
-    clickAwayListenerProps?: ClickAwayListenerProps;
+    clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;
     /**
      * Props applied to main wrapper of content
      */

package/cjs/components/header/HeaderNavigationHero.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),s=require("react"),n=require("@mui/material"),o=require("../icon/stroke/ChevronDownIcon.js"),i=require("./HeaderNavigationLink.js");const t=s.forwardRef((t,a)=>{var{children:l,sx:c,label:x,icon:d,heroElement:p,inContainer:u=!1,disableBackdrop:g=!1,onClick:b,clickAwayListenerProps:j,contentProps:h,wrapperProps:k,containerProps:m,collapseProps:v,portalProps:P,backdropProps:f}=t,C=e.__rest(t,["children","sx","label","icon","heroElement","inContainer","disableBackdrop","onClick","clickAwayListenerProps","contentProps","wrapperProps","containerProps","collapseProps","portalProps","backdropProps"]);const w=s.useRef(),[O,y]=s.useState(!1),H=n.useTheme(),_=n.useMediaQuery(H.breakpoints.down("lg")),q=null!=f?f:{},{sx:B}=q,I=e.__rest(q,["sx"]),L=null!=k?k:{},{sx:z}=L,A=e.__rest(L,["sx"]),N=null!=h?h:{},{sx:S}=N,D=e.__rest(N,["sx"]);return r.jsxs(r.Fragment,{children:[r.jsx(i.HeaderNavigationLink,Object.assign({active:O,icon:d||r.jsx(o.ChevronDownIcon,{sx:{"&&&":{fontSize:{xs:"20px",lg:"14px"}},color:{xs:"dark"===H.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"},transform:`rotate(${O?"180":"0"}deg)`,transition:{xs:H.transitions.create("transform",{duration:H.transitions.duration.shortest}),lg:"none"}}}),onClick:e=>{null==b||b(e),y(e=>!e)},sx:Object.assign({justifyContent:{xs:"space-between",lg:"flex-start"}},c),ref:null!=a?a:w,"data-testid":"HeaderNavigationHero"},C,{children:x})),r.jsx(n.ClickAwayListener,Object.assign({onClickAway:e=>{var r,s,n;return!(null===(n=null===(s=null!==(r=a)&&void 0!==r?r:w)||void 0===s?void 0:s.current)||void 0===n?void 0:n.contains(null==e?void 0:e.target))&&y(!1)}},j,{children:r.jsx(n.Box,Object.assign({sx:Object.assign({position:{xs:"static",lg:"absolute"},zIndex:"10",left:"0",right:"0",top:H.mixins.toolbar.minHeight,maxHeight:`calc(100vh - ${H.mixins.toolbar.minHeight})`,overflow:"auto"},z)},A,{children:r.jsx(n.Collapse,Object.assign({in:O},v,{children:r.jsx(n.Box,Object.assign({sx:Object.assign({backgroundColor:{lg:"dark"===H.palette.mode?"surface.primary":"background.primary"},py:{xs:0,lg:2},px:u?0:{xs:1,lg:2}},S)},D,{children:u?r.jsx(n.Container,Object.assign({maxWidth:"xl"},m,{children:p||l})):p||l}))}))}))})),!g&&!_&&r.jsx(n.Portal,Object.assign({},P,{children:r.jsx(n.Backdrop,Object.assign({open:O,sx:Object.assign({zIndex:H.zIndex.appBar-50},B)},I))}))]})});exports.HeaderNavigationHero=t;
+"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),s=require("react"),n=require("@mui/material"),o=require("../icon/stroke/ChevronDownIcon.js"),i=require("./HeaderNavigationLink.js");const t=s.forwardRef((t,a)=>{var{children:l,sx:c,label:x,icon:d,inContainer:p=!1,disableBackdrop:u=!1,onClick:g,clickAwayListenerProps:b,contentProps:j,wrapperProps:h,containerProps:k,collapseProps:v,portalProps:m,backdropProps:P}=t,f=e.__rest(t,["children","sx","label","icon","inContainer","disableBackdrop","onClick","clickAwayListenerProps","contentProps","wrapperProps","containerProps","collapseProps","portalProps","backdropProps"]);const C=s.useRef(),[w,O]=s.useState(!1),y=n.useTheme(),H=n.useMediaQuery(y.breakpoints.down("lg")),_=null!=P?P:{},{sx:q}=_,B=e.__rest(_,["sx"]),I=null!=h?h:{},{sx:L}=I,z=e.__rest(I,["sx"]),A=null!=j?j:{},{sx:N}=A,S=e.__rest(A,["sx"]);return r.jsxs(r.Fragment,{children:[r.jsx(i.HeaderNavigationLink,Object.assign({active:w,icon:d||r.jsx(o.ChevronDownIcon,{sx:{"&&&":{fontSize:{xs:"20px",lg:"14px"}},color:{xs:"dark"===y.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"},transform:`rotate(${w?"180":"0"}deg)`,transition:{xs:y.transitions.create("transform",{duration:y.transitions.duration.shortest}),lg:"none"}}}),onClick:e=>{null==g||g(e),O(e=>!e)},sx:Object.assign({justifyContent:{xs:"space-between",lg:"flex-start"}},c),ref:null!=a?a:C,"data-testid":"HeaderNavigationHero"},f,{children:x})),r.jsx(n.ClickAwayListener,Object.assign({onClickAway:e=>{var r,s,n;return!(null===(n=null===(s=null!==(r=a)&&void 0!==r?r:C)||void 0===s?void 0:s.current)||void 0===n?void 0:n.contains(null==e?void 0:e.target))&&O(!1)}},b,{children:r.jsx(n.Box,Object.assign({sx:Object.assign({position:{xs:"static",lg:"absolute"},zIndex:"10",left:"0",right:"0",top:y.mixins.toolbar.minHeight,maxHeight:`calc(100vh - ${y.mixins.toolbar.minHeight})`,overflow:"auto"},L)},z,{children:r.jsx(n.Collapse,Object.assign({in:w},v,{children:r.jsx(n.Box,Object.assign({sx:Object.assign({backgroundColor:{lg:"dark"===y.palette.mode?"surface.primary":"background.primary"},py:{xs:0,lg:2},px:p?0:{xs:1,lg:2}},N)},S,{children:p?r.jsx(n.Container,Object.assign({maxWidth:"xl"},k,{children:l})):l}))}))}))})),!u&&!H&&r.jsx(n.Portal,Object.assign({},m,{children:r.jsx(n.Backdrop,Object.assign({open:w,sx:Object.assign({zIndex:y.zIndex.appBar-50},q)},B))}))]})});exports.HeaderNavigationHero=t;
 //# sourceMappingURL=HeaderNavigationHero.js.map

package/cjs/components/header/HeaderNavigationHero.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigationHero.js","sources":["../../../../../src/components/header/HeaderNavigationHero.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useState, ElementType, useRef } from 'react';\nimport {\n  Collapse,\n  Backdrop,\n  ClickAwayListener,\n  Box,\n  BoxProps,\n  Portal,\n  Container,\n  ClickAwayListenerProps,\n  ContainerProps,\n  PortalProps,\n  BackdropProps,\n  CollapseProps,\n  useMediaQuery,\n  Theme,\n  useTheme,\n} from '@mui/material';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\n\nexport interface HeaderNavigationHeroProps extends HeaderNavigationLinkProps {\n  /**\n   * @deprecated provide as children instead\n   */\n  heroElement?: ReactNode;\n  /**\n   * Wrap the content into container\n   * @default false\n   */\n  inContainer?: boolean;\n  /**\n   * Controls appearance of backdrop when content opens\n   * @default false\n   */\n  disableBackdrop?: boolean;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: ClickAwayListenerProps;\n  /**\n   * Props applied to main wrapper of content\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Props applied to main wrapper before collapsible\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * Props applied to Container if inContainer property is provided\n   */\n  containerProps?: ContainerProps;\n  /**\n   * Props applied to Collapse component\n   */\n  collapseProp?: CollapseProps;\n  /**\n   * Props applied to Portal if disableBackdrop property is not provided\n   */\n  portalProps?: PortalProps;\n  /**\n   * Props applied to Backdrop if disableBackdrop property is not provided\n   */\n  backdropProps?: BackdropProps;\n}\n\n/**\n * HeaderNavigationLink with the integration of the complex hero menu\n */\nexport const HeaderNavigationHero: FC<HeaderNavigationHeroProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      label,\n      icon,\n      heroElement,\n      inContainer = false,\n      disableBackdrop = false,\n      onClick,\n      clickAwayListenerProps,\n      contentProps,\n      wrapperProps,\n      containerProps,\n      collapseProps,\n      portalProps,\n      backdropProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const buttonRef = useRef();\n    const [open, setOpen] = useState(false);\n    const theme = useTheme();\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const { sx: backdropSx, ...restBackdrop } = backdropProps ?? {};\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n    const { sx: contentSx, ...restContent } = contentProps ?? {};\n\n    return (\n      <>\n        <HeaderNavigationLink\n          active={open}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  '&&&': {\n                    fontSize: { xs: '20px', lg: '14px' },\n                  },\n                  color: {\n                    xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                    lg: 'currentColor',\n                  },\n                  transform: `rotate(${open ? '180' : '0'}deg)`,\n                  transition: {\n                    xs: theme.transitions.create('transform', {\n                      duration: theme.transitions.duration.shortest,\n                    }),\n                    lg: 'none',\n                  },\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setOpen((prev) => !prev);\n          }}\n          sx={{\n            justifyContent: { xs: 'space-between', lg: 'flex-start' },\n            ...sx,\n          }}\n          ref={ref ?? buttonRef}\n          data-testid=\"HeaderNavigationHero\"\n          {...rest}\n        >\n          {label}\n        </HeaderNavigationLink>\n        <ClickAwayListener\n          onClickAway={(e) =>\n            !((ref as React.RefObject<HTMLButtonElement>) ?? buttonRef)?.current?.contains(e?.target as Node) &&\n            setOpen(false)\n          }\n          {...clickAwayListenerProps}\n        >\n          <Box\n            sx={{\n              position: { xs: 'static', lg: 'absolute' },\n              zIndex: '10',\n              left: '0',\n              right: '0',\n              top: theme.mixins.toolbar.minHeight,\n              maxHeight: `calc(100vh - ${theme.mixins.toolbar.minHeight})`,\n              overflow: 'auto',\n              ...wrapperSx,\n            }}\n            {...restWrapper}\n          >\n            <Collapse in={open} {...collapseProps}>\n              <Box\n                sx={{\n                  backgroundColor: { lg: theme.palette.mode === 'dark' ? 'surface.primary' : 'background.primary' },\n                  py: { xs: 0, lg: 2 },\n                  px: inContainer ? 0 : { xs: 1, lg: 2 },\n                  ...contentSx,\n                }}\n                {...restContent}\n              >\n                {inContainer ? (\n                  <Container maxWidth=\"xl\" {...containerProps}>\n                    {heroElement || children}\n                  </Container>\n                ) : (\n                  heroElement || children\n                )}\n              </Box>\n            </Collapse>\n          </Box>\n        </ClickAwayListener>\n        {!disableBackdrop && !downLg && (\n          <Portal {...portalProps}>\n            <Backdrop open={open} sx={{ zIndex: theme.zIndex.appBar - 50, ...backdropSx }} {...restBackdrop} />\n          </Portal>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["HeaderNavigationHero","forwardRef","_a","ref","children","sx","label","icon","heroElement","inContainer","disableBackdrop","onClick","clickAwayListenerProps","contentProps","wrapperProps","containerProps","collapseProps","portalProps","backdropProps","rest","__rest","buttonRef","useRef","open","setOpen","useState","theme","useTheme","downLg","useMediaQuery","breakpoints","down","_b","backdropSx","restBackdrop","_c","wrapperSx","restWrapper","_d","contentSx","restContent","_jsxs","_Fragment","_jsx","HeaderNavigationLink","Object","assign","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Box","position","zIndex","left","right","top","mixins","toolbar","minHeight","maxHeight","overflow","Collapse","in","backgroundColor","py","px","Container","maxWidth","Portal","Backdrop","appBar"],"mappings":"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"}
+{"version":3,"file":"HeaderNavigationHero.js","sources":["../../../../../src/components/header/HeaderNavigationHero.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState, ElementType, useRef } from 'react';\nimport {\n  Collapse,\n  Backdrop,\n  ClickAwayListener,\n  Box,\n  BoxProps,\n  Portal,\n  Container,\n  ClickAwayListenerProps,\n  ContainerProps,\n  PortalProps,\n  BackdropProps,\n  CollapseProps,\n  useMediaQuery,\n  Theme,\n  useTheme,\n} from '@mui/material';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\n\nexport interface HeaderNavigationHeroProps extends HeaderNavigationLinkProps {\n  /**\n   * Wrap the content into container\n   * @default false\n   */\n  inContainer?: boolean;\n  /**\n   * Controls appearance of backdrop when content opens\n   * @default false\n   */\n  disableBackdrop?: boolean;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to main wrapper of content\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Props applied to main wrapper before collapsible\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * Props applied to Container if inContainer property is provided\n   */\n  containerProps?: ContainerProps;\n  /**\n   * Props applied to Collapse component\n   */\n  collapseProp?: CollapseProps;\n  /**\n   * Props applied to Portal if disableBackdrop property is not provided\n   */\n  portalProps?: PortalProps;\n  /**\n   * Props applied to Backdrop if disableBackdrop property is not provided\n   */\n  backdropProps?: BackdropProps;\n}\n\n/**\n * HeaderNavigationLink with the integration of the complex hero menu\n */\nexport const HeaderNavigationHero: FC<HeaderNavigationHeroProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      label,\n      icon,\n      inContainer = false,\n      disableBackdrop = false,\n      onClick,\n      clickAwayListenerProps,\n      contentProps,\n      wrapperProps,\n      containerProps,\n      collapseProps,\n      portalProps,\n      backdropProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const buttonRef = useRef();\n    const [open, setOpen] = useState(false);\n    const theme = useTheme();\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const { sx: backdropSx, ...restBackdrop } = backdropProps ?? {};\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n    const { sx: contentSx, ...restContent } = contentProps ?? {};\n\n    return (\n      <>\n        <HeaderNavigationLink\n          active={open}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  '&&&': {\n                    fontSize: { xs: '20px', lg: '14px' },\n                  },\n                  color: {\n                    xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                    lg: 'currentColor',\n                  },\n                  transform: `rotate(${open ? '180' : '0'}deg)`,\n                  transition: {\n                    xs: theme.transitions.create('transform', {\n                      duration: theme.transitions.duration.shortest,\n                    }),\n                    lg: 'none',\n                  },\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setOpen((prev) => !prev);\n          }}\n          sx={{\n            justifyContent: { xs: 'space-between', lg: 'flex-start' },\n            ...sx,\n          }}\n          ref={ref ?? buttonRef}\n          data-testid=\"HeaderNavigationHero\"\n          {...rest}\n        >\n          {label}\n        </HeaderNavigationLink>\n        <ClickAwayListener\n          onClickAway={(e) =>\n            !((ref as React.RefObject<HTMLButtonElement>) ?? buttonRef)?.current?.contains(e?.target as Node) &&\n            setOpen(false)\n          }\n          {...clickAwayListenerProps}\n        >\n          <Box\n            sx={{\n              position: { xs: 'static', lg: 'absolute' },\n              zIndex: '10',\n              left: '0',\n              right: '0',\n              top: theme.mixins.toolbar.minHeight,\n              maxHeight: `calc(100vh - ${theme.mixins.toolbar.minHeight})`,\n              overflow: 'auto',\n              ...wrapperSx,\n            }}\n            {...restWrapper}\n          >\n            <Collapse in={open} {...collapseProps}>\n              <Box\n                sx={{\n                  backgroundColor: { lg: theme.palette.mode === 'dark' ? 'surface.primary' : 'background.primary' },\n                  py: { xs: 0, lg: 2 },\n                  px: inContainer ? 0 : { xs: 1, lg: 2 },\n                  ...contentSx,\n                }}\n                {...restContent}\n              >\n                {inContainer ? (\n                  <Container maxWidth=\"xl\" {...containerProps}>\n                    {children}\n                  </Container>\n                ) : (\n                  children\n                )}\n              </Box>\n            </Collapse>\n          </Box>\n        </ClickAwayListener>\n        {!disableBackdrop && !downLg && (\n          <Portal {...portalProps}>\n            <Backdrop open={open} sx={{ zIndex: theme.zIndex.appBar - 50, ...backdropSx }} {...restBackdrop} />\n          </Portal>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["HeaderNavigationHero","forwardRef","_a","ref","children","sx","label","icon","inContainer","disableBackdrop","onClick","clickAwayListenerProps","contentProps","wrapperProps","containerProps","collapseProps","portalProps","backdropProps","rest","__rest","buttonRef","useRef","open","setOpen","useState","theme","useTheme","downLg","useMediaQuery","breakpoints","down","_b","backdropSx","restBackdrop","_c","wrapperSx","restWrapper","_d","contentSx","restContent","_jsxs","_Fragment","_jsx","HeaderNavigationLink","Object","assign","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Box","position","zIndex","left","right","top","mixins","toolbar","minHeight","maxHeight","overflow","Collapse","in","backgroundColor","py","px","Container","maxWidth","Portal","Backdrop","appBar"],"mappings":"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"}

package/cjs/components/header/HeaderNavigationLink.d.ts

@@ -19,10 +19,6 @@ export interface HeaderNavigationLinkProps extends ButtonBaseProps<ElementType>
      * Expect icon component that will be rendered after the label
      */
     icon?: ReactNode | 'arrow-ne';
-    /**
-     * @deprecated no longer has any effect, remove the property
-     */
-    index?: number;
     /**
      * Properties applied to wrapper of label
      */
@@ -40,9 +36,3 @@ export interface HeaderNavigationLinkProps extends ButtonBaseProps<ElementType>
  * Component to render styled button in the header
  */
 export declare const HeaderNavigationLink: FC<HeaderNavigationLinkProps>;
-export interface HeaderOverheadItemProps extends HeaderNavigationLinkProps {
-}
-/**
- * @deprecated remove this component, use HeaderNavigationLink instead
- */
-export declare const HeaderOverheadItem: FC<HeaderOverheadItemProps>;

package/cjs/components/header/HeaderNavigationLink.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),t=require("react/jsx-runtime"),a=require("react"),r=require("@mui/material"),i=require("../icon/stroke/ArrowTopRightIcon.js"),o=require("../focusring/focusring.js"),s=require("../../materialui/button/interactive.js"),n=require("../../materialui/typography/typography.theme.js");const l=a.forwardRef((l,c)=>{var{sx:g,children:p,label:d,icon:x,active:b=!1,external:u=!1,index:j,labelWrapperProps:y,labelProps:f,selectedLabelProps:h}=l,m=e.__rest(l,["sx","children","label","icon","active","external","index","labelWrapperProps","labelProps","selectedLabelProps"]);const v=r.useTheme(),k=null!=y?y:{},{sx:w}=k,O=e.__rest(k,["sx"]),L=null!=f?f:{},{sx:N}=L,H=e.__rest(L,["sx"]),F=null!=h?h:{},{sx:q}=F,I=e.__rest(F,["sx"]),_=a.useMemo(()=>"arrow-new"===x||u?t.jsx(i.ArrowTopRightIcon,{}):x,[x,u]);return t.jsxs(r.ButtonBase,Object.assign({sx:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},v.typography.list),{[v.breakpoints.down("lg")]:Object.assign({},n.getTypography("body","rtl"===v.direction,"large")),position:"relative",zIndex:"100",display:{xs:"flex",lg:"inline-flex"},width:{xs:"100%",lg:"auto"},gap:.5,alignItems:"center",justifyContent:"flex-start",py:{xs:2,lg:1},px:{xs:1,lg:.5},transition:"transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.3s ease-out","& .MuiSvgIcon-root":{fontSize:"14px"},"&:after":Object.assign({content:{xs:"none",lg:'""'},position:"absolute",left:"0",right:"0",bottom:"0",height:"1px",backgroundColor:"transparent.transparent"},b&&{height:"2px",backgroundColor:"text.primary"}),"&.Mui-disabled":{color:"disabled.tertiary"}}),s.getInteractiveStyle(Object.assign({color:"dark"===v.palette.mode?"onSurface.os300":"onSurface.os700","&&:after":{backgroundColor:"transparent.transparent"},"& .FlowHeaderNavigationLink-label":{opacity:"1"},"& .FlowHeaderNavigationLink-selectedLabel":{opacity:"0"}},b&&{color:"text.primary","&&:after":{backgroundColor:"text.primary"},"& .FlowHeaderNavigationLink-label":{opacity:"0"},"& .FlowHeaderNavigationLink-selectedLabel":{opacity:"1"}}),{color:"text.primary","&&:after":{backgroundColor:"text.primary"},"& .FlowHeaderNavigationLink-label":{opacity:"0"},"& .FlowHeaderNavigationLink-selectedLabel":{opacity:"1"}})),o.getFocusRingStyle(v)),{"&&:before":{borderRadius:"4px",top:{xs:"0",lg:"2px"},bottom:{xs:"0",lg:"-2px"}}}),g),ref:c,"data-testid":"HeaderNavigationLink"},m,{children:[(p||d)&&t.jsxs(r.Box,Object.assign({className:"FlowHeaderNavigationLink-labelWrapper",sx:Object.assign({display:"inline-flex",alignItems:"center",justifyContent:"center",textAlign:"center",position:"relative"},w)},O,{children:[t.jsx(r.Box,Object.assign({className:"FlowHeaderNavigationLink-label",sx:Object.assign({position:"absolute",left:{xs:"0",lg:"auto"}},N)},H,{children:p||d})),t.jsx(r.Box,Object.assign({className:"FlowHeaderNavigationLink-selectedLabel",sx:Object.assign({fontWeight:"700",opacity:"0",position:"relative"},q),"aria-hidden":"true"},I,{children:p||d}))]})),_]}))}),c=a.forwardRef((e,a)=>t.jsx(l,Object.assign({ref:a},e)));exports.HeaderNavigationLink=l,exports.HeaderOverheadItem=c;
+"use strict";var e=require("tslib"),t=require("react/jsx-runtime"),a=require("react"),r=require("@mui/material"),i=require("../icon/stroke/ArrowTopRightIcon.js"),o=require("../focusring/focusring.js"),s=require("../../materialui/button/interactive.js"),n=require("../../materialui/typography/typography.theme.js");const l=a.forwardRef((l,c)=>{var{sx:g,children:p,label:b,icon:d,active:x=!1,external:u=!1,labelWrapperProps:y,labelProps:j,selectedLabelProps:f}=l,h=e.__rest(l,["sx","children","label","icon","active","external","labelWrapperProps","labelProps","selectedLabelProps"]);const m=r.useTheme(),v=null!=y?y:{},{sx:k}=v,w=e.__rest(v,["sx"]),L=null!=j?j:{},{sx:O}=L,N=e.__rest(L,["sx"]),H=null!=f?f:{},{sx:F}=H,q=e.__rest(H,["sx"]),_=a.useMemo(()=>"arrow-new"===d||u?t.jsx(i.ArrowTopRightIcon,{}):d,[d,u]);return t.jsxs(r.ButtonBase,Object.assign({sx:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},m.typography.list),{[m.breakpoints.down("lg")]:Object.assign({},n.getTypography("body","rtl"===m.direction,"large")),position:"relative",zIndex:"100",display:{xs:"flex",lg:"inline-flex"},width:{xs:"100%",lg:"auto"},gap:.5,alignItems:"center",justifyContent:"flex-start",py:{xs:2,lg:1},px:{xs:1,lg:.5},transition:"transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.3s ease-out","& .MuiSvgIcon-root":{fontSize:"14px"},"&:after":Object.assign({content:{xs:"none",lg:'""'},position:"absolute",left:"0",right:"0",bottom:"0",height:"1px",backgroundColor:"transparent.transparent"},x&&{height:"2px",backgroundColor:"text.primary"}),"&.Mui-disabled":{color:"disabled.tertiary"}}),s.getInteractiveStyle(Object.assign({color:"dark"===m.palette.mode?"onSurface.os300":"onSurface.os700","&&:after":{backgroundColor:"transparent.transparent"},"& .FlowHeaderNavigationLink-label":{opacity:"1"},"& .FlowHeaderNavigationLink-selectedLabel":{opacity:"0"}},x&&{color:"text.primary","&&:after":{backgroundColor:"text.primary"},"& .FlowHeaderNavigationLink-label":{opacity:"0"},"& .FlowHeaderNavigationLink-selectedLabel":{opacity:"1"}}),{color:"text.primary","&&:after":{backgroundColor:"text.primary"},"& .FlowHeaderNavigationLink-label":{opacity:"0"},"& .FlowHeaderNavigationLink-selectedLabel":{opacity:"1"}})),o.getFocusRingStyle(m)),{"&&:before":{borderRadius:"4px",top:{xs:"0",lg:"2px"},bottom:{xs:"0",lg:"-2px"}}}),g),ref:c,"data-testid":"HeaderNavigationLink"},h,{children:[(p||b)&&t.jsxs(r.Box,Object.assign({className:"FlowHeaderNavigationLink-labelWrapper",sx:Object.assign({display:"inline-flex",alignItems:"center",justifyContent:"center",textAlign:"center",position:"relative"},k)},w,{children:[t.jsx(r.Box,Object.assign({className:"FlowHeaderNavigationLink-label",sx:Object.assign({position:"absolute",left:{xs:"0",lg:"auto"}},O)},N,{children:p||b})),t.jsx(r.Box,Object.assign({className:"FlowHeaderNavigationLink-selectedLabel",sx:Object.assign({fontWeight:"700",opacity:"0",position:"relative"},F),"aria-hidden":"true"},q,{children:p||b}))]})),_]}))});exports.HeaderNavigationLink=l;
 //# sourceMappingURL=HeaderNavigationLink.js.map

package/cjs/components/header/HeaderNavigationLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigationLink.js","sources":["../../../../../src/components/header/HeaderNavigationLink.tsx"],"sourcesContent":["import React, { useMemo, ElementType, FC, forwardRef, ReactNode, ForwardedRef } from 'react';\nimport { ButtonBase, ButtonBaseProps, Box, BoxProps, useTheme } from '@mui/material';\nimport { ArrowTopRightIcon } from '@/src/components/icon/stroke/ArrowTopRightIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { getTypography } from '@/src/materialui/typography/typography.theme';\n\nexport interface HeaderNavigationLinkProps extends ButtonBaseProps<ElementType> {\n  /**\n   * Displayed navigation text, can be provided as children as well\n   */\n  label?: ReactNode;\n  /**\n   * Marks item currently active\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Indicates external link\n   * @default false\n   */\n  external?: boolean;\n  /**\n   * Expect icon component that will be rendered after the label\n   */\n  icon?: ReactNode | 'arrow-ne';\n  /**\n   * @deprecated no longer has any effect, remove the property\n   */\n  index?: number;\n  /**\n   * Properties applied to wrapper of label\n   */\n  labelWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to default label\n   */\n  labelProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to selected label\n   */\n  selectedLabelProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component to render styled button in the header\n */\nexport const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = forwardRef(\n  (\n    {\n      sx,\n      children,\n      label,\n      icon,\n      active = false,\n      external = false,\n      index: _,\n      labelWrapperProps,\n      labelProps,\n      selectedLabelProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: labelWrapperSx, ...restLabelWrapper } = labelWrapperProps ?? {};\n    const { sx: labelSx, ...restLabel } = labelProps ?? {};\n    const { sx: selectedLabelSx, ...restSelectedLabel } = selectedLabelProps ?? {};\n    // mapper to previous api\n    const linkIcon = useMemo(() => {\n      return icon === 'arrow-new' || external ? <ArrowTopRightIcon /> : icon;\n    }, [icon, external]);\n\n    return (\n      <ButtonBase\n        sx={{\n          ...theme.typography.list,\n          [theme.breakpoints.down('lg')]: {\n            // switch to 'large body' typography according to figma\n            ...getTypography('body', theme.direction === 'rtl', 'large'),\n          },\n          position: 'relative',\n          zIndex: '100',\n          // icon and text next to each other\n          display: { xs: 'flex', lg: 'inline-flex' },\n          width: { xs: '100%', lg: 'auto' },\n          gap: 0.5,\n          alignItems: 'center',\n          justifyContent: 'flex-start',\n          py: { xs: 2, lg: 1 },\n          px: { xs: 1, lg: 0.5 },\n          transition:\n            'transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.3s ease-out',\n          // size of icon\n          '& .MuiSvgIcon-root': {\n            fontSize: '14px',\n          },\n          // bottom border\n          '&:after': {\n            content: { xs: 'none', lg: '\"\"' },\n            position: 'absolute',\n            left: '0',\n            right: '0',\n            // move directly into border of appbar\n            bottom: '0',\n            height: '1px',\n            backgroundColor: 'transparent.transparent',\n            ...(active && {\n              height: '2px',\n              backgroundColor: 'text.primary',\n            }),\n          },\n          // disabled style\n          '&.Mui-disabled': {\n            color: 'disabled.tertiary',\n          },\n          // interactive style\n          ...getInteractiveStyle(\n            {\n              color: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n              '&&:after': {\n                backgroundColor: 'transparent.transparent',\n              },\n              '& .FlowHeaderNavigationLink-label': {\n                opacity: '1',\n              },\n              '& .FlowHeaderNavigationLink-selectedLabel': {\n                opacity: '0',\n              },\n              // active state is same as hover state\n              ...(active && {\n                color: 'text.primary',\n                '&&:after': {\n                  backgroundColor: 'text.primary',\n                },\n                '& .FlowHeaderNavigationLink-label': {\n                  opacity: '0',\n                },\n                '& .FlowHeaderNavigationLink-selectedLabel': {\n                  opacity: '1',\n                },\n              }),\n            },\n            {\n              color: 'text.primary',\n              '&&:after': {\n                backgroundColor: 'text.primary',\n              },\n              '& .FlowHeaderNavigationLink-label': {\n                opacity: '0',\n              },\n              '& .FlowHeaderNavigationLink-selectedLabel': {\n                opacity: '1',\n              },\n            },\n          ),\n          ...getFocusRingStyle(theme),\n          // adjust focus ring\n          '&&:before': {\n            borderRadius: '4px',\n            // make sure top border is not cropped\n            top: { xs: '0', lg: '2px' },\n            bottom: { xs: '0', lg: '-2px' },\n          },\n          ...sx,\n        }}\n        ref={ref as ForwardedRef<HTMLButtonElement>}\n        data-testid=\"HeaderNavigationLink\"\n        {...rest}\n      >\n        {(children || label) && (\n          <Box\n            className=\"FlowHeaderNavigationLink-labelWrapper\"\n            sx={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              textAlign: 'center',\n              position: 'relative',\n              ...labelWrapperSx,\n            }}\n            {...restLabelWrapper}\n          >\n            <Box\n              className=\"FlowHeaderNavigationLink-label\"\n              sx={{\n                position: 'absolute',\n                left: { xs: '0', lg: 'auto' },\n                ...labelSx,\n              }}\n              {...restLabel}\n            >\n              {children || label}\n            </Box>\n            <Box\n              className=\"FlowHeaderNavigationLink-selectedLabel\"\n              sx={{\n                fontWeight: '700',\n                opacity: '0',\n                position: 'relative',\n                ...selectedLabelSx,\n              }}\n              aria-hidden=\"true\"\n              {...restSelectedLabel}\n            >\n              {children || label}\n            </Box>\n          </Box>\n        )}\n        {linkIcon}\n      </ButtonBase>\n    );\n  },\n);\n\nexport interface HeaderOverheadItemProps extends HeaderNavigationLinkProps {}\n/**\n * @deprecated remove this component, use HeaderNavigationLink instead\n */\nexport const HeaderOverheadItem: FC<HeaderOverheadItemProps> = forwardRef((props, ref) => {\n  return <HeaderNavigationLink ref={ref} {...props} />;\n});\n"],"names":["HeaderNavigationLink","forwardRef","_a","ref","sx","children","label","icon","active","external","index","_","labelWrapperProps","labelProps","selectedLabelProps","rest","__rest","theme","useTheme","_b","labelWrapperSx","restLabelWrapper","_c","labelSx","restLabel","_d","selectedLabelSx","restSelectedLabel","linkIcon","useMemo","_jsx","ArrowTopRightIcon","_jsxs","ButtonBase","Object","assign","typography","list","breakpoints","down","getTypography","direction","position","zIndex","display","xs","lg","width","gap","alignItems","justifyContent","py","px","transition","fontSize","content","left","right","bottom","height","backgroundColor","color","getInteractiveStyle","palette","mode","opacity","getFocusRingStyle","borderRadius","top","Box","className","textAlign","fontWeight","HeaderOverheadItem","props"],"mappings":"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"}
+{"version":3,"file":"HeaderNavigationLink.js","sources":["../../../../../src/components/header/HeaderNavigationLink.tsx"],"sourcesContent":["import React, { useMemo, ElementType, FC, forwardRef, ReactNode, ForwardedRef } from 'react';\nimport { ButtonBase, ButtonBaseProps, Box, BoxProps, useTheme } from '@mui/material';\nimport { ArrowTopRightIcon } from '@/src/components/icon/stroke/ArrowTopRightIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { getTypography } from '@/src/materialui/typography/typography.theme';\n\nexport interface HeaderNavigationLinkProps extends ButtonBaseProps<ElementType> {\n  /**\n   * Displayed navigation text, can be provided as children as well\n   */\n  label?: ReactNode;\n  /**\n   * Marks item currently active\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Indicates external link\n   * @default false\n   */\n  external?: boolean;\n  /**\n   * Expect icon component that will be rendered after the label\n   */\n  icon?: ReactNode | 'arrow-ne';\n  /**\n   * Properties applied to wrapper of label\n   */\n  labelWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to default label\n   */\n  labelProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to selected label\n   */\n  selectedLabelProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component to render styled button in the header\n */\nexport const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = forwardRef(\n  (\n    {\n      sx,\n      children,\n      label,\n      icon,\n      active = false,\n      external = false,\n      labelWrapperProps,\n      labelProps,\n      selectedLabelProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: labelWrapperSx, ...restLabelWrapper } = labelWrapperProps ?? {};\n    const { sx: labelSx, ...restLabel } = labelProps ?? {};\n    const { sx: selectedLabelSx, ...restSelectedLabel } = selectedLabelProps ?? {};\n    // mapper to previous api\n    const linkIcon = useMemo(() => {\n      return icon === 'arrow-new' || external ? <ArrowTopRightIcon /> : icon;\n    }, [icon, external]);\n\n    return (\n      <ButtonBase\n        sx={{\n          ...theme.typography.list,\n          [theme.breakpoints.down('lg')]: {\n            // switch to 'large body' typography according to figma\n            ...getTypography('body', theme.direction === 'rtl', 'large'),\n          },\n          position: 'relative',\n          zIndex: '100',\n          // icon and text next to each other\n          display: { xs: 'flex', lg: 'inline-flex' },\n          width: { xs: '100%', lg: 'auto' },\n          gap: 0.5,\n          alignItems: 'center',\n          justifyContent: 'flex-start',\n          py: { xs: 2, lg: 1 },\n          px: { xs: 1, lg: 0.5 },\n          transition:\n            'transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.3s ease-out',\n          // size of icon\n          '& .MuiSvgIcon-root': {\n            fontSize: '14px',\n          },\n          // bottom border\n          '&:after': {\n            content: { xs: 'none', lg: '\"\"' },\n            position: 'absolute',\n            left: '0',\n            right: '0',\n            // move directly into border of appbar\n            bottom: '0',\n            height: '1px',\n            backgroundColor: 'transparent.transparent',\n            ...(active && {\n              height: '2px',\n              backgroundColor: 'text.primary',\n            }),\n          },\n          // disabled style\n          '&.Mui-disabled': {\n            color: 'disabled.tertiary',\n          },\n          // interactive style\n          ...getInteractiveStyle(\n            {\n              color: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n              '&&:after': {\n                backgroundColor: 'transparent.transparent',\n              },\n              '& .FlowHeaderNavigationLink-label': {\n                opacity: '1',\n              },\n              '& .FlowHeaderNavigationLink-selectedLabel': {\n                opacity: '0',\n              },\n              // active state is same as hover state\n              ...(active && {\n                color: 'text.primary',\n                '&&:after': {\n                  backgroundColor: 'text.primary',\n                },\n                '& .FlowHeaderNavigationLink-label': {\n                  opacity: '0',\n                },\n                '& .FlowHeaderNavigationLink-selectedLabel': {\n                  opacity: '1',\n                },\n              }),\n            },\n            {\n              color: 'text.primary',\n              '&&:after': {\n                backgroundColor: 'text.primary',\n              },\n              '& .FlowHeaderNavigationLink-label': {\n                opacity: '0',\n              },\n              '& .FlowHeaderNavigationLink-selectedLabel': {\n                opacity: '1',\n              },\n            },\n          ),\n          ...getFocusRingStyle(theme),\n          // adjust focus ring\n          '&&:before': {\n            borderRadius: '4px',\n            // make sure top border is not cropped\n            top: { xs: '0', lg: '2px' },\n            bottom: { xs: '0', lg: '-2px' },\n          },\n          ...sx,\n        }}\n        ref={ref as ForwardedRef<HTMLButtonElement>}\n        data-testid=\"HeaderNavigationLink\"\n        {...rest}\n      >\n        {(children || label) && (\n          <Box\n            className=\"FlowHeaderNavigationLink-labelWrapper\"\n            sx={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              textAlign: 'center',\n              position: 'relative',\n              ...labelWrapperSx,\n            }}\n            {...restLabelWrapper}\n          >\n            <Box\n              className=\"FlowHeaderNavigationLink-label\"\n              sx={{\n                position: 'absolute',\n                left: { xs: '0', lg: 'auto' },\n                ...labelSx,\n              }}\n              {...restLabel}\n            >\n              {children || label}\n            </Box>\n            <Box\n              className=\"FlowHeaderNavigationLink-selectedLabel\"\n              sx={{\n                fontWeight: '700',\n                opacity: '0',\n                position: 'relative',\n                ...selectedLabelSx,\n              }}\n              aria-hidden=\"true\"\n              {...restSelectedLabel}\n            >\n              {children || label}\n            </Box>\n          </Box>\n        )}\n        {linkIcon}\n      </ButtonBase>\n    );\n  },\n);\n"],"names":["HeaderNavigationLink","forwardRef","_a","ref","sx","children","label","icon","active","external","labelWrapperProps","labelProps","selectedLabelProps","rest","__rest","theme","useTheme","_b","labelWrapperSx","restLabelWrapper","_c","labelSx","restLabel","_d","selectedLabelSx","restSelectedLabel","linkIcon","useMemo","_jsx","ArrowTopRightIcon","_jsxs","ButtonBase","Object","assign","typography","list","breakpoints","down","getTypography","direction","position","zIndex","display","xs","lg","width","gap","alignItems","justifyContent","py","px","transition","fontSize","content","left","right","bottom","height","backgroundColor","color","getInteractiveStyle","palette","mode","opacity","getFocusRingStyle","borderRadius","top","Box","className","textAlign","fontWeight"],"mappings":"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"}

package/cjs/components/header/HeaderNavigationMenu.d.ts

@@ -13,7 +13,7 @@ export interface HeaderNavigationMenuProps extends HeaderNavigationLinkProps {
     /**
      * Props applied to ClickAwayListener
      */
-    clickAwayListenerProps?: ClickAwayListenerProps;
+    clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;
     /**
      * Props applied to menu on mobile
      */

package/cjs/components/header/HeaderNavigationMenu.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),n=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material"),t=require("../icon/stroke/ChevronDownIcon.js"),s=require("./HeaderNavigationLink.js"),i=require("../../materialui/button/interactive.js");const a=r.forwardRef((a,l)=>{var{children:c,sx:u,label:d,icon:g,onClick:x,menuItems:j,menuProps:v,collapseProps:m,clickAwayListenerProps:p}=a,b=e.__rest(a,["children","sx","label","icon","onClick","menuItems","menuProps","collapseProps","clickAwayListenerProps"]);const f=r.useRef(),[k,h]=r.useState(null),C=o.useTheme(),w=o.useMediaQuery(C.breakpoints.down("lg")),q=null!=m?m:{},{sx:y}=q,O=e.__rest(q,["sx"]);return n.jsxs(n.Fragment,{children:[n.jsx(s.HeaderNavigationLink,Object.assign({active:!!k,icon:g||n.jsx(t.ChevronDownIcon,{sx:{"&&&":{fontSize:{xs:"20px",lg:"14px"}},color:{xs:"dark"===C.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"},transform:`rotate(${k?"180":"0"}deg)`,transition:{xs:C.transitions.create("transform",{duration:C.transitions.duration.shortest}),lg:"none"}}}),onClick:e=>{null==x||x(e),h(n=>n?null:e.currentTarget)},sx:Object.assign({justifyContent:{xs:"space-between",lg:"flex-start"}},u),ref:null!=l?l:f,"data-testid":"HeaderNavigationMenu"},b,{children:d})),w?n.jsx(o.ClickAwayListener,Object.assign({onClickAway:e=>{var n,r,o;console.log(e.target),!(null===(o=null===(r=null!==(n=l)&&void 0!==n?n:f)||void 0===r?void 0:r.current)||void 0===o?void 0:o.contains(null==e?void 0:e.target))&&h(null)}},p,{children:n.jsx(o.Collapse,Object.assign({in:!!k,sx:Object.assign({"& .MuiMenuItem-root":Object.assign({},i.getInteractiveStyle({background:"none",fontWeight:"300",color:"dark"===C.palette.mode?"onSurface.os300":"onSurface.os700"},{background:"none",fontWeight:"700",color:"currentColor"}))},y)},O,{children:c||j}))})):n.jsx(o.Menu,Object.assign({open:!!k,anchorEl:k,onClose:()=>h(null)},v,{children:c||j}))]})});exports.HeaderNavigationMenu=a;
+"use strict";var e=require("tslib"),n=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),o=require("../icon/stroke/ChevronDownIcon.js"),s=require("./HeaderNavigationLink.js"),i=require("../../materialui/button/interactive.js");const a=r.forwardRef((a,l)=>{var{children:c,sx:u,label:d,icon:g,onClick:x,menuItems:j,menuProps:v,collapseProps:m,clickAwayListenerProps:p}=a,b=e.__rest(a,["children","sx","label","icon","onClick","menuItems","menuProps","collapseProps","clickAwayListenerProps"]);const f=r.useRef(),[k,h]=r.useState(null),C=t.useTheme(),w=t.useMediaQuery(C.breakpoints.down("lg")),q=null!=m?m:{},{sx:y}=q,O=e.__rest(q,["sx"]);return n.jsxs(n.Fragment,{children:[n.jsx(s.HeaderNavigationLink,Object.assign({active:!!k,icon:g||n.jsx(o.ChevronDownIcon,{sx:{"&&&":{fontSize:{xs:"20px",lg:"14px"}},color:{xs:"dark"===C.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"},transform:`rotate(${k?"180":"0"}deg)`,transition:{xs:C.transitions.create("transform",{duration:C.transitions.duration.shortest}),lg:"none"}}}),onClick:e=>{null==x||x(e),h(n=>n?null:e.currentTarget)},sx:Object.assign({justifyContent:{xs:"space-between",lg:"flex-start"}},u),ref:null!=l?l:f,"data-testid":"HeaderNavigationMenu"},b,{children:d})),w?n.jsx(t.ClickAwayListener,Object.assign({onClickAway:e=>{var n,r,t;!(null===(t=null===(r=null!==(n=l)&&void 0!==n?n:f)||void 0===r?void 0:r.current)||void 0===t?void 0:t.contains(null==e?void 0:e.target))&&h(null)}},p,{children:n.jsx(t.Collapse,Object.assign({in:!!k,sx:Object.assign({"& .MuiMenuItem-root":Object.assign({},i.getInteractiveStyle({background:"none",fontWeight:"300",color:"dark"===C.palette.mode?"onSurface.os300":"onSurface.os700"},{background:"none",fontWeight:"700",color:"currentColor"}))},y)},O,{children:c||j}))})):n.jsx(t.Menu,Object.assign({open:!!k,anchorEl:k,onClose:()=>h(null)},v,{children:c||j}))]})});exports.HeaderNavigationMenu=a;
 //# sourceMappingURL=HeaderNavigationMenu.js.map

package/cjs/components/header/HeaderNavigationMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigationMenu.js","sources":["../../../../../src/components/header/HeaderNavigationMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useRef, useState } from 'react';\nimport {\n  Menu,\n  MenuProps,\n  Collapse,\n  useMediaQuery,\n  Theme,\n  useTheme,\n  CollapseProps,\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from '@mui/material';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface HeaderNavigationMenuProps extends HeaderNavigationLinkProps {\n  /**\n   * Content of the menu, can be provided as children as well\n   */\n  menuItems?: ReactNode;\n  /**\n   * Props applied to menu\n   */\n  menuProps?: MenuProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: ClickAwayListenerProps;\n  /**\n   * Props applied to menu on mobile\n   */\n  collapseProps?: CollapseProps;\n}\n\n/**\n * HeaderNavigationLink with the integration of the menu\n */\nexport const HeaderNavigationMenu: FC<HeaderNavigationMenuProps> = forwardRef(\n  (\n    { children, sx, label, icon, onClick, menuItems, menuProps, collapseProps, clickAwayListenerProps, ...rest },\n    ref,\n  ) => {\n    const buttonRef = useRef();\n    const [anchor, setAnchor] = useState(null);\n    const theme = useTheme();\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const { sx: collapseSx, ...restCollapse } = collapseProps ?? {};\n\n    return (\n      <>\n        <HeaderNavigationLink\n          active={!!anchor}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  // same code is applied to HeaderNavigationHero.tsx\n                  '&&&': {\n                    fontSize: { xs: '20px', lg: '14px' },\n                  },\n                  color: {\n                    xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                    lg: 'currentColor',\n                  },\n                  transform: `rotate(${anchor ? '180' : '0'}deg)`,\n                  transition: {\n                    xs: theme.transitions.create('transform', {\n                      duration: theme.transitions.duration.shortest,\n                    }),\n                    lg: 'none',\n                  },\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor((prev) => (!prev ? e.currentTarget : null));\n          }}\n          sx={{\n            justifyContent: { xs: 'space-between', lg: 'flex-start' },\n            ...sx,\n          }}\n          ref={ref ?? buttonRef}\n          data-testid=\"HeaderNavigationMenu\"\n          {...rest}\n        >\n          {label}\n        </HeaderNavigationLink>\n        {downLg ? (\n          <ClickAwayListener\n            onClickAway={(e) => {\n              console.log(e.target);\n              !((ref as React.RefObject<HTMLButtonElement>) ?? buttonRef)?.current?.contains(e?.target as Node) &&\n                setAnchor(null);\n            }}\n            {...clickAwayListenerProps}\n          >\n            <Collapse\n              in={!!anchor}\n              sx={{\n                // style menu items inside\n                '& .MuiMenuItem-root': {\n                  ...getInteractiveStyle(\n                    {\n                      background: 'none',\n                      fontWeight: '300',\n                      color: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                    },\n                    {\n                      background: 'none',\n                      fontWeight: '700',\n                      color: 'currentColor',\n                    },\n                  ),\n                },\n                ...collapseSx,\n              }}\n              {...restCollapse}\n            >\n              {children || menuItems}\n            </Collapse>\n          </ClickAwayListener>\n        ) : (\n          <Menu open={!!anchor} anchorEl={anchor} onClose={() => setAnchor(null)} {...menuProps}>\n            {children || menuItems}\n          </Menu>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["HeaderNavigationMenu","forwardRef","_a","ref","children","sx","label","icon","onClick","menuItems","menuProps","collapseProps","clickAwayListenerProps","rest","__rest","buttonRef","useRef","anchor","setAnchor","useState","theme","useTheme","downLg","useMediaQuery","breakpoints","down","_b","collapseSx","restCollapse","_jsxs","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","currentTarget","Object","assign","justifyContent","ClickAwayListener","onClickAway","console","log","target","current","contains","Collapse","in","getInteractiveStyle","background","fontWeight","Menu","open","anchorEl","onClose"],"mappings":"2PAsCO,MAAMA,EAAsDC,EAAAA,WACjE,CACEC,EACAC,SADAC,SAAEA,EAAQC,GAAEA,EAAEC,MAAEA,EAAKC,KAAEA,EAAIC,QAAEA,EAAOC,UAAEA,EAASC,UAAEA,EAASC,cAAEA,EAAaC,uBAAEA,KAA2BC,EAAIC,EAAAA,OAAAZ,EAA1G,CAAA,WAAA,KAAA,QAAA,OAAA,UAAA,YAAA,YAAA,gBAAA,2BAGA,MAAMa,EAAYC,EAAAA,UACXC,EAAQC,GAAaC,EAAAA,SAAS,MAC/BC,EAAQC,EAAAA,WACRC,EAASC,EAAAA,cAAqBH,EAAMI,YAAYC,KAAK,OACrDC,EAAsCf,QAAAA,EAAiB,IAArDN,GAAIsB,GAAUD,EAAKE,EAAYd,EAAAA,OAAAY,EAAjC,CAAA,OAEN,OACEG,EAAAA,2BACEC,MAACC,EAAAA,oCACCC,SAAUf,EACVV,KACEA,GACEuB,MAACG,EAAAA,gBAAe,CACd5B,GAAI,CAEF,MAAO,CACL6B,SAAU,CAAEC,GAAI,OAAQC,GAAI,SAE9BC,MAAO,CACLF,GAA2B,SAAvBf,EAAMkB,QAAQC,KAAkB,kBAAoB,kBACxDH,GAAI,gBAENI,UAAW,UAAUvB,EAAS,MAAQ,UACtCwB,WAAY,CACVN,GAAIf,EAAMsB,YAAYC,OAAO,YAAa,CACxCC,SAAUxB,EAAMsB,YAAYE,SAASC,WAEvCT,GAAI,WAMd5B,QAAUsC,IACRtC,SAAAA,EAAUsC,GACV5B,EAAW6B,GAAWA,EAAyB,KAAlBD,EAAEE,gBAEjC3C,GAAE4C,OAAAC,OAAA,CACAC,eAAgB,CAAEhB,GAAI,gBAAiBC,GAAI,eACxC/B,GAELF,IAAKA,QAAAA,EAAOY,gBACA,wBACRF,EAAI,CAAAT,SAEPE,KAEFgB,EACCQ,EAAAA,IAACsB,oBAAiBH,OAAAC,OAAA,CAChBG,YAAcP,cACZQ,QAAQC,IAAIT,EAAEU,oBAC6C,QAA1D9B,EAA4C,UAA1CvB,SAA0C,IAAAD,EAAAA,EAAIa,SAAU,IAAAW,OAAA,EAAAA,EAAE+B,8BAASC,SAASZ,eAAAA,EAAGU,UAChFtC,EAAU,QAEVN,EAAsB,CAAAR,SAE1B0B,EAAAA,IAAC6B,EAAAA,SAAQV,OAAAC,OAAA,CACPU,KAAM3C,EACNZ,GAAE4C,OAAAC,OAAA,CAEA,sBAAqBD,OAAAC,OAAA,CAAA,EAChBW,EAAAA,oBACD,CACEC,WAAY,OACZC,WAAY,MACZ1B,MAA8B,SAAvBjB,EAAMkB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEuB,WAAY,OACZC,WAAY,MACZ1B,MAAO,mBAIVV,IAEDC,YAEHxB,GAAYK,QAIjBqB,EAAAA,IAACkC,EAAAA,KAAIf,OAAAC,OAAA,CAACe,OAAQhD,EAAQiD,SAAUjD,EAAQkD,QAAS,IAAMjD,EAAU,OAAWR,YACzEN,GAAYK"}
+{"version":3,"file":"HeaderNavigationMenu.js","sources":["../../../../../src/components/header/HeaderNavigationMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useRef, useState } from 'react';\nimport {\n  Menu,\n  MenuProps,\n  Collapse,\n  useMediaQuery,\n  Theme,\n  useTheme,\n  CollapseProps,\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from '@mui/material';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface HeaderNavigationMenuProps extends HeaderNavigationLinkProps {\n  /**\n   * Content of the menu, can be provided as children as well\n   */\n  menuItems?: ReactNode;\n  /**\n   * Props applied to menu\n   */\n  menuProps?: MenuProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to menu on mobile\n   */\n  collapseProps?: CollapseProps;\n}\n\n/**\n * HeaderNavigationLink with the integration of the menu\n */\nexport const HeaderNavigationMenu: FC<HeaderNavigationMenuProps> = forwardRef(\n  (\n    { children, sx, label, icon, onClick, menuItems, menuProps, collapseProps, clickAwayListenerProps, ...rest },\n    ref,\n  ) => {\n    const buttonRef = useRef();\n    const [anchor, setAnchor] = useState(null);\n    const theme = useTheme();\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const { sx: collapseSx, ...restCollapse } = collapseProps ?? {};\n\n    return (\n      <>\n        <HeaderNavigationLink\n          active={!!anchor}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  // same code is applied to HeaderNavigationHero.tsx\n                  '&&&': {\n                    fontSize: { xs: '20px', lg: '14px' },\n                  },\n                  color: {\n                    xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                    lg: 'currentColor',\n                  },\n                  transform: `rotate(${anchor ? '180' : '0'}deg)`,\n                  transition: {\n                    xs: theme.transitions.create('transform', {\n                      duration: theme.transitions.duration.shortest,\n                    }),\n                    lg: 'none',\n                  },\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor((prev) => (!prev ? e.currentTarget : null));\n          }}\n          sx={{\n            justifyContent: { xs: 'space-between', lg: 'flex-start' },\n            ...sx,\n          }}\n          ref={ref ?? buttonRef}\n          data-testid=\"HeaderNavigationMenu\"\n          {...rest}\n        >\n          {label}\n        </HeaderNavigationLink>\n        {downLg ? (\n          <ClickAwayListener\n            onClickAway={(e) => {\n              !((ref as React.RefObject<HTMLButtonElement>) ?? buttonRef)?.current?.contains(e?.target as Node) &&\n                setAnchor(null);\n            }}\n            {...clickAwayListenerProps}\n          >\n            <Collapse\n              in={!!anchor}\n              sx={{\n                // style menu items inside\n                '& .MuiMenuItem-root': {\n                  ...getInteractiveStyle(\n                    {\n                      background: 'none',\n                      fontWeight: '300',\n                      color: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                    },\n                    {\n                      background: 'none',\n                      fontWeight: '700',\n                      color: 'currentColor',\n                    },\n                  ),\n                },\n                ...collapseSx,\n              }}\n              {...restCollapse}\n            >\n              {children || menuItems}\n            </Collapse>\n          </ClickAwayListener>\n        ) : (\n          <Menu open={!!anchor} anchorEl={anchor} onClose={() => setAnchor(null)} {...menuProps}>\n            {children || menuItems}\n          </Menu>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["HeaderNavigationMenu","forwardRef","_a","ref","children","sx","label","icon","onClick","menuItems","menuProps","collapseProps","clickAwayListenerProps","rest","__rest","buttonRef","useRef","anchor","setAnchor","useState","theme","useTheme","downLg","useMediaQuery","breakpoints","down","_b","collapseSx","restCollapse","_jsxs","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","currentTarget","Object","assign","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Collapse","in","getInteractiveStyle","background","fontWeight","Menu","open","anchorEl","onClose"],"mappings":"2PAsCO,MAAMA,EAAsDC,EAAAA,WACjE,CACEC,EACAC,SADAC,SAAEA,EAAQC,GAAEA,EAAEC,MAAEA,EAAKC,KAAEA,EAAIC,QAAEA,EAAOC,UAAEA,EAASC,UAAEA,EAASC,cAAEA,EAAaC,uBAAEA,KAA2BC,EAAIC,EAAAA,OAAAZ,EAA1G,CAAA,WAAA,KAAA,QAAA,OAAA,UAAA,YAAA,YAAA,gBAAA,2BAGA,MAAMa,EAAYC,EAAAA,UACXC,EAAQC,GAAaC,EAAAA,SAAS,MAC/BC,EAAQC,EAAAA,WACRC,EAASC,EAAAA,cAAqBH,EAAMI,YAAYC,KAAK,OACrDC,EAAsCf,QAAAA,EAAiB,IAArDN,GAAIsB,GAAUD,EAAKE,EAAYd,EAAAA,OAAAY,EAAjC,CAAA,OAEN,OACEG,EAAAA,2BACEC,MAACC,EAAAA,oCACCC,SAAUf,EACVV,KACEA,GACEuB,MAACG,EAAAA,gBAAe,CACd5B,GAAI,CAEF,MAAO,CACL6B,SAAU,CAAEC,GAAI,OAAQC,GAAI,SAE9BC,MAAO,CACLF,GAA2B,SAAvBf,EAAMkB,QAAQC,KAAkB,kBAAoB,kBACxDH,GAAI,gBAENI,UAAW,UAAUvB,EAAS,MAAQ,UACtCwB,WAAY,CACVN,GAAIf,EAAMsB,YAAYC,OAAO,YAAa,CACxCC,SAAUxB,EAAMsB,YAAYE,SAASC,WAEvCT,GAAI,WAMd5B,QAAUsC,IACRtC,SAAAA,EAAUsC,GACV5B,EAAW6B,GAAWA,EAAyB,KAAlBD,EAAEE,gBAEjC3C,GAAE4C,OAAAC,OAAA,CACAC,eAAgB,CAAEhB,GAAI,gBAAiBC,GAAI,eACxC/B,GAELF,IAAKA,QAAAA,EAAOY,gBACA,wBACRF,EAAI,CAAAT,SAEPE,KAEFgB,EACCQ,EAAAA,IAACsB,oBAAiBH,OAAAC,OAAA,CAChBG,YAAcP,0BAC+C,QAA1DpB,EAA4C,UAA1CvB,SAA0C,IAAAD,EAAAA,EAAIa,SAAU,IAAAW,OAAA,EAAAA,EAAE4B,8BAASC,SAAST,eAAAA,EAAGU,UAChFtC,EAAU,QAEVN,EAAsB,CAAAR,SAE1B0B,EAAAA,IAAC2B,EAAAA,SAAQR,OAAAC,OAAA,CACPQ,KAAMzC,EACNZ,GAAE4C,OAAAC,OAAA,CAEA,sBAAqBD,OAAAC,OAAA,CAAA,EAChBS,EAAAA,oBACD,CACEC,WAAY,OACZC,WAAY,MACZxB,MAA8B,SAAvBjB,EAAMkB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEqB,WAAY,OACZC,WAAY,MACZxB,MAAO,mBAIVV,IAEDC,YAEHxB,GAAYK,QAIjBqB,EAAAA,IAACgC,EAAAA,KAAIb,OAAAC,OAAA,CAACa,OAAQ9C,EAAQ+C,SAAU/C,EAAQgD,QAAS,IAAM/C,EAAU,OAAWR,YACzEN,GAAYK"}

package/cjs/components/hotspotCard/HotspotCard.d.ts

@@ -0,0 +1,91 @@
+import React, { ElementType, ReactNode } from 'react';
+import { BoxProps, CardProps, ClickAwayListenerProps, FadeProps, IconButtonProps, PopperProps, SvgIconProps } from '@mui/material';
+import { ResponsiveStyleValue } from '@mui/system';
+export interface HotspotCardProps extends Omit<IconButtonProps, 'color' | 'size'> {
+    /**
+     * top position of hotspot card
+     */
+    top?: ResponsiveStyleValue<number | string>;
+    /**
+     * left position of hotspot card
+     */
+    left?: ResponsiveStyleValue<number | string>;
+    /**
+     * bottom position of hotspot card
+     */
+    bottom?: ResponsiveStyleValue<number | string>;
+    /**
+     * right position of hotspot card
+     */
+    right?: ResponsiveStyleValue<number | string>;
+    /**
+     * Boolean that defines different design whether a HotspotCardIconButton is placed on background inside the Card, (instead of image)
+     */
+    onBackground?: boolean;
+    /**
+     * Make sure to center IconButton, helpful with left or right properties set to 50%
+     */
+    center?: boolean;
+    /**
+     * Boolean that defines whether a HotspotCard is opened.
+     *
+     * @see setOpen
+     */
+    open?: boolean;
+    /**
+     * Function that can be used to control a state of card popup
+     *
+     * @param open new open value
+     * @see open
+     */
+    setOpen?: (open: boolean) => void;
+    /**
+     * Properties that will be passed to Fade component
+     *
+     * @see Fade
+     */
+    fadeProps?: Omit<FadeProps, 'children'>;
+    /**
+     * Properties that will be passed to Popper component
+     *
+     * @see Popper
+     */
+    popperProps?: Omit<PopperProps, 'open'>;
+    /**
+     * Properties applied to ClickAwayListener
+     */
+    clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;
+    /**
+     * Custom icon component to use instead of the default PlusIcon
+     */
+    icon?: ReactNode;
+    /**
+     * Properties that will be passed to the icon component
+     */
+    iconProps?: SvgIconProps;
+    /**
+     * Custom icon component to use instead of the default PlusIcon
+     */
+    insideIcon?: ReactNode;
+    /**
+     * Properties for a cose icon inside HotspotCard
+     */
+    insideIconProps?: SvgIconProps;
+    /**
+     * Properties for a IconButton inside HotspotCard
+     */
+    insideIconButtonProps?: IconButtonProps<ElementType>;
+    /**
+     * Properties for a Box element that wraps button and popper
+     */
+    wrapperProps?: BoxProps<ElementType>;
+    /**
+     * Properties for Card inside the Popper element.
+     */
+    cardProps?: CardProps<ElementType>;
+}
+/**
+ * A card component that is toggled on and off with IconButton.
+ * The card is fullscreen on mobile-size devices.
+ */
+export declare const HotspotCard: React.FC<HotspotCardProps>;

package/cjs/components/hotspotCard/HotspotCard.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("tslib"),s=require("react/jsx-runtime"),t=require("react"),o=require("@mui/material"),n=require("../icon/stroke/PlusIcon.js");const r=t.forwardRef((r,i)=>{var a,l,{sx:c,children:d,top:p,left:x,bottom:u,right:b,onBackground:g=!1,center:m=!1,open:h,setOpen:j,fadeProps:f={},popperProps:O={},clickAwayListenerProps:P={},icon:C,iconProps:I={},insideIcon:w,insideIconProps:v={},insideIconButtonProps:k={},wrapperProps:_={},cardProps:z={}}=r,B=e.__rest(r,["sx","children","top","left","bottom","right","onBackground","center","open","setOpen","fadeProps","popperProps","clickAwayListenerProps","icon","iconProps","insideIcon","insideIconProps","insideIconButtonProps","wrapperProps","cardProps"]);const{sx:y}=z,M=e.__rest(z,["sx"]),{sx:q}=O,A=e.__rest(O,["sx"]),{sx:S}=I,L=e.__rest(I,["sx"]),{sx:R}=v,W=e.__rest(v,["sx"]),{sx:H}=k,T=e.__rest(k,["sx"]),E=o.useTheme(),F=o.useMediaQuery(E.breakpoints.down("md")),Q=t.useRef(null),D=t.useRef(null),[G,J]=t.useState(null!=h&&h),[K,N]=t.useState("left-start"),U=null!=h?h:G,V=t.useCallback(void 0!==h?()=>j(!h):()=>J(e=>!e),[h,j]),X=t.useCallback(void 0!==h?()=>j(!1):()=>J(!1),[h,j]);return s.jsx(o.ClickAwayListener,Object.assign({onClickAway:X},P,{children:s.jsxs(o.Box,Object.assign({},_,{children:[s.jsx(o.IconButton,Object.assign({ref:null!=i?i:Q,onClick:V,"aria-label":"Open or Close the card"},U&&{"aria-controls":"hotspot-card"},{size:"small",color:"surface",sx:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({position:"absolute",zIndex:e=>e.zIndex.hotspotCard},null!=p&&Object.assign({top:p},m&&{mt:"-16px"})),null!=x&&Object.assign({left:x},m&&{ml:"-16px"})),null!=u&&Object.assign({bottom:u},m&&{mb:"-16px"})),null!=b&&Object.assign({right:b},m&&{mr:"-16px"})),null==p&&null==x&&null==u&&null==b&&Object.assign({top:"0%",left:"0%"},m&&{mt:"-16px",ml:"-16px"})),c)},B,{children:C||s.jsx(n.PlusIcon,Object.assign({sx:Object.assign({transform:U?"rotate(45deg)":"rotate(0deg)",transition:"transform .3s ease"},S)},L))})),s.jsx(o.Popper,Object.assign({open:U,anchorEl:F?null:null===(l=null!==(a=i)&&void 0!==a?a:Q)||void 0===l?void 0:l.current,transition:!0,placement:"left-start",disablePortal:!0,ref:D,modifiers:[{name:"flip",enabled:!0,options:{fallbackPlacements:["right-start"]}},{name:"preventOverflow",enabled:!0,options:{boundary:"viewport"}},{name:"updatePlacement",enabled:!0,phase:"afterWrite",fn:({state:e})=>{N(e.placement)}}],sx:Object.assign({position:"fixed",top:{xs:"0",md:"auto"},left:{xs:"0",md:"auto"},width:{xs:"100%",md:"400px"},height:{xs:"100%",md:"auto"},minHeight:{xs:"100vh",md:"auto"},zIndex:e=>e.zIndex.modal},q)},A,{children:({TransitionProps:e})=>s.jsx(o.Fade,Object.assign({},e,{timeout:350},f,{children:s.jsxs(o.Card,Object.assign({id:"hotspot-card",sx:Object.assign({boxShadow:e=>e.flowShadows.xl,position:"relative",width:{xs:"100%",md:"inherit"},height:{xs:"100%",md:"auto"},top:{xs:"0",md:"-9px"},left:K.startsWith("right")?{xs:"0",md:"-41px"}:void 0,right:K.startsWith("left")?{xs:"0",md:"-41px"}:void 0,"&:after":{border:"none"},"& > .MuiBox-root":{overflow:"auto"},"& .MuiCardMedia-root":{height:{xs:"300px",md:"232px"}},"& .MuiCardContent-root, &.MuiCardContent-root:last-child":{padding:3}},y)},M,{children:[s.jsx(o.IconButton,Object.assign({onClick:V,"aria-label":"Close the card",size:"small",color:g?"inherit":"surface",sx:Object.assign({position:"absolute",zIndex:e=>e.zIndex.hotspotCard,top:"8px",right:"8px"},H)},T,{children:w||s.jsx(n.PlusIcon,Object.assign({sx:Object.assign({transform:U?"rotate(45deg)":"rotate(0deg)",transition:"transform .3s ease"},R)},W))})),d]}))}))}),F?"popper-mobile":"popper-desktop")]}))}))});exports.HotspotCard=r;
+//# sourceMappingURL=HotspotCard.js.map

package/cjs/components/hotspotCard/HotspotCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HotspotCard.js","sources":["../../../../../src/components/hotspotCard/HotspotCard.tsx"],"sourcesContent":["import React, { forwardRef, ElementType, ReactNode, useRef, useState, useCallback } from 'react';\nimport {\n  Box,\n  BoxProps,\n  Card,\n  CardProps,\n  ClickAwayListener,\n  ClickAwayListenerProps,\n  Fade,\n  FadeProps,\n  IconButton,\n  IconButtonProps,\n  Popper,\n  PopperProps,\n  useMediaQuery,\n  useTheme,\n  SvgIconProps,\n} from '@mui/material';\nimport { PlusIcon } from '@/src/components/icon/stroke/PlusIcon';\nimport { ResponsiveStyleValue } from '@mui/system';\n\nexport interface HotspotCardProps extends Omit<IconButtonProps, 'color' | 'size'> {\n  /**\n   * top position of hotspot card\n   */\n  top?: ResponsiveStyleValue<number | string>;\n  /**\n   * left position of hotspot card\n   */\n  left?: ResponsiveStyleValue<number | string>;\n  /**\n   * bottom position of hotspot card\n   */\n  bottom?: ResponsiveStyleValue<number | string>;\n  /**\n   * right position of hotspot card\n   */\n  right?: ResponsiveStyleValue<number | string>;\n  /**\n   * Boolean that defines different design whether a HotspotCardIconButton is placed on background inside the Card, (instead of image)\n   */\n  onBackground?: boolean;\n  /**\n   * Make sure to center IconButton, helpful with left or right properties set to 50%\n   */\n  center?: boolean;\n  /**\n   * Boolean that defines whether a HotspotCard is opened.\n   *\n   * @see setOpen\n   */\n  open?: boolean;\n  /**\n   * Function that can be used to control a state of card popup\n   *\n   * @param open new open value\n   * @see open\n   */\n  setOpen?: (open: boolean) => void;\n  /**\n   * Properties that will be passed to Fade component\n   *\n   * @see Fade\n   */\n  fadeProps?: Omit<FadeProps, 'children'>;\n  /**\n   * Properties that will be passed to Popper component\n   *\n   * @see Popper\n   */\n  popperProps?: Omit<PopperProps, 'open'>;\n  /**\n   * Properties applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Custom icon component to use instead of the default PlusIcon\n   */\n  icon?: ReactNode;\n  /**\n   * Properties that will be passed to the icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Custom icon component to use instead of the default PlusIcon\n   */\n  insideIcon?: ReactNode;\n  /**\n   * Properties for a cose icon inside HotspotCard\n   */\n  insideIconProps?: SvgIconProps;\n  /**\n   * Properties for a IconButton inside HotspotCard\n   */\n  insideIconButtonProps?: IconButtonProps<ElementType>;\n  /**\n   * Properties for a Box element that wraps button and popper\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties for Card inside the Popper element.\n   */\n  cardProps?: CardProps<ElementType>;\n}\n\n/**\n * A card component that is toggled on and off with IconButton.\n * The card is fullscreen on mobile-size devices.\n */\nexport const HotspotCard: React.FC<HotspotCardProps> = forwardRef(\n  (\n    {\n      sx,\n      children,\n      top,\n      left,\n      bottom,\n      right,\n      onBackground = false,\n      center = false,\n      open,\n      setOpen,\n      fadeProps = {},\n      popperProps = {},\n      clickAwayListenerProps = {},\n      icon,\n      iconProps = {},\n      insideIcon,\n      insideIconProps = {},\n      insideIconButtonProps = {},\n      wrapperProps = {},\n      cardProps = {},\n      ...restProps\n    },\n    ref,\n  ) => {\n    const { sx: cardSx, ...restCard } = cardProps;\n    const { sx: popperSx, ...restPopperProps } = popperProps;\n    const { sx: iconSx, ...restIconProps } = iconProps;\n    const { sx: insideIconSx, ...restInsideIconProps } = insideIconProps;\n    const { sx: insideIconButtonSx, ...restInsideIconButtonProps } = insideIconButtonProps;\n\n    const FWLTheme = useTheme();\n    const isSmallScreen = useMediaQuery(FWLTheme.breakpoints.down('md'));\n    const btnRef = useRef(null);\n    const popperRef = useRef<HTMLDivElement>(null);\n    const [_open, _setOpen] = useState(open ?? false);\n    const [currentPlacement, setCurrentPlacement] = useState<string>('left-start');\n\n    const isOpen = open ?? _open;\n    const handleClick = useCallback(open !== undefined ? () => setOpen(!open) : () => _setOpen((prev) => !prev), [\n      open,\n      setOpen,\n    ]);\n    const handleClickAway = useCallback(open !== undefined ? () => setOpen(false) : () => _setOpen(false), [\n      open,\n      setOpen,\n    ]);\n\n    return (\n      <ClickAwayListener onClickAway={handleClickAway} {...clickAwayListenerProps}>\n        <Box {...wrapperProps}>\n          <IconButton\n            ref={ref ?? btnRef}\n            onClick={handleClick}\n            aria-label=\"Open or Close the card\"\n            {...(isOpen && { ['aria-controls']: 'hotspot-card' })}\n            size=\"small\"\n            color=\"surface\"\n            sx={{\n              position: 'absolute',\n              zIndex: (theme) => theme.zIndex.hotspotCard,\n              ...(top != undefined && { top: top, ...(center && { mt: '-16px' }) }),\n              ...(left != undefined && { left: left, ...(center && { ml: '-16px' }) }),\n              ...(bottom != undefined && { bottom: bottom, ...(center && { mb: '-16px' }) }),\n              ...(right != undefined && { right: right, ...(center && { mr: '-16px' }) }),\n              // Fallback to top-left if no position is specified\n              ...(top == undefined &&\n                left == undefined &&\n                bottom == undefined &&\n                right == undefined && {\n                  top: '0%',\n                  left: '0%',\n                  ...(center && { mt: '-16px', ml: '-16px' }),\n                }),\n              ...sx,\n            }}\n            {...restProps}\n          >\n            {icon || (\n              <PlusIcon\n                sx={{\n                  transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',\n                  transition: 'transform .3s ease',\n                  ...iconSx,\n                }}\n                {...restIconProps}\n              />\n            )}\n          </IconButton>\n          <Popper\n            key={isSmallScreen ? 'popper-mobile' : 'popper-desktop'}\n            open={isOpen}\n            anchorEl={isSmallScreen ? null : ((ref as React.RefObject<HTMLButtonElement>) ?? btnRef)?.current}\n            transition\n            placement=\"left-start\"\n            disablePortal\n            ref={popperRef}\n            modifiers={[\n              {\n                name: 'flip',\n                enabled: true,\n                options: {\n                  fallbackPlacements: ['right-start'],\n                },\n              },\n              {\n                name: 'preventOverflow',\n                enabled: true,\n                options: {\n                  boundary: 'viewport',\n                },\n              },\n              {\n                name: 'updatePlacement',\n                enabled: true,\n                phase: 'afterWrite',\n                fn: ({ state }) => {\n                  setCurrentPlacement(state.placement);\n                },\n              },\n            ]}\n            sx={{\n              position: 'fixed',\n              top: { xs: '0', md: 'auto' },\n              left: { xs: '0', md: 'auto' },\n              width: { xs: '100%', md: '400px' },\n              height: { xs: '100%', md: 'auto' },\n              minHeight: { xs: '100vh', md: 'auto' },\n              zIndex: (theme) => theme.zIndex.modal,\n              ...popperSx,\n            }}\n            {...restPopperProps}\n          >\n            {({ TransitionProps }) => (\n              <Fade {...TransitionProps} timeout={350} {...fadeProps}>\n                <Card\n                  id=\"hotspot-card\"\n                  sx={{\n                    boxShadow: (theme) => theme.flowShadows.xl,\n                    position: 'relative',\n                    width: { xs: '100%', md: 'inherit' },\n                    height: { xs: '100%', md: 'auto' },\n                    top: { xs: '0', md: '-9px' },\n                    left: currentPlacement.startsWith('right') ? { xs: '0', md: '-41px' } : undefined,\n                    right: currentPlacement.startsWith('left') ? { xs: '0', md: '-41px' } : undefined,\n                    // remove border\n                    '&:after': {\n                      border: 'none',\n                    },\n                    // card wrapper\n                    '& > .MuiBox-root': {\n                      overflow: 'auto',\n                    },\n                    // media in card\n                    '& .MuiCardMedia-root': {\n                      height: {\n                        xs: '300px',\n                        md: '232px',\n                      },\n                    },\n                    // content\n                    '& .MuiCardContent-root, &.MuiCardContent-root:last-child': {\n                      padding: 3,\n                    },\n                    ...cardSx,\n                  }}\n                  {...restCard}\n                >\n                  <IconButton\n                    onClick={handleClick}\n                    aria-label=\"Close the card\"\n                    size=\"small\"\n                    color={onBackground ? 'inherit' : 'surface'}\n                    sx={{\n                      position: 'absolute',\n                      zIndex: (theme) => theme.zIndex.hotspotCard,\n                      top: '8px',\n                      right: '8px',\n                      ...insideIconButtonSx,\n                    }}\n                    {...restInsideIconButtonProps}\n                  >\n                    {insideIcon || (\n                      <PlusIcon\n                        sx={{\n                          transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',\n                          transition: 'transform .3s ease',\n                          ...insideIconSx,\n                        }}\n                        {...restInsideIconProps}\n                      />\n                    )}\n                  </IconButton>\n                  {children}\n                </Card>\n              </Fade>\n            )}\n          </Popper>\n        </Box>\n      </ClickAwayListener>\n    );\n  },\n);\n"],"names":["HotspotCard","forwardRef","_a","ref","sx","children","top","left","bottom","right","onBackground","center","open","setOpen","fadeProps","popperProps","clickAwayListenerProps","icon","iconProps","insideIcon","insideIconProps","insideIconButtonProps","wrapperProps","cardProps","restProps","__rest","cardSx","restCard","popperSx","restPopperProps","iconSx","restIconProps","insideIconSx","restInsideIconProps","insideIconButtonSx","restInsideIconButtonProps","FWLTheme","useTheme","isSmallScreen","useMediaQuery","breakpoints","down","btnRef","useRef","popperRef","_open","_setOpen","useState","currentPlacement","setCurrentPlacement","isOpen","handleClick","useCallback","undefined","prev","handleClickAway","_jsx","ClickAwayListener","Object","assign","onClickAway","_jsxs","Box","IconButton","onClick","size","color","position","zIndex","theme","hotspotCard","mt","ml","mb","mr","PlusIcon","transform","transition","Popper","anchorEl","_c","_b","current","placement","disablePortal","modifiers","name","enabled","options","fallbackPlacements","boundary","phase","fn","state","xs","md","width","height","minHeight","modal","TransitionProps","Fade","timeout","Card","id","boxShadow","flowShadows","xl","startsWith","border","overflow","padding"],"mappings":"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"}

package/cjs/components/hotspotCard/index.d.ts

@@ -1 +1 @@
-export * from './hotspotCard';
+export * from './HotspotCard';

package/cjs/components/icon/Icon.d.ts

@@ -18,6 +18,6 @@ export interface IconProps extends SvgIconProps {
 }
 /**
  * SkodaFlow Icon component
- * ! Usage of component is not recommended as it increases bundle size
+ * ! usage of component is not recommended as it increases bundle size
  */
 export declare const Icon: React.FC<IconProps>;

package/cjs/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import React, { useMemo, forwardRef } from 'react';\nimport { SvgIconProps } from '@mui/material';\nimport { IconNameProp, iconDefinitions } from './icon.definitions';\n\n/**\n * @interface IconProps\n * @description Base definition of SkodaFlow Icon\n */\nexport interface IconProps extends SvgIconProps {\n  /**\n   * Name of the icon that should be used. Alternatively, provide name in the className property\n   */\n  name?: IconNameProp;\n  /**\n   * Style of vectors, regular (stroke) or filled format\n   * @default 'regular'\n   */\n  iconStyle?: 'regular' | 'filled';\n}\n\n/**\n * SkodaFlow Icon component\n * ! Usage of component is not recommended as it increases bundle size\n */\nexport const Icon: React.FC<IconProps> = forwardRef(({ name, className, iconStyle, ...rest }, ref) => {\n  // obtain SvgIcon component to be rendered\n  const IconComponent = useMemo(() => {\n    const definition =\n      // try to find by name\n      (name && iconDefinitions.find((def) => [def.name, ...def.altNames].includes(name))) ||\n      // try to find by className\n      (className &&\n        iconDefinitions.find((def) => className.split(' ').some((cls) => [def.name, ...def.altNames].includes(cls)))) ||\n      // fallback\n      iconDefinitions.find((item) => item.name === 'circle-question');\n    return iconStyle === 'filled' ? definition.componentFilled : definition.component;\n  }, [name, className, iconStyle]);\n\n  return (\n    <IconComponent\n      ref={ref}\n      data-testid=\"Icon\"\n      className={['sa-i', className, name].filter(Boolean).join(' ')}\n      {...rest}\n    />\n  );\n});\n"],"names":["Icon","forwardRef","_a","ref","name","className","iconStyle","rest","__rest","IconComponent","useMemo","definition","iconDefinitions","find","def","altNames","includes","split","some","cls","item","componentFilled","component","_jsx","Object","assign","filter","Boolean","join"],"mappings":"yHAwBO,MAAMA,EAA4BC,EAAAA,WAAW,CAACC,EAAyCC,SAAzCC,KAAEA,EAAIC,UAAEA,EAASC,UAAEA,KAAcC,EAAIC,EAAAA,OAAAN,EAArC,CAAA,OAAA,YAAA,cAEnD,MAAMO,EAAgBC,EAAAA,QAAQ,KAC5B,MAAMC,EAEHP,GAAQQ,EAAAA,gBAAgBC,KAAMC,GAAQ,CAACA,EAAIV,QAASU,EAAIC,UAAUC,SAASZ,KAE3EC,GACCO,kBAAgBC,KAAMC,GAAQT,EAAUY,MAAM,KAAKC,KAAMC,GAAQ,CAACL,EAAIV,QAASU,EAAIC,UAAUC,SAASG,MAExGP,EAAAA,gBAAgBC,KAAMO,GAAuB,oBAAdA,EAAKhB,MACtC,MAAqB,WAAdE,EAAyBK,EAAWU,gBAAkBV,EAAWW,WACvE,CAAClB,EAAMC,EAAWC,IAErB,OACEiB,EAAAA,IAACd,EAAae,OAAAC,OAAA,CACZtB,IAAKA,EAAG,cACI,OACZE,UAAW,CAAC,OAAQA,EAAWD,GAAMsB,OAAOC,SAASC,KAAK,MACtDrB"}
+{"version":3,"file":"Icon.js","sources":["../../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import React, { useMemo, forwardRef } from 'react';\nimport { SvgIconProps } from '@mui/material';\nimport { IconNameProp, iconDefinitions } from './icon.definitions';\n\n/**\n * @interface IconProps\n * @description Base definition of SkodaFlow Icon\n */\nexport interface IconProps extends SvgIconProps {\n  /**\n   * Name of the icon that should be used. Alternatively, provide name in the className property\n   */\n  name?: IconNameProp;\n  /**\n   * Style of vectors, regular (stroke) or filled format\n   * @default 'regular'\n   */\n  iconStyle?: 'regular' | 'filled';\n}\n\n/**\n * SkodaFlow Icon component\n * ! usage of component is not recommended as it increases bundle size\n */\nexport const Icon: React.FC<IconProps> = forwardRef(({ name, className, iconStyle, ...rest }, ref) => {\n  // obtain SvgIcon component to be rendered\n  const IconComponent = useMemo(() => {\n    const definition =\n      // try to find by name\n      (name && iconDefinitions.find((def) => [def.name, ...def.altNames].includes(name))) ||\n      // try to find by className\n      (className &&\n        iconDefinitions.find((def) => className.split(' ').some((cls) => [def.name, ...def.altNames].includes(cls)))) ||\n      // fallback\n      iconDefinitions.find((item) => item.name === 'circle-question');\n    return iconStyle === 'filled' ? definition.componentFilled : definition.component;\n  }, [name, className, iconStyle]);\n\n  return (\n    <IconComponent\n      ref={ref}\n      data-testid=\"Icon\"\n      className={['sa-i', className, name].filter(Boolean).join(' ')}\n      {...rest}\n    />\n  );\n});\n"],"names":["Icon","forwardRef","_a","ref","name","className","iconStyle","rest","__rest","IconComponent","useMemo","definition","iconDefinitions","find","def","altNames","includes","split","some","cls","item","componentFilled","component","_jsx","Object","assign","filter","Boolean","join"],"mappings":"yHAwBO,MAAMA,EAA4BC,EAAAA,WAAW,CAACC,EAAyCC,SAAzCC,KAAEA,EAAIC,UAAEA,EAASC,UAAEA,KAAcC,EAAIC,EAAAA,OAAAN,EAArC,CAAA,OAAA,YAAA,cAEnD,MAAMO,EAAgBC,EAAAA,QAAQ,KAC5B,MAAMC,EAEHP,GAAQQ,EAAAA,gBAAgBC,KAAMC,GAAQ,CAACA,EAAIV,QAASU,EAAIC,UAAUC,SAASZ,KAE3EC,GACCO,kBAAgBC,KAAMC,GAAQT,EAAUY,MAAM,KAAKC,KAAMC,GAAQ,CAACL,EAAIV,QAASU,EAAIC,UAAUC,SAASG,MAExGP,EAAAA,gBAAgBC,KAAMO,GAAuB,oBAAdA,EAAKhB,MACtC,MAAqB,WAAdE,EAAyBK,EAAWU,gBAAkBV,EAAWW,WACvE,CAAClB,EAAMC,EAAWC,IAErB,OACEiB,EAAAA,IAACd,EAAae,OAAAC,OAAA,CACZtB,IAAKA,EAAG,cACI,OACZE,UAAW,CAAC,OAAQA,EAAWD,GAAMsB,OAAOC,SAASC,KAAK,MACtDrB"}