@skodaflow/web-library 8.3.0 → 8.3.1

package/components/footer/FooterMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"FooterMenu.js","sources":["../../../src/components/footer/FooterMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState } from 'react';\nimport { Theme, useMediaQuery, useTheme } from '@mui/material';\nimport { FooterAccordion, FooterAccordionProps } from './FooterAccordion';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface FooterMenuProps extends Omit<FooterAccordionProps, 'variant' | 'children'> {\n  /**\n   * Items in the menu\n   */\n  children?: React.ReactNode;\n  /**\n   * Variant of the menu\n   * - auto: renders on large resolution as list and on mobile as accordion\n   * - list: renders as list with title\n   * - accordion: renders as collapsible accordion\n   * @default auto\n   */\n  variant?: 'auto' | 'list' | 'accordion';\n}\n\n/**\n * Section for the secondary links, copyright and optional button\n */\nexport const FooterMenu: FC<FooterMenuProps> = forwardRef(\n  ({ sx, children, label, accordionSummaryProps, contentProps, variant = 'auto', ...rest }, ref) => {\n    const { sx: contentSx, ...restContent } = contentProps ?? {};\n    const { sx: accSummarySx, ...restAccSummary } = accordionSummaryProps ?? {};\n    const theme = useTheme();\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const isAccordion = variant === 'auto' ? downLg : variant === 'accordion';\n    const [expanded, setExpanded] = useState(false);\n\n    return (\n      <FooterAccordion\n        key={`${isAccordion}`}\n        ref={ref}\n        data-testid=\"FooterMenu\"\n        expanded={isAccordion ? expanded : true}\n        onChange={(_, v) => setExpanded(v)}\n        variant=\"standard\"\n        sx={sxOverride(\n          {\n            // spacing in the FooterSectionMenu, take max 1/5 of space\n            flexBasis: { lg: '20%' },\n            borderColor: 'onSurface.os700',\n            ...(!isAccordion && {\n              border: 'none',\n            }),\n          },\n          sx,\n        )}\n        accordionSummaryProps={{\n          ['data-testid']: 'FooterMenu.label',\n          sx: sxOverride(\n            {\n              // adjust proportions\n              padding: '14px 0',\n              // manipulates style of links inside\n              '& .MuiLink-root': {\n                ...theme.typography.subheadline,\n                p: 0,\n                '&, &:hover': {\n                  textDecoration: 'none',\n                  color: 'common.white',\n                },\n              },\n              ...(!isAccordion && {\n                // adjust proportions to be closer to menu\n                padding: '18px 0 8px',\n                // allow overflow of focus ring\n                overflow: 'visible',\n                // no longer clickable\n                '&&:not(.Mui-disabled)': {\n                  cursor: 'unset',\n                },\n                // hide icon\n                '& .MuiAccordionSummary-expandIconWrapper': {\n                  display: 'none',\n                },\n              }),\n            },\n            accSummarySx,\n          ),\n          ...restAccSummary,\n        }}\n        label={label}\n        contentProps={{\n          component: 'div',\n          ['data-testid']: 'FooterMenu.content',\n          sx: sxOverride(\n            {\n              display: 'flex',\n              alignItems: 'flex-start',\n              justifyContent: 'flex-start',\n              flexDirection: 'column',\n              gap: 1.5,\n              // manipulates style of links inside\n              '& .MuiLink-root': {\n                ...theme.typography.caption2,\n                p: 0,\n                '&, &:hover': {\n                  textDecoration: 'none',\n                  color: 'onSurface.os200',\n                },\n              },\n            },\n            contentSx,\n          ),\n          ...restContent,\n        }}\n        {...rest}\n      >\n        {children}\n      </FooterAccordion>\n    );\n  },\n);\n"],"names":["FooterMenu","forwardRef","sx","children","label","accordionSummaryProps","contentProps","variant","rest","ref","contentSx","restContent","accSummarySx","restAccSummary","theme","useTheme","downLg","useMediaQuery","breakpoints","down","isAccordion","expanded","setExpanded","useState","_jsx","FooterAccordion","onChange","_","v","sxOverride","flexBasis","lg","borderColor","border","padding","typography","subheadline","p","textDecoration","color","overflow","cursor","display","component","alignItems","justifyContent","flexDirection","gap","caption2"],"mappings":"8QAuBO,MAAMA,EAAkCC,EAC7C,EAAGC,KAAIC,WAAUC,QAAOC,wBAAuBC,eAAcC,UAAU,UAAWC,GAAQC,KACxF,MAAQP,GAAIQ,KAAcC,GAAgBL,GAAgB,CAAA,GAClDJ,GAAIU,KAAiBC,GAAmBR,GAAyB,CAAA,EACnES,EAAQC,IACRC,EAASC,EAAqBH,EAAMI,YAAYC,KAAK,OACrDC,EAA0B,SAAZb,EAAqBS,EAAqB,cAAZT,GAC3Cc,EAAUC,GAAeC,GAAS,GAEzC,OACEC,EAACC,GAEChB,IAAKA,EAAG,cACI,aACZY,UAAUD,GAAcC,EACxBK,SAAU,CAACC,EAAGC,IAAMN,EAAYM,GAChCrB,QAAQ,WACRL,GAAI2B,EACF,CAEEC,UAAW,CAAEC,GAAI,OACjBC,YAAa,sBACRZ,GAAe,CAClBa,OAAQ,SAGZ/B,GAEFG,sBAAuB,CACrB,cAAiB,mBACjBH,GAAI2B,EACF,CAEEK,QAAS,SAET,kBAAmB,IACdpB,EAAMqB,WAAWC,YACpBC,EAAG,EACH,aAAc,CACZC,eAAgB,OAChBC,MAAO,qBAGNnB,GAAe,CAElBc,QAAS,aAETM,SAAU,UAEV,wBAAyB,CACvBC,OAAQ,SAGV,2CAA4C,CAC1CC,QAAS,UAIf9B,MAECC,GAELT,MAAOA,EACPE,aAAc,CACZqC,UAAW,MACX,cAAiB,qBACjBzC,GAAI2B,EACF,CACEa,QAAS,OACTE,WAAY,aACZC,eAAgB,aAChBC,cAAe,SACfC,IAAK,IAEL,kBAAmB,IACdjC,EAAMqB,WAAWa,SACpBX,EAAG,EACH,aAAc,CACZC,eAAgB,OAChBC,MAAO,qBAIb7B,MAECC,MAEDH,WAEHL,GA9EI,GAAGiB"}
+{"version":3,"file":"FooterMenu.js","sources":["../../../src/components/footer/FooterMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState } from 'react';\nimport { Theme } from '@mui/material';\nimport { FooterAccordion, FooterAccordionProps } from './FooterAccordion';\nimport { FooterMenuCollapse } from './FooterMenuCollapse';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface FooterMenuProps extends Omit<FooterAccordionProps, 'variant' | 'children'> {\n  /**\n   * Items in the menu\n   */\n  children?: React.ReactNode;\n  /**\n   * Variant of the menu\n   * - auto: renders on large resolution as list and on mobile as accordion\n   * - list: renders as list with title\n   * - accordion: renders as collapsible accordion\n   * @default auto\n   */\n  variant?: 'auto' | 'list' | 'accordion';\n}\n\n/**\n * Section for the secondary links, copyright and optional button\n */\nexport const FooterMenu: FC<FooterMenuProps> = forwardRef(\n  ({ sx, children, label, accordionSummaryProps, contentProps, variant = 'auto', ...rest }, ref) => {\n    const { sx: contentSx, ...restContent } = contentProps ?? {};\n    const { sx: accSummarySx, ...restAccSummary } = accordionSummaryProps ?? {};\n    // variant is static, so no media query is needed (renders correctly during pre-render);\n    // for auto, the desktop \"list\" look is applied from the lg breakpoint up, always for list\n    const listLookSelector = (theme: Theme) => (variant === 'list' ? '&' : theme.breakpoints.up('lg'));\n    const [expanded, setExpanded] = useState(false);\n\n    return (\n      <FooterAccordion\n        ref={ref}\n        data-testid=\"FooterMenu\"\n        expanded={variant === 'list' ? true : expanded}\n        onChange={(_, v) => setExpanded(v)}\n        variant=\"standard\"\n        {...(variant === 'auto' && { slots: { transition: FooterMenuCollapse } })}\n        sx={sxOverride(\n          (theme) => ({\n            // spacing in the FooterSectionMenu, take max 1/5 of space\n            flexBasis: { lg: '20%' },\n            borderColor: 'onSurface.os700',\n            ...(variant !== 'accordion' && {\n              [listLookSelector(theme)]: { border: 'none' },\n            }),\n          }),\n          sx,\n        )}\n        accordionSummaryProps={{\n          ['data-testid']: 'FooterMenu.label',\n          sx: sxOverride(\n            (theme) => ({\n              // adjust proportions\n              padding: '14px 0',\n              // manipulates style of links inside\n              '& .MuiLink-root': {\n                ...theme.typography.subheadline,\n                p: 0,\n                '&, &:hover': {\n                  textDecoration: 'none',\n                  color: 'common.white',\n                },\n              },\n              // non-collapsible \"list\" appearance (always for list, desktop+ for auto)\n              ...(variant !== 'accordion' && {\n                [listLookSelector(theme)]: {\n                  // adjust proportions to be closer to menu\n                  padding: '18px 0 8px',\n                  // allow overflow of focus ring\n                  overflow: 'visible',\n                  // no longer clickable\n                  '&&:not(.Mui-disabled)': {\n                    cursor: 'unset',\n                  },\n                  // hide icon\n                  '& .MuiAccordionSummary-expandIconWrapper': {\n                    display: 'none',\n                  },\n                },\n              }),\n            }),\n            accSummarySx,\n          ),\n          ...restAccSummary,\n        }}\n        label={label}\n        contentProps={{\n          component: 'div',\n          ['data-testid']: 'FooterMenu.content',\n          sx: sxOverride(\n            (theme) => ({\n              display: 'flex',\n              alignItems: 'flex-start',\n              justifyContent: 'flex-start',\n              flexDirection: 'column',\n              gap: 1.5,\n              // manipulates style of links inside\n              '& .MuiLink-root': {\n                ...theme.typography.caption2,\n                p: 0,\n                '&, &:hover': {\n                  textDecoration: 'none',\n                  color: 'onSurface.os200',\n                },\n              },\n            }),\n            contentSx,\n          ),\n          ...restContent,\n        }}\n        {...rest}\n      >\n        {children}\n      </FooterAccordion>\n    );\n  },\n);\n"],"names":["FooterMenu","forwardRef","sx","children","label","accordionSummaryProps","contentProps","variant","rest","ref","contentSx","restContent","accSummarySx","restAccSummary","listLookSelector","theme","breakpoints","up","expanded","setExpanded","useState","_jsx","FooterAccordion","onChange","_","v","slots","transition","FooterMenuCollapse","sxOverride","flexBasis","lg","borderColor","border","padding","typography","subheadline","p","textDecoration","color","overflow","cursor","display","component","alignItems","justifyContent","flexDirection","gap","caption2"],"mappings":"+QAwBO,MAAMA,EAAkCC,EAC7C,EAAGC,KAAIC,WAAUC,QAAOC,wBAAuBC,eAAcC,UAAU,UAAWC,GAAQC,KACxF,MAAQP,GAAIQ,KAAcC,GAAgBL,GAAgB,CAAA,GAClDJ,GAAIU,KAAiBC,GAAmBR,GAAyB,CAAA,EAGnES,EAAoBC,GAA8B,SAAZR,EAAqB,IAAMQ,EAAMC,YAAYC,GAAG,OACrFC,EAAUC,GAAeC,GAAS,GAEzC,OACEC,EAACC,EAAe,CACdb,IAAKA,EAAG,cACI,aACZS,SAAsB,SAAZX,GAA4BW,EACtCK,SAAU,CAACC,EAAGC,IAAMN,EAAYM,GAChClB,QAAQ,cACS,SAAZA,GAAsB,CAAEmB,MAAO,CAAEC,WAAYC,IAClD1B,GAAI2B,EACDd,IAAK,CAEJe,UAAW,CAAEC,GAAI,OACjBC,YAAa,qBACG,cAAZzB,GAA2B,CAC7B,CAACO,EAAiBC,IAAS,CAAEkB,OAAQ,WAGzC/B,GAEFG,sBAAuB,CACrB,cAAiB,mBACjBH,GAAI2B,EACDd,IAAK,CAEJmB,QAAS,SAET,kBAAmB,IACdnB,EAAMoB,WAAWC,YACpBC,EAAG,EACH,aAAc,CACZC,eAAgB,OAChBC,MAAO,oBAIK,cAAZhC,GAA2B,CAC7B,CAACO,EAAiBC,IAAS,CAEzBmB,QAAS,aAETM,SAAU,UAEV,wBAAyB,CACvBC,OAAQ,SAGV,2CAA4C,CAC1CC,QAAS,YAKjB9B,MAECC,GAELT,MAAOA,EACPE,aAAc,CACZqC,UAAW,MACX,cAAiB,qBACjBzC,GAAI2B,EACDd,IAAK,CACJ2B,QAAS,OACTE,WAAY,aACZC,eAAgB,aAChBC,cAAe,SACfC,IAAK,IAEL,kBAAmB,IACdhC,EAAMoB,WAAWa,SACpBX,EAAG,EACH,aAAc,CACZC,eAAgB,OAChBC,MAAO,sBAIb7B,MAECC,MAEDH,EAAIL,SAEPA"}

