@skodaflow/web-library 8.1.0 → 8.3.0

package/components/notification/NotificationCenter.js

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

package/components/notification/NotificationCenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.js","sources":["../../../src/components/notification/NotificationCenter.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport {\n  Box,\n  Button,\n  BoxProps,\n  ButtonProps,\n  IconButton,\n  IconButtonProps,\n  IconProps,\n  Typography,\n  TypographyProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationCenterProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification center\n   */\n  title?: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Text for the dismiss all button\n   */\n  dismissAllText?: React.ReactNode;\n  /**\n   * Callback function when the dismiss all button is clicked\n   */\n  onDismissAll?: () => void;\n  /**\n   * Callback function when the close button is clicked\n   */\n  onClose?: () => void;\n  /**\n   * Max Height of the notification center\n   */\n  height?: number | string;\n  /**\n   * Custom props for the icon button\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  iconProps?: IconProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss box\n   */\n  dismissBoxProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss button\n   */\n  dismissButtonProps?: ButtonProps<ElementType>;\n}\n\nexport const NotificationCenter: FC<NotificationCenterProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      title = 'Notifications',\n      headerProps,\n      titleProps,\n      dismissAllText = 'Dismiss All',\n      onDismissAll,\n      onClose,\n      iconButtonProps,\n      iconProps,\n      containerProps,\n      dismissBoxProps,\n      dismissButtonProps,\n      height = 556,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: containerSx, ...restContainer } = containerProps ?? {};\n    const { sx: dismissBoxSx, ...restDismissBox } = dismissBoxProps ?? {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps ?? {};\n\n    const formatHeight = (heightValue: number | string) => {\n      if (typeof heightValue === 'string' && heightValue.includes('px')) {\n        return heightValue;\n      }\n      // if typeof heightValue === 'number', or string without 'px'\n      return `${heightValue}px`;\n    };\n\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          width: { xs: '100%', sm: '360px', md: '440px' },\n          borderRadius: { xs: '0px', sm: '8px' },\n          backgroundColor: 'background.primary',\n          color: 'text.primary',\n          boxShadow: '0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)',\n          overflow: 'hidden',\n          maxHeight: formatHeight(height),\n          ...sx,\n        }}\n        data-testid=\"NotificationCenter\"\n        {...rest}\n      >\n        <Box\n          sx={{\n            padding: '16px 8px 16px 16px',\n            display: 'flex',\n            justifyContent: 'space-between',\n            ...headerSx,\n          }}\n          {...restHeader}\n        >\n          <Typography variant=\"h4\" component=\"span\" data-testid=\"NotificationCenter.title\" {...titleProps}>\n            {title}\n          </Typography>\n          {onClose && (\n            <IconButton\n              aria-label=\"onClose notificationCenter\"\n              onClick={onClose}\n              size=\"medium\"\n              className=\"notificationCenter-onClose\"\n              sx={{\n                padding: '4px',\n                ...iconButtonSx,\n              }}\n              data-testid=\"NotificationCenter.onClose\"\n              {...restIconButton}\n            >\n              <CloseIcon fontSize=\"medium\" className=\"ballotx\" {...iconProps} />\n            </IconButton>\n          )}\n        </Box>\n\n        {onDismissAll && (\n          <Box\n            sx={{\n              padding: '0 8px 4px 16px',\n              display: 'flex',\n              justifyContent: 'flex-end',\n              ...dismissBoxSx,\n            }}\n            {...restDismissBox}\n          >\n            <Button\n              onClick={onDismissAll}\n              size=\"small\"\n              color=\"secondary\"\n              variant=\"text\"\n              data-testid=\"NotificationCenter.dismiss\"\n              {...dismissButtonProps}\n            >\n              {dismissAllText}\n            </Button>\n          </Box>\n        )}\n        <Box\n          sx={{\n            overflowY: 'auto',\n            // add divider between notifications\n            '& [data-testid=\"Notification\"]:not(:last-child)': {\n              borderBottom: 1,\n              borderColor: 'surface.secondary',\n            },\n            ...containerSx,\n          }}\n          data-testid=\"NotificationCenter.content\"\n          {...restContainer}\n        >\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenter","forwardRef","children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height","rest","ref","headerSx","restHeader","containerSx","restContainer","dismissBoxSx","restDismissBox","iconButtonSx","restIconButton","_jsxs","Box","display","flexDirection","width","xs","sm","md","borderRadius","backgroundColor","color","boxShadow","overflow","maxHeight","heightValue","includes","padding","justifyContent","_jsx","Typography","variant","component","IconButton","onClick","size","className","CloseIcon","fontSize","Button","overflowY","borderBottom","borderColor"],"mappings":"mOAiEaA,EAAkDC,EAC7D,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,EAACC,EAAG,CACFV,IAAKA,EACLd,GAAI,CACFyB,QAAS,OACTC,cAAe,SACfC,MAAO,CAAEC,GAAI,OAAQC,GAAI,QAASC,GAAI,SACtCC,aAAc,CAAEH,GAAI,MAAOC,GAAI,OAC/BG,gBAAiB,qBACjBC,MAAO,eACPC,UAAW,2EACXC,SAAU,SACVC,WApBgBC,EAoBQzB,EAnBD,iBAAhByB,GAA4BA,EAAYC,SAAS,MACnDD,EAGF,GAAGA,UAgBHrC,GACJ,cACW,wBACRa,EAAId,SAAA,CAERwB,EAACC,EAAG,CACFxB,GAAI,CACFuC,QAAS,qBACTd,QAAS,OACTe,eAAgB,mBACbzB,MAEDC,EAAUjB,SAAA,CAEd0C,EAACC,EAAU,CAACC,QAAQ,KAAKC,UAAU,OAAM,cAAa,8BAA+BzC,EAAUJ,SAC5FE,IAEFK,GACCmC,EAACI,gBACY,6BACXC,QAASxC,EACTyC,KAAK,SACLC,UAAU,6BACVhD,GAAI,CACFuC,QAAS,SACNlB,GACJ,cACW,gCACRC,EAAcvB,SAElB0C,EAACQ,EAAS,CAACC,SAAS,SAASF,UAAU,aAAcxC,SAK1DH,GACCoC,EAACjB,EAAG,CACFxB,GAAI,CACFuC,QAAS,iBACTd,QAAS,OACTe,eAAgB,cACbrB,MAEDC,EAAcrB,SAElB0C,EAACU,GACCL,QAASzC,EACT0C,KAAK,QACLd,MAAM,YACNU,QAAQ,OAAM,cACF,gCACRhC,EAAkBZ,SAErBK,MAIPqC,EAACjB,EAAG,CACFxB,GAAI,CACFoD,UAAW,OAEX,kDAAmD,CACjDC,aAAc,EACdC,YAAa,wBAEZrC,GACJ,cACW,gCACRC,EAAanB,SAEhBA,OA3Fc,IAACsC"}
+{"version":3,"file":"NotificationCenter.js","sources":["../../../src/components/notification/NotificationCenter.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport {\n  Box,\n  Button,\n  BoxProps,\n  ButtonProps,\n  IconButton,\n  IconButtonProps,\n  IconProps,\n  Typography,\n  TypographyProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface NotificationCenterProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification center\n   */\n  title?: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Text for the dismiss all button\n   */\n  dismissAllText?: React.ReactNode;\n  /**\n   * Callback function when the dismiss all button is clicked\n   */\n  onDismissAll?: () => void;\n  /**\n   * Callback function when the close button is clicked\n   */\n  onClose?: () => void;\n  /**\n   * Max Height of the notification center\n   */\n  height?: number | string;\n  /**\n   * Custom props for the icon button\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  iconProps?: IconProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss box\n   */\n  dismissBoxProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss button\n   */\n  dismissButtonProps?: ButtonProps<ElementType>;\n}\n\nexport const NotificationCenter: FC<NotificationCenterProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      title = 'Notifications',\n      headerProps,\n      titleProps,\n      dismissAllText = 'Dismiss All',\n      onDismissAll,\n      onClose,\n      iconButtonProps,\n      iconProps,\n      containerProps,\n      dismissBoxProps,\n      dismissButtonProps,\n      height = 556,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: containerSx, ...restContainer } = containerProps ?? {};\n    const { sx: dismissBoxSx, ...restDismissBox } = dismissBoxProps ?? {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps ?? {};\n\n    const formatHeight = (heightValue: number | string) => {\n      if (typeof heightValue === 'string' && heightValue.includes('px')) {\n        return heightValue;\n      }\n      // if typeof heightValue === 'number', or string without 'px'\n      return `${heightValue}px`;\n    };\n\n    return (\n      <Box\n        ref={ref}\n        sx={sxOverride(\n          {\n            display: 'flex',\n            flexDirection: 'column',\n            width: { xs: '100%', sm: '360px', md: '440px' },\n            borderRadius: { xs: '0px', sm: '8px' },\n            backgroundColor: 'background.primary',\n            color: 'text.primary',\n            boxShadow: '0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)',\n            overflow: 'hidden',\n            maxHeight: formatHeight(height),\n          },\n          sx,\n        )}\n        data-testid=\"NotificationCenter\"\n        {...rest}\n      >\n        <Box\n          sx={sxOverride(\n            {\n              padding: '16px 8px 16px 16px',\n              display: 'flex',\n              justifyContent: 'space-between',\n            },\n            headerSx,\n          )}\n          {...restHeader}\n        >\n          <Typography variant=\"h4\" component=\"span\" data-testid=\"NotificationCenter.title\" {...titleProps}>\n            {title}\n          </Typography>\n          {onClose && (\n            <IconButton\n              aria-label=\"onClose notificationCenter\"\n              onClick={onClose}\n              size=\"medium\"\n              className=\"notificationCenter-onClose\"\n              sx={sxOverride(\n                {\n                  padding: '4px',\n                },\n                iconButtonSx,\n              )}\n              data-testid=\"NotificationCenter.onClose\"\n              {...restIconButton}\n            >\n              <CloseIcon fontSize=\"medium\" className=\"ballotx\" {...iconProps} />\n            </IconButton>\n          )}\n        </Box>\n\n        {onDismissAll && (\n          <Box\n            sx={sxOverride(\n              {\n                padding: '0 8px 4px 16px',\n                display: 'flex',\n                justifyContent: 'flex-end',\n              },\n              dismissBoxSx,\n            )}\n            {...restDismissBox}\n          >\n            <Button\n              onClick={onDismissAll}\n              size=\"small\"\n              color=\"secondary\"\n              variant=\"text\"\n              data-testid=\"NotificationCenter.dismiss\"\n              {...dismissButtonProps}\n            >\n              {dismissAllText}\n            </Button>\n          </Box>\n        )}\n        <Box\n          sx={sxOverride(\n            {\n              overflowY: 'auto',\n              // add divider between notifications\n              '& [data-testid=\"Notification\"]:not(:last-child)': {\n                borderBottom: 1,\n                borderColor: 'surface.secondary',\n              },\n            },\n            containerSx,\n          )}\n          data-testid=\"NotificationCenter.content\"\n          {...restContainer}\n        >\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenter","forwardRef","children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height","rest","ref","headerSx","restHeader","containerSx","restContainer","dismissBoxSx","restDismissBox","iconButtonSx","restIconButton","_jsxs","Box","sxOverride","display","flexDirection","width","xs","sm","md","borderRadius","backgroundColor","color","boxShadow","overflow","maxHeight","heightValue","includes","padding","justifyContent","_jsx","Typography","variant","component","IconButton","onClick","size","className","CloseIcon","fontSize","Button","overflowY","borderBottom","borderColor"],"mappings":"qSAkEaA,EAAkDC,EAC7D,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,EAACC,EAAG,CACFV,IAAKA,EACLd,GAAIyB,EACF,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,EAACC,EAAG,CACFxB,GAAIyB,EACF,CACEe,QAAS,qBACTd,QAAS,OACTe,eAAgB,iBAElB1B,MAEEC,YAEJ0B,EAACC,GAAWC,QAAQ,KAAKC,UAAU,OAAM,cAAa,8BAA+B1C,EAAUJ,SAC5FE,IAEFK,GACCoC,EAACI,EAAU,CAAA,aACE,6BACXC,QAASzC,EACT0C,KAAK,SACLC,UAAU,6BACVjD,GAAIyB,EACF,CACEe,QAAS,OAEXnB,GACD,cACW,gCACRC,EAAcvB,SAElB2C,EAACQ,EAAS,CAACC,SAAS,SAASF,UAAU,aAAczC,SAK1DH,GACCqC,EAAClB,EAAG,CACFxB,GAAIyB,EACF,CACEe,QAAS,iBACTd,QAAS,OACTe,eAAgB,YAElBtB,MAEEC,EAAcrB,SAElB2C,EAACU,EAAM,CACLL,QAAS1C,EACT2C,KAAK,QACLd,MAAM,YACNU,QAAQ,OAAM,cACF,gCACRjC,WAEHP,MAIPsC,EAAClB,GACCxB,GAAIyB,EACF,CACE4B,UAAW,OAEX,kDAAmD,CACjDC,aAAc,EACdC,YAAa,sBAGjBtC,GACD,cACW,gCACRC,EAAanB,SAEhBA,OArGc,IAACuC"}

package/components/notification/NotificationCenterCategory.js

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

package/components/notification/NotificationCenterCategory.js.map

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

package/components/notification/NotificationCenterHeaderButton.js

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

package/components/notification/NotificationCenterHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenterHeaderButton.js","sources":["../../../src/components/notification/NotificationCenterHeaderButton.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useState } from 'react';\nimport { HeaderButton, HeaderButtonProps } from '@/src/components/header/HeaderButton';\nimport { BellIcon } from '@/src/components/icon/stroke/BellIcon';\nimport { Fade, ClickAwayListener, ClickAwayListenerProps, Popper, PopperProps, FadeProps } from '@mui/material';\nimport { NotificationCenter, NotificationCenterProps } from './NotificationCenter';\n\nexport interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: HeaderButtonProps['label'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: HeaderButtonProps['tooltipProps'];\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: HeaderButtonProps['badgeProps'];\n  /**\n   * Props applied to HeaderButton\n   */\n  headerButtonProps?: HeaderButtonProps;\n  /**\n   * Icon for the HeaderButton\n   * @default BellIcon\n   */\n  icon?: ReactNode;\n  /**\n   * Props for the Popper component\n   */\n  popperProps?: PopperProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to Fade\n   */\n  fadeProps?: Omit<FadeProps, 'children'>;\n}\n\n/**\n * HeaderButton that opens NotificationCenter\n */\nexport const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps> = forwardRef(\n  (\n    {\n      popperProps,\n      clickAwayListenerProps,\n      fadeProps,\n      label = 'Notifications',\n      extend,\n      tooltipProps,\n      badgeProps,\n      headerButtonProps,\n      icon,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const { sx: popperSx, ...restPopper } = popperProps ?? {};\n\n    return (\n      <>\n        <HeaderButton\n          label={label}\n          extend={extend ?? false}\n          tooltipProps={{\n            ...(anchor && { open: false }),\n            ...tooltipProps,\n          }}\n          badgeProps={badgeProps}\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor(e.currentTarget);\n          }}\n          ref={ref}\n          data-testid=\"NotificationCenterHeaderButton\"\n          {...headerButtonProps}\n        >\n          {icon || <BellIcon />}\n        </HeaderButton>\n        <Popper\n          open={!!anchor}\n          anchorEl={anchor}\n          placement=\"bottom-end\"\n          modifiers={[\n            {\n              name: 'offset',\n              options: {\n                offset: [0, 18],\n              },\n            },\n          ]}\n          transition\n          sx={{\n            zIndex: (theme) => theme.zIndex.appBar + 10,\n            ...popperSx,\n          }}\n          {...restPopper}\n        >\n          {({ TransitionProps }) => (\n            <ClickAwayListener onClickAway={() => setAnchor(null)} {...clickAwayListenerProps}>\n              <Fade {...TransitionProps} {...fadeProps}>\n                <NotificationCenter {...rest} ref={undefined} />\n              </Fade>\n            </ClickAwayListener>\n          )}\n        </Popper>\n      </>\n    );\n  },\n);\n"],"names":["NotificationCenterHeaderButton","forwardRef","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","headerButtonProps","icon","onClick","rest","ref","anchor","setAnchor","useState","sx","popperSx","restPopper","_jsxs","_Fragment","children","_jsx","HeaderButton","open","e","currentTarget","BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","Fade","NotificationCenter","undefined"],"mappings":"qWAiDO,MAAMA,EAA0EC,EACrF,EAEIC,cACAC,yBACAC,YACAC,QAAQ,gBACRC,SACAC,eACAC,aACAC,oBACAC,OACAC,aACGC,GAELC,KAEA,MAAOC,EAAQC,GAAaC,EAAS,OAC7BC,GAAIC,KAAaC,GAAejB,GAAe,CAAA,EAEvD,OACEkB,EAAAC,EAAA,CAAAC,SAAA,CACEC,EAACC,EAAY,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,EAACK,EAAQ,CAAA,KAEpBL,EAACM,EAAM,CACLJ,OAAQX,EACRgB,SAAUhB,EACViB,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,EACVnB,GAAI,CACFoB,OAASC,GAAUA,EAAMD,OAAOE,OAAS,MACtCrB,MAEDC,WAEH,EAAGqB,qBACFjB,EAACkB,EAAiB,CAACC,YAAa,IAAM3B,EAAU,SAAWZ,EAAsBmB,SAC/EC,EAACoB,EAAI,IAAKH,KAAqBpC,EAASkB,SACtCC,EAACqB,EAAkB,IAAKhC,EAAMC,SAAKgC"}
+{"version":3,"file":"NotificationCenterHeaderButton.js","sources":["../../../src/components/notification/NotificationCenterHeaderButton.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useState } from 'react';\nimport { HeaderButton, HeaderButtonProps } from '@/src/components/header/HeaderButton';\nimport { BellIcon } from '@/src/components/icon/stroke/BellIcon';\nimport { Fade, ClickAwayListener, ClickAwayListenerProps, Popper, PopperProps, FadeProps } from '@mui/material';\nimport { NotificationCenter, NotificationCenterProps } from './NotificationCenter';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: HeaderButtonProps['label'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: HeaderButtonProps['tooltipProps'];\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: HeaderButtonProps['badgeProps'];\n  /**\n   * Props applied to HeaderButton\n   */\n  headerButtonProps?: HeaderButtonProps;\n  /**\n   * Icon for the HeaderButton\n   * @default BellIcon\n   */\n  icon?: ReactNode;\n  /**\n   * Props for the Popper component\n   */\n  popperProps?: PopperProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n  /**\n   * Props applied to Fade\n   */\n  fadeProps?: Omit<FadeProps, 'children'>;\n}\n\n/**\n * HeaderButton that opens NotificationCenter\n */\nexport const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps> = forwardRef(\n  (\n    {\n      popperProps,\n      clickAwayListenerProps,\n      fadeProps,\n      label = 'Notifications',\n      extend,\n      tooltipProps,\n      badgeProps,\n      headerButtonProps,\n      icon,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const { sx: popperSx, ...restPopper } = popperProps ?? {};\n\n    return (\n      <>\n        <HeaderButton\n          label={label}\n          extend={extend ?? false}\n          tooltipProps={{\n            ...(anchor && { open: false }),\n            ...tooltipProps,\n          }}\n          badgeProps={badgeProps}\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor(e.currentTarget);\n          }}\n          ref={ref}\n          data-testid=\"NotificationCenterHeaderButton\"\n          {...headerButtonProps}\n        >\n          {icon || <BellIcon />}\n        </HeaderButton>\n        <Popper\n          open={!!anchor}\n          anchorEl={anchor}\n          placement=\"bottom-end\"\n          modifiers={[\n            {\n              name: 'offset',\n              options: {\n                offset: [0, 18],\n              },\n            },\n          ]}\n          transition\n          sx={sxOverride(\n            {\n              zIndex: (theme) => theme.zIndex.appBar + 10,\n            },\n            popperSx,\n          )}\n          {...restPopper}\n        >\n          {({ TransitionProps }) => (\n            <ClickAwayListener onClickAway={() => setAnchor(null)} {...clickAwayListenerProps}>\n              <Fade {...TransitionProps} {...fadeProps}>\n                <NotificationCenter {...rest} ref={undefined} />\n              </Fade>\n            </ClickAwayListener>\n          )}\n        </Popper>\n      </>\n    );\n  },\n);\n"],"names":["NotificationCenterHeaderButton","forwardRef","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","headerButtonProps","icon","onClick","rest","ref","anchor","setAnchor","useState","sx","popperSx","restPopper","_jsxs","_Fragment","children","_jsx","HeaderButton","open","e","currentTarget","BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","sxOverride","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","Fade","NotificationCenter","undefined"],"mappings":"uaAkDO,MAAMA,EAA0EC,EACrF,EAEIC,cACAC,yBACAC,YACAC,QAAQ,gBACRC,SACAC,eACAC,aACAC,oBACAC,OACAC,aACGC,GAELC,KAEA,MAAOC,EAAQC,GAAaC,EAAS,OAC7BC,GAAIC,KAAaC,GAAejB,GAAe,CAAA,EAEvD,OACEkB,EAAAC,EAAA,CAAAC,SAAA,CACEC,EAACC,EAAY,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,EAACK,EAAQ,CAAA,KAEpBL,EAACM,EAAM,CACLJ,OAAQX,EACRgB,SAAUhB,EACViB,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,EACVnB,GAAIoB,EACF,CACEC,OAASC,GAAUA,EAAMD,OAAOE,OAAS,IAE3CtB,MAEEC,WAEH,EAAGsB,qBACFlB,EAACmB,EAAiB,CAACC,YAAa,IAAM5B,EAAU,SAAWZ,EAAsBmB,SAC/EC,EAACqB,EAAI,IAAKH,KAAqBrC,EAASkB,SACtCC,EAACsB,EAAkB,IAAKjC,EAAMC,SAAKiC"}

package/components/overlay/Overlay.js

@@ -1,2 +1,2 @@
-import{jsxs as r,jsx as a}from"react/jsx-runtime";import{Box as e}from"@mui/material";const t=({wrapperProps:t,sx:i,overlayContent:n,variant:o,children:d,...g})=>{const{sx:s,...l}=t||{};return r(e,{"data-testid":"Overlay-wrapper",sx:{position:"relative",maxWidth:"100%",maxHeight:"100%",...s},...l,children:[n,a(e,{"data-testid":"Overlay-overlay",sx:{position:"absolute",inset:"0",zIndex:"100",background:"hero"===o?"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))",...i},...g,children:d})]})};export{t as Overlay};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import{Box as a}from"@mui/material";import{sxOverride as t}from"../../utils/sxOverride/sxOverride.js";const i=({wrapperProps:i,sx:n,overlayContent:o,variant:d,children:s,...g})=>{const{sx:l,...m}=i||{};return r(a,{"data-testid":"Overlay-wrapper",sx:t({position:"relative",maxWidth:"100%",maxHeight:"100%"},l),...m,children:[o,e(a,{"data-testid":"Overlay-overlay",sx:t({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))"},n),...g,children:s})]})};export{i as Overlay};
 //# sourceMappingURL=Overlay.js.map

package/components/overlay/Overlay.js.map

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

package/components/pageLayout/PageLayout.js

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

package/components/pageLayout/PageLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.js","sources":["../../../src/components/pageLayout/PageLayout.tsx"],"sourcesContent":["import React, { useCallback, useState, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, useScrollTrigger, Slide, Container, useTheme } from '@mui/material';\n\nexport interface PageLayoutProps extends BoxProps<ElementType> {\n  /**\n   * React node that renders layout header\n   */\n  header?: React.ReactNode;\n  /**\n   * React node that renders layout footer\n   */\n  footer?: React.ReactNode;\n  /**\n   * Specifies position of header\n   * - static: header is fixed on top of the content\n   * - fixed: header is visible while user scrolls the content\n   * - slide: header is visible until user scrolls down beyond `headerSlideThreshold`, header will reappear when user scrolls up\n   * @default static\n   */\n  headerPosition?: 'static' | 'fixed' | 'slide';\n  /**\n   * Specifies threshold that is used to hide header for the headerPosition=\"slide\"\n   * @default 250\n   */\n  headerSlideThreshold?: number;\n  /**\n   * Specifies if content should be automatically wrapped into container component\n   * @default false\n   */\n  wrapContent?: boolean;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerContainerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to root header wrapper\n   */\n  headerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to page content wrapper\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to footer wrapper\n   */\n  footerProps?: BoxProps<ElementType>;\n}\n\nexport const PageLayout: React.FC<PageLayoutProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      header,\n      footer,\n      headerPosition = 'static',\n      headerSlideThreshold = 250,\n      wrapContent = false,\n      headerProps,\n      headerContainerProps,\n      headerWrapperProps,\n      contentProps,\n      footerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: headerWrapperSx, ...restHeaderWrapper } = headerWrapperProps ?? {};\n    const {\n      sx: headerContainerSx,\n      className: headerContainerClassName,\n      ...restHeaderContainer\n    } = headerContainerProps ?? {};\n    // header height to take actual space in dom for the fixed/slide variants\n    const [headerHeight, setHeaderHeight] = useState<number>(Number.parseFloat(String(theme.mixins.toolbar.minHeight)));\n    const headerContainerRef = useCallback(\n      (element: HTMLElement) => {\n        if (headerPosition === 'static' || !element) {\n          return;\n        }\n        new ResizeObserver(() => {\n          setHeaderHeight(element.offsetHeight);\n        }).observe(element);\n      },\n      [headerPosition !== 'static'],\n    );\n    // trigger hide of the header during scroll\n    const slideTrigger = useScrollTrigger({\n      target: window,\n      threshold: headerSlideThreshold,\n    });\n\n    return (\n      <Box\n        sx={{\n          position: 'relative',\n          minHeight: '100vh',\n          backgroundColor: 'surface.primary',\n          display: 'grid',\n          gridTemplateRows: [header && 'max-content', 'auto', footer && 'max-content'].filter(Boolean).join(' '),\n          ...sx,\n        }}\n        data-testid=\"PageLayout\"\n        ref={ref}\n        {...rest}\n      >\n        {header && (\n          <Box\n            sx={{\n              ...(headerPosition !== 'static' && headerHeight && { height: headerHeight }),\n              ...headerWrapperSx,\n            }}\n            data-testid=\"PageLayout.headerWrapper\"\n            {...restHeaderWrapper}\n          >\n            <Box\n              {...(headerPosition === 'slide' && {\n                component: Slide,\n                appear: false,\n                direction: 'down',\n                in: !slideTrigger,\n              })}\n              sx={{\n                ...(headerPosition !== 'static' && {\n                  position: 'fixed',\n                  top: '0',\n                  left: '0',\n                  right: '0',\n                  zIndex: theme.zIndex.appBar,\n                }),\n                ...headerContainerSx,\n              }}\n              className={[headerPosition !== 'static' ? 'mui-fixed' : '', headerContainerClassName]\n                .filter(Boolean)\n                .join(' ')}\n              {...restHeaderContainer}\n            >\n              <Box ref={headerContainerRef} data-testid=\"PageLayout.header\" {...headerProps}>\n                {header}\n              </Box>\n            </Box>\n          </Box>\n        )}\n        <Box {...(wrapContent && { component: Container, maxWidth: 'xl' })} data-testid=\"Container\" {...contentProps}>\n          {children}\n        </Box>\n        {footer && (\n          <Box data-testid=\"PageLayout.footer\" {...footerProps}>\n            {footer}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["PageLayout","forwardRef","children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps","rest","ref","theme","useTheme","headerWrapperSx","restHeaderWrapper","headerContainerSx","className","headerContainerClassName","restHeaderContainer","headerHeight","setHeaderHeight","useState","Number","parseFloat","String","mixins","toolbar","minHeight","headerContainerRef","useCallback","element","ResizeObserver","offsetHeight","observe","slideTrigger","useScrollTrigger","target","window","threshold","_jsxs","Box","position","backgroundColor","display","gridTemplateRows","filter","Boolean","join","_jsx","height","component","Slide","appear","direction","in","top","left","right","zIndex","appBar","Container","maxWidth"],"mappings":"4NAoDaA,EAAwCC,EACnD,EAEIC,WACAC,KACAC,SACAC,SACAC,iBAAiB,SACjBC,uBAAuB,IACvBC,eAAc,EACdC,cACAC,uBACAC,qBACAC,eACAC,iBACGC,GAELC,KAEA,MAAMC,EAAQC,KACNd,GAAIe,KAAoBC,GAAsBR,GAAsB,CAAA,GAE1ER,GAAIiB,EACJC,UAAWC,KACRC,GACDb,GAAwB,CAAA,GAErBc,EAAcC,GAAmBC,EAAiBC,OAAOC,WAAWC,OAAOb,EAAMc,OAAOC,QAAQC,aACjGC,EAAqBC,EACxBC,IACwB,WAAnB7B,GAAgC6B,GAGpC,IAAIC,eAAe,KACjBX,EAAgBU,EAAQE,gBACvBC,QAAQH,IAEb,CAAoB,WAAnB7B,IAGGiC,EAAeC,EAAiB,CACpCC,OAAQC,OACRC,UAAWpC,IAGb,OACEqC,EAACC,EAAG,CACF1C,GAAI,CACF2C,SAAU,WACVd,UAAW,QACXe,gBAAiB,kBACjBC,QAAS,OACTC,iBAAkB,CAAC7C,GAAU,cAAe,OAAQC,GAAU,eAAe6C,OAAOC,SAASC,KAAK,QAC/FjD,GACJ,cACW,aACZY,IAAKA,KACDD,EAAIZ,SAAA,CAEPE,GACCiD,EAACR,EAAG,CACF1C,GAAI,IACqB,WAAnBG,GAA+BkB,GAAgB,CAAE8B,OAAQ9B,MAC1DN,GACJ,cACW,8BACRC,EAAiBjB,SAErBmD,EAACR,EAAG,IACsB,UAAnBvC,GAA8B,CACjCiD,UAAWC,EACXC,QAAQ,EACRC,UAAW,OACXC,IAAKpB,GAEPpC,GAAI,IACqB,WAAnBG,GAA+B,CACjCwC,SAAU,QACVc,IAAK,IACLC,KAAM,IACNC,MAAO,IACPC,OAAQ/C,EAAM+C,OAAOC,WAEpB5C,GAELC,UAAW,CAAoB,WAAnBf,EAA8B,YAAc,GAAIgB,GACzD4B,OAAOC,SACPC,KAAK,QACJ7B,EAAmBrB,SAEvBmD,EAACR,EAAG,CAAC9B,IAAKkB,EAAkB,cAAc,uBAAwBxB,EAAWP,SAC1EE,QAKTiD,EAACR,EAAG,IAAMrC,GAAe,CAAE+C,UAAWU,EAAWC,SAAU,MAAO,cAAc,eAAgBtD,EAAYV,SACzGA,IAEFG,GACCgD,EAACR,EAAG,CAAA,cAAa,uBAAwBhC,EAAWX,SACjDG"}
+{"version":3,"file":"PageLayout.js","sources":["../../../src/components/pageLayout/PageLayout.tsx"],"sourcesContent":["import React, { useCallback, useState, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, useScrollTrigger, Slide, Container, useTheme } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface PageLayoutProps extends BoxProps<ElementType> {\n  /**\n   * React node that renders layout header\n   */\n  header?: React.ReactNode;\n  /**\n   * React node that renders layout footer\n   */\n  footer?: React.ReactNode;\n  /**\n   * Specifies position of header\n   * - static: header is fixed on top of the content\n   * - fixed: header is visible while user scrolls the content\n   * - slide: header is visible until user scrolls down beyond `headerSlideThreshold`, header will reappear when user scrolls up\n   * @default static\n   */\n  headerPosition?: 'static' | 'fixed' | 'slide';\n  /**\n   * Specifies threshold that is used to hide header for the headerPosition=\"slide\"\n   * @default 250\n   */\n  headerSlideThreshold?: number;\n  /**\n   * Specifies if content should be automatically wrapped into container component\n   * @default false\n   */\n  wrapContent?: boolean;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerContainerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to root header wrapper\n   */\n  headerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to page content wrapper\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to footer wrapper\n   */\n  footerProps?: BoxProps<ElementType>;\n}\n\nexport const PageLayout: React.FC<PageLayoutProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      header,\n      footer,\n      headerPosition = 'static',\n      headerSlideThreshold = 250,\n      wrapContent = false,\n      headerProps,\n      headerContainerProps,\n      headerWrapperProps,\n      contentProps,\n      footerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: headerWrapperSx, ...restHeaderWrapper } = headerWrapperProps ?? {};\n    const {\n      sx: headerContainerSx,\n      className: headerContainerClassName,\n      ...restHeaderContainer\n    } = headerContainerProps ?? {};\n    // header height to take actual space in dom for the fixed/slide variants\n    const [headerHeight, setHeaderHeight] = useState<number>(Number.parseFloat(String(theme.mixins.toolbar.minHeight)));\n    const headerContainerRef = useCallback(\n      (element: HTMLElement | null) => {\n        if (headerPosition === 'static' || !element) {\n          return;\n        }\n        const observer = new ResizeObserver(() => {\n          setHeaderHeight(element.offsetHeight);\n        });\n        observer.observe(element);\n        return () => observer.disconnect();\n      },\n      [headerPosition !== 'static'],\n    );\n    // trigger hide of the header during scroll\n    const slideTrigger = useScrollTrigger({\n      target: window,\n      threshold: headerSlideThreshold,\n    });\n\n    return (\n      <Box\n        sx={sxOverride(\n          {\n            position: 'relative',\n            minHeight: '100vh',\n            backgroundColor: 'surface.primary',\n            display: 'grid',\n            gridTemplateRows: [header && 'max-content', 'auto', footer && 'max-content'].filter(Boolean).join(' '),\n          },\n          sx,\n        )}\n        data-testid=\"PageLayout\"\n        ref={ref}\n        {...rest}\n      >\n        {header && (\n          <Box\n            sx={sxOverride(\n              {\n                ...(headerPosition !== 'static' && headerHeight && { height: headerHeight }),\n              },\n              headerWrapperSx,\n            )}\n            data-testid=\"PageLayout.headerWrapper\"\n            {...restHeaderWrapper}\n          >\n            <Box\n              {...(headerPosition === 'slide' && {\n                component: Slide,\n                appear: false,\n                direction: 'down',\n                in: !slideTrigger,\n              })}\n              sx={sxOverride(\n                {\n                  ...(headerPosition !== 'static' && {\n                    position: 'fixed',\n                    top: '0',\n                    left: '0',\n                    right: '0',\n                    zIndex: theme.zIndex.appBar,\n                  }),\n                },\n                headerContainerSx,\n              )}\n              className={[headerPosition !== 'static' ? 'mui-fixed' : '', headerContainerClassName]\n                .filter(Boolean)\n                .join(' ')}\n              {...restHeaderContainer}\n            >\n              <Box ref={headerContainerRef} data-testid=\"PageLayout.header\" {...headerProps}>\n                {header}\n              </Box>\n            </Box>\n          </Box>\n        )}\n        <Box {...(wrapContent && { component: Container, maxWidth: 'xl' })} data-testid=\"Container\" {...contentProps}>\n          {children}\n        </Box>\n        {footer && (\n          <Box data-testid=\"PageLayout.footer\" {...footerProps}>\n            {footer}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["PageLayout","forwardRef","children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps","rest","ref","theme","useTheme","headerWrapperSx","restHeaderWrapper","headerContainerSx","className","headerContainerClassName","restHeaderContainer","headerHeight","setHeaderHeight","useState","Number","parseFloat","String","mixins","toolbar","minHeight","headerContainerRef","useCallback","element","observer","ResizeObserver","offsetHeight","observe","disconnect","slideTrigger","useScrollTrigger","target","window","threshold","_jsxs","Box","sxOverride","position","backgroundColor","display","gridTemplateRows","filter","Boolean","join","_jsx","height","component","Slide","appear","direction","in","top","left","right","zIndex","appBar","Container","maxWidth"],"mappings":"8RAqDaA,EAAwCC,EACnD,EAEIC,WACAC,KACAC,SACAC,SACAC,iBAAiB,SACjBC,uBAAuB,IACvBC,eAAc,EACdC,cACAC,uBACAC,qBACAC,eACAC,iBACGC,GAELC,KAEA,MAAMC,EAAQC,KACNd,GAAIe,KAAoBC,GAAsBR,GAAsB,CAAA,GAE1ER,GAAIiB,EACJC,UAAWC,KACRC,GACDb,GAAwB,CAAA,GAErBc,EAAcC,GAAmBC,EAAiBC,OAAOC,WAAWC,OAAOb,EAAMc,OAAOC,QAAQC,aACjGC,EAAqBC,EACxBC,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,EAAiB,CACpCC,OAAQC,OACRC,UAAWtC,IAGb,OACEuC,EAACC,GACC5C,GAAI6C,EACF,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,EAACT,GACC5C,GAAI6C,EACF,IACyB,WAAnB1C,GAA+BkB,GAAgB,CAAEiC,OAAQjC,IAE/DN,GACD,cACW,8BACRC,EAAiBjB,SAErBsD,EAACT,EAAG,IACsB,UAAnBzC,GAA8B,CACjCoD,UAAWC,EACXC,QAAQ,EACRC,UAAW,OACXC,IAAKrB,GAEPtC,GAAI6C,EACF,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,EAACT,EAAG,CAAChC,IAAKkB,EAAkB,cAAc,uBAAwBxB,EAAWP,SAC1EE,QAKToD,EAACT,EAAG,IAAMvC,GAAe,CAAEkD,UAAWU,EAAWC,SAAU,MAAO,cAAc,eAAgBzD,EAAYV,SACzGA,IAEFG,GACCmD,EAACT,EAAG,CAAA,cAAa,uBAAwBlC,EAAWX,SACjDG"}

package/components/playPauseButton/PlayPauseButton.js

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

package/components/playPauseButton/PlayPauseButton.js.map

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

package/components/progress/Loader.js

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

package/components/progress/Loader.js.map

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

package/components/progress/LoadingText.js

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

package/components/progress/LoadingText.js.map

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

package/components/progress/ProgressState.js

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

package/components/progress/ProgressState.js.map

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

package/components/progress/Spinner.js

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

package/components/progress/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../src/components/progress/Spinner.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef, useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { Box, BoxProps, SvgIcon, SvgIconProps, useTheme } from '@mui/material';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\nimport { ProgressState, ProgressStateProps } from './ProgressState';\n\nexport interface SpinnerProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * Stroke width of circle\n   * @default 16\n   */\n  thickness?: number;\n  /**\n   * State indicates whether the component should display loader or spinner for the loading state or message with a icon\n   * @default loading\n   */\n  state?: 'loading' | ProgressStateProps['state'];\n  /**\n   * Message when success appears\n   */\n  successMessage?: ProgressStateProps['successMessage'];\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ProgressStateProps['errorMessage'];\n  /**\n   * Properties applied to ProgressState\n   */\n  progressStateProps?: Omit<ProgressStateProps, 'successMessage' | 'errorMessage' | 'state'>;\n  /**\n   * Properties applied to SVG\n   */\n  svgIconProps?: SvgIconProps;\n  /**\n   * Additional label before LoadingText\n   */\n  label?: ReactNode;\n  /**\n   * Properties applied to LoadingText\n   */\n  loadingTextProps?: LoadingTextProps;\n}\n\n/**\n * A styled loader component that displays animated svg circle\n */\nexport const Spinner: React.FC<SpinnerProps> = forwardRef(\n  (\n    {\n      sx,\n      className,\n      children,\n      size = 'medium',\n      thickness = 16,\n      value,\n      svgIconProps,\n      loadingTextProps,\n      label,\n      state = 'loading',\n      successMessage,\n      errorMessage,\n      progressStateProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: svgIconSx, ...restSvgIcon } = svgIconProps ?? {};\n\n    // smooth js transition between values\n    const [displayValue, setDisplayValue] = useState(Number.isNaN(value) ? 0 : (value ?? 15));\n    const targetValueRef = useRef<number>(null);\n    const rafRef = useRef<number>(null);\n    useEffect(() => {\n      targetValueRef.current = Number.isNaN(value) ? 0 : (value ?? 15);\n\n      const animate = () => {\n        setDisplayValue((prev) => {\n          const diff = targetValueRef.current - prev;\n          const step = diff * 0.5;\n          const next = prev + step;\n\n          // small diff or reset happens immediately\n          if (Math.abs(diff) < 0.1 || targetValueRef.current === 0) {\n            return targetValueRef.current;\n          } else {\n            rafRef.current = requestAnimationFrame(animate);\n            return next;\n          }\n        });\n      };\n      rafRef.current = requestAnimationFrame(animate);\n      return () => cancelAnimationFrame(rafRef.current!);\n    }, [value]);\n\n    const { radius, circumference, lineCap, gap, minSegmentPercentForFullGap } = useMemo(() => {\n      const _radius = 50 - thickness / 2;\n      const _circumference = 2 * Math.PI * _radius;\n      const _lineCap = thickness / 2;\n      const _gap = _lineCap;\n      const _minSegmentPercentForFullGap = ((thickness + _gap) / _circumference) * 100;\n\n      return {\n        radius: _radius,\n        circumference: _circumference,\n        lineCap: _lineCap,\n        gap: _gap,\n        minSegmentPercentForFullGap: _minSegmentPercentForFullGap,\n      };\n    }, [thickness]);\n    const obtainValues = useCallback(\n      (v: number) => {\n        const _reversedValue = 100 - v;\n        const _reversedRotation = 360 * (v / 100);\n        const _effectiveGap = gap * Math.max(0, Math.min(1, Math.min(v, _reversedValue) / minSegmentPercentForFullGap));\n        const _dashLength = Math.max((v / 100) * circumference - thickness - _effectiveGap, 0);\n        const _dashOffset = -(lineCap + _effectiveGap / 2);\n        const _reversedDashLength = Math.max((_reversedValue / 100) * circumference - thickness - _effectiveGap, 0);\n\n        return {\n          reversedRotation: _reversedRotation,\n          dashLength: _dashLength,\n          dashOffset: _dashOffset,\n          reversedDashLength: _reversedDashLength,\n        };\n      },\n      [thickness],\n    );\n    const values = obtainValues(displayValue);\n    const [valuesSmall, valuesLarge] = value === undefined ? [obtainValues(15), obtainValues(75)] : [values, values];\n\n    if (state !== 'loading') {\n      return (\n        <ProgressState\n          ref={ref}\n          size={size}\n          state={state}\n          successMessage={successMessage}\n          errorMessage={errorMessage}\n          {...progressStateProps}\n        />\n      );\n    }\n\n    return (\n      <Box\n        data-testid=\"Spinner\"\n        role=\"progressbar\"\n        className={['FlowSpinner-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        sx={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: 1,\n          ...sx,\n        }}\n        {...(value !== undefined && {\n          ['aria-valuenow']: value,\n          ['aria-valuemin']: 0,\n          ['aria-valuemax']: 100,\n        })}\n        {...rest}\n      >\n        <SvgIcon\n          aria-live=\"polite\"\n          viewBox=\"0 0 100 100\"\n          sx={{\n            // size is also applied in ProgressState and LoadingText\n            ...(size === 'small' && {\n              width: `16px`,\n              height: `16px`,\n            }),\n            ...(size === 'medium' && {\n              width: `24px`,\n              height: `24px`,\n            }),\n            ...(typeof size === 'number' && {\n              width: `${size}px`,\n              height: `${size}px`,\n            }),\n            color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary',\n            // extra animation if value is not provided\n            ...(value === undefined && {\n              '@keyframes flow-spinner-indeterminate': {\n                '0%': { transform: 'rotateZ(0)' },\n                '100%': { transform: 'rotateZ(360deg)' },\n              },\n              '@keyframes flow-spinner-indeterminate-group': {\n                '0%, 25%': { transform: 'rotateZ(0)' },\n                '70%': { transform: 'rotateZ(45deg)' },\n                '100%': { transform: 'rotateZ(360deg)' },\n              },\n              '@keyframes flow-spinner-indeterminate-circle-primary': {\n                '0%, 25%, 100%': {\n                  strokeDasharray: `${valuesSmall.dashLength} ${circumference}`,\n                  strokeDashOffset: valuesSmall.dashOffset,\n                },\n                '70%': {\n                  strokeDasharray: `${valuesLarge.dashLength} ${circumference}`,\n                  strokeDashOffset: valuesLarge.dashOffset,\n                },\n              },\n              '@keyframes flow-spinner-indeterminate-circle-secondary': {\n                '0%, 25%, 100%': {\n                  strokeDasharray: `${valuesSmall.reversedDashLength} ${circumference}`,\n                  strokeDashOffset: valuesSmall.dashOffset,\n                },\n                '70%': {\n                  strokeDasharray: `${valuesLarge.reversedDashLength} ${circumference}`,\n                  strokeDashOffset: valuesLarge.dashOffset,\n                },\n              },\n              '@keyframes flow-spinner-indeterminate-group-secondary': {\n                '0%, 25%, 100%': { transform: `rotate(${valuesSmall.reversedRotation}deg)` },\n                '70%': { transform: `rotate(${valuesLarge.reversedRotation}deg)` },\n              },\n              // assign animation to elements\n              animation: '2s linear infinite flow-spinner-indeterminate',\n              '& > g': {\n                animation: '2s ease-in-out infinite flow-spinner-indeterminate-group',\n                transformOrigin: '50% 50%',\n                '& circle': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-primary',\n                },\n                '& g': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-group-secondary',\n                  '& circle': {\n                    animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-secondary',\n                  },\n                },\n              },\n            }),\n            ...svgIconSx,\n          }}\n          {...restSvgIcon}\n        >\n          <g>\n            {(values.reversedDashLength > 0 || displayValue === 0) && (\n              <g style={{ transform: `rotate(${values.reversedRotation}deg)`, transformOrigin: '50% 50%' }}>\n                <circle\n                  className=\"FlowSpinner-circle-secondary\"\n                  cx=\"50\"\n                  cy=\"50\"\n                  r={radius}\n                  fill=\"none\"\n                  stroke={\n                    theme.palette.mode === 'dark' ? theme.palette.onSurface.os700 : theme.palette.transparent.secondary\n                  }\n                  strokeWidth={thickness}\n                  strokeLinecap=\"round\"\n                  strokeDasharray={`${values.reversedDashLength} ${circumference}`}\n                  strokeDashoffset={values.dashOffset}\n                  {...(displayValue === 0 && {\n                    strokeLinecap: 'butt',\n                    strokeDasharray: 'none',\n                    strokeDashoffset: 'none',\n                  })}\n                />\n              </g>\n            )}\n            {(values.dashLength > 0 || displayValue === 100) && (\n              <circle\n                className=\"FlowSpinner-circle-primary\"\n                cx=\"50\"\n                cy=\"50\"\n                r={radius}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={thickness}\n                strokeLinecap=\"round\"\n                strokeDasharray={`${values.dashLength} ${circumference}`}\n                strokeDashoffset={values.dashOffset}\n                {...(displayValue === 100 && {\n                  strokeLinecap: 'butt',\n                  strokeDasharray: 'none',\n                  strokeDashoffset: 'none',\n                })}\n              />\n            )}\n          </g>\n        </SvgIcon>\n        {label && value !== undefined && (\n          <LoadingText\n            data-testid=\"Spinner.percentage\"\n            {...(typeof size !== 'number' && { size: size })}\n            value={value}\n            label={label !== true ? label : undefined}\n            {...loadingTextProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Spinner","forwardRef","sx","className","children","size","thickness","value","svgIconProps","loadingTextProps","label","state","successMessage","errorMessage","progressStateProps","rest","ref","theme","useTheme","svgIconSx","restSvgIcon","displayValue","setDisplayValue","useState","Number","isNaN","targetValueRef","useRef","rafRef","useEffect","current","animate","prev","diff","next","Math","abs","requestAnimationFrame","cancelAnimationFrame","radius","circumference","lineCap","gap","minSegmentPercentForFullGap","useMemo","_radius","_circumference","PI","_lineCap","obtainValues","useCallback","v","_reversedValue","_reversedRotation","_effectiveGap","max","min","reversedRotation","dashLength","dashOffset","reversedDashLength","values","valuesSmall","valuesLarge","undefined","_jsx","ProgressState","_jsxs","Box","role","filter","Boolean","join","display","alignItems","justifyContent","SvgIcon","viewBox","width","height","color","palette","mode","transform","strokeDasharray","strokeDashOffset","animation","transformOrigin","style","cx","cy","r","fill","stroke","onSurface","os700","transparent","secondary","strokeWidth","strokeLinecap","strokeDashoffset","LoadingText"],"mappings":"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"}
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/progress/Spinner.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, forwardRef, useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { Box, BoxProps, SvgIcon, SvgIconProps, useTheme } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { LoadingText, LoadingTextProps } from './LoadingText';\nimport { ProgressState, ProgressStateProps } from './ProgressState';\n\nexport interface SpinnerProps extends BoxProps<ElementType> {\n  /**\n   * Value of progress\n   */\n  value?: number;\n  /**\n   * Affects component size\n   * @default medium\n   */\n  size?: 'small' | 'medium' | number;\n  /**\n   * Stroke width of circle\n   * @default 16\n   */\n  thickness?: number;\n  /**\n   * State indicates whether the component should display loader or spinner for the loading state or message with a icon\n   * @default loading\n   */\n  state?: 'loading' | ProgressStateProps['state'];\n  /**\n   * Message when success appears\n   */\n  successMessage?: ProgressStateProps['successMessage'];\n  /**\n   * Message when error appears\n   */\n  errorMessage?: ProgressStateProps['errorMessage'];\n  /**\n   * Properties applied to ProgressState\n   */\n  progressStateProps?: Omit<ProgressStateProps, 'successMessage' | 'errorMessage' | 'state'>;\n  /**\n   * Properties applied to SVG\n   */\n  svgIconProps?: SvgIconProps;\n  /**\n   * Additional label before LoadingText\n   */\n  label?: ReactNode;\n  /**\n   * Properties applied to LoadingText\n   */\n  loadingTextProps?: LoadingTextProps;\n}\n\n/**\n * A styled loader component that displays animated svg circle\n */\nexport const Spinner: React.FC<SpinnerProps> = forwardRef(\n  (\n    {\n      sx,\n      className,\n      children,\n      size = 'medium',\n      thickness = 16,\n      value,\n      svgIconProps,\n      loadingTextProps,\n      label,\n      state = 'loading',\n      successMessage,\n      errorMessage,\n      progressStateProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: svgIconSx, ...restSvgIcon } = svgIconProps ?? {};\n\n    // smooth js transition between values\n    const [displayValue, setDisplayValue] = useState(Number.isNaN(value) ? 0 : (value ?? 15));\n    const targetValueRef = useRef<number>(null);\n    const rafRef = useRef<number>(null);\n    useEffect(() => {\n      targetValueRef.current = Number.isNaN(value) ? 0 : (value ?? 15);\n\n      const animate = () => {\n        setDisplayValue((prev) => {\n          const diff = targetValueRef.current - prev;\n          const step = diff * 0.5;\n          const next = prev + step;\n\n          // small diff or reset happens immediately\n          if (Math.abs(diff) < 0.1 || targetValueRef.current === 0) {\n            return targetValueRef.current;\n          } else {\n            rafRef.current = requestAnimationFrame(animate);\n            return next;\n          }\n        });\n      };\n      rafRef.current = requestAnimationFrame(animate);\n      return () => cancelAnimationFrame(rafRef.current!);\n    }, [value]);\n\n    const { radius, circumference, lineCap, gap, minSegmentPercentForFullGap } = useMemo(() => {\n      const _radius = 50 - thickness / 2;\n      const _circumference = 2 * Math.PI * _radius;\n      const _lineCap = thickness / 2;\n      const _gap = _lineCap;\n      const _minSegmentPercentForFullGap = ((thickness + _gap) / _circumference) * 100;\n\n      return {\n        radius: _radius,\n        circumference: _circumference,\n        lineCap: _lineCap,\n        gap: _gap,\n        minSegmentPercentForFullGap: _minSegmentPercentForFullGap,\n      };\n    }, [thickness]);\n    const obtainValues = useCallback(\n      (v: number) => {\n        const _reversedValue = 100 - v;\n        const _reversedRotation = 360 * (v / 100);\n        const _effectiveGap = gap * Math.max(0, Math.min(1, Math.min(v, _reversedValue) / minSegmentPercentForFullGap));\n        const _dashLength = Math.max((v / 100) * circumference - thickness - _effectiveGap, 0);\n        const _dashOffset = -(lineCap + _effectiveGap / 2);\n        const _reversedDashLength = Math.max((_reversedValue / 100) * circumference - thickness - _effectiveGap, 0);\n\n        return {\n          reversedRotation: _reversedRotation,\n          dashLength: _dashLength,\n          dashOffset: _dashOffset,\n          reversedDashLength: _reversedDashLength,\n        };\n      },\n      [thickness],\n    );\n    const values = obtainValues(displayValue);\n    const [valuesSmall, valuesLarge] = value === undefined ? [obtainValues(15), obtainValues(75)] : [values, values];\n\n    if (state !== 'loading') {\n      return (\n        <ProgressState\n          ref={ref}\n          size={size}\n          state={state}\n          successMessage={successMessage}\n          errorMessage={errorMessage}\n          {...progressStateProps}\n        />\n      );\n    }\n\n    return (\n      <Box\n        data-testid=\"Spinner\"\n        role=\"progressbar\"\n        className={['FlowSpinner-root', className].filter(Boolean).join(' ')}\n        ref={ref}\n        sx={sxOverride(\n          {\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            gap: 1,\n          },\n          sx,\n        )}\n        {...(value !== undefined && {\n          ['aria-valuenow']: value,\n          ['aria-valuemin']: 0,\n          ['aria-valuemax']: 100,\n        })}\n        {...rest}\n      >\n        <SvgIcon\n          aria-live=\"polite\"\n          viewBox=\"0 0 100 100\"\n          sx={sxOverride(\n            {\n              // size is also applied in ProgressState and LoadingText\n              ...(size === 'small' && {\n                width: `16px`,\n                height: `16px`,\n              }),\n              ...(size === 'medium' && {\n                width: `24px`,\n                height: `24px`,\n              }),\n              ...(typeof size === 'number' && {\n                width: `${size}px`,\n                height: `${size}px`,\n              }),\n              color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.primary',\n              // extra animation if value is not provided\n              ...(value === undefined && {\n                '@keyframes flow-spinner-indeterminate': {\n                  '0%': { transform: 'rotateZ(0)' },\n                  '100%': { transform: 'rotateZ(360deg)' },\n                },\n                '@keyframes flow-spinner-indeterminate-group': {\n                  '0%, 25%': { transform: 'rotateZ(0)' },\n                  '70%': { transform: 'rotateZ(45deg)' },\n                  '100%': { transform: 'rotateZ(360deg)' },\n                },\n                '@keyframes flow-spinner-indeterminate-circle-primary': {\n                  '0%, 25%, 100%': {\n                    strokeDasharray: `${valuesSmall.dashLength} ${circumference}`,\n                    strokeDashOffset: valuesSmall.dashOffset,\n                  },\n                  '70%': {\n                    strokeDasharray: `${valuesLarge.dashLength} ${circumference}`,\n                    strokeDashOffset: valuesLarge.dashOffset,\n                  },\n                },\n                '@keyframes flow-spinner-indeterminate-circle-secondary': {\n                  '0%, 25%, 100%': {\n                    strokeDasharray: `${valuesSmall.reversedDashLength} ${circumference}`,\n                    strokeDashOffset: valuesSmall.dashOffset,\n                  },\n                  '70%': {\n                    strokeDasharray: `${valuesLarge.reversedDashLength} ${circumference}`,\n                    strokeDashOffset: valuesLarge.dashOffset,\n                  },\n                },\n                '@keyframes flow-spinner-indeterminate-group-secondary': {\n                  '0%, 25%, 100%': { transform: `rotate(${valuesSmall.reversedRotation}deg)` },\n                  '70%': { transform: `rotate(${valuesLarge.reversedRotation}deg)` },\n                },\n                // assign animation to elements\n                animation: '2s linear infinite flow-spinner-indeterminate',\n                '& > g': {\n                  animation: '2s ease-in-out infinite flow-spinner-indeterminate-group',\n                  transformOrigin: '50% 50%',\n                  '& circle': {\n                    animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-primary',\n                  },\n                  '& g': {\n                    animation: '2s ease-in-out infinite flow-spinner-indeterminate-group-secondary',\n                    '& circle': {\n                      animation: '2s ease-in-out infinite flow-spinner-indeterminate-circle-secondary',\n                    },\n                  },\n                },\n              }),\n            },\n            svgIconSx,\n          )}\n          {...restSvgIcon}\n        >\n          <g>\n            {(values.reversedDashLength > 0 || displayValue === 0) && (\n              <g style={{ transform: `rotate(${values.reversedRotation}deg)`, transformOrigin: '50% 50%' }}>\n                <circle\n                  className=\"FlowSpinner-circle-secondary\"\n                  cx=\"50\"\n                  cy=\"50\"\n                  r={radius}\n                  fill=\"none\"\n                  stroke={\n                    theme.palette.mode === 'dark' ? theme.palette.onSurface.os700 : theme.palette.transparent.secondary\n                  }\n                  strokeWidth={thickness}\n                  strokeLinecap=\"round\"\n                  strokeDasharray={`${values.reversedDashLength} ${circumference}`}\n                  strokeDashoffset={values.dashOffset}\n                  {...(displayValue === 0 && {\n                    strokeLinecap: 'butt',\n                    strokeDasharray: 'none',\n                    strokeDashoffset: 'none',\n                  })}\n                />\n              </g>\n            )}\n            {(values.dashLength > 0 || displayValue === 100) && (\n              <circle\n                className=\"FlowSpinner-circle-primary\"\n                cx=\"50\"\n                cy=\"50\"\n                r={radius}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={thickness}\n                strokeLinecap=\"round\"\n                strokeDasharray={`${values.dashLength} ${circumference}`}\n                strokeDashoffset={values.dashOffset}\n                {...(displayValue === 100 && {\n                  strokeLinecap: 'butt',\n                  strokeDasharray: 'none',\n                  strokeDashoffset: 'none',\n                })}\n              />\n            )}\n          </g>\n        </SvgIcon>\n        {label && value !== undefined && (\n          <LoadingText\n            data-testid=\"Spinner.percentage\"\n            {...(typeof size !== 'number' && { size: size })}\n            value={value}\n            label={label !== true ? label : undefined}\n            {...loadingTextProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Spinner","forwardRef","sx","className","children","size","thickness","value","svgIconProps","loadingTextProps","label","state","successMessage","errorMessage","progressStateProps","rest","ref","theme","useTheme","svgIconSx","restSvgIcon","displayValue","setDisplayValue","useState","Number","isNaN","targetValueRef","useRef","rafRef","useEffect","current","animate","prev","diff","next","Math","abs","requestAnimationFrame","cancelAnimationFrame","radius","circumference","lineCap","gap","minSegmentPercentForFullGap","useMemo","_radius","_circumference","PI","_lineCap","obtainValues","useCallback","v","_reversedValue","_reversedRotation","_effectiveGap","max","min","reversedRotation","dashLength","dashOffset","reversedDashLength","values","valuesSmall","valuesLarge","undefined","_jsx","ProgressState","_jsxs","Box","role","filter","Boolean","join","sxOverride","display","alignItems","justifyContent","SvgIcon","viewBox","width","height","color","palette","mode","transform","strokeDasharray","strokeDashOffset","animation","transformOrigin","style","cx","cy","r","fill","stroke","onSurface","os700","transparent","secondary","strokeWidth","strokeLinecap","strokeDashoffset","LoadingText"],"mappings":"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"}

package/components/promptBar/PromptAttachments.d.ts

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