@skodaflow/web-library 8.0.0 → 8.1.0

package/components/progress/Loader.js

@@ -1,2 +1,2 @@
-import{__rest as a}from"tslib";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Box as i,LinearProgress as o}from"@mui/material";import{LoadingText as s}from"./LoadingText.js";const l=t((t,l)=>{var{className:n,value:m,size:c,barProps:d,label:p,loadingTextProps:b}=t,u=a(t,["className","value","size","barProps","label","loadingTextProps"]);const v=null!=d?d:{},{sx:g}=v,x=a(v,["sx"]);return e(i,Object.assign({"data-testid":"Loader",className:["FlowLoader-root",n].filter(Boolean).join(" "),ref:l},u,{children:[void 0!==m&&r(s,Object.assign({"data-testid":"Loader.percentage",value:m,label:p},b)),r(o,Object.assign({value:m,sx:Object.assign(Object.assign({},"number"==typeof c&&{height:`${c}px`}),g)},"number"!=typeof c&&{size:c},void 0!==m&&{variant:"determinate","aria-valuenow":m,"aria-valuemin":0,"aria-valuemax":100},x))]}))});export{l as Loader};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Box as o,LinearProgress as t}from"@mui/material";import{LoadingText as i}from"./LoadingText.js";const l=r(({className:r,value:l,size:m,barProps:n,label:s,loadingTextProps:d,...p},u)=>{const{sx:v,...c}=n??{};return e(o,{"data-testid":"Loader",className:["FlowLoader-root",r].filter(Boolean).join(" "),ref:u,...p,children:[void 0!==l&&a(i,{"data-testid":"Loader.percentage",value:l,label:s,...d}),a(t,{value:l,sx:{..."number"==typeof m&&{height:`${m}px`},...v},..."number"!=typeof m&&{size:m},...void 0!==l&&{variant:"determinate","aria-valuenow":l,"aria-valuemin":0,"aria-valuemax":100},...c})]})});export{l as Loader};
 //# sourceMappingURL=Loader.js.map

package/components/progress/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/components/progress/Loader.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, ReactNode } from 'react';\nimport { Box, BoxProps, LinearProgress, LinearProgressProps } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\n\nexport interface LoaderProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   */\n  size?: LinearProgressProps['size'] | number;\n  /**\n   * Additional label before LoaderText\n   */\n  label?: ReactNode;\n  /**\n   * Optional custom bar props.\n   */\n  barProps?: LinearProgressProps;\n  /**\n   * Properties applied to LoaderText\n   */\n  loadingTextProps?: LoadingTextProps;\n}\n\n/**\n * Wrapper of LinearProgress, automatically selecting the appropriate variant and appending LoaderText\n */\nexport const Loader: React.FC<LoaderProps> = forwardRef(\n  ({ className, value, size, barProps, label, loadingTextProps, ...rest }, ref) => {\n    const { sx: barSx, ...restBar } = barProps ?? {};\n\n    return (\n      <Box\n        data-testid=\"Loader\"\n        className={['FlowLoader-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        {...rest}\n      >\n        {value !== undefined && (\n          <LoadingText data-testid=\"Loader.percentage\" value={value} label={label} {...loadingTextProps} />\n        )}\n        <LinearProgress\n          value={value}\n          sx={{\n            ...(typeof size === 'number' && { height: `${size}px` }),\n            ...barSx,\n          }}\n          {...(typeof size !== 'number' && { size: size })}\n          {...(value !== undefined && {\n            variant: 'determinate',\n            ['aria-valuenow']: value,\n            ['aria-valuemin']: 0,\n            ['aria-valuemax']: 100,\n          })}\n          {...restBar}\n        />\n      </Box>\n    );\n  },\n);\n"],"names":["Loader","forwardRef","_a","ref","className","value","size","barProps","label","loadingTextProps","rest","__rest","_b","sx","barSx","restBar","_jsxs","Box","Object","assign","filter","Boolean","join","children","undefined","_jsx","LoadingText","LinearProgress","height","variant"],"mappings":"2NA8BO,MAAMA,EAAgCC,EAC3C,CAACC,EAAwEC,KAAxE,IAAAC,UAAEA,EAASC,MAAEA,EAAKC,KAAEA,EAAIC,SAAEA,EAAQC,MAAEA,EAAKC,iBAAEA,GAAgBP,EAAKQ,EAAIC,EAAAT,EAApE,oEACC,MAAMU,EAA4BL,QAAAA,EAAY,IAAtCM,GAAIC,GAAKF,EAAKG,EAAOJ,EAAAC,EAAvB,CAAA,OAEN,OACEI,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,SACZf,UAAW,CAAC,kBAAmBA,GAAWgB,OAAOC,SAASC,KAAK,KAC/DnB,IAAKA,GACDO,EAAI,CAAAa,SAAA,MAEGC,IAAVnB,GACCoB,EAACC,+BAAwB,oBAAoBrB,MAAOA,EAAOG,MAAOA,GAAWC,IAE/EgB,EAACE,EAAcT,OAAAC,OAAA,CACbd,MAAOA,EACPQ,GAAEK,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACoB,iBAATb,GAAqB,CAAEsB,OAAQ,GAAGtB,QAC1CQ,IAEgB,iBAATR,GAAqB,CAAEA,KAAMA,QAC1BkB,IAAVnB,GAAuB,CAC1BwB,QAAS,cACT,gBAAmBxB,EACnB,gBAAmB,EACnB,gBAAmB,KAEjBU"}
+{"version":3,"file":"Loader.js","sources":["../../../src/components/progress/Loader.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, ReactNode } from 'react';\nimport { Box, BoxProps, LinearProgress, LinearProgressProps } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\n\nexport interface LoaderProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   */\n  size?: LinearProgressProps['size'] | number;\n  /**\n   * Additional label before LoaderText\n   */\n  label?: ReactNode;\n  /**\n   * Optional custom bar props.\n   */\n  barProps?: LinearProgressProps;\n  /**\n   * Properties applied to LoaderText\n   */\n  loadingTextProps?: LoadingTextProps;\n}\n\n/**\n * Wrapper of LinearProgress, automatically selecting the appropriate variant and appending LoaderText\n */\nexport const Loader: React.FC<LoaderProps> = forwardRef(\n  ({ className, value, size, barProps, label, loadingTextProps, ...rest }, ref) => {\n    const { sx: barSx, ...restBar } = barProps ?? {};\n\n    return (\n      <Box\n        data-testid=\"Loader\"\n        className={['FlowLoader-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        {...rest}\n      >\n        {value !== undefined && (\n          <LoadingText data-testid=\"Loader.percentage\" value={value} label={label} {...loadingTextProps} />\n        )}\n        <LinearProgress\n          value={value}\n          sx={{\n            ...(typeof size === 'number' && { height: `${size}px` }),\n            ...barSx,\n          }}\n          {...(typeof size !== 'number' && { size: size })}\n          {...(value !== undefined && {\n            variant: 'determinate',\n            ['aria-valuenow']: value,\n            ['aria-valuemin']: 0,\n            ['aria-valuemax']: 100,\n          })}\n          {...restBar}\n        />\n      </Box>\n    );\n  },\n);\n"],"names":["Loader","forwardRef","className","value","size","barProps","label","loadingTextProps","rest","ref","sx","barSx","restBar","_jsxs","Box","filter","Boolean","join","children","undefined","_jsx","LoadingText","LinearProgress","height","variant"],"mappings":"4LA8BO,MAAMA,EAAgCC,EAC3C,EAAGC,YAAWC,QAAOC,OAAMC,WAAUC,QAAOC,sBAAqBC,GAAQC,KACvE,MAAQC,GAAIC,KAAUC,GAAYP,GAAY,CAAA,EAE9C,OACEQ,EAACC,EAAG,CAAA,cACU,SACZZ,UAAW,CAAC,kBAAmBA,GAAWa,OAAOC,SAASC,KAAK,KAC/DR,IAAKA,KACDD,EAAIU,SAAA,MAEGC,IAAVhB,GACCiB,EAACC,EAAW,CAAA,cAAa,oBAAoBlB,MAAOA,EAAOG,MAAOA,KAAWC,IAE/Ea,EAACE,EAAc,CACbnB,MAAOA,EACPO,GAAI,IACkB,iBAATN,GAAqB,CAAEmB,OAAQ,GAAGnB,UAC1CO,MAEgB,iBAATP,GAAqB,CAAEA,KAAMA,WAC1Be,IAAVhB,GAAuB,CAC1BqB,QAAS,cACT,gBAAmBrB,EACnB,gBAAmB,EACnB,gBAAmB,QAEjBS"}

package/components/progress/LoadingText.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as t,jsx as i}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Box as n}from"@mui/material";const s=r((r,s)=>{var{value:m,children:l,label:a,size:o="medium",sx:c}=r,p=e(r,["value","children","label","size","sx"]);return t(n,Object.assign({sx:Object.assign(Object.assign(Object.assign({py:.5,fontSize:"14px"},"small"===o&&{fontSize:"12px"}),{lineHeight:"20px",fontWeight:"400",letterSpacing:"0.002em",textAlign:"right"}),c)},p,{ref:s,children:[a&&i(n,{component:"span",sx:{mr:.5},children:a}),l||("number"==typeof m?`${m} %`:m)]}))});export{s as LoadingText};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Box as r}from"@mui/material";const m=i(({value:i,children:m,label:n,size:o="medium",sx:l,...p},a)=>e(r,{sx:{py:.5,fontSize:"14px",..."small"===o&&{fontSize:"12px"},lineHeight:"20px",fontWeight:"400",letterSpacing:"0.002em",textAlign:"right",...l},...p,ref:a,children:[n&&t(r,{component:"span",sx:{mr:.5},children:n}),m||("number"==typeof i?`${i} %`:i)]}));export{m as LoadingText};
 //# sourceMappingURL=LoadingText.js.map

