npm - @skodaflow/web-library - Versions diffs - 8.3.0 → 8.3.1 - Mend

@skodaflow/web-library 8.3.0 → 8.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (183) hide show

package/cjs/components/header/Header.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../../utils/sxOverride/sxOverride.js"),o=require("@mui/material"),s=require("../icon/stroke/MenuIcon.js"),i=require("../icon/stroke/CloseIcon.js"),n=require("../focusring/focusring.js"),a=require("./HeaderButton.js"),l=require("./HeaderLanguageSelect.js"),d=require("./HeaderNavigationLink.js"),u=require("./HeaderNavigationHero.js"),c=require("./HeaderNavigationMenu.js");const x=r.forwardRef(({children:x,logo:p,buttons:g,visibleButtons:h,mobile:b,open:m,setOpen:f,inContainer:v=!1,toolbarProps:j,logoProps:y,contentProps:H,mobileContentProps:k,buttonsProps:B,menuButtonProps:I,menuIcon:q,closeMenuIcon:C,drawerProps:M,...O},P)=>{const S=o.useTheme(),w=o.useMediaQuery(S.breakpoints.down("lg")),N=void 0===b?w:b,{sx:$,...E}=y??{},{sx:F,...L}=H??{},{sx:T,...R}=k??{},{sx:z,...A}=B??{},{sx:D,slotProps:G,...V}=M??{},{paper:Q,backdrop:W,...J}=G??{},{sx:K,...U}=Q??{},{sx:X,...Y}=W??{},[Z,_]=r.useState(!1),ee=m??Z,re=f??_,[te,oe,se]=r.useMemo(()=>{function e(t,o,s){const i=[];return r.Children.forEach(t,(t,n)=>{t?.type===r.Fragment?i.push(...e(t.props.children,o,`${s}-n`)):r.isValidElement(t)&&[a.HeaderButton,l.HeaderLanguageSelect,d.HeaderNavigationLink,u.HeaderNavigationHero,c.HeaderNavigationMenu].includes(t?.type)&&o?i.push(r.cloneElement(t,{extend:!0,key:`${s}-${n}`})):"string"==typeof t?i.push(t):i.push(r.cloneElement(t,{key:`${s}-${n}`}))}),i?.length?i:void 0}const t=e(x,N,"children");if(h){const r=!0===h?void 0:e(h,!1,"visibleButtons"),o=e(g,N,"restButton");return N?[t,r,o]:[t,[...r||[],...o||[]],void 0]}return[t,e(g,!1,"buttons"),void 0]},[x,h,g,N]);return e.jsxs(e.Fragment,{children:[e.jsx(o.AppBar,{ref:P,"data-testid":"Header",...O,children:e.jsxs(o.Toolbar,{disableGutters:!v,...j,children:[p&&e.jsx(o.Box,{"data-testid":"Header.logo",sx:t.sxOverride({color:"dark"===S.palette.mode?"brand.secondary":"brand.tertiary",flexShrink:"0",display:"flex",alignItems:"center",justifyContent:"flex-start","& .MuiLink-root":{display:"block",position:"relative",py:1,...n.getFocusRingStyle(S),"&.Mui-focusVisible":{boxShadow:"none"}},"& .MuiSvgIcon-root":{display:"block"}},$),...E,children:p}),e.jsx(o.Box,{sx:t.sxOverride({minWidth:"0",flexGrow:"1",alignSelf:"stretch",display:"flex",alignItems:"stretch",justifyContent:"flex-start",gap:{lg:2,xl:4},...!N&&p&&{pl:4},mb:"-1px"},F),"data-testid":"Header.nav",...L,children:!N&&te}),(oe||N&&(te||se))&&e.jsxs(o.Box,{sx:t.sxOverride({display:"flex",alignItems:"center",justifyContent:"flex-end",gap:.25,mr:{xs:-1,lg:0}},z),"data-testid":"Header.btns",...A,children:[oe,N&&(te||se)&&e.jsx(a.HeaderButton,{"aria-label":"Toggle menu",extend:!1,onClick:()=>re(e=>!e),...I,children:ee?C||e.jsx(i.CloseIcon,{}):q||e.jsx(s.MenuIcon,{})},"menu")]})]})}),N&&(te||se)&&e.jsxs(o.Drawer,{disablePortal:!0,disableEnforceFocus:!0,disableAutoFocus:!0,anchor:"top",open:ee,onClose:()=>re(!1),sx:t.sxOverride({zIndex:S.zIndex.appBar-10,top:S.mixins.toolbar.minHeight,bottom:"auto",height:`calc(100vh - ${S.mixins.toolbar.minHeight})`,position:"absolute"},D),slotProps:{backdrop:{sx:t.sxOverride({position:"absolute"},X),...Y},paper:{sx:t.sxOverride({position:"absolute",height:"100%",display:"grid",gridTemplateRows:"auto max-content"},K),...U},...J},...V,children:[e.jsx(o.Box,{sx:t.sxOverride({p:2,overflow:"auto"},T),"data-testid":"Header.mobilenav",...R,children:te}),se&&e.jsx(o.Box,{sx:{p:2,pt:0},children:e.jsx(o.Box,{sx:{pt:.75,display:"flex",flexDirection:"column-reverse",alignItems:"stretch",justifyContent:"flex-start",borderTop:1,borderColor:"dark"===S.palette.mode?"onSurface.os700":"surface.secondary"},children:se})})]})]})});exports.Header=x;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../../utils/sxOverride/sxOverride.js"),o=require("@mui/material"),s=require("../icon/stroke/MenuIcon.js"),i=require("../icon/stroke/CloseIcon.js"),n=require("../focusring/focusring.js"),a=require("./HeaderButton.js"),l=require("./HeaderLanguageSelect.js"),d=require("./HeaderNavigationLink.js"),u=require("./HeaderNavigationHero.js"),c=require("./HeaderNavigationMenu.js");const x=r.forwardRef(({children:x,logo:p,buttons:g,visibleButtons:h,mobile:m,open:b,setOpen:f,inContainer:v=!1,toolbarProps:j,logoProps:y,contentProps:H,mobileContentProps:k,buttonsProps:B,menuButtonProps:I,menuIcon:q,closeMenuIcon:C,drawerProps:M,...O},P)=>{const S=o.useTheme(),w=o.useMediaQuery(S.breakpoints.down("lg")),E=void 0===m?w:m,{sx:N,...$}=y??{},{sx:F,...L}=H??{},{sx:T,...R}=k??{},{sx:V,...z}=B??{},{sx:A,slotProps:D,...G}=M??{},{paper:Q,backdrop:W,...J}=D??{},{sx:K,...U}=Q??{},{sx:X,...Y}=W??{},[Z,_]=r.useState(!1),ee=b??Z,re=f??_,[te,oe,se]=r.useMemo(()=>{function e(t,o,s){const i=[];return r.Children.forEach(t,(t,n)=>{t?.type===r.Fragment?i.push(...e(t.props.children,o,`${s}-n`)):r.isValidElement(t)&&[a.HeaderButton,l.HeaderLanguageSelect,d.HeaderNavigationLink,u.HeaderNavigationHero,c.HeaderNavigationMenu].includes(t?.type)&&o?i.push(r.cloneElement(t,{extend:!0,key:`${s}-${n}`})):"string"==typeof t?i.push(t):r.isValidElement(t)&&i.push(r.cloneElement(t,{key:`${s}-${n}`}))}),i?.length?i:void 0}const t=e(x,E,"children");if(h){const r=!0===h?void 0:e(h,!1,"visibleButtons"),o=e(g,E,"restButton");return E?[t,r,o]:[t,[...r||[],...o||[]],void 0]}return[t,e(g,!1,"buttons"),void 0]},[x,h,g,E]);return e.jsxs(e.Fragment,{children:[e.jsx(o.AppBar,{ref:P,"data-testid":"Header",...O,children:e.jsxs(o.Toolbar,{disableGutters:!v,...j,children:[p&&e.jsx(o.Box,{"data-testid":"Header.logo",sx:t.sxOverride({color:"dark"===S.palette.mode?"brand.secondary":"brand.tertiary",flexShrink:"0",display:"flex",alignItems:"center",justifyContent:"flex-start","& .MuiLink-root":{display:"block",position:"relative",py:1,...n.getFocusRingStyle(S),"&.Mui-focusVisible":{boxShadow:"none"}},"& .MuiSvgIcon-root":{display:"block"}},N),...$,children:p}),e.jsx(o.Box,{sx:t.sxOverride({minWidth:"0",flexGrow:"1",alignSelf:"stretch",display:"flex",alignItems:"stretch",justifyContent:"flex-start",gap:{lg:2,xl:4},...!E&&p&&{pl:4},mb:"-1px"},F),"data-testid":"Header.nav",...L,children:!E&&te}),(oe||E&&(te||se))&&e.jsxs(o.Box,{sx:t.sxOverride({display:"flex",alignItems:"center",justifyContent:"flex-end",gap:.25,mr:{xs:-1,lg:0}},V),"data-testid":"Header.btns",...z,children:[oe,E&&(te||se)&&e.jsx(a.HeaderButton,{"aria-label":"Toggle menu",extend:!1,onClick:()=>re(e=>!e),...I,children:ee?C||e.jsx(i.CloseIcon,{}):q||e.jsx(s.MenuIcon,{})},"menu")]})]})}),E&&(te||se)&&e.jsxs(o.Drawer,{disablePortal:!0,disableEnforceFocus:!0,disableAutoFocus:!0,anchor:"top",open:ee,onClose:()=>re(!1),sx:t.sxOverride({zIndex:S.zIndex.appBar-10,top:S.mixins.toolbar.minHeight,bottom:"auto",height:`calc(100vh - ${S.mixins.toolbar.minHeight})`,position:"absolute"},A),slotProps:{backdrop:{sx:t.sxOverride({position:"absolute"},X),...Y},paper:{sx:t.sxOverride({position:"absolute",height:"100%",display:"grid",gridTemplateRows:"auto max-content"},K),...U},...J},...G,children:[e.jsx(o.Box,{sx:t.sxOverride({p:2,overflow:"auto"},T),"data-testid":"Header.mobilenav",...R,children:te}),se&&e.jsx(o.Box,{sx:{p:2,pt:0},children:e.jsx(o.Box,{sx:{pt:.75,display:"flex",flexDirection:"column-reverse",alignItems:"stretch",justifyContent:"flex-start",borderTop:1,borderColor:"dark"===S.palette.mode?"onSurface.os700":"surface.secondary"},children:se})})]})]})});exports.Header=x;
 //# sourceMappingURL=Header.js.map

