@skodaflow/web-library 8.0.1 → 8.2.0

package/components/promptBar/PromptSubmitIconButton.d.ts

@@ -0,0 +1,54 @@
+import { FC, ComponentType, ReactNode } from 'react';
+import { IconButtonProps, SvgIconProps } from '@mui/material';
+import { PromptAttachment } from '@/src';
+export interface PromptSubmitIconButtonProps extends Omit<IconButtonProps, 'value'> {
+    /**
+     * Current input value. Switches the button from voice to submit variant.
+     */
+    value?: string;
+    /**
+     * Setter for the input value.
+     */
+    setValue?: (value: string) => void;
+    /**
+     * List of attachments displayed above the text input.
+     */
+    attachments?: PromptAttachment[];
+    /**
+     * Indicates that a request is being processed. Shows the processing (stop) icon.
+     */
+    processing?: boolean;
+    /**
+     * Indicates that voice recording is in progress.
+     */
+    recording?: boolean;
+    /**
+     * Label that changes IconButton to Button.
+     */
+    label?: ReactNode;
+    /**
+     * Do not show voice button. Use when speech input is unavailable or unsupported.
+     */
+    disableVoice?: boolean;
+    /**
+     * Custom component for the send icon, shown in submit state.
+     */
+    SendIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Custom component for the voice icon, shown when input is empty and not recording.
+     */
+    VoiceIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Custom component for the processing icon, shown while a request is processing.
+     */
+    ProcessingIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Custom component for the recording icon, shown as startIcon on the recording stop button.
+     */
+    RecordingIconComponent?: ComponentType<SvgIconProps>;
+}
+/**
+ * Submit button for the PromptBar. Switches between voice and submit variants
+ * depending on the current state.
+ */
+export declare const PromptSubmitIconButton: FC<PromptSubmitIconButtonProps>;

package/components/promptBar/PromptSubmitIconButton.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,useMemo as o}from"react";import{Button as n,IconButton as a}from"@mui/material";import{SendIcon as i}from"../icon/stroke/SendIcon.js";import{SoundwaveIcon as t}from"../icon/stroke/SoundwaveIcon.js";import{ShapeSquareFilledIcon as s}from"../icon/filled/ShapeSquareFilledIcon.js";import{sxOverride as l}from"../../utils/sxOverride/sxOverride.js";const c=e(({value:e,setValue:c,attachments:m,processing:f,recording:d,label:u,disableVoice:p,SendIconComponent:g,VoiceIconComponent:b,ProcessingIconComponent:h,RecordingIconComponent:v,sx:I,disabled:S,...y},w)=>{const Y=b||t,x=g||i,j=v||t,k=h||s,C=o(()=>f?"processing":d?"recording":p||e||m?.length?"submit":"voice",[f,d,e,p,m?.length]),V=o(()=>u?n:a,[u]),O=o(()=>{switch(C){case"processing":return k;case"recording":return j;case"submit":return x;default:return Y}},[C,k,j,x,Y]);return r(V,{ref:w,color:"primary",size:"small",disabled:S,...u?{variant:"contained",startIcon:r(O,{})}:{variant:"filled"},..."voice"===C&&{"aria-label":"Voice input",color:"surface"},..."submit"===C&&{"aria-label":"Submit",...p&&!e&&!m?.length&&{disabled:!0}},..."recording"===C&&{"aria-label":"Stop recording"},..."processing"===C&&{"aria-label":"Stop"},...y,sx:l({..."recording"===C&&!v&&{"@keyframes flow-soundbar-small":{"0%":{transform:"scaleY(1)"},"25%":{transform:"scaleY(3.15)"},"50%, 100%":{transform:"scaleY(1)"}},"@keyframes flow-soundbar-large":{"0%":{transform:"scaleY(0.35)"},"25%":{transform:"scaleY(1)"},"50%, 100%":{transform:"scaleY(0.35)"}},"& .MuiSvgIcon-root":{path:{transformOrigin:"center 60%",transition:"transform 0.3s ease-out","&:nth-of-type(1)":{animation:"1.2s linear infinite flow-soundbar-small"},"&:nth-of-type(2)":{transform:"scaleY(0.35)",animation:"1.2s linear infinite flow-soundbar-large",animationDelay:"0.2s"},"&:nth-of-type(3)":{animation:"1.2s linear infinite flow-soundbar-small",animationDelay:"0.4s"}}}}},I),children:u||r(O,{})},C)});export{c as PromptSubmitIconButton};
+//# sourceMappingURL=PromptSubmitIconButton.js.map

