@skodaflow/web-library 7.15.1 → 7.16.1

package/components/playPauseButton/PlayPauseButton.js

@@ -1,2 +1,2 @@
-import{__rest as s}from"tslib";import{jsxs as o,jsx as e}from"react/jsx-runtime";import{forwardRef as n}from"react";import{Box as t,CircularProgress as r,IconButton as i}from"@mui/material";import{ControlsPlayIcon as a}from"../icon/stroke/ControlsPlayIcon.js";import{ControlsPauseIcon as c}from"../icon/stroke/ControlsPauseIcon.js";const l=n(((n,l)=>{var{progress:p=0,isPlaying:d,onClick:P,circularProgressBgProps:u,circularProgressProps:m,iconButtonProps:g,pauseIconProps:I,PauseIconComponent:x,playIconProps:b,PlayIconComponent:j,children:y,sx:O}=n,h=s(n,["progress","isPlaying","onClick","circularProgressBgProps","circularProgressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx"]);const f=u||{},{sx:v}=f,C=s(f,["sx"]),k=m||{},{sx:z}=k,B=s(k,["sx"]),w=g||{},{sx:H}=w,S=s(w,["sx"]),q=x||c,A=j||a;return o(t,Object.assign({"data-testid":"PlayPauseIndicator",sx:Object.assign({position:"relative",zIndex:"150",width:"44px",height:"44px"},O),ref:l},h,{children:[e(r,Object.assign({sx:Object.assign({color:"onSurface.os0",position:"absolute",inset:"0",zIndex:"10"},v),size:44,thickness:1.75,variant:"determinate",value:100},C)),e(r,Object.assign({sx:Object.assign({color:"brandHover.secondary",position:"absolute",inset:"0",zIndex:"20"},z),size:44,thickness:1.75,variant:"determinate",value:p||0},B)),e(i,Object.assign({"data-testid":"IndicatorIconButton",onClick:P,color:"white",size:"medium",sx:Object.assign({position:"absolute",inset:"0",zIndex:"30"},H),"aria-label":d?"Pause video":"Play video"},S,{children:d?e(q,Object.assign({"data-testid":"IndicatorPauseIcon"},I)):e(A,Object.assign({"data-testid":"IndicatorPlayIcon"},b))}))]}))})),p=n(((s,o)=>e(l,Object.assign({ref:o},s))));export{l as PlayPauseButton,p as VideoPlayPauseIndicator};
+import{__rest as o}from"tslib";import{jsxs as s,jsx as e}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Box as n,IconButton as i}from"@mui/material";import{Spinner as r}from"../progress/Spinner.js";import{ControlsPlayIcon as a}from"../icon/stroke/ControlsPlayIcon.js";import{ControlsPauseIcon as c}from"../icon/stroke/ControlsPauseIcon.js";const p=t((t,p)=>{var{progress:l=0,isPlaying:d,onClick:m,progressProps:P,iconButtonProps:I,pauseIconProps:g,PauseIconComponent:u,playIconProps:x,PlayIconComponent:b,children:y,sx:j}=t,f=o(t,["progress","isPlaying","onClick","progressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx"]);const h=P||{},{sx:k}=h,C=o(h,["sx"]),O=I||{},{sx:v}=O,w=o(O,["sx"]),z=u||c,B=b||a;return s(n,Object.assign({"data-testid":"PlayPauseIndicator",sx:Object.assign({display:"inline-flex",position:"relative",zIndex:"150",width:"44px",height:"44px"},j),ref:p},f,{children:[e(r,Object.assign({value:l,size:44,thickness:6,sx:Object.assign({position:"absolute",inset:"0",zIndex:"20",transform:"rotate(-90deg)","& .FlowSpinner-circle-primary":{stroke:o=>o.palette.brand.secondary},"& .FlowSpinner-circle-secondary":{stroke:o=>o.palette.common.white,strokeWidth:"4px"}},k)},C)),e(i,Object.assign({"data-testid":"IndicatorIconButton",onClick:m,color:"white",size:"medium",sx:Object.assign({position:"absolute",inset:"0",zIndex:"30"},v),"aria-label":d?"Pause video":"Play video"},w,{children:d?e(z,Object.assign({"data-testid":"IndicatorPauseIcon"},g)):e(B,Object.assign({"data-testid":"IndicatorPlayIcon"},x))}))]}))}),l=t((o,s)=>e(p,Object.assign({ref:s},o)));export{p as PlayPauseButton,l as VideoPlayPauseIndicator};
 //# sourceMappingURL=PlayPauseButton.js.map

