@skodaflow/web-library 8.3.2 → 8.5.0

package/components/header/HeaderNavigationMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigationMenu.js","sources":["../../../src/components/header/HeaderNavigationMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useRef, useState } from 'react';\nimport {\n  Menu,\n  MenuList,\n  MenuProps,\n  Collapse,\n  useMediaQuery,\n  Theme,\n  useTheme,\n  CollapseProps,\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { useHeaderContext } from './HeaderContext';\n\nexport interface HeaderNavigationMenuProps extends HeaderNavigationLinkProps {\n  /**\n   * Content of the menu, can be provided as children as well\n   */\n  menuItems?: ReactNode;\n  /**\n   * Props applied to menu\n   */\n  menuProps?: MenuProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to menu on mobile\n   */\n  collapseProps?: CollapseProps;\n}\n\n/**\n * HeaderNavigationLink with the integration of the menu\n */\nexport const HeaderNavigationMenu: FC<HeaderNavigationMenuProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      label,\n      icon,\n      onClick,\n      extend: propExtend,\n      menuItems,\n      menuProps,\n      collapseProps,\n      clickAwayListenerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const buttonRef = useRef(null);\n    const [anchor, setAnchor] = useState(null);\n    const theme = useTheme();\n    const headerContext = useHeaderContext();\n    const extend = propExtend ?? headerContext?.extend;\n    // media query fallback only for standalone usage outside of Header\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const mobile = extend === undefined ? downLg : extend;\n    const { sx: collapseSx, ...restCollapse } = collapseProps ?? {};\n\n    return (\n      <>\n        <HeaderNavigationLink\n          active={!!anchor}\n          extend={extend}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  // same code is applied to HeaderNavigationHero.tsx\n                  '&&&': {\n                    fontSize: extend === undefined ? { xs: '20px', lg: '14px' } : ['20px', '14px'][+!extend],\n                  },\n                  color:\n                    extend === undefined\n                      ? {\n                          xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                          lg: 'currentColor',\n                        }\n                      : [theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700', 'currentColor'][\n                          +!extend\n                        ],\n                  transform: `rotate(${anchor ? '180' : '0'}deg)`,\n                  transition:\n                    extend === undefined\n                      ? {\n                          xs: theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          lg: 'none',\n                        }\n                      : [\n                          theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          'none',\n                        ][+!extend],\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor((prev) => (!prev ? e.currentTarget : null));\n          }}\n          sx={sxOverride(\n            {\n              justifyContent:\n                extend === undefined\n                  ? { xs: 'space-between', lg: 'flex-start' }\n                  : ['space-between', 'flex-start'][+!extend],\n            },\n            sx,\n          )}\n          ref={ref ?? buttonRef}\n          data-testid=\"HeaderNavigationMenu\"\n          {...rest}\n        >\n          {label}\n        </HeaderNavigationLink>\n        {mobile ? (\n          <ClickAwayListener\n            onClickAway={(e) => {\n              !((ref as React.RefObject<HTMLButtonElement>) ?? buttonRef)?.current?.contains(e?.target as Node) &&\n                setAnchor(null);\n            }}\n            {...clickAwayListenerProps}\n          >\n            <Collapse\n              in={!!anchor}\n              sx={sxOverride(\n                {\n                  // style menu items inside\n                  '& .MuiMenuItem-root': {\n                    ...getInteractiveStyle(\n                      {\n                        background: 'none',\n                        fontWeight: '300',\n                        color: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                      },\n                      {\n                        background: 'none',\n                        fontWeight: '700',\n                        color: 'currentColor',\n                      },\n                    ),\n                  },\n                },\n                collapseSx,\n              )}\n              {...restCollapse}\n            >\n              <MenuList>{children || menuItems}</MenuList>\n            </Collapse>\n          </ClickAwayListener>\n        ) : (\n          <Menu open={!!anchor} anchorEl={anchor} onClose={() => setAnchor(null)} {...menuProps}>\n            {children || menuItems}\n          </Menu>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["HeaderNavigationMenu","forwardRef","children","sx","label","icon","onClick","extend","propExtend","menuItems","menuProps","collapseProps","clickAwayListenerProps","rest","ref","buttonRef","useRef","anchor","setAnchor","useState","theme","useTheme","headerContext","useHeaderContext","downLg","useMediaQuery","breakpoints","down","mobile","undefined","collapseSx","restCollapse","_jsxs","_Fragment","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","currentTarget","sxOverride","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Collapse","in","getInteractiveStyle","background","fontWeight","MenuList","Menu","open","anchorEl","onClose"],"mappings":"gkBAyCO,MAAMA,EAAsDC,EACjE,EAEIC,WACAC,KACAC,QACAC,OACAC,UACAC,OAAQC,EACRC,YACAC,YACAC,gBACAC,4BACGC,GAELC,KAEA,MAAMC,EAAYC,EAAO,OAClBC,EAAQC,GAAaC,EAAS,MAC/BC,EAAQC,IACRC,EAAgBC,IAChBhB,EAASC,GAAcc,GAAef,OAEtCiB,EAASC,EAAqBL,EAAMM,YAAYC,KAAK,OACrDC,OAAoBC,IAAXtB,EAAuBiB,EAASjB,GACvCJ,GAAI2B,KAAeC,GAAiBpB,GAAiB,CAAA,EAE7D,OACEqB,EAAAC,EAAA,CAAA/B,SAAA,CACEgC,EAACC,EAAoB,CACnBC,SAAUnB,EACVV,OAAQA,EACRF,KACEA,GACE6B,EAACG,EAAe,CACdlC,GAAI,CAEF,MAAO,CACLmC,cAAqBT,IAAXtB,EAAuB,CAAEgC,GAAI,OAAQC,GAAI,QAAW,CAAC,OAAQ,UAAUjC,IAEnFkC,WACaZ,IAAXtB,EACI,CACEgC,GAA2B,SAAvBnB,EAAMsB,QAAQC,KAAkB,kBAAoB,kBACxDH,GAAI,gBAEN,CAAwB,SAAvBpB,EAAMsB,QAAQC,KAAkB,kBAAoB,kBAAmB,kBACpEpC,GAEVqC,UAAW,UAAU3B,EAAS,MAAQ,UACtC4B,gBACahB,IAAXtB,EACI,CACEgC,GAAInB,EAAM0B,YAAYC,OAAO,YAAa,CACxCC,SAAU5B,EAAM0B,YAAYE,SAASC,WAEvCT,GAAI,QAEN,CACEpB,EAAM0B,YAAYC,OAAO,YAAa,CACpCC,SAAU5B,EAAM0B,YAAYE,SAASC,WAEvC,UACE1C,MAKlBD,QAAU4C,IACR5C,IAAU4C,GACVhC,EAAWiC,GAAWA,EAAyB,KAAlBD,EAAEE,gBAEjCjD,GAAIkD,EACF,CACEC,oBACazB,IAAXtB,EACI,CAAEgC,GAAI,gBAAiBC,GAAI,cAC3B,CAAC,gBAAiB,gBAAgBjC,IAE1CJ,GAEFW,IAAKA,GAAOC,EAAS,cACT,0BACRF,EAAIX,SAEPE,IAEFwB,EACCM,EAACqB,EAAiB,CAChBC,YAAcN,MACTpC,GAA8CC,IAAY0C,SAASC,SAASR,GAAGS,SAChFzC,EAAU,UAEVN,EAAsBV,SAE1BgC,EAAC0B,EAAQ,CACPC,KAAM5C,EACNd,GAAIkD,EACF,CAEE,sBAAuB,IAClBS,EACD,CACEC,WAAY,OACZC,WAAY,MACZvB,MAA8B,SAAvBrB,EAAMsB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEoB,WAAY,OACZC,WAAY,MACZvB,MAAO,mBAKfX,MAEEC,WAEJG,EAAC+B,EAAQ,CAAA/D,SAAEA,GAAYO,QAI3ByB,EAACgC,EAAI,CAACC,OAAQlD,EAAQmD,SAAUnD,EAAQoD,QAAS,IAAMnD,EAAU,SAAWR,EAASR,SAClFA,GAAYO"}
+{"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  useForkRef,\n} from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { useHeaderContext } from './HeaderContext';\n\nexport interface HeaderNavigationMenuProps extends HeaderNavigationLinkProps {\n  /**\n   * Content of the menu, can be provided as children as well\n   */\n  menuItems?: ReactNode;\n  /**\n   * Props applied to menu\n   */\n  menuProps?: MenuProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to menu on mobile\n   */\n  collapseProps?: CollapseProps;\n}\n\n/**\n * HeaderNavigationLink with the integration of the menu\n */\nexport const HeaderNavigationMenu: FC<HeaderNavigationMenuProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      label,\n      icon,\n      onClick,\n      extend: propExtend,\n      menuItems,\n      menuProps,\n      collapseProps,\n      clickAwayListenerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n    const [anchor, setAnchor] = useState(null);\n    const theme = useTheme();\n    const { sx: menuSx, ...restMenu } = menuProps ?? {};\n    const headerContext = useHeaderContext();\n    const extend = propExtend ?? headerContext?.extend;\n    // media query fallback only for standalone usage outside of Header\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const mobile = extend === undefined ? downLg : extend;\n    const { sx: collapseSx, ...restCollapse } = collapseProps ?? {};\n\n    return (\n      <>\n        <HeaderNavigationLink\n          active={!!anchor}\n          extend={extend}\n          icon={\n            icon || (\n              <ChevronDownIcon\n                sx={{\n                  // same code is applied to HeaderNavigationHero.tsx\n                  '&&&': {\n                    fontSize: extend === undefined ? { xs: '20px', lg: '14px' } : ['20px', '14px'][+!extend],\n                  },\n                  color:\n                    extend === undefined\n                      ? {\n                          xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                          lg: 'currentColor',\n                        }\n                      : [theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700', 'currentColor'][\n                          +!extend\n                        ],\n                  transform: `rotate(${anchor ? '180' : '0'}deg)`,\n                  transition:\n                    extend === undefined\n                      ? {\n                          xs: theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          lg: 'none',\n                        }\n                      : [\n                          theme.transitions.create('transform', {\n                            duration: theme.transitions.duration.shortest,\n                          }),\n                          'none',\n                        ][+!extend],\n                }}\n              />\n            )\n          }\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor((prev) => (!prev ? e.currentTarget : null));\n          }}\n          sx={sxOverride(\n            {\n              justifyContent:\n                extend === undefined\n                  ? { xs: 'space-between', lg: 'flex-start' }\n                  : ['space-between', 'flex-start'][+!extend],\n            },\n            sx,\n          )}\n          ref={handleRef}\n          data-testid=\"HeaderNavigationMenu\"\n          {...rest}\n        >\n          {label}\n        </HeaderNavigationLink>\n        {mobile ? (\n          <ClickAwayListener\n            onClickAway={(e) => {\n              !buttonRef.current?.contains(e?.target as Node) && setAnchor(null);\n            }}\n            {...clickAwayListenerProps}\n          >\n            <Collapse\n              in={!!anchor}\n              sx={sxOverride(\n                {\n                  // style menu items inside\n                  '& .MuiMenuItem-root': {\n                    ...getInteractiveStyle(\n                      {\n                        background: 'none',\n                        fontWeight: '300',\n                        color: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n                      },\n                      {\n                        background: 'none',\n                        fontWeight: '700',\n                        color: 'currentColor',\n                      },\n                    ),\n                  },\n                },\n                collapseSx,\n              )}\n              {...restCollapse}\n            >\n              <MenuList>{children || menuItems}</MenuList>\n            </Collapse>\n          </ClickAwayListener>\n        ) : (\n          <ClickAwayListener\n            onClickAway={(e) => !buttonRef.current?.contains(e?.target as Node) && setAnchor(null)}\n            {...clickAwayListenerProps}\n          >\n            <Menu\n              open={!!anchor}\n              anchorEl={anchor}\n              onClose={() => setAnchor(null)}\n              {...restMenu}\n              sx={sxOverride(\n                {\n                  // the full-viewport modal root lets clicks through to other header items, closing is handled by ClickAwayListener\n                  pointerEvents: 'none',\n                  '& .MuiMenu-paper': {\n                    pointerEvents: 'auto',\n                  },\n                },\n                menuSx,\n              )}\n            >\n              {children || menuItems}\n            </Menu>\n          </ClickAwayListener>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["HeaderNavigationMenu","forwardRef","children","sx","label","icon","onClick","extend","propExtend","menuItems","menuProps","collapseProps","clickAwayListenerProps","rest","ref","buttonRef","useRef","handleRef","useForkRef","anchor","setAnchor","useState","theme","useTheme","menuSx","restMenu","headerContext","useHeaderContext","downLg","useMediaQuery","breakpoints","down","mobile","undefined","collapseSx","restCollapse","_jsxs","_Fragment","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","currentTarget","sxOverride","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Collapse","in","getInteractiveStyle","background","fontWeight","MenuList","Menu","open","anchorEl","onClose","pointerEvents"],"mappings":"glBA0CO,MAAMA,EAAsDC,EACjE,EAEIC,WACAC,KACAC,QACAC,OACAC,UACAC,OAAQC,EACRC,YACAC,YACAC,gBACAC,4BACGC,GAELC,KAEA,MAAMC,EAAYC,EAA0B,MACtCC,EAAYC,EAAWJ,EAAKC,IAC3BI,EAAQC,GAAaC,EAAS,MAC/BC,EAAQC,KACNpB,GAAIqB,KAAWC,GAAaf,GAAa,CAAA,EAC3CgB,EAAgBC,IAChBpB,EAASC,GAAckB,GAAenB,OAEtCqB,EAASC,EAAqBP,EAAMQ,YAAYC,KAAK,OACrDC,OAAoBC,IAAX1B,EAAuBqB,EAASrB,GACvCJ,GAAI+B,KAAeC,GAAiBxB,GAAiB,CAAA,EAE7D,OACEyB,EAAAC,EAAA,CAAAnC,SAAA,CACEoC,EAACC,EAAoB,CACnBC,SAAUrB,EACVZ,OAAQA,EACRF,KACEA,GACEiC,EAACG,EAAe,CACdtC,GAAI,CAEF,MAAO,CACLuC,cAAqBT,IAAX1B,EAAuB,CAAEoC,GAAI,OAAQC,GAAI,QAAW,CAAC,OAAQ,UAAUrC,IAEnFsC,WACaZ,IAAX1B,EACI,CACEoC,GAA2B,SAAvBrB,EAAMwB,QAAQC,KAAkB,kBAAoB,kBACxDH,GAAI,gBAEN,CAAwB,SAAvBtB,EAAMwB,QAAQC,KAAkB,kBAAoB,kBAAmB,kBACpExC,GAEVyC,UAAW,UAAU7B,EAAS,MAAQ,UACtC8B,gBACahB,IAAX1B,EACI,CACEoC,GAAIrB,EAAM4B,YAAYC,OAAO,YAAa,CACxCC,SAAU9B,EAAM4B,YAAYE,SAASC,WAEvCT,GAAI,QAEN,CACEtB,EAAM4B,YAAYC,OAAO,YAAa,CACpCC,SAAU9B,EAAM4B,YAAYE,SAASC,WAEvC,UACE9C,MAKlBD,QAAUgD,IACRhD,IAAUgD,GACVlC,EAAWmC,GAAWA,EAAyB,KAAlBD,EAAEE,gBAEjCrD,GAAIsD,EACF,CACEC,oBACazB,IAAX1B,EACI,CAAEoC,GAAI,gBAAiBC,GAAI,cAC3B,CAAC,gBAAiB,gBAAgBrC,IAE1CJ,GAEFW,IAAKG,EAAS,cACF,0BACRJ,EAAIX,SAEPE,IAGDkC,EAACqB,EADF3B,EACmB,CAChB4B,YAAcN,KACXvC,EAAU8C,SAASC,SAASR,GAAGS,SAAmB3C,EAAU,UAE3DR,EAAsBV,SAE1BoC,EAAC0B,EAAQ,CACPC,KAAM9C,EACNhB,GAAIsD,EACF,CAEE,sBAAuB,IAClBS,EACD,CACEC,WAAY,OACZC,WAAY,MACZvB,MAA8B,SAAvBvB,EAAMwB,QAAQC,KAAkB,kBAAoB,mBAE7D,CACEoB,WAAY,OACZC,WAAY,MACZvB,MAAO,mBAKfX,MAEEC,EAAYjC,SAEhBoC,EAAC+B,EAAQ,CAAAnE,SAAEA,GAAYO,OAIT,CAChBmD,YAAcN,IAAOvC,EAAU8C,SAASC,SAASR,GAAGS,SAAmB3C,EAAU,SAC7ER,EAAsBV,SAE1BoC,EAACgC,GACCC,OAAQpD,EACRqD,SAAUrD,EACVsD,QAAS,IAAMrD,EAAU,SACrBK,EACJtB,GAAIsD,EACF,CAEEiB,cAAe,OACf,mBAAoB,CAClBA,cAAe,SAGnBlD,GACDtB,SAEAA,GAAYO"}

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{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};
+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,useForkRef as d,ClickAwayListener as p,Box as l,IconButton as x,Popper as m,Fade as c,Card as h}from"@mui/material";import{sxOverride as f}from"../../utils/sxOverride/sxOverride.js";import{PlusIcon as u}from"../icon/stroke/PlusIcon.js";const v=e(({sx:e,children:v,top:b,left:g,bottom:w,right:P,onBackground:C=!1,center:I=!1,open:k,setOpen:z,fadeProps:M={},popperProps:O={},clickAwayListenerProps:j={},icon:y,iconProps:B={},insideIcon:S,insideIconProps:W={},insideIconButtonProps:A={},wrapperProps:E={},cardProps:H={},...L},T)=>{const{sx:q,...D}=H,{sx:F,...G}=O,{sx:J,...K}=B,{sx:N,...Q}=W,{sx:R,...U}=A,V=n(),X=a(V.breakpoints.down("md")),Y=r(null),Z=d(T,Y),$=r(null),[_,oo]=i(k??!1),[to,eo]=i("left-start"),ro=k??_,io=s(void 0!==k?()=>z(!k):()=>oo(o=>!o),[k,z]),so=s(void 0!==k?()=>z(!1):()=>oo(!1),[k,z]);return o(p,{onClickAway:so,...j,children:t(l,{...E,children:[o(x,{ref:Z,onClick:io,"aria-label":"Open or Close the card",...ro&&{"aria-controls":"hotspot-card"},size:"small",color:"surface",sx:f({position:"absolute",zIndex:o=>o.zIndex.hotspotCard,...void 0!==b&&{top:b,...I&&{mt:"-16px"}},...void 0!==g&&{left:g,...I&&{ml:"-16px"}},...void 0!==w&&{bottom:w,...I&&{mb:"-16px"}},...void 0!==P&&{right:P,...I&&{mr:"-16px"}},...void 0===b&&void 0===g&&void 0===w&&void 0===P&&{top:"0%",left:"0%",...I&&{mt:"-16px",ml:"-16px"}}},e),...L,children:y||o(u,{sx:f({transform:ro?"rotate(45deg)":"rotate(0deg)",transition:"transform .3s ease"},J),...K})}),o(m,{open:ro,anchorEl:X?null:Y.current,transition:!0,placement:"left-start",disablePortal:!0,ref:$,modifiers:[{name:"flip",enabled:!0,options:{fallbackPlacements:["right-start"]}},{name:"preventOverflow",enabled:!0,options:{boundary:"viewport"}},{name:"updatePlacement",enabled:!0,phase:"afterWrite",fn:({state:o})=>{eo(o.placement)}}],sx:f({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},F),...G,children:({TransitionProps:e})=>o(c,{...e,timeout:350,...M,children:t(h,{id:"hotspot-card",sx:f({boxShadow:o=>o.flowShadows.xl,position:"relative",width:{xs:"100%",md:"inherit"},height:{xs:"100%",md:"auto"},top:{xs:"0",md:"-9px"},left:to.startsWith("right")?{xs:"0",md:"-41px"}:void 0,right:to.startsWith("left")?{xs:"0",md:"-41px"}:void 0,"&:after":{boxShadow:"none"},"& > .MuiBox-root":{overflow:"auto"},"& .MuiCardMedia-root":{height:{xs:"300px",md:"232px"}},"& .MuiCardContent-root, &.MuiCardContent-root:last-child":{padding:3}},q),...D,children:[o(x,{onClick:io,"aria-label":"Close the card",size:"small",color:C?"inherit":"surface",sx:f({position:"absolute",zIndex:o=>o.zIndex.hotspotCard,top:"8px",right:"8px"},R),...U,children:S||o(u,{sx:f({transform:ro?"rotate(45deg)":"rotate(0deg)",transition:"transform .3s ease"},N),...Q})}),v]})})},X?"popper-mobile":"popper-desktop")]})})});export{v 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 { 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":"oYA8GO,MAAMA,EAA0CC,EACrD,EAEIC,KACAC,WACAC,MACAC,OACAC,SACAC,QACAC,gBAAe,EACfC,UAAS,EACTC,OACAC,UACAC,YAAY,GACZC,cAAc,CAAA,EACdC,yBAAyB,CAAA,EACzBC,OACAC,YAAY,GACZC,aACAC,kBAAkB,CAAA,EAClBC,wBAAwB,CAAA,EACxBC,eAAe,GACfC,YAAY,CAAA,KACTC,GAELC,KAEA,MAAQrB,GAAIsB,KAAWC,GAAaJ,GAC5BnB,GAAIwB,KAAaC,GAAoBd,GACrCX,GAAI0B,KAAWC,GAAkBb,GACjCd,GAAI4B,KAAiBC,GAAwBb,GAC7ChB,GAAI8B,KAAuBC,GAA8Bd,EAE3De,EAAWC,IACXC,EAAgBC,EAAcH,EAASI,YAAYC,KAAK,OACxDC,EAASC,EAAO,MAChBC,EAAYD,EAAuB,OAClCE,EAAOC,GAAYC,EAASnC,IAAQ,IACpCoC,EAAkBC,IAAuBF,EAAiB,cAE3DG,GAAStC,GAAQiC,EACjBM,GAAcC,OAAqBC,IAATzC,EAAqB,IAAMC,GAASD,GAAQ,IAAMkC,EAAUQ,IAAUA,GAAO,CAC3G1C,EACAC,IAEI0C,GAAkBH,OAAqBC,IAATzC,EAAqB,IAAMC,GAAQ,GAAS,IAAMiC,GAAS,GAAQ,CACrGlC,EACAC,IAGF,OACE2C,EAACC,EAAiB,CAACC,YAAaH,MAAqBvC,EAAsBX,SACzEsD,EAACC,MAAQtC,EAAYjB,SAAA,CACnBmD,EAACK,EAAU,CACTpC,IAAKA,GAAOiB,EACZoB,QAASX,GAAW,aACT,4BACND,IAAU,CAAE,gBAAmB,gBACpCa,KAAK,QACLC,MAAM,UACN5D,GAAI6D,EACF,CACEC,SAAU,WACVC,OAASC,GAAUA,EAAMD,OAAOE,oBACpBhB,IAAR/C,GAAqB,CAAEA,IAAKA,KAASK,GAAU,CAAE2D,GAAI,kBAC5CjB,IAAT9C,GAAsB,CAAEA,KAAMA,KAAUI,GAAU,CAAE4D,GAAI,kBAC7ClB,IAAX7C,GAAwB,CAAEA,OAAQA,KAAYG,GAAU,CAAE6D,GAAI,kBACpDnB,IAAV5C,GAAuB,CAAEA,MAAOA,KAAWE,GAAU,CAAE8D,GAAI,kBAEnDpB,IAAR/C,QACO+C,IAAT9C,QACW8C,IAAX7C,QACU6C,IAAV5C,GAAuB,CACrBH,IAAK,KACLC,KAAM,QACFI,GAAU,CAAE2D,GAAI,QAASC,GAAI,WAGvCnE,MAEEoB,WAEHP,GACCuC,EAACkB,EAAQ,CACPtE,GAAI6D,EACF,CACEU,UAAWzB,GAAS,gBAAkB,eACtC0B,WAAY,sBAEd9C,MAEEC,MAIVyB,EAACqB,GAECjE,KAAMsC,GACN4B,SAAUxC,EAAgB,MAASb,GAA8CiB,IAASqC,QAC1FH,YAAU,EACVI,UAAU,aACVC,eAAa,EACbxD,IAAKmB,EACLsC,UAAW,CACT,CACEC,KAAM,OACNC,SAAS,EACTC,QAAS,CACPC,mBAAoB,CAAC,iBAGzB,CACEH,KAAM,kBACNC,SAAS,EACTC,QAAS,CACPE,SAAU,aAGd,CACEJ,KAAM,kBACNC,SAAS,EACTI,MAAO,aACPC,GAAI,EAAGC,YACLzC,GAAoByC,EAAMV,cAIhC5E,GAAI6D,EACF,CACEC,SAAU,QACV5D,IAAK,CAAEqF,GAAI,IAAKC,GAAI,QACpBrF,KAAM,CAAEoF,GAAI,IAAKC,GAAI,QACrBC,MAAO,CAAEF,GAAI,OAAQC,GAAI,SACzBE,OAAQ,CAAEH,GAAI,OAAQC,GAAI,QAC1BG,UAAW,CAAEJ,GAAI,QAASC,GAAI,QAC9BzB,OAASC,GAAUA,EAAMD,OAAO6B,OAElCpE,MAEEC,WAEH,EAAGoE,qBACFzC,EAAC0C,EAAI,IAAKD,EAAiBE,QAAS,OAASrF,WAC3C6C,EAACyC,EAAI,CACHC,GAAG,eACHjG,GAAI6D,EACF,CACEqC,UAAYlC,GAAUA,EAAMmC,YAAYC,GACxCtC,SAAU,WACV2B,MAAO,CAAEF,GAAI,OAAQC,GAAI,WACzBE,OAAQ,CAAEH,GAAI,OAAQC,GAAI,QAC1BtF,IAAK,CAAEqF,GAAI,IAAKC,GAAI,QACpBrF,KAAMyC,EAAiByD,WAAW,SAAW,CAAEd,GAAI,IAAKC,GAAI,cAAYvC,EACxE5C,MAAOuC,EAAiByD,WAAW,QAAU,CAAEd,GAAI,IAAKC,GAAI,cAAYvC,EAExE,UAAW,CACTqD,OAAQ,QAGV,mBAAoB,CAClBC,SAAU,QAGZ,uBAAwB,CACtBb,OAAQ,CACNH,GAAI,QACJC,GAAI,UAIR,2DAA4D,CAC1DgB,QAAS,IAGblF,MAEEC,YAEJ6B,EAACK,EAAU,CACTC,QAASX,GAAW,aACT,iBACXY,KAAK,QACLC,MAAOtD,EAAe,UAAY,UAClCN,GAAI6D,EACF,CACEC,SAAU,WACVC,OAASC,GAAUA,EAAMD,OAAOE,YAChC/D,IAAK,MACLG,MAAO,OAETyB,MAEEC,WAEHhB,GACCqC,EAACkB,EAAQ,CACPtE,GAAI6D,EACF,CACEU,UAAWzB,GAAS,gBAAkB,eACtC0B,WAAY,sBAEd5C,MAEEC,MAIT5B,QA/GFiC,EAAgB,gBAAkB"}
+{"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  useForkRef,\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<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, btnRef);\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={handleRef}\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 : 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                        boxShadow: '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","handleRef","useForkRef","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","overflow","padding"],"mappings":"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"}

package/components/icon/stroke/EmissionLabelIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmissionLabelIcon.js","sources":["../../../../src/components/icon/stroke/EmissionLabelIcon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SvgIcon, SvgIconProps } from '@mui/material';\n\n/**\n * Flow brand exclusive icon\n */\nexport const EmissionLabelIcon: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"2 2 20 20\" ref={ref} {...props}>\n      <path fillRule=\"evenodd\" d=\"M12.374 2.2832L16.1084 6.82227L16.5195 7.32227L16.1016 7.81641L13.4443 10.9609H16.6191L16.8516 11.2402L20.5859 15.7207L21 16.2178L20.5859 16.7148L16.8516 21.1953L16.6191 21.4746H3V2H12.1416L12.374 2.2832ZM4.55273 19.9219H15.8906L18.9775 16.2178L15.8906 12.5137H4.55273V19.9219ZM4.55273 10.9561H11.4141L14.4961 7.30762L11.4082 3.55273H4.55273V10.9561Z\" />\n    </SvgIcon>\n  );\n});\n"],"names":["EmissionLabelIcon","forwardRef","props","ref","_jsx","SvgIcon","viewBox","children","fillRule","d"],"mappings":"mHAMO,MAAMA,EAA4CC,EAAW,CAACC,EAAOC,IAExEC,EAACC,EAAO,CAACC,QAAQ,YAAYH,IAAKA,KAASD,EAAKK,SAC9CH,EAAA,OAAA,CAAMI,SAAS,UAAUC,EAAE"}
+{"version":3,"file":"EmissionLabelIcon.js","sources":["../../../../src/components/icon/stroke/EmissionLabelIcon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SvgIcon, SvgIconProps } from '@mui/material';\n\n/**\n * Flow brand exclusive icon\n */\nexport const EmissionLabelIcon: React.FC<SvgIconProps> = forwardRef((props, ref) => {\n  return (\n    <SvgIcon viewBox=\"2 2 20 20\" ref={ref} {...props}>\n      <path\n        fillRule=\"evenodd\"\n        d=\"M12.374 2.2832L16.1084 6.82227L16.5195 7.32227L16.1016 7.81641L13.4443 10.9609H16.6191L16.8516 11.2402L20.5859 15.7207L21 16.2178L20.5859 16.7148L16.8516 21.1953L16.6191 21.4746H3V2H12.1416L12.374 2.2832ZM4.55273 19.9219H15.8906L18.9775 16.2178L15.8906 12.5137H4.55273V19.9219ZM4.55273 10.9561H11.4141L14.4961 7.30762L11.4082 3.55273H4.55273V10.9561Z\"\n      />\n    </SvgIcon>\n  );\n});\n"],"names":["EmissionLabelIcon","forwardRef","props","ref","_jsx","SvgIcon","viewBox","children","fillRule","d"],"mappings":"mHAMO,MAAMA,EAA4CC,EAAW,CAACC,EAAOC,IAExEC,EAACC,EAAO,CAACC,QAAQ,YAAYH,IAAKA,KAASD,EAAKK,SAC9CH,EAAA,OAAA,CACEI,SAAS,UACTC,EAAE"}

