npm - @skodaflow/web-library - Versions diffs - 7.16.0 → 8.0.0 - Mend

@skodaflow/web-library 7.16.0 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1905) hide show

package/components/notification/Notification.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Notification.js","sources":["../../../src/components/notification/Notification.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef } from 'react';\nimport {\n Box,\n BoxProps,\n Typography,\n TypographyProps,\n Stack,\n IconButton,\n StackProps,\n IconButtonProps,\n IconProps,\n} from '@mui/material';\nimport { Label } from '@/src/components/label/label';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationProps extends BoxProps<ElementType> {\n /*\n headline of the notification\n /\n headline?: React.ReactNode;\n /\n Custom props for the headline\n /\n headlineProps?: TypographyProps<ElementType>;\n /\n Custom props for the title\n /\n titleProps?: TypographyProps<ElementType>;\n /\n Longer description of the notification\n * @deprecated use prop children instead\n /\n description?: React.ReactNode;\n /\n Custom props for the description container\n /\n descriptionProps?: TypographyProps<ElementType>;\n /\n Custom props for the wrapper container\n /\n wrapperProps?: BoxProps<ElementType>;\n /\n Different color options for the notification\n /\n color?: 'white' \| 'grey';\n /\n Indicates if the notification is new\n /\n isNew?: boolean;\n /\n Custom props for the header container\n /\n headerProps?: BoxProps<ElementType>;\n /\n Icon to display in the notification\n /\n icon?: React.ReactNode;\n /\n Custom props for the icon container\n /\n iconProps?: BoxProps<ElementType>;\n /\n Footer text for the notification\n /\n footer?: React.ReactNode;\n /\n Control Buttons to display in the notification\n /\n buttons?: React.ReactNode;\n /\n Custom props for the buttons container\n /\n buttonsProps?: StackProps<ElementType>;\n /\n Custom props for the footer container\n /\n footerProps?: TypographyProps<ElementType>;\n /\n Callback function when the notification is dismissed\n /\n onDismiss?: () => void;\n /\n Custom props for the close icon container\n /\n closeIconButtonProps?: IconButtonProps;\n /\n Custom props for the close icon\n /\n closeIconProps?: IconProps<ElementType>;\n}\n\n/\n Component that renders an notification\n */\nexport const Notification: FC<NotificationProps> = forwardRef(\n (\n {\n sx,\n headline,\n titleProps,\n titleWrapperProps,\n description,\n descriptionProps,\n wrapperProps,\n color,\n isNew,\n headerProps,\n icon,\n iconProps,\n footer,\n buttons,\n buttonsProps,\n footerProps,\n onDismiss,\n closeIconButtonProps,\n closeIconProps,\n children,\n ...rest\n },\n ref,\n ) => {\n const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n const { sx: headerSx, ...restHeader } = headerProps ?? {};\n const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n const { sx: descriptionSx, ...restDescription } = descriptionProps ?? {};\n const { sx: titleSx, ...restTitle } = titleProps ?? {};\n const { sx: closeIconButtonSx, ...restCloseIconButton } = closeIconButtonProps ?? {};\n\n const { sx: iconSx, ...restIcon } = iconProps ?? {};\n return (\n <Box\n ref={ref}\n sx={{\n backgroundColor: color === 'grey' ? 'surface.primary' : 'background.primary',\n padding: '16px 16px 24px',\n display: 'flex',\n flexDirection: 'row',\n gap: 2,\n position: 'relative',\n ...sx,\n }}\n data-testid=\"Notification\"\n {...rest}\n >\n {icon && (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '50%',\n width: { xs: '32px', md: '56px' },\n height: { xs: '32px', md: '56px' },\n backgroundColor: 'transparent.backdrop',\n flexShrink: '0',\n overflow: 'hidden',\n '& img': { width: '100%', height: '100%', objectFit: 'cover' },\n '& .MuiSvgIcon-root': {\n width: { xs: '22px', md: '32px' },\n height: { xs: '22px', md: '32px' },\n },\n ...iconSx,\n }}\n data-testid=\"Notification.icon\"\n {...restIcon}\n >\n {icon}\n </Box>\n )}\n <Box\n sx={{\n width: '100%',\n maxWidth: '100%',\n overflow: 'hidden',\n display: 'flex',\n gap: '4px',\n flexDirection: 'column',\n // Small padding to prevent focus ring trimming\n padding: '4px',\n // show dismiss button on hover Desktop + Tablet\n '&:hover .notification-dismiss': {\n opacity: '1',\n },\n ...wrapperSx,\n }}\n {...restWrapper}\n >\n <Box\n sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 1, ...headerSx }}\n {...restHeader}\n >\n {isNew && <Label type=\"indicator\" variant=\"neutral\" />}\n\n <Typography\n variant=\"subheadline\"\n sx={{\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n flexGrow: '1',\n minWidth: '0',\n ...titleSx,\n }}\n data-testid=\"Notification.headline\"\n {...restTitle}\n >\n {headline}\n </Typography>\n\n {onDismiss && (\n <IconButton\n aria-label=\"Dismiss notification\"\n onClick={onDismiss}\n size=\"small\"\n className=\"notification-dismiss\"\n sx={{\n padding: '2px',\n // hide dismiss button Desktop + Tablet, keep on mobile\n opacity: { xs: '1', md: '0' },\n // show dismiss button on focus\n '&.Mui-focusVisible': {\n opacity: '1',\n },\n ...closeIconButtonSx,\n }}\n data-testid=\"Notification.dismiss\"\n {...restCloseIconButton}\n >\n <CloseIcon fontSize=\"small\" className=\"ballotx\" name=\"close\" {...closeIconProps} />\n </IconButton>\n )}\n </Box>\n <Box data-testid=\"Notification.description\">\n {typeof children === 'string' \|\| typeof description === 'string' ? (\n <Typography\n sx={{\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n display: '-webkit-box',\n WebkitLineClamp: '2',\n WebkitBoxOrient: 'vertical',\n ...descriptionSx,\n }}\n variant=\"disclaimer1\"\n {...restDescription}\n >\n {children \|\| description}\n </Typography>\n ) : (\n children \|\| description\n )}\n </Box>\n {footer && (\n <Typography\n variant=\"disclaimer1\"\n color={'onSurface.os600'}\n data-testid=\"Notification.footer\"\n {...footerProps}\n >\n {footer}\n </Typography>\n )}\n {buttons && (\n <Stack\n direction=\"row\"\n sx={{ mt: 1.5, ...buttonsSx }}\n spacing={1}\n data-testid=\"Notification.buttons\"\n {...restButtons}\n >\n {buttons}\n </Stack>\n )}\n </Box>\n </Box>\n );\n },\n);\n"],"names":["Notification","forwardRef","_a","ref","sx","headline","titleProps","titleWrapperProps","description","descriptionProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children","rest","__rest","_b","wrapperSx","restWrapper","_c","headerSx","restHeader","_d","buttonsSx","restButtons","_e","descriptionSx","restDescription","_f","titleSx","restTitle","_g","closeIconButtonSx","restCloseIconButton","_h","iconSx","restIcon","_jsxs","Box","Object","assign","backgroundColor","padding","display","flexDirection","gap","position","_jsx","justifyContent","alignItems","borderRadius","width","xs","md","height","flexShrink","overflow","objectFit","maxWidth","opacity","Label","type","variant","Typography","whiteSpace","textOverflow","flexGrow","minWidth","IconButton","onClick","size","className","CloseIcon","fontSize","name","WebkitLineClamp","WebkitBoxOrient","Stack","direction","mt","spacing"],"mappings":"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"}
1	+ {"version":3,"file":"Notification.js","sources":["../../../src/components/notification/Notification.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef } from 'react';\nimport {\n Box,\n BoxProps,\n Typography,\n TypographyProps,\n Stack,\n IconButton,\n StackProps,\n IconButtonProps,\n IconProps,\n} from '@mui/material';\nimport { Label } from '@/src/components/label/Label';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationProps extends BoxProps<ElementType> {\n /*\n headline of the notification\n /\n headline?: React.ReactNode;\n /\n Custom props for the headline\n /\n headlineProps?: TypographyProps<ElementType>;\n /\n Custom props for the title\n /\n titleProps?: TypographyProps<ElementType>;\n /\n Custom props for the description typography\n /\n descriptionProps?: TypographyProps<ElementType>;\n /\n Custom props for description wrapper\n /\n descriptionWrapperProps?: BoxProps<ElementType>;\n /\n Custom props for the wrapper container\n /\n wrapperProps?: BoxProps<ElementType>;\n /\n Different color options for the notification\n /\n color?: 'white' \| 'grey';\n /\n Indicates if the notification is new\n /\n isNew?: boolean;\n /\n Custom props for the header container\n /\n headerProps?: BoxProps<ElementType>;\n /\n Icon to display in the notification\n /\n icon?: React.ReactNode;\n /\n Custom props for the icon container\n /\n iconProps?: BoxProps<ElementType>;\n /\n Footer text for the notification\n /\n footer?: React.ReactNode;\n /\n Control Buttons to display in the notification\n /\n buttons?: React.ReactNode;\n /\n Custom props for the buttons container\n /\n buttonsProps?: StackProps<ElementType>;\n /\n Custom props for the footer container\n /\n footerProps?: TypographyProps<ElementType>;\n /\n Callback function when the notification is dismissed\n /\n onDismiss?: () => void;\n /\n Custom props for the close icon container\n /\n closeIconButtonProps?: IconButtonProps;\n /\n Custom props for the close icon\n /\n closeIconProps?: IconProps<ElementType>;\n}\n\n/\n Component that renders a notification\n */\nexport const Notification: FC<NotificationProps> = forwardRef(\n (\n {\n sx,\n headline,\n titleProps,\n titleWrapperProps,\n descriptionProps,\n descriptionWrapperProps,\n wrapperProps,\n color,\n isNew,\n headerProps,\n icon,\n iconProps,\n footer,\n buttons,\n buttonsProps,\n footerProps,\n onDismiss,\n closeIconButtonProps,\n closeIconProps,\n children,\n ...rest\n },\n ref,\n ) => {\n const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n const { sx: headerSx, ...restHeader } = headerProps ?? {};\n const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n const { sx: descriptionSx, ...restDescription } = descriptionProps ?? {};\n const { sx: titleSx, ...restTitle } = titleProps ?? {};\n const { sx: closeIconButtonSx, ...restCloseIconButton } = closeIconButtonProps ?? {};\n\n const { sx: iconSx, ...restIcon } = iconProps ?? {};\n return (\n <Box\n ref={ref}\n sx={{\n backgroundColor: color === 'grey' ? 'surface.primary' : 'background.primary',\n padding: '16px 16px 24px',\n display: 'flex',\n flexDirection: 'row',\n gap: 2,\n position: 'relative',\n ...sx,\n }}\n data-testid=\"Notification\"\n {...rest}\n >\n {icon && (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '50%',\n width: { xs: '32px', md: '56px' },\n height: { xs: '32px', md: '56px' },\n backgroundColor: 'transparent.backdrop',\n flexShrink: '0',\n overflow: 'hidden',\n '& img': { width: '100%', height: '100%', objectFit: 'cover' },\n '& .MuiSvgIcon-root': {\n width: { xs: '22px', md: '32px' },\n height: { xs: '22px', md: '32px' },\n },\n ...iconSx,\n }}\n data-testid=\"Notification.icon\"\n {...restIcon}\n >\n {icon}\n </Box>\n )}\n <Box\n sx={{\n width: '100%',\n maxWidth: '100%',\n overflow: 'hidden',\n display: 'flex',\n gap: '4px',\n flexDirection: 'column',\n // Small padding to prevent focus ring trimming\n padding: '4px',\n // show dismiss button on hover Desktop + Tablet\n '&:hover .notification-dismiss': {\n opacity: '1',\n },\n ...wrapperSx,\n }}\n {...restWrapper}\n >\n <Box\n sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 1, ...headerSx }}\n {...restHeader}\n >\n {isNew && <Label type=\"indicator\" variant=\"neutral\" />}\n\n <Typography\n variant=\"subheadline\"\n sx={{\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n flexGrow: '1',\n minWidth: '0',\n ...titleSx,\n }}\n data-testid=\"Notification.headline\"\n {...restTitle}\n >\n {headline}\n </Typography>\n {onDismiss && (\n <IconButton\n aria-label=\"Dismiss notification\"\n onClick={onDismiss}\n size=\"small\"\n className=\"notification-dismiss\"\n sx={{\n padding: '2px',\n // hide dismiss button Desktop + Tablet, keep on mobile\n opacity: { xs: '1', md: '0' },\n // show dismiss button on focus\n '&.Mui-focusVisible': {\n opacity: '1',\n },\n ...closeIconButtonSx,\n }}\n data-testid=\"Notification.dismiss\"\n {...restCloseIconButton}\n >\n <CloseIcon fontSize=\"small\" className=\"ballotx\" name=\"close\" {...closeIconProps} />\n </IconButton>\n )}\n </Box>\n <Box data-testid=\"Notification.description\" {...descriptionWrapperProps}>\n {typeof children === 'string' ? (\n <Typography\n sx={{\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n display: '-webkit-box',\n WebkitLineClamp: '2',\n WebkitBoxOrient: 'vertical',\n ...descriptionSx,\n }}\n variant=\"disclaimer1\"\n {...restDescription}\n >\n {children}\n </Typography>\n ) : (\n children\n )}\n </Box>\n {footer && (\n <Typography\n variant=\"disclaimer1\"\n color={'onSurface.os600'}\n data-testid=\"Notification.footer\"\n {...footerProps}\n >\n {footer}\n </Typography>\n )}\n {buttons && (\n <Stack\n direction=\"row\"\n sx={{ mt: 1.5, ...buttonsSx }}\n spacing={1}\n data-testid=\"Notification.buttons\"\n {...restButtons}\n >\n {buttons}\n </Stack>\n )}\n </Box>\n </Box>\n );\n },\n);\n"],"names":["Notification","forwardRef","_a","ref","sx","headline","titleProps","titleWrapperProps","descriptionProps","descriptionWrapperProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children","rest","__rest","_b","wrapperSx","restWrapper","_c","headerSx","restHeader","_d","buttonsSx","restButtons","_e","descriptionSx","restDescription","_f","titleSx","restTitle","_g","closeIconButtonSx","restCloseIconButton","_h","iconSx","restIcon","_jsxs","Box","Object","assign","backgroundColor","padding","display","flexDirection","gap","position","_jsx","justifyContent","alignItems","borderRadius","width","xs","md","height","flexShrink","overflow","objectFit","maxWidth","opacity","Label","type","variant","Typography","whiteSpace","textOverflow","flexGrow","minWidth","IconButton","onClick","size","className","CloseIcon","fontSize","name","WebkitLineClamp","WebkitBoxOrient","Stack","direction","mt","spacing"],"mappings":"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"}

package/components/notification/NotificationCenterHeaderButton.d.ts CHANGED Viewed

@@ -19,10 +19,6 @@ export interface NotificationCenterHeaderButtonProps extends NotificationCenterP
      * Properties applied to badge
      */
     badgeProps?: HeaderButtonProps['badgeProps'];
-    /**
-     * @deprecated use badgeProps instead
-     */
-    indicator?: HeaderButtonProps['indicator'];
     /**
      * Props applied to HeaderButton
      */
@@ -39,11 +35,11 @@ export interface NotificationCenterHeaderButtonProps extends NotificationCenterP
     /**
      * Props applied to ClickAwayListener
      */
-    clickAwayListenerProps?: ClickAwayListenerProps;
+    clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;
     /**
      * Props applied to Fade
      */
-    fadeProps?: FadeProps;
+    fadeProps?: Omit<FadeProps, 'children'>;
 }
 /**
  * HeaderButton that opens NotificationCenter

package/components/notification/NotificationCenterHeaderButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as o}from"tslib";import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{forwardRef as i,useState as n}from"react";import{HeaderButton as s}from"../header/HeaderButton.js";import{BellIcon as a}from"../icon/stroke/BellIcon.js";import{Popper as c,ClickAwayListener as p,Fade as l}from"@mui/material";import{NotificationCenter as d}from"./NotificationCenter.js";const m=i((i,m)=>{var{popperProps:f,clickAwayListenerProps:b,fadeProps:P,label:u="Notifications",extend:g,tooltipProps:j,badgeProps:x,indicator:h,headerButtonProps:O,icon:k,onClick:B}=i,C=o(i,["popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","indicator","headerButtonProps","icon","onClick"]);const[w,y]=n(null),A=null!=f?f:{},{sx:I}=A,N=o(A,["sx"]);return e(t,{children:[r(s,Object.assign({label:u,extend:null!=g&&g,tooltipProps:Object.assign(Object.assign({},w&&{open:!1}),j),badgeProps:x,indicator:h,onClick:o=>{null==B||B(o),y(o.currentTarget)},ref:m,"data-testid":"NotificationCenterHeaderButton"},O,{children:k||r(a,{})})),r(c,Object.assign({open:!!w,anchorEl:w,placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,18]}}],transition:!0,sx:Object.assign({zIndex:o=>o.zIndex.appBar+10},I)},N,{children:({TransitionProps:o})=>r(p,Object.assign({onClickAway:()=>y(null)},b,{children:r(l,Object.assign({},o,P,{children:r(d,Object.assign({},C,{ref:void 0}))}))}))}))]})});export{m as NotificationCenterHeaderButton};
+import{__rest as o}from"tslib";import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{forwardRef as n,useState as i}from"react";import{HeaderButton as s}from"../header/HeaderButton.js";import{BellIcon as a}from"../icon/stroke/BellIcon.js";import{Popper as p,ClickAwayListener as l,Fade as c}from"@mui/material";import{NotificationCenter as d}from"./NotificationCenter.js";const m=n((n,m)=>{var{popperProps:f,clickAwayListenerProps:b,fadeProps:P,label:u="Notifications",extend:g,tooltipProps:j,badgeProps:x,headerButtonProps:h,icon:O,onClick:k}=n,B=o(n,["popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","headerButtonProps","icon","onClick"]);const[C,w]=i(null),y=null!=f?f:{},{sx:A}=y,I=o(y,["sx"]);return e(t,{children:[r(s,Object.assign({label:u,extend:null!=g&&g,tooltipProps:Object.assign(Object.assign({},C&&{open:!1}),j),badgeProps:x,onClick:o=>{null==k||k(o),w(o.currentTarget)},ref:m,"data-testid":"NotificationCenterHeaderButton"},h,{children:O||r(a,{})})),r(p,Object.assign({open:!!C,anchorEl:C,placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,18]}}],transition:!0,sx:Object.assign({zIndex:o=>o.zIndex.appBar+10},A)},I,{children:({TransitionProps:o})=>r(l,Object.assign({onClickAway:()=>w(null)},b,{children:r(c,Object.assign({},o,P,{children:r(d,Object.assign({},B,{ref:void 0}))}))}))}))]})});export{m as NotificationCenterHeaderButton};
 //# sourceMappingURL=NotificationCenterHeaderButton.js.map

package/components/notification/NotificationCenterHeaderButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NotificationCenterHeaderButton.js","sources":["../../../src/components/notification/NotificationCenterHeaderButton.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useState } from 'react';\nimport { HeaderButton, HeaderButtonProps } from '@/src/components/header/HeaderButton';\nimport { BellIcon } from '@/src/components/icon/stroke/BellIcon';\nimport { Fade, ClickAwayListener, ClickAwayListenerProps, Popper, PopperProps, FadeProps } from '@mui/material';\nimport { NotificationCenter, NotificationCenterProps } from './NotificationCenter';\n\nexport interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {\n /*\n Label for the tooltip or the text button\n /\n label?: HeaderButtonProps['label'];\n /\n Change icon button with tooltip into button\n /\n extend?: boolean;\n /\n Properties applied to tooltip\n /\n tooltipProps?: HeaderButtonProps['tooltipProps'];\n /\n Properties applied to badge\n /\n badgeProps?: HeaderButtonProps['badgeProps'];\n /\n @deprecated use badgeProps instead\n /\n indicator?: HeaderButtonProps['indicator'];\n /\n Props applied to HeaderButton\n /\n headerButtonProps?: HeaderButtonProps;\n /\n Icon for the HeaderButton\n * @default BellIcon\n /\n icon?: ReactNode;\n /\n Props for the Popper component\n /\n popperProps?: PopperProps;\n /\n Props applied to ClickAwayListener\n /\n clickAwayListenerProps?: ClickAwayListenerProps;\n /\n Props applied to Fade\n /\n fadeProps?: FadeProps;\n}\n\n/\n HeaderButton that opens NotificationCenter\n */\nexport const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps> = forwardRef(\n (\n {\n popperProps,\n clickAwayListenerProps,\n fadeProps,\n label = 'Notifications',\n extend,\n tooltipProps,\n badgeProps,\n ~~indicator,\n~~ headerButtonProps,\n icon,\n onClick,\n ...rest\n },\n ref,\n ) => {\n const [anchor, setAnchor] = useState(null);\n const { sx: popperSx, ...restPopper } = popperProps ?? {};\n\n return (\n <>\n <HeaderButton\n label={label}\n extend={extend ?? false}\n tooltipProps={{\n ...(anchor && { open: false }),\n ...tooltipProps,\n }}\n badgeProps={badgeProps}\n ~~indicator={indicator}\n~~ onClick={(e) => {\n onClick?.(e);\n setAnchor(e.currentTarget);\n }}\n ref={ref}\n data-testid=\"NotificationCenterHeaderButton\"\n {...headerButtonProps}\n >\n {icon \|\| <BellIcon />}\n </HeaderButton>\n <Popper\n open={!!anchor}\n anchorEl={anchor}\n placement=\"bottom-end\"\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [0, 18],\n },\n },\n ]}\n transition\n sx={{\n zIndex: (theme) => theme.zIndex.appBar + 10,\n ...popperSx,\n }}\n {...restPopper}\n >\n {({ TransitionProps }) => (\n <ClickAwayListener onClickAway={() => setAnchor(null)} {...clickAwayListenerProps}>\n <Fade {...TransitionProps} {...fadeProps}>\n <NotificationCenter {...rest} ref={undefined} />\n </Fade>\n </ClickAwayListener>\n )}\n </Popper>\n </>\n );\n },\n);\n"],"names":["NotificationCenterHeaderButton","forwardRef","_a","ref","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","~~indicator","~~headerButtonProps","icon","onClick","rest","__rest","anchor","setAnchor","useState","_b","sx","popperSx","restPopper","_jsxs","_jsx","HeaderButton","Object","assign","open","e","currentTarget","~~children","~~BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","Fade","NotificationCenter","undefined"],"mappings":"~~oYAqDO~~,MAAMA,EAA0EC,EACrF,CACEC,~~EAcAC~~,~~KAdA~~,~~IAAAC,~~YACEA,EAAWC,uBACXA,EAAsBC,UACtBA,EAASC,MACTA,EAAQ,gBAAeC,OACvBA,EAAMC,aACNA,EAAYC,WACZA,EAAUC,~~UACVA~~,~~EAASC,kBACTA,~~EAAiBC,KACjBA,EAAIC,QACJA,~~GAAOZ~~,~~EACJa~~,EAAIC,~~EAAAd~~,~~EAZT~~,CAAA,cAAA,yBAAA,YAAA,QAAA,SAAA,eAAA,aAAA,~~YAAA,~~oBAAA,OAAA,~~YAgBA~~,~~MAAOe~~,EAAQC,GAAaC,EAAS,MAC/BC,~~EAAkChB~~,QAAAA,EAAe,IAA/~~CiB~~,GAAIC,GAAQF,EAAKG,EAAUP,EAAAI,EAA7B,CAAA,OAEN,OACEI,~~eACEC~~,EAACC,~~iBACCnB~~,MAAOA,EACPC,OAAQA,SAAAA,EACRC,~~aAAYkB~~,OAAAC,OAAAD,OAAAC,OAAA,CAAA,~~EACNX~~,GAAU,~~CAAEY~~,MAAM,~~IACnBpB~~,GAELC,WAAYA,~~EACZC~~,~~UAAWA~~,~~EACXG~~,~~QAAUgB,IACRhB,~~SAAAA,~~EAAUgB~~,~~GACVZ~~,~~EAAUY~~,EAAEC,~~gBAEd5B~~,IAAKA,gBACO,~~kCACRS~~,EAAiB,~~CAAAoB~~,~~SAEpBnB~~,~~GAAQY~~,~~EAACQ~~,EAAQ,CAAA,~~MAEpBR~~,~~EAACS~~,~~EAAMP~~,OAAAC,OAAA,CACLC,~~OAAQZ~~,~~EACRkB~~,~~SAAUlB~~,~~EACVmB~~,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,~~EACVpB~~,~~GAAEM~~,OAAAC,OAAA,~~CACAc~~,OAASC,GAAUA,EAAMD,OAAOE,OAAS,~~IACtCtB~~,IAEDC,YAEH,~~EAAGsB~~,~~qBACFpB~~,~~EAACqB~~,~~EAAiBnB~~,OAAAC,OAAA,~~CAACmB~~,YAAa,~~IAAM7B~~,EAAU,~~OAAWb~~,EAAsB,~~CAAA2B~~,SAC/EP,~~EAACuB~~,~~EAAIrB~~,OAAAC,OAAA,CAAA,~~EAAKiB~~,EAAqBvC,EAAS,~~CAAA0B~~,~~SACtCP~~,~~EAACwB~~,~~EAAkBtB~~,OAAAC,OAAA,CAAA,~~EAAKb~~,EAAI,~~CAAEZ~~,SAAK+C"}
1	+ {"version":3,"file":"NotificationCenterHeaderButton.js","sources":["../../../src/components/notification/NotificationCenterHeaderButton.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useState } from 'react';\nimport { HeaderButton, HeaderButtonProps } from '@/src/components/header/HeaderButton';\nimport { BellIcon } from '@/src/components/icon/stroke/BellIcon';\nimport { Fade, ClickAwayListener, ClickAwayListenerProps, Popper, PopperProps, FadeProps } from '@mui/material';\nimport { NotificationCenter, NotificationCenterProps } from './NotificationCenter';\n\nexport interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {\n /*\n Label for the tooltip or the text button\n /\n label?: HeaderButtonProps['label'];\n /\n Change icon button with tooltip into button\n /\n extend?: boolean;\n /\n Properties applied to tooltip\n /\n tooltipProps?: HeaderButtonProps['tooltipProps'];\n /\n Properties applied to badge\n /\n badgeProps?: HeaderButtonProps['badgeProps'];\n /\n Props applied to HeaderButton\n /\n headerButtonProps?: HeaderButtonProps;\n /\n Icon for the HeaderButton\n * @default BellIcon\n /\n icon?: ReactNode;\n /\n Props for the Popper component\n /\n popperProps?: PopperProps;\n /\n Props applied to ClickAwayListener\n /\n clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n /\n Props applied to Fade\n /\n fadeProps?: Omit<FadeProps, 'children'>;\n}\n\n/\n HeaderButton that opens NotificationCenter\n */\nexport const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps> = forwardRef(\n (\n {\n popperProps,\n clickAwayListenerProps,\n fadeProps,\n label = 'Notifications',\n extend,\n tooltipProps,\n badgeProps,\n headerButtonProps,\n icon,\n onClick,\n ...rest\n },\n ref,\n ) => {\n const [anchor, setAnchor] = useState(null);\n const { sx: popperSx, ...restPopper } = popperProps ?? {};\n\n return (\n <>\n <HeaderButton\n label={label}\n extend={extend ?? false}\n tooltipProps={{\n ...(anchor && { open: false }),\n ...tooltipProps,\n }}\n badgeProps={badgeProps}\n onClick={(e) => {\n onClick?.(e);\n setAnchor(e.currentTarget);\n }}\n ref={ref}\n data-testid=\"NotificationCenterHeaderButton\"\n {...headerButtonProps}\n >\n {icon \|\| <BellIcon />}\n </HeaderButton>\n <Popper\n open={!!anchor}\n anchorEl={anchor}\n placement=\"bottom-end\"\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [0, 18],\n },\n },\n ]}\n transition\n sx={{\n zIndex: (theme) => theme.zIndex.appBar + 10,\n ...popperSx,\n }}\n {...restPopper}\n >\n {({ TransitionProps }) => (\n <ClickAwayListener onClickAway={() => setAnchor(null)} {...clickAwayListenerProps}>\n <Fade {...TransitionProps} {...fadeProps}>\n <NotificationCenter {...rest} ref={undefined} />\n </Fade>\n </ClickAwayListener>\n )}\n </Popper>\n </>\n );\n },\n);\n"],"names":["NotificationCenterHeaderButton","forwardRef","_a","ref","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","headerButtonProps","icon","onClick","rest","__rest","anchor","setAnchor","useState","_b","sx","popperSx","restPopper","_jsxs","_Fragment","children","_jsx","HeaderButton","Object","assign","open","e","currentTarget","BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","Fade","NotificationCenter","undefined"],"mappings":"oYAiDO,MAAMA,EAA0EC,EACrF,CACEC,EAaAC,SAbAC,YACEA,EAAWC,uBACXA,EAAsBC,UACtBA,EAASC,MACTA,EAAQ,gBAAeC,OACvBA,EAAMC,aACNA,EAAYC,WACZA,EAAUC,kBACVA,EAAiBC,KACjBA,EAAIC,QACJA,GAAOX,EACJY,EAAIC,EAAAb,EAXT,CAAA,cAAA,yBAAA,YAAA,QAAA,SAAA,eAAA,aAAA,oBAAA,OAAA,YAeA,MAAOc,EAAQC,GAAaC,EAAS,MAC/BC,EAAkCf,QAAAA,EAAe,IAA/CgB,GAAIC,GAAQF,EAAKG,EAAUP,EAAAI,EAA7B,CAAA,OAEN,OACEI,EAAAC,EAAA,CAAAC,SAAA,CACEC,EAACC,EAAYC,OAAAC,OAAA,CACXtB,MAAOA,EACPC,OAAQA,SAAAA,EACRC,aAAYmB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACNb,GAAU,CAAEc,MAAM,IACnBrB,GAELC,WAAYA,EACZG,QAAUkB,IACRlB,SAAAA,EAAUkB,GACVd,EAAUc,EAAEC,gBAEd7B,IAAKA,gBACO,kCACRQ,EAAiB,CAAAc,SAEpBb,GAAQc,EAACO,EAAQ,CAAA,MAEpBP,EAACQ,EAAMN,OAAAC,OAAA,CACLC,OAAQd,EACRmB,SAAUnB,EACVoB,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,EACVrB,GAAEQ,OAAAC,OAAA,CACAa,OAASC,GAAUA,EAAMD,OAAOE,OAAS,IACtCvB,IAEDC,YAEH,EAAGuB,qBACFnB,EAACoB,EAAiBlB,OAAAC,OAAA,CAACkB,YAAa,IAAM9B,EAAU,OAAWZ,EAAsB,CAAAoB,SAC/EC,EAACsB,EAAIpB,OAAAC,OAAA,CAAA,EAAKgB,EAAqBvC,EAAS,CAAAmB,SACtCC,EAACuB,EAAkBrB,OAAAC,OAAA,CAAA,EAAKf,EAAI,CAAEX,SAAK+C"}

package/components/pageLayout/PageLayout.js CHANGED Viewed

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

package/components/pageLayout/PageLayout.js.map CHANGED Viewed

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

package/components/passwordField/PasswordField.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TextFieldProps, IconButtonProps } from '@mui/material';
+export interface PasswordFieldProps extends Omit<TextFieldProps, 'type'> {
+    /**
+     * Tell browser how it should behave to password field
+     * @default new-password
+     */
+    autoComplete?: 'new-password' | 'current-password' | string;
+    /**
+     * Properties provided to button toggling visibility. Can be used to change aria-label.
+     */
+    iconButtonProps?: IconButtonProps;
+    /**
+     * Optional flag if password is visible
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * Optional function to toggle visibility
+     */
+    setVisible?: (visible: boolean) => void;
+}
+/**
+ * TextField adding extra logic to toggle into the password field via show/hide IconButton
+ */
+export declare const PasswordField: React.FC<PasswordFieldProps>;

package/components/passwordField/PasswordField.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__rest as o}from"tslib";import{jsx as t}from"react/jsx-runtime";import{forwardRef as i,useState as s}from"react";import{TextField as r,InputAdornment as e,IconButton as n}from"@mui/material";import{HideIcon as l}from"../icon/stroke/HideIcon.js";import{ShowIcon as p}from"../icon/stroke/ShowIcon.js";const c=i((i,c)=>{var{slotProps:m,iconButtonProps:a,visible:b,setVisible:u}=i,d=o(i,["slotProps","iconButtonProps","visible","setVisible"]);const f=m\|\|{},{input:j}=f,g=o(f,["input"]),[P,v]=s(!1),w=null!=b?b:P,O=null!=u?u:v;return t(r,Object.assign({ref:c,type:w?"text":"password",autoComplete:"new-password",slotProps:Object.assign({input:Object.assign({endAdornment:t(e,{position:"end",children:t(n,Object.assign({onClick:()=>O(!w),"aria-label":"Toggle visibility"},a,{children:t(w?l:p,{})}))})},j)},g)},d))});export{c as PasswordField};
2	+ //# sourceMappingURL=PasswordField.js.map