package/cjs/components/header/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","sources":["../../../../../src/components/header/Header.tsx"],"sourcesContent":["import React, {\n FC,\n useState,\n forwardRef,\n ReactNode,\n ElementType,\n Children,\n cloneElement,\n useMemo,\n Fragment,\n isValidElement,\n} from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport {\n AppBar,\n AppBarProps,\n BackdropProps,\n Box,\n BoxProps,\n Drawer,\n DrawerProps,\n PaperProps,\n Toolbar,\n ToolbarProps,\n useMediaQuery,\n useTheme,\n} from '@mui/material';\nimport { MenuIcon } from '@/src/components/icon/stroke/MenuIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { HeaderButton, HeaderButtonProps } from './HeaderButton';\nimport { HeaderLanguageSelect } from './HeaderLanguageSelect';\nimport { HeaderNavigationLink } from './HeaderNavigationLink';\nimport { HeaderNavigationHero } from './HeaderNavigationHero';\nimport { HeaderNavigationMenu } from './HeaderNavigationMenu';\n\nexport interface HeaderProps extends Omit<AppBarProps, 'color'> {\n /*\n Logo component\n /\n logo?: ReactNode;\n /\n Wrap the navigation into container\n * @default false\n /\n inContainer?: boolean;\n /\n ActionButtons on the right side\n /\n buttons?: ReactNode;\n /\n ActionButtons on the right side that stays visible even on mobile\n /\n visibleButtons?: ReactNode \| true;\n /\n Controls if mobile version of Header should be shown, this collapses children into mobile menu\n \n @default undefined, leads to usage useMediaQuery(theme.breakpoints.down('lg'))\n /\n mobile?: boolean;\n /\n Controls open/close state of mobile menu\n /\n open?: boolean;\n /\n Function to toggle open state of menu\n /\n setOpen?: (open: boolean) => void;\n /\n Properties applied to toolbar container\n /\n toolbarProps?: ToolbarProps<ElementType>;\n /\n Properties applied to logo wrapper\n /\n logoProps?: BoxProps<ElementType>;\n /\n Properties applied to content wrapper\n /\n contentProps?: BoxProps<ElementType>;\n /\n Properties applied to content wrapper in drawer\n /\n mobileContentProps?: BoxProps<ElementType>;\n /\n Properties applied to button wrapper\n /\n buttonsProps?: BoxProps<ElementType>;\n /\n Properties applied to hamburger menu\n /\n menuButtonProps?: HeaderButtonProps;\n /\n Icon of the hamburger menu\n /\n menuIcon?: ReactNode;\n /\n Icon of the close hamburger menu\n /\n closeMenuIcon?: ReactNode;\n /\n Props applied to mobile drawer\n /\n drawerProps?: DrawerProps;\n}\n\n/\n Component to render Header with navigation and action buttons at the top of the page\n /\nexport const Header: FC<HeaderProps> = forwardRef(\n (\n {\n children,\n logo,\n buttons,\n visibleButtons,\n mobile: propMobile,\n open: propOpen,\n setOpen: propSetOpen,\n inContainer = false,\n toolbarProps,\n logoProps,\n contentProps,\n mobileContentProps,\n buttonsProps,\n menuButtonProps,\n menuIcon,\n closeMenuIcon,\n drawerProps,\n ...rest\n },\n ref,\n ) => {\n const theme = useTheme();\n const downLg = useMediaQuery(theme.breakpoints.down('lg'));\n // determine if mobile condition is controlled or default downLg\n const mobile = propMobile === undefined ? downLg : propMobile;\n const { sx: logoSx, ...restLogo } = logoProps ?? {};\n const { sx: contentSx, ...restContent } = contentProps ?? {};\n const { sx: mobileContentSx, ...restMobileContent } = mobileContentProps ?? {};\n const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n const { sx: drawerSx, slotProps: drawerSlotProps, ...restDrawer } = drawerProps ?? {};\n const { paper: drawerPaperProps, backdrop: drawerBackdropProps, ...restDrawerSlotProps } = drawerSlotProps ?? {};\n const { sx: drawerPaperSx, ...restDrawerPaper } = (drawerPaperProps as PaperProps) ?? {};\n const { sx: drawerBackdropSx, ...restDrawerBackdrop } = (drawerBackdropProps as BackdropProps) ?? {};\n const [rawOpen, rawSetOpen] = useState(false);\n const open = propOpen ?? rawOpen;\n const setOpen: React.Dispatch<React.SetStateAction<boolean>> = propSetOpen ?? rawSetOpen;\n\n /\n Process child nodes\n */\n const [processedChildren, processedButtons, drawerButtons] = useMemo(() => {\n function flatten(nodes, extend, keyid) {\n const result = [];\n Children.forEach(nodes, (child, idx) => {\n if (child?.type === Fragment) {\n result.push(...flatten(child.props.children, extend, `${keyid}-n`));\n } else if (\n isValidElement(child) &&\n [\n HeaderButton,\n HeaderLanguageSelect,\n HeaderNavigationLink,\n HeaderNavigationHero,\n HeaderNavigationMenu,\n ].includes(child?.type as FC) &&\n extend\n ) {\n result.push(\n cloneElement(child, {\n extend: true,\n key: `${keyid}-${idx}`,\n } as HeaderButtonProps),\n );\n } else {\n if (typeof child === 'string') {\n result.push(child);\n } else {\n result.push(cloneElement(child, { key: `${keyid}-${idx}` }));\n }\n }\n });\n return result?.length ? result : undefined;\n }\n\n const flattenedChildren = flatten(children, mobile, 'children');\n // check if we have visibleButtons property\n if (visibleButtons) {\n const flattenedVisibleButtons =\n visibleButtons === true ? undefined : flatten(visibleButtons, false, 'visibleButtons');\n const flattenedRestButtons = flatten(buttons, mobile, 'restButton');\n // mobile\n if (mobile) {\n // split visible buttons and put buttons in drawer\n return [flattenedChildren, flattenedVisibleButtons, flattenedRestButtons];\n } else {\n // on PC, all buttons are visible\n return [flattenedChildren, [...(flattenedVisibleButtons \|\| []), ...(flattenedRestButtons \|\| [])], undefined];\n }\n } else {\n // in case visibleButtons property is not provided, do not put buttons into drawer at all\n return [flattenedChildren, flatten(buttons, false, 'buttons'), undefined];\n }\n }, [children, visibleButtons, buttons, mobile]);\n\n return (\n <>\n <AppBar ref={ref} data-testid=\"Header\" {...rest}>\n <Toolbar disableGutters={!inContainer} {...toolbarProps}>\n {logo && (\n <Box\n data-testid=\"Header.logo\"\n sx={sxOverride(\n {\n color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.tertiary',\n flexShrink: '0',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n // restyle wrapper link, same style is applied in HeaderLogo\n '& .MuiLink-root': {\n display: 'block',\n position: 'relative',\n py: 1,\n // add proper focus ring\n ...getFocusRingStyle(theme),\n // remove default link box shadow\n '&.Mui-focusVisible': {\n boxShadow: 'none',\n },\n },\n '& .MuiSvgIcon-root': {\n display: 'block',\n },\n },\n logoSx,\n )}\n {...restLogo}\n >\n {logo}\n </Box>\n )}\n <Box\n sx={sxOverride(\n {\n minWidth: '0',\n flexGrow: '1',\n alignSelf: 'stretch',\n display: 'flex',\n alignItems: 'stretch',\n justifyContent: 'flex-start',\n gap: { lg: 2, xl: 4 },\n ...(!mobile &&\n logo && {\n // increase size between logo and nav\n pl: 4,\n }),\n // move directly into border\n mb: '-1px',\n },\n contentSx,\n )}\n data-testid=\"Header.nav\"\n {...restContent}\n >\n {!mobile && processedChildren}\n </Box>\n {(processedButtons \|\| (mobile && (processedChildren \|\| drawerButtons))) && (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n gap: 0.25,\n mr: { xs: -1, lg: 0 },\n },\n buttonsSx,\n )}\n data-testid=\"Header.btns\"\n {...restButtons}\n >\n {processedButtons}\n {mobile && (processedChildren \|\| drawerButtons) && (\n <HeaderButton\n key=\"menu\"\n aria-label=\"Toggle menu\"\n extend={false}\n onClick={() => setOpen((prev: boolean) => !prev)}\n {...menuButtonProps}\n >\n {open ? closeMenuIcon \|\| <CloseIcon /> : menuIcon \|\| <MenuIcon />}\n </HeaderButton>\n )}\n </Box>\n )}\n </Toolbar>\n </AppBar>\n {mobile && (processedChildren \|\| drawerButtons) && (\n <Drawer\n disablePortal\n disableEnforceFocus\n disableAutoFocus\n anchor=\"top\"\n open={open}\n onClose={() => setOpen(false)}\n sx={sxOverride(\n {\n // bellow Header, above SecondaryNavigation\n zIndex: theme.zIndex.appBar - 10,\n // header offset\n top: theme.mixins.toolbar.minHeight,\n bottom: 'auto',\n height: `calc(100vh - ${theme.mixins.toolbar.minHeight})`,\n // adjust position\n position: 'absolute',\n },\n drawerSx,\n )}\n slotProps={{\n backdrop: {\n sx: sxOverride(\n {\n position: 'absolute',\n },\n drawerBackdropSx,\n ),\n ...restDrawerBackdrop,\n },\n paper: {\n sx: sxOverride(\n {\n position: 'absolute',\n height: '100%',\n display: 'grid',\n gridTemplateRows: 'auto max-content',\n },\n drawerPaperSx,\n ),\n ...restDrawerPaper,\n },\n ...restDrawerSlotProps,\n }}\n {...restDrawer}\n >\n <Box\n sx={sxOverride(\n {\n p: 2,\n overflow: 'auto',\n },\n mobileContentSx,\n )}\n data-testid=\"Header.mobilenav\"\n {...restMobileContent}\n >\n {processedChildren}\n </Box>\n {drawerButtons && (\n <Box sx={{ p: 2, pt: 0 }}>\n <Box\n sx={{\n pt: 0.75,\n display: 'flex',\n flexDirection: 'column-reverse',\n alignItems: 'stretch',\n justifyContent: 'flex-start',\n // border from appbar.theme.ts\n borderTop: 1,\n borderColor: theme.palette.mode === 'dark' ? 'onSurface.os700' : 'surface.secondary',\n }}\n >\n {drawerButtons}\n </Box>\n </Box>\n )}\n </Drawer>\n )}\n </>\n );\n },\n);\n"],"names":["Header","forwardRef","children","logo","buttons","visibleButtons","mobile","propMobile","open","propOpen","setOpen","propSetOpen","inContainer","toolbarProps","logoProps","contentProps","mobileContentProps","buttonsProps","menuButtonProps","menuIcon","closeMenuIcon","drawerProps","rest","ref","theme","useTheme","downLg","useMediaQuery","breakpoints","down","undefined","sx","logoSx","restLogo","contentSx","restContent","mobileContentSx","restMobileContent","buttonsSx","restButtons","drawerSx","slotProps","drawerSlotProps","restDrawer","paper","drawerPaperProps","backdrop","drawerBackdropProps","restDrawerSlotProps","drawerPaperSx","restDrawerPaper","drawerBackdropSx","restDrawerBackdrop","rawOpen","rawSetOpen","useState","processedChildren","processedButtons","drawerButtons","useMemo","flatten","nodes","extend","keyid","result","Children","forEach","child","idx","type","Fragment","push","props","isValidElement","HeaderButton","HeaderLanguageSelect","HeaderNavigationLink","HeaderNavigationHero","HeaderNavigationMenu","includes","cloneElement","key","length","flattenedChildren","flattenedVisibleButtons","flattenedRestButtons","_jsxs","_Fragment","_jsx","AppBar","Toolbar","disableGutters","Box","sxOverride","color","palette","mode","flexShrink","display","alignItems","justifyContent","position","py","getFocusRingStyle","boxShadow","minWidth","flexGrow","alignSelf","gap","lg","xl","pl","mb","mr","xs","onClick","prev","CloseIcon","MenuIcon","Drawer","disablePortal","disableEnforceFocus","disableAutoFocus","anchor","onClose","zIndex","appBar","top","mixins","toolbar","minHeight","bottom","height","gridTemplateRows","p","overflow","pt","flexDirection","borderTop","borderColor"],"mappings":"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"}
1	+ {"version":3,"file":"Header.js","sources":["../../../../../src/components/header/Header.tsx"],"sourcesContent":["import React, {\n FC,\n useState,\n forwardRef,\n ReactNode,\n ElementType,\n Children,\n cloneElement,\n useMemo,\n Fragment,\n isValidElement,\n} from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport {\n AppBar,\n AppBarProps,\n BackdropProps,\n Box,\n BoxProps,\n Drawer,\n DrawerProps,\n PaperProps,\n Toolbar,\n ToolbarProps,\n useMediaQuery,\n useTheme,\n} from '@mui/material';\nimport { MenuIcon } from '@/src/components/icon/stroke/MenuIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { HeaderButton, HeaderButtonProps } from './HeaderButton';\nimport { HeaderLanguageSelect } from './HeaderLanguageSelect';\nimport { HeaderNavigationLink } from './HeaderNavigationLink';\nimport { HeaderNavigationHero } from './HeaderNavigationHero';\nimport { HeaderNavigationMenu } from './HeaderNavigationMenu';\n\nexport interface HeaderProps extends Omit<AppBarProps, 'color'> {\n /*\n Logo component\n /\n logo?: ReactNode;\n /\n Wrap the navigation into container\n * @default false\n /\n inContainer?: boolean;\n /\n ActionButtons on the right side\n /\n buttons?: ReactNode;\n /\n ActionButtons on the right side that stays visible even on mobile\n /\n visibleButtons?: ReactNode \| true;\n /\n Controls if mobile version of Header should be shown, this collapses children into mobile menu\n \n @default undefined, leads to usage useMediaQuery(theme.breakpoints.down('lg'))\n /\n mobile?: boolean;\n /\n Controls open/close state of mobile menu\n /\n open?: boolean;\n /\n Function to toggle open state of menu\n /\n setOpen?: (open: boolean) => void;\n /\n Properties applied to toolbar container\n /\n toolbarProps?: ToolbarProps<ElementType>;\n /\n Properties applied to logo wrapper\n /\n logoProps?: BoxProps<ElementType>;\n /\n Properties applied to content wrapper\n /\n contentProps?: BoxProps<ElementType>;\n /\n Properties applied to content wrapper in drawer\n /\n mobileContentProps?: BoxProps<ElementType>;\n /\n Properties applied to button wrapper\n /\n buttonsProps?: BoxProps<ElementType>;\n /\n Properties applied to hamburger menu\n /\n menuButtonProps?: HeaderButtonProps;\n /\n Icon of the hamburger menu\n /\n menuIcon?: ReactNode;\n /\n Icon of the close hamburger menu\n /\n closeMenuIcon?: ReactNode;\n /\n Props applied to mobile drawer\n /\n drawerProps?: DrawerProps;\n}\n\n/\n Component to render Header with navigation and action buttons at the top of the page\n /\nexport const Header: FC<HeaderProps> = forwardRef(\n (\n {\n children,\n logo,\n buttons,\n visibleButtons,\n mobile: propMobile,\n open: propOpen,\n setOpen: propSetOpen,\n inContainer = false,\n toolbarProps,\n logoProps,\n contentProps,\n mobileContentProps,\n buttonsProps,\n menuButtonProps,\n menuIcon,\n closeMenuIcon,\n drawerProps,\n ...rest\n },\n ref,\n ) => {\n const theme = useTheme();\n const downLg = useMediaQuery(theme.breakpoints.down('lg'));\n // determine if mobile condition is controlled or default downLg\n const mobile = propMobile === undefined ? downLg : propMobile;\n const { sx: logoSx, ...restLogo } = logoProps ?? {};\n const { sx: contentSx, ...restContent } = contentProps ?? {};\n const { sx: mobileContentSx, ...restMobileContent } = mobileContentProps ?? {};\n const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n const { sx: drawerSx, slotProps: drawerSlotProps, ...restDrawer } = drawerProps ?? {};\n const { paper: drawerPaperProps, backdrop: drawerBackdropProps, ...restDrawerSlotProps } = drawerSlotProps ?? {};\n const { sx: drawerPaperSx, ...restDrawerPaper } = (drawerPaperProps as PaperProps) ?? {};\n const { sx: drawerBackdropSx, ...restDrawerBackdrop } = (drawerBackdropProps as BackdropProps) ?? {};\n const [rawOpen, rawSetOpen] = useState(false);\n const open = propOpen ?? rawOpen;\n const setOpen: React.Dispatch<React.SetStateAction<boolean>> = propSetOpen ?? rawSetOpen;\n\n /\n Process child nodes\n */\n const [processedChildren, processedButtons, drawerButtons] = useMemo(() => {\n function flatten(nodes, extend, keyid) {\n const result = [];\n Children.forEach(nodes, (child, idx) => {\n if (child?.type === Fragment) {\n result.push(...flatten(child.props.children, extend, `${keyid}-n`));\n } else if (\n isValidElement(child) &&\n [\n HeaderButton,\n HeaderLanguageSelect,\n HeaderNavigationLink,\n HeaderNavigationHero,\n HeaderNavigationMenu,\n ].includes(child?.type as FC) &&\n extend\n ) {\n result.push(\n cloneElement(child, {\n extend: true,\n key: `${keyid}-${idx}`,\n } as HeaderButtonProps),\n );\n } else {\n if (typeof child === 'string') {\n result.push(child);\n } else if (isValidElement(child)) {\n result.push(cloneElement(child, { key: `${keyid}-${idx}` }));\n }\n }\n });\n return result?.length ? result : undefined;\n }\n\n const flattenedChildren = flatten(children, mobile, 'children');\n // check if we have visibleButtons property\n if (visibleButtons) {\n const flattenedVisibleButtons =\n visibleButtons === true ? undefined : flatten(visibleButtons, false, 'visibleButtons');\n const flattenedRestButtons = flatten(buttons, mobile, 'restButton');\n // mobile\n if (mobile) {\n // split visible buttons and put buttons in drawer\n return [flattenedChildren, flattenedVisibleButtons, flattenedRestButtons];\n } else {\n // on PC, all buttons are visible\n return [flattenedChildren, [...(flattenedVisibleButtons \|\| []), ...(flattenedRestButtons \|\| [])], undefined];\n }\n } else {\n // in case visibleButtons property is not provided, do not put buttons into drawer at all\n return [flattenedChildren, flatten(buttons, false, 'buttons'), undefined];\n }\n }, [children, visibleButtons, buttons, mobile]);\n\n return (\n <>\n <AppBar ref={ref} data-testid=\"Header\" {...rest}>\n <Toolbar disableGutters={!inContainer} {...toolbarProps}>\n {logo && (\n <Box\n data-testid=\"Header.logo\"\n sx={sxOverride(\n {\n color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.tertiary',\n flexShrink: '0',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n // restyle wrapper link, same style is applied in HeaderLogo\n '& .MuiLink-root': {\n display: 'block',\n position: 'relative',\n py: 1,\n // add proper focus ring\n ...getFocusRingStyle(theme),\n // remove default link box shadow\n '&.Mui-focusVisible': {\n boxShadow: 'none',\n },\n },\n '& .MuiSvgIcon-root': {\n display: 'block',\n },\n },\n logoSx,\n )}\n {...restLogo}\n >\n {logo}\n </Box>\n )}\n <Box\n sx={sxOverride(\n {\n minWidth: '0',\n flexGrow: '1',\n alignSelf: 'stretch',\n display: 'flex',\n alignItems: 'stretch',\n justifyContent: 'flex-start',\n gap: { lg: 2, xl: 4 },\n ...(!mobile &&\n logo && {\n // increase size between logo and nav\n pl: 4,\n }),\n // move directly into border\n mb: '-1px',\n },\n contentSx,\n )}\n data-testid=\"Header.nav\"\n {...restContent}\n >\n {!mobile && processedChildren}\n </Box>\n {(processedButtons \|\| (mobile && (processedChildren \|\| drawerButtons))) && (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n gap: 0.25,\n mr: { xs: -1, lg: 0 },\n },\n buttonsSx,\n )}\n data-testid=\"Header.btns\"\n {...restButtons}\n >\n {processedButtons}\n {mobile && (processedChildren \|\| drawerButtons) && (\n <HeaderButton\n key=\"menu\"\n aria-label=\"Toggle menu\"\n extend={false}\n onClick={() => setOpen((prev: boolean) => !prev)}\n {...menuButtonProps}\n >\n {open ? closeMenuIcon \|\| <CloseIcon /> : menuIcon \|\| <MenuIcon />}\n </HeaderButton>\n )}\n </Box>\n )}\n </Toolbar>\n </AppBar>\n {mobile && (processedChildren \|\| drawerButtons) && (\n <Drawer\n disablePortal\n disableEnforceFocus\n disableAutoFocus\n anchor=\"top\"\n open={open}\n onClose={() => setOpen(false)}\n sx={sxOverride(\n {\n // bellow Header, above SecondaryNavigation\n zIndex: theme.zIndex.appBar - 10,\n // header offset\n top: theme.mixins.toolbar.minHeight,\n bottom: 'auto',\n height: `calc(100vh - ${theme.mixins.toolbar.minHeight})`,\n // adjust position\n position: 'absolute',\n },\n drawerSx,\n )}\n slotProps={{\n backdrop: {\n sx: sxOverride(\n {\n position: 'absolute',\n },\n drawerBackdropSx,\n ),\n ...restDrawerBackdrop,\n },\n paper: {\n sx: sxOverride(\n {\n position: 'absolute',\n height: '100%',\n display: 'grid',\n gridTemplateRows: 'auto max-content',\n },\n drawerPaperSx,\n ),\n ...restDrawerPaper,\n },\n ...restDrawerSlotProps,\n }}\n {...restDrawer}\n >\n <Box\n sx={sxOverride(\n {\n p: 2,\n overflow: 'auto',\n },\n mobileContentSx,\n )}\n data-testid=\"Header.mobilenav\"\n {...restMobileContent}\n >\n {processedChildren}\n </Box>\n {drawerButtons && (\n <Box sx={{ p: 2, pt: 0 }}>\n <Box\n sx={{\n pt: 0.75,\n display: 'flex',\n flexDirection: 'column-reverse',\n alignItems: 'stretch',\n justifyContent: 'flex-start',\n // border from appbar.theme.ts\n borderTop: 1,\n borderColor: theme.palette.mode === 'dark' ? 'onSurface.os700' : 'surface.secondary',\n }}\n >\n {drawerButtons}\n </Box>\n </Box>\n )}\n </Drawer>\n )}\n </>\n );\n },\n);\n"],"names":["Header","forwardRef","children","logo","buttons","visibleButtons","mobile","propMobile","open","propOpen","setOpen","propSetOpen","inContainer","toolbarProps","logoProps","contentProps","mobileContentProps","buttonsProps","menuButtonProps","menuIcon","closeMenuIcon","drawerProps","rest","ref","theme","useTheme","downLg","useMediaQuery","breakpoints","down","undefined","sx","logoSx","restLogo","contentSx","restContent","mobileContentSx","restMobileContent","buttonsSx","restButtons","drawerSx","slotProps","drawerSlotProps","restDrawer","paper","drawerPaperProps","backdrop","drawerBackdropProps","restDrawerSlotProps","drawerPaperSx","restDrawerPaper","drawerBackdropSx","restDrawerBackdrop","rawOpen","rawSetOpen","useState","processedChildren","processedButtons","drawerButtons","useMemo","flatten","nodes","extend","keyid","result","Children","forEach","child","idx","type","Fragment","push","props","isValidElement","HeaderButton","HeaderLanguageSelect","HeaderNavigationLink","HeaderNavigationHero","HeaderNavigationMenu","includes","cloneElement","key","length","flattenedChildren","flattenedVisibleButtons","flattenedRestButtons","_jsxs","_Fragment","_jsx","AppBar","Toolbar","disableGutters","Box","sxOverride","color","palette","mode","flexShrink","display","alignItems","justifyContent","position","py","getFocusRingStyle","boxShadow","minWidth","flexGrow","alignSelf","gap","lg","xl","pl","mb","mr","xs","onClick","prev","CloseIcon","MenuIcon","Drawer","disablePortal","disableEnforceFocus","disableAutoFocus","anchor","onClose","zIndex","appBar","top","mixins","toolbar","minHeight","bottom","height","gridTemplateRows","p","overflow","pt","flexDirection","borderTop","borderColor"],"mappings":"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"}