package/components/image/Image.d.ts

@@ -1,34 +1,58 @@
 import React, { ElementType } from 'react';
 import { BoxProps, SkeletonProps } from '@mui/material';
 export interface ImageProps extends BoxProps<ElementType> {
-    /** Image alt message */
+    /**
+     * Image alt message
+     */
     alt: string;
-    /** Image src path */
+    /**
+     * Image src path
+     */
     src: string;
-    /** Image aspect ratio */
+    /**
+     * Image aspect ratio
+     */
     aspectRatio?: number;
-    /** Image width (passed to the wrapper and img element) */
+    /**
+     * Image width (passed to the wrapper and img element)
+     */
     width?: number | string;
-    /** Image height (passed to the wrapper and img element) */
+    /**
+     * Image height (passed to the wrapper and img element)
+     */
     height?: number | string;
     /**
-     * The Skeleton will be displayed when the image is loading. @default true
-     * If false, the Image will be rendered without Skeleton.
+     * Skeleton displayed while the image is loading, if false the Image is rendered without Skeleton
+     * @default true
      */
     skeleton?: boolean;
-    /** Additional props for customizing the skeleton loader. */
+    /**
+     * Additional props for customizing the skeleton loader
+     */
     skeletonProps?: SkeletonProps;
-    /** Additional props for customizing the wrapper box  */
+    /**
+     * Additional props for customizing the wrapper box
+     */
     wrapperProps?: BoxProps<ElementType>;
-    /** Custom component to replace skeleton. */
+    /**
+     * Custom component to replace skeleton
+     */
     customLoader?: React.ReactNode;
-    /** Image failed to load message or component. */
+    /**
+     * Image failed to load message or component
+     */
     errorContent?: React.ReactNode;
-    /** Additional props for customizing the error display box. */
+    /**
+     * Additional props for customizing the error display box
+     */
     errorProps?: BoxProps<ElementType>;
-    /** Controlled loading. */
+    /**
+     * Controlled loading
+     */
     loading?: boolean;
-    /** Controlled error. */
+    /**
+     * Controlled error
+     */
     error?: boolean;
 }
 /**

package/components/image/Image.js

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{forwardRef as r,useState as i}from"react";import{Box as o,Skeleton as a}from"@mui/material";import{CircleCloseFilledIcon as s}from"../icon/filled/CircleCloseFilledIcon.js";import{sxOverride as n}from"../../utils/sxOverride/sxOverride.js";const d=r(({aspectRatio:r,width:d,height:l,skeleton:c=!0,skeletonProps:m,wrapperProps:h,errorProps:p,customLoader:g,errorContent:x,loading:u,error:f,sx:w,children:I,...j},k)=>{const[v,C]=i(!1),[b,y]=i(!1),{sx:P,...R}=m||{},{sx:F,...L}=h||{},{sx:O,...E}=p||{};return t(o,{"data-testid":"Image.wrapper",sx:n({aspectRatio:r??"initial",width:d??"auto",height:l??"auto",maxWidth:"100%",position:"relative"},F),...L,children:[!b&&!f&&!u&&e(o,{component:"img","data-testid":"Image.component",ref:k,onLoad:()=>C(!0),onError:()=>y(!0),width:d,height:l,sx:n({aspectRatio:r??"initial",objectFit:"cover",width:"100%",height:"100%",display:"block"},w),...j}),(!v||u)&&!b&&!f&&(g||c&&e(a,{"data-testid":"Image.skeleton",variant:"rectangular",sx:n({width:"100%",height:"100%"},P),...R})),(b||f)&&e(o,{"data-testid":"Image.error",sx:n({display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%",backgroundColor:"disabled.secondary"},O),...E,children:x||e(s,{color:"error"})}),I]})});export{d as Image};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{forwardRef as r,useState as i,useCallback as o}from"react";import{useForkRef as a,Box as s,Skeleton as n}from"@mui/material";import{CircleCloseFilledIcon as d}from"../icon/filled/CircleCloseFilledIcon.js";import{sxOverride as c}from"../../utils/sxOverride/sxOverride.js";const l=r(({aspectRatio:r,width:l,height:m,skeleton:h=!0,skeletonProps:p,wrapperProps:g,errorProps:x,customLoader:u,errorContent:f,loading:w,error:I,sx:b,children:j,...k},v)=>{const[C,y]=i(!1),[P,R]=i(!1),F=o(t=>{t?.complete&&t.getAttribute("src")&&(t.naturalWidth>0?y(!0):t.src=t.src)},[]),L=a(v,F),{sx:O,...W}=p||{},{sx:A,...E}=g||{},{sx:q,...z}=x||{};return t(s,{"data-testid":"Image.wrapper",sx:c({aspectRatio:r??"initial",width:l??"auto",height:m??"auto",maxWidth:"100%",position:"relative"},A),...E,children:[!P&&!I&&!w&&e(s,{component:"img","data-testid":"Image.component",ref:L,onLoad:()=>y(!0),onError:()=>R(!0),width:l,height:m,sx:c({aspectRatio:r??"initial",objectFit:"cover",width:"100%",height:"100%",display:"block"},b),...k}),(!C||w)&&!P&&!I&&(u||h&&e(n,{"data-testid":"Image.skeleton",variant:"rectangular",sx:c({width:"100%",height:"100%"},O),...W})),(P||I)&&e(s,{"data-testid":"Image.error",sx:c({display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%",backgroundColor:"disabled.secondary"},q),...z,children:f||e(d,{color:"error"})}),j]})});export{l as Image};
 //# sourceMappingURL=Image.js.map

package/components/image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useState } from 'react';\nimport { Box, BoxProps, Skeleton, SkeletonProps } from '@mui/material';\nimport { CircleCloseFilledIcon } from '@/src/components/icon/filled/CircleCloseFilledIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface ImageProps extends BoxProps<ElementType> {\n  /** Image alt message */\n  alt: string;\n  /** Image src path */\n  src: string;\n  /** Image aspect ratio */\n  aspectRatio?: number;\n  /** Image width (passed to the wrapper and img element) */\n  width?: number | string;\n  /** Image height (passed to the wrapper and img element) */\n  height?: number | string;\n  /**\n   * The Skeleton will be displayed when the image is loading. @default true\n   * If false, the Image will be rendered without Skeleton.\n   */\n  skeleton?: boolean;\n  /** Additional props for customizing the skeleton loader. */\n  skeletonProps?: SkeletonProps;\n  /** Additional props for customizing the wrapper box  */\n  wrapperProps?: BoxProps<ElementType>;\n  /** Custom component to replace skeleton. */\n  customLoader?: React.ReactNode;\n  /** Image failed to load message or component. */\n  errorContent?: React.ReactNode;\n  /** Additional props for customizing the error display box. */\n  errorProps?: BoxProps<ElementType>;\n  /** Controlled loading. */\n  loading?: boolean;\n  /** Controlled error. */\n  error?: boolean;\n}\n\n/**\n * The Image component that displays an image with a loading skeleton and optional customizable error messages or components when the image fails to load.\n * The Image component also supports a custom loader to replace the default skeleton and the skeleton property can be set to false to disable the skeleton entirely.\n */\nexport const Image: React.FC<ImageProps> = forwardRef(\n  (\n    {\n      aspectRatio,\n      width,\n      height,\n      skeleton = true,\n      skeletonProps,\n      wrapperProps,\n      errorProps,\n      customLoader,\n      errorContent,\n      loading,\n      error,\n      sx,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [loaded, setLoaded] = useState(false);\n    const [hasError, setHasError] = useState(false);\n\n    const { sx: skeletonSx, ...restSkeleton } = skeletonProps || {};\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps || {};\n    const { sx: errorSx, ...restError } = errorProps || {};\n\n    return (\n      <Box\n        data-testid=\"Image.wrapper\"\n        sx={sxOverride(\n          {\n            aspectRatio: aspectRatio ?? 'initial',\n            width: width ?? 'auto',\n            height: height ?? 'auto',\n            maxWidth: '100%',\n            position: 'relative',\n          },\n          wrapperSx,\n        )}\n        {...restWrapper}\n      >\n        {!hasError && !error && !loading && (\n          <Box\n            component=\"img\"\n            data-testid=\"Image.component\"\n            ref={ref}\n            onLoad={() => setLoaded(true)}\n            onError={() => setHasError(true)}\n            width={width}\n            height={height}\n            sx={sxOverride(\n              {\n                aspectRatio: aspectRatio ?? 'initial',\n                objectFit: 'cover',\n                width: '100%',\n                height: '100%',\n                display: 'block',\n              },\n              sx,\n            )}\n            {...rest}\n          />\n        )}\n        {(!loaded || loading) &&\n          !hasError &&\n          !error &&\n          (customLoader ||\n            (skeleton && (\n              <Skeleton\n                data-testid=\"Image.skeleton\"\n                variant=\"rectangular\"\n                sx={sxOverride({ width: '100%', height: '100%' }, skeletonSx)}\n                {...restSkeleton}\n              />\n            )))}\n        {(hasError || error) && (\n          <Box\n            data-testid=\"Image.error\"\n            sx={sxOverride(\n              {\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                width: '100%',\n                height: '100%',\n                backgroundColor: 'disabled.secondary',\n              },\n              errorSx,\n            )}\n            {...restError}\n          >\n            {errorContent || <CircleCloseFilledIcon color=\"error\" />}\n          </Box>\n        )}\n        {children}\n      </Box>\n    );\n  },\n);\n"],"names":["Image","forwardRef","aspectRatio","width","height","skeleton","skeletonProps","wrapperProps","errorProps","customLoader","errorContent","loading","error","sx","children","rest","ref","loaded","setLoaded","useState","hasError","setHasError","skeletonSx","restSkeleton","wrapperSx","restWrapper","errorSx","restError","_jsxs","Box","sxOverride","maxWidth","position","_jsx","component","onLoad","onError","objectFit","display","Skeleton","variant","alignItems","justifyContent","backgroundColor","CircleCloseFilledIcon","color"],"mappings":"uSAyCO,MAAMA,EAA8BC,EACzC,EAEIC,cACAC,QACAC,SACAC,YAAW,EACXC,gBACAC,eACAC,aACAC,eACAC,eACAC,UACAC,QACAC,KACAC,cACGC,GAELC,KAEA,MAAOC,EAAQC,GAAaC,GAAS,IAC9BC,EAAUC,GAAeF,GAAS,IAEjCN,GAAIS,KAAeC,GAAiBjB,GAAiB,CAAA,GACrDO,GAAIW,KAAcC,GAAgBlB,GAAgB,CAAA,GAClDM,GAAIa,KAAYC,GAAcnB,GAAc,CAAA,EAEpD,OACEoB,EAACC,EAAG,CAAA,cACU,gBACZhB,GAAIiB,EACF,CACE5B,YAAaA,GAAe,UAC5BC,MAAOA,GAAS,OAChBC,OAAQA,GAAU,OAClB2B,SAAU,OACVC,SAAU,YAEZR,MAEEC,EAAWX,SAAA,EAEbM,IAAaR,IAAUD,GACvBsB,EAACJ,EAAG,CACFK,UAAU,MAAK,cACH,kBACZlB,IAAKA,EACLmB,OAAQ,IAAMjB,GAAU,GACxBkB,QAAS,IAAMf,GAAY,GAC3BlB,MAAOA,EACPC,OAAQA,EACRS,GAAIiB,EACF,CACE5B,YAAaA,GAAe,UAC5BmC,UAAW,QACXlC,MAAO,OACPC,OAAQ,OACRkC,QAAS,SAEXzB,MAEEE,MAGLE,GAAUN,KACVS,IACAR,IACAH,GACEJ,GACC4B,EAACM,EAAQ,CAAA,cACK,iBACZC,QAAQ,cACR3B,GAAIiB,EAAW,CAAE3B,MAAO,OAAQC,OAAQ,QAAUkB,MAC9CC,MAGVH,GAAYR,IACZqB,EAACJ,EAAG,CAAA,cACU,cACZhB,GAAIiB,EACF,CACEQ,QAAS,OACTG,WAAY,SACZC,eAAgB,SAChBvC,MAAO,OACPC,OAAQ,OACRuC,gBAAiB,sBAEnBjB,MAEEC,WAEHjB,GAAgBuB,EAACW,EAAqB,CAACC,MAAM,YAGjD/B"}
+{"version":3,"file":"Image.js","sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useCallback, useState } from 'react';\nimport { Box, BoxProps, Skeleton, SkeletonProps, useForkRef } from '@mui/material';\nimport { CircleCloseFilledIcon } from '@/src/components/icon/filled/CircleCloseFilledIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface ImageProps extends BoxProps<ElementType> {\n  /**\n   * Image alt message\n   */\n  alt: string;\n  /**\n   * Image src path\n   */\n  src: string;\n  /**\n   * Image aspect ratio\n   */\n  aspectRatio?: number;\n  /**\n   * Image width (passed to the wrapper and img element)\n   */\n  width?: number | string;\n  /**\n   * Image height (passed to the wrapper and img element)\n   */\n  height?: number | string;\n  /**\n   * Skeleton displayed while the image is loading, if false the Image is rendered without Skeleton\n   * @default true\n   */\n  skeleton?: boolean;\n  /**\n   * Additional props for customizing the skeleton loader\n   */\n  skeletonProps?: SkeletonProps;\n  /**\n   * Additional props for customizing the wrapper box\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * Custom component to replace skeleton\n   */\n  customLoader?: React.ReactNode;\n  /**\n   * Image failed to load message or component\n   */\n  errorContent?: React.ReactNode;\n  /**\n   * Additional props for customizing the error display box\n   */\n  errorProps?: BoxProps<ElementType>;\n  /**\n   * Controlled loading\n   */\n  loading?: boolean;\n  /**\n   * Controlled error\n   */\n  error?: boolean;\n}\n\n/**\n * The Image component that displays an image with a loading skeleton and optional customizable error messages or components when the image fails to load.\n * The Image component also supports a custom loader to replace the default skeleton and the skeleton property can be set to false to disable the skeleton entirely.\n */\nexport const Image: React.FC<ImageProps> = forwardRef(\n  (\n    {\n      aspectRatio,\n      width,\n      height,\n      skeleton = true,\n      skeletonProps,\n      wrapperProps,\n      errorProps,\n      customLoader,\n      errorContent,\n      loading,\n      error,\n      sx,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [loaded, setLoaded] = useState(false);\n    const [hasError, setHasError] = useState(false);\n\n    // with SSR the img can settle before hydration, so React misses its load/error event\n    const imgRef = useCallback((img: HTMLImageElement | null) => {\n      if (img?.complete && img.getAttribute('src')) {\n        if (img.naturalWidth > 0) {\n          setLoaded(true);\n        } else {\n          // failed image or SVG without intrinsic size, reassigning src replays the event (same as next/image)\n          // eslint-disable-next-line no-self-assign\n          img.src = img.src;\n        }\n      }\n    }, []);\n    const handleRef = useForkRef(ref, imgRef);\n\n    const { sx: skeletonSx, ...restSkeleton } = skeletonProps || {};\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps || {};\n    const { sx: errorSx, ...restError } = errorProps || {};\n\n    return (\n      <Box\n        data-testid=\"Image.wrapper\"\n        sx={sxOverride(\n          {\n            aspectRatio: aspectRatio ?? 'initial',\n            width: width ?? 'auto',\n            height: height ?? 'auto',\n            maxWidth: '100%',\n            position: 'relative',\n          },\n          wrapperSx,\n        )}\n        {...restWrapper}\n      >\n        {!hasError && !error && !loading && (\n          <Box\n            component=\"img\"\n            data-testid=\"Image.component\"\n            ref={handleRef}\n            onLoad={() => setLoaded(true)}\n            onError={() => setHasError(true)}\n            width={width}\n            height={height}\n            sx={sxOverride(\n              {\n                aspectRatio: aspectRatio ?? 'initial',\n                objectFit: 'cover',\n                width: '100%',\n                height: '100%',\n                display: 'block',\n              },\n              sx,\n            )}\n            {...rest}\n          />\n        )}\n        {(!loaded || loading) &&\n          !hasError &&\n          !error &&\n          (customLoader ||\n            (skeleton && (\n              <Skeleton\n                data-testid=\"Image.skeleton\"\n                variant=\"rectangular\"\n                sx={sxOverride({ width: '100%', height: '100%' }, skeletonSx)}\n                {...restSkeleton}\n              />\n            )))}\n        {(hasError || error) && (\n          <Box\n            data-testid=\"Image.error\"\n            sx={sxOverride(\n              {\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                width: '100%',\n                height: '100%',\n                backgroundColor: 'disabled.secondary',\n              },\n              errorSx,\n            )}\n            {...restError}\n          >\n            {errorContent || <CircleCloseFilledIcon color=\"error\" />}\n          </Box>\n        )}\n        {children}\n      </Box>\n    );\n  },\n);\n"],"names":["Image","forwardRef","aspectRatio","width","height","skeleton","skeletonProps","wrapperProps","errorProps","customLoader","errorContent","loading","error","sx","children","rest","ref","loaded","setLoaded","useState","hasError","setHasError","imgRef","useCallback","img","complete","getAttribute","naturalWidth","src","handleRef","useForkRef","skeletonSx","restSkeleton","wrapperSx","restWrapper","errorSx","restError","_jsxs","Box","sxOverride","maxWidth","position","_jsx","component","onLoad","onError","objectFit","display","Skeleton","variant","alignItems","justifyContent","backgroundColor","CircleCloseFilledIcon","color"],"mappings":"wUAiEO,MAAMA,EAA8BC,EACzC,EAEIC,cACAC,QACAC,SACAC,YAAW,EACXC,gBACAC,eACAC,aACAC,eACAC,eACAC,UACAC,QACAC,KACAC,cACGC,GAELC,KAEA,MAAOC,EAAQC,GAAaC,GAAS,IAC9BC,EAAUC,GAAeF,GAAS,GAGnCG,EAASC,EAAaC,IACtBA,GAAKC,UAAYD,EAAIE,aAAa,SAChCF,EAAIG,aAAe,EACrBT,GAAU,GAIVM,EAAII,IAAMJ,EAAII,MAGjB,IACGC,EAAYC,EAAWd,EAAKM,IAE1BT,GAAIkB,KAAeC,GAAiB1B,GAAiB,CAAA,GACrDO,GAAIoB,KAAcC,GAAgB3B,GAAgB,CAAA,GAClDM,GAAIsB,KAAYC,GAAc5B,GAAc,CAAA,EAEpD,OACE6B,EAACC,EAAG,CAAA,cACU,gBACZzB,GAAI0B,EACF,CACErC,YAAaA,GAAe,UAC5BC,MAAOA,GAAS,OAChBC,OAAQA,GAAU,OAClBoC,SAAU,OACVC,SAAU,YAEZR,MAEEC,EAAWpB,SAAA,EAEbM,IAAaR,IAAUD,GACvB+B,EAACJ,EAAG,CACFK,UAAU,MAAK,cACH,kBACZ3B,IAAKa,EACLe,OAAQ,IAAM1B,GAAU,GACxB2B,QAAS,IAAMxB,GAAY,GAC3BlB,MAAOA,EACPC,OAAQA,EACRS,GAAI0B,EACF,CACErC,YAAaA,GAAe,UAC5B4C,UAAW,QACX3C,MAAO,OACPC,OAAQ,OACR2C,QAAS,SAEXlC,MAEEE,MAGLE,GAAUN,KACVS,IACAR,IACAH,GACEJ,GACCqC,EAACM,EAAQ,CAAA,cACK,iBACZC,QAAQ,cACRpC,GAAI0B,EAAW,CAAEpC,MAAO,OAAQC,OAAQ,QAAU2B,MAC9CC,MAGVZ,GAAYR,IACZ8B,EAACJ,EAAG,CAAA,cACU,cACZzB,GAAI0B,EACF,CACEQ,QAAS,OACTG,WAAY,SACZC,eAAgB,SAChBhD,MAAO,OACPC,OAAQ,OACRgD,gBAAiB,sBAEnBjB,MAEEC,WAEH1B,GAAgBgC,EAACW,EAAqB,CAACC,MAAM,YAGjDxC"}

package/components/index.d.ts

@@ -5,6 +5,7 @@ export * from './bottomSheet';
 export * from './bypassBlock';
 export * from './carousel';
 export * from './code';
+export * from './copyButton';
 export * from './errorContent';
 export * from './flag';
 export * from './focusring';
@@ -35,3 +36,4 @@ export * from './textAndCta';
 export * from './tooltipHeader';
 export * from './upload';
 export * from './video';
+export * from './videoPlayer';

package/components/label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, forwardRef, ElementType, ComponentType } from 'react';\nimport { Box, BoxProps, CSSObject, SvgIconProps, useTheme } from '@mui/material';\nimport { CircleExclamationIcon } from '@/src/components/icon/stroke/CircleExclamationIcon';\nimport { CircleInformationIcon } from '@/src/components/icon/stroke/CircleInformationIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface LabelBaseProps extends BoxProps<ElementType> {\n  /**\n   * Content to be rendered inside Label, alternatively children are used\n   */\n  label?: ReactNode;\n}\n\nexport interface GeneralLabelProps extends LabelBaseProps {\n  type?: 'general';\n}\n\nexport interface SimpleLabelProps extends LabelBaseProps {\n  type: 'simple';\n}\n\nexport type FeatureVariants =\n  | 'primary'\n  | 'neutral'\n  | 'secondary'\n  | 'discount'\n  | 'alert'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning';\nexport interface FeatureLabelProps extends LabelBaseProps {\n  type: 'feature';\n  variant?: FeatureVariants;\n}\n\nexport type SemanticVariants = 'positive' | 'info' | 'warning' | 'alert' | 'error';\nexport interface SemanticLabelProps extends LabelBaseProps {\n  type: 'semantic';\n  variant?: SemanticVariants;\n  iconProps?: SvgIconProps;\n  IconComponent?: ComponentType<SvgIconProps>;\n}\n\nexport type StatusVariants = 'positive' | 'warning' | 'alert' | 'error' | 'neutral' | 'disabled';\nexport interface StatusLabelProps extends LabelBaseProps {\n  type: 'status' | 'indicator';\n  variant?: StatusVariants;\n  dotProps?: BoxProps<ElementType>;\n  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';\n}\n\nexport type CO2Variants = 'A+++' | 'A++' | 'A+' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';\nexport interface CO2LabelProps extends LabelBaseProps {\n  type: 'CO2';\n  variant?: CO2Variants;\n  size?: 'small' | 'large';\n  labelBoxProps?: BoxProps<ElementType>;\n  labelNextProps?: BoxProps<ElementType>;\n}\n\nexport type LabelProps =\n  | SimpleLabelProps\n  | FeatureLabelProps\n  | SemanticLabelProps\n  | StatusLabelProps\n  | CO2LabelProps\n  | GeneralLabelProps;\n\n// Shared style for all variants\nconst baseSx: CSSObject = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  flexWrap: 'nowrap',\n  flexShrink: '0',\n  // font\n  fontSize: '11px',\n  lineHeight: '12px',\n  letterSpacing: '3px',\n  textTransform: 'uppercase',\n  fontWeight: '900',\n  whiteSpace: 'nowrap',\n  textRendering: 'geometricPrecision',\n};\n\nconst GeneralVariant: React.FC<GeneralLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-general\"\n    sx={sxOverride(\n      {\n        ...baseSx,\n        color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os200' : 'onSurface.os600'),\n      },\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst SimpleVariant: React.FC<SimpleLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-simple\"\n    sx={sxOverride(\n      (theme) => ({\n        ...baseSx,\n        ...theme.typography.list,\n        backgroundColor: 'transparent.primary',\n        color: 'text.primary',\n        p: '2px 10px',\n      }),\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst FeatureVariant: React.FC<FeatureLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'primary', sx, ...rest }, ref) => (\n    <Box\n      ref={ref}\n      data-testid={`Label-feature${variant}`}\n      sx={sxOverride(\n        {\n          ...baseSx,\n          color: 'onSurface.os0',\n          backgroundColor: 'brand.tertiary',\n          padding: '5px 7px 5px 10px',\n          borderRadius: '2px',\n          ...(variant === 'neutral' && {\n            backgroundColor: 'onSurface.os600',\n          }),\n          ...(variant === 'discount' && {\n            color: 'brand.secondary',\n            backgroundColor: 'brand.tertiary',\n          }),\n          // dark mode\n          ...(variant === 'secondary' && {\n            backgroundColor: 'brand.secondary',\n            color: 'brand.tertiary',\n          }),\n          // semantic labels\n          ...(['alert', 'error'].includes(variant) && {\n            backgroundColor: 'error.main',\n          }),\n          ...(variant === 'info' && {\n            backgroundColor: 'info.main',\n          }),\n          ...(variant === 'warning' && {\n            backgroundColor: 'warning.dark',\n          }),\n          ...(variant === 'success' && {\n            backgroundColor: 'brand.primary',\n          }),\n        },\n        sx,\n      )}\n      {...rest}\n    >\n      {label || children}\n    </Box>\n  ),\n);\n\n/**\n * Wrapper around getInteractiveStyle() function to provide interactive style\n *  only for label that is actually a button\n */\nfunction getLabelInteractiveStyle(defaultStyle: CSSObject, hoverStyle: CSSObject): CSSObject {\n  return {\n    ...defaultStyle,\n    '&.MuiButtonBase-root': {\n      ...getInteractiveStyle(defaultStyle, hoverStyle),\n    },\n  };\n}\n\nconst SemanticVariant: React.FC<SemanticLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'positive', sx, iconProps, IconComponent, onClick, ...rest }, ref) => {\n    const { sx: iconSx, ...restIconProps } = iconProps || {};\n    const VariantIconComponent = useMemo(() => {\n      switch (variant) {\n        case 'alert':\n        case 'error':\n        case 'warning':\n          return CircleExclamationIcon;\n        case 'info':\n        case 'positive':\n        default:\n          return CircleInformationIcon;\n      }\n    }, [variant]);\n    const SemanticIcon = IconComponent || VariantIconComponent;\n    const theme = useTheme();\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-semantic${variant}`}\n        sx={sxOverride(\n          {\n            ...baseSx,\n            gap: '6px',\n            padding: '2px 8px 2px 4px',\n            borderRadius: '4px',\n            border: 1,\n            borderColor: 'currentColor',\n            transition:\n              'transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.3s ease-out',\n            // clickable style\n            '&&.MuiButtonBase-root': {\n              // focused style\n              ...getFocusRingStyle(theme, true, 1),\n            },\n            // default, positive\n            ...getLabelInteractiveStyle(\n              {\n                color: 'brand.primary',\n                backgroundColor: 'transparent',\n              },\n              {\n                color: 'brandHover.primary',\n                backgroundColor: 'transparent.primary',\n              },\n            ),\n            ...(['alert', 'error'].includes(variant) && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'error.main',\n                  backgroundColor: 'transparent',\n                },\n                {\n                  color: 'error.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n            ...(variant === 'warning' && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'warning.dark',\n                  backgroundColor: 'transparent',\n                },\n                {\n                  color: 'warning.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n            ...(variant === 'info' && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'info.main',\n                  backgroundColor: 'transparent',\n                },\n                {\n                  color: 'info.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n          },\n          sx,\n        )}\n        onClick={onClick}\n        {...rest}\n      >\n        <SemanticIcon\n          data-testid={`icon-${variant}`}\n          sx={sxOverride({ fontSize: '18px' }, iconSx)}\n          {...restIconProps}\n        />\n        {label || children}\n      </Box>\n    );\n  },\n);\n\nconst StatusVariant: React.FC<StatusLabelProps> = forwardRef(\n  ({ type, label, children, variant = 'positive', labelPlacement = 'end', dotProps, sx, ...rest }, ref) => {\n    const { sx: dotSx, ...restDot } = dotProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-status${variant}`}\n        sx={sxOverride(\n          (theme) => ({\n            ...baseSx,\n            color: 'text.primary',\n            flexDirection: { start: 'row-reverse', top: 'column-reverse', bottom: 'column' }[labelPlacement] ?? 'row',\n            gap: 1,\n            ...(type === 'indicator' && theme.typography.disclaimer1),\n          }),\n          sx,\n        )}\n        {...(variant === 'disabled' && {\n          disabled: true,\n          tabIndex: -1,\n        })}\n        {...rest}\n      >\n        <Box\n          sx={sxOverride(\n            {\n              width: '10px',\n              height: '10px',\n              ...(type === 'indicator' && {\n                width: '14px',\n                height: '14px',\n              }),\n              borderRadius: '50%',\n              backgroundColor: 'success.main',\n              ...(variant === 'warning' && {\n                backgroundColor: 'warning.dark',\n              }),\n              ...(['alert', 'error'].includes(variant) && {\n                backgroundColor: 'error.main',\n              }),\n              ...(variant === 'neutral' && {\n                backgroundColor: 'onSurface.os500',\n              }),\n              ...(variant === 'disabled' && {\n                backgroundColor: 'disabled.secondary',\n              }),\n            },\n            dotSx,\n          )}\n          {...restDot}\n        />\n        {label || children}\n      </Box>\n    );\n  },\n);\n\nconst CO2Variant: React.FC<CO2LabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'A+++', size = 'large', sx, labelBoxProps, labelNextProps, ...rest }, ref) => {\n    const colorMap = useMemo(\n      () => ({\n        B: '#019A01',\n        C: '#69CC00',\n        D: '#FFCC01',\n        E: '#F99601',\n        F: '#FE6501',\n        G: '#FF3100',\n        H: '#2A78CD',\n      }),\n      [],\n    );\n    const getColor = (_variant: string) => colorMap[_variant] || '#016703';\n\n    const { sx: labelBoxSx, ...restLabelBox } = labelBoxProps || {};\n    const { sx: labelNextSx, ...restLabelNext } = labelNextProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-CO2${variant}`}\n        sx={sxOverride(\n          {\n            ...baseSx,\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        <Box\n          component=\"span\"\n          sx={sxOverride(\n            {\n              alignItems: 'center',\n              backgroundColor: getColor(variant),\n              boxSizing: 'border-box',\n              color: 'surface.tertiary',\n              display: 'inline-flex',\n              justifyContent: 'flex-start',\n              fontWeight: '700',\n              height: { xs: '20px', xl: '22px' },\n              fontSize: { xs: '12px', xl: '14px' },\n              ...(size === 'small' && {\n                fontSize: { xs: '10px', xl: '12px' },\n                height: { xs: '16px', xl: '18px' },\n              }),\n              padding: '0 5px',\n              position: 'relative',\n              letterSpacing: '1px',\n            },\n            labelBoxSx,\n          )}\n          {...restLabelBox}\n        >\n          {label || children || variant}\n        </Box>\n        <Box\n          sx={sxOverride(\n            {\n              content: '\"\"',\n              display: 'block',\n              width: '0',\n              height: '0',\n              borderStyle: 'solid',\n              borderColor: `transparent transparent transparent ${getColor(variant)}`,\n              borderWidth: {\n                xs: `10px 0 10px 7px`,\n                lg: `11px 0 11px 8px`,\n              },\n              ...(size === 'small' && {\n                borderWidth: {\n                  xs: '8px 0 8px 5px',\n                  lg: '9px 0 9px 7px',\n                },\n              }),\n            },\n            labelNextSx,\n          )}\n          {...restLabelNext}\n        />\n      </Box>\n    );\n  },\n);\n\nexport const Label: React.FC<LabelProps> = forwardRef((props, ref) => {\n  const LabelComponent = useMemo<React.FC<LabelProps>>(() => {\n    switch (props.type) {\n      case 'simple':\n        return SimpleVariant;\n      case 'feature':\n        return FeatureVariant;\n      case 'semantic':\n        return SemanticVariant;\n      case 'status':\n      case 'indicator':\n        return StatusVariant;\n      case 'CO2':\n        return CO2Variant;\n      case 'general':\n      default:\n        return GeneralVariant;\n    }\n  }, [props.type]);\n\n  return <LabelComponent component=\"span\" {...props} ref={ref} />;\n});\n"],"names":["baseSx","display","alignItems","justifyContent","flexWrap","flexShrink","fontSize","lineHeight","letterSpacing","textTransform","fontWeight","whiteSpace","textRendering","GeneralVariant","forwardRef","type","_","label","children","sx","rest","ref","_jsx","Box","sxOverride","color","theme","palette","mode","SimpleVariant","typography","list","backgroundColor","p","FeatureVariant","variant","padding","borderRadius","includes","getLabelInteractiveStyle","defaultStyle","hoverStyle","getInteractiveStyle","SemanticVariant","iconProps","IconComponent","onClick","iconSx","restIconProps","VariantIconComponent","useMemo","CircleExclamationIcon","CircleInformationIcon","SemanticIcon","useTheme","_jsxs","gap","border","borderColor","transition","getFocusRingStyle","StatusVariant","labelPlacement","dotProps","dotSx","restDot","flexDirection","start","top","bottom","disclaimer1","disabled","tabIndex","width","height","CO2Variant","size","labelBoxProps","labelNextProps","colorMap","B","C","D","E","F","G","H","getColor","_variant","labelBoxSx","restLabelBox","labelNextSx","restLabelNext","component","boxSizing","xs","xl","position","content","borderStyle","borderWidth","lg","Label","props","LabelComponent"],"mappings":"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"}
+{"version":3,"file":"Label.js","sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, forwardRef, ElementType, ComponentType } from 'react';\nimport { Box, BoxProps, CSSObject, SvgIconProps, useTheme } from '@mui/material';\nimport { CircleExclamationIcon } from '@/src/components/icon/stroke/CircleExclamationIcon';\nimport { CircleInformationIcon } from '@/src/components/icon/stroke/CircleInformationIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface LabelBaseProps extends BoxProps<ElementType> {\n  /**\n   * Content to be rendered inside Label, alternatively children are used\n   */\n  label?: ReactNode;\n}\n\nexport interface GeneralLabelProps extends LabelBaseProps {\n  type?: 'general';\n}\n\nexport interface SimpleLabelProps extends LabelBaseProps {\n  type: 'simple';\n}\n\nexport type FeatureVariants =\n  'primary' | 'neutral' | 'secondary' | 'discount' | 'alert' | 'error' | 'info' | 'success' | 'warning';\nexport interface FeatureLabelProps extends LabelBaseProps {\n  type: 'feature';\n  variant?: FeatureVariants;\n}\n\nexport type SemanticVariants = 'positive' | 'info' | 'warning' | 'alert' | 'error';\nexport interface SemanticLabelProps extends LabelBaseProps {\n  type: 'semantic';\n  variant?: SemanticVariants;\n  iconProps?: SvgIconProps;\n  IconComponent?: ComponentType<SvgIconProps>;\n}\n\nexport type StatusVariants = 'positive' | 'warning' | 'alert' | 'error' | 'neutral' | 'disabled';\nexport interface StatusLabelProps extends LabelBaseProps {\n  type: 'status' | 'indicator';\n  variant?: StatusVariants;\n  dotProps?: BoxProps<ElementType>;\n  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';\n}\n\nexport type CO2Variants = 'A+++' | 'A++' | 'A+' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';\nexport interface CO2LabelProps extends LabelBaseProps {\n  type: 'CO2';\n  variant?: CO2Variants;\n  size?: 'small' | 'large';\n  labelBoxProps?: BoxProps<ElementType>;\n  labelNextProps?: BoxProps<ElementType>;\n}\n\nexport type LabelProps =\n  SimpleLabelProps | FeatureLabelProps | SemanticLabelProps | StatusLabelProps | CO2LabelProps | GeneralLabelProps;\n\n// Shared style for all variants\nconst baseSx: CSSObject = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  flexWrap: 'nowrap',\n  flexShrink: '0',\n  // font\n  fontSize: '11px',\n  lineHeight: '12px',\n  letterSpacing: '3px',\n  textTransform: 'uppercase',\n  fontWeight: '900',\n  whiteSpace: 'nowrap',\n  textRendering: 'geometricPrecision',\n};\n\nconst GeneralVariant: React.FC<GeneralLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-general\"\n    sx={sxOverride(\n      {\n        ...baseSx,\n        color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os200' : 'onSurface.os600'),\n      },\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst SimpleVariant: React.FC<SimpleLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-simple\"\n    sx={sxOverride(\n      (theme) => ({\n        ...baseSx,\n        ...theme.typography.list,\n        backgroundColor: 'transparent.primary',\n        color: 'text.primary',\n        p: '2px 10px',\n      }),\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst FeatureVariant: React.FC<FeatureLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'primary', sx, ...rest }, ref) => (\n    <Box\n      ref={ref}\n      data-testid={`Label-feature${variant}`}\n      sx={sxOverride(\n        {\n          ...baseSx,\n          color: 'onSurface.os0',\n          backgroundColor: 'brand.tertiary',\n          padding: '5px 7px 5px 10px',\n          borderRadius: '2px',\n          ...(variant === 'neutral' && {\n            backgroundColor: 'onSurface.os600',\n          }),\n          ...(variant === 'discount' && {\n            color: 'brand.secondary',\n            backgroundColor: 'brand.tertiary',\n          }),\n          // dark mode\n          ...(variant === 'secondary' && {\n            backgroundColor: 'brand.secondary',\n            color: 'brand.tertiary',\n          }),\n          // semantic labels\n          ...(['alert', 'error'].includes(variant) && {\n            backgroundColor: 'error.main',\n          }),\n          ...(variant === 'info' && {\n            backgroundColor: 'info.main',\n          }),\n          ...(variant === 'warning' && {\n            backgroundColor: 'warning.dark',\n          }),\n          ...(variant === 'success' && {\n            backgroundColor: 'brand.primary',\n          }),\n        },\n        sx,\n      )}\n      {...rest}\n    >\n      {label || children}\n    </Box>\n  ),\n);\n\n/**\n * Wrapper around getInteractiveStyle() function to provide interactive style\n *  only for label that is actually a button\n */\nfunction getLabelInteractiveStyle(defaultStyle: CSSObject, hoverStyle: CSSObject): CSSObject {\n  return {\n    ...defaultStyle,\n    '&.MuiButtonBase-root': {\n      ...getInteractiveStyle(defaultStyle, hoverStyle),\n    },\n  };\n}\n\nconst SemanticVariant: React.FC<SemanticLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'positive', sx, iconProps, IconComponent, onClick, ...rest }, ref) => {\n    const { sx: iconSx, ...restIconProps } = iconProps || {};\n    const VariantIconComponent = useMemo(() => {\n      switch (variant) {\n        case 'alert':\n        case 'error':\n        case 'warning':\n          return CircleExclamationIcon;\n        case 'info':\n        case 'positive':\n        default:\n          return CircleInformationIcon;\n      }\n    }, [variant]);\n    const SemanticIcon = IconComponent || VariantIconComponent;\n    const theme = useTheme();\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-semantic${variant}`}\n        sx={sxOverride(\n          {\n            ...baseSx,\n            gap: '6px',\n            padding: '2px 8px 2px 4px',\n            borderRadius: '4px',\n            border: 1,\n            borderColor: 'currentColor',\n            transition:\n              'transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.3s ease-out',\n            // clickable style\n            '&&.MuiButtonBase-root': {\n              // focused style\n              ...getFocusRingStyle(theme, true, 1),\n            },\n            // default, positive\n            ...getLabelInteractiveStyle(\n              {\n                color: 'brand.primary',\n                backgroundColor: 'transparent',\n              },\n              {\n                color: 'brandHover.primary',\n                backgroundColor: 'transparent.primary',\n              },\n            ),\n            ...(['alert', 'error'].includes(variant) && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'error.main',\n                  backgroundColor: 'transparent',\n                },\n                {\n                  color: 'error.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n            ...(variant === 'warning' && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'warning.dark',\n                  backgroundColor: 'transparent',\n                },\n                {\n                  color: 'warning.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n            ...(variant === 'info' && {\n              ...getLabelInteractiveStyle(\n                {\n                  color: 'info.main',\n                  backgroundColor: 'transparent',\n                },\n                {\n                  color: 'info.dark',\n                  backgroundColor: 'transparent.primary',\n                },\n              ),\n            }),\n          },\n          sx,\n        )}\n        onClick={onClick}\n        {...rest}\n      >\n        <SemanticIcon\n          data-testid={`icon-${variant}`}\n          sx={sxOverride({ fontSize: '18px' }, iconSx)}\n          {...restIconProps}\n        />\n        {label || children}\n      </Box>\n    );\n  },\n);\n\nconst StatusVariant: React.FC<StatusLabelProps> = forwardRef(\n  ({ type, label, children, variant = 'positive', labelPlacement = 'end', dotProps, sx, ...rest }, ref) => {\n    const { sx: dotSx, ...restDot } = dotProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-status${variant}`}\n        sx={sxOverride(\n          (theme) => ({\n            ...baseSx,\n            color: 'text.primary',\n            flexDirection: { start: 'row-reverse', top: 'column-reverse', bottom: 'column' }[labelPlacement] ?? 'row',\n            gap: 1,\n            ...(type === 'indicator' && theme.typography.disclaimer1),\n          }),\n          sx,\n        )}\n        {...(variant === 'disabled' && {\n          disabled: true,\n          tabIndex: -1,\n        })}\n        {...rest}\n      >\n        <Box\n          sx={sxOverride(\n            {\n              width: '10px',\n              height: '10px',\n              ...(type === 'indicator' && {\n                width: '14px',\n                height: '14px',\n              }),\n              borderRadius: '50%',\n              backgroundColor: 'success.main',\n              ...(variant === 'warning' && {\n                backgroundColor: 'warning.dark',\n              }),\n              ...(['alert', 'error'].includes(variant) && {\n                backgroundColor: 'error.main',\n              }),\n              ...(variant === 'neutral' && {\n                backgroundColor: 'onSurface.os500',\n              }),\n              ...(variant === 'disabled' && {\n                backgroundColor: 'disabled.secondary',\n              }),\n            },\n            dotSx,\n          )}\n          {...restDot}\n        />\n        {label || children}\n      </Box>\n    );\n  },\n);\n\nconst CO2Variant: React.FC<CO2LabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'A+++', size = 'large', sx, labelBoxProps, labelNextProps, ...rest }, ref) => {\n    const colorMap = useMemo(\n      () => ({\n        B: '#019A01',\n        C: '#69CC00',\n        D: '#FFCC01',\n        E: '#F99601',\n        F: '#FE6501',\n        G: '#FF3100',\n        H: '#2A78CD',\n      }),\n      [],\n    );\n    const getColor = (_variant: string) => colorMap[_variant] || '#016703';\n\n    const { sx: labelBoxSx, ...restLabelBox } = labelBoxProps || {};\n    const { sx: labelNextSx, ...restLabelNext } = labelNextProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-CO2${variant}`}\n        sx={sxOverride(\n          {\n            ...baseSx,\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        <Box\n          component=\"span\"\n          sx={sxOverride(\n            {\n              alignItems: 'center',\n              backgroundColor: getColor(variant),\n              boxSizing: 'border-box',\n              color: 'surface.tertiary',\n              display: 'inline-flex',\n              justifyContent: 'flex-start',\n              fontWeight: '700',\n              height: { xs: '20px', xl: '22px' },\n              fontSize: { xs: '12px', xl: '14px' },\n              ...(size === 'small' && {\n                fontSize: { xs: '10px', xl: '12px' },\n                height: { xs: '16px', xl: '18px' },\n              }),\n              padding: '0 5px',\n              position: 'relative',\n              letterSpacing: '1px',\n            },\n            labelBoxSx,\n          )}\n          {...restLabelBox}\n        >\n          {label || children || variant}\n        </Box>\n        <Box\n          sx={sxOverride(\n            {\n              content: '\"\"',\n              display: 'block',\n              width: '0',\n              height: '0',\n              borderStyle: 'solid',\n              borderColor: `transparent transparent transparent ${getColor(variant)}`,\n              borderWidth: {\n                xs: `10px 0 10px 7px`,\n                lg: `11px 0 11px 8px`,\n              },\n              ...(size === 'small' && {\n                borderWidth: {\n                  xs: '8px 0 8px 5px',\n                  lg: '9px 0 9px 7px',\n                },\n              }),\n            },\n            labelNextSx,\n          )}\n          {...restLabelNext}\n        />\n      </Box>\n    );\n  },\n);\n\nexport const Label: React.FC<LabelProps> = forwardRef((props, ref) => {\n  const LabelComponent = useMemo<React.FC<LabelProps>>(() => {\n    switch (props.type) {\n      case 'simple':\n        return SimpleVariant;\n      case 'feature':\n        return FeatureVariant;\n      case 'semantic':\n        return SemanticVariant;\n      case 'status':\n      case 'indicator':\n        return StatusVariant;\n      case 'CO2':\n        return CO2Variant;\n      case 'general':\n      default:\n        return GeneralVariant;\n    }\n  }, [props.type]);\n\n  return <LabelComponent component=\"span\" {...props} ref={ref} />;\n});\n"],"names":["baseSx","display","alignItems","justifyContent","flexWrap","flexShrink","fontSize","lineHeight","letterSpacing","textTransform","fontWeight","whiteSpace","textRendering","GeneralVariant","forwardRef","type","_","label","children","sx","rest","ref","_jsx","Box","sxOverride","color","theme","palette","mode","SimpleVariant","typography","list","backgroundColor","p","FeatureVariant","variant","padding","borderRadius","includes","getLabelInteractiveStyle","defaultStyle","hoverStyle","getInteractiveStyle","SemanticVariant","iconProps","IconComponent","onClick","iconSx","restIconProps","VariantIconComponent","useMemo","CircleExclamationIcon","CircleInformationIcon","SemanticIcon","useTheme","_jsxs","gap","border","borderColor","transition","getFocusRingStyle","StatusVariant","labelPlacement","dotProps","dotSx","restDot","flexDirection","start","top","bottom","disclaimer1","disabled","tabIndex","width","height","CO2Variant","size","labelBoxProps","labelNextProps","colorMap","B","C","D","E","F","G","H","getColor","_variant","labelBoxSx","restLabelBox","labelNextSx","restLabelNext","component","boxSizing","xs","xl","position","content","borderStyle","borderWidth","lg","Label","props","LabelComponent"],"mappings":"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"}

