@skodaflow/web-library 8.3.0 → 8.3.2

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 } 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 { sxOverride } from '@/src/utils/sxOverride';\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={sxOverride(\n            {\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            },\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","children","sx","label","extend","tooltipProps","badgeProps","rest","ref","theme","useTheme","title","restTooltip","_jsxs","ButtonBase","sxOverride","typography","list","display","alignItems","justifyContent","gap","py","px","fontSize","color","getInteractiveStyle","fontWeight","getFocusRingStyle","borderRadius","_jsx","Badge","Tooltip","IconButton","size"],"mappings":"mYAqCO,MAAMA,EAAsCC,EACjD,EAAGC,WAAUC,KAAIC,QAAOC,SAAQC,eAAcC,gBAAeC,GAAQC,KACnE,MAAMC,EAAQC,KACRC,MAAEA,KAAUC,GAAgBP,GAAgB,CAAA,EAElD,OAAID,EAEAS,EAACC,GACCZ,GAAIa,EACF,IACKN,EAAMO,WAAWC,KACpBC,QAAS,OACTC,WAAY,SACZC,eAAgB,aAChBC,IAAK,KACLC,GAAI,IACJC,GAAI,KAEJ,qBAAsB,CACpBC,SAAU,QAGZ,iBAAkB,CAChBC,MAAO,wBAGNC,EACD,CACEC,WAAY,OAEd,CACEA,WAAY,WAIbC,EAAkBnB,GACrB,YAAa,CACXoB,aAAc,QAGlB3B,GAEFM,IAAKA,EAAsC,cAC/B,kBACRD,EAAIN,SAAA,CAER6B,EAACC,EAAK,IAAKzB,EAAUL,SAAGA,IACvBE,GAASQ,KAMdmB,EAACE,GAAQrB,MAAOR,GAASQ,KAAWC,WAClCkB,EAACG,GACC/B,GAAIA,EACJgC,KAAK,SACL1B,IAAKA,EAAsC,cAC/B,kBACRD,EAAIN,SAER6B,EAACC,EAAK,IAAKzB,EAAUL,SAAGA"}
+{"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';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { useHeaderContext } from './HeaderContext';\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   * @default provided by HeaderContext\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: propExtend, tooltipProps, badgeProps, ...rest }, ref) => {\n    const theme = useTheme();\n    const headerContext = useHeaderContext();\n    // explicit prop wins over context provided by Header\n    const extend = propExtend ?? headerContext?.extend;\n    const { title, ...restTooltip } = tooltipProps ?? {};\n\n    if (extend) {\n      return (\n        <ButtonBase\n          sx={sxOverride(\n            {\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            },\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","children","sx","label","extend","propExtend","tooltipProps","badgeProps","rest","ref","theme","useTheme","headerContext","useHeaderContext","title","restTooltip","_jsxs","ButtonBase","sxOverride","typography","list","display","alignItems","justifyContent","gap","py","px","fontSize","color","getInteractiveStyle","fontWeight","getFocusRingStyle","borderRadius","_jsx","Badge","Tooltip","IconButton","size"],"mappings":"ybAuCO,MAAMA,EAAsCC,EACjD,EAAGC,WAAUC,KAAIC,QAAOC,OAAQC,EAAYC,eAAcC,gBAAeC,GAAQC,KAC/E,MAAMC,EAAQC,IACRC,EAAgBC,IAEhBT,EAASC,GAAcO,GAAeR,QACtCU,MAAEA,KAAUC,GAAgBT,GAAgB,CAAA,EAElD,OAAIF,EAEAY,EAACC,GACCf,GAAIgB,EACF,IACKR,EAAMS,WAAWC,KACpBC,QAAS,OACTC,WAAY,SACZC,eAAgB,aAChBC,IAAK,KACLC,GAAI,IACJC,GAAI,KAEJ,qBAAsB,CACpBC,SAAU,QAGZ,iBAAkB,CAChBC,MAAO,wBAGNC,EACD,CACEC,WAAY,OAEd,CACEA,WAAY,WAIbC,EAAkBrB,GACrB,YAAa,CACXsB,aAAc,QAGlB9B,GAEFO,IAAKA,EAAsC,cAC/B,kBACRD,EAAIP,SAAA,CAERgC,EAACC,EAAK,IAAK3B,EAAUN,SAAGA,IACvBE,GAASW,KAMdmB,EAACE,GAAQrB,MAAOX,GAASW,KAAWC,WAClCkB,EAACG,GACClC,GAAIA,EACJmC,KAAK,SACL5B,IAAKA,EAAsC,cAC/B,kBACRD,EAAIP,SAERgC,EAACC,EAAK,IAAK3B,EAAUN,SAAGA"}

package/components/header/HeaderContext.d.ts

@@ -0,0 +1,22 @@
+export interface HeaderContextValue {
+    /**
+     * Marks components rendered inside the mobile drawer as extended
+     */
+    extend: boolean;
+}
+/**
+ * Context provided by Header to switch child components between desktop and mobile variant
+ */
+export declare const HeaderContext: import("react").Context<HeaderContextValue>;
+/**
+ * Context value provided to components in Header toolbar
+ */
+export declare const headerDesktopContext: HeaderContextValue;
+/**
+ * Context value provided to components in Header mobile drawer
+ */
+export declare const headerMobileContext: HeaderContextValue;
+/**
+ * Returns HeaderContext value, undefined outside of Header
+ */
+export declare const useHeaderContext: () => HeaderContextValue | undefined;

package/components/header/HeaderContext.js

@@ -0,0 +1,2 @@
+import{createContext as e,useContext as t}from"react";const o=e(void 0),r={extend:!1},d={extend:!0},n=()=>t(o);export{o as HeaderContext,r as headerDesktopContext,d as headerMobileContext,n as useHeaderContext};
+//# sourceMappingURL=HeaderContext.js.map

package/components/header/HeaderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderContext.js","sources":["../../../src/components/header/HeaderContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface HeaderContextValue {\n  /**\n   * Marks components rendered inside the mobile drawer as extended\n   */\n  extend: boolean;\n}\n\n/**\n * Context provided by Header to switch child components between desktop and mobile variant\n */\nexport const HeaderContext = createContext<HeaderContextValue | undefined>(undefined);\n\n/**\n * Context value provided to components in Header toolbar\n */\nexport const headerDesktopContext: HeaderContextValue = { extend: false };\n\n/**\n * Context value provided to components in Header mobile drawer\n */\nexport const headerMobileContext: HeaderContextValue = { extend: true };\n\n/**\n * Returns HeaderContext value, undefined outside of Header\n */\nexport const useHeaderContext = (): HeaderContextValue | undefined => useContext(HeaderContext);\n"],"names":["HeaderContext","createContext","undefined","headerDesktopContext","extend","headerMobileContext","useHeaderContext","useContext"],"mappings":"4DAYaA,EAAgBC,OAA8CC,GAK9DC,EAA2C,CAAEC,QAAQ,GAKrDC,EAA0C,CAAED,QAAQ,GAKpDE,EAAmB,IAAsCC,EAAWP"}

package/components/header/HeaderLanguageSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLanguageSelect.js","sources":["../../../src/components/header/HeaderLanguageSelect.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState } from 'react';\nimport {\n  Menu,\n  MenuItem,\n  Radio,\n  ListItemText,\n  MenuProps,\n  MenuItemProps,\n  RadioProps,\n  ListItemTextProps,\n} from '@mui/material';\nimport { HeaderButton, HeaderButtonProps } from './HeaderButton';\nimport { GlobeIcon } from '@/src/components/icon/stroke/GlobeIcon';\n\ntype HeaderLanguageType = string | { short?: string; full?: string };\n\nexport interface HeaderLanguageSelectProps extends HeaderButtonProps {\n  /**\n   * List of languages\n   */\n  languages?: HeaderLanguageType[];\n  /**\n   * Index of selected language\n   * @default 0\n   */\n  defaultLanguage?: number;\n  /**\n   * Function that is triggered on language change\n   * @param language - provided language\n   * @param index - index of language\n   */\n  onSelect?: (language: HeaderLanguageType, index: number) => void;\n  /**\n   * Props applied to menu\n   */\n  menuProps?: MenuProps;\n  /**\n   * Props applied to each MenuItem, or a factory receiving the item index and language\n   */\n  menuItemProps?: MenuItemProps | ((index: number, language: HeaderLanguageType) => MenuItemProps);\n  /**\n   * Props applied to Radio inside each MenuItem, or a factory receiving the item index and language\n   */\n  radioProps?: RadioProps | ((index: number, language: HeaderLanguageType) => RadioProps);\n  /**\n   * Props applied to ListItemText inside each MenuItem, or a factory receiving the item index and language\n   */\n  listItemTextProps?: ListItemTextProps | ((index: number, language: HeaderLanguageType) => ListItemTextProps);\n}\n\n/**\n * IconButton with menu selector for languages\n */\nexport const HeaderLanguageSelect: FC<HeaderLanguageSelectProps> = forwardRef(\n  (\n    {\n      children,\n      languages,\n      onSelect,\n      defaultLanguage = 0,\n      menuProps,\n      menuItemProps,\n      radioProps,\n      listItemTextProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const [selected, setSelected] = useState(defaultLanguage);\n\n    return (\n      <>\n        <HeaderButton\n          onClick={(e) => setAnchor(e.currentTarget)}\n          ref={ref}\n          data-testid=\"HeaderLanguageSelect\"\n          {...rest}\n        >\n          {children || <GlobeIcon />}\n        </HeaderButton>\n        <Menu open={!!anchor} anchorEl={anchor} onClose={() => setAnchor(null)} {...menuProps}>\n          {languages?.map((lang, idx) => {\n            const isSelected = selected === idx;\n            const value = typeof lang === 'string' ? lang : lang.full;\n            const resolvedMenuItemProps = typeof menuItemProps === 'function' ? menuItemProps(idx, lang) : menuItemProps;\n            const resolvedRadioProps = typeof radioProps === 'function' ? radioProps(idx, lang) : radioProps;\n            const resolvedListItemTextProps =\n              typeof listItemTextProps === 'function' ? listItemTextProps(idx, lang) : listItemTextProps;\n\n            return (\n              <MenuItem\n                key={value}\n                selected={isSelected}\n                onClick={() => {\n                  onSelect?.(lang, idx);\n                  setSelected(idx);\n                }}\n                {...resolvedMenuItemProps}\n              >\n                <Radio checked={isSelected} tabIndex={-1} {...resolvedRadioProps} />\n                <ListItemText {...resolvedListItemTextProps}>{value}</ListItemText>\n              </MenuItem>\n            );\n          })}\n        </Menu>\n      </>\n    );\n  },\n);\n"],"names":["HeaderLanguageSelect","forwardRef","children","languages","onSelect","defaultLanguage","menuProps","menuItemProps","radioProps","listItemTextProps","rest","ref","anchor","setAnchor","useState","selected","setSelected","_jsxs","_Fragment","_jsx","HeaderButton","onClick","e","currentTarget","GlobeIcon","Menu","open","anchorEl","onClose","map","lang","idx","isSelected","value","full","resolvedMenuItemProps","resolvedRadioProps","resolvedListItemTextProps","MenuItem","Radio","checked","tabIndex","ListItemText"],"mappings":"0SAqDO,MAAMA,EAAsDC,EACjE,EAEIC,WACAC,YACAC,WACAC,kBAAkB,EAClBC,YACAC,gBACAC,aACAC,uBACGC,GAELC,KAEA,MAAOC,EAAQC,GAAaC,EAAS,OAC9BC,EAAUC,GAAeF,EAAST,GAEzC,OACEY,EAAAC,EAAA,CAAAhB,SAAA,CACEiB,EAACC,GACCC,QAAUC,GAAMT,EAAUS,EAAEC,eAC5BZ,IAAKA,gBACO,0BACRD,EAAIR,SAEPA,GAAYiB,EAACK,QAEhBL,EAACM,EAAI,CAACC,OAAQd,EAAQe,SAAUf,EAAQgB,QAAS,IAAMf,EAAU,SAAWP,WACzEH,GAAW0B,IAAI,CAACC,EAAMC,KACrB,MAAMC,EAAajB,IAAagB,EAC1BE,EAAwB,iBAATH,EAAoBA,EAAOA,EAAKI,KAC/CC,EAAiD,mBAAlB5B,EAA+BA,EAAcwB,EAAKD,GAAQvB,EACzF6B,EAA2C,mBAAf5B,EAA4BA,EAAWuB,EAAKD,GAAQtB,EAChF6B,EACyB,mBAAtB5B,EAAmCA,EAAkBsB,EAAKD,GAAQrB,EAE3E,OACEQ,EAACqB,EAAQ,CAEPvB,SAAUiB,EACVX,QAAS,KACPjB,IAAW0B,EAAMC,GACjBf,EAAYe,OAEVI,EAAqBjC,SAAA,CAEzBiB,EAACoB,EAAK,CAACC,QAASR,EAAYS,UAAU,KAAQL,IAC9CjB,EAACuB,EAAY,IAAKL,EAAyBnC,SAAG+B,MATzCA"}
+{"version":3,"file":"HeaderLanguageSelect.js","sources":["../../../src/components/header/HeaderLanguageSelect.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState } from 'react';\nimport {\n  Menu,\n  MenuItem,\n  Radio,\n  ListItemText,\n  MenuProps,\n  MenuItemProps,\n  RadioProps,\n  ListItemTextProps,\n} from '@mui/material';\nimport { HeaderButton, HeaderButtonProps } from './HeaderButton';\nimport { GlobeIcon } from '@/src/components/icon/stroke/GlobeIcon';\n\ntype HeaderLanguageType = string | { short?: string; full?: string };\n\nexport interface HeaderLanguageSelectProps extends HeaderButtonProps {\n  /**\n   * List of languages\n   */\n  languages?: HeaderLanguageType[];\n  /**\n   * Index of selected language\n   * @default 0\n   */\n  defaultLanguage?: number;\n  /**\n   * Function that is triggered on language change\n   * @param language - provided language\n   * @param index - index of language\n   */\n  onSelect?: (language: HeaderLanguageType, index: number) => void;\n  /**\n   * Props applied to menu\n   */\n  menuProps?: MenuProps;\n  /**\n   * Props applied to each MenuItem, or a factory receiving the item index and language\n   */\n  menuItemProps?: MenuItemProps | ((index: number, language: HeaderLanguageType) => MenuItemProps);\n  /**\n   * Props applied to Radio inside each MenuItem, or a factory receiving the item index and language\n   */\n  radioProps?: RadioProps | ((index: number, language: HeaderLanguageType) => RadioProps);\n  /**\n   * Props applied to ListItemText inside each MenuItem, or a factory receiving the item index and language\n   */\n  listItemTextProps?: ListItemTextProps | ((index: number, language: HeaderLanguageType) => ListItemTextProps);\n}\n\n/**\n * IconButton with menu selector for languages\n */\nexport const HeaderLanguageSelect: FC<HeaderLanguageSelectProps> = forwardRef(\n  (\n    {\n      children,\n      languages,\n      onSelect,\n      defaultLanguage = 0,\n      menuProps,\n      menuItemProps,\n      radioProps,\n      listItemTextProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const [selected, setSelected] = useState(defaultLanguage);\n\n    return (\n      <>\n        <HeaderButton\n          onClick={(e) => setAnchor(e.currentTarget)}\n          ref={ref}\n          data-testid=\"HeaderLanguageSelect\"\n          {...rest}\n        >\n          {children || <GlobeIcon />}\n        </HeaderButton>\n        <Menu open={!!anchor} anchorEl={anchor} onClose={() => setAnchor(null)} {...menuProps}>\n          {languages?.map((lang, idx) => {\n            const isSelected = selected === idx;\n            const value = typeof lang === 'string' ? lang : lang.full;\n            const resolvedMenuItemProps =\n              typeof menuItemProps === 'function' ? menuItemProps(idx, lang) : menuItemProps;\n            const resolvedRadioProps = typeof radioProps === 'function' ? radioProps(idx, lang) : radioProps;\n            const resolvedListItemTextProps =\n              typeof listItemTextProps === 'function' ? listItemTextProps(idx, lang) : listItemTextProps;\n\n            return (\n              <MenuItem\n                key={value}\n                selected={isSelected}\n                onClick={() => {\n                  onSelect?.(lang, idx);\n                  setSelected(idx);\n                }}\n                {...resolvedMenuItemProps}\n              >\n                <Radio checked={isSelected} tabIndex={-1} {...resolvedRadioProps} />\n                <ListItemText {...resolvedListItemTextProps}>{value}</ListItemText>\n              </MenuItem>\n            );\n          })}\n        </Menu>\n      </>\n    );\n  },\n);\n"],"names":["HeaderLanguageSelect","forwardRef","children","languages","onSelect","defaultLanguage","menuProps","menuItemProps","radioProps","listItemTextProps","rest","ref","anchor","setAnchor","useState","selected","setSelected","_jsxs","_Fragment","_jsx","HeaderButton","onClick","e","currentTarget","GlobeIcon","Menu","open","anchorEl","onClose","map","lang","idx","isSelected","value","full","resolvedMenuItemProps","resolvedRadioProps","resolvedListItemTextProps","MenuItem","Radio","checked","tabIndex","ListItemText"],"mappings":"0SAqDO,MAAMA,EAAsDC,EACjE,EAEIC,WACAC,YACAC,WACAC,kBAAkB,EAClBC,YACAC,gBACAC,aACAC,uBACGC,GAELC,KAEA,MAAOC,EAAQC,GAAaC,EAAS,OAC9BC,EAAUC,GAAeF,EAAST,GAEzC,OACEY,EAAAC,EAAA,CAAAhB,SAAA,CACEiB,EAACC,GACCC,QAAUC,GAAMT,EAAUS,EAAEC,eAC5BZ,IAAKA,gBACO,0BACRD,EAAIR,SAEPA,GAAYiB,EAACK,QAEhBL,EAACM,EAAI,CAACC,OAAQd,EAAQe,SAAUf,EAAQgB,QAAS,IAAMf,EAAU,SAAWP,WACzEH,GAAW0B,IAAI,CAACC,EAAMC,KACrB,MAAMC,EAAajB,IAAagB,EAC1BE,EAAwB,iBAATH,EAAoBA,EAAOA,EAAKI,KAC/CC,EACqB,mBAAlB5B,EAA+BA,EAAcwB,EAAKD,GAAQvB,EAC7D6B,EAA2C,mBAAf5B,EAA4BA,EAAWuB,EAAKD,GAAQtB,EAChF6B,EACyB,mBAAtB5B,EAAmCA,EAAkBsB,EAAKD,GAAQrB,EAE3E,OACEQ,EAACqB,EAAQ,CAEPvB,SAAUiB,EACVX,QAAS,KACPjB,IAAW0B,EAAMC,GACjBf,EAAYe,OAEVI,EAAqBjC,SAAA,CAEzBiB,EAACoB,EAAK,CAACC,QAASR,EAAYS,UAAU,KAAQL,IAC9CjB,EAACuB,EAAY,IAAKL,EAAyBnC,SAAG+B,MATzCA"}

package/components/header/HeaderLogo.d.ts

@@ -1,6 +1,6 @@
 import { FC, ElementType } from 'react';
 import { LinkProps } from '@mui/material';
-import { LogoProps } from '@/src/components/logo/Logo';
+import { LogoProps } from '../logo/Logo';
 export interface HeaderLogoProps extends LinkProps<ElementType> {
     /**
      * Properties applied to Logo component

package/components/header/HeaderLogo.js

@@ -1,2 +1,2 @@
-import{jsx as o,Fragment as r}from"react/jsx-runtime";import{forwardRef as i}from"react";import{useTheme as e,Link as s}from"@mui/material";import{Logo as t}from"../logo/Logo.js";import{getFocusRingStyle as l}from"../focusring/focusring.js";import{sxOverride as m}from"../../utils/sxOverride/sxOverride.js";const c=i(({sx:i,children:c,href:n,logoProps:f,...p},a)=>{const u=e();return n||p.onClick?o(s,{sx:m({display:"block",position:"relative",py:1,...l(u),"&.Mui-focusVisible":{boxShadow:"none"},"& .MuiSvgIcon-root":{display:"block"}},i),href:n||"#",ref:a,"aria-label":"Home",...p,children:c||o(t,{...f})}):o(r,{children:c||o(t,{sx:i,ref:a,...f})})});export{c as HeaderLogo};
+import{jsx as o,Fragment as r}from"react/jsx-runtime";import{forwardRef as i}from"react";import{useTheme as e,Link as s}from"@mui/material";import{Logo as n}from"../logo/Logo.js";import{getFocusRingStyle as t}from"../focusring/focusring.js";import{sxOverride as l}from"../../utils/sxOverride/sxOverride.js";const m=i(({sx:i,children:m,href:c,logoProps:f,...p},a)=>{const u=e();return c||p.onClick?o(s,{sx:l({display:"block",position:"relative",py:1,...t(u),"&.Mui-focusVisible":{boxShadow:"none"},"& .MuiSvgIcon-root":{display:"block"}},i),underline:"none",href:c||"#",ref:a,"aria-label":"Home",...p,children:m||o(n,{...f})}):o(r,{children:m||o(n,{sx:i,ref:a,...f})})});export{m 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, ElementType } from 'react';\nimport { Link, LinkProps, useTheme } from '@mui/material';\nimport { Logo, LogoProps } from '@/src/components/logo/Logo';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface HeaderLogoProps extends LinkProps<ElementType> {\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={sxOverride(\n          {\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          sx,\n        )}\n        href={href || '#'}\n        ref={ref as ForwardedRef<HTMLAnchorElement>}\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","sx","children","href","logoProps","rest","ref","theme","useTheme","onClick","_jsx","Link","sxOverride","display","position","py","getFocusRingStyle","boxShadow","Logo"],"mappings":"yTAgBaA,EAAkCC,EAAW,EAAGC,KAAIC,WAAUC,OAAMC,eAAcC,GAAQC,KACrG,MAAMC,EAAQC,IAEd,OAAIL,GAAQE,EAAKI,QAEbC,EAACC,GACCV,GAAIW,EACF,CAEEC,QAAS,QACTC,SAAU,WACVC,GAAI,KAEDC,EAAkBT,GAErB,qBAAsB,CACpBU,UAAW,QAEb,qBAAsB,CACpBJ,QAAS,UAGbZ,GAEFE,KAAMA,GAAQ,IACdG,IAAKA,EAAsC,aAChC,UACPD,EAAIH,SAEPA,GAAYQ,EAACQ,EAAI,IAAKd,MAItBM,cAAGR,GAAYQ,EAACQ,GAAKjB,GAAIA,EAAIK,IAAKA,KAAmDF"}
+{"version":3,"file":"HeaderLogo.js","sources":["../../../src/components/header/HeaderLogo.tsx"],"sourcesContent":["import React, { FC, ForwardedRef, forwardRef, ElementType } from 'react';\nimport { Link, LinkProps, useTheme } from '@mui/material';\nimport { Logo, LogoProps } from '@/src/components/logo/Logo';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface HeaderLogoProps extends LinkProps<ElementType> {\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={sxOverride(\n          {\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          sx,\n        )}\n        underline=\"none\"\n        href={href || '#'}\n        ref={ref as ForwardedRef<HTMLAnchorElement>}\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","sx","children","href","logoProps","rest","ref","theme","useTheme","onClick","_jsx","Link","sxOverride","display","position","py","getFocusRingStyle","boxShadow","underline","Logo"],"mappings":"yTAgBaA,EAAkCC,EAAW,EAAGC,KAAIC,WAAUC,OAAMC,eAAcC,GAAQC,KACrG,MAAMC,EAAQC,IAEd,OAAIL,GAAQE,EAAKI,QAEbC,EAACC,GACCV,GAAIW,EACF,CAEEC,QAAS,QACTC,SAAU,WACVC,GAAI,KAEDC,EAAkBT,GAErB,qBAAsB,CACpBU,UAAW,QAEb,qBAAsB,CACpBJ,QAAS,UAGbZ,GAEFiB,UAAU,OACVf,KAAMA,GAAQ,IACdG,IAAKA,EAAsC,aAChC,UACPD,EAAIH,SAEPA,GAAYQ,EAACS,EAAI,IAAKf,MAItBM,cAAGR,GAAYQ,EAACS,GAAKlB,GAAIA,EAAIK,IAAKA,KAAmDF"}

package/components/header/HeaderNavigationHero.d.ts

@@ -31,7 +31,7 @@ export interface HeaderNavigationHeroProps extends HeaderNavigationLinkProps {
     /**
      * Props applied to Collapse component
      */
-    collapseProp?: CollapseProps;
+    collapseProps?: CollapseProps;
     /**
      * Props applied to Portal if disableBackdrop property is not provided
      */

package/components/header/HeaderNavigationHero.js

@@ -1,2 +1,2 @@
-import{jsxs as r,Fragment as o,jsx as e}from"react/jsx-runtime";import{forwardRef as t,useRef as n,useState as i}from"react";import{useTheme as a,useMediaQuery as s,ClickAwayListener as c,Box as d,Collapse as l,Container as p,Portal as x,Backdrop as m}from"@mui/material";import{sxOverride as u}from"../../utils/sxOverride/sxOverride.js";import{ChevronDownIcon as f}from"../icon/stroke/ChevronDownIcon.js";import{HeaderNavigationLink as g}from"./HeaderNavigationLink.js";const h=t(({children:t,sx:h,label:v,icon:k,extend:b,inContainer:C=!1,disableBackdrop:w=!1,onClick:y,clickAwayListenerProps:P,contentProps:H,wrapperProps:j,containerProps:S,collapseProps:z,portalProps:I,backdropProps:A,...B},L)=>{const N=n(null),[O,$]=i(!1),D=a(),W=s(D.breakpoints.down("lg")),q=void 0===b?W:b,{sx:E,...F}=A??{},{sx:G,...J}=j??{},{sx:K,...M}=H??{};return r(o,{children:[e(g,{active:O,extend:b,icon:k||e(f,{sx:{"&&&":{fontSize:void 0===b?{xs:"20px",lg:"14px"}:["20px","14px"][+!b]},color:void 0===b?{xs:"dark"===D.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"}:["dark"===D.palette.mode?"onSurface.os300":"onSurface.os700","currentColor"][+!b],transform:`rotate(${O?"180":"0"}deg)`,transition:void 0===b?{xs:D.transitions.create("transform",{duration:D.transitions.duration.shortest}),lg:"none"}:[D.transitions.create("transform",{duration:D.transitions.duration.shortest}),"none"][+!b]}}),onClick:r=>{y?.(r),$(r=>!r)},sx:u({justifyContent:void 0===b?{xs:"space-between",lg:"flex-start"}:["space-between","flex-start"][+!b]},h),ref:L??N,"data-testid":"HeaderNavigationHero",...B,children:v}),e(c,{onClickAway:r=>!(L??N)?.current?.contains(r?.target)&&$(!1),...P,children:e(d,{sx:u({position:void 0===b?{xs:"static",lg:"absolute"}:["static","absolute"][+!b],zIndex:"10",left:"0",right:"0",top:D.mixins.toolbar.minHeight,maxHeight:`calc(100vh - ${D.mixins.toolbar.minHeight})`,overflow:"auto"},G),...J,children:e(l,{in:O,...z,children:e(d,{sx:u({backgroundColor:void 0===b?{xs:"unset",lg:"dark"===D.palette.mode?"surface.primary":"background.primary"}:["unset","dark"===D.palette.mode?"surface.primary":"background.primary"][+!b],py:void 0===b?{xs:0,lg:2}:[0,2][+!b],px:void 0===b?{xs:1,lg:2}:[1,2][+!b],...C&&{px:0}},K),...M,children:C?e(p,{maxWidth:"xl",...S,children:t}):t})})})}),!w&&!q&&e(x,{...I,children:e(m,{open:O,sx:u({zIndex:D.zIndex.appBar-50},E),...F})})]})});export{h as HeaderNavigationHero};
+import{jsxs as r,Fragment as o,jsx as e}from"react/jsx-runtime";import{forwardRef as t,useRef as n,useState as i}from"react";import{useTheme as a,useMediaQuery as s,ClickAwayListener as d,Box as c,Collapse as l,Container as p,Portal as x,Backdrop as m}from"@mui/material";import{sxOverride as u}from"../../utils/sxOverride/sxOverride.js";import{ChevronDownIcon as f}from"../icon/stroke/ChevronDownIcon.js";import{HeaderNavigationLink as g}from"./HeaderNavigationLink.js";import{useHeaderContext as h}from"./HeaderContext.js";const v=t(({children:t,sx:v,label:k,icon:b,extend:C,inContainer:w=!1,disableBackdrop:y=!1,onClick:H,clickAwayListenerProps:P,contentProps:j,wrapperProps:S,containerProps:z,collapseProps:I,portalProps:A,backdropProps:B,...L},N)=>{const O=n(null),[$,D]=i(!1),W=a(),q=h(),E=C??q?.extend,F=s(W.breakpoints.down("lg")),G=void 0===E?F:E,{sx:J,...K}=B??{},{sx:M,...Q}=S??{},{sx:R,...T}=j??{};return r(o,{children:[e(g,{active:$,extend:E,icon:b||e(f,{sx:{"&&&":{fontSize:void 0===E?{xs:"20px",lg:"14px"}:["20px","14px"][+!E]},color:void 0===E?{xs:"dark"===W.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"}:["dark"===W.palette.mode?"onSurface.os300":"onSurface.os700","currentColor"][+!E],transform:`rotate(${$?"180":"0"}deg)`,transition:void 0===E?{xs:W.transitions.create("transform",{duration:W.transitions.duration.shortest}),lg:"none"}:[W.transitions.create("transform",{duration:W.transitions.duration.shortest}),"none"][+!E]}}),onClick:r=>{H?.(r),D(r=>!r)},sx:u({justifyContent:void 0===E?{xs:"space-between",lg:"flex-start"}:["space-between","flex-start"][+!E]},v),ref:N??O,"data-testid":"HeaderNavigationHero",...L,children:k}),e(d,{onClickAway:r=>!(N??O)?.current?.contains(r?.target)&&D(!1),...P,children:e(c,{sx:u({position:void 0===E?{xs:"static",lg:"absolute"}:["static","absolute"][+!E],zIndex:"10",left:"0",right:"0",top:W.mixins.toolbar.minHeight,maxHeight:`calc(100vh - ${W.mixins.toolbar.minHeight})`,overflow:"auto"},M),...Q,children:e(l,{in:$,...I,children:e(c,{sx:u({backgroundColor:void 0===E?{xs:"unset",lg:"dark"===W.palette.mode?"surface.primary":"background.primary"}:["unset","dark"===W.palette.mode?"surface.primary":"background.primary"][+!E],py:void 0===E?{xs:0,lg:2}:[0,2][+!E],px:void 0===E?{xs:1,lg:2}:[1,2][+!E],...w&&{px:0}},R),...T,children:w?e(p,{maxWidth:"xl",...z,children:t}):t})})})}),!y&&!G&&e(x,{...A,children:e(m,{open:$,sx:u({zIndex:W.zIndex.appBar-50},J),...K})})]})});export{v 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, 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 { sxOverride } from '@/src/utils/sxOverride';\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      extend,\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(null);\n    const [open, setOpen] = useState(false);\n    const theme = useTheme();\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const mobile = extend === undefined ? downLg : extend;\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          extend={extend}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  '&&&': {\n                    fontSize: extend === undefined ? { xs: '20px', lg: '14px' } : ['20px', '14px'][+!extend],\n                  },\n                  color:\n                    extend === undefined\n                      ? {\n                          xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                          lg: 'currentColor',\n                        }\n                      : [theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700', 'currentColor'][\n                          +!extend\n                        ],\n                  transform: `rotate(${open ? '180' : '0'}deg)`,\n                  transition:\n                    extend === undefined\n                      ? {\n                          xs: theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          lg: 'none',\n                        }\n                      : [\n                          theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          'none',\n                        ][+!extend],\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setOpen((prev) => !prev);\n          }}\n          sx={sxOverride(\n            {\n              justifyContent:\n                extend === undefined\n                  ? { xs: 'space-between', lg: 'flex-start' }\n                  : ['space-between', 'flex-start'][+!extend],\n            },\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={sxOverride(\n              {\n                position: extend === undefined ? { xs: 'static', lg: 'absolute' } : ['static', 'absolute'][+!extend],\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              },\n              wrapperSx,\n            )}\n            {...restWrapper}\n          >\n            <Collapse in={open} {...collapseProps}>\n              <Box\n                sx={sxOverride(\n                  {\n                    backgroundColor:\n                      extend === undefined\n                        ? {\n                            xs: 'unset',\n                            lg: theme.palette.mode === 'dark' ? 'surface.primary' : 'background.primary',\n                          }\n                        : ['unset', theme.palette.mode === 'dark' ? 'surface.primary' : 'background.primary'][+!extend],\n                    py: extend === undefined ? { xs: 0, lg: 2 } : [0, 2][+!extend],\n                    px: extend === undefined ? { xs: 1, lg: 2 } : [1, 2][+!extend],\n                    ...(inContainer && {\n                      px: 0,\n                    }),\n                  },\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 && !mobile && (\n          <Portal {...portalProps}>\n            <Backdrop open={open} sx={sxOverride({ zIndex: theme.zIndex.appBar - 50 }, backdropSx)} {...restBackdrop} />\n          </Portal>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["HeaderNavigationHero","forwardRef","children","sx","label","icon","extend","inContainer","disableBackdrop","onClick","clickAwayListenerProps","contentProps","wrapperProps","containerProps","collapseProps","portalProps","backdropProps","rest","ref","buttonRef","useRef","open","setOpen","useState","theme","useTheme","downLg","useMediaQuery","breakpoints","down","mobile","undefined","backdropSx","restBackdrop","wrapperSx","restWrapper","contentSx","restContent","_jsxs","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","sxOverride","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 { sxOverride } from '@/src/utils/sxOverride';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\nimport { useHeaderContext } from './HeaderContext';\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  collapseProps?: 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      extend: propExtend,\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(null);\n    const [open, setOpen] = useState(false);\n    const theme = useTheme();\n    const headerContext = useHeaderContext();\n    const extend = propExtend ?? headerContext?.extend;\n    // media query fallback only for standalone usage outside of Header\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const mobile = extend === undefined ? downLg : extend;\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          extend={extend}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  '&&&': {\n                    fontSize: extend === undefined ? { xs: '20px', lg: '14px' } : ['20px', '14px'][+!extend],\n                  },\n                  color:\n                    extend === undefined\n                      ? {\n                          xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                          lg: 'currentColor',\n                        }\n                      : [theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700', 'currentColor'][\n                          +!extend\n                        ],\n                  transform: `rotate(${open ? '180' : '0'}deg)`,\n                  transition:\n                    extend === undefined\n                      ? {\n                          xs: theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          lg: 'none',\n                        }\n                      : [\n                          theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          'none',\n                        ][+!extend],\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setOpen((prev) => !prev);\n          }}\n          sx={sxOverride(\n            {\n              justifyContent:\n                extend === undefined\n                  ? { xs: 'space-between', lg: 'flex-start' }\n                  : ['space-between', 'flex-start'][+!extend],\n            },\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={sxOverride(\n              {\n                position: extend === undefined ? { xs: 'static', lg: 'absolute' } : ['static', 'absolute'][+!extend],\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              },\n              wrapperSx,\n            )}\n            {...restWrapper}\n          >\n            <Collapse in={open} {...collapseProps}>\n              <Box\n                sx={sxOverride(\n                  {\n                    backgroundColor:\n                      extend === undefined\n                        ? {\n                            xs: 'unset',\n                            lg: theme.palette.mode === 'dark' ? 'surface.primary' : 'background.primary',\n                          }\n                        : ['unset', theme.palette.mode === 'dark' ? 'surface.primary' : 'background.primary'][+!extend],\n                    py: extend === undefined ? { xs: 0, lg: 2 } : [0, 2][+!extend],\n                    px: extend === undefined ? { xs: 1, lg: 2 } : [1, 2][+!extend],\n                    ...(inContainer && {\n                      px: 0,\n                    }),\n                  },\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 && !mobile && (\n          <Portal {...portalProps}>\n            <Backdrop open={open} sx={sxOverride({ zIndex: theme.zIndex.appBar - 50 }, backdropSx)} {...restBackdrop} />\n          </Portal>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["HeaderNavigationHero","forwardRef","children","sx","label","icon","extend","propExtend","inContainer","disableBackdrop","onClick","clickAwayListenerProps","contentProps","wrapperProps","containerProps","collapseProps","portalProps","backdropProps","rest","ref","buttonRef","useRef","open","setOpen","useState","theme","useTheme","headerContext","useHeaderContext","downLg","useMediaQuery","breakpoints","down","mobile","undefined","backdropSx","restBackdrop","wrapperSx","restWrapper","contentSx","restContent","_jsxs","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","sxOverride","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

@@ -21,6 +21,7 @@ export interface HeaderNavigationLinkProps extends ButtonBaseProps<ElementType>
     icon?: ReactNode;
     /**
      * Change link into extended mobile version
+     * @default provided by HeaderContext
      */
     extend?: boolean;
     /**

package/components/header/HeaderNavigationLink.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as t,useMemo as a}from"react";import{useTheme as r,ButtonBase as i,Box as l}from"@mui/material";import{sxOverride as n}from"../../utils/sxOverride/sxOverride.js";import{ArrowTopRightIcon as s}from"../icon/stroke/ArrowTopRightIcon.js";import{getFocusRingStyle as d}from"../focusring/focusring.js";import{getInteractiveStyle as p}from"../../materialui/button/interactive.js";import{getTypography as c}from"../../materialui/typography/typography.theme.js";const x=t(({sx:t,children:x,label:g,icon:m,active:u=!1,external:b=!1,extend:f,labelWrapperProps:v,labelProps:y,selectedLabelProps:h,...k},L)=>{const w=r(),{sx:N,...H}=v??{},{sx:F,...j}=y??{},{sx:C,...I}=h??{},S=a(()=>b?e(s,{}):m,[m,b]);return o(i,{sx:n({...w.typography.list,...void 0===f?{[w.breakpoints.down("lg")]:{...c("body","rtl"===w.direction,"large")}}:[{"&&":{...c("body","rtl"===w.direction,"large")}},{}][+!f],position:"relative",zIndex:"100",display:void 0===f?{xs:"flex",lg:"inline-flex"}:["flex","inline-flex"][+!f],width:void 0===f?{xs:"100%",lg:"auto"}:["100%","auto"][+!f],gap:.5,alignItems:"center",justifyContent:"flex-start",py:void 0===f?{xs:2,lg:1}:[2,1][+!f],px:void 0===f?{xs:1,lg:.5}:[1,.5][+!f],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":{content:void 0===f?{xs:"none",lg:'""'}:["none",'""'][+!f],position:"absolute",left:"0",right:"0",bottom:"0",height:"1px",backgroundColor:"transparent.transparent",...u&&{height:"2px",backgroundColor:"text.primary"}},"&.Mui-disabled":{color:"disabled.tertiary"},...p({color:"dark"===w.palette.mode?"onSurface.os300":"onSurface.os700","&&:after":{backgroundColor:"transparent.transparent"},"& .FlowHeaderNavigationLink-label":{opacity:"1"},"& .FlowHeaderNavigationLink-selectedLabel":{opacity:"0"},...u&&{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"}}),...d(w),"&&:before":{borderRadius:"4px",top:void 0===f?{xs:"0",lg:"2px"}:["0","2px"][+!f],bottom:void 0===f?{xs:"0",lg:"-2px"}:["0","-2px"][+!f]}},t),ref:L,"data-testid":"HeaderNavigationLink",...k,children:[(x||g)&&o(l,{className:"FlowHeaderNavigationLink-labelWrapper",sx:n({display:"inline-flex",alignItems:"center",justifyContent:"center",textAlign:"center",position:"relative"},N),...H,children:[e(l,{className:"FlowHeaderNavigationLink-label",sx:n({position:"absolute",left:void 0===f?{xs:"0",lg:"auto"}:["0","auto"][+!f]},F),...j,children:x||g}),e(l,{className:"FlowHeaderNavigationLink-selectedLabel",sx:n({fontWeight:"700",opacity:"0",position:"relative"},C),"aria-hidden":"true",...I,children:x||g})]}),S]})});export{x as HeaderNavigationLink};
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as t,useMemo as i}from"react";import{useTheme as r,ButtonBase as a,Box as l}from"@mui/material";import{sxOverride as n}from"../../utils/sxOverride/sxOverride.js";import{ArrowTopRightIcon as s}from"../icon/stroke/ArrowTopRightIcon.js";import{getFocusRingStyle as d}from"../focusring/focusring.js";import{getInteractiveStyle as p}from"../../materialui/button/interactive.js";import{getTypography as c}from"../../materialui/typography/typography.theme.js";import{useHeaderContext as x}from"./HeaderContext.js";const g=t(({sx:t,children:g,label:m,icon:u,active:b=!1,external:f=!1,extend:v,labelWrapperProps:y,labelProps:h,selectedLabelProps:k,...L},w)=>{const N=r(),H=x(),j=v??H?.extend,{sx:F,...C}=y??{},{sx:I,...S}=h??{},{sx:P,...W}=k??{},z=i(()=>f?e(s,{}):u,[u,f]);return o(a,{sx:n({...N.typography.list,...void 0===j?{[N.breakpoints.down("lg")]:{...c("body","rtl"===N.direction,"large")}}:[{"&&":{...c("body","rtl"===N.direction,"large")}},{}][+!j],position:"relative",zIndex:"100",display:void 0===j?{xs:"flex",lg:"inline-flex"}:["flex","inline-flex"][+!j],width:void 0===j?{xs:"100%",lg:"auto"}:["100%","auto"][+!j],gap:.5,alignItems:"center",justifyContent:"flex-start",py:void 0===j?{xs:2,lg:1}:[2,1][+!j],px:void 0===j?{xs:1,lg:.5}:[1,.5][+!j],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":{content:void 0===j?{xs:"none",lg:'""'}:["none",'""'][+!j],position:"absolute",left:"0",right:"0",bottom:"0",height:"1px",backgroundColor:"transparent",...b&&{height:"2px",backgroundColor:"text.primary"}},"&.Mui-disabled":{color:"disabled.tertiary"},...p({color:"dark"===N.palette.mode?"onSurface.os300":"onSurface.os700","&&:after":{backgroundColor:"transparent"},"& .FlowHeaderNavigationLink-label":{opacity:"1"},"& .FlowHeaderNavigationLink-selectedLabel":{opacity:"0"},...b&&{color:"text.primary","&&:after":{backgroundColor:"text.primary"},"& .FlowHeaderNavigationLink-label":{opacity:"0"},"& .FlowHeaderNavigationLink-selectedLabel":{opacity:"1"}}},{color:"text.primary","&&:after":{backgroundColor:"text.primary"},"& .FlowHeaderNavigationLink-label":{opacity:"0"},"& .FlowHeaderNavigationLink-selectedLabel":{opacity:"1"}}),...d(N),"&&:before":{borderRadius:"4px",top:void 0===j?{xs:"0",lg:"2px"}:["0","2px"][+!j],bottom:void 0===j?{xs:"0",lg:"-2px"}:["0","-2px"][+!j]}},t),ref:w,"data-testid":"HeaderNavigationLink",...L,children:[(g||m)&&o(l,{className:"FlowHeaderNavigationLink-labelWrapper",sx:n({display:"inline-flex",alignItems:"center",justifyContent:"center",textAlign:"center",position:"relative"},F),...C,children:[e(l,{className:"FlowHeaderNavigationLink-label",sx:n({position:"absolute",left:void 0===j?{xs:"0",lg:"auto"}:["0","auto"][+!j]},I),...S,children:g||m}),e(l,{className:"FlowHeaderNavigationLink-selectedLabel",sx:n({fontWeight:"700",opacity:"0",position:"relative"},P),"aria-hidden":"true",...W,children:g||m})]}),z]})});export{g 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 { sxOverride } from '@/src/utils/sxOverride';\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;\n  /**\n   * Change link into extended mobile version\n   */\n  extend?: boolean;\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      extend,\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    const linkIcon = useMemo(() => {\n      return external ? <ArrowTopRightIcon /> : icon;\n    }, [icon, external]);\n\n    return (\n      <ButtonBase\n        sx={sxOverride(\n          {\n            ...theme.typography.list,\n            ...(extend === undefined\n              ? {\n                  [theme.breakpoints.down('lg')]: {\n                    // switch to 'large body' typography according to Figma\n                    ...getTypography('body', theme.direction === 'rtl', 'large'),\n                  },\n                }\n              : [\n                  {\n                    '&&': {\n                      ...getTypography('body', theme.direction === 'rtl', 'large'),\n                    },\n                  },\n                  {},\n                ][+!extend]),\n            position: 'relative',\n            zIndex: '100',\n            // icon and text next to each other\n            display: extend === undefined ? { xs: 'flex', lg: 'inline-flex' } : ['flex', 'inline-flex'][+!extend],\n            width: extend === undefined ? { xs: '100%', lg: 'auto' } : ['100%', 'auto'][+!extend],\n            gap: 0.5,\n            alignItems: 'center',\n            justifyContent: 'flex-start',\n            py: extend === undefined ? { xs: 2, lg: 1 } : [2, 1][+!extend],\n            px: extend === undefined ? { xs: 1, lg: 0.5 } : [1, 0.5][+!extend],\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: extend === undefined ? { xs: 'none', lg: '\"\"' } : ['none', '\"\"'][+!extend],\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: extend === undefined ? { xs: '0', lg: '2px' } : ['0', '2px'][+!extend],\n              bottom: extend === undefined ? { xs: '0', lg: '-2px' } : ['0', '-2px'][+!extend],\n            },\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={sxOverride(\n              {\n                display: 'inline-flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                textAlign: 'center',\n                position: 'relative',\n              },\n              labelWrapperSx,\n            )}\n            {...restLabelWrapper}\n          >\n            <Box\n              className=\"FlowHeaderNavigationLink-label\"\n              sx={sxOverride(\n                {\n                  position: 'absolute',\n                  left: extend === undefined ? { xs: '0', lg: 'auto' } : ['0', 'auto'][+!extend],\n                },\n                labelSx,\n              )}\n              {...restLabel}\n            >\n              {children || label}\n            </Box>\n            <Box\n              className=\"FlowHeaderNavigationLink-selectedLabel\"\n              sx={sxOverride(\n                {\n                  fontWeight: '700',\n                  opacity: '0',\n                  position: 'relative',\n                },\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","sx","children","label","icon","active","external","extend","labelWrapperProps","labelProps","selectedLabelProps","rest","ref","theme","useTheme","labelWrapperSx","restLabelWrapper","labelSx","restLabel","selectedLabelSx","restSelectedLabel","linkIcon","useMemo","_jsx","ArrowTopRightIcon","_jsxs","ButtonBase","sxOverride","typography","list","undefined","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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"}
+{"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 { sxOverride } from '@/src/utils/sxOverride';\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';\nimport { useHeaderContext } from './HeaderContext';\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;\n  /**\n   * Change link into extended mobile version\n   * @default provided by HeaderContext\n   */\n  extend?: boolean;\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      extend: propExtend,\n      labelWrapperProps,\n      labelProps,\n      selectedLabelProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const headerContext = useHeaderContext();\n    const extend = propExtend ?? headerContext?.extend;\n    const { sx: labelWrapperSx, ...restLabelWrapper } = labelWrapperProps ?? {};\n    const { sx: labelSx, ...restLabel } = labelProps ?? {};\n    const { sx: selectedLabelSx, ...restSelectedLabel } = selectedLabelProps ?? {};\n    const linkIcon = useMemo(() => {\n      return external ? <ArrowTopRightIcon /> : icon;\n    }, [icon, external]);\n\n    return (\n      <ButtonBase\n        sx={sxOverride(\n          {\n            ...theme.typography.list,\n            ...(extend === undefined\n              ? {\n                  [theme.breakpoints.down('lg')]: {\n                    // switch to 'large body' typography according to Figma\n                    ...getTypography('body', theme.direction === 'rtl', 'large'),\n                  },\n                }\n              : [\n                  {\n                    '&&': {\n                      ...getTypography('body', theme.direction === 'rtl', 'large'),\n                    },\n                  },\n                  {},\n                ][+!extend]),\n            position: 'relative',\n            zIndex: '100',\n            // icon and text next to each other\n            display: extend === undefined ? { xs: 'flex', lg: 'inline-flex' } : ['flex', 'inline-flex'][+!extend],\n            width: extend === undefined ? { xs: '100%', lg: 'auto' } : ['100%', 'auto'][+!extend],\n            gap: 0.5,\n            alignItems: 'center',\n            justifyContent: 'flex-start',\n            py: extend === undefined ? { xs: 2, lg: 1 } : [2, 1][+!extend],\n            px: extend === undefined ? { xs: 1, lg: 0.5 } : [1, 0.5][+!extend],\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: extend === undefined ? { xs: 'none', lg: '\"\"' } : ['none', '\"\"'][+!extend],\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',\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',\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: extend === undefined ? { xs: '0', lg: '2px' } : ['0', '2px'][+!extend],\n              bottom: extend === undefined ? { xs: '0', lg: '-2px' } : ['0', '-2px'][+!extend],\n            },\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={sxOverride(\n              {\n                display: 'inline-flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                textAlign: 'center',\n                position: 'relative',\n              },\n              labelWrapperSx,\n            )}\n            {...restLabelWrapper}\n          >\n            <Box\n              className=\"FlowHeaderNavigationLink-label\"\n              sx={sxOverride(\n                {\n                  position: 'absolute',\n                  left: extend === undefined ? { xs: '0', lg: 'auto' } : ['0', 'auto'][+!extend],\n                },\n                labelSx,\n              )}\n              {...restLabel}\n            >\n              {children || label}\n            </Box>\n            <Box\n              className=\"FlowHeaderNavigationLink-selectedLabel\"\n              sx={sxOverride(\n                {\n                  fontWeight: '700',\n                  opacity: '0',\n                  position: 'relative',\n                },\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","sx","children","label","icon","active","external","extend","propExtend","labelWrapperProps","labelProps","selectedLabelProps","rest","ref","theme","useTheme","headerContext","useHeaderContext","labelWrapperSx","restLabelWrapper","labelSx","restLabel","selectedLabelSx","restSelectedLabel","linkIcon","useMemo","_jsx","ArrowTopRightIcon","_jsxs","ButtonBase","sxOverride","typography","list","undefined","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.js

@@ -1,2 +1,2 @@
-import{jsxs as o,Fragment as r,jsx as e}from"react/jsx-runtime";import{forwardRef as n,useRef as t,useState as i}from"react";import{useTheme as a,useMediaQuery as s,ClickAwayListener as l,Collapse as c,MenuList as d,Menu as u}from"@mui/material";import{sxOverride as m}from"../../utils/sxOverride/sxOverride.js";import{ChevronDownIcon as f}from"../icon/stroke/ChevronDownIcon.js";import{HeaderNavigationLink as p}from"./HeaderNavigationLink.js";import{getInteractiveStyle as x}from"../../materialui/button/interactive.js";const g=n(({children:n,sx:g,label:h,icon:k,onClick:v,extend:C,menuItems:b,menuProps:S,collapseProps:j,clickAwayListenerProps:w,...y},I)=>{const M=t(null),[P,A]=i(null),H=a(),L=s(H.breakpoints.down("lg")),N=void 0===C?L:C,{sx:O,...W}=j??{};return o(r,{children:[e(p,{active:!!P,extend:C,icon:k||e(f,{sx:{"&&&":{fontSize:void 0===C?{xs:"20px",lg:"14px"}:["20px","14px"][+!C]},color:void 0===C?{xs:"dark"===H.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"}:["dark"===H.palette.mode?"onSurface.os300":"onSurface.os700","currentColor"][+!C],transform:`rotate(${P?"180":"0"}deg)`,transition:void 0===C?{xs:H.transitions.create("transform",{duration:H.transitions.duration.shortest}),lg:"none"}:[H.transitions.create("transform",{duration:H.transitions.duration.shortest}),"none"][+!C]}}),onClick:o=>{v?.(o),A(r=>r?null:o.currentTarget)},sx:m({justifyContent:void 0===C?{xs:"space-between",lg:"flex-start"}:["space-between","flex-start"][+!C]},g),ref:I??M,"data-testid":"HeaderNavigationMenu",...y,children:h}),N?e(l,{onClickAway:o=>{!(I??M)?.current?.contains(o?.target)&&A(null)},...w,children:e(c,{in:!!P,sx:m({"& .MuiMenuItem-root":{...x({background:"none",fontWeight:"300",color:"dark"===H.palette.mode?"onSurface.os300":"onSurface.os700"},{background:"none",fontWeight:"700",color:"currentColor"})}},O),...W,children:e(d,{children:n||b})})}):e(u,{open:!!P,anchorEl:P,onClose:()=>A(null),...S,children:n||b})]})});export{g as HeaderNavigationMenu};
+import{jsxs as o,Fragment as r,jsx as e}from"react/jsx-runtime";import{forwardRef as t,useRef as n,useState as i}from"react";import{useTheme as a,useMediaQuery as s,ClickAwayListener as l,Collapse as c,MenuList as d,Menu as u}from"@mui/material";import{sxOverride as m}from"../../utils/sxOverride/sxOverride.js";import{ChevronDownIcon as f}from"../icon/stroke/ChevronDownIcon.js";import{HeaderNavigationLink as p}from"./HeaderNavigationLink.js";import{getInteractiveStyle as x}from"../../materialui/button/interactive.js";import{useHeaderContext as g}from"./HeaderContext.js";const h=t(({children:t,sx:h,label:k,icon:v,onClick:C,extend:b,menuItems:j,menuProps:S,collapseProps:w,clickAwayListenerProps:y,...H},I)=>{const M=n(null),[P,A]=i(null),L=a(),N=g(),O=b??N?.extend,W=s(L.breakpoints.down("lg")),z=void 0===O?W:O,{sx:D,...E}=w??{};return o(r,{children:[e(p,{active:!!P,extend:O,icon:v||e(f,{sx:{"&&&":{fontSize:void 0===O?{xs:"20px",lg:"14px"}:["20px","14px"][+!O]},color:void 0===O?{xs:"dark"===L.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"}:["dark"===L.palette.mode?"onSurface.os300":"onSurface.os700","currentColor"][+!O],transform:`rotate(${P?"180":"0"}deg)`,transition:void 0===O?{xs:L.transitions.create("transform",{duration:L.transitions.duration.shortest}),lg:"none"}:[L.transitions.create("transform",{duration:L.transitions.duration.shortest}),"none"][+!O]}}),onClick:o=>{C?.(o),A(r=>r?null:o.currentTarget)},sx:m({justifyContent:void 0===O?{xs:"space-between",lg:"flex-start"}:["space-between","flex-start"][+!O]},h),ref:I??M,"data-testid":"HeaderNavigationMenu",...H,children:k}),z?e(l,{onClickAway:o=>{!(I??M)?.current?.contains(o?.target)&&A(null)},...y,children:e(c,{in:!!P,sx:m({"& .MuiMenuItem-root":{...x({background:"none",fontWeight:"300",color:"dark"===L.palette.mode?"onSurface.os300":"onSurface.os700"},{background:"none",fontWeight:"700",color:"currentColor"})}},D),...E,children:e(d,{children:t||j})})}):e(u,{open:!!P,anchorEl:P,onClose:()=>A(null),...S,children:t||j})]})});export{h 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  MenuList,\n  MenuProps,\n  Collapse,\n  useMediaQuery,\n  Theme,\n  useTheme,\n  CollapseProps,\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\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    {\n      children,\n      sx,\n      label,\n      icon,\n      onClick,\n      extend,\n      menuItems,\n      menuProps,\n      collapseProps,\n      clickAwayListenerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const buttonRef = useRef(null);\n    const [anchor, setAnchor] = useState(null);\n    const theme = useTheme();\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const mobile = extend === undefined ? downLg : extend;\n    const { sx: collapseSx, ...restCollapse } = collapseProps ?? {};\n\n    return (\n      <>\n        <HeaderNavigationLink\n          active={!!anchor}\n          extend={extend}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  // same code is applied to HeaderNavigationHero.tsx\n                  '&&&': {\n                    fontSize: extend === undefined ? { xs: '20px', lg: '14px' } : ['20px', '14px'][+!extend],\n                  },\n                  color:\n                    extend === undefined\n                      ? {\n                          xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                          lg: 'currentColor',\n                        }\n                      : [theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700', 'currentColor'][\n                          +!extend\n                        ],\n                  transform: `rotate(${anchor ? '180' : '0'}deg)`,\n                  transition:\n                    extend === undefined\n                      ? {\n                          xs: theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          lg: 'none',\n                        }\n                      : [\n                          theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          'none',\n                        ][+!extend],\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor((prev) => (!prev ? e.currentTarget : null));\n          }}\n          sx={sxOverride(\n            {\n              justifyContent:\n                extend === undefined\n                  ? { xs: 'space-between', lg: 'flex-start' }\n                  : ['space-between', 'flex-start'][+!extend],\n            },\n            sx,\n          )}\n          ref={ref ?? buttonRef}\n          data-testid=\"HeaderNavigationMenu\"\n          {...rest}\n        >\n          {label}\n        </HeaderNavigationLink>\n        {mobile ? (\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={sxOverride(\n                {\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                },\n                collapseSx,\n              )}\n              {...restCollapse}\n            >\n              <MenuList>\n                {children || menuItems}\n              </MenuList>\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","children","sx","label","icon","onClick","extend","menuItems","menuProps","collapseProps","clickAwayListenerProps","rest","ref","buttonRef","useRef","anchor","setAnchor","useState","theme","useTheme","downLg","useMediaQuery","breakpoints","down","mobile","undefined","collapseSx","restCollapse","_jsxs","_Fragment","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","currentTarget","sxOverride","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Collapse","in","getInteractiveStyle","background","fontWeight","MenuList","Menu","open","anchorEl","onClose"],"mappings":"0gBAwCO,MAAMA,EAAsDC,EACjE,EAEIC,WACAC,KACAC,QACAC,OACAC,UACAC,SACAC,YACAC,YACAC,gBACAC,4BACGC,GAELC,KAEA,MAAMC,EAAYC,EAAO,OAClBC,EAAQC,GAAaC,EAAS,MAC/BC,EAAQC,IACRC,EAASC,EAAqBH,EAAMI,YAAYC,KAAK,OACrDC,OAAoBC,IAAXnB,EAAuBc,EAASd,GACvCJ,GAAIwB,KAAeC,GAAiBlB,GAAiB,CAAA,EAE7D,OACEmB,EAAAC,EAAA,CAAA5B,SAAA,CACE6B,EAACC,EAAoB,CACnBC,SAAUjB,EACVT,OAAQA,EACRF,KACEA,GACE0B,EAACG,EAAe,CACd/B,GAAI,CAEF,MAAO,CACLgC,cAAqBT,IAAXnB,EAAuB,CAAE6B,GAAI,OAAQC,GAAI,QAAW,CAAC,OAAQ,UAAU9B,IAEnF+B,WACaZ,IAAXnB,EACI,CACE6B,GAA2B,SAAvBjB,EAAMoB,QAAQC,KAAkB,kBAAoB,kBACxDH,GAAI,gBAEN,CAAwB,SAAvBlB,EAAMoB,QAAQC,KAAkB,kBAAoB,kBAAmB,kBACpEjC,GAEVkC,UAAW,UAAUzB,EAAS,MAAQ,UACtC0B,gBACahB,IAAXnB,EACI,CACE6B,GAAIjB,EAAMwB,YAAYC,OAAO,YAAa,CACxCC,SAAU1B,EAAMwB,YAAYE,SAASC,WAEvCT,GAAI,QAEN,CACElB,EAAMwB,YAAYC,OAAO,YAAa,CACpCC,SAAU1B,EAAMwB,YAAYE,SAASC,WAEvC,UACEvC,MAKlBD,QAAUyC,IACRzC,IAAUyC,GACV9B,EAAW+B,GAAWA,EAAyB,KAAlBD,EAAEE,gBAEjC9C,GAAI+C,EACF,CACEC,oBACazB,IAAXnB,EACI,CAAE6B,GAAI,gBAAiBC,GAAI,cAC3B,CAAC,gBAAiB,gBAAgB9B,IAE1CJ,GAEFU,IAAKA,GAAOC,EAAS,cACT,0BACRF,EAAIV,SAEPE,IAEFqB,EACCM,EAACqB,EAAiB,CAChBC,YAAcN,MACTlC,GAA8CC,IAAYwC,SAASC,SAASR,GAAGS,SAChFvC,EAAU,UAEVN,EAAsBT,SAE1B6B,EAAC0B,EAAQ,CACPC,KAAM1C,EACNb,GAAI+C,EACF,CAEE,sBAAuB,IAClBS,EACD,CACEC,WAAY,OACZC,WAAY,MACZvB,MAA8B,SAAvBnB,EAAMoB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEoB,WAAY,OACZC,WAAY,MACZvB,MAAO,mBAKfX,MAEEC,WAEJG,EAAC+B,EAAQ,CAAA5D,SACNA,GAAYM,QAKnBuB,EAACgC,EAAI,CAACC,OAAQhD,EAAQiD,SAAUjD,EAAQkD,QAAS,IAAMjD,EAAU,SAAWR,EAASP,SAClFA,GAAYM"}
+{"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  MenuList,\n  MenuProps,\n  Collapse,\n  useMediaQuery,\n  Theme,\n  useTheme,\n  CollapseProps,\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { useHeaderContext } from './HeaderContext';\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    {\n      children,\n      sx,\n      label,\n      icon,\n      onClick,\n      extend: propExtend,\n      menuItems,\n      menuProps,\n      collapseProps,\n      clickAwayListenerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const buttonRef = useRef(null);\n    const [anchor, setAnchor] = useState(null);\n    const theme = useTheme();\n    const headerContext = useHeaderContext();\n    const extend = propExtend ?? headerContext?.extend;\n    // media query fallback only for standalone usage outside of Header\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const mobile = extend === undefined ? downLg : extend;\n    const { sx: collapseSx, ...restCollapse } = collapseProps ?? {};\n\n    return (\n      <>\n        <HeaderNavigationLink\n          active={!!anchor}\n          extend={extend}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  // same code is applied to HeaderNavigationHero.tsx\n                  '&&&': {\n                    fontSize: extend === undefined ? { xs: '20px', lg: '14px' } : ['20px', '14px'][+!extend],\n                  },\n                  color:\n                    extend === undefined\n                      ? {\n                          xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                          lg: 'currentColor',\n                        }\n                      : [theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700', 'currentColor'][\n                          +!extend\n                        ],\n                  transform: `rotate(${anchor ? '180' : '0'}deg)`,\n                  transition:\n                    extend === undefined\n                      ? {\n                          xs: theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          lg: 'none',\n                        }\n                      : [\n                          theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          'none',\n                        ][+!extend],\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor((prev) => (!prev ? e.currentTarget : null));\n          }}\n          sx={sxOverride(\n            {\n              justifyContent:\n                extend === undefined\n                  ? { xs: 'space-between', lg: 'flex-start' }\n                  : ['space-between', 'flex-start'][+!extend],\n            },\n            sx,\n          )}\n          ref={ref ?? buttonRef}\n          data-testid=\"HeaderNavigationMenu\"\n          {...rest}\n        >\n          {label}\n        </HeaderNavigationLink>\n        {mobile ? (\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={sxOverride(\n                {\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                },\n                collapseSx,\n              )}\n              {...restCollapse}\n            >\n              <MenuList>{children || menuItems}</MenuList>\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","children","sx","label","icon","onClick","extend","propExtend","menuItems","menuProps","collapseProps","clickAwayListenerProps","rest","ref","buttonRef","useRef","anchor","setAnchor","useState","theme","useTheme","headerContext","useHeaderContext","downLg","useMediaQuery","breakpoints","down","mobile","undefined","collapseSx","restCollapse","_jsxs","_Fragment","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","currentTarget","sxOverride","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Collapse","in","getInteractiveStyle","background","fontWeight","MenuList","Menu","open","anchorEl","onClose"],"mappings":"gkBAyCO,MAAMA,EAAsDC,EACjE,EAEIC,WACAC,KACAC,QACAC,OACAC,UACAC,OAAQC,EACRC,YACAC,YACAC,gBACAC,4BACGC,GAELC,KAEA,MAAMC,EAAYC,EAAO,OAClBC,EAAQC,GAAaC,EAAS,MAC/BC,EAAQC,IACRC,EAAgBC,IAChBhB,EAASC,GAAcc,GAAef,OAEtCiB,EAASC,EAAqBL,EAAMM,YAAYC,KAAK,OACrDC,OAAoBC,IAAXtB,EAAuBiB,EAASjB,GACvCJ,GAAI2B,KAAeC,GAAiBpB,GAAiB,CAAA,EAE7D,OACEqB,EAAAC,EAAA,CAAA/B,SAAA,CACEgC,EAACC,EAAoB,CACnBC,SAAUnB,EACVV,OAAQA,EACRF,KACEA,GACE6B,EAACG,EAAe,CACdlC,GAAI,CAEF,MAAO,CACLmC,cAAqBT,IAAXtB,EAAuB,CAAEgC,GAAI,OAAQC,GAAI,QAAW,CAAC,OAAQ,UAAUjC,IAEnFkC,WACaZ,IAAXtB,EACI,CACEgC,GAA2B,SAAvBnB,EAAMsB,QAAQC,KAAkB,kBAAoB,kBACxDH,GAAI,gBAEN,CAAwB,SAAvBpB,EAAMsB,QAAQC,KAAkB,kBAAoB,kBAAmB,kBACpEpC,GAEVqC,UAAW,UAAU3B,EAAS,MAAQ,UACtC4B,gBACahB,IAAXtB,EACI,CACEgC,GAAInB,EAAM0B,YAAYC,OAAO,YAAa,CACxCC,SAAU5B,EAAM0B,YAAYE,SAASC,WAEvCT,GAAI,QAEN,CACEpB,EAAM0B,YAAYC,OAAO,YAAa,CACpCC,SAAU5B,EAAM0B,YAAYE,SAASC,WAEvC,UACE1C,MAKlBD,QAAU4C,IACR5C,IAAU4C,GACVhC,EAAWiC,GAAWA,EAAyB,KAAlBD,EAAEE,gBAEjCjD,GAAIkD,EACF,CACEC,oBACazB,IAAXtB,EACI,CAAEgC,GAAI,gBAAiBC,GAAI,cAC3B,CAAC,gBAAiB,gBAAgBjC,IAE1CJ,GAEFW,IAAKA,GAAOC,EAAS,cACT,0BACRF,EAAIX,SAEPE,IAEFwB,EACCM,EAACqB,EAAiB,CAChBC,YAAcN,MACTpC,GAA8CC,IAAY0C,SAASC,SAASR,GAAGS,SAChFzC,EAAU,UAEVN,EAAsBV,SAE1BgC,EAAC0B,EAAQ,CACPC,KAAM5C,EACNd,GAAIkD,EACF,CAEE,sBAAuB,IAClBS,EACD,CACEC,WAAY,OACZC,WAAY,MACZvB,MAA8B,SAAvBrB,EAAMsB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEoB,WAAY,OACZC,WAAY,MACZvB,MAAO,mBAKfX,MAEEC,WAEJG,EAAC+B,EAAQ,CAAA/D,SAAEA,GAAYO,QAI3ByB,EAACgC,EAAI,CAACC,OAAQlD,EAAQmD,SAAUnD,EAAQoD,QAAS,IAAMnD,EAAU,SAAWR,EAASR,SAClFA,GAAYO"}

package/components/header/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Header';
+export * from './HeaderContext';
 export * from './HeaderLogo';
 export * from './HeaderButton';
 export * from './HeaderLanguageSelect';

package/components/index.d.ts

@@ -4,6 +4,7 @@ export * from './banner';
 export * from './bottomSheet';
 export * from './bypassBlock';
 export * from './carousel';
+export * from './code';
 export * from './errorContent';
 export * from './flag';
 export * from './focusring';

package/components/label/Label.js

@@ -1,2 +1,2 @@
-import{jsx as r,jsxs as o}from"react/jsx-runtime";import{forwardRef as e,useMemo as a}from"react";import{Box as t,useTheme as n}from"@mui/material";import{CircleExclamationIcon as i}from"../icon/stroke/CircleExclamationIcon.js";import{CircleInformationIcon as s}from"../icon/stroke/CircleInformationIcon.js";import{getFocusRingStyle as l}from"../focusring/focusring.js";import{getInteractiveStyle as c}from"../../materialui/button/interactive.js";import{sxOverride as d}from"../../utils/sxOverride/sxOverride.js";const p={display:"inline-flex",alignItems:"center",justifyContent:"flex-start",flexWrap:"nowrap",flexShrink:"0",fontSize:"11px",lineHeight:"12px",letterSpacing:"3px",textTransform:"uppercase",fontWeight:"900",whiteSpace:"nowrap",textRendering:"geometricPrecision"},x=e(({type:o,label:e,children:a,sx:n,...i},s)=>r(t,{ref:s,"data-testid":"Label-general",sx:d({...p,color:r=>"dark"===r.palette.mode?"onSurface.os200":"onSurface.os600"},n),...i,children:e||a})),u=e(({type:o,label:e,children:a,sx:n,...i},s)=>r(t,{ref:s,"data-testid":"Label-simple",sx:d(r=>({...p,...r.typography.list,backgroundColor:"transparent.primary",color:"text.primary",p:"2px 10px"}),n),...i,children:e||a})),b=e(({type:o,label:e,children:a,variant:n="primary",sx:i,...s},l)=>r(t,{ref:l,"data-testid":`Label-feature${n}`,sx:d({...p,color:"onSurface.os0",backgroundColor:"brand.tertiary",padding:"5px 7px 5px 10px",borderRadius:"2px",..."neutral"===n&&{backgroundColor:"onSurface.os600"},..."discount"===n&&{color:"brand.secondary",backgroundColor:"brand.tertiary"},..."secondary"===n&&{backgroundColor:"brand.secondary",color:"brand.tertiary"},...["alert","error"].includes(n)&&{backgroundColor:"error.main"},..."info"===n&&{backgroundColor:"info.main"},..."warning"===n&&{backgroundColor:"warning.dark"},..."success"===n&&{backgroundColor:"brand.primary"}},i),...s,children:e||a}));function g(r,o){return{...r,"&.MuiButtonBase-root":{...c(r,o)}}}const m=e(({type:e,label:c,children:x,variant:u="positive",sx:b,iconProps:m,IconComponent:f,onClick:C,...h},y)=>{const{sx:k,...w}=m||{},S=a(()=>{switch(u){case"alert":case"error":case"warning":return i;default:return s}},[u]),v=f||S,j=n();return o(t,{ref:y,"data-testid":`Label-semantic${u}`,sx:d({...p,gap:"6px",padding:"2px 8px 2px 4px",borderRadius:"4px",border:1,borderColor:"currentColor",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","&&.MuiButtonBase-root":{...l(j,!0,1)},...g({color:"brand.primary",backgroundColor:"transparent.transparent"},{color:"brandHover.primary",backgroundColor:"transparent.primary"}),...["alert","error"].includes(u)&&{...g({color:"error.main",backgroundColor:"transparent.transparent"},{color:"error.dark",backgroundColor:"transparent.primary"})},..."warning"===u&&{...g({color:"warning.dark",backgroundColor:"transparent.transparent"},{color:"warning.dark",backgroundColor:"transparent.primary"})},..."info"===u&&{...g({color:"info.main",backgroundColor:"transparent.transparent"},{color:"info.dark",backgroundColor:"transparent.primary"})}},b),onClick:C,...h,children:[r(v,{"data-testid":`icon-${u}`,sx:d({fontSize:"18px"},k),...w}),c||x]})}),f=e(({type:e,label:a,children:n,variant:i="positive",labelPlacement:s="end",dotProps:l,sx:c,...x},u)=>{const{sx:b,...g}=l||{};return o(t,{ref:u,"data-testid":`Label-status${i}`,sx:d(r=>({...p,color:"text.primary",flexDirection:{start:"row-reverse",top:"column-reverse",bottom:"column"}[s]??"row",gap:1,..."indicator"===e&&r.typography.disclaimer1}),c),..."disabled"===i&&{disabled:!0,tabIndex:-1},...x,children:[r(t,{sx:d({width:"10px",height:"10px",..."indicator"===e&&{width:"14px",height:"14px"},borderRadius:"50%",backgroundColor:"success.main",..."warning"===i&&{backgroundColor:"warning.dark"},...["alert","error"].includes(i)&&{backgroundColor:"error.main"},..."neutral"===i&&{backgroundColor:"onSurface.os500"},..."disabled"===i&&{backgroundColor:"disabled.secondary"}},b),...g}),a||n]})}),C=e(({type:e,label:n,children:i,variant:s="A+++",size:l="large",sx:c,labelBoxProps:x,labelNextProps:u,...b},g)=>{const m=a(()=>({B:"#019A01",C:"#69CC00",D:"#FFCC01",E:"#F99601",F:"#FE6501",G:"#FF3100",H:"#2A78CD"}),[]),f=r=>m[r]||"#016703",{sx:C,...h}=x||{},{sx:y,...k}=u||{};return o(t,{ref:g,"data-testid":`Label-CO2${s}`,sx:d({...p},c),...b,children:[r(t,{component:"span",sx:d({alignItems:"center",backgroundColor:f(s),boxSizing:"border-box",color:"surface.tertiary",display:"inline-flex",justifyContent:"flex-start",fontWeight:"700",height:{xs:"20px",xl:"22px"},fontSize:{xs:"12px",xl:"14px"},..."small"===l&&{fontSize:{xs:"10px",xl:"12px"},height:{xs:"16px",xl:"18px"}},padding:"0 5px",position:"relative",letterSpacing:"1px"},C),...h,children:n||i||s}),r(t,{sx:d({content:'""',display:"block",width:"0",height:"0",borderStyle:"solid",borderColor:`transparent transparent transparent ${f(s)}`,borderWidth:{xs:"10px 0 10px 7px",lg:"11px 0 11px 8px"},..."small"===l&&{borderWidth:{xs:"8px 0 8px 5px",lg:"9px 0 9px 7px"}}},y),...k})]})}),h=e((o,e)=>{const t=a(()=>{switch(o.type){case"simple":return u;case"feature":return b;case"semantic":return m;case"status":case"indicator":return f;case"CO2":return C;default:return x}},[o.type]);return r(t,{component:"span",...o,ref:e})});export{h as Label};
+import{jsx as r,jsxs as o}from"react/jsx-runtime";import{forwardRef as e,useMemo as a}from"react";import{Box as t,useTheme as n}from"@mui/material";import{CircleExclamationIcon as i}from"../icon/stroke/CircleExclamationIcon.js";import{CircleInformationIcon as s}from"../icon/stroke/CircleInformationIcon.js";import{getFocusRingStyle as l}from"../focusring/focusring.js";import{getInteractiveStyle as c}from"../../materialui/button/interactive.js";import{sxOverride as d}from"../../utils/sxOverride/sxOverride.js";const p={display:"inline-flex",alignItems:"center",justifyContent:"flex-start",flexWrap:"nowrap",flexShrink:"0",fontSize:"11px",lineHeight:"12px",letterSpacing:"3px",textTransform:"uppercase",fontWeight:"900",whiteSpace:"nowrap",textRendering:"geometricPrecision"},x=e(({type:o,label:e,children:a,sx:n,...i},s)=>r(t,{ref:s,"data-testid":"Label-general",sx:d({...p,color:r=>"dark"===r.palette.mode?"onSurface.os200":"onSurface.os600"},n),...i,children:e||a})),u=e(({type:o,label:e,children:a,sx:n,...i},s)=>r(t,{ref:s,"data-testid":"Label-simple",sx:d(r=>({...p,...r.typography.list,backgroundColor:"transparent.primary",color:"text.primary",p:"2px 10px"}),n),...i,children:e||a})),b=e(({type:o,label:e,children:a,variant:n="primary",sx:i,...s},l)=>r(t,{ref:l,"data-testid":`Label-feature${n}`,sx:d({...p,color:"onSurface.os0",backgroundColor:"brand.tertiary",padding:"5px 7px 5px 10px",borderRadius:"2px",..."neutral"===n&&{backgroundColor:"onSurface.os600"},..."discount"===n&&{color:"brand.secondary",backgroundColor:"brand.tertiary"},..."secondary"===n&&{backgroundColor:"brand.secondary",color:"brand.tertiary"},...["alert","error"].includes(n)&&{backgroundColor:"error.main"},..."info"===n&&{backgroundColor:"info.main"},..."warning"===n&&{backgroundColor:"warning.dark"},..."success"===n&&{backgroundColor:"brand.primary"}},i),...s,children:e||a}));function g(r,o){return{...r,"&.MuiButtonBase-root":{...c(r,o)}}}const m=e(({type:e,label:c,children:x,variant:u="positive",sx:b,iconProps:m,IconComponent:f,onClick:C,...h},y)=>{const{sx:k,...w}=m||{},S=a(()=>{switch(u){case"alert":case"error":case"warning":return i;default:return s}},[u]),v=f||S,j=n();return o(t,{ref:y,"data-testid":`Label-semantic${u}`,sx:d({...p,gap:"6px",padding:"2px 8px 2px 4px",borderRadius:"4px",border:1,borderColor:"currentColor",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","&&.MuiButtonBase-root":{...l(j,!0,1)},...g({color:"brand.primary",backgroundColor:"transparent"},{color:"brandHover.primary",backgroundColor:"transparent.primary"}),...["alert","error"].includes(u)&&{...g({color:"error.main",backgroundColor:"transparent"},{color:"error.dark",backgroundColor:"transparent.primary"})},..."warning"===u&&{...g({color:"warning.dark",backgroundColor:"transparent"},{color:"warning.dark",backgroundColor:"transparent.primary"})},..."info"===u&&{...g({color:"info.main",backgroundColor:"transparent"},{color:"info.dark",backgroundColor:"transparent.primary"})}},b),onClick:C,...h,children:[r(v,{"data-testid":`icon-${u}`,sx:d({fontSize:"18px"},k),...w}),c||x]})}),f=e(({type:e,label:a,children:n,variant:i="positive",labelPlacement:s="end",dotProps:l,sx:c,...x},u)=>{const{sx:b,...g}=l||{};return o(t,{ref:u,"data-testid":`Label-status${i}`,sx:d(r=>({...p,color:"text.primary",flexDirection:{start:"row-reverse",top:"column-reverse",bottom:"column"}[s]??"row",gap:1,..."indicator"===e&&r.typography.disclaimer1}),c),..."disabled"===i&&{disabled:!0,tabIndex:-1},...x,children:[r(t,{sx:d({width:"10px",height:"10px",..."indicator"===e&&{width:"14px",height:"14px"},borderRadius:"50%",backgroundColor:"success.main",..."warning"===i&&{backgroundColor:"warning.dark"},...["alert","error"].includes(i)&&{backgroundColor:"error.main"},..."neutral"===i&&{backgroundColor:"onSurface.os500"},..."disabled"===i&&{backgroundColor:"disabled.secondary"}},b),...g}),a||n]})}),C=e(({type:e,label:n,children:i,variant:s="A+++",size:l="large",sx:c,labelBoxProps:x,labelNextProps:u,...b},g)=>{const m=a(()=>({B:"#019A01",C:"#69CC00",D:"#FFCC01",E:"#F99601",F:"#FE6501",G:"#FF3100",H:"#2A78CD"}),[]),f=r=>m[r]||"#016703",{sx:C,...h}=x||{},{sx:y,...k}=u||{};return o(t,{ref:g,"data-testid":`Label-CO2${s}`,sx:d({...p},c),...b,children:[r(t,{component:"span",sx:d({alignItems:"center",backgroundColor:f(s),boxSizing:"border-box",color:"surface.tertiary",display:"inline-flex",justifyContent:"flex-start",fontWeight:"700",height:{xs:"20px",xl:"22px"},fontSize:{xs:"12px",xl:"14px"},..."small"===l&&{fontSize:{xs:"10px",xl:"12px"},height:{xs:"16px",xl:"18px"}},padding:"0 5px",position:"relative",letterSpacing:"1px"},C),...h,children:n||i||s}),r(t,{sx:d({content:'""',display:"block",width:"0",height:"0",borderStyle:"solid",borderColor:`transparent transparent transparent ${f(s)}`,borderWidth:{xs:"10px 0 10px 7px",lg:"11px 0 11px 8px"},..."small"===l&&{borderWidth:{xs:"8px 0 8px 5px",lg:"9px 0 9px 7px"}}},y),...k})]})}),h=e((o,e)=>{const t=a(()=>{switch(o.type){case"simple":return u;case"feature":return b;case"semantic":return m;case"status":case"indicator":return f;case"CO2":return C;default:return x}},[o.type]);return r(t,{component:"span",...o,ref:e})});export{h as Label};
 //# sourceMappingURL=Label.js.map

package/components/label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, forwardRef, ElementType, ComponentType } from 'react';\nimport { Box, BoxProps, CSSObject, SvgIconProps, useTheme } from '@mui/material';\nimport { CircleExclamationIcon } from '@/src/components/icon/stroke/CircleExclamationIcon';\nimport { CircleInformationIcon } from '@/src/components/icon/stroke/CircleInformationIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface LabelBaseProps extends BoxProps<ElementType> {\n  /**\n   * Content to be rendered inside Label, alternatively children are used\n   */\n  label?: ReactNode;\n}\n\nexport interface GeneralLabelProps extends LabelBaseProps {\n  type?: 'general';\n}\n\nexport interface SimpleLabelProps extends LabelBaseProps {\n  type: 'simple';\n}\n\nexport type FeatureVariants =\n  | 'primary'\n  | 'neutral'\n  | 'secondary'\n  | 'discount'\n  | 'alert'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning';\nexport interface FeatureLabelProps extends LabelBaseProps {\n  type: 'feature';\n  variant?: FeatureVariants;\n}\n\nexport type SemanticVariants = 'positive' | 'info' | 'warning' | 'alert' | 'error';\nexport interface SemanticLabelProps extends LabelBaseProps {\n  type: 'semantic';\n  variant?: SemanticVariants;\n  iconProps?: SvgIconProps;\n  IconComponent?: ComponentType<SvgIconProps>;\n}\n\nexport type StatusVariants = 'positive' | 'warning' | 'alert' | 'error' | 'neutral' | 'disabled';\nexport interface StatusLabelProps extends LabelBaseProps {\n  type: 'status' | 'indicator';\n  variant?: StatusVariants;\n  dotProps?: BoxProps<ElementType>;\n  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';\n}\n\nexport type CO2Variants = 'A+++' | 'A++' | 'A+' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';\nexport interface CO2LabelProps extends LabelBaseProps {\n  type: 'CO2';\n  variant?: CO2Variants;\n  size?: 'small' | 'large';\n  labelBoxProps?: BoxProps<ElementType>;\n  labelNextProps?: BoxProps<ElementType>;\n}\n\nexport type LabelProps =\n  | SimpleLabelProps\n  | FeatureLabelProps\n  | SemanticLabelProps\n  | StatusLabelProps\n  | CO2LabelProps\n  | GeneralLabelProps;\n\n// Shared style for all variants\nconst baseSx: CSSObject = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  flexWrap: 'nowrap',\n  flexShrink: '0',\n  // font\n  fontSize: '11px',\n  lineHeight: '12px',\n  letterSpacing: '3px',\n  textTransform: 'uppercase',\n  fontWeight: '900',\n  whiteSpace: 'nowrap',\n  textRendering: 'geometricPrecision',\n};\n\nconst GeneralVariant: React.FC<GeneralLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-general\"\n    sx={sxOverride(\n      {\n        ...baseSx,\n        color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os200' : 'onSurface.os600'),\n      },\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst SimpleVariant: React.FC<SimpleLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-simple\"\n    sx={sxOverride(\n      (theme) => ({\n        ...baseSx,\n        ...theme.typography.list,\n        backgroundColor: 'transparent.primary',\n        color: 'text.primary',\n        p: '2px 10px',\n      }),\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst FeatureVariant: React.FC<FeatureLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'primary', sx, ...rest }, ref) => (\n    <Box\n      ref={ref}\n      data-testid={`Label-feature${variant}`}\n      sx={sxOverride(\n        {\n          ...baseSx,\n          color: 'onSurface.os0',\n          backgroundColor: 'brand.tertiary',\n          padding: '5px 7px 5px 10px',\n          borderRadius: '2px',\n          ...(variant === 'neutral' && {\n            backgroundColor: 'onSurface.os600',\n          }),\n          ...(variant === 'discount' && {\n            color: 'brand.secondary',\n            backgroundColor: 'brand.tertiary',\n          }),\n          // dark mode\n          ...(variant === 'secondary' && {\n            backgroundColor: 'brand.secondary',\n            color: 'brand.tertiary',\n          }),\n          // semantic labels\n          ...(['alert', 'error'].includes(variant) && {\n            backgroundColor: 'error.main',\n          }),\n          ...(variant === 'info' && {\n            backgroundColor: 'info.main',\n          }),\n          ...(variant === 'warning' && {\n            backgroundColor: 'warning.dark',\n          }),\n          ...(variant === 'success' && {\n            backgroundColor: 'brand.primary',\n          }),\n        },\n        sx,\n      )}\n      {...rest}\n    >\n      {label || children}\n    </Box>\n  ),\n);\n\n/**\n * Wrapper around getInteractiveStyle() function to provide interactive style\n *  only for label that is actually a button\n */\nfunction getLabelInteractiveStyle(defaultStyle: CSSObject, hoverStyle: CSSObject): CSSObject {\n  return {\n    ...defaultStyle,\n    '&.MuiButtonBase-root': {\n      ...getInteractiveStyle(defaultStyle, hoverStyle),\n    },\n  };\n}\n\nconst SemanticVariant: React.FC<SemanticLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'positive', sx, iconProps, IconComponent, onClick, ...rest }, ref) => {\n    const { sx: iconSx, ...restIconProps } = iconProps || {};\n    const VariantIconComponent = useMemo(() => {\n      switch (variant) {\n        case 'alert':\n        case 'error':\n        case 'warning':\n          return CircleExclamationIcon;\n        case 'info':\n        case 'positive':\n        default:\n          return CircleInformationIcon;\n      }\n    }, [variant]);\n    const SemanticIcon = IconComponent || VariantIconComponent;\n    const theme = useTheme();\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-semantic${variant}`}\n        sx={sxOverride(\n          {\n            ...baseSx,\n            gap: '6px',\n            padding: '2px 8px 2px 4px',\n            borderRadius: '4px',\n            border: 1,\n            borderColor: 'currentColor',\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            // clickable style\n            '&&.MuiButtonBase-root': {\n              // focused style\n              ...getFocusRingStyle(theme, true, 1),\n            },\n            // default, positive\n            ...getLabelInteractiveStyle(\n              {\n                color: 'brand.primary',\n                backgroundColor: 'transparent.transparent',\n              },\n              {\n                color: 'brandHover.primary',\n                backgroundColor: 'transparent.primary',\n              },\n            ),\n            ...(['alert', 'error'].includes(variant) && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'error.main',\n                  backgroundColor: 'transparent.transparent',\n                },\n                {\n                  color: 'error.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n            ...(variant === 'warning' && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'warning.dark',\n                  backgroundColor: 'transparent.transparent',\n                },\n                {\n                  color: 'warning.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n            ...(variant === 'info' && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'info.main',\n                  backgroundColor: 'transparent.transparent',\n                },\n                {\n                  color: 'info.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n          },\n          sx,\n        )}\n        onClick={onClick}\n        {...rest}\n      >\n        <SemanticIcon\n          data-testid={`icon-${variant}`}\n          sx={sxOverride({ fontSize: '18px' }, iconSx)}\n          {...restIconProps}\n        />\n        {label || children}\n      </Box>\n    );\n  },\n);\n\nconst StatusVariant: React.FC<StatusLabelProps> = forwardRef(\n  ({ type, label, children, variant = 'positive', labelPlacement = 'end', dotProps, sx, ...rest }, ref) => {\n    const { sx: dotSx, ...restDot } = dotProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-status${variant}`}\n        sx={sxOverride(\n          (theme) => ({\n            ...baseSx,\n            color: 'text.primary',\n            flexDirection: { start: 'row-reverse', top: 'column-reverse', bottom: 'column' }[labelPlacement] ?? 'row',\n            gap: 1,\n            ...(type === 'indicator' && theme.typography.disclaimer1),\n          }),\n          sx,\n        )}\n        {...(variant === 'disabled' && {\n          disabled: true,\n          tabIndex: -1,\n        })}\n        {...rest}\n      >\n        <Box\n          sx={sxOverride(\n            {\n              width: '10px',\n              height: '10px',\n              ...(type === 'indicator' && {\n                width: '14px',\n                height: '14px',\n              }),\n              borderRadius: '50%',\n              backgroundColor: 'success.main',\n              ...(variant === 'warning' && {\n                backgroundColor: 'warning.dark',\n              }),\n              ...(['alert', 'error'].includes(variant) && {\n                backgroundColor: 'error.main',\n              }),\n              ...(variant === 'neutral' && {\n                backgroundColor: 'onSurface.os500',\n              }),\n              ...(variant === 'disabled' && {\n                backgroundColor: 'disabled.secondary',\n              }),\n            },\n            dotSx,\n          )}\n          {...restDot}\n        />\n        {label || children}\n      </Box>\n    );\n  },\n);\n\nconst CO2Variant: React.FC<CO2LabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'A+++', size = 'large', sx, labelBoxProps, labelNextProps, ...rest }, ref) => {\n    const colorMap = useMemo(\n      () => ({\n        B: '#019A01',\n        C: '#69CC00',\n        D: '#FFCC01',\n        E: '#F99601',\n        F: '#FE6501',\n        G: '#FF3100',\n        H: '#2A78CD',\n      }),\n      [],\n    );\n    const getColor = (_variant: string) => colorMap[_variant] || '#016703';\n\n    const { sx: labelBoxSx, ...restLabelBox } = labelBoxProps || {};\n    const { sx: labelNextSx, ...restLabelNext } = labelNextProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-CO2${variant}`}\n        sx={sxOverride(\n          {\n            ...baseSx,\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        <Box\n          component=\"span\"\n          sx={sxOverride(\n            {\n              alignItems: 'center',\n              backgroundColor: getColor(variant),\n              boxSizing: 'border-box',\n              color: 'surface.tertiary',\n              display: 'inline-flex',\n              justifyContent: 'flex-start',\n              fontWeight: '700',\n              height: { xs: '20px', xl: '22px' },\n              fontSize: { xs: '12px', xl: '14px' },\n              ...(size === 'small' && {\n                fontSize: { xs: '10px', xl: '12px' },\n                height: { xs: '16px', xl: '18px' },\n              }),\n              padding: '0 5px',\n              position: 'relative',\n              letterSpacing: '1px',\n            },\n            labelBoxSx,\n          )}\n          {...restLabelBox}\n        >\n          {label || children || variant}\n        </Box>\n        <Box\n          sx={sxOverride(\n            {\n              content: '\"\"',\n              display: 'block',\n              width: '0',\n              height: '0',\n              borderStyle: 'solid',\n              borderColor: `transparent transparent transparent ${getColor(variant)}`,\n              borderWidth: {\n                xs: `10px 0 10px 7px`,\n                lg: `11px 0 11px 8px`,\n              },\n              ...(size === 'small' && {\n                borderWidth: {\n                  xs: '8px 0 8px 5px',\n                  lg: '9px 0 9px 7px',\n                },\n              }),\n            },\n            labelNextSx,\n          )}\n          {...restLabelNext}\n        />\n      </Box>\n    );\n  },\n);\n\nexport const Label: React.FC<LabelProps> = forwardRef((props, ref) => {\n  const LabelComponent = useMemo<React.FC<LabelProps>>(() => {\n    switch (props.type) {\n      case 'simple':\n        return SimpleVariant;\n      case 'feature':\n        return FeatureVariant;\n      case 'semantic':\n        return SemanticVariant;\n      case 'status':\n      case 'indicator':\n        return StatusVariant;\n      case 'CO2':\n        return CO2Variant;\n      case 'general':\n      default:\n        return GeneralVariant;\n    }\n  }, [props.type]);\n\n  return <LabelComponent component=\"span\" {...props} ref={ref} />;\n});\n"],"names":["baseSx","display","alignItems","justifyContent","flexWrap","flexShrink","fontSize","lineHeight","letterSpacing","textTransform","fontWeight","whiteSpace","textRendering","GeneralVariant","forwardRef","type","_","label","children","sx","rest","ref","_jsx","Box","sxOverride","color","theme","palette","mode","SimpleVariant","typography","list","backgroundColor","p","FeatureVariant","variant","padding","borderRadius","includes","getLabelInteractiveStyle","defaultStyle","hoverStyle","getInteractiveStyle","SemanticVariant","iconProps","IconComponent","onClick","iconSx","restIconProps","VariantIconComponent","useMemo","CircleExclamationIcon","CircleInformationIcon","SemanticIcon","useTheme","_jsxs","gap","border","borderColor","transition","getFocusRingStyle","StatusVariant","labelPlacement","dotProps","dotSx","restDot","flexDirection","start","top","bottom","disclaimer1","disabled","tabIndex","width","height","CO2Variant","size","labelBoxProps","labelNextProps","colorMap","B","C","D","E","F","G","H","getColor","_variant","labelBoxSx","restLabelBox","labelNextSx","restLabelNext","component","boxSizing","xs","xl","position","content","borderStyle","borderWidth","lg","Label","props","LabelComponent"],"mappings":"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"}
+{"version":3,"file":"Label.js","sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, forwardRef, ElementType, ComponentType } from 'react';\nimport { Box, BoxProps, CSSObject, SvgIconProps, useTheme } from '@mui/material';\nimport { CircleExclamationIcon } from '@/src/components/icon/stroke/CircleExclamationIcon';\nimport { CircleInformationIcon } from '@/src/components/icon/stroke/CircleInformationIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface LabelBaseProps extends BoxProps<ElementType> {\n  /**\n   * Content to be rendered inside Label, alternatively children are used\n   */\n  label?: ReactNode;\n}\n\nexport interface GeneralLabelProps extends LabelBaseProps {\n  type?: 'general';\n}\n\nexport interface SimpleLabelProps extends LabelBaseProps {\n  type: 'simple';\n}\n\nexport type FeatureVariants =\n  | 'primary'\n  | 'neutral'\n  | 'secondary'\n  | 'discount'\n  | 'alert'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning';\nexport interface FeatureLabelProps extends LabelBaseProps {\n  type: 'feature';\n  variant?: FeatureVariants;\n}\n\nexport type SemanticVariants = 'positive' | 'info' | 'warning' | 'alert' | 'error';\nexport interface SemanticLabelProps extends LabelBaseProps {\n  type: 'semantic';\n  variant?: SemanticVariants;\n  iconProps?: SvgIconProps;\n  IconComponent?: ComponentType<SvgIconProps>;\n}\n\nexport type StatusVariants = 'positive' | 'warning' | 'alert' | 'error' | 'neutral' | 'disabled';\nexport interface StatusLabelProps extends LabelBaseProps {\n  type: 'status' | 'indicator';\n  variant?: StatusVariants;\n  dotProps?: BoxProps<ElementType>;\n  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';\n}\n\nexport type CO2Variants = 'A+++' | 'A++' | 'A+' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';\nexport interface CO2LabelProps extends LabelBaseProps {\n  type: 'CO2';\n  variant?: CO2Variants;\n  size?: 'small' | 'large';\n  labelBoxProps?: BoxProps<ElementType>;\n  labelNextProps?: BoxProps<ElementType>;\n}\n\nexport type LabelProps =\n  | SimpleLabelProps\n  | FeatureLabelProps\n  | SemanticLabelProps\n  | StatusLabelProps\n  | CO2LabelProps\n  | GeneralLabelProps;\n\n// Shared style for all variants\nconst baseSx: CSSObject = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  flexWrap: 'nowrap',\n  flexShrink: '0',\n  // font\n  fontSize: '11px',\n  lineHeight: '12px',\n  letterSpacing: '3px',\n  textTransform: 'uppercase',\n  fontWeight: '900',\n  whiteSpace: 'nowrap',\n  textRendering: 'geometricPrecision',\n};\n\nconst GeneralVariant: React.FC<GeneralLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-general\"\n    sx={sxOverride(\n      {\n        ...baseSx,\n        color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os200' : 'onSurface.os600'),\n      },\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst SimpleVariant: React.FC<SimpleLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-simple\"\n    sx={sxOverride(\n      (theme) => ({\n        ...baseSx,\n        ...theme.typography.list,\n        backgroundColor: 'transparent.primary',\n        color: 'text.primary',\n        p: '2px 10px',\n      }),\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst FeatureVariant: React.FC<FeatureLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'primary', sx, ...rest }, ref) => (\n    <Box\n      ref={ref}\n      data-testid={`Label-feature${variant}`}\n      sx={sxOverride(\n        {\n          ...baseSx,\n          color: 'onSurface.os0',\n          backgroundColor: 'brand.tertiary',\n          padding: '5px 7px 5px 10px',\n          borderRadius: '2px',\n          ...(variant === 'neutral' && {\n            backgroundColor: 'onSurface.os600',\n          }),\n          ...(variant === 'discount' && {\n            color: 'brand.secondary',\n            backgroundColor: 'brand.tertiary',\n          }),\n          // dark mode\n          ...(variant === 'secondary' && {\n            backgroundColor: 'brand.secondary',\n            color: 'brand.tertiary',\n          }),\n          // semantic labels\n          ...(['alert', 'error'].includes(variant) && {\n            backgroundColor: 'error.main',\n          }),\n          ...(variant === 'info' && {\n            backgroundColor: 'info.main',\n          }),\n          ...(variant === 'warning' && {\n            backgroundColor: 'warning.dark',\n          }),\n          ...(variant === 'success' && {\n            backgroundColor: 'brand.primary',\n          }),\n        },\n        sx,\n      )}\n      {...rest}\n    >\n      {label || children}\n    </Box>\n  ),\n);\n\n/**\n * Wrapper around getInteractiveStyle() function to provide interactive style\n *  only for label that is actually a button\n */\nfunction getLabelInteractiveStyle(defaultStyle: CSSObject, hoverStyle: CSSObject): CSSObject {\n  return {\n    ...defaultStyle,\n    '&.MuiButtonBase-root': {\n      ...getInteractiveStyle(defaultStyle, hoverStyle),\n    },\n  };\n}\n\nconst SemanticVariant: React.FC<SemanticLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'positive', sx, iconProps, IconComponent, onClick, ...rest }, ref) => {\n    const { sx: iconSx, ...restIconProps } = iconProps || {};\n    const VariantIconComponent = useMemo(() => {\n      switch (variant) {\n        case 'alert':\n        case 'error':\n        case 'warning':\n          return CircleExclamationIcon;\n        case 'info':\n        case 'positive':\n        default:\n          return CircleInformationIcon;\n      }\n    }, [variant]);\n    const SemanticIcon = IconComponent || VariantIconComponent;\n    const theme = useTheme();\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-semantic${variant}`}\n        sx={sxOverride(\n          {\n            ...baseSx,\n            gap: '6px',\n            padding: '2px 8px 2px 4px',\n            borderRadius: '4px',\n            border: 1,\n            borderColor: 'currentColor',\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            // clickable style\n            '&&.MuiButtonBase-root': {\n              // focused style\n              ...getFocusRingStyle(theme, true, 1),\n            },\n            // default, positive\n            ...getLabelInteractiveStyle(\n              {\n                color: 'brand.primary',\n                backgroundColor: 'transparent',\n              },\n              {\n                color: 'brandHover.primary',\n                backgroundColor: 'transparent.primary',\n              },\n            ),\n            ...(['alert', 'error'].includes(variant) && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'error.main',\n                  backgroundColor: 'transparent',\n                },\n                {\n                  color: 'error.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n            ...(variant === 'warning' && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'warning.dark',\n                  backgroundColor: 'transparent',\n                },\n                {\n                  color: 'warning.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n            ...(variant === 'info' && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'info.main',\n                  backgroundColor: 'transparent',\n                },\n                {\n                  color: 'info.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n          },\n          sx,\n        )}\n        onClick={onClick}\n        {...rest}\n      >\n        <SemanticIcon\n          data-testid={`icon-${variant}`}\n          sx={sxOverride({ fontSize: '18px' }, iconSx)}\n          {...restIconProps}\n        />\n        {label || children}\n      </Box>\n    );\n  },\n);\n\nconst StatusVariant: React.FC<StatusLabelProps> = forwardRef(\n  ({ type, label, children, variant = 'positive', labelPlacement = 'end', dotProps, sx, ...rest }, ref) => {\n    const { sx: dotSx, ...restDot } = dotProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-status${variant}`}\n        sx={sxOverride(\n          (theme) => ({\n            ...baseSx,\n            color: 'text.primary',\n            flexDirection: { start: 'row-reverse', top: 'column-reverse', bottom: 'column' }[labelPlacement] ?? 'row',\n            gap: 1,\n            ...(type === 'indicator' && theme.typography.disclaimer1),\n          }),\n          sx,\n        )}\n        {...(variant === 'disabled' && {\n          disabled: true,\n          tabIndex: -1,\n        })}\n        {...rest}\n      >\n        <Box\n          sx={sxOverride(\n            {\n              width: '10px',\n              height: '10px',\n              ...(type === 'indicator' && {\n                width: '14px',\n                height: '14px',\n              }),\n              borderRadius: '50%',\n              backgroundColor: 'success.main',\n              ...(variant === 'warning' && {\n                backgroundColor: 'warning.dark',\n              }),\n              ...(['alert', 'error'].includes(variant) && {\n                backgroundColor: 'error.main',\n              }),\n              ...(variant === 'neutral' && {\n                backgroundColor: 'onSurface.os500',\n              }),\n              ...(variant === 'disabled' && {\n                backgroundColor: 'disabled.secondary',\n              }),\n            },\n            dotSx,\n          )}\n          {...restDot}\n        />\n        {label || children}\n      </Box>\n    );\n  },\n);\n\nconst CO2Variant: React.FC<CO2LabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'A+++', size = 'large', sx, labelBoxProps, labelNextProps, ...rest }, ref) => {\n    const colorMap = useMemo(\n      () => ({\n        B: '#019A01',\n        C: '#69CC00',\n        D: '#FFCC01',\n        E: '#F99601',\n        F: '#FE6501',\n        G: '#FF3100',\n        H: '#2A78CD',\n      }),\n      [],\n    );\n    const getColor = (_variant: string) => colorMap[_variant] || '#016703';\n\n    const { sx: labelBoxSx, ...restLabelBox } = labelBoxProps || {};\n    const { sx: labelNextSx, ...restLabelNext } = labelNextProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-CO2${variant}`}\n        sx={sxOverride(\n          {\n            ...baseSx,\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        <Box\n          component=\"span\"\n          sx={sxOverride(\n            {\n              alignItems: 'center',\n              backgroundColor: getColor(variant),\n              boxSizing: 'border-box',\n              color: 'surface.tertiary',\n              display: 'inline-flex',\n              justifyContent: 'flex-start',\n              fontWeight: '700',\n              height: { xs: '20px', xl: '22px' },\n              fontSize: { xs: '12px', xl: '14px' },\n              ...(size === 'small' && {\n                fontSize: { xs: '10px', xl: '12px' },\n                height: { xs: '16px', xl: '18px' },\n              }),\n              padding: '0 5px',\n              position: 'relative',\n              letterSpacing: '1px',\n            },\n            labelBoxSx,\n          )}\n          {...restLabelBox}\n        >\n          {label || children || variant}\n        </Box>\n        <Box\n          sx={sxOverride(\n            {\n              content: '\"\"',\n              display: 'block',\n              width: '0',\n              height: '0',\n              borderStyle: 'solid',\n              borderColor: `transparent transparent transparent ${getColor(variant)}`,\n              borderWidth: {\n                xs: `10px 0 10px 7px`,\n                lg: `11px 0 11px 8px`,\n              },\n              ...(size === 'small' && {\n                borderWidth: {\n                  xs: '8px 0 8px 5px',\n                  lg: '9px 0 9px 7px',\n                },\n              }),\n            },\n            labelNextSx,\n          )}\n          {...restLabelNext}\n        />\n      </Box>\n    );\n  },\n);\n\nexport const Label: React.FC<LabelProps> = forwardRef((props, ref) => {\n  const LabelComponent = useMemo<React.FC<LabelProps>>(() => {\n    switch (props.type) {\n      case 'simple':\n        return SimpleVariant;\n      case 'feature':\n        return FeatureVariant;\n      case 'semantic':\n        return SemanticVariant;\n      case 'status':\n      case 'indicator':\n        return StatusVariant;\n      case 'CO2':\n        return CO2Variant;\n      case 'general':\n      default:\n        return GeneralVariant;\n    }\n  }, [props.type]);\n\n  return <LabelComponent component=\"span\" {...props} ref={ref} />;\n});\n"],"names":["baseSx","display","alignItems","justifyContent","flexWrap","flexShrink","fontSize","lineHeight","letterSpacing","textTransform","fontWeight","whiteSpace","textRendering","GeneralVariant","forwardRef","type","_","label","children","sx","rest","ref","_jsx","Box","sxOverride","color","theme","palette","mode","SimpleVariant","typography","list","backgroundColor","p","FeatureVariant","variant","padding","borderRadius","includes","getLabelInteractiveStyle","defaultStyle","hoverStyle","getInteractiveStyle","SemanticVariant","iconProps","IconComponent","onClick","iconSx","restIconProps","VariantIconComponent","useMemo","CircleExclamationIcon","CircleInformationIcon","SemanticIcon","useTheme","_jsxs","gap","border","borderColor","transition","getFocusRingStyle","StatusVariant","labelPlacement","dotProps","dotSx","restDot","flexDirection","start","top","bottom","disclaimer1","disabled","tabIndex","width","height","CO2Variant","size","labelBoxProps","labelNextProps","colorMap","B","C","D","E","F","G","H","getColor","_variant","labelBoxSx","restLabelBox","labelNextSx","restLabelNext","component","boxSizing","xs","xl","position","content","borderStyle","borderWidth","lg","Label","props","LabelComponent"],"mappings":"igBAwEA,MAAMA,EAAoB,CACxBC,QAAS,cACTC,WAAY,SACZC,eAAgB,aAChBC,SAAU,SACVC,WAAY,IAEZC,SAAU,OACVC,WAAY,OACZC,cAAe,MACfC,cAAe,YACfC,WAAY,MACZC,WAAY,SACZC,cAAe,sBAGXC,EAA8CC,EAAW,EAAGC,KAAMC,EAAGC,QAAOC,WAAUC,QAAOC,GAAQC,IACzGC,EAACC,EAAG,CACFF,IAAKA,EAAG,cACI,gBACZF,GAAIK,EACF,IACKxB,EACHyB,MAAQC,GAAkC,SAAvBA,EAAMC,QAAQC,KAAkB,kBAAoB,mBAEzET,MAEEC,EAAIF,SAEPD,GAASC,KAIRW,EAA4Cf,EAAW,EAAGC,KAAMC,EAAGC,QAAOC,WAAUC,QAAOC,GAAQC,IACvGC,EAACC,GACCF,IAAKA,EAAG,cACI,eACZF,GAAIK,EACDE,IAAK,IACD1B,KACA0B,EAAMI,WAAWC,KACpBC,gBAAiB,sBACjBP,MAAO,eACPQ,EAAG,aAELd,MAEEC,EAAIF,SAEPD,GAASC,KAIRgB,EAA8CpB,EAClD,EAAGC,KAAMC,EAAGC,QAAOC,WAAUiB,UAAU,UAAWhB,QAAOC,GAAQC,IAC/DC,EAACC,EAAG,CACFF,IAAKA,EAAG,cACK,gBAAgBc,IAC7BhB,GAAIK,EACF,IACKxB,EACHyB,MAAO,gBACPO,gBAAiB,iBACjBI,QAAS,mBACTC,aAAc,SACE,YAAZF,GAAyB,CAC3BH,gBAAiB,sBAEH,aAAZG,GAA0B,CAC5BV,MAAO,kBACPO,gBAAiB,qBAGH,cAAZG,GAA2B,CAC7BH,gBAAiB,kBACjBP,MAAO,qBAGL,CAAC,QAAS,SAASa,SAASH,IAAY,CAC1CH,gBAAiB,iBAEH,SAAZG,GAAsB,CACxBH,gBAAiB,gBAEH,YAAZG,GAAyB,CAC3BH,gBAAiB,mBAEH,YAAZG,GAAyB,CAC3BH,gBAAiB,kBAGrBb,MAEEC,EAAIF,SAEPD,GAASC,KAShB,SAASqB,EAAyBC,EAAyBC,GACzD,MAAO,IACFD,EACH,uBAAwB,IACnBE,EAAoBF,EAAcC,IAG3C,CAEA,MAAME,EAAgD7B,EACpD,EAAGC,KAAMC,EAAGC,QAAOC,WAAUiB,UAAU,WAAYhB,KAAIyB,YAAWC,gBAAeC,aAAY1B,GAAQC,KACnG,MAAQF,GAAI4B,KAAWC,GAAkBJ,GAAa,CAAA,EAChDK,EAAuBC,EAAQ,KACnC,OAAQf,GACN,IAAK,QACL,IAAK,QACL,IAAK,UACH,OAAOgB,EAGT,QACE,OAAOC,IAEV,CAACjB,IACEkB,EAAeR,GAAiBI,EAChCvB,EAAQ4B,IAEd,OACEC,EAAChC,EAAG,CACFF,IAAKA,EAAG,cACK,iBAAiBc,IAC9BhB,GAAIK,EACF,IACKxB,EACHwD,IAAK,MACLpB,QAAS,kBACTC,aAAc,MACdoB,OAAQ,EACRC,YAAa,eACbC,WACE,4JAEF,wBAAyB,IAEpBC,EAAkBlC,GAAO,EAAM,OAGjCa,EACD,CACEd,MAAO,gBACPO,gBAAiB,eAEnB,CACEP,MAAO,qBACPO,gBAAiB,2BAGjB,CAAC,QAAS,SAASM,SAASH,IAAY,IACvCI,EACD,CACEd,MAAO,aACPO,gBAAiB,eAEnB,CACEP,MAAO,aACPO,gBAAiB,4BAIP,YAAZG,GAAyB,IACxBI,EACD,CACEd,MAAO,eACPO,gBAAiB,eAEnB,CACEP,MAAO,eACPO,gBAAiB,4BAIP,SAAZG,GAAsB,IACrBI,EACD,CACEd,MAAO,YACPO,gBAAiB,eAEnB,CACEP,MAAO,YACPO,gBAAiB,0BAKzBb,GAEF2B,QAASA,KACL1B,EAAIF,SAAA,CAERI,EAAC+B,EAAY,CAAA,cACE,QAAQlB,IACrBhB,GAAIK,EAAW,CAAElB,SAAU,QAAUyC,MACjCC,IAEL/B,GAASC,OAMZ2C,EAA4C/C,EAChD,EAAGC,OAAME,QAAOC,WAAUiB,UAAU,WAAY2B,iBAAiB,MAAOC,WAAU5C,QAAOC,GAAQC,KAC/F,MAAQF,GAAI6C,KAAUC,GAAYF,GAAY,CAAA,EAE9C,OACER,EAAChC,EAAG,CACFF,IAAKA,gBACQ,eAAec,IAC5BhB,GAAIK,EACDE,IAAK,IACD1B,EACHyB,MAAO,eACPyC,cAAe,CAAEC,MAAO,cAAeC,IAAK,iBAAkBC,OAAQ,UAAWP,IAAmB,MACpGN,IAAK,KACQ,cAATzC,GAAwBW,EAAMI,WAAWwC,cAE/CnD,MAEe,aAAZgB,GAA0B,CAC7BoC,UAAU,EACVC,UAAU,MAERpD,EAAIF,SAAA,CAERI,EAACC,EAAG,CACFJ,GAAIK,EACF,CACEiD,MAAO,OACPC,OAAQ,UACK,cAAT3D,GAAwB,CAC1B0D,MAAO,OACPC,OAAQ,QAEVrC,aAAc,MACdL,gBAAiB,kBACD,YAAZG,GAAyB,CAC3BH,gBAAiB,mBAEf,CAAC,QAAS,SAASM,SAASH,IAAY,CAC1CH,gBAAiB,iBAEH,YAAZG,GAAyB,CAC3BH,gBAAiB,sBAEH,aAAZG,GAA0B,CAC5BH,gBAAiB,uBAGrBgC,MAEEC,IAELhD,GAASC,OAMZyD,EAAsC7D,EAC1C,EAAGC,KAAMC,EAAGC,QAAOC,WAAUiB,UAAU,OAAQyC,OAAO,QAASzD,KAAI0D,gBAAeC,oBAAmB1D,GAAQC,KAC3G,MAAM0D,EAAW7B,EACf,KAAA,CACE8B,EAAG,UACHC,EAAG,UACHC,EAAG,UACHC,EAAG,UACHC,EAAG,UACHC,EAAG,UACHC,EAAG,YAEL,IAEIC,EAAYC,GAAqBT,EAASS,IAAa,WAErDrE,GAAIsE,KAAeC,GAAiBb,GAAiB,CAAA,GACrD1D,GAAIwE,KAAgBC,GAAkBd,GAAkB,CAAA,EAEhE,OACEvB,EAAChC,EAAG,CACFF,IAAKA,EAAG,cACK,YAAYc,IACzBhB,GAAIK,EACF,IACKxB,GAELmB,MAEEC,YAEJE,EAACC,EAAG,CACFsE,UAAU,OACV1E,GAAIK,EACF,CACEtB,WAAY,SACZ8B,gBAAiBuD,EAASpD,GAC1B2D,UAAW,aACXrE,MAAO,mBACPxB,QAAS,cACTE,eAAgB,aAChBO,WAAY,MACZgE,OAAQ,CAAEqB,GAAI,OAAQC,GAAI,QAC1B1F,SAAU,CAAEyF,GAAI,OAAQC,GAAI,WACf,UAATpB,GAAoB,CACtBtE,SAAU,CAAEyF,GAAI,OAAQC,GAAI,QAC5BtB,OAAQ,CAAEqB,GAAI,OAAQC,GAAI,SAE5B5D,QAAS,QACT6D,SAAU,WACVzF,cAAe,OAEjBiF,MAEEC,EAAYxE,SAEfD,GAASC,GAAYiB,IAExBb,EAACC,GACCJ,GAAIK,EACF,CACE0E,QAAS,KACTjG,QAAS,QACTwE,MAAO,IACPC,OAAQ,IACRyB,YAAa,QACbzC,YAAa,uCAAuC6B,EAASpD,KAC7DiE,YAAa,CACXL,GAAI,kBACJM,GAAI,sBAEO,UAATzB,GAAoB,CACtBwB,YAAa,CACXL,GAAI,gBACJM,GAAI,mBAIVV,MAEEC,SAODU,EAA8BxF,EAAW,CAACyF,EAAOlF,KAC5D,MAAMmF,EAAiBtD,EAA8B,KACnD,OAAQqD,EAAMxF,MACZ,IAAK,SACH,OAAOc,EACT,IAAK,UACH,OAAOK,EACT,IAAK,WACH,OAAOS,EACT,IAAK,SACL,IAAK,YACH,OAAOkB,EACT,IAAK,MACH,OAAOc,EAET,QACE,OAAO9D,IAEV,CAAC0F,EAAMxF,OAEV,OAAOO,EAACkF,EAAc,CAACX,UAAU,UAAWU,EAAOlF,IAAKA"}

package/components/notification/NotificationCenterHeaderButton.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { HeaderButtonProps } from '@/src/components/header/HeaderButton';
+import { HeaderButtonProps } from '../header/HeaderButton';
 import { ClickAwayListenerProps, PopperProps, FadeProps } from '@mui/material';
 import { NotificationCenterProps } from './NotificationCenter';
 export interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {

package/components/playPauseButton/PlayPauseButton.d.ts

@@ -1,6 +1,6 @@
 import React, { ComponentType, ElementType } from 'react';
 import { BoxProps, IconButtonProps, SvgIconProps } from '@mui/material';
-import { SpinnerProps } from '@/src/components/progress/Spinner';
+import { SpinnerProps } from '../progress/Spinner';
 export interface PlayPauseButtonProps extends BoxProps<ElementType> {
     /**
      * Boolean to indicate if the media is currently playing