@skodaflow/web-library 8.0.1 → 8.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderButton.js","sources":["../../../../../src/components/header/HeaderButton.tsx"],"sourcesContent":["import React, { ElementType, FC, ForwardedRef, forwardRef } from 'react';\nimport {\n  IconButton,\n  IconButtonProps,\n  ButtonBase,\n  Tooltip,\n  TooltipProps,\n  Badge,\n  BadgeProps,\n  useTheme,\n} from '@mui/material';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface HeaderButtonProps extends IconButtonProps<ElementType> {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: TooltipProps['title'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: BadgeProps;\n}\n\n/**\n * IconButton for the action links\n */\nexport const HeaderButton: FC<HeaderButtonProps> = forwardRef(\n  ({ children, sx, label, extend, tooltipProps, badgeProps, ...rest }, ref) => {\n    const theme = useTheme();\n    const { title, ...restTooltip } = tooltipProps ?? {};\n\n    if (extend) {\n      return (\n        <ButtonBase\n          sx={{\n            ...theme.typography.list,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'flex-start',\n            gap: 1.25,\n            py: 1.5,\n            px: 1.25,\n            // icon inside\n            '& .MuiSvgIcon-root': {\n              fontSize: '17px',\n            },\n            // disabled style\n            '&.Mui-disabled': {\n              color: 'disabled.tertiary',\n            },\n            // interactive style\n            ...getInteractiveStyle(\n              {\n                fontWeight: '300',\n              },\n              {\n                fontWeight: '700',\n              },\n            ),\n            // focus ring\n            ...getFocusRingStyle(theme),\n            '&&:before': {\n              borderRadius: '4px',\n            },\n            ...sx,\n          }}\n          ref={ref as ForwardedRef<HTMLButtonElement>}\n          data-testid=\"HeaderButton\"\n          {...rest}\n        >\n          <Badge {...badgeProps}>{children}</Badge>\n          {label || title}\n        </ButtonBase>\n      );\n    }\n\n    return (\n      <Tooltip title={label || title} {...restTooltip}>\n        <IconButton\n          sx={sx}\n          size=\"medium\"\n          ref={ref as ForwardedRef<HTMLButtonElement>}\n          data-testid=\"HeaderButton\"\n          {...rest}\n        >\n          <Badge {...badgeProps}>{children}</Badge>\n        </IconButton>\n      </Tooltip>\n    );\n  },\n);\n"],"names":["HeaderButton","forwardRef","_a","ref","children","sx","label","extend","tooltipProps","badgeProps","rest","__rest","theme","useTheme","_b","title","restTooltip","_jsxs","ButtonBase","Object","assign","typography","list","display","alignItems","justifyContent","gap","py","px","fontSize","color","getInteractiveStyle","fontWeight","getFocusRingStyle","borderRadius","_jsx","Badge","Tooltip","IconButton","size"],"mappings":"4MAoCO,MAAMA,EAAsCC,EAAAA,WACjD,CAACC,EAAoEC,KAApE,IAAAC,SAAEA,EAAQC,GAAEA,EAAEC,MAAEA,EAAKC,OAAEA,EAAMC,aAAEA,EAAYC,WAAEA,GAAUP,EAAKQ,EAAIC,EAAAA,OAAAT,EAAhE,gEACC,MAAMU,EAAQC,EAAAA,WACRC,EAA4BN,QAAAA,EAAgB,CAAA,GAA5CO,MAAEA,GAAKD,EAAKE,EAAWL,EAAAA,OAAAG,EAAvB,CAAA,UAEN,OAAIP,EAEAU,EAAAA,KAACC,EAAAA,WAAUC,OAAAC,OAAA,CACTf,GAAEc,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACGR,EAAMS,WAAWC,MAAI,CACxBC,QAAS,OACTC,WAAY,SACZC,eAAgB,aAChBC,IAAK,KACLC,GAAI,IACJC,GAAI,KAEJ,qBAAsB,CACpBC,SAAU,QAGZ,iBAAkB,CAChBC,MAAO,uBAGNC,EAAAA,oBACD,CACEC,WAAY,OAEd,CACEA,WAAY,SAIbC,EAAAA,kBAAkBrB,IAAM,CAC3B,YAAa,CACXsB,aAAc,SAEb7B,GAELF,IAAKA,EAAsC,cAC/B,gBACRO,EAAI,CAAAN,SAAA,CAER+B,EAAAA,IAACC,QAAKjB,OAAAC,OAAA,GAAKX,EAAU,CAAAL,SAAGA,KACvBE,GAASS,MAMdoB,EAAAA,IAACE,EAAAA,uBAAQtB,MAAOT,GAASS,GAAWC,YAClCmB,EAAAA,IAACG,EAAAA,0BACCjC,GAAIA,EACJkC,KAAK,SACLpC,IAAKA,EAAsC,cAC/B,gBACRO,EAAI,CAAAN,SAER+B,EAAAA,IAACC,QAAKjB,OAAAC,OAAA,CAAA,EAAKX,EAAU,CAAAL,SAAGA"}
+{"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":"2OAqCO,MAAMA,EAAsCC,EAAAA,WACjD,EAAGC,WAAUC,KAAIC,QAAOC,SAAQC,eAAcC,gBAAeC,GAAQC,KACnE,MAAMC,EAAQC,EAAAA,YACRC,MAAEA,KAAUC,GAAgBP,GAAgB,CAAA,EAElD,OAAID,EAEAS,OAACC,EAAAA,YACCZ,GAAIa,EAAAA,WACF,IACKN,EAAMO,WAAWC,KACpBC,QAAS,OACTC,WAAY,SACZC,eAAgB,aAChBC,IAAK,KACLC,GAAI,IACJC,GAAI,KAEJ,qBAAsB,CACpBC,SAAU,QAGZ,iBAAkB,CAChBC,MAAO,wBAGNC,sBACD,CACEC,WAAY,OAEd,CACEA,WAAY,WAIbC,EAAAA,kBAAkBnB,GACrB,YAAa,CACXoB,aAAc,QAGlB3B,GAEFM,IAAKA,EAAsC,cAC/B,kBACRD,EAAIN,SAAA,CAER6B,EAAAA,IAACC,QAAK,IAAKzB,EAAUL,SAAGA,IACvBE,GAASQ,KAMdmB,EAAAA,IAACE,EAAAA,SAAQrB,MAAOR,GAASQ,KAAWC,WAClCkB,EAAAA,IAACG,EAAAA,YACC/B,GAAIA,EACJgC,KAAK,SACL1B,IAAKA,EAAsC,cAC/B,kBACRD,EAAIN,SAER6B,EAAAA,IAACC,EAAAA,MAAK,IAAKzB,EAAUL,SAAGA"}

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

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

package/cjs/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":"yLAqDO,MAAMA,EAAsDC,EAAAA,WACjE,CACEC,EAWAC,SAXAC,SACEA,EAAQC,UACRA,EAASC,SACTA,EAAQC,gBACRA,EAAkB,EAACC,UACnBA,EAASC,cACTA,EAAaC,WACbA,EAAUC,kBACVA,KACGC,EAAIC,EAAAA,OAAAX,EATT,CAAA,WAAA,YAAA,WAAA,kBAAA,YAAA,gBAAA,aAAA,sBAaA,MAAOY,EAAQC,GAAaC,EAAAA,SAAS,OAC9BC,EAAUC,GAAeF,EAAAA,SAAST,GAEzC,OACEY,OAAAC,EAAAA,SAAA,CAAAhB,SAAA,CACEiB,EAAAA,IAACC,8BACCC,QAAUC,GAAMT,EAAUS,EAAEC,eAC5BtB,IAAKA,EAAG,cACI,wBACRS,EAAI,CAAAR,SAEPA,GAAYiB,MAACK,EAAAA,UAAS,CAAA,MAEzBL,EAAAA,IAACM,EAAAA,KAAIC,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,EAAAA,KAACoB,EAAAA,SAAQX,OAAAC,OAAA,CAEPZ,SAAUmB,EACVb,QAAS,KACPjB,SAAAA,EAAW4B,EAAMC,GACjBjB,EAAYiB,KAEV1B,EAAa,CAAAL,SAAA,CAEjBiB,EAAAA,IAACmB,EAAAA,MAAKZ,OAAAC,OAAA,CAACY,QAASL,EAAYM,UAAU,GAAQhC,IAC9CW,EAAAA,IAACsB,EAAAA,aAAYf,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":"sKAqDO,MAAMA,EAAsDC,EAAAA,WACjE,EAEIC,WACAC,YACAC,WACAC,kBAAkB,EAClBC,YACAC,gBACAC,aACAC,uBACGC,GAELC,KAEA,MAAOC,EAAQC,GAAaC,EAAAA,SAAS,OAC9BC,EAAUC,GAAeF,EAAAA,SAAST,GAEzC,OACEY,EAAAA,KAAAC,WAAA,CAAAhB,SAAA,CACEiB,EAAAA,IAACC,gBACCC,QAAUC,GAAMT,EAAUS,EAAEC,eAC5BZ,IAAKA,gBACO,0BACRD,EAAIR,SAEPA,GAAYiB,EAAAA,IAACK,EAAAA,gBAEhBL,EAAAA,IAACM,EAAAA,KAAI,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,EAAAA,KAACqB,EAAAA,SAAQ,CAEPvB,SAAUiB,EACVX,QAAS,KACPjB,IAAW0B,EAAMC,GACjBf,EAAYe,OAEVI,EAAqBjC,SAAA,CAEzBiB,EAAAA,IAACoB,EAAAA,MAAK,CAACC,QAASR,EAAYS,UAAU,KAAQL,IAC9CjB,EAAAA,IAACuB,EAAAA,aAAY,IAAKL,EAAyBnC,SAAG+B,MATzCA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderLogo.js","sources":["../../../../../src/components/header/HeaderLogo.tsx"],"sourcesContent":["import React, { FC, ForwardedRef, forwardRef } from 'react';\nimport { Link, LinkProps, useTheme } from '@mui/material';\nimport { Logo, LogoProps } from '@/src/components/logo/Logo';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface HeaderLogoProps extends LinkProps {\n  /**\n   * Properties applied to Logo component\n   */\n  logoProps?: LogoProps;\n}\n\n/**\n * Logo with link wrapper\n */\nexport const HeaderLogo: FC<HeaderLogoProps> = forwardRef(({ sx, children, href, logoProps, ...rest }, ref) => {\n  const theme = useTheme();\n\n  if (href || rest.onClick) {\n    return (\n      <Link\n        sx={{\n          // same style is applied in Header logo wrapper\n          display: 'block',\n          position: 'relative',\n          py: 1,\n          // add proper focus ring\n          ...getFocusRingStyle(theme),\n          // remove default link box shadow\n          '&.Mui-focusVisible': {\n            boxShadow: 'none',\n          },\n          '& .MuiSvgIcon-root': {\n            display: 'block',\n          },\n        }}\n        href={href || '#'}\n        ref={ref}\n        aria-label=\"Home\"\n        {...rest}\n      >\n        {children || <Logo {...logoProps} />}\n      </Link>\n    );\n  }\n  return children || <Logo sx={sx} ref={ref as unknown as ForwardedRef<SVGSVGElement>} {...logoProps} />;\n});\n"],"names":["HeaderLogo","forwardRef","_a","ref","sx","children","href","logoProps","rest","__rest","theme","useTheme","onClick","_jsx","Link","Object","assign","display","position","py","getFocusRingStyle","boxShadow","Logo"],"mappings":"qLAeO,MAAMA,EAAkCC,EAAAA,WAAW,CAACC,EAA4CC,KAA5C,IAAAC,GAAEA,EAAEC,SAAEA,EAAQC,KAAEA,EAAIC,UAAEA,GAASL,EAAKM,EAAIC,EAAAA,OAAAP,EAAxC,CAAA,KAAA,WAAA,OAAA,cACzD,MAAMQ,EAAQC,EAAAA,WAEd,OAAIL,GAAQE,EAAKI,QAEbC,EAAAA,IAACC,OAAIC,OAAAC,OAAA,CACHZ,GAAEW,OAAAC,OAAAD,OAAAC,OAAA,CAEAC,QAAS,QACTC,SAAU,WACVC,GAAI,GAEDC,EAAAA,kBAAkBV,IAAM,CAE3B,qBAAsB,CACpBW,UAAW,QAEb,qBAAsB,CACpBJ,QAAS,WAGbX,KAAMA,GAAQ,IACdH,IAAKA,EAAG,aACG,QACPK,EAAI,CAAAH,SAEPA,GAAYQ,MAACS,EAAAA,sBAASf,OAItBF,GAAYQ,EAAAA,IAACS,EAAAA,oBAAKlB,GAAIA,EAAID,IAAKA,GAAmDI"}
+{"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":"0NAgBaA,EAAkCC,EAAAA,WAAW,EAAGC,KAAIC,WAAUC,OAAMC,eAAcC,GAAQC,KACrG,MAAMC,EAAQC,EAAAA,WAEd,OAAIL,GAAQE,EAAKI,QAEbC,MAACC,EAAAA,MACCV,GAAIW,EAAAA,WACF,CAEEC,QAAS,QACTC,SAAU,WACVC,GAAI,KAEDC,EAAAA,kBAAkBT,GAErB,qBAAsB,CACpBU,UAAW,QAEb,qBAAsB,CACpBJ,QAAS,UAGbZ,GAEFE,KAAMA,GAAQ,IACdG,IAAKA,EAAsC,aAChC,UACPD,EAAIH,SAEPA,GAAYQ,EAAAA,IAACQ,EAAAA,KAAI,IAAKd,MAItBM,EAAAA,yBAAGR,GAAYQ,EAAAA,IAACQ,EAAAA,MAAKjB,GAAIA,EAAIK,IAAKA,KAAmDF"}

package/cjs/components/header/HeaderNavigationHero.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigationHero.js","sources":["../../../../../src/components/header/HeaderNavigationHero.tsx"],"sourcesContent":["import React, { FC, forwardRef, 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/cjs/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/cjs/components/header/HeaderNavigationLink.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigationLink.js","sources":["../../../../../src/components/header/HeaderNavigationLink.tsx"],"sourcesContent":["import React, { useMemo, ElementType, FC, forwardRef, ReactNode, ForwardedRef } from 'react';\nimport { ButtonBase, ButtonBaseProps, Box, BoxProps, useTheme } from '@mui/material';\nimport { ArrowTopRightIcon } from '@/src/components/icon/stroke/ArrowTopRightIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { getTypography } from '@/src/materialui/typography/typography.theme';\n\nexport interface HeaderNavigationLinkProps extends ButtonBaseProps<ElementType> {\n  /**\n   * Displayed navigation text, can be provided as children as well\n   */\n  label?: ReactNode;\n  /**\n   * Marks item currently active\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Indicates external link\n   * @default false\n   */\n  external?: boolean;\n  /**\n   * Expect icon component that will be rendered after the label\n   */\n  icon?: ReactNode | 'arrow-ne';\n  /**\n   * 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":"0TA2CO,MAAMA,EAAsDC,EAAAA,WACjE,CACEC,EAYAC,SAZAC,GACEA,EAAEC,SACFA,EAAQC,MACRA,EAAKC,KACLA,EAAIC,OACJA,GAAS,EAAKC,SACdA,GAAW,EAAKC,kBAChBA,EAAiBC,WACjBA,EAAUC,mBACVA,GAAkBV,EACfW,EAAIC,EAAAA,OAAAZ,EAVT,CAAA,KAAA,WAAA,QAAA,OAAA,SAAA,WAAA,oBAAA,aAAA,uBAcA,MAAMa,EAAQC,EAAAA,WACRC,EAA8CP,QAAAA,EAAqB,IAAjEN,GAAIc,GAAcD,EAAKE,EAAgBL,EAAAA,OAAAG,EAAzC,CAAA,OACAG,EAAgCT,QAAAA,EAAc,IAA5CP,GAAIiB,GAAOD,EAAKE,EAASR,EAAAA,OAAAM,EAA3B,CAAA,OACAG,EAAgDX,QAAAA,EAAsB,IAApER,GAAIoB,GAAeD,EAAKE,EAAiBX,EAAAA,OAAAS,EAA3C,CAAA,OAEAG,EAAWC,EAAAA,QAAQ,IACP,cAATpB,GAAwBE,EAAWmB,EAAAA,IAACC,EAAAA,kBAAiB,CAAA,GAAMtB,EACjE,CAACA,EAAME,IAEV,OACEqB,EAAAA,KAACC,EAAAA,0BACC3B,GAAE4B,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACGlB,EAAMmB,WAAWC,MAAI,CACxB,CAACpB,EAAMqB,YAAYC,KAAK,OAAML,OAAAC,OAAA,CAAA,EAEzBK,EAAAA,cAAc,OAA4B,QAApBvB,EAAMwB,UAAqB,UAEtDC,SAAU,WACVC,OAAQ,MAERC,QAAS,CAAEC,GAAI,OAAQC,GAAI,eAC3BC,MAAO,CAAEF,GAAI,OAAQC,GAAI,QACzBE,IAAK,GACLC,WAAY,SACZC,eAAgB,aAChBC,GAAI,CAAEN,GAAI,EAAGC,GAAI,GACjBM,GAAI,CAAEP,GAAI,EAAGC,GAAI,IACjBO,WACE,4JAEF,qBAAsB,CACpBC,SAAU,QAGZ,UAASpB,OAAAC,OAAA,CACPoB,QAAS,CAAEV,GAAI,OAAQC,GAAI,MAC3BJ,SAAU,WACVc,KAAM,IACNC,MAAO,IAEPC,OAAQ,IACRC,OAAQ,MACRC,gBAAiB,2BACblD,GAAU,CACZiD,OAAQ,MACRC,gBAAiB,iBAIrB,iBAAkB,CAChBC,MAAO,uBAGNC,EAAAA,mCAECD,MAA8B,SAAvB5C,EAAM8C,QAAQC,KAAkB,kBAAoB,kBAC3D,WAAY,CACVJ,gBAAiB,2BAEnB,oCAAqC,CACnCK,QAAS,KAEX,4CAA6C,CAC3CA,QAAS,MAGPvD,GAAU,CACZmD,MAAO,eACP,WAAY,CACVD,gBAAiB,gBAEnB,oCAAqC,CACnCK,QAAS,KAEX,4CAA6C,CAC3CA,QAAS,OAIf,CACEJ,MAAO,eACP,WAAY,CACVD,gBAAiB,gBAEnB,oCAAqC,CACnCK,QAAS,KAEX,4CAA6C,CAC3CA,QAAS,QAIZC,EAAAA,kBAAkBjD,IAAM,CAE3B,YAAa,CACXkD,aAAc,MAEdC,IAAK,CAAEvB,GAAI,IAAKC,GAAI,OACpBY,OAAQ,CAAEb,GAAI,IAAKC,GAAI,WAEtBxC,GAELD,IAAKA,EAAsC,cAC/B,wBACRU,EAAI,CAAAR,SAAA,EAENA,GAAYC,IACZwB,EAAAA,KAACqC,MAAGnC,OAAAC,OAAA,CACFmC,UAAU,wCACVhE,GAAE4B,OAAAC,OAAA,CACAS,QAAS,cACTK,WAAY,SACZC,eAAgB,SAChBqB,UAAW,SACX7B,SAAU,YACPtB,IAEDC,EAAgB,CAAAd,SAAA,CAEpBuB,MAACuC,EAAAA,IAAGnC,OAAAC,OAAA,CACFmC,UAAU,iCACVhE,GAAE4B,OAAAC,OAAA,CACAO,SAAU,WACVc,KAAM,CAAEX,GAAI,IAAKC,GAAI,SAClBvB,IAEDC,EAAS,CAAAjB,SAEZA,GAAYC,KAEfsB,EAAAA,IAACuC,MAAGnC,OAAAC,OAAA,CACFmC,UAAU,yCACVhE,GAAE4B,OAAAC,OAAA,CACAqC,WAAY,MACZP,QAAS,IACTvB,SAAU,YACPhB,GAAe,cAER,QACRC,EAAiB,CAAApB,SAEpBA,GAAYC,SAIlBoB"}
+{"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/cjs/components/header/HeaderNavigationMenu.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigationMenu.js","sources":["../../../../../src/components/header/HeaderNavigationMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useRef, useState } from 'react';\nimport {\n  Menu,\n  MenuProps,\n  Collapse,\n  useMediaQuery,\n  Theme,\n  useTheme,\n  CollapseProps,\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from '@mui/material';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface HeaderNavigationMenuProps extends HeaderNavigationLinkProps {\n  /**\n   * Content of the menu, can be provided as children as well\n   */\n  menuItems?: ReactNode;\n  /**\n   * Props applied to menu\n   */\n  menuProps?: MenuProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to menu on mobile\n   */\n  collapseProps?: CollapseProps;\n}\n\n/**\n * HeaderNavigationLink with the integration of the menu\n */\nexport const HeaderNavigationMenu: FC<HeaderNavigationMenuProps> = forwardRef(\n  (\n    { children, sx, label, icon, onClick, menuItems, menuProps, collapseProps, clickAwayListenerProps, ...rest },\n    ref,\n  ) => {\n    const buttonRef = useRef();\n    const [anchor, setAnchor] = useState(null);\n    const theme = useTheme();\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const { sx: collapseSx, ...restCollapse } = collapseProps ?? {};\n\n    return (\n      <>\n        <HeaderNavigationLink\n          active={!!anchor}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  // same code is applied to HeaderNavigationHero.tsx\n                  '&&&': {\n                    fontSize: { xs: '20px', lg: '14px' },\n                  },\n                  color: {\n                    xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                    lg: 'currentColor',\n                  },\n                  transform: `rotate(${anchor ? '180' : '0'}deg)`,\n                  transition: {\n                    xs: theme.transitions.create('transform', {\n                      duration: theme.transitions.duration.shortest,\n                    }),\n                    lg: 'none',\n                  },\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor((prev) => (!prev ? e.currentTarget : null));\n          }}\n          sx={{\n            justifyContent: { xs: 'space-between', lg: 'flex-start' },\n            ...sx,\n          }}\n          ref={ref ?? buttonRef}\n          data-testid=\"HeaderNavigationMenu\"\n          {...rest}\n        >\n          {label}\n        </HeaderNavigationLink>\n        {downLg ? (\n          <ClickAwayListener\n            onClickAway={(e) => {\n              !((ref as React.RefObject<HTMLButtonElement>) ?? buttonRef)?.current?.contains(e?.target as Node) &&\n                setAnchor(null);\n            }}\n            {...clickAwayListenerProps}\n          >\n            <Collapse\n              in={!!anchor}\n              sx={{\n                // style menu items inside\n                '& .MuiMenuItem-root': {\n                  ...getInteractiveStyle(\n                    {\n                      background: 'none',\n                      fontWeight: '300',\n                      color: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                    },\n                    {\n                      background: 'none',\n                      fontWeight: '700',\n                      color: 'currentColor',\n                    },\n                  ),\n                },\n                ...collapseSx,\n              }}\n              {...restCollapse}\n            >\n              {children || menuItems}\n            </Collapse>\n          </ClickAwayListener>\n        ) : (\n          <Menu open={!!anchor} anchorEl={anchor} onClose={() => setAnchor(null)} {...menuProps}>\n            {children || menuItems}\n          </Menu>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["HeaderNavigationMenu","forwardRef","_a","ref","children","sx","label","icon","onClick","menuItems","menuProps","collapseProps","clickAwayListenerProps","rest","__rest","buttonRef","useRef","anchor","setAnchor","useState","theme","useTheme","downLg","useMediaQuery","breakpoints","down","_b","collapseSx","restCollapse","_jsxs","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","currentTarget","Object","assign","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Collapse","in","getInteractiveStyle","background","fontWeight","Menu","open","anchorEl","onClose"],"mappings":"2PAsCO,MAAMA,EAAsDC,EAAAA,WACjE,CACEC,EACAC,SADAC,SAAEA,EAAQC,GAAEA,EAAEC,MAAEA,EAAKC,KAAEA,EAAIC,QAAEA,EAAOC,UAAEA,EAASC,UAAEA,EAASC,cAAEA,EAAaC,uBAAEA,KAA2BC,EAAIC,EAAAA,OAAAZ,EAA1G,CAAA,WAAA,KAAA,QAAA,OAAA,UAAA,YAAA,YAAA,gBAAA,2BAGA,MAAMa,EAAYC,EAAAA,UACXC,EAAQC,GAAaC,EAAAA,SAAS,MAC/BC,EAAQC,EAAAA,WACRC,EAASC,EAAAA,cAAqBH,EAAMI,YAAYC,KAAK,OACrDC,EAAsCf,QAAAA,EAAiB,IAArDN,GAAIsB,GAAUD,EAAKE,EAAYd,EAAAA,OAAAY,EAAjC,CAAA,OAEN,OACEG,EAAAA,2BACEC,MAACC,EAAAA,oCACCC,SAAUf,EACVV,KACEA,GACEuB,MAACG,EAAAA,gBAAe,CACd5B,GAAI,CAEF,MAAO,CACL6B,SAAU,CAAEC,GAAI,OAAQC,GAAI,SAE9BC,MAAO,CACLF,GAA2B,SAAvBf,EAAMkB,QAAQC,KAAkB,kBAAoB,kBACxDH,GAAI,gBAENI,UAAW,UAAUvB,EAAS,MAAQ,UACtCwB,WAAY,CACVN,GAAIf,EAAMsB,YAAYC,OAAO,YAAa,CACxCC,SAAUxB,EAAMsB,YAAYE,SAASC,WAEvCT,GAAI,WAMd5B,QAAUsC,IACRtC,SAAAA,EAAUsC,GACV5B,EAAW6B,GAAWA,EAAyB,KAAlBD,EAAEE,gBAEjC3C,GAAE4C,OAAAC,OAAA,CACAC,eAAgB,CAAEhB,GAAI,gBAAiBC,GAAI,eACxC/B,GAELF,IAAKA,QAAAA,EAAOY,gBACA,wBACRF,EAAI,CAAAT,SAEPE,KAEFgB,EACCQ,EAAAA,IAACsB,oBAAiBH,OAAAC,OAAA,CAChBG,YAAcP,0BAC+C,QAA1DpB,EAA4C,UAA1CvB,SAA0C,IAAAD,EAAAA,EAAIa,SAAU,IAAAW,OAAA,EAAAA,EAAE4B,8BAASC,SAAST,eAAAA,EAAGU,UAChFtC,EAAU,QAEVN,EAAsB,CAAAR,SAE1B0B,EAAAA,IAAC2B,EAAAA,SAAQR,OAAAC,OAAA,CACPQ,KAAMzC,EACNZ,GAAE4C,OAAAC,OAAA,CAEA,sBAAqBD,OAAAC,OAAA,CAAA,EAChBS,EAAAA,oBACD,CACEC,WAAY,OACZC,WAAY,MACZxB,MAA8B,SAAvBjB,EAAMkB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEqB,WAAY,OACZC,WAAY,MACZxB,MAAO,mBAIVV,IAEDC,YAEHxB,GAAYK,QAIjBqB,EAAAA,IAACgC,EAAAA,KAAIb,OAAAC,OAAA,CAACa,OAAQ9C,EAAQ+C,SAAU/C,EAAQgD,QAAS,IAAM/C,EAAU,OAAWR,YACzEN,GAAYK"}
+{"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":"0RAwCO,MAAMA,EAAsDC,EAAAA,WACjE,EAEIC,WACAC,KACAC,QACAC,OACAC,UACAC,SACAC,YACAC,YACAC,gBACAC,4BACGC,GAELC,KAEA,MAAMC,EAAYC,EAAAA,OAAO,OAClBC,EAAQC,GAAaC,EAAAA,SAAS,MAC/BC,EAAQC,EAAAA,WACRC,EAASC,EAAAA,cAAqBH,EAAMI,YAAYC,KAAK,OACrDC,OAAoBC,IAAXnB,EAAuBc,EAASd,GACvCJ,GAAIwB,KAAeC,GAAiBlB,GAAiB,CAAA,EAE7D,OACEmB,EAAAA,KAAAC,EAAAA,SAAA,CAAA5B,SAAA,CACE6B,MAACC,EAAAA,qBAAoB,CACnBC,SAAUjB,EACVT,OAAQA,EACRF,KACEA,GACE0B,MAACG,EAAAA,gBAAe,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,aACF,CACEC,oBACazB,IAAXnB,EACI,CAAE6B,GAAI,gBAAiBC,GAAI,cAC3B,CAAC,gBAAiB,gBAAgB9B,IAE1CJ,GAEFU,IAAKA,GAAOC,EAAS,cACT,0BACRF,EAAIV,SAEPE,IAEFqB,EACCM,EAAAA,IAACqB,EAAAA,kBAAiB,CAChBC,YAAcN,MACTlC,GAA8CC,IAAYwC,SAASC,SAASR,GAAGS,SAChFvC,EAAU,UAEVN,EAAsBT,SAE1B6B,MAAC0B,EAAAA,SAAQ,CACPC,KAAM1C,EACNb,GAAI+C,EAAAA,WACF,CAEE,sBAAuB,IAClBS,sBACD,CACEC,WAAY,OACZC,WAAY,MACZvB,MAA8B,SAAvBnB,EAAMoB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEoB,WAAY,OACZC,WAAY,MACZvB,MAAO,mBAKfX,MAEEC,WAEJG,EAAAA,IAAC+B,EAAAA,SAAQ,CAAA5D,SACNA,GAAYM,QAKnBuB,EAAAA,IAACgC,OAAI,CAACC,OAAQhD,EAAQiD,SAAUjD,EAAQkD,QAAS,IAAMjD,EAAU,SAAWR,EAASP,SAClFA,GAAYM"}

package/cjs/components/hotspotCard/HotspotCard.js

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

package/cjs/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/cjs/components/icon/FlowIcon.js

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

package/cjs/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":"iHAaO,MAAMA,EAAoCC,EAAAA,WAAW,CAACC,EAAqBC,cAArBC,OAAEA,GAAMF,EAAKG,EAAIC,EAAAA,OAAAJ,EAAjB,YAC3D,OACEK,EAAAA,KAACC,EAAAA,QAAOC,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,EAAAA,IAAA,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,EAAAA,IAAA,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":"8FAaO,MAAMA,EAAoCC,EAAAA,WAAW,EAAGC,YAAWC,GAAQC,IAE9EC,EAAAA,KAACC,EAAAA,QAAO,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,EAAAA,IAAA,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,EAAAA,IAAA,SAAA,CAAgBG,GAAIA,EAAIC,GAAIA,EAAIC,EAAGA,KAAiB,iBAATP,GAA2B,CAAEA,KAAMA,IAAjEF"}

package/cjs/components/icon/Icon.js

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