@skodaflow/web-library 7.15.0 → 7.16.0

package/components/notification/Notification.js

@@ -1,2 +1,2 @@
-import{__rest as i}from"tslib";import{jsxs as s,jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Box as o,Typography as r,IconButton as n,Stack as a}from"@mui/material";import{Label as c}from"../label/label.js";import{CloseIcon as l}from"../icon/stroke/CloseIcon.js";const p=e(((e,p)=>{var{sx:d,headline:x,titleProps:f,titleWrapperProps:m,description:b,descriptionProps:g,wrapperProps:h,color:u,isNew:j,headerProps:O,icon:w,iconProps:P,footer:v,buttons:y,buttonsProps:N,footerProps:k,onDismiss:I,closeIconButtonProps:C,closeIconProps:W,children:D}=e,S=i(e,["sx","headline","titleProps","titleWrapperProps","description","descriptionProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children"]);const B=null!=h?h:{},{sx:z}=B,M=i(B,["sx"]),F=null!=O?O:{},{sx:G}=F,L=i(F,["sx"]),R=null!=N?N:{},{sx:V}=R,q=i(R,["sx"]),A=null!=g?g:{},{sx:E}=A,H=i(A,["sx"]),J=null!=f?f:{},{sx:K}=J,Q=i(J,["sx"]),T=null!=C?C:{},{sx:U}=T,X=i(T,["sx"]),Y=null!=P?P:{},{sx:Z}=Y,$=i(Y,["sx"]);return s(o,Object.assign({ref:p,sx:Object.assign({backgroundColor:"grey"===u?"surface.primary":"background.primary",padding:"16px 16px 24px",display:"flex",flexDirection:"row",gap:2,position:"relative"},d),"data-testid":"Notification"},S,{children:[w&&t(o,Object.assign({sx:Object.assign({display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"50%",width:{xs:"32px",md:"56px"},height:{xs:"32px",md:"56px"},backgroundColor:"transparent.backdrop",flexShrink:"0",overflow:"hidden","& img":{width:"100%",height:"100%",objectFit:"cover"},"& .MuiSvgIcon-root":{width:{xs:"22px",md:"32px"},height:{xs:"22px",md:"32px"}}},Z),"data-testid":"Notification.icon"},$,{children:w})),s(o,Object.assign({sx:Object.assign({width:"100%",maxWidth:"100%",overflow:"hidden",display:"flex",gap:"4px",flexDirection:"column",padding:"4px","&:hover .notification-dismiss":{opacity:"1"}},z)},M,{children:[s(o,Object.assign({sx:Object.assign({display:"flex",alignItems:"center",justifyContent:"flex-start",gap:1},G)},L,{children:[j&&t(c,{type:"indicator",variant:"neutral"}),t(r,Object.assign({variant:"subheadline",sx:Object.assign({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",flexGrow:"1",minWidth:"0"},K),"data-testid":"Notification.headline"},Q,{children:x})),I&&t(n,Object.assign({"aria-label":"Dismiss notification",onClick:I,size:"small",className:"notification-dismiss",sx:Object.assign({padding:"2px",opacity:{xs:"1",md:"0"},"&.Mui-focusVisible":{opacity:"1"}},U),"data-testid":"Notification.dismiss"},X,{children:t(l,Object.assign({fontSize:"small",className:"ballotx",name:"close"},W))}))]})),t(o,{"data-testid":"Notification.description",children:"string"==typeof D||"string"==typeof b?t(r,Object.assign({sx:Object.assign({overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitLineClamp:"2",WebkitBoxOrient:"vertical"},E),variant:"disclaimer1"},H,{children:D||b})):D||b}),v&&t(r,Object.assign({variant:"disclaimer1",color:"onSurface.os600","data-testid":"Notification.footer"},k,{children:v})),y&&t(a,Object.assign({direction:"row",sx:Object.assign({mt:1.5},V),spacing:1,"data-testid":"Notification.buttons"},q,{children:y}))]}))]}))}));export{p as Notification};
+import{__rest as i}from"tslib";import{jsxs as s,jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Box as o,Typography as r,IconButton as n,Stack as a}from"@mui/material";import{Label as c}from"../label/label.js";import{CloseIcon as l}from"../icon/stroke/CloseIcon.js";const p=e((e,p)=>{var{sx:d,headline:x,titleProps:f,titleWrapperProps:m,description:b,descriptionProps:g,wrapperProps:h,color:u,isNew:j,headerProps:O,icon:w,iconProps:P,footer:v,buttons:y,buttonsProps:N,footerProps:k,onDismiss:I,closeIconButtonProps:C,closeIconProps:W,children:D}=e,S=i(e,["sx","headline","titleProps","titleWrapperProps","description","descriptionProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children"]);const B=null!=h?h:{},{sx:z}=B,M=i(B,["sx"]),F=null!=O?O:{},{sx:G}=F,L=i(F,["sx"]),R=null!=N?N:{},{sx:V}=R,q=i(R,["sx"]),A=null!=g?g:{},{sx:E}=A,H=i(A,["sx"]),J=null!=f?f:{},{sx:K}=J,Q=i(J,["sx"]),T=null!=C?C:{},{sx:U}=T,X=i(T,["sx"]),Y=null!=P?P:{},{sx:Z}=Y,$=i(Y,["sx"]);return s(o,Object.assign({ref:p,sx:Object.assign({backgroundColor:"grey"===u?"surface.primary":"background.primary",padding:"16px 16px 24px",display:"flex",flexDirection:"row",gap:2,position:"relative"},d),"data-testid":"Notification"},S,{children:[w&&t(o,Object.assign({sx:Object.assign({display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"50%",width:{xs:"32px",md:"56px"},height:{xs:"32px",md:"56px"},backgroundColor:"transparent.backdrop",flexShrink:"0",overflow:"hidden","& img":{width:"100%",height:"100%",objectFit:"cover"},"& .MuiSvgIcon-root":{width:{xs:"22px",md:"32px"},height:{xs:"22px",md:"32px"}}},Z),"data-testid":"Notification.icon"},$,{children:w})),s(o,Object.assign({sx:Object.assign({width:"100%",maxWidth:"100%",overflow:"hidden",display:"flex",gap:"4px",flexDirection:"column",padding:"4px","&:hover .notification-dismiss":{opacity:"1"}},z)},M,{children:[s(o,Object.assign({sx:Object.assign({display:"flex",alignItems:"center",justifyContent:"flex-start",gap:1},G)},L,{children:[j&&t(c,{type:"indicator",variant:"neutral"}),t(r,Object.assign({variant:"subheadline",sx:Object.assign({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",flexGrow:"1",minWidth:"0"},K),"data-testid":"Notification.headline"},Q,{children:x})),I&&t(n,Object.assign({"aria-label":"Dismiss notification",onClick:I,size:"small",className:"notification-dismiss",sx:Object.assign({padding:"2px",opacity:{xs:"1",md:"0"},"&.Mui-focusVisible":{opacity:"1"}},U),"data-testid":"Notification.dismiss"},X,{children:t(l,Object.assign({fontSize:"small",className:"ballotx",name:"close"},W))}))]})),t(o,{"data-testid":"Notification.description",children:"string"==typeof D||"string"==typeof b?t(r,Object.assign({sx:Object.assign({overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitLineClamp:"2",WebkitBoxOrient:"vertical"},E),variant:"disclaimer1"},H,{children:D||b})):D||b}),v&&t(r,Object.assign({variant:"disclaimer1",color:"onSurface.os600","data-testid":"Notification.footer"},k,{children:v})),y&&t(a,Object.assign({direction:"row",sx:Object.assign({mt:1.5},V),spacing:1,"data-testid":"Notification.buttons"},q,{children:y}))]}))]}))});export{p as Notification};
 //# sourceMappingURL=Notification.js.map

package/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   * Longer description of the notification\n   * @deprecated use prop children instead\n   */\n  description?: React.ReactNode;\n  /**\n   * Custom props for the description container\n   */\n  descriptionProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the wrapper container\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * Different color options for the notification\n   */\n  color?: 'white' | 'grey';\n  /**\n   * Indicates if the notification is new\n   */\n  isNew?: boolean;\n  /**\n   * Custom props for the header container\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Icon to display in the notification\n   */\n  icon?: React.ReactNode;\n  /**\n   * Custom props for the icon container\n   */\n  iconProps?: BoxProps<ElementType>;\n  /**\n   * Footer text for the notification\n   */\n  footer?: React.ReactNode;\n  /**\n   * Control Buttons to display in the notification\n   */\n  buttons?: React.ReactNode;\n  /**\n   * Custom props for the buttons container\n   */\n  buttonsProps?: StackProps<ElementType>;\n  /**\n   * Custom props for the footer container\n   */\n  footerProps?: TypographyProps<ElementType>;\n  /**\n   * Callback function when the notification is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Custom props for the close icon container\n   */\n  closeIconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  closeIconProps?: IconProps<ElementType>;\n}\n\n/**\n * Component that renders an notification\n */\nexport const Notification: FC<NotificationProps> = forwardRef(\n  (\n    {\n      sx,\n      headline,\n      titleProps,\n      titleWrapperProps,\n      description,\n      descriptionProps,\n      wrapperProps,\n      color,\n      isNew,\n      headerProps,\n      icon,\n      iconProps,\n      footer,\n      buttons,\n      buttonsProps,\n      footerProps,\n      onDismiss,\n      closeIconButtonProps,\n      closeIconProps,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n    const { sx: descriptionSx, ...restDescription } = descriptionProps ?? {};\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n    const { sx: closeIconButtonSx, ...restCloseIconButton } = closeIconButtonProps ?? {};\n\n    const { sx: iconSx, ...restIcon } = iconProps ?? {};\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          backgroundColor: color === 'grey' ? 'surface.primary' : 'background.primary',\n          padding: '16px 16px 24px',\n          display: 'flex',\n          flexDirection: 'row',\n          gap: 2,\n          position: 'relative',\n          ...sx,\n        }}\n        data-testid=\"Notification\"\n        {...rest}\n      >\n        {icon && (\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              borderRadius: '50%',\n              width: { xs: '32px', md: '56px' },\n              height: { xs: '32px', md: '56px' },\n              backgroundColor: 'transparent.backdrop',\n              flexShrink: '0',\n              overflow: 'hidden',\n              '& img': { width: '100%', height: '100%', objectFit: 'cover' },\n              '& .MuiSvgIcon-root': {\n                width: { xs: '22px', md: '32px' },\n                height: { xs: '22px', md: '32px' },\n              },\n              ...iconSx,\n            }}\n            data-testid=\"Notification.icon\"\n            {...restIcon}\n          >\n            {icon}\n          </Box>\n        )}\n        <Box\n          sx={{\n            width: '100%',\n            maxWidth: '100%',\n            overflow: 'hidden',\n            display: 'flex',\n            gap: '4px',\n            flexDirection: 'column',\n            // Small padding to prevent focus ring trimming\n            padding: '4px',\n            // show dismiss button on hover Desktop + Tablet\n            '&:hover .notification-dismiss': {\n              opacity: '1',\n            },\n            ...wrapperSx,\n          }}\n          {...restWrapper}\n        >\n          <Box\n            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 1, ...headerSx }}\n            {...restHeader}\n          >\n            {isNew && <Label type=\"indicator\" variant=\"neutral\" />}\n\n            <Typography\n              variant=\"subheadline\"\n              sx={{\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                flexGrow: '1',\n                minWidth: '0',\n                ...titleSx,\n              }}\n              data-testid=\"Notification.headline\"\n              {...restTitle}\n            >\n              {headline}\n            </Typography>\n\n            {onDismiss && (\n              <IconButton\n                aria-label=\"Dismiss notification\"\n                onClick={onDismiss}\n                size=\"small\"\n                className=\"notification-dismiss\"\n                sx={{\n                  padding: '2px',\n                  // hide dismiss button Desktop + Tablet, keep on mobile\n                  opacity: { xs: '1', md: '0' },\n                  // show dismiss button on focus\n                  '&.Mui-focusVisible': {\n                    opacity: '1',\n                  },\n                  ...closeIconButtonSx,\n                }}\n                data-testid=\"Notification.dismiss\"\n                {...restCloseIconButton}\n              >\n                <CloseIcon fontSize=\"small\" className=\"ballotx\" name=\"close\" {...closeIconProps} />\n              </IconButton>\n            )}\n          </Box>\n          <Box data-testid=\"Notification.description\">\n            {typeof children === 'string' || typeof description === 'string' ? (\n              <Typography\n                sx={{\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  display: '-webkit-box',\n                  WebkitLineClamp: '2',\n                  WebkitBoxOrient: 'vertical',\n                  ...descriptionSx,\n                }}\n                variant=\"disclaimer1\"\n                {...restDescription}\n              >\n                {children || description}\n              </Typography>\n            ) : (\n              children || description\n            )}\n          </Box>\n          {footer && (\n            <Typography\n              variant=\"disclaimer1\"\n              color={'onSurface.os600'}\n              data-testid=\"Notification.footer\"\n              {...footerProps}\n            >\n              {footer}\n            </Typography>\n          )}\n          {buttons && (\n            <Stack\n              direction=\"row\"\n              sx={{ mt: 1.5, ...buttonsSx }}\n              spacing={1}\n              data-testid=\"Notification.buttons\"\n              {...restButtons}\n            >\n              {buttons}\n            </Stack>\n          )}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["Notification","forwardRef","_a","ref","sx","headline","titleProps","titleWrapperProps","description","descriptionProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children","rest","__rest","_b","wrapperSx","restWrapper","_c","headerSx","restHeader","_d","buttonsSx","restButtons","_e","descriptionSx","restDescription","_f","titleSx","restTitle","_g","closeIconButtonSx","restCloseIconButton","_h","iconSx","restIcon","_jsxs","Box","Object","assign","backgroundColor","padding","display","flexDirection","gap","position","_jsx","justifyContent","alignItems","borderRadius","width","xs","md","height","flexShrink","overflow","objectFit","maxWidth","opacity","Label","type","variant","Typography","whiteSpace","textOverflow","flexGrow","minWidth","IconButton","onClick","size","className","CloseIcon","fontSize","name","WebkitLineClamp","WebkitBoxOrient","Stack","direction","mt","spacing"],"mappings":"qSA8Fa,MAAAA,EAAsCC,GACjD,CACEC,EAuBAC,SAvBAC,GACEA,EAAEC,SACFA,EAAQC,WACRA,EAAUC,kBACVA,EAAiBC,YACjBA,EAAWC,iBACXA,EAAgBC,aAChBA,EAAYC,MACZA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,KACXA,EAAIC,UACJA,EAASC,OACTA,EAAMC,QACNA,EAAOC,aACPA,EAAYC,YACZA,EAAWC,UACXA,EAASC,qBACTA,EAAoBC,eACpBA,EAAcC,SACdA,GAAQrB,EACLsB,EAAIC,EAAAvB,EArBT,oQAyBA,MAAMwB,EAAoChB,QAAAA,EAAgB,IAAlDN,GAAIuB,GAAgDD,EAAlCE,EAApBH,EAAAC,EAAA,CAAA,OACAG,EAAkChB,QAAAA,EAAe,IAA/CT,GAAI0B,GAA6CD,EAAhCE,EAAnBN,EAAAI,EAAA,CAAA,OACAG,EAAoCd,QAAAA,EAAgB,IAAlDd,GAAI6B,GAAgDD,EAAlCE,EAApBT,EAAAO,EAAA,CAAA,OACAG,EAA4C1B,QAAAA,EAAoB,IAA9DL,GAAIgC,GAA4DD,EAA1CE,EAAxBZ,EAAAU,EAAA,CAAA,OACAG,EAAgChC,QAAAA,EAAc,IAA5CF,GAAImC,GAA0CD,EAA9BE,EAAlBf,EAAAa,EAAA,CAAA,OACAG,EAAoDpB,QAAAA,EAAwB,IAA1EjB,GAAIsC,GAAwED,EAAlDE,EAA5BlB,EAAAgB,EAAA,CAAA,OAEAG,EAA8B7B,QAAAA,EAAa,IAAzCX,GAAIyC,GAAuCD,EAA5BE,EAAjBrB,EAAAmB,EAAA,CAAA,OACN,OACEG,EAACC,EAAGC,OAAAC,OAAA,CACF/C,IAAKA,EACLC,GAAE6C,OAAAC,OAAA,CACAC,gBAA2B,SAAVxC,EAAmB,kBAAoB,qBACxDyC,QAAS,iBACTC,QAAS,OACTC,cAAe,MACfC,IAAK,EACLC,SAAU,YACPpD,GAAE,cAEK,gBACRoB,EAAI,CAAAD,SAAA,CAEPT,GACC2C,EAACT,EAAGC,OAAAC,OAAA,CACF9C,GAAE6C,OAAAC,OAAA,CACAG,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,UAEzBlB,GAEO,cAAA,qBACRC,YAEHhC,KAGLiC,EAACC,EAAGC,OAAAC,OAAA,CACF9C,GAAE6C,OAAAC,OAAA,CACAW,MAAO,OACPO,SAAU,OACVF,SAAU,SACVb,QAAS,OACTE,IAAK,MACLD,cAAe,SAEfF,QAAS,MAET,gCAAiC,CAC/BiB,QAAS,MAER1C,IAEDC,EAAW,CAAAL,SAAA,CAEfwB,EAACC,EAAGC,OAAAC,OAAA,CACF9C,GAAE6C,OAAAC,OAAA,CAAIG,QAAS,OAAQM,WAAY,SAAUD,eAAgB,aAAcH,IAAK,GAAMzB,IAClFC,aAEHnB,GAAS6C,EAACa,EAAK,CAACC,KAAK,YAAYC,QAAQ,YAE1Cf,EAACgB,iBACCD,QAAQ,cACRpE,GAAE6C,OAAAC,OAAA,CACAwB,WAAY,SACZR,SAAU,SACVS,aAAc,WACdC,SAAU,IACVC,SAAU,KACPtC,GAEO,cAAA,yBACRC,EAEH,CAAAjB,SAAAlB,KAGFe,GACCqC,EAACqB,8BACY,uBACXC,QAAS3D,EACT4D,KAAK,QACLC,UAAU,uBACV7E,GAAE6C,OAAAC,OAAA,CACAE,QAAS,MAETiB,QAAS,CAAEP,GAAI,IAAKC,GAAI,KAExB,qBAAsB,CACpBM,QAAS,MAER3B,GAAiB,cAEV,wBACRC,EAEJ,CAAApB,SAAAkC,EAACyB,EAASjC,OAAAC,OAAA,CAACiC,SAAS,QAAQF,UAAU,UAAUG,KAAK,SAAY9D,WAIvEmC,EAACT,EAAG,CAAA,cAAa,2BAA0BzB,SACpB,iBAAbA,GAAgD,iBAAhBf,EACtCiD,EAACgB,EACCxB,OAAAC,OAAA,CAAA9C,GACE6C,OAAAC,OAAA,CAAAgB,SAAU,SACVS,aAAc,WACdtB,QAAS,cACTgC,gBAAiB,IACjBC,gBAAiB,YACdlD,GAELoC,QAAQ,eACJnC,EAEH,CAAAd,SAAAA,GAAYf,KAGfe,GAAYf,IAGfQ,GACCyC,EAACgB,iBACCD,QAAQ,cACR7D,MAAO,kBACK,cAAA,uBACRQ,EAAW,CAAAI,SAEdP,KAGJC,GACCwC,EAAC8B,EACCtC,OAAAC,OAAA,CAAAsC,UAAU,MACVpF,GAAE6C,OAAAC,OAAA,CAAIuC,GAAI,KAAQxD,GAClByD,QAAS,gBACG,wBACRxD,EAAW,CAAAX,SAEdN,YAIH"}
+{"version":3,"file":"Notification.js","sources":["../../../src/components/notification/Notification.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  Typography,\n  TypographyProps,\n  Stack,\n  IconButton,\n  StackProps,\n  IconButtonProps,\n  IconProps,\n} from '@mui/material';\nimport { Label } from '@/src/components/label/label';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationProps extends BoxProps<ElementType> {\n  /**\n   * headline of the notification\n   */\n  headline?: React.ReactNode;\n  /**\n   * Custom props for the headline\n   */\n  headlineProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Longer description of the notification\n   * @deprecated use prop children instead\n   */\n  description?: React.ReactNode;\n  /**\n   * Custom props for the description container\n   */\n  descriptionProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the wrapper container\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * Different color options for the notification\n   */\n  color?: 'white' | 'grey';\n  /**\n   * Indicates if the notification is new\n   */\n  isNew?: boolean;\n  /**\n   * Custom props for the header container\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Icon to display in the notification\n   */\n  icon?: React.ReactNode;\n  /**\n   * Custom props for the icon container\n   */\n  iconProps?: BoxProps<ElementType>;\n  /**\n   * Footer text for the notification\n   */\n  footer?: React.ReactNode;\n  /**\n   * Control Buttons to display in the notification\n   */\n  buttons?: React.ReactNode;\n  /**\n   * Custom props for the buttons container\n   */\n  buttonsProps?: StackProps<ElementType>;\n  /**\n   * Custom props for the footer container\n   */\n  footerProps?: TypographyProps<ElementType>;\n  /**\n   * Callback function when the notification is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Custom props for the close icon container\n   */\n  closeIconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  closeIconProps?: IconProps<ElementType>;\n}\n\n/**\n * Component that renders an notification\n */\nexport const Notification: FC<NotificationProps> = forwardRef(\n  (\n    {\n      sx,\n      headline,\n      titleProps,\n      titleWrapperProps,\n      description,\n      descriptionProps,\n      wrapperProps,\n      color,\n      isNew,\n      headerProps,\n      icon,\n      iconProps,\n      footer,\n      buttons,\n      buttonsProps,\n      footerProps,\n      onDismiss,\n      closeIconButtonProps,\n      closeIconProps,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n    const { sx: descriptionSx, ...restDescription } = descriptionProps ?? {};\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n    const { sx: closeIconButtonSx, ...restCloseIconButton } = closeIconButtonProps ?? {};\n\n    const { sx: iconSx, ...restIcon } = iconProps ?? {};\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          backgroundColor: color === 'grey' ? 'surface.primary' : 'background.primary',\n          padding: '16px 16px 24px',\n          display: 'flex',\n          flexDirection: 'row',\n          gap: 2,\n          position: 'relative',\n          ...sx,\n        }}\n        data-testid=\"Notification\"\n        {...rest}\n      >\n        {icon && (\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              borderRadius: '50%',\n              width: { xs: '32px', md: '56px' },\n              height: { xs: '32px', md: '56px' },\n              backgroundColor: 'transparent.backdrop',\n              flexShrink: '0',\n              overflow: 'hidden',\n              '& img': { width: '100%', height: '100%', objectFit: 'cover' },\n              '& .MuiSvgIcon-root': {\n                width: { xs: '22px', md: '32px' },\n                height: { xs: '22px', md: '32px' },\n              },\n              ...iconSx,\n            }}\n            data-testid=\"Notification.icon\"\n            {...restIcon}\n          >\n            {icon}\n          </Box>\n        )}\n        <Box\n          sx={{\n            width: '100%',\n            maxWidth: '100%',\n            overflow: 'hidden',\n            display: 'flex',\n            gap: '4px',\n            flexDirection: 'column',\n            // Small padding to prevent focus ring trimming\n            padding: '4px',\n            // show dismiss button on hover Desktop + Tablet\n            '&:hover .notification-dismiss': {\n              opacity: '1',\n            },\n            ...wrapperSx,\n          }}\n          {...restWrapper}\n        >\n          <Box\n            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 1, ...headerSx }}\n            {...restHeader}\n          >\n            {isNew && <Label type=\"indicator\" variant=\"neutral\" />}\n\n            <Typography\n              variant=\"subheadline\"\n              sx={{\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                flexGrow: '1',\n                minWidth: '0',\n                ...titleSx,\n              }}\n              data-testid=\"Notification.headline\"\n              {...restTitle}\n            >\n              {headline}\n            </Typography>\n\n            {onDismiss && (\n              <IconButton\n                aria-label=\"Dismiss notification\"\n                onClick={onDismiss}\n                size=\"small\"\n                className=\"notification-dismiss\"\n                sx={{\n                  padding: '2px',\n                  // hide dismiss button Desktop + Tablet, keep on mobile\n                  opacity: { xs: '1', md: '0' },\n                  // show dismiss button on focus\n                  '&.Mui-focusVisible': {\n                    opacity: '1',\n                  },\n                  ...closeIconButtonSx,\n                }}\n                data-testid=\"Notification.dismiss\"\n                {...restCloseIconButton}\n              >\n                <CloseIcon fontSize=\"small\" className=\"ballotx\" name=\"close\" {...closeIconProps} />\n              </IconButton>\n            )}\n          </Box>\n          <Box data-testid=\"Notification.description\">\n            {typeof children === 'string' || typeof description === 'string' ? (\n              <Typography\n                sx={{\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  display: '-webkit-box',\n                  WebkitLineClamp: '2',\n                  WebkitBoxOrient: 'vertical',\n                  ...descriptionSx,\n                }}\n                variant=\"disclaimer1\"\n                {...restDescription}\n              >\n                {children || description}\n              </Typography>\n            ) : (\n              children || description\n            )}\n          </Box>\n          {footer && (\n            <Typography\n              variant=\"disclaimer1\"\n              color={'onSurface.os600'}\n              data-testid=\"Notification.footer\"\n              {...footerProps}\n            >\n              {footer}\n            </Typography>\n          )}\n          {buttons && (\n            <Stack\n              direction=\"row\"\n              sx={{ mt: 1.5, ...buttonsSx }}\n              spacing={1}\n              data-testid=\"Notification.buttons\"\n              {...restButtons}\n            >\n              {buttons}\n            </Stack>\n          )}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["Notification","forwardRef","_a","ref","sx","headline","titleProps","titleWrapperProps","description","descriptionProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children","rest","__rest","_b","wrapperSx","restWrapper","_c","headerSx","restHeader","_d","buttonsSx","restButtons","_e","descriptionSx","restDescription","_f","titleSx","restTitle","_g","closeIconButtonSx","restCloseIconButton","_h","iconSx","restIcon","_jsxs","Box","Object","assign","backgroundColor","padding","display","flexDirection","gap","position","_jsx","justifyContent","alignItems","borderRadius","width","xs","md","height","flexShrink","overflow","objectFit","maxWidth","opacity","Label","type","variant","Typography","whiteSpace","textOverflow","flexGrow","minWidth","IconButton","onClick","size","className","CloseIcon","fontSize","name","WebkitLineClamp","WebkitBoxOrient","Stack","direction","mt","spacing"],"mappings":"qSA8FO,MAAMA,EAAsCC,EACjD,CACEC,EAuBAC,SAvBAC,GACEA,EAAEC,SACFA,EAAQC,WACRA,EAAUC,kBACVA,EAAiBC,YACjBA,EAAWC,iBACXA,EAAgBC,aAChBA,EAAYC,MACZA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,KACXA,EAAIC,UACJA,EAASC,OACTA,EAAMC,QACNA,EAAOC,aACPA,EAAYC,YACZA,EAAWC,UACXA,EAASC,qBACTA,EAAoBC,eACpBA,EAAcC,SACdA,GAAQrB,EACLsB,EAAIC,EAAAvB,EArBT,oQAyBA,MAAMwB,EAAoChB,QAAAA,EAAgB,IAAlDN,GAAIuB,GAASD,EAAKE,EAAWH,EAAAC,EAA/B,CAAA,OACAG,EAAkChB,QAAAA,EAAe,IAA/CT,GAAI0B,GAAQD,EAAKE,EAAUN,EAAAI,EAA7B,CAAA,OACAG,EAAoCd,QAAAA,EAAgB,IAAlDd,GAAI6B,GAASD,EAAKE,EAAWT,EAAAO,EAA/B,CAAA,OACAG,EAA4C1B,QAAAA,EAAoB,IAA9DL,GAAIgC,GAAaD,EAAKE,EAAeZ,EAAAU,EAAvC,CAAA,OACAG,EAAgChC,QAAAA,EAAc,IAA5CF,GAAImC,GAAOD,EAAKE,EAASf,EAAAa,EAA3B,CAAA,OACAG,EAAoDpB,QAAAA,EAAwB,IAA1EjB,GAAIsC,GAAiBD,EAAKE,EAAmBlB,EAAAgB,EAA/C,CAAA,OAEAG,EAA8B7B,QAAAA,EAAa,IAAzCX,GAAIyC,GAAMD,EAAKE,EAAQrB,EAAAmB,EAAzB,CAAA,OACN,OACEG,EAACC,EAAGC,OAAAC,OAAA,CACF/C,IAAKA,EACLC,GAAE6C,OAAAC,OAAA,CACAC,gBAA2B,SAAVxC,EAAmB,kBAAoB,qBACxDyC,QAAS,iBACTC,QAAS,OACTC,cAAe,MACfC,IAAK,EACLC,SAAU,YACPpD,GAAE,cAEK,gBACRoB,EAAI,CAAAD,SAAA,CAEPT,GACC2C,EAACT,EAAGC,OAAAC,OAAA,CACF9C,GAAE6C,OAAAC,OAAA,CACAG,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,UAEzBlB,GAAM,cAEC,qBACRC,YAEHhC,KAGLiC,EAACC,EAAGC,OAAAC,OAAA,CACF9C,GAAE6C,OAAAC,OAAA,CACAW,MAAO,OACPO,SAAU,OACVF,SAAU,SACVb,QAAS,OACTE,IAAK,MACLD,cAAe,SAEfF,QAAS,MAET,gCAAiC,CAC/BiB,QAAS,MAER1C,IAEDC,EAAW,CAAAL,SAAA,CAEfwB,EAACC,EAAGC,OAAAC,OAAA,CACF9C,GAAE6C,OAAAC,OAAA,CAAIG,QAAS,OAAQM,WAAY,SAAUD,eAAgB,aAAcH,IAAK,GAAMzB,IAClFC,aAEHnB,GAAS6C,EAACa,EAAK,CAACC,KAAK,YAAYC,QAAQ,YAE1Cf,EAACgB,iBACCD,QAAQ,cACRpE,GAAE6C,OAAAC,OAAA,CACAwB,WAAY,SACZR,SAAU,SACVS,aAAc,WACdC,SAAU,IACVC,SAAU,KACPtC,GAAO,cAEA,yBACRC,EAAS,CAAAjB,SAEZlB,KAGFe,GACCqC,EAACqB,8BACY,uBACXC,QAAS3D,EACT4D,KAAK,QACLC,UAAU,uBACV7E,GAAE6C,OAAAC,OAAA,CACAE,QAAS,MAETiB,QAAS,CAAEP,GAAI,IAAKC,GAAI,KAExB,qBAAsB,CACpBM,QAAS,MAER3B,GAAiB,cAEV,wBACRC,EAAmB,CAAApB,SAEvBkC,EAACyB,EAASjC,OAAAC,OAAA,CAACiC,SAAS,QAAQF,UAAU,UAAUG,KAAK,SAAY9D,WAIvEmC,EAACT,EAAG,CAAA,cAAa,2BAA0BzB,SACpB,iBAAbA,GAAgD,iBAAhBf,EACtCiD,EAACgB,EAAUxB,OAAAC,OAAA,CACT9C,GAAE6C,OAAAC,OAAA,CACAgB,SAAU,SACVS,aAAc,WACdtB,QAAS,cACTgC,gBAAiB,IACjBC,gBAAiB,YACdlD,GAELoC,QAAQ,eACJnC,EAAe,CAAAd,SAElBA,GAAYf,KAGfe,GAAYf,IAGfQ,GACCyC,EAACgB,iBACCD,QAAQ,cACR7D,MAAO,kBAAiB,cACZ,uBACRQ,EAAW,CAAAI,SAEdP,KAGJC,GACCwC,EAAC8B,EAAKtC,OAAAC,OAAA,CACJsC,UAAU,MACVpF,GAAE6C,OAAAC,OAAA,CAAIuC,GAAI,KAAQxD,GAClByD,QAAS,gBACG,wBACRxD,EAAW,CAAAX,SAEdN"}

package/components/notification/NotificationButton.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Button as t}from"@mui/material";const e=o(((o,e)=>r(t,Object.assign({ref:e,variant:"outlined",size:"small",color:"secondary"},o))));export{e as NotificationButton};
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Button as t}from"@mui/material";const e=o((o,e)=>r(t,Object.assign({ref:e,variant:"outlined",size:"small",color:"secondary"},o)));export{e as NotificationButton};
 //# sourceMappingURL=NotificationButton.js.map

package/components/notification/NotificationButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationButton.js","sources":["../../../src/components/notification/NotificationButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface NotificationButtonProps extends ButtonProps {}\n\n/**\n * NotificationButton is a proxy component to <Button variant=\"outline\" size=\"small\" color=\"secondary\" />\n */\nexport const NotificationButton: React.FC<NotificationButtonProps> = forwardRef((props, ref) => {\n  return <Button ref={ref} variant=\"outlined\" size=\"small\" color=\"secondary\" {...props} />;\n});\n"],"names":["NotificationButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","size","color"],"mappings":"kHAQa,MAAAA,EAAwDC,GAAW,CAACC,EAAOC,IAC/EC,EAACC,EAAOC,OAAAC,OAAA,CAAAJ,IAAKA,EAAKK,QAAQ,WAAWC,KAAK,QAAQC,MAAM,aAAgBR"}
+{"version":3,"file":"NotificationButton.js","sources":["../../../src/components/notification/NotificationButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface NotificationButtonProps extends ButtonProps {}\n\n/**\n * NotificationButton is a proxy component to <Button variant=\"outline\" size=\"small\" color=\"secondary\" />\n */\nexport const NotificationButton: React.FC<NotificationButtonProps> = forwardRef((props, ref) => {\n  return <Button ref={ref} variant=\"outlined\" size=\"small\" color=\"secondary\" {...props} />;\n});\n"],"names":["NotificationButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","size","color"],"mappings":"kHAQO,MAAMA,EAAwDC,EAAW,CAACC,EAAOC,IAC/EC,EAACC,EAAMC,OAAAC,OAAA,CAACJ,IAAKA,EAAKK,QAAQ,WAAWC,KAAK,QAAQC,MAAM,aAAgBR"}

package/components/notification/NotificationCenter.js

@@ -1,2 +1,2 @@
-import{__rest as s}from"tslib";import{jsxs as i,jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Box as e,Typography as n,IconButton as r,Button as a}from"@mui/material";import{CloseIcon as l}from"../icon/stroke/CloseIcon.js";const c=o(((o,c)=>{var{children:d,sx:x,title:p="Notifications",headerProps:m,titleProps:f,dismissAllText:b="Dismiss All",onDismissAll:g,onClose:u,iconButtonProps:h,iconProps:C,containerProps:j,dismissBoxProps:P,dismissButtonProps:O,height:y=556}=o,N=s(o,["children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height"]);const B=null!=m?m:{},{sx:v}=B,k=s(B,["sx"]),w=null!=j?j:{},{sx:A}=w,D=s(w,["sx"]),z=null!=P?P:{},{sx:S}=z,T=s(z,["sx"]),H=null!=h?h:{},{sx:I}=H,R=s(H,["sx"]);return i(e,Object.assign({ref:c,sx:Object.assign({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:(Y=y,"string"==typeof Y&&Y.includes("px")?Y:`${Y}px`)},x),"data-testid":"NotificationCenter"},N,{children:[i(e,Object.assign({sx:Object.assign({padding:"16px 8px 16px 16px",display:"flex",justifyContent:"space-between"},v)},k,{children:[t(n,Object.assign({variant:"h4",component:"span","data-testid":"NotificationCenter.title"},f,{children:p})),u&&t(r,Object.assign({"aria-label":"onClose notificationCenter",onClick:u,size:"medium",className:"notificationCenter-onClose",sx:Object.assign({padding:"4px"},I),"data-testid":"NotificationCenter.onClose"},R,{children:t(l,Object.assign({fontSize:"medium",className:"ballotx"},C))}))]})),g&&t(e,Object.assign({sx:Object.assign({padding:"0 8px 4px 16px",display:"flex",justifyContent:"flex-end"},S)},T,{children:t(a,Object.assign({onClick:g,size:"small",color:"secondary",variant:"text","data-testid":"NotificationCenter.dismiss"},O,{children:b}))})),t(e,Object.assign({sx:Object.assign({overflowY:"auto",'& [data-testid="Notification"]:not(:last-child)':{borderBottom:1,borderColor:"surface.secondary"}},A),"data-testid":"NotificationCenter.content"},D,{children:d}))]}));var Y}));export{c as NotificationCenter};
+import{__rest as s}from"tslib";import{jsxs as i,jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Box as e,Typography as n,IconButton as r,Button as a}from"@mui/material";import{CloseIcon as l}from"../icon/stroke/CloseIcon.js";const c=o((o,c)=>{var{children:d,sx:x,title:p="Notifications",headerProps:m,titleProps:f,dismissAllText:b="Dismiss All",onDismissAll:g,onClose:u,iconButtonProps:h,iconProps:C,containerProps:j,dismissBoxProps:P,dismissButtonProps:O,height:y=556}=o,N=s(o,["children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height"]);const B=null!=m?m:{},{sx:v}=B,k=s(B,["sx"]),w=null!=j?j:{},{sx:A}=w,D=s(w,["sx"]),z=null!=P?P:{},{sx:S}=z,T=s(z,["sx"]),H=null!=h?h:{},{sx:I}=H,R=s(H,["sx"]);return i(e,Object.assign({ref:c,sx:Object.assign({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:(Y=y,"string"==typeof Y&&Y.includes("px")?Y:`${Y}px`)},x),"data-testid":"NotificationCenter"},N,{children:[i(e,Object.assign({sx:Object.assign({padding:"16px 8px 16px 16px",display:"flex",justifyContent:"space-between"},v)},k,{children:[t(n,Object.assign({variant:"h4",component:"span","data-testid":"NotificationCenter.title"},f,{children:p})),u&&t(r,Object.assign({"aria-label":"onClose notificationCenter",onClick:u,size:"medium",className:"notificationCenter-onClose",sx:Object.assign({padding:"4px"},I),"data-testid":"NotificationCenter.onClose"},R,{children:t(l,Object.assign({fontSize:"medium",className:"ballotx"},C))}))]})),g&&t(e,Object.assign({sx:Object.assign({padding:"0 8px 4px 16px",display:"flex",justifyContent:"flex-end"},S)},T,{children:t(a,Object.assign({onClick:g,size:"small",color:"secondary",variant:"text","data-testid":"NotificationCenter.dismiss"},O,{children:b}))})),t(e,Object.assign({sx:Object.assign({overflowY:"auto",'& [data-testid="Notification"]:not(:last-child)':{borderBottom:1,borderColor:"surface.secondary"}},A),"data-testid":"NotificationCenter.content"},D,{children:d}))]}));var Y});export{c as NotificationCenter};
 //# sourceMappingURL=NotificationCenter.js.map

package/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","_a","ref","children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height","rest","__rest","_b","headerSx","restHeader","_c","containerSx","restContainer","_d","dismissBoxSx","restDismissBox","_e","iconButtonSx","restIconButton","_jsxs","Box","Object","assign","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":"4PAiEa,MAAAA,EAAkDC,GAC7D,CACEC,EAiBAC,KAjBA,IAAAC,SACEA,EAAQC,GACRA,EAAEC,MACFA,EAAQ,gBAAeC,YACvBA,EAAWC,WACXA,EAAUC,eACVA,EAAiB,cAAaC,aAC9BA,EAAYC,QACZA,EAAOC,gBACPA,EAAeC,UACfA,EAASC,eACTA,EAAcC,gBACdA,EAAeC,mBACfA,EAAkBC,OAClBA,EAAS,KAAGf,EACTgB,EAAIC,EAAAjB,EAfT,+LAmBA,MAAMkB,EAAkCb,QAAAA,EAAe,IAA/CF,GAAIgB,GAA6CD,EAAhCE,EAAnBH,EAAAC,EAAA,CAAA,OACAG,EAAwCT,QAAAA,EAAkB,IAAxDT,GAAImB,GAAsDD,EAAtCE,EAAtBN,EAAAI,EAAA,CAAA,OACAG,EAA0CX,QAAAA,EAAmB,IAA3DV,GAAIsB,GAAyDD,EAAxCE,EAAvBT,EAAAO,EAAA,CAAA,OACAG,EAA0CjB,QAAAA,EAAmB,IAA3DP,GAAIyB,GAAyDD,EAAxCE,EAAvBZ,EAAAU,EAAA,CAAA,OAUN,OACEG,EAACC,EACCC,OAAAC,OAAA,CAAAhC,IAAKA,EACLE,GAAE6B,OAAAC,OAAA,CACAC,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,EAoBQ/B,EAnBD,iBAAhB+B,GAA4BA,EAAYC,SAAS,MACnDD,EAGF,GAAGA,QAgBH3C,GAAE,cAEK,sBACRa,EAAI,CAAAd,SAAA,CAER4B,EAACC,EAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACAe,QAAS,qBACTd,QAAS,OACTe,eAAgB,iBACb9B,IAEDC,EAAU,CAAAlB,SAAA,CAEdgD,EAACC,EAAUnB,OAAAC,OAAA,CAACmB,QAAQ,KAAKC,UAAU,OAAM,cAAa,4BAA+B/C,EAAU,CAAAJ,SAC5FE,KAEFK,GACCyC,EAACI,EACYtB,OAAAC,OAAA,CAAA,aAAA,6BACXsB,QAAS9C,EACT+C,KAAK,SACLC,UAAU,6BACVtD,GACE6B,OAAAC,OAAA,CAAAe,QAAS,OACNpB,GAAY,cAEL,8BACRC,EAAc,CAAA3B,SAElBgD,EAACQ,EAAS1B,OAAAC,OAAA,CAAC0B,SAAS,SAASF,UAAU,WAAc9C,WAK1DH,GACC0C,EAACnB,EACCC,OAAAC,OAAA,CAAA9B,GACE6B,OAAAC,OAAA,CAAAe,QAAS,iBACTd,QAAS,OACTe,eAAgB,YACbxB,IAEDC,EAEJ,CAAAxB,SAAAgD,EAACU,EACC5B,OAAAC,OAAA,CAAAsB,QAAS/C,EACTgD,KAAK,QACLd,MAAM,YACNU,QAAQ,OACI,cAAA,8BACRtC,YAEHP,QAIP2C,EAACnB,EAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACA4B,UAAW,OAEX,kDAAmD,CACjDC,aAAc,EACdC,YAAa,sBAEZzC,GAEO,cAAA,8BACRC,YAEHrB,SA3Fc,IAAC4C,CA6Fd"}
+{"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","_a","ref","children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height","rest","__rest","_b","headerSx","restHeader","_c","containerSx","restContainer","_d","dismissBoxSx","restDismissBox","_e","iconButtonSx","restIconButton","_jsxs","Box","Object","assign","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":"4PAiEO,MAAMA,EAAkDC,EAC7D,CACEC,EAiBAC,KAjBA,IAAAC,SACEA,EAAQC,GACRA,EAAEC,MACFA,EAAQ,gBAAeC,YACvBA,EAAWC,WACXA,EAAUC,eACVA,EAAiB,cAAaC,aAC9BA,EAAYC,QACZA,EAAOC,gBACPA,EAAeC,UACfA,EAASC,eACTA,EAAcC,gBACdA,EAAeC,mBACfA,EAAkBC,OAClBA,EAAS,KAAGf,EACTgB,EAAIC,EAAAjB,EAfT,+LAmBA,MAAMkB,EAAkCb,QAAAA,EAAe,IAA/CF,GAAIgB,GAAQD,EAAKE,EAAUH,EAAAC,EAA7B,CAAA,OACAG,EAAwCT,QAAAA,EAAkB,IAAxDT,GAAImB,GAAWD,EAAKE,EAAaN,EAAAI,EAAnC,CAAA,OACAG,EAA0CX,QAAAA,EAAmB,IAA3DV,GAAIsB,GAAYD,EAAKE,EAAcT,EAAAO,EAArC,CAAA,OACAG,EAA0CjB,QAAAA,EAAmB,IAA3DP,GAAIyB,GAAYD,EAAKE,EAAcZ,EAAAU,EAArC,CAAA,OAUN,OACEG,EAACC,EAAGC,OAAAC,OAAA,CACFhC,IAAKA,EACLE,GAAE6B,OAAAC,OAAA,CACAC,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,EAoBQ/B,EAnBD,iBAAhB+B,GAA4BA,EAAYC,SAAS,MACnDD,EAGF,GAAGA,QAgBH3C,GAAE,cAEK,sBACRa,EAAI,CAAAd,SAAA,CAER4B,EAACC,EAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACAe,QAAS,qBACTd,QAAS,OACTe,eAAgB,iBACb9B,IAEDC,EAAU,CAAAlB,SAAA,CAEdgD,EAACC,EAAUnB,OAAAC,OAAA,CAACmB,QAAQ,KAAKC,UAAU,OAAM,cAAa,4BAA+B/C,EAAU,CAAAJ,SAC5FE,KAEFK,GACCyC,EAACI,EAAUtB,OAAAC,OAAA,CAAA,aACE,6BACXsB,QAAS9C,EACT+C,KAAK,SACLC,UAAU,6BACVtD,GAAE6B,OAAAC,OAAA,CACAe,QAAS,OACNpB,GAAY,cAEL,8BACRC,EAAc,CAAA3B,SAElBgD,EAACQ,EAAS1B,OAAAC,OAAA,CAAC0B,SAAS,SAASF,UAAU,WAAc9C,WAK1DH,GACC0C,EAACnB,EAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACAe,QAAS,iBACTd,QAAS,OACTe,eAAgB,YACbxB,IAEDC,EAAc,CAAAxB,SAElBgD,EAACU,EAAM5B,OAAAC,OAAA,CACLsB,QAAS/C,EACTgD,KAAK,QACLd,MAAM,YACNU,QAAQ,OAAM,cACF,8BACRtC,YAEHP,QAIP2C,EAACnB,EAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACA4B,UAAW,OAEX,kDAAmD,CACjDC,aAAc,EACdC,YAAa,sBAEZzC,GAAW,cAEJ,8BACRC,YAEHrB,SA3Fc,IAAC4C"}

package/components/notification/NotificationCenterCategory.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"tslib";import{jsxs as r,jsx as e}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Box as o,Typography as a}from"@mui/material";const n=i(((i,n)=>{var{title:s,headerProps:c,titleProps:l,containerProps:d,children:p}=i,m=t(i,["title","headerProps","titleProps","containerProps","children"]);const b=null!=l?l:{},{sx:f}=b,g=t(b,["sx"]);return r(o,Object.assign({"data-testid":"NotificationCenterCategory"},m,{ref:n,children:[e(a,Object.assign({variant:"caption2",sx:Object.assign({pl:1,pt:2,pb:1,display:"block",borderBottom:1,borderColor:"surface.secondary"},f),"data-testid":"NotificationCenterCategory.title"},g,{children:s})),e(o,Object.assign({"data-testid":"NotificationCenterCategory.content"},d,{children:p}))]}))}));export{n as NotificationCenterCategory};
+import{__rest as t}from"tslib";import{jsxs as r,jsx as e}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Box as o,Typography as a}from"@mui/material";const n=i((i,n)=>{var{title:s,headerProps:c,titleProps:l,containerProps:d,children:p}=i,m=t(i,["title","headerProps","titleProps","containerProps","children"]);const b=null!=l?l:{},{sx:f}=b,g=t(b,["sx"]);return r(o,Object.assign({"data-testid":"NotificationCenterCategory"},m,{ref:n,children:[e(a,Object.assign({variant:"caption2",sx:Object.assign({pl:1,pt:2,pb:1,display:"block",borderBottom:1,borderColor:"surface.secondary"},f),"data-testid":"NotificationCenterCategory.title"},g,{children:s})),e(o,Object.assign({"data-testid":"NotificationCenterCategory.content"},d,{children:p}))]}))});export{n as NotificationCenterCategory};
 //# sourceMappingURL=NotificationCenterCategory.js.map

package/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","_a","ref","title","headerProps","titleProps","containerProps","children","rest","__rest","_b","sx","titleSx","restTitle","_jsxs","Box","Object","assign","_jsx","Typography","variant","pl","pt","pb","display","borderBottom","borderColor"],"mappings":"wKAyBa,MAAAA,EAAkEC,GAC7E,CAACC,EAAuEC,KAAvE,IAAAC,MAAEA,EAAKC,YAAEA,EAAWC,WAAEA,EAAUC,eAAEA,EAAcC,SAAEA,GAAmBN,EAANO,EAAIC,EAAAR,EAAnE,kEACC,MAAMS,EAAgCL,QAAAA,EAAc,IAA5CM,GAAIC,GAA0CF,EAA9BG,EAAlBJ,EAAAC,EAAA,CAAA,OAEN,OACEI,EAACC,EAAGC,OAAAC,OAAA,CAAA,cAAa,8BAAiCT,EAAI,CAAEN,IAAKA,EAAGK,SAAA,CAC9DW,EAACC,EAAUH,OAAAC,OAAA,CACTG,QAAQ,WACRT,GAAEK,OAAAC,OAAA,CACAI,GAAI,EACJC,GAAI,EACJC,GAAI,EACJC,QAAS,QACTC,aAAc,EACdC,YAAa,qBACVd,iBAEO,oCACRC,EAAS,CAAAN,SAEZJ,KAEHe,EAACH,EAAgBC,OAAAC,OAAA,CAAA,cAAA,sCAAyCX,EACvD,CAAAC,SAAAA,QAEC"}
+{"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","_a","ref","title","headerProps","titleProps","containerProps","children","rest","__rest","_b","sx","titleSx","restTitle","_jsxs","Box","Object","assign","_jsx","Typography","variant","pl","pt","pb","display","borderBottom","borderColor"],"mappings":"wKAyBO,MAAMA,EAAkEC,EAC7E,CAACC,EAAuEC,KAAvE,IAAAC,MAAEA,EAAKC,YAAEA,EAAWC,WAAEA,EAAUC,eAAEA,EAAcC,SAAEA,GAAQN,EAAKO,EAAIC,EAAAR,EAAnE,kEACC,MAAMS,EAAgCL,QAAAA,EAAc,IAA5CM,GAAIC,GAAOF,EAAKG,EAASJ,EAAAC,EAA3B,CAAA,OAEN,OACEI,EAACC,EAAGC,OAAAC,OAAA,CAAA,cAAa,8BAAiCT,EAAI,CAAEN,IAAKA,EAAGK,SAAA,CAC9DW,EAACC,EAAUH,OAAAC,OAAA,CACTG,QAAQ,WACRT,GAAEK,OAAAC,OAAA,CACAI,GAAI,EACJC,GAAI,EACJC,GAAI,EACJC,QAAS,QACTC,aAAc,EACdC,YAAa,qBACVd,iBAEO,oCACRC,EAAS,CAAAN,SAEZJ,KAEHe,EAACH,EAAGC,OAAAC,OAAA,CAAA,cAAa,sCAAyCX,EAAc,CAAAC,SACrEA"}

package/components/notification/NotificationCenterHeaderButton.js

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

package/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   * @deprecated use badgeProps instead\n   */\n  indicator?: HeaderButtonProps['indicator'];\n  /**\n   * Props applied to HeaderButton\n   */\n  headerButtonProps?: HeaderButtonProps;\n  /**\n   * Icon for the HeaderButton\n   * @default BellIcon\n   */\n  icon?: ReactNode;\n  /**\n   * Props for the Popper component\n   */\n  popperProps?: PopperProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: ClickAwayListenerProps;\n  /**\n   * Props applied to Fade\n   */\n  fadeProps?: FadeProps;\n}\n\n/**\n * HeaderButton that opens NotificationCenter\n */\nexport const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps> = forwardRef(\n  (\n    {\n      popperProps,\n      clickAwayListenerProps,\n      fadeProps,\n      label = 'Notifications',\n      extend,\n      tooltipProps,\n      badgeProps,\n      indicator,\n      headerButtonProps,\n      icon,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const { sx: popperSx, ...restPopper } = popperProps ?? {};\n\n    return (\n      <>\n        <HeaderButton\n          label={label}\n          extend={extend ?? false}\n          tooltipProps={{\n            ...(anchor && { open: false }),\n            ...tooltipProps,\n          }}\n          badgeProps={badgeProps}\n          indicator={indicator}\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor(e.currentTarget);\n          }}\n          ref={ref}\n          data-testid=\"NotificationCenterHeaderButton\"\n          {...headerButtonProps}\n        >\n          {icon || <BellIcon />}\n        </HeaderButton>\n        <Popper\n          open={!!anchor}\n          anchorEl={anchor}\n          placement=\"bottom-end\"\n          modifiers={[\n            {\n              name: 'offset',\n              options: {\n                offset: [0, 18],\n              },\n            },\n          ]}\n          transition\n          sx={{\n            zIndex: (theme) => theme.zIndex.appBar + 10,\n            ...popperSx,\n          }}\n          {...restPopper}\n        >\n          {({ TransitionProps }) => (\n            <ClickAwayListener onClickAway={() => setAnchor(null)} {...clickAwayListenerProps}>\n              <Fade {...TransitionProps} {...fadeProps}>\n                <NotificationCenter {...rest} ref={undefined} />\n              </Fade>\n            </ClickAwayListener>\n          )}\n        </Popper>\n      </>\n    );\n  },\n);\n"],"names":["NotificationCenterHeaderButton","forwardRef","_a","ref","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","indicator","headerButtonProps","icon","onClick","rest","__rest","anchor","setAnchor","useState","_b","sx","popperSx","restPopper","_jsxs","_jsx","HeaderButton","Object","assign","open","e","currentTarget","children","BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","Fade","NotificationCenter","undefined"],"mappings":"oYAqDa,MAAAA,EAA0EC,GACrF,CACEC,EAcAC,KAdA,IAAAC,YACEA,EAAWC,uBACXA,EAAsBC,UACtBA,EAASC,MACTA,EAAQ,gBAAeC,OACvBA,EAAMC,aACNA,EAAYC,WACZA,EAAUC,UACVA,EAASC,kBACTA,EAAiBC,KACjBA,EAAIC,QACJA,GAAOZ,EACJa,EAZLC,EAAAd,EAAA,CAAA,cAAA,yBAAA,YAAA,QAAA,SAAA,eAAA,aAAA,YAAA,oBAAA,OAAA,YAgBA,MAAOe,EAAQC,GAAaC,EAAS,MAC/BC,EAAkChB,QAAAA,EAAe,IAA/CiB,GAAIC,GAA6CF,EAAhCG,EAAnBP,EAAAI,EAAA,CAAA,OAEN,OACEI,eACEC,EAACC,iBACCnB,MAAOA,EACPC,OAAQA,SAAAA,EACRC,aAAYkB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACNX,GAAU,CAAEY,MAAM,IACnBpB,GAELC,WAAYA,EACZC,UAAWA,EACXG,QAAUgB,IACRhB,SAAAA,EAAUgB,GACVZ,EAAUY,EAAEC,cAAc,EAE5B5B,IAAKA,gBACO,kCACRS,EAAiB,CAAAoB,SAEpBnB,GAAQY,EAACQ,EAAQ,CAAA,MAEpBR,EAACS,EAAMP,OAAAC,OAAA,CACLC,OAAQZ,EACRkB,SAAUlB,EACVmB,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,EACVpB,GAAEM,OAAAC,OAAA,CACAc,OAASC,GAAUA,EAAMD,OAAOE,OAAS,IACtCtB,IAEDC,YAEH,EAAGsB,qBACFpB,EAACqB,EAAiBnB,OAAAC,OAAA,CAACmB,YAAa,IAAM7B,EAAU,OAAWb,EACzD,CAAA2B,SAAAP,EAACuB,EAAIrB,OAAAC,OAAA,CAAA,EAAKiB,EAAqBvC,EAC7B,CAAA0B,SAAAP,EAACwB,EAAkBtB,OAAAC,OAAA,CAAA,EAAKb,EAAI,CAAEZ,SAAK+C,gBAK1C"}
+{"version":3,"file":"NotificationCenterHeaderButton.js","sources":["../../../src/components/notification/NotificationCenterHeaderButton.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useState } from 'react';\nimport { HeaderButton, HeaderButtonProps } from '@/src/components/header/HeaderButton';\nimport { BellIcon } from '@/src/components/icon/stroke/BellIcon';\nimport { Fade, ClickAwayListener, ClickAwayListenerProps, Popper, PopperProps, FadeProps } from '@mui/material';\nimport { NotificationCenter, NotificationCenterProps } from './NotificationCenter';\n\nexport interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: HeaderButtonProps['label'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: HeaderButtonProps['tooltipProps'];\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: HeaderButtonProps['badgeProps'];\n  /**\n   * @deprecated use badgeProps instead\n   */\n  indicator?: HeaderButtonProps['indicator'];\n  /**\n   * Props applied to HeaderButton\n   */\n  headerButtonProps?: HeaderButtonProps;\n  /**\n   * Icon for the HeaderButton\n   * @default BellIcon\n   */\n  icon?: ReactNode;\n  /**\n   * Props for the Popper component\n   */\n  popperProps?: PopperProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: ClickAwayListenerProps;\n  /**\n   * Props applied to Fade\n   */\n  fadeProps?: FadeProps;\n}\n\n/**\n * HeaderButton that opens NotificationCenter\n */\nexport const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps> = forwardRef(\n  (\n    {\n      popperProps,\n      clickAwayListenerProps,\n      fadeProps,\n      label = 'Notifications',\n      extend,\n      tooltipProps,\n      badgeProps,\n      indicator,\n      headerButtonProps,\n      icon,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const { sx: popperSx, ...restPopper } = popperProps ?? {};\n\n    return (\n      <>\n        <HeaderButton\n          label={label}\n          extend={extend ?? false}\n          tooltipProps={{\n            ...(anchor && { open: false }),\n            ...tooltipProps,\n          }}\n          badgeProps={badgeProps}\n          indicator={indicator}\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor(e.currentTarget);\n          }}\n          ref={ref}\n          data-testid=\"NotificationCenterHeaderButton\"\n          {...headerButtonProps}\n        >\n          {icon || <BellIcon />}\n        </HeaderButton>\n        <Popper\n          open={!!anchor}\n          anchorEl={anchor}\n          placement=\"bottom-end\"\n          modifiers={[\n            {\n              name: 'offset',\n              options: {\n                offset: [0, 18],\n              },\n            },\n          ]}\n          transition\n          sx={{\n            zIndex: (theme) => theme.zIndex.appBar + 10,\n            ...popperSx,\n          }}\n          {...restPopper}\n        >\n          {({ TransitionProps }) => (\n            <ClickAwayListener onClickAway={() => setAnchor(null)} {...clickAwayListenerProps}>\n              <Fade {...TransitionProps} {...fadeProps}>\n                <NotificationCenter {...rest} ref={undefined} />\n              </Fade>\n            </ClickAwayListener>\n          )}\n        </Popper>\n      </>\n    );\n  },\n);\n"],"names":["NotificationCenterHeaderButton","forwardRef","_a","ref","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","indicator","headerButtonProps","icon","onClick","rest","__rest","anchor","setAnchor","useState","_b","sx","popperSx","restPopper","_jsxs","_jsx","HeaderButton","Object","assign","open","e","currentTarget","children","BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","Fade","NotificationCenter","undefined"],"mappings":"oYAqDO,MAAMA,EAA0EC,EACrF,CACEC,EAcAC,KAdA,IAAAC,YACEA,EAAWC,uBACXA,EAAsBC,UACtBA,EAASC,MACTA,EAAQ,gBAAeC,OACvBA,EAAMC,aACNA,EAAYC,WACZA,EAAUC,UACVA,EAASC,kBACTA,EAAiBC,KACjBA,EAAIC,QACJA,GAAOZ,EACJa,EAAIC,EAAAd,EAZT,CAAA,cAAA,yBAAA,YAAA,QAAA,SAAA,eAAA,aAAA,YAAA,oBAAA,OAAA,YAgBA,MAAOe,EAAQC,GAAaC,EAAS,MAC/BC,EAAkChB,QAAAA,EAAe,IAA/CiB,GAAIC,GAAQF,EAAKG,EAAUP,EAAAI,EAA7B,CAAA,OAEN,OACEI,eACEC,EAACC,iBACCnB,MAAOA,EACPC,OAAQA,SAAAA,EACRC,aAAYkB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACNX,GAAU,CAAEY,MAAM,IACnBpB,GAELC,WAAYA,EACZC,UAAWA,EACXG,QAAUgB,IACRhB,SAAAA,EAAUgB,GACVZ,EAAUY,EAAEC,gBAEd5B,IAAKA,gBACO,kCACRS,EAAiB,CAAAoB,SAEpBnB,GAAQY,EAACQ,EAAQ,CAAA,MAEpBR,EAACS,EAAMP,OAAAC,OAAA,CACLC,OAAQZ,EACRkB,SAAUlB,EACVmB,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,EACVpB,GAAEM,OAAAC,OAAA,CACAc,OAASC,GAAUA,EAAMD,OAAOE,OAAS,IACtCtB,IAEDC,YAEH,EAAGsB,qBACFpB,EAACqB,EAAiBnB,OAAAC,OAAA,CAACmB,YAAa,IAAM7B,EAAU,OAAWb,EAAsB,CAAA2B,SAC/EP,EAACuB,EAAIrB,OAAAC,OAAA,CAAA,EAAKiB,EAAqBvC,EAAS,CAAA0B,SACtCP,EAACwB,EAAkBtB,OAAAC,OAAA,CAAA,EAAKb,EAAI,CAAEZ,SAAK+C"}

package/components/numbering/numbering.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{styled as a}from"@mui/material";import{NumberingColors as o,NumberingSizes as i}from"../../utils/enum.js";const n=a=>{var o=e(a,[]);return t(s,Object.assign({},o,{style:o.customStyle,"data-testid":"Numbering",children:[t("span",{className:"index-container","data-testid":"Numbering.index",children:[o.index," "]}),t("span",{className:"separator-container","data-testid":"Numbering.separator",children:[o.customSeparator?o.customSeparator:"/"," "]}),r("span",{className:"total-container","data-testid":"Numbering.total",children:o.total})]}))},s=a("div",{shouldForwardProp:e=>"customSeparator"!==e&&"colorTheme"!==e})((t=>{var{theme:r}=t,a=e(t,["theme"]);return{fontWeight:"700",fontSize:a.size===i.LARGE?"18px":"16px",lineHeight:a.size===i.LARGE?"28px":"24px",letterSpacing:"0.02em","& .index-container":{color:a.colorTheme===o.DARK?r.palette.text.primary:r.palette.onSurface.os0},"& .separator-container":{color:r.palette.onSurface.os600},"& .total-container":{color:r.palette.onSurface.os600}}}));export{n as Numbering};
+import{__rest as e}from"tslib";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{styled as a}from"@mui/material";import{NumberingColors as o,NumberingSizes as i}from"../../utils/enum.js";const n=a=>{var o=e(a,[]);return t(s,Object.assign({},o,{style:o.customStyle,"data-testid":"Numbering",children:[t("span",{className:"index-container","data-testid":"Numbering.index",children:[o.index," "]}),t("span",{className:"separator-container","data-testid":"Numbering.separator",children:[o.customSeparator?o.customSeparator:"/"," "]}),r("span",{className:"total-container","data-testid":"Numbering.total",children:o.total})]}))},s=a("div",{shouldForwardProp:e=>"customSeparator"!==e&&"colorTheme"!==e})(t=>{var{theme:r}=t,a=e(t,["theme"]);return{fontWeight:"700",fontSize:a.size===i.LARGE?"18px":"16px",lineHeight:a.size===i.LARGE?"28px":"24px",letterSpacing:"0.02em","& .index-container":{color:a.colorTheme===o.DARK?r.palette.text.primary:r.palette.onSurface.os0},"& .separator-container":{color:r.palette.onSurface.os600},"& .total-container":{color:r.palette.onSurface.os600}}});export{n as Numbering};
 //# sourceMappingURL=numbering.js.map

package/components/numbering/numbering.js.map

@@ -1 +1 @@
-{"version":3,"file":"numbering.js","sources":["../../../src/components/numbering/numbering.tsx"],"sourcesContent":["import { FC, HTMLAttributes } from 'react';\nimport { styled } from '@mui/material';\nimport { NumberingColors, NumberingSizes } from '../../utils/enum';\n\nexport interface NumberingProps extends HTMLAttributes<HTMLDivElement> {\n  /*\n   * left side of component\n   */\n  index: number;\n  /*\n   * right side of component\n   */\n  total: number;\n  /*\n   * if needed, specifis a custom simbol as separator\n   */\n  customSeparator?: string;\n  /*\n   * custom style that ovverides standard one\n   */\n  customStyle?: object;\n  /*\n   * indicates if the left side of the component should be black or white ( can be \"dark\" or \"light\")\n   */\n  colorTheme?: NumberingColors;\n  /*\n   * indicates the size for the whole component ( can be \"big\" or \"small\")\n   */\n  size?: NumberingSizes;\n}\n\n/**\n * @description SkodaFlow Numbering component.\n * @param props NumberingProps\n * @returns React Functional Component\n */\n\nexport const Numbering: FC<NumberingProps> = ({ ...props }) => {\n  return (\n    <NumberingStyled {...props} style={props.customStyle} data-testid=\"Numbering\">\n      <span className=\"index-container\" data-testid=\"Numbering.index\">\n        {props.index}{' '}\n      </span>\n      <span className=\"separator-container\" data-testid=\"Numbering.separator\">\n        {props.customSeparator ? props.customSeparator : '/'}{' '}\n      </span>\n      <span className=\"total-container\" data-testid=\"Numbering.total\">\n        {props.total}\n      </span>\n    </NumberingStyled>\n  );\n};\n/**\n * @description Controls styling definition based on props\n */\nconst NumberingStyled = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'customSeparator' && prop !== 'colorTheme',\n})<NumberingProps>(({ theme, ...args }) => {\n  return {\n    fontWeight: '700',\n    fontSize: args.size === NumberingSizes.LARGE ? '18px' : '16px',\n    lineHeight: args.size === NumberingSizes.LARGE ? '28px' : '24px',\n    letterSpacing: '0.02em',\n\n    '& .index-container': {\n      color: args.colorTheme === NumberingColors.DARK ? theme.palette.text.primary : theme.palette.onSurface.os0,\n    },\n    '& .separator-container': {\n      color: theme.palette.onSurface.os600,\n    },\n    '& .total-container': {\n      color: theme.palette.onSurface.os600,\n    },\n  };\n});\n"],"names":["Numbering","_a","props","__rest","_jsxs","NumberingStyled","Object","assign","style","customStyle","children","className","index","customSeparator","_jsx","total","styled","shouldForwardProp","prop","theme","args","fontWeight","fontSize","size","NumberingSizes","LARGE","lineHeight","letterSpacing","color","colorTheme","NumberingColors","DARK","palette","text","primary","onSurface","os0","os600"],"mappings":"kMAqCa,MAAAA,EAAiCC,QAAKC,EAAKC,EAAAF,EAAV,IAC5C,OACEG,EAACC,EAAeC,OAAAC,OAAA,CAAA,EAAKL,EAAK,CAAEM,MAAON,EAAMO,YAAW,cAAc,YAChEC,SAAA,CAAAN,EAAA,OAAA,CAAMO,UAAU,kBAAiB,cAAa,kBAAiBD,SAAA,CAC5DR,EAAMU,MAAO,OAEhBR,EAAA,OAAA,CAAMO,UAAU,sBAAkC,cAAA,sBAC/CD,SAAA,CAAAR,EAAMW,gBAAkBX,EAAMW,gBAAkB,IAAK,OAExDC,EAAA,OAAA,CAAMH,UAAU,kBAA8B,cAAA,kBAC3CD,SAAAR,EAAMa,WAEO,EAMhBV,EAAkBW,EAAO,MAAO,CACpCC,kBAAoBC,GAAkB,oBAATA,GAAuC,eAATA,GADrCF,EAEJf,IAAA,IAAAkB,MAAEA,GAAgBlB,EAANmB,EAAIjB,EAAAF,EAAhB,WAClB,MAAO,CACLoB,WAAY,MACZC,SAAUF,EAAKG,OAASC,EAAeC,MAAQ,OAAS,OACxDC,WAAYN,EAAKG,OAASC,EAAeC,MAAQ,OAAS,OAC1DE,cAAe,SAEf,qBAAsB,CACpBC,MAAOR,EAAKS,aAAeC,EAAgBC,KAAOZ,EAAMa,QAAQC,KAAKC,QAAUf,EAAMa,QAAQG,UAAUC,KAEzG,yBAA0B,CACxBR,MAAOT,EAAMa,QAAQG,UAAUE,OAEjC,qBAAsB,CACpBT,MAAOT,EAAMa,QAAQG,UAAUE,OAElC"}
+{"version":3,"file":"numbering.js","sources":["../../../src/components/numbering/numbering.tsx"],"sourcesContent":["import { FC, HTMLAttributes } from 'react';\nimport { styled } from '@mui/material';\nimport { NumberingColors, NumberingSizes } from '../../utils/enum';\n\nexport interface NumberingProps extends HTMLAttributes<HTMLDivElement> {\n  /*\n   * left side of component\n   */\n  index: number;\n  /*\n   * right side of component\n   */\n  total: number;\n  /*\n   * if needed, specifis a custom simbol as separator\n   */\n  customSeparator?: string;\n  /*\n   * custom style that ovverides standard one\n   */\n  customStyle?: object;\n  /*\n   * indicates if the left side of the component should be black or white ( can be \"dark\" or \"light\")\n   */\n  colorTheme?: NumberingColors;\n  /*\n   * indicates the size for the whole component ( can be \"big\" or \"small\")\n   */\n  size?: NumberingSizes;\n}\n\n/**\n * @description SkodaFlow Numbering component.\n * @param props NumberingProps\n * @returns React Functional Component\n */\n\nexport const Numbering: FC<NumberingProps> = ({ ...props }) => {\n  return (\n    <NumberingStyled {...props} style={props.customStyle} data-testid=\"Numbering\">\n      <span className=\"index-container\" data-testid=\"Numbering.index\">\n        {props.index}{' '}\n      </span>\n      <span className=\"separator-container\" data-testid=\"Numbering.separator\">\n        {props.customSeparator ? props.customSeparator : '/'}{' '}\n      </span>\n      <span className=\"total-container\" data-testid=\"Numbering.total\">\n        {props.total}\n      </span>\n    </NumberingStyled>\n  );\n};\n/**\n * @description Controls styling definition based on props\n */\nconst NumberingStyled = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'customSeparator' && prop !== 'colorTheme',\n})<NumberingProps>(({ theme, ...args }) => {\n  return {\n    fontWeight: '700',\n    fontSize: args.size === NumberingSizes.LARGE ? '18px' : '16px',\n    lineHeight: args.size === NumberingSizes.LARGE ? '28px' : '24px',\n    letterSpacing: '0.02em',\n\n    '& .index-container': {\n      color: args.colorTheme === NumberingColors.DARK ? theme.palette.text.primary : theme.palette.onSurface.os0,\n    },\n    '& .separator-container': {\n      color: theme.palette.onSurface.os600,\n    },\n    '& .total-container': {\n      color: theme.palette.onSurface.os600,\n    },\n  };\n});\n"],"names":["Numbering","_a","props","__rest","_jsxs","NumberingStyled","Object","assign","style","customStyle","children","className","index","customSeparator","_jsx","total","styled","shouldForwardProp","prop","theme","args","fontWeight","fontSize","size","NumberingSizes","LARGE","lineHeight","letterSpacing","color","colorTheme","NumberingColors","DARK","palette","text","primary","onSurface","os0","os600"],"mappings":"kMAqCO,MAAMA,EAAiCC,QAAKC,EAAKC,EAAAF,EAAV,IAC5C,OACEG,EAACC,EAAeC,OAAAC,OAAA,CAAA,EAAKL,EAAK,CAAEM,MAAON,EAAMO,YAAW,cAAc,YAAWC,SAAA,CAC3EN,EAAA,OAAA,CAAMO,UAAU,kBAAiB,cAAa,kBAAiBD,SAAA,CAC5DR,EAAMU,MAAO,OAEhBR,EAAA,OAAA,CAAMO,UAAU,sBAAqB,cAAa,sBAAqBD,SAAA,CACpER,EAAMW,gBAAkBX,EAAMW,gBAAkB,IAAK,OAExDC,EAAA,OAAA,CAAMH,UAAU,kBAAiB,cAAa,kBAAiBD,SAC5DR,EAAMa,aAQTV,EAAkBW,EAAO,MAAO,CACpCC,kBAAoBC,GAAkB,oBAATA,GAAuC,eAATA,GADrCF,CAEJf,IAAA,IAAAkB,MAAEA,GAAKlB,EAAKmB,EAAIjB,EAAAF,EAAhB,WAClB,MAAO,CACLoB,WAAY,MACZC,SAAUF,EAAKG,OAASC,EAAeC,MAAQ,OAAS,OACxDC,WAAYN,EAAKG,OAASC,EAAeC,MAAQ,OAAS,OAC1DE,cAAe,SAEf,qBAAsB,CACpBC,MAAOR,EAAKS,aAAeC,EAAgBC,KAAOZ,EAAMa,QAAQC,KAAKC,QAAUf,EAAMa,QAAQG,UAAUC,KAEzG,yBAA0B,CACxBR,MAAOT,EAAMa,QAAQG,UAAUE,OAEjC,qBAAsB,CACpBT,MAAOT,EAAMa,QAAQG,UAAUE"}

package/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":["Overlay","_a","wrapperProps","sx","overlayContent","variant","children","rest","__rest","_b","wrapperSx","restWrapper","_jsxs","Box","Object","assign","position","maxWidth","maxHeight","_jsx","inset","zIndex","background"],"mappings":"qHAkBa,MAAAA,EAAmCC,IAAA,IAAAC,aAAEA,EAAYC,GAAEA,EAAEC,eAAEA,EAAcC,QAAEA,EAAOC,SAAEA,GAAmBL,EAANM,EAAIC,EAAAP,EAA9D,6DAC9C,MAAMQ,EAAoCP,GAAgB,IAAlDC,GAAIO,KAAcC,EAApBH,EAAAC,EAAA,CAAA,OAEN,OACEG,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,kBACZZ,GAAMW,OAAAC,OAAA,CAAAC,SAAU,WAAYC,SAAU,OAAQC,UAAW,QAAWR,IAChEC,EAAW,CAAAL,SAAA,CAEdF,EACDe,EAACN,EACaC,OAAAC,OAAA,CAAA,cAAA,kBACZZ,GAAEW,OAAAC,OAAA,CACAC,SAAU,WACVI,MAAO,IACPC,OAAQ,MACRC,WACc,SAAZjB,EACI,8KACA,6DACHF,IAEDI,EAAI,CAAAD,SAEPA,QAEC"}
+{"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":["Overlay","_a","wrapperProps","sx","overlayContent","variant","children","rest","__rest","_b","wrapperSx","restWrapper","_jsxs","Box","Object","assign","position","maxWidth","maxHeight","_jsx","inset","zIndex","background"],"mappings":"qHAkBO,MAAMA,EAAmCC,IAAA,IAAAC,aAAEA,EAAYC,GAAEA,EAAEC,eAAEA,EAAcC,QAAEA,EAAOC,SAAEA,GAAQL,EAAKM,EAAIC,EAAAP,EAA9D,6DAC9C,MAAMQ,EAAoCP,GAAgB,IAAlDC,GAAIO,KAAcC,EAAWH,EAAAC,EAA/B,CAAA,OAEN,OACEG,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,kBACZZ,GAAEW,OAAAC,OAAA,CAAIC,SAAU,WAAYC,SAAU,OAAQC,UAAW,QAAWR,IAChEC,EAAW,CAAAL,SAAA,CAEdF,EACDe,EAACN,EAAGC,OAAAC,OAAA,CAAA,cACU,kBACZZ,GAAEW,OAAAC,OAAA,CACAC,SAAU,WACVI,MAAO,IACPC,OAAQ,MACRC,WACc,SAAZjB,EACI,8KACA,6DACHF,IAEDI,EAAI,CAAAD,SAEPA"}

package/components/pageLayout/PageLayout.js

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

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

package/components/pagination/pagination.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"tslib";import{jsx as e}from"react/jsx-runtime";import{Pagination as o}from"@mui/material";import{forwardRef as a}from"react";const n=a(((a,n)=>{var{isDisabled:s,page:i,hideFirstButton:r,hideLastButton:u,showFirstButton:l,showLastButton:h,hideLabels:d,onValueChange:B,disabled:b,onChange:m,prevButtonLabel:L,nextButtonLabel:g}=a,p=t(a,["isDisabled","page","hideFirstButton","hideLastButton","showFirstButton","showLastButton","hideLabels","onValueChange","disabled","onChange","prevButtonLabel","nextButtonLabel"]);return e(o,Object.assign({},p,{ref:n,disabled:b||s,page:i&&m?i:void 0,onChange:(t,e)=>{null==m||m(t,e),null==B||B(e)},showFirstButton:l||!r,showLastButton:h||!u}))}));export{n as Pagination};
+import{__rest as t}from"tslib";import{jsx as e}from"react/jsx-runtime";import{Pagination as o}from"@mui/material";import{forwardRef as a}from"react";const n=a((a,n)=>{var{isDisabled:s,page:i,hideFirstButton:r,hideLastButton:u,showFirstButton:l,showLastButton:h,hideLabels:d,onValueChange:B,disabled:b,onChange:m,prevButtonLabel:L,nextButtonLabel:g}=a,p=t(a,["isDisabled","page","hideFirstButton","hideLastButton","showFirstButton","showLastButton","hideLabels","onValueChange","disabled","onChange","prevButtonLabel","nextButtonLabel"]);return e(o,Object.assign({},p,{ref:n,disabled:b||s,page:i&&m?i:void 0,onChange:(t,e)=>{null==m||m(t,e),null==B||B(e)},showFirstButton:l||!r,showLastButton:h||!u}))});export{n as Pagination};
 //# sourceMappingURL=pagination.js.map

package/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { Pagination as MuiPagination, PaginationProps as MuiPaginationProps } from '@mui/material';\nimport React, { forwardRef } from 'react';\n\nexport interface PaginationProps extends MuiPaginationProps {\n  /**\n   *  If true, a pagination will be disabled.\n   *  @deprecated It is recommended to use `disabled` prop instead of `isDisabled`\n   */\n  isDisabled?: boolean;\n\n  /**\n   *  The label for previous button.\n   *  @deprecated No longer used, property has no effect\n   */\n  prevButtonLabel?: string;\n\n  /**\n   *  The label for next button.\n   *  @deprecated No longer used, property has no effect\n   */\n  nextButtonLabel?: string;\n\n  /**\n   * If true, hide the first-page button.\n   * @deprecated Use showFirstButton instead\n   */\n  hideFirstButton?: boolean;\n\n  /**\n   * If true, hide the last-page button.\n   * @deprecated Use showLastButton instead\n   */\n  hideLastButton?: boolean;\n\n  /**\n   * enable or disable direction label. mobile only\n   * @deprecated No longer used, property has no effect\n   */\n  hideLabels?: boolean;\n\n  /**\n   * callback for value change handling. takes the new value as its only parameter\n   * @deprecated provide the callback in the onChange function\n   **/\n  onValueChange?: (payload: number) => void;\n}\n\n/**\n * @mui Pagination that contain props parser for the previous implementation\n */\nexport const Pagination = forwardRef<HTMLDivElement, PaginationProps>(\n  (\n    {\n      isDisabled,\n      page,\n      hideFirstButton,\n      hideLastButton,\n      showFirstButton,\n      showLastButton,\n      hideLabels: _,\n      onValueChange,\n      disabled,\n      onChange,\n      prevButtonLabel: __,\n      nextButtonLabel: ___,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <MuiPagination\n        {...rest}\n        ref={ref}\n        disabled={disabled || isDisabled}\n        page={page && onChange ? page : undefined}\n        onChange={(e, newPage) => {\n          onChange?.(e, newPage);\n          onValueChange?.(newPage);\n        }}\n        showFirstButton={showFirstButton || !hideFirstButton}\n        showLastButton={showLastButton || !hideLastButton}\n      />\n    );\n  },\n);\n"],"names":["Pagination","forwardRef","_a","ref","isDisabled","page","hideFirstButton","hideLastButton","showFirstButton","showLastButton","hideLabels","_","onValueChange","disabled","onChange","prevButtonLabel","__","nextButtonLabel","___","rest","__rest","_jsx","MuiPagination","Object","assign","undefined","e","newPage"],"mappings":"qJAkDa,MAAAA,EAAaC,GACxB,CACEC,EAeAC,KAfA,IAAAC,WACEA,EAAUC,KACVA,EAAIC,gBACJA,EAAeC,eACfA,EAAcC,gBACdA,EAAeC,eACfA,EACAC,WAAYC,EAACC,cACbA,EAAaC,SACbA,EAAQC,SACRA,EACAC,gBAAiBC,EACjBC,gBAAiBC,GAElBhB,EADIiB,EAAIC,EAAAlB,EAbT,oLAiBA,OACEmB,EAACC,EACKC,OAAAC,OAAA,CAAA,EAAAL,GACJhB,IAAKA,EACLU,SAAUA,GAAYT,EACtBC,KAAMA,GAAQS,EAAWT,OAAOoB,EAChCX,SAAU,CAACY,EAAGC,KACZb,SAAAA,EAAWY,EAAGC,GACdf,SAAAA,EAAgBe,EAAQ,EAE1BnB,gBAAiBA,IAAoBF,EACrCG,eAAgBA,IAAmBF,IACnC"}
+{"version":3,"file":"pagination.js","sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { Pagination as MuiPagination, PaginationProps as MuiPaginationProps } from '@mui/material';\nimport React, { forwardRef } from 'react';\n\nexport interface PaginationProps extends MuiPaginationProps {\n  /**\n   *  If true, a pagination will be disabled.\n   *  @deprecated It is recommended to use `disabled` prop instead of `isDisabled`\n   */\n  isDisabled?: boolean;\n\n  /**\n   *  The label for previous button.\n   *  @deprecated No longer used, property has no effect\n   */\n  prevButtonLabel?: string;\n\n  /**\n   *  The label for next button.\n   *  @deprecated No longer used, property has no effect\n   */\n  nextButtonLabel?: string;\n\n  /**\n   * If true, hide the first-page button.\n   * @deprecated Use showFirstButton instead\n   */\n  hideFirstButton?: boolean;\n\n  /**\n   * If true, hide the last-page button.\n   * @deprecated Use showLastButton instead\n   */\n  hideLastButton?: boolean;\n\n  /**\n   * enable or disable direction label. mobile only\n   * @deprecated No longer used, property has no effect\n   */\n  hideLabels?: boolean;\n\n  /**\n   * callback for value change handling. takes the new value as its only parameter\n   * @deprecated provide the callback in the onChange function\n   **/\n  onValueChange?: (payload: number) => void;\n}\n\n/**\n * @mui Pagination that contain props parser for the previous implementation\n */\nexport const Pagination = forwardRef<HTMLDivElement, PaginationProps>(\n  (\n    {\n      isDisabled,\n      page,\n      hideFirstButton,\n      hideLastButton,\n      showFirstButton,\n      showLastButton,\n      hideLabels: _,\n      onValueChange,\n      disabled,\n      onChange,\n      prevButtonLabel: __,\n      nextButtonLabel: ___,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <MuiPagination\n        {...rest}\n        ref={ref}\n        disabled={disabled || isDisabled}\n        page={page && onChange ? page : undefined}\n        onChange={(e, newPage) => {\n          onChange?.(e, newPage);\n          onValueChange?.(newPage);\n        }}\n        showFirstButton={showFirstButton || !hideFirstButton}\n        showLastButton={showLastButton || !hideLastButton}\n      />\n    );\n  },\n);\n"],"names":["Pagination","forwardRef","_a","ref","isDisabled","page","hideFirstButton","hideLastButton","showFirstButton","showLastButton","hideLabels","_","onValueChange","disabled","onChange","prevButtonLabel","__","nextButtonLabel","___","rest","__rest","_jsx","MuiPagination","Object","assign","undefined","e","newPage"],"mappings":"qJAkDO,MAAMA,EAAaC,EACxB,CACEC,EAeAC,KAfA,IAAAC,WACEA,EAAUC,KACVA,EAAIC,gBACJA,EAAeC,eACfA,EAAcC,gBACdA,EAAeC,eACfA,EACAC,WAAYC,EAACC,cACbA,EAAaC,SACbA,EAAQC,SACRA,EACAC,gBAAiBC,EACjBC,gBAAiBC,GAAGhB,EACjBiB,EAAIC,EAAAlB,EAbT,oLAiBA,OACEmB,EAACC,EAAaC,OAAAC,OAAA,CAAA,EACRL,GACJhB,IAAKA,EACLU,SAAUA,GAAYT,EACtBC,KAAMA,GAAQS,EAAWT,OAAOoB,EAChCX,SAAU,CAACY,EAAGC,KACZb,SAAAA,EAAWY,EAAGC,GACdf,SAAAA,EAAgBe,IAElBnB,gBAAiBA,IAAoBF,EACrCG,eAAgBA,IAAmBF"}

package/components/passwordField/passwordField.js

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

package/components/passwordField/passwordField.js.map

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

package/components/playPauseButton/PlayPauseButton.d.ts

@@ -1,5 +1,6 @@
 import React, { ElementType } from 'react';
-import { BoxProps, CircularProgressProps, IconButtonProps, SvgIconProps } from '@mui/material';
+import { BoxProps, IconButtonProps, SvgIconProps } from '@mui/material';
+import { SpinnerProps } from '@/src/components/progress/Spinner';
 export interface PlayPauseButtonProps extends BoxProps<ElementType> {
     /**
      * Boolean to indicate if the media is currently playing
@@ -8,23 +9,35 @@ export interface PlayPauseButtonProps extends BoxProps<ElementType> {
     /**
      * Callback function to handle play/pause button click events.
      */
-    onClick: () => void;
+    onClick: BoxProps<ElementType>['onClick'];
     /**
      * The progress value for the CircularProgress component.
      * Should be a number between 0 and 100.
      */
     progress?: number;
-    /** Custom props for the background CircularProgress component. */
-    circularProgressBgProps?: CircularProgressProps;
-    /** Custom props for the foreground CircularProgress component. */
-    circularProgressProps?: CircularProgressProps;
-    /** Custom props for the IconButton component. */
+    /**
+     * Properties applied to Spinner progress
+     */
+    progressProps?: Omit<SpinnerProps, 'value'>;
+    /**
+     * Properties applied to IconButton
+     */
     iconButtonProps?: Partial<IconButtonProps>;
-    /** Custom props for the pause icon component. */
+    /**
+     * Properties applied to Pause Icon component
+     */
     pauseIconProps?: SvgIconProps;
+    /**
+     * Custom component to be used for PauseIcon
+     */
     PauseIconComponent?: ElementType<SvgIconProps>;
-    /** Custom props for the play icon component. */
+    /**
+     * Properties applied to Play Icon component
+     */
     playIconProps?: SvgIconProps;
+    /**
+     * Custom component to be used for PlayIcon
+     */
     PlayIconComponent?: ElementType<SvgIconProps>;
 }
 export interface VideoPlayPauseIndicatorProps extends PlayPauseButtonProps {

package/components/playPauseButton/PlayPauseButton.js

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

package/components/playPauseButton/PlayPauseButton.js.map

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

package/components/progress/Loader.d.ts

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