@skodaflow/web-library 7.16.0 → 8.0.0

package/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":"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"}
+{"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":"gWAoCO,MAAMA,EAAsCC,EACjD,CAACC,EAAoEC,KAApE,IAAAC,SAAEA,EAAQC,GAAEA,EAAEC,MAAEA,EAAKC,OAAEA,EAAMC,aAAEA,EAAYC,WAAEA,GAAUP,EAAKQ,EAAIC,EAAAT,EAAhE,gEACC,MAAMU,EAAQC,IACRC,EAA4BN,QAAAA,EAAgB,CAAA,GAA5CO,MAAEA,GAAKD,EAAKE,EAAWL,EAAAG,EAAvB,CAAA,UAEN,OAAIP,EAEAU,EAACC,EAAUC,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,EACD,CACEC,WAAY,OAEd,CACEA,WAAY,SAIbC,EAAkBrB,IAAM,CAC3B,YAAa,CACXsB,aAAc,SAEb7B,GAELF,IAAKA,EAAsC,cAC/B,gBACRO,EAAI,CAAAN,SAAA,CAER+B,EAACC,EAAKjB,OAAAC,OAAA,GAAKX,EAAU,CAAAL,SAAGA,KACvBE,GAASS,MAMdoB,EAACE,iBAAQtB,MAAOT,GAASS,GAAWC,YAClCmB,EAACG,iBACCjC,GAAIA,EACJkC,KAAK,SACLpC,IAAKA,EAAsC,cAC/B,gBACRO,EAAI,CAAAN,SAER+B,EAACC,EAAKjB,OAAAC,OAAA,CAAA,EAAKX,EAAU,CAAAL,SAAGA"}

package/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/components/header/HeaderLogo.js

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

package/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":"kQAuBO,MAAMA,EAAkCC,EAAW,CAACC,EAA4CC,KAA5C,IAAAC,GAAEA,EAAEC,SAAEA,EAAQC,KAAEA,EAAIC,UAAEA,GAASL,EAAKM,EAAIC,EAAAP,EAAxC,CAAA,KAAA,WAAA,OAAA,cACzD,MAAMQ,EAAQC,IAEd,OAAIL,GAAQE,EAAKI,QAEbC,EAACC,EAAIC,OAAAC,OAAA,CACHZ,GAAEW,OAAAC,OAAAD,OAAAC,OAAA,CAEAC,QAAS,QACTC,SAAU,WACVC,GAAI,GAEDC,EAAkBV,IAAM,CAE3B,qBAAsB,CACpBW,UAAW,QAEb,qBAAsB,CACpBJ,QAAS,WAGbX,KAAMA,GAAQ,IACdH,IAAKA,EAAG,aACG,QACPK,EAAI,CAAAH,SAEPA,GAAYQ,EAACS,mBAASf,OAItBF,GAAYQ,EAACS,iBAAKlB,GAAIA,EAAID,IAAKA,GAAmDI,MAM9EgB,EAAuCtB,EAAW,CAACuB,EAAOrB,IAC9DU,EAACb,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":"kQAeO,MAAMA,EAAkCC,EAAW,CAACC,EAA4CC,KAA5C,IAAAC,GAAEA,EAAEC,SAAEA,EAAQC,KAAEA,EAAIC,UAAEA,GAASL,EAAKM,EAAIC,EAAAP,EAAxC,CAAA,KAAA,WAAA,OAAA,cACzD,MAAMQ,EAAQC,IAEd,OAAIL,GAAQE,EAAKI,QAEbC,EAACC,EAAIC,OAAAC,OAAA,CACHZ,GAAEW,OAAAC,OAAAD,OAAAC,OAAA,CAEAC,QAAS,QACTC,SAAU,WACVC,GAAI,GAEDC,EAAkBV,IAAM,CAE3B,qBAAsB,CACpBW,UAAW,QAEb,qBAAsB,CACpBJ,QAAS,WAGbX,KAAMA,GAAQ,IACdH,IAAKA,EAAG,aACG,QACPK,EAAI,CAAAH,SAEPA,GAAYQ,EAACS,mBAASf,OAItBF,GAAYQ,EAACS,iBAAKlB,GAAIA,EAAID,IAAKA,GAAmDI"}

package/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/components/header/HeaderNavigationHero.js

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

