@skodaflow/web-library 8.0.1 → 8.2.0

package/components/header/HeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderButton.js","sources":["../../../src/components/header/HeaderButton.tsx"],"sourcesContent":["import React, { ElementType, FC, ForwardedRef, forwardRef } from 'react';\nimport {\n  IconButton,\n  IconButtonProps,\n  ButtonBase,\n  Tooltip,\n  TooltipProps,\n  Badge,\n  BadgeProps,\n  useTheme,\n} from '@mui/material';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface HeaderButtonProps extends IconButtonProps<ElementType> {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: TooltipProps['title'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: BadgeProps;\n}\n\n/**\n * IconButton for the action links\n */\nexport const HeaderButton: FC<HeaderButtonProps> = forwardRef(\n  ({ children, sx, label, extend, tooltipProps, badgeProps, ...rest }, ref) => {\n    const theme = useTheme();\n    const { title, ...restTooltip } = tooltipProps ?? {};\n\n    if (extend) {\n      return (\n        <ButtonBase\n          sx={{\n            ...theme.typography.list,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'flex-start',\n            gap: 1.25,\n            py: 1.5,\n            px: 1.25,\n            // icon inside\n            '& .MuiSvgIcon-root': {\n              fontSize: '17px',\n            },\n            // disabled style\n            '&.Mui-disabled': {\n              color: 'disabled.tertiary',\n            },\n            // interactive style\n            ...getInteractiveStyle(\n              {\n                fontWeight: '300',\n              },\n              {\n                fontWeight: '700',\n              },\n            ),\n            // focus ring\n            ...getFocusRingStyle(theme),\n            '&&:before': {\n              borderRadius: '4px',\n            },\n            ...sx,\n          }}\n          ref={ref as ForwardedRef<HTMLButtonElement>}\n          data-testid=\"HeaderButton\"\n          {...rest}\n        >\n          <Badge {...badgeProps}>{children}</Badge>\n          {label || title}\n        </ButtonBase>\n      );\n    }\n\n    return (\n      <Tooltip title={label || title} {...restTooltip}>\n        <IconButton\n          sx={sx}\n          size=\"medium\"\n          ref={ref as ForwardedRef<HTMLButtonElement>}\n          data-testid=\"HeaderButton\"\n          {...rest}\n        >\n          <Badge {...badgeProps}>{children}</Badge>\n        </IconButton>\n      </Tooltip>\n    );\n  },\n);\n"],"names":["HeaderButton","forwardRef","_a","ref","children","sx","label","extend","tooltipProps","badgeProps","rest","__rest","theme","useTheme","_b","title","restTooltip","_jsxs","ButtonBase","Object","assign","typography","list","display","alignItems","justifyContent","gap","py","px","fontSize","color","getInteractiveStyle","fontWeight","getFocusRingStyle","borderRadius","_jsx","Badge","Tooltip","IconButton","size"],"mappings":"gWAoCO,MAAMA,EAAsCC,EACjD,CAACC,EAAoEC,KAApE,IAAAC,SAAEA,EAAQC,GAAEA,EAAEC,MAAEA,EAAKC,OAAEA,EAAMC,aAAEA,EAAYC,WAAEA,GAAUP,EAAKQ,EAAIC,EAAAT,EAAhE,gEACC,MAAMU,EAAQC,IACRC,EAA4BN,QAAAA,EAAgB,CAAA,GAA5CO,MAAEA,GAAKD,EAAKE,EAAWL,EAAAG,EAAvB,CAAA,UAEN,OAAIP,EAEAU,EAACC,EAAUC,OAAAC,OAAA,CACTf,GAAEc,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACGR,EAAMS,WAAWC,MAAI,CACxBC,QAAS,OACTC,WAAY,SACZC,eAAgB,aAChBC,IAAK,KACLC,GAAI,IACJC,GAAI,KAEJ,qBAAsB,CACpBC,SAAU,QAGZ,iBAAkB,CAChBC,MAAO,uBAGNC,EACD,CACEC,WAAY,OAEd,CACEA,WAAY,SAIbC,EAAkBrB,IAAM,CAC3B,YAAa,CACXsB,aAAc,SAEb7B,GAELF,IAAKA,EAAsC,cAC/B,gBACRO,EAAI,CAAAN,SAAA,CAER+B,EAACC,EAAKjB,OAAAC,OAAA,GAAKX,EAAU,CAAAL,SAAGA,KACvBE,GAASS,MAMdoB,EAACE,iBAAQtB,MAAOT,GAASS,GAAWC,YAClCmB,EAACG,iBACCjC,GAAIA,EACJkC,KAAK,SACLpC,IAAKA,EAAsC,cAC/B,gBACRO,EAAI,CAAAN,SAER+B,EAACC,EAAKjB,OAAAC,OAAA,CAAA,EAAKX,EAAU,CAAAL,SAAGA"}
+{"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"}

package/components/header/HeaderLanguageSelect.d.ts

@@ -26,17 +26,17 @@ export interface HeaderLanguageSelectProps extends HeaderButtonProps {
      */
     menuProps?: MenuProps;
     /**
-     * Props applied to each MenuItem
+     * Props applied to each MenuItem, or a factory receiving the item index and language
      */
-    menuItemProps?: MenuItemProps;
+    menuItemProps?: MenuItemProps | ((index: number, language: HeaderLanguageType) => MenuItemProps);
     /**
-     * Props applied to Radio inside MenuItem
+     * Props applied to Radio inside each MenuItem, or a factory receiving the item index and language
      */
-    radioProps?: RadioProps;
+    radioProps?: RadioProps | ((index: number, language: HeaderLanguageType) => RadioProps);
     /**
-     * Props applied to ListItemText inside MenuIte
+     * Props applied to ListItemText inside each MenuItem, or a factory receiving the item index and language
      */
-    listItemTextProps?: ListItemTextProps;
+    listItemTextProps?: ListItemTextProps | ((index: number, language: HeaderLanguageType) => ListItemTextProps);
 }
 /**
  * IconButton with menu selector for languages

package/components/header/HeaderLanguageSelect.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as r,Fragment as t,jsx as n}from"react/jsx-runtime";import{forwardRef as o,useState as l}from"react";import{Menu as s,MenuItem as a,Radio as i,ListItemText as c}from"@mui/material";import{HeaderButton as m}from"./HeaderButton.js";import{GlobeIcon as u}from"../icon/stroke/GlobeIcon.js";const d=o((o,d)=>{var{children:p,languages:g,onSelect:f,defaultLanguage:h=0,menuProps:b,menuItemProps:j,radioProps:P,listItemTextProps:I}=o,x=e(o,["children","languages","onSelect","defaultLanguage","menuProps","menuItemProps","radioProps","listItemTextProps"]);const[O,k]=l(null),[C,L]=l(h);return r(t,{children:[n(m,Object.assign({onClick:e=>k(e.currentTarget),ref:d,"data-testid":"HeaderLanguageSelect"},x,{children:p||n(u,{})})),n(s,Object.assign({open:!!O,anchorEl:O,onClose:()=>k(null)},b,{children:null==g?void 0:g.map((e,t)=>{const o=C===t,l="string"==typeof e?e:e.full;return r(a,Object.assign({selected:o,onClick:()=>{null==f||f(e,t),L(t)}},j,{children:[n(i,Object.assign({checked:o,tabIndex:-1},P)),n(c,Object.assign({},I,{children:l}))]}),l)})}))]})});export{d as HeaderLanguageSelect};
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{forwardRef as o,useState as n}from"react";import{Menu as c,MenuItem as i,Radio as l,ListItemText as a}from"@mui/material";import{HeaderButton as m}from"./HeaderButton.js";import{GlobeIcon as u}from"../icon/stroke/GlobeIcon.js";const s=o(({children:o,languages:s,onSelect:p,defaultLanguage:d=0,menuProps:f,menuItemProps:g,radioProps:h,listItemTextProps:k,...x},y)=>{const[I,P]=n(null),[j,C]=n(d);return e(t,{children:[r(m,{onClick:e=>P(e.currentTarget),ref:y,"data-testid":"HeaderLanguageSelect",...x,children:o||r(u,{})}),r(c,{open:!!I,anchorEl:I,onClose:()=>P(null),...f,children:s?.map((t,o)=>{const n=j===o,c="string"==typeof t?t:t.full,m="function"==typeof g?g(o,t):g,u="function"==typeof h?h(o,t):h,s="function"==typeof k?k(o,t):k;return e(i,{selected:n,onClick:()=>{p?.(t,o),C(o)},...m,children:[r(l,{checked:n,tabIndex:-1,...u}),r(a,{...s,children:c})]},c)})})]})});export{s as HeaderLanguageSelect};
 //# sourceMappingURL=HeaderLanguageSelect.js.map

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\n   */\n  menuItemProps?: MenuItemProps;\n  /**\n   * Props applied to Radio inside MenuItem\n   */\n  radioProps?: RadioProps;\n  /**\n   * Props applied to ListItemText inside MenuIte\n   */\n  listItemTextProps?: 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\n            return (\n              <MenuItem\n                key={value}\n                selected={isSelected}\n                onClick={() => {\n                  onSelect?.(lang, idx);\n                  setSelected(idx);\n                }}\n                {...menuItemProps}\n              >\n                <Radio checked={isSelected} tabIndex={-1} {...radioProps} />\n                <ListItemText {...listItemTextProps}>{value}</ListItemText>\n              </MenuItem>\n            );\n          })}\n        </Menu>\n      </>\n    );\n  },\n);\n"],"names":["HeaderLanguageSelect","forwardRef","_a","ref","children","languages","onSelect","defaultLanguage","menuProps","menuItemProps","radioProps","listItemTextProps","rest","__rest","anchor","setAnchor","useState","selected","setSelected","_jsxs","_Fragment","_jsx","HeaderButton","onClick","e","currentTarget","GlobeIcon","Menu","Object","assign","open","anchorEl","onClose","map","lang","idx","isSelected","value","full","MenuItem","Radio","checked","tabIndex","ListItemText"],"mappings":"yUAqDO,MAAMA,EAAsDC,EACjE,CACEC,EAWAC,SAXAC,SACEA,EAAQC,UACRA,EAASC,SACTA,EAAQC,gBACRA,EAAkB,EAACC,UACnBA,EAASC,cACTA,EAAaC,WACbA,EAAUC,kBACVA,KACGC,EAAIC,EAAAX,EATT,CAAA,WAAA,YAAA,WAAA,kBAAA,YAAA,gBAAA,aAAA,sBAaA,MAAOY,EAAQC,GAAaC,EAAS,OAC9BC,EAAUC,GAAeF,EAAST,GAEzC,OACEY,EAAAC,EAAA,CAAAhB,SAAA,CACEiB,EAACC,iBACCC,QAAUC,GAAMT,EAAUS,EAAEC,eAC5BtB,IAAKA,EAAG,cACI,wBACRS,EAAI,CAAAR,SAEPA,GAAYiB,EAACK,EAAS,CAAA,MAEzBL,EAACM,EAAIC,OAAAC,OAAA,CAACC,OAAQhB,EAAQiB,SAAUjB,EAAQkB,QAAS,IAAMjB,EAAU,OAAWP,EAAS,CAAAJ,SAClFC,aAAS,EAATA,EAAW4B,IAAI,CAACC,EAAMC,KACrB,MAAMC,EAAanB,IAAakB,EAC1BE,EAAwB,iBAATH,EAAoBA,EAAOA,EAAKI,KAErD,OACEnB,EAACoB,EAAQX,OAAAC,OAAA,CAEPZ,SAAUmB,EACVb,QAAS,KACPjB,SAAAA,EAAW4B,EAAMC,GACjBjB,EAAYiB,KAEV1B,EAAa,CAAAL,SAAA,CAEjBiB,EAACmB,EAAKZ,OAAAC,OAAA,CAACY,QAASL,EAAYM,UAAU,GAAQhC,IAC9CW,EAACsB,EAAYf,OAAAC,OAAA,CAAA,EAAKlB,EAAiB,CAAAP,SAAGiC,QATjCA"}
+{"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"}

package/components/header/HeaderLogo.d.ts

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

package/components/header/HeaderLogo.js

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

package/components/header/HeaderLogo.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLogo.js","sources":["../../../src/components/header/HeaderLogo.tsx"],"sourcesContent":["import React, { FC, ForwardedRef, forwardRef } from 'react';\nimport { Link, LinkProps, useTheme } from '@mui/material';\nimport { Logo, LogoProps } from '@/src/components/logo/Logo';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface HeaderLogoProps extends LinkProps {\n  /**\n   * Properties applied to Logo component\n   */\n  logoProps?: LogoProps;\n}\n\n/**\n * Logo with link wrapper\n */\nexport const HeaderLogo: FC<HeaderLogoProps> = forwardRef(({ sx, children, href, logoProps, ...rest }, ref) => {\n  const theme = useTheme();\n\n  if (href || rest.onClick) {\n    return (\n      <Link\n        sx={{\n          // same style is applied in Header logo wrapper\n          display: 'block',\n          position: 'relative',\n          py: 1,\n          // add proper focus ring\n          ...getFocusRingStyle(theme),\n          // remove default link box shadow\n          '&.Mui-focusVisible': {\n            boxShadow: 'none',\n          },\n          '& .MuiSvgIcon-root': {\n            display: 'block',\n          },\n        }}\n        href={href || '#'}\n        ref={ref}\n        aria-label=\"Home\"\n        {...rest}\n      >\n        {children || <Logo {...logoProps} />}\n      </Link>\n    );\n  }\n  return children || <Logo sx={sx} ref={ref as unknown as ForwardedRef<SVGSVGElement>} {...logoProps} />;\n});\n"],"names":["HeaderLogo","forwardRef","_a","ref","sx","children","href","logoProps","rest","__rest","theme","useTheme","onClick","_jsx","Link","Object","assign","display","position","py","getFocusRingStyle","boxShadow","Logo"],"mappings":"kQAeO,MAAMA,EAAkCC,EAAW,CAACC,EAA4CC,KAA5C,IAAAC,GAAEA,EAAEC,SAAEA,EAAQC,KAAEA,EAAIC,UAAEA,GAASL,EAAKM,EAAIC,EAAAP,EAAxC,CAAA,KAAA,WAAA,OAAA,cACzD,MAAMQ,EAAQC,IAEd,OAAIL,GAAQE,EAAKI,QAEbC,EAACC,EAAIC,OAAAC,OAAA,CACHZ,GAAEW,OAAAC,OAAAD,OAAAC,OAAA,CAEAC,QAAS,QACTC,SAAU,WACVC,GAAI,GAEDC,EAAkBV,IAAM,CAE3B,qBAAsB,CACpBW,UAAW,QAEb,qBAAsB,CACpBJ,QAAS,WAGbX,KAAMA,GAAQ,IACdH,IAAKA,EAAG,aACG,QACPK,EAAI,CAAAH,SAEPA,GAAYQ,EAACS,mBAASf,OAItBF,GAAYQ,EAACS,iBAAKlB,GAAIA,EAAID,IAAKA,GAAmDI"}
+{"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"}

package/components/header/HeaderNavigationHero.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"tslib";import{jsxs as o,Fragment as n,jsx as i}from"react/jsx-runtime";import{forwardRef as s,useRef as e,useState as t}from"react";import{useTheme as a,useMediaQuery as l,ClickAwayListener as c,Box as p,Collapse as d,Container as x,Portal as g,Backdrop as m}from"@mui/material";import{ChevronDownIcon as b}from"../icon/stroke/ChevronDownIcon.js";import{HeaderNavigationLink as u}from"./HeaderNavigationLink.js";const h=s((s,h)=>{var{children:f,sx:k,label:j,icon:v,inContainer:P=!1,disableBackdrop:O=!1,onClick:C,clickAwayListenerProps:w,contentProps:y,wrapperProps:H,containerProps:z,collapseProps:I,portalProps:A,backdropProps:B}=s,L=r(s,["children","sx","label","icon","inContainer","disableBackdrop","onClick","clickAwayListenerProps","contentProps","wrapperProps","containerProps","collapseProps","portalProps","backdropProps"]);const S=e(),[N,$]=t(!1),D=a(),W=l(D.breakpoints.down("lg")),q=null!=B?B:{},{sx:E}=q,F=r(q,["sx"]),G=null!=H?H:{},{sx:J}=G,K=r(G,["sx"]),M=null!=y?y:{},{sx:Q}=M,R=r(M,["sx"]);return o(n,{children:[i(u,Object.assign({active:N,icon:v||i(b,{sx:{"&&&":{fontSize:{xs:"20px",lg:"14px"}},color:{xs:"dark"===D.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"},transform:`rotate(${N?"180":"0"}deg)`,transition:{xs:D.transitions.create("transform",{duration:D.transitions.duration.shortest}),lg:"none"}}}),onClick:r=>{null==C||C(r),$(r=>!r)},sx:Object.assign({justifyContent:{xs:"space-between",lg:"flex-start"}},k),ref:null!=h?h:S,"data-testid":"HeaderNavigationHero"},L,{children:j})),i(c,Object.assign({onClickAway:r=>{var o,n,i;return!(null===(i=null===(n=null!==(o=h)&&void 0!==o?o:S)||void 0===n?void 0:n.current)||void 0===i?void 0:i.contains(null==r?void 0:r.target))&&$(!1)}},w,{children:i(p,Object.assign({sx:Object.assign({position:{xs:"static",lg:"absolute"},zIndex:"10",left:"0",right:"0",top:D.mixins.toolbar.minHeight,maxHeight:`calc(100vh - ${D.mixins.toolbar.minHeight})`,overflow:"auto"},J)},K,{children:i(d,Object.assign({in:N},I,{children:i(p,Object.assign({sx:Object.assign({backgroundColor:{lg:"dark"===D.palette.mode?"surface.primary":"background.primary"},py:{xs:0,lg:2},px:P?0:{xs:1,lg:2}},Q)},R,{children:P?i(x,Object.assign({maxWidth:"xl"},z,{children:f})):f}))}))}))})),!O&&!W&&i(g,Object.assign({},A,{children:i(m,Object.assign({open:N,sx:Object.assign({zIndex:D.zIndex.appBar-50},E)},F))}))]})});export{h as HeaderNavigationHero};
+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};
 //# 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 { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\n\nexport interface HeaderNavigationHeroProps extends HeaderNavigationLinkProps {\n  /**\n   * Wrap the content into container\n   * @default false\n   */\n  inContainer?: boolean;\n  /**\n   * Controls appearance of backdrop when content opens\n   * @default false\n   */\n  disableBackdrop?: boolean;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to main wrapper of content\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Props applied to main wrapper before collapsible\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * Props applied to Container if inContainer property is provided\n   */\n  containerProps?: ContainerProps;\n  /**\n   * Props applied to Collapse component\n   */\n  collapseProp?: CollapseProps;\n  /**\n   * Props applied to Portal if disableBackdrop property is not provided\n   */\n  portalProps?: PortalProps;\n  /**\n   * Props applied to Backdrop if disableBackdrop property is not provided\n   */\n  backdropProps?: BackdropProps;\n}\n\n/**\n * HeaderNavigationLink with the integration of the complex hero menu\n */\nexport const HeaderNavigationHero: FC<HeaderNavigationHeroProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      label,\n      icon,\n      inContainer = false,\n      disableBackdrop = false,\n      onClick,\n      clickAwayListenerProps,\n      contentProps,\n      wrapperProps,\n      containerProps,\n      collapseProps,\n      portalProps,\n      backdropProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const buttonRef = useRef();\n    const [open, setOpen] = useState(false);\n    const theme = useTheme();\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const { sx: backdropSx, ...restBackdrop } = backdropProps ?? {};\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n    const { sx: contentSx, ...restContent } = contentProps ?? {};\n\n    return (\n      <>\n        <HeaderNavigationLink\n          active={open}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  '&&&': {\n                    fontSize: { xs: '20px', lg: '14px' },\n                  },\n                  color: {\n                    xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                    lg: 'currentColor',\n                  },\n                  transform: `rotate(${open ? '180' : '0'}deg)`,\n                  transition: {\n                    xs: theme.transitions.create('transform', {\n                      duration: theme.transitions.duration.shortest,\n                    }),\n                    lg: 'none',\n                  },\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setOpen((prev) => !prev);\n          }}\n          sx={{\n            justifyContent: { xs: 'space-between', lg: 'flex-start' },\n            ...sx,\n          }}\n          ref={ref ?? buttonRef}\n          data-testid=\"HeaderNavigationHero\"\n          {...rest}\n        >\n          {label}\n        </HeaderNavigationLink>\n        <ClickAwayListener\n          onClickAway={(e) =>\n            !((ref as React.RefObject<HTMLButtonElement>) ?? buttonRef)?.current?.contains(e?.target as Node) &&\n            setOpen(false)\n          }\n          {...clickAwayListenerProps}\n        >\n          <Box\n            sx={{\n              position: { xs: 'static', lg: 'absolute' },\n              zIndex: '10',\n              left: '0',\n              right: '0',\n              top: theme.mixins.toolbar.minHeight,\n              maxHeight: `calc(100vh - ${theme.mixins.toolbar.minHeight})`,\n              overflow: 'auto',\n              ...wrapperSx,\n            }}\n            {...restWrapper}\n          >\n            <Collapse in={open} {...collapseProps}>\n              <Box\n                sx={{\n                  backgroundColor: { lg: theme.palette.mode === 'dark' ? 'surface.primary' : 'background.primary' },\n                  py: { xs: 0, lg: 2 },\n                  px: inContainer ? 0 : { xs: 1, lg: 2 },\n                  ...contentSx,\n                }}\n                {...restContent}\n              >\n                {inContainer ? (\n                  <Container maxWidth=\"xl\" {...containerProps}>\n                    {children}\n                  </Container>\n                ) : (\n                  children\n                )}\n              </Box>\n            </Collapse>\n          </Box>\n        </ClickAwayListener>\n        {!disableBackdrop && !downLg && (\n          <Portal {...portalProps}>\n            <Backdrop open={open} sx={{ zIndex: theme.zIndex.appBar - 50, ...backdropSx }} {...restBackdrop} />\n          </Portal>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["HeaderNavigationHero","forwardRef","_a","ref","children","sx","label","icon","inContainer","disableBackdrop","onClick","clickAwayListenerProps","contentProps","wrapperProps","containerProps","collapseProps","portalProps","backdropProps","rest","__rest","buttonRef","useRef","open","setOpen","useState","theme","useTheme","downLg","useMediaQuery","breakpoints","down","_b","backdropSx","restBackdrop","_c","wrapperSx","restWrapper","_d","contentSx","restContent","_jsxs","_Fragment","_jsx","HeaderNavigationLink","Object","assign","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Box","position","zIndex","left","right","top","mixins","toolbar","minHeight","maxHeight","overflow","Collapse","in","backgroundColor","py","px","Container","maxWidth","Portal","Backdrop","appBar"],"mappings":"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"}
+{"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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"}

package/components/header/HeaderNavigationLink.d.ts

@@ -18,7 +18,11 @@ export interface HeaderNavigationLinkProps extends ButtonBaseProps<ElementType>
     /**
      * Expect icon component that will be rendered after the label
      */
-    icon?: ReactNode | 'arrow-ne';
+    icon?: ReactNode;
+    /**
+     * Change link into extended mobile version
+     */
+    extend?: boolean;
     /**
      * Properties applied to wrapper of label
      */

package/components/header/HeaderNavigationLink.js

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

package/components/header/HeaderNavigationLink.js.map

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

package/components/header/HeaderNavigationMenu.js

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

package/components/header/HeaderNavigationMenu.js.map

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

package/components/hotspotCard/HotspotCard.js

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

package/components/hotspotCard/HotspotCard.js.map

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

package/components/icon/FlowIcon.js

@@ -1,2 +1,2 @@
-import{__rest as l}from"tslib";import{jsxs as i,jsx as o}from"react/jsx-runtime";import{forwardRef as r}from"react";import{SvgIcon as t}from"@mui/material";const c=r((r,c)=>{var e,n,{source:a}=r,d=l(r,["source"]);return i(t,Object.assign({viewBox:"0 0 80 80",ref:c},d,{children:[(null!==(e=null==a?void 0:a.match(/<path[^>]+>/g))&&void 0!==e?e:[]).map((l,i)=>{var r,t,c;const e=null===(r=l.match(/d="([^"]+)"/))||void 0===r?void 0:r[1],n=null===(t=l.match(/fill="([^"]+)"/))||void 0===t?void 0:t[1],a=null===(c=l.match(/opacity="([^"]+)"/))||void 0===c?void 0:c[1];return o("path",Object.assign({fillRule:"evenodd",clipRule:"evenodd",opacity:a},"currentColor"!==n&&{fill:n},{d:e}),i)}),(null!==(n=null==a?void 0:a.match(/<circle[^>]+>/g))&&void 0!==n?n:[]).map((l,i)=>{var r,t,c,e;const n=null===(r=l.match(/fill="([^"]+)"/))||void 0===r?void 0:r[1],a=null===(t=l.match(/cx="([^"]+)"/))||void 0===t?void 0:t[1],d=null===(c=l.match(/cy="([^"]+)"/))||void 0===c?void 0:c[1],v=null===(e=l.match(/r="([^"]+)"/))||void 0===e?void 0:e[1];return o("circle",Object.assign({cx:a,cy:d,r:v},"currentColor"!==n&&{fill:n}),i)})]}))});export{c as FlowIcon};
+import{jsxs as c,jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{SvgIcon as e}from"@mui/material";const m=t(({source:t,...m},o)=>c(e,{viewBox:"0 0 80 80",ref:o,...m,children:[(t?.match(/<path[^>]+>/g)??[]).map((c,t)=>{const e=c.match(/d="([^"]+)"/)?.[1],m=c.match(/fill="([^"]+)"/)?.[1],o=c.match(/opacity="([^"]+)"/)?.[1];return r("path",{fillRule:"evenodd",clipRule:"evenodd",opacity:o,..."currentColor"!==m&&{fill:m},d:e},t)}),(t?.match(/<circle[^>]+>/g)??[]).map((c,t)=>{const e=c.match(/fill="([^"]+)"/)?.[1],m=c.match(/cx="([^"]+)"/)?.[1],o=c.match(/cy="([^"]+)"/)?.[1],a=c.match(/r="([^"]+)"/)?.[1];return r("circle",{cx:m,cy:o,r:a,..."currentColor"!==e&&{fill:e}},t)})]}));export{m as FlowIcon};
 //# sourceMappingURL=FlowIcon.js.map

package/components/icon/FlowIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowIcon.js","sources":["../../../src/components/icon/FlowIcon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SvgIcon, SvgIconProps } from '@mui/material';\n\nexport interface FlowIconProps extends SvgIconProps {\n  /**\n   * SVG of Flow icon in string, e.g. ActionsIcons.Heart.stroke\n   */\n  source?: string;\n}\n\n/**\n * Renders Flow svg icon in string as @mui SvgIcon\n */\nexport const FlowIcon: React.FC<FlowIconProps> = forwardRef(({ source, ...rest }, ref) => {\n  return (\n    <SvgIcon viewBox=\"0 0 80 80\" ref={ref} {...rest}>\n      {(source?.match(/<path[^>]+>/g) ?? []).map((tag, i) => {\n        const d = tag.match(/d=\"([^\"]+)\"/)?.[1];\n        const fill = tag.match(/fill=\"([^\"]+)\"/)?.[1];\n        const opacity = tag.match(/opacity=\"([^\"]+)\"/)?.[1];\n\n        return (\n          <path\n            key={i}\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            opacity={opacity}\n            {...(fill !== 'currentColor' && { fill: fill })}\n            d={d}\n          />\n        );\n      })}\n      {(source?.match(/<circle[^>]+>/g) ?? []).map((tag, i) => {\n        const fill = tag.match(/fill=\"([^\"]+)\"/)?.[1];\n        const cx = tag.match(/cx=\"([^\"]+)\"/)?.[1];\n        const cy = tag.match(/cy=\"([^\"]+)\"/)?.[1];\n        const r = tag.match(/r=\"([^\"]+)\"/)?.[1];\n\n        return <circle key={i} cx={cx} cy={cy} r={r} {...(fill !== 'currentColor' && { fill: fill })} />;\n      })}\n    </SvgIcon>\n  );\n});\n"],"names":["FlowIcon","forwardRef","_a","ref","source","rest","__rest","_jsxs","SvgIcon","Object","assign","viewBox","children","match","_b","map","tag","i","d","fill","opacity","_c","_jsx","fillRule","clipRule","cx","cy","r","_d"],"mappings":"4JAaO,MAAMA,EAAoCC,EAAW,CAACC,EAAqBC,cAArBC,OAAEA,GAAMF,EAAKG,EAAIC,EAAAJ,EAAjB,YAC3D,OACEK,EAACC,EAAOC,OAAAC,OAAA,CAACC,QAAQ,YAAYR,IAAKA,GAASE,EAAI,CAAAO,SAAA,EACd,UAA7BR,aAAM,EAANA,EAAQS,MAAM,uBAAe,IAAAC,EAAAA,EAAI,IAAIC,IAAI,CAACC,EAAKC,eAC/C,MAAMC,EAA4B,QAAxBhB,EAAAc,EAAIH,MAAM,sBAAc,IAAAX,OAAA,EAAAA,EAAG,GAC/BiB,EAAkC,QAA3BL,EAAAE,EAAIH,MAAM,yBAAiB,IAAAC,OAAA,EAAAA,EAAG,GACrCM,EAAwC,QAA9BC,EAAAL,EAAIH,MAAM,4BAAoB,IAAAQ,OAAA,EAAAA,EAAG,GAEjD,OACEC,EAAA,OAAAb,OAAAC,OAAA,CAEEa,SAAS,UACTC,SAAS,UACTJ,QAASA,GACK,iBAATD,GAA2B,CAAEA,KAAMA,GAAO,CAC/CD,EAAGA,IALED,MASsB,QAA/BI,EAAAjB,aAAM,EAANA,EAAQS,MAAM,yBAAiB,IAAAQ,EAAAA,EAAI,IAAIN,IAAI,CAACC,EAAKC,iBACjD,MAAME,EAAkC,QAA3BjB,EAAAc,EAAIH,MAAM,yBAAiB,IAAAX,OAAA,EAAAA,EAAG,GACrCuB,EAA8B,QAAzBX,EAAAE,EAAIH,MAAM,uBAAe,IAAAC,OAAA,EAAAA,EAAG,GACjCY,EAA8B,QAAzBL,EAAAL,EAAIH,MAAM,uBAAe,IAAAQ,OAAA,EAAAA,EAAG,GACjCM,EAA4B,QAAxBC,EAAAZ,EAAIH,MAAM,sBAAc,IAAAe,OAAA,EAAAA,EAAG,GAErC,OAAON,EAAA,SAAAb,OAAAC,OAAA,CAAgBe,GAAIA,EAAIC,GAAIA,EAAIC,EAAGA,GAAiB,iBAATR,GAA2B,CAAEA,KAAMA,IAAjEF"}
+{"version":3,"file":"FlowIcon.js","sources":["../../../src/components/icon/FlowIcon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SvgIcon, SvgIconProps } from '@mui/material';\n\nexport interface FlowIconProps extends SvgIconProps {\n  /**\n   * SVG of Flow icon in string, e.g. ActionsIcons.Heart.stroke\n   */\n  source?: string;\n}\n\n/**\n * Renders Flow svg icon in string as @mui SvgIcon\n */\nexport const FlowIcon: React.FC<FlowIconProps> = forwardRef(({ source, ...rest }, ref) => {\n  return (\n    <SvgIcon viewBox=\"0 0 80 80\" ref={ref} {...rest}>\n      {(source?.match(/<path[^>]+>/g) ?? []).map((tag, i) => {\n        const d = tag.match(/d=\"([^\"]+)\"/)?.[1];\n        const fill = tag.match(/fill=\"([^\"]+)\"/)?.[1];\n        const opacity = tag.match(/opacity=\"([^\"]+)\"/)?.[1];\n\n        return (\n          <path\n            key={i}\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            opacity={opacity}\n            {...(fill !== 'currentColor' && { fill: fill })}\n            d={d}\n          />\n        );\n      })}\n      {(source?.match(/<circle[^>]+>/g) ?? []).map((tag, i) => {\n        const fill = tag.match(/fill=\"([^\"]+)\"/)?.[1];\n        const cx = tag.match(/cx=\"([^\"]+)\"/)?.[1];\n        const cy = tag.match(/cy=\"([^\"]+)\"/)?.[1];\n        const r = tag.match(/r=\"([^\"]+)\"/)?.[1];\n\n        return <circle key={i} cx={cx} cy={cy} r={r} {...(fill !== 'currentColor' && { fill: fill })} />;\n      })}\n    </SvgIcon>\n  );\n});\n"],"names":["FlowIcon","forwardRef","source","rest","ref","_jsxs","SvgIcon","viewBox","match","map","tag","i","d","fill","opacity","_jsx","fillRule","clipRule","cx","cy","r"],"mappings":"6HAaO,MAAMA,EAAoCC,EAAW,EAAGC,YAAWC,GAAQC,IAE9EC,EAACC,EAAO,CAACC,QAAQ,YAAYH,IAAKA,KAASD,aACvCD,GAAQM,MAAM,iBAAmB,IAAIC,IAAI,CAACC,EAAKC,KAC/C,MAAMC,EAAIF,EAAIF,MAAM,iBAAiB,GAC/BK,EAAOH,EAAIF,MAAM,oBAAoB,GACrCM,EAAUJ,EAAIF,MAAM,uBAAuB,GAEjD,OACEO,EAAA,OAAA,CAEEC,SAAS,UACTC,SAAS,UACTH,QAASA,KACK,iBAATD,GAA2B,CAAEA,KAAMA,GACxCD,EAAGA,GALED,MASTT,GAAQM,MAAM,mBAAqB,IAAIC,IAAI,CAACC,EAAKC,KACjD,MAAME,EAAOH,EAAIF,MAAM,oBAAoB,GACrCU,EAAKR,EAAIF,MAAM,kBAAkB,GACjCW,EAAKT,EAAIF,MAAM,kBAAkB,GACjCY,EAAIV,EAAIF,MAAM,iBAAiB,GAErC,OAAOO,EAAA,SAAA,CAAgBG,GAAIA,EAAIC,GAAIA,EAAIC,EAAGA,KAAiB,iBAATP,GAA2B,CAAEA,KAAMA,IAAjEF"}

package/components/icon/Icon.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as n}from"react/jsx-runtime";import{forwardRef as t,useMemo as i}from"react";import{iconDefinitions as o}from"./icon.definitions.js";const s=t((t,s)=>{var{name:a,className:m,iconStyle:r}=t,c=e(t,["name","className","iconStyle"]);const l=i(()=>{const e=a&&o.find(e=>[e.name,...e.altNames].includes(a))||m&&o.find(e=>m.split(" ").some(n=>[e.name,...e.altNames].includes(n)))||o.find(e=>"circle-question"===e.name);return"filled"===r?e.componentFilled:e.component},[a,m,r]);return n(l,Object.assign({ref:s,"data-testid":"Icon",className:["sa-i",m,a].filter(Boolean).join(" ")},c))});export{s as Icon};
+import{jsx as e}from"react/jsx-runtime";import{forwardRef as n,useMemo as t}from"react";import{iconDefinitions as i}from"./icon.definitions.js";const o=n(({name:n,className:o,iconStyle:s,...a},m)=>{const r=t(()=>{const e=n&&i.find(e=>[e.name,...e.altNames].includes(n))||o&&i.find(e=>o.split(" ").some(n=>[e.name,...e.altNames].includes(n)))||i.find(e=>"circle-question"===e.name);return"filled"===s?e.componentFilled:e.component},[n,o,s]);return e(r,{ref:m,"data-testid":"Icon",className:["sa-i",o,n].filter(Boolean).join(" "),...a})});export{o as Icon};
 //# sourceMappingURL=Icon.js.map

package/components/icon/Icon.js.map

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