@skodaflow/web-library 8.1.0 → 8.3.0

package/components/header/HeaderNavigationHero.js.map

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

package/components/header/HeaderNavigationLink.js

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

package/components/header/HeaderNavigationLink.js.map

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

package/components/header/HeaderNavigationMenu.js

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

package/components/header/HeaderNavigationMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigationMenu.js","sources":["../../../src/components/header/HeaderNavigationMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useRef, useState } from 'react';\nimport {\n  Menu,\n  MenuProps,\n  Collapse,\n  useMediaQuery,\n  Theme,\n  useTheme,\n  CollapseProps,\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from '@mui/material';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface HeaderNavigationMenuProps extends HeaderNavigationLinkProps {\n  /**\n   * Content of the menu, can be provided as children as well\n   */\n  menuItems?: ReactNode;\n  /**\n   * Props applied to menu\n   */\n  menuProps?: MenuProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to menu on mobile\n   */\n  collapseProps?: CollapseProps;\n}\n\n/**\n * HeaderNavigationLink with the integration of the menu\n */\nexport const HeaderNavigationMenu: FC<HeaderNavigationMenuProps> = forwardRef(\n  (\n    {\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={{\n            justifyContent:\n              extend === undefined\n                ? { xs: 'space-between', lg: 'flex-start' }\n                : ['space-between', 'flex-start'][+!extend],\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={{\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","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","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Collapse","in","getInteractiveStyle","background","fontWeight","Menu","open","anchorEl","onClose"],"mappings":"0bAsCO,MAAMA,EAAsDC,EACjE,EAEIC,WACAC,KACAC,QACAC,OACAC,UACAC,SACAC,YACAC,YACAC,gBACAC,4BACGC,GAELC,KAEA,MAAMC,EAAYC,EAAO,OAClBC,EAAQC,GAAaC,EAAS,MAC/BC,EAAQC,IACRC,EAASC,EAAqBH,EAAMI,YAAYC,KAAK,OACrDC,OAAoBC,IAAXnB,EAAuBc,EAASd,GACvCJ,GAAIwB,KAAeC,GAAiBlB,GAAiB,CAAA,EAE7D,OACEmB,EAAAC,EAAA,CAAA5B,SAAA,CACE6B,EAACC,EAAoB,CACnBC,SAAUjB,EACVT,OAAQA,EACRF,KACEA,GACE0B,EAACG,EAAe,CACd/B,GAAI,CAEF,MAAO,CACLgC,cAAqBT,IAAXnB,EAAuB,CAAE6B,GAAI,OAAQC,GAAI,QAAW,CAAC,OAAQ,UAAU9B,IAEnF+B,WACaZ,IAAXnB,EACI,CACE6B,GAA2B,SAAvBjB,EAAMoB,QAAQC,KAAkB,kBAAoB,kBACxDH,GAAI,gBAEN,CAAwB,SAAvBlB,EAAMoB,QAAQC,KAAkB,kBAAoB,kBAAmB,kBACpEjC,GAEVkC,UAAW,UAAUzB,EAAS,MAAQ,UACtC0B,gBACahB,IAAXnB,EACI,CACE6B,GAAIjB,EAAMwB,YAAYC,OAAO,YAAa,CACxCC,SAAU1B,EAAMwB,YAAYE,SAASC,WAEvCT,GAAI,QAEN,CACElB,EAAMwB,YAAYC,OAAO,YAAa,CACpCC,SAAU1B,EAAMwB,YAAYE,SAASC,WAEvC,UACEvC,MAKlBD,QAAUyC,IACRzC,IAAUyC,GACV9B,EAAW+B,GAAWA,EAAyB,KAAlBD,EAAEE,gBAEjC9C,GAAI,CACF+C,oBACaxB,IAAXnB,EACI,CAAE6B,GAAI,gBAAiBC,GAAI,cAC3B,CAAC,gBAAiB,gBAAgB9B,MACrCJ,GAELU,IAAKA,GAAOC,EAAS,cACT,0BACRF,EAAIV,SAEPE,IAEFqB,EACCM,EAACoB,EAAiB,CAChBC,YAAcL,MACTlC,GAA8CC,IAAYuC,SAASC,SAASP,GAAGQ,SAChFtC,EAAU,UAEVN,EAAsBT,SAE1B6B,EAACyB,EAAQ,CACPC,KAAMzC,EACNb,GAAI,CAEF,sBAAuB,IAClBuD,EACD,CACEC,WAAY,OACZC,WAAY,MACZtB,MAA8B,SAAvBnB,EAAMoB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEmB,WAAY,OACZC,WAAY,MACZtB,MAAO,qBAIVX,MAEDC,WAEH1B,GAAYM,MAIjBuB,EAAC8B,EAAI,CAACC,OAAQ9C,EAAQ+C,SAAU/C,EAAQgD,QAAS,IAAM/C,EAAU,SAAWR,EAASP,SAClFA,GAAYM"}
+{"version":3,"file":"HeaderNavigationMenu.js","sources":["../../../src/components/header/HeaderNavigationMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useRef, useState } from 'react';\nimport {\n  Menu,\n  MenuList,\n  MenuProps,\n  Collapse,\n  useMediaQuery,\n  Theme,\n  useTheme,\n  CollapseProps,\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface HeaderNavigationMenuProps extends HeaderNavigationLinkProps {\n  /**\n   * Content of the menu, can be provided as children as well\n   */\n  menuItems?: ReactNode;\n  /**\n   * Props applied to menu\n   */\n  menuProps?: MenuProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to menu on mobile\n   */\n  collapseProps?: CollapseProps;\n}\n\n/**\n * HeaderNavigationLink with the integration of the menu\n */\nexport const HeaderNavigationMenu: FC<HeaderNavigationMenuProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      label,\n      icon,\n      onClick,\n      extend,\n      menuItems,\n      menuProps,\n      collapseProps,\n      clickAwayListenerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const buttonRef = useRef(null);\n    const [anchor, setAnchor] = useState(null);\n    const theme = useTheme();\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const mobile = extend === undefined ? downLg : extend;\n    const { sx: collapseSx, ...restCollapse } = collapseProps ?? {};\n\n    return (\n      <>\n        <HeaderNavigationLink\n          active={!!anchor}\n          extend={extend}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  // same code is applied to HeaderNavigationHero.tsx\n                  '&&&': {\n                    fontSize: extend === undefined ? { xs: '20px', lg: '14px' } : ['20px', '14px'][+!extend],\n                  },\n                  color:\n                    extend === undefined\n                      ? {\n                          xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                          lg: 'currentColor',\n                        }\n                      : [theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700', 'currentColor'][\n                          +!extend\n                        ],\n                  transform: `rotate(${anchor ? '180' : '0'}deg)`,\n                  transition:\n                    extend === undefined\n                      ? {\n                          xs: theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          lg: 'none',\n                        }\n                      : [\n                          theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          'none',\n                        ][+!extend],\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor((prev) => (!prev ? e.currentTarget : null));\n          }}\n          sx={sxOverride(\n            {\n              justifyContent:\n                extend === undefined\n                  ? { xs: 'space-between', lg: 'flex-start' }\n                  : ['space-between', 'flex-start'][+!extend],\n            },\n            sx,\n          )}\n          ref={ref ?? buttonRef}\n          data-testid=\"HeaderNavigationMenu\"\n          {...rest}\n        >\n          {label}\n        </HeaderNavigationLink>\n        {mobile ? (\n          <ClickAwayListener\n            onClickAway={(e) => {\n              !((ref as React.RefObject<HTMLButtonElement>) ?? buttonRef)?.current?.contains(e?.target as Node) &&\n                setAnchor(null);\n            }}\n            {...clickAwayListenerProps}\n          >\n            <Collapse\n              in={!!anchor}\n              sx={sxOverride(\n                {\n                  // style menu items inside\n                  '& .MuiMenuItem-root': {\n                    ...getInteractiveStyle(\n                      {\n                        background: 'none',\n                        fontWeight: '300',\n                        color: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                      },\n                      {\n                        background: 'none',\n                        fontWeight: '700',\n                        color: 'currentColor',\n                      },\n                    ),\n                  },\n                },\n                collapseSx,\n              )}\n              {...restCollapse}\n            >\n              <MenuList>\n                {children || menuItems}\n              </MenuList>\n            </Collapse>\n          </ClickAwayListener>\n        ) : (\n          <Menu open={!!anchor} anchorEl={anchor} onClose={() => setAnchor(null)} {...menuProps}>\n            {children || menuItems}\n          </Menu>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["HeaderNavigationMenu","forwardRef","children","sx","label","icon","onClick","extend","menuItems","menuProps","collapseProps","clickAwayListenerProps","rest","ref","buttonRef","useRef","anchor","setAnchor","useState","theme","useTheme","downLg","useMediaQuery","breakpoints","down","mobile","undefined","collapseSx","restCollapse","_jsxs","_Fragment","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","currentTarget","sxOverride","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Collapse","in","getInteractiveStyle","background","fontWeight","MenuList","Menu","open","anchorEl","onClose"],"mappings":"0gBAwCO,MAAMA,EAAsDC,EACjE,EAEIC,WACAC,KACAC,QACAC,OACAC,UACAC,SACAC,YACAC,YACAC,gBACAC,4BACGC,GAELC,KAEA,MAAMC,EAAYC,EAAO,OAClBC,EAAQC,GAAaC,EAAS,MAC/BC,EAAQC,IACRC,EAASC,EAAqBH,EAAMI,YAAYC,KAAK,OACrDC,OAAoBC,IAAXnB,EAAuBc,EAASd,GACvCJ,GAAIwB,KAAeC,GAAiBlB,GAAiB,CAAA,EAE7D,OACEmB,EAAAC,EAAA,CAAA5B,SAAA,CACE6B,EAACC,EAAoB,CACnBC,SAAUjB,EACVT,OAAQA,EACRF,KACEA,GACE0B,EAACG,EAAe,CACd/B,GAAI,CAEF,MAAO,CACLgC,cAAqBT,IAAXnB,EAAuB,CAAE6B,GAAI,OAAQC,GAAI,QAAW,CAAC,OAAQ,UAAU9B,IAEnF+B,WACaZ,IAAXnB,EACI,CACE6B,GAA2B,SAAvBjB,EAAMoB,QAAQC,KAAkB,kBAAoB,kBACxDH,GAAI,gBAEN,CAAwB,SAAvBlB,EAAMoB,QAAQC,KAAkB,kBAAoB,kBAAmB,kBACpEjC,GAEVkC,UAAW,UAAUzB,EAAS,MAAQ,UACtC0B,gBACahB,IAAXnB,EACI,CACE6B,GAAIjB,EAAMwB,YAAYC,OAAO,YAAa,CACxCC,SAAU1B,EAAMwB,YAAYE,SAASC,WAEvCT,GAAI,QAEN,CACElB,EAAMwB,YAAYC,OAAO,YAAa,CACpCC,SAAU1B,EAAMwB,YAAYE,SAASC,WAEvC,UACEvC,MAKlBD,QAAUyC,IACRzC,IAAUyC,GACV9B,EAAW+B,GAAWA,EAAyB,KAAlBD,EAAEE,gBAEjC9C,GAAI+C,EACF,CACEC,oBACazB,IAAXnB,EACI,CAAE6B,GAAI,gBAAiBC,GAAI,cAC3B,CAAC,gBAAiB,gBAAgB9B,IAE1CJ,GAEFU,IAAKA,GAAOC,EAAS,cACT,0BACRF,EAAIV,SAEPE,IAEFqB,EACCM,EAACqB,EAAiB,CAChBC,YAAcN,MACTlC,GAA8CC,IAAYwC,SAASC,SAASR,GAAGS,SAChFvC,EAAU,UAEVN,EAAsBT,SAE1B6B,EAAC0B,EAAQ,CACPC,KAAM1C,EACNb,GAAI+C,EACF,CAEE,sBAAuB,IAClBS,EACD,CACEC,WAAY,OACZC,WAAY,MACZvB,MAA8B,SAAvBnB,EAAMoB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEoB,WAAY,OACZC,WAAY,MACZvB,MAAO,mBAKfX,MAEEC,WAEJG,EAAC+B,EAAQ,CAAA5D,SACNA,GAAYM,QAKnBuB,EAACgC,EAAI,CAACC,OAAQhD,EAAQiD,SAAUjD,EAAQkD,QAAS,IAAMjD,EAAU,SAAWR,EAASP,SAClFA,GAAYM"}

package/components/hotspotCard/HotspotCard.js

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

package/components/hotspotCard/HotspotCard.js.map

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

package/components/icon/filled/CarChargingFilledIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SvgIconProps } from '@mui/material';
+/**
+ * Flow brand exclusive icon
+ */
+export declare const CarChargingFilledIcon: React.FC<SvgIconProps>;

package/components/icon/filled/CarChargingFilledIcon.js

@@ -0,0 +1,2 @@
+import{jsxs as r,jsx as H}from"react/jsx-runtime";import{forwardRef as t}from"react";import{SvgIcon as C}from"@mui/material";const m=t((t,m)=>r(C,{viewBox:"2 2 20 20",ref:m,...t,children:[H("path",{d:"M10.7998 5.40039C10.7999 9.04523 13.7546 12.0008 17.3994 12.001C18.3073 12.001 19.1727 11.817 19.96 11.4854V17.1016C19.9596 18.2011 19.0801 19.1013 17.9805 19.1016C17.1205 19.1016 16.2406 18.5808 16.0205 17.501H7.98047C7.76043 18.5806 6.88031 19.1014 6.02051 19.1016C4.92072 19.1016 4.04038 18.2013 4.04004 17.1016V11.2607L4.52051 10.2812H3.08008V8.68164H5.28027L6.95996 5.20117H10.8047C10.8027 5.26728 10.7998 5.33381 10.7998 5.40039ZM7.08008 14.0615H9.58008C10.24 14.6214 11.0802 14.9814 12 14.9814C12.9198 14.9814 13.76 14.6213 14.4199 14.0615H16.9199V12.5615H13.8398C13.4198 13.1412 12.7598 13.5215 12 13.5215C11.2402 13.5215 10.5802 13.1413 10.1602 12.5615H7.08008V14.0615Z"}),H("path",{d:"M16.4912 10.4764L21.2367 4.69855H17.6224L19.2778 1.08008H17.7604L13.0149 6.85796H16.6292L14.9738 10.4764H16.4912Z"})]}));export{m as CarChargingFilledIcon};
+//# sourceMappingURL=CarChargingFilledIcon.js.map

package/components/icon/filled/CarChargingFilledIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarChargingFilledIcon.js","sources":["../../../../src/components/icon/filled/CarChargingFilledIcon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SvgIcon, SvgIconProps } from '@mui/material';\n\n/**\n * Flow brand exclusive icon\n */\nexport const CarChargingFilledIcon: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"2 2 20 20\" ref={ref} {...props}>\n      <path d=\"M10.7998 5.40039C10.7999 9.04523 13.7546 12.0008 17.3994 12.001C18.3073 12.001 19.1727 11.817 19.96 11.4854V17.1016C19.9596 18.2011 19.0801 19.1013 17.9805 19.1016C17.1205 19.1016 16.2406 18.5808 16.0205 17.501H7.98047C7.76043 18.5806 6.88031 19.1014 6.02051 19.1016C4.92072 19.1016 4.04038 18.2013 4.04004 17.1016V11.2607L4.52051 10.2812H3.08008V8.68164H5.28027L6.95996 5.20117H10.8047C10.8027 5.26728 10.7998 5.33381 10.7998 5.40039ZM7.08008 14.0615H9.58008C10.24 14.6214 11.0802 14.9814 12 14.9814C12.9198 14.9814 13.76 14.6213 14.4199 14.0615H16.9199V12.5615H13.8398C13.4198 13.1412 12.7598 13.5215 12 13.5215C11.2402 13.5215 10.5802 13.1413 10.1602 12.5615H7.08008V14.0615Z\" />\n      <path d=\"M16.4912 10.4764L21.2367 4.69855H17.6224L19.2778 1.08008H17.7604L13.0149 6.85796H16.6292L14.9738 10.4764H16.4912Z\" />\n    </SvgIcon>\n  );\n});\n"],"names":["CarChargingFilledIcon","forwardRef","props","ref","_jsxs","SvgIcon","viewBox","children","_jsx","d"],"mappings":"6HAMO,MAAMA,EAAgDC,EAAW,CAACC,EAAOC,IAE5EC,EAACC,EAAO,CAACC,QAAQ,YAAYH,IAAKA,KAASD,EAAKK,SAAA,CAC9CC,EAAA,OAAA,CAAMC,EAAE,2qBACRD,EAAA,OAAA,CAAMC,EAAE"}

package/components/icon/filled/EmissionLabelFilledIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SvgIconProps } from '@mui/material';
+/**
+ * Flow brand exclusive icon
+ */
+export declare const EmissionLabelFilledIcon: React.FC<SvgIconProps>;

package/components/icon/filled/EmissionLabelFilledIcon.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{SvgIcon as L}from"@mui/material";const m=t((t,m)=>r(L,{viewBox:"2 2 20 20",ref:m,...t,children:r("path",{d:"M20.5986 15.7471L21 16.2266L20.5986 16.7061L16.8506 21.1992L16.627 21.4678H3V12.4805H17.873L20.5986 15.7471ZM12.3564 2.27344L16.1045 6.82422L16.502 7.30566L13.3887 10.9854H16.627L16.6289 10.9883H3V2H12.1318L12.3564 2.27344Z"})}));export{m as EmissionLabelFilledIcon};
+//# sourceMappingURL=EmissionLabelFilledIcon.js.map

package/components/icon/filled/EmissionLabelFilledIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmissionLabelFilledIcon.js","sources":["../../../../src/components/icon/filled/EmissionLabelFilledIcon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SvgIcon, SvgIconProps } from '@mui/material';\n\n/**\n * Flow brand exclusive icon\n */\nexport const EmissionLabelFilledIcon: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"2 2 20 20\" ref={ref} {...props}>\n      <path d=\"M20.5986 15.7471L21 16.2266L20.5986 16.7061L16.8506 21.1992L16.627 21.4678H3V12.4805H17.873L20.5986 15.7471ZM12.3564 2.27344L16.1045 6.82422L16.502 7.30566L13.3887 10.9854H16.627L16.6289 10.9883H3V2H12.1318L12.3564 2.27344Z\" />\n    </SvgIcon>\n  );\n});\n"],"names":["EmissionLabelFilledIcon","forwardRef","props","ref","_jsx","SvgIcon","viewBox","d"],"mappings":"mHAMO,MAAMA,EAAkDC,EAAW,CAACC,EAAOC,IAE9EC,EAACC,EAAO,CAACC,QAAQ,YAAYH,IAAKA,KAASD,WACzCE,EAAA,OAAA,CAAMG,EAAE"}

package/components/icon/filled/PictureErrorFilledIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SvgIconProps } from '@mui/material';
+/**
+ * Flow brand exclusive icon
+ */
+export declare const PictureErrorFilledIcon: React.FC<SvgIconProps>;

package/components/icon/filled/PictureErrorFilledIcon.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{SvgIcon as L}from"@mui/material";const m=t((t,m)=>r(L,{viewBox:"2 2 20 20",ref:m,...t,children:r("path",{d:"M22.0459 3.03418L2.9707 22.1094L1.69727 20.8369L4.12012 18.4141V4.0791H18.4551L20.7725 1.76172L22.0459 3.03418ZM19.8799 19.8389H7.78711L9.42676 18.1992H18.2402V9.38574L19.8799 7.74609V19.8389ZM5.75977 16.7744L16.8154 5.71875H5.75977V16.7744ZM17.7803 16.4395H11.1865L14.6338 12.9912L17.7803 16.4395ZM9.28027 7.81934C10.0201 7.81942 10.6599 8.43894 10.6602 9.17871C10.6602 9.91866 10.0202 10.539 9.28027 10.5391C8.54027 10.5391 7.90039 9.91871 7.90039 9.17871C7.90062 8.43888 8.5404 7.81934 9.28027 7.81934Z"})}));export{m as PictureErrorFilledIcon};
+//# sourceMappingURL=PictureErrorFilledIcon.js.map

package/components/icon/filled/PictureErrorFilledIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictureErrorFilledIcon.js","sources":["../../../../src/components/icon/filled/PictureErrorFilledIcon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SvgIcon, SvgIconProps } from '@mui/material';\n\n/**\n * Flow brand exclusive icon\n */\nexport const PictureErrorFilledIcon: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"2 2 20 20\" ref={ref} {...props}>\n      <path d=\"M22.0459 3.03418L2.9707 22.1094L1.69727 20.8369L4.12012 18.4141V4.0791H18.4551L20.7725 1.76172L22.0459 3.03418ZM19.8799 19.8389H7.78711L9.42676 18.1992H18.2402V9.38574L19.8799 7.74609V19.8389ZM5.75977 16.7744L16.8154 5.71875H5.75977V16.7744ZM17.7803 16.4395H11.1865L14.6338 12.9912L17.7803 16.4395ZM9.28027 7.81934C10.0201 7.81942 10.6599 8.43894 10.6602 9.17871C10.6602 9.91866 10.0202 10.539 9.28027 10.5391C8.54027 10.5391 7.90039 9.91871 7.90039 9.17871C7.90062 8.43888 8.5404 7.81934 9.28027 7.81934Z\" />\n    </SvgIcon>\n  );\n});\n"],"names":["PictureErrorFilledIcon","forwardRef","props","ref","_jsx","SvgIcon","viewBox","d"],"mappings":"mHAMO,MAAMA,EAAiDC,EAAW,CAACC,EAAOC,IAE7EC,EAACC,EAAO,CAACC,QAAQ,YAAYH,IAAKA,KAASD,WACzCE,EAAA,OAAA,CAAMG,EAAE"}

