@skodaflow/web-library 8.0.0 → 8.1.0

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

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

package/cjs/components/notification/NotificationCenterHeaderButton.js

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

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

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

package/cjs/components/overlay/Overlay.js

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

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

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

package/cjs/components/pageLayout/PageLayout.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.js","sources":["../../../../../src/components/pageLayout/PageLayout.tsx"],"sourcesContent":["import React, { useCallback, useState, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, useScrollTrigger, Slide, Container, useTheme } from '@mui/material';\n\nexport interface PageLayoutProps extends BoxProps<ElementType> {\n  /**\n   * React node that renders layout header\n   */\n  header?: React.ReactNode;\n  /**\n   * React node that renders layout footer\n   */\n  footer?: React.ReactNode;\n  /**\n   * Specifies position of header\n   * - static: header is fixed on top of the content\n   * - fixed: header is visible while user scrolls the content\n   * - slide: header is visible until user scrolls down beyond `headerSlideThreshold`, header will reappear when user scrolls up\n   * @default static\n   */\n  headerPosition?: 'static' | 'fixed' | 'slide';\n  /**\n   * Specifies threshold that is used to hide header for the headerPosition=\"slide\"\n   * @default 250\n   */\n  headerSlideThreshold?: number;\n  /**\n   * Specifies if content should be automatically wrapped into container component\n   * @default false\n   */\n  wrapContent?: boolean;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerContainerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to root header wrapper\n   */\n  headerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to page content wrapper\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to footer wrapper\n   */\n  footerProps?: BoxProps<ElementType>;\n}\n\nexport const PageLayout: React.FC<PageLayoutProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      header,\n      footer,\n      headerPosition = 'static',\n      headerSlideThreshold = 250,\n      wrapContent = false,\n      headerProps,\n      headerContainerProps,\n      headerWrapperProps,\n      contentProps,\n      footerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: headerWrapperSx, ...restHeaderWrapper } = headerWrapperProps ?? {};\n    const {\n      sx: headerContainerSx,\n      className: headerContainerClassName,\n      ...restHeaderContainer\n    } = headerContainerProps ?? {};\n    // header height to take actual space in dom for the fixed/slide variants\n    const [headerHeight, setHeaderHeight] = useState<number>(Number.parseFloat(String(theme.mixins.toolbar.minHeight)));\n    const headerContainerRef = useCallback(\n      (element: HTMLElement) => {\n        if (headerPosition === 'static' || !element) {\n          return;\n        }\n        new ResizeObserver(() => {\n          setHeaderHeight(element.offsetHeight);\n        }).observe(element);\n      },\n      [headerPosition !== 'static'],\n    );\n    // trigger hide of the header during scroll\n    const slideTrigger = useScrollTrigger({\n      target: window,\n      threshold: headerSlideThreshold,\n    });\n\n    return (\n      <Box\n        sx={{\n          position: 'relative',\n          minHeight: '100vh',\n          backgroundColor: 'surface.primary',\n          display: 'grid',\n          gridTemplateRows: [header && 'max-content', 'auto', footer && 'max-content'].filter(Boolean).join(' '),\n          ...sx,\n        }}\n        data-testid=\"PageLayout\"\n        ref={ref}\n        {...rest}\n      >\n        {header && (\n          <Box\n            sx={{\n              ...(headerPosition !== 'static' && headerHeight && { height: headerHeight }),\n              ...headerWrapperSx,\n            }}\n            data-testid=\"PageLayout.headerWrapper\"\n            {...restHeaderWrapper}\n          >\n            <Box\n              {...(headerPosition === 'slide' && {\n                component: Slide,\n                appear: false,\n                direction: 'down',\n                in: !slideTrigger,\n              })}\n              sx={{\n                ...(headerPosition !== 'static' && {\n                  position: 'fixed',\n                  top: '0',\n                  left: '0',\n                  right: '0',\n                  zIndex: theme.zIndex.appBar,\n                }),\n                ...headerContainerSx,\n              }}\n              className={[headerPosition !== 'static' ? 'mui-fixed' : '', headerContainerClassName]\n                .filter(Boolean)\n                .join(' ')}\n              {...restHeaderContainer}\n            >\n              <Box ref={headerContainerRef} data-testid=\"PageLayout.header\" {...headerProps}>\n                {header}\n              </Box>\n            </Box>\n          </Box>\n        )}\n        <Box {...(wrapContent && { component: Container, maxWidth: 'xl' })} data-testid=\"Container\" {...contentProps}>\n          {children}\n        </Box>\n        {footer && (\n          <Box data-testid=\"PageLayout.footer\" {...footerProps}>\n            {footer}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["PageLayout","forwardRef","_a","ref","children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps","rest","__rest","theme","useTheme","_b","headerWrapperSx","restHeaderWrapper","_c","headerContainerSx","className","headerContainerClassName","restHeaderContainer","headerHeight","setHeaderHeight","useState","Number","parseFloat","String","mixins","toolbar","minHeight","headerContainerRef","useCallback","element","ResizeObserver","offsetHeight","observe","slideTrigger","useScrollTrigger","target","window","threshold","_jsxs","Box","Object","assign","position","backgroundColor","display","gridTemplateRows","filter","Boolean","join","_jsx","height","component","Slide","appear","direction","in","top","left","right","zIndex","appBar","Container","maxWidth"],"mappings":"iHAoDO,MAAMA,EAAwCC,EAAAA,WACnD,CACEC,EAeAC,KAfA,IAAAC,SACEA,EAAQC,GACRA,EAAEC,OACFA,EAAMC,OACNA,EAAMC,eACNA,EAAiB,SAAQC,qBACzBA,EAAuB,IAAGC,YAC1BA,GAAc,EAAKC,YACnBA,EAAWC,qBACXA,EAAoBC,mBACpBA,EAAkBC,aAClBA,EAAYC,YACZA,GAAWb,EACRc,EAAIC,EAAAA,OAAAf,EAbT,kLAiBA,MAAMgB,EAAQC,EAAAA,WACRC,EAAgDP,QAAAA,EAAsB,IAApER,GAAIgB,GAAeD,EAAKE,EAAiBL,EAAAA,OAAAG,EAA3C,CAAA,OACAG,EAIFX,QAAAA,EAAwB,IAH1BP,GAAImB,EACJC,UAAWC,GAAwBH,EAChCI,EAAmBV,EAAAA,OAAAM,EAHlB,CAAA,KAAA,eAMCK,EAAcC,GAAmBC,EAAAA,SAAiBC,OAAOC,WAAWC,OAAOf,EAAMgB,OAAOC,QAAQC,aACjGC,EAAqBC,cACxBC,IACwB,WAAnB/B,GAAgC+B,GAGpC,IAAIC,eAAe,KACjBX,EAAgBU,EAAQE,gBACvBC,QAAQH,IAEb,CAAoB,WAAnB/B,IAGGmC,EAAeC,EAAAA,iBAAiB,CACpCC,OAAQC,OACRC,UAAWtC,IAGb,OACEuC,EAAAA,KAACC,EAAAA,mBACC5C,GAAE6C,OAAAC,OAAA,CACAC,SAAU,WACVhB,UAAW,QACXiB,gBAAiB,kBACjBC,QAAS,OACTC,iBAAkB,CAACjD,GAAU,cAAe,OAAQC,GAAU,eAAeiD,OAAOC,SAASC,KAAK,MAC/FrD,GAAE,cAEK,aACZF,IAAKA,GACDa,EAAI,CAAAZ,SAAA,CAEPE,GACCqD,EAAAA,IAACV,EAAAA,IAAGC,OAAAC,OAAA,CACF9C,kCACyB,WAAnBG,GAA+BoB,GAAgB,CAAEgC,OAAQhC,IAC1DP,GAAe,cAER,4BACRC,EAAiB,CAAAlB,SAErBuD,EAAAA,IAACV,EAAAA,IAAGC,OAAAC,OAAA,CAAA,EACsB,UAAnB3C,GAA8B,CACjCqD,UAAWC,EAAAA,MACXC,QAAQ,EACRC,UAAW,OACXC,IAAKtB,IAEPtC,GAAE6C,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACuB,WAAnB3C,GAA+B,CACjC4C,SAAU,QACVc,IAAK,IACLC,KAAM,IACNC,MAAO,IACPC,OAAQnD,EAAMmD,OAAOC,SAEpB9C,GAELC,UAAW,CAAoB,WAAnBjB,EAA8B,YAAc,GAAIkB,GACzD8B,OAAOC,SACPC,KAAK,MACJ/B,EAAmB,CAAAvB,SAEvBuD,EAAAA,IAACV,EAAAA,IAAGC,OAAAC,OAAA,CAAChD,IAAKkC,EAAkB,cAAc,qBAAwB1B,EAAW,CAAAP,SAC1EE,WAKTqD,EAAAA,IAACV,EAAAA,IAAGC,OAAAC,OAAA,CAAA,EAAMzC,GAAe,CAAEmD,UAAWU,EAAAA,UAAWC,SAAU,MAAO,CAAA,cAAc,aAAgB1D,EAAY,CAAAV,SACzGA,KAEFG,GACCoD,EAAAA,IAACV,EAAAA,IAAGC,OAAAC,OAAA,CAAA,cAAa,qBAAwBpC,EAAW,CAAAX,SACjDG"}
+{"version":3,"file":"PageLayout.js","sources":["../../../../../src/components/pageLayout/PageLayout.tsx"],"sourcesContent":["import React, { useCallback, useState, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, useScrollTrigger, Slide, Container, useTheme } from '@mui/material';\n\nexport interface PageLayoutProps extends BoxProps<ElementType> {\n  /**\n   * React node that renders layout header\n   */\n  header?: React.ReactNode;\n  /**\n   * React node that renders layout footer\n   */\n  footer?: React.ReactNode;\n  /**\n   * Specifies position of header\n   * - static: header is fixed on top of the content\n   * - fixed: header is visible while user scrolls the content\n   * - slide: header is visible until user scrolls down beyond `headerSlideThreshold`, header will reappear when user scrolls up\n   * @default static\n   */\n  headerPosition?: 'static' | 'fixed' | 'slide';\n  /**\n   * Specifies threshold that is used to hide header for the headerPosition=\"slide\"\n   * @default 250\n   */\n  headerSlideThreshold?: number;\n  /**\n   * Specifies if content should be automatically wrapped into container component\n   * @default false\n   */\n  wrapContent?: boolean;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerContainerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to root header wrapper\n   */\n  headerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to page content wrapper\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to footer wrapper\n   */\n  footerProps?: BoxProps<ElementType>;\n}\n\nexport const PageLayout: React.FC<PageLayoutProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      header,\n      footer,\n      headerPosition = 'static',\n      headerSlideThreshold = 250,\n      wrapContent = false,\n      headerProps,\n      headerContainerProps,\n      headerWrapperProps,\n      contentProps,\n      footerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: headerWrapperSx, ...restHeaderWrapper } = headerWrapperProps ?? {};\n    const {\n      sx: headerContainerSx,\n      className: headerContainerClassName,\n      ...restHeaderContainer\n    } = headerContainerProps ?? {};\n    // header height to take actual space in dom for the fixed/slide variants\n    const [headerHeight, setHeaderHeight] = useState<number>(Number.parseFloat(String(theme.mixins.toolbar.minHeight)));\n    const headerContainerRef = useCallback(\n      (element: HTMLElement) => {\n        if (headerPosition === 'static' || !element) {\n          return;\n        }\n        new ResizeObserver(() => {\n          setHeaderHeight(element.offsetHeight);\n        }).observe(element);\n      },\n      [headerPosition !== 'static'],\n    );\n    // trigger hide of the header during scroll\n    const slideTrigger = useScrollTrigger({\n      target: window,\n      threshold: headerSlideThreshold,\n    });\n\n    return (\n      <Box\n        sx={{\n          position: 'relative',\n          minHeight: '100vh',\n          backgroundColor: 'surface.primary',\n          display: 'grid',\n          gridTemplateRows: [header && 'max-content', 'auto', footer && 'max-content'].filter(Boolean).join(' '),\n          ...sx,\n        }}\n        data-testid=\"PageLayout\"\n        ref={ref}\n        {...rest}\n      >\n        {header && (\n          <Box\n            sx={{\n              ...(headerPosition !== 'static' && headerHeight && { height: headerHeight }),\n              ...headerWrapperSx,\n            }}\n            data-testid=\"PageLayout.headerWrapper\"\n            {...restHeaderWrapper}\n          >\n            <Box\n              {...(headerPosition === 'slide' && {\n                component: Slide,\n                appear: false,\n                direction: 'down',\n                in: !slideTrigger,\n              })}\n              sx={{\n                ...(headerPosition !== 'static' && {\n                  position: 'fixed',\n                  top: '0',\n                  left: '0',\n                  right: '0',\n                  zIndex: theme.zIndex.appBar,\n                }),\n                ...headerContainerSx,\n              }}\n              className={[headerPosition !== 'static' ? 'mui-fixed' : '', headerContainerClassName]\n                .filter(Boolean)\n                .join(' ')}\n              {...restHeaderContainer}\n            >\n              <Box ref={headerContainerRef} data-testid=\"PageLayout.header\" {...headerProps}>\n                {header}\n              </Box>\n            </Box>\n          </Box>\n        )}\n        <Box {...(wrapContent && { component: Container, maxWidth: 'xl' })} data-testid=\"Container\" {...contentProps}>\n          {children}\n        </Box>\n        {footer && (\n          <Box data-testid=\"PageLayout.footer\" {...footerProps}>\n            {footer}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["PageLayout","forwardRef","children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps","rest","ref","theme","useTheme","headerWrapperSx","restHeaderWrapper","headerContainerSx","className","headerContainerClassName","restHeaderContainer","headerHeight","setHeaderHeight","useState","Number","parseFloat","String","mixins","toolbar","minHeight","headerContainerRef","useCallback","element","ResizeObserver","offsetHeight","observe","slideTrigger","useScrollTrigger","target","window","threshold","_jsxs","Box","position","backgroundColor","display","gridTemplateRows","filter","Boolean","join","_jsx","height","component","Slide","appear","direction","in","top","left","right","zIndex","appBar","Container","maxWidth"],"mappings":"oGAoDaA,EAAwCC,EAAAA,WACnD,EAEIC,WACAC,KACAC,SACAC,SACAC,iBAAiB,SACjBC,uBAAuB,IACvBC,eAAc,EACdC,cACAC,uBACAC,qBACAC,eACAC,iBACGC,GAELC,KAEA,MAAMC,EAAQC,EAAAA,YACNd,GAAIe,KAAoBC,GAAsBR,GAAsB,CAAA,GAE1ER,GAAIiB,EACJC,UAAWC,KACRC,GACDb,GAAwB,CAAA,GAErBc,EAAcC,GAAmBC,EAAAA,SAAiBC,OAAOC,WAAWC,OAAOb,EAAMc,OAAOC,QAAQC,aACjGC,EAAqBC,cACxBC,IACwB,WAAnB7B,GAAgC6B,GAGpC,IAAIC,eAAe,KACjBX,EAAgBU,EAAQE,gBACvBC,QAAQH,IAEb,CAAoB,WAAnB7B,IAGGiC,EAAeC,EAAAA,iBAAiB,CACpCC,OAAQC,OACRC,UAAWpC,IAGb,OACEqC,EAAAA,KAACC,MAAG,CACF1C,GAAI,CACF2C,SAAU,WACVd,UAAW,QACXe,gBAAiB,kBACjBC,QAAS,OACTC,iBAAkB,CAAC7C,GAAU,cAAe,OAAQC,GAAU,eAAe6C,OAAOC,SAASC,KAAK,QAC/FjD,GACJ,cACW,aACZY,IAAKA,KACDD,EAAIZ,SAAA,CAEPE,GACCiD,EAAAA,IAACR,EAAAA,IAAG,CACF1C,GAAI,IACqB,WAAnBG,GAA+BkB,GAAgB,CAAE8B,OAAQ9B,MAC1DN,GACJ,cACW,8BACRC,EAAiBjB,SAErBmD,EAAAA,IAACR,MAAG,IACsB,UAAnBvC,GAA8B,CACjCiD,UAAWC,EAAAA,MACXC,QAAQ,EACRC,UAAW,OACXC,IAAKpB,GAEPpC,GAAI,IACqB,WAAnBG,GAA+B,CACjCwC,SAAU,QACVc,IAAK,IACLC,KAAM,IACNC,MAAO,IACPC,OAAQ/C,EAAM+C,OAAOC,WAEpB5C,GAELC,UAAW,CAAoB,WAAnBf,EAA8B,YAAc,GAAIgB,GACzD4B,OAAOC,SACPC,KAAK,QACJ7B,EAAmBrB,SAEvBmD,EAAAA,IAACR,MAAG,CAAC9B,IAAKkB,EAAkB,cAAc,uBAAwBxB,EAAWP,SAC1EE,QAKTiD,EAAAA,IAACR,MAAG,IAAMrC,GAAe,CAAE+C,UAAWU,YAAWC,SAAU,MAAO,cAAc,eAAgBtD,EAAYV,SACzGA,IAEFG,GACCgD,EAAAA,IAACR,EAAAA,IAAG,CAAA,cAAa,uBAAwBhC,EAAWX,SACjDG"}

package/cjs/components/passwordField/PasswordField.js

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

package/cjs/components/passwordField/PasswordField.js.map

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

package/cjs/components/playPauseButton/PlayPauseButton.d.ts

@@ -40,8 +40,6 @@ export interface PlayPauseButtonProps extends BoxProps<ElementType> {
      */
     PlayIconComponent?: ComponentType<SvgIconProps>;
 }
-export interface VideoPlayPauseIndicatorProps extends PlayPauseButtonProps {
-}
 /**
  * A component that displays a circular progress indicator with a play/pause button.
  */

package/cjs/components/playPauseButton/PlayPauseButton.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"PlayPauseButton.js","sources":["../../../../../src/components/playPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\nimport { ControlsPlayIcon } from '@/src/components/icon/stroke/ControlsPlayIcon';\nimport { ControlsPauseIcon } from '@/src/components/icon/stroke/ControlsPauseIcon';\n\nexport interface PlayPauseButtonProps extends BoxProps<ElementType> {\n  /**\n   * Boolean to indicate if the media is currently playing\n   */\n  isPlaying: boolean;\n  /**\n   * Callback function to handle play/pause button click events.\n   */\n  onClick: BoxProps<ElementType>['onClick'];\n  /**\n   * The progress value for the CircularProgress component.\n   * Should be a number between 0 and 100.\n   */\n  progress?: number;\n  /**\n   * Properties applied to Spinner progress\n   */\n  progressProps?: Omit<SpinnerProps, 'value'>;\n  /**\n   * Properties applied to IconButton\n   */\n  iconButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Properties applied to Pause Icon component\n   */\n  pauseIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PauseIcon\n   */\n  PauseIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to Play Icon component\n   */\n  playIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PlayIcon\n   */\n  PlayIconComponent?: ComponentType<SvgIconProps>;\n}\nexport interface VideoPlayPauseIndicatorProps extends PlayPauseButtonProps {}\n\n/**\n * A component that displays a circular progress indicator with a play/pause button.\n */\nexport const PlayPauseButton: React.FC<PlayPauseButtonProps> = forwardRef(\n  (\n    {\n      progress = 0,\n      isPlaying,\n      onClick,\n      progressProps,\n      iconButtonProps,\n      pauseIconProps,\n      PauseIconComponent,\n      playIconProps,\n      PlayIconComponent,\n      children,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: progressSx, ...restProgress } = progressProps || {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps || {};\n    const PauseIcon = PauseIconComponent || ControlsPauseIcon;\n    const PlayIcon = PlayIconComponent || ControlsPlayIcon;\n\n    return (\n      <Box\n        data-testid=\"PlayPauseIndicator\"\n        sx={{\n          display: 'inline-flex',\n          position: 'relative',\n          zIndex: '150',\n          width: '44px',\n          height: '44px',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Spinner\n          value={progress}\n          size={44}\n          thickness={6}\n          sx={{\n            position: 'absolute',\n            inset: '0',\n            zIndex: '20',\n            // start from 12'clock instead of 3'\n            transform: 'rotate(-90deg)',\n            // recolor\n            '& .FlowSpinner-circle-primary': {\n              stroke: (theme) => theme.palette.brand.secondary,\n            },\n            '& .FlowSpinner-circle-secondary': {\n              stroke: (theme) => theme.palette.common.white,\n              // main line is thicker than second one\n              strokeWidth: '4px',\n            },\n            ...progressSx,\n          }}\n          {...restProgress}\n        />\n        <IconButton\n          data-testid=\"IndicatorIconButton\"\n          onClick={onClick}\n          color=\"white\"\n          size=\"medium\"\n          sx={{ position: 'absolute', inset: '0', zIndex: '30', ...iconButtonSx }}\n          aria-label={isPlaying ? 'Pause video' : 'Play video'}\n          {...restIconButton}\n        >\n          {isPlaying ? (\n            <PauseIcon data-testid=\"IndicatorPauseIcon\" {...pauseIconProps} />\n          ) : (\n            <PlayIcon data-testid=\"IndicatorPlayIcon\" {...playIconProps} />\n          )}\n        </IconButton>\n      </Box>\n    );\n  },\n);\n"],"names":["PlayPauseButton","forwardRef","_a","ref","progress","isPlaying","onClick","progressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx","rest","__rest","_b","progressSx","restProgress","_c","iconButtonSx","restIconButton","PauseIcon","ControlsPauseIcon","PlayIcon","ControlsPlayIcon","_jsxs","Box","Object","assign","display","position","zIndex","width","height","_jsx","Spinner","value","size","thickness","inset","transform","stroke","theme","palette","brand","secondary","common","white","strokeWidth","IconButton","color"],"mappings":"sPAkDO,MAAMA,EAAkDC,EAAAA,WAC7D,CACEC,EAcAC,KAdA,IAAAC,SACEA,EAAW,EAACC,UACZA,EAASC,QACTA,EAAOC,cACPA,EAAaC,gBACbA,EAAeC,eACfA,EAAcC,mBACdA,EAAkBC,cAClBA,EAAaC,kBACbA,EAAiBC,SACjBA,EAAQC,GACRA,GAAEZ,EACCa,EAAIC,EAAAA,OAAAd,EAZT,CAAA,WAAA,YAAA,UAAA,gBAAA,kBAAA,iBAAA,qBAAA,gBAAA,oBAAA,WAAA,OAgBA,MAAMe,EAAsCV,GAAiB,IAArDO,GAAII,KAAeC,EAAYH,EAAAA,OAAAC,EAAjC,CAAA,OACAG,EAA0CZ,GAAmB,IAA3DM,GAAIO,KAAiBC,EAAcN,EAAAA,OAAAI,EAArC,CAAA,OACAG,EAAYb,GAAsBc,EAAAA,kBAClCC,EAAWb,GAAqBc,EAAAA,iBAEtC,OACEC,OAACC,EAAAA,IAAGC,OAAAC,OAAA,CAAA,cACU,qBACZhB,GAAEe,OAAAC,OAAA,CACAC,QAAS,cACTC,SAAU,WACVC,OAAQ,MACRC,MAAO,OACPC,OAAQ,QACLrB,GAELX,IAAKA,GACDY,EAAI,CAAAF,SAAA,CAERuB,MAACC,EAAAA,QAAOR,OAAAC,OAAA,CACNQ,MAAOlC,EACPmC,KAAM,GACNC,UAAW,EACX1B,GAAEe,OAAAC,OAAA,CACAE,SAAU,WACVS,MAAO,IACPR,OAAQ,KAERS,UAAW,iBAEX,gCAAiC,CAC/BC,OAASC,GAAUA,EAAMC,QAAQC,MAAMC,WAEzC,kCAAmC,CACjCJ,OAASC,GAAUA,EAAMC,QAAQG,OAAOC,MAExCC,YAAa,QAEZhC,IAEDC,IAENiB,EAAAA,IAACe,EAAAA,WAAUtB,OAAAC,OAAA,CAAA,cACG,sBACZxB,QAASA,EACT8C,MAAM,QACNb,KAAK,SACLzB,GAAEe,OAAAC,OAAA,CAAIE,SAAU,WAAYS,MAAO,IAAKR,OAAQ,MAASZ,GAAY,aACzDhB,EAAY,cAAgB,cACpCiB,EAAc,CAAAT,SAEjBR,EACC+B,EAAAA,IAACb,EAASM,OAAAC,OAAA,CAAA,cAAa,sBAAyBrB,IAEhD2B,EAAAA,IAACX,EAAQI,OAAAC,OAAA,CAAA,cAAa,qBAAwBnB"}
+{"version":3,"file":"PlayPauseButton.js","sources":["../../../../../src/components/playPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\nimport { ControlsPlayIcon } from '@/src/components/icon/stroke/ControlsPlayIcon';\nimport { ControlsPauseIcon } from '@/src/components/icon/stroke/ControlsPauseIcon';\n\nexport interface PlayPauseButtonProps extends BoxProps<ElementType> {\n  /**\n   * Boolean to indicate if the media is currently playing\n   */\n  isPlaying: boolean;\n  /**\n   * Callback function to handle play/pause button click events.\n   */\n  onClick: BoxProps<ElementType>['onClick'];\n  /**\n   * The progress value for the CircularProgress component.\n   * Should be a number between 0 and 100.\n   */\n  progress?: number;\n  /**\n   * Properties applied to Spinner progress\n   */\n  progressProps?: Omit<SpinnerProps, 'value'>;\n  /**\n   * Properties applied to IconButton\n   */\n  iconButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Properties applied to Pause Icon component\n   */\n  pauseIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PauseIcon\n   */\n  PauseIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Properties applied to Play Icon component\n   */\n  playIconProps?: SvgIconProps;\n  /**\n   * Custom component to be used for PlayIcon\n   */\n  PlayIconComponent?: ComponentType<SvgIconProps>;\n}\n\n/**\n * A component that displays a circular progress indicator with a play/pause button.\n */\nexport const PlayPauseButton: React.FC<PlayPauseButtonProps> = forwardRef(\n  (\n    {\n      progress = 0,\n      isPlaying,\n      onClick,\n      progressProps,\n      iconButtonProps,\n      pauseIconProps,\n      PauseIconComponent,\n      playIconProps,\n      PlayIconComponent,\n      children,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: progressSx, ...restProgress } = progressProps || {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps || {};\n    const PauseIcon = PauseIconComponent || ControlsPauseIcon;\n    const PlayIcon = PlayIconComponent || ControlsPlayIcon;\n\n    return (\n      <Box\n        data-testid=\"PlayPauseIndicator\"\n        sx={{\n          display: 'inline-flex',\n          position: 'relative',\n          zIndex: '150',\n          width: '44px',\n          height: '44px',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Spinner\n          value={progress}\n          size={44}\n          thickness={6}\n          sx={{\n            position: 'absolute',\n            inset: '0',\n            zIndex: '20',\n            // start from 12'clock instead of 3'\n            transform: 'rotate(-90deg)',\n            // recolor\n            '& .FlowSpinner-circle-primary': {\n              stroke: (theme) => theme.palette.brand.secondary,\n            },\n            '& .FlowSpinner-circle-secondary': {\n              stroke: (theme) => theme.palette.common.white,\n              // main line is thicker than second one\n              strokeWidth: '4px',\n            },\n            ...progressSx,\n          }}\n          {...restProgress}\n        />\n        <IconButton\n          data-testid=\"IndicatorIconButton\"\n          onClick={onClick}\n          color=\"white\"\n          size=\"medium\"\n          sx={{ position: 'absolute', inset: '0', zIndex: '30', ...iconButtonSx }}\n          aria-label={isPlaying ? 'Pause video' : 'Play video'}\n          {...restIconButton}\n        >\n          {isPlaying ? (\n            <PauseIcon data-testid=\"IndicatorPauseIcon\" {...pauseIconProps} />\n          ) : (\n            <PlayIcon data-testid=\"IndicatorPlayIcon\" {...playIconProps} />\n          )}\n        </IconButton>\n      </Box>\n    );\n  },\n);\n"],"names":["PlayPauseButton","forwardRef","progress","isPlaying","onClick","progressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx","rest","ref","progressSx","restProgress","iconButtonSx","restIconButton","PauseIcon","ControlsPauseIcon","PlayIcon","ControlsPlayIcon","_jsxs","Box","display","position","zIndex","width","height","_jsx","Spinner","value","size","thickness","inset","transform","stroke","theme","palette","brand","secondary","common","white","strokeWidth","IconButton","color"],"mappings":"mOAiDO,MAAMA,EAAkDC,EAAAA,WAC7D,EAEIC,WAAW,EACXC,YACAC,UACAC,gBACAC,kBACAC,iBACAC,qBACAC,gBACAC,oBACAC,WACAC,QACGC,GAELC,KAEA,MAAQF,GAAIG,KAAeC,GAAiBX,GAAiB,CAAA,GACrDO,GAAIK,KAAiBC,GAAmBZ,GAAmB,CAAA,EAC7Da,EAAYX,GAAsBY,EAAAA,kBAClCC,EAAWX,GAAqBY,EAAAA,iBAEtC,OACEC,EAAAA,KAACC,EAAAA,mBACa,qBACZZ,GAAI,CACFa,QAAS,cACTC,SAAU,WACVC,OAAQ,MACRC,MAAO,OACPC,OAAQ,UACLjB,GAELE,IAAKA,KACDD,EAAIF,SAAA,CAERmB,EAAAA,IAACC,EAAAA,QAAO,CACNC,MAAO9B,EACP+B,KAAM,GACNC,UAAW,EACXtB,GAAI,CACFc,SAAU,WACVS,MAAO,IACPR,OAAQ,KAERS,UAAW,iBAEX,gCAAiC,CAC/BC,OAASC,GAAUA,EAAMC,QAAQC,MAAMC,WAEzC,kCAAmC,CACjCJ,OAASC,GAAUA,EAAMC,QAAQG,OAAOC,MAExCC,YAAa,UAEZ7B,MAEDC,IAENc,EAAAA,IAACe,EAAAA,0BACa,sBACZzC,QAASA,EACT0C,MAAM,QACNb,KAAK,SACLrB,GAAI,CAAEc,SAAU,WAAYS,MAAO,IAAKR,OAAQ,QAASV,GAAc,aAC3Dd,EAAY,cAAgB,gBACpCe,EAAcP,SAEjBR,EACC2B,MAACX,EAAS,CAAA,cAAa,wBAAyBZ,IAEhDuB,EAAAA,IAACT,EAAQ,CAAA,cAAa,uBAAwBZ"}

package/cjs/components/progress/Loader.js

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

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

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

package/cjs/components/progress/LoadingText.js

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

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

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

package/cjs/components/progress/Progress.js

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

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

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

package/cjs/components/progress/ProgressState.js

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

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

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

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

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

package/cjs/components/progress/Spinner.js

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

package/cjs/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?: boolean | 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      loaderTextProps,\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>();\n    const rafRef = useRef<number>();\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            {...loaderTextProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Spinner","forwardRef","_a","ref","sx","className","children","size","thickness","value","svgIconProps","loaderTextProps","label","state","successMessage","errorMessage","progressStateProps","rest","__rest","theme","useTheme","_b","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","Object","assign","_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 { 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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"}

package/cjs/components/quickLink/QuickLink.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("tslib"),r=require("react/jsx-runtime"),s=require("react"),e=require("@mui/material"),i=require("../icon/stroke/ArrowRightIcon.js"),n=require("../../materialui/button/interactive.js");const o=s.forwardRef((s,o)=>{var{IconComponent:a,iconProps:p,title:c,titleTypographyProps:x,subtitle:d,subtitleTypographyProps:l,dividerWrapperProps:u,dividerProps:b,contentWrapperProps:g,titleWrapperProps:m,buttonTitle:h,buttonProps:j,buttonIconProps:k,onClick:y,sx:f}=s,O=t.__rest(s,["IconComponent","iconProps","title","titleTypographyProps","subtitle","subtitleTypographyProps","dividerWrapperProps","dividerProps","contentWrapperProps","titleWrapperProps","buttonTitle","buttonProps","buttonIconProps","onClick","sx"]);const P=p||{},{sx:v}=P,I=t.__rest(P,["sx"]),_=u||{},{sx:B}=_,C=t.__rest(_,["sx"]),T=b||{},{sx:W}=T,S=t.__rest(T,["sx"]),w=g||{},{sx:L}=w,Q=t.__rest(w,["sx"]),q=m||{},{sx:M}=q,R=t.__rest(q,["sx"]);return r.jsxs(e.Stack,Object.assign({direction:"column",alignItems:"flex-start",sx:Object.assign(Object.assign({minWidth:"0",cursor:"pointer",color:"inherit",textDecoration:"unset",gap:{xs:"8px",md:"16px"}},n.getInteractiveStyle({hr:{backgroundColor:"text.primary",height:"1px"},".MuiButton-navigation":{backgroundColor:"transparent",color:t=>"dark"===t.palette.mode?"onSurface.os0":"onSurface.os900","& .MuiButton-startIcon":{transform:"translateX(0px)"},"& .MuiButton-endIcon":{transform:"translateX(0px)"}}},{hr:{backgroundColor:t=>"dark"===t.palette.mode?"brand.secondary":"brand.primary",height:"2px"},".MuiButton-navigation":{backgroundColor:"transparent",color:t=>"dark"===t.palette.mode?"onSurface.os300":"onSurface.os700",".MuiButton-startIcon":{transform:"translateX(-8px)"},".MuiButton-endIcon":{transform:"translateX(8px)"}}})),f),"data-testid":"QuickLink",ref:o},y&&{onClick:y,role:"button"},{tabIndex:-1},O,{children:[r.jsx(e.Box,Object.assign({sx:Object.assign({position:"relative",width:"100%",height:"2px","&&":{mb:{xs:0,md:a?0:2}}},B)},C,{children:r.jsx(e.Box,Object.assign({component:"hr",sx:Object.assign({border:"none",position:"absolute",inset:"0",m:0},W)},S))})),r.jsxs(e.Box,Object.assign({sx:Object.assign({width:"480px",maxWidth:"100%",pr:3,pt:{xs:"8px",md:"0px"}},L)},Q,{children:[r.jsxs(e.Stack,Object.assign({sx:Object.assign({flexDirection:{xs:"row",md:"column"},alignItems:{xs:"center",md:"flex-start"},gap:{xs:"4px",md:"18px"},mb:{xs:"4px",md:0}},M)},R,{children:[a&&r.jsx(a,Object.assign({sx:Object.assign({display:"block",fontSize:{xs:"20px",md:"35px"},mx:{xs:"2px",md:"0px"},my:{xs:"0px",md:"2px"}},v),"data-testid":"QuickLink.icon"},I)),c&&r.jsx(e.Typography,Object.assign({variant:"h4",display:"block","data-testid":"QuickLink.title",sx:{mb:{xs:0,md:.5}}},x,{children:c}))]})),d&&r.jsx(e.Typography,Object.assign({variant:"disclaimer1",display:"block","data-testid":"QuickLink.subtitle"},l,{children:d}))]})),h&&r.jsx(e.Button,Object.assign({variant:"navigation",color:"secondary",endIcon:r.jsx(i.ArrowRightIcon,{}),"data-testid":"QuickLink.button"},j,{children:h}))]}))}),a=s.forwardRef((s,i)=>{var{sx:n,children:o}=s,a=t.__rest(s,["sx","children"]);return r.jsx(e.Box,Object.assign({sx:Object.assign({display:"grid",gridTemplateColumns:{xs:"1fr",lg:"repeat(3, 1fr)"},gap:3},n),ref:i},a,{children:o}))});exports.QuickLink=o,exports.QuickLinkWrapper=a;
+"use strict";var t=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material"),e=require("../icon/stroke/ArrowRightIcon.js"),i=require("../../materialui/button/interactive.js");const n=r.forwardRef(({IconComponent:r,iconProps:n,title:a,titleTypographyProps:s,subtitle:x,subtitleTypographyProps:p,dividerWrapperProps:d,dividerProps:c,contentWrapperProps:l,titleWrapperProps:u,buttonTitle:m,buttonProps:k,buttonIconProps:h,onClick:g,sx:b,...f},y)=>{const{sx:j,...I}=n||{},{sx:v,...B}=d||{},{sx:P,...w}=c||{},{sx:C,...L}=l||{},{sx:Q,...S}=u||{};return t.jsxs(o.Stack,{direction:"column",alignItems:"flex-start",sx:{minWidth:"0",cursor:"pointer",color:"inherit",textDecoration:"unset",gap:{xs:"8px",md:"16px"},...i.getInteractiveStyle({hr:{backgroundColor:"text.primary",height:"1px"},".MuiButton-navigation":{backgroundColor:"transparent",color:t=>"dark"===t.palette.mode?"onSurface.os0":"onSurface.os900","& .MuiButton-startIcon":{transform:"translateX(0px)"},"& .MuiButton-endIcon":{transform:"translateX(0px)"}}},{hr:{backgroundColor:t=>"dark"===t.palette.mode?"brand.secondary":"brand.primary",height:"2px"},".MuiButton-navigation":{backgroundColor:"transparent",color:t=>"dark"===t.palette.mode?"onSurface.os300":"onSurface.os700",".MuiButton-startIcon":{transform:"translateX(-8px)"},".MuiButton-endIcon":{transform:"translateX(8px)"}}}),...b},"data-testid":"QuickLink",ref:y,...g&&{onClick:g,role:"button"},tabIndex:-1,...f,children:[t.jsx(o.Box,{sx:{position:"relative",width:"100%",height:"2px","&&":{mb:{xs:0,md:r?0:2}},...v},...B,children:t.jsx(o.Box,{component:"hr",sx:{border:"none",position:"absolute",inset:"0",m:0,...P},...w})}),t.jsxs(o.Box,{sx:{width:"480px",maxWidth:"100%",pr:3,pt:{xs:"8px",md:"0px"},...C},...L,children:[t.jsxs(o.Stack,{sx:{flexDirection:{xs:"row",md:"column"},alignItems:{xs:"center",md:"flex-start"},gap:{xs:"4px",md:"18px"},mb:{xs:"4px",md:0},...Q},...S,children:[r&&t.jsx(r,{sx:{display:"block",fontSize:{xs:"20px",md:"35px"},mx:{xs:"2px",md:"0px"},my:{xs:"0px",md:"2px"},...j},"data-testid":"QuickLink.icon",...I}),a&&t.jsx(o.Typography,{variant:"h4",display:"block","data-testid":"QuickLink.title",sx:{mb:{xs:0,md:.5}},...s,children:a})]}),x&&t.jsx(o.Typography,{variant:"disclaimer1",display:"block","data-testid":"QuickLink.subtitle",...p,children:x})]}),m&&t.jsx(o.Button,{variant:"navigation",color:"secondary",endIcon:t.jsx(e.ArrowRightIcon,{}),"data-testid":"QuickLink.button",...k,children:m})]})}),a=r.forwardRef(({sx:r,children:e,...i},n)=>t.jsx(o.Box,{sx:{display:"grid",gridTemplateColumns:{xs:"1fr",lg:"repeat(3, 1fr)"},gap:3,...r},ref:n,"data-testid":"QuickLink.wrapper",...i,children:e}));exports.QuickLink=n,exports.QuickLinkWrapper=a;
 //# sourceMappingURL=QuickLink.js.map