package/cjs/components/header/HeaderLogo.d.ts CHANGED Viewed

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

package/cjs/components/header/HeaderNavigationHero.d.ts CHANGED Viewed

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

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

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

package/cjs/components/header/HeaderNavigationLink.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderNavigationLink.js","sources":["../../../../../src/components/header/HeaderNavigationLink.tsx"],"sourcesContent":["import React, { useMemo, ElementType, FC, forwardRef, ReactNode, ForwardedRef } from 'react';\nimport { ButtonBase, ButtonBaseProps, Box, BoxProps, useTheme } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ArrowTopRightIcon } from '@/src/components/icon/stroke/ArrowTopRightIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { getTypography } from '@/src/materialui/typography/typography.theme';\n\nexport interface HeaderNavigationLinkProps extends ButtonBaseProps<ElementType> {\n /*\n Displayed navigation text, can be provided as children as well\n /\n label?: ReactNode;\n /\n Marks item currently active\n * @default false\n /\n active?: boolean;\n /\n Indicates external link\n * @default false\n /\n external?: boolean;\n /\n Expect icon component that will be rendered after the label\n /\n icon?: ReactNode;\n /\n Change link into extended mobile version\n /\n extend?: boolean;\n /\n Properties applied to wrapper of label\n /\n labelWrapperProps?: BoxProps<ElementType>;\n /\n Properties applied to default label\n /\n labelProps?: BoxProps<ElementType>;\n /\n Properties applied to selected label\n /\n selectedLabelProps?: BoxProps<ElementType>;\n}\n\n/\n Component to render styled button in the header\n */\nexport const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = forwardRef(\n (\n {\n sx,\n children,\n label,\n icon,\n active = false,\n external = false,\n extend,\n labelWrapperProps,\n labelProps,\n selectedLabelProps,\n ...rest\n },\n ref,\n ) => {\n const theme = useTheme();\n const { sx: labelWrapperSx, ...restLabelWrapper } = labelWrapperProps ?? {};\n const { sx: labelSx, ...restLabel } = labelProps ?? {};\n const { sx: selectedLabelSx, ...restSelectedLabel } = selectedLabelProps ?? {};\n const linkIcon = useMemo(() => {\n return external ? <ArrowTopRightIcon /> : icon;\n }, [icon, external]);\n\n return (\n <ButtonBase\n sx={sxOverride(\n {\n ...theme.typography.list,\n ...(extend === undefined\n ? {\n [theme.breakpoints.down('lg')]: {\n // switch to 'large body' typography according to Figma\n ...getTypography('body', theme.direction === 'rtl', 'large'),\n },\n }\n : [\n {\n '&&': {\n ...getTypography('body', theme.direction === 'rtl', 'large'),\n },\n },\n {},\n ][+!extend]),\n position: 'relative',\n zIndex: '100',\n // icon and text next to each other\n display: extend === undefined ? { xs: 'flex', lg: 'inline-flex' } : ['flex', 'inline-flex'][+!extend],\n width: extend === undefined ? { xs: '100%', lg: 'auto' } : ['100%', 'auto'][+!extend],\n gap: 0.5,\n alignItems: 'center',\n justifyContent: 'flex-start',\n py: extend === undefined ? { xs: 2, lg: 1 } : [2, 1][+!extend],\n px: extend === undefined ? { xs: 1, lg: 0.5 } : [1, 0.5][+!extend],\n transition:\n 'transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.3s ease-out',\n // size of icon\n '& .MuiSvgIcon-root': {\n fontSize: '14px',\n },\n // bottom border\n '&:after': {\n content: extend === undefined ? { xs: 'none', lg: '\"\"' } : ['none', '\"\"'][+!extend],\n position: 'absolute',\n left: '0',\n right: '0',\n // move directly into border of appbar\n bottom: '0',\n height: '1px',\n backgroundColor: 'transparent.transparent',\n ...(active && {\n height: '2px',\n backgroundColor: 'text.primary',\n }),\n },\n // disabled style\n '&.Mui-disabled': {\n color: 'disabled.tertiary',\n },\n // interactive style\n ...getInteractiveStyle(\n {\n color: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n '&&:after': {\n backgroundColor: 'transparent.transparent',\n },\n '& .FlowHeaderNavigationLink-label': {\n opacity: '1',\n },\n '& .FlowHeaderNavigationLink-selectedLabel': {\n opacity: '0',\n },\n // active state is same as hover state\n ...(active && {\n color: 'text.primary',\n '&&:after': {\n backgroundColor: 'text.primary',\n },\n '& .FlowHeaderNavigationLink-label': {\n opacity: '0',\n },\n '& .FlowHeaderNavigationLink-selectedLabel': {\n opacity: '1',\n },\n }),\n },\n {\n color: 'text.primary',\n '&&:after': {\n backgroundColor: 'text.primary',\n },\n '& .FlowHeaderNavigationLink-label': {\n opacity: '0',\n },\n '& .FlowHeaderNavigationLink-selectedLabel': {\n opacity: '1',\n },\n },\n ),\n ...getFocusRingStyle(theme),\n // adjust focus ring\n '&&:before': {\n borderRadius: '4px',\n // make sure top border is not cropped\n top: extend === undefined ? { xs: '0', lg: '2px' } : ['0', '2px'][+!extend],\n bottom: extend === undefined ? { xs: '0', lg: '-2px' } : ['0', '-2px'][+!extend],\n },\n },\n sx,\n )}\n ref={ref as ForwardedRef<HTMLButtonElement>}\n data-testid=\"HeaderNavigationLink\"\n {...rest}\n >\n {(children \|\| label) && (\n <Box\n className=\"FlowHeaderNavigationLink-labelWrapper\"\n sx={sxOverride(\n {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n position: 'relative',\n },\n labelWrapperSx,\n )}\n {...restLabelWrapper}\n >\n <Box\n className=\"FlowHeaderNavigationLink-label\"\n sx={sxOverride(\n {\n position: 'absolute',\n left: extend === undefined ? { xs: '0', lg: 'auto' } : ['0', 'auto'][+!extend],\n },\n labelSx,\n )}\n {...restLabel}\n >\n {children \|\| label}\n </Box>\n <Box\n className=\"FlowHeaderNavigationLink-selectedLabel\"\n sx={sxOverride(\n {\n fontWeight: '700',\n opacity: '0',\n position: 'relative',\n },\n selectedLabelSx,\n )}\n aria-hidden=\"true\"\n {...restSelectedLabel}\n >\n {children \|\| label}\n </Box>\n </Box>\n )}\n {linkIcon}\n </ButtonBase>\n );\n },\n);\n"],"names":["HeaderNavigationLink","forwardRef","sx","children","label","icon","active","external","extend","labelWrapperProps","labelProps","selectedLabelProps","rest","ref","theme","useTheme","labelWrapperSx","restLabelWrapper","labelSx","restLabel","selectedLabelSx","restSelectedLabel","linkIcon","useMemo","_jsx","ArrowTopRightIcon","_jsxs","ButtonBase","sxOverride","typography","list","undefined","breakpoints","down","getTypography","direction","position","zIndex","display","xs","lg","width","gap","alignItems","justifyContent","py","px","transition","fontSize","content","left","right","bottom","height","backgroundColor","color","getInteractiveStyle","palette","mode","opacity","getFocusRingStyle","borderRadius","top","Box","className","textAlign","fontWeight"],"mappings":"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"}
1	+ {"version":3,"file":"HeaderNavigationLink.js","sources":["../../../../../src/components/header/HeaderNavigationLink.tsx"],"sourcesContent":["import React, { useMemo, ElementType, FC, forwardRef, ReactNode, ForwardedRef } from 'react';\nimport { ButtonBase, ButtonBaseProps, Box, BoxProps, useTheme } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ArrowTopRightIcon } from '@/src/components/icon/stroke/ArrowTopRightIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { getTypography } from '@/src/materialui/typography/typography.theme';\n\nexport interface HeaderNavigationLinkProps extends ButtonBaseProps<ElementType> {\n /*\n Displayed navigation text, can be provided as children as well\n /\n label?: ReactNode;\n /\n Marks item currently active\n * @default false\n /\n active?: boolean;\n /\n Indicates external link\n * @default false\n /\n external?: boolean;\n /\n Expect icon component that will be rendered after the label\n /\n icon?: ReactNode;\n /\n Change link into extended mobile version\n /\n extend?: boolean;\n /\n Properties applied to wrapper of label\n /\n labelWrapperProps?: BoxProps<ElementType>;\n /\n Properties applied to default label\n /\n labelProps?: BoxProps<ElementType>;\n /\n Properties applied to selected label\n /\n selectedLabelProps?: BoxProps<ElementType>;\n}\n\n/\n Component to render styled button in the header\n */\nexport const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = forwardRef(\n (\n {\n sx,\n children,\n label,\n icon,\n active = false,\n external = false,\n extend,\n labelWrapperProps,\n labelProps,\n selectedLabelProps,\n ...rest\n },\n ref,\n ) => {\n const theme = useTheme();\n const { sx: labelWrapperSx, ...restLabelWrapper } = labelWrapperProps ?? {};\n const { sx: labelSx, ...restLabel } = labelProps ?? {};\n const { sx: selectedLabelSx, ...restSelectedLabel } = selectedLabelProps ?? {};\n const linkIcon = useMemo(() => {\n return external ? <ArrowTopRightIcon /> : icon;\n }, [icon, external]);\n\n return (\n <ButtonBase\n sx={sxOverride(\n {\n ...theme.typography.list,\n ...(extend === undefined\n ? {\n [theme.breakpoints.down('lg')]: {\n // switch to 'large body' typography according to Figma\n ...getTypography('body', theme.direction === 'rtl', 'large'),\n },\n }\n : [\n {\n '&&': {\n ...getTypography('body', theme.direction === 'rtl', 'large'),\n },\n },\n {},\n ][+!extend]),\n position: 'relative',\n zIndex: '100',\n // icon and text next to each other\n display: extend === undefined ? { xs: 'flex', lg: 'inline-flex' } : ['flex', 'inline-flex'][+!extend],\n width: extend === undefined ? { xs: '100%', lg: 'auto' } : ['100%', 'auto'][+!extend],\n gap: 0.5,\n alignItems: 'center',\n justifyContent: 'flex-start',\n py: extend === undefined ? { xs: 2, lg: 1 } : [2, 1][+!extend],\n px: extend === undefined ? { xs: 1, lg: 0.5 } : [1, 0.5][+!extend],\n transition:\n 'transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.3s ease-out',\n // size of icon\n '& .MuiSvgIcon-root': {\n fontSize: '14px',\n },\n // bottom border\n '&:after': {\n content: extend === undefined ? { xs: 'none', lg: '\"\"' } : ['none', '\"\"'][+!extend],\n position: 'absolute',\n left: '0',\n right: '0',\n // move directly into border of appbar\n bottom: '0',\n height: '1px',\n backgroundColor: 'transparent',\n ...(active && {\n height: '2px',\n backgroundColor: 'text.primary',\n }),\n },\n // disabled style\n '&.Mui-disabled': {\n color: 'disabled.tertiary',\n },\n // interactive style\n ...getInteractiveStyle(\n {\n color: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n '&&:after': {\n backgroundColor: 'transparent',\n },\n '& .FlowHeaderNavigationLink-label': {\n opacity: '1',\n },\n '& .FlowHeaderNavigationLink-selectedLabel': {\n opacity: '0',\n },\n // active state is same as hover state\n ...(active && {\n color: 'text.primary',\n '&&:after': {\n backgroundColor: 'text.primary',\n },\n '& .FlowHeaderNavigationLink-label': {\n opacity: '0',\n },\n '& .FlowHeaderNavigationLink-selectedLabel': {\n opacity: '1',\n },\n }),\n },\n {\n color: 'text.primary',\n '&&:after': {\n backgroundColor: 'text.primary',\n },\n '& .FlowHeaderNavigationLink-label': {\n opacity: '0',\n },\n '& .FlowHeaderNavigationLink-selectedLabel': {\n opacity: '1',\n },\n },\n ),\n ...getFocusRingStyle(theme),\n // adjust focus ring\n '&&:before': {\n borderRadius: '4px',\n // make sure top border is not cropped\n top: extend === undefined ? { xs: '0', lg: '2px' } : ['0', '2px'][+!extend],\n bottom: extend === undefined ? { xs: '0', lg: '-2px' } : ['0', '-2px'][+!extend],\n },\n },\n sx,\n )}\n ref={ref as ForwardedRef<HTMLButtonElement>}\n data-testid=\"HeaderNavigationLink\"\n {...rest}\n >\n {(children \|\| label) && (\n <Box\n className=\"FlowHeaderNavigationLink-labelWrapper\"\n sx={sxOverride(\n {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n position: 'relative',\n },\n labelWrapperSx,\n )}\n {...restLabelWrapper}\n >\n <Box\n className=\"FlowHeaderNavigationLink-label\"\n sx={sxOverride(\n {\n position: 'absolute',\n left: extend === undefined ? { xs: '0', lg: 'auto' } : ['0', 'auto'][+!extend],\n },\n labelSx,\n )}\n {...restLabel}\n >\n {children \|\| label}\n </Box>\n <Box\n className=\"FlowHeaderNavigationLink-selectedLabel\"\n sx={sxOverride(\n {\n fontWeight: '700',\n opacity: '0',\n position: 'relative',\n },\n selectedLabelSx,\n )}\n aria-hidden=\"true\"\n {...restSelectedLabel}\n >\n {children \|\| label}\n </Box>\n </Box>\n )}\n {linkIcon}\n </ButtonBase>\n );\n },\n);\n"],"names":["HeaderNavigationLink","forwardRef","sx","children","label","icon","active","external","extend","labelWrapperProps","labelProps","selectedLabelProps","rest","ref","theme","useTheme","labelWrapperSx","restLabelWrapper","labelSx","restLabel","selectedLabelSx","restSelectedLabel","linkIcon","useMemo","_jsx","ArrowTopRightIcon","_jsxs","ButtonBase","sxOverride","typography","list","undefined","breakpoints","down","getTypography","direction","position","zIndex","display","xs","lg","width","gap","alignItems","justifyContent","py","px","transition","fontSize","content","left","right","bottom","height","backgroundColor","color","getInteractiveStyle","palette","mode","opacity","getFocusRingStyle","borderRadius","top","Box","className","textAlign","fontWeight"],"mappings":"yVAgDO,MAAMA,EAAsDC,EAAAA,WACjE,EAEIC,KACAC,WACAC,QACAC,OACAC,UAAS,EACTC,YAAW,EACXC,SACAC,oBACAC,aACAC,wBACGC,GAELC,KAEA,MAAMC,EAAQC,EAAAA,YACNb,GAAIc,KAAmBC,GAAqBR,GAAqB,CAAA,GACjEP,GAAIgB,KAAYC,GAAcT,GAAc,CAAA,GAC5CR,GAAIkB,KAAoBC,GAAsBV,GAAsB,CAAA,EACtEW,EAAWC,EAAAA,QAAQ,IAChBhB,EAAWiB,EAAAA,IAACC,oBAAiB,CAAA,GAAMpB,EACzC,CAACA,EAAME,IAEV,OACEmB,OAACC,EAAAA,YACCzB,GAAI0B,EAAAA,WACF,IACKd,EAAMe,WAAWC,aACLC,IAAXvB,EACA,CACE,CAACM,EAAMkB,YAAYC,KAAK,OAAQ,IAE3BC,EAAAA,cAAc,OAA4B,QAApBpB,EAAMqB,UAAqB,WAGxD,CACE,CACE,KAAM,IACDD,EAAAA,cAAc,OAA4B,QAApBpB,EAAMqB,UAAqB,WAGxD,CAAA,KACE3B,GACR4B,SAAU,WACVC,OAAQ,MAERC,aAAoBP,IAAXvB,EAAuB,CAAE+B,GAAI,OAAQC,GAAI,eAAkB,CAAC,OAAQ,iBAAiBhC,GAC9FiC,WAAkBV,IAAXvB,EAAuB,CAAE+B,GAAI,OAAQC,GAAI,QAAW,CAAC,OAAQ,UAAUhC,GAC9EkC,IAAK,GACLC,WAAY,SACZC,eAAgB,aAChBC,QAAed,IAAXvB,EAAuB,CAAE+B,GAAI,EAAGC,GAAI,GAAM,CAAC,EAAG,KAAKhC,GACvDsC,QAAef,IAAXvB,EAAuB,CAAE+B,GAAI,EAAGC,GAAI,IAAQ,CAAC,EAAG,MAAOhC,GAC3DuC,WACE,4JAEF,qBAAsB,CACpBC,SAAU,QAGZ,UAAW,CACTC,aAAoBlB,IAAXvB,EAAuB,CAAE+B,GAAI,OAAQC,GAAI,MAAS,CAAC,OAAQ,QAAQhC,GAC5E4B,SAAU,WACVc,KAAM,IACNC,MAAO,IAEPC,OAAQ,IACRC,OAAQ,MACRC,gBAAiB,iBACbhD,GAAU,CACZ+C,OAAQ,MACRC,gBAAiB,iBAIrB,iBAAkB,CAChBC,MAAO,wBAGNC,sBACD,CACED,MAA8B,SAAvBzC,EAAM2C,QAAQC,KAAkB,kBAAoB,kBAC3D,WAAY,CACVJ,gBAAiB,eAEnB,oCAAqC,CACnCK,QAAS,KAEX,4CAA6C,CAC3CA,QAAS,QAGPrD,GAAU,CACZiD,MAAO,eACP,WAAY,CACVD,gBAAiB,gBAEnB,oCAAqC,CACnCK,QAAS,KAEX,4CAA6C,CAC3CA,QAAS,OAIf,CACEJ,MAAO,eACP,WAAY,CACVD,gBAAiB,gBAEnB,oCAAqC,CACnCK,QAAS,KAEX,4CAA6C,CAC3CA,QAAS,UAIZC,EAAAA,kBAAkB9C,GAErB,YAAa,CACX+C,aAAc,MAEdC,SAAgB/B,IAAXvB,EAAuB,CAAE+B,GAAI,IAAKC,GAAI,OAAU,CAAC,IAAK,SAAShC,GACpE4C,YAAmBrB,IAAXvB,EAAuB,CAAE+B,GAAI,IAAKC,GAAI,QAAW,CAAC,IAAK,UAAUhC,KAG7EN,GAEFW,IAAKA,EAAsC,cAC/B,0BACRD,EAAIT,SAAA,EAENA,GAAYC,IACZsB,EAAAA,KAACqC,EAAAA,IAAG,CACFC,UAAU,wCACV9D,GAAI0B,aACF,CACEU,QAAS,cACTK,WAAY,SACZC,eAAgB,SAChBqB,UAAW,SACX7B,SAAU,YAEZpB,MAEEC,YAEJO,EAAAA,IAACuC,EAAAA,IAAG,CACFC,UAAU,iCACV9D,GAAI0B,EAAAA,WACF,CACEQ,SAAU,WACVc,UAAiBnB,IAAXvB,EAAuB,CAAE+B,GAAI,IAAKC,GAAI,QAAW,CAAC,IAAK,UAAUhC,IAEzEU,MAEEC,WAEHhB,GAAYC,IAEfoB,EAAAA,IAACuC,EAAAA,IAAG,CACFC,UAAU,yCACV9D,GAAI0B,EAAAA,WACF,CACEsC,WAAY,MACZP,QAAS,IACTvB,SAAU,YAEZhB,GACD,cACW,UACRC,EAAiBlB,SAEpBA,GAAYC,OAIlBkB"}

