@skodaflow/web-library 7.14.0 → 7.15.0

package/{layout/PageLayout → components/pageLayout}/PageLayout.d.ts

@@ -1,18 +1,12 @@
-import React from 'react';
-export type PageLayoutProps = {
-    /**
-     * Content of an page
-     * @requires
-     */
-    children: React.ReactNode;
+import React, { ElementType } from 'react';
+import { BoxProps } from '@mui/material';
+export interface PageLayoutProps extends BoxProps<ElementType> {
     /**
      * React node that renders layout header
-     * @default undefined
      */
     header?: React.ReactNode;
     /**
      * React node that renders layout footer
-     * @default undefined
      */
     footer?: React.ReactNode;
     /**
@@ -24,7 +18,7 @@ export type PageLayoutProps = {
      */
     headerPosition?: 'static' | 'fixed' | 'slide';
     /**
-     * Specifies threshold that is used to hide header
+     * Specifies threshold that is used to hide header for the headerPosition="slide"
      * @default 250
      */
     headerSlideThreshold?: number;
@@ -33,5 +27,25 @@ export type PageLayoutProps = {
      * @default false
      */
     wrapContent?: boolean;
-};
+    /**
+     * Properties applied to header wrapper
+     */
+    headerProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to header wrapper
+     */
+    headerContainerProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to root header wrapper
+     */
+    headerWrapperProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to page content wrapper
+     */
+    contentProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to footer wrapper
+     */
+    footerProps?: BoxProps<ElementType>;
+}
 export declare const PageLayout: React.FC<PageLayoutProps>;

package/components/pageLayout/PageLayout.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"tslib";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{forwardRef as a,useState as i,useCallback as o}from"react";import{useTheme as s,useScrollTrigger as n,Box as d,Slide as c,Container as h}from"@mui/material";const p=a(((a,p)=>{var{children:l,sx:g,header:m,footer:x,headerPosition:f="static",headerSlideThreshold:b=250,wrapContent:P=!1,headerProps:j,headerContainerProps:u,headerWrapperProps:O,contentProps:w,footerProps:y}=a,C=e(a,["children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps"]);const v=s(),L=null!=O?O:{},{sx:W}=L,z=e(L,["sx"]),B=null!=u?u:{},{sx:H,className:N}=B,S=e(B,["sx","className"]),[T,I]=i(parseFloat(String(v.mixins.toolbar.minHeight))),R=o((e=>{"static"!==f&&e&&new ResizeObserver((()=>{I(e.offsetHeight)})).observe(e)}),["static"!==f]),k=n({target:window,threshold:b});return t(d,Object.assign({sx:Object.assign({position:"relative",minHeight:"100vh",backgroundColor:"surface.primary",display:"grid",gridTemplateRows:[m&&"max-content","auto",x&&"max-content"].filter(Boolean).join(" ")},g),"data-testid":"PageLayout",ref:p},C,{children:[m&&r(d,Object.assign({sx:Object.assign(Object.assign({},"static"!==f&&T&&{height:T}),W),"data-testid":"PageLayout.headerWrapper"},z,{children:r(d,Object.assign({},"slide"===f&&{component:c,appear:!1,direction:"down",in:!k},{sx:Object.assign(Object.assign({},"static"!==f&&{position:"fixed",top:"0",left:"0",right:"0",zIndex:v.zIndex.appBar}),H),className:["static"!==f?"mui-fixed":"",N].filter(Boolean).join(", ")},S,{children:r(d,Object.assign({ref:R,"data-testid":"PageLayout.header"},j,{children:m}))}))})),r(d,Object.assign({},P&&{component:h,maxWidth:"xl"},{"data-testid":"Container"},w,{children:l})),x&&r(d,Object.assign({"data-testid":"PageLayout.footer"},y,{children:x}))]}))}));export{p as PageLayout};
+//# sourceMappingURL=PageLayout.js.map

package/components/pageLayout/PageLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.js","sources":["../../../src/components/pageLayout/PageLayout.tsx"],"sourcesContent":["import React, { useCallback, useState, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, useScrollTrigger, Slide, Container, useTheme } from '@mui/material';\n\nexport interface PageLayoutProps extends BoxProps<ElementType> {\n  /**\n   * React node that renders layout header\n   */\n  header?: React.ReactNode;\n  /**\n   * React node that renders layout footer\n   */\n  footer?: React.ReactNode;\n  /**\n   * Specifies position of header\n   * - static: header is fixed on top of the content\n   * - fixed: header is visible while user scrolls the content\n   * - slide: header is visible until user scrolls down beyond `headerSlideThreshold`, header will reappear when user scrolls up\n   * @default static\n   */\n  headerPosition?: 'static' | 'fixed' | 'slide';\n  /**\n   * Specifies threshold that is used to hide header for the headerPosition=\"slide\"\n   * @default 250\n   */\n  headerSlideThreshold?: number;\n  /**\n   * Specifies if content should be automatically wrapped into container component\n   * @default false\n   */\n  wrapContent?: boolean;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerContainerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to root header wrapper\n   */\n  headerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to page content wrapper\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to footer wrapper\n   */\n  footerProps?: BoxProps<ElementType>;\n}\n\nexport const PageLayout: React.FC<PageLayoutProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      header,\n      footer,\n      headerPosition = 'static',\n      headerSlideThreshold = 250,\n      wrapContent = false,\n      headerProps,\n      headerContainerProps,\n      headerWrapperProps,\n      contentProps,\n      footerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: headerWrapperSx, ...restHeaderWrapper } = headerWrapperProps ?? {};\n    const {\n      sx: headerContainerSx,\n      className: headerContainerClassName,\n      ...restHeaderContainer\n    } = headerContainerProps ?? {};\n    // header height to take actual space in dom for the fixed/slide variants\n    const [headerHeight, setHeaderHeight] = useState<number>(parseFloat(String(theme.mixins.toolbar.minHeight)));\n    const headerContainerRef = useCallback(\n      (element: HTMLElement) => {\n        if (headerPosition === 'static' || !element) {\n          return;\n        }\n        new ResizeObserver(() => {\n          setHeaderHeight(element.offsetHeight);\n        }).observe(element);\n      },\n      [headerPosition !== 'static'],\n    );\n    // trigger hide of the header during scroll\n    const slideTrigger = useScrollTrigger({\n      target: window,\n      threshold: headerSlideThreshold,\n    });\n\n    return (\n      <Box\n        sx={{\n          position: 'relative',\n          minHeight: '100vh',\n          backgroundColor: 'surface.primary',\n          display: 'grid',\n          gridTemplateRows: [header && 'max-content', 'auto', footer && 'max-content'].filter(Boolean).join(' '),\n          ...sx,\n        }}\n        data-testid=\"PageLayout\"\n        ref={ref}\n        {...rest}\n      >\n        {header && (\n          <Box\n            sx={{\n              ...(headerPosition !== 'static' && headerHeight && { height: headerHeight }),\n              ...headerWrapperSx,\n            }}\n            data-testid=\"PageLayout.headerWrapper\"\n            {...restHeaderWrapper}\n          >\n            <Box\n              {...(headerPosition === 'slide' && {\n                component: Slide,\n                appear: false,\n                direction: 'down',\n                in: !slideTrigger,\n              })}\n              sx={{\n                ...(headerPosition !== 'static' && {\n                  position: 'fixed',\n                  top: '0',\n                  left: '0',\n                  right: '0',\n                  zIndex: theme.zIndex.appBar,\n                }),\n                ...headerContainerSx,\n              }}\n              className={[headerPosition !== 'static' ? 'mui-fixed' : '', headerContainerClassName]\n                .filter(Boolean)\n                .join(', ')}\n              {...restHeaderContainer}\n            >\n              <Box ref={headerContainerRef} data-testid=\"PageLayout.header\" {...headerProps}>\n                {header}\n              </Box>\n            </Box>\n          </Box>\n        )}\n        <Box {...(wrapContent && { component: Container, maxWidth: 'xl' })} data-testid=\"Container\" {...contentProps}>\n          {children}\n        </Box>\n        {footer && (\n          <Box data-testid=\"PageLayout.footer\" {...footerProps}>\n            {footer}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["PageLayout","forwardRef","_a","ref","children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps","rest","__rest","theme","useTheme","_b","headerWrapperSx","restHeaderWrapper","_c","headerContainerSx","className","headerContainerClassName","restHeaderContainer","headerHeight","setHeaderHeight","useState","parseFloat","String","mixins","toolbar","minHeight","headerContainerRef","useCallback","element","ResizeObserver","offsetHeight","observe","slideTrigger","useScrollTrigger","target","window","threshold","_jsxs","Box","Object","assign","position","backgroundColor","display","gridTemplateRows","filter","Boolean","join","_jsx","height","component","Slide","appear","direction","in","top","left","right","zIndex","appBar","Container","maxWidth"],"mappings":"qPAoDa,MAAAA,EAAwCC,GACnD,CACEC,EAeAC,KAfA,IAAAC,SACEA,EAAQC,GACRA,EAAEC,OACFA,EAAMC,OACNA,EAAMC,eACNA,EAAiB,SAAQC,qBACzBA,EAAuB,IAAGC,YAC1BA,GAAc,EAAKC,YACnBA,EAAWC,qBACXA,EAAoBC,mBACpBA,EAAkBC,aAClBA,EAAYC,YACZA,GAEDb,EADIc,EAAIC,EAAAf,EAbT,kLAiBA,MAAMgB,EAAQC,IACRC,EAAgDP,QAAAA,EAAsB,IAApER,GAAIgB,GAAkED,EAA9CE,EAA1BL,EAAAG,EAAA,CAAA,OACAG,EAIFX,QAAAA,EAAwB,IAH1BP,GAAImB,EACJC,UAAWC,GAAwBH,EAChCI,EAAmBV,EAAAM,EAHlB,CAIL,KAAA,eAEMK,EAAcC,GAAmBC,EAAiBC,WAAWC,OAAOd,EAAMe,OAAOC,QAAQC,aAC1FC,EAAqBC,GACxBC,IACwB,WAAnB9B,GAAgC8B,GAGpC,IAAIC,gBAAe,KACjBV,EAAgBS,EAAQE,aAAa,IACpCC,QAAQH,EAAQ,GAErB,CAAoB,WAAnB9B,IAGGkC,EAAeC,EAAiB,CACpCC,OAAQC,OACRC,UAAWrC,IAGb,OACEsC,EAACC,iBACC3C,GAAE4C,OAAAC,OAAA,CACAC,SAAU,WACVhB,UAAW,QACXiB,gBAAiB,kBACjBC,QAAS,OACTC,iBAAkB,CAAChD,GAAU,cAAe,OAAQC,GAAU,eAAegD,OAAOC,SAASC,KAAK,MAC/FpD,GAAE,cAEK,aACZF,IAAKA,GACDa,EAEH,CAAAZ,SAAA,CAAAE,GACCoD,EAACV,EACCC,OAAAC,OAAA,CAAA7C,kCACyB,WAAnBG,GAA+BoB,GAAgB,CAAE+B,OAAQ/B,IAC1DP,GAEO,cAAA,4BACRC,EAAiB,CAAAlB,SAErBsD,EAACV,EAAGC,OAAAC,OAAA,CAAA,EACsB,UAAnB1C,GAA8B,CACjCoD,UAAWC,EACXC,QAAQ,EACRC,UAAW,OACXC,IAAKtB,IAEPrC,GAAE4C,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACuB,WAAnB1C,GAA+B,CACjC2C,SAAU,QACVc,IAAK,IACLC,KAAM,IACNC,MAAO,IACPC,OAAQlD,EAAMkD,OAAOC,SAEpB7C,GAELC,UAAW,CAAoB,WAAnBjB,EAA8B,YAAc,GAAIkB,GACzD6B,OAAOC,SACPC,KAAK,OACJ9B,EAAmB,CAAAvB,SAEvBsD,EAACV,EAAIC,OAAAC,OAAA,CAAA/C,IAAKiC,EAAgC,cAAA,qBAAwBzB,EAC/D,CAAAP,SAAAE,WAKToD,EAACV,EAAGC,OAAAC,OAAA,CAAA,EAAMxC,GAAe,CAAEkD,UAAWU,EAAWC,SAAU,MAAqB,CAAA,cAAA,aAAgBzD,EAC7F,CAAAV,SAAAA,KAEFG,GACCmD,EAACV,EAAGC,OAAAC,OAAA,CAAA,cAAa,qBAAwBnC,EAAW,CAAAX,SACjDG,QAGD"}