package/components/footer/FooterMenuCollapse.d.ts

@@ -0,0 +1,25 @@
+import { ElementType, FC, ReactNode } from 'react';
+import { BoxProps } from '@mui/material';
+export interface FooterMenuCollapseProps extends BoxProps<ElementType> {
+    /**
+     * Expanded state, provided by the Accordion transition slot
+     */
+    in?: boolean;
+    /**
+     * Transition duration in ms, 0 disables the animation (provided by the transition slot)
+     */
+    timeout?: number;
+    /**
+     * Ignored owner state forwarded by the transition slot
+     */
+    ownerState?: unknown;
+    /**
+     * Collapsible content
+     */
+    children?: ReactNode;
+}
+/**
+ * CSS-only collapse used as the Accordion transition slot, so auto footer menus render
+ * expanded from desktop up without a JS media query (renders correctly during pre-render)
+ */
+export declare const FooterMenuCollapse: FC<FooterMenuCollapseProps>;

package/components/footer/FooterMenuCollapse.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Box as t}from"@mui/material";import{sxOverride as i}from"../../utils/sxOverride/sxOverride.js";const a=e(({in:e,timeout:a,sx:o,children:d,ownerState:n,...s},m)=>r(t,{ref:m,"data-expanded":`${!!e}`,sx:i(r=>({display:"grid",gridTemplateRows:"0fr",transition:r.transitions.create("grid-template-rows",{duration:"number"==typeof a?a:r.transitions.duration.standard}),'&[data-expanded="true"]':{gridTemplateRows:"1fr"},"& > *":{minHeight:"0",overflow:"hidden"},[r.breakpoints.up("lg")]:{gridTemplateRows:"1fr"}}),o),...s,children:d}));export{a as FooterMenuCollapse};
+//# sourceMappingURL=FooterMenuCollapse.js.map