package/components/promptBar/PromptSubmitIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptSubmitIconButton.js","sources":["../../../src/components/promptBar/PromptSubmitIconButton.tsx"],"sourcesContent":["import { FC, ComponentType, forwardRef, useMemo, ReactNode } from 'react';\nimport { Button, ButtonBaseProps, IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { SendIcon } from '@/src/components/icon/stroke/SendIcon';\nimport { SoundwaveIcon } from '@/src/components/icon/stroke/SoundwaveIcon';\nimport { ShapeSquareFilledIcon } from '@/src/components/icon/filled/ShapeSquareFilledIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { PromptAttachment } from '@/src';\n\nexport interface PromptSubmitIconButtonProps extends Omit<IconButtonProps, 'value'> {\n  /**\n   * Current input value. Switches the button from voice to submit variant.\n   */\n  value?: string;\n  /**\n   * Setter for the input value.\n   */\n  setValue?: (value: string) => void;\n  /**\n   * List of attachments displayed above the text input.\n   */\n  attachments?: PromptAttachment[];\n  /**\n   * Indicates that a request is being processed. Shows the processing (stop) icon.\n   */\n  processing?: boolean;\n  /**\n   * Indicates that voice recording is in progress.\n   */\n  recording?: boolean;\n  /**\n   * Label that changes IconButton to Button.\n   */\n  label?: ReactNode;\n  /**\n   * Do not show voice button. Use when speech input is unavailable or unsupported.\n   */\n  disableVoice?: boolean;\n  /**\n   * Custom component for the send icon, shown in submit state.\n   */\n  SendIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Custom component for the voice icon, shown when input is empty and not recording.\n   */\n  VoiceIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Custom component for the processing icon, shown while a request is processing.\n   */\n  ProcessingIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Custom component for the recording icon, shown as startIcon on the recording stop button.\n   */\n  RecordingIconComponent?: ComponentType<SvgIconProps>;\n}\n\n/**\n * Submit button for the PromptBar. Switches between voice and submit variants\n * depending on the current state.\n */\nexport const PromptSubmitIconButton: FC<PromptSubmitIconButtonProps> = forwardRef(\n  (\n    {\n      value,\n      setValue,\n      attachments,\n      processing,\n      recording,\n      label,\n      disableVoice,\n      SendIconComponent,\n      VoiceIconComponent,\n      ProcessingIconComponent,\n      RecordingIconComponent,\n      sx,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) => {\n    const VoiceIcon = VoiceIconComponent || SoundwaveIcon;\n    const SubmitIcon = SendIconComponent || SendIcon;\n    const RecordingIcon = RecordingIconComponent || SoundwaveIcon;\n    const ProcessingIcon = ProcessingIconComponent || ShapeSquareFilledIcon;\n\n    const state = useMemo<'voice' | 'recording' | 'submit' | 'processing'>(() => {\n      if (processing) return 'processing';\n      if (recording) return 'recording';\n      if (disableVoice || value || attachments?.length) return 'submit';\n      return 'voice';\n    }, [processing, recording, value, disableVoice, attachments?.length]);\n\n    const Component = useMemo<ComponentType<ButtonBaseProps>>(() => {\n      if (label) {\n        return Button;\n      }\n      return IconButton;\n    }, [label]);\n\n    const Icon = useMemo(() => {\n      switch (state) {\n        case 'processing':\n          return ProcessingIcon;\n        case 'recording':\n          return RecordingIcon;\n        case 'submit':\n          return SubmitIcon;\n        case 'voice':\n        default:\n          return VoiceIcon;\n      }\n    }, [state, ProcessingIcon, RecordingIcon, SubmitIcon, VoiceIcon]);\n\n    return (\n      <Component\n        ref={ref}\n        key={state}\n        color=\"primary\"\n        size=\"small\"\n        disabled={disabled}\n        {...(label ? { variant: 'contained', startIcon: <Icon /> } : { variant: 'filled' })}\n        {...(state === 'voice' && { 'aria-label': 'Voice input', color: 'surface' })}\n        {...(state === 'submit' && {\n          'aria-label': 'Submit',\n          ...(disableVoice && !value && !attachments?.length && { disabled: true }),\n        })}\n        {...(state === 'recording' && { 'aria-label': 'Stop recording' })}\n        {...(state === 'processing' && { 'aria-label': 'Stop' })}\n        {...rest}\n        sx={sxOverride(\n          {\n            // soundwave animation during voice recordin\n            ...(state === 'recording' &&\n              !RecordingIconComponent && {\n                '@keyframes flow-soundbar-small': {\n                  '0%': { transform: 'scaleY(1)' },\n                  '25%': { transform: 'scaleY(3.15)' },\n                  '50%, 100%': { transform: 'scaleY(1)' },\n                },\n                '@keyframes flow-soundbar-large': {\n                  '0%': { transform: 'scaleY(0.35)' },\n                  '25%': { transform: 'scaleY(1)' },\n                  '50%, 100%': { transform: 'scaleY(0.35)' },\n                },\n                '& .MuiSvgIcon-root': {\n                  path: {\n                    transformOrigin: 'center 60%',\n                    transition: 'transform 0.3s ease-out',\n                    '&:nth-of-type(1)': { animation: '1.2s linear infinite flow-soundbar-small' },\n                    '&:nth-of-type(2)': {\n                      transform: 'scaleY(0.35)',\n                      animation: '1.2s linear infinite flow-soundbar-large',\n                      animationDelay: '0.2s',\n                    },\n                    '&:nth-of-type(3)': {\n                      animation: '1.2s linear infinite flow-soundbar-small',\n                      animationDelay: '0.4s',\n                    },\n                  },\n                },\n              }),\n          },\n          sx,\n        )}\n      >\n        {label ? label : <Icon />}\n      </Component>\n    );\n  },\n);\n"],"names":["PromptSubmitIconButton","forwardRef","value","setValue","attachments","processing","recording","label","disableVoice","SendIconComponent","VoiceIconComponent","ProcessingIconComponent","RecordingIconComponent","sx","disabled","rest","ref","VoiceIcon","SoundwaveIcon","SubmitIcon","SendIcon","RecordingIcon","ProcessingIcon","ShapeSquareFilledIcon","state","useMemo","length","Component","Button","IconButton","Icon","_jsx","color","size","variant","startIcon","sxOverride","transform","path","transformOrigin","transition","animation","animationDelay","children"],"mappings":"uZA2DO,MAAMA,EAA0DC,EACrE,EAEIC,QACAC,WACAC,cACAC,aACAC,YACAC,QACAC,eACAC,oBACAC,qBACAC,0BACAC,yBACAC,KACAC,cACGC,GAELC,KAEA,MAAMC,EAAYP,GAAsBQ,EAClCC,EAAaV,GAAqBW,EAClCC,EAAgBT,GAA0BM,EAC1CI,EAAiBX,GAA2BY,EAE5CC,EAAQC,EAAyD,IACjEpB,EAAmB,aACnBC,EAAkB,YAClBE,GAAgBN,GAASE,GAAasB,OAAe,SAClD,QACN,CAACrB,EAAYC,EAAWJ,EAAOM,EAAcJ,GAAasB,SAEvDC,EAAYF,EAAwC,IACpDlB,EACKqB,EAEFC,EACN,CAACtB,IAEEuB,EAAOL,EAAQ,KACnB,OAAQD,GACN,IAAK,aACH,OAAOF,EACT,IAAK,YACH,OAAOD,EACT,IAAK,SACH,OAAOF,EAET,QACE,OAAOF,IAEV,CAACO,EAAOF,EAAgBD,EAAeF,EAAYF,IAEtD,OACEc,EAACJ,EAAS,CACRX,IAAKA,EAELgB,MAAM,UACNC,KAAK,QACLnB,SAAUA,KACLP,EAAQ,CAAE2B,QAAS,YAAaC,UAAWJ,EAACD,EAAI,CAAA,IAAQ,CAAEI,QAAS,aACzD,UAAVV,GAAqB,CAAE,aAAc,cAAeQ,MAAO,cACjD,WAAVR,GAAsB,CACzB,aAAc,YACVhB,IAAiBN,IAAUE,GAAasB,QAAU,CAAEZ,UAAU,OAErD,cAAVU,GAAyB,CAAE,aAAc,qBAC/B,eAAVA,GAA0B,CAAE,aAAc,WAC3CT,EACJF,GAAIuB,EACF,IAEgB,cAAVZ,IACDZ,GAA0B,CACzB,iCAAkC,CAChC,KAAM,CAAEyB,UAAW,aACnB,MAAO,CAAEA,UAAW,gBACpB,YAAa,CAAEA,UAAW,cAE5B,iCAAkC,CAChC,KAAM,CAAEA,UAAW,gBACnB,MAAO,CAAEA,UAAW,aACpB,YAAa,CAAEA,UAAW,iBAE5B,qBAAsB,CACpBC,KAAM,CACJC,gBAAiB,aACjBC,WAAY,0BACZ,mBAAoB,CAAEC,UAAW,4CACjC,mBAAoB,CAClBJ,UAAW,eACXI,UAAW,2CACXC,eAAgB,QAElB,mBAAoB,CAClBD,UAAW,2CACXC,eAAgB,YAM5B7B,GACD8B,SAEApC,GAAgBwB,EAACD,EAAI,CAAA,IAjDjBN"}

package/components/promptBar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PromptBar';
+export * from './PromptSubmitIconButton';
+export * from './PromptAttachments';

package/components/quickLink/QuickLink.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode, ElementType, ComponentType } from 'react';
-import { StackProps, TypographyProps, ButtonProps, BoxProps, SvgIconProps } from '@mui/material';
-export interface QuickLinkProps extends Omit<StackProps<ElementType>, 'title'> {
+import { TypographyProps, ButtonProps, BoxProps, SvgIconProps } from '@mui/material';
+export interface QuickLinkProps extends Omit<BoxProps<ElementType>, 'title'> {
     /**
      * Icon node to be used
      */
@@ -40,7 +40,7 @@ export interface QuickLinkProps extends Omit<StackProps<ElementType>, 'title'> {
     /**
      * Icon and Title wrapper that changes on the mobile
      */
-    titleWrapperProps?: StackProps<ElementType>;
+    titleWrapperProps?: BoxProps<ElementType>;
     /**
      * Button text
      */

package/components/quickLink/QuickLink.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"tslib";import{jsxs as r,jsx as o}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Stack as s,Box as n,Typography as e,Button as a}from"@mui/material";import{ArrowRightIcon as p}from"../icon/stroke/ArrowRightIcon.js";import{getInteractiveStyle as c}from"../../materialui/button/interactive.js";const d=i((i,d)=>{var{IconComponent:l,iconProps:x,title:m,titleTypographyProps:u,subtitle:b,subtitleTypographyProps:g,dividerWrapperProps:h,dividerProps:k,contentWrapperProps:f,titleWrapperProps:j,buttonTitle:O,buttonProps:P,buttonIconProps:y,onClick:v,sx:I}=i,C=t(i,["IconComponent","iconProps","title","titleTypographyProps","subtitle","subtitleTypographyProps","dividerWrapperProps","dividerProps","contentWrapperProps","titleWrapperProps","buttonTitle","buttonProps","buttonIconProps","onClick","sx"]);const W=x||{},{sx:T}=W,B=t(W,["sx"]),L=h||{},{sx:M}=L,Q=t(L,["sx"]),w=k||{},{sx:S}=w,X=t(w,["sx"]),D=f||{},{sx:z}=D,A=t(D,["sx"]),R=j||{},{sx:q}=R,E=t(R,["sx"]);return r(s,Object.assign({direction:"column",alignItems:"flex-start",sx:Object.assign(Object.assign({minWidth:"0",cursor:"pointer",color:"inherit",textDecoration:"unset",gap:{xs:"8px",md:"16px"}},c({hr:{backgroundColor:"text.primary",height:"1px"},".MuiButton-navigation":{backgroundColor:"transparent",color:t=>"dark"===t.palette.mode?"onSurface.os0":"onSurface.os900","& .MuiButton-startIcon":{transform:"translateX(0px)"},"& .MuiButton-endIcon":{transform:"translateX(0px)"}}},{hr:{backgroundColor:t=>"dark"===t.palette.mode?"brand.secondary":"brand.primary",height:"2px"},".MuiButton-navigation":{backgroundColor:"transparent",color:t=>"dark"===t.palette.mode?"onSurface.os300":"onSurface.os700",".MuiButton-startIcon":{transform:"translateX(-8px)"},".MuiButton-endIcon":{transform:"translateX(8px)"}}})),I),"data-testid":"QuickLink",ref:d},v&&{onClick:v,role:"button"},{tabIndex:-1},C,{children:[o(n,Object.assign({sx:Object.assign({position:"relative",width:"100%",height:"2px","&&":{mb:{xs:0,md:l?0:2}}},M)},Q,{children:o(n,Object.assign({component:"hr",sx:Object.assign({border:"none",position:"absolute",inset:"0",m:0},S)},X))})),r(n,Object.assign({sx:Object.assign({width:"480px",maxWidth:"100%",pr:3,pt:{xs:"8px",md:"0px"}},z)},A,{children:[r(s,Object.assign({sx:Object.assign({flexDirection:{xs:"row",md:"column"},alignItems:{xs:"center",md:"flex-start"},gap:{xs:"4px",md:"18px"},mb:{xs:"4px",md:0}},q)},E,{children:[l&&o(l,Object.assign({sx:Object.assign({display:"block",fontSize:{xs:"20px",md:"35px"},mx:{xs:"2px",md:"0px"},my:{xs:"0px",md:"2px"}},T),"data-testid":"QuickLink.icon"},B)),m&&o(e,Object.assign({variant:"h4",display:"block","data-testid":"QuickLink.title",sx:{mb:{xs:0,md:.5}}},u,{children:m}))]})),b&&o(e,Object.assign({variant:"disclaimer1",display:"block","data-testid":"QuickLink.subtitle"},g,{children:b}))]})),O&&o(a,Object.assign({variant:"navigation",color:"secondary",endIcon:o(p,{}),"data-testid":"QuickLink.button"},P,{children:O}))]}))}),l=i((r,i)=>{var{sx:s,children:e}=r,a=t(r,["sx","children"]);return o(n,Object.assign({sx:Object.assign({display:"grid",gridTemplateColumns:{xs:"1fr",lg:"repeat(3, 1fr)"},gap:3},s),ref:i,"data-testid":"QuickLink.wrapper"},a,{children:e}))});export{d as QuickLink,l as QuickLinkWrapper};
+import{jsxs as t,jsx as r}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Box as i,Typography as e,Button as n}from"@mui/material";import{sxOverride as a}from"../../utils/sxOverride/sxOverride.js";import{ArrowRightIcon as s}from"../icon/stroke/ArrowRightIcon.js";import{getInteractiveStyle as p}from"../../materialui/button/interactive.js";const d=o(({IconComponent:o,iconProps:d,title:x,titleTypographyProps:l,subtitle:c,subtitleTypographyProps:m,dividerWrapperProps:u,dividerProps:h,contentWrapperProps:f,titleWrapperProps:k,buttonTitle:b,buttonProps:g,buttonIconProps:y,onClick:v,sx:I,...P},C)=>{const{sx:B,...L}=d||{},{sx:M,...Q}=u||{},{sx:w,...S}=h||{},{sx:W,...j}=f||{},{sx:T,...X}=k||{},{sx:D,...O}=l||{},{sx:z,...A}=m||{};return t(i,{sx:a({display:"flex",flexDirection:"column",alignItems:"flex-start",minWidth:"0",cursor:"pointer",color:"inherit",textDecoration:"unset",gap:{xs:"8px",md:"16px"},...p({hr:{backgroundColor:"text.primary",height:"1px"},".MuiButton-navigation":{backgroundColor:"transparent",color:t=>"dark"===t.palette.mode?"onSurface.os0":"onSurface.os900","& .MuiButton-startIcon":{transform:"translateX(0px)"},"& .MuiButton-endIcon":{transform:"translateX(0px)"}}},{hr:{backgroundColor:t=>"dark"===t.palette.mode?"brand.secondary":"brand.primary",height:"2px"},".MuiButton-navigation":{backgroundColor:"transparent",color:t=>"dark"===t.palette.mode?"onSurface.os300":"onSurface.os700",".MuiButton-startIcon":{transform:"translateX(-8px)"},".MuiButton-endIcon":{transform:"translateX(8px)"}}})},I),"data-testid":"QuickLink",ref:C,...v&&{onClick:v,role:"button"},tabIndex:-1,...P,children:[r(i,{sx:a({position:"relative",width:"100%",height:"2px","&&":{mb:{xs:0,md:o?0:2}}},M),...Q,children:r(i,{component:"hr",sx:a({border:"none",position:"absolute",inset:"0",m:0},w),...S})}),t(i,{sx:a({width:"480px",maxWidth:"100%",pr:3,pt:{xs:"8px",md:"0px"}},W),...j,children:[t(i,{sx:a({display:"flex",flexDirection:{xs:"row",md:"column"},alignItems:{xs:"center",md:"flex-start"},gap:{xs:"4px",md:"18px"},mb:{xs:"4px",md:0}},T),...X,children:[o&&r(o,{sx:a({display:"block",fontSize:{xs:"20px",md:"35px"},mx:{xs:"2px",md:"0px"},my:{xs:"0px",md:"2px"}},B),"data-testid":"QuickLink.icon",...L}),x&&r(e,{variant:"h4","data-testid":"QuickLink.title",sx:a({display:"block",mb:{xs:0,md:.5}},D),...O,children:x})]}),c&&r(e,{variant:"disclaimer1","data-testid":"QuickLink.subtitle",sx:a({display:"block"},z),...A,children:c})]}),b&&r(n,{variant:"navigation",color:"secondary",endIcon:r(s,{}),"data-testid":"QuickLink.button",...g,children:b})]})}),x=o(({sx:t,children:o,...e},n)=>r(i,{sx:a({display:"grid",gridTemplateColumns:{xs:"1fr",lg:"repeat(3, 1fr)"},gap:3},t),ref:n,"data-testid":"QuickLink.wrapper",...e,children:o}));export{d as QuickLink,x as QuickLinkWrapper};
 //# sourceMappingURL=QuickLink.js.map

package/components/quickLink/QuickLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickLink.js","sources":["../../../src/components/quickLink/QuickLink.tsx"],"sourcesContent":["import React, { ReactNode, ElementType, forwardRef, ForwardedRef, ComponentType } from 'react';\nimport {\n  Stack,\n  Box,\n  Button,\n  Typography,\n  StackProps,\n  TypographyProps,\n  ButtonProps,\n  BoxProps,\n  SvgIconProps,\n} from '@mui/material';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface QuickLinkProps extends Omit<StackProps<ElementType>, 'title'> {\n  /**\n   * Icon node to be used\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Props applied to Icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Title text\n   */\n  title?: ReactNode;\n  /**\n   * Props applied to title Typography wrapper component\n   */\n  titleTypographyProps?: TypographyProps<ElementType>;\n  /**\n   * Subtitle text\n   */\n  subtitle?: ReactNode;\n  /**\n   * Props applied to subtitle Typography wrapper component\n   */\n  subtitleTypographyProps?: TypographyProps<ElementType>;\n  /**\n   * Props applied to wrapper of divider component\n   */\n  dividerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Props applied to divider component\n   */\n  dividerProps?: BoxProps<ElementType>;\n  /**\n   * Content wrapper\n   */\n  contentWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Icon and Title wrapper that changes on the mobile\n   */\n  titleWrapperProps?: StackProps<ElementType>;\n  /**\n   * Button text\n   */\n  buttonTitle?: ReactNode;\n  /**\n   * Props applied to Button component\n   */\n  buttonProps?: ButtonProps;\n}\n\n/**\n * Quick Links are used to provide immediate access to the most relevant and\n * frequently used actions related to a product or service.\n *\n * Composition of title, subtitle, icon, and button\n */\nexport const QuickLink: React.FC<QuickLinkProps> = forwardRef(\n  (\n    {\n      IconComponent,\n      iconProps,\n      title,\n      titleTypographyProps,\n      subtitle,\n      subtitleTypographyProps,\n      dividerWrapperProps,\n      dividerProps,\n      contentWrapperProps,\n      titleWrapperProps,\n      buttonTitle,\n      buttonProps,\n      buttonIconProps,\n      onClick,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: iconSx, ...restIconProps } = iconProps || {};\n    const { sx: dividerWrapperSx, ...restDividerWrapperProps } = dividerWrapperProps || {};\n    const { sx: dividerSx, ...restDividerProps } = dividerProps || {};\n    const { sx: contentWrapperSx, ...restContentWrapperProps } = contentWrapperProps || {};\n    const { sx: titleWrapperSx, ...restTitleWrapperProps } = titleWrapperProps || {};\n\n    return (\n      <Stack\n        direction=\"column\"\n        alignItems=\"flex-start\"\n        sx={{\n          minWidth: '0',\n          cursor: 'pointer',\n          color: 'inherit',\n          textDecoration: 'unset',\n          gap: { xs: '8px', md: '16px' },\n          ...getInteractiveStyle(\n            {\n              hr: {\n                backgroundColor: 'text.primary',\n                height: '1px',\n              },\n              // interactive style from button.theme\n              '.MuiButton-navigation': {\n                backgroundColor: 'transparent',\n                color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os0' : 'onSurface.os900'),\n                '& .MuiButton-startIcon': {\n                  transform: 'translateX(0px)',\n                },\n                '& .MuiButton-endIcon': {\n                  transform: 'translateX(0px)',\n                },\n              },\n            },\n            {\n              hr: {\n                backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary'),\n                height: '2px',\n              },\n              '.MuiButton-navigation': {\n                backgroundColor: 'transparent',\n                color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700'),\n                '.MuiButton-startIcon': {\n                  transform: 'translateX(-8px)',\n                },\n                '.MuiButton-endIcon': {\n                  transform: 'translateX(8px)',\n                },\n              },\n            },\n          ),\n          ...sx,\n        }}\n        data-testid=\"QuickLink\"\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        {...(onClick && {\n          onClick: onClick,\n          role: 'button',\n        })}\n        tabIndex={-1}\n        {...rest}\n      >\n        <Box\n          sx={{\n            position: 'relative',\n            width: '100%',\n            height: '2px',\n            // 32px gap from top if icon is hidden\n            '&&': { mb: { xs: 0, md: IconComponent ? 0 : 2 } },\n            ...dividerWrapperSx,\n          }}\n          {...restDividerWrapperProps}\n        >\n          <Box\n            component=\"hr\"\n            sx={{\n              border: 'none',\n              position: 'absolute',\n              inset: '0',\n              m: 0,\n              // style is set via interactive parent\n              ...dividerSx,\n            }}\n            {...restDividerProps}\n          />\n        </Box>\n        <Box\n          sx={{ width: '480px', maxWidth: '100%', pr: 3, pt: { xs: '8px', md: '0px' }, ...contentWrapperSx }}\n          {...restContentWrapperProps}\n        >\n          <Stack\n            sx={{\n              flexDirection: { xs: 'row', md: 'column' },\n              alignItems: { xs: 'center', md: 'flex-start' },\n              gap: { xs: '4px', md: '18px' },\n              mb: { xs: '4px', md: 0 },\n              ...titleWrapperSx,\n            }}\n            {...restTitleWrapperProps}\n          >\n            {IconComponent && (\n              <IconComponent\n                sx={{\n                  display: 'block',\n                  fontSize: { xs: '20px', md: '35px' },\n                  mx: { xs: '2px', md: '0px' },\n                  my: { xs: '0px', md: '2px' },\n                  ...iconSx,\n                }}\n                data-testid=\"QuickLink.icon\"\n                {...restIconProps}\n              />\n            )}\n            {title && (\n              <Typography\n                variant=\"h4\"\n                display=\"block\"\n                data-testid=\"QuickLink.title\"\n                sx={{ mb: { xs: 0, md: 0.5 } }}\n                {...titleTypographyProps}\n              >\n                {title}\n              </Typography>\n            )}\n          </Stack>\n          {subtitle && (\n            <Typography\n              variant=\"disclaimer1\"\n              display=\"block\"\n              data-testid=\"QuickLink.subtitle\"\n              {...subtitleTypographyProps}\n            >\n              {subtitle}\n            </Typography>\n          )}\n        </Box>\n        {buttonTitle && (\n          <Button\n            variant=\"navigation\"\n            color=\"secondary\"\n            endIcon={<ArrowRightIcon />}\n            data-testid=\"QuickLink.button\"\n            {...buttonProps}\n          >\n            {buttonTitle}\n          </Button>\n        )}\n      </Stack>\n    );\n  },\n);\n\nexport interface QuickLinkWrapperProps extends BoxProps<ElementType> {}\n\n/**\n * Wrapper container for 3 QuickLinks\n */\nexport const QuickLinkWrapper: React.FC<QuickLinkWrapperProps> = forwardRef(({ sx, children, ...rest }, ref) => {\n  return (\n    <Box\n      sx={{\n        display: 'grid',\n        gridTemplateColumns: { xs: '1fr', lg: 'repeat(3, 1fr)' },\n        gap: 3,\n        ...sx,\n      }}\n      ref={ref}\n      data-testid=\"QuickLink.wrapper\"\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"names":["QuickLink","forwardRef","_a","ref","IconComponent","iconProps","title","titleTypographyProps","subtitle","subtitleTypographyProps","dividerWrapperProps","dividerProps","contentWrapperProps","titleWrapperProps","buttonTitle","buttonProps","buttonIconProps","onClick","sx","rest","__rest","_b","iconSx","restIconProps","_c","dividerWrapperSx","restDividerWrapperProps","_d","dividerSx","restDividerProps","_e","contentWrapperSx","restContentWrapperProps","_f","titleWrapperSx","restTitleWrapperProps","_jsxs","Stack","direction","alignItems","Object","assign","minWidth","cursor","color","textDecoration","gap","xs","md","getInteractiveStyle","hr","backgroundColor","height","theme","palette","mode","transform","role","tabIndex","children","_jsx","Box","position","width","mb","component","border","inset","m","maxWidth","pr","pt","flexDirection","display","fontSize","mx","my","Typography","variant","Button","endIcon","ArrowRightIcon","QuickLinkWrapper","gridTemplateColumns","lg"],"mappings":"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"}
+{"version":3,"file":"QuickLink.js","sources":["../../../src/components/quickLink/QuickLink.tsx"],"sourcesContent":["import React, { ReactNode, ElementType, forwardRef, ForwardedRef, ComponentType } from 'react';\nimport { Box, Button, Typography, TypographyProps, ButtonProps, BoxProps, SvgIconProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface QuickLinkProps extends Omit<BoxProps<ElementType>, 'title'> {\n  /**\n   * Icon node to be used\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Props applied to Icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Title text\n   */\n  title?: ReactNode;\n  /**\n   * Props applied to title Typography wrapper component\n   */\n  titleTypographyProps?: TypographyProps<ElementType>;\n  /**\n   * Subtitle text\n   */\n  subtitle?: ReactNode;\n  /**\n   * Props applied to subtitle Typography wrapper component\n   */\n  subtitleTypographyProps?: TypographyProps<ElementType>;\n  /**\n   * Props applied to wrapper of divider component\n   */\n  dividerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Props applied to divider component\n   */\n  dividerProps?: BoxProps<ElementType>;\n  /**\n   * Content wrapper\n   */\n  contentWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Icon and Title wrapper that changes on the mobile\n   */\n  titleWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Button text\n   */\n  buttonTitle?: ReactNode;\n  /**\n   * Props applied to Button component\n   */\n  buttonProps?: ButtonProps;\n}\n\n/**\n * Quick Links are used to provide immediate access to the most relevant and\n * frequently used actions related to a product or service.\n *\n * Composition of title, subtitle, icon, and button\n */\nexport const QuickLink: React.FC<QuickLinkProps> = forwardRef(\n  (\n    {\n      IconComponent,\n      iconProps,\n      title,\n      titleTypographyProps,\n      subtitle,\n      subtitleTypographyProps,\n      dividerWrapperProps,\n      dividerProps,\n      contentWrapperProps,\n      titleWrapperProps,\n      buttonTitle,\n      buttonProps,\n      buttonIconProps,\n      onClick,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: iconSx, ...restIconProps } = iconProps || {};\n    const { sx: dividerWrapperSx, ...restDividerWrapperProps } = dividerWrapperProps || {};\n    const { sx: dividerSx, ...restDividerProps } = dividerProps || {};\n    const { sx: contentWrapperSx, ...restContentWrapperProps } = contentWrapperProps || {};\n    const { sx: titleWrapperSx, ...restTitleWrapperProps } = titleWrapperProps || {};\n    const { sx: titleSx, ...restTitleTypographyProps } = titleTypographyProps || {};\n    const { sx: subtitleSx, ...restSubtitleTypographyProps } = subtitleTypographyProps || {};\n\n    return (\n      <Box\n        sx={sxOverride(\n          {\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n            minWidth: '0',\n            cursor: 'pointer',\n            color: 'inherit',\n            textDecoration: 'unset',\n            gap: { xs: '8px', md: '16px' },\n            ...getInteractiveStyle(\n              {\n                hr: {\n                  backgroundColor: 'text.primary',\n                  height: '1px',\n                },\n                // interactive style from button.theme\n                '.MuiButton-navigation': {\n                  backgroundColor: 'transparent',\n                  color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os0' : 'onSurface.os900'),\n                  '& .MuiButton-startIcon': {\n                    transform: 'translateX(0px)',\n                  },\n                  '& .MuiButton-endIcon': {\n                    transform: 'translateX(0px)',\n                  },\n                },\n              },\n              {\n                hr: {\n                  backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary'),\n                  height: '2px',\n                },\n                '.MuiButton-navigation': {\n                  backgroundColor: 'transparent',\n                  color: (theme) => (theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700'),\n                  '.MuiButton-startIcon': {\n                    transform: 'translateX(-8px)',\n                  },\n                  '.MuiButton-endIcon': {\n                    transform: 'translateX(8px)',\n                  },\n                },\n              },\n            ),\n          },\n          sx,\n        )}\n        data-testid=\"QuickLink\"\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        {...(onClick && {\n          onClick: onClick,\n          role: 'button',\n        })}\n        tabIndex={-1}\n        {...rest}\n      >\n        <Box\n          sx={sxOverride(\n            {\n              position: 'relative',\n              width: '100%',\n              height: '2px',\n              // 32px gap from top if icon is hidden\n              '&&': { mb: { xs: 0, md: IconComponent ? 0 : 2 } },\n            },\n            dividerWrapperSx,\n          )}\n          {...restDividerWrapperProps}\n        >\n          <Box\n            component=\"hr\"\n            sx={sxOverride(\n              {\n                border: 'none',\n                position: 'absolute',\n                inset: '0',\n                m: 0,\n                // style is set via interactive parent\n              },\n              dividerSx,\n            )}\n            {...restDividerProps}\n          />\n        </Box>\n        <Box\n          sx={sxOverride({ width: '480px', maxWidth: '100%', pr: 3, pt: { xs: '8px', md: '0px' } }, contentWrapperSx)}\n          {...restContentWrapperProps}\n        >\n          <Box\n            sx={sxOverride(\n              {\n                display: 'flex',\n                flexDirection: { xs: 'row', md: 'column' },\n                alignItems: { xs: 'center', md: 'flex-start' },\n                gap: { xs: '4px', md: '18px' },\n                mb: { xs: '4px', md: 0 },\n              },\n              titleWrapperSx,\n            )}\n            {...restTitleWrapperProps}\n          >\n            {IconComponent && (\n              <IconComponent\n                sx={sxOverride(\n                  {\n                    display: 'block',\n                    fontSize: { xs: '20px', md: '35px' },\n                    mx: { xs: '2px', md: '0px' },\n                    my: { xs: '0px', md: '2px' },\n                  },\n                  iconSx,\n                )}\n                data-testid=\"QuickLink.icon\"\n                {...restIconProps}\n              />\n            )}\n            {title && (\n              <Typography\n                variant=\"h4\"\n                data-testid=\"QuickLink.title\"\n                sx={sxOverride({ display: 'block', mb: { xs: 0, md: 0.5 } }, titleSx)}\n                {...restTitleTypographyProps}\n              >\n                {title}\n              </Typography>\n            )}\n          </Box>\n          {subtitle && (\n            <Typography\n              variant=\"disclaimer1\"\n              data-testid=\"QuickLink.subtitle\"\n              sx={sxOverride({ display: 'block' }, subtitleSx)}\n              {...restSubtitleTypographyProps}\n            >\n              {subtitle}\n            </Typography>\n          )}\n        </Box>\n        {buttonTitle && (\n          <Button\n            variant=\"navigation\"\n            color=\"secondary\"\n            endIcon={<ArrowRightIcon />}\n            data-testid=\"QuickLink.button\"\n            {...buttonProps}\n          >\n            {buttonTitle}\n          </Button>\n        )}\n      </Box>\n    );\n  },\n);\n\nexport interface QuickLinkWrapperProps extends BoxProps<ElementType> {}\n\n/**\n * Wrapper container for 3 QuickLinks\n */\nexport const QuickLinkWrapper: React.FC<QuickLinkWrapperProps> = forwardRef(({ sx, children, ...rest }, ref) => {\n  return (\n    <Box\n      sx={sxOverride(\n        {\n          display: 'grid',\n          gridTemplateColumns: { xs: '1fr', lg: 'repeat(3, 1fr)' },\n          gap: 3,\n        },\n        sx,\n      )}\n      ref={ref}\n      data-testid=\"QuickLink.wrapper\"\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"names":["QuickLink","forwardRef","IconComponent","iconProps","title","titleTypographyProps","subtitle","subtitleTypographyProps","dividerWrapperProps","dividerProps","contentWrapperProps","titleWrapperProps","buttonTitle","buttonProps","buttonIconProps","onClick","sx","rest","ref","iconSx","restIconProps","dividerWrapperSx","restDividerWrapperProps","dividerSx","restDividerProps","contentWrapperSx","restContentWrapperProps","titleWrapperSx","restTitleWrapperProps","titleSx","restTitleTypographyProps","subtitleSx","restSubtitleTypographyProps","_jsxs","Box","sxOverride","display","flexDirection","alignItems","minWidth","cursor","color","textDecoration","gap","xs","md","getInteractiveStyle","hr","backgroundColor","height","theme","palette","mode","transform","role","tabIndex","children","_jsx","position","width","mb","component","border","inset","m","maxWidth","pr","pt","fontSize","mx","my","Typography","variant","Button","endIcon","ArrowRightIcon","QuickLinkWrapper","gridTemplateColumns","lg"],"mappings":"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"}

package/components/search/CollapsableSearch.js

@@ -1,2 +1,2 @@
-import{__rest as s}from"tslib";import{jsx as t}from"react/jsx-runtime";import{Box as i,Collapse as e}from"@mui/material";import{Search as o}from"./Search.js";const r=r=>{var{isCollapsed:n,searchProps:a,collapseProps:l}=r;const p=s(r,["isCollapsed","searchProps","collapseProps"])||{},{sx:c}=p,d=s(p,["sx"]),x=l||{},{sx:m}=x,f=s(x,["sx"]);return t(i,Object.assign({sx:Object.assign({width:"fit-content"},c)},d,{children:t(e,Object.assign({in:!n,orientation:"horizontal",collapsedSize:"44px",sx:Object.assign({borderRadius:"200px",display:"flex",justifyContent:"flex-end",width:"fit-content","& input":{width:"auto"}},m)},f,{children:t(o,Object.assign({disableInput:n},a))}))}))};export{r as CollapsableSearch};
+import{jsx as t}from"react/jsx-runtime";import{Box as i,Collapse as r}from"@mui/material";import{Search as e}from"./Search.js";import{sxOverride as o}from"../../utils/sxOverride/sxOverride.js";const s=({isCollapsed:s,searchProps:n,collapseProps:l,...p})=>{const{sx:a,...d}=p||{},{sx:x,...c}=l||{};return t(i,{sx:o({width:"fit-content"},a),...d,children:t(r,{in:!s,orientation:"horizontal",collapsedSize:"44px",sx:o({borderRadius:"200px",display:"flex",justifyContent:"flex-end",width:"fit-content","& input":{width:"auto"}},x),...c,children:t(e,{disableInput:s,...n})})})};export{s as CollapsableSearch};
 //# sourceMappingURL=CollapsableSearch.js.map

package/components/search/CollapsableSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsableSearch.js","sources":["../../../src/components/search/CollapsableSearch.tsx"],"sourcesContent":["import { Box, BoxProps, Collapse, CollapseProps } from '@mui/material';\nimport React from 'react';\nimport { Search, SearchProps } from './Search';\n\nexport interface CollapsableSearchProps extends BoxProps {\n  /**\n   * Defines whether the search should be collapsed or not\n   */\n  isCollapsed: boolean;\n  /**\n   * Properties of Search component\n   *\n   * @see Search\n   */\n  searchProps?: SearchProps;\n  /**\n   * Properties of Mui Collapse component\n   *\n   * @see Collapse https://mui.com/material-ui/api/collapse/\n   */\n  collapseProps?: CollapseProps;\n}\n\nexport const CollapsableSearch: React.FC<CollapsableSearchProps> = ({\n  isCollapsed,\n  searchProps,\n  collapseProps,\n  ...boxProps\n}) => {\n  const { sx: boxSx, ...restBoxProps } = boxProps || {};\n  const { sx: collapseSx, ...restCollapseProps } = collapseProps || {};\n\n  return (\n    <Box sx={{ width: 'fit-content', ...boxSx }} {...restBoxProps}>\n      <Collapse\n        in={!isCollapsed}\n        orientation=\"horizontal\"\n        collapsedSize=\"44px\"\n        sx={{\n          borderRadius: '200px',\n          display: 'flex',\n          justifyContent: 'flex-end',\n          width: 'fit-content',\n          '& input': {\n            width: 'auto',\n          },\n          ...collapseSx,\n        }}\n        {...restCollapseProps}\n      >\n        <Search disableInput={isCollapsed} {...searchProps} />\n      </Collapse>\n    </Box>\n  );\n};\n"],"names":["CollapsableSearch","_a","isCollapsed","searchProps","collapseProps","_b","__rest","sx","boxSx","restBoxProps","_c","collapseSx","restCollapseProps","_jsx","Box","Object","assign","width","children","Collapse","in","orientation","collapsedSize","borderRadius","display","justifyContent","Search","disableInput"],"mappings":"8JAuBO,MAAMA,EAAuDC,QAAAC,YAClEA,EAAWC,YACXA,EAAWC,cACXA,KAGA,MAAMC,EAFKC,EAAAL,EAJuD,CAAA,cAAA,cAAA,mBAMf,IAA3CM,GAAIC,KAAUC,EAAYH,EAAAD,EAA5B,CAAA,OACAK,EAA2CN,GAAiB,IAA1DG,GAAII,KAAeC,EAAiBN,EAAAI,EAAtC,CAAA,OAEN,OACEG,EAACC,EAAGC,OAAAC,OAAA,CAACT,GAAEQ,OAAAC,OAAA,CAAIC,MAAO,eAAkBT,IAAaC,EAAY,CAAAS,SAC3DL,EAACM,EAAQJ,OAAAC,OAAA,CACPI,IAAKlB,EACLmB,YAAY,aACZC,cAAc,OACdf,GAAEQ,OAAAC,OAAA,CACAO,aAAc,QACdC,QAAS,OACTC,eAAgB,WAChBR,MAAO,cACP,UAAW,CACTA,MAAO,SAENN,IAEDC,EAAiB,CAAAM,SAErBL,EAACa,EAAMX,OAAAC,OAAA,CAACW,aAAczB,GAAiBC"}
+{"version":3,"file":"CollapsableSearch.js","sources":["../../../src/components/search/CollapsableSearch.tsx"],"sourcesContent":["import { Box, BoxProps, Collapse, CollapseProps } from '@mui/material';\nimport React from 'react';\nimport { Search, SearchProps } from './Search';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface CollapsableSearchProps extends BoxProps {\n  /**\n   * Defines whether the search should be collapsed or not\n   */\n  isCollapsed: boolean;\n  /**\n   * Properties of Search component\n   *\n   * @see Search\n   */\n  searchProps?: SearchProps;\n  /**\n   * Properties of Mui Collapse component\n   *\n   * @see Collapse https://mui.com/material-ui/api/collapse/\n   */\n  collapseProps?: CollapseProps;\n}\n\nexport const CollapsableSearch: React.FC<CollapsableSearchProps> = ({\n  isCollapsed,\n  searchProps,\n  collapseProps,\n  ...boxProps\n}) => {\n  const { sx: boxSx, ...restBoxProps } = boxProps || {};\n  const { sx: collapseSx, ...restCollapseProps } = collapseProps || {};\n\n  return (\n    <Box sx={sxOverride({ width: 'fit-content' }, boxSx)} {...restBoxProps}>\n      <Collapse\n        in={!isCollapsed}\n        orientation=\"horizontal\"\n        collapsedSize=\"44px\"\n        sx={sxOverride(\n          {\n            borderRadius: '200px',\n            display: 'flex',\n            justifyContent: 'flex-end',\n            width: 'fit-content',\n            '& input': {\n              width: 'auto',\n            },\n          },\n          collapseSx,\n        )}\n        {...restCollapseProps}\n      >\n        <Search disableInput={isCollapsed} {...searchProps} />\n      </Collapse>\n    </Box>\n  );\n};\n"],"names":["CollapsableSearch","isCollapsed","searchProps","collapseProps","boxProps","sx","boxSx","restBoxProps","collapseSx","restCollapseProps","_jsx","Box","sxOverride","width","children","Collapse","in","orientation","collapsedSize","borderRadius","display","justifyContent","Search","disableInput"],"mappings":"iMAwBO,MAAMA,EAAsD,EACjEC,cACAC,cACAC,mBACGC,MAEH,MAAQC,GAAIC,KAAUC,GAAiBH,GAAY,CAAA,GAC3CC,GAAIG,KAAeC,GAAsBN,GAAiB,CAAA,EAElE,OACEO,EAACC,EAAG,CAACN,GAAIO,EAAW,CAAEC,MAAO,eAAiBP,MAAYC,EAAYO,SACpEJ,EAACK,GACCC,IAAKf,EACLgB,YAAY,aACZC,cAAc,OACdb,GAAIO,EACF,CACEO,aAAc,QACdC,QAAS,OACTC,eAAgB,WAChBR,MAAO,cACP,UAAW,CACTA,MAAO,SAGXL,MAEEC,EAAiBK,SAErBJ,EAACY,EAAM,CAACC,aAActB,KAAiBC"}

package/components/search/Search.d.ts

@@ -1,4 +1,4 @@
-import { StandardTextFieldProps, SvgIconProps } from '@mui/material';
+import { IconButtonProps, StandardTextFieldProps, SvgIconProps } from '@mui/material';
 import React, { ComponentType } from 'react';
 export type SearchProps = Omit<StandardTextFieldProps, 'onChange' | 'variant' | 'value' | 'size'> & {
     /**
@@ -67,5 +67,13 @@ export type SearchProps = Omit<StandardTextFieldProps, 'onChange' | 'variant' |
      * Node for search icon
      */
     CancelIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Properties passed to the search icon button
+     */
+    searchIconButtonProps?: IconButtonProps;
+    /**
+     * Properties passed to the cancel icon button
+     */
+    cancelIconButtonProps?: IconButtonProps;
 };
 export declare const Search: React.FC<SearchProps>;

package/components/search/Search.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as n}from"react/jsx-runtime";import{CloseIcon as a}from"../icon/stroke/CloseIcon.js";import{SearchIcon as r}from"../icon/stroke/SearchIcon.js";import{TextField as s,InputAdornment as o,IconButton as t}from"@mui/material";import{forwardRef as i,useState as l,useDeferredValue as c,useMemo as p,useEffect as d,useCallback as u}from"react";import b from"../../utils/useDebounce/useDebounce.js";import{updateFocusRingStyle as m}from"../focusring/focusring.js";import{getInteractiveStyle as g}from"../../materialui/button/interactive.js";const h=i((i,h)=>{var{debounce:x=0,defaultValue:j="",cancelIconProps:f={},CancelIconComponent:C,disableInput:O,onCancel:v,onSearch:I,onChange:P,searchIconProps:S={},SearchIconComponent:k,slotProps:w,sx:y,value:D="",variant:z}=i,A=e(i,["debounce","defaultValue","cancelIconProps","CancelIconComponent","disableInput","onCancel","onSearch","onChange","searchIconProps","SearchIconComponent","slotProps","sx","value","variant"]);const M=k||r,V=C||a,[N,R]=l(j||D),U=c(N),q=b(N,x),{sx:B}=S,E=e(S,["sx"]),F=w||{},{input:G={}}=F,H=e(F,["input"]),J=p(()=>{switch(z){case"transparent":return{bgcolor:"transparent.primary"};case"mapShadow":return{bgcolor:"onSurface.os0",boxShadow:e=>e.flowShadows.l};default:return{bgcolor:"surface.primary"}}},[z]);d(()=>{null==P||P(x<=0?U:q)},[x<=0?U:q]);const K=u(e=>{e.preventDefault(),e.stopPropagation(),null==I||I(N)},[N]);return n(s,Object.assign({onChange:e=>R(e.target.value),ref:h,sx:Object.assign(Object.assign({position:"relative",borderRadius:"200px",border:1,borderColor:(null==A?void 0:A.disabled)?"disabled.primary":"onSurface.os500",py:"5px",pl:"14px",pr:"4px",mb:0,"&&&":Object.assign({},m(1,!1,"&:has(.Mui-focused)"))},J),y)},A,{value:N,variant:"standard",slotProps:Object.assign(Object.assign(Object.assign({},G),{input:{className:""+(""!==N?"filled":""),disabled:O||(null==A?void 0:A.disabled),inputProps:Object.assign(Object.assign({},"inputProps"in G&&Object.assign({},G.inputProps)),{sx:Object.assign({p:0,ml:1,color:"text.primary","&::-webkit-input-placeholder":{color:"onSurface.os700"},"&.Mui-disabled":{"&, &::-webkit-input-placeholder":{color:"disabled.tertiary"}}},"inputProps"in G&&"sx"in G.inputProps&&Object.assign({},G.inputProps.sx))}),disableUnderline:!0,startAdornment:n(o,{position:"start",sx:{transition:"all .4s ease",mr:"0"},children:n(t,{disabled:null==A?void 0:A.disabled,tabIndex:I?0:-1,onClick:K,size:"medium","aria-label":"Search",sx:Object.assign(Object.assign({width:"34px",height:"34px"},m("0px")),g({backgroundColor:"transparent.transparent"},{backgroundColor:"transparent.transparent"})),children:n(M,Object.assign({sx:Object.assign({transition:"all .5s ease"},B)},E))})}),endAdornment:n(o,{position:"end",sx:{opacity:""!==N?"1":"0",transition:"opacity .3s ease"},children:n(t,{disabled:""===N||(null==A?void 0:A.disabled),onClick:()=>{R(""),null==v||v()},size:"medium",tabIndex:O?-1:0,"aria-label":"Clear search",sx:Object.assign(Object.assign({cursor:""!==N?"pointer":"default",width:"34px",height:"34px"},m("0px")),g({backgroundColor:"transparent.transparent"},{backgroundColor:"transparent.transparent"})),children:n(V,Object.assign({},f))})})}}),H)}))});export{h as Search};
+import{jsx as r}from"react/jsx-runtime";import{CloseIcon as o}from"../icon/stroke/CloseIcon.js";import{SearchIcon as e}from"../icon/stroke/SearchIcon.js";import{TextField as a,InputAdornment as n,IconButton as t}from"@mui/material";import{sxOverride as s}from"../../utils/sxOverride/sxOverride.js";import{forwardRef as i,useState as p,useDeferredValue as l,useMemo as c,useEffect as d,useCallback as u}from"react";import m from"../../utils/useDebounce/useDebounce.js";import{updateFocusRingStyle as b}from"../focusring/focusring.js";import{getInteractiveStyle as x}from"../../materialui/button/interactive.js";const h=i(({debounce:i=0,defaultValue:h="",cancelIconProps:f={},cancelIconButtonProps:g,CancelIconComponent:C,disableInput:P,onCancel:v,onSearch:I,onChange:k,searchIconProps:S={},searchIconButtonProps:w,SearchIconComponent:y,slotProps:j,sx:D,value:z="",variant:A,...B},M)=>{const O=y||e,N=C||o,[R,U]=p(h||z),V=l(R),q=m(R,i),{sx:E,...F}=S,{sx:G,...H}=w??{},{sx:J,...K}=g??{},{input:L={},...Q}=j||{},T=c(()=>{switch(A){case"transparent":return{bgcolor:"transparent.primary"};case"mapShadow":return{bgcolor:"onSurface.os0",boxShadow:r=>r.flowShadows.l};default:return{bgcolor:"surface.primary"}}},[A]);d(()=>{k?.(i<=0?V:q)},[i<=0?V:q]);const W=u(r=>{r.preventDefault(),r.stopPropagation(),I?.(R)},[R]);return r(a,{onChange:r=>U(r.target.value),ref:M,sx:s({position:"relative",borderRadius:"200px",border:1,borderColor:B?.disabled?"disabled.primary":"onSurface.os500",py:"5px",pl:"14px",pr:"4px",mb:0,"&&&":{...b(1,!1,"&:has(.Mui-focused)")},...T},D),...B,value:R,variant:"standard",slotProps:{...L,input:{className:""+(""!==R?"filled":""),disabled:P||B?.disabled,inputProps:{..."inputProps"in L&&{...L.inputProps},sx:s({p:0,ml:1,color:"text.primary","&::-webkit-input-placeholder":{color:"onSurface.os700"},"&.Mui-disabled":{"&, &::-webkit-input-placeholder":{color:"disabled.tertiary"}}},"inputProps"in L&&"sx"in L.inputProps?L.inputProps.sx:void 0)},disableUnderline:!0,startAdornment:r(n,{position:"start",sx:{transition:"all .4s ease",mr:"0"},children:r(t,{disabled:B?.disabled,tabIndex:I?0:-1,onClick:W,size:"medium","aria-label":"Search",...H,sx:s({width:"34px",height:"34px",...b("0px"),...x({backgroundColor:"transparent.transparent"},{backgroundColor:"transparent.transparent"})},G),children:r(O,{sx:s({transition:"all .5s ease"},E),...F})})}),endAdornment:r(n,{position:"end",sx:{opacity:""!==R?"1":"0",transition:"opacity .3s ease"},children:r(t,{disabled:""===R||B?.disabled,onClick:()=>{U(""),v?.()},size:"medium",tabIndex:P?-1:0,"aria-label":"Clear search",...K,sx:s({cursor:""!==R?"pointer":"default",width:"34px",height:"34px",...b("0px"),...x({backgroundColor:"transparent.transparent"},{backgroundColor:"transparent.transparent"})},J),children:r(N,{...f})})})},...Q}})});export{h as Search};
 //# sourceMappingURL=Search.js.map

package/components/search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../../src/components/search/Search.tsx"],"sourcesContent":["import { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { SearchIcon as FlowSearchIcon } from '@/src/components/icon/stroke/SearchIcon';\nimport { IconButton, InputAdornment, StandardTextFieldProps, SvgIconProps, TextField } from '@mui/material';\nimport React, {\n  forwardRef,\n  MouseEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  useDeferredValue,\n  ComponentType,\n} from 'react';\nimport useDebounce from '../../utils/useDebounce/useDebounce';\nimport { updateFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport type SearchProps = Omit<StandardTextFieldProps, 'onChange' | 'variant' | 'value' | 'size'> & {\n  /**\n   *  Defines whether the input is disabled or not\n   */\n  disableInput?: boolean;\n  /**\n   * Defines the time (ms) of debounce for the onChange effect\n   * When debounce is 0, Search uses useDeferredValue instead.\n   *\n   * @see useDeferedValue\n   * @default 0\n   */\n  debounce?: number;\n  /**\n   * Click handler for the cancel button\n   */\n  onCancel?: () => void;\n  /**\n   * Click handler for the search button\n   *\n   * @param value the current value of search input\n   */\n  onSearch?: (value: string) => void | boolean;\n  /**\n   * Function that will bed called on every change of value, can be debounced by debounce value\n   * If debounce is set to 0, the onChange is being called when deferred value changes\n   *\n   * @see debounce\n   *\n   * @param value current value of searchbar\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Defines which variant of Searchbar component should be rendered\n   * @default solid\n   */\n  variant?: 'solid' | 'transparent' | 'mapShadow';\n  /**\n   * Defines default value in the initial render\n   * If set along with `value` property the `defaultValue` field takes precedence\n   *\n   * @see value\n   */\n  defaultValue?: string;\n  /**\n   * Overrides TextField value property so it can be string only\n   * If set along with `defaultValue` property the `defaultValue` field takes precedence\n   *\n   * @see defaultValue\n   */\n  value?: string;\n  /**\n   * Properties passed to the search icon\n   */\n  searchIconProps?: SvgIconProps;\n  /**\n   * Node for search icon\n   */\n  SearchIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties passed to the cancel icon\n   */\n  cancelIconProps?: SvgIconProps;\n  /**\n   * Node for search icon\n   */\n  CancelIconComponent?: ComponentType<SvgIconProps>;\n};\n\nexport const Search: React.FC<SearchProps> = forwardRef(\n  (\n    {\n      debounce = 0,\n      defaultValue = '',\n      cancelIconProps = {},\n      CancelIconComponent,\n      disableInput,\n      onCancel,\n      onSearch,\n      onChange,\n      searchIconProps = {},\n      SearchIconComponent,\n      slotProps,\n      sx,\n      value = '',\n      variant,\n      ...rest\n    },\n    ref,\n  ) => {\n    const SearchIcon = SearchIconComponent || FlowSearchIcon;\n    const CancelIcon = CancelIconComponent || CloseIcon;\n\n    const [search, setSearch] = useState(defaultValue || value);\n\n    const deferredValue = useDeferredValue(search);\n    const debouncedValue = useDebounce(search, debounce);\n\n    const { sx: searchIconSx, ...restSearchIconProps } = searchIconProps;\n    const { input: slotPropsInput = {}, ...restSlot } = slotProps || {};\n\n    const variantStyle = useMemo(() => {\n      switch (variant) {\n        case 'transparent':\n          return { bgcolor: 'transparent.primary' };\n        case 'mapShadow':\n          return { bgcolor: 'onSurface.os0', boxShadow: (theme) => theme.flowShadows.l };\n        default: // solid\n          return { bgcolor: 'surface.primary' };\n      }\n    }, [variant]);\n\n    // if debounce is set use debouncedValue otherwise use deferredValue as dependency and as value\n    useEffect(() => {\n      onChange?.(debounce <= 0 ? deferredValue : debouncedValue);\n    }, [debounce <= 0 ? deferredValue : debouncedValue]);\n\n    // this handler is assigned to the magnifier button\n    const handleSearchIconClick: MouseEventHandler = useCallback(\n      (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n\n        onSearch?.(search);\n      },\n      [search],\n    );\n\n    // this handler is assigned to 'X' button\n    const handleCancelIconClick = () => {\n      setSearch('');\n      onCancel?.();\n    };\n\n    return (\n      <TextField\n        onChange={(e) => setSearch(e.target.value)}\n        ref={ref}\n        sx={{\n          position: 'relative',\n          borderRadius: '200px',\n          border: 1,\n          borderColor: rest?.disabled ? 'disabled.primary' : 'onSurface.os500',\n          py: '5px',\n          pl: '14px',\n          pr: '4px',\n          mb: 0,\n          // focus ring\n          '&&&': {\n            ...updateFocusRingStyle(1, false, '&:has(.Mui-focused)'),\n          },\n          ...variantStyle,\n          ...sx,\n        }}\n        {...rest}\n        value={search}\n        variant=\"standard\"\n        slotProps={{\n          ...slotPropsInput,\n          input: {\n            className: `${search !== '' ? 'filled' : ''}`,\n            disabled: disableInput || rest?.disabled,\n            inputProps: {\n              ...('inputProps' in slotPropsInput && { ...slotPropsInput.inputProps }),\n              sx: {\n                p: 0,\n                ml: 1,\n                color: 'text.primary',\n                '&::-webkit-input-placeholder': {\n                  color: 'onSurface.os700',\n                },\n                '&.Mui-disabled': {\n                  '&, &::-webkit-input-placeholder': {\n                    color: 'disabled.tertiary',\n                  },\n                },\n                ...('inputProps' in slotPropsInput &&\n                  'sx' in slotPropsInput.inputProps && { ...slotPropsInput.inputProps.sx }),\n              },\n            },\n            disableUnderline: true,\n            startAdornment: (\n              <InputAdornment\n                position=\"start\"\n                sx={{\n                  transition: 'all .4s ease',\n                  mr: '0',\n                }}\n              >\n                <IconButton\n                  disabled={rest?.disabled}\n                  tabIndex={!onSearch ? -1 : 0}\n                  onClick={handleSearchIconClick}\n                  size=\"medium\"\n                  aria-label=\"Search\"\n                  sx={{\n                    width: '34px',\n                    height: '34px',\n                    ...updateFocusRingStyle('0px'),\n                    ...getInteractiveStyle(\n                      {\n                        backgroundColor: 'transparent.transparent',\n                      },\n                      {\n                        backgroundColor: 'transparent.transparent',\n                      },\n                    ),\n                  }}\n                >\n                  <SearchIcon\n                    sx={{\n                      transition: 'all .5s ease',\n                      ...searchIconSx,\n                    }}\n                    {...restSearchIconProps}\n                  />\n                </IconButton>\n              </InputAdornment>\n            ),\n            endAdornment: (\n              <InputAdornment\n                position=\"end\"\n                sx={{\n                  opacity: search !== '' ? '1' : '0',\n                  transition: 'opacity .3s ease',\n                }}\n              >\n                <IconButton\n                  disabled={search === '' || rest?.disabled}\n                  onClick={handleCancelIconClick}\n                  size=\"medium\"\n                  tabIndex={disableInput ? -1 : 0}\n                  aria-label=\"Clear search\"\n                  sx={{\n                    cursor: search !== '' ? 'pointer' : 'default',\n                    width: '34px',\n                    height: '34px',\n                    ...updateFocusRingStyle('0px'),\n                    ...getInteractiveStyle(\n                      {\n                        backgroundColor: 'transparent.transparent',\n                      },\n                      {\n                        backgroundColor: 'transparent.transparent',\n                      },\n                    ),\n                  }}\n                >\n                  <CancelIcon {...cancelIconProps} />\n                </IconButton>\n              </InputAdornment>\n            ),\n          },\n          ...restSlot,\n        }}\n      />\n    );\n  },\n);\n"],"names":["Search","forwardRef","_a","ref","debounce","defaultValue","cancelIconProps","CancelIconComponent","disableInput","onCancel","onSearch","onChange","searchIconProps","SearchIconComponent","slotProps","sx","value","variant","rest","__rest","SearchIcon","FlowSearchIcon","CancelIcon","CloseIcon","search","setSearch","useState","deferredValue","useDeferredValue","debouncedValue","useDebounce","searchIconSx","restSearchIconProps","_b","input","slotPropsInput","restSlot","variantStyle","useMemo","bgcolor","boxShadow","theme","flowShadows","l","useEffect","handleSearchIconClick","useCallback","e","preventDefault","stopPropagation","_jsx","TextField","Object","assign","target","position","borderRadius","border","borderColor","disabled","py","pl","pr","mb","updateFocusRingStyle","className","inputProps","p","ml","color","disableUnderline","startAdornment","InputAdornment","transition","mr","children","IconButton","tabIndex","onClick","size","width","height","getInteractiveStyle","backgroundColor","endAdornment","opacity","cursor"],"mappings":"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"}
+{"version":3,"file":"Search.js","sources":["../../../src/components/search/Search.tsx"],"sourcesContent":["import { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { SearchIcon as FlowSearchIcon } from '@/src/components/icon/stroke/SearchIcon';\nimport { IconButton, IconButtonProps, InputAdornment, StandardTextFieldProps, SvgIconProps, TextField } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport React, {\n  forwardRef,\n  MouseEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  useDeferredValue,\n  ComponentType,\n} from 'react';\nimport useDebounce from '../../utils/useDebounce/useDebounce';\nimport { updateFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport type SearchProps = Omit<StandardTextFieldProps, 'onChange' | 'variant' | 'value' | 'size'> & {\n  /**\n   *  Defines whether the input is disabled or not\n   */\n  disableInput?: boolean;\n  /**\n   * Defines the time (ms) of debounce for the onChange effect\n   * When debounce is 0, Search uses useDeferredValue instead.\n   *\n   * @see useDeferedValue\n   * @default 0\n   */\n  debounce?: number;\n  /**\n   * Click handler for the cancel button\n   */\n  onCancel?: () => void;\n  /**\n   * Click handler for the search button\n   *\n   * @param value the current value of search input\n   */\n  onSearch?: (value: string) => void | boolean;\n  /**\n   * Function that will bed called on every change of value, can be debounced by debounce value\n   * If debounce is set to 0, the onChange is being called when deferred value changes\n   *\n   * @see debounce\n   *\n   * @param value current value of searchbar\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Defines which variant of Searchbar component should be rendered\n   * @default solid\n   */\n  variant?: 'solid' | 'transparent' | 'mapShadow';\n  /**\n   * Defines default value in the initial render\n   * If set along with `value` property the `defaultValue` field takes precedence\n   *\n   * @see value\n   */\n  defaultValue?: string;\n  /**\n   * Overrides TextField value property so it can be string only\n   * If set along with `defaultValue` property the `defaultValue` field takes precedence\n   *\n   * @see defaultValue\n   */\n  value?: string;\n  /**\n   * Properties passed to the search icon\n   */\n  searchIconProps?: SvgIconProps;\n  /**\n   * Node for search icon\n   */\n  SearchIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties passed to the cancel icon\n   */\n  cancelIconProps?: SvgIconProps;\n  /**\n   * Node for search icon\n   */\n  CancelIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties passed to the search icon button\n   */\n  searchIconButtonProps?: IconButtonProps;\n  /**\n   * Properties passed to the cancel icon button\n   */\n  cancelIconButtonProps?: IconButtonProps;\n};\n\nexport const Search: React.FC<SearchProps> = forwardRef(\n  (\n    {\n      debounce = 0,\n      defaultValue = '',\n      cancelIconProps = {},\n      cancelIconButtonProps,\n      CancelIconComponent,\n      disableInput,\n      onCancel,\n      onSearch,\n      onChange,\n      searchIconProps = {},\n      searchIconButtonProps,\n      SearchIconComponent,\n      slotProps,\n      sx,\n      value = '',\n      variant,\n      ...rest\n    },\n    ref,\n  ) => {\n    const SearchIcon = SearchIconComponent || FlowSearchIcon;\n    const CancelIcon = CancelIconComponent || CloseIcon;\n\n    const [search, setSearch] = useState(defaultValue || value);\n\n    const deferredValue = useDeferredValue(search);\n    const debouncedValue = useDebounce(search, debounce);\n\n    const { sx: searchIconSx, ...restSearchIconProps } = searchIconProps;\n    const { sx: searchIconButtonSx, ...restSearchIconButtonProps } = searchIconButtonProps ?? {};\n    const { sx: cancelIconButtonSx, ...restCancelIconButtonProps } = cancelIconButtonProps ?? {};\n    const { input: slotPropsInput = {}, ...restSlot } = slotProps || {};\n\n    const variantStyle = useMemo(() => {\n      switch (variant) {\n        case 'transparent':\n          return { bgcolor: 'transparent.primary' };\n        case 'mapShadow':\n          return { bgcolor: 'onSurface.os0', boxShadow: (theme) => theme.flowShadows.l };\n        default: // solid\n          return { bgcolor: 'surface.primary' };\n      }\n    }, [variant]);\n\n    // if debounce is set use debouncedValue otherwise use deferredValue as dependency and as value\n    useEffect(() => {\n      onChange?.(debounce <= 0 ? deferredValue : debouncedValue);\n    }, [debounce <= 0 ? deferredValue : debouncedValue]);\n\n    // this handler is assigned to the magnifier button\n    const handleSearchIconClick: MouseEventHandler = useCallback(\n      (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n\n        onSearch?.(search);\n      },\n      [search],\n    );\n\n    // this handler is assigned to 'X' button\n    const handleCancelIconClick = () => {\n      setSearch('');\n      onCancel?.();\n    };\n\n    return (\n      <TextField\n        onChange={(e) => setSearch(e.target.value)}\n        ref={ref}\n        sx={sxOverride(\n          {\n            position: 'relative',\n            borderRadius: '200px',\n            border: 1,\n            borderColor: rest?.disabled ? 'disabled.primary' : 'onSurface.os500',\n            py: '5px',\n            pl: '14px',\n            pr: '4px',\n            mb: 0,\n            // focus ring\n            '&&&': {\n              ...updateFocusRingStyle(1, false, '&:has(.Mui-focused)'),\n            },\n            ...variantStyle,\n          },\n          sx,\n        )}\n        {...rest}\n        value={search}\n        variant=\"standard\"\n        slotProps={{\n          ...slotPropsInput,\n          input: {\n            className: `${search !== '' ? 'filled' : ''}`,\n            disabled: disableInput || rest?.disabled,\n            inputProps: {\n              ...('inputProps' in slotPropsInput && { ...slotPropsInput.inputProps }),\n              sx: sxOverride(\n                {\n                  p: 0,\n                  ml: 1,\n                  color: 'text.primary',\n                  '&::-webkit-input-placeholder': {\n                    color: 'onSurface.os700',\n                  },\n                  '&.Mui-disabled': {\n                    '&, &::-webkit-input-placeholder': {\n                      color: 'disabled.tertiary',\n                    },\n                  },\n                },\n                'inputProps' in slotPropsInput && 'sx' in slotPropsInput.inputProps\n                  ? slotPropsInput.inputProps.sx\n                  : undefined,\n              ),\n            },\n            disableUnderline: true,\n            startAdornment: (\n              <InputAdornment\n                position=\"start\"\n                sx={{\n                  transition: 'all .4s ease',\n                  mr: '0',\n                }}\n              >\n                <IconButton\n                  disabled={rest?.disabled}\n                  tabIndex={!onSearch ? -1 : 0}\n                  onClick={handleSearchIconClick}\n                  size=\"medium\"\n                  aria-label=\"Search\"\n                  {...restSearchIconButtonProps}\n                  sx={sxOverride(\n                    {\n                      width: '34px',\n                      height: '34px',\n                      ...updateFocusRingStyle('0px'),\n                      ...getInteractiveStyle(\n                        {\n                          backgroundColor: 'transparent.transparent',\n                        },\n                        {\n                          backgroundColor: 'transparent.transparent',\n                        },\n                      ),\n                    },\n                    searchIconButtonSx,\n                  )}\n                >\n                  <SearchIcon\n                    sx={sxOverride(\n                      {\n                        transition: 'all .5s ease',\n                      },\n                      searchIconSx,\n                    )}\n                    {...restSearchIconProps}\n                  />\n                </IconButton>\n              </InputAdornment>\n            ),\n            endAdornment: (\n              <InputAdornment\n                position=\"end\"\n                sx={{\n                  opacity: search !== '' ? '1' : '0',\n                  transition: 'opacity .3s ease',\n                }}\n              >\n                <IconButton\n                  disabled={search === '' || rest?.disabled}\n                  onClick={handleCancelIconClick}\n                  size=\"medium\"\n                  tabIndex={disableInput ? -1 : 0}\n                  aria-label=\"Clear search\"\n                  {...restCancelIconButtonProps}\n                  sx={sxOverride(\n                    {\n                      cursor: search !== '' ? 'pointer' : 'default',\n                      width: '34px',\n                      height: '34px',\n                      ...updateFocusRingStyle('0px'),\n                      ...getInteractiveStyle(\n                        {\n                          backgroundColor: 'transparent.transparent',\n                        },\n                        {\n                          backgroundColor: 'transparent.transparent',\n                        },\n                      ),\n                    },\n                    cancelIconButtonSx,\n                  )}\n                >\n                  <CancelIcon {...cancelIconProps} />\n                </IconButton>\n              </InputAdornment>\n            ),\n          },\n          ...restSlot,\n        }}\n      />\n    );\n  },\n);\n"],"names":["Search","forwardRef","debounce","defaultValue","cancelIconProps","cancelIconButtonProps","CancelIconComponent","disableInput","onCancel","onSearch","onChange","searchIconProps","searchIconButtonProps","SearchIconComponent","slotProps","sx","value","variant","rest","ref","SearchIcon","FlowSearchIcon","CancelIcon","CloseIcon","search","setSearch","useState","deferredValue","useDeferredValue","debouncedValue","useDebounce","searchIconSx","restSearchIconProps","searchIconButtonSx","restSearchIconButtonProps","cancelIconButtonSx","restCancelIconButtonProps","input","slotPropsInput","restSlot","variantStyle","useMemo","bgcolor","boxShadow","theme","flowShadows","l","useEffect","handleSearchIconClick","useCallback","e","preventDefault","stopPropagation","_jsx","TextField","target","sxOverride","position","borderRadius","border","borderColor","disabled","py","pl","pr","mb","updateFocusRingStyle","className","inputProps","p","ml","color","undefined","disableUnderline","startAdornment","InputAdornment","transition","mr","children","IconButton","tabIndex","onClick","size","width","height","getInteractiveStyle","backgroundColor","endAdornment","opacity","cursor"],"mappings":"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"}

package/components/secondaryNavigation/SecondaryNavigation.js

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

package/components/secondaryNavigation/SecondaryNavigation.js.map

@@ -1 +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   * 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   * 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      buttons,\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) => {\n          if (child?.type === Fragment) {\n            result.push(...flatten(child.props.children));\n          } else {\n            result.push(child);\n          }\n        });\n        return result;\n      }\n      return flatten(children);\n    }, [children]);\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 && (\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}\n            </Box>\n          )}\n        </Toolbar>\n      </AppBar>\n    );\n  },\n);\n"],"names":["SecondaryNavigation","forwardRef","_a","ref","children","sx","title","buttons","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","type","Fragment","push","props","_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":"kQAiDO,MAAMA,EAAoDC,EAC/D,CACEC,EAYAC,SAZAC,SACEA,EAAQC,GACRA,EAAEC,MACFA,EAAKC,QACLA,EAAOC,YACPA,GAAc,EAAKC,aACnBA,EAAYC,WACZA,EAAUC,aACVA,EAAYC,aACZA,KACGC,EAAIC,EAAAZ,EAVT,CAAA,WAAA,KAAA,QAAA,UAAA,cAAA,eAAA,aAAA,eAAA,iBAcA,MAAMa,EAAgCL,QAAAA,EAAc,IAA5CL,GAAIW,GAAOD,EAAKE,EAASH,EAAAC,EAA3B,CAAA,OACAG,EAAoCT,QAAAA,EAAgB,IAAlDJ,GAAIc,GAASD,EAAKE,EAAWN,EAAAI,EAA/B,CAAA,OACAG,EAAoCV,QAAAA,EAAgB,IAAlDN,GAAIiB,GAASD,EAAKE,EAAWT,EAAAO,EAA/B,CAAA,OACAG,EAAoCZ,QAAAA,EAAgB,IAAlDP,GAAIoB,GAASD,EAAKE,EAAWZ,EAAAU,EAA/B,CAAA,QACCG,EAAWC,GAAgBC,EAAS,GAKrCC,EAAaC,EAAQ,IACzB,SAASC,EAAQC,GACf,MAAMC,EAAS,GAQf,OAPAC,EAASC,QAAQH,EAAQI,KACnBA,aAAK,EAALA,EAAOC,QAASC,EAClBL,EAAOM,QAAQR,EAAQK,EAAMI,MAAMrC,WAEnC8B,EAAOM,KAAKH,KAGTH,CACT,CACOF,CAAQ5B,GACd,CAACA,IAEJ,OACEsC,EAACC,EAAMC,OAAAC,OAAA,CACLxC,GAAEuC,OAAAC,OAAA,CAEAC,OAASC,GAAUA,EAAMD,OAAOE,OAAS,IACtC3C,GAELF,IAAKA,EAAG,cACI,sBAAqB,aACtB,uBACX8C,KAAK,SACDpC,YAEJqC,EAACC,EAAOP,OAAAC,OAAA,CACNxC,GAAEuC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,KACMf,eAAAA,EAAYsB,SAAU,CAC1BC,SAAU,CAAEC,GAAI,OAAQC,GAAI,UAC5BC,GAAI,CAAEF,GAAI,EAAGC,GAAI,KAEhBpC,GAELsC,gBAAiBjD,EAAW,cAChB,+BACRY,EAAW,CAAAhB,SAAA,CAEdE,GACCoC,EAACgB,EAAUd,OAAAC,OAAA,CAAA,cACG,4BACZc,QAAQ,cACRtD,GAAEuC,OAAAC,OAAA,CACAe,QAAS,QAETC,SAAU,CAAEP,GAAI,IAAKC,GAAI,KACzBO,WAAY,KACT9C,IAEDC,EAAS,CAAAb,SAEZE,QAGFwB,eAAAA,EAAYsB,SACbV,EAACqB,EAAInB,OAAAC,OAAA,CACHmB,MAAOrC,EACPsC,SAAU,CAACC,EAAGC,IAAMvC,EAAauC,GACjCC,SAAS,aACT/D,GAAEuC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CACAgB,SAAU,IAEVQ,UAAW,CAAEf,GAAI,OAAQC,GAAI,QAC7Be,MAAO,CAAEhB,GAAI,IAAKC,GAAI,KAEtBgB,eAAgB,CAAEjB,GAAI,SAAUC,GAAI,cACpCiB,UAAW,CAAElB,GAAI,WAAYC,GAAI,WAC7BjD,GAAS,CAEXmE,GAAI,CAAElB,GAAI,KACV,CACFmB,UAAW,CAAEpB,GAAI,QAASC,GAAI,KAE9BoB,aAAc,SACXrD,GAAS,cAEF,6BACRC,EAAW,CAAAnB,SAEd0B,KAGJvB,GACCmC,EAACkC,EAAGhC,OAAAC,OAAA,CACFxC,GAAEuC,OAAAC,OAAA,CACAiB,WAAY,IACZD,SAAU,IACVD,QAAS,OACTiB,WAAY,SACZN,eAAgB,WAChBO,IAAK,KACFrD,GAAS,cAEF,2BACRC,EAAW,CAAAtB,SAEdG"}
+{"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';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface SecondaryNavigationProps extends Omit<AppBarProps, 'color' | 'title'> {\n  /**\n   * Headline\n   */\n  title?: 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   * 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      buttons,\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) => {\n          if (child?.type === Fragment) {\n            result.push(...flatten(child.props.children));\n          } else {\n            result.push(child);\n          }\n        });\n        return result;\n      }\n      return flatten(children);\n    }, [children]);\n\n    return (\n      <AppBar\n        sx={sxOverride(\n          {\n            // bellow Header, also defined in appbar.theme.ts\n            zIndex: (theme) => theme.zIndex.appBar - 20,\n          },\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={sxOverride(\n            {\n              ...(!!navigation?.length && {\n                flexWrap: { xs: 'wrap', lg: 'nowrap' },\n                pt: { xs: 2, lg: 0 },\n              }),\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={sxOverride(\n                {\n                  display: 'block',\n                  // on mobile push the button to the right side\n                  flexGrow: { xs: '1', lg: '0' },\n                  flexShrink: '0',\n                },\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={sxOverride(\n                {\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                },\n                contentSx,\n              )}\n              data-testid=\"SecondaryNavigation.items\"\n              {...restContent}\n            >\n              {navigation}\n            </Tabs>\n          )}\n          {buttons && (\n            <Box\n              sx={sxOverride(\n                {\n                  flexShrink: '0',\n                  flexGrow: '1',\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'flex-end',\n                  gap: 0.25,\n                },\n                buttonsSx,\n              )}\n              data-testid=\"SecondaryNavigation.cta\"\n              {...restButtons}\n            >\n              {buttons}\n            </Box>\n          )}\n        </Toolbar>\n      </AppBar>\n    );\n  },\n);\n"],"names":["SecondaryNavigation","forwardRef","children","sx","title","buttons","inContainer","toolbarProps","titleProps","contentProps","buttonsProps","rest","ref","titleSx","restTitle","toolbarSx","restToolbar","contentSx","restContent","buttonsSx","restButtons","activeNav","setActiveNav","useState","navigation","useMemo","flatten","nodes","result","Children","forEach","child","type","Fragment","push","props","_jsx","AppBar","sxOverride","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":"qSAkDO,MAAMA,EAAoDC,EAC/D,EAEIC,WACAC,KACAC,QACAC,UACAC,eAAc,EACdC,eACAC,aACAC,eACAC,kBACGC,GAELC,KAEA,MAAQT,GAAIU,KAAYC,GAAcN,GAAc,CAAA,GAC5CL,GAAIY,KAAcC,GAAgBT,GAAgB,CAAA,GAClDJ,GAAIc,KAAcC,GAAgBT,GAAgB,CAAA,GAClDN,GAAIgB,KAAcC,GAAgBV,GAAgB,CAAA,GACnDW,EAAWC,GAAgBC,EAAS,GAKrCC,EAAaC,EAAQ,IACzB,SAASC,EAAQC,GACf,MAAMC,EAAS,GAQf,OAPAC,EAASC,QAAQH,EAAQI,IACnBA,GAAOC,OAASC,EAClBL,EAAOM,QAAQR,EAAQK,EAAMI,MAAMjC,WAEnC0B,EAAOM,KAAKH,KAGTH,CACT,CACOF,CAAQxB,GACd,CAACA,IAEJ,OACEkC,EAACC,GACClC,GAAImC,EACF,CAEEC,OAASC,GAAUA,EAAMD,OAAOE,OAAS,IAE3CtC,GAEFS,IAAKA,EAAG,cACI,sBAAqB,aACtB,uBACX8B,KAAK,WACD/B,EAAIT,SAERyC,EAACC,EAAO,CACNzC,GAAImC,EACF,MACQd,GAAYqB,QAAU,CAC1BC,SAAU,CAAEC,GAAI,OAAQC,GAAI,UAC5BC,GAAI,CAAEF,GAAI,EAAGC,GAAI,KAGrBjC,GAEFmC,gBAAiB5C,EAAW,cAChB,iCACRU,EAAWd,SAAA,CAEdE,GACCgC,EAACe,EAAU,CAAA,cACG,4BACZC,QAAQ,cACRjD,GAAImC,EACF,CACEe,QAAS,QAETC,SAAU,CAAEP,GAAI,IAAKC,GAAI,KACzBO,WAAY,KAEd1C,MAEEC,WAEHV,MAGFoB,GAAYqB,QACbT,EAACoB,EAAI,CACHC,MAAOpC,EACPqC,SAAU,CAACC,EAAGC,IAAMtC,EAAasC,GACjCC,SAAS,aACT1D,GAAImC,EACF,CACEgB,SAAU,IAEVQ,UAAW,CAAEf,GAAI,OAAQC,GAAI,QAC7Be,MAAO,CAAEhB,GAAI,IAAKC,GAAI,KAEtBgB,eAAgB,CAAEjB,GAAI,SAAUC,GAAI,cACpCiB,UAAW,CAAElB,GAAI,WAAYC,GAAI,aAC7B5C,GAAS,CAEX8D,GAAI,CAAElB,GAAI,IAEZmB,UAAW,CAAEpB,GAAI,QAASC,GAAI,KAE9BoB,aAAc,QAEhBnD,GACD,cACW,+BACRC,EAAWhB,SAEdsB,IAGJnB,GACC+B,EAACiC,GACClE,GAAImC,EACF,CACEiB,WAAY,IACZD,SAAU,IACVD,QAAS,OACTiB,WAAY,SACZN,eAAgB,WAChBO,IAAK,KAEPpD,GACD,cACW,6BACRC,EAAWlB,SAEdG"}

package/components/secondaryNavigation/SecondaryNavigationCta.js

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

package/components/secondaryNavigation/SecondaryNavigationCta.js.map

@@ -1 +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":"qIAQO,MAAMA,EAAgEC,EAAW,CAACC,EAAOC,KAC9F,MAAMC,EAASC,EAAsBC,GAAUA,EAAMC,YAAYC,KAAK,OAEtE,OACEC,EAACC,EAAMC,OAAAC,OAAA,CACLT,IAAKA,EACLU,MAAQX,EAAMY,SAA6B,cAAlBZ,EAAMY,QAAsC,YAAZ,UACzDC,KAAMX,EAAS,QAAU,UACrBF"}
+{"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","color","variant","size"],"mappings":"qIAQO,MAAMA,EAAgEC,EAAW,CAACC,EAAOC,KAC9F,MAAMC,EAASC,EAAsBC,GAAUA,EAAMC,YAAYC,KAAK,OAEtE,OACEC,EAACC,EAAM,CACLP,IAAKA,EACLQ,MAAQT,EAAMU,SAA6B,cAAlBV,EAAMU,QAAsC,YAAZ,UACzDC,KAAMT,EAAS,QAAU,YACrBF"}

package/components/secondaryNavigation/SecondaryNavigationItem.js

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

package/components/secondaryNavigation/SecondaryNavigationItem.js.map

@@ -1 +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\n/**\n * Component to render styled button in the header\n */\nexport const SecondaryNavigationItem: FC<SecondaryNavigationItemProps> = forwardRef(\n  ({ children, label, ...rest }, ref) => {\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","rest","__rest","_jsx","Tab"],"mappings":"8IAiBO,MAAMA,EAA4DC,EACvE,CAACC,EAA8BC,SAA9BC,SAAEA,EAAQC,MAAEA,GAAKH,EAAKI,EAAIC,EAAAL,EAA1B,sBACC,OACEM,EAACC,iBACCJ,MAAOD,GAAYC,EACnBF,IAAKA,EAAmC,cAC5B,2BACRG"}
+{"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\n/**\n * Component to render styled button in the header\n */\nexport const SecondaryNavigationItem: FC<SecondaryNavigationItemProps> = forwardRef(\n  ({ children, label, ...rest }, ref) => {\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","children","label","rest","ref","_jsx","Tab"],"mappings":"+GAiBO,MAAMA,EAA4DC,EACvE,EAAGC,WAAUC,WAAUC,GAAQC,IAE3BC,EAACC,GACCJ,MAAOD,GAAYC,EACnBE,IAAKA,EAAmC,cAC5B,6BACRD"}

package/components/segmentedControls/SegmentedControls.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Tabs as r}from"@mui/material";const m=e((e,m)=>t(r,Object.assign({},e,{ref:m,template:"segmented"})));export{m as SegmentedControls};
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Tabs as e}from"@mui/material";const m=t((t,m)=>r(e,{...t,ref:m,template:"segmented"}));export{m as SegmentedControls};
 //# sourceMappingURL=SegmentedControls.js.map