package/components/progress/LoadingText.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingText.js","sources":["../../../src/components/progress/LoadingText.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface LoadingTextProps extends BoxProps<ElementType> {\n  /**\n   * Value in percent to display\n   */\n  value?: number | string;\n  /**\n   * Additional label before the value\n   */\n  label?: ReactNode;\n  /**\n   * Affects font size\n   * @default medium\n   */\n  size?: 'small' | 'medium';\n}\n\n/**\n * Component displaying current state of loading\n */\nexport const LoadingText: React.FC<LoadingTextProps> = forwardRef(\n  ({ value, children, label, size = 'medium', sx, ...rest }, ref) => {\n    return (\n      <Box\n        sx={{\n          py: 0.5,\n          fontSize: '14px',\n          ...(size === 'small' && {\n            fontSize: '12px',\n          }),\n          lineHeight: '20px',\n          fontWeight: '400',\n          letterSpacing: '0.002em',\n          textAlign: 'right',\n          ...sx,\n        }}\n        {...rest}\n        ref={ref}\n      >\n        {label && (\n          <Box component=\"span\" sx={{ mr: 0.5 }}>\n            {label}\n          </Box>\n        )}\n        {children || (typeof value === 'number' ? `${value} %` : value)}\n      </Box>\n    );\n  },\n);\n"],"names":["LoadingText","forwardRef","_a","ref","value","children","label","size","sx","rest","__rest","_jsxs","Box","Object","assign","py","fontSize","lineHeight","fontWeight","letterSpacing","textAlign","_jsx","component","mr"],"mappings":"wJAsBO,MAAMA,EAA0CC,EACrD,CAACC,EAA0DC,KAA1D,IAAAC,MAAEA,EAAKC,SAAEA,EAAQC,MAAEA,EAAKC,KAAEA,EAAO,SAAQC,GAAEA,GAAEN,EAAKO,EAAIC,EAAAR,EAAtD,0CACC,OACES,EAACC,iBACCJ,GAAEK,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CACAC,GAAI,GACJC,SAAU,QACG,UAATT,GAAoB,CACtBS,SAAU,SACV,CACFC,WAAY,OACZC,WAAY,MACZC,cAAe,UACfC,UAAW,UACRZ,IAEDC,EAAI,CACRN,IAAKA,EAAGE,SAAA,CAEPC,GACCe,EAACT,GAAIU,UAAU,OAAOd,GAAI,CAAEe,GAAI,IAAKlB,SAClCC,IAGJD,IAA8B,iBAAVD,EAAqB,GAAGA,MAAYA"}
+{"version":3,"file":"LoadingText.js","sources":["../../../src/components/progress/LoadingText.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface LoadingTextProps extends BoxProps<ElementType> {\n  /**\n   * Value in percent to display\n   */\n  value?: number | string;\n  /**\n   * Additional label before the value\n   */\n  label?: ReactNode;\n  /**\n   * Affects font size\n   * @default medium\n   */\n  size?: 'small' | 'medium';\n}\n\n/**\n * Component displaying current state of loading\n */\nexport const LoadingText: React.FC<LoadingTextProps> = forwardRef(\n  ({ value, children, label, size = 'medium', sx, ...rest }, ref) => {\n    return (\n      <Box\n        sx={{\n          py: 0.5,\n          fontSize: '14px',\n          ...(size === 'small' && {\n            fontSize: '12px',\n          }),\n          lineHeight: '20px',\n          fontWeight: '400',\n          letterSpacing: '0.002em',\n          textAlign: 'right',\n          ...sx,\n        }}\n        {...rest}\n        ref={ref}\n      >\n        {label && (\n          <Box component=\"span\" sx={{ mr: 0.5 }}>\n            {label}\n          </Box>\n        )}\n        {children || (typeof value === 'number' ? `${value} %` : value)}\n      </Box>\n    );\n  },\n);\n"],"names":["LoadingText","forwardRef","value","children","label","size","sx","rest","ref","_jsxs","Box","py","fontSize","lineHeight","fontWeight","letterSpacing","textAlign","_jsx","component","mr"],"mappings":"yHAsBO,MAAMA,EAA0CC,EACrD,EAAGC,QAAOC,WAAUC,QAAOC,OAAO,SAAUC,QAAOC,GAAQC,IAEvDC,EAACC,EAAG,CACFJ,GAAI,CACFK,GAAI,GACJC,SAAU,UACG,UAATP,GAAoB,CACtBO,SAAU,QAEZC,WAAY,OACZC,WAAY,MACZC,cAAe,UACfC,UAAW,WACRV,MAEDC,EACJC,IAAKA,EAAGL,SAAA,CAEPC,GACCa,EAACP,GAAIQ,UAAU,OAAOZ,GAAI,CAAEa,GAAI,IAAKhB,SAClCC,IAGJD,IAA8B,iBAAVD,EAAqB,GAAGA,MAAYA"}

package/components/progress/Progress.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"tslib";import{jsx as t}from"react/jsx-runtime";import{forwardRef as o,useMemo as e}from"react";import{Loader as a}from"./Loader.js";import{Spinner as i}from"./Spinner.js";const m=o((o,m)=>{var{variant:n="spinner",value:s}=o,p=r(o,["variant","value"]);const f=e(()=>s&&s<0?0:s&&s>100?100:s,[s]);return t("loader"===n?a:i,Object.assign({ref:m,value:f},p))});export{m as Progress};
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as o,useMemo as e}from"react";import{Loader as t}from"./Loader.js";import{Spinner as m}from"./Spinner.js";const n=o(({variant:o="spinner",value:n,...a},i)=>{const p=e(()=>n&&n<0?0:n&&n>100?100:n,[n]);return r("loader"===o?t:m,{ref:i,value:p,...a})});export{n as Progress};
 //# sourceMappingURL=Progress.js.map

package/components/progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sources":["../../../src/components/progress/Progress.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { Loader, LoaderProps } from './Loader';\nimport { Spinner, SpinnerProps } from './Spinner';\n\nexport interface ProgressBaseProps {\n  /**\n   * Determine if loader, or spinner should be used\n   * @default spinner\n   */\n  variant?: 'spinner' | 'loader';\n}\n\nexport interface ProgressLoaderProps extends ProgressBaseProps, LoaderProps {\n  variant: 'loader';\n}\n\nexport interface ProgressSpinnerProps extends ProgressBaseProps, SpinnerProps {\n  variant?: 'spinner';\n}\n\nexport type ProgressProps = ProgressLoaderProps | ProgressSpinnerProps;\n\nexport const Progress: React.FC<ProgressProps> = forwardRef(({ variant = 'spinner', value, ...rest }, ref) => {\n  // make sure the value is valid\n  const validValue = useMemo(() => {\n    const processedValue = value;\n    if (processedValue && processedValue < 0) return 0;\n    if (processedValue && processedValue > 100) return 100;\n    return processedValue;\n  }, [value]);\n\n  if (variant === 'loader') {\n    return <Loader ref={ref} value={validValue} {...(rest as LoaderProps)} />;\n  }\n  return <Spinner ref={ref} value={validValue} {...(rest as SpinnerProps)} />;\n});\n"],"names":["Progress","forwardRef","_a","ref","variant","value","rest","__rest","validValue","useMemo","_jsx","Loader","Spinner","Object","assign"],"mappings":"mMAsBO,MAAMA,EAAoCC,EAAW,CAACC,EAAyCC,SAAzCC,QAAEA,EAAU,UAASC,MAAEA,KAAUC,EAAIC,EAAAL,EAArC,CAAA,UAAA,UAE3D,MAAMM,EAAaC,EAAQ,IACFJ,KACgB,EAAU,EAD1BA,KAEgB,IAAY,IAF5BA,EAItB,CAACA,IAEJ,OACSK,EADO,WAAZN,EACMO,EAEFC,EAFQC,OAAAC,OAAA,CAACX,IAAKA,EAAKE,MAAOG,GAAiBF"}
+{"version":3,"file":"Progress.js","sources":["../../../src/components/progress/Progress.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { Loader, LoaderProps } from './Loader';\nimport { Spinner, SpinnerProps } from './Spinner';\n\nexport interface ProgressBaseProps {\n  /**\n   * Determine if loader, or spinner should be used\n   * @default spinner\n   */\n  variant?: 'spinner' | 'loader';\n}\n\nexport interface ProgressLoaderProps extends ProgressBaseProps, LoaderProps {\n  variant: 'loader';\n}\n\nexport interface ProgressSpinnerProps extends ProgressBaseProps, SpinnerProps {\n  variant?: 'spinner';\n}\n\nexport type ProgressProps = ProgressLoaderProps | ProgressSpinnerProps;\n\nexport const Progress: React.FC<ProgressProps> = forwardRef(({ variant = 'spinner', value, ...rest }, ref) => {\n  // make sure the value is valid\n  const validValue = useMemo(() => {\n    const processedValue = value;\n    if (processedValue && processedValue < 0) return 0;\n    if (processedValue && processedValue > 100) return 100;\n    return processedValue;\n  }, [value]);\n\n  if (variant === 'loader') {\n    return <Loader ref={ref} value={validValue} {...(rest as LoaderProps)} />;\n  }\n  return <Spinner ref={ref} value={validValue} {...(rest as SpinnerProps)} />;\n});\n"],"names":["Progress","forwardRef","variant","value","rest","ref","validValue","useMemo","_jsx","Loader","Spinner"],"mappings":"0KAsBaA,EAAoCC,EAAW,EAAGC,UAAU,UAAWC,WAAUC,GAAQC,KAEpG,MAAMC,EAAaC,EAAQ,IACFJ,KACgB,EAAU,EAD1BA,KAEgB,IAAY,IAF5BA,EAItB,CAACA,IAEJ,OACSK,EADO,WAAZN,EACMO,EAEFC,EAFQ,CAACL,IAAKA,EAAKF,MAAOG,KAAiBF"}

package/components/progress/ProgressState.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as s,jsx as r}from"react/jsx-runtime";import{forwardRef as o,useMemo as t}from"react";import{Box as i}from"@mui/material";import{CheckIcon as n}from"../icon/stroke/CheckIcon.js";import{CloseIcon as a}from"../icon/stroke/CloseIcon.js";import{LoadingText as c}from"./LoadingText.js";const m=o((o,m)=>{var{children:p,sx:g,size:l="medium",state:d,message:f,messageProps:u,successMessage:b,errorMessage:j,IconComponent:x,iconProps:h,iconWrapperProps:y}=o,I=e(o,["children","sx","size","state","message","messageProps","successMessage","errorMessage","IconComponent","iconProps","iconWrapperProps"]);const O=null!=y?y:{},{sx:M}=O,P=e(O,["sx"]),[C,k]=t(()=>"error"===d?[a,j]:[n,b],[d,b,j]),z=null!=x?x:C;return s(i,Object.assign({"data-testid":"ProgressMessageWrapper",ref:m,sx:Object.assign({display:"inline-flex",justifyContent:"center",alignItems:"center",gap:1},g)},I,{children:[r(i,Object.assign({sx:Object.assign(Object.assign(Object.assign(Object.assign({"@keyframes flow-progressstate-finished":{"0%":{transform:"scale(.8)",opacity:"0.8"},"100%":{transform:"scale(1)",opacity:"1"}},animation:"flow-progressstate-finished 0.4s",backgroundColor:e=>"error"===d?"error.main":"dark"===e.palette.mode?"brand.secondary":"brand.primary",color:"common.white",borderRadius:"50%",lineHeight:"0",display:"inline-flex",alignItems:"center",justifyContent:"center"},"medium"===l&&{p:.5,"& .MuiSvgIcon-root":{fontSize:"16px"}}),"small"===l&&{p:.25,"& .MuiSvgIcon-root":{fontSize:"12px"}}),"number"==typeof l&&{height:`${l}px`,width:`${l}px`}),M)},P,{children:r(z,Object.assign({"data-testid":"Icon"},h))}),d),(p||k||f)&&r(c,Object.assign({"data-testid":"ProgressMessage"},"number"!=typeof l&&{size:l},u,{children:p||k||f}))]}))});export{m as ProgressState};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as o,useMemo as s}from"react";import{Box as t}from"@mui/material";import{CheckIcon as i}from"../icon/stroke/CheckIcon.js";import{CloseIcon as n}from"../icon/stroke/CloseIcon.js";import{LoadingText as a}from"./LoadingText.js";const m=o(({children:o,sx:m,size:c="medium",state:p,message:d,messageProps:l,successMessage:f,errorMessage:g,IconComponent:u,iconProps:x,iconWrapperProps:h,...y},I)=>{const{sx:b,...k}=h??{},[C,j]=s(()=>"error"===p?[n,g]:[i,f],[p,f,g]);return e(t,{"data-testid":"ProgressMessageWrapper",ref:I,sx:{display:"inline-flex",justifyContent:"center",alignItems:"center",gap:1,...m},...y,children:[r(t,{sx:{"@keyframes flow-progressstate-finished":{"0%":{transform:"scale(.8)",opacity:"0.8"},"100%":{transform:"scale(1)",opacity:"1"}},animation:"flow-progressstate-finished 0.4s",backgroundColor:e=>"dark"===e.palette.mode?"brand.secondary":"brand.primary",..."error"===p&&{backgroundColor:"error.main"},color:"common.white",borderRadius:"50%",lineHeight:"0",display:"inline-flex",alignItems:"center",justifyContent:"center",..."medium"===c&&{p:.5,"& .MuiSvgIcon-root":{fontSize:"16px"}},..."small"===c&&{p:.25,"& .MuiSvgIcon-root":{fontSize:"12px"}},..."number"==typeof c&&{height:`${c}px`,width:`${c}px`},...b},...k,children:r(u??C,{"data-testid":"Icon",...x})},p),(o||j||d)&&r(a,{"data-testid":"ProgressMessage",..."number"!=typeof c&&{size:c},...l,children:o||j||d})]})});export{m as ProgressState};
 //# sourceMappingURL=ProgressState.js.map

package/components/progress/ProgressState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressState.js","sources":["../../../src/components/progress/ProgressState.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef, useMemo, ComponentType } from 'react';\nimport { Box, BoxProps, SvgIconProps } from '@mui/material';\nimport { CheckIcon } from '@/src/components/icon/stroke/CheckIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\n\nexport interface ProgressStateProps extends BoxProps<ElementType> {\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * State to display\n   */\n  state?: 'error' | 'success';\n  /**\n   * Message when success appears\n   */\n  successMessage?: ReactNode;\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ReactNode;\n  /**\n   * Properties applied to message wrapper\n   */\n  messageProps?: LoadingTextProps;\n  /**\n   * Overwrites state message (successMessage or errorMessage)\n   */\n  message?: ReactNode;\n  /**\n   * Properties applied to icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Overwrites state icon\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to wrapper of icon\n   */\n  iconWrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component displaying current state of loading\n */\nexport const ProgressState: React.FC<ProgressStateProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      size = 'medium',\n      state,\n      message,\n      messageProps,\n      successMessage,\n      errorMessage,\n      IconComponent,\n      iconProps,\n      iconWrapperProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: iconWrapperSx, ...restIconWrapper } = iconWrapperProps ?? {};\n    const [IconStateComponent, stateMessage] = useMemo(() => {\n      switch (state) {\n        case 'error':\n          return [CloseIcon, errorMessage];\n        case 'success':\n        default:\n          return [CheckIcon, successMessage];\n      }\n    }, [state, successMessage, errorMessage]);\n    const ProgressStateIcon = IconComponent ?? IconStateComponent;\n\n    return (\n      <Box\n        data-testid=\"ProgressMessageWrapper\"\n        ref={ref}\n        sx={{\n          display: 'inline-flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          gap: 1,\n          ...sx,\n        }}\n        {...rest}\n      >\n        <Box\n          key={state}\n          sx={{\n            '@keyframes flow-progressstate-finished': {\n              '0%': {\n                transform: 'scale(.8)',\n                opacity: '0.8',\n              },\n              '100%': {\n                transform: 'scale(1)',\n                opacity: '1',\n              },\n            },\n            animation: 'flow-progressstate-finished 0.4s',\n            backgroundColor: (theme) =>\n              state === 'error' ? 'error.main' : theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary',\n            color: 'common.white',\n            borderRadius: '50%',\n            lineHeight: '0',\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            ...(size === 'medium' && {\n              // 24px\n              p: 0.5,\n              '& .MuiSvgIcon-root': {\n                fontSize: '16px',\n              },\n            }),\n            ...(size === 'small' && {\n              // 16px\n              p: 0.25,\n              '& .MuiSvgIcon-root': {\n                fontSize: '12px',\n              },\n            }),\n            ...(typeof size === 'number' && {\n              height: `${size}px`,\n              width: `${size}px`,\n            }),\n            ...iconWrapperSx,\n          }}\n          {...restIconWrapper}\n        >\n          <ProgressStateIcon data-testid=\"Icon\" {...iconProps} />\n        </Box>\n        {(children || stateMessage || message) && (\n          <LoadingText\n            data-testid=\"ProgressMessage\"\n            {...(typeof size !== 'number' && { size: size })}\n            {...messageProps}\n          >\n            {children || stateMessage || message}\n          </LoadingText>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["ProgressState","forwardRef","_a","ref","children","sx","size","state","message","messageProps","successMessage","errorMessage","IconComponent","iconProps","iconWrapperProps","rest","__rest","_b","iconWrapperSx","restIconWrapper","IconStateComponent","stateMessage","useMemo","CloseIcon","CheckIcon","ProgressStateIcon","_jsxs","Box","Object","assign","display","justifyContent","alignItems","gap","_jsx","transform","opacity","animation","backgroundColor","theme","palette","mode","color","borderRadius","lineHeight","p","fontSize","height","width","LoadingText"],"mappings":"oUAiDO,MAAMA,EAA8CC,EACzD,CACEC,EAcAC,KAdA,IAAAC,SACEA,EAAQC,GACRA,EAAEC,KACFA,EAAO,SAAQC,MACfA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,eACZA,EAAcC,aACdA,EAAYC,cACZA,EAAaC,UACbA,EAASC,iBACTA,GAAgBZ,EACba,EAAIC,EAAAd,EAZT,CAAA,WAAA,KAAA,OAAA,QAAA,UAAA,eAAA,iBAAA,eAAA,gBAAA,YAAA,qBAgBA,MAAMe,EAA4CH,QAAAA,EAAoB,IAA9DT,GAAIa,GAAaD,EAAKE,EAAeH,EAAAC,EAAvC,CAAA,QACCG,EAAoBC,GAAgBC,EAAQ,IAE1C,UADCf,EAEG,CAACgB,EAAWZ,GAGZ,CAACa,EAAWd,GAEtB,CAACH,EAAOG,EAAgBC,IACrBc,EAAoBb,QAAAA,EAAiBQ,EAE3C,OACEM,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,yBACZ1B,IAAKA,EACLE,GAAEuB,OAAAC,OAAA,CACAC,QAAS,cACTC,eAAgB,SAChBC,WAAY,SACZC,IAAK,GACF5B,IAEDU,aAEJmB,EAACP,iBAECtB,GAAEuB,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CACA,yCAA0C,CACxC,KAAM,CACJM,UAAW,YACXC,QAAS,OAEX,OAAQ,CACND,UAAW,WACXC,QAAS,MAGbC,UAAW,mCACXC,gBAAkBC,GACN,UAAVhC,EAAoB,aAAsC,SAAvBgC,EAAMC,QAAQC,KAAkB,kBAAoB,gBACzFC,MAAO,eACPC,aAAc,MACdC,WAAY,IACZd,QAAS,cACTE,WAAY,SACZD,eAAgB,UACH,WAATzB,GAAqB,CAEvBuC,EAAG,GACH,qBAAsB,CACpBC,SAAU,UAGD,UAATxC,GAAoB,CAEtBuC,EAAG,IACH,qBAAsB,CACpBC,SAAU,UAGM,iBAATxC,GAAqB,CAC9ByC,OAAQ,GAAGzC,MACX0C,MAAO,GAAG1C,QAETY,IAEDC,EAAe,CAAAf,SAEnB8B,EAACT,EAAiBG,OAAAC,OAAA,CAAA,cAAa,QAAWhB,MA3CrCN,IA6CLH,GAAYiB,GAAgBb,IAC5B0B,EAACe,+BACa,mBACS,iBAAT3C,GAAqB,CAAEA,KAAMA,GACrCG,EAAY,CAAAL,SAEfA,GAAYiB,GAAgBb"}
+{"version":3,"file":"ProgressState.js","sources":["../../../src/components/progress/ProgressState.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef, useMemo, ComponentType } from 'react';\nimport { Box, BoxProps, SvgIconProps } from '@mui/material';\nimport { CheckIcon } from '@/src/components/icon/stroke/CheckIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\n\nexport interface ProgressStateProps extends BoxProps<ElementType> {\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * State to display\n   */\n  state?: 'error' | 'success';\n  /**\n   * Message when success appears\n   */\n  successMessage?: ReactNode;\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ReactNode;\n  /**\n   * Properties applied to message wrapper\n   */\n  messageProps?: LoadingTextProps;\n  /**\n   * Overwrites state message (successMessage or errorMessage)\n   */\n  message?: ReactNode;\n  /**\n   * Properties applied to icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Overwrites state icon\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to wrapper of icon\n   */\n  iconWrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component displaying current state of loading\n */\nexport const ProgressState: React.FC<ProgressStateProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      size = 'medium',\n      state,\n      message,\n      messageProps,\n      successMessage,\n      errorMessage,\n      IconComponent,\n      iconProps,\n      iconWrapperProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: iconWrapperSx, ...restIconWrapper } = iconWrapperProps ?? {};\n    const [IconStateComponent, stateMessage] = useMemo(() => {\n      switch (state) {\n        case 'error':\n          return [CloseIcon, errorMessage];\n        case 'success':\n        default:\n          return [CheckIcon, successMessage];\n      }\n    }, [state, successMessage, errorMessage]);\n    const ProgressStateIcon = IconComponent ?? IconStateComponent;\n\n    return (\n      <Box\n        data-testid=\"ProgressMessageWrapper\"\n        ref={ref}\n        sx={{\n          display: 'inline-flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          gap: 1,\n          ...sx,\n        }}\n        {...rest}\n      >\n        <Box\n          key={state}\n          sx={{\n            '@keyframes flow-progressstate-finished': {\n              '0%': {\n                transform: 'scale(.8)',\n                opacity: '0.8',\n              },\n              '100%': {\n                transform: 'scale(1)',\n                opacity: '1',\n              },\n            },\n            animation: 'flow-progressstate-finished 0.4s',\n            backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary'),\n            ...(state === 'error' && {\n              backgroundColor: 'error.main',\n            }),\n            color: 'common.white',\n            borderRadius: '50%',\n            lineHeight: '0',\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            ...(size === 'medium' && {\n              // 24px\n              p: 0.5,\n              '& .MuiSvgIcon-root': {\n                fontSize: '16px',\n              },\n            }),\n            ...(size === 'small' && {\n              // 16px\n              p: 0.25,\n              '& .MuiSvgIcon-root': {\n                fontSize: '12px',\n              },\n            }),\n            ...(typeof size === 'number' && {\n              height: `${size}px`,\n              width: `${size}px`,\n            }),\n            ...iconWrapperSx,\n          }}\n          {...restIconWrapper}\n        >\n          <ProgressStateIcon data-testid=\"Icon\" {...iconProps} />\n        </Box>\n        {(children || stateMessage || message) && (\n          <LoadingText\n            data-testid=\"ProgressMessage\"\n            {...(typeof size !== 'number' && { size: size })}\n            {...messageProps}\n          >\n            {children || stateMessage || message}\n          </LoadingText>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["ProgressState","forwardRef","children","sx","size","state","message","messageProps","successMessage","errorMessage","IconComponent","iconProps","iconWrapperProps","rest","ref","iconWrapperSx","restIconWrapper","IconStateComponent","stateMessage","useMemo","CloseIcon","CheckIcon","_jsxs","Box","display","justifyContent","alignItems","gap","_jsx","transform","opacity","animation","backgroundColor","theme","palette","mode","color","borderRadius","lineHeight","p","fontSize","height","width","LoadingText"],"mappings":"qSAiDO,MAAMA,EAA8CC,EACzD,EAEIC,WACAC,KACAC,OAAO,SACPC,QACAC,UACAC,eACAC,iBACAC,eACAC,gBACAC,YACAC,sBACGC,GAELC,KAEA,MAAQX,GAAIY,KAAkBC,GAAoBJ,GAAoB,CAAA,GAC/DK,EAAoBC,GAAgBC,EAAQ,IAE1C,UADCd,EAEG,CAACe,EAAWX,GAGZ,CAACY,EAAWb,GAEtB,CAACH,EAAOG,EAAgBC,IAG3B,OACEa,EAACC,EAAG,CAAA,cACU,yBACZT,IAAKA,EACLX,GAAI,CACFqB,QAAS,cACTC,eAAgB,SAChBC,WAAY,SACZC,IAAK,KACFxB,MAEDU,EAAIX,SAAA,CAER0B,EAACL,EAAG,CAEFpB,GAAI,CACF,yCAA0C,CACxC,KAAM,CACJ0B,UAAW,YACXC,QAAS,OAEX,OAAQ,CACND,UAAW,WACXC,QAAS,MAGbC,UAAW,mCACXC,gBAAkBC,GAAkC,SAAvBA,EAAMC,QAAQC,KAAkB,kBAAoB,mBACnE,UAAV9B,GAAqB,CACvB2B,gBAAiB,cAEnBI,MAAO,eACPC,aAAc,MACdC,WAAY,IACZd,QAAS,cACTE,WAAY,SACZD,eAAgB,YACH,WAATrB,GAAqB,CAEvBmC,EAAG,GACH,qBAAsB,CACpBC,SAAU,YAGD,UAATpC,GAAoB,CAEtBmC,EAAG,IACH,qBAAsB,CACpBC,SAAU,YAGM,iBAATpC,GAAqB,CAC9BqC,OAAQ,GAAGrC,MACXsC,MAAO,GAAGtC,UAETW,MAEDC,WAEJY,EA7DoBlB,GAAiBO,iBA6DN,UAAWN,KA7CrCN,IA+CLH,GAAYgB,GAAgBZ,IAC5BsB,EAACe,EAAW,CAAA,cACE,qBACS,iBAATvC,GAAqB,CAAEA,KAAMA,MACrCG,EAAYL,SAEfA,GAAYgB,GAAgBZ"}

package/components/progress/Spinner.d.ts

@@ -41,7 +41,7 @@ export interface SpinnerProps extends BoxProps<ElementType> {
     /**
      * Additional label before LoadingText
      */
-    label?: boolean | ReactNode;
+    label?: ReactNode;
     /**
      * Properties applied to LoadingText
      */

package/components/progress/Spinner.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as r,jsxs as s}from"react/jsx-runtime";import{forwardRef as t,useState as a,useRef as n,useEffect as i,useMemo as o,useCallback as c}from"react";import{useTheme as l,Box as m,SvgIcon as d}from"@mui/material";import{LoadingText as f}from"./LoadingText.js";import{ProgressState as h}from"./ProgressState.js";const p=t((t,p)=>{var{sx:g,className:u,children:k,size:y="medium",thickness:b=16,value:O,svgIconProps:v,loaderTextProps:x,label:D,state:j="loading",successMessage:w,errorMessage:$,progressStateProps:L}=t,M=e(t,["sx","className","children","size","thickness","value","svgIconProps","loaderTextProps","label","state","successMessage","errorMessage","progressStateProps"]);const N=l(),S=null!=v?v:{},{sx:F}=S,P=e(S,["sx"]),[Z,z]=a(Number.isNaN(O)?0:null!=O?O:15),C=n(),I=n();i(()=>{C.current=Number.isNaN(O)?0:null!=O?O:15;const e=()=>{z(r=>{const s=C.current-r,t=r+.5*s;return Math.abs(s)<.1||0===C.current?C.current:(I.current=requestAnimationFrame(e),t)})};return I.current=requestAnimationFrame(e),()=>cancelAnimationFrame(I.current)},[O]);const{radius:R,circumference:A,lineCap:T,gap:q,minSegmentPercentForFullGap:B}=o(()=>{const e=50-b/2,r=2*Math.PI*e,s=b/2;return{radius:e,circumference:r,lineCap:s,gap:s,minSegmentPercentForFullGap:(b+s)/r*100}},[b]),G=c(e=>{const r=100-e,s=e/100*360,t=q*Math.max(0,Math.min(1,Math.min(e,r)/B));return{reversedRotation:s,dashLength:Math.max(e/100*A-b-t,0),dashOffset:-(T+t/2),reversedDashLength:Math.max(r/100*A-b-t,0)}},[b]),W=G(Z),[E,H]=void 0===O?[G(15),G(75)]:[W,W];return"loading"!==j?r(h,Object.assign({ref:p,size:y,state:j,successMessage:w,errorMessage:$},L)):s(m,Object.assign({"data-testid":"Spinner",role:"progressbar",className:["FlowSpinner-root",u].filter(Boolean).join(" "),ref:p,sx:Object.assign({display:"inline-flex",alignItems:"center",justifyContent:"center",gap:1},g)},void 0!==O&&{"aria-valuenow":O,"aria-valuemin":0,"aria-valuemax":100},M,{children:[r(d,Object.assign({"aria-live":"polite",viewBox:"0 0 100 100",sx:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},"small"===y&&{width:"16px",height:"16px"}),"medium"===y&&{width:"24px",height:"24px"}),"number"==typeof y&&{width:`${y}px`,height:`${y}px`}),{color:"dark"===N.palette.mode?"brand.secondary":"brand.primary"}),void 0===O&&{"@keyframes flow-spinner-indeterminate":{"0%":{transform:"rotateZ(0)"},"100%":{transform:"rotateZ(360deg)"}},"@keyframes flow-spinner-indeterminate-group":{"0%, 25%":{transform:"rotateZ(0)"},"70%":{transform:"rotateZ(45deg)"},"100%":{transform:"rotateZ(360deg)"}},"@keyframes flow-spinner-indeterminate-circle-primary":{"0%, 25%, 100%":{strokeDasharray:`${E.dashLength} ${A}`,strokeDashOffset:E.dashOffset},"70%":{strokeDasharray:`${H.dashLength} ${A}`,strokeDashOffset:H.dashOffset}},"@keyframes flow-spinner-indeterminate-circle-secondary":{"0%, 25%, 100%":{strokeDasharray:`${E.reversedDashLength} ${A}`,strokeDashOffset:E.dashOffset},"70%":{strokeDasharray:`${H.reversedDashLength} ${A}`,strokeDashOffset:H.dashOffset}},"@keyframes flow-spinner-indeterminate-group-secondary":{"0%, 25%, 100%":{transform:`rotate(${E.reversedRotation}deg)`},"70%":{transform:`rotate(${H.reversedRotation}deg)`}},animation:"2s linear infinite flow-spinner-indeterminate","& > g":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-group",transformOrigin:"50% 50%","& circle":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-circle-primary"},"& g":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-group-secondary","& circle":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-circle-secondary"}}}}),F)},P,{children:s("g",{children:[(W.reversedDashLength>0||0===Z)&&r("g",{style:{transform:`rotate(${W.reversedRotation}deg)`,transformOrigin:"50% 50%"},children:r("circle",Object.assign({className:"FlowSpinner-circle-secondary",cx:"50",cy:"50",r:R,fill:"none",stroke:"dark"===N.palette.mode?N.palette.onSurface.os700:N.palette.transparent.secondary,strokeWidth:b,strokeLinecap:"round",strokeDasharray:`${W.reversedDashLength} ${A}`,strokeDashoffset:W.dashOffset},0===Z&&{strokeLinecap:"butt",strokeDasharray:"none",strokeDashoffset:"none"}))}),(W.dashLength>0||100===Z)&&r("circle",Object.assign({className:"FlowSpinner-circle-primary",cx:"50",cy:"50",r:R,fill:"none",stroke:"currentColor",strokeWidth:b,strokeLinecap:"round",strokeDasharray:`${W.dashLength} ${A}`,strokeDashoffset:W.dashOffset},100===Z&&{strokeLinecap:"butt",strokeDasharray:"none",strokeDashoffset:"none"}))]})})),D&&void 0!==O&&r(f,Object.assign({"data-testid":"Spinner.percentage"},"number"!=typeof y&&{size:y},{value:O,label:!0!==D?D:void 0},x))]}))});export{p as Spinner};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{forwardRef as t,useState as a,useRef as n,useEffect as s,useMemo as i,useCallback as o}from"react";import{useTheme as c,Box as m,SvgIcon as d}from"@mui/material";import{LoadingText as l}from"./LoadingText.js";import{ProgressState as f}from"./ProgressState.js";const h=t(({sx:t,className:h,children:p,size:u="medium",thickness:g=16,value:k,svgIconProps:y,loadingTextProps:v,label:x,state:D="loading",successMessage:w,errorMessage:$,progressStateProps:L,...O},b)=>{const M=c(),{sx:F,...N}=y??{},[S,P]=a(Number.isNaN(k)?0:k??15),j=n(null),Z=n(null);s(()=>{j.current=Number.isNaN(k)?0:k??15;const e=()=>{P(r=>{const t=j.current-r,a=r+.5*t;return Math.abs(t)<.1||0===j.current?j.current:(Z.current=requestAnimationFrame(e),a)})};return Z.current=requestAnimationFrame(e),()=>cancelAnimationFrame(Z.current)},[k]);const{radius:C,circumference:R,lineCap:z,gap:A,minSegmentPercentForFullGap:I}=i(()=>{const e=50-g/2,r=2*Math.PI*e,t=g/2;return{radius:e,circumference:r,lineCap:t,gap:t,minSegmentPercentForFullGap:(g+t)/r*100}},[g]),q=o(e=>{const r=100-e,t=e/100*360,a=A*Math.max(0,Math.min(1,Math.min(e,r)/I));return{reversedRotation:t,dashLength:Math.max(e/100*R-g-a,0),dashOffset:-(z+a/2),reversedDashLength:Math.max(r/100*R-g-a,0)}},[g]),B=q(S),[G,T]=void 0===k?[q(15),q(75)]:[B,B];return"loading"!==D?e(f,{ref:b,size:u,state:D,successMessage:w,errorMessage:$,...L}):r(m,{"data-testid":"Spinner",role:"progressbar",className:["FlowSpinner-root",h].filter(Boolean).join(" "),ref:b,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:1,...t},...void 0!==k&&{"aria-valuenow":k,"aria-valuemin":0,"aria-valuemax":100},...O,children:[e(d,{"aria-live":"polite",viewBox:"0 0 100 100",sx:{..."small"===u&&{width:"16px",height:"16px"},..."medium"===u&&{width:"24px",height:"24px"},..."number"==typeof u&&{width:`${u}px`,height:`${u}px`},color:"dark"===M.palette.mode?"brand.secondary":"brand.primary",...void 0===k&&{"@keyframes flow-spinner-indeterminate":{"0%":{transform:"rotateZ(0)"},"100%":{transform:"rotateZ(360deg)"}},"@keyframes flow-spinner-indeterminate-group":{"0%, 25%":{transform:"rotateZ(0)"},"70%":{transform:"rotateZ(45deg)"},"100%":{transform:"rotateZ(360deg)"}},"@keyframes flow-spinner-indeterminate-circle-primary":{"0%, 25%, 100%":{strokeDasharray:`${G.dashLength} ${R}`,strokeDashOffset:G.dashOffset},"70%":{strokeDasharray:`${T.dashLength} ${R}`,strokeDashOffset:T.dashOffset}},"@keyframes flow-spinner-indeterminate-circle-secondary":{"0%, 25%, 100%":{strokeDasharray:`${G.reversedDashLength} ${R}`,strokeDashOffset:G.dashOffset},"70%":{strokeDasharray:`${T.reversedDashLength} ${R}`,strokeDashOffset:T.dashOffset}},"@keyframes flow-spinner-indeterminate-group-secondary":{"0%, 25%, 100%":{transform:`rotate(${G.reversedRotation}deg)`},"70%":{transform:`rotate(${T.reversedRotation}deg)`}},animation:"2s linear infinite flow-spinner-indeterminate","& > g":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-group",transformOrigin:"50% 50%","& circle":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-circle-primary"},"& g":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-group-secondary","& circle":{animation:"2s ease-in-out infinite flow-spinner-indeterminate-circle-secondary"}}}},...F},...N,children:r("g",{children:[(B.reversedDashLength>0||0===S)&&e("g",{style:{transform:`rotate(${B.reversedRotation}deg)`,transformOrigin:"50% 50%"},children:e("circle",{className:"FlowSpinner-circle-secondary",cx:"50",cy:"50",r:C,fill:"none",stroke:"dark"===M.palette.mode?M.palette.onSurface.os700:M.palette.transparent.secondary,strokeWidth:g,strokeLinecap:"round",strokeDasharray:`${B.reversedDashLength} ${R}`,strokeDashoffset:B.dashOffset,...0===S&&{strokeLinecap:"butt",strokeDasharray:"none",strokeDashoffset:"none"}})}),(B.dashLength>0||100===S)&&e("circle",{className:"FlowSpinner-circle-primary",cx:"50",cy:"50",r:C,fill:"none",stroke:"currentColor",strokeWidth:g,strokeLinecap:"round",strokeDasharray:`${B.dashLength} ${R}`,strokeDashoffset:B.dashOffset,...100===S&&{strokeLinecap:"butt",strokeDasharray:"none",strokeDashoffset:"none"}})]})}),x&&void 0!==k&&e(l,{"data-testid":"Spinner.percentage",..."number"!=typeof u&&{size:u},value:k,label:!0!==x?x:void 0,...v})]})});export{h as Spinner};
 //# sourceMappingURL=Spinner.js.map

package/components/progress/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../src/components/progress/Spinner.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef, useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { Box, BoxProps, SvgIcon, SvgIconProps, useTheme } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\nimport { ProgressState, ProgressStateProps } from './ProgressState';\n\nexport interface SpinnerProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * Stroke width of circle\n   * @default 16\n   */\n  thickness?: number;\n  /**\n   * State indicates whether the component should display loader or spinner for the loading state or message with a icon\n   * @default loading\n   */\n  state?: 'loading' | ProgressStateProps['state'];\n  /**\n   * Message when success appears\n   */\n  successMessage?: ProgressStateProps['successMessage'];\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ProgressStateProps['errorMessage'];\n  /**\n   * Properties applied to ProgressState\n   */\n  progressStateProps?: Omit<ProgressStateProps, 'successMessage' | 'errorMessage' | 'state'>;\n  /**\n   * Properties applied to SVG\n   */\n  svgIconProps?: SvgIconProps;\n  /**\n   * Additional label before LoadingText\n   */\n  label?: boolean | ReactNode;\n  /**\n   * Properties applied to LoadingText\n   */\n  loadingTextProps?: LoadingTextProps;\n}\n\n/**\n * A styled loader component that displays animated svg circle\n */\nexport const Spinner: React.FC<SpinnerProps> = forwardRef(\n  (\n    {\n      sx,\n      className,\n      children,\n      size = 'medium',\n      thickness = 16,\n      value,\n      svgIconProps,\n      loaderTextProps,\n      label,\n      state = 'loading',\n      successMessage,\n      errorMessage,\n      progressStateProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: svgIconSx, ...restSvgIcon } = svgIconProps ?? {};\n\n    // smooth js transition between values\n    const [displayValue, setDisplayValue] = useState(Number.isNaN(value) ? 0 : (value ?? 15));\n    const targetValueRef = useRef<number>();\n    const rafRef = useRef<number>();\n    useEffect(() => {\n      targetValueRef.current = Number.isNaN(value) ? 0 : (value ?? 15);\n\n      const animate = () => {\n        setDisplayValue((prev) => {\n          const diff = targetValueRef.current - prev;\n          const step = diff * 0.5;\n          const next = prev + step;\n\n          // small diff or reset happens immediately\n          if (Math.abs(diff) < 0.1 || targetValueRef.current === 0) {\n            return targetValueRef.current;\n          } else {\n            rafRef.current = requestAnimationFrame(animate);\n            return next;\n          }\n        });\n      };\n      rafRef.current = requestAnimationFrame(animate);\n      return () => cancelAnimationFrame(rafRef.current!);\n    }, [value]);\n\n    const { radius, circumference, lineCap, gap, minSegmentPercentForFullGap } = useMemo(() => {\n      const _radius = 50 - thickness / 2;\n      const _circumference = 2 * Math.PI * _radius;\n      const _lineCap = thickness / 2;\n      const _gap = _lineCap;\n      const _minSegmentPercentForFullGap = ((thickness + _gap) / _circumference) * 100;\n\n      return {\n        radius: _radius,\n        circumference: _circumference,\n        lineCap: _lineCap,\n        gap: _gap,\n        minSegmentPercentForFullGap: _minSegmentPercentForFullGap,\n      };\n    }, [thickness]);\n    const obtainValues = useCallback(\n      (v: number) => {\n        const _reversedValue = 100 - v;\n        const _reversedRotation = 360 * (v / 100);\n        const _effectiveGap = gap * Math.max(0, Math.min(1, Math.min(v, _reversedValue) / minSegmentPercentForFullGap));\n        const _dashLength = Math.max((v / 100) * circumference - thickness - _effectiveGap, 0);\n        const _dashOffset = -(lineCap + _effectiveGap / 2);\n        const _reversedDashLength = Math.max((_reversedValue / 100) * circumference - thickness - _effectiveGap, 0);\n\n        return {\n          reversedRotation: _reversedRotation,\n          dashLength: _dashLength,\n          dashOffset: _dashOffset,\n          reversedDashLength: _reversedDashLength,\n        };\n      },\n      [thickness],\n    );\n    const values = obtainValues(displayValue);\n    const [valuesSmall, valuesLarge] = value === undefined ? [obtainValues(15), obtainValues(75)] : [values, values];\n\n    if (state !== 'loading') {\n      return (\n        <ProgressState\n          ref={ref}\n          size={size}\n          state={state}\n          successMessage={successMessage}\n          errorMessage={errorMessage}\n          {...progressStateProps}\n        />\n      );\n    }\n\n    return (\n      <Box\n        data-testid=\"Spinner\"\n        role=\"progressbar\"\n        className={['FlowSpinner-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        sx={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: 1,\n          ...sx,\n        }}\n        {...(value !== undefined && {\n          ['aria-valuenow']: value,\n          ['aria-valuemin']: 0,\n          ['aria-valuemax']: 100,\n        })}\n        {...rest}\n      >\n        <SvgIcon\n          aria-live=\"polite\"\n          viewBox=\"0 0 100 100\"\n          sx={{\n            // size is also applied in ProgressState and LoadingText\n            ...(size === 'small' && {\n              width: `16px`,\n              height: `16px`,\n            }),\n            ...(size === 'medium' && {\n              width: `24px`,\n              height: `24px`,\n            }),\n            ...(typeof size === 'number' && {\n              width: `${size}px`,\n              height: `${size}px`,\n            }),\n            color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary',\n            // extra animation if value is not provided\n            ...(value === undefined && {\n              '@keyframes flow-spinner-indeterminate': {\n                '0%': { transform: 'rotateZ(0)' },\n                '100%': { transform: 'rotateZ(360deg)' },\n              },\n              '@keyframes flow-spinner-indeterminate-group': {\n                '0%, 25%': { transform: 'rotateZ(0)' },\n                '70%': { transform: 'rotateZ(45deg)' },\n                '100%': { transform: 'rotateZ(360deg)' },\n              },\n              '@keyframes flow-spinner-indeterminate-circle-primary': {\n                '0%, 25%, 100%': {\n                  strokeDasharray: `${valuesSmall.dashLength} ${circumference}`,\n                  strokeDashOffset: valuesSmall.dashOffset,\n                },\n                '70%': {\n                  strokeDasharray: `${valuesLarge.dashLength} ${circumference}`,\n                  strokeDashOffset: valuesLarge.dashOffset,\n                },\n              },\n              '@keyframes flow-spinner-indeterminate-circle-secondary': {\n                '0%, 25%, 100%': {\n                  strokeDasharray: `${valuesSmall.reversedDashLength} ${circumference}`,\n                  strokeDashOffset: valuesSmall.dashOffset,\n                },\n                '70%': {\n                  strokeDasharray: `${valuesLarge.reversedDashLength} ${circumference}`,\n                  strokeDashOffset: valuesLarge.dashOffset,\n                },\n              },\n              '@keyframes flow-spinner-indeterminate-group-secondary': {\n                '0%, 25%, 100%': { transform: `rotate(${valuesSmall.reversedRotation}deg)` },\n                '70%': { transform: `rotate(${valuesLarge.reversedRotation}deg)` },\n              },\n              // assign animation to elements\n              animation: '2s linear infinite flow-spinner-indeterminate',\n              '& > g': {\n                animation: '2s ease-in-out infinite flow-spinner-indeterminate-group',\n                transformOrigin: '50% 50%',\n                '& circle': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-primary',\n                },\n                '& g': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-group-secondary',\n                  '& circle': {\n                    animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-secondary',\n                  },\n                },\n              },\n            }),\n            ...svgIconSx,\n          }}\n          {...restSvgIcon}\n        >\n          <g>\n            {(values.reversedDashLength > 0 || displayValue === 0) && (\n              <g style={{ transform: `rotate(${values.reversedRotation}deg)`, transformOrigin: '50% 50%' }}>\n                <circle\n                  className=\"FlowSpinner-circle-secondary\"\n                  cx=\"50\"\n                  cy=\"50\"\n                  r={radius}\n                  fill=\"none\"\n                  stroke={\n                    theme.palette.mode === 'dark' ? theme.palette.onSurface.os700 : theme.palette.transparent.secondary\n                  }\n                  strokeWidth={thickness}\n                  strokeLinecap=\"round\"\n                  strokeDasharray={`${values.reversedDashLength} ${circumference}`}\n                  strokeDashoffset={values.dashOffset}\n                  {...(displayValue === 0 && {\n                    strokeLinecap: 'butt',\n                    strokeDasharray: 'none',\n                    strokeDashoffset: 'none',\n                  })}\n                />\n              </g>\n            )}\n            {(values.dashLength > 0 || displayValue === 100) && (\n              <circle\n                className=\"FlowSpinner-circle-primary\"\n                cx=\"50\"\n                cy=\"50\"\n                r={radius}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={thickness}\n                strokeLinecap=\"round\"\n                strokeDasharray={`${values.dashLength} ${circumference}`}\n                strokeDashoffset={values.dashOffset}\n                {...(displayValue === 100 && {\n                  strokeLinecap: 'butt',\n                  strokeDasharray: 'none',\n                  strokeDashoffset: 'none',\n                })}\n              />\n            )}\n          </g>\n        </SvgIcon>\n        {label && value !== undefined && (\n          <LoadingText\n            data-testid=\"Spinner.percentage\"\n            {...(typeof size !== 'number' && { size: size })}\n            value={value}\n            label={label !== true ? label : undefined}\n            {...loaderTextProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Spinner","forwardRef","_a","ref","sx","className","children","size","thickness","value","svgIconProps","loaderTextProps","label","state","successMessage","errorMessage","progressStateProps","rest","__rest","theme","useTheme","_b","svgIconSx","restSvgIcon","displayValue","setDisplayValue","useState","Number","isNaN","targetValueRef","useRef","rafRef","useEffect","current","animate","prev","diff","next","Math","abs","requestAnimationFrame","cancelAnimationFrame","radius","circumference","lineCap","gap","minSegmentPercentForFullGap","useMemo","_radius","_circumference","PI","_lineCap","obtainValues","useCallback","v","_reversedValue","_reversedRotation","_effectiveGap","max","min","reversedRotation","dashLength","dashOffset","reversedDashLength","values","valuesSmall","valuesLarge","undefined","_jsx","ProgressState","Object","assign","_jsxs","Box","role","filter","Boolean","join","display","alignItems","justifyContent","SvgIcon","viewBox","width","height","color","palette","mode","transform","strokeDasharray","strokeDashOffset","animation","transformOrigin","style","cx","cy","r","fill","stroke","onSurface","os700","transparent","secondary","strokeWidth","strokeLinecap","strokeDashoffset","LoadingText"],"mappings":"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"}
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/progress/Spinner.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef, useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { Box, BoxProps, SvgIcon, SvgIconProps, useTheme } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\nimport { ProgressState, ProgressStateProps } from './ProgressState';\n\nexport interface SpinnerProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * Stroke width of circle\n   * @default 16\n   */\n  thickness?: number;\n  /**\n   * State indicates whether the component should display loader or spinner for the loading state or message with a icon\n   * @default loading\n   */\n  state?: 'loading' | ProgressStateProps['state'];\n  /**\n   * Message when success appears\n   */\n  successMessage?: ProgressStateProps['successMessage'];\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ProgressStateProps['errorMessage'];\n  /**\n   * Properties applied to ProgressState\n   */\n  progressStateProps?: Omit<ProgressStateProps, 'successMessage' | 'errorMessage' | 'state'>;\n  /**\n   * Properties applied to SVG\n   */\n  svgIconProps?: SvgIconProps;\n  /**\n   * Additional label before LoadingText\n   */\n  label?: ReactNode;\n  /**\n   * Properties applied to LoadingText\n   */\n  loadingTextProps?: LoadingTextProps;\n}\n\n/**\n * A styled loader component that displays animated svg circle\n */\nexport const Spinner: React.FC<SpinnerProps> = forwardRef(\n  (\n    {\n      sx,\n      className,\n      children,\n      size = 'medium',\n      thickness = 16,\n      value,\n      svgIconProps,\n      loadingTextProps,\n      label,\n      state = 'loading',\n      successMessage,\n      errorMessage,\n      progressStateProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: svgIconSx, ...restSvgIcon } = svgIconProps ?? {};\n\n    // smooth js transition between values\n    const [displayValue, setDisplayValue] = useState(Number.isNaN(value) ? 0 : (value ?? 15));\n    const targetValueRef = useRef<number>(null);\n    const rafRef = useRef<number>(null);\n    useEffect(() => {\n      targetValueRef.current = Number.isNaN(value) ? 0 : (value ?? 15);\n\n      const animate = () => {\n        setDisplayValue((prev) => {\n          const diff = targetValueRef.current - prev;\n          const step = diff * 0.5;\n          const next = prev + step;\n\n          // small diff or reset happens immediately\n          if (Math.abs(diff) < 0.1 || targetValueRef.current === 0) {\n            return targetValueRef.current;\n          } else {\n            rafRef.current = requestAnimationFrame(animate);\n            return next;\n          }\n        });\n      };\n      rafRef.current = requestAnimationFrame(animate);\n      return () => cancelAnimationFrame(rafRef.current!);\n    }, [value]);\n\n    const { radius, circumference, lineCap, gap, minSegmentPercentForFullGap } = useMemo(() => {\n      const _radius = 50 - thickness / 2;\n      const _circumference = 2 * Math.PI * _radius;\n      const _lineCap = thickness / 2;\n      const _gap = _lineCap;\n      const _minSegmentPercentForFullGap = ((thickness + _gap) / _circumference) * 100;\n\n      return {\n        radius: _radius,\n        circumference: _circumference,\n        lineCap: _lineCap,\n        gap: _gap,\n        minSegmentPercentForFullGap: _minSegmentPercentForFullGap,\n      };\n    }, [thickness]);\n    const obtainValues = useCallback(\n      (v: number) => {\n        const _reversedValue = 100 - v;\n        const _reversedRotation = 360 * (v / 100);\n        const _effectiveGap = gap * Math.max(0, Math.min(1, Math.min(v, _reversedValue) / minSegmentPercentForFullGap));\n        const _dashLength = Math.max((v / 100) * circumference - thickness - _effectiveGap, 0);\n        const _dashOffset = -(lineCap + _effectiveGap / 2);\n        const _reversedDashLength = Math.max((_reversedValue / 100) * circumference - thickness - _effectiveGap, 0);\n\n        return {\n          reversedRotation: _reversedRotation,\n          dashLength: _dashLength,\n          dashOffset: _dashOffset,\n          reversedDashLength: _reversedDashLength,\n        };\n      },\n      [thickness],\n    );\n    const values = obtainValues(displayValue);\n    const [valuesSmall, valuesLarge] = value === undefined ? [obtainValues(15), obtainValues(75)] : [values, values];\n\n    if (state !== 'loading') {\n      return (\n        <ProgressState\n          ref={ref}\n          size={size}\n          state={state}\n          successMessage={successMessage}\n          errorMessage={errorMessage}\n          {...progressStateProps}\n        />\n      );\n    }\n\n    return (\n      <Box\n        data-testid=\"Spinner\"\n        role=\"progressbar\"\n        className={['FlowSpinner-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        sx={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: 1,\n          ...sx,\n        }}\n        {...(value !== undefined && {\n          ['aria-valuenow']: value,\n          ['aria-valuemin']: 0,\n          ['aria-valuemax']: 100,\n        })}\n        {...rest}\n      >\n        <SvgIcon\n          aria-live=\"polite\"\n          viewBox=\"0 0 100 100\"\n          sx={{\n            // size is also applied in ProgressState and LoadingText\n            ...(size === 'small' && {\n              width: `16px`,\n              height: `16px`,\n            }),\n            ...(size === 'medium' && {\n              width: `24px`,\n              height: `24px`,\n            }),\n            ...(typeof size === 'number' && {\n              width: `${size}px`,\n              height: `${size}px`,\n            }),\n            color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary',\n            // extra animation if value is not provided\n            ...(value === undefined && {\n              '@keyframes flow-spinner-indeterminate': {\n                '0%': { transform: 'rotateZ(0)' },\n                '100%': { transform: 'rotateZ(360deg)' },\n              },\n              '@keyframes flow-spinner-indeterminate-group': {\n                '0%, 25%': { transform: 'rotateZ(0)' },\n                '70%': { transform: 'rotateZ(45deg)' },\n                '100%': { transform: 'rotateZ(360deg)' },\n              },\n              '@keyframes flow-spinner-indeterminate-circle-primary': {\n                '0%, 25%, 100%': {\n                  strokeDasharray: `${valuesSmall.dashLength} ${circumference}`,\n                  strokeDashOffset: valuesSmall.dashOffset,\n                },\n                '70%': {\n                  strokeDasharray: `${valuesLarge.dashLength} ${circumference}`,\n                  strokeDashOffset: valuesLarge.dashOffset,\n                },\n              },\n              '@keyframes flow-spinner-indeterminate-circle-secondary': {\n                '0%, 25%, 100%': {\n                  strokeDasharray: `${valuesSmall.reversedDashLength} ${circumference}`,\n                  strokeDashOffset: valuesSmall.dashOffset,\n                },\n                '70%': {\n                  strokeDasharray: `${valuesLarge.reversedDashLength} ${circumference}`,\n                  strokeDashOffset: valuesLarge.dashOffset,\n                },\n              },\n              '@keyframes flow-spinner-indeterminate-group-secondary': {\n                '0%, 25%, 100%': { transform: `rotate(${valuesSmall.reversedRotation}deg)` },\n                '70%': { transform: `rotate(${valuesLarge.reversedRotation}deg)` },\n              },\n              // assign animation to elements\n              animation: '2s linear infinite flow-spinner-indeterminate',\n              '& > g': {\n                animation: '2s ease-in-out infinite flow-spinner-indeterminate-group',\n                transformOrigin: '50% 50%',\n                '& circle': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-primary',\n                },\n                '& g': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-group-secondary',\n                  '& circle': {\n                    animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-secondary',\n                  },\n                },\n              },\n            }),\n            ...svgIconSx,\n          }}\n          {...restSvgIcon}\n        >\n          <g>\n            {(values.reversedDashLength > 0 || displayValue === 0) && (\n              <g style={{ transform: `rotate(${values.reversedRotation}deg)`, transformOrigin: '50% 50%' }}>\n                <circle\n                  className=\"FlowSpinner-circle-secondary\"\n                  cx=\"50\"\n                  cy=\"50\"\n                  r={radius}\n                  fill=\"none\"\n                  stroke={\n                    theme.palette.mode === 'dark' ? theme.palette.onSurface.os700 : theme.palette.transparent.secondary\n                  }\n                  strokeWidth={thickness}\n                  strokeLinecap=\"round\"\n                  strokeDasharray={`${values.reversedDashLength} ${circumference}`}\n                  strokeDashoffset={values.dashOffset}\n                  {...(displayValue === 0 && {\n                    strokeLinecap: 'butt',\n                    strokeDasharray: 'none',\n                    strokeDashoffset: 'none',\n                  })}\n                />\n              </g>\n            )}\n            {(values.dashLength > 0 || displayValue === 100) && (\n              <circle\n                className=\"FlowSpinner-circle-primary\"\n                cx=\"50\"\n                cy=\"50\"\n                r={radius}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={thickness}\n                strokeLinecap=\"round\"\n                strokeDasharray={`${values.dashLength} ${circumference}`}\n                strokeDashoffset={values.dashOffset}\n                {...(displayValue === 100 && {\n                  strokeLinecap: 'butt',\n                  strokeDasharray: 'none',\n                  strokeDashoffset: 'none',\n                })}\n              />\n            )}\n          </g>\n        </SvgIcon>\n        {label && value !== undefined && (\n          <LoadingText\n            data-testid=\"Spinner.percentage\"\n            {...(typeof size !== 'number' && { size: size })}\n            value={value}\n            label={label !== true ? label : undefined}\n            {...loadingTextProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Spinner","forwardRef","sx","className","children","size","thickness","value","svgIconProps","loadingTextProps","label","state","successMessage","errorMessage","progressStateProps","rest","ref","theme","useTheme","svgIconSx","restSvgIcon","displayValue","setDisplayValue","useState","Number","isNaN","targetValueRef","useRef","rafRef","useEffect","current","animate","prev","diff","next","Math","abs","requestAnimationFrame","cancelAnimationFrame","radius","circumference","lineCap","gap","minSegmentPercentForFullGap","useMemo","_radius","_circumference","PI","_lineCap","obtainValues","useCallback","v","_reversedValue","_reversedRotation","_effectiveGap","max","min","reversedRotation","dashLength","dashOffset","reversedDashLength","values","valuesSmall","valuesLarge","undefined","_jsx","ProgressState","_jsxs","Box","role","filter","Boolean","join","display","alignItems","justifyContent","SvgIcon","viewBox","width","height","color","palette","mode","transform","strokeDasharray","strokeDashOffset","animation","transformOrigin","style","cx","cy","r","fill","stroke","onSurface","os700","transparent","secondary","strokeWidth","strokeLinecap","strokeDashoffset","LoadingText"],"mappings":"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"}

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 s}from"react";import{Stack as i,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=s((s,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}=s,C=t(s,["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"]),M=h||{},{sx:L}=M,Q=t(M,["sx"]),S=k||{},{sx:w}=S,X=t(S,["sx"]),D=f||{},{sx:z}=D,A=t(D,["sx"]),R=j||{},{sx:q}=R,E=t(R,["sx"]);return r(i,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}}},L)},Q,{children:o(n,Object.assign({component:"hr",sx:Object.assign({border:"none",position:"absolute",inset:"0",m:0},w)},X))})),r(n,Object.assign({sx:Object.assign({width:"480px",maxWidth:"100%",pr:3,pt:{xs:"8px",md:"0px"}},z)},A,{children:[r(i,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=s((r,s)=>{var{sx:i,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},i),ref:s},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{Stack as i,Box as n,Typography as e,Button as a}from"@mui/material";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:c,titleTypographyProps:x,subtitle:l,subtitleTypographyProps:m,dividerWrapperProps:u,dividerProps:h,contentWrapperProps:k,titleWrapperProps:b,buttonTitle:f,buttonProps:g,buttonIconProps:y,onClick:I,sx:v,...P},C)=>{const{sx:B,...L}=d||{},{sx:M,...Q}=u||{},{sx:w,...S}=h||{},{sx:W,...T}=k||{},{sx:X,...j}=b||{};return t(i,{direction:"column",alignItems:"flex-start",sx:{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)"}}}),...v},"data-testid":"QuickLink",ref:C,...I&&{onClick:I,role:"button"},tabIndex:-1,...P,children:[r(n,{sx:{position:"relative",width:"100%",height:"2px","&&":{mb:{xs:0,md:o?0:2}},...M},...Q,children:r(n,{component:"hr",sx:{border:"none",position:"absolute",inset:"0",m:0,...w},...S})}),t(n,{sx:{width:"480px",maxWidth:"100%",pr:3,pt:{xs:"8px",md:"0px"},...W},...T,children:[t(i,{sx:{flexDirection:{xs:"row",md:"column"},alignItems:{xs:"center",md:"flex-start"},gap:{xs:"4px",md:"18px"},mb:{xs:"4px",md:0},...X},...j,children:[o&&r(o,{sx:{display:"block",fontSize:{xs:"20px",md:"35px"},mx:{xs:"2px",md:"0px"},my:{xs:"0px",md:"2px"},...B},"data-testid":"QuickLink.icon",...L}),c&&r(e,{variant:"h4",display:"block","data-testid":"QuickLink.title",sx:{mb:{xs:0,md:.5}},...x,children:c})]}),l&&r(e,{variant:"disclaimer1",display:"block","data-testid":"QuickLink.subtitle",...m,children:l})]}),f&&r(a,{variant:"navigation",color:"secondary",endIcon:r(s,{}),"data-testid":"QuickLink.button",...g,children:f})]})}),c=o(({sx:t,children:o,...i},e)=>r(n,{sx:{display:"grid",gridTemplateColumns:{xs:"1fr",lg:"repeat(3, 1fr)"},gap:3,...t},ref:e,"data-testid":"QuickLink.wrapper",...i,children:o}));export{d as QuickLink,c 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      {...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":"8UAwEO,MAAMA,EAAsCC,EACjD,CACEC,EAkBAC,KAlBA,IAAAC,cACEA,EAAaC,UACbA,EAASC,MACTA,EAAKC,qBACLA,EAAoBC,SACpBA,EAAQC,wBACRA,EAAuBC,oBACvBA,EAAmBC,aACnBA,EAAYC,oBACZA,EAAmBC,kBACnBA,EAAiBC,YACjBA,EAAWC,YACXA,EAAWC,gBACXA,EAAeC,QACfA,EAAOC,GACPA,GAAEhB,EACCiB,EAAIC,EAAAlB,EAhBT,+OAoBA,MAAMmB,EAAmChB,GAAa,IAA9Ca,GAAII,KAAWC,EAAaH,EAAAC,EAA9B,CAAA,OACAG,EAAuDd,GAAuB,IAA5EQ,GAAIO,KAAqBC,EAAuBN,EAAAI,EAAlD,CAAA,OACAG,EAAyChB,GAAgB,IAAvDO,GAAIU,KAAcC,EAAgBT,EAAAO,EAApC,CAAA,OACAG,EAAuDlB,GAAuB,IAA5EM,GAAIa,KAAqBC,EAAuBZ,EAAAU,EAAlD,CAAA,OACAG,EAAmDpB,GAAqB,IAAtEK,GAAIgB,KAAmBC,EAAqBf,EAAAa,EAA9C,CAAA,OAEN,OACEG,EAACC,iBACCC,UAAU,SACVC,WAAW,aACXrB,GAAEsB,OAAAC,OAAAD,OAAAC,OAAA,CACAC,SAAU,IACVC,OAAQ,UACRC,MAAO,UACPC,eAAgB,QAChBC,IAAK,CAAEC,GAAI,MAAOC,GAAI,SACnBC,EACD,CACEC,GAAI,CACFC,gBAAiB,eACjBC,OAAQ,OAGV,wBAAyB,CACvBD,gBAAiB,cACjBP,MAAQS,GAAkC,SAAvBA,EAAMC,QAAQC,KAAkB,gBAAkB,kBACrE,yBAA0B,CACxBC,UAAW,mBAEb,uBAAwB,CACtBA,UAAW,qBAIjB,CACEN,GAAI,CACFC,gBAAkBE,GAAkC,SAAvBA,EAAMC,QAAQC,KAAkB,kBAAoB,gBACjFH,OAAQ,OAEV,wBAAyB,CACvBD,gBAAiB,cACjBP,MAAQS,GAAkC,SAAvBA,EAAMC,QAAQC,KAAkB,kBAAoB,kBACvE,uBAAwB,CACtBC,UAAW,oBAEb,qBAAsB,CACpBA,UAAW,uBAKhBtC,GAAE,cAEK,YACZf,IAAKA,GACAc,GAAW,CACdA,QAASA,EACTwC,KAAM,UACN,CACFC,UAAU,GACNvC,EAAI,CAAAwC,SAAA,CAERC,EAACC,EAAGrB,OAAAC,OAAA,CACFvB,GAAEsB,OAAAC,OAAA,CACAqB,SAAU,WACVC,MAAO,OACPX,OAAQ,MAER,KAAM,CAAEY,GAAI,CAAEjB,GAAI,EAAGC,GAAI5C,EAAgB,EAAI,KAC1CqB,IAEDC,EAAuB,CAAAiC,SAE3BC,EAACC,EAAGrB,OAAAC,OAAA,CACFwB,UAAU,KACV/C,GAAEsB,OAAAC,OAAA,CACAyB,OAAQ,OACRJ,SAAU,WACVK,MAAO,IACPC,EAAG,GAEAxC,IAEDC,OAGRO,EAACyB,EAAGrB,OAAAC,OAAA,CACFvB,GAAEsB,OAAAC,OAAA,CAAIsB,MAAO,QAASM,SAAU,OAAQC,GAAI,EAAGC,GAAI,CAAExB,GAAI,MAAOC,GAAI,QAAYjB,IAC5EC,EAAuB,CAAA2B,SAAA,CAE3BvB,EAACC,EAAKG,OAAAC,OAAA,CACJvB,GAAEsB,OAAAC,OAAA,CACA+B,cAAe,CAAEzB,GAAI,MAAOC,GAAI,UAChCT,WAAY,CAAEQ,GAAI,SAAUC,GAAI,cAChCF,IAAK,CAAEC,GAAI,MAAOC,GAAI,QACtBgB,GAAI,CAAEjB,GAAI,MAAOC,GAAI,IAClBd,IAEDC,EAAqB,CAAAwB,SAAA,CAExBvD,GACCwD,EAACxD,iBACCc,GAAEsB,OAAAC,OAAA,CACAgC,QAAS,QACTC,SAAU,CAAE3B,GAAI,OAAQC,GAAI,QAC5B2B,GAAI,CAAE5B,GAAI,MAAOC,GAAI,OACrB4B,GAAI,CAAE7B,GAAI,MAAOC,GAAI,QAClB1B,GAAM,cAEC,kBACRC,IAGPjB,GACCsD,EAACiB,iBACCC,QAAQ,KACRL,QAAQ,QAAO,cACH,kBACZvD,GAAI,CAAE8C,GAAI,CAAEjB,GAAI,EAAGC,GAAI,MACnBzC,YAEHD,SAINE,GACCoD,EAACiB,EAAUrC,OAAAC,OAAA,CACTqC,QAAQ,cACRL,QAAQ,sBACI,sBACRhE,EAAuB,CAAAkD,SAE1BnD,SAINM,GACC8C,EAACmB,EAAMvC,OAAAC,OAAA,CACLqC,QAAQ,aACRlC,MAAM,YACNoC,QAASpB,EAACqB,MAAiB,cACf,oBACRlE,YAEHD,WAaAoE,EAAoDjF,EAAW,CAACC,EAA2BC,SAA3Be,GAAEA,EAAEyC,SAAEA,GAAQzD,EAAKiB,EAAIC,EAAAlB,EAAvB,mBAC3E,OACE0D,EAACC,EAAGrB,OAAAC,OAAA,CACFvB,kBACEuD,QAAS,OACTU,oBAAqB,CAAEpC,GAAI,MAAOqC,GAAI,kBACtCtC,IAAK,GACF5B,GAELf,IAAKA,GACDgB,YAEHwC"}
+{"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","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","_jsxs","Stack","direction","alignItems","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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"}

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 o}from"@mui/material";import{Search as e}from"./Search.js";const r=({isCollapsed:r,searchProps:n,collapseProps:s,...a})=>{const{sx:l,...p}=a||{},{sx:d,...c}=s||{};return t(i,{sx:{width:"fit-content",...l},...p,children:t(o,{in:!r,orientation:"horizontal",collapsedSize:"44px",sx:{borderRadius:"200px",display:"flex",justifyContent:"flex-end",width:"fit-content","& input":{width:"auto"},...d},...c,children:t(e,{disableInput:r,...n})})})};export{r 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';\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","isCollapsed","searchProps","collapseProps","boxProps","sx","boxSx","restBoxProps","collapseSx","restCollapseProps","_jsx","Box","width","children","Collapse","in","orientation","collapsedSize","borderRadius","display","justifyContent","Search","disableInput"],"mappings":"+HAuBO,MAAMA,EAAsD,EACjEC,cACAC,cACAC,mBACGC,MAEH,MAAQC,GAAIC,KAAUC,GAAiBH,GAAY,CAAA,GAC3CC,GAAIG,KAAeC,GAAsBN,GAAiB,CAAA,EAElE,OACEO,EAACC,EAAG,CAACN,GAAI,CAAEO,MAAO,iBAAkBN,MAAaC,EAAYM,SAC3DH,EAACI,EAAQ,CACPC,IAAKd,EACLe,YAAY,aACZC,cAAc,OACdZ,GAAI,CACFa,aAAc,QACdC,QAAS,OACTC,eAAgB,WAChBR,MAAO,cACP,UAAW,CACTA,MAAO,WAENJ,MAEDC,EAAiBI,SAErBH,EAACW,GAAOC,aAAcrB,KAAiBC"}

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

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 a,useState as r,useMemo as n,Children as i,Fragment as o}from"react";import{AppBar as l,Toolbar as s,Typography as x,Tabs as d,Box as p}from"@mui/material";const c=a(({children:a,sx:c,title:g,buttons:f,inContainer:h=!1,toolbarProps:u,titleProps:m,contentProps:y,buttonsProps:v,...S},b)=>{const{sx:w,...N}=m??{},{sx:C,...G}=u??{},{sx:P,...j}=y??{},{sx:k,...B}=v??{},[I,z]=r(0),E=n(()=>function t(e){const a=[];return i.forEach(e,e=>{e?.type===o?a.push(...t(e.props.children)):a.push(e)}),a}(a),[a]);return t(l,{sx:{zIndex:t=>t.zIndex.appBar-20,...c},ref:b,"data-testid":"SecondaryNavigation","aria-label":"Secondary Navigation",role:"group",...S,children:e(s,{sx:{...!!E?.length&&{flexWrap:{xs:"wrap",lg:"nowrap"},pt:{xs:2,lg:0}},...C},disableGutters:!h,"data-testid":"SecondaryNavigation.wrapper",...G,children:[g&&t(x,{"data-testid":"SecondaryNavigation.title",variant:"subheadline",sx:{display:"block",flexGrow:{xs:"1",lg:"0"},flexShrink:"0",...w},...N,children:g}),!!E?.length&&t(d,{value:I,onChange:(t,e)=>z(e),template:"navigation",sx:{flexGrow:"1",flexBasis:{xs:"100%",lg:"auto"},order:{xs:"3",lg:"0"},justifyContent:{xs:"center",lg:"flex-start"},alignSelf:{xs:"flex-end",lg:"center"},...g&&{pl:{lg:4}},marginTop:{xs:"-10px",lg:"0"},marginBottom:"-1px",...P},"data-testid":"SecondaryNavigation.items",...j,children:E}),f&&t(p,{sx:{flexShrink:"0",flexGrow:"1",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:.25,...k},"data-testid":"SecondaryNavigation.cta",...B,children:f})]})})});export{c 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';\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","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","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":"mOAiDO,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,EAAM,CACLlC,GAAI,CAEFmC,OAASC,GAAUA,EAAMD,OAAOE,OAAS,MACtCrC,GAELS,IAAKA,gBACO,sBAAqB,aACtB,uBACX6B,KAAK,WACD9B,EAAIT,SAERwC,EAACC,EAAO,CACNxC,GAAI,MACIqB,GAAYoB,QAAU,CAC1BC,SAAU,CAAEC,GAAI,OAAQC,GAAI,UAC5BC,GAAI,CAAEF,GAAI,EAAGC,GAAI,OAEhBhC,GAELkC,gBAAiB3C,gBACL,iCACRU,EAAWd,SAAA,CAEdE,GACCgC,EAACc,iBACa,4BACZC,QAAQ,cACRhD,GAAI,CACFiD,QAAS,QAETC,SAAU,CAAEP,GAAI,IAAKC,GAAI,KACzBO,WAAY,OACTzC,MAEDC,EAASZ,SAEZE,MAGFoB,GAAYoB,QACbR,EAACmB,EAAI,CACHC,MAAOnC,EACPoC,SAAU,CAACC,EAAGC,IAAMrC,EAAaqC,GACjCC,SAAS,aACTzD,GAAI,CACFkD,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,aAC7B3C,GAAS,CAEX6D,GAAI,CAAElB,GAAI,IAEZmB,UAAW,CAAEpB,GAAI,QAASC,GAAI,KAE9BoB,aAAc,UACXlD,GACJ,cACW,+BACRC,EAAWhB,SAEdsB,IAGJnB,GACC+B,EAACgC,EAAG,CACFjE,GAAI,CACFmD,WAAY,IACZD,SAAU,IACVD,QAAS,OACTiB,WAAY,SACZN,eAAgB,WAChBO,IAAK,OACFnD,GACJ,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