package/cjs/components/index.d.ts CHANGED Viewed

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

package/cjs/components/label/Label.js CHANGED Viewed

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

package/cjs/components/label/Label.js.map CHANGED Viewed

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

package/cjs/components/notification/NotificationCenterHeaderButton.d.ts CHANGED Viewed

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

package/cjs/components/playPauseButton/PlayPauseButton.d.ts CHANGED Viewed

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

package/cjs/components/promptBar/PromptAttachments.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material"),t=require("../../utils/sxOverride/sxOverride.js"),i=require("../focusring/focusring.js"),s=require("../icon/filled/CircleCloseFilledIcon.js"),n=require("../icon/stroke/FileIcon.js"),a=require("../../materialui/button/interactive.js");const c=r.forwardRef(({attachments:r,setAttachments:c,IconComponent:x,iconWrapperProps:p,iconProps:l,textProps:d,removeIconProps:u,removeIconWrapperProps:g,imageProps:f,buttonBaseProps:m,sx:b,...h},v)=>{const{sx:y,...j}=p??{},{sx:I,...C}=d??{},{sx:k,...S}=u??{},{sx:O,...w}=g??{},{sx:z,...P}=f??{},{sx:q,...R}=m??{},B=x??n.FileIcon;return e.jsx(o.Box,{ref:v,sx:t.sxOverride({display:"flex",alignItems:"center",justifyContent:"flex-start",overflow:"auto",gap:.5,mb:1},b),...h,children:r.map((n,x)=>e.jsxs(o.ButtonBase,{"aria-label":n.name,disabled:!c,sx:t.sxOverride(e=>({position:"relative",borderRadius:"8px","&.Mui-disabled":{pointerEvents:"all",cursor:"text",userSelect:"text"},...n.src?{":after":{display:"block",content:'""',position:"absolute",inset:"0",borderRadius:"inherit",backgroundColor:e.palette.transparent.primary,transition:"opacity 0.3s ease-out",opacity:"0",zIndex:"10"}}:{padding:"6px 8px",gap:1,display:"flex",alignItems:"center",justifyContent:"flex-start"},backgroundColor:"surface.primary",...i.getFocusRingStyle(e,!0,"2px"),"&&:before":{zIndex:"20"},...c&&{...a.getInteractiveStyle({...n.src?{"&:after":{opacity:"0"}}:{backgroundColor:"surface.primary"}},{...n.src?{"&:after":{opacity:"1"}}:{backgroundColor:"surface.secondary"}})}}),q),onClick:()=>c?.(r.filter((e,r)=>r!==x)),...R,children:[n.src?e.jsx(o.Box,{sx:t.sxOverride({borderRadius:"inherit",backgroundImage:`url(${n.src})`,backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center",width:"40px",height:"40px",...1===r.length&&{width:"72px",height:"72px"}},z),...P}):e.jsxs(e.Fragment,{children:[e.jsx(o.Box,{sx:t.sxOverride({display:"flex",borderRadius:"4px",padding:"6px",backgroundColor:"transparent.primary",color:"onSurface.os700","& .MuiSvgIcon-root":{fontSize:"16px"}},y),...j,children:e.jsx(B,{...l})}),e.jsx(o.Typography,{component:"span",sx:t.sxOverride({fontWeight:{xs:"400"},fontSize:{xs:"14px"},lineHeight:{xs:"20px"},letterSpacing:{xs:"0.02em"},color:"#000",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"120px"},I),...C,children:n.name})]}),c&&e.jsx(o.Box,{component:"span",sx:t.sxOverride({display:"flex",alignItems:"center",justifyContent:"center",color:"onSurface.os900",zIndex:"30",...n.src?{position:"absolute",top:"3px",right:"3px"}:{position:"relative",top:"-10px",right:"-7px",mr:"2px"},"&:after":{position:"absolute",zIndex:"10",inset:"0",margin:"2px",display:"block",content:'""',borderRadius:"50%",backgroundColor:"common.white"}},O),...w,children:e.jsx(s.CircleCloseFilledIcon,{sx:t.sxOverride({position:"relative",zIndex:"20",fontSize:"14px"},k),...S})})]},x))})});exports.PromptAttachments=c;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),o=require("../../utils/sxOverride/sxOverride.js"),i=require("../focusring/focusring.js"),s=require("../icon/filled/CircleCloseFilledIcon.js"),n=require("../icon/stroke/FileIcon.js"),a=require("../../materialui/button/interactive.js");const c=r.forwardRef(({attachments:r,setAttachments:c,IconComponent:x,iconWrapperProps:p,iconProps:l,textProps:d,removeIconProps:u,removeIconWrapperProps:g,imageProps:m,buttonBaseProps:f,sx:b,...h},v)=>{const{sx:y,...j}=p??{},{sx:I,...C}=d??{},{sx:k,...S}=u??{},{sx:O,...w}=g??{},{sx:z,...P}=m??{},{sx:q,...R}=f??{},B=x??n.FileIcon;return e.jsx(t.Box,{ref:v,sx:o.sxOverride({display:"flex",alignItems:"center",justifyContent:"flex-start",overflow:"auto",gap:.5,mb:1},b),...h,children:r.map((n,x)=>e.jsxs(t.ButtonBase,{"aria-label":n.name,disabled:!c,sx:o.sxOverride(e=>({position:"relative",borderRadius:"8px","&.Mui-disabled":{pointerEvents:"all",cursor:"text",userSelect:"text"},...n.src?{":after":{display:"block",content:'""',position:"absolute",inset:"0",borderRadius:"inherit",backgroundColor:e.palette.transparent.primary,transition:"opacity 0.3s ease-out",opacity:"0",zIndex:"10"}}:{padding:"6px 8px",gap:1,display:"flex",alignItems:"center",justifyContent:"flex-start"},backgroundColor:"surface.primary",...i.getFocusRingStyle(e,!0,"2px"),"&&:before":{zIndex:"20"},...c&&{...a.getInteractiveStyle({...n.src?{"&:after":{opacity:"0"}}:{backgroundColor:"surface.primary"}},{...n.src?{"&:after":{opacity:"1"}}:{backgroundColor:"surface.secondary"}})}}),q),onClick:()=>c?.(r.filter((e,r)=>r!==x)),...R,children:[n.src?e.jsx(t.Box,{sx:o.sxOverride({borderRadius:"inherit",backgroundImage:`url(${n.src})`,backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center",width:"40px",height:"40px",...1===r.length&&{width:"72px",height:"72px"}},z),...P}):e.jsxs(e.Fragment,{children:[e.jsx(t.Box,{sx:o.sxOverride({display:"flex",borderRadius:"4px",padding:"6px",backgroundColor:"transparent.primary",color:"onSurface.os700","& .MuiSvgIcon-root":{fontSize:"16px"}},y),...j,children:e.jsx(B,{...l})}),e.jsx(t.Typography,{component:"span",sx:o.sxOverride({fontWeight:{xs:"400"},fontSize:{xs:"14px"},lineHeight:{xs:"20px"},letterSpacing:{xs:"0.02em"},color:"text.primary",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"120px"},I),...C,children:n.name})]}),c&&e.jsx(t.Box,{component:"span",sx:o.sxOverride({display:"flex",alignItems:"center",justifyContent:"center",color:"onSurface.os900",zIndex:"30",...n.src?{position:"absolute",top:"3px",right:"3px"}:{position:"relative",top:"-10px",right:"-7px",mr:"2px"},"&:after":{position:"absolute",zIndex:"10",inset:"0",margin:"2px",display:"block",content:'""',borderRadius:"50%",backgroundColor:"common.white"}},O),...w,children:e.jsx(s.CircleCloseFilledIcon,{sx:o.sxOverride({position:"relative",zIndex:"20",fontSize:"14px"},k),...S})})]},x))})});exports.PromptAttachments=c;
 //# sourceMappingURL=PromptAttachments.js.map

package/cjs/components/promptBar/PromptAttachments.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PromptAttachments.js","sources":["../../../../../src/components/promptBar/PromptAttachments.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, ButtonBase, ButtonBaseProps, SvgIconProps, Typography } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { CircleCloseFilledIcon } from '@/src/components/icon/filled/CircleCloseFilledIcon';\nimport { FileIcon } from '@/src/components/icon/stroke/FileIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface PromptAttachment {\n /*\n Display name of the attachment.\n /\n name: string;\n /\n URL of the attachment image.\n /\n src?: string;\n}\n\nexport interface PromptAttachmentsProps extends BoxProps<ElementType> {\n /\n List of attachments to display.\n /\n attachments: PromptAttachment[];\n /\n Callback to update the attachments list.\n /\n setAttachments?: (attachments: PromptAttachment[]) => void;\n /\n Custom component to be used for the file icon.\n /\n IconComponent?: ComponentType<SvgIconProps>;\n /\n Properties applied to the icon wrapper Box.\n /\n iconWrapperProps?: BoxProps<ElementType>;\n /\n Properties applied to the file icon.\n /\n iconProps?: SvgIconProps;\n /\n Properties applied to the text wrapper Box.\n /\n textProps?: BoxProps<ElementType>;\n /\n Properties applied to the remove icon.\n /\n removeIconProps?: SvgIconProps;\n /\n Properties applied to the remove icon wrapper Box.\n /\n removeIconWrapperProps?: BoxProps<ElementType>;\n /\n Properties applied to the image preview Box (rendered when attachment has src).\n /\n imageProps?: BoxProps<ElementType>;\n /\n Properties applied to the ButtonBase wrapping each attachment item.\n /\n buttonBaseProps?: ButtonBaseProps;\n}\n\n/\n Shows list of attachments in PromptBar\n */\nexport const PromptAttachments: React.FC<PromptAttachmentsProps> = forwardRef(\n (\n {\n attachments,\n setAttachments,\n IconComponent,\n iconWrapperProps,\n iconProps,\n textProps,\n removeIconProps,\n removeIconWrapperProps,\n imageProps,\n buttonBaseProps,\n sx,\n ...rest\n },\n ref,\n ) => {\n const { sx: iconWrapperSx, ...restIconWrapper } = iconWrapperProps ?? {};\n const { sx: textSx, ...restText } = textProps ?? {};\n const { sx: removeIconSx, ...restRemoveIcon } = removeIconProps ?? {};\n const { sx: removeIconWrapperSx, ...restRemoveIconWrapper } = removeIconWrapperProps ?? {};\n const { sx: imageSx, ...restImage } = imageProps ?? {};\n const { sx: buttonBaseSx, ...restButtonBase } = buttonBaseProps ?? {};\n const AttachmentFileIcon = IconComponent ?? FileIcon;\n\n return (\n <Box\n ref={ref}\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n overflow: 'auto',\n gap: 0.5,\n mb: 1,\n },\n sx,\n )}\n {...rest}\n >\n {attachments.map((attachment: PromptAttachment, idx: number) => (\n <ButtonBase\n aria-label={attachment.name}\n key={idx}\n disabled={!setAttachments}\n sx={sxOverride(\n (theme) => ({\n position: 'relative',\n borderRadius: '8px',\n '&.Mui-disabled': {\n pointerEvents: 'all',\n cursor: 'text',\n userSelect: 'text',\n },\n ...(attachment.src\n ? {\n // pseudo background for hover\n ':after': {\n display: 'block',\n content: '\"\"',\n position: 'absolute',\n inset: '0',\n borderRadius: 'inherit',\n backgroundColor: theme.palette.transparent.primary,\n transition: 'opacity 0.3s ease-out',\n opacity: '0',\n zIndex: '10',\n },\n }\n : {\n padding: '6px 8px',\n gap: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n }),\n backgroundColor: 'surface.primary',\n ...getFocusRingStyle(theme, true, '2px'),\n '&&:before': {\n zIndex: '20',\n },\n ...(setAttachments && {\n ...getInteractiveStyle(\n {\n ...(attachment.src\n ? {\n '&:after': {\n opacity: '0',\n },\n }\n : {\n backgroundColor: 'surface.primary',\n }),\n },\n {\n ...(attachment.src\n ? {\n '&:after': {\n opacity: '1',\n },\n }\n : {\n backgroundColor: 'surface.secondary',\n }),\n },\n ),\n }),\n }),\n buttonBaseSx,\n )}\n onClick={() => setAttachments?.(attachments.filter((_: PromptAttachment, i: number) => i !== idx))}\n {...restButtonBase}\n >\n {attachment.src ? (\n <Box\n sx={sxOverride(\n {\n borderRadius: 'inherit',\n backgroundImage: `url(${attachment.src})`,\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center',\n width: '40px',\n height: '40px',\n ...(attachments.length === 1 && {\n width: '72px',\n height: '72px',\n }),\n },\n imageSx,\n )}\n {...restImage}\n />\n ) : (\n <>\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n borderRadius: '4px',\n padding: '6px',\n backgroundColor: 'transparent.primary',\n color: 'onSurface.os700',\n '& .MuiSvgIcon-root': {\n fontSize: '16px',\n },\n },\n iconWrapperSx,\n )}\n {...restIconWrapper}\n >\n <AttachmentFileIcon {...iconProps} />\n </Box>\n <Typography\n component=\"span\"\n sx={sxOverride(\n {\n fontWeight: { xs: '400' },\n fontSize: { xs: '14px' },\n lineHeight: { xs: '20px' },\n letterSpacing: { xs: '0.02em' },\n color: '#000',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n maxWidth: '120px',\n },\n textSx,\n )}\n {...restText}\n >\n {attachment.name}\n </Typography>\n </>\n )}\n {setAttachments && (\n <Box\n component=\"span\"\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'onSurface.os900',\n zIndex: '30',\n ...(attachment.src\n ? {\n position: 'absolute',\n top: '3px',\n right: '3px',\n }\n : {\n position: 'relative',\n top: '-10px',\n right: '-7px',\n mr: '2px',\n }),\n // fill of the 'x' inside the icon\n '&:after': {\n position: 'absolute',\n zIndex: '10',\n inset: '0',\n margin: '2px',\n display: 'block',\n content: '\"\"',\n borderRadius: '50%',\n backgroundColor: 'common.white',\n },\n },\n removeIconWrapperSx,\n )}\n {...restRemoveIconWrapper}\n >\n <CircleCloseFilledIcon\n sx={sxOverride(\n {\n position: 'relative',\n zIndex: '20',\n fontSize: '14px',\n },\n removeIconSx,\n )}\n {...restRemoveIcon}\n />\n </Box>\n )}\n </ButtonBase>\n ))}\n </Box>\n );\n },\n);\n"],"names":["PromptAttachments","forwardRef","attachments","setAttachments","IconComponent","iconWrapperProps","iconProps","textProps","removeIconProps","removeIconWrapperProps","imageProps","buttonBaseProps","sx","rest","ref","iconWrapperSx","restIconWrapper","textSx","restText","removeIconSx","restRemoveIcon","removeIconWrapperSx","restRemoveIconWrapper","imageSx","restImage","buttonBaseSx","restButtonBase","AttachmentFileIcon","FileIcon","_jsx","Box","sxOverride","display","alignItems","justifyContent","overflow","gap","mb","children","map","attachment","idx","_jsxs","ButtonBase","name","disabled","theme","position","borderRadius","pointerEvents","cursor","userSelect","src","content","inset","backgroundColor","palette","transparent","primary","transition","opacity","zIndex","padding","getFocusRingStyle","getInteractiveStyle","onClick","filter","_","i","backgroundImage","backgroundSize","backgroundRepeat","backgroundPosition","width","height","length","color","fontSize","Typography","component","fontWeight","xs","lineHeight","letterSpacing","whiteSpace","textOverflow","maxWidth","top","right","mr","margin","CircleCloseFilledIcon"],"mappings":"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"}
1	+ {"version":3,"file":"PromptAttachments.js","sources":["../../../../../src/components/promptBar/PromptAttachments.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, ButtonBase, ButtonBaseProps, SvgIconProps, Typography } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { CircleCloseFilledIcon } from '@/src/components/icon/filled/CircleCloseFilledIcon';\nimport { FileIcon } from '@/src/components/icon/stroke/FileIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface PromptAttachment {\n /*\n Display name of the attachment.\n /\n name: string;\n /\n URL of the attachment image.\n /\n src?: string;\n}\n\nexport interface PromptAttachmentsProps extends BoxProps<ElementType> {\n /\n List of attachments to display.\n /\n attachments: PromptAttachment[];\n /\n Callback to update the attachments list.\n /\n setAttachments?: (attachments: PromptAttachment[]) => void;\n /\n Custom component to be used for the file icon.\n /\n IconComponent?: ComponentType<SvgIconProps>;\n /\n Properties applied to the icon wrapper Box.\n /\n iconWrapperProps?: BoxProps<ElementType>;\n /\n Properties applied to the file icon.\n /\n iconProps?: SvgIconProps;\n /\n Properties applied to the text wrapper Box.\n /\n textProps?: BoxProps<ElementType>;\n /\n Properties applied to the remove icon.\n /\n removeIconProps?: SvgIconProps;\n /\n Properties applied to the remove icon wrapper Box.\n /\n removeIconWrapperProps?: BoxProps<ElementType>;\n /\n Properties applied to the image preview Box (rendered when attachment has src).\n /\n imageProps?: BoxProps<ElementType>;\n /\n Properties applied to the ButtonBase wrapping each attachment item.\n /\n buttonBaseProps?: ButtonBaseProps;\n}\n\n/\n Shows list of attachments in PromptBar\n */\nexport const PromptAttachments: React.FC<PromptAttachmentsProps> = forwardRef(\n (\n {\n attachments,\n setAttachments,\n IconComponent,\n iconWrapperProps,\n iconProps,\n textProps,\n removeIconProps,\n removeIconWrapperProps,\n imageProps,\n buttonBaseProps,\n sx,\n ...rest\n },\n ref,\n ) => {\n const { sx: iconWrapperSx, ...restIconWrapper } = iconWrapperProps ?? {};\n const { sx: textSx, ...restText } = textProps ?? {};\n const { sx: removeIconSx, ...restRemoveIcon } = removeIconProps ?? {};\n const { sx: removeIconWrapperSx, ...restRemoveIconWrapper } = removeIconWrapperProps ?? {};\n const { sx: imageSx, ...restImage } = imageProps ?? {};\n const { sx: buttonBaseSx, ...restButtonBase } = buttonBaseProps ?? {};\n const AttachmentFileIcon = IconComponent ?? FileIcon;\n\n return (\n <Box\n ref={ref}\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n overflow: 'auto',\n gap: 0.5,\n mb: 1,\n },\n sx,\n )}\n {...rest}\n >\n {attachments.map((attachment: PromptAttachment, idx: number) => (\n <ButtonBase\n aria-label={attachment.name}\n key={idx}\n disabled={!setAttachments}\n sx={sxOverride(\n (theme) => ({\n position: 'relative',\n borderRadius: '8px',\n '&.Mui-disabled': {\n pointerEvents: 'all',\n cursor: 'text',\n userSelect: 'text',\n },\n ...(attachment.src\n ? {\n // pseudo background for hover\n ':after': {\n display: 'block',\n content: '\"\"',\n position: 'absolute',\n inset: '0',\n borderRadius: 'inherit',\n backgroundColor: theme.palette.transparent.primary,\n transition: 'opacity 0.3s ease-out',\n opacity: '0',\n zIndex: '10',\n },\n }\n : {\n padding: '6px 8px',\n gap: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n }),\n backgroundColor: 'surface.primary',\n ...getFocusRingStyle(theme, true, '2px'),\n '&&:before': {\n zIndex: '20',\n },\n ...(setAttachments && {\n ...getInteractiveStyle(\n {\n ...(attachment.src\n ? {\n '&:after': {\n opacity: '0',\n },\n }\n : {\n backgroundColor: 'surface.primary',\n }),\n },\n {\n ...(attachment.src\n ? {\n '&:after': {\n opacity: '1',\n },\n }\n : {\n backgroundColor: 'surface.secondary',\n }),\n },\n ),\n }),\n }),\n buttonBaseSx,\n )}\n onClick={() => setAttachments?.(attachments.filter((_: PromptAttachment, i: number) => i !== idx))}\n {...restButtonBase}\n >\n {attachment.src ? (\n <Box\n sx={sxOverride(\n {\n borderRadius: 'inherit',\n backgroundImage: `url(${attachment.src})`,\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center',\n width: '40px',\n height: '40px',\n ...(attachments.length === 1 && {\n width: '72px',\n height: '72px',\n }),\n },\n imageSx,\n )}\n {...restImage}\n />\n ) : (\n <>\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n borderRadius: '4px',\n padding: '6px',\n backgroundColor: 'transparent.primary',\n color: 'onSurface.os700',\n '& .MuiSvgIcon-root': {\n fontSize: '16px',\n },\n },\n iconWrapperSx,\n )}\n {...restIconWrapper}\n >\n <AttachmentFileIcon {...iconProps} />\n </Box>\n <Typography\n component=\"span\"\n sx={sxOverride(\n {\n fontWeight: { xs: '400' },\n fontSize: { xs: '14px' },\n lineHeight: { xs: '20px' },\n letterSpacing: { xs: '0.02em' },\n color: 'text.primary',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n maxWidth: '120px',\n },\n textSx,\n )}\n {...restText}\n >\n {attachment.name}\n </Typography>\n </>\n )}\n {setAttachments && (\n <Box\n component=\"span\"\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'onSurface.os900',\n zIndex: '30',\n ...(attachment.src\n ? {\n position: 'absolute',\n top: '3px',\n right: '3px',\n }\n : {\n position: 'relative',\n top: '-10px',\n right: '-7px',\n mr: '2px',\n }),\n // fill of the 'x' inside the icon\n '&:after': {\n position: 'absolute',\n zIndex: '10',\n inset: '0',\n margin: '2px',\n display: 'block',\n content: '\"\"',\n borderRadius: '50%',\n backgroundColor: 'common.white',\n },\n },\n removeIconWrapperSx,\n )}\n {...restRemoveIconWrapper}\n >\n <CircleCloseFilledIcon\n sx={sxOverride(\n {\n position: 'relative',\n zIndex: '20',\n fontSize: '14px',\n },\n removeIconSx,\n )}\n {...restRemoveIcon}\n />\n </Box>\n )}\n </ButtonBase>\n ))}\n </Box>\n );\n },\n);\n"],"names":["PromptAttachments","forwardRef","attachments","setAttachments","IconComponent","iconWrapperProps","iconProps","textProps","removeIconProps","removeIconWrapperProps","imageProps","buttonBaseProps","sx","rest","ref","iconWrapperSx","restIconWrapper","textSx","restText","removeIconSx","restRemoveIcon","removeIconWrapperSx","restRemoveIconWrapper","imageSx","restImage","buttonBaseSx","restButtonBase","AttachmentFileIcon","FileIcon","_jsx","Box","sxOverride","display","alignItems","justifyContent","overflow","gap","mb","children","map","attachment","idx","_jsxs","ButtonBase","name","disabled","theme","position","borderRadius","pointerEvents","cursor","userSelect","src","content","inset","backgroundColor","palette","transparent","primary","transition","opacity","zIndex","padding","getFocusRingStyle","getInteractiveStyle","onClick","filter","_","i","backgroundImage","backgroundSize","backgroundRepeat","backgroundPosition","width","height","length","color","fontSize","Typography","component","fontWeight","xs","lineHeight","letterSpacing","whiteSpace","textOverflow","maxWidth","top","right","mr","margin","CircleCloseFilledIcon"],"mappings":"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"}

package/cjs/components/promptBar/PromptSubmitIconButton.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { FC, ComponentType, ReactNode } from 'react';
 import { IconButtonProps, SvgIconProps } from '@mui/material';
-import { PromptAttachment } from '@/src';
+import { PromptAttachment } from './PromptAttachments';
 export interface PromptSubmitIconButtonProps extends Omit<IconButtonProps, 'value'> {
     /**
      * Current input value. Switches the button from voice to submit variant.