package/components/segmentedControls/SegmentedControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControls.js","sources":["../../../src/components/segmentedControls/SegmentedControls.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Tabs, TabsProps } from '@mui/material';\n\nexport interface SegmentedControlsProps extends Omit<TabsProps, 'template'> {}\n\n/**\n * Segmented Controls is a proxy component to <Tabs template=\"segmented\" />\n */\nexport const SegmentedControls: React.FC<SegmentedControlsProps> = forwardRef((props, ref) => {\n  return <Tabs {...props} ref={ref} template=\"segmented\" />;\n});\n"],"names":["SegmentedControls","forwardRef","props","ref","_jsx","Tabs","Object","assign","template"],"mappings":"gHAQO,MAAMA,EAAsDC,EAAW,CAACC,EAAOC,IAC7EC,EAACC,EAAIC,OAAAC,OAAA,CAAA,EAAKL,EAAK,CAAEC,IAAKA,EAAKK,SAAS"}
+{"version":3,"file":"SegmentedControls.js","sources":["../../../src/components/segmentedControls/SegmentedControls.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Tabs, TabsProps } from '@mui/material';\n\nexport interface SegmentedControlsProps extends Omit<TabsProps, 'template'> {}\n\n/**\n * Segmented Controls is a proxy component to <Tabs template=\"segmented\" />\n */\nexport const SegmentedControls: React.FC<SegmentedControlsProps> = forwardRef((props, ref) => {\n  return <Tabs {...props} ref={ref} template=\"segmented\" />;\n});\n"],"names":["SegmentedControls","forwardRef","props","ref","_jsx","Tabs","template"],"mappings":"gHAQO,MAAMA,EAAsDC,EAAW,CAACC,EAAOC,IAC7EC,EAACC,EAAI,IAAKH,EAAOC,IAAKA,EAAKG,SAAS"}

