@skodaflow/web-library 8.1.0 → 8.3.0

package/cjs/components/notification/Notification.js.map

@@ -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   * 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","sx","headline","titleProps","titleWrapperProps","descriptionProps","descriptionWrapperProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children","rest","ref","wrapperSx","restWrapper","headerSx","restHeader","buttonsSx","restButtons","descriptionSx","restDescription","titleSx","restTitle","closeIconButtonSx","restCloseIconButton","iconSx","restIcon","_jsxs","Box","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":"sKA6FO,MAAMA,EAAsCC,EAAAA,WACjD,EAEIC,KACAC,WACAC,aACAC,oBACAC,mBACAC,0BACAC,eACAC,QACAC,QACAC,cACAC,OACAC,YACAC,SACAC,UACAC,eACAC,cACAC,YACAC,uBACAC,iBACAC,cACGC,GAELC,KAEA,MAAQrB,GAAIsB,KAAcC,GAAgBjB,GAAgB,CAAA,GAClDN,GAAIwB,KAAaC,GAAehB,GAAe,CAAA,GAC/CT,GAAI0B,KAAcC,GAAgBb,GAAgB,CAAA,GAClDd,GAAI4B,KAAkBC,GAAoBzB,GAAoB,CAAA,GAC9DJ,GAAI8B,KAAYC,GAAc7B,GAAc,CAAA,GAC5CF,GAAIgC,KAAsBC,GAAwBhB,GAAwB,CAAA,GAE1EjB,GAAIkC,KAAWC,GAAaxB,GAAa,CAAA,EACjD,OACEyB,EAAAA,KAACC,EAAAA,IAAG,CACFhB,IAAKA,EACLrB,GAAI,CACFsC,gBAA2B,SAAV/B,EAAmB,kBAAoB,qBACxDgC,QAAS,iBACTC,QAAS,OACTC,cAAe,MACfC,IAAK,EACLC,SAAU,cACP3C,GACJ,cACW,kBACRoB,EAAID,SAAA,CAEPT,GACCkC,EAAAA,IAACP,MAAG,CACFrC,GAAI,CACFwC,QAAS,OACTK,eAAgB,SAChBC,WAAY,SACZC,aAAc,MACdC,MAAO,CAAEC,GAAI,OAAQC,GAAI,QACzBC,OAAQ,CAAEF,GAAI,OAAQC,GAAI,QAC1BZ,gBAAiB,uBACjBc,WAAY,IACZC,SAAU,SACV,QAAS,CAAEL,MAAO,OAAQG,OAAQ,OAAQG,UAAW,SACrD,qBAAsB,CACpBN,MAAO,CAAEC,GAAI,OAAQC,GAAI,QACzBC,OAAQ,CAAEF,GAAI,OAAQC,GAAI,YAEzBhB,GACJ,cACW,uBACRC,EAAQhB,SAEXT,IAGL0B,EAAAA,KAACC,EAAAA,IAAG,CACFrC,GAAI,CACFgD,MAAO,OACPO,SAAU,OACVF,SAAU,SACVb,QAAS,OACTE,IAAK,MACLD,cAAe,SAEfF,QAAS,MAET,gCAAiC,CAC/BiB,QAAS,QAERlC,MAEDC,EAAWJ,SAAA,CAEfiB,EAAAA,KAACC,EAAAA,IAAG,CACFrC,GAAI,CAAEwC,QAAS,OAAQM,WAAY,SAAUD,eAAgB,aAAcH,IAAK,KAAMlB,MAClFC,EAAUN,SAAA,CAEbX,GAASoC,EAAAA,IAACa,EAAAA,MAAK,CAACC,KAAK,YAAYC,QAAQ,YAE1Cf,MAACgB,EAAAA,WAAU,CACTD,QAAQ,cACR3D,GAAI,CACF6D,WAAY,SACZR,SAAU,SACVS,aAAc,WACdC,SAAU,IACVC,SAAU,OACPlC,GACJ,cACW,2BACRC,EAASZ,SAEZlB,IAEFe,GACC4B,MAACqB,EAAAA,WAAU,CAAA,aACE,uBACXC,QAASlD,EACTmD,KAAK,QACLC,UAAU,uBACVpE,GAAI,CACFuC,QAAS,MAETiB,QAAS,CAAEP,GAAI,IAAKC,GAAI,KAExB,qBAAsB,CACpBM,QAAS,QAERxB,GACJ,cACW,0BACRC,EAAmBd,SAEvByB,EAAAA,IAACyB,EAAAA,UAAS,CAACC,SAAS,QAAQF,UAAU,UAAUG,KAAK,WAAYrD,SAIvE0B,EAAAA,IAACP,EAAAA,IAAG,CAAA,cAAa,8BAA+BhC,WACzB,iBAAbc,EACNyB,EAAAA,IAACgB,EAAAA,WAAU,CACT5D,GAAI,CACFqD,SAAU,SACVS,aAAc,WACdtB,QAAS,cACTgC,gBAAiB,IACjBC,gBAAiB,cACd7C,GAEL+B,QAAQ,iBACJ9B,EAAeV,SAElBA,QAMNP,GACCgC,EAAAA,IAACgB,EAAAA,WAAU,CACTD,QAAQ,cACRpD,MAAO,kBAAiB,cACZ,yBACRQ,WAEHH,IAGJC,GACC+B,EAAAA,IAAC8B,QAAK,CACJC,UAAU,MACV3E,GAAI,CAAE4E,GAAI,OAAQlD,GAClBmD,QAAS,gBACG,0BACRlD,EAAWR,SAEdN"}
+{"version":3,"file":"Notification.js","sources":["../../../../../src/components/notification/Notification.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef } from 'react';\nimport { Box, BoxProps, Typography, TypographyProps, IconButton, IconButtonProps, IconProps } from '@mui/material';\nimport { Label } from '@/src/components/label/Label';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\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?: BoxProps<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={sxOverride(\n          {\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          },\n          sx,\n        )}\n        data-testid=\"Notification\"\n        {...rest}\n      >\n        {icon && (\n          <Box\n            sx={sxOverride(\n              {\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              },\n              iconSx,\n            )}\n            data-testid=\"Notification.icon\"\n            {...restIcon}\n          >\n            {icon}\n          </Box>\n        )}\n        <Box\n          sx={sxOverride(\n            {\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            },\n            wrapperSx,\n          )}\n          {...restWrapper}\n        >\n          <Box\n            sx={sxOverride({ 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={sxOverride(\n                {\n                  whiteSpace: 'nowrap',\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  flexGrow: '1',\n                  minWidth: '0',\n                },\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={sxOverride(\n                  {\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                  },\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={sxOverride(\n                  {\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    display: '-webkit-box',\n                    WebkitLineClamp: '2',\n                    WebkitBoxOrient: 'vertical',\n                  },\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            <Box\n              sx={sxOverride(\n                {\n                  mt: 1.5,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'flex-start',\n                  flexDirection: 'row',\n                  gap: 1,\n                },\n                buttonsSx,\n              )}\n              data-testid=\"Notification.buttons\"\n              {...restButtons}\n            >\n              {buttons}\n            </Box>\n          )}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["Notification","forwardRef","sx","headline","titleProps","titleWrapperProps","descriptionProps","descriptionWrapperProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children","rest","ref","wrapperSx","restWrapper","headerSx","restHeader","buttonsSx","restButtons","descriptionSx","restDescription","titleSx","restTitle","closeIconButtonSx","restCloseIconButton","iconSx","restIcon","_jsxs","Box","sxOverride","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","mt"],"mappings":"wNAoFO,MAAMA,EAAsCC,EAAAA,WACjD,EAEIC,KACAC,WACAC,aACAC,oBACAC,mBACAC,0BACAC,eACAC,QACAC,QACAC,cACAC,OACAC,YACAC,SACAC,UACAC,eACAC,cACAC,YACAC,uBACAC,iBACAC,cACGC,GAELC,KAEA,MAAQrB,GAAIsB,KAAcC,GAAgBjB,GAAgB,CAAA,GAClDN,GAAIwB,KAAaC,GAAehB,GAAe,CAAA,GAC/CT,GAAI0B,KAAcC,GAAgBb,GAAgB,CAAA,GAClDd,GAAI4B,KAAkBC,GAAoBzB,GAAoB,CAAA,GAC9DJ,GAAI8B,KAAYC,GAAc7B,GAAc,CAAA,GAC5CF,GAAIgC,KAAsBC,GAAwBhB,GAAwB,CAAA,GAE1EjB,GAAIkC,KAAWC,GAAaxB,GAAa,CAAA,EACjD,OACEyB,EAAAA,KAACC,EAAAA,IAAG,CACFhB,IAAKA,EACLrB,GAAIsC,aACF,CACEC,gBAA2B,SAAVhC,EAAmB,kBAAoB,qBACxDiC,QAAS,iBACTC,QAAS,OACTC,cAAe,MACfC,IAAK,EACLC,SAAU,YAEZ5C,GACD,cACW,kBACRoB,EAAID,SAAA,CAEPT,GACCmC,EAAAA,IAACR,EAAAA,IAAG,CACFrC,GAAIsC,EAAAA,WACF,CACEG,QAAS,OACTK,eAAgB,SAChBC,WAAY,SACZC,aAAc,MACdC,MAAO,CAAEC,GAAI,OAAQC,GAAI,QACzBC,OAAQ,CAAEF,GAAI,OAAQC,GAAI,QAC1BZ,gBAAiB,uBACjBc,WAAY,IACZC,SAAU,SACV,QAAS,CAAEL,MAAO,OAAQG,OAAQ,OAAQG,UAAW,SACrD,qBAAsB,CACpBN,MAAO,CAAEC,GAAI,OAAQC,GAAI,QACzBC,OAAQ,CAAEF,GAAI,OAAQC,GAAI,UAG9BjB,GACD,cACW,uBACRC,EAAQhB,SAEXT,IAGL0B,EAAAA,KAACC,EAAAA,KACCrC,GAAIsC,EAAAA,WACF,CACEW,MAAO,OACPO,SAAU,OACVF,SAAU,SACVb,QAAS,OACTE,IAAK,MACLD,cAAe,SAEfF,QAAS,MAET,gCAAiC,CAC/BiB,QAAS,MAGbnC,MAEEC,EAAWJ,SAAA,CAEfiB,EAAAA,KAACC,EAAAA,IAAG,CACFrC,GAAIsC,EAAAA,WAAW,CAAEG,QAAS,OAAQM,WAAY,SAAUD,eAAgB,aAAcH,IAAK,GAAKnB,MAC5FC,EAAUN,SAAA,CAEbX,GAASqC,EAAAA,IAACa,EAAAA,MAAK,CAACC,KAAK,YAAYC,QAAQ,YAE1Cf,EAAAA,IAACgB,EAAAA,WAAU,CACTD,QAAQ,cACR5D,GAAIsC,aACF,CACEwB,WAAY,SACZR,SAAU,SACVS,aAAc,WACdC,SAAU,IACVC,SAAU,KAEZnC,GACD,cACW,2BACRC,EAASZ,SAEZlB,IAEFe,GACC6B,EAAAA,IAACqB,aAAU,CAAA,aACE,uBACXC,QAASnD,EACToD,KAAK,QACLC,UAAU,uBACVrE,GAAIsC,aACF,CACEE,QAAS,MAETiB,QAAS,CAAEP,GAAI,IAAKC,GAAI,KAExB,qBAAsB,CACpBM,QAAS,MAGbzB,GACD,cACW,0BACRC,EAAmBd,SAEvB0B,MAACyB,EAAAA,UAAS,CAACC,SAAS,QAAQF,UAAU,UAAUG,KAAK,WAAYtD,SAIvE2B,EAAAA,IAACR,EAAAA,mBAAgB,8BAA+BhC,EAAuBc,SAChD,iBAAbA,EACN0B,EAAAA,IAACgB,EAAAA,WAAU,CACT7D,GAAIsC,aACF,CACEgB,SAAU,SACVS,aAAc,WACdtB,QAAS,cACTgC,gBAAiB,IACjBC,gBAAiB,YAEnB9C,GAEFgC,QAAQ,iBACJ/B,EAAeV,SAElBA,IACU,IAKhBP,GACCiC,EAAAA,IAACgB,EAAAA,YACCD,QAAQ,cACRrD,MAAO,kBAAiB,cACZ,yBACRQ,EAAWI,SAEdP,IAGJC,GACCgC,EAAAA,IAACR,EAAAA,IAAG,CACFrC,GAAIsC,aACF,CACEqC,GAAI,IACJlC,QAAS,OACTM,WAAY,SACZD,eAAgB,aAChBJ,cAAe,MACfC,IAAK,GAEPjB,GACD,cACW,0BACRC,EAAWR,SAEdN"}

package/cjs/components/notification/NotificationCenter.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("react/jsx-runtime"),i=require("react"),e=require("@mui/material"),o=require("../icon/stroke/CloseIcon.js");const s=i.forwardRef(({children:i,sx:s,title:n="Notifications",headerProps:r,titleProps:a,dismissAllText:x="Dismiss All",onDismissAll:d,onClose:l,iconButtonProps:c,iconProps:p,containerProps:f,dismissBoxProps:m,dismissButtonProps:u,height:C=556,...h},j)=>{const{sx:y,...b}=r??{},{sx:g,...B}=f??{},{sx:N,...P}=m??{},{sx:v,...w}=c??{};return t.jsxs(e.Box,{ref:j,sx:{display:"flex",flexDirection:"column",width:{xs:"100%",sm:"360px",md:"440px"},borderRadius:{xs:"0px",sm:"8px"},backgroundColor:"background.primary",color:"text.primary",boxShadow:"0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)",overflow:"hidden",maxHeight:(k=C,"string"==typeof k&&k.includes("px")?k:`${k}px`),...s},"data-testid":"NotificationCenter",...h,children:[t.jsxs(e.Box,{sx:{padding:"16px 8px 16px 16px",display:"flex",justifyContent:"space-between",...y},...b,children:[t.jsx(e.Typography,{variant:"h4",component:"span","data-testid":"NotificationCenter.title",...a,children:n}),l&&t.jsx(e.IconButton,{"aria-label":"onClose notificationCenter",onClick:l,size:"medium",className:"notificationCenter-onClose",sx:{padding:"4px",...v},"data-testid":"NotificationCenter.onClose",...w,children:t.jsx(o.CloseIcon,{fontSize:"medium",className:"ballotx",...p})})]}),d&&t.jsx(e.Box,{sx:{padding:"0 8px 4px 16px",display:"flex",justifyContent:"flex-end",...N},...P,children:t.jsx(e.Button,{onClick:d,size:"small",color:"secondary",variant:"text","data-testid":"NotificationCenter.dismiss",...u,children:x})}),t.jsx(e.Box,{sx:{overflowY:"auto",'& [data-testid="Notification"]:not(:last-child)':{borderBottom:1,borderColor:"surface.secondary"},...g},"data-testid":"NotificationCenter.content",...B,children:i})]});var k});exports.NotificationCenter=s;
+"use strict";var e=require("react/jsx-runtime"),i=require("react"),t=require("@mui/material"),s=require("../icon/stroke/CloseIcon.js"),o=require("../../utils/sxOverride/sxOverride.js");const r=i.forwardRef(({children:i,sx:r,title:n="Notifications",headerProps:a,titleProps:x,dismissAllText:d="Dismiss All",onDismissAll:l,onClose:c,iconButtonProps:p,iconProps:f,containerProps:m,dismissBoxProps:u,dismissButtonProps:C,height:h=556,...j},v)=>{const{sx:y,...b}=a??{},{sx:g,...B}=m??{},{sx:N,...O}=u??{},{sx:P,...w}=p??{};return e.jsxs(t.Box,{ref:v,sx:o.sxOverride({display:"flex",flexDirection:"column",width:{xs:"100%",sm:"360px",md:"440px"},borderRadius:{xs:"0px",sm:"8px"},backgroundColor:"background.primary",color:"text.primary",boxShadow:"0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)",overflow:"hidden",maxHeight:(k=h,"string"==typeof k&&k.includes("px")?k:`${k}px`)},r),"data-testid":"NotificationCenter",...j,children:[e.jsxs(t.Box,{sx:o.sxOverride({padding:"16px 8px 16px 16px",display:"flex",justifyContent:"space-between"},y),...b,children:[e.jsx(t.Typography,{variant:"h4",component:"span","data-testid":"NotificationCenter.title",...x,children:n}),c&&e.jsx(t.IconButton,{"aria-label":"onClose notificationCenter",onClick:c,size:"medium",className:"notificationCenter-onClose",sx:o.sxOverride({padding:"4px"},P),"data-testid":"NotificationCenter.onClose",...w,children:e.jsx(s.CloseIcon,{fontSize:"medium",className:"ballotx",...f})})]}),l&&e.jsx(t.Box,{sx:o.sxOverride({padding:"0 8px 4px 16px",display:"flex",justifyContent:"flex-end"},N),...O,children:e.jsx(t.Button,{onClick:l,size:"small",color:"secondary",variant:"text","data-testid":"NotificationCenter.dismiss",...C,children:d})}),e.jsx(t.Box,{sx:o.sxOverride({overflowY:"auto",'& [data-testid="Notification"]:not(:last-child)':{borderBottom:1,borderColor:"surface.secondary"}},g),"data-testid":"NotificationCenter.content",...B,children:i})]});var k});exports.NotificationCenter=r;
 //# sourceMappingURL=NotificationCenter.js.map

package/cjs/components/notification/NotificationCenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.js","sources":["../../../../../src/components/notification/NotificationCenter.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport {\n  Box,\n  Button,\n  BoxProps,\n  ButtonProps,\n  IconButton,\n  IconButtonProps,\n  IconProps,\n  Typography,\n  TypographyProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationCenterProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification center\n   */\n  title?: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Text for the dismiss all button\n   */\n  dismissAllText?: React.ReactNode;\n  /**\n   * Callback function when the dismiss all button is clicked\n   */\n  onDismissAll?: () => void;\n  /**\n   * Callback function when the close button is clicked\n   */\n  onClose?: () => void;\n  /**\n   * Max Height of the notification center\n   */\n  height?: number | string;\n  /**\n   * Custom props for the icon button\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  iconProps?: IconProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss box\n   */\n  dismissBoxProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss button\n   */\n  dismissButtonProps?: ButtonProps<ElementType>;\n}\n\nexport const NotificationCenter: FC<NotificationCenterProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      title = 'Notifications',\n      headerProps,\n      titleProps,\n      dismissAllText = 'Dismiss All',\n      onDismissAll,\n      onClose,\n      iconButtonProps,\n      iconProps,\n      containerProps,\n      dismissBoxProps,\n      dismissButtonProps,\n      height = 556,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: containerSx, ...restContainer } = containerProps ?? {};\n    const { sx: dismissBoxSx, ...restDismissBox } = dismissBoxProps ?? {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps ?? {};\n\n    const formatHeight = (heightValue: number | string) => {\n      if (typeof heightValue === 'string' && heightValue.includes('px')) {\n        return heightValue;\n      }\n      // if typeof heightValue === 'number', or string without 'px'\n      return `${heightValue}px`;\n    };\n\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          width: { xs: '100%', sm: '360px', md: '440px' },\n          borderRadius: { xs: '0px', sm: '8px' },\n          backgroundColor: 'background.primary',\n          color: 'text.primary',\n          boxShadow: '0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)',\n          overflow: 'hidden',\n          maxHeight: formatHeight(height),\n          ...sx,\n        }}\n        data-testid=\"NotificationCenter\"\n        {...rest}\n      >\n        <Box\n          sx={{\n            padding: '16px 8px 16px 16px',\n            display: 'flex',\n            justifyContent: 'space-between',\n            ...headerSx,\n          }}\n          {...restHeader}\n        >\n          <Typography variant=\"h4\" component=\"span\" data-testid=\"NotificationCenter.title\" {...titleProps}>\n            {title}\n          </Typography>\n          {onClose && (\n            <IconButton\n              aria-label=\"onClose notificationCenter\"\n              onClick={onClose}\n              size=\"medium\"\n              className=\"notificationCenter-onClose\"\n              sx={{\n                padding: '4px',\n                ...iconButtonSx,\n              }}\n              data-testid=\"NotificationCenter.onClose\"\n              {...restIconButton}\n            >\n              <CloseIcon fontSize=\"medium\" className=\"ballotx\" {...iconProps} />\n            </IconButton>\n          )}\n        </Box>\n\n        {onDismissAll && (\n          <Box\n            sx={{\n              padding: '0 8px 4px 16px',\n              display: 'flex',\n              justifyContent: 'flex-end',\n              ...dismissBoxSx,\n            }}\n            {...restDismissBox}\n          >\n            <Button\n              onClick={onDismissAll}\n              size=\"small\"\n              color=\"secondary\"\n              variant=\"text\"\n              data-testid=\"NotificationCenter.dismiss\"\n              {...dismissButtonProps}\n            >\n              {dismissAllText}\n            </Button>\n          </Box>\n        )}\n        <Box\n          sx={{\n            overflowY: 'auto',\n            // add divider between notifications\n            '& [data-testid=\"Notification\"]:not(:last-child)': {\n              borderBottom: 1,\n              borderColor: 'surface.secondary',\n            },\n            ...containerSx,\n          }}\n          data-testid=\"NotificationCenter.content\"\n          {...restContainer}\n        >\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenter","forwardRef","children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height","rest","ref","headerSx","restHeader","containerSx","restContainer","dismissBoxSx","restDismissBox","iconButtonSx","restIconButton","_jsxs","Box","display","flexDirection","width","xs","sm","md","borderRadius","backgroundColor","color","boxShadow","overflow","maxHeight","heightValue","includes","padding","justifyContent","_jsx","Typography","variant","component","IconButton","onClick","size","className","CloseIcon","fontSize","Button","overflowY","borderBottom","borderColor"],"mappings":"6IAiEaA,EAAkDC,EAAAA,WAC7D,EAEIC,WACAC,KACAC,QAAQ,gBACRC,cACAC,aACAC,iBAAiB,cACjBC,eACAC,UACAC,kBACAC,YACAC,iBACAC,kBACAC,qBACAC,SAAS,OACNC,GAELC,KAEA,MAAQd,GAAIe,KAAaC,GAAed,GAAe,CAAA,GAC/CF,GAAIiB,KAAgBC,GAAkBT,GAAkB,CAAA,GACxDT,GAAImB,KAAiBC,GAAmBV,GAAmB,CAAA,GAC3DV,GAAIqB,KAAiBC,GAAmBf,GAAmB,CAAA,EAUnE,OACEgB,EAAAA,KAACC,EAAAA,IAAG,CACFV,IAAKA,EACLd,GAAI,CACFyB,QAAS,OACTC,cAAe,SACfC,MAAO,CAAEC,GAAI,OAAQC,GAAI,QAASC,GAAI,SACtCC,aAAc,CAAEH,GAAI,MAAOC,GAAI,OAC/BG,gBAAiB,qBACjBC,MAAO,eACPC,UAAW,2EACXC,SAAU,SACVC,WApBgBC,EAoBQzB,EAnBD,iBAAhByB,GAA4BA,EAAYC,SAAS,MACnDD,EAGF,GAAGA,UAgBHrC,GACJ,cACW,wBACRa,EAAId,SAAA,CAERwB,EAAAA,KAACC,MAAG,CACFxB,GAAI,CACFuC,QAAS,qBACTd,QAAS,OACTe,eAAgB,mBACbzB,MAEDC,EAAUjB,SAAA,CAEd0C,EAAAA,IAACC,EAAAA,WAAU,CAACC,QAAQ,KAAKC,UAAU,OAAM,cAAa,8BAA+BzC,EAAUJ,SAC5FE,IAEFK,GACCmC,EAAAA,IAACI,EAAAA,yBACY,6BACXC,QAASxC,EACTyC,KAAK,SACLC,UAAU,6BACVhD,GAAI,CACFuC,QAAS,SACNlB,GACJ,cACW,gCACRC,EAAcvB,SAElB0C,EAAAA,IAACQ,YAAS,CAACC,SAAS,SAASF,UAAU,aAAcxC,SAK1DH,GACCoC,EAAAA,IAACjB,MAAG,CACFxB,GAAI,CACFuC,QAAS,iBACTd,QAAS,OACTe,eAAgB,cACbrB,MAEDC,EAAcrB,SAElB0C,EAAAA,IAACU,EAAAA,QACCL,QAASzC,EACT0C,KAAK,QACLd,MAAM,YACNU,QAAQ,OAAM,cACF,gCACRhC,EAAkBZ,SAErBK,MAIPqC,EAAAA,IAACjB,EAAAA,IAAG,CACFxB,GAAI,CACFoD,UAAW,OAEX,kDAAmD,CACjDC,aAAc,EACdC,YAAa,wBAEZrC,GACJ,cACW,gCACRC,EAAanB,SAEhBA,OA3Fc,IAACsC"}
+{"version":3,"file":"NotificationCenter.js","sources":["../../../../../src/components/notification/NotificationCenter.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport {\n  Box,\n  Button,\n  BoxProps,\n  ButtonProps,\n  IconButton,\n  IconButtonProps,\n  IconProps,\n  Typography,\n  TypographyProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface NotificationCenterProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification center\n   */\n  title?: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Text for the dismiss all button\n   */\n  dismissAllText?: React.ReactNode;\n  /**\n   * Callback function when the dismiss all button is clicked\n   */\n  onDismissAll?: () => void;\n  /**\n   * Callback function when the close button is clicked\n   */\n  onClose?: () => void;\n  /**\n   * Max Height of the notification center\n   */\n  height?: number | string;\n  /**\n   * Custom props for the icon button\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  iconProps?: IconProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss box\n   */\n  dismissBoxProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss button\n   */\n  dismissButtonProps?: ButtonProps<ElementType>;\n}\n\nexport const NotificationCenter: FC<NotificationCenterProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      title = 'Notifications',\n      headerProps,\n      titleProps,\n      dismissAllText = 'Dismiss All',\n      onDismissAll,\n      onClose,\n      iconButtonProps,\n      iconProps,\n      containerProps,\n      dismissBoxProps,\n      dismissButtonProps,\n      height = 556,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: containerSx, ...restContainer } = containerProps ?? {};\n    const { sx: dismissBoxSx, ...restDismissBox } = dismissBoxProps ?? {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps ?? {};\n\n    const formatHeight = (heightValue: number | string) => {\n      if (typeof heightValue === 'string' && heightValue.includes('px')) {\n        return heightValue;\n      }\n      // if typeof heightValue === 'number', or string without 'px'\n      return `${heightValue}px`;\n    };\n\n    return (\n      <Box\n        ref={ref}\n        sx={sxOverride(\n          {\n            display: 'flex',\n            flexDirection: 'column',\n            width: { xs: '100%', sm: '360px', md: '440px' },\n            borderRadius: { xs: '0px', sm: '8px' },\n            backgroundColor: 'background.primary',\n            color: 'text.primary',\n            boxShadow: '0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)',\n            overflow: 'hidden',\n            maxHeight: formatHeight(height),\n          },\n          sx,\n        )}\n        data-testid=\"NotificationCenter\"\n        {...rest}\n      >\n        <Box\n          sx={sxOverride(\n            {\n              padding: '16px 8px 16px 16px',\n              display: 'flex',\n              justifyContent: 'space-between',\n            },\n            headerSx,\n          )}\n          {...restHeader}\n        >\n          <Typography variant=\"h4\" component=\"span\" data-testid=\"NotificationCenter.title\" {...titleProps}>\n            {title}\n          </Typography>\n          {onClose && (\n            <IconButton\n              aria-label=\"onClose notificationCenter\"\n              onClick={onClose}\n              size=\"medium\"\n              className=\"notificationCenter-onClose\"\n              sx={sxOverride(\n                {\n                  padding: '4px',\n                },\n                iconButtonSx,\n              )}\n              data-testid=\"NotificationCenter.onClose\"\n              {...restIconButton}\n            >\n              <CloseIcon fontSize=\"medium\" className=\"ballotx\" {...iconProps} />\n            </IconButton>\n          )}\n        </Box>\n\n        {onDismissAll && (\n          <Box\n            sx={sxOverride(\n              {\n                padding: '0 8px 4px 16px',\n                display: 'flex',\n                justifyContent: 'flex-end',\n              },\n              dismissBoxSx,\n            )}\n            {...restDismissBox}\n          >\n            <Button\n              onClick={onDismissAll}\n              size=\"small\"\n              color=\"secondary\"\n              variant=\"text\"\n              data-testid=\"NotificationCenter.dismiss\"\n              {...dismissButtonProps}\n            >\n              {dismissAllText}\n            </Button>\n          </Box>\n        )}\n        <Box\n          sx={sxOverride(\n            {\n              overflowY: 'auto',\n              // add divider between notifications\n              '& [data-testid=\"Notification\"]:not(:last-child)': {\n                borderBottom: 1,\n                borderColor: 'surface.secondary',\n              },\n            },\n            containerSx,\n          )}\n          data-testid=\"NotificationCenter.content\"\n          {...restContainer}\n        >\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenter","forwardRef","children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height","rest","ref","headerSx","restHeader","containerSx","restContainer","dismissBoxSx","restDismissBox","iconButtonSx","restIconButton","_jsxs","Box","sxOverride","display","flexDirection","width","xs","sm","md","borderRadius","backgroundColor","color","boxShadow","overflow","maxHeight","heightValue","includes","padding","justifyContent","_jsx","Typography","variant","component","IconButton","onClick","size","className","CloseIcon","fontSize","Button","overflowY","borderBottom","borderColor"],"mappings":"+LAkEaA,EAAkDC,EAAAA,WAC7D,EAEIC,WACAC,KACAC,QAAQ,gBACRC,cACAC,aACAC,iBAAiB,cACjBC,eACAC,UACAC,kBACAC,YACAC,iBACAC,kBACAC,qBACAC,SAAS,OACNC,GAELC,KAEA,MAAQd,GAAIe,KAAaC,GAAed,GAAe,CAAA,GAC/CF,GAAIiB,KAAgBC,GAAkBT,GAAkB,CAAA,GACxDT,GAAImB,KAAiBC,GAAmBV,GAAmB,CAAA,GAC3DV,GAAIqB,KAAiBC,GAAmBf,GAAmB,CAAA,EAUnE,OACEgB,EAAAA,KAACC,EAAAA,IAAG,CACFV,IAAKA,EACLd,GAAIyB,aACF,CACEC,QAAS,OACTC,cAAe,SACfC,MAAO,CAAEC,GAAI,OAAQC,GAAI,QAASC,GAAI,SACtCC,aAAc,CAAEH,GAAI,MAAOC,GAAI,OAC/BG,gBAAiB,qBACjBC,MAAO,eACPC,UAAW,2EACXC,SAAU,SACVC,WArBcC,EAqBU1B,EApBH,iBAAhB0B,GAA4BA,EAAYC,SAAS,MACnDD,EAGF,GAAGA,QAkBNtC,GACD,cACW,wBACRa,EAAId,SAAA,CAERwB,OAACC,EAAAA,IAAG,CACFxB,GAAIyB,EAAAA,WACF,CACEe,QAAS,qBACTd,QAAS,OACTe,eAAgB,iBAElB1B,MAEEC,YAEJ0B,EAAAA,IAACC,EAAAA,YAAWC,QAAQ,KAAKC,UAAU,OAAM,cAAa,8BAA+B1C,EAAUJ,SAC5FE,IAEFK,GACCoC,EAAAA,IAACI,EAAAA,WAAU,CAAA,aACE,6BACXC,QAASzC,EACT0C,KAAK,SACLC,UAAU,6BACVjD,GAAIyB,aACF,CACEe,QAAS,OAEXnB,GACD,cACW,gCACRC,EAAcvB,SAElB2C,MAACQ,EAAAA,UAAS,CAACC,SAAS,SAASF,UAAU,aAAczC,SAK1DH,GACCqC,MAAClB,EAAAA,IAAG,CACFxB,GAAIyB,EAAAA,WACF,CACEe,QAAS,iBACTd,QAAS,OACTe,eAAgB,YAElBtB,MAEEC,EAAcrB,SAElB2C,EAAAA,IAACU,EAAAA,OAAM,CACLL,QAAS1C,EACT2C,KAAK,QACLd,MAAM,YACNU,QAAQ,OAAM,cACF,gCACRjC,WAEHP,MAIPsC,EAAAA,IAAClB,EAAAA,KACCxB,GAAIyB,EAAAA,WACF,CACE4B,UAAW,OAEX,kDAAmD,CACjDC,aAAc,EACdC,YAAa,sBAGjBtC,GACD,cACW,gCACRC,EAAanB,SAEhBA,OArGc,IAACuC"}

package/cjs/components/notification/NotificationCenterCategory.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("react/jsx-runtime"),e=require("react"),r=require("@mui/material");const i=e.forwardRef(({title:e,headerProps:i,titleProps:o,containerProps:a,children:n,...s},c)=>{const{sx:d,...l}=o??{};return t.jsxs(r.Box,{"data-testid":"NotificationCenterCategory",...s,ref:c,children:[t.jsx(r.Typography,{variant:"caption2",sx:{pl:1,pt:2,pb:1,display:"block",borderBottom:1,borderColor:"surface.secondary",...d},"data-testid":"NotificationCenterCategory.title",...l,children:e}),t.jsx(r.Box,{"data-testid":"NotificationCenterCategory.content",...a,children:n})]})});exports.NotificationCenterCategory=i;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),i=require("../../utils/sxOverride/sxOverride.js");const o=r.forwardRef(({title:r,headerProps:o,titleProps:a,containerProps:s,children:n,...c},d)=>{const{sx:l,...x}=a??{};return e.jsxs(t.Box,{"data-testid":"NotificationCenterCategory",...c,ref:d,children:[e.jsx(t.Typography,{variant:"caption2",sx:i.sxOverride({pl:1,pt:2,pb:1,display:"block",borderBottom:1,borderColor:"surface.secondary"},l),"data-testid":"NotificationCenterCategory.title",...x,children:r}),e.jsx(t.Box,{"data-testid":"NotificationCenterCategory.content",...s,children:n})]})});exports.NotificationCenterCategory=o;
 //# sourceMappingURL=NotificationCenterCategory.js.map

package/cjs/components/notification/NotificationCenterCategory.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenterCategory.js","sources":["../../../../../src/components/notification/NotificationCenterCategory.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\n\nexport interface NotificationCenterCategoryProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification\n   */\n  title: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component that renders a category in the Notification Center\n */\nexport const NotificationCenterCategory: FC<NotificationCenterCategoryProps> = forwardRef(\n  ({ title, headerProps, titleProps, containerProps, children, ...rest }, ref) => {\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n\n    return (\n      <Box data-testid=\"NotificationCenterCategory\" {...rest} ref={ref}>\n        <Typography\n          variant=\"caption2\"\n          sx={{\n            pl: 1,\n            pt: 2,\n            pb: 1,\n            display: 'block',\n            borderBottom: 1,\n            borderColor: 'surface.secondary',\n            ...titleSx,\n          }}\n          data-testid=\"NotificationCenterCategory.title\"\n          {...restTitle}\n        >\n          {title}\n        </Typography>\n        <Box data-testid=\"NotificationCenterCategory.content\" {...containerProps}>\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenterCategory","forwardRef","title","headerProps","titleProps","containerProps","children","rest","ref","sx","titleSx","restTitle","_jsxs","Box","_jsx","Typography","variant","pl","pt","pb","display","borderBottom","borderColor"],"mappings":"8FAyBO,MAAMA,EAAkEC,EAAAA,WAC7E,EAAGC,QAAOC,cAAaC,aAAYC,iBAAgBC,cAAaC,GAAQC,KACtE,MAAQC,GAAIC,KAAYC,GAAcP,GAAc,CAAA,EAEpD,OACEQ,EAAAA,KAACC,EAAAA,IAAG,CAAA,cAAa,gCAAiCN,EAAMC,IAAKA,EAAGF,SAAA,CAC9DQ,EAAAA,IAACC,EAAAA,WAAU,CACTC,QAAQ,WACRP,GAAI,CACFQ,GAAI,EACJC,GAAI,EACJC,GAAI,EACJC,QAAS,QACTC,aAAc,EACdC,YAAa,uBACVZ,GACJ,cACW,sCACRC,WAEHT,IAEHY,EAAAA,IAACD,EAAAA,IAAG,CAAA,cAAa,wCAAyCR,EAAcC,SACrEA"}
+{"version":3,"file":"NotificationCenterCategory.js","sources":["../../../../../src/components/notification/NotificationCenterCategory.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface NotificationCenterCategoryProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification\n   */\n  title: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component that renders a category in the Notification Center\n */\nexport const NotificationCenterCategory: FC<NotificationCenterCategoryProps> = forwardRef(\n  ({ title, headerProps, titleProps, containerProps, children, ...rest }, ref) => {\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n\n    return (\n      <Box data-testid=\"NotificationCenterCategory\" {...rest} ref={ref}>\n        <Typography\n          variant=\"caption2\"\n          sx={sxOverride(\n            {\n              pl: 1,\n              pt: 2,\n              pb: 1,\n              display: 'block',\n              borderBottom: 1,\n              borderColor: 'surface.secondary',\n            },\n            titleSx,\n          )}\n          data-testid=\"NotificationCenterCategory.title\"\n          {...restTitle}\n        >\n          {title}\n        </Typography>\n        <Box data-testid=\"NotificationCenterCategory.content\" {...containerProps}>\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenterCategory","forwardRef","title","headerProps","titleProps","containerProps","children","rest","ref","sx","titleSx","restTitle","_jsxs","Box","_jsx","Typography","variant","sxOverride","pl","pt","pb","display","borderBottom","borderColor"],"mappings":"gJA0BO,MAAMA,EAAkEC,EAAAA,WAC7E,EAAGC,QAAOC,cAAaC,aAAYC,iBAAgBC,cAAaC,GAAQC,KACtE,MAAQC,GAAIC,KAAYC,GAAcP,GAAc,CAAA,EAEpD,OACEQ,EAAAA,KAACC,EAAAA,IAAG,CAAA,cAAa,gCAAiCN,EAAMC,IAAKA,YAC3DM,EAAAA,IAACC,cACCC,QAAQ,WACRP,GAAIQ,aACF,CACEC,GAAI,EACJC,GAAI,EACJC,GAAI,EACJC,QAAS,QACTC,aAAc,EACdC,YAAa,qBAEfb,GACD,cACW,sCACRC,EAASL,SAEZJ,IAEHY,EAAAA,IAACD,EAAAA,IAAG,CAAA,cAAa,wCAAyCR,WACvDC"}

package/cjs/components/notification/NotificationCenterHeaderButton.js

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

package/cjs/components/notification/NotificationCenterHeaderButton.js.map

@@ -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   * 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","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","headerButtonProps","icon","onClick","rest","ref","anchor","setAnchor","useState","sx","popperSx","restPopper","_jsxs","_Fragment","children","_jsx","HeaderButton","open","e","currentTarget","BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","Fade","NotificationCenter","undefined"],"mappings":"kNAiDO,MAAMA,EAA0EC,EAAAA,WACrF,EAEIC,cACAC,yBACAC,YACAC,QAAQ,gBACRC,SACAC,eACAC,aACAC,oBACAC,OACAC,aACGC,GAELC,KAEA,MAAOC,EAAQC,GAAaC,EAAAA,SAAS,OAC7BC,GAAIC,KAAaC,GAAejB,GAAe,CAAA,EAEvD,OACEkB,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACEC,EAAAA,IAACC,EAAAA,aAAY,CACXnB,MAAOA,EACPC,OAAQA,IAAU,EAClBC,aAAc,IACRO,GAAU,CAAEW,MAAM,MACnBlB,GAELC,WAAYA,EACZG,QAAUe,IACRf,IAAUe,GACVX,EAAUW,EAAEC,gBAEdd,IAAKA,gBACO,oCACRJ,EAAiBa,SAEpBZ,GAAQa,EAAAA,IAACK,EAAAA,SAAQ,CAAA,KAEpBL,MAACM,EAAAA,OAAM,CACLJ,OAAQX,EACRgB,SAAUhB,EACViB,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,EACVnB,GAAI,CACFoB,OAASC,GAAUA,EAAMD,OAAOE,OAAS,MACtCrB,MAEDC,WAEH,EAAGqB,qBACFjB,EAAAA,IAACkB,EAAAA,kBAAiB,CAACC,YAAa,IAAM3B,EAAU,SAAWZ,EAAsBmB,SAC/EC,MAACoB,EAAAA,KAAI,IAAKH,KAAqBpC,EAASkB,SACtCC,EAAAA,IAACqB,EAAAA,mBAAkB,IAAKhC,EAAMC,SAAKgC"}
+{"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';\nimport { sxOverride } from '@/src/utils/sxOverride';\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={sxOverride(\n            {\n              zIndex: (theme) => theme.zIndex.appBar + 10,\n            },\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","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","headerButtonProps","icon","onClick","rest","ref","anchor","setAnchor","useState","sx","popperSx","restPopper","_jsxs","_Fragment","children","_jsx","HeaderButton","open","e","currentTarget","BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","sxOverride","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","Fade","NotificationCenter","undefined"],"mappings":"oQAkDO,MAAMA,EAA0EC,EAAAA,WACrF,EAEIC,cACAC,yBACAC,YACAC,QAAQ,gBACRC,SACAC,eACAC,aACAC,oBACAC,OACAC,aACGC,GAELC,KAEA,MAAOC,EAAQC,GAAaC,EAAAA,SAAS,OAC7BC,GAAIC,KAAaC,GAAejB,GAAe,CAAA,EAEvD,OACEkB,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACEC,EAAAA,IAACC,EAAAA,aAAY,CACXnB,MAAOA,EACPC,OAAQA,IAAU,EAClBC,aAAc,IACRO,GAAU,CAAEW,MAAM,MACnBlB,GAELC,WAAYA,EACZG,QAAUe,IACRf,IAAUe,GACVX,EAAUW,EAAEC,gBAEdd,IAAKA,gBACO,oCACRJ,EAAiBa,SAEpBZ,GAAQa,EAAAA,IAACK,EAAAA,SAAQ,CAAA,KAEpBL,MAACM,EAAAA,OAAM,CACLJ,OAAQX,EACRgB,SAAUhB,EACViB,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,EACVnB,GAAIoB,aACF,CACEC,OAASC,GAAUA,EAAMD,OAAOE,OAAS,IAE3CtB,MAEEC,WAEH,EAAGsB,qBACFlB,EAAAA,IAACmB,EAAAA,kBAAiB,CAACC,YAAa,IAAM5B,EAAU,SAAWZ,EAAsBmB,SAC/EC,EAAAA,IAACqB,EAAAA,KAAI,IAAKH,KAAqBrC,EAASkB,SACtCC,EAAAA,IAACsB,EAAAA,mBAAkB,IAAKjC,EAAMC,SAAKiC"}

package/cjs/components/overlay/Overlay.js

@@ -1,2 +1,2 @@
-"use strict";var r=require("react/jsx-runtime"),e=require("@mui/material");exports.Overlay=({wrapperProps:a,sx:t,overlayContent:i,variant:n,children:s,...d})=>{const{sx:g,...o}=a||{};return r.jsxs(e.Box,{"data-testid":"Overlay-wrapper",sx:{position:"relative",maxWidth:"100%",maxHeight:"100%",...g},...o,children:[i,r.jsx(e.Box,{"data-testid":"Overlay-overlay",sx:{position:"absolute",inset:"0",zIndex:"100",background:"hero"===n?"linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)":"linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))",...t},...d,children:s})]})};
+"use strict";var r=require("react/jsx-runtime"),e=require("@mui/material"),a=require("../../utils/sxOverride/sxOverride.js");exports.Overlay=({wrapperProps:i,sx:t,overlayContent:s,variant:d,children:n,...x})=>{const{sx:g,...l}=i||{};return r.jsxs(e.Box,{"data-testid":"Overlay-wrapper",sx:a.sxOverride({position:"relative",maxWidth:"100%",maxHeight:"100%"},g),...l,children:[s,r.jsx(e.Box,{"data-testid":"Overlay-overlay",sx:a.sxOverride({position:"absolute",inset:"0",zIndex:"100",background:"hero"===d?"linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)":"linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))"},t),...x,children:n})]})};
 //# sourceMappingURL=Overlay.js.map

package/cjs/components/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../../../src/components/overlay/Overlay.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface OverlayProps extends BoxProps<ElementType> {\n  variant?: 'default' | 'hero';\n  /** The content like image to be displayed inside the overlay.  */\n  overlayContent?: React.ReactNode;\n  /** custom props of the Box wrapper of the component. */\n  wrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * The Overlay Component\n *\n * Overlay component wraps its children with an overlay effect. The overlay effect is achieved\n * using a semi-transparent gradient background. The component allows for custom content\n * (like an image) to be displayed inside the overlay through the `overlayContent` prop.\n */\nexport const Overlay: React.FC<OverlayProps> = ({ wrapperProps, sx, overlayContent, variant, children, ...rest }) => {\n  const { sx: wrapperSx, ...restWrapper } = wrapperProps || {};\n\n  return (\n    <Box\n      data-testid=\"Overlay-wrapper\"\n      sx={{ position: 'relative', maxWidth: '100%', maxHeight: '100%', ...wrapperSx }}\n      {...restWrapper}\n    >\n      {overlayContent}\n      <Box\n        data-testid=\"Overlay-overlay\"\n        sx={{\n          position: 'absolute',\n          inset: '0',\n          zIndex: '100',\n          background:\n            variant === 'hero'\n              ? 'linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)'\n              : 'linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))',\n          ...sx,\n        }}\n        {...rest}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["wrapperProps","sx","overlayContent","variant","children","rest","wrapperSx","restWrapper","_jsxs","Box","position","maxWidth","maxHeight","_jsx","inset","zIndex","background"],"mappings":"2FAkB+C,EAAGA,eAAcC,KAAIC,iBAAgBC,UAASC,cAAaC,MACxG,MAAQJ,GAAIK,KAAcC,GAAgBP,GAAgB,CAAA,EAE1D,OACEQ,OAACC,EAAAA,IAAG,CAAA,cACU,kBACZR,GAAI,CAAES,SAAU,WAAYC,SAAU,OAAQC,UAAW,UAAWN,MAChEC,EAAWH,SAAA,CAEdF,EACDW,EAAAA,IAACJ,MAAG,CAAA,cACU,kBACZR,GAAI,CACFS,SAAU,WACVI,MAAO,IACPC,OAAQ,MACRC,WACc,SAAZb,EACI,8KACA,+DACHF,MAEDI,EAAID,SAEPA"}
+{"version":3,"file":"Overlay.js","sources":["../../../../../src/components/overlay/Overlay.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface OverlayProps extends BoxProps<ElementType> {\n  variant?: 'default' | 'hero';\n  /** The content like image to be displayed inside the overlay.  */\n  overlayContent?: React.ReactNode;\n  /** custom props of the Box wrapper of the component. */\n  wrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * The Overlay Component\n *\n * Overlay component wraps its children with an overlay effect. The overlay effect is achieved\n * using a semi-transparent gradient background. The component allows for custom content\n * (like an image) to be displayed inside the overlay through the `overlayContent` prop.\n */\nexport const Overlay: React.FC<OverlayProps> = ({ wrapperProps, sx, overlayContent, variant, children, ...rest }) => {\n  const { sx: wrapperSx, ...restWrapper } = wrapperProps || {};\n\n  return (\n    <Box\n      data-testid=\"Overlay-wrapper\"\n      sx={sxOverride({ position: 'relative', maxWidth: '100%', maxHeight: '100%' }, wrapperSx)}\n      {...restWrapper}\n    >\n      {overlayContent}\n      <Box\n        data-testid=\"Overlay-overlay\"\n        sx={sxOverride(\n          {\n            position: 'absolute',\n            inset: '0',\n            zIndex: '100',\n            background:\n              variant === 'hero'\n                ? 'linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)'\n                : 'linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))',\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["wrapperProps","sx","overlayContent","variant","children","rest","wrapperSx","restWrapper","_jsxs","Box","sxOverride","position","maxWidth","maxHeight","_jsx","inset","zIndex","background"],"mappings":"6IAmB+C,EAAGA,eAAcC,KAAIC,iBAAgBC,UAASC,cAAaC,MACxG,MAAQJ,GAAIK,KAAcC,GAAgBP,GAAgB,CAAA,EAE1D,OACEQ,OAACC,EAAAA,IAAG,CAAA,cACU,kBACZR,GAAIS,EAAAA,WAAW,CAAEC,SAAU,WAAYC,SAAU,OAAQC,UAAW,QAAUP,MAC1EC,EAAWH,SAAA,CAEdF,EACDY,MAACL,EAAAA,IAAG,CAAA,cACU,kBACZR,GAAIS,EAAAA,WACF,CACEC,SAAU,WACVI,MAAO,IACPC,OAAQ,MACRC,WACc,SAAZd,EACI,8KACA,6DAERF,MAEEI,WAEHD"}

package/cjs/components/pageLayout/PageLayout.js

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

package/cjs/components/pageLayout/PageLayout.js.map

@@ -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>(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","children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps","rest","ref","theme","useTheme","headerWrapperSx","restHeaderWrapper","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","position","backgroundColor","display","gridTemplateRows","filter","Boolean","join","_jsx","height","component","Slide","appear","direction","in","top","left","right","zIndex","appBar","Container","maxWidth"],"mappings":"oGAoDaA,EAAwCC,EAAAA,WACnD,EAEIC,WACAC,KACAC,SACAC,SACAC,iBAAiB,SACjBC,uBAAuB,IACvBC,eAAc,EACdC,cACAC,uBACAC,qBACAC,eACAC,iBACGC,GAELC,KAEA,MAAMC,EAAQC,EAAAA,YACNd,GAAIe,KAAoBC,GAAsBR,GAAsB,CAAA,GAE1ER,GAAIiB,EACJC,UAAWC,KACRC,GACDb,GAAwB,CAAA,GAErBc,EAAcC,GAAmBC,EAAAA,SAAiBC,OAAOC,WAAWC,OAAOb,EAAMc,OAAOC,QAAQC,aACjGC,EAAqBC,cACxBC,IACwB,WAAnB7B,GAAgC6B,GAGpC,IAAIC,eAAe,KACjBX,EAAgBU,EAAQE,gBACvBC,QAAQH,IAEb,CAAoB,WAAnB7B,IAGGiC,EAAeC,EAAAA,iBAAiB,CACpCC,OAAQC,OACRC,UAAWpC,IAGb,OACEqC,EAAAA,KAACC,MAAG,CACF1C,GAAI,CACF2C,SAAU,WACVd,UAAW,QACXe,gBAAiB,kBACjBC,QAAS,OACTC,iBAAkB,CAAC7C,GAAU,cAAe,OAAQC,GAAU,eAAe6C,OAAOC,SAASC,KAAK,QAC/FjD,GACJ,cACW,aACZY,IAAKA,KACDD,EAAIZ,SAAA,CAEPE,GACCiD,EAAAA,IAACR,EAAAA,IAAG,CACF1C,GAAI,IACqB,WAAnBG,GAA+BkB,GAAgB,CAAE8B,OAAQ9B,MAC1DN,GACJ,cACW,8BACRC,EAAiBjB,SAErBmD,EAAAA,IAACR,MAAG,IACsB,UAAnBvC,GAA8B,CACjCiD,UAAWC,EAAAA,MACXC,QAAQ,EACRC,UAAW,OACXC,IAAKpB,GAEPpC,GAAI,IACqB,WAAnBG,GAA+B,CACjCwC,SAAU,QACVc,IAAK,IACLC,KAAM,IACNC,MAAO,IACPC,OAAQ/C,EAAM+C,OAAOC,WAEpB5C,GAELC,UAAW,CAAoB,WAAnBf,EAA8B,YAAc,GAAIgB,GACzD4B,OAAOC,SACPC,KAAK,QACJ7B,EAAmBrB,SAEvBmD,EAAAA,IAACR,MAAG,CAAC9B,IAAKkB,EAAkB,cAAc,uBAAwBxB,EAAWP,SAC1EE,QAKTiD,EAAAA,IAACR,MAAG,IAAMrC,GAAe,CAAE+C,UAAWU,YAAWC,SAAU,MAAO,cAAc,eAAgBtD,EAAYV,SACzGA,IAEFG,GACCgD,EAAAA,IAACR,EAAAA,IAAG,CAAA,cAAa,uBAAwBhC,EAAWX,SACjDG"}
+{"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';\nimport { sxOverride } from '@/src/utils/sxOverride';\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 | null) => {\n        if (headerPosition === 'static' || !element) {\n          return;\n        }\n        const observer = new ResizeObserver(() => {\n          setHeaderHeight(element.offsetHeight);\n        });\n        observer.observe(element);\n        return () => observer.disconnect();\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={sxOverride(\n          {\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          },\n          sx,\n        )}\n        data-testid=\"PageLayout\"\n        ref={ref}\n        {...rest}\n      >\n        {header && (\n          <Box\n            sx={sxOverride(\n              {\n                ...(headerPosition !== 'static' && headerHeight && { height: headerHeight }),\n              },\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={sxOverride(\n                {\n                  ...(headerPosition !== 'static' && {\n                    position: 'fixed',\n                    top: '0',\n                    left: '0',\n                    right: '0',\n                    zIndex: theme.zIndex.appBar,\n                  }),\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","children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps","rest","ref","theme","useTheme","headerWrapperSx","restHeaderWrapper","headerContainerSx","className","headerContainerClassName","restHeaderContainer","headerHeight","setHeaderHeight","useState","Number","parseFloat","String","mixins","toolbar","minHeight","headerContainerRef","useCallback","element","observer","ResizeObserver","offsetHeight","observe","disconnect","slideTrigger","useScrollTrigger","target","window","threshold","_jsxs","Box","sxOverride","position","backgroundColor","display","gridTemplateRows","filter","Boolean","join","_jsx","height","component","Slide","appear","direction","in","top","left","right","zIndex","appBar","Container","maxWidth"],"mappings":"sJAqDaA,EAAwCC,EAAAA,WACnD,EAEIC,WACAC,KACAC,SACAC,SACAC,iBAAiB,SACjBC,uBAAuB,IACvBC,eAAc,EACdC,cACAC,uBACAC,qBACAC,eACAC,iBACGC,GAELC,KAEA,MAAMC,EAAQC,EAAAA,YACNd,GAAIe,KAAoBC,GAAsBR,GAAsB,CAAA,GAE1ER,GAAIiB,EACJC,UAAWC,KACRC,GACDb,GAAwB,CAAA,GAErBc,EAAcC,GAAmBC,EAAAA,SAAiBC,OAAOC,WAAWC,OAAOb,EAAMc,OAAOC,QAAQC,aACjGC,EAAqBC,cACxBC,IACC,GAAuB,WAAnB7B,IAAgC6B,EAClC,OAEF,MAAMC,EAAW,IAAIC,eAAe,KAClCZ,EAAgBU,EAAQG,gBAG1B,OADAF,EAASG,QAAQJ,GACV,IAAMC,EAASI,cAExB,CAAoB,WAAnBlC,IAGGmC,EAAeC,EAAAA,iBAAiB,CACpCC,OAAQC,OACRC,UAAWtC,IAGb,OACEuC,OAACC,EAAAA,KACC5C,GAAI6C,EAAAA,WACF,CACEC,SAAU,WACVjB,UAAW,QACXkB,gBAAiB,kBACjBC,QAAS,OACTC,iBAAkB,CAAChD,GAAU,cAAe,OAAQC,GAAU,eAAegD,OAAOC,SAASC,KAAK,MAEpGpD,GACD,cACW,aACZY,IAAKA,KACDD,YAEHV,GACCoD,EAAAA,IAACT,EAAAA,KACC5C,GAAI6C,EAAAA,WACF,IACyB,WAAnB1C,GAA+BkB,GAAgB,CAAEiC,OAAQjC,IAE/DN,GACD,cACW,8BACRC,EAAiBjB,SAErBsD,EAAAA,IAACT,EAAAA,IAAG,IACsB,UAAnBzC,GAA8B,CACjCoD,UAAWC,EAAAA,MACXC,QAAQ,EACRC,UAAW,OACXC,IAAKrB,GAEPtC,GAAI6C,aACF,IACyB,WAAnB1C,GAA+B,CACjC2C,SAAU,QACVc,IAAK,IACLC,KAAM,IACNC,MAAO,IACPC,OAAQlD,EAAMkD,OAAOC,SAGzB/C,GAEFC,UAAW,CAAoB,WAAnBf,EAA8B,YAAc,GAAIgB,GACzD+B,OAAOC,SACPC,KAAK,QACJhC,EAAmBrB,SAEvBsD,EAAAA,IAACT,MAAG,CAAChC,IAAKkB,EAAkB,cAAc,uBAAwBxB,EAAWP,SAC1EE,QAKToD,EAAAA,IAACT,MAAG,IAAMvC,GAAe,CAAEkD,UAAWU,YAAWC,SAAU,MAAO,cAAc,eAAgBzD,EAAYV,SACzGA,IAEFG,GACCmD,EAAAA,IAACT,EAAAA,IAAG,CAAA,cAAa,uBAAwBlC,EAAWX,SACjDG"}

package/cjs/components/playPauseButton/PlayPauseButton.js

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

package/cjs/components/playPauseButton/PlayPauseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlayPauseButton.js","sources":["../../../../../src/components/playPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\nimport { ControlsPlayIcon } from '@/src/components/icon/stroke/ControlsPlayIcon';\nimport { ControlsPauseIcon } from '@/src/components/icon/stroke/ControlsPauseIcon';\n\nexport interface PlayPauseButtonProps extends BoxProps<ElementType> {\n  /**\n   * Boolean to indicate if the media is currently playing\n   */\n  isPlaying: boolean;\n  /**\n   * Callback function to handle play/pause button click events.\n   */\n  onClick: BoxProps<ElementType>['onClick'];\n  /**\n   * The progress value for the CircularProgress component.\n   * Should be a number between 0 and 100.\n   */\n  progress?: number;\n  /**\n   * Properties applied to Spinner progress\n   */\n  progressProps?: Omit<SpinnerProps, 'value'>;\n  /**\n   * Properties applied to IconButton\n   */\n  iconButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Properties applied to Pause Icon component\n   */\n  pauseIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PauseIcon\n   */\n  PauseIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to Play Icon component\n   */\n  playIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PlayIcon\n   */\n  PlayIconComponent?: ComponentType<SvgIconProps>;\n}\n\n/**\n * A component that displays a circular progress indicator with a play/pause button.\n */\nexport const PlayPauseButton: React.FC<PlayPauseButtonProps> = forwardRef(\n  (\n    {\n      progress = 0,\n      isPlaying,\n      onClick,\n      progressProps,\n      iconButtonProps,\n      pauseIconProps,\n      PauseIconComponent,\n      playIconProps,\n      PlayIconComponent,\n      children,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: progressSx, ...restProgress } = progressProps || {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps || {};\n    const PauseIcon = PauseIconComponent || ControlsPauseIcon;\n    const PlayIcon = PlayIconComponent || ControlsPlayIcon;\n\n    return (\n      <Box\n        data-testid=\"PlayPauseIndicator\"\n        sx={{\n          display: 'inline-flex',\n          position: 'relative',\n          zIndex: '150',\n          width: '44px',\n          height: '44px',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Spinner\n          value={progress}\n          size={44}\n          thickness={6}\n          sx={{\n            position: 'absolute',\n            inset: '0',\n            zIndex: '20',\n            // start from 12'clock instead of 3'\n            transform: 'rotate(-90deg)',\n            // recolor\n            '& .FlowSpinner-circle-primary': {\n              stroke: (theme) => theme.palette.brand.secondary,\n            },\n            '& .FlowSpinner-circle-secondary': {\n              stroke: (theme) => theme.palette.common.white,\n              // main line is thicker than second one\n              strokeWidth: '4px',\n            },\n            ...progressSx,\n          }}\n          {...restProgress}\n        />\n        <IconButton\n          data-testid=\"IndicatorIconButton\"\n          onClick={onClick}\n          color=\"white\"\n          size=\"medium\"\n          sx={{ position: 'absolute', inset: '0', zIndex: '30', ...iconButtonSx }}\n          aria-label={isPlaying ? 'Pause video' : 'Play video'}\n          {...restIconButton}\n        >\n          {isPlaying ? (\n            <PauseIcon data-testid=\"IndicatorPauseIcon\" {...pauseIconProps} />\n          ) : (\n            <PlayIcon data-testid=\"IndicatorPlayIcon\" {...playIconProps} />\n          )}\n        </IconButton>\n      </Box>\n    );\n  },\n);\n"],"names":["PlayPauseButton","forwardRef","progress","isPlaying","onClick","progressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx","rest","ref","progressSx","restProgress","iconButtonSx","restIconButton","PauseIcon","ControlsPauseIcon","PlayIcon","ControlsPlayIcon","_jsxs","Box","display","position","zIndex","width","height","_jsx","Spinner","value","size","thickness","inset","transform","stroke","theme","palette","brand","secondary","common","white","strokeWidth","IconButton","color"],"mappings":"mOAiDO,MAAMA,EAAkDC,EAAAA,WAC7D,EAEIC,WAAW,EACXC,YACAC,UACAC,gBACAC,kBACAC,iBACAC,qBACAC,gBACAC,oBACAC,WACAC,QACGC,GAELC,KAEA,MAAQF,GAAIG,KAAeC,GAAiBX,GAAiB,CAAA,GACrDO,GAAIK,KAAiBC,GAAmBZ,GAAmB,CAAA,EAC7Da,EAAYX,GAAsBY,EAAAA,kBAClCC,EAAWX,GAAqBY,EAAAA,iBAEtC,OACEC,EAAAA,KAACC,EAAAA,mBACa,qBACZZ,GAAI,CACFa,QAAS,cACTC,SAAU,WACVC,OAAQ,MACRC,MAAO,OACPC,OAAQ,UACLjB,GAELE,IAAKA,KACDD,EAAIF,SAAA,CAERmB,EAAAA,IAACC,EAAAA,QAAO,CACNC,MAAO9B,EACP+B,KAAM,GACNC,UAAW,EACXtB,GAAI,CACFc,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,UAEZ7B,MAEDC,IAENc,EAAAA,IAACe,EAAAA,0BACa,sBACZzC,QAASA,EACT0C,MAAM,QACNb,KAAK,SACLrB,GAAI,CAAEc,SAAU,WAAYS,MAAO,IAAKR,OAAQ,QAASV,GAAc,aAC3Dd,EAAY,cAAgB,gBACpCe,EAAcP,SAEjBR,EACC2B,MAACX,EAAS,CAAA,cAAa,wBAAyBZ,IAEhDuB,EAAAA,IAACT,EAAQ,CAAA,cAAa,uBAAwBZ"}
+{"version":3,"file":"PlayPauseButton.js","sources":["../../../../../src/components/playPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\nimport { ControlsPlayIcon } from '@/src/components/icon/stroke/ControlsPlayIcon';\nimport { ControlsPauseIcon } from '@/src/components/icon/stroke/ControlsPauseIcon';\n\nexport interface PlayPauseButtonProps extends BoxProps<ElementType> {\n  /**\n   * Boolean to indicate if the media is currently playing\n   */\n  isPlaying: boolean;\n  /**\n   * Callback function to handle play/pause button click events.\n   */\n  onClick: BoxProps<ElementType>['onClick'];\n  /**\n   * The progress value for the CircularProgress component.\n   * Should be a number between 0 and 100.\n   */\n  progress?: number;\n  /**\n   * Properties applied to Spinner progress\n   */\n  progressProps?: Omit<SpinnerProps, 'value'>;\n  /**\n   * Properties applied to IconButton\n   */\n  iconButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Properties applied to Pause Icon component\n   */\n  pauseIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PauseIcon\n   */\n  PauseIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to Play Icon component\n   */\n  playIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PlayIcon\n   */\n  PlayIconComponent?: ComponentType<SvgIconProps>;\n}\n\n/**\n * A component that displays a circular progress indicator with a play/pause button.\n */\nexport const PlayPauseButton: React.FC<PlayPauseButtonProps> = forwardRef(\n  (\n    {\n      progress = 0,\n      isPlaying,\n      onClick,\n      progressProps,\n      iconButtonProps,\n      pauseIconProps,\n      PauseIconComponent,\n      playIconProps,\n      PlayIconComponent,\n      children,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: progressSx, ...restProgress } = progressProps || {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps || {};\n    const PauseIcon = PauseIconComponent || ControlsPauseIcon;\n    const PlayIcon = PlayIconComponent || ControlsPlayIcon;\n\n    return (\n      <Box\n        data-testid=\"PlayPauseIndicator\"\n        sx={sxOverride(\n          {\n            display: 'inline-flex',\n            position: 'relative',\n            zIndex: '150',\n            width: '44px',\n            height: '44px',\n          },\n          sx,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <Spinner\n          value={progress}\n          size={44}\n          thickness={6}\n          sx={sxOverride(\n            {\n              position: 'absolute',\n              inset: '0',\n              zIndex: '20',\n              // start from 12'clock instead of 3'\n              transform: 'rotate(-90deg)',\n              // recolor\n              '& .FlowSpinner-circle-primary': {\n                stroke: (theme) => theme.palette.brand.secondary,\n              },\n              '& .FlowSpinner-circle-secondary': {\n                stroke: (theme) => theme.palette.common.white,\n                // main line is thicker than second one\n                strokeWidth: '4px',\n              },\n            },\n            progressSx,\n          )}\n          {...restProgress}\n        />\n        <IconButton\n          data-testid=\"IndicatorIconButton\"\n          onClick={onClick}\n          color=\"white\"\n          size=\"medium\"\n          sx={sxOverride({ position: 'absolute', inset: '0', zIndex: '30' }, iconButtonSx)}\n          aria-label={isPlaying ? 'Pause video' : 'Play video'}\n          {...restIconButton}\n        >\n          {isPlaying ? (\n            <PauseIcon data-testid=\"IndicatorPauseIcon\" {...pauseIconProps} />\n          ) : (\n            <PlayIcon data-testid=\"IndicatorPlayIcon\" {...playIconProps} />\n          )}\n        </IconButton>\n      </Box>\n    );\n  },\n);\n"],"names":["PlayPauseButton","forwardRef","progress","isPlaying","onClick","progressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx","rest","ref","progressSx","restProgress","iconButtonSx","restIconButton","PauseIcon","ControlsPauseIcon","PlayIcon","ControlsPlayIcon","_jsxs","Box","sxOverride","display","position","zIndex","width","height","_jsx","Spinner","value","size","thickness","inset","transform","stroke","theme","palette","brand","secondary","common","white","strokeWidth","IconButton","color"],"mappings":"qRAkDO,MAAMA,EAAkDC,EAAAA,WAC7D,EAEIC,WAAW,EACXC,YACAC,UACAC,gBACAC,kBACAC,iBACAC,qBACAC,gBACAC,oBACAC,WACAC,QACGC,GAELC,KAEA,MAAQF,GAAIG,KAAeC,GAAiBX,GAAiB,CAAA,GACrDO,GAAIK,KAAiBC,GAAmBZ,GAAmB,CAAA,EAC7Da,EAAYX,GAAsBY,EAAAA,kBAClCC,EAAWX,GAAqBY,EAAAA,iBAEtC,OACEC,EAAAA,KAACC,EAAAA,IAAG,CAAA,cACU,qBACZZ,GAAIa,aACF,CACEC,QAAS,cACTC,SAAU,WACVC,OAAQ,MACRC,MAAO,OACPC,OAAQ,QAEVlB,GAEFE,IAAKA,KACDD,EAAIF,SAAA,CAERoB,MAACC,EAAAA,QAAO,CACNC,MAAO/B,EACPgC,KAAM,GACNC,UAAW,EACXvB,GAAIa,aACF,CACEE,SAAU,WACVS,MAAO,IACPR,OAAQ,KAERS,UAAW,iBAEX,gCAAiC,CAC/BC,OAASC,GAAUA,EAAMC,QAAQC,MAAMC,WAEzC,kCAAmC,CACjCJ,OAASC,GAAUA,EAAMC,QAAQG,OAAOC,MAExCC,YAAa,QAGjB9B,MAEEC,IAENe,EAAAA,IAACe,EAAAA,WAAU,CAAA,cACG,sBACZ1C,QAASA,EACT2C,MAAM,QACNb,KAAK,SACLtB,GAAIa,EAAAA,WAAW,CAAEE,SAAU,WAAYS,MAAO,IAAKR,OAAQ,MAAQX,GAAa,aACpEd,EAAY,cAAgB,gBACpCe,WAEHf,EACC4B,EAAAA,IAACZ,EAAS,CAAA,cAAa,wBAAyBZ,IAEhDwB,MAACV,EAAQ,CAAA,cAAa,uBAAwBZ"}

package/cjs/components/progress/Loader.js

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

package/cjs/components/progress/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../../../src/components/progress/Loader.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, ReactNode } from 'react';\nimport { Box, BoxProps, LinearProgress, LinearProgressProps } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\n\nexport interface LoaderProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   */\n  size?: LinearProgressProps['size'] | number;\n  /**\n   * Additional label before LoaderText\n   */\n  label?: ReactNode;\n  /**\n   * Optional custom bar props.\n   */\n  barProps?: LinearProgressProps;\n  /**\n   * Properties applied to LoaderText\n   */\n  loadingTextProps?: LoadingTextProps;\n}\n\n/**\n * Wrapper of LinearProgress, automatically selecting the appropriate variant and appending LoaderText\n */\nexport const Loader: React.FC<LoaderProps> = forwardRef(\n  ({ className, value, size, barProps, label, loadingTextProps, ...rest }, ref) => {\n    const { sx: barSx, ...restBar } = barProps ?? {};\n\n    return (\n      <Box\n        data-testid=\"Loader\"\n        className={['FlowLoader-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        {...rest}\n      >\n        {value !== undefined && (\n          <LoadingText data-testid=\"Loader.percentage\" value={value} label={label} {...loadingTextProps} />\n        )}\n        <LinearProgress\n          value={value}\n          sx={{\n            ...(typeof size === 'number' && { height: `${size}px` }),\n            ...barSx,\n          }}\n          {...(typeof size !== 'number' && { size: size })}\n          {...(value !== undefined && {\n            variant: 'determinate',\n            ['aria-valuenow']: value,\n            ['aria-valuemin']: 0,\n            ['aria-valuemax']: 100,\n          })}\n          {...restBar}\n        />\n      </Box>\n    );\n  },\n);\n"],"names":["Loader","forwardRef","className","value","size","barProps","label","loadingTextProps","rest","ref","sx","barSx","restBar","_jsxs","Box","filter","Boolean","join","children","undefined","_jsx","LoadingText","LinearProgress","height","variant"],"mappings":"4HA8BO,MAAMA,EAAgCC,EAAAA,WAC3C,EAAGC,YAAWC,QAAOC,OAAMC,WAAUC,QAAOC,sBAAqBC,GAAQC,KACvE,MAAQC,GAAIC,KAAUC,GAAYP,GAAY,CAAA,EAE9C,OACEQ,EAAAA,KAACC,EAAAA,IAAG,CAAA,cACU,SACZZ,UAAW,CAAC,kBAAmBA,GAAWa,OAAOC,SAASC,KAAK,KAC/DR,IAAKA,KACDD,EAAIU,SAAA,MAEGC,IAAVhB,GACCiB,EAAAA,IAACC,cAAW,CAAA,cAAa,oBAAoBlB,MAAOA,EAAOG,MAAOA,KAAWC,IAE/Ea,EAAAA,IAACE,EAAAA,eAAc,CACbnB,MAAOA,EACPO,GAAI,IACkB,iBAATN,GAAqB,CAAEmB,OAAQ,GAAGnB,UAC1CO,MAEgB,iBAATP,GAAqB,CAAEA,KAAMA,WAC1Be,IAAVhB,GAAuB,CAC1BqB,QAAS,cACT,gBAAmBrB,EACnB,gBAAmB,EACnB,gBAAmB,QAEjBS"}
+{"version":3,"file":"Loader.js","sources":["../../../../../src/components/progress/Loader.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, ReactNode } from 'react';\nimport { Box, BoxProps, LinearProgress, LinearProgressProps } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface LoaderProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   */\n  size?: LinearProgressProps['size'] | number;\n  /**\n   * Additional label before LoaderText\n   */\n  label?: ReactNode;\n  /**\n   * Optional custom bar props.\n   */\n  barProps?: LinearProgressProps;\n  /**\n   * Properties applied to LoaderText\n   */\n  loadingTextProps?: LoadingTextProps;\n}\n\n/**\n * Wrapper of LinearProgress, automatically selecting the appropriate variant and appending LoaderText\n */\nexport const Loader: React.FC<LoaderProps> = forwardRef(\n  ({ className, value, size, barProps, label, loadingTextProps, ...rest }, ref) => {\n    const { sx: barSx, ...restBar } = barProps ?? {};\n\n    return (\n      <Box\n        data-testid=\"Loader\"\n        className={['FlowLoader-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        {...rest}\n      >\n        {value !== undefined && (\n          <LoadingText data-testid=\"Loader.percentage\" value={value} label={label} {...loadingTextProps} />\n        )}\n        <LinearProgress\n          value={value}\n          sx={sxOverride(\n            {\n              ...(typeof size === 'number' && { height: `${size}px` }),\n            },\n            barSx,\n          )}\n          {...(typeof size !== 'number' && { size: size })}\n          {...(value !== undefined && {\n            variant: 'determinate',\n            ['aria-valuenow']: value,\n            ['aria-valuemin']: 0,\n            ['aria-valuemax']: 100,\n          })}\n          {...restBar}\n        />\n      </Box>\n    );\n  },\n);\n"],"names":["Loader","forwardRef","className","value","size","barProps","label","loadingTextProps","rest","ref","sx","barSx","restBar","_jsxs","Box","filter","Boolean","join","children","undefined","_jsx","LoadingText","LinearProgress","sxOverride","height","variant"],"mappings":"8KA+BO,MAAMA,EAAgCC,EAAAA,WAC3C,EAAGC,YAAWC,QAAOC,OAAMC,WAAUC,QAAOC,sBAAqBC,GAAQC,KACvE,MAAQC,GAAIC,KAAUC,GAAYP,GAAY,CAAA,EAE9C,OACEQ,EAAAA,KAACC,EAAAA,IAAG,CAAA,cACU,SACZZ,UAAW,CAAC,kBAAmBA,GAAWa,OAAOC,SAASC,KAAK,KAC/DR,IAAKA,KACDD,EAAIU,SAAA,MAEGC,IAAVhB,GACCiB,EAAAA,IAACC,EAAAA,YAAW,CAAA,cAAa,oBAAoBlB,MAAOA,EAAOG,MAAOA,KAAWC,IAE/Ea,MAACE,EAAAA,eAAc,CACbnB,MAAOA,EACPO,GAAIa,aACF,IACsB,iBAATnB,GAAqB,CAAEoB,OAAQ,GAAGpB,QAE/CO,MAEmB,iBAATP,GAAqB,CAAEA,KAAMA,WAC1Be,IAAVhB,GAAuB,CAC1BsB,QAAS,cACT,gBAAmBtB,EACnB,gBAAmB,EACnB,gBAAmB,QAEjBS"}

package/cjs/components/progress/LoadingText.js

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

package/cjs/components/progress/LoadingText.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingText.js","sources":["../../../../../src/components/progress/LoadingText.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface LoadingTextProps extends BoxProps<ElementType> {\n  /**\n   * Value in percent to display\n   */\n  value?: number | string;\n  /**\n   * Additional label before the value\n   */\n  label?: ReactNode;\n  /**\n   * Affects font size\n   * @default medium\n   */\n  size?: 'small' | 'medium';\n}\n\n/**\n * Component displaying current state of loading\n */\nexport const LoadingText: React.FC<LoadingTextProps> = forwardRef(\n  ({ value, children, label, size = 'medium', sx, ...rest }, ref) => {\n    return (\n      <Box\n        sx={{\n          py: 0.5,\n          fontSize: '14px',\n          ...(size === 'small' && {\n            fontSize: '12px',\n          }),\n          lineHeight: '20px',\n          fontWeight: '400',\n          letterSpacing: '0.002em',\n          textAlign: 'right',\n          ...sx,\n        }}\n        {...rest}\n        ref={ref}\n      >\n        {label && (\n          <Box component=\"span\" sx={{ mr: 0.5 }}>\n            {label}\n          </Box>\n        )}\n        {children || (typeof value === 'number' ? `${value} %` : value)}\n      </Box>\n    );\n  },\n);\n"],"names":["LoadingText","forwardRef","value","children","label","size","sx","rest","ref","_jsxs","Box","py","fontSize","lineHeight","fontWeight","letterSpacing","textAlign","_jsx","component","mr"],"mappings":"8FAsBO,MAAMA,EAA0CC,EAAAA,WACrD,EAAGC,QAAOC,WAAUC,QAAOC,OAAO,SAAUC,QAAOC,GAAQC,IAEvDC,EAAAA,KAACC,MAAG,CACFJ,GAAI,CACFK,GAAI,GACJC,SAAU,UACG,UAATP,GAAoB,CACtBO,SAAU,QAEZC,WAAY,OACZC,WAAY,MACZC,cAAe,UACfC,UAAW,WACRV,MAEDC,EACJC,IAAKA,EAAGL,SAAA,CAEPC,GACCa,EAAAA,IAACP,EAAAA,KAAIQ,UAAU,OAAOZ,GAAI,CAAEa,GAAI,IAAKhB,SAClCC,IAGJD,IAA8B,iBAAVD,EAAqB,GAAGA,MAAYA"}
+{"version":3,"file":"LoadingText.js","sources":["../../../../../src/components/progress/LoadingText.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface LoadingTextProps extends BoxProps<ElementType> {\n  /**\n   * Value in percent to display\n   */\n  value?: number | string;\n  /**\n   * Additional label before the value\n   */\n  label?: ReactNode;\n  /**\n   * Affects font size\n   * @default medium\n   */\n  size?: 'small' | 'medium';\n}\n\n/**\n * Component displaying current state of loading\n */\nexport const LoadingText: React.FC<LoadingTextProps> = forwardRef(\n  ({ value, children, label, size = 'medium', sx, ...rest }, ref) => {\n    return (\n      <Box\n        sx={sxOverride(\n          {\n            py: 0.5,\n            fontSize: '14px',\n            ...(size === 'small' && {\n              fontSize: '12px',\n            }),\n            lineHeight: '20px',\n            fontWeight: '400',\n            letterSpacing: '0.002em',\n            textAlign: 'right',\n          },\n          sx,\n        )}\n        {...rest}\n        ref={ref}\n      >\n        {label && (\n          <Box component=\"span\" sx={{ mr: 0.5 }}>\n            {label}\n          </Box>\n        )}\n        {children || (typeof value === 'number' ? `${value} %` : value)}\n      </Box>\n    );\n  },\n);\n"],"names":["LoadingText","forwardRef","value","children","label","size","sx","rest","ref","_jsxs","Box","sxOverride","py","fontSize","lineHeight","fontWeight","letterSpacing","textAlign","_jsx","component","mr"],"mappings":"gJAuBO,MAAMA,EAA0CC,EAAAA,WACrD,EAAGC,QAAOC,WAAUC,QAAOC,OAAO,SAAUC,QAAOC,GAAQC,IAEvDC,OAACC,EAAAA,KACCJ,GAAIK,EAAAA,WACF,CACEC,GAAI,GACJC,SAAU,UACG,UAATR,GAAoB,CACtBQ,SAAU,QAEZC,WAAY,OACZC,WAAY,MACZC,cAAe,UACfC,UAAW,SAEbX,MAEEC,EACJC,IAAKA,EAAGL,SAAA,CAEPC,GACCc,EAAAA,IAACR,EAAAA,IAAG,CAACS,UAAU,OAAOb,GAAI,CAAEc,GAAI,IAAKjB,SAClCC,IAGJD,IAA8B,iBAAVD,EAAqB,GAAGA,MAAYA"}

package/cjs/components/progress/ProgressState.js

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

package/cjs/components/progress/ProgressState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressState.js","sources":["../../../../../src/components/progress/ProgressState.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef, useMemo, ComponentType } from 'react';\nimport { Box, BoxProps, SvgIconProps } from '@mui/material';\nimport { CheckIcon } from '@/src/components/icon/stroke/CheckIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\n\nexport interface ProgressStateProps extends BoxProps<ElementType> {\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * State to display\n   */\n  state?: 'error' | 'success';\n  /**\n   * Message when success appears\n   */\n  successMessage?: ReactNode;\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ReactNode;\n  /**\n   * Properties applied to message wrapper\n   */\n  messageProps?: LoadingTextProps;\n  /**\n   * Overwrites state message (successMessage or errorMessage)\n   */\n  message?: ReactNode;\n  /**\n   * Properties applied to icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Overwrites state icon\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to wrapper of icon\n   */\n  iconWrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component displaying current state of loading\n */\nexport const ProgressState: React.FC<ProgressStateProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      size = 'medium',\n      state,\n      message,\n      messageProps,\n      successMessage,\n      errorMessage,\n      IconComponent,\n      iconProps,\n      iconWrapperProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: iconWrapperSx, ...restIconWrapper } = iconWrapperProps ?? {};\n    const [IconStateComponent, stateMessage] = useMemo(() => {\n      switch (state) {\n        case 'error':\n          return [CloseIcon, errorMessage];\n        case 'success':\n        default:\n          return [CheckIcon, successMessage];\n      }\n    }, [state, successMessage, errorMessage]);\n    const ProgressStateIcon = IconComponent ?? IconStateComponent;\n\n    return (\n      <Box\n        data-testid=\"ProgressMessageWrapper\"\n        ref={ref}\n        sx={{\n          display: 'inline-flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          gap: 1,\n          ...sx,\n        }}\n        {...rest}\n      >\n        <Box\n          key={state}\n          sx={{\n            '@keyframes flow-progressstate-finished': {\n              '0%': {\n                transform: 'scale(.8)',\n                opacity: '0.8',\n              },\n              '100%': {\n                transform: 'scale(1)',\n                opacity: '1',\n              },\n            },\n            animation: 'flow-progressstate-finished 0.4s',\n            backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary'),\n            ...(state === 'error' && {\n              backgroundColor: 'error.main',\n            }),\n            color: 'common.white',\n            borderRadius: '50%',\n            lineHeight: '0',\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            ...(size === 'medium' && {\n              // 24px\n              p: 0.5,\n              '& .MuiSvgIcon-root': {\n                fontSize: '16px',\n              },\n            }),\n            ...(size === 'small' && {\n              // 16px\n              p: 0.25,\n              '& .MuiSvgIcon-root': {\n                fontSize: '12px',\n              },\n            }),\n            ...(typeof size === 'number' && {\n              height: `${size}px`,\n              width: `${size}px`,\n            }),\n            ...iconWrapperSx,\n          }}\n          {...restIconWrapper}\n        >\n          <ProgressStateIcon data-testid=\"Icon\" {...iconProps} />\n        </Box>\n        {(children || stateMessage || message) && (\n          <LoadingText\n            data-testid=\"ProgressMessage\"\n            {...(typeof size !== 'number' && { size: size })}\n            {...messageProps}\n          >\n            {children || stateMessage || message}\n          </LoadingText>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["ProgressState","forwardRef","children","sx","size","state","message","messageProps","successMessage","errorMessage","IconComponent","iconProps","iconWrapperProps","rest","ref","iconWrapperSx","restIconWrapper","IconStateComponent","stateMessage","useMemo","CloseIcon","CheckIcon","ProgressStateIcon","_jsxs","Box","display","justifyContent","alignItems","gap","_jsx","transform","opacity","animation","backgroundColor","theme","palette","mode","color","borderRadius","lineHeight","p","fontSize","height","width","LoadingText"],"mappings":"8MAiDO,MAAMA,EAA8CC,EAAAA,WACzD,EAEIC,WACAC,KACAC,OAAO,SACPC,QACAC,UACAC,eACAC,iBACAC,eACAC,gBACAC,YACAC,sBACGC,GAELC,KAEA,MAAQX,GAAIY,KAAkBC,GAAoBJ,GAAoB,CAAA,GAC/DK,EAAoBC,GAAgBC,EAAAA,QAAQ,IAE1C,UADCd,EAEG,CAACe,EAAAA,UAAWX,GAGZ,CAACY,EAAAA,UAAWb,GAEtB,CAACH,EAAOG,EAAgBC,IACrBa,EAAoBZ,GAAiBO,EAE3C,OACEM,EAAAA,KAACC,EAAAA,IAAG,CAAA,cACU,yBACZV,IAAKA,EACLX,GAAI,CACFsB,QAAS,cACTC,eAAgB,SAChBC,WAAY,SACZC,IAAK,KACFzB,MAEDU,EAAIX,SAAA,CAER2B,EAAAA,IAACL,EAAAA,IAAG,CAEFrB,GAAI,CACF,yCAA0C,CACxC,KAAM,CACJ2B,UAAW,YACXC,QAAS,OAEX,OAAQ,CACND,UAAW,WACXC,QAAS,MAGbC,UAAW,mCACXC,gBAAkBC,GAAkC,SAAvBA,EAAMC,QAAQC,KAAkB,kBAAoB,mBACnE,UAAV/B,GAAqB,CACvB4B,gBAAiB,cAEnBI,MAAO,eACPC,aAAc,MACdC,WAAY,IACZd,QAAS,cACTE,WAAY,SACZD,eAAgB,YACH,WAATtB,GAAqB,CAEvBoC,EAAG,GACH,qBAAsB,CACpBC,SAAU,YAGD,UAATrC,GAAoB,CAEtBoC,EAAG,IACH,qBAAsB,CACpBC,SAAU,YAGM,iBAATrC,GAAqB,CAC9BsC,OAAQ,GAAGtC,MACXuC,MAAO,GAAGvC,UAETW,MAEDC,WAEJa,EAAAA,IAACP,iBAA8B,UAAWX,KA7CrCN,IA+CLH,GAAYgB,GAAgBZ,IAC5BuB,MAACe,EAAAA,YAAW,CAAA,cACE,qBACS,iBAATxC,GAAqB,CAAEA,KAAMA,MACrCG,EAAYL,SAEfA,GAAYgB,GAAgBZ"}
+{"version":3,"file":"ProgressState.js","sources":["../../../../../src/components/progress/ProgressState.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef, useMemo, ComponentType } from 'react';\nimport { Box, BoxProps, SvgIconProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { CheckIcon } from '@/src/components/icon/stroke/CheckIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\n\nexport interface ProgressStateProps extends BoxProps<ElementType> {\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * State to display\n   */\n  state?: 'error' | 'success';\n  /**\n   * Message when success appears\n   */\n  successMessage?: ReactNode;\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ReactNode;\n  /**\n   * Properties applied to message wrapper\n   */\n  messageProps?: LoadingTextProps;\n  /**\n   * Overwrites state message (successMessage or errorMessage)\n   */\n  message?: ReactNode;\n  /**\n   * Properties applied to icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Overwrites state icon\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to wrapper of icon\n   */\n  iconWrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component displaying current state of loading\n */\nexport const ProgressState: React.FC<ProgressStateProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      size = 'medium',\n      state,\n      message,\n      messageProps,\n      successMessage,\n      errorMessage,\n      IconComponent,\n      iconProps,\n      iconWrapperProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: iconWrapperSx, ...restIconWrapper } = iconWrapperProps ?? {};\n    const [IconStateComponent, stateMessage] = useMemo(() => {\n      switch (state) {\n        case 'error':\n          return [CloseIcon, errorMessage];\n        case 'success':\n        default:\n          return [CheckIcon, successMessage];\n      }\n    }, [state, successMessage, errorMessage]);\n    const ProgressStateIcon = IconComponent ?? IconStateComponent;\n\n    return (\n      <Box\n        data-testid=\"ProgressMessageWrapper\"\n        ref={ref}\n        sx={sxOverride(\n          {\n            display: 'inline-flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n            gap: 1,\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        <Box\n          key={state}\n          sx={sxOverride(\n            {\n              '@keyframes flow-progressstate-finished': {\n                '0%': {\n                  transform: 'scale(.8)',\n                  opacity: '0.8',\n                },\n                '100%': {\n                  transform: 'scale(1)',\n                  opacity: '1',\n                },\n              },\n              animation: 'flow-progressstate-finished 0.4s',\n              backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary'),\n              ...(state === 'error' && {\n                backgroundColor: 'error.main',\n              }),\n              color: 'common.white',\n              borderRadius: '50%',\n              lineHeight: '0',\n              display: 'inline-flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              ...(size === 'medium' && {\n                // 24px\n                p: 0.5,\n                '& .MuiSvgIcon-root': {\n                  fontSize: '16px',\n                },\n              }),\n              ...(size === 'small' && {\n                // 16px\n                p: 0.25,\n                '& .MuiSvgIcon-root': {\n                  fontSize: '12px',\n                },\n              }),\n              ...(typeof size === 'number' && {\n                height: `${size}px`,\n                width: `${size}px`,\n              }),\n            },\n            iconWrapperSx,\n          )}\n          {...restIconWrapper}\n        >\n          <ProgressStateIcon data-testid=\"Icon\" {...iconProps} />\n        </Box>\n        {(children || stateMessage || message) && (\n          <LoadingText\n            data-testid=\"ProgressMessage\"\n            {...(typeof size !== 'number' && { size: size })}\n            {...messageProps}\n          >\n            {children || stateMessage || message}\n          </LoadingText>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["ProgressState","forwardRef","children","sx","size","state","message","messageProps","successMessage","errorMessage","IconComponent","iconProps","iconWrapperProps","rest","ref","iconWrapperSx","restIconWrapper","IconStateComponent","stateMessage","useMemo","CloseIcon","CheckIcon","ProgressStateIcon","_jsxs","Box","sxOverride","display","justifyContent","alignItems","gap","_jsx","transform","opacity","animation","backgroundColor","theme","palette","mode","color","borderRadius","lineHeight","p","fontSize","height","width","LoadingText"],"mappings":"gQAkDO,MAAMA,EAA8CC,EAAAA,WACzD,EAEIC,WACAC,KACAC,OAAO,SACPC,QACAC,UACAC,eACAC,iBACAC,eACAC,gBACAC,YACAC,sBACGC,GAELC,KAEA,MAAQX,GAAIY,KAAkBC,GAAoBJ,GAAoB,CAAA,GAC/DK,EAAoBC,GAAgBC,EAAAA,QAAQ,IAE1C,UADCd,EAEG,CAACe,EAAAA,UAAWX,GAGZ,CAACY,EAAAA,UAAWb,GAEtB,CAACH,EAAOG,EAAgBC,IACrBa,EAAoBZ,GAAiBO,EAE3C,OACEM,EAAAA,KAACC,EAAAA,IAAG,CAAA,cACU,yBACZV,IAAKA,EACLX,GAAIsB,aACF,CACEC,QAAS,cACTC,eAAgB,SAChBC,WAAY,SACZC,IAAK,GAEP1B,MAEEU,EAAIX,SAAA,CAER4B,EAAAA,IAACN,EAAAA,IAAG,CAEFrB,GAAIsB,aACF,CACE,yCAA0C,CACxC,KAAM,CACJM,UAAW,YACXC,QAAS,OAEX,OAAQ,CACND,UAAW,WACXC,QAAS,MAGbC,UAAW,mCACXC,gBAAkBC,GAAkC,SAAvBA,EAAMC,QAAQC,KAAkB,kBAAoB,mBACnE,UAAVhC,GAAqB,CACvB6B,gBAAiB,cAEnBI,MAAO,eACPC,aAAc,MACdC,WAAY,IACZd,QAAS,cACTE,WAAY,SACZD,eAAgB,YACH,WAATvB,GAAqB,CAEvBqC,EAAG,GACH,qBAAsB,CACpBC,SAAU,YAGD,UAATtC,GAAoB,CAEtBqC,EAAG,IACH,qBAAsB,CACpBC,SAAU,YAGM,iBAATtC,GAAqB,CAC9BuC,OAAQ,GAAGvC,MACXwC,MAAO,GAAGxC,QAGdW,MAEEC,EAAed,SAEnB4B,EAAAA,IAACR,EAAiB,CAAA,cAAa,UAAWX,KA/CrCN,IAiDLH,GAAYgB,GAAgBZ,IAC5BwB,EAAAA,IAACe,EAAAA,2BACa,qBACS,iBAATzC,GAAqB,CAAEA,KAAMA,MACrCG,EAAYL,SAEfA,GAAYgB,GAAgBZ"}

package/cjs/components/progress/Spinner.js

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