@skodaflow/web-library 8.0.1 → 8.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.js","sources":["../../../../../src/components/notification/NotificationCenter.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport {\n  Box,\n  Button,\n  BoxProps,\n  ButtonProps,\n  IconButton,\n  IconButtonProps,\n  IconProps,\n  Typography,\n  TypographyProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationCenterProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification center\n   */\n  title?: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Text for the dismiss all button\n   */\n  dismissAllText?: React.ReactNode;\n  /**\n   * Callback function when the dismiss all button is clicked\n   */\n  onDismissAll?: () => void;\n  /**\n   * Callback function when the close button is clicked\n   */\n  onClose?: () => void;\n  /**\n   * Max Height of the notification center\n   */\n  height?: number | string;\n  /**\n   * Custom props for the icon button\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  iconProps?: IconProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss box\n   */\n  dismissBoxProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss button\n   */\n  dismissButtonProps?: ButtonProps<ElementType>;\n}\n\nexport const NotificationCenter: FC<NotificationCenterProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      title = 'Notifications',\n      headerProps,\n      titleProps,\n      dismissAllText = 'Dismiss All',\n      onDismissAll,\n      onClose,\n      iconButtonProps,\n      iconProps,\n      containerProps,\n      dismissBoxProps,\n      dismissButtonProps,\n      height = 556,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: containerSx, ...restContainer } = containerProps ?? {};\n    const { sx: dismissBoxSx, ...restDismissBox } = dismissBoxProps ?? {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps ?? {};\n\n    const formatHeight = (heightValue: number | string) => {\n      if (typeof heightValue === 'string' && heightValue.includes('px')) {\n        return heightValue;\n      }\n      // if typeof heightValue === 'number', or string without 'px'\n      return `${heightValue}px`;\n    };\n\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          width: { xs: '100%', sm: '360px', md: '440px' },\n          borderRadius: { xs: '0px', sm: '8px' },\n          backgroundColor: 'background.primary',\n          color: 'text.primary',\n          boxShadow: '0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)',\n          overflow: 'hidden',\n          maxHeight: formatHeight(height),\n          ...sx,\n        }}\n        data-testid=\"NotificationCenter\"\n        {...rest}\n      >\n        <Box\n          sx={{\n            padding: '16px 8px 16px 16px',\n            display: 'flex',\n            justifyContent: 'space-between',\n            ...headerSx,\n          }}\n          {...restHeader}\n        >\n          <Typography variant=\"h4\" component=\"span\" data-testid=\"NotificationCenter.title\" {...titleProps}>\n            {title}\n          </Typography>\n          {onClose && (\n            <IconButton\n              aria-label=\"onClose notificationCenter\"\n              onClick={onClose}\n              size=\"medium\"\n              className=\"notificationCenter-onClose\"\n              sx={{\n                padding: '4px',\n                ...iconButtonSx,\n              }}\n              data-testid=\"NotificationCenter.onClose\"\n              {...restIconButton}\n            >\n              <CloseIcon fontSize=\"medium\" className=\"ballotx\" {...iconProps} />\n            </IconButton>\n          )}\n        </Box>\n\n        {onDismissAll && (\n          <Box\n            sx={{\n              padding: '0 8px 4px 16px',\n              display: 'flex',\n              justifyContent: 'flex-end',\n              ...dismissBoxSx,\n            }}\n            {...restDismissBox}\n          >\n            <Button\n              onClick={onDismissAll}\n              size=\"small\"\n              color=\"secondary\"\n              variant=\"text\"\n              data-testid=\"NotificationCenter.dismiss\"\n              {...dismissButtonProps}\n            >\n              {dismissAllText}\n            </Button>\n          </Box>\n        )}\n        <Box\n          sx={{\n            overflowY: 'auto',\n            // add divider between notifications\n            '& [data-testid=\"Notification\"]:not(:last-child)': {\n              borderBottom: 1,\n              borderColor: 'surface.secondary',\n            },\n            ...containerSx,\n          }}\n          data-testid=\"NotificationCenter.content\"\n          {...restContainer}\n        >\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenter","forwardRef","_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":"0JAiEO,MAAMA,EAAkDC,EAAAA,WAC7D,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,EAAAA,OAAAjB,EAfT,+LAmBA,MAAMkB,EAAkCb,QAAAA,EAAe,IAA/CF,GAAIgB,GAAQD,EAAKE,EAAUH,EAAAA,OAAAC,EAA7B,CAAA,OACAG,EAAwCT,QAAAA,EAAkB,IAAxDT,GAAImB,GAAWD,EAAKE,EAAaN,EAAAA,OAAAI,EAAnC,CAAA,OACAG,EAA0CX,QAAAA,EAAmB,IAA3DV,GAAIsB,GAAYD,EAAKE,EAAcT,EAAAA,OAAAO,EAArC,CAAA,OACAG,EAA0CjB,QAAAA,EAAmB,IAA3DP,GAAIyB,GAAYD,EAAKE,EAAcZ,EAAAA,OAAAU,EAArC,CAAA,OAUN,OACEG,EAAAA,KAACC,MAAGC,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,EAAAA,KAACC,EAAAA,IAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACAe,QAAS,qBACTd,QAAS,OACTe,eAAgB,iBACb9B,IAEDC,EAAU,CAAAlB,SAAA,CAEdgD,EAAAA,IAACC,EAAAA,WAAUnB,OAAAC,OAAA,CAACmB,QAAQ,KAAKC,UAAU,OAAM,cAAa,4BAA+B/C,EAAU,CAAAJ,SAC5FE,KAEFK,GACCyC,EAAAA,IAACI,EAAAA,WAAUtB,OAAAC,OAAA,CAAA,aACE,6BACXsB,QAAS9C,EACT+C,KAAK,SACLC,UAAU,6BACVtD,GAAE6B,OAAAC,OAAA,CACAe,QAAS,OACNpB,GAAY,cAEL,8BACRC,EAAc,CAAA3B,SAElBgD,EAAAA,IAACQ,EAAAA,UAAS1B,OAAAC,OAAA,CAAC0B,SAAS,SAASF,UAAU,WAAc9C,WAK1DH,GACC0C,EAAAA,IAACnB,EAAAA,IAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACAe,QAAS,iBACTd,QAAS,OACTe,eAAgB,YACbxB,IAEDC,EAAc,CAAAxB,SAElBgD,EAAAA,IAACU,SAAM5B,OAAAC,OAAA,CACLsB,QAAS/C,EACTgD,KAAK,QACLd,MAAM,YACNU,QAAQ,OAAM,cACF,8BACRtC,YAEHP,QAIP2C,EAAAA,IAACnB,MAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACA4B,UAAW,OAEX,kDAAmD,CACjDC,aAAc,EACdC,YAAa,sBAEZzC,GAAW,cAEJ,8BACRC,YAEHrB,SA3Fc,IAAC4C"}
+{"version":3,"file":"NotificationCenter.js","sources":["../../../../../src/components/notification/NotificationCenter.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport {\n  Box,\n  Button,\n  BoxProps,\n  ButtonProps,\n  IconButton,\n  IconButtonProps,\n  IconProps,\n  Typography,\n  TypographyProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface NotificationCenterProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification center\n   */\n  title?: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Text for the dismiss all button\n   */\n  dismissAllText?: React.ReactNode;\n  /**\n   * Callback function when the dismiss all button is clicked\n   */\n  onDismissAll?: () => void;\n  /**\n   * Callback function when the close button is clicked\n   */\n  onClose?: () => void;\n  /**\n   * Max Height of the notification center\n   */\n  height?: number | string;\n  /**\n   * Custom props for the icon button\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  iconProps?: IconProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss box\n   */\n  dismissBoxProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss button\n   */\n  dismissButtonProps?: ButtonProps<ElementType>;\n}\n\nexport const NotificationCenter: FC<NotificationCenterProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      title = 'Notifications',\n      headerProps,\n      titleProps,\n      dismissAllText = 'Dismiss All',\n      onDismissAll,\n      onClose,\n      iconButtonProps,\n      iconProps,\n      containerProps,\n      dismissBoxProps,\n      dismissButtonProps,\n      height = 556,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: containerSx, ...restContainer } = containerProps ?? {};\n    const { sx: dismissBoxSx, ...restDismissBox } = dismissBoxProps ?? {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps ?? {};\n\n    const formatHeight = (heightValue: number | string) => {\n      if (typeof heightValue === 'string' && heightValue.includes('px')) {\n        return heightValue;\n      }\n      // if typeof heightValue === 'number', or string without 'px'\n      return `${heightValue}px`;\n    };\n\n    return (\n      <Box\n        ref={ref}\n        sx={sxOverride(\n          {\n            display: 'flex',\n            flexDirection: 'column',\n            width: { xs: '100%', sm: '360px', md: '440px' },\n            borderRadius: { xs: '0px', sm: '8px' },\n            backgroundColor: 'background.primary',\n            color: 'text.primary',\n            boxShadow: '0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)',\n            overflow: 'hidden',\n            maxHeight: formatHeight(height),\n          },\n          sx,\n        )}\n        data-testid=\"NotificationCenter\"\n        {...rest}\n      >\n        <Box\n          sx={sxOverride(\n            {\n              padding: '16px 8px 16px 16px',\n              display: 'flex',\n              justifyContent: 'space-between',\n            },\n            headerSx,\n          )}\n          {...restHeader}\n        >\n          <Typography variant=\"h4\" component=\"span\" data-testid=\"NotificationCenter.title\" {...titleProps}>\n            {title}\n          </Typography>\n          {onClose && (\n            <IconButton\n              aria-label=\"onClose notificationCenter\"\n              onClick={onClose}\n              size=\"medium\"\n              className=\"notificationCenter-onClose\"\n              sx={sxOverride(\n                {\n                  padding: '4px',\n                },\n                iconButtonSx,\n              )}\n              data-testid=\"NotificationCenter.onClose\"\n              {...restIconButton}\n            >\n              <CloseIcon fontSize=\"medium\" className=\"ballotx\" {...iconProps} />\n            </IconButton>\n          )}\n        </Box>\n\n        {onDismissAll && (\n          <Box\n            sx={sxOverride(\n              {\n                padding: '0 8px 4px 16px',\n                display: 'flex',\n                justifyContent: 'flex-end',\n              },\n              dismissBoxSx,\n            )}\n            {...restDismissBox}\n          >\n            <Button\n              onClick={onDismissAll}\n              size=\"small\"\n              color=\"secondary\"\n              variant=\"text\"\n              data-testid=\"NotificationCenter.dismiss\"\n              {...dismissButtonProps}\n            >\n              {dismissAllText}\n            </Button>\n          </Box>\n        )}\n        <Box\n          sx={sxOverride(\n            {\n              overflowY: 'auto',\n              // add divider between notifications\n              '& [data-testid=\"Notification\"]:not(:last-child)': {\n                borderBottom: 1,\n                borderColor: 'surface.secondary',\n              },\n            },\n            containerSx,\n          )}\n          data-testid=\"NotificationCenter.content\"\n          {...restContainer}\n        >\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenter","forwardRef","children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height","rest","ref","headerSx","restHeader","containerSx","restContainer","dismissBoxSx","restDismissBox","iconButtonSx","restIconButton","_jsxs","Box","sxOverride","display","flexDirection","width","xs","sm","md","borderRadius","backgroundColor","color","boxShadow","overflow","maxHeight","heightValue","includes","padding","justifyContent","_jsx","Typography","variant","component","IconButton","onClick","size","className","CloseIcon","fontSize","Button","overflowY","borderBottom","borderColor"],"mappings":"+LAkEaA,EAAkDC,EAAAA,WAC7D,EAEIC,WACAC,KACAC,QAAQ,gBACRC,cACAC,aACAC,iBAAiB,cACjBC,eACAC,UACAC,kBACAC,YACAC,iBACAC,kBACAC,qBACAC,SAAS,OACNC,GAELC,KAEA,MAAQd,GAAIe,KAAaC,GAAed,GAAe,CAAA,GAC/CF,GAAIiB,KAAgBC,GAAkBT,GAAkB,CAAA,GACxDT,GAAImB,KAAiBC,GAAmBV,GAAmB,CAAA,GAC3DV,GAAIqB,KAAiBC,GAAmBf,GAAmB,CAAA,EAUnE,OACEgB,EAAAA,KAACC,EAAAA,IAAG,CACFV,IAAKA,EACLd,GAAIyB,aACF,CACEC,QAAS,OACTC,cAAe,SACfC,MAAO,CAAEC,GAAI,OAAQC,GAAI,QAASC,GAAI,SACtCC,aAAc,CAAEH,GAAI,MAAOC,GAAI,OAC/BG,gBAAiB,qBACjBC,MAAO,eACPC,UAAW,2EACXC,SAAU,SACVC,WArBcC,EAqBU1B,EApBH,iBAAhB0B,GAA4BA,EAAYC,SAAS,MACnDD,EAGF,GAAGA,QAkBNtC,GACD,cACW,wBACRa,EAAId,SAAA,CAERwB,OAACC,EAAAA,IAAG,CACFxB,GAAIyB,EAAAA,WACF,CACEe,QAAS,qBACTd,QAAS,OACTe,eAAgB,iBAElB1B,MAEEC,YAEJ0B,EAAAA,IAACC,EAAAA,YAAWC,QAAQ,KAAKC,UAAU,OAAM,cAAa,8BAA+B1C,EAAUJ,SAC5FE,IAEFK,GACCoC,EAAAA,IAACI,EAAAA,WAAU,CAAA,aACE,6BACXC,QAASzC,EACT0C,KAAK,SACLC,UAAU,6BACVjD,GAAIyB,aACF,CACEe,QAAS,OAEXnB,GACD,cACW,gCACRC,EAAcvB,SAElB2C,MAACQ,EAAAA,UAAS,CAACC,SAAS,SAASF,UAAU,aAAczC,SAK1DH,GACCqC,MAAClB,EAAAA,IAAG,CACFxB,GAAIyB,EAAAA,WACF,CACEe,QAAS,iBACTd,QAAS,OACTe,eAAgB,YAElBtB,MAEEC,EAAcrB,SAElB2C,EAAAA,IAACU,EAAAA,OAAM,CACLL,QAAS1C,EACT2C,KAAK,QACLd,MAAM,YACNU,QAAQ,OAAM,cACF,gCACRjC,WAEHP,MAIPsC,EAAAA,IAAClB,EAAAA,KACCxB,GAAIyB,EAAAA,WACF,CACE4B,UAAW,OAEX,kDAAmD,CACjDC,aAAc,EACdC,YAAa,sBAGjBtC,GACD,cACW,gCACRC,EAAanB,SAEhBA,OArGc,IAACuC"}

package/cjs/components/notification/NotificationCenterCategory.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenterCategory.js","sources":["../../../../../src/components/notification/NotificationCenterCategory.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\n\nexport interface NotificationCenterCategoryProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification\n   */\n  title: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component that renders a category in the Notification Center\n */\nexport const NotificationCenterCategory: FC<NotificationCenterCategoryProps> = forwardRef(\n  ({ title, headerProps, titleProps, containerProps, children, ...rest }, ref) => {\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n\n    return (\n      <Box data-testid=\"NotificationCenterCategory\" {...rest} ref={ref}>\n        <Typography\n          variant=\"caption2\"\n          sx={{\n            pl: 1,\n            pt: 2,\n            pb: 1,\n            display: 'block',\n            borderBottom: 1,\n            borderColor: 'surface.secondary',\n            ...titleSx,\n          }}\n          data-testid=\"NotificationCenterCategory.title\"\n          {...restTitle}\n        >\n          {title}\n        </Typography>\n        <Box data-testid=\"NotificationCenterCategory.content\" {...containerProps}>\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenterCategory","forwardRef","_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":"iHAyBO,MAAMA,EAAkEC,EAAAA,WAC7E,CAACC,EAAuEC,KAAvE,IAAAC,MAAEA,EAAKC,YAAEA,EAAWC,WAAEA,EAAUC,eAAEA,EAAcC,SAAEA,GAAQN,EAAKO,EAAIC,EAAAA,OAAAR,EAAnE,kEACC,MAAMS,EAAgCL,QAAAA,EAAc,IAA5CM,GAAIC,GAAOF,EAAKG,EAASJ,EAAAA,OAAAC,EAA3B,CAAA,OAEN,OACEI,EAAAA,KAACC,EAAAA,IAAGC,OAAAC,OAAA,CAAA,cAAa,8BAAiCT,EAAI,CAAEN,IAAKA,EAAGK,SAAA,CAC9DW,EAAAA,IAACC,aAAUH,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,EAAAA,IAACH,EAAAA,IAAGC,OAAAC,OAAA,CAAA,cAAa,sCAAyCX,EAAc,CAAAC,SACrEA"}
+{"version":3,"file":"NotificationCenterCategory.js","sources":["../../../../../src/components/notification/NotificationCenterCategory.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface NotificationCenterCategoryProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification\n   */\n  title: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component that renders a category in the Notification Center\n */\nexport const NotificationCenterCategory: FC<NotificationCenterCategoryProps> = forwardRef(\n  ({ title, headerProps, titleProps, containerProps, children, ...rest }, ref) => {\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n\n    return (\n      <Box data-testid=\"NotificationCenterCategory\" {...rest} ref={ref}>\n        <Typography\n          variant=\"caption2\"\n          sx={sxOverride(\n            {\n              pl: 1,\n              pt: 2,\n              pb: 1,\n              display: 'block',\n              borderBottom: 1,\n              borderColor: 'surface.secondary',\n            },\n            titleSx,\n          )}\n          data-testid=\"NotificationCenterCategory.title\"\n          {...restTitle}\n        >\n          {title}\n        </Typography>\n        <Box data-testid=\"NotificationCenterCategory.content\" {...containerProps}>\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenterCategory","forwardRef","title","headerProps","titleProps","containerProps","children","rest","ref","sx","titleSx","restTitle","_jsxs","Box","_jsx","Typography","variant","sxOverride","pl","pt","pb","display","borderBottom","borderColor"],"mappings":"gJA0BO,MAAMA,EAAkEC,EAAAA,WAC7E,EAAGC,QAAOC,cAAaC,aAAYC,iBAAgBC,cAAaC,GAAQC,KACtE,MAAQC,GAAIC,KAAYC,GAAcP,GAAc,CAAA,EAEpD,OACEQ,EAAAA,KAACC,EAAAA,IAAG,CAAA,cAAa,gCAAiCN,EAAMC,IAAKA,YAC3DM,EAAAA,IAACC,cACCC,QAAQ,WACRP,GAAIQ,aACF,CACEC,GAAI,EACJC,GAAI,EACJC,GAAI,EACJC,QAAS,QACTC,aAAc,EACdC,YAAa,qBAEfb,GACD,cACW,sCACRC,EAASL,SAEZJ,IAEHY,EAAAA,IAACD,EAAAA,IAAG,CAAA,cAAa,wCAAyCR,WACvDC"}

package/cjs/components/notification/NotificationCenterHeaderButton.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenterHeaderButton.js","sources":["../../../../../src/components/notification/NotificationCenterHeaderButton.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useState } from 'react';\nimport { HeaderButton, HeaderButtonProps } from '@/src/components/header/HeaderButton';\nimport { BellIcon } from '@/src/components/icon/stroke/BellIcon';\nimport { Fade, ClickAwayListener, ClickAwayListenerProps, Popper, PopperProps, FadeProps } from '@mui/material';\nimport { NotificationCenter, NotificationCenterProps } from './NotificationCenter';\n\nexport interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: HeaderButtonProps['label'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: HeaderButtonProps['tooltipProps'];\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: HeaderButtonProps['badgeProps'];\n  /**\n   * Props applied to HeaderButton\n   */\n  headerButtonProps?: HeaderButtonProps;\n  /**\n   * Icon for the HeaderButton\n   * @default BellIcon\n   */\n  icon?: ReactNode;\n  /**\n   * Props for the Popper component\n   */\n  popperProps?: PopperProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to Fade\n   */\n  fadeProps?: Omit<FadeProps, 'children'>;\n}\n\n/**\n * HeaderButton that opens NotificationCenter\n */\nexport const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps> = forwardRef(\n  (\n    {\n      popperProps,\n      clickAwayListenerProps,\n      fadeProps,\n      label = 'Notifications',\n      extend,\n      tooltipProps,\n      badgeProps,\n      headerButtonProps,\n      icon,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const { sx: popperSx, ...restPopper } = popperProps ?? {};\n\n    return (\n      <>\n        <HeaderButton\n          label={label}\n          extend={extend ?? false}\n          tooltipProps={{\n            ...(anchor && { open: false }),\n            ...tooltipProps,\n          }}\n          badgeProps={badgeProps}\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor(e.currentTarget);\n          }}\n          ref={ref}\n          data-testid=\"NotificationCenterHeaderButton\"\n          {...headerButtonProps}\n        >\n          {icon || <BellIcon />}\n        </HeaderButton>\n        <Popper\n          open={!!anchor}\n          anchorEl={anchor}\n          placement=\"bottom-end\"\n          modifiers={[\n            {\n              name: 'offset',\n              options: {\n                offset: [0, 18],\n              },\n            },\n          ]}\n          transition\n          sx={{\n            zIndex: (theme) => theme.zIndex.appBar + 10,\n            ...popperSx,\n          }}\n          {...restPopper}\n        >\n          {({ TransitionProps }) => (\n            <ClickAwayListener onClickAway={() => setAnchor(null)} {...clickAwayListenerProps}>\n              <Fade {...TransitionProps} {...fadeProps}>\n                <NotificationCenter {...rest} ref={undefined} />\n              </Fade>\n            </ClickAwayListener>\n          )}\n        </Popper>\n      </>\n    );\n  },\n);\n"],"names":["NotificationCenterHeaderButton","forwardRef","_a","ref","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","headerButtonProps","icon","onClick","rest","__rest","anchor","setAnchor","useState","_b","sx","popperSx","restPopper","_jsxs","_Fragment","children","_jsx","HeaderButton","Object","assign","open","e","currentTarget","BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","Fade","NotificationCenter","undefined"],"mappings":"qOAiDO,MAAMA,EAA0EC,EAAAA,WACrF,CACEC,EAaAC,SAbAC,YACEA,EAAWC,uBACXA,EAAsBC,UACtBA,EAASC,MACTA,EAAQ,gBAAeC,OACvBA,EAAMC,aACNA,EAAYC,WACZA,EAAUC,kBACVA,EAAiBC,KACjBA,EAAIC,QACJA,GAAOX,EACJY,EAAIC,EAAAA,OAAAb,EAXT,CAAA,cAAA,yBAAA,YAAA,QAAA,SAAA,eAAA,aAAA,oBAAA,OAAA,YAeA,MAAOc,EAAQC,GAAaC,EAAAA,SAAS,MAC/BC,EAAkCf,QAAAA,EAAe,IAA/CgB,GAAIC,GAAQF,EAAKG,EAAUP,EAAAA,OAAAI,EAA7B,CAAA,OAEN,OACEI,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACEC,EAAAA,IAACC,EAAAA,aAAYC,OAAAC,OAAA,CACXtB,MAAOA,EACPC,OAAQA,SAAAA,EACRC,aAAYmB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACNb,GAAU,CAAEc,MAAM,IACnBrB,GAELC,WAAYA,EACZG,QAAUkB,IACRlB,SAAAA,EAAUkB,GACVd,EAAUc,EAAEC,gBAEd7B,IAAKA,gBACO,kCACRQ,EAAiB,CAAAc,SAEpBb,GAAQc,EAAAA,IAACO,EAAAA,SAAQ,CAAA,MAEpBP,EAAAA,IAACQ,EAAAA,OAAMN,OAAAC,OAAA,CACLC,OAAQd,EACRmB,SAAUnB,EACVoB,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,EACVrB,GAAEQ,OAAAC,OAAA,CACAa,OAASC,GAAUA,EAAMD,OAAOE,OAAS,IACtCvB,IAEDC,YAEH,EAAGuB,qBACFnB,MAACoB,EAAAA,kBAAiBlB,OAAAC,OAAA,CAACkB,YAAa,IAAM9B,EAAU,OAAWZ,EAAsB,CAAAoB,SAC/EC,EAAAA,IAACsB,EAAAA,KAAIpB,OAAAC,OAAA,CAAA,EAAKgB,EAAqBvC,EAAS,CAAAmB,SACtCC,EAAAA,IAACuB,EAAAA,mBAAkBrB,OAAAC,OAAA,CAAA,EAAKf,EAAI,CAAEX,SAAK+C"}
+{"version":3,"file":"NotificationCenterHeaderButton.js","sources":["../../../../../src/components/notification/NotificationCenterHeaderButton.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useState } from 'react';\nimport { HeaderButton, HeaderButtonProps } from '@/src/components/header/HeaderButton';\nimport { BellIcon } from '@/src/components/icon/stroke/BellIcon';\nimport { Fade, ClickAwayListener, ClickAwayListenerProps, Popper, PopperProps, FadeProps } from '@mui/material';\nimport { NotificationCenter, NotificationCenterProps } from './NotificationCenter';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: HeaderButtonProps['label'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: HeaderButtonProps['tooltipProps'];\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: HeaderButtonProps['badgeProps'];\n  /**\n   * Props applied to HeaderButton\n   */\n  headerButtonProps?: HeaderButtonProps;\n  /**\n   * Icon for the HeaderButton\n   * @default BellIcon\n   */\n  icon?: ReactNode;\n  /**\n   * Props for the Popper component\n   */\n  popperProps?: PopperProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to Fade\n   */\n  fadeProps?: Omit<FadeProps, 'children'>;\n}\n\n/**\n * HeaderButton that opens NotificationCenter\n */\nexport const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps> = forwardRef(\n  (\n    {\n      popperProps,\n      clickAwayListenerProps,\n      fadeProps,\n      label = 'Notifications',\n      extend,\n      tooltipProps,\n      badgeProps,\n      headerButtonProps,\n      icon,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const { sx: popperSx, ...restPopper } = popperProps ?? {};\n\n    return (\n      <>\n        <HeaderButton\n          label={label}\n          extend={extend ?? false}\n          tooltipProps={{\n            ...(anchor && { open: false }),\n            ...tooltipProps,\n          }}\n          badgeProps={badgeProps}\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor(e.currentTarget);\n          }}\n          ref={ref}\n          data-testid=\"NotificationCenterHeaderButton\"\n          {...headerButtonProps}\n        >\n          {icon || <BellIcon />}\n        </HeaderButton>\n        <Popper\n          open={!!anchor}\n          anchorEl={anchor}\n          placement=\"bottom-end\"\n          modifiers={[\n            {\n              name: 'offset',\n              options: {\n                offset: [0, 18],\n              },\n            },\n          ]}\n          transition\n          sx={sxOverride(\n            {\n              zIndex: (theme) => theme.zIndex.appBar + 10,\n            },\n            popperSx,\n          )}\n          {...restPopper}\n        >\n          {({ TransitionProps }) => (\n            <ClickAwayListener onClickAway={() => setAnchor(null)} {...clickAwayListenerProps}>\n              <Fade {...TransitionProps} {...fadeProps}>\n                <NotificationCenter {...rest} ref={undefined} />\n              </Fade>\n            </ClickAwayListener>\n          )}\n        </Popper>\n      </>\n    );\n  },\n);\n"],"names":["NotificationCenterHeaderButton","forwardRef","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","headerButtonProps","icon","onClick","rest","ref","anchor","setAnchor","useState","sx","popperSx","restPopper","_jsxs","_Fragment","children","_jsx","HeaderButton","open","e","currentTarget","BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","sxOverride","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","Fade","NotificationCenter","undefined"],"mappings":"oQAkDO,MAAMA,EAA0EC,EAAAA,WACrF,EAEIC,cACAC,yBACAC,YACAC,QAAQ,gBACRC,SACAC,eACAC,aACAC,oBACAC,OACAC,aACGC,GAELC,KAEA,MAAOC,EAAQC,GAAaC,EAAAA,SAAS,OAC7BC,GAAIC,KAAaC,GAAejB,GAAe,CAAA,EAEvD,OACEkB,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACEC,EAAAA,IAACC,EAAAA,aAAY,CACXnB,MAAOA,EACPC,OAAQA,IAAU,EAClBC,aAAc,IACRO,GAAU,CAAEW,MAAM,MACnBlB,GAELC,WAAYA,EACZG,QAAUe,IACRf,IAAUe,GACVX,EAAUW,EAAEC,gBAEdd,IAAKA,gBACO,oCACRJ,EAAiBa,SAEpBZ,GAAQa,EAAAA,IAACK,EAAAA,SAAQ,CAAA,KAEpBL,MAACM,EAAAA,OAAM,CACLJ,OAAQX,EACRgB,SAAUhB,EACViB,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,EACVnB,GAAIoB,aACF,CACEC,OAASC,GAAUA,EAAMD,OAAOE,OAAS,IAE3CtB,MAEEC,WAEH,EAAGsB,qBACFlB,EAAAA,IAACmB,EAAAA,kBAAiB,CAACC,YAAa,IAAM5B,EAAU,SAAWZ,EAAsBmB,SAC/EC,EAAAA,IAACqB,EAAAA,KAAI,IAAKH,KAAqBrC,EAASkB,SACtCC,EAAAA,IAACsB,EAAAA,mBAAkB,IAAKjC,EAAMC,SAAKiC"}

package/cjs/components/overlay/Overlay.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../../../src/components/overlay/Overlay.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface OverlayProps extends BoxProps<ElementType> {\n  variant?: 'default' | 'hero';\n  /** The content like image to be displayed inside the overlay.  */\n  overlayContent?: React.ReactNode;\n  /** custom props of the Box wrapper of the component. */\n  wrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * The Overlay Component\n *\n * Overlay component wraps its children with an overlay effect. The overlay effect is achieved\n * using a semi-transparent gradient background. The component allows for custom content\n * (like an image) to be displayed inside the overlay through the `overlayContent` prop.\n */\nexport const Overlay: React.FC<OverlayProps> = ({ wrapperProps, sx, overlayContent, variant, children, ...rest }) => {\n  const { sx: wrapperSx, ...restWrapper } = wrapperProps || {};\n\n  return (\n    <Box\n      data-testid=\"Overlay-wrapper\"\n      sx={{ position: 'relative', maxWidth: '100%', maxHeight: '100%', ...wrapperSx }}\n      {...restWrapper}\n    >\n      {overlayContent}\n      <Box\n        data-testid=\"Overlay-overlay\"\n        sx={{\n          position: 'absolute',\n          inset: '0',\n          zIndex: '100',\n          background:\n            variant === 'hero'\n              ? 'linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)'\n              : 'linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))',\n          ...sx,\n        }}\n        {...rest}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["_a","wrapperProps","sx","overlayContent","variant","children","rest","__rest","_b","wrapperSx","restWrapper","_jsxs","Box","Object","assign","position","maxWidth","maxHeight","_jsx","inset","zIndex","background"],"mappings":"8GAkBgDA,IAAA,IAAAC,aAAEA,EAAYC,GAAEA,EAAEC,eAAEA,EAAcC,QAAEA,EAAOC,SAAEA,GAAQL,EAAKM,EAAIC,EAAAA,OAAAP,EAA9D,6DAC9C,MAAMQ,EAAoCP,GAAgB,IAAlDC,GAAIO,KAAcC,EAAWH,EAAAA,OAAAC,EAA/B,CAAA,OAEN,OACEG,EAAAA,KAACC,EAAAA,IAAGC,OAAAC,OAAA,CAAA,cACU,kBACZZ,GAAEW,OAAAC,OAAA,CAAIC,SAAU,WAAYC,SAAU,OAAQC,UAAW,QAAWR,IAChEC,EAAW,CAAAL,SAAA,CAEdF,EACDe,EAAAA,IAACN,EAAAA,IAAGC,OAAAC,OAAA,CAAA,cACU,kBACZZ,GAAEW,OAAAC,OAAA,CACAC,SAAU,WACVI,MAAO,IACPC,OAAQ,MACRC,WACc,SAAZjB,EACI,8KACA,6DACHF,IAEDI,EAAI,CAAAD,SAEPA"}
+{"version":3,"file":"Overlay.js","sources":["../../../../../src/components/overlay/Overlay.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface OverlayProps extends BoxProps<ElementType> {\n  variant?: 'default' | 'hero';\n  /** The content like image to be displayed inside the overlay.  */\n  overlayContent?: React.ReactNode;\n  /** custom props of the Box wrapper of the component. */\n  wrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * The Overlay Component\n *\n * Overlay component wraps its children with an overlay effect. The overlay effect is achieved\n * using a semi-transparent gradient background. The component allows for custom content\n * (like an image) to be displayed inside the overlay through the `overlayContent` prop.\n */\nexport const Overlay: React.FC<OverlayProps> = ({ wrapperProps, sx, overlayContent, variant, children, ...rest }) => {\n  const { sx: wrapperSx, ...restWrapper } = wrapperProps || {};\n\n  return (\n    <Box\n      data-testid=\"Overlay-wrapper\"\n      sx={sxOverride({ position: 'relative', maxWidth: '100%', maxHeight: '100%' }, wrapperSx)}\n      {...restWrapper}\n    >\n      {overlayContent}\n      <Box\n        data-testid=\"Overlay-overlay\"\n        sx={sxOverride(\n          {\n            position: 'absolute',\n            inset: '0',\n            zIndex: '100',\n            background:\n              variant === 'hero'\n                ? 'linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)'\n                : 'linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))',\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["wrapperProps","sx","overlayContent","variant","children","rest","wrapperSx","restWrapper","_jsxs","Box","sxOverride","position","maxWidth","maxHeight","_jsx","inset","zIndex","background"],"mappings":"6IAmB+C,EAAGA,eAAcC,KAAIC,iBAAgBC,UAASC,cAAaC,MACxG,MAAQJ,GAAIK,KAAcC,GAAgBP,GAAgB,CAAA,EAE1D,OACEQ,OAACC,EAAAA,IAAG,CAAA,cACU,kBACZR,GAAIS,EAAAA,WAAW,CAAEC,SAAU,WAAYC,SAAU,OAAQC,UAAW,QAAUP,MAC1EC,EAAWH,SAAA,CAEdF,EACDY,MAACL,EAAAA,IAAG,CAAA,cACU,kBACZR,GAAIS,EAAAA,WACF,CACEC,SAAU,WACVI,MAAO,IACPC,OAAQ,MACRC,WACc,SAAZd,EACI,8KACA,6DAERF,MAEEI,WAEHD"}

package/cjs/components/pageLayout/PageLayout.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.js","sources":["../../../../../src/components/pageLayout/PageLayout.tsx"],"sourcesContent":["import React, { useCallback, useState, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, useScrollTrigger, Slide, Container, useTheme } from '@mui/material';\n\nexport interface PageLayoutProps extends BoxProps<ElementType> {\n  /**\n   * React node that renders layout header\n   */\n  header?: React.ReactNode;\n  /**\n   * React node that renders layout footer\n   */\n  footer?: React.ReactNode;\n  /**\n   * Specifies position of header\n   * - static: header is fixed on top of the content\n   * - fixed: header is visible while user scrolls the content\n   * - slide: header is visible until user scrolls down beyond `headerSlideThreshold`, header will reappear when user scrolls up\n   * @default static\n   */\n  headerPosition?: 'static' | 'fixed' | 'slide';\n  /**\n   * Specifies threshold that is used to hide header for the headerPosition=\"slide\"\n   * @default 250\n   */\n  headerSlideThreshold?: number;\n  /**\n   * Specifies if content should be automatically wrapped into container component\n   * @default false\n   */\n  wrapContent?: boolean;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerContainerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to root header wrapper\n   */\n  headerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to page content wrapper\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to footer wrapper\n   */\n  footerProps?: BoxProps<ElementType>;\n}\n\nexport const PageLayout: React.FC<PageLayoutProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      header,\n      footer,\n      headerPosition = 'static',\n      headerSlideThreshold = 250,\n      wrapContent = false,\n      headerProps,\n      headerContainerProps,\n      headerWrapperProps,\n      contentProps,\n      footerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: headerWrapperSx, ...restHeaderWrapper } = headerWrapperProps ?? {};\n    const {\n      sx: headerContainerSx,\n      className: headerContainerClassName,\n      ...restHeaderContainer\n    } = headerContainerProps ?? {};\n    // header height to take actual space in dom for the fixed/slide variants\n    const [headerHeight, setHeaderHeight] = useState<number>(Number.parseFloat(String(theme.mixins.toolbar.minHeight)));\n    const headerContainerRef = useCallback(\n      (element: HTMLElement) => {\n        if (headerPosition === 'static' || !element) {\n          return;\n        }\n        new ResizeObserver(() => {\n          setHeaderHeight(element.offsetHeight);\n        }).observe(element);\n      },\n      [headerPosition !== 'static'],\n    );\n    // trigger hide of the header during scroll\n    const slideTrigger = useScrollTrigger({\n      target: window,\n      threshold: headerSlideThreshold,\n    });\n\n    return (\n      <Box\n        sx={{\n          position: 'relative',\n          minHeight: '100vh',\n          backgroundColor: 'surface.primary',\n          display: 'grid',\n          gridTemplateRows: [header && 'max-content', 'auto', footer && 'max-content'].filter(Boolean).join(' '),\n          ...sx,\n        }}\n        data-testid=\"PageLayout\"\n        ref={ref}\n        {...rest}\n      >\n        {header && (\n          <Box\n            sx={{\n              ...(headerPosition !== 'static' && headerHeight && { height: headerHeight }),\n              ...headerWrapperSx,\n            }}\n            data-testid=\"PageLayout.headerWrapper\"\n            {...restHeaderWrapper}\n          >\n            <Box\n              {...(headerPosition === 'slide' && {\n                component: Slide,\n                appear: false,\n                direction: 'down',\n                in: !slideTrigger,\n              })}\n              sx={{\n                ...(headerPosition !== 'static' && {\n                  position: 'fixed',\n                  top: '0',\n                  left: '0',\n                  right: '0',\n                  zIndex: theme.zIndex.appBar,\n                }),\n                ...headerContainerSx,\n              }}\n              className={[headerPosition !== 'static' ? 'mui-fixed' : '', headerContainerClassName]\n                .filter(Boolean)\n                .join(' ')}\n              {...restHeaderContainer}\n            >\n              <Box ref={headerContainerRef} data-testid=\"PageLayout.header\" {...headerProps}>\n                {header}\n              </Box>\n            </Box>\n          </Box>\n        )}\n        <Box {...(wrapContent && { component: Container, maxWidth: 'xl' })} data-testid=\"Container\" {...contentProps}>\n          {children}\n        </Box>\n        {footer && (\n          <Box data-testid=\"PageLayout.footer\" {...footerProps}>\n            {footer}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["PageLayout","forwardRef","_a","ref","children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps","rest","__rest","theme","useTheme","_b","headerWrapperSx","restHeaderWrapper","_c","headerContainerSx","className","headerContainerClassName","restHeaderContainer","headerHeight","setHeaderHeight","useState","Number","parseFloat","String","mixins","toolbar","minHeight","headerContainerRef","useCallback","element","ResizeObserver","offsetHeight","observe","slideTrigger","useScrollTrigger","target","window","threshold","_jsxs","Box","Object","assign","position","backgroundColor","display","gridTemplateRows","filter","Boolean","join","_jsx","height","component","Slide","appear","direction","in","top","left","right","zIndex","appBar","Container","maxWidth"],"mappings":"iHAoDO,MAAMA,EAAwCC,EAAAA,WACnD,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,EAAAA,OAAAf,EAbT,kLAiBA,MAAMgB,EAAQC,EAAAA,WACRC,EAAgDP,QAAAA,EAAsB,IAApER,GAAIgB,GAAeD,EAAKE,EAAiBL,EAAAA,OAAAG,EAA3C,CAAA,OACAG,EAIFX,QAAAA,EAAwB,IAH1BP,GAAImB,EACJC,UAAWC,GAAwBH,EAChCI,EAAmBV,EAAAA,OAAAM,EAHlB,CAAA,KAAA,eAMCK,EAAcC,GAAmBC,EAAAA,SAAiBC,OAAOC,WAAWC,OAAOf,EAAMgB,OAAOC,QAAQC,aACjGC,EAAqBC,cACxBC,IACwB,WAAnB/B,GAAgC+B,GAGpC,IAAIC,eAAe,KACjBX,EAAgBU,EAAQE,gBACvBC,QAAQH,IAEb,CAAoB,WAAnB/B,IAGGmC,EAAeC,EAAAA,iBAAiB,CACpCC,OAAQC,OACRC,UAAWtC,IAGb,OACEuC,EAAAA,KAACC,EAAAA,mBACC5C,GAAE6C,OAAAC,OAAA,CACAC,SAAU,WACVhB,UAAW,QACXiB,gBAAiB,kBACjBC,QAAS,OACTC,iBAAkB,CAACjD,GAAU,cAAe,OAAQC,GAAU,eAAeiD,OAAOC,SAASC,KAAK,MAC/FrD,GAAE,cAEK,aACZF,IAAKA,GACDa,EAAI,CAAAZ,SAAA,CAEPE,GACCqD,EAAAA,IAACV,EAAAA,IAAGC,OAAAC,OAAA,CACF9C,kCACyB,WAAnBG,GAA+BoB,GAAgB,CAAEgC,OAAQhC,IAC1DP,GAAe,cAER,4BACRC,EAAiB,CAAAlB,SAErBuD,EAAAA,IAACV,EAAAA,IAAGC,OAAAC,OAAA,CAAA,EACsB,UAAnB3C,GAA8B,CACjCqD,UAAWC,EAAAA,MACXC,QAAQ,EACRC,UAAW,OACXC,IAAKtB,IAEPtC,GAAE6C,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACuB,WAAnB3C,GAA+B,CACjC4C,SAAU,QACVc,IAAK,IACLC,KAAM,IACNC,MAAO,IACPC,OAAQnD,EAAMmD,OAAOC,SAEpB9C,GAELC,UAAW,CAAoB,WAAnBjB,EAA8B,YAAc,GAAIkB,GACzD8B,OAAOC,SACPC,KAAK,MACJ/B,EAAmB,CAAAvB,SAEvBuD,EAAAA,IAACV,EAAAA,IAAGC,OAAAC,OAAA,CAAChD,IAAKkC,EAAkB,cAAc,qBAAwB1B,EAAW,CAAAP,SAC1EE,WAKTqD,EAAAA,IAACV,EAAAA,IAAGC,OAAAC,OAAA,CAAA,EAAMzC,GAAe,CAAEmD,UAAWU,EAAAA,UAAWC,SAAU,MAAO,CAAA,cAAc,aAAgB1D,EAAY,CAAAV,SACzGA,KAEFG,GACCoD,EAAAA,IAACV,EAAAA,IAAGC,OAAAC,OAAA,CAAA,cAAa,qBAAwBpC,EAAW,CAAAX,SACjDG"}
+{"version":3,"file":"PageLayout.js","sources":["../../../../../src/components/pageLayout/PageLayout.tsx"],"sourcesContent":["import React, { useCallback, useState, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, useScrollTrigger, Slide, Container, useTheme } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface PageLayoutProps extends BoxProps<ElementType> {\n  /**\n   * React node that renders layout header\n   */\n  header?: React.ReactNode;\n  /**\n   * React node that renders layout footer\n   */\n  footer?: React.ReactNode;\n  /**\n   * Specifies position of header\n   * - static: header is fixed on top of the content\n   * - fixed: header is visible while user scrolls the content\n   * - slide: header is visible until user scrolls down beyond `headerSlideThreshold`, header will reappear when user scrolls up\n   * @default static\n   */\n  headerPosition?: 'static' | 'fixed' | 'slide';\n  /**\n   * Specifies threshold that is used to hide header for the headerPosition=\"slide\"\n   * @default 250\n   */\n  headerSlideThreshold?: number;\n  /**\n   * Specifies if content should be automatically wrapped into container component\n   * @default false\n   */\n  wrapContent?: boolean;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerContainerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to root header wrapper\n   */\n  headerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to page content wrapper\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to footer wrapper\n   */\n  footerProps?: BoxProps<ElementType>;\n}\n\nexport const PageLayout: React.FC<PageLayoutProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      header,\n      footer,\n      headerPosition = 'static',\n      headerSlideThreshold = 250,\n      wrapContent = false,\n      headerProps,\n      headerContainerProps,\n      headerWrapperProps,\n      contentProps,\n      footerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: headerWrapperSx, ...restHeaderWrapper } = headerWrapperProps ?? {};\n    const {\n      sx: headerContainerSx,\n      className: headerContainerClassName,\n      ...restHeaderContainer\n    } = headerContainerProps ?? {};\n    // header height to take actual space in dom for the fixed/slide variants\n    const [headerHeight, setHeaderHeight] = useState<number>(Number.parseFloat(String(theme.mixins.toolbar.minHeight)));\n    const headerContainerRef = useCallback(\n      (element: HTMLElement | null) => {\n        if (headerPosition === 'static' || !element) {\n          return;\n        }\n        const observer = new ResizeObserver(() => {\n          setHeaderHeight(element.offsetHeight);\n        });\n        observer.observe(element);\n        return () => observer.disconnect();\n      },\n      [headerPosition !== 'static'],\n    );\n    // trigger hide of the header during scroll\n    const slideTrigger = useScrollTrigger({\n      target: window,\n      threshold: headerSlideThreshold,\n    });\n\n    return (\n      <Box\n        sx={sxOverride(\n          {\n            position: 'relative',\n            minHeight: '100vh',\n            backgroundColor: 'surface.primary',\n            display: 'grid',\n            gridTemplateRows: [header && 'max-content', 'auto', footer && 'max-content'].filter(Boolean).join(' '),\n          },\n          sx,\n        )}\n        data-testid=\"PageLayout\"\n        ref={ref}\n        {...rest}\n      >\n        {header && (\n          <Box\n            sx={sxOverride(\n              {\n                ...(headerPosition !== 'static' && headerHeight && { height: headerHeight }),\n              },\n              headerWrapperSx,\n            )}\n            data-testid=\"PageLayout.headerWrapper\"\n            {...restHeaderWrapper}\n          >\n            <Box\n              {...(headerPosition === 'slide' && {\n                component: Slide,\n                appear: false,\n                direction: 'down',\n                in: !slideTrigger,\n              })}\n              sx={sxOverride(\n                {\n                  ...(headerPosition !== 'static' && {\n                    position: 'fixed',\n                    top: '0',\n                    left: '0',\n                    right: '0',\n                    zIndex: theme.zIndex.appBar,\n                  }),\n                },\n                headerContainerSx,\n              )}\n              className={[headerPosition !== 'static' ? 'mui-fixed' : '', headerContainerClassName]\n                .filter(Boolean)\n                .join(' ')}\n              {...restHeaderContainer}\n            >\n              <Box ref={headerContainerRef} data-testid=\"PageLayout.header\" {...headerProps}>\n                {header}\n              </Box>\n            </Box>\n          </Box>\n        )}\n        <Box {...(wrapContent && { component: Container, maxWidth: 'xl' })} data-testid=\"Container\" {...contentProps}>\n          {children}\n        </Box>\n        {footer && (\n          <Box data-testid=\"PageLayout.footer\" {...footerProps}>\n            {footer}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["PageLayout","forwardRef","children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps","rest","ref","theme","useTheme","headerWrapperSx","restHeaderWrapper","headerContainerSx","className","headerContainerClassName","restHeaderContainer","headerHeight","setHeaderHeight","useState","Number","parseFloat","String","mixins","toolbar","minHeight","headerContainerRef","useCallback","element","observer","ResizeObserver","offsetHeight","observe","disconnect","slideTrigger","useScrollTrigger","target","window","threshold","_jsxs","Box","sxOverride","position","backgroundColor","display","gridTemplateRows","filter","Boolean","join","_jsx","height","component","Slide","appear","direction","in","top","left","right","zIndex","appBar","Container","maxWidth"],"mappings":"sJAqDaA,EAAwCC,EAAAA,WACnD,EAEIC,WACAC,KACAC,SACAC,SACAC,iBAAiB,SACjBC,uBAAuB,IACvBC,eAAc,EACdC,cACAC,uBACAC,qBACAC,eACAC,iBACGC,GAELC,KAEA,MAAMC,EAAQC,EAAAA,YACNd,GAAIe,KAAoBC,GAAsBR,GAAsB,CAAA,GAE1ER,GAAIiB,EACJC,UAAWC,KACRC,GACDb,GAAwB,CAAA,GAErBc,EAAcC,GAAmBC,EAAAA,SAAiBC,OAAOC,WAAWC,OAAOb,EAAMc,OAAOC,QAAQC,aACjGC,EAAqBC,cACxBC,IACC,GAAuB,WAAnB7B,IAAgC6B,EAClC,OAEF,MAAMC,EAAW,IAAIC,eAAe,KAClCZ,EAAgBU,EAAQG,gBAG1B,OADAF,EAASG,QAAQJ,GACV,IAAMC,EAASI,cAExB,CAAoB,WAAnBlC,IAGGmC,EAAeC,EAAAA,iBAAiB,CACpCC,OAAQC,OACRC,UAAWtC,IAGb,OACEuC,OAACC,EAAAA,KACC5C,GAAI6C,EAAAA,WACF,CACEC,SAAU,WACVjB,UAAW,QACXkB,gBAAiB,kBACjBC,QAAS,OACTC,iBAAkB,CAAChD,GAAU,cAAe,OAAQC,GAAU,eAAegD,OAAOC,SAASC,KAAK,MAEpGpD,GACD,cACW,aACZY,IAAKA,KACDD,YAEHV,GACCoD,EAAAA,IAACT,EAAAA,KACC5C,GAAI6C,EAAAA,WACF,IACyB,WAAnB1C,GAA+BkB,GAAgB,CAAEiC,OAAQjC,IAE/DN,GACD,cACW,8BACRC,EAAiBjB,SAErBsD,EAAAA,IAACT,EAAAA,IAAG,IACsB,UAAnBzC,GAA8B,CACjCoD,UAAWC,EAAAA,MACXC,QAAQ,EACRC,UAAW,OACXC,IAAKrB,GAEPtC,GAAI6C,aACF,IACyB,WAAnB1C,GAA+B,CACjC2C,SAAU,QACVc,IAAK,IACLC,KAAM,IACNC,MAAO,IACPC,OAAQlD,EAAMkD,OAAOC,SAGzB/C,GAEFC,UAAW,CAAoB,WAAnBf,EAA8B,YAAc,GAAIgB,GACzD+B,OAAOC,SACPC,KAAK,QACJhC,EAAmBrB,SAEvBsD,EAAAA,IAACT,MAAG,CAAChC,IAAKkB,EAAkB,cAAc,uBAAwBxB,EAAWP,SAC1EE,QAKToD,EAAAA,IAACT,MAAG,IAAMvC,GAAe,CAAEkD,UAAWU,YAAWC,SAAU,MAAO,cAAc,eAAgBzD,EAAYV,SACzGA,IAEFG,GACCmD,EAAAA,IAACT,EAAAA,IAAG,CAAA,cAAa,uBAAwBlC,EAAWX,SACjDG"}

package/cjs/components/passwordField/PasswordField.js

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

package/cjs/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\n/**\n * TextField adding extra logic to toggle into the password field via show/hide IconButton\n */\nexport const PasswordField: React.FC<PasswordFieldProps> = forwardRef(\n  ({ slotProps, iconButtonProps, visible: propsVisible, setVisible: setPropsVisible, ...rest }, ref) => {\n    const { input: inputSlotProps, ...restSlotProps } = slotProps || {};\n    const [rawVisible, setRawVisible] = useState<boolean>(false);\n    const visible = propsVisible ?? rawVisible;\n    const setVisible = setPropsVisible ?? setRawVisible;\n\n    return (\n      <TextField\n        ref={ref}\n        type={visible ? 'text' : 'password'}\n        autoComplete=\"new-password\"\n        slotProps={{\n          input: {\n            endAdornment: (\n              <InputAdornment position=\"end\">\n                <IconButton onClick={() => setVisible(!visible)} aria-label=\"Toggle visibility\" {...iconButtonProps}>\n                  {visible ? <HideIcon /> : <ShowIcon />}\n                </IconButton>\n              </InputAdornment>\n            ),\n            ...inputSlotProps,\n          },\n          ...restSlotProps,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["PasswordField","forwardRef","_a","ref","slotProps","iconButtonProps","visible","propsVisible","setVisible","setPropsVisible","rest","__rest","_b","input","inputSlotProps","restSlotProps","rawVisible","setRawVisible","useState","_jsx","TextField","Object","assign","type","autoComplete","endAdornment","InputAdornment","position","IconButton","onClick","HideIcon","ShowIcon"],"mappings":"iMA6BO,MAAMA,EAA8CC,EAAAA,WACzD,CAACC,EAA6FC,KAA7F,IAAAC,UAAEA,EAASC,gBAAEA,EAAiBC,QAASC,EAAcC,WAAYC,GAAeP,EAAKQ,EAAIC,EAAAA,OAAAT,EAAzF,wDACC,MAAMU,EAA8CR,GAAa,IAAzDS,MAAOC,KAAmBC,EAAaJ,EAAAA,OAAAC,EAAzC,CAAA,WACCI,EAAYC,GAAiBC,EAAAA,UAAkB,GAChDZ,EAAUC,QAAAA,EAAgBS,EAC1BR,EAAaC,QAAAA,EAAmBQ,EAEtC,OACEE,EAAAA,IAACC,EAAAA,UAASC,OAAAC,OAAA,CACRnB,IAAKA,EACLoB,KAAMjB,EAAU,OAAS,WACzBkB,aAAa,eACbpB,UAASiB,OAAAC,OAAA,CACPT,MAAKQ,OAAAC,OAAA,CACHG,aACEN,MAACO,EAAAA,eAAc,CAACC,SAAS,eACvBR,EAAAA,IAACS,EAAAA,WAAUP,OAAAC,OAAA,CAACO,QAAS,IAAMrB,GAAYF,GAAQ,aAAa,qBAAwBD,YACjFC,EAAUa,EAAAA,IAACW,EAAAA,SAAQ,CAAA,GAAMX,EAAAA,IAACY,EAAAA,mBAI9BjB,IAEFC,IAEDL"}
+{"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  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n  autoComplete?: 'new-password' | 'current-password' | string;\n  /**\n   * Properties provided to button toggling visibility. Can be used to change aria-label.\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Optional flag if password is visible\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Optional function to toggle visibility\n   */\n  setVisible?: (visible: boolean) => void;\n}\n\n/**\n * TextField adding extra logic to toggle into the password field via show/hide IconButton\n */\nexport const PasswordField: React.FC<PasswordFieldProps> = forwardRef(\n  ({ slotProps, iconButtonProps, visible: propsVisible, setVisible: setPropsVisible, ...rest }, ref) => {\n    const { input: inputSlotProps, ...restSlotProps } = slotProps || {};\n    const [rawVisible, setRawVisible] = useState<boolean>(false);\n    const visible = propsVisible ?? rawVisible;\n    const setVisible = setPropsVisible ?? setRawVisible;\n\n    return (\n      <TextField\n        ref={ref}\n        type={visible ? 'text' : 'password'}\n        autoComplete=\"new-password\"\n        slotProps={{\n          input: {\n            endAdornment: (\n              <InputAdornment position=\"end\">\n                <IconButton onClick={() => setVisible(!visible)} aria-label=\"Toggle visibility\" {...iconButtonProps}>\n                  {visible ? <HideIcon /> : <ShowIcon />}\n                </IconButton>\n              </InputAdornment>\n            ),\n            ...inputSlotProps,\n          },\n          ...restSlotProps,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["PasswordField","forwardRef","slotProps","iconButtonProps","visible","propsVisible","setVisible","setPropsVisible","rest","ref","input","inputSlotProps","restSlotProps","rawVisible","setRawVisible","useState","_jsx","TextField","type","autoComplete","endAdornment","InputAdornment","position","children","IconButton","onClick","HideIcon","ShowIcon"],"mappings":"8KA8BO,MAAMA,EAA8CC,EAAAA,WACzD,EAAGC,YAAWC,kBAAiBC,QAASC,EAAcC,WAAYC,KAAoBC,GAAQC,KAC5F,MAAQC,MAAOC,KAAmBC,GAAkBV,GAAa,CAAA,GAC1DW,EAAYC,GAAiBC,EAAAA,UAAkB,GAChDX,EAAUC,GAAgBQ,EAC1BP,EAAaC,GAAmBO,EAEtC,OACEE,MAACC,EAAAA,UAAS,CACRR,IAAKA,EACLS,KAAMd,EAAU,OAAS,WACzBe,aAAa,eACbjB,UAAW,CACTQ,MAAO,CACLU,aACEJ,EAAAA,IAACK,EAAAA,eAAc,CAACC,SAAS,MAAKC,SAC5BP,EAAAA,IAACQ,EAAAA,WAAU,CAACC,QAAS,IAAMnB,GAAYF,GAAQ,aAAa,uBAAwBD,WACjFC,EAAUY,EAAAA,IAACU,EAAAA,SAAQ,IAAMV,EAAAA,IAACW,EAAAA,SAAQ,CAAA,UAItChB,MAEFC,MAEDJ"}

package/cjs/components/playPauseButton/PlayPauseButton.js

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

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

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

package/cjs/components/progress/Loader.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../../../src/components/progress/Loader.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, ReactNode } from 'react';\nimport { Box, BoxProps, LinearProgress, LinearProgressProps } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\n\nexport interface LoaderProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   */\n  size?: LinearProgressProps['size'] | number;\n  /**\n   * Additional label before LoaderText\n   */\n  label?: ReactNode;\n  /**\n   * Optional custom bar props.\n   */\n  barProps?: LinearProgressProps;\n  /**\n   * Properties applied to LoaderText\n   */\n  loadingTextProps?: LoadingTextProps;\n}\n\n/**\n * Wrapper of LinearProgress, automatically selecting the appropriate variant and appending LoaderText\n */\nexport const Loader: React.FC<LoaderProps> = forwardRef(\n  ({ className, value, size, barProps, label, loadingTextProps, ...rest }, ref) => {\n    const { sx: barSx, ...restBar } = barProps ?? {};\n\n    return (\n      <Box\n        data-testid=\"Loader\"\n        className={['FlowLoader-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        {...rest}\n      >\n        {value !== undefined && (\n          <LoadingText data-testid=\"Loader.percentage\" value={value} label={label} {...loadingTextProps} />\n        )}\n        <LinearProgress\n          value={value}\n          sx={{\n            ...(typeof size === 'number' && { height: `${size}px` }),\n            ...barSx,\n          }}\n          {...(typeof size !== 'number' && { size: size })}\n          {...(value !== undefined && {\n            variant: 'determinate',\n            ['aria-valuenow']: value,\n            ['aria-valuemin']: 0,\n            ['aria-valuemax']: 100,\n          })}\n          {...restBar}\n        />\n      </Box>\n    );\n  },\n);\n"],"names":["Loader","forwardRef","_a","ref","className","value","size","barProps","label","loadingTextProps","rest","__rest","_b","sx","barSx","restBar","_jsxs","Box","Object","assign","filter","Boolean","join","children","undefined","_jsx","LoadingText","LinearProgress","height","variant"],"mappings":"+IA8BO,MAAMA,EAAgCC,EAAAA,WAC3C,CAACC,EAAwEC,KAAxE,IAAAC,UAAEA,EAASC,MAAEA,EAAKC,KAAEA,EAAIC,SAAEA,EAAQC,MAAEA,EAAKC,iBAAEA,GAAgBP,EAAKQ,EAAIC,EAAAA,OAAAT,EAApE,oEACC,MAAMU,EAA4BL,QAAAA,EAAY,IAAtCM,GAAIC,GAAKF,EAAKG,EAAOJ,EAAAA,OAAAC,EAAvB,CAAA,OAEN,OACEI,EAAAA,KAACC,EAAAA,IAAGC,OAAAC,OAAA,CAAA,cACU,SACZf,UAAW,CAAC,kBAAmBA,GAAWgB,OAAOC,SAASC,KAAK,KAC/DnB,IAAKA,GACDO,EAAI,CAAAa,SAAA,MAEGC,IAAVnB,GACCoB,EAAAA,IAACC,EAAAA,yCAAwB,oBAAoBrB,MAAOA,EAAOG,MAAOA,GAAWC,IAE/EgB,EAAAA,IAACE,EAAAA,eAAcT,OAAAC,OAAA,CACbd,MAAOA,EACPQ,GAAEK,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACoB,iBAATb,GAAqB,CAAEsB,OAAQ,GAAGtB,QAC1CQ,IAEgB,iBAATR,GAAqB,CAAEA,KAAMA,QAC1BkB,IAAVnB,GAAuB,CAC1BwB,QAAS,cACT,gBAAmBxB,EACnB,gBAAmB,EACnB,gBAAmB,KAEjBU"}
+{"version":3,"file":"Loader.js","sources":["../../../../../src/components/progress/Loader.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, ReactNode } from 'react';\nimport { Box, BoxProps, LinearProgress, LinearProgressProps } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface LoaderProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   */\n  size?: LinearProgressProps['size'] | number;\n  /**\n   * Additional label before LoaderText\n   */\n  label?: ReactNode;\n  /**\n   * Optional custom bar props.\n   */\n  barProps?: LinearProgressProps;\n  /**\n   * Properties applied to LoaderText\n   */\n  loadingTextProps?: LoadingTextProps;\n}\n\n/**\n * Wrapper of LinearProgress, automatically selecting the appropriate variant and appending LoaderText\n */\nexport const Loader: React.FC<LoaderProps> = forwardRef(\n  ({ className, value, size, barProps, label, loadingTextProps, ...rest }, ref) => {\n    const { sx: barSx, ...restBar } = barProps ?? {};\n\n    return (\n      <Box\n        data-testid=\"Loader\"\n        className={['FlowLoader-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        {...rest}\n      >\n        {value !== undefined && (\n          <LoadingText data-testid=\"Loader.percentage\" value={value} label={label} {...loadingTextProps} />\n        )}\n        <LinearProgress\n          value={value}\n          sx={sxOverride(\n            {\n              ...(typeof size === 'number' && { height: `${size}px` }),\n            },\n            barSx,\n          )}\n          {...(typeof size !== 'number' && { size: size })}\n          {...(value !== undefined && {\n            variant: 'determinate',\n            ['aria-valuenow']: value,\n            ['aria-valuemin']: 0,\n            ['aria-valuemax']: 100,\n          })}\n          {...restBar}\n        />\n      </Box>\n    );\n  },\n);\n"],"names":["Loader","forwardRef","className","value","size","barProps","label","loadingTextProps","rest","ref","sx","barSx","restBar","_jsxs","Box","filter","Boolean","join","children","undefined","_jsx","LoadingText","LinearProgress","sxOverride","height","variant"],"mappings":"8KA+BO,MAAMA,EAAgCC,EAAAA,WAC3C,EAAGC,YAAWC,QAAOC,OAAMC,WAAUC,QAAOC,sBAAqBC,GAAQC,KACvE,MAAQC,GAAIC,KAAUC,GAAYP,GAAY,CAAA,EAE9C,OACEQ,EAAAA,KAACC,EAAAA,IAAG,CAAA,cACU,SACZZ,UAAW,CAAC,kBAAmBA,GAAWa,OAAOC,SAASC,KAAK,KAC/DR,IAAKA,KACDD,EAAIU,SAAA,MAEGC,IAAVhB,GACCiB,EAAAA,IAACC,EAAAA,YAAW,CAAA,cAAa,oBAAoBlB,MAAOA,EAAOG,MAAOA,KAAWC,IAE/Ea,MAACE,EAAAA,eAAc,CACbnB,MAAOA,EACPO,GAAIa,aACF,IACsB,iBAATnB,GAAqB,CAAEoB,OAAQ,GAAGpB,QAE/CO,MAEmB,iBAATP,GAAqB,CAAEA,KAAMA,WAC1Be,IAAVhB,GAAuB,CAC1BsB,QAAS,cACT,gBAAmBtB,EACnB,gBAAmB,EACnB,gBAAmB,QAEjBS"}

package/cjs/components/progress/LoadingText.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingText.js","sources":["../../../../../src/components/progress/LoadingText.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface LoadingTextProps extends BoxProps<ElementType> {\n  /**\n   * Value in percent to display\n   */\n  value?: number | string;\n  /**\n   * Additional label before the value\n   */\n  label?: ReactNode;\n  /**\n   * Affects font size\n   * @default medium\n   */\n  size?: 'small' | 'medium';\n}\n\n/**\n * Component displaying current state of loading\n */\nexport const LoadingText: React.FC<LoadingTextProps> = forwardRef(\n  ({ value, children, label, size = 'medium', sx, ...rest }, ref) => {\n    return (\n      <Box\n        sx={{\n          py: 0.5,\n          fontSize: '14px',\n          ...(size === 'small' && {\n            fontSize: '12px',\n          }),\n          lineHeight: '20px',\n          fontWeight: '400',\n          letterSpacing: '0.002em',\n          textAlign: 'right',\n          ...sx,\n        }}\n        {...rest}\n        ref={ref}\n      >\n        {label && (\n          <Box component=\"span\" sx={{ mr: 0.5 }}>\n            {label}\n          </Box>\n        )}\n        {children || (typeof value === 'number' ? `${value} %` : value)}\n      </Box>\n    );\n  },\n);\n"],"names":["LoadingText","forwardRef","_a","ref","value","children","label","size","sx","rest","__rest","_jsxs","Box","Object","assign","py","fontSize","lineHeight","fontWeight","letterSpacing","textAlign","_jsx","component","mr"],"mappings":"iHAsBO,MAAMA,EAA0CC,EAAAA,WACrD,CAACC,EAA0DC,KAA1D,IAAAC,MAAEA,EAAKC,SAAEA,EAAQC,MAAEA,EAAKC,KAAEA,EAAO,SAAQC,GAAEA,GAAEN,EAAKO,EAAIC,EAAAA,OAAAR,EAAtD,0CACC,OACES,EAAAA,KAACC,EAAAA,mBACCJ,GAAEK,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CACAC,GAAI,GACJC,SAAU,QACG,UAATT,GAAoB,CACtBS,SAAU,SACV,CACFC,WAAY,OACZC,WAAY,MACZC,cAAe,UACfC,UAAW,UACRZ,IAEDC,EAAI,CACRN,IAAKA,EAAGE,SAAA,CAEPC,GACCe,MAACT,EAAAA,KAAIU,UAAU,OAAOd,GAAI,CAAEe,GAAI,IAAKlB,SAClCC,IAGJD,IAA8B,iBAAVD,EAAqB,GAAGA,MAAYA"}
+{"version":3,"file":"LoadingText.js","sources":["../../../../../src/components/progress/LoadingText.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface LoadingTextProps extends BoxProps<ElementType> {\n  /**\n   * Value in percent to display\n   */\n  value?: number | string;\n  /**\n   * Additional label before the value\n   */\n  label?: ReactNode;\n  /**\n   * Affects font size\n   * @default medium\n   */\n  size?: 'small' | 'medium';\n}\n\n/**\n * Component displaying current state of loading\n */\nexport const LoadingText: React.FC<LoadingTextProps> = forwardRef(\n  ({ value, children, label, size = 'medium', sx, ...rest }, ref) => {\n    return (\n      <Box\n        sx={sxOverride(\n          {\n            py: 0.5,\n            fontSize: '14px',\n            ...(size === 'small' && {\n              fontSize: '12px',\n            }),\n            lineHeight: '20px',\n            fontWeight: '400',\n            letterSpacing: '0.002em',\n            textAlign: 'right',\n          },\n          sx,\n        )}\n        {...rest}\n        ref={ref}\n      >\n        {label && (\n          <Box component=\"span\" sx={{ mr: 0.5 }}>\n            {label}\n          </Box>\n        )}\n        {children || (typeof value === 'number' ? `${value} %` : value)}\n      </Box>\n    );\n  },\n);\n"],"names":["LoadingText","forwardRef","value","children","label","size","sx","rest","ref","_jsxs","Box","sxOverride","py","fontSize","lineHeight","fontWeight","letterSpacing","textAlign","_jsx","component","mr"],"mappings":"gJAuBO,MAAMA,EAA0CC,EAAAA,WACrD,EAAGC,QAAOC,WAAUC,QAAOC,OAAO,SAAUC,QAAOC,GAAQC,IAEvDC,OAACC,EAAAA,KACCJ,GAAIK,EAAAA,WACF,CACEC,GAAI,GACJC,SAAU,UACG,UAATR,GAAoB,CACtBQ,SAAU,QAEZC,WAAY,OACZC,WAAY,MACZC,cAAe,UACfC,UAAW,SAEbX,MAEEC,EACJC,IAAKA,EAAGL,SAAA,CAEPC,GACCc,EAAAA,IAACR,EAAAA,IAAG,CAACS,UAAU,OAAOb,GAAI,CAAEc,GAAI,IAAKjB,SAClCC,IAGJD,IAA8B,iBAAVD,EAAqB,GAAGA,MAAYA"}

package/cjs/components/progress/Progress.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),s=require("react"),a=require("./Loader.js"),i=require("./Spinner.js");const t=s.forwardRef((t,n)=>{var{variant:u="spinner",value:o}=t,v=e.__rest(t,["variant","value"]);const c=s.useMemo(()=>o&&o<0?0:o&&o>100?100:o,[o]);return"loader"===u?r.jsx(a.Loader,Object.assign({ref:n,value:c},v)):r.jsx(i.Spinner,Object.assign({ref:n,value:c},v))});exports.Progress=t;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),s=require("./Loader.js"),a=require("./Spinner.js");const n=r.forwardRef(({variant:n="spinner",value:u,...i},t)=>{const o=r.useMemo(()=>u&&u<0?0:u&&u>100?100:u,[u]);return"loader"===n?e.jsx(s.Loader,{ref:t,value:o,...i}):e.jsx(a.Spinner,{ref:t,value:o,...i})});exports.Progress=n;
 //# sourceMappingURL=Progress.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sources":["../../../../../src/components/progress/Progress.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { Loader, LoaderProps } from './Loader';\nimport { Spinner, SpinnerProps } from './Spinner';\n\nexport interface ProgressBaseProps {\n  /**\n   * Determine if loader, or spinner should be used\n   * @default spinner\n   */\n  variant?: 'spinner' | 'loader';\n}\n\nexport interface ProgressLoaderProps extends ProgressBaseProps, LoaderProps {\n  variant: 'loader';\n}\n\nexport interface ProgressSpinnerProps extends ProgressBaseProps, SpinnerProps {\n  variant?: 'spinner';\n}\n\nexport type ProgressProps = ProgressLoaderProps | ProgressSpinnerProps;\n\nexport const Progress: React.FC<ProgressProps> = forwardRef(({ variant = 'spinner', value, ...rest }, ref) => {\n  // make sure the value is valid\n  const validValue = useMemo(() => {\n    const processedValue = value;\n    if (processedValue && processedValue < 0) return 0;\n    if (processedValue && processedValue > 100) return 100;\n    return processedValue;\n  }, [value]);\n\n  if (variant === 'loader') {\n    return <Loader ref={ref} value={validValue} {...(rest as LoaderProps)} />;\n  }\n  return <Spinner ref={ref} value={validValue} {...(rest as SpinnerProps)} />;\n});\n"],"names":["Progress","forwardRef","_a","ref","variant","value","rest","__rest","validValue","useMemo","_jsx","Loader","Object","assign","Spinner"],"mappings":"yIAsBO,MAAMA,EAAoCC,EAAAA,WAAW,CAACC,EAAyCC,SAAzCC,QAAEA,EAAU,UAASC,MAAEA,KAAUC,EAAIC,EAAAA,OAAAL,EAArC,CAAA,UAAA,UAE3D,MAAMM,EAAaC,EAAAA,QAAQ,IACFJ,KACgB,EAAU,EAD1BA,KAEgB,IAAY,IAF5BA,EAItB,CAACA,IAEJ,MAAgB,WAAZD,EACKM,MAACC,EAAAA,OAAMC,OAAAC,OAAA,CAACV,IAAKA,EAAKE,MAAOG,GAAiBF,IAE5CI,MAACI,EAAAA,QAAOF,OAAAC,OAAA,CAACV,IAAKA,EAAKE,MAAOG,GAAiBF"}
+{"version":3,"file":"Progress.js","sources":["../../../../../src/components/progress/Progress.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { Loader, LoaderProps } from './Loader';\nimport { Spinner, SpinnerProps } from './Spinner';\n\nexport interface ProgressBaseProps {\n  /**\n   * Determine if loader, or spinner should be used\n   * @default spinner\n   */\n  variant?: 'spinner' | 'loader';\n}\n\nexport interface ProgressLoaderProps extends ProgressBaseProps, LoaderProps {\n  variant: 'loader';\n}\n\nexport interface ProgressSpinnerProps extends ProgressBaseProps, SpinnerProps {\n  variant?: 'spinner';\n}\n\nexport type ProgressProps = ProgressLoaderProps | ProgressSpinnerProps;\n\nexport const Progress: React.FC<ProgressProps> = forwardRef(({ variant = 'spinner', value, ...rest }, ref) => {\n  // make sure the value is valid\n  const validValue = useMemo(() => {\n    const processedValue = value;\n    if (processedValue && processedValue < 0) return 0;\n    if (processedValue && processedValue > 100) return 100;\n    return processedValue;\n  }, [value]);\n\n  if (variant === 'loader') {\n    return <Loader ref={ref} value={validValue} {...(rest as LoaderProps)} />;\n  }\n  return <Spinner ref={ref} value={validValue} {...(rest as SpinnerProps)} />;\n});\n"],"names":["Progress","forwardRef","variant","value","rest","ref","validValue","useMemo","_jsx","Loader","Spinner"],"mappings":"4HAsBaA,EAAoCC,EAAAA,WAAW,EAAGC,UAAU,UAAWC,WAAUC,GAAQC,KAEpG,MAAMC,EAAaC,EAAAA,QAAQ,IACFJ,KACgB,EAAU,EAD1BA,KAEgB,IAAY,IAF5BA,EAItB,CAACA,IAEJ,MAAgB,WAAZD,EACKM,EAAAA,IAACC,EAAAA,OAAM,CAACJ,IAAKA,EAAKF,MAAOG,KAAiBF,IAE5CI,EAAAA,IAACE,EAAAA,QAAO,CAACL,IAAKA,EAAKF,MAAOG,KAAiBF"}

package/cjs/components/progress/ProgressState.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressState.js","sources":["../../../../../src/components/progress/ProgressState.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef, useMemo, ComponentType } from 'react';\nimport { Box, BoxProps, SvgIconProps } from '@mui/material';\nimport { CheckIcon } from '@/src/components/icon/stroke/CheckIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\n\nexport interface ProgressStateProps extends BoxProps<ElementType> {\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * State to display\n   */\n  state?: 'error' | 'success';\n  /**\n   * Message when success appears\n   */\n  successMessage?: ReactNode;\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ReactNode;\n  /**\n   * Properties applied to message wrapper\n   */\n  messageProps?: LoadingTextProps;\n  /**\n   * Overwrites state message (successMessage or errorMessage)\n   */\n  message?: ReactNode;\n  /**\n   * Properties applied to icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Overwrites state icon\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to wrapper of icon\n   */\n  iconWrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component displaying current state of loading\n */\nexport const ProgressState: React.FC<ProgressStateProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      size = 'medium',\n      state,\n      message,\n      messageProps,\n      successMessage,\n      errorMessage,\n      IconComponent,\n      iconProps,\n      iconWrapperProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: iconWrapperSx, ...restIconWrapper } = iconWrapperProps ?? {};\n    const [IconStateComponent, stateMessage] = useMemo(() => {\n      switch (state) {\n        case 'error':\n          return [CloseIcon, errorMessage];\n        case 'success':\n        default:\n          return [CheckIcon, successMessage];\n      }\n    }, [state, successMessage, errorMessage]);\n    const ProgressStateIcon = IconComponent ?? IconStateComponent;\n\n    return (\n      <Box\n        data-testid=\"ProgressMessageWrapper\"\n        ref={ref}\n        sx={{\n          display: 'inline-flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          gap: 1,\n          ...sx,\n        }}\n        {...rest}\n      >\n        <Box\n          key={state}\n          sx={{\n            '@keyframes flow-progressstate-finished': {\n              '0%': {\n                transform: 'scale(.8)',\n                opacity: '0.8',\n              },\n              '100%': {\n                transform: 'scale(1)',\n                opacity: '1',\n              },\n            },\n            animation: 'flow-progressstate-finished 0.4s',\n            backgroundColor: (theme) =>\n              state === 'error' ? 'error.main' : theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary',\n            color: 'common.white',\n            borderRadius: '50%',\n            lineHeight: '0',\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            ...(size === 'medium' && {\n              // 24px\n              p: 0.5,\n              '& .MuiSvgIcon-root': {\n                fontSize: '16px',\n              },\n            }),\n            ...(size === 'small' && {\n              // 16px\n              p: 0.25,\n              '& .MuiSvgIcon-root': {\n                fontSize: '12px',\n              },\n            }),\n            ...(typeof size === 'number' && {\n              height: `${size}px`,\n              width: `${size}px`,\n            }),\n            ...iconWrapperSx,\n          }}\n          {...restIconWrapper}\n        >\n          <ProgressStateIcon data-testid=\"Icon\" {...iconProps} />\n        </Box>\n        {(children || stateMessage || message) && (\n          <LoadingText\n            data-testid=\"ProgressMessage\"\n            {...(typeof size !== 'number' && { size: size })}\n            {...messageProps}\n          >\n            {children || stateMessage || message}\n          </LoadingText>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["ProgressState","forwardRef","_a","ref","children","sx","size","state","message","messageProps","successMessage","errorMessage","IconComponent","iconProps","iconWrapperProps","rest","__rest","_b","iconWrapperSx","restIconWrapper","IconStateComponent","stateMessage","useMemo","CloseIcon","CheckIcon","ProgressStateIcon","_jsxs","Box","Object","assign","display","justifyContent","alignItems","gap","_jsx","transform","opacity","animation","backgroundColor","theme","palette","mode","color","borderRadius","lineHeight","p","fontSize","height","width","LoadingText"],"mappings":"iOAiDO,MAAMA,EAA8CC,EAAAA,WACzD,CACEC,EAcAC,KAdA,IAAAC,SACEA,EAAQC,GACRA,EAAEC,KACFA,EAAO,SAAQC,MACfA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,eACZA,EAAcC,aACdA,EAAYC,cACZA,EAAaC,UACbA,EAASC,iBACTA,GAAgBZ,EACba,EAAIC,EAAAA,OAAAd,EAZT,CAAA,WAAA,KAAA,OAAA,QAAA,UAAA,eAAA,iBAAA,eAAA,gBAAA,YAAA,qBAgBA,MAAMe,EAA4CH,QAAAA,EAAoB,IAA9DT,GAAIa,GAAaD,EAAKE,EAAeH,EAAAA,OAAAC,EAAvC,CAAA,QACCG,EAAoBC,GAAgBC,EAAAA,QAAQ,IAE1C,UADCf,EAEG,CAACgB,EAAAA,UAAWZ,GAGZ,CAACa,EAAAA,UAAWd,GAEtB,CAACH,EAAOG,EAAgBC,IACrBc,EAAoBb,QAAAA,EAAiBQ,EAE3C,OACEM,EAAAA,KAACC,EAAAA,IAAGC,OAAAC,OAAA,CAAA,cACU,yBACZ1B,IAAKA,EACLE,GAAEuB,OAAAC,OAAA,CACAC,QAAS,cACTC,eAAgB,SAChBC,WAAY,SACZC,IAAK,GACF5B,IAEDU,aAEJmB,MAACP,EAAAA,mBAECtB,GAAEuB,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CACA,yCAA0C,CACxC,KAAM,CACJM,UAAW,YACXC,QAAS,OAEX,OAAQ,CACND,UAAW,WACXC,QAAS,MAGbC,UAAW,mCACXC,gBAAkBC,GACN,UAAVhC,EAAoB,aAAsC,SAAvBgC,EAAMC,QAAQC,KAAkB,kBAAoB,gBACzFC,MAAO,eACPC,aAAc,MACdC,WAAY,IACZd,QAAS,cACTE,WAAY,SACZD,eAAgB,UACH,WAATzB,GAAqB,CAEvBuC,EAAG,GACH,qBAAsB,CACpBC,SAAU,UAGD,UAATxC,GAAoB,CAEtBuC,EAAG,IACH,qBAAsB,CACpBC,SAAU,UAGM,iBAATxC,GAAqB,CAC9ByC,OAAQ,GAAGzC,MACX0C,MAAO,GAAG1C,QAETY,IAEDC,EAAe,CAAAf,SAEnB8B,EAAAA,IAACT,EAAiBG,OAAAC,OAAA,CAAA,cAAa,QAAWhB,MA3CrCN,IA6CLH,GAAYiB,GAAgBb,IAC5B0B,EAAAA,IAACe,2CACa,mBACS,iBAAT3C,GAAqB,CAAEA,KAAMA,GACrCG,EAAY,CAAAL,SAEfA,GAAYiB,GAAgBb"}
+{"version":3,"file":"ProgressState.js","sources":["../../../../../src/components/progress/ProgressState.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef, useMemo, ComponentType } from 'react';\nimport { Box, BoxProps, SvgIconProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { CheckIcon } from '@/src/components/icon/stroke/CheckIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\n\nexport interface ProgressStateProps extends BoxProps<ElementType> {\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * State to display\n   */\n  state?: 'error' | 'success';\n  /**\n   * Message when success appears\n   */\n  successMessage?: ReactNode;\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ReactNode;\n  /**\n   * Properties applied to message wrapper\n   */\n  messageProps?: LoadingTextProps;\n  /**\n   * Overwrites state message (successMessage or errorMessage)\n   */\n  message?: ReactNode;\n  /**\n   * Properties applied to icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Overwrites state icon\n   */\n  IconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to wrapper of icon\n   */\n  iconWrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component displaying current state of loading\n */\nexport const ProgressState: React.FC<ProgressStateProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      size = 'medium',\n      state,\n      message,\n      messageProps,\n      successMessage,\n      errorMessage,\n      IconComponent,\n      iconProps,\n      iconWrapperProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: iconWrapperSx, ...restIconWrapper } = iconWrapperProps ?? {};\n    const [IconStateComponent, stateMessage] = useMemo(() => {\n      switch (state) {\n        case 'error':\n          return [CloseIcon, errorMessage];\n        case 'success':\n        default:\n          return [CheckIcon, successMessage];\n      }\n    }, [state, successMessage, errorMessage]);\n    const ProgressStateIcon = IconComponent ?? IconStateComponent;\n\n    return (\n      <Box\n        data-testid=\"ProgressMessageWrapper\"\n        ref={ref}\n        sx={sxOverride(\n          {\n            display: 'inline-flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n            gap: 1,\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        <Box\n          key={state}\n          sx={sxOverride(\n            {\n              '@keyframes flow-progressstate-finished': {\n                '0%': {\n                  transform: 'scale(.8)',\n                  opacity: '0.8',\n                },\n                '100%': {\n                  transform: 'scale(1)',\n                  opacity: '1',\n                },\n              },\n              animation: 'flow-progressstate-finished 0.4s',\n              backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary'),\n              ...(state === 'error' && {\n                backgroundColor: 'error.main',\n              }),\n              color: 'common.white',\n              borderRadius: '50%',\n              lineHeight: '0',\n              display: 'inline-flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              ...(size === 'medium' && {\n                // 24px\n                p: 0.5,\n                '& .MuiSvgIcon-root': {\n                  fontSize: '16px',\n                },\n              }),\n              ...(size === 'small' && {\n                // 16px\n                p: 0.25,\n                '& .MuiSvgIcon-root': {\n                  fontSize: '12px',\n                },\n              }),\n              ...(typeof size === 'number' && {\n                height: `${size}px`,\n                width: `${size}px`,\n              }),\n            },\n            iconWrapperSx,\n          )}\n          {...restIconWrapper}\n        >\n          <ProgressStateIcon data-testid=\"Icon\" {...iconProps} />\n        </Box>\n        {(children || stateMessage || message) && (\n          <LoadingText\n            data-testid=\"ProgressMessage\"\n            {...(typeof size !== 'number' && { size: size })}\n            {...messageProps}\n          >\n            {children || stateMessage || message}\n          </LoadingText>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["ProgressState","forwardRef","children","sx","size","state","message","messageProps","successMessage","errorMessage","IconComponent","iconProps","iconWrapperProps","rest","ref","iconWrapperSx","restIconWrapper","IconStateComponent","stateMessage","useMemo","CloseIcon","CheckIcon","ProgressStateIcon","_jsxs","Box","sxOverride","display","justifyContent","alignItems","gap","_jsx","transform","opacity","animation","backgroundColor","theme","palette","mode","color","borderRadius","lineHeight","p","fontSize","height","width","LoadingText"],"mappings":"gQAkDO,MAAMA,EAA8CC,EAAAA,WACzD,EAEIC,WACAC,KACAC,OAAO,SACPC,QACAC,UACAC,eACAC,iBACAC,eACAC,gBACAC,YACAC,sBACGC,GAELC,KAEA,MAAQX,GAAIY,KAAkBC,GAAoBJ,GAAoB,CAAA,GAC/DK,EAAoBC,GAAgBC,EAAAA,QAAQ,IAE1C,UADCd,EAEG,CAACe,EAAAA,UAAWX,GAGZ,CAACY,EAAAA,UAAWb,GAEtB,CAACH,EAAOG,EAAgBC,IACrBa,EAAoBZ,GAAiBO,EAE3C,OACEM,EAAAA,KAACC,EAAAA,IAAG,CAAA,cACU,yBACZV,IAAKA,EACLX,GAAIsB,aACF,CACEC,QAAS,cACTC,eAAgB,SAChBC,WAAY,SACZC,IAAK,GAEP1B,MAEEU,EAAIX,SAAA,CAER4B,EAAAA,IAACN,EAAAA,IAAG,CAEFrB,GAAIsB,aACF,CACE,yCAA0C,CACxC,KAAM,CACJM,UAAW,YACXC,QAAS,OAEX,OAAQ,CACND,UAAW,WACXC,QAAS,MAGbC,UAAW,mCACXC,gBAAkBC,GAAkC,SAAvBA,EAAMC,QAAQC,KAAkB,kBAAoB,mBACnE,UAAVhC,GAAqB,CACvB6B,gBAAiB,cAEnBI,MAAO,eACPC,aAAc,MACdC,WAAY,IACZd,QAAS,cACTE,WAAY,SACZD,eAAgB,YACH,WAATvB,GAAqB,CAEvBqC,EAAG,GACH,qBAAsB,CACpBC,SAAU,YAGD,UAATtC,GAAoB,CAEtBqC,EAAG,IACH,qBAAsB,CACpBC,SAAU,YAGM,iBAATtC,GAAqB,CAC9BuC,OAAQ,GAAGvC,MACXwC,MAAO,GAAGxC,QAGdW,MAEEC,EAAed,SAEnB4B,EAAAA,IAACR,EAAiB,CAAA,cAAa,UAAWX,KA/CrCN,IAiDLH,GAAYgB,GAAgBZ,IAC5BwB,EAAAA,IAACe,EAAAA,2BACa,qBACS,iBAATzC,GAAqB,CAAEA,KAAMA,MACrCG,EAAYL,SAEfA,GAAYgB,GAAgBZ"}

package/cjs/components/progress/Spinner.d.ts

@@ -41,7 +41,7 @@ export interface SpinnerProps extends BoxProps<ElementType> {
     /**
      * Additional label before LoadingText
      */
-    label?: boolean | ReactNode;
+    label?: ReactNode;
     /**
      * Properties applied to LoadingText
      */

package/cjs/components/progress/Spinner.js

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