package/components/overlay/Overlay.js

@@ -1,2 +1,2 @@
-import{jsxs as r,jsx as e}from"react/jsx-runtime";import{Box as a}from"@mui/material";import{sxOverride as t}from"../../utils/sxOverride/sxOverride.js";const i=({wrapperProps:i,sx:n,overlayContent:o,variant:d,children:s,...g})=>{const{sx:l,...m}=i||{};return r(a,{"data-testid":"Overlay-wrapper",sx:t({position:"relative",maxWidth:"100%",maxHeight:"100%"},l),...m,children:[o,e(a,{"data-testid":"Overlay-overlay",sx:t({position:"absolute",inset:"0",zIndex:"100",background:"hero"===d?"linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)":"linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))"},n),...g,children:s})]})};export{i as Overlay};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import{Box as a}from"@mui/material";import{sxOverride as i}from"../../utils/sxOverride/sxOverride.js";const t=({wrapperProps:t,sx:n,overlayContent:o,variant:d,children:s,...g})=>{const{sx:l,...m}=t||{};return r(a,{"data-testid":"Overlay-wrapper",sx:i({position:"relative",maxWidth:"100%",maxHeight:"100%","*:where(&) > :is(img, video)":{width:"100%"}},l),...m,children:[o,e(a,{"data-testid":"Overlay-overlay",sx:i({position:"absolute",inset:"0",zIndex:"100",background:"hero"===d?"linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)":"linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))"},n),...g,children:s})]})};export{t as Overlay};
 //# sourceMappingURL=Overlay.js.map

