@skodaflow/web-library 8.3.1 → 8.4.0

package/components/copyButton/useCopyAction.js

@@ -0,0 +1,2 @@
+import{useState as r,useRef as e,useEffect as o}from"react";import{copyToClipboard as t}from"../../utils/copyToClipboard/copyToClipboard.js";const c=({value:c,copyFn:s=t,resetDelay:i=2e3,onCopied:n,onError:a})=>{const[u,l]=r("idle"),p=e(!1);o(()=>{if("success"!==u&&"error"!==u)return;const r=setTimeout(()=>{l("idle")},i);return()=>clearTimeout(r)},[u,i]);return{state:u,copy:async()=>{if(!p.current){p.current=!0,l("loading");try{await Promise.resolve(s(c)),l("success"),n?.()}catch(r){l("error"),a?.(r)}p.current=!1}}}};export{c as useCopyAction};
+//# sourceMappingURL=useCopyAction.js.map

package/components/copyButton/useCopyAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopyAction.js","sources":["../../../src/components/copyButton/useCopyAction.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { copyToClipboard } from '@/src/utils/copyToClipboard/copyToClipboard';\n\nexport type CopyState = 'idle' | 'loading' | 'success' | 'error';\n\nexport interface UseCopyActionProps {\n  /**\n   * Text value to copy\n   */\n  value: string;\n  /**\n   * Custom copy implementation, defaults to copyToClipboard from the library\n   */\n  copyFn?: (text: string) => unknown;\n  /**\n   * How long the success / error state stays visible before returning to idle\n   * @default 2000\n   */\n  resetDelay?: number;\n  /**\n   * Called after successful copy\n   */\n  onCopied?: () => void;\n  /**\n   * Called when copy fails\n   */\n  onError?: (error: unknown) => void;\n}\n\n/**\n * Shared copy state for CopyButton and CopyIconButton\n */\nexport const useCopyAction = ({\n  value,\n  copyFn = copyToClipboard,\n  resetDelay = 2000,\n  onCopied,\n  onError,\n}: UseCopyActionProps): { state: CopyState; copy: () => Promise<void> } => {\n  const [state, setState] = useState<CopyState>('idle');\n  // prevent double call\n  const isCopyingRef = useRef(false);\n\n  // reset success/error back to idle after resetDelay\n  useEffect(() => {\n    if (state !== 'success' && state !== 'error') {\n      return;\n    }\n\n    const timeout = setTimeout(() => {\n      setState('idle');\n    }, resetDelay);\n\n    return () => clearTimeout(timeout);\n  }, [state, resetDelay]);\n\n  const copy = async () => {\n    // synchronous lock\n    if (isCopyingRef.current) {\n      return;\n    }\n\n    isCopyingRef.current = true;\n    setState('loading');\n\n    try {\n      await Promise.resolve(copyFn(value));\n      setState('success');\n      onCopied?.();\n    } catch (error) {\n      setState('error');\n      onError?.(error);\n    }\n\n    isCopyingRef.current = false;\n  };\n\n  return { state, copy };\n};\n"],"names":["useCopyAction","value","copyFn","copyToClipboard","resetDelay","onCopied","onError","state","setState","useState","isCopyingRef","useRef","useEffect","timeout","setTimeout","clearTimeout","copy","async","current","Promise","resolve","error"],"mappings":"mJAgCaA,EAAgB,EAC3BC,QACAC,SAASC,EACTC,aAAa,IACbC,WACAC,cAEA,MAAOC,EAAOC,GAAYC,EAAoB,QAExCC,EAAeC,GAAO,GAG5BC,EAAU,KACR,GAAc,YAAVL,GAAiC,UAAVA,EACzB,OAGF,MAAMM,EAAUC,WAAW,KACzBN,EAAS,SACRJ,GAEH,MAAO,IAAMW,aAAaF,IACzB,CAACN,EAAOH,IAuBX,MAAO,CAAEG,QAAOS,KArBHC,UAEX,IAAIP,EAAaQ,QAAjB,CAIAR,EAAaQ,SAAU,EACvBV,EAAS,WAET,UACQW,QAAQC,QAAQlB,EAAOD,IAC7BO,EAAS,WACTH,KACF,CAAE,MAAOgB,GACPb,EAAS,SACTF,IAAUe,EACZ,CAEAX,EAAaQ,SAAU,CAdvB"}

package/components/footer/FooterMenuCollapse.js

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

package/components/footer/FooterMenuCollapse.js.map

@@ -1 +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"}
+{"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          // hidden from keyboard and assistive technology while collapsed, like the default Collapse\n          visibility: 'hidden',\n          // visibility switches at the end of collapsing and at the start of expanding\n          transition: theme.transitions.create(['grid-template-rows', 'visibility'], {\n            duration: typeof timeout === 'number' ? timeout : theme.transitions.duration.standard,\n          }),\n          // clip the content while the track is collapsed\n          '& > *': {\n            minHeight: '0',\n            overflow: 'hidden',\n          },\n          // expanded\n          '&[data-expanded=\"true\"]': {\n            gridTemplateRows: '1fr',\n            visibility: 'visible',\n          },\n          // always open from desktop up, replaces the removed media query\n          [theme.breakpoints.up('lg')]: {\n            gridTemplateRows: '1fr',\n            visibility: 'visible',\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","visibility","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,MAElBC,WAAY,SAEZC,WAAYJ,EAAMK,YAAYC,OAAO,CAAC,qBAAsB,cAAe,CACzEC,SAA6B,iBAAZjB,EAAuBA,EAAUU,EAAMK,YAAYE,SAASC,WAG/E,QAAS,CACPC,UAAW,IACXC,SAAU,UAGZ,0BAA2B,CACzBR,iBAAkB,MAClBC,WAAY,WAGd,CAACH,EAAMW,YAAYC,GAAG,OAAQ,CAC5BV,iBAAkB,MAClBC,WAAY,aAGhBZ,MAEEI,WAEHH"}

package/components/header/Header.d.ts

@@ -1,5 +1,6 @@
 import { FC, ReactNode, ElementType } from 'react';
-import { AppBarProps, BoxProps, DrawerProps, ToolbarProps } from '@mui/material';
+import { AppBarProps, BoxProps, Breakpoint, DrawerProps, Theme, ToolbarProps } from '@mui/material';
+import { SystemStyleObject } from '@mui/system';
 import { HeaderButtonProps } from './HeaderButton';
 export interface HeaderProps extends Omit<AppBarProps, 'color'> {
     /**
@@ -22,9 +23,14 @@ export interface HeaderProps extends Omit<AppBarProps, 'color'> {
     /**
      * Controls if mobile version of Header should be shown, this collapses children into mobile menu
      *
-     * @default undefined, leads to usage useMediaQuery(theme.breakpoints.down('lg'))
+     * @default undefined, leads to usage of breakpoint media query
      */
     mobile?: boolean;
+    /**
+     * Breakpoint at which Header collapses into mobile menu, number is treated as px value
+     * @default 'lg'
+     */
+    breakpoint?: Breakpoint | number;
     /**
      * Controls open/close state of mobile menu
      */
@@ -53,6 +59,10 @@ export interface HeaderProps extends Omit<AppBarProps, 'color'> {
      * Properties applied to button wrapper
      */
     buttonsProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to wrapper of buttons that collapse into drawer, rendered only with visibleButtons
+     */
+    collapsibleButtonsProps?: BoxProps<ElementType>;
     /**
      * Properties applied to hamburger menu
      */
@@ -70,6 +80,10 @@ export interface HeaderProps extends Omit<AppBarProps, 'color'> {
      */
     drawerProps?: DrawerProps;
 }
+/**
+ * Picks desktop or mobile styles, explicit mobile value wins over breakpoint media queries
+ */
+export declare function variantSx(theme: Theme, mobile: boolean | undefined, breakpoint: Breakpoint | number, desktop: SystemStyleObject<Theme>, mobileStyles: SystemStyleObject<Theme>): SystemStyleObject<Theme>;
 /**
  * Component to render Header with navigation and action buttons at the top of the page
  */

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):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};
+import{jsxs as e,Fragment as o,jsx as t}from"react/jsx-runtime";import{forwardRef as r,useState as s,Children as n,isValidElement as i,Fragment as l}from"react";import{sxOverride as a}from"../../utils/sxOverride/sxOverride.js";import{useTheme as d,AppBar as p,Toolbar as c,Box as m,Drawer as x}from"@mui/material";import{MenuIcon as u}from"../icon/stroke/MenuIcon.js";import{CloseIcon as f}from"../icon/stroke/CloseIcon.js";import{getFocusRingStyle as b}from"../focusring/focusring.js";import{HeaderButton as h}from"./HeaderButton.js";import{HeaderContext as g,headerDesktopContext as y,headerMobileContext as v}from"./HeaderContext.js";function k(e,o,t,r,s){return void 0===o?{[e.breakpoints.down(t)]:s,[e.breakpoints.up(t)]:r}:o?s:r}function P(e){return n.toArray(e).some(e=>!i(e)||e.type!==l||P(e.props.children))}const j=r(({children:r,logo:n,buttons:i,visibleButtons:l,mobile:j,open:C,setOpen:I,inContainer:H=!1,breakpoint:w="lg",toolbarProps:B,logoProps:M,contentProps:S,mobileContentProps:F,buttonsProps:O,collapsibleButtonsProps:T,menuButtonProps:z,menuIcon:A,closeMenuIcon:G,drawerProps:D,...E},L)=>{const R=d(),{sx:V,...W}=M??{},{sx:$,...q}=S??{},{sx:J,...K}=F??{},{sx:N,...Q}=O??{},{sx:U,...X}=T??{},{sx:Y,...Z}=z??{},{sx:_,slotProps:ee,...oe}=D??{},{paper:te,backdrop:re,...se}=ee??{},{sx:ne,...ie}=te??{},{sx:le,...ae}=re??{},[de,pe]=s(!1),ce=C??de,me=I??pe,xe=P(r),ue=P(i),fe=!0!==l&&P(l),be=!!l&&ue,he=!1!==j&&(xe||be);return e(o,{children:[t(p,{ref:L,"data-testid":"Header",...E,children:t(g.Provider,{value:y,children:e(c,{disableGutters:!H,...B,children:[n&&t(m,{"data-testid":"Header.logo",sx:a({color:"dark"===R.palette.mode?"brand.secondary":"brand.tertiary",flexShrink:"0",display:"flex",alignItems:"center",justifyContent:"flex-start","& .MuiLink-root":{display:"block",position:"relative",py:1,...b(R),"&.Mui-focusVisible":{boxShadow:"none"}},"& .MuiSvgIcon-root":{display:"block"}},V),...W,children:n}),t(m,{sx:a({minWidth:"0",flexGrow:"1",alignSelf:"stretch",...k(R,j,w,{display:"flex",...n&&{pl:4}},{display:"none"}),alignItems:"stretch",justifyContent:"flex-start",gap:{xs:2,xl:4},mb:"-1px"},$),"data-testid":"Header.nav",...q,children:r}),(fe||ue||he)&&e(m,{sx:a({display:"flex",alignItems:"center",justifyContent:"flex-end",gap:.25,ml:"auto",...k(R,j,w,{mr:0},{mr:-1})},N),"data-testid":"Header.btns",...Q,children:[!0!==l&&l,l?ue&&t(m,{sx:a({...k(R,j,w,{display:"contents"},{display:"none"})},U),"data-testid":"Header.collapsiblebtns",...X,children:i}):i,he&&t(h,{"aria-label":"Toggle menu",extend:!1,onClick:()=>me(e=>!e),sx:a(ce?{display:"inline-flex"}:k(R,j,w,{display:"none"},{display:"inline-flex"}),Y),...Z,children:ce?G||t(f,{}):A||t(u,{})},"menu")]})]})})}),he&&t(x,{disablePortal:!0,disableEnforceFocus:!0,disableAutoFocus:!0,anchor:"top",open:ce,onClose:()=>me(!1),sx:a({zIndex:R.zIndex.appBar-10,top:R.mixins.toolbar.minHeight,bottom:"auto",height:`calc(100vh - ${R.mixins.toolbar.minHeight})`,position:"absolute"},_),slotProps:{backdrop:{sx:a({position:"absolute"},le),...ae},paper:{sx:a({position:"absolute",height:"100%",display:"grid",gridTemplateRows:"auto max-content"},ne),...ie},...se},...oe,children:e(g.Provider,{value:v,children:[t(m,{sx:a({p:2,overflow:"auto"},J),"data-testid":"Header.mobilenav",...K,children:r}),be&&t(m,{sx:{p:2,pt:0},children:t(m,{sx:{pt:.75,display:"flex",flexDirection:"column-reverse",alignItems:"stretch",justifyContent:"flex-start",borderTop:1,borderColor:"dark"===R.palette.mode?"onSurface.os700":"surface.secondary"},children:i})})]})})]})});export{j as Header,k as variantSx};
 //# 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 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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"}
+{"version":3,"file":"Header.js","sources":["../../../src/components/header/Header.tsx"],"sourcesContent":["import React, { FC, useState, forwardRef, ReactNode, ElementType, Children, Fragment, isValidElement } from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport {\n  AppBar,\n  AppBarProps,\n  BackdropProps,\n  Box,\n  BoxProps,\n  Breakpoint,\n  Drawer,\n  DrawerProps,\n  PaperProps,\n  Theme,\n  Toolbar,\n  ToolbarProps,\n  useTheme,\n} from '@mui/material';\nimport { SystemStyleObject } from '@mui/system';\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 { HeaderContext, headerDesktopContext, headerMobileContext } from './HeaderContext';\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 of breakpoint media query\n   */\n  mobile?: boolean;\n  /**\n   * Breakpoint at which Header collapses into mobile menu, number is treated as px value\n   * @default 'lg'\n   */\n  breakpoint?: Breakpoint | number;\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 wrapper of buttons that collapse into drawer, rendered only with visibleButtons\n   */\n  collapsibleButtonsProps?: 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 * Picks desktop or mobile styles, explicit mobile value wins over breakpoint media queries\n */\nexport function variantSx(\n  theme: Theme,\n  mobile: boolean | undefined,\n  breakpoint: Breakpoint | number,\n  desktop: SystemStyleObject<Theme>,\n  mobileStyles: SystemStyleObject<Theme>,\n): SystemStyleObject<Theme> {\n  if (mobile === undefined) {\n    return {\n      [theme.breakpoints.down(breakpoint)]: mobileStyles,\n      [theme.breakpoints.up(breakpoint)]: desktop,\n    };\n  }\n  return mobile ? mobileStyles : desktop;\n}\n\n/**\n * Checks for renderable content, recursively unwraps fragments\n */\nfunction hasRenderableChildren(nodes: ReactNode): boolean {\n  return Children.toArray(nodes).some((child) =>\n    isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment\n      ? hasRenderableChildren(child.props.children)\n      : true,\n  );\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,\n      open: propOpen,\n      setOpen: propSetOpen,\n      inContainer = false,\n      breakpoint = 'lg',\n      toolbarProps,\n      logoProps,\n      contentProps,\n      mobileContentProps,\n      buttonsProps,\n      collapsibleButtonsProps,\n      menuButtonProps,\n      menuIcon,\n      closeMenuIcon,\n      drawerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\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: collapsibleButtonsSx, ...restCollapsibleButtons } = collapsibleButtonsProps ?? {};\n    const { sx: menuButtonSx, ...restMenuButton } = menuButtonProps ?? {};\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    const hasChildren = hasRenderableChildren(children);\n    const hasButtons = hasRenderableChildren(buttons);\n    const hasVisibleButtons = visibleButtons !== true && hasRenderableChildren(visibleButtons);\n    // buttons collapse into drawer only when visibleButtons property is provided\n    const collapseButtons = !!visibleButtons && hasButtons;\n    const showMenu = mobile !== false && (hasChildren || collapseButtons);\n\n    return (\n      <>\n        <AppBar ref={ref} data-testid=\"Header\" {...rest}>\n          <HeaderContext.Provider value={headerDesktopContext}>\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                    // whole nav is hidden in mobile, children collapse into drawer\n                    ...variantSx(\n                      theme,\n                      mobile,\n                      breakpoint,\n                      {\n                        display: 'flex',\n                        ...(logo && {\n                          // increase size between logo and nav\n                          pl: 4,\n                        }),\n                      },\n                      { display: 'none' },\n                    ),\n                    alignItems: 'stretch',\n                    justifyContent: 'flex-start',\n                    gap: { xs: 2, xl: 4 },\n                    // move directly into border\n                    mb: '-1px',\n                  },\n                  contentSx,\n                )}\n                data-testid=\"Header.nav\"\n                {...restContent}\n              >\n                {children}\n              </Box>\n              {(hasVisibleButtons || hasButtons || showMenu) && (\n                <Box\n                  sx={sxOverride(\n                    {\n                      display: 'flex',\n                      alignItems: 'center',\n                      justifyContent: 'flex-end',\n                      gap: 0.25,\n                      // keep buttons on the right in mobile when nav is hidden\n                      ml: 'auto',\n                      // compensate icon padding in mobile\n                      ...variantSx(theme, mobile, breakpoint, { mr: 0 }, { mr: -1 }),\n                    },\n                    buttonsSx,\n                  )}\n                  data-testid=\"Header.btns\"\n                  {...restButtons}\n                >\n                  {visibleButtons !== true && visibleButtons}\n                  {visibleButtons\n                    ? hasButtons && (\n                        <Box\n                          sx={sxOverride(\n                            {\n                              // contents keeps buttons in flex layout, none collapses them into drawer in mobile\n                              ...variantSx(theme, mobile, breakpoint, { display: 'contents' }, { display: 'none' }),\n                            },\n                            collapsibleButtonsSx,\n                          )}\n                          data-testid=\"Header.collapsiblebtns\"\n                          {...restCollapsibleButtons}\n                        >\n                          {buttons}\n                        </Box>\n                      )\n                    : buttons}\n                  {showMenu && (\n                    <HeaderButton\n                      key=\"menu\"\n                      aria-label=\"Toggle menu\"\n                      extend={false}\n                      onClick={() => setOpen((prev: boolean) => !prev)}\n                      sx={sxOverride(\n                        // toggle stays visible while drawer is open, so it can be closed even in desktop\n                        open\n                          ? { display: 'inline-flex' }\n                          : variantSx(theme, mobile, breakpoint, { display: 'none' }, { display: 'inline-flex' }),\n                        menuButtonSx,\n                      )}\n                      {...restMenuButton}\n                    >\n                      {open ? closeMenuIcon || <CloseIcon /> : menuIcon || <MenuIcon />}\n                    </HeaderButton>\n                  )}\n                </Box>\n              )}\n            </Toolbar>\n          </HeaderContext.Provider>\n        </AppBar>\n        {showMenu && (\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            <HeaderContext.Provider value={headerMobileContext}>\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                {children}\n              </Box>\n              {collapseButtons && (\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                    {buttons}\n                  </Box>\n                </Box>\n              )}\n            </HeaderContext.Provider>\n          </Drawer>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["variantSx","theme","mobile","breakpoint","desktop","mobileStyles","undefined","breakpoints","down","up","hasRenderableChildren","nodes","Children","toArray","some","child","isValidElement","type","Fragment","props","children","Header","forwardRef","logo","buttons","visibleButtons","open","propOpen","setOpen","propSetOpen","inContainer","toolbarProps","logoProps","contentProps","mobileContentProps","buttonsProps","collapsibleButtonsProps","menuButtonProps","menuIcon","closeMenuIcon","drawerProps","rest","ref","useTheme","sx","logoSx","restLogo","contentSx","restContent","mobileContentSx","restMobileContent","buttonsSx","restButtons","collapsibleButtonsSx","restCollapsibleButtons","menuButtonSx","restMenuButton","drawerSx","slotProps","drawerSlotProps","restDrawer","paper","drawerPaperProps","backdrop","drawerBackdropProps","restDrawerSlotProps","drawerPaperSx","restDrawerPaper","drawerBackdropSx","restDrawerBackdrop","rawOpen","rawSetOpen","useState","hasChildren","hasButtons","hasVisibleButtons","collapseButtons","showMenu","_jsxs","_Fragment","_jsx","AppBar","HeaderContext","Provider","value","headerDesktopContext","Toolbar","disableGutters","Box","sxOverride","color","palette","mode","flexShrink","display","alignItems","justifyContent","position","py","getFocusRingStyle","boxShadow","minWidth","flexGrow","alignSelf","pl","gap","xs","xl","mb","ml","mr","HeaderButton","extend","onClick","prev","CloseIcon","MenuIcon","Drawer","disablePortal","disableEnforceFocus","disableAutoFocus","anchor","onClose","zIndex","appBar","top","mixins","toolbar","minHeight","bottom","height","gridTemplateRows","headerMobileContext","p","overflow","pt","flexDirection","borderTop","borderColor"],"mappings":"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"}

package/components/header/HeaderButton.d.ts

@@ -7,6 +7,7 @@ export interface HeaderButtonProps extends IconButtonProps<ElementType> {
     label?: TooltipProps['title'];
     /**
      * Change icon button with tooltip into button
+     * @default provided by HeaderContext
      */
     extend?: boolean;
     /**

package/components/header/HeaderButton.js

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{forwardRef as r}from"react";import{useTheme as i,ButtonBase as o,Badge as s,Tooltip as n,IconButton as a}from"@mui/material";import{getFocusRingStyle as d}from"../focusring/focusring.js";import{getInteractiveStyle as l}from"../../materialui/button/interactive.js";import{sxOverride as m}from"../../utils/sxOverride/sxOverride.js";const p=r(({children:r,sx:p,label:f,extend:c,tooltipProps:u,badgeProps:x,...g},h)=>{const b=i(),{title:y,...j}=u??{};return c?t(o,{sx:m({...b.typography.list,display:"flex",alignItems:"center",justifyContent:"flex-start",gap:1.25,py:1.5,px:1.25,"& .MuiSvgIcon-root":{fontSize:"17px"},"&.Mui-disabled":{color:"disabled.tertiary"},...l({fontWeight:"300"},{fontWeight:"700"}),...d(b),"&&:before":{borderRadius:"4px"}},p),ref:h,"data-testid":"HeaderButton",...g,children:[e(s,{...x,children:r}),f||y]}):e(n,{title:f||y,...j,children:e(a,{sx:p,size:"medium",ref:h,"data-testid":"HeaderButton",...g,children:e(s,{...x,children:r})})})});export{p as HeaderButton};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{forwardRef as r}from"react";import{useTheme as i,ButtonBase as o,Badge as s,Tooltip as n,IconButton as d}from"@mui/material";import{getFocusRingStyle as a}from"../focusring/focusring.js";import{getInteractiveStyle as l}from"../../materialui/button/interactive.js";import{sxOverride as m}from"../../utils/sxOverride/sxOverride.js";import{useHeaderContext as p}from"./HeaderContext.js";const f=r(({children:r,sx:f,label:c,extend:u,tooltipProps:x,badgeProps:g,...h},b)=>{const j=i(),y=p(),v=u??y?.extend,{title:H,...z}=x??{};return v?t(o,{sx:m({...j.typography.list,display:"flex",alignItems:"center",justifyContent:"flex-start",gap:1.25,py:1.5,px:1.25,"& .MuiSvgIcon-root":{fontSize:"17px"},"&.Mui-disabled":{color:"disabled.tertiary"},...l({fontWeight:"300"},{fontWeight:"700"}),...a(j),"&&:before":{borderRadius:"4px"}},f),ref:b,"data-testid":"HeaderButton",...h,children:[e(s,{...g,children:r}),c||H]}):e(n,{title:c||H,...z,children:e(d,{sx:f,size:"medium",ref:b,"data-testid":"HeaderButton",...h,children:e(s,{...g,children:r})})})});export{f as HeaderButton};
 //# sourceMappingURL=HeaderButton.js.map

package/components/header/HeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderButton.js","sources":["../../../src/components/header/HeaderButton.tsx"],"sourcesContent":["import React, { ElementType, FC, ForwardedRef, forwardRef } from 'react';\nimport {\n  IconButton,\n  IconButtonProps,\n  ButtonBase,\n  Tooltip,\n  TooltipProps,\n  Badge,\n  BadgeProps,\n  useTheme,\n} from '@mui/material';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface HeaderButtonProps extends IconButtonProps<ElementType> {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: TooltipProps['title'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: BadgeProps;\n}\n\n/**\n * IconButton for the action links\n */\nexport const HeaderButton: FC<HeaderButtonProps> = forwardRef(\n  ({ children, sx, label, extend, tooltipProps, badgeProps, ...rest }, ref) => {\n    const theme = useTheme();\n    const { title, ...restTooltip } = tooltipProps ?? {};\n\n    if (extend) {\n      return (\n        <ButtonBase\n          sx={sxOverride(\n            {\n              ...theme.typography.list,\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'flex-start',\n              gap: 1.25,\n              py: 1.5,\n              px: 1.25,\n              // icon inside\n              '& .MuiSvgIcon-root': {\n                fontSize: '17px',\n              },\n              // disabled style\n              '&.Mui-disabled': {\n                color: 'disabled.tertiary',\n              },\n              // interactive style\n              ...getInteractiveStyle(\n                {\n                  fontWeight: '300',\n                },\n                {\n                  fontWeight: '700',\n                },\n              ),\n              // focus ring\n              ...getFocusRingStyle(theme),\n              '&&:before': {\n                borderRadius: '4px',\n              },\n            },\n            sx,\n          )}\n          ref={ref as ForwardedRef<HTMLButtonElement>}\n          data-testid=\"HeaderButton\"\n          {...rest}\n        >\n          <Badge {...badgeProps}>{children}</Badge>\n          {label || title}\n        </ButtonBase>\n      );\n    }\n\n    return (\n      <Tooltip title={label || title} {...restTooltip}>\n        <IconButton\n          sx={sx}\n          size=\"medium\"\n          ref={ref as ForwardedRef<HTMLButtonElement>}\n          data-testid=\"HeaderButton\"\n          {...rest}\n        >\n          <Badge {...badgeProps}>{children}</Badge>\n        </IconButton>\n      </Tooltip>\n    );\n  },\n);\n"],"names":["HeaderButton","forwardRef","children","sx","label","extend","tooltipProps","badgeProps","rest","ref","theme","useTheme","title","restTooltip","_jsxs","ButtonBase","sxOverride","typography","list","display","alignItems","justifyContent","gap","py","px","fontSize","color","getInteractiveStyle","fontWeight","getFocusRingStyle","borderRadius","_jsx","Badge","Tooltip","IconButton","size"],"mappings":"mYAqCO,MAAMA,EAAsCC,EACjD,EAAGC,WAAUC,KAAIC,QAAOC,SAAQC,eAAcC,gBAAeC,GAAQC,KACnE,MAAMC,EAAQC,KACRC,MAAEA,KAAUC,GAAgBP,GAAgB,CAAA,EAElD,OAAID,EAEAS,EAACC,GACCZ,GAAIa,EACF,IACKN,EAAMO,WAAWC,KACpBC,QAAS,OACTC,WAAY,SACZC,eAAgB,aAChBC,IAAK,KACLC,GAAI,IACJC,GAAI,KAEJ,qBAAsB,CACpBC,SAAU,QAGZ,iBAAkB,CAChBC,MAAO,wBAGNC,EACD,CACEC,WAAY,OAEd,CACEA,WAAY,WAIbC,EAAkBnB,GACrB,YAAa,CACXoB,aAAc,QAGlB3B,GAEFM,IAAKA,EAAsC,cAC/B,kBACRD,EAAIN,SAAA,CAER6B,EAACC,EAAK,IAAKzB,EAAUL,SAAGA,IACvBE,GAASQ,KAMdmB,EAACE,GAAQrB,MAAOR,GAASQ,KAAWC,WAClCkB,EAACG,GACC/B,GAAIA,EACJgC,KAAK,SACL1B,IAAKA,EAAsC,cAC/B,kBACRD,EAAIN,SAER6B,EAACC,EAAK,IAAKzB,EAAUL,SAAGA"}
+{"version":3,"file":"HeaderButton.js","sources":["../../../src/components/header/HeaderButton.tsx"],"sourcesContent":["import React, { ElementType, FC, ForwardedRef, forwardRef } from 'react';\nimport {\n  IconButton,\n  IconButtonProps,\n  ButtonBase,\n  Tooltip,\n  TooltipProps,\n  Badge,\n  BadgeProps,\n  useTheme,\n} from '@mui/material';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { useHeaderContext } from './HeaderContext';\n\nexport interface HeaderButtonProps extends IconButtonProps<ElementType> {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: TooltipProps['title'];\n  /**\n   * Change icon button with tooltip into button\n   * @default provided by HeaderContext\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: BadgeProps;\n}\n\n/**\n * IconButton for the action links\n */\nexport const HeaderButton: FC<HeaderButtonProps> = forwardRef(\n  ({ children, sx, label, extend: propExtend, tooltipProps, badgeProps, ...rest }, ref) => {\n    const theme = useTheme();\n    const headerContext = useHeaderContext();\n    // explicit prop wins over context provided by Header\n    const extend = propExtend ?? headerContext?.extend;\n    const { title, ...restTooltip } = tooltipProps ?? {};\n\n    if (extend) {\n      return (\n        <ButtonBase\n          sx={sxOverride(\n            {\n              ...theme.typography.list,\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'flex-start',\n              gap: 1.25,\n              py: 1.5,\n              px: 1.25,\n              // icon inside\n              '& .MuiSvgIcon-root': {\n                fontSize: '17px',\n              },\n              // disabled style\n              '&.Mui-disabled': {\n                color: 'disabled.tertiary',\n              },\n              // interactive style\n              ...getInteractiveStyle(\n                {\n                  fontWeight: '300',\n                },\n                {\n                  fontWeight: '700',\n                },\n              ),\n              // focus ring\n              ...getFocusRingStyle(theme),\n              '&&:before': {\n                borderRadius: '4px',\n              },\n            },\n            sx,\n          )}\n          ref={ref as ForwardedRef<HTMLButtonElement>}\n          data-testid=\"HeaderButton\"\n          {...rest}\n        >\n          <Badge {...badgeProps}>{children}</Badge>\n          {label || title}\n        </ButtonBase>\n      );\n    }\n\n    return (\n      <Tooltip title={label || title} {...restTooltip}>\n        <IconButton\n          sx={sx}\n          size=\"medium\"\n          ref={ref as ForwardedRef<HTMLButtonElement>}\n          data-testid=\"HeaderButton\"\n          {...rest}\n        >\n          <Badge {...badgeProps}>{children}</Badge>\n        </IconButton>\n      </Tooltip>\n    );\n  },\n);\n"],"names":["HeaderButton","forwardRef","children","sx","label","extend","propExtend","tooltipProps","badgeProps","rest","ref","theme","useTheme","headerContext","useHeaderContext","title","restTooltip","_jsxs","ButtonBase","sxOverride","typography","list","display","alignItems","justifyContent","gap","py","px","fontSize","color","getInteractiveStyle","fontWeight","getFocusRingStyle","borderRadius","_jsx","Badge","Tooltip","IconButton","size"],"mappings":"ybAuCO,MAAMA,EAAsCC,EACjD,EAAGC,WAAUC,KAAIC,QAAOC,OAAQC,EAAYC,eAAcC,gBAAeC,GAAQC,KAC/E,MAAMC,EAAQC,IACRC,EAAgBC,IAEhBT,EAASC,GAAcO,GAAeR,QACtCU,MAAEA,KAAUC,GAAgBT,GAAgB,CAAA,EAElD,OAAIF,EAEAY,EAACC,GACCf,GAAIgB,EACF,IACKR,EAAMS,WAAWC,KACpBC,QAAS,OACTC,WAAY,SACZC,eAAgB,aAChBC,IAAK,KACLC,GAAI,IACJC,GAAI,KAEJ,qBAAsB,CACpBC,SAAU,QAGZ,iBAAkB,CAChBC,MAAO,wBAGNC,EACD,CACEC,WAAY,OAEd,CACEA,WAAY,WAIbC,EAAkBrB,GACrB,YAAa,CACXsB,aAAc,QAGlB9B,GAEFO,IAAKA,EAAsC,cAC/B,kBACRD,EAAIP,SAAA,CAERgC,EAACC,EAAK,IAAK3B,EAAUN,SAAGA,IACvBE,GAASW,KAMdmB,EAACE,GAAQrB,MAAOX,GAASW,KAAWC,WAClCkB,EAACG,GACClC,GAAIA,EACJmC,KAAK,SACL5B,IAAKA,EAAsC,cAC/B,kBACRD,EAAIP,SAERgC,EAACC,EAAK,IAAK3B,EAAUN,SAAGA"}

package/components/header/HeaderContext.d.ts

@@ -0,0 +1,22 @@
+export interface HeaderContextValue {
+    /**
+     * Marks components rendered inside the mobile drawer as extended
+     */
+    extend: boolean;
+}
+/**
+ * Context provided by Header to switch child components between desktop and mobile variant
+ */
+export declare const HeaderContext: import("react").Context<HeaderContextValue>;
+/**
+ * Context value provided to components in Header toolbar
+ */
+export declare const headerDesktopContext: HeaderContextValue;
+/**
+ * Context value provided to components in Header mobile drawer
+ */
+export declare const headerMobileContext: HeaderContextValue;
+/**
+ * Returns HeaderContext value, undefined outside of Header
+ */
+export declare const useHeaderContext: () => HeaderContextValue | undefined;

package/components/header/HeaderContext.js

@@ -0,0 +1,2 @@
+import{createContext as e,useContext as t}from"react";const o=e(void 0),r={extend:!1},d={extend:!0},n=()=>t(o);export{o as HeaderContext,r as headerDesktopContext,d as headerMobileContext,n as useHeaderContext};
+//# sourceMappingURL=HeaderContext.js.map

package/components/header/HeaderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderContext.js","sources":["../../../src/components/header/HeaderContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface HeaderContextValue {\n  /**\n   * Marks components rendered inside the mobile drawer as extended\n   */\n  extend: boolean;\n}\n\n/**\n * Context provided by Header to switch child components between desktop and mobile variant\n */\nexport const HeaderContext = createContext<HeaderContextValue | undefined>(undefined);\n\n/**\n * Context value provided to components in Header toolbar\n */\nexport const headerDesktopContext: HeaderContextValue = { extend: false };\n\n/**\n * Context value provided to components in Header mobile drawer\n */\nexport const headerMobileContext: HeaderContextValue = { extend: true };\n\n/**\n * Returns HeaderContext value, undefined outside of Header\n */\nexport const useHeaderContext = (): HeaderContextValue | undefined => useContext(HeaderContext);\n"],"names":["HeaderContext","createContext","undefined","headerDesktopContext","extend","headerMobileContext","useHeaderContext","useContext"],"mappings":"4DAYaA,EAAgBC,OAA8CC,GAK9DC,EAA2C,CAAEC,QAAQ,GAKrDC,EAA0C,CAAED,QAAQ,GAKpDE,EAAmB,IAAsCC,EAAWP"}

package/components/header/HeaderLanguageSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLanguageSelect.js","sources":["../../../src/components/header/HeaderLanguageSelect.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState } from 'react';\nimport {\n  Menu,\n  MenuItem,\n  Radio,\n  ListItemText,\n  MenuProps,\n  MenuItemProps,\n  RadioProps,\n  ListItemTextProps,\n} from '@mui/material';\nimport { HeaderButton, HeaderButtonProps } from './HeaderButton';\nimport { GlobeIcon } from '@/src/components/icon/stroke/GlobeIcon';\n\ntype HeaderLanguageType = string | { short?: string; full?: string };\n\nexport interface HeaderLanguageSelectProps extends HeaderButtonProps {\n  /**\n   * List of languages\n   */\n  languages?: HeaderLanguageType[];\n  /**\n   * Index of selected language\n   * @default 0\n   */\n  defaultLanguage?: number;\n  /**\n   * Function that is triggered on language change\n   * @param language - provided language\n   * @param index - index of language\n   */\n  onSelect?: (language: HeaderLanguageType, index: number) => void;\n  /**\n   * Props applied to menu\n   */\n  menuProps?: MenuProps;\n  /**\n   * Props applied to each MenuItem, or a factory receiving the item index and language\n   */\n  menuItemProps?: MenuItemProps | ((index: number, language: HeaderLanguageType) => MenuItemProps);\n  /**\n   * Props applied to Radio inside each MenuItem, or a factory receiving the item index and language\n   */\n  radioProps?: RadioProps | ((index: number, language: HeaderLanguageType) => RadioProps);\n  /**\n   * Props applied to ListItemText inside each MenuItem, or a factory receiving the item index and language\n   */\n  listItemTextProps?: ListItemTextProps | ((index: number, language: HeaderLanguageType) => ListItemTextProps);\n}\n\n/**\n * IconButton with menu selector for languages\n */\nexport const HeaderLanguageSelect: FC<HeaderLanguageSelectProps> = forwardRef(\n  (\n    {\n      children,\n      languages,\n      onSelect,\n      defaultLanguage = 0,\n      menuProps,\n      menuItemProps,\n      radioProps,\n      listItemTextProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const [selected, setSelected] = useState(defaultLanguage);\n\n    return (\n      <>\n        <HeaderButton\n          onClick={(e) => setAnchor(e.currentTarget)}\n          ref={ref}\n          data-testid=\"HeaderLanguageSelect\"\n          {...rest}\n        >\n          {children || <GlobeIcon />}\n        </HeaderButton>\n        <Menu open={!!anchor} anchorEl={anchor} onClose={() => setAnchor(null)} {...menuProps}>\n          {languages?.map((lang, idx) => {\n            const isSelected = selected === idx;\n            const value = typeof lang === 'string' ? lang : lang.full;\n            const resolvedMenuItemProps = typeof menuItemProps === 'function' ? menuItemProps(idx, lang) : menuItemProps;\n            const resolvedRadioProps = typeof radioProps === 'function' ? radioProps(idx, lang) : radioProps;\n            const resolvedListItemTextProps =\n              typeof listItemTextProps === 'function' ? listItemTextProps(idx, lang) : listItemTextProps;\n\n            return (\n              <MenuItem\n                key={value}\n                selected={isSelected}\n                onClick={() => {\n                  onSelect?.(lang, idx);\n                  setSelected(idx);\n                }}\n                {...resolvedMenuItemProps}\n              >\n                <Radio checked={isSelected} tabIndex={-1} {...resolvedRadioProps} />\n                <ListItemText {...resolvedListItemTextProps}>{value}</ListItemText>\n              </MenuItem>\n            );\n          })}\n        </Menu>\n      </>\n    );\n  },\n);\n"],"names":["HeaderLanguageSelect","forwardRef","children","languages","onSelect","defaultLanguage","menuProps","menuItemProps","radioProps","listItemTextProps","rest","ref","anchor","setAnchor","useState","selected","setSelected","_jsxs","_Fragment","_jsx","HeaderButton","onClick","e","currentTarget","GlobeIcon","Menu","open","anchorEl","onClose","map","lang","idx","isSelected","value","full","resolvedMenuItemProps","resolvedRadioProps","resolvedListItemTextProps","MenuItem","Radio","checked","tabIndex","ListItemText"],"mappings":"0SAqDO,MAAMA,EAAsDC,EACjE,EAEIC,WACAC,YACAC,WACAC,kBAAkB,EAClBC,YACAC,gBACAC,aACAC,uBACGC,GAELC,KAEA,MAAOC,EAAQC,GAAaC,EAAS,OAC9BC,EAAUC,GAAeF,EAAST,GAEzC,OACEY,EAAAC,EAAA,CAAAhB,SAAA,CACEiB,EAACC,GACCC,QAAUC,GAAMT,EAAUS,EAAEC,eAC5BZ,IAAKA,gBACO,0BACRD,EAAIR,SAEPA,GAAYiB,EAACK,QAEhBL,EAACM,EAAI,CAACC,OAAQd,EAAQe,SAAUf,EAAQgB,QAAS,IAAMf,EAAU,SAAWP,WACzEH,GAAW0B,IAAI,CAACC,EAAMC,KACrB,MAAMC,EAAajB,IAAagB,EAC1BE,EAAwB,iBAATH,EAAoBA,EAAOA,EAAKI,KAC/CC,EAAiD,mBAAlB5B,EAA+BA,EAAcwB,EAAKD,GAAQvB,EACzF6B,EAA2C,mBAAf5B,EAA4BA,EAAWuB,EAAKD,GAAQtB,EAChF6B,EACyB,mBAAtB5B,EAAmCA,EAAkBsB,EAAKD,GAAQrB,EAE3E,OACEQ,EAACqB,EAAQ,CAEPvB,SAAUiB,EACVX,QAAS,KACPjB,IAAW0B,EAAMC,GACjBf,EAAYe,OAEVI,EAAqBjC,SAAA,CAEzBiB,EAACoB,EAAK,CAACC,QAASR,EAAYS,UAAU,KAAQL,IAC9CjB,EAACuB,EAAY,IAAKL,EAAyBnC,SAAG+B,MATzCA"}
+{"version":3,"file":"HeaderLanguageSelect.js","sources":["../../../src/components/header/HeaderLanguageSelect.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState } from 'react';\nimport {\n  Menu,\n  MenuItem,\n  Radio,\n  ListItemText,\n  MenuProps,\n  MenuItemProps,\n  RadioProps,\n  ListItemTextProps,\n} from '@mui/material';\nimport { HeaderButton, HeaderButtonProps } from './HeaderButton';\nimport { GlobeIcon } from '@/src/components/icon/stroke/GlobeIcon';\n\ntype HeaderLanguageType = string | { short?: string; full?: string };\n\nexport interface HeaderLanguageSelectProps extends HeaderButtonProps {\n  /**\n   * List of languages\n   */\n  languages?: HeaderLanguageType[];\n  /**\n   * Index of selected language\n   * @default 0\n   */\n  defaultLanguage?: number;\n  /**\n   * Function that is triggered on language change\n   * @param language - provided language\n   * @param index - index of language\n   */\n  onSelect?: (language: HeaderLanguageType, index: number) => void;\n  /**\n   * Props applied to menu\n   */\n  menuProps?: MenuProps;\n  /**\n   * Props applied to each MenuItem, or a factory receiving the item index and language\n   */\n  menuItemProps?: MenuItemProps | ((index: number, language: HeaderLanguageType) => MenuItemProps);\n  /**\n   * Props applied to Radio inside each MenuItem, or a factory receiving the item index and language\n   */\n  radioProps?: RadioProps | ((index: number, language: HeaderLanguageType) => RadioProps);\n  /**\n   * Props applied to ListItemText inside each MenuItem, or a factory receiving the item index and language\n   */\n  listItemTextProps?: ListItemTextProps | ((index: number, language: HeaderLanguageType) => ListItemTextProps);\n}\n\n/**\n * IconButton with menu selector for languages\n */\nexport const HeaderLanguageSelect: FC<HeaderLanguageSelectProps> = forwardRef(\n  (\n    {\n      children,\n      languages,\n      onSelect,\n      defaultLanguage = 0,\n      menuProps,\n      menuItemProps,\n      radioProps,\n      listItemTextProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const [selected, setSelected] = useState(defaultLanguage);\n\n    return (\n      <>\n        <HeaderButton\n          onClick={(e) => setAnchor(e.currentTarget)}\n          ref={ref}\n          data-testid=\"HeaderLanguageSelect\"\n          {...rest}\n        >\n          {children || <GlobeIcon />}\n        </HeaderButton>\n        <Menu open={!!anchor} anchorEl={anchor} onClose={() => setAnchor(null)} {...menuProps}>\n          {languages?.map((lang, idx) => {\n            const isSelected = selected === idx;\n            const value = typeof lang === 'string' ? lang : lang.full;\n            const resolvedMenuItemProps =\n              typeof menuItemProps === 'function' ? menuItemProps(idx, lang) : menuItemProps;\n            const resolvedRadioProps = typeof radioProps === 'function' ? radioProps(idx, lang) : radioProps;\n            const resolvedListItemTextProps =\n              typeof listItemTextProps === 'function' ? listItemTextProps(idx, lang) : listItemTextProps;\n\n            return (\n              <MenuItem\n                key={value}\n                selected={isSelected}\n                onClick={() => {\n                  onSelect?.(lang, idx);\n                  setSelected(idx);\n                }}\n                {...resolvedMenuItemProps}\n              >\n                <Radio checked={isSelected} tabIndex={-1} {...resolvedRadioProps} />\n                <ListItemText {...resolvedListItemTextProps}>{value}</ListItemText>\n              </MenuItem>\n            );\n          })}\n        </Menu>\n      </>\n    );\n  },\n);\n"],"names":["HeaderLanguageSelect","forwardRef","children","languages","onSelect","defaultLanguage","menuProps","menuItemProps","radioProps","listItemTextProps","rest","ref","anchor","setAnchor","useState","selected","setSelected","_jsxs","_Fragment","_jsx","HeaderButton","onClick","e","currentTarget","GlobeIcon","Menu","open","anchorEl","onClose","map","lang","idx","isSelected","value","full","resolvedMenuItemProps","resolvedRadioProps","resolvedListItemTextProps","MenuItem","Radio","checked","tabIndex","ListItemText"],"mappings":"0SAqDO,MAAMA,EAAsDC,EACjE,EAEIC,WACAC,YACAC,WACAC,kBAAkB,EAClBC,YACAC,gBACAC,aACAC,uBACGC,GAELC,KAEA,MAAOC,EAAQC,GAAaC,EAAS,OAC9BC,EAAUC,GAAeF,EAAST,GAEzC,OACEY,EAAAC,EAAA,CAAAhB,SAAA,CACEiB,EAACC,GACCC,QAAUC,GAAMT,EAAUS,EAAEC,eAC5BZ,IAAKA,gBACO,0BACRD,EAAIR,SAEPA,GAAYiB,EAACK,QAEhBL,EAACM,EAAI,CAACC,OAAQd,EAAQe,SAAUf,EAAQgB,QAAS,IAAMf,EAAU,SAAWP,WACzEH,GAAW0B,IAAI,CAACC,EAAMC,KACrB,MAAMC,EAAajB,IAAagB,EAC1BE,EAAwB,iBAATH,EAAoBA,EAAOA,EAAKI,KAC/CC,EACqB,mBAAlB5B,EAA+BA,EAAcwB,EAAKD,GAAQvB,EAC7D6B,EAA2C,mBAAf5B,EAA4BA,EAAWuB,EAAKD,GAAQtB,EAChF6B,EACyB,mBAAtB5B,EAAmCA,EAAkBsB,EAAKD,GAAQrB,EAE3E,OACEQ,EAACqB,EAAQ,CAEPvB,SAAUiB,EACVX,QAAS,KACPjB,IAAW0B,EAAMC,GACjBf,EAAYe,OAEVI,EAAqBjC,SAAA,CAEzBiB,EAACoB,EAAK,CAACC,QAASR,EAAYS,UAAU,KAAQL,IAC9CjB,EAACuB,EAAY,IAAKL,EAAyBnC,SAAG+B,MATzCA"}

package/components/header/HeaderLogo.js

@@ -1,2 +1,2 @@
-import{jsx as o,Fragment as r}from"react/jsx-runtime";import{forwardRef as i}from"react";import{useTheme as e,Link as s}from"@mui/material";import{Logo as t}from"../logo/Logo.js";import{getFocusRingStyle as l}from"../focusring/focusring.js";import{sxOverride as m}from"../../utils/sxOverride/sxOverride.js";const c=i(({sx:i,children:c,href:n,logoProps:f,...p},a)=>{const u=e();return n||p.onClick?o(s,{sx:m({display:"block",position:"relative",py:1,...l(u),"&.Mui-focusVisible":{boxShadow:"none"},"& .MuiSvgIcon-root":{display:"block"}},i),href:n||"#",ref:a,"aria-label":"Home",...p,children:c||o(t,{...f})}):o(r,{children:c||o(t,{sx:i,ref:a,...f})})});export{c as HeaderLogo};
+import{jsx as o,Fragment as r}from"react/jsx-runtime";import{forwardRef as i}from"react";import{useTheme as e,Link as s}from"@mui/material";import{Logo as n}from"../logo/Logo.js";import{getFocusRingStyle as t}from"../focusring/focusring.js";import{sxOverride as l}from"../../utils/sxOverride/sxOverride.js";const m=i(({sx:i,children:m,href:c,logoProps:f,...p},a)=>{const u=e();return c||p.onClick?o(s,{sx:l({display:"block",position:"relative",py:1,...t(u),"&.Mui-focusVisible":{boxShadow:"none"},"& .MuiSvgIcon-root":{display:"block"}},i),underline:"none",href:c||"#",ref:a,"aria-label":"Home",...p,children:m||o(n,{...f})}):o(r,{children:m||o(n,{sx:i,ref:a,...f})})});export{m as HeaderLogo};
 //# sourceMappingURL=HeaderLogo.js.map

package/components/header/HeaderLogo.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLogo.js","sources":["../../../src/components/header/HeaderLogo.tsx"],"sourcesContent":["import React, { FC, ForwardedRef, forwardRef, ElementType } from 'react';\nimport { Link, LinkProps, useTheme } from '@mui/material';\nimport { Logo, LogoProps } from '@/src/components/logo/Logo';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface HeaderLogoProps extends LinkProps<ElementType> {\n  /**\n   * Properties applied to Logo component\n   */\n  logoProps?: LogoProps;\n}\n\n/**\n * Logo with link wrapper\n */\nexport const HeaderLogo: FC<HeaderLogoProps> = forwardRef(({ sx, children, href, logoProps, ...rest }, ref) => {\n  const theme = useTheme();\n\n  if (href || rest.onClick) {\n    return (\n      <Link\n        sx={sxOverride(\n          {\n            // same style is applied in Header logo wrapper\n            display: 'block',\n            position: 'relative',\n            py: 1,\n            // add proper focus ring\n            ...getFocusRingStyle(theme),\n            // remove default link box shadow\n            '&.Mui-focusVisible': {\n              boxShadow: 'none',\n            },\n            '& .MuiSvgIcon-root': {\n              display: 'block',\n            },\n          },\n          sx,\n        )}\n        href={href || '#'}\n        ref={ref as ForwardedRef<HTMLAnchorElement>}\n        aria-label=\"Home\"\n        {...rest}\n      >\n        {children || <Logo {...logoProps} />}\n      </Link>\n    );\n  }\n  return <>{children || <Logo sx={sx} ref={ref as unknown as ForwardedRef<SVGSVGElement>} {...logoProps} />}</>;\n});\n"],"names":["HeaderLogo","forwardRef","sx","children","href","logoProps","rest","ref","theme","useTheme","onClick","_jsx","Link","sxOverride","display","position","py","getFocusRingStyle","boxShadow","Logo"],"mappings":"yTAgBaA,EAAkCC,EAAW,EAAGC,KAAIC,WAAUC,OAAMC,eAAcC,GAAQC,KACrG,MAAMC,EAAQC,IAEd,OAAIL,GAAQE,EAAKI,QAEbC,EAACC,GACCV,GAAIW,EACF,CAEEC,QAAS,QACTC,SAAU,WACVC,GAAI,KAEDC,EAAkBT,GAErB,qBAAsB,CACpBU,UAAW,QAEb,qBAAsB,CACpBJ,QAAS,UAGbZ,GAEFE,KAAMA,GAAQ,IACdG,IAAKA,EAAsC,aAChC,UACPD,EAAIH,SAEPA,GAAYQ,EAACQ,EAAI,IAAKd,MAItBM,cAAGR,GAAYQ,EAACQ,GAAKjB,GAAIA,EAAIK,IAAKA,KAAmDF"}
+{"version":3,"file":"HeaderLogo.js","sources":["../../../src/components/header/HeaderLogo.tsx"],"sourcesContent":["import React, { FC, ForwardedRef, forwardRef, ElementType } from 'react';\nimport { Link, LinkProps, useTheme } from '@mui/material';\nimport { Logo, LogoProps } from '@/src/components/logo/Logo';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface HeaderLogoProps extends LinkProps<ElementType> {\n  /**\n   * Properties applied to Logo component\n   */\n  logoProps?: LogoProps;\n}\n\n/**\n * Logo with link wrapper\n */\nexport const HeaderLogo: FC<HeaderLogoProps> = forwardRef(({ sx, children, href, logoProps, ...rest }, ref) => {\n  const theme = useTheme();\n\n  if (href || rest.onClick) {\n    return (\n      <Link\n        sx={sxOverride(\n          {\n            // same style is applied in Header logo wrapper\n            display: 'block',\n            position: 'relative',\n            py: 1,\n            // add proper focus ring\n            ...getFocusRingStyle(theme),\n            // remove default link box shadow\n            '&.Mui-focusVisible': {\n              boxShadow: 'none',\n            },\n            '& .MuiSvgIcon-root': {\n              display: 'block',\n            },\n          },\n          sx,\n        )}\n        underline=\"none\"\n        href={href || '#'}\n        ref={ref as ForwardedRef<HTMLAnchorElement>}\n        aria-label=\"Home\"\n        {...rest}\n      >\n        {children || <Logo {...logoProps} />}\n      </Link>\n    );\n  }\n  return <>{children || <Logo sx={sx} ref={ref as unknown as ForwardedRef<SVGSVGElement>} {...logoProps} />}</>;\n});\n"],"names":["HeaderLogo","forwardRef","sx","children","href","logoProps","rest","ref","theme","useTheme","onClick","_jsx","Link","sxOverride","display","position","py","getFocusRingStyle","boxShadow","underline","Logo"],"mappings":"yTAgBaA,EAAkCC,EAAW,EAAGC,KAAIC,WAAUC,OAAMC,eAAcC,GAAQC,KACrG,MAAMC,EAAQC,IAEd,OAAIL,GAAQE,EAAKI,QAEbC,EAACC,GACCV,GAAIW,EACF,CAEEC,QAAS,QACTC,SAAU,WACVC,GAAI,KAEDC,EAAkBT,GAErB,qBAAsB,CACpBU,UAAW,QAEb,qBAAsB,CACpBJ,QAAS,UAGbZ,GAEFiB,UAAU,OACVf,KAAMA,GAAQ,IACdG,IAAKA,EAAsC,aAChC,UACPD,EAAIH,SAEPA,GAAYQ,EAACS,EAAI,IAAKf,MAItBM,cAAGR,GAAYQ,EAACS,GAAKlB,GAAIA,EAAIK,IAAKA,KAAmDF"}

package/components/header/HeaderNavigationHero.js

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

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  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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"}
+{"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';\nimport { useHeaderContext } from './HeaderContext';\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: propExtend,\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 headerContext = useHeaderContext();\n    const extend = propExtend ?? headerContext?.extend;\n    // media query fallback only for standalone usage outside of Header\n    const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n    const mobile = extend === undefined ? downLg : extend;\n    const { sx: 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","propExtend","inContainer","disableBackdrop","onClick","clickAwayListenerProps","contentProps","wrapperProps","containerProps","collapseProps","portalProps","backdropProps","rest","ref","buttonRef","useRef","open","setOpen","useState","theme","useTheme","headerContext","useHeaderContext","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.d.ts

@@ -21,6 +21,7 @@ export interface HeaderNavigationLinkProps extends ButtonBaseProps<ElementType>
     icon?: ReactNode;
     /**
      * Change link into extended mobile version
+     * @default provided by HeaderContext
      */
     extend?: boolean;
     /**

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 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};
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as t,useMemo as i}from"react";import{useTheme as r,ButtonBase as a,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";import{useHeaderContext as x}from"./HeaderContext.js";const g=t(({sx:t,children:g,label:m,icon:u,active:b=!1,external:f=!1,extend:v,labelWrapperProps:y,labelProps:h,selectedLabelProps:k,...L},w)=>{const N=r(),H=x(),j=v??H?.extend,{sx:F,...C}=y??{},{sx:I,...S}=h??{},{sx:P,...W}=k??{},z=i(()=>f?e(s,{}):u,[u,f]);return o(a,{sx:n({...N.typography.list,...void 0===j?{[N.breakpoints.down("lg")]:{...c("body","rtl"===N.direction,"large")}}:[{"&&":{...c("body","rtl"===N.direction,"large")}},{}][+!j],position:"relative",zIndex:"100",display:void 0===j?{xs:"flex",lg:"inline-flex"}:["flex","inline-flex"][+!j],width:void 0===j?{xs:"100%",lg:"auto"}:["100%","auto"][+!j],gap:.5,alignItems:"center",justifyContent:"flex-start",py:void 0===j?{xs:2,lg:1}:[2,1][+!j],px:void 0===j?{xs:1,lg:.5}:[1,.5][+!j],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===j?{xs:"none",lg:'""'}:["none",'""'][+!j],position:"absolute",left:"0",right:"0",bottom:"0",height:"1px",backgroundColor:"transparent",...b&&{height:"2px",backgroundColor:"text.primary"}},"&.Mui-disabled":{color:"disabled.tertiary"},...p({color:"dark"===N.palette.mode?"onSurface.os300":"onSurface.os700","&&:after":{backgroundColor:"transparent"},"& .FlowHeaderNavigationLink-label":{opacity:"1"},"& .FlowHeaderNavigationLink-selectedLabel":{opacity:"0"},...b&&{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(N),"&&:before":{borderRadius:"4px",top:void 0===j?{xs:"0",lg:"2px"}:["0","2px"][+!j],bottom:void 0===j?{xs:"0",lg:"-2px"}:["0","-2px"][+!j]}},t),ref:w,"data-testid":"HeaderNavigationLink",...L,children:[(g||m)&&o(l,{className:"FlowHeaderNavigationLink-labelWrapper",sx:n({display:"inline-flex",alignItems:"center",justifyContent:"center",textAlign:"center",position:"relative"},F),...C,children:[e(l,{className:"FlowHeaderNavigationLink-label",sx:n({position:"absolute",left:void 0===j?{xs:"0",lg:"auto"}:["0","auto"][+!j]},I),...S,children:g||m}),e(l,{className:"FlowHeaderNavigationLink-selectedLabel",sx:n({fontWeight:"700",opacity:"0",position:"relative"},P),"aria-hidden":"true",...W,children:g||m})]}),z]})});export{g 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',\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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"}
+{"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';\nimport { useHeaderContext } from './HeaderContext';\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   * @default provided by HeaderContext\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: propExtend,\n      labelWrapperProps,\n      labelProps,\n      selectedLabelProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const headerContext = useHeaderContext();\n    const extend = propExtend ?? headerContext?.extend;\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","propExtend","labelWrapperProps","labelProps","selectedLabelProps","rest","ref","theme","useTheme","headerContext","useHeaderContext","labelWrapperSx","restLabelWrapper","labelSx","restLabel","selectedLabelSx","restSelectedLabel","linkIcon","useMemo","_jsx","ArrowTopRightIcon","_jsxs","ButtonBase","sxOverride","typography","list","undefined","breakpoints","down","getTypography","direction","position","zIndex","display","xs","lg","width","gap","alignItems","justifyContent","py","px","transition","fontSize","content","left","right","bottom","height","backgroundColor","color","getInteractiveStyle","palette","mode","opacity","getFocusRingStyle","borderRadius","top","Box","className","textAlign","fontWeight"],"mappings":"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"}

package/components/header/HeaderNavigationMenu.js

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