package/components/pagination/pagination.d.ts

@@ -1,90 +1,43 @@
-import { SxProps, Theme } from '@mui/material';
-import React, { HTMLAttributes } from 'react';
-export interface PaginationProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'color' | 'size'> {
-    /**
-     *  The total number of pages.
-     */
-    count?: number;
-    /**
-       The page selected by default
-       */
-    defaultPage?: number;
+import { PaginationProps as MuiPaginationProps } from '@mui/material';
+import React from 'react';
+export interface PaginationProps extends MuiPaginationProps {
     /**
      *  If true, a pagination will be disabled.
+     *  @deprecated It is recommended to use `disabled` prop instead of `isDisabled`
      */
     isDisabled?: boolean;
-    /**
-     *  Set the current page number controlled from outside.
-     */
-    page?: number;
     /**
      *  The label for previous button.
-     *  @deprecated Previous button label not used by design, will be deleted in future versions
+     *  @deprecated No longer used, property has no effect
      */
     prevButtonLabel?: string;
     /**
      *  The label for next button.
-     *  @deprecated Previous button label not used by design, will be deleted in future versions
+     *  @deprecated No longer used, property has no effect
      */
     nextButtonLabel?: string;
-    /**
-     * If true, hide the next-page button.
-     */
-    hideNextButton?: boolean;
-    /**
-     * If true, hide the previous-page button.
-     */
-    hidePrevButton?: boolean;
     /**
      * If true, hide the first-page button.
+     * @deprecated Use showFirstButton instead
      */
     hideFirstButton?: boolean;
     /**
      * If true, hide the last-page button.
+     * @deprecated Use showLastButton instead
      */
     hideLastButton?: boolean;
-    /**
-     * Number of always visible pages at the beginning and end.
-     */
-    boundaryCount?: number;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: object;
-    /**
-     *	Accepts a function which returns a string value that provides a user-friendly name for the current page.
-     */
-    getItemAriaLabel?: (type: string, page: number, selected: boolean) => string;
-    /**
-     * If true, show the first-page button.
-     * @deprecated showFirstButton not working and is deprecated  as first-button should be visible by default according to design. Use hideFirstButton property instead.
-     */
-    showFirstButton?: boolean;
-    /**
-     * If true, show the last-page button.
-     * @deprecated showLastButton not working and is deprecated  as last-button should be visible by default according to design. Use hideLastButton property instead.
-     */
-    showLastButton?: boolean;
-    /**
-     * Number of always visible pages before and after the current page.
-     */
-    siblingCount?: number;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * On click callback.
-     */
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
      * enable or disable direction label. mobile only
-     * @deprecated hideLabels not used by design, will be deleted in future versions
+     * @deprecated No longer used, property has no effect
      */
     hideLabels?: boolean;
     /**
      * callback for value change handling. takes the new value as its only parameter
+     * @deprecated provide the callback in the onChange function
      **/
     onValueChange?: (payload: number) => void;
 }
-export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * @mui Pagination that contain props parser for the previous implementation
+ */
+export declare const Pagination: React.ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/components/pagination/pagination.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as t,jsx as i,Fragment as n}from"react/jsx-runtime";import{styled as o,Pagination as a,PaginationItem as r,TextField as l,IconButton as s}from"@mui/material";import{forwardRef as p,useState as d,useEffect as c,useCallback as m}from"react";import{ternaryCondition as u}from"../../utils/utilities.js";import{Icon as h}from"../icon/icon.js";import"../icon/icon.definitions.js";const x=(e,t)=>""===e||"number"==typeof e&&e-1>0&&e+1<=t||"number"==typeof parseInt(e)&&parseInt(e)>0&&parseInt(e)<=t,f=(e,n,o,a,r,l)=>t(s,{"aria-label":"Navigate",variant:"standard",onClick:n,disabled:o,children:["forward"===a&&!r&&l,i(h,{name:e}),"back"===a&&!r&&l]}),g=p(((o,s)=>{var{count:p,isDisabled:g,page:v,prevButtonLabel:B,nextButtonLabel:y,defaultPage:w,hideNextButton:L,hidePrevButton:C,hideFirstButton:I,hideLastButton:j,hideLabels:k,onValueChange:N}=o,P=e(o,["count","isDisabled","page","prevButtonLabel","nextButtonLabel","defaultPage","hideNextButton","hidePrevButton","hideFirstButton","hideLastButton","hideLabels","onValueChange"]);const z=w||1,[M,S]=d(z),[V,W]=d(!0),[D,O]=d();c((()=>{M&&N&&N(M)}),[M,N]),c((()=>{V?W(!1):v&&!g&&S(v)}),[g,V,v]);const F=m(((e,t)=>{S(t)}),[]);return t(b,{"data-testid":"Pagination-wrapper",children:[i(a,Object.assign({className:"desktopView"},P,{shape:"rounded",count:p,disabled:g,page:M,hideNextButton:L,hidePrevButton:C,showFirstButton:!I,showLastButton:!j,ref:s,onChange:F,renderItem:e=>i(r,Object.assign({className:u(C,!1,"MuiPagination-prev",""),components:{first:()=>i(h,{name:"previous",fontSize:"small"}),last:()=>i(h,{name:"next",fontSize:"small"}),previous:()=>t(n,{children:[i(h,{name:"chevron-left",fontSize:"small"}),i(n,{children:B})]}),next:()=>t(n,{children:[i(n,{children:y}),i(h,{name:"chevron-right",fontSize:"small"})]})}},e))}))," ",i("div",{style:{display:"flex",flexDirection:"column"},className:"mobileView "+(g?"paginationDisabled":""),children:t("div",{className:"mobileContainer",children:[f("chevron-previous",(()=>x(M-1,p)&&S(1)),!x(M-1,p)),f("chevron-left",(()=>x(M-1,p)&&S(M-1)),!x(M-1,p),"back",k,B),i(l,{className:"textFieldContainer",value:M,inputProps:{inputMode:"numeric",pattern:`[1-${p}]*`},onChange:e=>(e=>{""===e&&(O(M),S(e));const t=parseInt(e);"number"==typeof t&&x(t,p)&&(O(t),S(t))})(e.target.value),onBlur:()=>""===M&&S(D)}),f("chevron-right",(()=>x(M+1,p)&&S(M+1)),!x(M+1,p),"forward",k,y),f("chevron-next",(()=>x(M+1,p)&&S(p)),!x(M+1,p))]})})]})})),b=o("div")((({theme:e})=>{let t={};const i={alignItems:"center",display:"flex",justifyContent:"center",width:"100%"};return t={[e.breakpoints.up("md")]:{"& .mobileView":{display:"none!important"}},[e.breakpoints.down("md")]:{"& .desktopView":{display:"none!important"}},"& .desktopView":{"& .MuiButton-startIcon":{marginRight:"8px",display:"inline-flex"},"& .MuiButton-endIcon":{marginLeft:"8px",display:"inline-flex"}},"& .mobileView":Object.assign(Object.assign({},i),{flexDirection:"column",flexWrap:"nowrap","& .mobileContainer":Object.assign(Object.assign({},i),{flexWrap:"nowrap"}),"& .textFieldContainer":{height:"36px",margin:"0 34px","& input, fieldset":{backgroundColor:e.palette.transparent.primary,border:0,borderRadius:"4px",fontSize:"16px",fontWeight:"400",height:"36px",lineHeight:"36px",minWidth:"44px",maxWidth:"50px",padding:"0 4px",textAlign:"center",color:e.palette.text.primary},"& fieldset":{visibility:"hidden"},"& div":{"&::before":{borderBottom:0},"&::after":{borderBottom:0}}},"& .controllerContainer":{"& .arrowLabel":{color:e.palette.text.primary,fontSize:"16px",fontWeight:"400",lineHeight:"16px"},"& .MuiButton-startIcon":{marginRight:"8px",display:"inline-flex"},"& .MuiButton-endIcon":{marginLeft:"8px",display:"inline-flex"},"& .MuiIcon-root":{fontSize:"16px",width:"20px",height:"20px"}},"& .counter_label":{color:e.palette.text.primary,fontSize:"12px",fontWeight:"400",lineHeight:"24px",marginTop:"4px"},"&.paginationDisabled":{pointerEvents:"none","& .counter_label, .MuiIcon-root,.arrowLabel, input, fieldset":{color:e.palette.disabled.primary}}})},t}));export{g as Pagination};
+import{__rest as t}from"tslib";import{jsx as e}from"react/jsx-runtime";import{Pagination as o}from"@mui/material";import{forwardRef as a}from"react";const n=a(((a,n)=>{var{isDisabled:s,page:i,hideFirstButton:r,hideLastButton:u,showFirstButton:l,showLastButton:h,hideLabels:d,onValueChange:B,disabled:b,onChange:m,prevButtonLabel:L,nextButtonLabel:g}=a,p=t(a,["isDisabled","page","hideFirstButton","hideLastButton","showFirstButton","showLastButton","hideLabels","onValueChange","disabled","onChange","prevButtonLabel","nextButtonLabel"]);return e(o,Object.assign({},p,{ref:n,disabled:b||s,page:i&&m?i:void 0,onChange:(t,e)=>{null==m||m(t,e),null==B||B(e)},showFirstButton:l||!r,showLastButton:h||!u}))}));export{n as Pagination};
 //# sourceMappingURL=pagination.js.map