package/components/shortcut/Shortcut.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"tslib";import{jsx as t}from"react/jsx-runtime";import{Button as e,Box as i}from"@mui/material";import{forwardRef as s}from"react";const m=s((r,i)=>t(e,Object.assign({},r,{ref:i,variant:"shortcut"}))),o=s((e,s)=>{var{sx:m,children:o}=e,a=r(e,["sx","children"]);return t(i,Object.assign({sx:Object.assign({display:"flex",flexDirection:{xs:"column",md:"row"},alignItems:{xs:"flex-start",md:"center"},columnGap:{xs:2,md:3.5,lg:6.5},rowGap:2},m),ref:s},a,{children:o}))});export{m as Shortcut,o as ShortcutWrapper};
+import{jsx as r}from"react/jsx-runtime";import{Button as e,Box as t}from"@mui/material";import{forwardRef as i}from"react";import{sxOverride as m}from"../../utils/sxOverride/sxOverride.js";const o=i((t,i)=>r(e,{...t,ref:i,variant:"shortcut"})),s=i(({sx:e,children:i,...o},s)=>r(t,{sx:m({display:"flex",flexDirection:{xs:"column",md:"row"},alignItems:{xs:"flex-start",md:"center"},columnGap:{xs:2,md:3.5,lg:6.5},rowGap:2},e),ref:s,...o,children:i}));export{o as Shortcut,s as ShortcutWrapper};
 //# sourceMappingURL=Shortcut.js.map