package/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/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/components/header/HeaderNavigationLink.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{forwardRef as o,useMemo as i}from"react";import{useTheme as r,ButtonBase as s,Box as n}from"@mui/material";import{ArrowTopRightIcon as l}from"../icon/stroke/ArrowTopRightIcon.js";import{getFocusRingStyle as c}from"../focusring/focusring.js";import{getInteractiveStyle as p}from"../../materialui/button/interactive.js";import{getTypography as g}from"../../materialui/typography/typography.theme.js";const b=o((o,b)=>{var{sx:d,children:x,label:m,icon:u,active:f=!1,external:y=!1,index:j,labelWrapperProps:h,labelProps:k,selectedLabelProps:v}=o,O=e(o,["sx","children","label","icon","active","external","index","labelWrapperProps","labelProps","selectedLabelProps"]);const L=r(),w=null!=h?h:{},{sx:N}=w,H=e(w,["sx"]),F=null!=k?k:{},{sx:C}=F,P=e(F,["sx"]),I=null!=v?v:{},{sx:S}=I,W=e(I,["sx"]),z=i(()=>"arrow-new"===u||y?t(l,{}):u,[u,y]);return a(s,Object.assign({sx:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},L.typography.list),{[L.breakpoints.down("lg")]:Object.assign({},g("body","rtl"===L.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"},f&&{height:"2px",backgroundColor:"text.primary"}),"&.Mui-disabled":{color:"disabled.tertiary"}}),p(Object.assign({color:"dark"===L.palette.mode?"onSurface.os300":"onSurface.os700","&&:after":{backgroundColor:"transparent.transparent"},"& .FlowHeaderNavigationLink-label":{opacity:"1"},"& .FlowHeaderNavigationLink-selectedLabel":{opacity:"0"}},f&&{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"}})),c(L)),{"&&:before":{borderRadius:"4px",top:{xs:"0",lg:"2px"},bottom:{xs:"0",lg:"-2px"}}}),d),ref:b,"data-testid":"HeaderNavigationLink"},O,{children:[(x||m)&&a(n,Object.assign({className:"FlowHeaderNavigationLink-labelWrapper",sx:Object.assign({display:"inline-flex",alignItems:"center",justifyContent:"center",textAlign:"center",position:"relative"},N)},H,{children:[t(n,Object.assign({className:"FlowHeaderNavigationLink-label",sx:Object.assign({position:"absolute",left:{xs:"0",lg:"auto"}},C)},P,{children:x||m})),t(n,Object.assign({className:"FlowHeaderNavigationLink-selectedLabel",sx:Object.assign({fontWeight:"700",opacity:"0",position:"relative"},S),"aria-hidden":"true"},W,{children:x||m}))]})),z]}))}),d=o((e,a)=>t(b,Object.assign({ref:a},e)));export{b as HeaderNavigationLink,d as HeaderOverheadItem};
+import{__rest as e}from"tslib";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{forwardRef as o,useMemo as r}from"react";import{useTheme as i,ButtonBase as s,Box as n}from"@mui/material";import{ArrowTopRightIcon as l}from"../icon/stroke/ArrowTopRightIcon.js";import{getFocusRingStyle as c}from"../focusring/focusring.js";import{getInteractiveStyle as p}from"../../materialui/button/interactive.js";import{getTypography as g}from"../../materialui/typography/typography.theme.js";const b=o((o,b)=>{var{sx:d,children:x,label:m,icon:u,active:f=!1,external:y=!1,labelWrapperProps:j,labelProps:h,selectedLabelProps:k}=o,v=e(o,["sx","children","label","icon","active","external","labelWrapperProps","labelProps","selectedLabelProps"]);const L=i(),O=null!=j?j:{},{sx:w}=O,N=e(O,["sx"]),H=null!=h?h:{},{sx:F}=H,C=e(H,["sx"]),P=null!=k?k:{},{sx:I}=P,S=e(P,["sx"]),W=r(()=>"arrow-new"===u||y?t(l,{}):u,[u,y]);return a(s,Object.assign({sx:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},L.typography.list),{[L.breakpoints.down("lg")]:Object.assign({},g("body","rtl"===L.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"},f&&{height:"2px",backgroundColor:"text.primary"}),"&.Mui-disabled":{color:"disabled.tertiary"}}),p(Object.assign({color:"dark"===L.palette.mode?"onSurface.os300":"onSurface.os700","&&:after":{backgroundColor:"transparent.transparent"},"& .FlowHeaderNavigationLink-label":{opacity:"1"},"& .FlowHeaderNavigationLink-selectedLabel":{opacity:"0"}},f&&{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"}})),c(L)),{"&&:before":{borderRadius:"4px",top:{xs:"0",lg:"2px"},bottom:{xs:"0",lg:"-2px"}}}),d),ref:b,"data-testid":"HeaderNavigationLink"},v,{children:[(x||m)&&a(n,Object.assign({className:"FlowHeaderNavigationLink-labelWrapper",sx:Object.assign({display:"inline-flex",alignItems:"center",justifyContent:"center",textAlign:"center",position:"relative"},w)},N,{children:[t(n,Object.assign({className:"FlowHeaderNavigationLink-label",sx:Object.assign({position:"absolute",left:{xs:"0",lg:"auto"}},F)},C,{children:x||m})),t(n,Object.assign({className:"FlowHeaderNavigationLink-selectedLabel",sx:Object.assign({fontWeight:"700",opacity:"0",position:"relative"},I),"aria-hidden":"true"},S,{children:x||m}))]})),W]}))});export{b as HeaderNavigationLink};
 //# sourceMappingURL=HeaderNavigationLink.js.map