package/components/playPauseButton/PlayPauseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlayPauseButton.js","sources":["../../../src/components/playPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, { ElementType, forwardRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CircularProgress,\n  CircularProgressProps,\n  IconButton,\n  IconButtonProps,\n  SvgIconProps,\n} from '@mui/material';\nimport { ControlsPlayIcon } from '@/src/components/icon/stroke/ControlsPlayIcon';\nimport { ControlsPauseIcon } from '@/src/components/icon/stroke/ControlsPauseIcon';\n\nexport interface PlayPauseButtonProps extends BoxProps<ElementType> {\n  /**\n   * Boolean to indicate if the media is currently playing\n   */\n  isPlaying: boolean;\n  /**\n   * Callback function to handle play/pause button click events.\n   */\n  onClick: () => void;\n  /**\n   * The progress value for the CircularProgress component.\n   * Should be a number between 0 and 100.\n   */\n  progress?: number;\n  /** Custom props for the background CircularProgress component. */\n  circularProgressBgProps?: CircularProgressProps;\n  /** Custom props for the foreground CircularProgress component. */\n  circularProgressProps?: CircularProgressProps;\n  /** Custom props for the IconButton component. */\n  iconButtonProps?: Partial<IconButtonProps>;\n  /** Custom props for the pause icon component. */\n  pauseIconProps?: SvgIconProps;\n  PauseIconComponent?: ElementType<SvgIconProps>;\n  /** Custom props for the play icon component. */\n  playIconProps?: SvgIconProps;\n  PlayIconComponent?: ElementType<SvgIconProps>;\n}\nexport interface VideoPlayPauseIndicatorProps extends PlayPauseButtonProps {}\n\n/**\n * A component that displays a circular progress indicator with a play/pause button.\n */\nexport const PlayPauseButton: React.FC<PlayPauseButtonProps> = forwardRef(\n  (\n    {\n      progress = 0,\n      isPlaying,\n      onClick,\n      circularProgressBgProps,\n      circularProgressProps,\n      iconButtonProps,\n      pauseIconProps,\n      PauseIconComponent,\n      playIconProps,\n      PlayIconComponent,\n      children,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: circularProgressBgSx, ...restCircularProgressBg } = circularProgressBgProps || {};\n    const { sx: circularProgressSx, ...restCircularProgress } = circularProgressProps || {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps || {};\n    const PauseIcon = PauseIconComponent || ControlsPauseIcon;\n    const PlayIcon = PlayIconComponent || ControlsPlayIcon;\n\n    return (\n      <Box\n        data-testid=\"PlayPauseIndicator\"\n        sx={{\n          position: 'relative',\n          zIndex: '150',\n          width: '44px',\n          height: '44px',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <CircularProgress\n          sx={{\n            // circular progress serving as a background\n            color: 'onSurface.os0',\n            position: 'absolute',\n            inset: '0',\n            zIndex: '10',\n            ...circularProgressBgSx,\n          }}\n          size={44}\n          thickness={1.75}\n          variant=\"determinate\"\n          value={100}\n          {...restCircularProgressBg}\n        />\n        <CircularProgress\n          sx={{\n            // circular progress indicating real progress\n            color: 'brandHover.secondary',\n            position: 'absolute',\n            inset: '0',\n            zIndex: '20',\n            ...circularProgressSx,\n          }}\n          size={44}\n          thickness={1.75}\n          variant=\"determinate\"\n          value={progress || 0}\n          {...restCircularProgress}\n        />\n        <IconButton\n          data-testid=\"IndicatorIconButton\"\n          onClick={onClick}\n          color=\"white\"\n          size=\"medium\"\n          sx={{ position: 'absolute', inset: '0', zIndex: '30', ...iconButtonSx }}\n          aria-label={isPlaying ? 'Pause video' : 'Play video'}\n          {...restIconButton}\n        >\n          {isPlaying ? (\n            <PauseIcon data-testid=\"IndicatorPauseIcon\" {...pauseIconProps} />\n          ) : (\n            <PlayIcon data-testid=\"IndicatorPlayIcon\" {...playIconProps} />\n          )}\n        </IconButton>\n      </Box>\n    );\n  },\n);\n\n/**\n * @deprecated renamed to <PlayPauseButton />\n */\nexport const VideoPlayPauseIndicator: React.FC<VideoPlayPauseIndicatorProps> = forwardRef((props, ref) => {\n  return <PlayPauseButton ref={ref} {...props} />;\n});\n"],"names":["PlayPauseButton","forwardRef","_a","ref","progress","isPlaying","onClick","circularProgressBgProps","circularProgressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx","rest","__rest","_b","circularProgressBgSx","restCircularProgressBg","_c","circularProgressSx","restCircularProgress","_d","iconButtonSx","restIconButton","PauseIcon","ControlsPauseIcon","PlayIcon","ControlsPlayIcon","_jsxs","Box","Object","assign","position","zIndex","width","height","_jsx","CircularProgress","color","inset","size","thickness","variant","value","IconButton","VideoPlayPauseIndicator","props"],"mappings":"4UA6CO,MAAMA,EAAkDC,GAC7D,CACEC,EAeAC,KAfA,IAAAC,SACEA,EAAW,EAACC,UACZA,EAASC,QACTA,EAAOC,wBACPA,EAAuBC,sBACvBA,EAAqBC,gBACrBA,EAAeC,eACfA,EAAcC,mBACdA,EAAkBC,cAClBA,EAAaC,kBACbA,EAAiBC,SACjBA,EAAQC,GACRA,GAAEb,EACCc,EAAIC,EAAAf,EAbT,kMAiBA,MAAMgB,EAA0DX,GAA2B,IAAnFQ,GAAII,KAAyBC,EAAsBH,EAAAC,EAArD,CAAA,OACAG,EAAsDb,GAAyB,IAA7EO,GAAIO,KAAuBC,EAAoBN,EAAAI,EAAjD,CAAA,OACAG,EAA0Cf,GAAmB,IAA3DM,GAAIU,KAAiBC,EAAcT,EAAAO,EAArC,CAAA,OACAG,EAAYhB,GAAsBiB,EAClCC,EAAWhB,GAAqBiB,EAEtC,OACEC,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,qBACZnB,GAAEkB,OAAAC,OAAA,CACAC,SAAU,WACVC,OAAQ,MACRC,MAAO,OACPC,OAAQ,QACLvB,GAELZ,IAAKA,GACDa,EAAI,CAAAF,SAAA,CAERyB,EAACC,iBACCzB,GAAEkB,OAAAC,OAAA,CAEAO,MAAO,gBACPN,SAAU,WACVO,MAAO,IACPN,OAAQ,MACLjB,GAELwB,KAAM,GACNC,UAAW,KACXC,QAAQ,cACRC,MAAO,KACH1B,IAENmB,EAACC,iBACCzB,GAAEkB,OAAAC,OAAA,CAEAO,MAAO,uBACPN,SAAU,WACVO,MAAO,IACPN,OAAQ,MACLd,GAELqB,KAAM,GACNC,UAAW,KACXC,QAAQ,cACRC,MAAO1C,GAAY,GACfmB,IAENgB,EAACQ,+BACa,sBACZzC,QAASA,EACTmC,MAAM,QACNE,KAAK,SACL5B,GAAEkB,OAAAC,OAAA,CAAIC,SAAU,WAAYO,MAAO,IAAKN,OAAQ,MAASX,GAAY,aACzDpB,EAAY,cAAgB,cACpCqB,EAAc,CAAAZ,SAEjBT,EACCkC,EAACZ,EAASM,OAAAC,OAAA,CAAA,cAAa,sBAAyBxB,IAEhD6B,EAACV,EAAQI,OAAAC,OAAA,CAAA,cAAa,qBAAwBtB,UAG9C,IAQCoC,EAAkE/C,GAAW,CAACgD,EAAO9C,IACzFoC,EAACvC,EAAeiC,OAAAC,OAAA,CAAC/B,IAAKA,GAAS8C"}
+{"version":3,"file":"PlayPauseButton.js","sources":["../../../src/components/playPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, { ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\nimport { ControlsPlayIcon } from '@/src/components/icon/stroke/ControlsPlayIcon';\nimport { ControlsPauseIcon } from '@/src/components/icon/stroke/ControlsPauseIcon';\n\nexport interface PlayPauseButtonProps extends BoxProps<ElementType> {\n  /**\n   * Boolean to indicate if the media is currently playing\n   */\n  isPlaying: boolean;\n  /**\n   * Callback function to handle play/pause button click events.\n   */\n  onClick: BoxProps<ElementType>['onClick'];\n  /**\n   * The progress value for the CircularProgress component.\n   * Should be a number between 0 and 100.\n   */\n  progress?: number;\n  /**\n   * Properties applied to Spinner progress\n   */\n  progressProps?: Omit<SpinnerProps, 'value'>;\n  /**\n   * Properties applied to IconButton\n   */\n  iconButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Properties applied to Pause Icon component\n   */\n  pauseIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PauseIcon\n   */\n  PauseIconComponent?: ElementType<SvgIconProps>;\n  /**\n   * Properties applied to Play Icon component\n   */\n  playIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PlayIcon\n   */\n  PlayIconComponent?: ElementType<SvgIconProps>;\n}\nexport interface VideoPlayPauseIndicatorProps extends PlayPauseButtonProps {}\n\n/**\n * A component that displays a circular progress indicator with a play/pause button.\n */\nexport const PlayPauseButton: React.FC<PlayPauseButtonProps> = forwardRef(\n  (\n    {\n      progress = 0,\n      isPlaying,\n      onClick,\n      progressProps,\n      iconButtonProps,\n      pauseIconProps,\n      PauseIconComponent,\n      playIconProps,\n      PlayIconComponent,\n      children,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: progressSx, ...restProgress } = progressProps || {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps || {};\n    const PauseIcon = PauseIconComponent || ControlsPauseIcon;\n    const PlayIcon = PlayIconComponent || ControlsPlayIcon;\n\n    return (\n      <Box\n        data-testid=\"PlayPauseIndicator\"\n        sx={{\n          display: 'inline-flex',\n          position: 'relative',\n          zIndex: '150',\n          width: '44px',\n          height: '44px',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Spinner\n          value={progress}\n          size={44}\n          thickness={6}\n          sx={{\n            position: 'absolute',\n            inset: '0',\n            zIndex: '20',\n            // start from 12'clock instead of 3'\n            transform: 'rotate(-90deg)',\n            // recolor\n            '& .FlowSpinner-circle-primary': {\n              stroke: (theme) => theme.palette.brand.secondary,\n            },\n            '& .FlowSpinner-circle-secondary': {\n              stroke: (theme) => theme.palette.common.white,\n              // main line is thicker than second one\n              strokeWidth: '4px',\n            },\n            ...progressSx,\n          }}\n          {...restProgress}\n        />\n        <IconButton\n          data-testid=\"IndicatorIconButton\"\n          onClick={onClick}\n          color=\"white\"\n          size=\"medium\"\n          sx={{ position: 'absolute', inset: '0', zIndex: '30', ...iconButtonSx }}\n          aria-label={isPlaying ? 'Pause video' : 'Play video'}\n          {...restIconButton}\n        >\n          {isPlaying ? (\n            <PauseIcon data-testid=\"IndicatorPauseIcon\" {...pauseIconProps} />\n          ) : (\n            <PlayIcon data-testid=\"IndicatorPlayIcon\" {...playIconProps} />\n          )}\n        </IconButton>\n      </Box>\n    );\n  },\n);\n\n/**\n * @deprecated renamed to <PlayPauseButton />\n */\nexport const VideoPlayPauseIndicator: React.FC<VideoPlayPauseIndicatorProps> = forwardRef((props, ref) => {\n  return <PlayPauseButton ref={ref} {...props} />;\n});\n"],"names":["PlayPauseButton","forwardRef","_a","ref","progress","isPlaying","onClick","progressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx","rest","__rest","_b","progressSx","restProgress","_c","iconButtonSx","restIconButton","PauseIcon","ControlsPauseIcon","PlayIcon","ControlsPlayIcon","_jsxs","Box","Object","assign","display","position","zIndex","width","height","_jsx","Spinner","value","size","thickness","inset","transform","stroke","theme","palette","brand","secondary","common","white","strokeWidth","IconButton","color","VideoPlayPauseIndicator","props"],"mappings":"uWAkDO,MAAMA,EAAkDC,EAC7D,CACEC,EAcAC,KAdA,IAAAC,SACEA,EAAW,EAACC,UACZA,EAASC,QACTA,EAAOC,cACPA,EAAaC,gBACbA,EAAeC,eACfA,EAAcC,mBACdA,EAAkBC,cAClBA,EAAaC,kBACbA,EAAiBC,SACjBA,EAAQC,GACRA,GAAEZ,EACCa,EAAIC,EAAAd,EAZT,CAAA,WAAA,YAAA,UAAA,gBAAA,kBAAA,iBAAA,qBAAA,gBAAA,oBAAA,WAAA,OAgBA,MAAMe,EAAsCV,GAAiB,IAArDO,GAAII,KAAeC,EAAYH,EAAAC,EAAjC,CAAA,OACAG,EAA0CZ,GAAmB,IAA3DM,GAAIO,KAAiBC,EAAcN,EAAAI,EAArC,CAAA,OACAG,EAAYb,GAAsBc,EAClCC,EAAWb,GAAqBc,EAEtC,OACEC,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,qBACZhB,GAAEe,OAAAC,OAAA,CACAC,QAAS,cACTC,SAAU,WACVC,OAAQ,MACRC,MAAO,OACPC,OAAQ,QACLrB,GAELX,IAAKA,GACDY,EAAI,CAAAF,SAAA,CAERuB,EAACC,EAAOR,OAAAC,OAAA,CACNQ,MAAOlC,EACPmC,KAAM,GACNC,UAAW,EACX1B,GAAEe,OAAAC,OAAA,CACAE,SAAU,WACVS,MAAO,IACPR,OAAQ,KAERS,UAAW,iBAEX,gCAAiC,CAC/BC,OAASC,GAAUA,EAAMC,QAAQC,MAAMC,WAEzC,kCAAmC,CACjCJ,OAASC,GAAUA,EAAMC,QAAQG,OAAOC,MAExCC,YAAa,QAEZhC,IAEDC,IAENiB,EAACe,EAAUtB,OAAAC,OAAA,CAAA,cACG,sBACZxB,QAASA,EACT8C,MAAM,QACNb,KAAK,SACLzB,GAAEe,OAAAC,OAAA,CAAIE,SAAU,WAAYS,MAAO,IAAKR,OAAQ,MAASZ,GAAY,aACzDhB,EAAY,cAAgB,cACpCiB,EAAc,CAAAT,SAEjBR,EACC+B,EAACb,EAASM,OAAAC,OAAA,CAAA,cAAa,sBAAyBrB,IAEhD2B,EAACX,EAAQI,OAAAC,OAAA,CAAA,cAAa,qBAAwBnB,aAW7C0C,EAAkEpD,EAAW,CAACqD,EAAOnD,IACzFiC,EAACpC,EAAe6B,OAAAC,OAAA,CAAC3B,IAAKA,GAASmD"}

package/components/progress/Loader.d.ts

@@ -0,0 +1,37 @@
+import React, { ElementType, ReactNode } from 'react';
+import { BoxProps, LinearProgressProps } from '@mui/material';
+import { LoadingTextProps } from './LoadingText';
+export interface LoaderProps extends BoxProps<ElementType> {
+    /**
+     * Value of progress
+     */
+    value?: number;
+    /**
+     * Affects component size
+     */
+    size?: LinearProgressProps['size'] | number;
+    /**
+     * Additional label before LoaderText
+     */
+    label?: ReactNode;
+    /**
+     * Optional custom bar props.
+     */
+    barProps?: LinearProgressProps;
+    /**
+     * Properties applied to LoaderText
+     */
+    loadingTextProps?: LoadingTextProps;
+    /**
+     * @deprecated rename to size, change large to medium
+     */
+    loaderSize?: 'small' | 'large';
+    /**
+     * @deprecated remove, no longer has any effect
+     */
+    barWrapperProps?: BoxProps<ElementType>;
+}
+/**
+ * Wrapper of LinearProgress, automatically selecting the appropriate variant and appending LoaderText
+ */
+export declare const Loader: React.FC<LoaderProps>;

package/components/progress/Loader.js

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

package/components/progress/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sources":["../../../src/components/progress/Loader.tsx"],"sourcesContent":["import React, { useMemo, 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   * @deprecated rename to size, change large to medium\n   */\n  loaderSize?: 'small' | 'large';\n  /**\n   * @deprecated remove, no longer has any effect\n   */\n  barWrapperProps?: BoxProps<ElementType>;\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, loaderSize, barProps, label, loadingTextProps, barWrapperProps: _, ...rest }, ref) => {\n    const { sx: barSx, ...restBar } = barProps ?? {};\n    const mappedSize = useMemo(\n      () => size || { small: 'small', large: 'medium' }[loaderSize ?? 'large'],\n      [size, loaderSize],\n    );\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: mappedSize as LinearProgressProps['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","loaderSize","barProps","label","loadingTextProps","barWrapperProps","_","rest","__rest","_b","sx","barSx","restBar","mappedSize","useMemo","small","large","_jsxs","Box","Object","assign","filter","Boolean","join","children","undefined","_jsx","LoadingText","LinearProgress","height","variant"],"mappings":"wOAsCO,MAAMA,EAAgCC,EAC3C,CAACC,EAAwGC,SAAxGC,UAAEA,EAASC,MAAEA,EAAKC,KAAEA,EAAIC,WAAEA,EAAUC,SAAEA,EAAQC,MAAEA,EAAKC,iBAAEA,EAAkBC,gBAAiBC,KAAMC,EAAIC,EAAAZ,EAApG,CAAA,YAAA,QAAA,OAAA,aAAA,WAAA,QAAA,mBAAA,oBACC,MAAMa,EAA4BP,QAAAA,EAAY,IAAtCQ,GAAIC,GAAKF,EAAKG,EAAOJ,EAAAC,EAAvB,CAAA,OACAI,EAAaC,EACjB,IAAMd,GAAQ,CAAEe,MAAO,QAASC,MAAO,UAAWf,QAAAA,EAAc,SAChE,CAACD,EAAMC,IAGT,OACEgB,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,SACZtB,UAAW,CAAC,kBAAmBA,GAAWuB,OAAOC,SAASC,KAAK,KAC/D1B,IAAKA,GACDU,EAAI,CAAAiB,SAAA,MAEGC,IAAV1B,GACC2B,EAACC,+BAAwB,oBAAoB5B,MAAOA,EAAOI,MAAOA,GAAWC,IAE/EsB,EAACE,EAAcT,OAAAC,OAAA,CACbrB,MAAOA,EACPW,GAAES,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACoB,iBAATpB,GAAqB,CAAE6B,OAAQ,GAAG7B,QAC1CW,IAEgB,iBAATX,GAAqB,CAAEA,KAAMa,QAC1BY,IAAV1B,GAAuB,CAC1B+B,QAAS,cACT,gBAAmB/B,EACnB,gBAAmB,EACnB,gBAAmB,KAEjBa"}

package/components/progress/LoadingText.d.ts

@@ -0,0 +1,21 @@
+import React, { ElementType, ReactNode } from 'react';
+import { BoxProps } from '@mui/material';
+export interface LoadingTextProps extends BoxProps<ElementType> {
+    /**
+     * Value in percent to display
+     */
+    value?: number | string;
+    /**
+     * Additional label before the value
+     */
+    label?: ReactNode;
+    /**
+     * Affects font size
+     * @default medium
+     */
+    size?: 'small' | 'medium';
+}
+/**
+ * Component displaying current state of loading
+ */
+export declare const LoadingText: React.FC<LoadingTextProps>;

package/components/progress/LoadingText.js

@@ -0,0 +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};
+//# sourceMappingURL=LoadingText.js.map

package/components/progress/LoadingText.js.map

@@ -0,0 +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"}

package/components/progress/Progress.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { LoaderProps } from './Loader';
+import { SpinnerProps } from './Spinner';
+export interface ProgressBaseProps {
+    /**
+     * Determine if loader, or spinner should be used
+     * @default spinner
+     */
+    variant?: 'spinner' | 'loader';
+    /**
+     * @deprecated, rename to value
+     */
+    loadingPercentage?: number;
+    /**
+     * @deprecated, rename to label
+     */
+    loadingPercentageDescribeText?: string;
+}
+export interface ProgressLoaderProps extends ProgressBaseProps, LoaderProps {
+    variant: 'loader';
+}
+export interface ProgressSpinnerProps extends ProgressBaseProps, SpinnerProps {
+    variant?: 'spinner';
+}
+export type ProgressProps = ProgressLoaderProps | ProgressSpinnerProps;
+export declare const Progress: React.FC<ProgressProps>;
+/**
+ * @deprecated Use <Progress /> instead
+ */
+export declare const ProgressBar: React.FC<ProgressProps>;

package/components/progress/Progress.js

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

package/components/progress/Progress.js.map

@@ -0,0 +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   * @deprecated, rename to value\n   */\n  loadingPercentage?: number;\n  /**\n   * @deprecated, rename to label\n   */\n  loadingPercentageDescribeText?: string;\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(\n  ({ variant = 'spinner', value, loadingPercentage, loadingPercentageDescribeText, ...rest }, ref) => {\n    // make sure the value is valid\n    const validValue = useMemo(() => {\n      const processedValue = value ?? loadingPercentage;\n      if (processedValue && processedValue < 0) return 0;\n      if (processedValue && processedValue > 100) return 100;\n      return processedValue;\n    }, [value, loadingPercentage]);\n\n    if (variant === 'loader') {\n      return <Loader ref={ref} value={validValue} label={loadingPercentageDescribeText} {...(rest as LoaderProps)} />;\n    }\n    return <Spinner ref={ref} value={validValue} label={loadingPercentageDescribeText} {...(rest as SpinnerProps)} />;\n  },\n);\n\n/**\n * @deprecated Use <Progress /> instead\n */\nexport const ProgressBar: React.FC<ProgressProps> = forwardRef((props, ref) => {\n  return <Progress {...props} ref={ref} />;\n});\n"],"names":["Progress","forwardRef","_a","ref","variant","value","loadingPercentage","loadingPercentageDescribeText","rest","__rest","validValue","useMemo","processedValue","_jsx","Loader","Spinner","Object","assign","label","ProgressBar","props"],"mappings":"mMA8BO,MAAMA,EAAoCC,EAC/C,CAACC,EAA2FC,KAA3F,IAAAC,QAAEA,EAAU,UAASC,MAAEA,EAAKC,kBAAEA,EAAiBC,8BAAEA,GAA6BL,EAAKM,EAAIC,EAAAP,EAAvF,yEAEC,MAAMQ,EAAaC,EAAQ,KACzB,MAAMC,EAAiBP,QAAAA,EAASC,EAChC,OAAIM,GAAkBA,EAAiB,EAAU,EAC7CA,GAAkBA,EAAiB,IAAY,IAC5CA,GACN,CAACP,EAAOC,IAEX,OACSO,EADO,WAAZT,EACMU,EAEFC,EAFQC,OAAAC,OAAA,CAACd,IAAKA,EAAKE,MAAOK,EAAYQ,MAAOX,GAAoCC,MAShFW,EAAuClB,EAAW,CAACmB,EAAOjB,IAC9DU,EAACb,EAAQgB,OAAAC,OAAA,GAAKG,GAAOjB,IAAKA"}

package/components/progress/ProgressState.d.ts

@@ -0,0 +1,46 @@
+import React, { ElementType, ReactNode } from 'react';
+import { BoxProps, SvgIconProps } from '@mui/material';
+import { LoadingTextProps } from './LoadingText';
+export interface ProgressStateProps extends BoxProps<ElementType> {
+    /**
+     * Affects component size
+     * @default medium
+     */
+    size?: 'small' | 'medium' | number;
+    /**
+     * State to display
+     */
+    state?: 'error' | 'success';
+    /**
+     * Message when success appears
+     */
+    successMessage?: ReactNode;
+    /**
+     * Message when error appears
+     */
+    errorMessage?: ReactNode;
+    /**
+     * Properties applied to message wrapper
+     */
+    messageProps?: LoadingTextProps;
+    /**
+     * Overwrites state message (successMessage or errorMessage)
+     */
+    message?: ReactNode;
+    /**
+     * Properties applied to icon component
+     */
+    iconProps?: SvgIconProps;
+    /**
+     * Overwrites state icon
+     */
+    IconComponent?: ElementType<SvgIconProps>;
+    /**
+     * Properties applied to wrapper of icon
+     */
+    iconWrapperProps?: BoxProps<ElementType>;
+}
+/**
+ * Component displaying current state of loading
+ */
+export declare const ProgressState: React.FC<ProgressStateProps>;

package/components/progress/ProgressState.js

@@ -0,0 +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};
+//# sourceMappingURL=ProgressState.js.map

package/components/progress/ProgressState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressState.js","sources":["../../../src/components/progress/ProgressState.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef, useMemo } 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?: ElementType<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"}

package/components/progress/Spinner.d.ts

@@ -0,0 +1,65 @@
+import React, { ElementType, ReactNode } from 'react';
+import { BoxProps, SvgIconProps } from '@mui/material';
+import { LoadingTextProps } from './LoadingText';
+import { ProgressStateProps } from './ProgressState';
+export interface SpinnerProps extends BoxProps<ElementType> {
+    /**
+     * Value of progress
+     */
+    value?: number;
+    /**
+     * Affects component size
+     * @default medium
+     */
+    size?: 'small' | 'medium' | number;
+    /**
+     * Stroke width of circle
+     * @default 16
+     */
+    thickness?: number;
+    /**
+     * State indicates whether the component should display loader or spinner for the loading state or message with a icon
+     * @default loading
+     */
+    state?: 'loading' | ProgressStateProps['state'];
+    /**
+     * Message when success appears
+     */
+    successMessage?: ProgressStateProps['successMessage'];
+    /**
+     * Message when error appears
+     */
+    errorMessage?: ProgressStateProps['errorMessage'];
+    /**
+     * Properties applied to ProgressState
+     */
+    progressStateProps?: Omit<ProgressStateProps, 'successMessage' | 'errorMessage' | 'state'>;
+    /**
+     * Properties applied to SVG
+     */
+    svgIconProps?: SvgIconProps;
+    /**
+     * Additional label before LoadingText
+     */
+    label?: boolean | ReactNode;
+    /**
+     * Properties applied to LoadingText
+     */
+    loadingTextProps?: LoadingTextProps;
+    /**
+     * @deprecated use loadingTextProps instead
+     */
+    labelProps?: BoxProps<ElementType>;
+    /**
+     * @deprecated rename to loadingTextProps
+     */
+    textBoxProps?: BoxProps<ElementType>;
+    /**
+     * @deprecated no longer has any effect
+     */
+    spinnerControlledAnimation?: 'controlled' | 'infinite';
+}
+/**
+ * A styled loader component that displays animated svg circle
+ */
+export declare const Spinner: React.FC<SpinnerProps>;

package/components/progress/Spinner.js

@@ -0,0 +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 p}from"./ProgressState.js";const h=t((t,h)=>{var{sx:g,className:u,children:x,size:k="medium",thickness:b=16,value:y,svgIconProps:O,loaderTextProps:v,label:j,state:D="loading",successMessage:w,errorMessage:$,progressStateProps:L,textBoxProps:P,labelProps:M,spinnerControlledAnimation:N}=t,S=e(t,["sx","className","children","size","thickness","value","svgIconProps","loaderTextProps","label","state","successMessage","errorMessage","progressStateProps","textBoxProps","labelProps","spinnerControlledAnimation"]);const F=l(),C=null!=O?O:{},{sx:A}=C,Z=e(C,["sx"]),z=null!=M?M:{},{sx:B}=z,I=e(z,["sx"]),R=null!=P?P:{},{sx:T}=R,q=e(R,["sx"]),G=null!=v?v:{},{sx:W}=G,E=e(G,["sx"]),[H,J]=a(Number.isNaN(y)?0:null!=y?y:15),K=n(),Q=n();i(()=>{K.current=Number.isNaN(y)?0:null!=y?y:15;const e=()=>{J(r=>{const s=K.current-r,t=r+.5*s;return Math.abs(s)<.1||0===K.current?K.current:(Q.current=requestAnimationFrame(e),t)})};return Q.current=requestAnimationFrame(e),()=>cancelAnimationFrame(Q.current)},[y]);const{radius:U,circumference:V,lineCap:X,gap:Y,minSegmentPercentForFullGap:_}=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]),ee=c(e=>{const r=100-e,s=e/100*360,t=Y*Math.max(0,Math.min(1,Math.min(e,r)/_));return{reversedRotation:s,dashLength:Math.max(e/100*V-b-t,0),dashOffset:-(X+t/2),reversedDashLength:Math.max(r/100*V-b-t,0)}},[b]),re=ee(H),[se,te]=void 0===y?[ee(15),ee(75)]:[re,re];return"loading"!==D?r(p,Object.assign({ref:h,size:k,state:D,successMessage:w,errorMessage:$},L)):s(m,Object.assign({"data-testid":"Spinner",role:"progressbar",className:["FlowSpinner-root",u].filter(Boolean).join(" "),ref:h,sx:Object.assign({display:"inline-flex",alignItems:"center",justifyContent:"center",gap:1},g)},void 0!==y&&{"aria-valuenow":y,"aria-valuemin":0,"aria-valuemax":100},S,{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"===k&&{width:"16px",height:"16px"}),"medium"===k&&{width:"24px",height:"24px"}),"number"==typeof k&&{width:`${k}px`,height:`${k}px`}),{color:"dark"===F.palette.mode?"brand.secondary":"brand.primary"}),void 0===y&&{"@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:`${se.dashLength} ${V}`,strokeDashOffset:se.dashOffset},"70%":{strokeDasharray:`${te.dashLength} ${V}`,strokeDashOffset:te.dashOffset}},"@keyframes flow-spinner-indeterminate-circle-secondary":{"0%, 25%, 100%":{strokeDasharray:`${se.reversedDashLength} ${V}`,strokeDashOffset:se.dashOffset},"70%":{strokeDasharray:`${te.reversedDashLength} ${V}`,strokeDashOffset:te.dashOffset}},"@keyframes flow-spinner-indeterminate-group-secondary":{"0%, 25%, 100%":{transform:`rotate(${se.reversedRotation}deg)`},"70%":{transform:`rotate(${te.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"}}}}),A)},Z,{children:s("g",{children:[(re.reversedDashLength>0||0===H)&&r("g",{style:{transform:`rotate(${re.reversedRotation}deg)`,transformOrigin:"50% 50%"},children:r("circle",Object.assign({className:"FlowSpinner-circle-secondary",cx:"50",cy:"50",r:U,fill:"none",stroke:"dark"===F.palette.mode?F.palette.onSurface.os700:F.palette.transparent.secondary,strokeWidth:b,strokeLinecap:"round",strokeDasharray:`${re.reversedDashLength} ${V}`,strokeDashoffset:re.dashOffset},0===H&&{strokeLinecap:"butt",strokeDasharray:"none",strokeDashoffset:"none"}))}),(re.dashLength>0||100===H)&&r("circle",Object.assign({className:"FlowSpinner-circle-primary",cx:"50",cy:"50",r:U,fill:"none",stroke:"currentColor",strokeWidth:b,strokeLinecap:"round",strokeDasharray:`${re.dashLength} ${V}`,strokeDashoffset:re.dashOffset},100===H&&{strokeLinecap:"butt",strokeDasharray:"none",strokeDashoffset:"none"}))]})})),j&&void 0!==y&&r(f,Object.assign({"data-testid":"Spinner.percentage"},"number"!=typeof k&&{size:k},{value:y,label:!0!==j?j:void 0,sx:Object.assign(Object.assign(Object.assign({},B),T),W)},I,q,E))]}))});export{h as Spinner};
+//# sourceMappingURL=Spinner.js.map

package/components/progress/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/progress/Spinner.tsx"],"sourcesContent":["import React, {\n  ElementType,\n  ReactNode,\n  forwardRef,\n  useMemo,\n  useState,\n  useEffect,\n  useRef,\n  CSSProperties,\n  useCallback,\n} 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   * @deprecated use loadingTextProps instead\n   */\n  labelProps?: BoxProps<ElementType>;\n  /**\n   * @deprecated rename to loadingTextProps\n   */\n  textBoxProps?: BoxProps<ElementType>;\n  /**\n   * @deprecated no longer has any effect\n   */\n  spinnerControlledAnimation?: 'controlled' | 'infinite';\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      textBoxProps,\n      labelProps,\n      spinnerControlledAnimation: _,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: svgIconSx, ...restSvgIcon } = svgIconProps ?? {};\n    const { sx: labelSx, ...restLabel } = labelProps ?? {};\n    const { sx: textBoxSx, ...restTextBox } = textBoxProps ?? {};\n    const { sx: loaderTextSx, ...restLoaderText } = loaderTextProps ?? {};\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            sx={{\n              // deprecated overwrites\n              ...(labelSx as CSSProperties),\n              ...(textBoxSx as CSSProperties),\n              // custom overwrites\n              ...loaderTextSx,\n            }}\n            {...restLabel}\n            {...restTextBox}\n            {...restLoaderText}\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","textBoxProps","labelProps","spinnerControlledAnimation","_","rest","__rest","theme","useTheme","_b","svgIconSx","restSvgIcon","_c","labelSx","restLabel","_d","textBoxSx","restTextBox","_e","loaderTextSx","restLoaderText","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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"}

package/components/progress/index.d.ts

@@ -1 +1,5 @@
-export * from './progress';
+export * from './Progress';
+export * from './Loader';
+export * from './Spinner';
+export * from './LoadingText';
+export * from './ProgressState';

package/components/quickLink/quickLink.d.ts

@@ -1,15 +1,19 @@
 import React, { ReactNode, ElementType } from 'react';
-import { StackProps, TypographyProps, ButtonProps, BoxProps } from '@mui/material';
+import { StackProps, TypographyProps, ButtonProps, BoxProps, SvgIconProps } from '@mui/material';
 import { IconProps } from '@/src/components/icon';
 export interface QuickLinkProps extends Omit<StackProps<ElementType>, 'title'> {
     /**
-     * Name of the icon from icon set
+     * Icon node to be used
+     */
+    IconComponent?: ElementType<SvgIconProps>;
+    /**
+     * @deprecated use IconComponent instead with specific icon instead, e.g. IconComponent={HeartIcon}
      */
     iconName?: IconProps['name'];
     /**
      * Props applied to Icon component
      */
-    iconProps?: IconProps;
+    iconProps?: IconProps | SvgIconProps;
     /**
      * Title text
      */