package/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n  SxProps,\n  Theme,\n  styled,\n  Pagination as MuiPagination,\n  PaginationItem as MuiPaginationItem,\n  TextField,\n  IconButton,\n} from '@mui/material';\nimport React, { HTMLAttributes, forwardRef, useCallback, useEffect, useState } from 'react';\nimport { ternaryCondition } from '../../utils/utilities';\nimport { Icon, IconNameProp } from '../icon';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'color' | 'size'> {\n  /**\n   *  The total number of pages.\n   */\n  count?: number;\n\n  /**\n\t The page selected by default\n\t */\n  defaultPage?: number;\n\n  /**\n   *  If true, a pagination will be disabled.\n   */\n\n  isDisabled?: boolean;\n\n  /**\n   *  Set the current page number controlled from outside.\n   */\n\n  page?: number;\n  /**\n   *  The label for previous button.\n   *  @deprecated Previous button label not used by design, will be deleted in future versions\n   */\n  prevButtonLabel?: string;\n\n  /**\n   *  The label for next button.\n   *  @deprecated Previous button label not used by design, will be deleted in future versions\n   */\n  nextButtonLabel?: string;\n  /**\n   * If true, hide the next-page button.\n   */\n  hideNextButton?: boolean;\n\n  /**\n   * If true, hide the previous-page button.\n   */\n  hidePrevButton?: boolean;\n\n  /**\n   * If true, hide the first-page button.\n   */\n  hideFirstButton?: boolean;\n\n  /**\n   * If true, hide the last-page button.\n   */\n  hideLastButton?: boolean;\n\n  /**\n   * Number of always visible pages at the beginning and end.\n   */\n  boundaryCount?: number;\n  /**\n   * Override or extend the styles applied to the component.\n   */\n  classes?: object;\n  /**\n   *\tAccepts a function which returns a string value that provides a user-friendly name for the current page.\n   */\n  getItemAriaLabel?: (type: string, page: number, selected: boolean) => string;\n  /**\n   * If true, show the first-page button.\n   * @deprecated showFirstButton not working and is deprecated  as first-button should be visible by default according to design. Use hideFirstButton property instead.\n   */\n  showFirstButton?: boolean;\n  /**\n   * If true, show the last-page button.\n   * @deprecated showLastButton not working and is deprecated  as last-button should be visible by default according to design. Use hideLastButton property instead.\n   */\n  showLastButton?: boolean;\n  /**\n   * Number of always visible pages before and after the current page.\n   */\n  siblingCount?: number;\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   * On click callback.\n   */\n  onClick?: (e: React.MouseEvent<HTMLElement>) => void;\n  /**\n   * enable or disable direction label. mobile only\n   * @deprecated hideLabels not used by design, will be deleted in future versions\n   */\n  hideLabels?: boolean;\n  /**\n   * callback for value change handling. takes the new value as its only parameter\n   **/\n  onValueChange?: (payload: number) => void;\n}\n\n/**\n * @description SkodaFlow Pagination component.\n * Properties are inherited from HTML div Attribetes element.\n * @param props PaginationProps\n * @returns React Functional Component\n */\n\nconst isPageNumberValid = (pageNumber: any, count: number) => {\n  return (\n    pageNumber === '' ||\n    (typeof pageNumber === 'number' && pageNumber - 1 > 0 && pageNumber + 1 <= count) ||\n    (typeof parseInt(pageNumber) === 'number' && parseInt(pageNumber) > 0 && parseInt(pageNumber) <= count)\n  );\n};\n\nconst mobileIconButton = (\n  muiIcon: IconNameProp,\n  onClick: () => void,\n  disabled?: boolean,\n  direction?: 'forward' | 'back',\n  hideLabel?: boolean,\n  label?: string,\n) => (\n  <IconButton aria-label=\"Navigate\" variant=\"standard\" onClick={onClick} disabled={disabled}>\n    {direction === 'forward' && !hideLabel && label}\n    <Icon name={muiIcon}></Icon>\n    {direction === 'back' && !hideLabel && label}\n  </IconButton>\n);\n\nexport const Pagination = forwardRef<HTMLDivElement, PaginationProps>(\n  (\n    {\n      count,\n      isDisabled,\n      page,\n      prevButtonLabel,\n      nextButtonLabel,\n      defaultPage,\n      hideNextButton,\n      hidePrevButton,\n      hideFirstButton,\n      hideLastButton,\n      hideLabels,\n      onValueChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const initialPage = defaultPage || 1;\n    const [currentPageNumber, setCurrentPageNumber] = useState<any>(initialPage);\n    const [isFirstMount, setIsFirstMount] = useState(true);\n    const [prevStatePageNumber, setPrevStatePageNumber] = useState<any>();\n\n    useEffect(() => {\n      currentPageNumber && onValueChange && onValueChange(currentPageNumber);\n    }, [currentPageNumber, onValueChange]);\n\n    useEffect(() => {\n      isFirstMount ? setIsFirstMount(false) : page && !isDisabled && setCurrentPageNumber(page);\n    }, [isDisabled, isFirstMount, page]);\n\n    const handleChange = useCallback((event: React.ChangeEvent<unknown>, pageNumber: number) => {\n      setCurrentPageNumber(pageNumber);\n    }, []);\n\n    const handleValueChange = (payload: string) => {\n      if (payload === '') {\n        setPrevStatePageNumber(currentPageNumber);\n        setCurrentPageNumber(payload);\n      }\n      const castToNum = parseInt(payload);\n      if (typeof castToNum === 'number' && isPageNumberValid(castToNum, count)) {\n        setPrevStatePageNumber(castToNum);\n        setCurrentPageNumber(castToNum);\n      }\n    };\n\n    const mobilePagination = () => (\n      <div\n        style={{ display: 'flex', flexDirection: 'column' }}\n        className={`mobileView ${isDisabled ? 'paginationDisabled' : ''}`}\n      >\n        <div className=\"mobileContainer\">\n          {mobileIconButton(\n            'chevron-previous',\n            () => isPageNumberValid(currentPageNumber - 1, count) && setCurrentPageNumber(1),\n            !isPageNumberValid(currentPageNumber - 1, count),\n          )}\n          {mobileIconButton(\n            'chevron-left',\n            () => isPageNumberValid(currentPageNumber - 1, count) && setCurrentPageNumber(currentPageNumber - 1),\n            !isPageNumberValid(currentPageNumber - 1, count),\n            'back',\n            hideLabels,\n            prevButtonLabel,\n          )}\n          <TextField\n            className=\"textFieldContainer\"\n            value={currentPageNumber}\n            inputProps={{ inputMode: 'numeric', pattern: `[1-${count}]*` }}\n            onChange={(val: any) => handleValueChange(val.target.value)}\n            onBlur={() => currentPageNumber === '' && setCurrentPageNumber(prevStatePageNumber)}\n          />\n          {mobileIconButton(\n            'chevron-right',\n            () => isPageNumberValid(currentPageNumber + 1, count) && setCurrentPageNumber(currentPageNumber + 1),\n            !isPageNumberValid(currentPageNumber + 1, count),\n            'forward',\n            hideLabels,\n            nextButtonLabel,\n          )}\n          {mobileIconButton(\n            'chevron-next',\n            () => isPageNumberValid(currentPageNumber + 1, count) && setCurrentPageNumber(count),\n            !isPageNumberValid(currentPageNumber + 1, count),\n          )}\n        </div>\n      </div>\n    );\n\n    const desktopPagination = () => (\n      <MuiPagination\n        className=\"desktopView\"\n        {...props}\n        shape=\"rounded\"\n        count={count}\n        disabled={isDisabled}\n        page={currentPageNumber}\n        hideNextButton={hideNextButton}\n        hidePrevButton={hidePrevButton}\n        showFirstButton={!hideFirstButton}\n        showLastButton={!hideLastButton}\n        ref={ref}\n        onChange={handleChange}\n        renderItem={(item) => (\n          <MuiPaginationItem\n            className={ternaryCondition(hidePrevButton, false, 'MuiPagination-prev', '')}\n            components={{\n              first: () => <Icon name=\"previous\" fontSize=\"small\" />,\n              last: () => <Icon name=\"next\" fontSize=\"small\" />,\n              previous: () => (\n                <>\n                  <Icon name=\"chevron-left\" fontSize=\"small\" />\n                  <>{prevButtonLabel}</>\n                </>\n              ),\n              next: () => (\n                <>\n                  <>{nextButtonLabel}</>\n                  <Icon name=\"chevron-right\" fontSize=\"small\" />\n                </>\n              ),\n            }}\n            {...item}\n          />\n        )}\n      />\n    );\n\n    return (\n      <PaginationStyled data-testid=\"Pagination-wrapper\">\n        {desktopPagination()} {mobilePagination()}\n      </PaginationStyled>\n    );\n  },\n);\n\n/**\n * @description Pagination styling definition based on props\n */\nconst PaginationStyled = styled('div')<{ theme?: any }>(({ theme }) => {\n  let style = {};\n  const flexStyle = {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n    width: '100%',\n  };\n\n  style = {\n    [theme.breakpoints.up('md')]: {\n      '& .mobileView': {\n        display: 'none!important',\n      },\n    },\n    [theme.breakpoints.down('md')]: {\n      '& .desktopView': {\n        display: 'none!important',\n      },\n    },\n    '& .desktopView': {\n      '& .MuiButton-startIcon': {\n        marginRight: '8px',\n        display: 'inline-flex',\n      },\n      '& .MuiButton-endIcon': {\n        marginLeft: '8px',\n        display: 'inline-flex',\n      },\n    },\n    '& .mobileView': {\n      ...flexStyle,\n      flexDirection: 'column',\n      flexWrap: 'nowrap',\n      '& .mobileContainer': {\n        ...flexStyle,\n        flexWrap: 'nowrap',\n      },\n      '& .textFieldContainer': {\n        height: '36px',\n        margin: '0 34px',\n        '& input, fieldset': {\n          backgroundColor: theme.palette.transparent.primary,\n          border: 0,\n          borderRadius: '4px',\n          fontSize: '16px',\n          fontWeight: '400',\n          height: '36px',\n          lineHeight: '36px',\n          minWidth: '44px',\n          maxWidth: '50px',\n          padding: '0 4px',\n          textAlign: 'center',\n          color: theme.palette.text.primary,\n        },\n        '& fieldset': {\n          visibility: 'hidden',\n        },\n        '& div': {\n          '&::before': {\n            borderBottom: 0,\n          },\n          '&::after': {\n            borderBottom: 0,\n          },\n        },\n      },\n      '& .controllerContainer': {\n        '& .arrowLabel': {\n          color: theme.palette.text.primary,\n          fontSize: '16px',\n          fontWeight: '400',\n          lineHeight: '16px',\n        },\n        '& .MuiButton-startIcon': {\n          marginRight: '8px',\n          display: 'inline-flex',\n        },\n        '& .MuiButton-endIcon': {\n          marginLeft: '8px',\n          display: 'inline-flex',\n        },\n        '& .MuiIcon-root': {\n          fontSize: '16px',\n          width: '20px',\n          height: '20px',\n        },\n      },\n      '& .counter_label': {\n        color: theme.palette.text.primary,\n        fontSize: '12px',\n        fontWeight: '400',\n        lineHeight: '24px',\n        marginTop: '4px',\n      },\n      '&.paginationDisabled': {\n        pointerEvents: 'none',\n        '& .counter_label, .MuiIcon-root,.arrowLabel, input, fieldset': {\n          color: theme.palette.disabled.primary,\n        },\n      },\n    },\n  };\n\n  return style;\n});\n"],"names":["isPageNumberValid","pageNumber","count","parseInt","mobileIconButton","muiIcon","onClick","disabled","direction","hideLabel","label","_jsxs","IconButton","variant","children","_jsx","Icon","name","Pagination","forwardRef","_a","ref","isDisabled","page","prevButtonLabel","nextButtonLabel","defaultPage","hideNextButton","hidePrevButton","hideFirstButton","hideLastButton","hideLabels","onValueChange","props","__rest","initialPage","currentPageNumber","setCurrentPageNumber","useState","isFirstMount","setIsFirstMount","prevStatePageNumber","setPrevStatePageNumber","useEffect","handleChange","useCallback","event","PaginationStyled","MuiPagination","Object","assign","className","shape","showFirstButton","showLastButton","onChange","renderItem","item","MuiPaginationItem","ternaryCondition","components","first","fontSize","last","previous","_Fragment","next","style","display","flexDirection","TextField","value","inputProps","inputMode","pattern","val","payload","castToNum","handleValueChange","target","onBlur","styled","theme","flexStyle","alignItems","justifyContent","width","breakpoints","up","down","marginRight","marginLeft","flexWrap","height","margin","backgroundColor","palette","transparent","primary","border","borderRadius","fontWeight","lineHeight","minWidth","maxWidth","padding","textAlign","color","text","visibility","borderBottom","marginTop","pointerEvents"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { Pagination as MuiPagination, PaginationProps as MuiPaginationProps } from '@mui/material';\nimport React, { forwardRef } from 'react';\n\nexport interface PaginationProps extends MuiPaginationProps {\n  /**\n   *  If true, a pagination will be disabled.\n   *  @deprecated It is recommended to use `disabled` prop instead of `isDisabled`\n   */\n  isDisabled?: boolean;\n\n  /**\n   *  The label for previous button.\n   *  @deprecated No longer used, property has no effect\n   */\n  prevButtonLabel?: string;\n\n  /**\n   *  The label for next button.\n   *  @deprecated No longer used, property has no effect\n   */\n  nextButtonLabel?: string;\n\n  /**\n   * If true, hide the first-page button.\n   * @deprecated Use showFirstButton instead\n   */\n  hideFirstButton?: boolean;\n\n  /**\n   * If true, hide the last-page button.\n   * @deprecated Use showLastButton instead\n   */\n  hideLastButton?: boolean;\n\n  /**\n   * enable or disable direction label. mobile only\n   * @deprecated No longer used, property has no effect\n   */\n  hideLabels?: boolean;\n\n  /**\n   * callback for value change handling. takes the new value as its only parameter\n   * @deprecated provide the callback in the onChange function\n   **/\n  onValueChange?: (payload: number) => void;\n}\n\n/**\n * @mui Pagination that contain props parser for the previous implementation\n */\nexport const Pagination = forwardRef<HTMLDivElement, PaginationProps>(\n  (\n    {\n      isDisabled,\n      page,\n      hideFirstButton,\n      hideLastButton,\n      showFirstButton,\n      showLastButton,\n      hideLabels: _,\n      onValueChange,\n      disabled,\n      onChange,\n      prevButtonLabel: __,\n      nextButtonLabel: ___,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <MuiPagination\n        {...rest}\n        ref={ref}\n        disabled={disabled || isDisabled}\n        page={page && onChange ? page : undefined}\n        onChange={(e, newPage) => {\n          onChange?.(e, newPage);\n          onValueChange?.(newPage);\n        }}\n        showFirstButton={showFirstButton || !hideFirstButton}\n        showLastButton={showLastButton || !hideLastButton}\n      />\n    );\n  },\n);\n"],"names":["Pagination","forwardRef","_a","ref","isDisabled","page","hideFirstButton","hideLastButton","showFirstButton","showLastButton","hideLabels","_","onValueChange","disabled","onChange","prevButtonLabel","__","nextButtonLabel","___","rest","__rest","_jsx","MuiPagination","Object","assign","undefined","e","newPage"],"mappings":"qJAkDa,MAAAA,EAAaC,GACxB,CACEC,EAeAC,KAfA,IAAAC,WACEA,EAAUC,KACVA,EAAIC,gBACJA,EAAeC,eACfA,EAAcC,gBACdA,EAAeC,eACfA,EACAC,WAAYC,EAACC,cACbA,EAAaC,SACbA,EAAQC,SACRA,EACAC,gBAAiBC,EACjBC,gBAAiBC,GAElBhB,EADIiB,EAAIC,EAAAlB,EAbT,oLAiBA,OACEmB,EAACC,EACKC,OAAAC,OAAA,CAAA,EAAAL,GACJhB,IAAKA,EACLU,SAAUA,GAAYT,EACtBC,KAAMA,GAAQS,EAAWT,OAAOoB,EAChCX,SAAU,CAACY,EAAGC,KACZb,SAAAA,EAAWY,EAAGC,GACdf,SAAAA,EAAgBe,EAAQ,EAE1BnB,gBAAiBA,IAAoBF,EACrCG,eAAgBA,IAAmBF,IACnC"}

package/components/secondaryNavigation/SecondaryNavigation.d.ts

@@ -0,0 +1,51 @@
+import { FC, ReactNode, ElementType } from 'react';
+import { AppBarProps, TabsProps, BoxProps, ToolbarProps, TypographyProps } from '@mui/material';
+export interface SecondaryNavigationProps extends Omit<AppBarProps, 'color' | 'title'> {
+    /**
+     * Headline
+     */
+    title?: ReactNode;
+    /**
+     * Items in the menu
+     * @deprecated place links directly as children
+     */
+    navigationItems?: ReactNode;
+    /**
+     * @deprecated no longer has any effect
+     */
+    color?: 'light' | 'dark';
+    /**
+     * Wrap the navigation into container
+     * @default false
+     */
+    inContainer?: boolean;
+    /**
+     * ActionButtons on the right side
+     */
+    buttons?: ReactNode;
+    /**
+     * ActionButtons on the right side
+     * @deprecated rename property to buttons
+     */
+    cta?: ReactNode;
+    /**
+     * Properties applied to toolbar container
+     */
+    toolbarProps?: ToolbarProps<ElementType>;
+    /**
+     * Properties applied to title
+     */
+    titleProps?: TypographyProps<ElementType>;
+    /**
+     * Properties applied to content wrapper
+     */
+    contentProps?: TabsProps;
+    /**
+     * Properties applied to button wrapper
+     */
+    buttonsProps?: BoxProps<ElementType>;
+}
+/**
+ * Additional navigation intended to be shown bellow the Header
+ */
+export declare const SecondaryNavigation: FC<SecondaryNavigationProps>;

package/components/secondaryNavigation/SecondaryNavigation.js

@@ -0,0 +1,2 @@
+import{__rest as t}from"tslib";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{forwardRef as s,useState as a,useMemo as i,Children as o,Fragment as r}from"react";import{AppBar as l,Toolbar as c,Typography as g,Tabs as x,Box as d}from"@mui/material";const p=s(((s,p)=>{var{children:u,sx:b,title:f,navigationItems:m,cta:v,buttons:h,color:j,inContainer:O=!1,toolbarProps:y,titleProps:S,contentProps:P,buttonsProps:w}=s,N=t(s,["children","sx","title","navigationItems","cta","buttons","color","inContainer","toolbarProps","titleProps","contentProps","buttonsProps"]);const C=null!=S?S:{},{sx:I}=C,G=t(C,["sx"]),k=null!=y?y:{},{sx:B}=k,z=t(k,["sx"]),A=null!=P?P:{},{sx:E}=A,T=t(A,["sx"]),W=null!=w?w:{},{sx:q}=W,D=t(W,["sx"]),[F,H]=a(0),J=i((()=>function t(e){const n=[];return o.forEach(e,((e,s)=>{var a;(null==e?void 0:e.type)===r?n.push(...t(e.props.children)):(n.push(e),(null===(a=e.props)||void 0===a?void 0:a.isActive)&&H(s))})),n}(u||m)),[u,m]);return e(l,Object.assign({sx:Object.assign({zIndex:t=>t.zIndex.appBar-20},b),ref:p,"data-testid":"SecondaryNavigation","aria-label":"Secondary Navigation",role:"group"},N,{children:n(c,Object.assign({sx:Object.assign(Object.assign({},!!(null==J?void 0:J.length)&&{flexWrap:{xs:"wrap",lg:"nowrap"},pt:{xs:2,lg:0}}),B),disableGutters:!O,"data-testid":"SecondaryNavigation.wrapper"},z,{children:[f&&e(g,Object.assign({"data-testid":"SecondaryNavigation.title",variant:"subheadline",sx:Object.assign({display:"block",flexGrow:{xs:"1",lg:"0"},flexShrink:"0"},I)},G,{children:f})),!!(null==J?void 0:J.length)&&e(x,Object.assign({value:F,onChange:(t,e)=>H(e),template:"navigation",sx:Object.assign(Object.assign(Object.assign({flexGrow:"1",flexBasis:{xs:"100%",lg:"auto"},order:{xs:"3",lg:"0"},justifyContent:{xs:"center",lg:"flex-start"},alignSelf:{xs:"flex-end",lg:"center"}},f&&{pl:{lg:4}}),{marginTop:{xs:"-10px",lg:"0"},marginBottom:"-1px"}),E),"data-testid":"SecondaryNavigation.items"},T,{children:J})),(h||v)&&e(d,Object.assign({sx:Object.assign({flexShrink:"0",flexGrow:"1",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:.25},q),"data-testid":"SecondaryNavigation.cta"},D,{children:h||v}))]}))}))}));export{p as SecondaryNavigation};
+//# sourceMappingURL=SecondaryNavigation.js.map

package/components/secondaryNavigation/SecondaryNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryNavigation.js","sources":["../../../src/components/secondaryNavigation/SecondaryNavigation.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, ElementType, Fragment, useMemo, useState, Children } from 'react';\nimport {\n  AppBar,\n  AppBarProps,\n  Tabs,\n  TabsProps,\n  Box,\n  BoxProps,\n  Toolbar,\n  ToolbarProps,\n  Typography,\n  TypographyProps,\n} from '@mui/material';\n\nexport interface SecondaryNavigationProps extends Omit<AppBarProps, 'color' | 'title'> {\n  /**\n   * Headline\n   */\n  title?: ReactNode;\n  /**\n   * Items in the menu\n   * @deprecated place links directly as children\n   */\n  navigationItems?: ReactNode;\n  /**\n   * @deprecated no longer has any effect\n   */\n  color?: 'light' | 'dark';\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\n   * @deprecated rename property to buttons\n   */\n  cta?: ReactNode;\n  /**\n   * Properties applied to toolbar container\n   */\n  toolbarProps?: ToolbarProps<ElementType>;\n  /**\n   * Properties applied to title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Properties applied to content wrapper\n   */\n  contentProps?: TabsProps;\n  /**\n   * Properties applied to button wrapper\n   */\n  buttonsProps?: BoxProps<ElementType>;\n}\n\n/**\n * Additional navigation intended to be shown bellow the Header\n */\nexport const SecondaryNavigation: FC<SecondaryNavigationProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      title,\n      navigationItems,\n      cta,\n      buttons,\n      color: __,\n      inContainer = false,\n      toolbarProps,\n      titleProps,\n      contentProps,\n      buttonsProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n    const { sx: toolbarSx, ...restToolbar } = toolbarProps ?? {};\n    const { sx: contentSx, ...restContent } = contentProps ?? {};\n    const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n    const [activeNav, setActiveNav] = useState(0);\n\n    /**\n     * Process children/navigationItems and remove any React.Fragments as Tabs requires direct elements\n     */\n    const navigation = useMemo(() => {\n      function flatten(nodes) {\n        const result = [];\n        Children.forEach(nodes, (child, idx) => {\n          if (child?.type === Fragment) {\n            result.push(...flatten(child.props.children));\n          } else {\n            result.push(child);\n            // backward compatible api\n            if (child.props?.isActive) {\n              setActiveNav(idx);\n            }\n          }\n        });\n        return result;\n      }\n      return flatten(children || navigationItems);\n    }, [children, navigationItems]);\n\n    return (\n      <AppBar\n        sx={{\n          // bellow Header, also defined in appbar.theme.ts\n          zIndex: (theme) => theme.zIndex.appBar - 20,\n          ...sx,\n        }}\n        ref={ref}\n        data-testid=\"SecondaryNavigation\"\n        aria-label=\"Secondary Navigation\"\n        role=\"group\"\n        {...rest}\n      >\n        <Toolbar\n          sx={{\n            ...(!!navigation?.length && {\n              flexWrap: { xs: 'wrap', lg: 'nowrap' },\n              pt: { xs: 2, lg: 0 },\n            }),\n            ...toolbarSx,\n          }}\n          disableGutters={!inContainer}\n          data-testid=\"SecondaryNavigation.wrapper\"\n          {...restToolbar}\n        >\n          {title && (\n            <Typography\n              data-testid=\"SecondaryNavigation.title\"\n              variant=\"subheadline\"\n              sx={{\n                display: 'block',\n                // on mobile push the button to the right side\n                flexGrow: { xs: '1', lg: '0' },\n                flexShrink: '0',\n                ...titleSx,\n              }}\n              {...restTitle}\n            >\n              {title}\n            </Typography>\n          )}\n          {!!navigation?.length && (\n            <Tabs\n              value={activeNav}\n              onChange={(_, v) => setActiveNav(v)}\n              template=\"navigation\"\n              sx={{\n                flexGrow: '1',\n                // on mobile move to 2nd row\n                flexBasis: { xs: '100%', lg: 'auto' },\n                order: { xs: '3', lg: '0' },\n                // center on mobile\n                justifyContent: { xs: 'center', lg: 'flex-start' },\n                alignSelf: { xs: 'flex-end', lg: 'center' },\n                ...(title && {\n                  // increase size between title and nav\n                  pl: { lg: 4 },\n                }),\n                marginTop: { xs: '-10px', lg: '0' },\n                // move directly into border\n                marginBottom: '-1px',\n                ...contentSx,\n              }}\n              data-testid=\"SecondaryNavigation.items\"\n              {...restContent}\n            >\n              {navigation}\n            </Tabs>\n          )}\n          {(buttons || cta) && (\n            <Box\n              sx={{\n                flexShrink: '0',\n                flexGrow: '1',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'flex-end',\n                gap: 0.25,\n                ...buttonsSx,\n              }}\n              data-testid=\"SecondaryNavigation.cta\"\n              {...restButtons}\n            >\n              {buttons || cta}\n            </Box>\n          )}\n        </Toolbar>\n      </AppBar>\n    );\n  },\n);\n"],"names":["SecondaryNavigation","forwardRef","_a","ref","children","sx","title","navigationItems","cta","buttons","color","__","inContainer","toolbarProps","titleProps","contentProps","buttonsProps","rest","__rest","_b","titleSx","restTitle","_c","toolbarSx","restToolbar","_d","contentSx","restContent","_e","buttonsSx","restButtons","activeNav","setActiveNav","useState","navigation","useMemo","flatten","nodes","result","Children","forEach","child","idx","type","Fragment","push","props","isActive","_jsx","AppBar","Object","assign","zIndex","theme","appBar","role","_jsxs","Toolbar","length","flexWrap","xs","lg","pt","disableGutters","Typography","variant","display","flexGrow","flexShrink","Tabs","value","onChange","_","v","template","flexBasis","order","justifyContent","alignSelf","pl","marginTop","marginBottom","Box","alignItems","gap"],"mappings":"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"}

package/components/secondaryNavigation/SecondaryNavigationCta.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '@mui/material';
+export interface SecondaryNavigationCtaProps extends ButtonProps {
+}
+/**
+ * SecondaryNavigationCtaProps is a proxy component to <Button /> with responsive size
+ */
+export declare const SecondaryNavigationCta: React.FC<SecondaryNavigationCtaProps>;

package/components/secondaryNavigation/SecondaryNavigationCta.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{useMediaQuery as o,Button as a}from"@mui/material";const i=t(((t,i)=>{const e=o((r=>r.breakpoints.down("lg")));return r(a,Object.assign({ref:i,color:t.variant&&"contained"!==t.variant?"secondary":"primary",size:e?"small":"medium"},t))}));export{i as SecondaryNavigationCta};
+//# sourceMappingURL=SecondaryNavigationCta.js.map

package/components/secondaryNavigation/SecondaryNavigationCta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryNavigationCta.js","sources":["../../../src/components/secondaryNavigation/SecondaryNavigationCta.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps, Theme, useMediaQuery } from '@mui/material';\n\nexport interface SecondaryNavigationCtaProps extends ButtonProps {}\n\n/**\n * SecondaryNavigationCtaProps is a proxy component to <Button /> with responsive size\n */\nexport const SecondaryNavigationCta: React.FC<SecondaryNavigationCtaProps> = forwardRef((props, ref) => {\n  const downLg = useMediaQuery<Theme>((theme) => theme.breakpoints.down('lg'));\n\n  return (\n    <Button\n      ref={ref}\n      color={!props.variant || props.variant === 'contained' ? 'primary' : 'secondary'}\n      size={downLg ? 'small' : 'medium'}\n      {...props}\n    />\n  );\n});\n"],"names":["SecondaryNavigationCta","forwardRef","props","ref","downLg","useMediaQuery","theme","breakpoints","down","_jsx","Button","Object","assign","color","variant","size"],"mappings":"qIAQa,MAAAA,EAAgEC,GAAW,CAACC,EAAOC,KAC9F,MAAMC,EAASC,GAAsBC,GAAUA,EAAMC,YAAYC,KAAK,QAEtE,OACEC,EAACC,EAAMC,OAAAC,OAAA,CACLT,IAAKA,EACLU,MAAQX,EAAMY,SAA6B,cAAlBZ,EAAMY,QAAsC,YAAZ,UACzDC,KAAMX,EAAS,QAAU,UACrBF,GACJ"}

package/components/secondaryNavigation/SecondaryNavigationItem.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode, ElementType } from 'react';
+import { TabProps } from '@mui/material';
+export interface SecondaryNavigationItemProps extends Omit<TabProps<ElementType>, 'children'> {
+    /**
+     * Displayed navigation text, can be provided as children as well
+     */
+    label?: ReactNode;
+    /**
+     * Displayed navigation text
+     */
+    children?: ReactNode;
+    /**
+     * Marks item currently active
+     * @deprecated
+     */
+    isActive?: boolean;
+}
+/**
+ * Component to render styled button in the header
+ */
+export declare const SecondaryNavigationItem: FC<SecondaryNavigationItemProps>;

package/components/secondaryNavigation/SecondaryNavigationItem.js

@@ -0,0 +1,2 @@
+import{__rest as r}from"tslib";import{jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Tab as i}from"@mui/material";const a=e(((e,a)=>{var{children:m,label:o,isActive:l}=e,c=r(e,["children","label","isActive"]);return t(i,Object.assign({label:m||o,ref:a,"data-testid":"SecondaryNavigationItem"},c))}));export{a as SecondaryNavigationItem};
+//# sourceMappingURL=SecondaryNavigationItem.js.map

package/components/secondaryNavigation/SecondaryNavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryNavigationItem.js","sources":["../../../src/components/secondaryNavigation/SecondaryNavigationItem.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, ForwardedRef, ElementType } from 'react';\nimport { Tab, TabProps } from '@mui/material';\n\nexport interface SecondaryNavigationItemProps extends Omit<TabProps<ElementType>, 'children'> {\n  /**\n   * Displayed navigation text, can be provided as children as well\n   */\n  label?: ReactNode;\n  /**\n   * Displayed navigation text\n   */\n  children?: ReactNode;\n  /**\n   * Marks item currently active\n   * @deprecated\n   */\n  isActive?: boolean;\n}\n\n/**\n * Component to render styled button in the header\n */\nexport const SecondaryNavigationItem: FC<SecondaryNavigationItemProps> = forwardRef(\n  ({ children, label, isActive: _, ...rest }, ref) => {\n    // isActive is handled in SecondaryNavigation\n\n    return (\n      <Tab\n        label={children || label}\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        data-testid=\"SecondaryNavigationItem\"\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["SecondaryNavigationItem","forwardRef","_a","ref","children","label","isActive","_","rest","__rest","_jsx","Tab"],"mappings":"8IAsBa,MAAAA,EAA4DC,GACvE,CAACC,EAA2CC,KAA3C,IAAAC,SAAEA,EAAQC,MAAEA,EAAOC,SAAUC,GAACL,EAAKM,EAAnCC,EAAAP,EAAA,CAAA,WAAA,QAAA,aAGC,OACEQ,EAACC,iBACCN,MAAOD,GAAYC,EACnBF,IAAKA,EACO,cAAA,2BACRK,GACJ"}