package/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":"seA+CO,MAAMA,EAAsDC,EACjE,CACEC,EAaAC,KAbA,IAAAC,GACEA,EAAEC,SACFA,EAAQC,MACRA,EAAKC,KACLA,EAAIC,OACJA,GAAS,EAAKC,SACdA,GAAW,EACXC,MAAOC,EAACC,kBACRA,EAAiBC,WACjBA,EAAUC,mBACVA,GAAkBZ,EACfa,EAAIC,EAAAd,EAXT,oHAeA,MAAMe,EAAQC,IACRC,EAA8CP,QAAAA,EAAqB,IAAjER,GAAIgB,GAAcD,EAAKE,EAAgBL,EAAAG,EAAzC,CAAA,OACAG,EAAgCT,QAAAA,EAAc,IAA5CT,GAAImB,GAAOD,EAAKE,EAASR,EAAAM,EAA3B,CAAA,OACAG,EAAgDX,QAAAA,EAAsB,IAApEV,GAAIsB,GAAeD,EAAKE,EAAiBX,EAAAS,EAA3C,CAAA,OAEAG,EAAWC,EAAQ,IACP,cAATtB,GAAwBE,EAAWqB,EAACC,EAAiB,CAAA,GAAMxB,EACjE,CAACA,EAAME,IAEV,OACEuB,EAACC,iBACC7B,GAAE8B,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACGlB,EAAMmB,WAAWC,MAAI,CACxB,CAACpB,EAAMqB,YAAYC,KAAK,OAAML,OAAAC,OAAA,CAAA,EAEzBK,EAAc,OAA4B,QAApBvB,EAAMwB,UAAqB,UAEtDC,SAAU,WACVC,OAAQ,MAERC,QAAS,CAAEC,GAAI,OAAQC,GAAI,eAC3BC,MAAO,CAAEF,GAAI,OAAQC,GAAI,QACzBE,IAAK,GACLC,WAAY,SACZC,eAAgB,aAChBC,GAAI,CAAEN,GAAI,EAAGC,GAAI,GACjBM,GAAI,CAAEP,GAAI,EAAGC,GAAI,IACjBO,WACE,4JAEF,qBAAsB,CACpBC,SAAU,QAGZ,UAASpB,OAAAC,OAAA,CACPoB,QAAS,CAAEV,GAAI,OAAQC,GAAI,MAC3BJ,SAAU,WACVc,KAAM,IACNC,MAAO,IAEPC,OAAQ,IACRC,OAAQ,MACRC,gBAAiB,2BACbpD,GAAU,CACZmD,OAAQ,MACRC,gBAAiB,iBAIrB,iBAAkB,CAChBC,MAAO,uBAGNC,iBAECD,MAA8B,SAAvB5C,EAAM8C,QAAQC,KAAkB,kBAAoB,kBAC3D,WAAY,CACVJ,gBAAiB,2BAEnB,oCAAqC,CACnCK,QAAS,KAEX,4CAA6C,CAC3CA,QAAS,MAGPzD,GAAU,CACZqD,MAAO,eACP,WAAY,CACVD,gBAAiB,gBAEnB,oCAAqC,CACnCK,QAAS,KAEX,4CAA6C,CAC3CA,QAAS,OAIf,CACEJ,MAAO,eACP,WAAY,CACVD,gBAAiB,gBAEnB,oCAAqC,CACnCK,QAAS,KAEX,4CAA6C,CAC3CA,QAAS,QAIZC,EAAkBjD,IAAM,CAE3B,YAAa,CACXkD,aAAc,MAEdC,IAAK,CAAEvB,GAAI,IAAKC,GAAI,OACpBY,OAAQ,CAAEb,GAAI,IAAKC,GAAI,WAEtB1C,GAELD,IAAKA,EAAsC,cAC/B,wBACRY,EAAI,CAAAV,SAAA,EAENA,GAAYC,IACZ0B,EAACqC,EAAGnC,OAAAC,OAAA,CACFmC,UAAU,wCACVlE,GAAE8B,OAAAC,OAAA,CACAS,QAAS,cACTK,WAAY,SACZC,eAAgB,SAChBqB,UAAW,SACX7B,SAAU,YACPtB,IAEDC,EAAgB,CAAAhB,SAAA,CAEpByB,EAACuC,EAAGnC,OAAAC,OAAA,CACFmC,UAAU,iCACVlE,GAAE8B,OAAAC,OAAA,CACAO,SAAU,WACVc,KAAM,CAAEX,GAAI,IAAKC,GAAI,SAClBvB,IAEDC,EAAS,CAAAnB,SAEZA,GAAYC,KAEfwB,EAACuC,EAAGnC,OAAAC,OAAA,CACFmC,UAAU,yCACVlE,GAAE8B,OAAAC,OAAA,CACAqC,WAAY,MACZP,QAAS,IACTvB,SAAU,YACPhB,GAAe,cAER,QACRC,EAAiB,CAAAtB,SAEpBA,GAAYC,SAIlBsB,QAUI6C,EAAkDxE,EAAW,CAACyE,EAAOvE,IACzE2B,EAAC9B,EAAoBkC,OAAAC,OAAA,CAAChC,IAAKA,GAASuE"}
+{"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/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/components/header/HeaderNavigationMenu.js

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

package/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":"ydAsCO,MAAMA,EAAsDC,EACjE,CACEC,EACAC,SADAC,SAAEA,EAAQC,GAAEA,EAAEC,MAAEA,EAAKC,KAAEA,EAAIC,QAAEA,EAAOC,UAAEA,EAASC,UAAEA,EAASC,cAAEA,EAAaC,uBAAEA,KAA2BC,EAAIC,EAAAZ,EAA1G,CAAA,WAAA,KAAA,QAAA,OAAA,UAAA,YAAA,YAAA,gBAAA,2BAGA,MAAMa,EAAYC,KACXC,EAAQC,GAAaC,EAAS,MAC/BC,EAAQC,IACRC,EAASC,EAAqBH,EAAMI,YAAYC,KAAK,OACrDC,EAAsCf,QAAAA,EAAiB,IAArDN,GAAIsB,GAAUD,EAAKE,EAAYd,EAAAY,EAAjC,CAAA,OAEN,OACEG,eACEC,EAACC,iBACCC,SAAUf,EACVV,KACEA,GACEuB,EAACG,EAAe,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,EAACsB,EAAiBH,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,EAAC6B,EAAQV,OAAAC,OAAA,CACPU,KAAM3C,EACNZ,GAAE4C,OAAAC,OAAA,CAEA,sBAAqBD,OAAAC,OAAA,CAAA,EAChBW,EACD,CACEC,WAAY,OACZC,WAAY,MACZ1B,MAA8B,SAAvBjB,EAAMkB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEuB,WAAY,OACZC,WAAY,MACZ1B,MAAO,mBAIVV,IAEDC,YAEHxB,GAAYK,QAIjBqB,EAACkC,EAAIf,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":"ydAsCO,MAAMA,EAAsDC,EACjE,CACEC,EACAC,SADAC,SAAEA,EAAQC,GAAEA,EAAEC,MAAEA,EAAKC,KAAEA,EAAIC,QAAEA,EAAOC,UAAEA,EAASC,UAAEA,EAASC,cAAEA,EAAaC,uBAAEA,KAA2BC,EAAIC,EAAAZ,EAA1G,CAAA,WAAA,KAAA,QAAA,OAAA,UAAA,YAAA,YAAA,gBAAA,2BAGA,MAAMa,EAAYC,KACXC,EAAQC,GAAaC,EAAS,MAC/BC,EAAQC,IACRC,EAASC,EAAqBH,EAAMI,YAAYC,KAAK,OACrDC,EAAsCf,QAAAA,EAAiB,IAArDN,GAAIsB,GAAUD,EAAKE,EAAYd,EAAAY,EAAjC,CAAA,OAEN,OACEG,eACEC,EAACC,iBACCC,SAAUf,EACVV,KACEA,GACEuB,EAACG,EAAe,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,EAACsB,EAAiBH,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,EAAC2B,EAAQR,OAAAC,OAAA,CACPQ,KAAMzC,EACNZ,GAAE4C,OAAAC,OAAA,CAEA,sBAAqBD,OAAAC,OAAA,CAAA,EAChBS,EACD,CACEC,WAAY,OACZC,WAAY,MACZxB,MAA8B,SAAvBjB,EAAMkB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEqB,WAAY,OACZC,WAAY,MACZxB,MAAO,mBAIVV,IAEDC,YAEHxB,GAAYK,QAIjBqB,EAACgC,EAAIb,OAAAC,OAAA,CAACa,OAAQ9C,EAAQ+C,SAAU/C,EAAQgD,QAAS,IAAM/C,EAAU,OAAWR,YACzEN,GAAYK"}

package/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/components/hotspotCard/HotspotCard.js

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

package/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/components/hotspotCard/index.d.ts

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

package/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/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":"+KAwBO,MAAMA,EAA4BC,EAAW,CAACC,EAAyCC,SAAzCC,KAAEA,EAAIC,UAAEA,EAASC,UAAEA,KAAcC,EAAIC,EAAAN,EAArC,CAAA,OAAA,YAAA,cAEnD,MAAMO,EAAgBC,EAAQ,KAC5B,MAAMC,EAEHP,GAAQQ,EAAgBC,KAAMC,GAAQ,CAACA,EAAIV,QAASU,EAAIC,UAAUC,SAASZ,KAE3EC,GACCO,EAAgBC,KAAMC,GAAQT,EAAUY,MAAM,KAAKC,KAAMC,GAAQ,CAACL,EAAIV,QAASU,EAAIC,UAAUC,SAASG,MAExGP,EAAgBC,KAAMO,GAAuB,oBAAdA,EAAKhB,MACtC,MAAqB,WAAdE,EAAyBK,EAAWU,gBAAkBV,EAAWW,WACvE,CAAClB,EAAMC,EAAWC,IAErB,OACEiB,EAACd,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":"+KAwBO,MAAMA,EAA4BC,EAAW,CAACC,EAAyCC,SAAzCC,KAAEA,EAAIC,UAAEA,EAASC,UAAEA,KAAcC,EAAIC,EAAAN,EAArC,CAAA,OAAA,YAAA,cAEnD,MAAMO,EAAgBC,EAAQ,KAC5B,MAAMC,EAEHP,GAAQQ,EAAgBC,KAAMC,GAAQ,CAACA,EAAIV,QAASU,EAAIC,UAAUC,SAASZ,KAE3EC,GACCO,EAAgBC,KAAMC,GAAQT,EAAUY,MAAM,KAAKC,KAAMC,GAAQ,CAACL,EAAIV,QAASU,EAAIC,UAAUC,SAASG,MAExGP,EAAgBC,KAAMO,GAAuB,oBAAdA,EAAKhB,MACtC,MAAqB,WAAdE,EAAyBK,EAAWU,gBAAkBV,EAAWW,WACvE,CAAClB,EAAMC,EAAWC,IAErB,OACEiB,EAACd,EAAae,OAAAC,OAAA,CACZtB,IAAKA,EAAG,cACI,OACZE,UAAW,CAAC,OAAQA,EAAWD,GAAMsB,OAAOC,SAASC,KAAK,MACtDrB"}