package/components/footer/FooterMenuCollapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterMenuCollapse.js","sources":["../../../src/components/footer/FooterMenuCollapse.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef, ReactNode } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface FooterMenuCollapseProps extends BoxProps<ElementType> {\n  /**\n   * Expanded state, provided by the Accordion transition slot\n   */\n  in?: boolean;\n  /**\n   * Transition duration in ms, 0 disables the animation (provided by the transition slot)\n   */\n  timeout?: number;\n  /**\n   * Ignored owner state forwarded by the transition slot\n   */\n  ownerState?: unknown;\n  /**\n   * Collapsible content\n   */\n  children?: ReactNode;\n}\n\n/**\n * CSS-only collapse used as the Accordion transition slot, so auto footer menus render\n * expanded from desktop up without a JS media query (renders correctly during pre-render)\n */\nexport const FooterMenuCollapse: FC<FooterMenuCollapseProps> = forwardRef(\n  ({ in: expanded, timeout, sx, children, ownerState: _ownerState, ...rest }, ref) => (\n    <Box\n      ref={ref}\n      data-expanded={`${!!expanded}`}\n      sx={sxOverride(\n        (theme) => ({\n          display: 'grid',\n          // collapsed on mobile, the row track animates open/closed\n          gridTemplateRows: '0fr',\n          transition: theme.transitions.create('grid-template-rows', {\n            duration: typeof timeout === 'number' ? timeout : theme.transitions.duration.standard,\n          }),\n          '&[data-expanded=\"true\"]': {\n            gridTemplateRows: '1fr',\n          },\n          // clip the content while the track is collapsed\n          '& > *': {\n            minHeight: '0',\n            overflow: 'hidden',\n          },\n          // always open from desktop up, replaces the removed media query\n          [theme.breakpoints.up('lg')]: {\n            gridTemplateRows: '1fr',\n          },\n        }),\n        sx,\n      )}\n      {...rest}\n    >\n      {children}\n    </Box>\n  ),\n);\n"],"names":["FooterMenuCollapse","forwardRef","in","expanded","timeout","sx","children","ownerState","_ownerState","rest","ref","_jsx","Box","sxOverride","theme","display","gridTemplateRows","transition","transitions","create","duration","standard","minHeight","overflow","breakpoints","up"],"mappings":"iLA2BO,MAAMA,EAAkDC,EAC7D,EAAGC,GAAIC,EAAUC,UAASC,KAAIC,WAAUC,WAAYC,KAAgBC,GAAQC,IAC1EC,EAACC,GACCF,IAAKA,EAAG,gBACO,KAAKP,IACpBE,GAAIQ,EACDC,IAAK,CACJC,QAAS,OAETC,iBAAkB,MAClBC,WAAYH,EAAMI,YAAYC,OAAO,qBAAsB,CACzDC,SAA6B,iBAAZhB,EAAuBA,EAAUU,EAAMI,YAAYE,SAASC,WAE/E,0BAA2B,CACzBL,iBAAkB,OAGpB,QAAS,CACPM,UAAW,IACXC,SAAU,UAGZ,CAACT,EAAMU,YAAYC,GAAG,OAAQ,CAC5BT,iBAAkB,SAGtBX,MAEEI,WAEHH"}

package/components/header/Header.js

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

package/components/header/Header.js.map

@@ -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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"}
+{"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/components/header/HeaderLogo.d.ts

@@ -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/components/header/HeaderNavigationHero.d.ts

@@ -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/components/header/HeaderNavigationHero.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigationHero.js","sources":["../../../src/components/header/HeaderNavigationHero.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState, ElementType, useRef } from 'react';\nimport {\n  Collapse,\n  Backdrop,\n  ClickAwayListener,\n  Box,\n  BoxProps,\n  Portal,\n  Container,\n  ClickAwayListenerProps,\n  ContainerProps,\n  PortalProps,\n  BackdropProps,\n  CollapseProps,\n  useMediaQuery,\n  Theme,\n  useTheme,\n} from '@mui/material';\nimport { 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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"}
+{"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/components/header/HeaderNavigationLink.js

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

package/components/header/HeaderNavigationLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigationLink.js","sources":["../../../src/components/header/HeaderNavigationLink.tsx"],"sourcesContent":["import React, { useMemo, ElementType, FC, forwardRef, ReactNode, ForwardedRef } from 'react';\nimport { ButtonBase, ButtonBaseProps, Box, BoxProps, useTheme } from '@mui/material';\nimport { 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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"}
+{"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":"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"}

package/components/index.d.ts

@@ -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/components/label/Label.js

@@ -1,2 +1,2 @@
-import{jsx as r,jsxs as o}from"react/jsx-runtime";import{forwardRef as e,useMemo as a}from"react";import{Box as t,useTheme as n}from"@mui/material";import{CircleExclamationIcon as i}from"../icon/stroke/CircleExclamationIcon.js";import{CircleInformationIcon as s}from"../icon/stroke/CircleInformationIcon.js";import{getFocusRingStyle as l}from"../focusring/focusring.js";import{getInteractiveStyle as c}from"../../materialui/button/interactive.js";import{sxOverride as d}from"../../utils/sxOverride/sxOverride.js";const p={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"},x=e(({type:o,label:e,children:a,sx:n,...i},s)=>r(t,{ref:s,"data-testid":"Label-general",sx:d({...p,color:r=>"dark"===r.palette.mode?"onSurface.os200":"onSurface.os600"},n),...i,children:e||a})),u=e(({type:o,label:e,children:a,sx:n,...i},s)=>r(t,{ref:s,"data-testid":"Label-simple",sx:d(r=>({...p,...r.typography.list,backgroundColor:"transparent.primary",color:"text.primary",p:"2px 10px"}),n),...i,children:e||a})),b=e(({type:o,label:e,children:a,variant:n="primary",sx:i,...s},l)=>r(t,{ref:l,"data-testid":`Label-feature${n}`,sx:d({...p,color:"onSurface.os0",backgroundColor:"brand.tertiary",padding:"5px 7px 5px 10px",borderRadius:"2px",..."neutral"===n&&{backgroundColor:"onSurface.os600"},..."discount"===n&&{color:"brand.secondary",backgroundColor:"brand.tertiary"},..."secondary"===n&&{backgroundColor:"brand.secondary",color:"brand.tertiary"},...["alert","error"].includes(n)&&{backgroundColor:"error.main"},..."info"===n&&{backgroundColor:"info.main"},..."warning"===n&&{backgroundColor:"warning.dark"},..."success"===n&&{backgroundColor:"brand.primary"}},i),...s,children:e||a}));function g(r,o){return{...r,"&.MuiButtonBase-root":{...c(r,o)}}}const m=e(({type:e,label:c,children:x,variant:u="positive",sx:b,iconProps:m,IconComponent:f,onClick:C,...h},y)=>{const{sx:k,...w}=m||{},S=a(()=>{switch(u){case"alert":case"error":case"warning":return i;default:return s}},[u]),v=f||S,j=n();return o(t,{ref:y,"data-testid":`Label-semantic${u}`,sx:d({...p,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":{...l(j,!0,1)},...g({color:"brand.primary",backgroundColor:"transparent.transparent"},{color:"brandHover.primary",backgroundColor:"transparent.primary"}),...["alert","error"].includes(u)&&{...g({color:"error.main",backgroundColor:"transparent.transparent"},{color:"error.dark",backgroundColor:"transparent.primary"})},..."warning"===u&&{...g({color:"warning.dark",backgroundColor:"transparent.transparent"},{color:"warning.dark",backgroundColor:"transparent.primary"})},..."info"===u&&{...g({color:"info.main",backgroundColor:"transparent.transparent"},{color:"info.dark",backgroundColor:"transparent.primary"})}},b),onClick:C,...h,children:[r(v,{"data-testid":`icon-${u}`,sx:d({fontSize:"18px"},k),...w}),c||x]})}),f=e(({type:e,label:a,children:n,variant:i="positive",labelPlacement:s="end",dotProps:l,sx:c,...x},u)=>{const{sx:b,...g}=l||{};return o(t,{ref:u,"data-testid":`Label-status${i}`,sx:d(r=>({...p,color:"text.primary",flexDirection:{start:"row-reverse",top:"column-reverse",bottom:"column"}[s]??"row",gap:1,..."indicator"===e&&r.typography.disclaimer1}),c),..."disabled"===i&&{disabled:!0,tabIndex:-1},...x,children:[r(t,{sx:d({width:"10px",height:"10px",..."indicator"===e&&{width:"14px",height:"14px"},borderRadius:"50%",backgroundColor:"success.main",..."warning"===i&&{backgroundColor:"warning.dark"},...["alert","error"].includes(i)&&{backgroundColor:"error.main"},..."neutral"===i&&{backgroundColor:"onSurface.os500"},..."disabled"===i&&{backgroundColor:"disabled.secondary"}},b),...g}),a||n]})}),C=e(({type:e,label:n,children:i,variant:s="A+++",size:l="large",sx:c,labelBoxProps:x,labelNextProps:u,...b},g)=>{const m=a(()=>({B:"#019A01",C:"#69CC00",D:"#FFCC01",E:"#F99601",F:"#FE6501",G:"#FF3100",H:"#2A78CD"}),[]),f=r=>m[r]||"#016703",{sx:C,...h}=x||{},{sx:y,...k}=u||{};return o(t,{ref:g,"data-testid":`Label-CO2${s}`,sx:d({...p},c),...b,children:[r(t,{component:"span",sx:d({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"===l&&{fontSize:{xs:"10px",xl:"12px"},height:{xs:"16px",xl:"18px"}},padding:"0 5px",position:"relative",letterSpacing:"1px"},C),...h,children:n||i||s}),r(t,{sx:d({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"===l&&{borderWidth:{xs:"8px 0 8px 5px",lg:"9px 0 9px 7px"}}},y),...k})]})}),h=e((o,e)=>{const t=a(()=>{switch(o.type){case"simple":return u;case"feature":return b;case"semantic":return m;case"status":case"indicator":return f;case"CO2":return C;default:return x}},[o.type]);return r(t,{component:"span",...o,ref:e})});export{h as Label};
+import{jsx as r,jsxs as o}from"react/jsx-runtime";import{forwardRef as e,useMemo as a}from"react";import{Box as t,useTheme as n}from"@mui/material";import{CircleExclamationIcon as i}from"../icon/stroke/CircleExclamationIcon.js";import{CircleInformationIcon as s}from"../icon/stroke/CircleInformationIcon.js";import{getFocusRingStyle as l}from"../focusring/focusring.js";import{getInteractiveStyle as c}from"../../materialui/button/interactive.js";import{sxOverride as d}from"../../utils/sxOverride/sxOverride.js";const p={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"},x=e(({type:o,label:e,children:a,sx:n,...i},s)=>r(t,{ref:s,"data-testid":"Label-general",sx:d({...p,color:r=>"dark"===r.palette.mode?"onSurface.os200":"onSurface.os600"},n),...i,children:e||a})),u=e(({type:o,label:e,children:a,sx:n,...i},s)=>r(t,{ref:s,"data-testid":"Label-simple",sx:d(r=>({...p,...r.typography.list,backgroundColor:"transparent.primary",color:"text.primary",p:"2px 10px"}),n),...i,children:e||a})),b=e(({type:o,label:e,children:a,variant:n="primary",sx:i,...s},l)=>r(t,{ref:l,"data-testid":`Label-feature${n}`,sx:d({...p,color:"onSurface.os0",backgroundColor:"brand.tertiary",padding:"5px 7px 5px 10px",borderRadius:"2px",..."neutral"===n&&{backgroundColor:"onSurface.os600"},..."discount"===n&&{color:"brand.secondary",backgroundColor:"brand.tertiary"},..."secondary"===n&&{backgroundColor:"brand.secondary",color:"brand.tertiary"},...["alert","error"].includes(n)&&{backgroundColor:"error.main"},..."info"===n&&{backgroundColor:"info.main"},..."warning"===n&&{backgroundColor:"warning.dark"},..."success"===n&&{backgroundColor:"brand.primary"}},i),...s,children:e||a}));function g(r,o){return{...r,"&.MuiButtonBase-root":{...c(r,o)}}}const m=e(({type:e,label:c,children:x,variant:u="positive",sx:b,iconProps:m,IconComponent:f,onClick:C,...h},y)=>{const{sx:k,...w}=m||{},S=a(()=>{switch(u){case"alert":case"error":case"warning":return i;default:return s}},[u]),v=f||S,j=n();return o(t,{ref:y,"data-testid":`Label-semantic${u}`,sx:d({...p,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":{...l(j,!0,1)},...g({color:"brand.primary",backgroundColor:"transparent"},{color:"brandHover.primary",backgroundColor:"transparent.primary"}),...["alert","error"].includes(u)&&{...g({color:"error.main",backgroundColor:"transparent"},{color:"error.dark",backgroundColor:"transparent.primary"})},..."warning"===u&&{...g({color:"warning.dark",backgroundColor:"transparent"},{color:"warning.dark",backgroundColor:"transparent.primary"})},..."info"===u&&{...g({color:"info.main",backgroundColor:"transparent"},{color:"info.dark",backgroundColor:"transparent.primary"})}},b),onClick:C,...h,children:[r(v,{"data-testid":`icon-${u}`,sx:d({fontSize:"18px"},k),...w}),c||x]})}),f=e(({type:e,label:a,children:n,variant:i="positive",labelPlacement:s="end",dotProps:l,sx:c,...x},u)=>{const{sx:b,...g}=l||{};return o(t,{ref:u,"data-testid":`Label-status${i}`,sx:d(r=>({...p,color:"text.primary",flexDirection:{start:"row-reverse",top:"column-reverse",bottom:"column"}[s]??"row",gap:1,..."indicator"===e&&r.typography.disclaimer1}),c),..."disabled"===i&&{disabled:!0,tabIndex:-1},...x,children:[r(t,{sx:d({width:"10px",height:"10px",..."indicator"===e&&{width:"14px",height:"14px"},borderRadius:"50%",backgroundColor:"success.main",..."warning"===i&&{backgroundColor:"warning.dark"},...["alert","error"].includes(i)&&{backgroundColor:"error.main"},..."neutral"===i&&{backgroundColor:"onSurface.os500"},..."disabled"===i&&{backgroundColor:"disabled.secondary"}},b),...g}),a||n]})}),C=e(({type:e,label:n,children:i,variant:s="A+++",size:l="large",sx:c,labelBoxProps:x,labelNextProps:u,...b},g)=>{const m=a(()=>({B:"#019A01",C:"#69CC00",D:"#FFCC01",E:"#F99601",F:"#FE6501",G:"#FF3100",H:"#2A78CD"}),[]),f=r=>m[r]||"#016703",{sx:C,...h}=x||{},{sx:y,...k}=u||{};return o(t,{ref:g,"data-testid":`Label-CO2${s}`,sx:d({...p},c),...b,children:[r(t,{component:"span",sx:d({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"===l&&{fontSize:{xs:"10px",xl:"12px"},height:{xs:"16px",xl:"18px"}},padding:"0 5px",position:"relative",letterSpacing:"1px"},C),...h,children:n||i||s}),r(t,{sx:d({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"===l&&{borderWidth:{xs:"8px 0 8px 5px",lg:"9px 0 9px 7px"}}},y),...k})]})}),h=e((o,e)=>{const t=a(()=>{switch(o.type){case"simple":return u;case"feature":return b;case"semantic":return m;case"status":case"indicator":return f;case"CO2":return C;default:return x}},[o.type]);return r(t,{component:"span",...o,ref:e})});export{h as Label};
 //# sourceMappingURL=Label.js.map