package/components/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface OverlayProps extends BoxProps<ElementType> {\n  variant?: 'default' | 'hero';\n  /** The content like image to be displayed inside the overlay.  */\n  overlayContent?: React.ReactNode;\n  /** custom props of the Box wrapper of the component. */\n  wrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * The Overlay Component\n *\n * Overlay component wraps its children with an overlay effect. The overlay effect is achieved\n * using a semi-transparent gradient background. The component allows for custom content\n * (like an image) to be displayed inside the overlay through the `overlayContent` prop.\n */\nexport const Overlay: React.FC<OverlayProps> = ({ wrapperProps, sx, overlayContent, variant, children, ...rest }) => {\n  const { sx: wrapperSx, ...restWrapper } = wrapperProps || {};\n\n  return (\n    <Box\n      data-testid=\"Overlay-wrapper\"\n      sx={sxOverride({ position: 'relative', maxWidth: '100%', maxHeight: '100%' }, wrapperSx)}\n      {...restWrapper}\n    >\n      {overlayContent}\n      <Box\n        data-testid=\"Overlay-overlay\"\n        sx={sxOverride(\n          {\n            position: 'absolute',\n            inset: '0',\n            zIndex: '100',\n            background:\n              variant === 'hero'\n                ? 'linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)'\n                : 'linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))',\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["Overlay","wrapperProps","sx","overlayContent","variant","children","rest","wrapperSx","restWrapper","_jsxs","Box","sxOverride","position","maxWidth","maxHeight","_jsx","inset","zIndex","background"],"mappings":"8JAmBaA,EAAkC,EAAGC,eAAcC,KAAIC,iBAAgBC,UAASC,cAAaC,MACxG,MAAQJ,GAAIK,KAAcC,GAAgBP,GAAgB,CAAA,EAE1D,OACEQ,EAACC,EAAG,CAAA,cACU,kBACZR,GAAIS,EAAW,CAAEC,SAAU,WAAYC,SAAU,OAAQC,UAAW,QAAUP,MAC1EC,EAAWH,SAAA,CAEdF,EACDY,EAACL,EAAG,CAAA,cACU,kBACZR,GAAIS,EACF,CACEC,SAAU,WACVI,MAAO,IACPC,OAAQ,MACRC,WACc,SAAZd,EACI,8KACA,6DAERF,MAEEI,WAEHD"}
+{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface OverlayProps extends BoxProps<ElementType> {\n  variant?: 'default' | 'hero';\n  /** The content like image to be displayed inside the overlay.  */\n  overlayContent?: React.ReactNode;\n  /** custom props of the Box wrapper of the component. */\n  wrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * The Overlay Component\n *\n * Overlay component wraps its children with an overlay effect. The overlay effect is achieved\n * using a semi-transparent gradient background. The component allows for custom content\n * (like an image) to be displayed inside the overlay through the `overlayContent` prop.\n */\nexport const Overlay: React.FC<OverlayProps> = ({ wrapperProps, sx, overlayContent, variant, children, ...rest }) => {\n  const { sx: wrapperSx, ...restWrapper } = wrapperProps || {};\n\n  return (\n    <Box\n      data-testid=\"Overlay-wrapper\"\n      sx={sxOverride(\n        {\n          position: 'relative',\n          maxWidth: '100%',\n          maxHeight: '100%',\n          // media fills the wrapper width, zero specificity keeps it overridable by the sx of the content,\n          // leading * keeps stylis from prefixing the pseudo-class with the own class\n          '*:where(&) > :is(img, video)': {\n            width: '100%',\n          },\n        },\n        wrapperSx,\n      )}\n      {...restWrapper}\n    >\n      {overlayContent}\n      <Box\n        data-testid=\"Overlay-overlay\"\n        sx={sxOverride(\n          {\n            position: 'absolute',\n            inset: '0',\n            zIndex: '100',\n            background:\n              variant === 'hero'\n                ? 'linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)'\n                : 'linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))',\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["Overlay","wrapperProps","sx","overlayContent","variant","children","rest","wrapperSx","restWrapper","_jsxs","Box","sxOverride","position","maxWidth","maxHeight","width","_jsx","inset","zIndex","background"],"mappings":"8JAmBaA,EAAkC,EAAGC,eAAcC,KAAIC,iBAAgBC,UAASC,cAAaC,MACxG,MAAQJ,GAAIK,KAAcC,GAAgBP,GAAgB,CAAA,EAE1D,OACEQ,EAACC,EAAG,CAAA,cACU,kBACZR,GAAIS,EACF,CACEC,SAAU,WACVC,SAAU,OACVC,UAAW,OAGX,+BAAgC,CAC9BC,MAAO,SAGXR,MAEEC,YAEHL,EACDa,EAACN,iBACa,kBACZR,GAAIS,EACF,CACEC,SAAU,WACVK,MAAO,IACPC,OAAQ,MACRC,WACc,SAAZf,EACI,8KACA,6DAERF,MAEEI,WAEHD"}

package/components/video/Video.d.ts

@@ -5,12 +5,17 @@ export interface VideoProps extends BoxProps<'video'> {
     src?: string;
     /** video type property, @default "video/mp4" */
     type?: string;
-    /** The message (or component) to display if the video cannot be loaded, @default <Icon name="file-missing" /> centered inside the Box  */
+    /**
+     * Content shown when the video fails to load
+     * @default <FileMissingIcon /> centered inside the Box
+     */
+    errorFallback?: React.ReactNode;
+    /**
+     * @deprecated Use `errorFallback` instead
+     */
     noVidErrorMessage?: React.ReactNode;
     /** Custom source Box props. */
     sourceProps?: BoxProps<'source'>;
-    /** Image to be shown while the video is downloading or until the user hits the play button. */
-    poster?: string;
     /** Video element autoPlay, @default true */
     autoPlay?: boolean;
     /** Video element muted, @default true */
@@ -21,10 +26,6 @@ export interface VideoProps extends BoxProps<'video'> {
     loop?: boolean;
 }
 /**
- *  The Video component is a customizable video player built with React and Material-UI.
- *  It extends the Box component from Material-UI and provides various props to control video playback and appearance.
- *  If children are provided, they are rendered inside the video element as source elements.
- *  If no children are provided, a default source element is used based on the src prop.
- *  @param videoRef - A reference to the video element.
+ * Video player wrapping the native <video> element, rendering a fallback when the source fails to load
  */
 export declare const Video: React.FC<VideoProps>;

package/components/video/Video.js

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as e}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Box as t}from"@mui/material";import{FileMissingIcon as i}from"../icon/stroke/FileMissingIcon.js";import{sxOverride as s}from"../../utils/sxOverride/sxOverride.js";const m=r(({src:r,type:m="video/mp4",noVidErrorMessage:n,sourceProps:c,poster:p,sx:d,autoPlay:l=!0,muted:a=!0,controls:u=!1,loop:x=!1,children:f,...h},y)=>o(t,{component:"video","data-testid":"Video",poster:p,ref:y,autoPlay:l,muted:a,controls:u,loop:x,sx:s({display:"block",maxWidth:"100%"},d),...h,children:[f??e(t,{component:"source",src:r,type:m,...c}),n??e(t,{sx:{display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"},children:e(i,{})})]}));export{m as Video};
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Box as t}from"@mui/material";import{FileMissingIcon as i}from"../icon/stroke/FileMissingIcon.js";import{sxOverride as s}from"../../utils/sxOverride/sxOverride.js";const c=r(({src:r,type:c="video/mp4",errorFallback:n,noVidErrorMessage:l,sourceProps:m,sx:a,autoPlay:d=!0,muted:p=!0,controls:u=!1,loop:h=!1,children:f,...x},y)=>e(t,{component:"video","data-testid":"Video",ref:y,autoPlay:d,muted:p,controls:u,loop:h,sx:s({display:"block",maxWidth:"100%","*:fullscreen > &":{width:"100%",height:"100%",objectFit:"contain"}},a),...x,children:[f??o(t,{component:"source",src:r,type:c,...m}),n??l??o(t,{sx:{display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"},children:o(i,{})})]}));export{c as Video};
 //# sourceMappingURL=Video.js.map

package/components/video/Video.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.js","sources":["../../../src/components/video/Video.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { FileMissingIcon } from '@/src/components/icon/stroke/FileMissingIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface VideoProps extends BoxProps<'video'> {\n  /** The URL of the video to embed. */\n  src?: string;\n  /** video type property, @default \"video/mp4\" */\n  type?: string;\n  /** The message (or component) to display if the video cannot be loaded, @default <Icon name=\"file-missing\" /> centered inside the Box  */\n  noVidErrorMessage?: React.ReactNode;\n  /** Custom source Box props. */\n  sourceProps?: BoxProps<'source'>;\n  /** Image to be shown while the video is downloading or until the user hits the play button. */\n  poster?: string;\n  /** Video element autoPlay, @default true */\n  autoPlay?: boolean;\n  /** Video element muted, @default true */\n  muted?: boolean;\n  /** Video element native browser controls, @default false */\n  controls?: boolean;\n  /** Video element loop, @default false */\n  loop?: boolean;\n}\n\n/**\n *  The Video component is a customizable video player built with React and Material-UI.\n *  It extends the Box component from Material-UI and provides various props to control video playback and appearance.\n *  If children are provided, they are rendered inside the video element as source elements.\n *  If no children are provided, a default source element is used based on the src prop.\n *  @param videoRef - A reference to the video element.\n */\nexport const Video: React.FC<VideoProps> = forwardRef(\n  (\n    {\n      src,\n      type = 'video/mp4',\n      noVidErrorMessage,\n      sourceProps,\n      poster,\n      sx,\n      autoPlay = true,\n      muted = true,\n      controls = false,\n      loop = false,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <Box\n        component=\"video\"\n        data-testid=\"Video\"\n        poster={poster}\n        ref={ref}\n        autoPlay={autoPlay}\n        muted={muted}\n        controls={controls}\n        loop={loop}\n        sx={sxOverride(\n          {\n            display: 'block',\n            maxWidth: '100%',\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        {children ?? <Box component=\"source\" src={src} type={type} {...sourceProps} />}\n        {noVidErrorMessage ?? (\n          <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%' }}>\n            <FileMissingIcon />\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Video","forwardRef","src","type","noVidErrorMessage","sourceProps","poster","sx","autoPlay","muted","controls","loop","children","rest","ref","_jsxs","Box","component","sxOverride","display","maxWidth","_jsx","justifyContent","alignItems","width","height","FileMissingIcon"],"mappings":"qQAiCaA,EAA8BC,EACzC,EAEIC,MACAC,OAAO,YACPC,oBACAC,cACAC,SACAC,KACAC,YAAW,EACXC,SAAQ,EACRC,YAAW,EACXC,QAAO,EACPC,cACGC,GAELC,IAGEC,EAACC,EAAG,CACFC,UAAU,QAAO,cACL,QACZX,OAAQA,EACRQ,IAAKA,EACLN,SAAUA,EACVC,MAAOA,EACPC,SAAUA,EACVC,KAAMA,EACNJ,GAAIW,EACF,CACEC,QAAS,QACTC,SAAU,QAEZb,MAEEM,EAAID,SAAA,CAEPA,GAAYS,EAACL,EAAG,CAACC,UAAU,SAASf,IAAKA,EAAKC,KAAMA,KAAUE,IAC9DD,GACCiB,EAACL,EAAG,CAACT,GAAI,CAAEY,QAAS,OAAQG,eAAgB,SAAUC,WAAY,SAAUC,MAAO,OAAQC,OAAQ,QAAQb,SACzGS,EAACK,EAAe"}
+{"version":3,"file":"Video.js","sources":["../../../src/components/video/Video.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { FileMissingIcon } from '@/src/components/icon/stroke/FileMissingIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface VideoProps extends BoxProps<'video'> {\n  /** The URL of the video to embed. */\n  src?: string;\n  /** video type property, @default \"video/mp4\" */\n  type?: string;\n  /**\n   * Content shown when the video fails to load\n   * @default <FileMissingIcon /> centered inside the Box\n   */\n  errorFallback?: React.ReactNode;\n  /**\n   * @deprecated Use `errorFallback` instead\n   */\n  noVidErrorMessage?: React.ReactNode;\n  /** Custom source Box props. */\n  sourceProps?: BoxProps<'source'>;\n  /** Video element autoPlay, @default true */\n  autoPlay?: boolean;\n  /** Video element muted, @default true */\n  muted?: boolean;\n  /** Video element native browser controls, @default false */\n  controls?: boolean;\n  /** Video element loop, @default false */\n  loop?: boolean;\n}\n\n/**\n * Video player wrapping the native <video> element, rendering a fallback when the source fails to load\n */\nexport const Video: React.FC<VideoProps> = forwardRef(\n  (\n    {\n      src,\n      type = 'video/mp4',\n      errorFallback,\n      noVidErrorMessage,\n      sourceProps,\n      sx,\n      autoPlay = true,\n      muted = true,\n      controls = false,\n      loop = false,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <Box\n        component=\"video\"\n        data-testid=\"Video\"\n        ref={ref}\n        autoPlay={autoPlay}\n        muted={muted}\n        controls={controls}\n        loop={loop}\n        sx={sxOverride(\n          {\n            display: 'block',\n            maxWidth: '100%',\n            // fill the container fullscreened by useVideoFullscreen, otherwise the video keeps its intrinsic size\n            // leading * keeps stylis from prefixing the bare pseudo-class with the own class\n            '*:fullscreen > &': {\n              width: '100%',\n              height: '100%',\n              objectFit: 'contain',\n            },\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        {children ?? <Box component=\"source\" src={src} type={type} {...sourceProps} />}\n        {errorFallback ?? noVidErrorMessage ?? (\n          <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%' }}>\n            <FileMissingIcon />\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Video","forwardRef","src","type","errorFallback","noVidErrorMessage","sourceProps","sx","autoPlay","muted","controls","loop","children","rest","ref","_jsxs","Box","component","sxOverride","display","maxWidth","width","height","objectFit","_jsx","justifyContent","alignItems","FileMissingIcon"],"mappings":"qQAkCaA,EAA8BC,EACzC,EAEIC,MACAC,OAAO,YACPC,gBACAC,oBACAC,cACAC,KACAC,YAAW,EACXC,SAAQ,EACRC,YAAW,EACXC,QAAO,EACPC,cACGC,GAELC,IAGEC,EAACC,EAAG,CACFC,UAAU,QAAO,cACL,QACZH,IAAKA,EACLN,SAAUA,EACVC,MAAOA,EACPC,SAAUA,EACVC,KAAMA,EACNJ,GAAIW,EACF,CACEC,QAAS,QACTC,SAAU,OAGV,mBAAoB,CAClBC,MAAO,OACPC,OAAQ,OACRC,UAAW,YAGfhB,MAEEM,EAAID,SAAA,CAEPA,GAAYY,EAACR,EAAG,CAACC,UAAU,SAASf,IAAKA,EAAKC,KAAMA,KAAUG,IAC9DF,GAAiBC,GAChBmB,EAACR,EAAG,CAACT,GAAI,CAAEY,QAAS,OAAQM,eAAgB,SAAUC,WAAY,SAAUL,MAAO,OAAQC,OAAQ,QAAQV,SACzGY,EAACG,EAAe"}

package/components/video/index.d.ts

@@ -1,2 +1,6 @@
 export * from './Video';
-export * from './hooks';
+export * from './useVideoFullscreen';
+export * from './useVideoPlayPause';
+export * from './useVideoReady';
+export * from './useVideoSoundControls';
+export * from './useVideoTime';

package/components/video/useVideoFullscreen.d.ts

@@ -0,0 +1,13 @@
+import { type RefObject } from 'react';
+interface VideoFullscreen {
+    /** Whether the container is currently in fullscreen mode */
+    isFullscreen: boolean;
+    /** Toggles fullscreen on/off */
+    handleFullscreenToggle: () => void;
+}
+/**
+ * Manages fullscreen state for a container element
+ * @param containerRef - A reference to the element to display in fullscreen.
+ */
+export declare const useVideoFullscreen: (containerRef: RefObject<HTMLElement>) => VideoFullscreen;
+export {};

package/components/video/useVideoFullscreen.js

@@ -0,0 +1,2 @@
+import{useState as e,useEffect as n,useCallback as t}from"react";const r=()=>{const e=document;return document.fullscreenElement??e.webkitFullscreenElement??null},l=e=>e instanceof HTMLVideoElement?e:e?.querySelector("video")??null,c=c=>{const[u,s]=e(!1);n(()=>{const e=l(c.current),n=()=>s(r()===c.current),t=()=>s(!0),u=()=>s(!1);return document.addEventListener("fullscreenchange",n),document.addEventListener("webkitfullscreenchange",n),e?.addEventListener("webkitbeginfullscreen",t),e?.addEventListener("webkitendfullscreen",u),()=>{document.removeEventListener("fullscreenchange",n),document.removeEventListener("webkitfullscreenchange",n),e?.removeEventListener("webkitbeginfullscreen",t),e?.removeEventListener("webkitendfullscreen",u)}},[c]);return{isFullscreen:u,handleFullscreenToggle:t(()=>{const e=c?.current;if(e)if(r()===e){const e=document;document.exitFullscreen?document.exitFullscreen().catch(()=>{}):e.webkitExitFullscreen?.()}else e.requestFullscreen?e.requestFullscreen().catch(()=>{}):e.webkitRequestFullscreen?e.webkitRequestFullscreen():l(e)?.webkitEnterFullscreen?.()},[c])}};export{c as useVideoFullscreen};
+//# sourceMappingURL=useVideoFullscreen.js.map

package/components/video/useVideoFullscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideoFullscreen.js","sources":["../../../src/components/video/useVideoFullscreen.ts"],"sourcesContent":["import { useCallback, useEffect, useState, type RefObject } from 'react';\n\ninterface VideoFullscreen {\n  /** Whether the container is currently in fullscreen mode */\n  isFullscreen: boolean;\n  /** Toggles fullscreen on/off */\n  handleFullscreenToggle: () => void;\n}\n\n/** Prefixed Fullscreen API of Safari before 16.4 */\ninterface WebkitDocument extends Document {\n  webkitFullscreenElement?: Element | null;\n  webkitExitFullscreen?: () => void;\n}\n\n/** Prefixed Fullscreen API of Safari before 16.4 */\ninterface WebkitElement extends HTMLElement {\n  webkitRequestFullscreen?: () => void;\n}\n\n/** Native video fullscreen of iPhone Safari, which has no Fullscreen API on other elements */\ninterface WebkitVideoElement extends HTMLVideoElement {\n  webkitEnterFullscreen?: () => void;\n}\n\n/**\n * Returns the element currently in fullscreen, including the prefixed Safari API\n */\nconst getFullscreenElement = (): Element | null => {\n  const webkitDocument: WebkitDocument = document;\n  return document.fullscreenElement ?? webkitDocument.webkitFullscreenElement ?? null;\n};\n\n/**\n * Returns the video inside the container, or the container itself when it is the video\n */\nconst getVideo = (container: HTMLElement | null): WebkitVideoElement | null =>\n  container instanceof HTMLVideoElement ? container : (container?.querySelector('video') ?? null);\n\n/**\n * Manages fullscreen state for a container element\n * @param containerRef - A reference to the element to display in fullscreen.\n */\nexport const useVideoFullscreen = (containerRef: RefObject<HTMLElement>): VideoFullscreen => {\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  useEffect(() => {\n    const video = getVideo(containerRef.current);\n    const handleFullscreenChange = () => setIsFullscreen(getFullscreenElement() === containerRef.current);\n    const handleVideoFullscreenEnter = () => setIsFullscreen(true);\n    const handleVideoFullscreenExit = () => setIsFullscreen(false);\n\n    document.addEventListener('fullscreenchange', handleFullscreenChange);\n    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);\n    video?.addEventListener('webkitbeginfullscreen', handleVideoFullscreenEnter);\n    video?.addEventListener('webkitendfullscreen', handleVideoFullscreenExit);\n\n    return () => {\n      document.removeEventListener('fullscreenchange', handleFullscreenChange);\n      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);\n      video?.removeEventListener('webkitbeginfullscreen', handleVideoFullscreenEnter);\n      video?.removeEventListener('webkitendfullscreen', handleVideoFullscreenExit);\n    };\n  }, [containerRef]);\n\n  const handleFullscreenToggle = useCallback(() => {\n    const container: WebkitElement | null = containerRef?.current;\n    if (!container) {\n      return;\n    }\n\n    if (getFullscreenElement() === container) {\n      const webkitDocument: WebkitDocument = document;\n      if (document.exitFullscreen) {\n        document.exitFullscreen().catch(() => {});\n      } else {\n        webkitDocument.webkitExitFullscreen?.();\n      }\n    } else if (container.requestFullscreen) {\n      container.requestFullscreen().catch(() => {});\n    } else if (container.webkitRequestFullscreen) {\n      container.webkitRequestFullscreen();\n    } else {\n      // iPhone Safari shows the video in its native player, the custom controls are not visible there\n      getVideo(container)?.webkitEnterFullscreen?.();\n    }\n  }, [containerRef]);\n\n  return {\n    isFullscreen,\n    handleFullscreenToggle,\n  };\n};\n"],"names":["getFullscreenElement","webkitDocument","document","fullscreenElement","webkitFullscreenElement","getVideo","container","HTMLVideoElement","querySelector","useVideoFullscreen","containerRef","isFullscreen","setIsFullscreen","useState","useEffect","video","current","handleFullscreenChange","handleVideoFullscreenEnter","handleVideoFullscreenExit","addEventListener","removeEventListener","handleFullscreenToggle","useCallback","exitFullscreen","catch","webkitExitFullscreen","requestFullscreen","webkitRequestFullscreen","webkitEnterFullscreen"],"mappings":"iEA4BA,MAAMA,EAAuB,KAC3B,MAAMC,EAAiCC,SACvC,OAAOA,SAASC,mBAAqBF,EAAeG,yBAA2B,MAM3EC,EAAYC,GAChBA,aAAqBC,iBAAmBD,EAAaA,GAAWE,cAAc,UAAY,KAM/EC,EAAsBC,IACjC,MAAOC,EAAcC,GAAmBC,GAAS,GAEjDC,EAAU,KACR,MAAMC,EAAQV,EAASK,EAAaM,SAC9BC,EAAyB,IAAML,EAAgBZ,MAA2BU,EAAaM,SACvFE,EAA6B,IAAMN,GAAgB,GACnDO,EAA4B,IAAMP,GAAgB,GAOxD,OALAV,SAASkB,iBAAiB,mBAAoBH,GAC9Cf,SAASkB,iBAAiB,yBAA0BH,GACpDF,GAAOK,iBAAiB,wBAAyBF,GACjDH,GAAOK,iBAAiB,sBAAuBD,GAExC,KACLjB,SAASmB,oBAAoB,mBAAoBJ,GACjDf,SAASmB,oBAAoB,yBAA0BJ,GACvDF,GAAOM,oBAAoB,wBAAyBH,GACpDH,GAAOM,oBAAoB,sBAAuBF,KAEnD,CAACT,IAyBJ,MAAO,CACLC,eACAW,uBAzB6BC,EAAY,KACzC,MAAMjB,EAAkCI,GAAcM,QACtD,GAAKV,EAIL,GAAIN,MAA2BM,EAAW,CACxC,MAAML,EAAiCC,SACnCA,SAASsB,eACXtB,SAASsB,iBAAiBC,MAAM,QAEhCxB,EAAeyB,wBAEnB,MAAWpB,EAAUqB,kBACnBrB,EAAUqB,oBAAoBF,MAAM,QAC3BnB,EAAUsB,wBACnBtB,EAAUsB,0BAGVvB,EAASC,IAAYuB,2BAEtB,CAACnB"}

package/components/video/useVideoPlayPause.d.ts

@@ -0,0 +1,13 @@
+import { type RefObject } from 'react';
+interface PlayPause {
+    /** Whether the video is currently playing */
+    isPlaying: boolean;
+    /** Toggles play/pause */
+    handlePlayPause: () => void;
+}
+/**
+ * Manages play/pause state for a video element
+ * @param videoRef - A reference to the video element.
+ */
+export declare const useVideoPlayPause: (videoRef: RefObject<HTMLVideoElement>) => PlayPause;
+export {};

package/components/video/useVideoPlayPause.js

@@ -0,0 +1,2 @@
+import{useState as e,useEffect as t,useCallback as r}from"react";const n=n=>{const[a,s]=e(!n.current?.paused);t(()=>{const e=n?.current;e&&void 0===a&&s(!e?.paused);const t=()=>{(!e.autoplay||!e.ended)&&s(!0)},r=()=>s(!1);if(e)return e.addEventListener("pause",r),s(!e.paused),e.addEventListener("play",t),()=>{e.removeEventListener("play",t),e.removeEventListener("pause",r)}},[n]);const u=r(()=>{n?.current&&(a?n.current.pause():n.current.play().catch(()=>{}),s(e=>!e))},[a,n]);return{isPlaying:a,handlePlayPause:u}};export{n as useVideoPlayPause};
+//# sourceMappingURL=useVideoPlayPause.js.map