package/components/icon/filled/PowerpassFilledIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SvgIconProps } from '@mui/material';
+/**
+ * Flow brand exclusive icon
+ */
+export declare const PowerpassFilledIcon: React.FC<SvgIconProps>;

package/components/icon/filled/PowerpassFilledIcon.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{SvgIcon as m}from"@mui/material";const o=t((t,o)=>r(m,{viewBox:"2 2 20 20",ref:o,...t,children:r("path",{d:"M11.6046 6.75L17.25 12.3449L11.6035 17.9914H6.75L12.0906 12.6507L12.3992 12.3421L12.0893 12.0349L6.7567 6.75H11.6046Z"})}));export{o as PowerpassFilledIcon};
+//# sourceMappingURL=PowerpassFilledIcon.js.map

package/components/icon/filled/PowerpassFilledIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PowerpassFilledIcon.js","sources":["../../../../src/components/icon/filled/PowerpassFilledIcon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SvgIcon, SvgIconProps } from '@mui/material';\n\n/**\n * Flow brand exclusive icon\n */\nexport const PowerpassFilledIcon: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"2 2 20 20\" ref={ref} {...props}>\n      <path d=\"M11.6046 6.75L17.25 12.3449L11.6035 17.9914H6.75L12.0906 12.6507L12.3992 12.3421L12.0893 12.0349L6.7567 6.75H11.6046Z\" />\n    </SvgIcon>\n  );\n});\n"],"names":["PowerpassFilledIcon","forwardRef","props","ref","_jsx","SvgIcon","viewBox","d"],"mappings":"mHAMO,MAAMA,EAA8CC,EAAW,CAACC,EAAOC,IAE1EC,EAACC,EAAO,CAACC,QAAQ,YAAYH,IAAKA,KAASD,WACzCE,EAAA,OAAA,CAAMG,EAAE"}