package/components/label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, forwardRef, ElementType, ComponentType } from 'react';\nimport { Box, BoxProps, CSSObject, SvgIconProps, useTheme } from '@mui/material';\nimport { CircleExclamationIcon } from '@/src/components/icon/stroke/CircleExclamationIcon';\nimport { CircleInformationIcon } from '@/src/components/icon/stroke/CircleInformationIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface LabelBaseProps extends BoxProps<ElementType> {\n  /**\n   * Content to be rendered inside Label, alternatively children are used\n   */\n  label?: ReactNode;\n}\n\nexport interface GeneralLabelProps extends LabelBaseProps {\n  type?: 'general';\n}\n\nexport interface SimpleLabelProps extends LabelBaseProps {\n  type: 'simple';\n}\n\nexport type FeatureVariants =\n  | 'primary'\n  | 'neutral'\n  | 'secondary'\n  | 'discount'\n  | 'alert'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning';\nexport interface FeatureLabelProps extends LabelBaseProps {\n  type: 'feature';\n  variant?: FeatureVariants;\n}\n\nexport type SemanticVariants = 'positive' | 'info' | 'warning' | 'alert' | 'error';\nexport interface SemanticLabelProps extends LabelBaseProps {\n  type: 'semantic';\n  variant?: SemanticVariants;\n  iconProps?: SvgIconProps;\n  IconComponent?: ComponentType<SvgIconProps>;\n}\n\nexport type StatusVariants = 'positive' | 'warning' | 'alert' | 'error' | 'neutral' | 'disabled';\nexport interface StatusLabelProps extends LabelBaseProps {\n  type: 'status' | 'indicator';\n  variant?: StatusVariants;\n  dotProps?: BoxProps<ElementType>;\n  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';\n}\n\nexport type CO2Variants = 'A+++' | 'A++' | 'A+' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';\nexport interface CO2LabelProps extends LabelBaseProps {\n  type: 'CO2';\n  variant?: CO2Variants;\n  size?: 'small' | 'large';\n  labelBoxProps?: BoxProps<ElementType>;\n  labelNextProps?: BoxProps<ElementType>;\n}\n\nexport type LabelProps =\n  | SimpleLabelProps\n  | FeatureLabelProps\n  | SemanticLabelProps\n  | StatusLabelProps\n  | CO2LabelProps\n  | GeneralLabelProps;\n\n// Shared style for all variants\nconst baseSx: CSSObject = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  flexWrap: 'nowrap',\n  flexShrink: '0',\n  // font\n  fontSize: '11px',\n  lineHeight: '12px',\n  letterSpacing: '3px',\n  textTransform: 'uppercase',\n  fontWeight: '900',\n  whiteSpace: 'nowrap',\n  textRendering: 'geometricPrecision',\n};\n\nconst GeneralVariant: React.FC<GeneralLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-general\"\n    sx={sxOverride(\n      {\n        ...baseSx,\n        color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os200' : 'onSurface.os600'),\n      },\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst SimpleVariant: React.FC<SimpleLabelProps> = forwardRef(({ type: _, label, children, sx, ...rest }, ref) => (\n  <Box\n    ref={ref}\n    data-testid=\"Label-simple\"\n    sx={sxOverride(\n      (theme) => ({\n        ...baseSx,\n        ...theme.typography.list,\n        backgroundColor: 'transparent.primary',\n        color: 'text.primary',\n        p: '2px 10px',\n      }),\n      sx,\n    )}\n    {...rest}\n  >\n    {label || children}\n  </Box>\n));\n\nconst FeatureVariant: React.FC<FeatureLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'primary', sx, ...rest }, ref) => (\n    <Box\n      ref={ref}\n      data-testid={`Label-feature${variant}`}\n      sx={sxOverride(\n        {\n          ...baseSx,\n          color: 'onSurface.os0',\n          backgroundColor: 'brand.tertiary',\n          padding: '5px 7px 5px 10px',\n          borderRadius: '2px',\n          ...(variant === 'neutral' && {\n            backgroundColor: 'onSurface.os600',\n          }),\n          ...(variant === 'discount' && {\n            color: 'brand.secondary',\n            backgroundColor: 'brand.tertiary',\n          }),\n          // dark mode\n          ...(variant === 'secondary' && {\n            backgroundColor: 'brand.secondary',\n            color: 'brand.tertiary',\n          }),\n          // semantic labels\n          ...(['alert', 'error'].includes(variant) && {\n            backgroundColor: 'error.main',\n          }),\n          ...(variant === 'info' && {\n            backgroundColor: 'info.main',\n          }),\n          ...(variant === 'warning' && {\n            backgroundColor: 'warning.dark',\n          }),\n          ...(variant === 'success' && {\n            backgroundColor: 'brand.primary',\n          }),\n        },\n        sx,\n      )}\n      {...rest}\n    >\n      {label || children}\n    </Box>\n  ),\n);\n\n/**\n * Wrapper around getInteractiveStyle() function to provide interactive style\n *  only for label that is actually a button\n */\nfunction getLabelInteractiveStyle(defaultStyle: CSSObject, hoverStyle: CSSObject): CSSObject {\n  return {\n    ...defaultStyle,\n    '&.MuiButtonBase-root': {\n      ...getInteractiveStyle(defaultStyle, hoverStyle),\n    },\n  };\n}\n\nconst SemanticVariant: React.FC<SemanticLabelProps> = forwardRef(\n  ({ type: _, label, children, variant = 'positive', sx, iconProps, IconComponent, onClick, ...rest }, ref) => {\n    const { sx: iconSx, ...restIconProps } = iconProps || {};\n    const VariantIconComponent = useMemo(() => {\n      switch (variant) {\n        case 'alert':\n        case 'error':\n        case 'warning':\n          return CircleExclamationIcon;\n        case 'info':\n        case 'positive':\n        default:\n          return CircleInformationIcon;\n      }\n    }, [variant]);\n    const SemanticIcon = IconComponent || VariantIconComponent;\n    const theme = useTheme();\n\n    return (\n      <Box\n        ref={ref}\n        data-testid={`Label-semantic${variant}`}\n        sx={sxOverride(\n          {\n            ...baseSx,\n            gap: '6px',\n            padding: '2px 8px 2px 4px',\n            borderRadius: '4px',\n            border: 1,\n            borderColor: 'currentColor',\n            transition:\n              'transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.3s ease-out',\n            // clickable style\n            '&&.MuiButtonBase-root': {\n              // focused style\n              ...getFocusRingStyle(theme, true, 1),\n            },\n            // default, positive\n            ...getLabelInteractiveStyle(\n              {\n                color: 'brand.primary',\n                backgroundColor: 'transparent.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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"}
+{"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/components/notification/NotificationCenterHeaderButton.d.ts

@@ -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/components/playPauseButton/PlayPauseButton.d.ts

@@ -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/components/promptBar/PromptAttachments.js

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