package/components/shortcut/Shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shortcut.js","sources":["../../../src/components/shortcut/Shortcut.tsx"],"sourcesContent":["import { Button, ButtonProps, Box, BoxProps } from '@mui/material';\nimport React, { forwardRef, ElementType } from 'react';\n\nexport interface ShortcutProps extends Omit<ButtonProps, 'variant' | 'color'> {}\n\n/**\n * Shortcut is a proxy component to <Button variant=\"shortcut\" />\n */\nexport const Shortcut: React.FC<ShortcutProps> = forwardRef((props, ref) => {\n  return <Button {...props} ref={ref} variant=\"shortcut\" />;\n});\n\nexport interface ShortcutWrapperProps extends BoxProps<ElementType> {}\n\n/**\n * Wrapper container for multiple Shortcuts\n */\nexport const ShortcutWrapper: React.FC<ShortcutWrapperProps> = forwardRef(({ sx, children, ...rest }, ref) => {\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: { xs: 'column', md: 'row' },\n        alignItems: { xs: 'flex-start', md: 'center' },\n        columnGap: { xs: 2, md: 3.5, lg: 6.5 },\n        rowGap: 2,\n        ...sx,\n      }}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"names":["Shortcut","forwardRef","props","ref","_jsx","Button","Object","assign","variant","ShortcutWrapper","_a","sx","children","rest","__rest","Box","display","flexDirection","xs","md","alignItems","columnGap","lg","rowGap"],"mappings":"0JAQO,MAAMA,EAAoCC,EAAW,CAACC,EAAOC,IAC3DC,EAACC,EAAMC,OAAAC,OAAA,CAAA,EAAKL,EAAK,CAAEC,IAAKA,EAAKK,QAAQ,eAQjCC,EAAkDR,EAAW,CAACS,EAA2BP,SAA3BQ,GAAEA,EAAEC,SAAEA,GAAQF,EAAKG,EAAIC,EAAAJ,EAAvB,mBACzE,OACEN,EAACW,EAAGT,OAAAC,OAAA,CACFI,GAAEL,OAAAC,OAAA,CACAS,QAAS,OACTC,cAAe,CAAEC,GAAI,SAAUC,GAAI,OACnCC,WAAY,CAAEF,GAAI,aAAcC,GAAI,UACpCE,UAAW,CAAEH,GAAI,EAAGC,GAAI,IAAKG,GAAI,KACjCC,OAAQ,GACLZ,GAELR,IAAKA,GACDU,EAAI,CAAAD,SAEPA"}
+{"version":3,"file":"Shortcut.js","sources":["../../../src/components/shortcut/Shortcut.tsx"],"sourcesContent":["import { Button, ButtonProps, Box, BoxProps } from '@mui/material';\nimport React, { forwardRef, ElementType } from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface ShortcutProps extends Omit<ButtonProps, 'variant' | 'color'> {}\n\n/**\n * Shortcut is a proxy component to <Button variant=\"shortcut\" />\n */\nexport const Shortcut: React.FC<ShortcutProps> = forwardRef((props, ref) => {\n  return <Button {...props} ref={ref} variant=\"shortcut\" />;\n});\n\nexport interface ShortcutWrapperProps extends BoxProps<ElementType> {}\n\n/**\n * Wrapper container for multiple Shortcuts\n */\nexport const ShortcutWrapper: React.FC<ShortcutWrapperProps> = forwardRef(({ sx, children, ...rest }, ref) => {\n  return (\n    <Box\n      sx={sxOverride(\n        {\n          display: 'flex',\n          flexDirection: { xs: 'column', md: 'row' },\n          alignItems: { xs: 'flex-start', md: 'center' },\n          columnGap: { xs: 2, md: 3.5, lg: 6.5 },\n          rowGap: 2,\n        },\n        sx,\n      )}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"names":["Shortcut","forwardRef","props","ref","_jsx","Button","variant","ShortcutWrapper","sx","children","rest","Box","sxOverride","display","flexDirection","xs","md","alignItems","columnGap","lg","rowGap"],"mappings":"6LASO,MAAMA,EAAoCC,EAAW,CAACC,EAAOC,IAC3DC,EAACC,EAAM,IAAKH,EAAOC,IAAKA,EAAKG,QAAQ,cAQjCC,EAAkDN,EAAW,EAAGO,KAAIC,cAAaC,GAAQP,IAElGC,EAACO,GACCH,GAAII,EACF,CACEC,QAAS,OACTC,cAAe,CAAEC,GAAI,SAAUC,GAAI,OACnCC,WAAY,CAAEF,GAAI,aAAcC,GAAI,UACpCE,UAAW,CAAEH,GAAI,EAAGC,GAAI,IAAKG,GAAI,KACjCC,OAAQ,GAEVZ,GAEFL,IAAKA,KACDO,EAAID,SAEPA"}

package/components/skodaThemeProvider/SkodaThemeProvider.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as i,Fragment as r}from"react/jsx-runtime";import{useMemo as t}from"react";import{ThemeProvider as n,ScopedCssBaseline as o,Box as c}from"@mui/material";import{CacheProvider as l}from"@emotion/react";import s from"@emotion/cache";import{prefixer as a}from"stylis";import m from"stylis-plugin-rtl";import d from"./plugins/stylisContainerPlugin.js";import{theme as h}from"../../materialui/theme/theme.js";const p=r=>{var{children:t,theme:c=h,globalBaseline:l=!1,widget:s=!1,createCacheOptions:a,containerProps:m}=r,d=e(r,["children","theme","globalBaseline","widget","createCacheOptions","containerProps"]);return i(g,{direction:c.direction,widget:s,createCacheOptions:a,children:i(n,{theme:c,children:i(u,Object.assign({widget:s},m,{children:l?t:i(o,Object.assign({},d,"rtl"===c.direction?{dir:"rtl"}:{},{children:t}))}))})})};function g({children:e,direction:n,widget:o,createCacheOptions:c}){const h=t(()=>{if("rtl"===n||o)return s(Object.assign({prepend:!0,key:`${o?"w":""}${"rtl"===n?"rtl":"css"}`,stylisPlugins:[a,..."rtl"===n?[m]:[],...o?[d]:[]]},c||{}))},[n,o,null==c?void 0:c.key]);return h?i(l,{value:h,children:e}):i(r,{children:e})}function u(t){var{children:n,sx:o,widget:l}=t,s=e(t,["children","sx","widget"]);return l?i(c,Object.assign({sx:Object.assign({containerType:"inline-size"},o)},s,{children:n})):i(r,{children:n})}export{p as SkodaThemeProvider};
+import{jsx as r,Fragment as e}from"react/jsx-runtime";import{useMemo as i}from"react";import{ThemeProvider as t,ScopedCssBaseline as n,Box as o}from"@mui/material";import{sxOverride as l}from"../../utils/sxOverride/sxOverride.js";import{CacheProvider as c}from"@emotion/react";import m from"@emotion/cache";import{prefixer as s}from"stylis";import d from"stylis-plugin-rtl";import a from"./plugins/stylisContainerPlugin.js";import{theme as p}from"../../materialui/theme/theme.js";const h=({children:e,theme:i=p,globalBaseline:o=!1,widget:l=!1,createCacheOptions:c,containerProps:m,...s})=>r(u,{direction:i.direction,widget:l,createCacheOptions:c,children:r(t,{theme:i,children:r(f,{widget:l,...m,children:o?e:r(n,{...s,..."rtl"===i.direction?{dir:"rtl"}:{},children:e})})})});function u({children:t,direction:n,widget:o,createCacheOptions:l}){const p=i(()=>{if("rtl"===n||o)return m({prepend:!0,key:`${o?"w":""}${"rtl"===n?"rtl":"css"}`,stylisPlugins:[s,..."rtl"===n?[d]:[],...o?[a]:[]],...l||{}})},[n,o,l?.key]);return p?r(c,{value:p,children:t}):r(e,{children:t})}function f({children:i,sx:t,widget:n,...c}){return n?r(o,{sx:l({containerType:"inline-size"},t),...c,children:i}):r(e,{children:i})}export{h as SkodaThemeProvider};
 //# sourceMappingURL=SkodaThemeProvider.js.map

package/components/skodaThemeProvider/SkodaThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkodaThemeProvider.js","sources":["../../../src/components/skodaThemeProvider/SkodaThemeProvider.tsx"],"sourcesContent":["import React, { ElementType, useMemo } from 'react';\nimport { ScopedCssBaseline, ScopedCssBaselineProps, ThemeProvider, Box, BoxProps, Theme } from '@mui/material';\nimport { CacheProvider } from '@emotion/react';\nimport createCache, { Options } from '@emotion/cache';\nimport { prefixer } from 'stylis';\nimport rtlPlugin from 'stylis-plugin-rtl';\nimport containerPlugin from './plugins/stylisContainerPlugin';\nimport { theme as skodaTheme } from '../../materialui/theme/theme';\nimport '../../materialui/theme/theme.extensions';\n\nexport type SkodaThemeProviderProps = {\n  children?: React.ReactNode;\n  /**\n   * Theme to be used\n   */\n  theme?: Partial<Theme>;\n\n  /**\n   * Disable adding extra ScopedCssBaseline as CssBaseline is being used\n   */\n  globalBaseline?: boolean;\n  /**\n   * Changes @media queries to @container queries,\n   */\n  widget?: boolean;\n  /**\n   * Options for the cache creation function by Emotion\n   */\n  createCacheOptions?: Options;\n  /**\n   * Props passed to container used by the widget\n   */\n  containerProps?: BoxProps<ElementType>;\n} & ScopedCssBaselineProps;\n\n/**\n * Wrapper of ThemeProvider that additionally provide Scoped CssBaseline\n */\nexport const SkodaThemeProvider: React.FC<SkodaThemeProviderProps> = ({\n  children,\n  theme = skodaTheme,\n  globalBaseline = false,\n  widget = false,\n  createCacheOptions,\n  containerProps,\n  ...rest\n}) => {\n  return (\n    <CacheContainer direction={theme.direction} widget={widget} createCacheOptions={createCacheOptions}>\n      <ThemeProvider theme={theme}>\n        <WidgetContainer widget={widget} {...containerProps}>\n          {globalBaseline ? (\n            children\n          ) : (\n            <ScopedCssBaseline {...rest} {...(theme.direction === 'rtl' ? { dir: 'rtl' } : {})}>\n              {children}\n            </ScopedCssBaseline>\n          )}\n        </WidgetContainer>\n      </ThemeProvider>\n    </CacheContainer>\n  );\n};\n\n/**\n * Wrapper providing CacheProvider necessary for the stylis plugin optimization\n */\nfunction CacheContainer({\n  children,\n  direction,\n  widget,\n  createCacheOptions,\n}: {\n  children: React.ReactNode;\n  direction: Theme['direction'];\n  widget: boolean;\n  createCacheOptions?: Options;\n}) {\n  const cache = useMemo(() => {\n    // in case we are not using RTL or widget, we don't need to generate cache\n    if (direction !== 'rtl' && !widget) {\n      return undefined;\n    }\n    return createCache({\n      // inject first\n      prepend: true,\n      // cache based on the plugins\n      key: `${widget ? 'w' : ''}${direction === 'rtl' ? 'rtl' : 'css'}`,\n      stylisPlugins: [\n        prefixer,\n        // transform left to right\n        ...(direction === 'rtl' ? [rtlPlugin] : []),\n        // transform @media to @container queries\n        ...(widget ? [containerPlugin] : []),\n      ],\n      ...(createCacheOptions || {}),\n    });\n  }, [direction, widget, createCacheOptions?.key]);\n\n  return cache ? <CacheProvider value={cache}>{children}</CacheProvider> : <>{children}</>;\n}\n\n/**\n * Wrapper providing necessary containerType: 'inline-size' style to activate @container queries\n */\nfunction WidgetContainer({ children, sx, widget, ...rest }: { widget: boolean } & BoxProps) {\n  return widget ? (\n    <Box sx={{ containerType: 'inline-size', ...sx }} {...rest}>\n      {children}\n    </Box>\n  ) : (\n    <>{children}</>\n  );\n}\n"],"names":["SkodaThemeProvider","_a","children","theme","skodaTheme","globalBaseline","widget","createCacheOptions","containerProps","rest","__rest","_jsx","CacheContainer","direction","ThemeProvider","WidgetContainer","Object","assign","ScopedCssBaseline","dir","cache","useMemo","createCache","prepend","key","stylisPlugins","prefixer","rtlPlugin","containerPlugin","CacheProvider","value","_Fragment","sx","Box","containerType"],"mappings":"6bAsCO,MAAMA,EAAyDC,QAAAC,SACpEA,QACAC,EAAQC,EAAUC,eAClBA,GAAiB,EAAKC,OACtBA,GAAS,EAAKC,mBACdA,EAAkBC,eAClBA,KACGC,EAAIC,EAAAT,EAP6D,CAAA,WAAA,QAAA,iBAAA,SAAA,qBAAA,mBASpE,OACEU,EAACC,EAAc,CAACC,UAAWV,EAAMU,UAAWP,OAAQA,EAAQC,mBAAoBA,EAAkBL,SAChGS,EAACG,GAAcX,MAAOA,EAAKD,SACzBS,EAACI,EAAeC,OAAAC,OAAA,CAACX,OAAQA,GAAYE,EAAc,CAAAN,SAChDG,EAAc,EAGbM,EAACO,EAAiBF,OAAAC,OAAA,CAAA,EAAKR,EAA+B,QAApBN,EAAMU,UAAsB,CAAEM,IAAK,OAAU,CAAA,EAAG,CAAAjB,SAC/EA,aAYf,SAASU,GAAeV,SACtBA,EAAQW,UACRA,EAASP,OACTA,EAAMC,mBACNA,IAOA,MAAMa,EAAQC,EAAQ,KAEpB,GAAkB,QAAdR,GAAwBP,EAG5B,OAAOgB,EAAWN,OAAAC,OAAA,CAEhBM,SAAS,EAETC,IAAK,GAAGlB,EAAS,IAAM,KAAmB,QAAdO,EAAsB,MAAQ,QAC1DY,cAAe,CACbC,KAEkB,QAAdb,EAAsB,CAACc,GAAa,MAEpCrB,EAAS,CAACsB,GAAmB,KAE/BrB,GAAsB,CAAA,KAE3B,CAACM,EAAWP,EAAQC,eAAAA,EAAoBiB,MAE3C,OAAOJ,EAAQT,EAACkB,GAAcC,MAAOV,EAAKlB,SAAGA,IAA4BS,EAAAoB,EAAA,CAAA7B,SAAGA,GAC9E,CAKA,SAASa,EAAgBd,OAAAC,SAAEA,EAAQ8B,GAAEA,EAAE1B,OAAEA,KAAWG,EAAIC,EAAAT,EAA/B,CAAA,WAAA,KAAA,WACvB,OAAOK,EACLK,EAACsB,EAAGjB,OAAAC,OAAA,CAACe,GAAEhB,OAAAC,OAAA,CAAIiB,cAAe,eAAkBF,IAAUvB,EAAI,CAAAP,SACvDA,KAGHS,EAAAoB,EAAA,CAAA7B,SAAGA,GAEP"}
+{"version":3,"file":"SkodaThemeProvider.js","sources":["../../../src/components/skodaThemeProvider/SkodaThemeProvider.tsx"],"sourcesContent":["import React, { ElementType, useMemo } from 'react';\nimport { ScopedCssBaseline, ScopedCssBaselineProps, ThemeProvider, Box, BoxProps, Theme } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { CacheProvider } from '@emotion/react';\nimport createCache, { Options } from '@emotion/cache';\nimport { prefixer } from 'stylis';\nimport rtlPlugin from 'stylis-plugin-rtl';\nimport containerPlugin from './plugins/stylisContainerPlugin';\nimport { theme as skodaTheme } from '../../materialui/theme/theme';\nimport '../../materialui/theme/theme.extensions';\n\nexport type SkodaThemeProviderProps = {\n  children?: React.ReactNode;\n  /**\n   * Theme to be used\n   */\n  theme?: Partial<Theme>;\n  /**\n   * Disable adding extra ScopedCssBaseline as CssBaseline is being used\n   */\n  globalBaseline?: boolean;\n  /**\n   * Changes @media queries to @container queries,\n   */\n  widget?: boolean;\n  /**\n   * Options for the cache creation function by Emotion\n   */\n  createCacheOptions?: Options;\n  /**\n   * Props passed to container used by the widget\n   */\n  containerProps?: BoxProps<ElementType>;\n} & ScopedCssBaselineProps;\n\n/**\n * Wrapper of ThemeProvider that additionally provide Scoped CssBaseline\n */\nexport const SkodaThemeProvider: React.FC<SkodaThemeProviderProps> = ({\n  children,\n  theme = skodaTheme,\n  globalBaseline = false,\n  widget = false,\n  createCacheOptions,\n  containerProps,\n  ...rest\n}) => {\n  return (\n    <CacheContainer direction={theme.direction} widget={widget} createCacheOptions={createCacheOptions}>\n      <ThemeProvider theme={theme}>\n        <WidgetContainer widget={widget} {...containerProps}>\n          {globalBaseline ? (\n            children\n          ) : (\n            <ScopedCssBaseline {...rest} {...(theme.direction === 'rtl' ? { dir: 'rtl' } : {})}>\n              {children}\n            </ScopedCssBaseline>\n          )}\n        </WidgetContainer>\n      </ThemeProvider>\n    </CacheContainer>\n  );\n};\n\n/**\n * Wrapper providing CacheProvider necessary for the stylis plugin optimization\n */\nfunction CacheContainer({\n  children,\n  direction,\n  widget,\n  createCacheOptions,\n}: {\n  children: React.ReactNode;\n  direction: Theme['direction'];\n  widget: boolean;\n  createCacheOptions?: Options;\n}) {\n  const cache = useMemo(() => {\n    // in case we are not using RTL or widget, we don't need to generate cache\n    if (direction !== 'rtl' && !widget) {\n      return undefined;\n    }\n    return createCache({\n      // inject first\n      prepend: true,\n      // cache based on the plugins\n      key: `${widget ? 'w' : ''}${direction === 'rtl' ? 'rtl' : 'css'}`,\n      stylisPlugins: [\n        prefixer,\n        // transform left to right\n        ...(direction === 'rtl' ? [rtlPlugin] : []),\n        // transform @media to @container queries\n        ...(widget ? [containerPlugin] : []),\n      ],\n      ...(createCacheOptions || {}),\n    });\n  }, [direction, widget, createCacheOptions?.key]);\n\n  return cache ? <CacheProvider value={cache}>{children}</CacheProvider> : <>{children}</>;\n}\n\n/**\n * Wrapper providing necessary containerType: 'inline-size' style to activate @container queries\n */\nfunction WidgetContainer({ children, sx, widget, ...rest }: { widget: boolean } & BoxProps) {\n  return widget ? (\n    <Box sx={sxOverride({ containerType: 'inline-size' }, sx)} {...rest}>\n      {children}\n    </Box>\n  ) : (\n    <>{children}</>\n  );\n}\n"],"names":["SkodaThemeProvider","children","theme","skodaTheme","globalBaseline","widget","createCacheOptions","containerProps","rest","_jsx","CacheContainer","direction","ThemeProvider","WidgetContainer","ScopedCssBaseline","dir","cache","useMemo","createCache","prepend","key","stylisPlugins","prefixer","rtlPlugin","containerPlugin","CacheProvider","value","_Fragment","sx","Box","sxOverride","containerType"],"mappings":"geAsCO,MAAMA,EAAwD,EACnEC,iBACAC,EAAQC,EACRC,kBAAiB,EACjBC,UAAS,EACTC,qBACAC,oBACGC,KAGDC,EAACC,EAAc,CAACC,UAAWT,EAAMS,UAAWN,OAAQA,EAAQC,mBAAoBA,EAAkBL,SAChGQ,EAACG,GAAcV,MAAOA,EAAKD,SACzBQ,EAACI,EAAe,CAACR,OAAQA,KAAYE,EAAcN,SAChDG,IAGCK,EAACK,EAAiB,IAAKN,KAA+B,QAApBN,EAAMS,UAAsB,CAAEI,IAAK,OAAU,CAAA,EAAGd,SAC/EA,UAYf,SAASS,GAAeT,SACtBA,EAAQU,UACRA,EAASN,OACTA,EAAMC,mBACNA,IAOA,MAAMU,EAAQC,EAAQ,KAEpB,GAAkB,QAAdN,GAAwBN,EAG5B,OAAOa,EAAY,CAEjBC,SAAS,EAETC,IAAK,GAAGf,EAAS,IAAM,KAAmB,QAAdM,EAAsB,MAAQ,QAC1DU,cAAe,CACbC,KAEkB,QAAdX,EAAsB,CAACY,GAAa,MAEpClB,EAAS,CAACmB,GAAmB,OAE/BlB,GAAsB,CAAA,KAE3B,CAACK,EAAWN,EAAQC,GAAoBc,MAE3C,OAAOJ,EAAQP,EAACgB,GAAcC,MAAOV,EAAKf,SAAGA,IAA4BQ,EAAAkB,EAAA,CAAA1B,SAAGA,GAC9E,CAKA,SAASY,GAAgBZ,SAAEA,EAAQ2B,GAAEA,EAAEvB,OAAEA,KAAWG,IAClD,OAAOH,EACLI,EAACoB,EAAG,CAACD,GAAIE,EAAW,CAAEC,cAAe,eAAiBH,MAASpB,EAAIP,SAChEA,IAGHQ,EAAAkB,EAAA,CAAA1B,SAAGA,GAEP"}

package/components/spacing/Spacing.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"tslib";import{jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Box as i}from"@mui/material";const a=o((o,a)=>{var{sx:e,value:m=2,horizontal:s=!1}=o,l=r(o,["sx","value","horizontal"]);return t(i,Object.assign({ref:a,sx:Object.assign({pl:s?m:0,pt:s?0:m},e)},l))});export{a as Spacing};
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Box as o}from"@mui/material";import{sxOverride as e}from"../../utils/sxOverride/sxOverride.js";const i=t(({sx:t,value:i=2,horizontal:m=!1,...s},p)=>r(o,{ref:p,sx:e({pl:m?i:0,pt:m?0:i},t),...s}));export{i as Spacing};
 //# sourceMappingURL=Spacing.js.map

package/components/spacing/Spacing.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacing.js","sources":["../../../src/components/spacing/Spacing.tsx"],"sourcesContent":["import React, { ElementType, forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { ResponsiveStyleValue } from '@mui/system';\n\nexport interface SpacingProps extends BoxProps<ElementType> {\n  /**\n   * Value of spacing. Transpiles to theme.spacing(value).\n   *\n   * @default 2 that transpiles by default to 16px\n   */\n  value?: ResponsiveStyleValue<number | string>;\n  /**\n   * Defines whether the Spacing should be horizontal or vertical.\n   * @default: false\n   */\n  horizontal?: boolean;\n}\n\nexport const Spacing: React.FC<SpacingProps> = forwardRef(({ sx, value = 2, horizontal = false, ...rest }, ref) => {\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        pl: horizontal ? value : 0,\n        pt: horizontal ? 0 : value,\n        ...sx,\n      }}\n      {...rest}\n    />\n  );\n});\n"],"names":["Spacing","forwardRef","_a","ref","sx","value","horizontal","rest","__rest","_jsx","Box","Object","assign","pl","pt"],"mappings":"8IAkBO,MAAMA,EAAkCC,EAAW,CAACC,EAAgDC,KAAhD,IAAAC,GAAEA,EAAEC,MAAEA,EAAQ,EAACC,WAAEA,GAAa,GAAKJ,EAAKK,EAAIC,EAAAN,EAA5C,6BACzD,OACEO,EAACC,EAAGC,OAAAC,OAAA,CACFT,IAAKA,EACLC,GAAEO,OAAAC,OAAA,CACAC,GAAIP,EAAaD,EAAQ,EACzBS,GAAIR,EAAa,EAAID,GAClBD,IAEDG"}
+{"version":3,"file":"Spacing.js","sources":["../../../src/components/spacing/Spacing.tsx"],"sourcesContent":["import React, { ElementType, forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ResponsiveStyleValue } from '@mui/system';\n\nexport interface SpacingProps extends BoxProps<ElementType> {\n  /**\n   * Value of spacing. Transpiles to theme.spacing(value).\n   *\n   * @default 2 that transpiles by default to 16px\n   */\n  value?: ResponsiveStyleValue<number | string>;\n  /**\n   * Defines whether the Spacing should be horizontal or vertical.\n   * @default: false\n   */\n  horizontal?: boolean;\n}\n\nexport const Spacing: React.FC<SpacingProps> = forwardRef(({ sx, value = 2, horizontal = false, ...rest }, ref) => {\n  return (\n    <Box\n      ref={ref}\n      sx={sxOverride(\n        {\n          pl: horizontal ? value : 0,\n          pt: horizontal ? 0 : value,\n        },\n        sx,\n      )}\n      {...rest}\n    />\n  );\n});\n"],"names":["Spacing","forwardRef","sx","value","horizontal","rest","ref","_jsx","Box","sxOverride","pl","pt"],"mappings":"iLAmBO,MAAMA,EAAkCC,EAAW,EAAGC,KAAIC,QAAQ,EAAGC,cAAa,KAAUC,GAAQC,IAEvGC,EAACC,EAAG,CACFF,IAAKA,EACLJ,GAAIO,EACF,CACEC,GAAIN,EAAaD,EAAQ,EACzBQ,GAAIP,EAAa,EAAID,GAEvBD,MAEEG"}