@skodaflow/web-library 8.0.1 → 8.2.0

package/components/playPauseButton/PlayPauseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlayPauseButton.js","sources":["../../../src/components/playPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, { ComponentType, 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?: ComponentType<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?: ComponentType<SvgIconProps>;\n}\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"],"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"],"mappings":"uWAiDO,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"}
+{"version":3,"file":"PlayPauseButton.js","sources":["../../../src/components/playPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\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?: ComponentType<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?: ComponentType<SvgIconProps>;\n}\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={sxOverride(\n          {\n            display: 'inline-flex',\n            position: 'relative',\n            zIndex: '150',\n            width: '44px',\n            height: '44px',\n          },\n          sx,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <Spinner\n          value={progress}\n          size={44}\n          thickness={6}\n          sx={sxOverride(\n            {\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            },\n            progressSx,\n          )}\n          {...restProgress}\n        />\n        <IconButton\n          data-testid=\"IndicatorIconButton\"\n          onClick={onClick}\n          color=\"white\"\n          size=\"medium\"\n          sx={sxOverride({ 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"],"names":["PlayPauseButton","forwardRef","progress","isPlaying","onClick","progressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx","rest","ref","progressSx","restProgress","iconButtonSx","restIconButton","PauseIcon","ControlsPauseIcon","PlayIcon","ControlsPlayIcon","_jsxs","Box","sxOverride","display","position","zIndex","width","height","_jsx","Spinner","value","size","thickness","inset","transform","stroke","theme","palette","brand","secondary","common","white","strokeWidth","IconButton","color"],"mappings":"0YAkDO,MAAMA,EAAkDC,EAC7D,EAEIC,WAAW,EACXC,YACAC,UACAC,gBACAC,kBACAC,iBACAC,qBACAC,gBACAC,oBACAC,WACAC,QACGC,GAELC,KAEA,MAAQF,GAAIG,KAAeC,GAAiBX,GAAiB,CAAA,GACrDO,GAAIK,KAAiBC,GAAmBZ,GAAmB,CAAA,EAC7Da,EAAYX,GAAsBY,EAClCC,EAAWX,GAAqBY,EAEtC,OACEC,EAACC,EAAG,CAAA,cACU,qBACZZ,GAAIa,EACF,CACEC,QAAS,cACTC,SAAU,WACVC,OAAQ,MACRC,MAAO,OACPC,OAAQ,QAEVlB,GAEFE,IAAKA,KACDD,EAAIF,SAAA,CAERoB,EAACC,EAAO,CACNC,MAAO/B,EACPgC,KAAM,GACNC,UAAW,EACXvB,GAAIa,EACF,CACEE,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,QAGjB9B,MAEEC,IAENe,EAACe,EAAU,CAAA,cACG,sBACZ1C,QAASA,EACT2C,MAAM,QACNb,KAAK,SACLtB,GAAIa,EAAW,CAAEE,SAAU,WAAYS,MAAO,IAAKR,OAAQ,MAAQX,GAAa,aACpEd,EAAY,cAAgB,gBACpCe,WAEHf,EACC4B,EAACZ,EAAS,CAAA,cAAa,wBAAyBZ,IAEhDwB,EAACV,EAAQ,CAAA,cAAa,uBAAwBZ"}

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 r}from"react/jsx-runtime";import{forwardRef as a}from"react";import{Box as o,LinearProgress as t}from"@mui/material";import{LoadingText as i}from"./LoadingText.js";import{sxOverride as m}from"../../utils/sxOverride/sxOverride.js";const s=a(({className:a,value:s,size:l,barProps:n,label:d,loadingTextProps:p,...u},v)=>{const{sx:x,...f}=n??{};return e(o,{"data-testid":"Loader",className:["FlowLoader-root",a].filter(Boolean).join(" "),ref:v,...u,children:[void 0!==s&&r(i,{"data-testid":"Loader.percentage",value:s,label:d,...p}),r(t,{value:s,sx:m({..."number"==typeof l&&{height:`${l}px`}},x),..."number"!=typeof l&&{size:l},...void 0!==s&&{variant:"determinate","aria-valuenow":s,"aria-valuemin":0,"aria-valuemax":100},...f})]})});export{s 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';\nimport { sxOverride } from '@/src/utils/sxOverride';\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={sxOverride(\n            {\n              ...(typeof size === 'number' && { height: `${size}px` }),\n            },\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","sxOverride","height","variant"],"mappings":"8PA+BO,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,GAAIa,EACF,IACsB,iBAATnB,GAAqB,CAAEoB,OAAQ,GAAGpB,QAE/CO,MAEmB,iBAATP,GAAqB,CAAEA,KAAMA,WAC1Be,IAAVhB,GAAuB,CAC1BsB,QAAS,cACT,gBAAmBtB,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 r}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Box as t}from"@mui/material";import{sxOverride as m}from"../../utils/sxOverride/sxOverride.js";const o=i(({value:i,children:o,label:n,size:l="medium",sx:p,...s},x)=>e(t,{sx:m({py:.5,fontSize:"14px",..."small"===l&&{fontSize:"12px"},lineHeight:"20px",fontWeight:"400",letterSpacing:"0.002em",textAlign:"right"},p),...s,ref:x,children:[n&&r(t,{component:"span",sx:{mr:.5},children:n}),o||("number"==typeof i?`${i} %`:i)]}));export{o 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';\nimport { sxOverride } from '@/src/utils/sxOverride';\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={sxOverride(\n          {\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          },\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","sxOverride","py","fontSize","lineHeight","fontWeight","letterSpacing","textAlign","_jsx","component","mr"],"mappings":"2LAuBO,MAAMA,EAA0CC,EACrD,EAAGC,QAAOC,WAAUC,QAAOC,OAAO,SAAUC,QAAOC,GAAQC,IAEvDC,EAACC,GACCJ,GAAIK,EACF,CACEC,GAAI,GACJC,SAAU,UACG,UAATR,GAAoB,CACtBQ,SAAU,QAEZC,WAAY,OACZC,WAAY,MACZC,cAAe,UACfC,UAAW,SAEbX,MAEEC,EACJC,IAAKA,EAAGL,SAAA,CAEPC,GACCc,EAACR,EAAG,CAACS,UAAU,OAAOb,GAAI,CAAEc,GAAI,IAAKjB,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{sxOverride as i}from"../../utils/sxOverride/sxOverride.js";import{CheckIcon as n}from"../icon/stroke/CheckIcon.js";import{CloseIcon as a}from"../icon/stroke/CloseIcon.js";import{LoadingText as m}from"./LoadingText.js";const c=o(({children:o,sx:c,size:p="medium",state:d,message:l,messageProps:f,successMessage:g,errorMessage:u,IconComponent:x,iconProps:h,iconWrapperProps:y,...I},b)=>{const{sx:j,...k}=y??{},[C,M]=s(()=>"error"===d?[a,u]:[n,g],[d,g,u]),P=x??C;return e(t,{"data-testid":"ProgressMessageWrapper",ref:b,sx:i({display:"inline-flex",justifyContent:"center",alignItems:"center",gap:1},c),...I,children:[r(t,{sx:i({"@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"===d&&{backgroundColor:"error.main"},color:"common.white",borderRadius:"50%",lineHeight:"0",display:"inline-flex",alignItems:"center",justifyContent:"center",..."medium"===p&&{p:.5,"& .MuiSvgIcon-root":{fontSize:"16px"}},..."small"===p&&{p:.25,"& .MuiSvgIcon-root":{fontSize:"12px"}},..."number"==typeof p&&{height:`${p}px`,width:`${p}px`}},j),...k,children:r(P,{"data-testid":"Icon",...h})},d),(o||M||l)&&r(m,{"data-testid":"ProgressMessage",..."number"!=typeof p&&{size:p},...f,children:o||M||l})]})});export{c 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 { sxOverride } from '@/src/utils/sxOverride';\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={sxOverride(\n          {\n            display: 'inline-flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n            gap: 1,\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        <Box\n          key={state}\n          sx={sxOverride(\n            {\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            },\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","ProgressStateIcon","_jsxs","Box","sxOverride","display","justifyContent","alignItems","gap","_jsx","transform","opacity","animation","backgroundColor","theme","palette","mode","color","borderRadius","lineHeight","p","fontSize","height","width","LoadingText"],"mappings":"uWAkDO,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,IACrBa,EAAoBZ,GAAiBO,EAE3C,OACEM,EAACC,EAAG,CAAA,cACU,yBACZV,IAAKA,EACLX,GAAIsB,EACF,CACEC,QAAS,cACTC,eAAgB,SAChBC,WAAY,SACZC,IAAK,GAEP1B,MAEEU,EAAIX,SAAA,CAER4B,EAACN,EAAG,CAEFrB,GAAIsB,EACF,CACE,yCAA0C,CACxC,KAAM,CACJM,UAAW,YACXC,QAAS,OAEX,OAAQ,CACND,UAAW,WACXC,QAAS,MAGbC,UAAW,mCACXC,gBAAkBC,GAAkC,SAAvBA,EAAMC,QAAQC,KAAkB,kBAAoB,mBACnE,UAAVhC,GAAqB,CACvB6B,gBAAiB,cAEnBI,MAAO,eACPC,aAAc,MACdC,WAAY,IACZd,QAAS,cACTE,WAAY,SACZD,eAAgB,YACH,WAATvB,GAAqB,CAEvBqC,EAAG,GACH,qBAAsB,CACpBC,SAAU,YAGD,UAATtC,GAAoB,CAEtBqC,EAAG,IACH,qBAAsB,CACpBC,SAAU,YAGM,iBAATtC,GAAqB,CAC9BuC,OAAQ,GAAGvC,MACXwC,MAAO,GAAGxC,QAGdW,MAEEC,EAAed,SAEnB4B,EAACR,EAAiB,CAAA,cAAa,UAAWX,KA/CrCN,IAiDLH,GAAYgB,GAAgBZ,IAC5BwB,EAACe,iBACa,qBACS,iBAATzC,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 m,Box as c,SvgIcon as d}from"@mui/material";import{sxOverride as l}from"../../utils/sxOverride/sxOverride.js";import{LoadingText as f}from"./LoadingText.js";import{ProgressState as h}from"./ProgressState.js";const p=t(({sx:t,className:p,children:u,size:g="medium",thickness:k=16,value:y,svgIconProps:v,loadingTextProps:x,label:D,state:w="loading",successMessage:$,errorMessage:L,progressStateProps:O,...b},M)=>{const F=m(),{sx:N,...S}=v??{},[P,j]=a(Number.isNaN(y)?0:y??15),Z=n(null),C=n(null);s(()=>{Z.current=Number.isNaN(y)?0:y??15;const e=()=>{j(r=>{const t=Z.current-r,a=r+.5*t;return Math.abs(t)<.1||0===Z.current?Z.current:(C.current=requestAnimationFrame(e),a)})};return C.current=requestAnimationFrame(e),()=>cancelAnimationFrame(C.current)},[y]);const{radius:R,circumference:z,lineCap:A,gap:I,minSegmentPercentForFullGap:q}=i(()=>{const e=50-k/2,r=2*Math.PI*e,t=k/2;return{radius:e,circumference:r,lineCap:t,gap:t,minSegmentPercentForFullGap:(k+t)/r*100}},[k]),B=o(e=>{const r=100-e,t=e/100*360,a=I*Math.max(0,Math.min(1,Math.min(e,r)/q));return{reversedRotation:t,dashLength:Math.max(e/100*z-k-a,0),dashOffset:-(A+a/2),reversedDashLength:Math.max(r/100*z-k-a,0)}},[k]),G=B(P),[T,W]=void 0===y?[B(15),B(75)]:[G,G];return"loading"!==w?e(h,{ref:M,size:g,state:w,successMessage:$,errorMessage:L,...O}):r(c,{"data-testid":"Spinner",role:"progressbar",className:["FlowSpinner-root",p].filter(Boolean).join(" "),ref:M,sx:l({display:"inline-flex",alignItems:"center",justifyContent:"center",gap:1},t),...void 0!==y&&{"aria-valuenow":y,"aria-valuemin":0,"aria-valuemax":100},...b,children:[e(d,{"aria-live":"polite",viewBox:"0 0 100 100",sx:l({..."small"===g&&{width:"16px",height:"16px"},..."medium"===g&&{width:"24px",height:"24px"},..."number"==typeof g&&{width:`${g}px`,height:`${g}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:`${T.dashLength} ${z}`,strokeDashOffset:T.dashOffset},"70%":{strokeDasharray:`${W.dashLength} ${z}`,strokeDashOffset:W.dashOffset}},"@keyframes flow-spinner-indeterminate-circle-secondary":{"0%, 25%, 100%":{strokeDasharray:`${T.reversedDashLength} ${z}`,strokeDashOffset:T.dashOffset},"70%":{strokeDasharray:`${W.reversedDashLength} ${z}`,strokeDashOffset:W.dashOffset}},"@keyframes flow-spinner-indeterminate-group-secondary":{"0%, 25%, 100%":{transform:`rotate(${T.reversedRotation}deg)`},"70%":{transform:`rotate(${W.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"}}}}},N),...S,children:r("g",{children:[(G.reversedDashLength>0||0===P)&&e("g",{style:{transform:`rotate(${G.reversedRotation}deg)`,transformOrigin:"50% 50%"},children:e("circle",{className:"FlowSpinner-circle-secondary",cx:"50",cy:"50",r:R,fill:"none",stroke:"dark"===F.palette.mode?F.palette.onSurface.os700:F.palette.transparent.secondary,strokeWidth:k,strokeLinecap:"round",strokeDasharray:`${G.reversedDashLength} ${z}`,strokeDashoffset:G.dashOffset,...0===P&&{strokeLinecap:"butt",strokeDasharray:"none",strokeDashoffset:"none"}})}),(G.dashLength>0||100===P)&&e("circle",{className:"FlowSpinner-circle-primary",cx:"50",cy:"50",r:R,fill:"none",stroke:"currentColor",strokeWidth:k,strokeLinecap:"round",strokeDasharray:`${G.dashLength} ${z}`,strokeDashoffset:G.dashOffset,...100===P&&{strokeLinecap:"butt",strokeDasharray:"none",strokeDashoffset:"none"}})]})}),D&&void 0!==y&&e(f,{"data-testid":"Spinner.percentage",..."number"!=typeof g&&{size:g},value:y,label:!0!==D?D:void 0,...x})]})});export{p 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 { sxOverride } from '@/src/utils/sxOverride';\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={sxOverride(\n          {\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            gap: 1,\n          },\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={sxOverride(\n            {\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            },\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","sxOverride","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/promptBar/PromptAttachments.d.ts

@@ -0,0 +1,58 @@
+import React, { ComponentType, ElementType } from 'react';
+import { BoxProps, ButtonBaseProps, SvgIconProps } from '@mui/material';
+export interface PromptAttachment {
+    /**
+     * Display name of the attachment.
+     */
+    name: string;
+    /**
+     * URL of the attachment image.
+     */
+    src?: string;
+}
+export interface PromptAttachmentsProps extends BoxProps<ElementType> {
+    /**
+     * List of attachments to display.
+     */
+    attachments: PromptAttachment[];
+    /**
+     * Callback to update the attachments list.
+     */
+    setAttachments?: (attachments: PromptAttachment[]) => void;
+    /**
+     * Custom component to be used for the file icon.
+     */
+    IconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Properties applied to the icon wrapper Box.
+     */
+    iconWrapperProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to the file icon.
+     */
+    iconProps?: SvgIconProps;
+    /**
+     * Properties applied to the text wrapper Box.
+     */
+    textProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to the remove icon.
+     */
+    removeIconProps?: SvgIconProps;
+    /**
+     * Properties applied to the remove icon wrapper Box.
+     */
+    removeIconWrapperProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to the image preview Box (rendered when attachment has src).
+     */
+    imageProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to the ButtonBase wrapping each attachment item.
+     */
+    buttonBaseProps?: ButtonBaseProps;
+}
+/**
+ * Shows list of attachments in PromptBar
+ */
+export declare const PromptAttachments: React.FC<PromptAttachmentsProps>;

package/components/promptBar/PromptAttachments.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as r,Fragment as o}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Box as i,ButtonBase as n,Typography as s}from"@mui/material";import{sxOverride as a}from"../../utils/sxOverride/sxOverride.js";import{getFocusRingStyle as p}from"../focusring/focusring.js";import{CircleCloseFilledIcon as c}from"../icon/filled/CircleCloseFilledIcon.js";import{FileIcon as l}from"../icon/stroke/FileIcon.js";import{getInteractiveStyle as x}from"../../materialui/button/interactive.js";const d=t(({attachments:t,setAttachments:d,IconComponent:m,iconWrapperProps:u,iconProps:f,textProps:g,removeIconProps:b,removeIconWrapperProps:h,imageProps:y,buttonBaseProps:I,sx:k,...v},C)=>{const{sx:S,...j}=u??{},{sx:z,...w}=g??{},{sx:P,...R}=b??{},{sx:W,...O}=h??{},{sx:F,...M}=y??{},{sx:A,...B}=I??{},E=m??l;return e(i,{ref:C,sx:a({display:"flex",alignItems:"center",justifyContent:"flex-start",overflow:"auto",gap:.5,mb:1},k),...v,children:t.map((l,m)=>r(n,{"aria-label":l.name,disabled:!d,sx:a(e=>({position:"relative",borderRadius:"8px","&.Mui-disabled":{pointerEvents:"all",cursor:"text",userSelect:"text"},...l.src?{":after":{display:"block",content:'""',position:"absolute",inset:"0",borderRadius:"inherit",backgroundColor:e.palette.transparent.primary,transition:"opacity 0.3s ease-out",opacity:"0",zIndex:"10"}}:{padding:"6px 8px",gap:1,display:"flex",alignItems:"center",justifyContent:"flex-start"},backgroundColor:"surface.primary",...p(e,!0,"2px"),"&&:before":{zIndex:"20"},...d&&{...x({...l.src?{"&:after":{opacity:"0"}}:{backgroundColor:"surface.primary"}},{...l.src?{"&:after":{opacity:"1"}}:{backgroundColor:"surface.secondary"}})}}),A),onClick:()=>d?.(t.filter((e,r)=>r!==m)),...B,children:[l.src?e(i,{sx:a({borderRadius:"inherit",backgroundImage:`url(${l.src})`,backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center",width:"40px",height:"40px",...1===t.length&&{width:"72px",height:"72px"}},F),...M}):r(o,{children:[e(i,{sx:a({display:"flex",borderRadius:"4px",padding:"6px",backgroundColor:"transparent.primary",color:"onSurface.os700","& .MuiSvgIcon-root":{fontSize:"16px"}},S),...j,children:e(E,{...f})}),e(s,{component:"span",sx:a({fontWeight:{xs:"400"},fontSize:{xs:"14px"},lineHeight:{xs:"20px"},letterSpacing:{xs:"0.02em"},color:"#000",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"120px"},z),...w,children:l.name})]}),d&&e(i,{component:"span",sx:a({display:"flex",alignItems:"center",justifyContent:"center",color:"onSurface.os900",zIndex:"30",...l.src?{position:"absolute",top:"3px",right:"3px"}:{position:"relative",top:"-10px",right:"-7px",mr:"2px"},"&:after":{position:"absolute",zIndex:"10",inset:"0",margin:"2px",display:"block",content:'""',borderRadius:"50%",backgroundColor:"common.white"}},W),...O,children:e(c,{sx:a({position:"relative",zIndex:"20",fontSize:"14px"},P),...R})})]},m))})});export{d as PromptAttachments};
+//# sourceMappingURL=PromptAttachments.js.map

package/components/promptBar/PromptAttachments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptAttachments.js","sources":["../../../src/components/promptBar/PromptAttachments.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, ButtonBase, ButtonBaseProps, SvgIconProps, Typography } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { CircleCloseFilledIcon } from '@/src/components/icon/filled/CircleCloseFilledIcon';\nimport { FileIcon } from '@/src/components/icon/stroke/FileIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface PromptAttachment {\n  /**\n   * Display name of the attachment.\n   */\n  name: string;\n  /**\n   * URL of the attachment image.\n   */\n  src?: string;\n}\n\nexport interface PromptAttachmentsProps extends BoxProps<ElementType> {\n  /**\n   * List of attachments to display.\n   */\n  attachments: PromptAttachment[];\n  /**\n   * Callback to update the attachments list.\n   */\n  setAttachments?: (attachments: PromptAttachment[]) => void;\n  /**\n   * Custom component to be used for the file icon.\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to the icon wrapper Box.\n   */\n  iconWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to the file icon.\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Properties applied to the text wrapper Box.\n   */\n  textProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to the remove icon.\n   */\n  removeIconProps?: SvgIconProps;\n  /**\n   * Properties applied to the remove icon wrapper Box.\n   */\n  removeIconWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to the image preview Box (rendered when attachment has src).\n   */\n  imageProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to the ButtonBase wrapping each attachment item.\n   */\n  buttonBaseProps?: ButtonBaseProps;\n}\n\n/**\n * Shows list of attachments in PromptBar\n */\nexport const PromptAttachments: React.FC<PromptAttachmentsProps> = forwardRef(\n  (\n    {\n      attachments,\n      setAttachments,\n      IconComponent,\n      iconWrapperProps,\n      iconProps,\n      textProps,\n      removeIconProps,\n      removeIconWrapperProps,\n      imageProps,\n      buttonBaseProps,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: iconWrapperSx, ...restIconWrapper } = iconWrapperProps ?? {};\n    const { sx: textSx, ...restText } = textProps ?? {};\n    const { sx: removeIconSx, ...restRemoveIcon } = removeIconProps ?? {};\n    const { sx: removeIconWrapperSx, ...restRemoveIconWrapper } = removeIconWrapperProps ?? {};\n    const { sx: imageSx, ...restImage } = imageProps ?? {};\n    const { sx: buttonBaseSx, ...restButtonBase } = buttonBaseProps ?? {};\n    const AttachmentFileIcon = IconComponent ?? FileIcon;\n\n    return (\n      <Box\n        ref={ref}\n        sx={sxOverride(\n          {\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'flex-start',\n            overflow: 'auto',\n            gap: 0.5,\n            mb: 1,\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        {attachments.map((attachment: PromptAttachment, idx: number) => (\n          <ButtonBase\n            aria-label={attachment.name}\n            key={idx}\n            disabled={!setAttachments}\n            sx={sxOverride(\n              (theme) => ({\n                position: 'relative',\n                borderRadius: '8px',\n                '&.Mui-disabled': {\n                  pointerEvents: 'all',\n                  cursor: 'text',\n                  userSelect: 'text',\n                },\n                ...(attachment.src\n                  ? {\n                      // pseudo background for hover\n                      ':after': {\n                        display: 'block',\n                        content: '\"\"',\n                        position: 'absolute',\n                        inset: '0',\n                        borderRadius: 'inherit',\n                        backgroundColor: theme.palette.transparent.primary,\n                        transition: 'opacity 0.3s ease-out',\n                        opacity: '0',\n                        zIndex: '10',\n                      },\n                    }\n                  : {\n                      padding: '6px 8px',\n                      gap: 1,\n                      display: 'flex',\n                      alignItems: 'center',\n                      justifyContent: 'flex-start',\n                    }),\n                backgroundColor: 'surface.primary',\n                ...getFocusRingStyle(theme, true, '2px'),\n                '&&:before': {\n                  zIndex: '20',\n                },\n                ...(setAttachments && {\n                  ...getInteractiveStyle(\n                    {\n                      ...(attachment.src\n                        ? {\n                            '&:after': {\n                              opacity: '0',\n                            },\n                          }\n                        : {\n                            backgroundColor: 'surface.primary',\n                          }),\n                    },\n                    {\n                      ...(attachment.src\n                        ? {\n                            '&:after': {\n                              opacity: '1',\n                            },\n                          }\n                        : {\n                            backgroundColor: 'surface.secondary',\n                          }),\n                    },\n                  ),\n                }),\n              }),\n              buttonBaseSx,\n            )}\n            onClick={() => setAttachments?.(attachments.filter((_: PromptAttachment, i: number) => i !== idx))}\n            {...restButtonBase}\n          >\n            {attachment.src ? (\n              <Box\n                sx={sxOverride(\n                  {\n                    borderRadius: 'inherit',\n                    backgroundImage: `url(${attachment.src})`,\n                    backgroundSize: 'cover',\n                    backgroundRepeat: 'no-repeat',\n                    backgroundPosition: 'center',\n                    width: '40px',\n                    height: '40px',\n                    ...(attachments.length === 1 && {\n                      width: '72px',\n                      height: '72px',\n                    }),\n                  },\n                  imageSx,\n                )}\n                {...restImage}\n              />\n            ) : (\n              <>\n                <Box\n                  sx={sxOverride(\n                    {\n                      display: 'flex',\n                      borderRadius: '4px',\n                      padding: '6px',\n                      backgroundColor: 'transparent.primary',\n                      color: 'onSurface.os700',\n                      '& .MuiSvgIcon-root': {\n                        fontSize: '16px',\n                      },\n                    },\n                    iconWrapperSx,\n                  )}\n                  {...restIconWrapper}\n                >\n                  <AttachmentFileIcon {...iconProps} />\n                </Box>\n                <Typography\n                  component=\"span\"\n                  sx={sxOverride(\n                    {\n                      fontWeight: { xs: '400' },\n                      fontSize: { xs: '14px' },\n                      lineHeight: { xs: '20px' },\n                      letterSpacing: { xs: '0.02em' },\n                      color: '#000',\n                      whiteSpace: 'nowrap',\n                      overflow: 'hidden',\n                      textOverflow: 'ellipsis',\n                      maxWidth: '120px',\n                    },\n                    textSx,\n                  )}\n                  {...restText}\n                >\n                  {attachment.name}\n                </Typography>\n              </>\n            )}\n            {setAttachments && (\n              <Box\n                component=\"span\"\n                sx={sxOverride(\n                  {\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    color: 'onSurface.os900',\n                    zIndex: '30',\n                    ...(attachment.src\n                      ? {\n                          position: 'absolute',\n                          top: '3px',\n                          right: '3px',\n                        }\n                      : {\n                          position: 'relative',\n                          top: '-10px',\n                          right: '-7px',\n                          mr: '2px',\n                        }),\n                    // fill of the 'x' inside the icon\n                    '&:after': {\n                      position: 'absolute',\n                      zIndex: '10',\n                      inset: '0',\n                      margin: '2px',\n                      display: 'block',\n                      content: '\"\"',\n                      borderRadius: '50%',\n                      backgroundColor: 'common.white',\n                    },\n                  },\n                  removeIconWrapperSx,\n                )}\n                {...restRemoveIconWrapper}\n              >\n                <CircleCloseFilledIcon\n                  sx={sxOverride(\n                    {\n                      position: 'relative',\n                      zIndex: '20',\n                      fontSize: '14px',\n                    },\n                    removeIconSx,\n                  )}\n                  {...restRemoveIcon}\n                />\n              </Box>\n            )}\n          </ButtonBase>\n        ))}\n      </Box>\n    );\n  },\n);\n"],"names":["PromptAttachments","forwardRef","attachments","setAttachments","IconComponent","iconWrapperProps","iconProps","textProps","removeIconProps","removeIconWrapperProps","imageProps","buttonBaseProps","sx","rest","ref","iconWrapperSx","restIconWrapper","textSx","restText","removeIconSx","restRemoveIcon","removeIconWrapperSx","restRemoveIconWrapper","imageSx","restImage","buttonBaseSx","restButtonBase","AttachmentFileIcon","FileIcon","_jsx","Box","sxOverride","display","alignItems","justifyContent","overflow","gap","mb","children","map","attachment","idx","_jsxs","ButtonBase","name","disabled","theme","position","borderRadius","pointerEvents","cursor","userSelect","src","content","inset","backgroundColor","palette","transparent","primary","transition","opacity","zIndex","padding","getFocusRingStyle","getInteractiveStyle","onClick","filter","_","i","backgroundImage","backgroundSize","backgroundRepeat","backgroundPosition","width","height","length","color","fontSize","Typography","component","fontWeight","xs","lineHeight","letterSpacing","whiteSpace","textOverflow","maxWidth","top","right","mr","margin","CircleCloseFilledIcon"],"mappings":"0fAiEO,MAAMA,EAAsDC,EACjE,EAEIC,cACAC,iBACAC,gBACAC,mBACAC,YACAC,YACAC,kBACAC,yBACAC,aACAC,kBACAC,QACGC,GAELC,KAEA,MAAQF,GAAIG,KAAkBC,GAAoBX,GAAoB,CAAA,GAC9DO,GAAIK,KAAWC,GAAaX,GAAa,CAAA,GACzCK,GAAIO,KAAiBC,GAAmBZ,GAAmB,CAAA,GAC3DI,GAAIS,KAAwBC,GAA0Bb,GAA0B,CAAA,GAChFG,GAAIW,KAAYC,GAAcd,GAAc,CAAA,GAC5CE,GAAIa,KAAiBC,GAAmBf,GAAmB,CAAA,EAC7DgB,EAAqBvB,GAAiBwB,EAE5C,OACEC,EAACC,EAAG,CACFhB,IAAKA,EACLF,GAAImB,EACF,CACEC,QAAS,OACTC,WAAY,SACZC,eAAgB,aAChBC,SAAU,OACVC,IAAK,GACLC,GAAI,GAENzB,MAEEC,EAAIyB,SAEPpC,EAAYqC,IAAI,CAACC,EAA8BC,IAC9CC,EAACC,EAAU,CAAA,aACGH,EAAWI,KAEvBC,UAAW1C,EACXS,GAAImB,EACDe,IAAK,CACJC,SAAU,WACVC,aAAc,MACd,iBAAkB,CAChBC,cAAe,MACfC,OAAQ,OACRC,WAAY,WAEVX,EAAWY,IACX,CAEE,SAAU,CACRpB,QAAS,QACTqB,QAAS,KACTN,SAAU,WACVO,MAAO,IACPN,aAAc,UACdO,gBAAiBT,EAAMU,QAAQC,YAAYC,QAC3CC,WAAY,wBACZC,QAAS,IACTC,OAAQ,OAGZ,CACEC,QAAS,UACT1B,IAAK,EACLJ,QAAS,OACTC,WAAY,SACZC,eAAgB,cAEtBqB,gBAAiB,qBACdQ,EAAkBjB,GAAO,EAAM,OAClC,YAAa,CACXe,OAAQ,SAEN1D,GAAkB,IACjB6D,EACD,IACMxB,EAAWY,IACX,CACE,UAAW,CACTQ,QAAS,MAGb,CACEL,gBAAiB,oBAGzB,IACMf,EAAWY,IACX,CACE,UAAW,CACTQ,QAAS,MAGb,CACEL,gBAAiB,0BAM/B9B,GAEFwC,QAAS,IAAM9D,IAAiBD,EAAYgE,OAAO,CAACC,EAAqBC,IAAcA,IAAM3B,OACzFf,EAAcY,SAAA,CAEjBE,EAAWY,IACVvB,EAACC,GACClB,GAAImB,EACF,CACEiB,aAAc,UACdqB,gBAAiB,OAAO7B,EAAWY,OACnCkB,eAAgB,QAChBC,iBAAkB,YAClBC,mBAAoB,SACpBC,MAAO,OACPC,OAAQ,UACmB,IAAvBxE,EAAYyE,QAAgB,CAC9BF,MAAO,OACPC,OAAQ,SAGZnD,MAEEC,IAGNkB,eACEb,EAACC,GACClB,GAAImB,EACF,CACEC,QAAS,OACTgB,aAAc,MACdc,QAAS,MACTP,gBAAiB,sBACjBqB,MAAO,kBACP,qBAAsB,CACpBC,SAAU,SAGd9D,MAEEC,WAEJa,EAACF,EAAkB,IAAKrB,MAE1BuB,EAACiD,GACCC,UAAU,OACVnE,GAAImB,EACF,CACEiD,WAAY,CAAEC,GAAI,OAClBJ,SAAU,CAAEI,GAAI,QAChBC,WAAY,CAAED,GAAI,QAClBE,cAAe,CAAEF,GAAI,UACrBL,MAAO,OACPQ,WAAY,SACZjD,SAAU,SACVkD,aAAc,WACdC,SAAU,SAEZrE,MAEEC,EAAQoB,SAEXE,EAAWI,UAIjBzC,GACC0B,EAACC,EAAG,CACFiD,UAAU,OACVnE,GAAImB,EACF,CACEC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChB0C,MAAO,kBACPf,OAAQ,QACJrB,EAAWY,IACX,CACEL,SAAU,WACVwC,IAAK,MACLC,MAAO,OAET,CACEzC,SAAU,WACVwC,IAAK,QACLC,MAAO,OACPC,GAAI,OAGV,UAAW,CACT1C,SAAU,WACVc,OAAQ,KACRP,MAAO,IACPoC,OAAQ,MACR1D,QAAS,QACTqB,QAAS,KACTL,aAAc,MACdO,gBAAiB,iBAGrBlC,MAEEC,EAAqBgB,SAEzBT,EAAC8D,EAAqB,CACpB/E,GAAImB,EACF,CACEgB,SAAU,WACVc,OAAQ,KACRgB,SAAU,QAEZ1D,MAEEC,QAnLLqB"}

package/components/promptBar/PromptBar.d.ts

@@ -0,0 +1,71 @@
+import { ComponentType, FC, ReactNode } from 'react';
+import { IconButtonProps, InputAdornmentProps, OutlinedTextFieldProps, SvgIconProps } from '@mui/material';
+import { PromptSubmitIconButtonProps } from './PromptSubmitIconButton';
+import { PromptAttachment, PromptAttachmentsProps } from './PromptAttachments';
+export interface PromptBarProps extends Omit<OutlinedTextFieldProps, 'label' | 'variant' | 'size'> {
+    /**
+     * Forces a specific layout variant. `small` uses the compact mobile style, `medium` uses the
+     * spacious desktop style. When omitted the layout switches automatically.
+     */
+    size?: 'auto' | 'small' | 'medium';
+    /**
+     * Indicates that a request is being processed. Changes the submit button icon to a stop icon.
+     */
+    processing?: boolean;
+    /**
+     * Indicates that voice recording is in progress.
+     */
+    recording?: boolean;
+    /**
+     * List of attachments displayed above the text input.
+     */
+    attachments?: PromptAttachment[];
+    /**
+     * Callback to update the attachments list.
+     */
+    setAttachments?: (attachments: PromptAttachment[]) => void;
+    /**
+     * Properties passed to the PromptAttachments component.
+     */
+    promptAttachmentsProps?: Omit<PromptAttachmentsProps, 'attachments' | 'setAttachments'>;
+    /**
+     * Hides the add button for attachments
+     */
+    disableAdd?: boolean;
+    /**
+     * Properties passed to the add icon button at the start of the input
+     */
+    addIconButtonProps?: IconButtonProps;
+    /**
+     * Custom component to be used for the add icon
+     */
+    AddIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Extra buttons rendered inside the start adornment, after the add button.
+     */
+    startAdornmentButtons?: ReactNode;
+    /**
+     * Properties applied to the start InputAdornment wrapper
+     */
+    startAdornmentProps?: Omit<InputAdornmentProps, 'position'>;
+    /**
+     * Do not show voice button, use when speech input is not available or not supported.
+     */
+    disableVoice?: boolean;
+    /**
+     * Properties passed to the submit icon button
+     */
+    submitIconButtonProps?: PromptSubmitIconButtonProps;
+    /**
+     * Extra buttons rendered inside the end adornment, alongside the submit button.
+     */
+    endAdornmentButtons?: ReactNode;
+    /**
+     * Properties applied to the toolbar InputAdornment wrapper
+     */
+    endAdornmentProps?: Omit<InputAdornmentProps, 'position'>;
+}
+/**
+ * Input field for natural language AI-powered requests
+ */
+export declare const PromptBar: FC<PromptBarProps>;

package/components/promptBar/PromptBar.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as o,useState as n,useCallback as i,useRef as s,useEffect as l}from"react";import{TextField as a,Box as d,InputAdornment as p,IconButton as u}from"@mui/material";import{PlusIcon as m}from"../icon/stroke/PlusIcon.js";import{sxOverride as c}from"../../utils/sxOverride/sxOverride.js";import{PromptSubmitIconButton as h}from"./PromptSubmitIconButton.js";import{PromptAttachments as x}from"./PromptAttachments.js";const g=o(({sx:o,disabled:g,value:f,onChange:b,slotProps:v,addIconButtonProps:w,AddIconComponent:A,startAdornmentProps:M,submitIconButtonProps:S,processing:I,recording:B,endAdornmentProps:C,disableAdd:P,disableVoice:R,placeholder:F,attachments:y,setAttachments:O,promptAttachmentsProps:N,startAdornmentButtons:W,endAdornmentButtons:j,size:k,...z},H)=>{const{sx:E,...V}=w??{},{sx:G,...L}=N??{},{sx:$,...T}=M??{},{sx:q,...D}=C??{},{input:J,...K}=v??{},{sx:Q,startAdornment:U,...X}=J??{},Y=(e,t)=>({xs:"medium"===k?t:e,md:"small"===k?e:t}),[Z,_]=n(""),ee=void 0===f?Z:f,te=i(e=>{_(e.target.value),b?.(e)},[b]),re=i(e=>{te({target:{value:e}})},[te]),oe=A||m,[ne,ie]=n(!1),se=ne||ee.includes("\n"),le=s(null),ae=s(null),de=s(null),[pe,ue]=n(0),[me,ce]=n(0);return l(()=>{const e=le.current,t=ae.current,r=de.current,o=new ResizeObserver(()=>{if(e){const t=Number.parseFloat(getComputedStyle(e).lineHeight);ie(e.clientHeight>t)}if(t){const e=getComputedStyle(t.parentElement),r=getComputedStyle(t);ue(t.offsetWidth+Number.parseFloat(r.marginRight)+Number.parseFloat(e.paddingLeft))}if(r){const e=getComputedStyle(r.parentElement),t=getComputedStyle(r);ce(r.offsetWidth+Number.parseFloat(t.marginLeft)+Number.parseFloat(e.paddingRight))}});return e&&o.observe(e),t&&o.observe(t),r&&o.observe(r),()=>o.disconnect()},[]),e(a,{ref:H,minRows:1,maxRows:4,multiline:!0,disabled:g,fullWidth:!0,value:ee,placeholder:F,onChange:te,sx:c({borderRadius:Y(se||y?.length?"16px":"1000px","16px"),"&:not(.Flow-NoFocusRing):has(.Mui-focused):has(.MuiFormHelperText-root)":{"&&:before":{borderRadius:"16px"}}},o),slotProps:{input:{sx:c({borderRadius:"inherit",padding:Y("6px 8px","12px"),flexWrap:Y(se||y?.length?"wrap":"nowrap","wrap"),"&, &.Mui-focused":{"& .MuiOutlinedInput-notchedOutline":{"&, &:not(.Mui-error)":{borderColor:"onSurface.os500",borderWidth:"1px"}},"&.Mui-error:not(.Mui-focused) .MuiOutlinedInput-notchedOutline":{borderColor:"error.main"}},"& textarea":{pl:Y(se||y?.length?1:0,0),...P&&!U&&!W&&{pl:1},pr:Y(se||y?.length?1:0,0)}},Q),startAdornment:t(r,{children:[!!y?.length&&e(x,{attachments:y,setAttachments:O,sx:c({order:-1,flexBasis:"100%",...1===y?.length&&y[0].src&&{ml:1}},G),...L}),U??(!P&&t(p,{ref:ae,position:"start",sx:c({order:Y(se||y?.length?"1":"0","1"),mt:Y(se||y?.length?1:0,1),mr:1,"& .MuiSvgIcon-root, & .MuiIconButton-root .MuiSvgIcon-root":{fontSize:"17px"}},$),...T,children:[e(u,{"aria-label":"Add attachment",size:"small",disabled:g,sx:c({},E),...V,children:e(oe,{})}),W]})),e(d,{ref:le,component:"span","aria-hidden":!0,sx:{display:Y("block","none"),position:"absolute",left:"0",visibility:"hidden",pointerEvents:"none",whiteSpace:"pre-wrap",wordBreak:"break-word",overflowWrap:"break-word",pl:`${pe||16}px`,pr:`${me+1}px`,flexGrow:"1",maxHeight:"3em",overflow:"hidden"},children:ee||F||""})]}),endAdornment:t(r,{children:[e(d,{sx:{order:"2",flexGrow:"1",flexBasis:"1px"}}),t(p,{ref:de,position:"end",sx:c({order:"3",gap:Y(.5,1),mt:Y(se||y?.length?1:0,1),ml:1,"& .MuiSvgIcon-root, & .MuiIconButton-root .MuiSvgIcon-root":{fontSize:"17px"}},q),...D,children:[j,e(h,{value:ee,setValue:re,attachments:y,disabled:g,processing:I,recording:B,disableVoice:R,...S})]})]}),...X},...K},...z,variant:"outlined",label:null})});export{g as PromptBar};
+//# sourceMappingURL=PromptBar.js.map

package/components/promptBar/PromptBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptBar.js","sources":["../../../src/components/promptBar/PromptBar.tsx"],"sourcesContent":["import { ComponentType, ChangeEvent, FC, ReactNode, forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport { ResponsiveStyleValue } from '@mui/system';\nimport {\n  Box,\n  IconButton,\n  IconButtonProps,\n  InputAdornment,\n  InputAdornmentProps,\n  OutlinedInputProps,\n  OutlinedTextFieldProps,\n  SvgIconProps,\n  TextField,\n} from '@mui/material';\nimport { PlusIcon } from '@/src/components/icon/stroke/PlusIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { PromptSubmitIconButton, PromptSubmitIconButtonProps } from './PromptSubmitIconButton';\nimport { PromptAttachment, PromptAttachments, PromptAttachmentsProps } from './PromptAttachments';\n\nexport interface PromptBarProps extends Omit<OutlinedTextFieldProps, 'label' | 'variant' | 'size'> {\n  /**\n   * Forces a specific layout variant. `small` uses the compact mobile style, `medium` uses the\n   * spacious desktop style. When omitted the layout switches automatically.\n   */\n  size?: 'auto' | 'small' | 'medium';\n  /**\n   * Indicates that a request is being processed. Changes the submit button icon to a stop icon.\n   */\n  processing?: boolean;\n  /**\n   * Indicates that voice recording is in progress.\n   */\n  recording?: boolean;\n  /**\n   * List of attachments displayed above the text input.\n   */\n  attachments?: PromptAttachment[];\n  /**\n   * Callback to update the attachments list.\n   */\n  setAttachments?: (attachments: PromptAttachment[]) => void;\n  /**\n   * Properties passed to the PromptAttachments component.\n   */\n  promptAttachmentsProps?: Omit<PromptAttachmentsProps, 'attachments' | 'setAttachments'>;\n  /**\n   * Hides the add button for attachments\n   */\n  disableAdd?: boolean;\n  /**\n   * Properties passed to the add icon button at the start of the input\n   */\n  addIconButtonProps?: IconButtonProps;\n  /**\n   * Custom component to be used for the add icon\n   */\n  AddIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Extra buttons rendered inside the start adornment, after the add button.\n   */\n  startAdornmentButtons?: ReactNode;\n  /**\n   * Properties applied to the start InputAdornment wrapper\n   */\n  startAdornmentProps?: Omit<InputAdornmentProps, 'position'>;\n  /**\n   * Do not show voice button, use when speech input is not available or not supported.\n   */\n  disableVoice?: boolean;\n  /**\n   * Properties passed to the submit icon button\n   */\n  submitIconButtonProps?: PromptSubmitIconButtonProps;\n  /**\n   * Extra buttons rendered inside the end adornment, alongside the submit button.\n   */\n  endAdornmentButtons?: ReactNode;\n  /**\n   * Properties applied to the toolbar InputAdornment wrapper\n   */\n  endAdornmentProps?: Omit<InputAdornmentProps, 'position'>;\n}\n\n/**\n * Input field for natural language AI-powered requests\n */\nexport const PromptBar: FC<PromptBarProps> = forwardRef(\n  (\n    {\n      sx,\n      disabled,\n      value,\n      onChange,\n      slotProps,\n      addIconButtonProps,\n      AddIconComponent,\n      startAdornmentProps,\n      submitIconButtonProps,\n      processing,\n      recording,\n      endAdornmentProps,\n      disableAdd,\n      disableVoice,\n      placeholder,\n      attachments,\n      setAttachments,\n      promptAttachmentsProps,\n      startAdornmentButtons,\n      endAdornmentButtons,\n      size,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: addIconButtonSx, ...restAddIconButton } = addIconButtonProps ?? {};\n    const { sx: promptAttachmentsSx, ...restPromptAttachments } = promptAttachmentsProps ?? {};\n    const { sx: startAdornmentSx, ...restStartAdornment } = startAdornmentProps ?? {};\n    const { sx: endAdornmentSx, ...restEndAdornment } = endAdornmentProps ?? {};\n    const { input: inputSlotProps, ...restSlotProps } = (slotProps ?? {}) as PromptBarProps['slotProps'];\n    const {\n      sx: inputSx,\n      startAdornment: startAdornmentOverride,\n      ...restInputSlotProps\n    } = (inputSlotProps ?? {}) as OutlinedInputProps;\n\n    // handle responsive styling of compact and desktop variants\n    const responsive = <T,>(xs: T, md: T): ResponsiveStyleValue<T> => ({\n      xs: size === 'medium' ? md : xs,\n      md: size === 'small' ? xs : md,\n    });\n\n    // manage internal and provided value, determines which icon will be shown\n    const [internalValue, setInternalValue] = useState('');\n    const currentValue = (value === undefined ? internalValue : value) as string;\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        setInternalValue(e.target.value);\n        onChange?.(e);\n      },\n      [onChange],\n    );\n    const handleSetValue = useCallback(\n      (v: string) => {\n        handleChange({ target: { value: v } } as ChangeEvent<HTMLInputElement>);\n      },\n      [handleChange],\n    );\n\n    const AddIcon = AddIconComponent || PlusIcon;\n\n    // detect multirow to update style\n    const [isWrapped, setIsWrapped] = useState(false);\n    const isMultirow = isWrapped || currentValue.includes('\\n');\n    const shadowRef = useRef<HTMLSpanElement>(null);\n    const internalStartRef = useRef<HTMLDivElement>(null);\n    const internalEndRef = useRef<HTMLDivElement>(null);\n    const [startWidth, setStartWidth] = useState(0);\n    const [endWidth, setEndWidth] = useState(0);\n    useEffect(() => {\n      const shadowEl = shadowRef.current;\n      const startEl = internalStartRef.current;\n      const endEl = internalEndRef.current;\n\n      const observer = new ResizeObserver(() => {\n        if (shadowEl) {\n          const lineHeight = Number.parseFloat(getComputedStyle(shadowEl).lineHeight);\n          setIsWrapped(shadowEl.clientHeight > lineHeight);\n        }\n        if (startEl) {\n          const containerStyle = getComputedStyle(startEl.parentElement);\n          const adornmentStyle = getComputedStyle(startEl);\n          setStartWidth(\n            startEl.offsetWidth +\n              Number.parseFloat(adornmentStyle.marginRight) +\n              Number.parseFloat(containerStyle.paddingLeft),\n          );\n        }\n        if (endEl) {\n          const containerStyle = getComputedStyle(endEl.parentElement);\n          const adornmentStyle = getComputedStyle(endEl);\n          setEndWidth(\n            endEl.offsetWidth +\n              Number.parseFloat(adornmentStyle.marginLeft) +\n              Number.parseFloat(containerStyle.paddingRight),\n          );\n        }\n      });\n\n      if (shadowEl) observer.observe(shadowEl);\n      if (startEl) observer.observe(startEl);\n      if (endEl) observer.observe(endEl);\n      return () => observer.disconnect();\n    }, []);\n\n    return (\n      <TextField\n        ref={ref}\n        minRows={1}\n        maxRows={4}\n        multiline\n        disabled={disabled}\n        fullWidth\n        value={currentValue}\n        placeholder={placeholder}\n        onChange={handleChange}\n        sx={sxOverride(\n          {\n            borderRadius: responsive(isMultirow || attachments?.length ? '16px' : '1000px', '16px'),\n            // correct focus ring for small variant with helperText\n            '&:not(.Flow-NoFocusRing):has(.Mui-focused):has(.MuiFormHelperText-root)': {\n              '&&:before': {\n                borderRadius: '16px',\n              },\n            },\n          },\n          sx,\n        )}\n        slotProps={{\n          input: {\n            sx: sxOverride(\n              {\n                borderRadius: 'inherit',\n                padding: responsive('6px 8px', '12px'),\n                // allow placing toolbar on the second row\n                flexWrap: responsive(isMultirow || attachments?.length ? 'wrap' : 'nowrap', 'wrap'),\n                '&, &.Mui-focused': {\n                  '& .MuiOutlinedInput-notchedOutline': {\n                    '&, &:not(.Mui-error)': {\n                      borderColor: 'onSurface.os500',\n                      borderWidth: '1px',\n                    },\n                  },\n                  '&.Mui-error:not(.Mui-focused) .MuiOutlinedInput-notchedOutline': {\n                    borderColor: 'error.main',\n                  },\n                },\n                '& textarea': {\n                  pl: responsive(isMultirow || attachments?.length ? 1 : 0, 0),\n                  ...(disableAdd &&\n                    !startAdornmentOverride &&\n                    !startAdornmentButtons && {\n                      pl: 1,\n                    }),\n                  pr: responsive(isMultirow || attachments?.length ? 1 : 0, 0),\n                },\n              },\n              inputSx,\n            ),\n            startAdornment: (\n              <>\n                {!!attachments?.length && (\n                  <PromptAttachments\n                    attachments={attachments}\n                    setAttachments={setAttachments}\n                    sx={sxOverride(\n                      {\n                        order: -1,\n                        flexBasis: '100%',\n                        ...(attachments?.length === 1 && attachments[0].src && { ml: 1 }),\n                      },\n                      promptAttachmentsSx,\n                    )}\n                    {...restPromptAttachments}\n                  />\n                )}\n                {startAdornmentOverride ??\n                  (!disableAdd && (\n                    <InputAdornment\n                      ref={internalStartRef}\n                      position=\"start\"\n                      sx={sxOverride(\n                        {\n                          // move to second row, start\n                          order: responsive(isMultirow || attachments?.length ? '1' : '0', '1'),\n                          // space between text and input in large variant\n                          mt: responsive(isMultirow || attachments?.length ? 1 : 0, 1),\n                          // space between text and buttons in compact variant\n                          mr: 1,\n                          // style of icon buttons\n                          '& .MuiSvgIcon-root, & .MuiIconButton-root .MuiSvgIcon-root': {\n                            fontSize: '17px',\n                          },\n                        },\n                        startAdornmentSx,\n                      )}\n                      {...restStartAdornment}\n                    >\n                      <IconButton\n                        aria-label=\"Add attachment\"\n                        size=\"small\"\n                        disabled={disabled}\n                        sx={sxOverride({}, addIconButtonSx)}\n                        {...restAddIconButton}\n                      >\n                        <AddIcon />\n                      </IconButton>\n                      {startAdornmentButtons}\n                    </InputAdornment>\n                  ))}\n                <Box\n                  ref={shadowRef}\n                  component=\"span\"\n                  aria-hidden\n                  sx={{\n                    display: responsive('block', 'none'),\n                    position: 'absolute',\n                    left: '0',\n                    visibility: 'hidden',\n                    pointerEvents: 'none',\n                    // correctly wrap as in textarea\n                    whiteSpace: 'pre-wrap',\n                    wordBreak: 'break-word',\n                    overflowWrap: 'break-word',\n                    pl: `${startWidth || 16}px`,\n                    pr: `${endWidth + 1}px`, // 1px to fix possible rounding error\n                    flexGrow: '1',\n                    maxHeight: '3em',\n                    overflow: 'hidden',\n                  }}\n                >\n                  {currentValue || placeholder || ''}\n                </Box>\n              </>\n            ),\n            endAdornment: (\n              <>\n                <Box sx={{ order: '2', flexGrow: '1', flexBasis: '1px' }} />\n                <InputAdornment\n                  ref={internalEndRef}\n                  position=\"end\"\n                  sx={sxOverride(\n                    {\n                      // move to second row, end\n                      order: '3',\n                      // space between multiple buttons\n                      gap: responsive(0.5, 1),\n                      // space between text and input in large variant\n                      mt: responsive(isMultirow || attachments?.length ? 1 : 0, 1),\n                      // space between text and buttons in compact variant\n                      ml: 1,\n                      // style of icon buttons\n                      '& .MuiSvgIcon-root, & .MuiIconButton-root .MuiSvgIcon-root': {\n                        fontSize: '17px',\n                      },\n                    },\n                    endAdornmentSx,\n                  )}\n                  {...restEndAdornment}\n                >\n                  {endAdornmentButtons}\n                  <PromptSubmitIconButton\n                    value={currentValue}\n                    setValue={handleSetValue}\n                    attachments={attachments}\n                    disabled={disabled}\n                    processing={processing}\n                    recording={recording}\n                    disableVoice={disableVoice}\n                    {...submitIconButtonProps}\n                  />\n                </InputAdornment>\n              </>\n            ),\n            ...restInputSlotProps,\n          },\n          ...restSlotProps,\n        }}\n        {...rest}\n        variant=\"outlined\"\n        label={null}\n      />\n    );\n  },\n);\n"],"names":["PromptBar","forwardRef","sx","disabled","value","onChange","slotProps","addIconButtonProps","AddIconComponent","startAdornmentProps","submitIconButtonProps","processing","recording","endAdornmentProps","disableAdd","disableVoice","placeholder","attachments","setAttachments","promptAttachmentsProps","startAdornmentButtons","endAdornmentButtons","size","rest","ref","addIconButtonSx","restAddIconButton","promptAttachmentsSx","restPromptAttachments","startAdornmentSx","restStartAdornment","endAdornmentSx","restEndAdornment","input","inputSlotProps","restSlotProps","inputSx","startAdornment","startAdornmentOverride","restInputSlotProps","responsive","xs","md","internalValue","setInternalValue","useState","currentValue","undefined","handleChange","useCallback","e","target","handleSetValue","v","AddIcon","PlusIcon","isWrapped","setIsWrapped","isMultirow","includes","shadowRef","useRef","internalStartRef","internalEndRef","startWidth","setStartWidth","endWidth","setEndWidth","useEffect","shadowEl","current","startEl","endEl","observer","ResizeObserver","lineHeight","Number","parseFloat","getComputedStyle","clientHeight","containerStyle","parentElement","adornmentStyle","offsetWidth","marginRight","paddingLeft","marginLeft","paddingRight","observe","disconnect","_jsx","TextField","minRows","maxRows","multiline","fullWidth","sxOverride","borderRadius","length","padding","flexWrap","borderColor","borderWidth","pl","pr","_jsxs","_Fragment","children","PromptAttachments","order","flexBasis","src","ml","InputAdornment","position","mt","mr","fontSize","IconButton","Box","component","display","left","visibility","pointerEvents","whiteSpace","wordBreak","overflowWrap","flexGrow","maxHeight","overflow","endAdornment","gap","PromptSubmitIconButton","setValue","variant","label"],"mappings":"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"}