package/components/icon/filled/index.d.ts

@@ -82,6 +82,7 @@ export * from './CameraFilledIcon';
 export * from './CampingFilledIcon';
 export * from './CarAccidentFilledIcon';
 export * from './CarBackFilledIcon';
+export * from './CarChargingFilledIcon';
 export * from './CarComparisonFilledIcon';
 export * from './CarHandFilledIcon';
 export * from './CarInfoFilledIcon';
@@ -159,6 +160,7 @@ export * from './DraghandleFilledIcon';
 export * from './EditFilledIcon';
 export * from './ElectricChargerFilledIcon';
 export * from './ElectricChargerOffFilledIcon';
+export * from './EmissionLabelFilledIcon';
 export * from './EmptystateFilledIcon';
 export * from './EngineFilledIcon';
 export * from './EngineOilFilledIcon';
@@ -242,6 +244,7 @@ export * from './PasteFilledIcon';
 export * from './PercentageFilledIcon';
 export * from './PetFilledIcon';
 export * from './PhoneFilledIcon';
+export * from './PictureErrorFilledIcon';
 export * from './PictureFilledIcon';
 export * from './PiggybankFilledIcon';
 export * from './PlugCCSType1FilledIcon';
@@ -251,6 +254,7 @@ export * from './PlugType1FilledIcon';
 export * from './PlugType2FilledIcon';
 export * from './PlugFilledIcon';
 export * from './PlusFilledIcon';
+export * from './PowerpassFilledIcon';
 export * from './PremiumLFilledIcon';
 export * from './PremiumMFilledIcon';
 export * from './PremiumSFilledIcon';