package/components/passwordField/PasswordField.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PasswordField.js","sources":["../../../src/components/passwordField/PasswordField.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react';\nimport { IconButton, InputAdornment, TextField, TextFieldProps, IconButtonProps } from '@mui/material';\nimport { HideIcon } from '@/src/components/icon/stroke/HideIcon';\nimport { ShowIcon } from '@/src/components/icon/stroke/ShowIcon';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type'> {\n /**\n * Tell browser how it should behave to password field\n * @default new-password\n */\n autoComplete?: 'new-password' | 'current-password' | string;\n /**\n * Properties provided to button toggling visibility. Can be used to change aria-label.\n */\n iconButtonProps?: IconButtonProps;\n /**\n * Optional flag if password is visible\n * @default false\n */\n visible?: boolean;\n /**\n * Optional function to toggle visibility\n */\n setVisible?: (visible: boolean) => void;\n}\n\n/**\n * TextField adding extra logic to toggle into the password field via show/hide IconButton\n */\nexport const PasswordField: React.FC<PasswordFieldProps> = forwardRef(\n ({ slotProps, iconButtonProps, visible: propsVisible, setVisible: setPropsVisible, ...rest }, ref) => {\n const { input: inputSlotProps, ...restSlotProps } = slotProps || {};\n const [rawVisible, setRawVisible] = useState<boolean>(false);\n const visible = propsVisible ?? rawVisible;\n const setVisible = setPropsVisible ?? setRawVisible;\n\n return (\n <TextField\n ref={ref}\n type={visible ? 'text' : 'password'}\n autoComplete=\"new-password\"\n slotProps={{\n input: {\n endAdornment: (\n <InputAdornment position=\"end\">\n <IconButton onClick={() => setVisible(!visible)} aria-label=\"Toggle visibility\" {...iconButtonProps}>\n {visible ? <HideIcon /> : <ShowIcon />}\n </IconButton>\n </InputAdornment>\n ),\n ...inputSlotProps,\n },\n ...restSlotProps,\n }}\n {...rest}\n />\n );\n },\n);\n"],"names":["PasswordField","forwardRef","_a","ref","slotProps","iconButtonProps","visible","propsVisible","setVisible","setPropsVisible","rest","__rest","_b","input","inputSlotProps","restSlotProps","rawVisible","setRawVisible","useState","_jsx","TextField","Object","assign","type","autoComplete","endAdornment","InputAdornment","position","IconButton","onClick","HideIcon","ShowIcon"],"mappings":"kTA6BO,MAAMA,EAA8CC,EACzD,CAACC,EAA6FC,KAA7F,IAAAC,UAAEA,EAASC,gBAAEA,EAAiBC,QAASC,EAAcC,WAAYC,GAAeP,EAAKQ,EAAIC,EAAAT,EAAzF,wDACC,MAAMU,EAA8CR,GAAa,IAAzDS,MAAOC,KAAmBC,EAAaJ,EAAAC,EAAzC,CAAA,WACCI,EAAYC,GAAiBC,GAAkB,GAChDZ,EAAUC,QAAAA,EAAgBS,EAC1BR,EAAaC,QAAAA,EAAmBQ,EAEtC,OACEE,EAACC,EAASC,OAAAC,OAAA,CACRnB,IAAKA,EACLoB,KAAMjB,EAAU,OAAS,WACzBkB,aAAa,eACbpB,UAASiB,OAAAC,OAAA,CACPT,MAAKQ,OAAAC,OAAA,CACHG,aACEN,EAACO,EAAc,CAACC,SAAS,eACvBR,EAACS,EAAUP,OAAAC,OAAA,CAACO,QAAS,IAAMrB,GAAYF,GAAQ,aAAa,qBAAwBD,YACvEc,EAAVb,EAAWwB,EAAeC,EAAP,CAAA,SAIvBjB,IAEFC,IAEDL"}

package/components/passwordField/index.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export * from './~~passwordField~~';
1	+ export * from './PasswordField';

package/components/playPauseButton/PlayPauseButton.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { ElementType } from 'react';
+import React, { ComponentType, ElementType } from 'react';
 import { BoxProps, IconButtonProps, SvgIconProps } from '@mui/material';
 import { SpinnerProps } from '@/src/components/progress/Spinner';
 export interface PlayPauseButtonProps extends BoxProps<ElementType> {
@@ -30,7 +30,7 @@ export interface PlayPauseButtonProps extends BoxProps<ElementType> {
     /**
      * Custom component to be used for PauseIcon
      */
-    PauseIconComponent?: ElementType<SvgIconProps>;
+    PauseIconComponent?: ComponentType<SvgIconProps>;
     /**
      * Properties applied to Play Icon component
      */
@@ -38,7 +38,7 @@ export interface PlayPauseButtonProps extends BoxProps<ElementType> {
     /**
      * Custom component to be used for PlayIcon
      */
-    PlayIconComponent?: ElementType<SvgIconProps>;
+    PlayIconComponent?: ComponentType<SvgIconProps>;
 }
 export interface VideoPlayPauseIndicatorProps extends PlayPauseButtonProps {
 }
@@ -46,7 +46,3 @@ export interface VideoPlayPauseIndicatorProps extends PlayPauseButtonProps {
  * A component that displays a circular progress indicator with a play/pause button.
  */
 export declare const PlayPauseButton: React.FC<PlayPauseButtonProps>;
-/**
- * @deprecated renamed to <PlayPauseButton />
- */
-export declare const VideoPlayPauseIndicator: React.FC<VideoPlayPauseIndicatorProps>;

package/components/playPauseButton/PlayPauseButton.js CHANGED Viewed

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

package/components/playPauseButton/PlayPauseButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlayPauseButton.js","sources":["../../../src/components/playPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, { ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\nimport { ControlsPlayIcon } from '@/src/components/icon/stroke/ControlsPlayIcon';\nimport { ControlsPauseIcon } from '@/src/components/icon/stroke/ControlsPauseIcon';\n\nexport interface PlayPauseButtonProps extends BoxProps<ElementType> {\n /*\n Boolean to indicate if the media is currently playing\n /\n isPlaying: boolean;\n /\n Callback function to handle play/pause button click events.\n /\n onClick: BoxProps<ElementType>['onClick'];\n /\n The progress value for the CircularProgress component.\n * Should be a number between 0 and 100.\n /\n progress?: number;\n /\n Properties applied to Spinner progress\n /\n progressProps?: Omit<SpinnerProps, 'value'>;\n /\n Properties applied to IconButton\n /\n iconButtonProps?: Partial<IconButtonProps>;\n /\n Properties applied to Pause Icon component\n /\n pauseIconProps?: SvgIconProps;\n /\n Custom component to be used for PauseIcon\n /\n PauseIconComponent?: ~~ElementType~~<SvgIconProps>;\n /\n Properties applied to Play Icon component\n /\n playIconProps?: SvgIconProps;\n /\n Custom component to be used for PlayIcon\n /\n PlayIconComponent?: ~~ElementType~~<SvgIconProps>;\n}\nexport interface VideoPlayPauseIndicatorProps extends PlayPauseButtonProps {}\n\n/\n A component that displays a circular progress indicator with a play/pause button.\n /\nexport const PlayPauseButton: React.FC<PlayPauseButtonProps> = forwardRef(\n (\n {\n progress = 0,\n isPlaying,\n onClick,\n progressProps,\n iconButtonProps,\n pauseIconProps,\n PauseIconComponent,\n playIconProps,\n PlayIconComponent,\n children,\n sx,\n ...rest\n },\n ref,\n ) => {\n const { sx: progressSx, ...restProgress } = progressProps \|\| {};\n const { sx: iconButtonSx, ...restIconButton } = iconButtonProps \|\| {};\n const PauseIcon = PauseIconComponent \|\| ControlsPauseIcon;\n const PlayIcon = PlayIconComponent \|\| ControlsPlayIcon;\n\n return (\n <Box\n data-testid=\"PlayPauseIndicator\"\n sx={{\n display: 'inline-flex',\n position: 'relative',\n zIndex: '150',\n width: '44px',\n height: '44px',\n ...sx,\n }}\n ref={ref}\n {...rest}\n >\n <Spinner\n value={progress}\n size={44}\n thickness={6}\n sx={{\n position: 'absolute',\n inset: '0',\n zIndex: '20',\n // start from 12'clock instead of 3'\n transform: 'rotate(-90deg)',\n // recolor\n '& .FlowSpinner-circle-primary': {\n stroke: (theme) => theme.palette.brand.secondary,\n },\n '& .FlowSpinner-circle-secondary': {\n stroke: (theme) => theme.palette.common.white,\n // main line is thicker than second one\n strokeWidth: '4px',\n },\n ...progressSx,\n }}\n {...restProgress}\n />\n <IconButton\n data-testid=\"IndicatorIconButton\"\n onClick={onClick}\n color=\"white\"\n size=\"medium\"\n sx={{ position: 'absolute', inset: '0', zIndex: '30', ...iconButtonSx }}\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n {...restIconButton}\n >\n {isPlaying ? (\n <PauseIcon data-testid=\"IndicatorPauseIcon\" {...pauseIconProps} />\n ) : (\n <PlayIcon data-testid=\"IndicatorPlayIcon\" {...playIconProps} />\n )}\n </IconButton>\n </Box>\n );\n },\n);\n\n/\n @deprecated renamed to <PlayPauseButton />\n */\nexport const VideoPlayPauseIndicator: React.FC<VideoPlayPauseIndicatorProps> = forwardRef((props, ref) => {\n return <PlayPauseButton ref={ref} {...props} />;\n});\n"],"names":["PlayPauseButton","forwardRef","_a","ref","progress","isPlaying","onClick","progressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx","rest","__rest","_b","progressSx","restProgress","_c","iconButtonSx","restIconButton","PauseIcon","ControlsPauseIcon","PlayIcon","ControlsPlayIcon","_jsxs","Box","Object","assign","display","position","zIndex","width","height","_jsx","Spinner","value","size","thickness","inset","transform","stroke","theme","palette","brand","secondary","common","white","strokeWidth","IconButton","color"~~,"VideoPlayPauseIndicator","props"~~],"mappings":"uWAkDO,MAAMA,EAAkDC,EAC7D,CACEC,EAcAC,KAdA,IAAAC,SACEA,EAAW,EAACC,UACZA,EAASC,QACTA,EAAOC,cACPA,EAAaC,gBACbA,EAAeC,eACfA,EAAcC,mBACdA,EAAkBC,cAClBA,EAAaC,kBACbA,EAAiBC,SACjBA,EAAQC,GACRA,GAAEZ,EACCa,EAAIC,EAAAd,EAZT,CAAA,WAAA,YAAA,UAAA,gBAAA,kBAAA,iBAAA,qBAAA,gBAAA,oBAAA,WAAA,OAgBA,MAAMe,EAAsCV,GAAiB,IAArDO,GAAII,KAAeC,EAAYH,EAAAC,EAAjC,CAAA,OACAG,EAA0CZ,GAAmB,IAA3DM,GAAIO,KAAiBC,EAAcN,EAAAI,EAArC,CAAA,OACAG,EAAYb,GAAsBc,EAClCC,EAAWb,GAAqBc,EAEtC,OACEC,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,qBACZhB,GAAEe,OAAAC,OAAA,CACAC,QAAS,cACTC,SAAU,WACVC,OAAQ,MACRC,MAAO,OACPC,OAAQ,QACLrB,GAELX,IAAKA,GACDY,EAAI,CAAAF,SAAA,CAERuB,EAACC,EAAOR,OAAAC,OAAA,CACNQ,MAAOlC,EACPmC,KAAM,GACNC,UAAW,EACX1B,GAAEe,OAAAC,OAAA,CACAE,SAAU,WACVS,MAAO,IACPR,OAAQ,KAERS,UAAW,iBAEX,gCAAiC,CAC/BC,OAASC,GAAUA,EAAMC,QAAQC,MAAMC,WAEzC,kCAAmC,CACjCJ,OAASC,GAAUA,EAAMC,QAAQG,OAAOC,MAExCC,YAAa,QAEZhC,IAEDC,IAENiB,EAACe,EAAUtB,OAAAC,OAAA,CAAA,cACG,sBACZxB,QAASA,EACT8C,MAAM,QACNb,KAAK,SACLzB,GAAEe,OAAAC,OAAA,CAAIE,SAAU,WAAYS,MAAO,IAAKR,OAAQ,MAASZ,GAAY,aACzDhB,EAAY,cAAgB,cACpCiB,EAAc,CAAAT,SAEjBR,EACC+B,EAACb,EAASM,OAAAC,OAAA,CAAA,cAAa,sBAAyBrB,IAEhD2B,EAACX,EAAQI,OAAAC,OAAA,CAAA,cAAa,qBAAwBnB~~,aAW7C0C,EAAkEpD,EAAW,CAACqD,EAAOnD,IACzFiC,EAACpC,EAAe6B,OAAAC,OAAA,CAAC3B,IAAKA,GAASmD~~"}
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}\nexport interface VideoPlayPauseIndicatorProps extends PlayPauseButtonProps {}\n\n/\n A component that displays a circular progress indicator with a play/pause button.\n */\nexport const PlayPauseButton: React.FC<PlayPauseButtonProps> = forwardRef(\n (\n {\n progress = 0,\n isPlaying,\n onClick,\n progressProps,\n iconButtonProps,\n pauseIconProps,\n PauseIconComponent,\n playIconProps,\n PlayIconComponent,\n children,\n sx,\n ...rest\n },\n ref,\n ) => {\n const { sx: progressSx, ...restProgress } = progressProps \|\| {};\n const { sx: iconButtonSx, ...restIconButton } = iconButtonProps \|\| {};\n const PauseIcon = PauseIconComponent \|\| ControlsPauseIcon;\n const PlayIcon = PlayIconComponent \|\| ControlsPlayIcon;\n\n return (\n <Box\n data-testid=\"PlayPauseIndicator\"\n sx={{\n display: 'inline-flex',\n position: 'relative',\n zIndex: '150',\n width: '44px',\n height: '44px',\n ...sx,\n }}\n ref={ref}\n {...rest}\n >\n <Spinner\n value={progress}\n size={44}\n thickness={6}\n sx={{\n position: 'absolute',\n inset: '0',\n zIndex: '20',\n // start from 12'clock instead of 3'\n transform: 'rotate(-90deg)',\n // recolor\n '& .FlowSpinner-circle-primary': {\n stroke: (theme) => theme.palette.brand.secondary,\n },\n '& .FlowSpinner-circle-secondary': {\n stroke: (theme) => theme.palette.common.white,\n // main line is thicker than second one\n strokeWidth: '4px',\n },\n ...progressSx,\n }}\n {...restProgress}\n />\n <IconButton\n data-testid=\"IndicatorIconButton\"\n onClick={onClick}\n color=\"white\"\n size=\"medium\"\n sx={{ position: 'absolute', inset: '0', zIndex: '30', ...iconButtonSx }}\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n {...restIconButton}\n >\n {isPlaying ? (\n <PauseIcon data-testid=\"IndicatorPauseIcon\" {...pauseIconProps} />\n ) : (\n <PlayIcon data-testid=\"IndicatorPlayIcon\" {...playIconProps} />\n )}\n </IconButton>\n </Box>\n );\n },\n);\n"],"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":"uWAkDO,MAAMA,EAAkDC,EAC7D,CACEC,EAcAC,KAdA,IAAAC,SACEA,EAAW,EAACC,UACZA,EAASC,QACTA,EAAOC,cACPA,EAAaC,gBACbA,EAAeC,eACfA,EAAcC,mBACdA,EAAkBC,cAClBA,EAAaC,kBACbA,EAAiBC,SACjBA,EAAQC,GACRA,GAAEZ,EACCa,EAAIC,EAAAd,EAZT,CAAA,WAAA,YAAA,UAAA,gBAAA,kBAAA,iBAAA,qBAAA,gBAAA,oBAAA,WAAA,OAgBA,MAAMe,EAAsCV,GAAiB,IAArDO,GAAII,KAAeC,EAAYH,EAAAC,EAAjC,CAAA,OACAG,EAA0CZ,GAAmB,IAA3DM,GAAIO,KAAiBC,EAAcN,EAAAI,EAArC,CAAA,OACAG,EAAYb,GAAsBc,EAClCC,EAAWb,GAAqBc,EAEtC,OACEC,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,qBACZhB,GAAEe,OAAAC,OAAA,CACAC,QAAS,cACTC,SAAU,WACVC,OAAQ,MACRC,MAAO,OACPC,OAAQ,QACLrB,GAELX,IAAKA,GACDY,EAAI,CAAAF,SAAA,CAERuB,EAACC,EAAOR,OAAAC,OAAA,CACNQ,MAAOlC,EACPmC,KAAM,GACNC,UAAW,EACX1B,GAAEe,OAAAC,OAAA,CACAE,SAAU,WACVS,MAAO,IACPR,OAAQ,KAERS,UAAW,iBAEX,gCAAiC,CAC/BC,OAASC,GAAUA,EAAMC,QAAQC,MAAMC,WAEzC,kCAAmC,CACjCJ,OAASC,GAAUA,EAAMC,QAAQG,OAAOC,MAExCC,YAAa,QAEZhC,IAEDC,IAENiB,EAACe,EAAUtB,OAAAC,OAAA,CAAA,cACG,sBACZxB,QAASA,EACT8C,MAAM,QACNb,KAAK,SACLzB,GAAEe,OAAAC,OAAA,CAAIE,SAAU,WAAYS,MAAO,IAAKR,OAAQ,MAASZ,GAAY,aACzDhB,EAAY,cAAgB,cACpCiB,EAAc,CAAAT,SAEjBR,EACC+B,EAACb,EAASM,OAAAC,OAAA,CAAA,cAAa,sBAAyBrB,IAEhD2B,EAACX,EAAQI,OAAAC,OAAA,CAAA,cAAa,qBAAwBnB"}

package/components/progress/Loader.d.ts CHANGED Viewed

@@ -22,14 +22,6 @@ export interface LoaderProps extends BoxProps<ElementType> {
      * Properties applied to LoaderText
      */
     loadingTextProps?: LoadingTextProps;
-    /**
-     * @deprecated rename to size, change large to medium
-     */
-    loaderSize?: 'small' | 'large';
-    /**
-     * @deprecated remove, no longer has any effect
-     */
-    barWrapperProps?: BoxProps<ElementType>;
 }
 /**
  * Wrapper of LinearProgress, automatically selecting the appropriate variant and appending LoaderText

package/components/progress/Loader.js CHANGED Viewed

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

package/components/progress/Loader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Loader.js","sources":["../../../src/components/progress/Loader.tsx"],"sourcesContent":["import React, { ~~useMemo,~~ ElementType, forwardRef, ReactNode } from 'react';\nimport { Box, BoxProps, LinearProgress, LinearProgressProps } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\n\nexport interface LoaderProps extends BoxProps<ElementType> {\n /*\n Value of progress\n /\n value?: number;\n /\n Affects component size\n /\n size?: LinearProgressProps['size'] \| number;\n /\n Additional label before LoaderText\n /\n label?: ReactNode;\n /\n Optional custom bar props.\n /\n barProps?: LinearProgressProps;\n /\n Properties applied to LoaderText\n /\n loadingTextProps?: LoadingTextProps;\n /\n @deprecated rename to size, change large to medium\n /\n loaderSize?: 'small' \| 'large';\n /\n @deprecated remove, no longer has any effect\n /\n barWrapperProps?: BoxProps<ElementType>;\n}\n\n/\n Wrapper of LinearProgress, automatically selecting the appropriate variant and appending LoaderText\n */\nexport const Loader: React.FC<LoaderProps> = forwardRef(\n ({ className, value, size, ~~loaderSize,~~ barProps, label, loadingTextProps, ~~barWrapperProps: _,~~ ...rest }, ref) => {\n const { sx: barSx, ...restBar } = barProps ?? {};\n ~~const mappedSize = useMemo(~~\n ~~() => size \|\| { small: 'small', large: 'medium' }[loaderSize ?? 'large'],\n [size, loaderSize],\n~~ ~~);\n\n~~ return (\n <Box\n data-testid=\"Loader\"\n className={['FlowLoader-root', className].filter(Boolean).join(', ')}\n ref={ref}\n {...rest}\n >\n {value !== undefined && (\n <LoadingText data-testid=\"Loader.percentage\" value={value} label={label} {...loadingTextProps} />\n )}\n <LinearProgress\n value={value}\n sx={{\n ...(typeof size === 'number' && { height: `${size}px` }),\n ...barSx,\n }}\n {...(typeof size !== 'number' && { size: ~~mappedSize as LinearProgressProps['~~size'] })}\n {...(value !== undefined && {\n variant: 'determinate',\n ['aria-valuenow']: value,\n ['aria-valuemin']: 0,\n ['aria-valuemax']: 100,\n })}\n {...restBar}\n />\n </Box>\n );\n },\n);\n"],"names":["Loader","forwardRef","_a","ref","className","value","size","~~loaderSize","~~barProps","label","loadingTextProps","~~barWrapperProps","_","~~rest","__rest","_b","sx","barSx","restBar","~~mappedSize","useMemo","small","large","~~_jsxs","Box","Object","assign","filter","Boolean","join","children","undefined","_jsx","LoadingText","LinearProgress","height","variant"],"mappings":"~~wOAsCO~~,MAAMA,EAAgCC,EAC3C,CAACC,~~EAAwGC~~,~~SAAxGC~~,UAAEA,EAASC,MAAEA,EAAKC,KAAEA,EAAIC,~~WAAEA,EAAUC,~~SAAEA,EAAQC,MAAEA,EAAKC,iBAAEA,~~EAAkBC~~,~~gBAAiBC~~,~~KAAMC,~~EAAIC,~~EAAAZ~~,~~EAApG~~,~~CAAA~~,~~YAAA~~,~~QAAA~~,~~OAAA,aAAA,WAAA,QAAA,mBAAA,oBACC,MAAMa,EAA4BP,~~QAAAA,EAAY,~~IAAtCQ~~,GAAIC,GAAKF,EAAKG,EAAOJ,EAAAC,EAAvB,CAAA,~~OACAI~~,~~EAAaC~~,~~EACjB,IAAMd,GAAQ,CAAEe,MAAO,QAASC,MAAO,UAAWf,QAAAA,EAAc,SAChE,CAACD,EAAMC,IAGT,OACEgB,~~EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,~~SACZtB~~,UAAW,CAAC,kBAAmBA,~~GAAWuB~~,OAAOC,SAASC,KAAK,~~MAC~~/~~D1B~~,IAAKA,~~GACDU~~,EAAI,~~CAAAiB~~,SAAA,MAEGC,~~IAAV1B~~,~~GACC2B~~,EAACC,+BAAwB,~~oBAAoB5B~~,MAAOA,~~EAAOI~~,MAAOA,GAAWC,IAE/~~EsB~~,EAACE,EAAcT,OAAAC,OAAA,~~CACbrB~~,MAAOA,~~EACPW~~,~~GAAES~~,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACoB,~~iBAATpB~~,GAAqB,~~CAAE6B~~,OAAQ,~~GAAG7B~~,~~QAC1CW~~,IAEgB,~~iBAATX~~,GAAqB,CAAEA,~~KAAMa~~,~~QAC1BY~~,~~IAAV1B~~,GAAuB,~~CAC1B+B~~,QAAS,cACT,~~gBAAmB/B~~,EACnB,gBAAmB,EACnB,gBAAmB,~~KAEjBa~~"}
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"}

package/components/progress/Progress.d.ts CHANGED Viewed

@@ -7,14 +7,6 @@ export interface ProgressBaseProps {
      * @default spinner
      */
     variant?: 'spinner' | 'loader';
-    /**
-     * @deprecated, rename to value
-     */
-    loadingPercentage?: number;
-    /**
-     * @deprecated, rename to label
-     */
-    loadingPercentageDescribeText?: string;
 }
 export interface ProgressLoaderProps extends ProgressBaseProps, LoaderProps {
     variant: 'loader';
@@ -24,7 +16,3 @@ export interface ProgressSpinnerProps extends ProgressBaseProps, SpinnerProps {
 }
 export type ProgressProps = ProgressLoaderProps | ProgressSpinnerProps;
 export declare const Progress: React.FC<ProgressProps>;
-/**
- * @deprecated Use <Progress /> instead
- */
-export declare const ProgressBar: React.FC<ProgressProps>;

package/components/progress/Progress.js CHANGED Viewed

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

package/components/progress/Progress.js.map CHANGED Viewed

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

package/components/progress/ProgressState.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { ElementType, ReactNode } from 'react';
+import React, { ElementType, ReactNode, ComponentType } from 'react';
 import { BoxProps, SvgIconProps } from '@mui/material';
 import { LoadingTextProps } from './LoadingText';
 export interface ProgressStateProps extends BoxProps<ElementType> {
@@ -34,7 +34,7 @@ export interface ProgressStateProps extends BoxProps<ElementType> {
     /**
      * Overwrites state icon
      */
-    IconComponent?: ElementType<SvgIconProps>;
+    IconComponent?: ComponentType<SvgIconProps>;
     /**
      * Properties applied to wrapper of icon
      */

package/components/progress/ProgressState.js.map CHANGED Viewed

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

package/components/progress/Spinner.d.ts CHANGED Viewed

@@ -46,18 +46,6 @@ export interface SpinnerProps extends BoxProps<ElementType> {
      * Properties applied to LoadingText
      */
     loadingTextProps?: LoadingTextProps;
-    /**
-     * @deprecated use loadingTextProps instead
-     */
-    labelProps?: BoxProps<ElementType>;
-    /**
-     * @deprecated rename to loadingTextProps
-     */
-    textBoxProps?: BoxProps<ElementType>;
-    /**
-     * @deprecated no longer has any effect
-     */
-    spinnerControlledAnimation?: 'controlled' | 'infinite';
 }
 /**
  * A styled loader component that displays animated svg circle

package/components/progress/Spinner.js CHANGED Viewed

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