@skodaflow/web-library 7.13.1 → 7.15.0

package/cjs/components/alert/AlertButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ButtonProps } from '@mui/material';
-export interface AlertButtonProps extends Omit<ButtonProps, 'variant' | 'color' | 'size'> {
+export interface AlertButtonProps extends ButtonProps {
 }
 /**
  * AlertButton is a proxy component to <Button variant="text" color="white" size="small" />

package/cjs/components/alert/AlertButton.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material");const i=r.forwardRef(((r,i)=>e.jsx(t.Button,Object.assign({},r,{ref:i,variant:"text",color:"white",size:"small"}))));exports.AlertButton=i;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material");const i=r.forwardRef(((r,i)=>e.jsx(t.Button,Object.assign({ref:i,variant:"text",color:"white",size:"small"},r))));exports.AlertButton=i;
 //# sourceMappingURL=AlertButton.js.map

package/cjs/components/alert/AlertButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertButton.js","sources":["../../../../../src/components/alert/AlertButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface AlertButtonProps extends Omit<ButtonProps, 'variant' | 'color' | 'size'> {}\n\n/**\n * AlertButton is a proxy component to <Button variant=\"text\" color=\"white\" size=\"small\" />\n */\nexport const AlertButton: React.FC<AlertButtonProps> = forwardRef((props, ref) => {\n  return <Button {...props} ref={ref} variant=\"text\" color=\"white\" size=\"small\" />;\n});\n"],"names":["AlertButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","color","size"],"mappings":"8FAQa,MAAAA,EAA0CC,EAAUA,YAAC,CAACC,EAAOC,IACjEC,EAAAA,IAACC,EAAAA,OAAWC,OAAAC,OAAA,CAAA,EAAAL,GAAOC,IAAKA,EAAKK,QAAQ,OAAOC,MAAM,QAAQC,KAAK"}
+{"version":3,"file":"AlertButton.js","sources":["../../../../../src/components/alert/AlertButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface AlertButtonProps extends ButtonProps {}\n\n/**\n * AlertButton is a proxy component to <Button variant=\"text\" color=\"white\" size=\"small\" />\n */\nexport const AlertButton: React.FC<AlertButtonProps> = forwardRef((props, ref) => {\n  return <Button ref={ref} variant=\"text\" color=\"white\" size=\"small\" {...props} />;\n});\n"],"names":["AlertButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","color","size"],"mappings":"8FAQa,MAAAA,EAA0CC,EAAUA,YAAC,CAACC,EAAOC,IACjEC,EAAAA,IAACC,EAAAA,OAAOC,OAAAC,OAAA,CAAAJ,IAAKA,EAAKK,QAAQ,OAAOC,MAAM,QAAQC,KAAK,SAAYR"}

package/cjs/components/alert/AlertNotificationButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '@mui/material';
+export interface AlertNotificationButtonProps extends ButtonProps {
+}
+/**
+ * AlertNotificationButton is a proxy component to <Button variant="text" color="secondary" size="small" />
+ */
+export declare const AlertNotificationButton: React.FC<AlertNotificationButtonProps>;

package/cjs/components/alert/AlertNotificationButton.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("react/jsx-runtime"),e=require("react"),t=require("@mui/material");const i=e.forwardRef(((e,i)=>r.jsx(t.Button,Object.assign({ref:i,variant:"text",color:"secondary",size:"small"},e))));exports.AlertNotificationButton=i;
+//# sourceMappingURL=AlertNotificationButton.js.map

package/cjs/components/alert/AlertNotificationButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertNotificationButton.js","sources":["../../../../../src/components/alert/AlertNotificationButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface AlertNotificationButtonProps extends ButtonProps {}\n\n/**\n * AlertNotificationButton is a proxy component to <Button variant=\"text\" color=\"secondary\" size=\"small\" />\n */\nexport const AlertNotificationButton: React.FC<AlertNotificationButtonProps> = forwardRef((props, ref) => {\n  return <Button ref={ref} variant=\"text\" color=\"secondary\" size=\"small\" {...props} />;\n});\n"],"names":["AlertNotificationButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","color","size"],"mappings":"8FAQa,MAAAA,EAAkEC,EAAUA,YAAC,CAACC,EAAOC,IACzFC,EAAAA,IAACC,EAAAA,OAAOC,OAAAC,OAAA,CAAAJ,IAAKA,EAAKK,QAAQ,OAAOC,MAAM,YAAYC,KAAK,SAAYR"}

package/cjs/components/alert/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Alert';
 export * from './AlertButton';
+export * from './AlertNotificationButton';

package/cjs/components/backdrop/backdrop.d.ts

@@ -1,6 +1,5 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material';
+import { SxProps, Theme } from '@mui/material';
 export interface BackdropProps extends HTMLAttributes<HTMLDivElement> {
     /**
      *  If true, the component is shown. Default value false

package/cjs/components/backdrop/backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"backdrop.js","sources":["../../../../../src/components/backdrop/backdrop.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode, forwardRef, useEffect } from 'react';\nimport { SxProps } from '@mui/system';\nimport useBackdrop from '../../components/common/hook/backdrop';\nimport { styled, Theme, Backdrop as MuiBackdrop } from '@mui/material';\n\nexport interface BackdropProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   *  If true, the component is shown. Default value false\n   */\n  open: boolean;\n  /**\n   *  Override or extend the styles applied to the component.\n   */\n  classes?: object;\n  /**\n   *  The component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: string | ReactNode;\n  /**\n   *  The components used for each slot inside the Backdrop. Either a string to use a HTML element or a component.\n   */\n  components?: object;\n  /**\n   * The props used for each slot inside the Backdrop.\n   */\n  componentsProps?: object;\n  /**\n   * If true, the backdrop is invisible. It can be used when rendering a popover or a custom select component. Default value is false\n   */\n  invisible?: boolean;\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.\n   */\n  transitionDuration?: number | object;\n  /**\n   * Additional onClose callback that needs to be provided when the state of the backdrop is controlled from outside.\n   */\n  onClose?: (isOpen: boolean) => void;\n}\n\n/**\n * @deprecated This component is deprecated. Use themed Backdrop component from @mui/material instead\n */\nexport const Backdrop = forwardRef<HTMLDivElement, BackdropProps>(({ open, onClose, ...props }, ref) => {\n  const { openBackdrop, handleCloseBackdrop, setOpenBackdrop } = useBackdrop();\n\n  const handleClose = () => {\n    handleCloseBackdrop();\n    onClose && onClose(false);\n  };\n\n  useEffect(() => {\n    setOpenBackdrop(open);\n  }, [open, setOpenBackdrop]);\n\n  return (\n    <BackdropStyled\n      ref={ref}\n      classes={props.classes}\n      open={openBackdrop}\n      onClick={handleClose}\n      invisible={props.invisible}\n      sx={props.sx}\n      transitionDuration={props.transitionDuration}\n    >\n      {props.children}\n    </BackdropStyled>\n  );\n});\n\nconst BackdropStyled = styled(MuiBackdrop)<BackdropProps>(({ theme, ...args }) => {\n  if (args.invisible)\n    return {\n      backgroundColor: theme.palette.transparent.backdrop,\n      backdropFilter: 'blur(0px)',\n    };\n\n  return null;\n});\n"],"names":["Backdrop","forwardRef","_a","ref","open","onClose","props","__rest","openBackdrop","handleCloseBackdrop","setOpenBackdrop","useBackdrop","useEffect","_jsx","BackdropStyled","classes","onClick","invisible","sx","transitionDuration","children","styled","MuiBackdrop","theme","backgroundColor","palette","transparent","backdrop","backdropFilter"],"mappings":"yJA+Ca,MAAAA,EAAWC,EAAUA,YAAgC,CAACC,EAA6BC,SAA7BC,KAAEA,EAAIC,QAAEA,GAAOH,EAAKI,EAAKC,EAAAA,OAAAL,EAAzB,oBACjE,MAAMM,aAAEA,EAAYC,oBAAEA,EAAmBC,gBAAEA,GAAoBC,EAAAA,UAW/D,OAJAC,EAAAA,WAAU,KACRF,EAAgBN,EAAK,GACpB,CAACA,EAAMM,IAGRG,MAACC,EAAc,CACbX,IAAKA,EACLY,QAAST,EAAMS,QACfX,KAAMI,EACNQ,QAdgB,KAClBP,IACAJ,GAAWA,GAAQ,EAAM,EAavBY,UAAWX,EAAMW,UACjBC,GAAIZ,EAAMY,GACVC,mBAAoBb,EAAMa,mBAAkBC,SAE3Cd,EAAMc,UACQ,IAIfN,EAAiBO,EAAMA,OAACC,WAAPD,EAAoCnB,IAAA,IAAAqB,MAAEA,GAAgBrB,EAC3E,OADyEK,EAAAA,OAAAL,EAAhB,WAChDe,UACA,CACLO,gBAAiBD,EAAME,QAAQC,YAAYC,SAC3CC,eAAgB,aAGb,IAAI"}
+{"version":3,"file":"backdrop.js","sources":["../../../../../src/components/backdrop/backdrop.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode, forwardRef, useEffect } from 'react';\nimport useBackdrop from '../../components/common/hook/backdrop';\nimport { SxProps, styled, Theme, Backdrop as MuiBackdrop } from '@mui/material';\n\nexport interface BackdropProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   *  If true, the component is shown. Default value false\n   */\n  open: boolean;\n  /**\n   *  Override or extend the styles applied to the component.\n   */\n  classes?: object;\n  /**\n   *  The component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: string | ReactNode;\n  /**\n   *  The components used for each slot inside the Backdrop. Either a string to use a HTML element or a component.\n   */\n  components?: object;\n  /**\n   * The props used for each slot inside the Backdrop.\n   */\n  componentsProps?: object;\n  /**\n   * If true, the backdrop is invisible. It can be used when rendering a popover or a custom select component. Default value is false\n   */\n  invisible?: boolean;\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.\n   */\n  transitionDuration?: number | object;\n  /**\n   * Additional onClose callback that needs to be provided when the state of the backdrop is controlled from outside.\n   */\n  onClose?: (isOpen: boolean) => void;\n}\n\n/**\n * @deprecated This component is deprecated. Use themed Backdrop component from @mui/material instead\n */\nexport const Backdrop = forwardRef<HTMLDivElement, BackdropProps>(({ open, onClose, ...props }, ref) => {\n  const { openBackdrop, handleCloseBackdrop, setOpenBackdrop } = useBackdrop();\n\n  const handleClose = () => {\n    handleCloseBackdrop();\n    onClose && onClose(false);\n  };\n\n  useEffect(() => {\n    setOpenBackdrop(open);\n  }, [open, setOpenBackdrop]);\n\n  return (\n    <BackdropStyled\n      ref={ref}\n      classes={props.classes}\n      open={openBackdrop}\n      onClick={handleClose}\n      invisible={props.invisible}\n      sx={props.sx}\n      transitionDuration={props.transitionDuration}\n    >\n      {props.children}\n    </BackdropStyled>\n  );\n});\n\nconst BackdropStyled = styled(MuiBackdrop)<BackdropProps>(({ theme, ...args }) => {\n  if (args.invisible)\n    return {\n      backgroundColor: theme.palette.transparent.backdrop,\n      backdropFilter: 'blur(0px)',\n    };\n\n  return null;\n});\n"],"names":["Backdrop","forwardRef","_a","ref","open","onClose","props","__rest","openBackdrop","handleCloseBackdrop","setOpenBackdrop","useBackdrop","useEffect","_jsx","BackdropStyled","classes","onClick","invisible","sx","transitionDuration","children","styled","MuiBackdrop","theme","backgroundColor","palette","transparent","backdrop","backdropFilter"],"mappings":"yJA8Ca,MAAAA,EAAWC,EAAUA,YAAgC,CAACC,EAA6BC,SAA7BC,KAAEA,EAAIC,QAAEA,GAAOH,EAAKI,EAAKC,EAAAA,OAAAL,EAAzB,oBACjE,MAAMM,aAAEA,EAAYC,oBAAEA,EAAmBC,gBAAEA,GAAoBC,EAAAA,UAW/D,OAJAC,EAAAA,WAAU,KACRF,EAAgBN,EAAK,GACpB,CAACA,EAAMM,IAGRG,MAACC,EAAc,CACbX,IAAKA,EACLY,QAAST,EAAMS,QACfX,KAAMI,EACNQ,QAdgB,KAClBP,IACAJ,GAAWA,GAAQ,EAAM,EAavBY,UAAWX,EAAMW,UACjBC,GAAIZ,EAAMY,GACVC,mBAAoBb,EAAMa,mBAAkBC,SAE3Cd,EAAMc,UACQ,IAIfN,EAAiBO,EAAMA,OAACC,WAAPD,EAAoCnB,IAAA,IAAAqB,MAAEA,GAAgBrB,EAC3E,OADyEK,EAAAA,OAAAL,EAAhB,WAChDe,UACA,CACLO,gBAAiBD,EAAME,QAAQC,YAAYC,SAC3CC,eAAgB,aAGb,IAAI"}

package/cjs/components/banner/BannerButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '@mui/material';
+export interface BannerButtonProps extends ButtonProps {
+}
+/**
+ * BannerButton is a proxy component to <Button variant="outlined" color="secondary" size="small" />
+ */
+export declare const BannerButton: React.FC<BannerButtonProps>;

package/cjs/components/banner/BannerButton.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("react/jsx-runtime"),e=require("react"),t=require("@mui/material");const a=e.forwardRef(((e,a)=>r.jsx(t.Button,Object.assign({ref:a,variant:"outlined",color:"secondary",size:"small"},e))));exports.BannerButton=a;
+//# sourceMappingURL=BannerButton.js.map

package/cjs/components/banner/BannerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerButton.js","sources":["../../../../../src/components/banner/BannerButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface BannerButtonProps extends ButtonProps {}\n\n/**\n * BannerButton is a proxy component to <Button variant=\"outlined\" color=\"secondary\" size=\"small\" />\n */\nexport const BannerButton: React.FC<BannerButtonProps> = forwardRef((props, ref) => {\n  return <Button ref={ref} variant=\"outlined\" color=\"secondary\" size=\"small\" {...props} />;\n});\n"],"names":["BannerButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","color","size"],"mappings":"8FAQa,MAAAA,EAA4CC,EAAUA,YAAC,CAACC,EAAOC,IACnEC,EAAAA,IAACC,EAAAA,OAAOC,OAAAC,OAAA,CAAAJ,IAAKA,EAAKK,QAAQ,WAAWC,MAAM,YAAYC,KAAK,SAAYR"}

package/cjs/components/banner/BannerDismissButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '@mui/material';
+export interface BannerDismissButtonProps extends ButtonProps {
+}
+/**
+ * BannerDismissButton is a proxy component to <Button variant="text" color="secondary" size="small" />
+ */
+export declare const BannerDismissButton: React.FC<BannerDismissButtonProps>;

package/cjs/components/banner/BannerDismissButton.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("react/jsx-runtime"),e=require("react"),t=require("@mui/material");const s=e.forwardRef(((e,s)=>r.jsx(t.Button,Object.assign({ref:s,variant:"text",color:"secondary",size:"small"},e))));exports.BannerDismissButton=s;
+//# sourceMappingURL=BannerDismissButton.js.map

package/cjs/components/banner/BannerDismissButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerDismissButton.js","sources":["../../../../../src/components/banner/BannerDismissButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface BannerDismissButtonProps extends ButtonProps {}\n\n/**\n * BannerDismissButton is a proxy component to <Button variant=\"text\" color=\"secondary\" size=\"small\" />\n */\nexport const BannerDismissButton: React.FC<BannerDismissButtonProps> = forwardRef((props, ref) => {\n  return <Button ref={ref} variant=\"text\" color=\"secondary\" size=\"small\" {...props} />;\n});\n"],"names":["BannerDismissButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","color","size"],"mappings":"8FAQa,MAAAA,EAA0DC,EAAUA,YAAC,CAACC,EAAOC,IACjFC,EAAAA,IAACC,EAAAA,OAAOC,OAAAC,OAAA,CAAAJ,IAAKA,EAAKK,QAAQ,OAAOC,MAAM,YAAYC,KAAK,SAAYR"}

package/cjs/components/banner/banner.d.ts

@@ -22,7 +22,7 @@ export interface BannerProps extends BoxProps<ElementType> {
     /**
      * Properties passed to wrapper of children
      */
-    typographyProps?: TypographyProps;
+    typographyProps?: TypographyProps<ElementType>;
     /**
      * Properties applied to wrapper of content (Icon and Typography)
      */

package/cjs/components/banner/banner.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),t=require("../icon/filled/CircleExclamationFilledIcon.js"),n=require("../icon/filled/CircleInformationFilledIcon.js"),s=require("../icon/filled/WarningFilledIcon.js"),i=require("@mui/material"),a=require("react"),o=require("../focusring/focusring.js");const l=a.forwardRef(((l,c)=>{var{children:x,variant:p="info",size:d="large",sx:g,iconProps:u,IconComponent:f,typographyProps:m,wrapperProps:j,buttons:b,buttonsWrapperProps:h,onClick:y}=l,w=e.__rest(l,["children","variant","size","sx","iconProps","IconComponent","typographyProps","wrapperProps","buttons","buttonsWrapperProps","onClick"]);const C=i.useTheme(),I=u||{},{sx:O}=I,_=e.__rest(I,["sx"]),B=m||{},{sx:q}=B,P=e.__rest(B,["sx"]),v=j||{},{sx:F}=v,k=e.__rest(v,["sx"]),S=h||{},{sx:W}=S,z=e.__rest(S,["sx"]),[E,G,R]=a.useMemo((()=>{switch(p){case"error":return["error.main","error.light",s.WarningFilledIcon];case"warning":return["warning.main","warning.light",t.CircleExclamationFilledIcon];default:return["info.main","info.light",n.CircleInformationFilledIcon]}}),[p]),T=f||R;return r.jsxs(i.Box,Object.assign({"data-testid":"Banner",role:"alert","aria-atomic":"true","aria-live":"assertive",onClick:y,sx:Object.assign(Object.assign({display:"flex",width:"100%",flexDirection:{xs:"column",md:"row"},alignItems:{xs:"flex-start",md:"center"},justifyContent:"space-between",px:2,py:"small"===d?1:{xs:2,md:1},gap:1,borderLeft:6,borderColor:E,backgroundColor:"dark"===C.palette.mode?"onSurface.os900":G,textAlign:"left"},y&&Object.assign({position:"relative",cursor:"pointer"},o.getFocusRingStyle(C,!0,"2px"))),g),ref:c},w,{children:[r.jsxs(i.Box,Object.assign({"data-testid":"Banner.wrapper",sx:Object.assign({flexGrow:"1",display:"flex",alignItems:"flex-start",justifyContent:"flex-start",gap:1,py:.5},F)},k,{children:[r.jsx(T,Object.assign({"data-testid":"Banner.icon",sx:Object.assign({color:E},O)},_)),r.jsx(i.Typography,Object.assign({"data-testid":"Banner.text",sx:Object.assign({color:"text.primary",flexGrow:"1",fontSize:{xl:"16px"},lineHeight:{xl:"24px"}},q)},P,{children:x}))]})),b&&r.jsx(i.Box,Object.assign({"data-testid":"Banner.buttons",sx:Object.assign({display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,flexShrink:"0",ml:{xs:4,md:0},alignSelf:"flex-end"},W)},z,{children:b}))]}))}));exports.Banner=l;
+"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),n=require("../icon/filled/CircleExclamationFilledIcon.js"),t=require("../icon/filled/CircleInformationFilledIcon.js"),s=require("../icon/filled/WarningFilledIcon.js"),i=require("@mui/material"),a=require("react"),o=require("../focusring/focusring.js");const l=a.forwardRef(((l,c)=>{var{children:x,variant:p="info",size:d="large",sx:u,iconProps:g,IconComponent:f,typographyProps:m,wrapperProps:j,buttons:b,buttonsWrapperProps:h,onClick:y}=l,w=e.__rest(l,["children","variant","size","sx","iconProps","IconComponent","typographyProps","wrapperProps","buttons","buttonsWrapperProps","onClick"]);const C=i.useTheme(),I=null!=g?g:{},{sx:O}=I,_=e.__rest(I,["sx"]),B=null!=m?m:{},{sx:q}=B,P=e.__rest(B,["sx"]),v=null!=j?j:{},{sx:F}=v,k=e.__rest(v,["sx"]),S=null!=h?h:{},{sx:W}=S,z=e.__rest(S,["sx"]),[E,G,R]=a.useMemo((()=>{switch(p){case"error":return["error.main","error.light",s.WarningFilledIcon];case"warning":return["warning.main","warning.light",n.CircleExclamationFilledIcon];default:return["info.main","info.light",t.CircleInformationFilledIcon]}}),[p]),T=null!=f?f:R;return r.jsxs(i.Box,Object.assign({"data-testid":"Banner",role:"alert","aria-atomic":"true","aria-live":"assertive",onClick:y,sx:Object.assign(Object.assign({display:"flex",width:"100%",flexDirection:{xs:"column",md:"row"},alignItems:{xs:"flex-start",md:"center"},justifyContent:"space-between",px:2,py:"small"===d?1:{xs:2,md:1},gap:1,borderLeft:6,borderColor:E,backgroundColor:"dark"===C.palette.mode?"onSurface.os900":G,textAlign:"left"},y&&Object.assign({position:"relative",cursor:"pointer"},o.getFocusRingStyle(C,!0,"2px"))),u),ref:c},w,{children:[r.jsxs(i.Box,Object.assign({"data-testid":"Banner.wrapper",sx:Object.assign({flexGrow:"1",display:"flex",alignItems:"flex-start",justifyContent:"flex-start",gap:1,py:.5},F)},k,{children:[r.jsx(T,Object.assign({"data-testid":"Banner.icon",sx:Object.assign({color:E},O)},_)),r.jsx(i.Typography,Object.assign({"data-testid":"Banner.text",sx:Object.assign({color:"text.primary",flexGrow:"1",fontSize:{xl:"16px"},lineHeight:{xl:"24px"}},q)},P,{children:x}))]})),b&&r.jsx(i.Box,Object.assign({"data-testid":"Banner.buttons",sx:Object.assign({display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,flexShrink:"0",ml:{xs:4,md:0},alignSelf:"flex-end"},W)},z,{children:b}))]}))}));exports.Banner=l;
 //# sourceMappingURL=banner.js.map

package/cjs/components/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sources":["../../../../../src/components/banner/banner.tsx"],"sourcesContent":["import { CircleExclamationFilledIcon } from '@/src/components/icon/filled/CircleExclamationFilledIcon';\nimport { CircleInformationFilledIcon } from '@/src/components/icon/filled/CircleInformationFilledIcon';\nimport { WarningFilledIcon } from '@/src/components/icon/filled/WarningFilledIcon';\nimport { Box, BoxProps, SvgIconProps, Typography, TypographyProps, useTheme } from '@mui/material';\nimport React, { ElementType, forwardRef, ReactNode, useMemo } from 'react';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface BannerProps extends BoxProps<ElementType> {\n  /**\n   * Defines which variant of Banner component should be rendered\n   * @default info\n   */\n  variant?: 'info' | 'warning' | 'error';\n  /**\n   * Set the proportions\n   * @default large\n   */\n  size?: 'large' | 'small';\n  /**\n   * Properties passed to indicator icon\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Icon node to be used\n   */\n  IconComponent?: ElementType<SvgIconProps>;\n  /**\n   * Properties passed to wrapper of children\n   */\n  typographyProps?: TypographyProps;\n  /**\n   * Properties applied to wrapper of content (Icon and Typography)\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * ReactNode that renders buttons. If multiple buttons are needed, wrap them in React.Fragment\n   */\n  buttons?: ReactNode;\n  /**\n   * Properties applied to wrapper element of buttons\n   */\n  buttonsWrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * Alert notification banner\n */\nexport const Banner: React.FC<BannerProps> = forwardRef(\n  (\n    {\n      children,\n      variant = 'info',\n      size = 'large',\n      sx,\n      iconProps,\n      IconComponent,\n      typographyProps,\n      wrapperProps,\n      buttons,\n      buttonsWrapperProps,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: iconSx, ...restIcon } = iconProps || {};\n    const { sx: typographySx, ...restTypography } = typographyProps || {};\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps || {};\n    const { sx: buttonsWrapperSx, ...restButtonsWrapper } = buttonsWrapperProps || {};\n\n    const [borderColor, backgroundColor, IconVariantComponent] = useMemo(() => {\n      switch (variant) {\n        case 'error':\n          return ['error.main', 'error.light', WarningFilledIcon];\n        case 'warning':\n          return ['warning.main', 'warning.light', CircleExclamationFilledIcon];\n        case 'info':\n        default:\n          return ['info.main', 'info.light', CircleInformationFilledIcon];\n      }\n    }, [variant]);\n    const BannerIcon = IconComponent || IconVariantComponent;\n\n    return (\n      <Box\n        data-testid=\"Banner\"\n        role=\"alert\"\n        aria-atomic=\"true\"\n        aria-live=\"assertive\"\n        onClick={onClick}\n        sx={{\n          display: 'flex',\n          width: '100%',\n          // on mobile content and button bellow each other\n          flexDirection: { xs: 'column', md: 'row' },\n          alignItems: { xs: 'flex-start', md: 'center' },\n          justifyContent: 'space-between',\n          // proportions\n          px: 2,\n          py: size === 'small' ? 1 : { xs: 2, md: 1 },\n          gap: 1,\n          // style\n          borderLeft: 6,\n          borderColor: borderColor,\n          backgroundColor: theme.palette.mode === 'dark' ? 'onSurface.os900' : backgroundColor,\n          textAlign: 'left',\n          // clickable style\n          ...(onClick && {\n            position: 'relative',\n            cursor: 'pointer',\n            // focused style\n            ...getFocusRingStyle(theme, true, '2px'),\n          }),\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Box\n          data-testid=\"Banner.wrapper\"\n          sx={{\n            // align icon and content\n            flexGrow: '1',\n            display: 'flex',\n            alignItems: 'flex-start',\n            justifyContent: 'flex-start',\n            gap: 1,\n            py: 0.5,\n            ...wrapperSx,\n          }}\n          {...restWrapper}\n        >\n          <BannerIcon\n            data-testid=\"Banner.icon\"\n            sx={{\n              color: borderColor,\n              ...iconSx,\n            }}\n            {...restIcon}\n          />\n          <Typography\n            data-testid=\"Banner.text\"\n            sx={{\n              color: 'text.primary',\n              flexGrow: '1',\n              // custom font according to Figma\n              fontSize: { xl: '16px' },\n              lineHeight: { xl: '24px' },\n              ...typographySx,\n            }}\n            {...restTypography}\n          >\n            {children}\n          </Typography>\n        </Box>\n        {buttons && (\n          <Box\n            data-testid=\"Banner.buttons\"\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              gap: 1,\n              // always show buttons next to each other\n              flexShrink: '0',\n              // on mobile align with text\n              ml: { xs: 4, md: 0 },\n              // on mobile move to the right side\n              alignSelf: 'flex-end',\n              ...buttonsWrapperSx,\n            }}\n            {...restButtonsWrapper}\n          >\n            {buttons}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Banner","forwardRef","_a","ref","children","variant","size","sx","iconProps","IconComponent","typographyProps","wrapperProps","buttons","buttonsWrapperProps","onClick","rest","__rest","theme","useTheme","_b","iconSx","restIcon","_c","typographySx","restTypography","_d","wrapperSx","restWrapper","_e","buttonsWrapperSx","restButtonsWrapper","borderColor","backgroundColor","IconVariantComponent","useMemo","WarningFilledIcon","CircleExclamationFilledIcon","CircleInformationFilledIcon","BannerIcon","_jsxs","Box","Object","assign","role","display","width","flexDirection","xs","md","alignItems","justifyContent","px","py","gap","borderLeft","palette","mode","textAlign","position","cursor","getFocusRingStyle","jsxs","flexGrow","_jsx","jsx","color","Typography","fontSize","xl","lineHeight","flexShrink","ml","alignSelf"],"mappings":"+TA+Ca,MAAAA,EAAgCC,EAAUA,YACrD,CACEC,EAcAC,KAdA,IAAAC,SACEA,EAAQC,QACRA,EAAU,OAAMC,KAChBA,EAAO,QAAOC,GACdA,EAAEC,UACFA,EAASC,cACTA,EAAaC,gBACbA,EAAeC,aACfA,EAAYC,QACZA,EAAOC,oBACPA,EAAmBC,QACnBA,GAEDZ,EADIa,EAAIC,EAAAA,OAAAd,EAZT,2IAgBA,MAAMe,EAAQC,EAAAA,WACRC,EAA8BX,GAAa,IAAzCD,GAAIa,KAAWC,EAAjBL,EAAAA,OAAAG,EAAA,CAAA,OACAG,EAA0CZ,GAAmB,IAA3DH,GAAIgB,KAAiBC,EAAvBR,EAAAA,OAAAM,EAAA,CAAA,OACAG,EAAoCd,GAAgB,IAAlDJ,GAAImB,KAAcC,EAApBX,EAAAA,OAAAS,EAAA,CAAA,OACAG,EAAkDf,GAAuB,IAAvEN,GAAIsB,KAAqBC,EAA3Bd,EAAAA,OAAAY,EAAA,CAAA,QAECG,EAAaC,EAAiBC,GAAwBC,EAAOA,SAAC,KACnE,OAAQ7B,GACN,IAAK,QACH,MAAO,CAAC,aAAc,cAAe8B,qBACvC,IAAK,UACH,MAAO,CAAC,eAAgB,gBAAiBC,+BAE3C,QACE,MAAO,CAAC,YAAa,aAAcC,kCAEtC,CAAChC,IACEiC,EAAa7B,GAAiBwB,EAEpC,OACEM,OAACC,EAAAA,IACaC,OAAAC,OAAA,CAAA,cAAA,SACZC,KAAK,QACO,cAAA,OACF,YAAA,YACV7B,QAASA,EACTP,GAAEkC,OAAAC,OAAAD,OAAAC,OAAA,CACAE,QAAS,OACTC,MAAO,OAEPC,cAAe,CAAEC,GAAI,SAAUC,GAAI,OACnCC,WAAY,CAAEF,GAAI,aAAcC,GAAI,UACpCE,eAAgB,gBAEhBC,GAAI,EACJC,GAAa,UAAT9C,EAAmB,EAAI,CAAEyC,GAAI,EAAGC,GAAI,GACxCK,IAAK,EAELC,WAAY,EACZvB,YAAaA,EACbC,gBAAwC,SAAvBf,EAAMsC,QAAQC,KAAkB,kBAAoBxB,EACrEyB,UAAW,QAEP3C,GAAO2B,OAAAC,OAAA,CACTgB,SAAU,WACVC,OAAQ,WAELC,EAAiBA,kBAAC3C,GAAO,EAAM,SAEjCV,GAELJ,IAAKA,GACDY,EAAI,CAAAX,SAAA,CAERmC,EAACsB,KAAArB,MACaC,OAAAC,OAAA,CAAA,cAAA,iBACZnC,GAAEkC,OAAAC,OAAA,CAEAoB,SAAU,IACVlB,QAAS,OACTK,WAAY,aACZC,eAAgB,aAChBG,IAAK,EACLD,GAAI,IACD1B,IAEDC,EAEJ,CAAAvB,SAAA,CAAA2D,EAAAC,IAAC1B,EACaG,OAAAC,OAAA,CAAA,cAAA,cACZnC,GACEkC,OAAAC,OAAA,CAAAuB,MAAOlC,GACJX,IAEDC,IAEN0C,MAACG,EAAAA,WAAUzB,OAAAC,OAAA,CAAA,cACG,cACZnC,GAAEkC,OAAAC,OAAA,CACAuB,MAAO,eACPH,SAAU,IAEVK,SAAU,CAAEC,GAAI,QAChBC,WAAY,CAAED,GAAI,SACf7C,IAEDC,EAAc,CAAApB,SAEjBA,SAGJQ,GACCmD,MAACvB,EAAGA,IAAAC,OAAAC,OAAA,CAAA,cACU,iBACZnC,GACEkC,OAAAC,OAAA,CAAAE,QAAS,OACTK,WAAY,SACZC,eAAgB,gBAChBG,IAAK,EAELiB,WAAY,IAEZC,GAAI,CAAExB,GAAI,EAAGC,GAAI,GAEjBwB,UAAW,YACR3C,IAEDC,EAEH,CAAA1B,SAAAQ,QAGD"}
+{"version":3,"file":"banner.js","sources":["../../../../../src/components/banner/banner.tsx"],"sourcesContent":["import { CircleExclamationFilledIcon } from '@/src/components/icon/filled/CircleExclamationFilledIcon';\nimport { CircleInformationFilledIcon } from '@/src/components/icon/filled/CircleInformationFilledIcon';\nimport { WarningFilledIcon } from '@/src/components/icon/filled/WarningFilledIcon';\nimport { Box, BoxProps, SvgIconProps, Typography, TypographyProps, useTheme } from '@mui/material';\nimport React, { ElementType, forwardRef, ReactNode, useMemo } from 'react';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface BannerProps extends BoxProps<ElementType> {\n  /**\n   * Defines which variant of Banner component should be rendered\n   * @default info\n   */\n  variant?: 'info' | 'warning' | 'error';\n  /**\n   * Set the proportions\n   * @default large\n   */\n  size?: 'large' | 'small';\n  /**\n   * Properties passed to indicator icon\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Icon node to be used\n   */\n  IconComponent?: ElementType<SvgIconProps>;\n  /**\n   * Properties passed to wrapper of children\n   */\n  typographyProps?: TypographyProps<ElementType>;\n  /**\n   * Properties applied to wrapper of content (Icon and Typography)\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * ReactNode that renders buttons. If multiple buttons are needed, wrap them in React.Fragment\n   */\n  buttons?: ReactNode;\n  /**\n   * Properties applied to wrapper element of buttons\n   */\n  buttonsWrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * Alert notification banner\n */\nexport const Banner: React.FC<BannerProps> = forwardRef(\n  (\n    {\n      children,\n      variant = 'info',\n      size = 'large',\n      sx,\n      iconProps,\n      IconComponent,\n      typographyProps,\n      wrapperProps,\n      buttons,\n      buttonsWrapperProps,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: iconSx, ...restIcon } = iconProps ?? {};\n    const { sx: typographySx, ...restTypography } = typographyProps ?? {};\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n    const { sx: buttonsWrapperSx, ...restButtonsWrapper } = buttonsWrapperProps ?? {};\n\n    const [borderColor, backgroundColor, IconVariantComponent] = useMemo(() => {\n      switch (variant) {\n        case 'error':\n          return ['error.main', 'error.light', WarningFilledIcon];\n        case 'warning':\n          return ['warning.main', 'warning.light', CircleExclamationFilledIcon];\n        case 'info':\n        default:\n          return ['info.main', 'info.light', CircleInformationFilledIcon];\n      }\n    }, [variant]);\n    const BannerIcon = IconComponent ?? IconVariantComponent;\n\n    return (\n      <Box\n        data-testid=\"Banner\"\n        role=\"alert\"\n        aria-atomic=\"true\"\n        aria-live=\"assertive\"\n        onClick={onClick}\n        sx={{\n          display: 'flex',\n          width: '100%',\n          // on mobile content and button bellow each other\n          flexDirection: { xs: 'column', md: 'row' },\n          alignItems: { xs: 'flex-start', md: 'center' },\n          justifyContent: 'space-between',\n          // proportions\n          px: 2,\n          py: size === 'small' ? 1 : { xs: 2, md: 1 },\n          gap: 1,\n          // style\n          borderLeft: 6,\n          borderColor: borderColor,\n          backgroundColor: theme.palette.mode === 'dark' ? 'onSurface.os900' : backgroundColor,\n          textAlign: 'left',\n          // clickable style\n          ...(onClick && {\n            position: 'relative',\n            cursor: 'pointer',\n            // focused style\n            ...getFocusRingStyle(theme, true, '2px'),\n          }),\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Box\n          data-testid=\"Banner.wrapper\"\n          sx={{\n            // align icon and content\n            flexGrow: '1',\n            display: 'flex',\n            alignItems: 'flex-start',\n            justifyContent: 'flex-start',\n            gap: 1,\n            py: 0.5,\n            ...wrapperSx,\n          }}\n          {...restWrapper}\n        >\n          <BannerIcon\n            data-testid=\"Banner.icon\"\n            sx={{\n              color: borderColor,\n              ...iconSx,\n            }}\n            {...restIcon}\n          />\n          <Typography\n            data-testid=\"Banner.text\"\n            sx={{\n              color: 'text.primary',\n              flexGrow: '1',\n              // custom font according to Figma\n              fontSize: { xl: '16px' },\n              lineHeight: { xl: '24px' },\n              ...typographySx,\n            }}\n            {...restTypography}\n          >\n            {children}\n          </Typography>\n        </Box>\n        {buttons && (\n          <Box\n            data-testid=\"Banner.buttons\"\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              gap: 1,\n              // always show buttons next to each other\n              flexShrink: '0',\n              // on mobile align with text\n              ml: { xs: 4, md: 0 },\n              // on mobile move to the right side\n              alignSelf: 'flex-end',\n              ...buttonsWrapperSx,\n            }}\n            {...restButtonsWrapper}\n          >\n            {buttons}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Banner","forwardRef","_a","ref","children","variant","size","sx","iconProps","IconComponent","typographyProps","wrapperProps","buttons","buttonsWrapperProps","onClick","rest","__rest","theme","useTheme","_b","iconSx","restIcon","_c","typographySx","restTypography","_d","wrapperSx","restWrapper","_e","buttonsWrapperSx","restButtonsWrapper","borderColor","backgroundColor","IconVariantComponent","useMemo","WarningFilledIcon","CircleExclamationFilledIcon","CircleInformationFilledIcon","BannerIcon","_jsxs","Box","Object","assign","role","display","width","flexDirection","xs","md","alignItems","justifyContent","px","py","gap","borderLeft","palette","mode","textAlign","position","cursor","getFocusRingStyle","jsxs","flexGrow","_jsx","jsx","color","Typography","fontSize","xl","lineHeight","flexShrink","ml","alignSelf"],"mappings":"+TA+Ca,MAAAA,EAAgCC,EAAUA,YACrD,CACEC,EAcAC,KAdA,IAAAC,SACEA,EAAQC,QACRA,EAAU,OAAMC,KAChBA,EAAO,QAAOC,GACdA,EAAEC,UACFA,EAASC,cACTA,EAAaC,gBACbA,EAAeC,aACfA,EAAYC,QACZA,EAAOC,oBACPA,EAAmBC,QACnBA,GAEDZ,EADIa,EAAIC,EAAAA,OAAAd,EAZT,2IAgBA,MAAMe,EAAQC,EAAAA,WACRC,EAA8BX,QAAAA,EAAa,IAAzCD,GAAIa,GAAuCD,EAA5BE,EAAjBL,EAAAA,OAAAG,EAAA,CAAA,OACAG,EAA0CZ,QAAAA,EAAmB,IAA3DH,GAAIgB,GAAyDD,EAAxCE,EAAvBR,EAAAA,OAAAM,EAAA,CAAA,OACAG,EAAoCd,QAAAA,EAAgB,IAAlDJ,GAAImB,GAAgDD,EAAlCE,EAApBX,EAAAA,OAAAS,EAAA,CAAA,OACAG,EAAkDf,QAAAA,EAAuB,IAAvEN,GAAIsB,GAAqED,EAAhDE,EAA3Bd,EAAAA,OAAAY,EAAA,CAAA,QAECG,EAAaC,EAAiBC,GAAwBC,EAAOA,SAAC,KACnE,OAAQ7B,GACN,IAAK,QACH,MAAO,CAAC,aAAc,cAAe8B,qBACvC,IAAK,UACH,MAAO,CAAC,eAAgB,gBAAiBC,+BAE3C,QACE,MAAO,CAAC,YAAa,aAAcC,kCAEtC,CAAChC,IACEiC,EAAa7B,QAAAA,EAAiBwB,EAEpC,OACEM,OAACC,EAAAA,IACaC,OAAAC,OAAA,CAAA,cAAA,SACZC,KAAK,QACO,cAAA,OACF,YAAA,YACV7B,QAASA,EACTP,GAAEkC,OAAAC,OAAAD,OAAAC,OAAA,CACAE,QAAS,OACTC,MAAO,OAEPC,cAAe,CAAEC,GAAI,SAAUC,GAAI,OACnCC,WAAY,CAAEF,GAAI,aAAcC,GAAI,UACpCE,eAAgB,gBAEhBC,GAAI,EACJC,GAAa,UAAT9C,EAAmB,EAAI,CAAEyC,GAAI,EAAGC,GAAI,GACxCK,IAAK,EAELC,WAAY,EACZvB,YAAaA,EACbC,gBAAwC,SAAvBf,EAAMsC,QAAQC,KAAkB,kBAAoBxB,EACrEyB,UAAW,QAEP3C,GAAO2B,OAAAC,OAAA,CACTgB,SAAU,WACVC,OAAQ,WAELC,EAAiBA,kBAAC3C,GAAO,EAAM,SAEjCV,GAELJ,IAAKA,GACDY,EAAI,CAAAX,SAAA,CAERmC,EAACsB,KAAArB,MACaC,OAAAC,OAAA,CAAA,cAAA,iBACZnC,GAAEkC,OAAAC,OAAA,CAEAoB,SAAU,IACVlB,QAAS,OACTK,WAAY,aACZC,eAAgB,aAChBG,IAAK,EACLD,GAAI,IACD1B,IAEDC,EAEJ,CAAAvB,SAAA,CAAA2D,EAAAC,IAAC1B,EACaG,OAAAC,OAAA,CAAA,cAAA,cACZnC,GACEkC,OAAAC,OAAA,CAAAuB,MAAOlC,GACJX,IAEDC,IAEN0C,MAACG,EAAAA,WAAUzB,OAAAC,OAAA,CAAA,cACG,cACZnC,GAAEkC,OAAAC,OAAA,CACAuB,MAAO,eACPH,SAAU,IAEVK,SAAU,CAAEC,GAAI,QAChBC,WAAY,CAAED,GAAI,SACf7C,IAEDC,EAAc,CAAApB,SAEjBA,SAGJQ,GACCmD,MAACvB,EAAGA,IAAAC,OAAAC,OAAA,CAAA,cACU,iBACZnC,GACEkC,OAAAC,OAAA,CAAAE,QAAS,OACTK,WAAY,SACZC,eAAgB,gBAChBG,IAAK,EAELiB,WAAY,IAEZC,GAAI,CAAExB,GAAI,EAAGC,GAAI,GAEjBwB,UAAW,YACR3C,IAEDC,EAEH,CAAA1B,SAAAQ,QAGD"}

package/cjs/components/banner/index.d.ts

@@ -1 +1,3 @@
 export * from './banner';
+export * from './BannerButton';
+export * from './BannerDismissButton';

package/cjs/components/cardMenu/cardMenu.d.ts

@@ -1,7 +1,6 @@
 import React, { HTMLAttributes } from 'react';
+import { SxProps, Theme } from '@mui/material';
 import { IconNameProp } from '../icon';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material/styles';
 import { Placement } from '../../utils/enum';
 /**
  * @interface CardMenuItem

package/cjs/components/cardMenu/cardMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"cardMenu.js","sources":["../../../../../src/components/cardMenu/cardMenu.tsx"],"sourcesContent":["import React, { HTMLAttributes, forwardRef } from 'react';\nimport useWindowSize from '../common/hook/useWindowSize';\nimport {\n  List,\n  ListItem,\n  ListItemButton,\n  ListItemIcon,\n  ListItemText,\n  MenuItem,\n  ClickAwayListener,\n  Divider,\n} from '@mui/material';\nimport { Icon, IconNameProp } from '../icon';\nimport { Checkbox } from '../checkbox';\nimport { SxProps } from '@mui/system';\nimport { Theme } from '@mui/material/styles';\nimport { Placement } from '../../utils/enum';\nimport { ToggleSwitch } from '../toggleSwitch';\nimport { useCardMenu } from './hooks/useCardMenu';\nimport { PopperStyled } from './styled/popperStyled';\nimport { MenuListStyled } from './styled/menuListStyled';\nimport { DrawerStyled } from './styled/drawerStyled';\n\n/**\n * @interface CardMenuItem\n * @description The interface describing the object that has to be provided to the array property 'items' in CardMenu component.\n * If url is provided the menuItem becomes link.\n */\nexport interface CardMenuItem {\n  text: string;\n  callback?: () => void;\n  disabled?: boolean;\n  icon?: IconNameProp;\n  isChecked?: boolean;\n  url?: string;\n  target?: string;\n}\n/**\n * @type CardMenuItemsArray\n * @description Array of CardMenuItem.\n */\nexport type CardMenuItemsArray = Array<CardMenuItem>;\n\n/**\n * @interface CardMenuProps\n * @description Base definition of SkodaFlow CardMenu independent on core implementation.\n * Properties are inherited from HTML Div element.\n */\nexport interface CardMenuProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * If true the drawer is shown.\n   */\n  open: boolean;\n  /**\n   * The content of the component.\n   */\n  items: CardMenuItemsArray;\n  /**\n   * React useState hook set function used to update the passed items to the component.\n   */\n  setItems?: React.Dispatch<React.SetStateAction<CardMenuItemsArray>>;\n  /**\n   * Callback fired when the component requests to be closed.\n   */\n  onClose: () => void;\n  /**\n   * An HTML element used to set the position of the popper.\n   */\n  anchorRef: React.RefObject<HTMLElement>;\n  /**\n   * If header is provided, a text will be displayed on top of the elements.\n   */\n  header?: string;\n  /**\n   * If true, multiple item select will be enabled. Property 'setItems' must be provided in order allowMultiselect to work.\n   * Items: CardMenuItemsArray provided to the component must have isChecked propery provided in order allowMultiselect to work..\n   */\n  allowMultiselect?: boolean;\n  /**\n   * Callback fired when item is clicked.\n   */\n  onItemClick?: (itemText: string) => void;\n  /**\n   *  The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   *  Override or extend the styles applied to the component.\n   */\n  classes?: object;\n  /**\n   * Popper placement. Default is 'bottom'.\n   */\n  placement?: Placement;\n  /**\n   * If true, a switch button is added to the items allowing to select or deselect all of the items.\n   * Property allowMultiselect should be true in order hasToggleSelection to work. Only available for the desktop version of the MenuCard.\n   */\n  hasToggleSelection?: boolean;\n  /**\n   * The toggle label displayed when groupToggleSelection is true. Default is \"Select all\".\n   */\n  toggleLabel?: string;\n  /** Renders the popper with border radius */\n  rounded?: boolean;\n}\n\n/** @deprecated Use Menu component from @mui/material */\nexport const CardMenu = forwardRef<HTMLDivElement, CardMenuProps>(\n  (\n    {\n      items,\n      setItems,\n      open,\n      header,\n      anchorRef,\n      allowMultiselect,\n      hasToggleSelection,\n      onItemClick,\n      onClose,\n      sx,\n      classes,\n      placement,\n      toggleLabel,\n      rounded,\n    },\n    ref,\n  ) => {\n    const { isMobile } = useWindowSize();\n    const { isToggleChecked, onClickHandler, onToggleChange } = useCardMenu(\n      items,\n      allowMultiselect,\n      setItems,\n      onItemClick,\n      onClose,\n    );\n\n    return (\n      <>\n        {isMobile ? (\n          <DrawerStyled\n            open={open}\n            onClose={onClose}\n            anchor=\"bottom\"\n            sx={sx}\n            ref={ref}\n            classes={classes}\n            hasHeader={!!header}\n            data-testid=\"CardMenu\"\n          >\n            {header && (\n              <div className=\"drawer-header\" data-testid=\"CardMenu.header\">\n                {header}\n              </div>\n            )}\n            <List>\n              {items.map((item) => {\n                return (\n                  <React.Fragment key={item.text}>\n                    <ListItem\n                      data-testid=\"CardMenu.item\"\n                      data-state={item.disabled ? 'disabled' : undefined}\n                      disableGutters\n                    >\n                      <ListItemButton disabled={item.disabled} onClick={() => onClickHandler(item)}>\n                        {item.icon && (\n                          <ListItemIcon>\n                            <Icon name={item.icon} fontSize=\"small\" />\n                          </ListItemIcon>\n                        )}\n                        <ListItemText primaryTypographyProps={{ noWrap: true }} primary={item.text} />\n                        {allowMultiselect && (\n                          <Checkbox checked={item.isChecked} disabled={item.disabled} data-testid=\"CardMenu.check\" />\n                        )}\n                      </ListItemButton>\n                    </ListItem>\n                    <Divider variant=\"middle\" />\n                  </React.Fragment>\n                );\n              })}\n            </List>\n          </DrawerStyled>\n        ) : (\n          <PopperStyled\n            open={open}\n            anchorEl={anchorRef.current}\n            placement={placement}\n            ref={ref}\n            rounded={rounded}\n            data-testid=\"CardMenu\"\n          >\n            <ClickAwayListener onClickAway={onClose}>\n              <MenuListStyled allowMultiselect={allowMultiselect} sx={sx} classes={classes}>\n                {header && (\n                  <MenuItem className=\"menu-item-header\" data-testid=\"CardMenu.header\">\n                    <ListItemText primaryTypographyProps={{ noWrap: true }} primary={header} />\n                    <ListItemIcon onClick={onClose} data-testid=\"CardMenu.close\">\n                      <Icon name=\"close\" fontSize=\"small\" />\n                    </ListItemIcon>\n                  </MenuItem>\n                )}\n                {header && <Divider variant=\"middle\" className=\"menu-item-divider\" />}\n                {allowMultiselect && hasToggleSelection && (\n                  <MenuItem className=\"menu-select-all\" data-testid=\"CardMenu.toggle\">\n                    <ListItemText\n                      primaryTypographyProps={{ noWrap: true }}\n                      primary={toggleLabel ? toggleLabel : 'Select all'}\n                    />\n                    <ToggleSwitch onChange={onToggleChange} checked={isToggleChecked} compact />\n                  </MenuItem>\n                )}\n\n                <div className=\"menu-content-items\">\n                  {items.map((item) => {\n                    return (\n                      <MenuItem\n                        key={item.text}\n                        disabled={item.disabled}\n                        onClick={() => onClickHandler(item)}\n                        data-testid=\"CardMenu.item\"\n                        data-state={item.disabled ? 'disabled' : undefined}\n                      >\n                        {item.icon && (\n                          <ListItemIcon>\n                            <Icon name={item.icon} fontSize=\"small\" />\n                          </ListItemIcon>\n                        )}\n                        <ListItemText primaryTypographyProps={{ noWrap: true }} primary={item.text} />\n                        {allowMultiselect && (\n                          <Checkbox checked={item.isChecked} disabled={item.disabled} data-testid=\"CardMenu.check\" />\n                        )}\n                      </MenuItem>\n                    );\n                  })}\n                </div>\n              </MenuListStyled>\n            </ClickAwayListener>\n          </PopperStyled>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["CardMenu","forwardRef","items","setItems","open","header","anchorRef","allowMultiselect","hasToggleSelection","onItemClick","onClose","sx","classes","placement","toggleLabel","rounded","ref","isMobile","useWindowSize","isToggleChecked","onClickHandler","onToggleChange","useCardMenu","_jsx","jsx","_Fragment","children","_jsxs","DrawerStyled","anchor","hasHeader","className","List","map","item","jsxs","React","default","Fragment","ListItem","disabled","undefined","disableGutters","ListItemButton","onClick","icon","ListItemIcon","Icon","name","fontSize","ListItemText","primaryTypographyProps","noWrap","primary","text","Checkbox","checked","isChecked","Divider","variant","PopperStyled","anchorEl","current","ClickAwayListener","onClickAway","MenuListStyled","MenuItem","ToggleSwitch","onChange","compact"],"mappings":"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"}
+{"version":3,"file":"cardMenu.js","sources":["../../../../../src/components/cardMenu/cardMenu.tsx"],"sourcesContent":["import React, { HTMLAttributes, forwardRef } from 'react';\nimport useWindowSize from '../common/hook/useWindowSize';\nimport {\n  List,\n  ListItem,\n  ListItemButton,\n  ListItemIcon,\n  ListItemText,\n  MenuItem,\n  ClickAwayListener,\n  Divider,\n  SxProps,\n  Theme,\n} from '@mui/material';\nimport { Icon, IconNameProp } from '../icon';\nimport { Checkbox } from '../checkbox';\nimport { Placement } from '../../utils/enum';\nimport { ToggleSwitch } from '../toggleSwitch';\nimport { useCardMenu } from './hooks/useCardMenu';\nimport { PopperStyled } from './styled/popperStyled';\nimport { MenuListStyled } from './styled/menuListStyled';\nimport { DrawerStyled } from './styled/drawerStyled';\n\n/**\n * @interface CardMenuItem\n * @description The interface describing the object that has to be provided to the array property 'items' in CardMenu component.\n * If url is provided the menuItem becomes link.\n */\nexport interface CardMenuItem {\n  text: string;\n  callback?: () => void;\n  disabled?: boolean;\n  icon?: IconNameProp;\n  isChecked?: boolean;\n  url?: string;\n  target?: string;\n}\n/**\n * @type CardMenuItemsArray\n * @description Array of CardMenuItem.\n */\nexport type CardMenuItemsArray = Array<CardMenuItem>;\n\n/**\n * @interface CardMenuProps\n * @description Base definition of SkodaFlow CardMenu independent on core implementation.\n * Properties are inherited from HTML Div element.\n */\nexport interface CardMenuProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * If true the drawer is shown.\n   */\n  open: boolean;\n  /**\n   * The content of the component.\n   */\n  items: CardMenuItemsArray;\n  /**\n   * React useState hook set function used to update the passed items to the component.\n   */\n  setItems?: React.Dispatch<React.SetStateAction<CardMenuItemsArray>>;\n  /**\n   * Callback fired when the component requests to be closed.\n   */\n  onClose: () => void;\n  /**\n   * An HTML element used to set the position of the popper.\n   */\n  anchorRef: React.RefObject<HTMLElement>;\n  /**\n   * If header is provided, a text will be displayed on top of the elements.\n   */\n  header?: string;\n  /**\n   * If true, multiple item select will be enabled. Property 'setItems' must be provided in order allowMultiselect to work.\n   * Items: CardMenuItemsArray provided to the component must have isChecked propery provided in order allowMultiselect to work..\n   */\n  allowMultiselect?: boolean;\n  /**\n   * Callback fired when item is clicked.\n   */\n  onItemClick?: (itemText: string) => void;\n  /**\n   *  The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   *  Override or extend the styles applied to the component.\n   */\n  classes?: object;\n  /**\n   * Popper placement. Default is 'bottom'.\n   */\n  placement?: Placement;\n  /**\n   * If true, a switch button is added to the items allowing to select or deselect all of the items.\n   * Property allowMultiselect should be true in order hasToggleSelection to work. Only available for the desktop version of the MenuCard.\n   */\n  hasToggleSelection?: boolean;\n  /**\n   * The toggle label displayed when groupToggleSelection is true. Default is \"Select all\".\n   */\n  toggleLabel?: string;\n  /** Renders the popper with border radius */\n  rounded?: boolean;\n}\n\n/** @deprecated Use Menu component from @mui/material */\nexport const CardMenu = forwardRef<HTMLDivElement, CardMenuProps>(\n  (\n    {\n      items,\n      setItems,\n      open,\n      header,\n      anchorRef,\n      allowMultiselect,\n      hasToggleSelection,\n      onItemClick,\n      onClose,\n      sx,\n      classes,\n      placement,\n      toggleLabel,\n      rounded,\n    },\n    ref,\n  ) => {\n    const { isMobile } = useWindowSize();\n    const { isToggleChecked, onClickHandler, onToggleChange } = useCardMenu(\n      items,\n      allowMultiselect,\n      setItems,\n      onItemClick,\n      onClose,\n    );\n\n    return (\n      <>\n        {isMobile ? (\n          <DrawerStyled\n            open={open}\n            onClose={onClose}\n            anchor=\"bottom\"\n            sx={sx}\n            ref={ref}\n            classes={classes}\n            hasHeader={!!header}\n            data-testid=\"CardMenu\"\n          >\n            {header && (\n              <div className=\"drawer-header\" data-testid=\"CardMenu.header\">\n                {header}\n              </div>\n            )}\n            <List>\n              {items.map((item) => {\n                return (\n                  <React.Fragment key={item.text}>\n                    <ListItem\n                      data-testid=\"CardMenu.item\"\n                      data-state={item.disabled ? 'disabled' : undefined}\n                      disableGutters\n                    >\n                      <ListItemButton disabled={item.disabled} onClick={() => onClickHandler(item)}>\n                        {item.icon && (\n                          <ListItemIcon>\n                            <Icon name={item.icon} fontSize=\"small\" />\n                          </ListItemIcon>\n                        )}\n                        <ListItemText primaryTypographyProps={{ noWrap: true }} primary={item.text} />\n                        {allowMultiselect && (\n                          <Checkbox checked={item.isChecked} disabled={item.disabled} data-testid=\"CardMenu.check\" />\n                        )}\n                      </ListItemButton>\n                    </ListItem>\n                    <Divider variant=\"middle\" />\n                  </React.Fragment>\n                );\n              })}\n            </List>\n          </DrawerStyled>\n        ) : (\n          <PopperStyled\n            open={open}\n            anchorEl={anchorRef.current}\n            placement={placement}\n            ref={ref}\n            rounded={rounded}\n            data-testid=\"CardMenu\"\n          >\n            <ClickAwayListener onClickAway={onClose}>\n              <MenuListStyled allowMultiselect={allowMultiselect} sx={sx} classes={classes}>\n                {header && (\n                  <MenuItem className=\"menu-item-header\" data-testid=\"CardMenu.header\">\n                    <ListItemText primaryTypographyProps={{ noWrap: true }} primary={header} />\n                    <ListItemIcon onClick={onClose} data-testid=\"CardMenu.close\">\n                      <Icon name=\"close\" fontSize=\"small\" />\n                    </ListItemIcon>\n                  </MenuItem>\n                )}\n                {header && <Divider variant=\"middle\" className=\"menu-item-divider\" />}\n                {allowMultiselect && hasToggleSelection && (\n                  <MenuItem className=\"menu-select-all\" data-testid=\"CardMenu.toggle\">\n                    <ListItemText\n                      primaryTypographyProps={{ noWrap: true }}\n                      primary={toggleLabel ? toggleLabel : 'Select all'}\n                    />\n                    <ToggleSwitch onChange={onToggleChange} checked={isToggleChecked} compact />\n                  </MenuItem>\n                )}\n\n                <div className=\"menu-content-items\">\n                  {items.map((item) => {\n                    return (\n                      <MenuItem\n                        key={item.text}\n                        disabled={item.disabled}\n                        onClick={() => onClickHandler(item)}\n                        data-testid=\"CardMenu.item\"\n                        data-state={item.disabled ? 'disabled' : undefined}\n                      >\n                        {item.icon && (\n                          <ListItemIcon>\n                            <Icon name={item.icon} fontSize=\"small\" />\n                          </ListItemIcon>\n                        )}\n                        <ListItemText primaryTypographyProps={{ noWrap: true }} primary={item.text} />\n                        {allowMultiselect && (\n                          <Checkbox checked={item.isChecked} disabled={item.disabled} data-testid=\"CardMenu.check\" />\n                        )}\n                      </MenuItem>\n                    );\n                  })}\n                </div>\n              </MenuListStyled>\n            </ClickAwayListener>\n          </PopperStyled>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["CardMenu","forwardRef","items","setItems","open","header","anchorRef","allowMultiselect","hasToggleSelection","onItemClick","onClose","sx","classes","placement","toggleLabel","rounded","ref","isMobile","useWindowSize","isToggleChecked","onClickHandler","onToggleChange","useCardMenu","_jsx","jsx","_Fragment","children","_jsxs","DrawerStyled","anchor","hasHeader","className","List","map","item","jsxs","React","default","Fragment","ListItem","disabled","undefined","disableGutters","ListItemButton","onClick","icon","ListItemIcon","Icon","name","fontSize","ListItemText","primaryTypographyProps","noWrap","primary","text","Checkbox","checked","isChecked","Divider","variant","PopperStyled","anchorEl","current","ClickAwayListener","onClickAway","MenuListStyled","MenuItem","ToggleSwitch","onChange","compact"],"mappings":"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"}

package/cjs/components/cardMenu/styled/drawerStyled.d.ts

@@ -1,3 +1,3 @@
-export declare const DrawerStyled: import("@emotion/styled").StyledComponent<import("@mui/material").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & {
+export declare const DrawerStyled: import("@emotion/styled").StyledComponent<import("@mui/material").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     hasHeader: boolean;
 }, {}, {}>;

package/cjs/components/cardMenu/styled/drawerStyled.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@mui/system"),i=require("@mui/material");const r=e.styled(i.Drawer,{shouldForwardProp:e=>"hasHeader"!==e})((({theme:e,hasHeader:i})=>({"& .MuiPaper-root > .MuiList-root":{fontSize:"16px",fontWeight:400,paddingBottom:"32px",listStyleType:"none",maxHeight:"201px",marginTop:i?"9px":"0px","& > .MuiListItem-root":{lineHeight:"24px",padding:"23px 16px 11px 16px",display:"flex","&:hover":{background:e.palette.surface.primary},"& > .MuiListItemIcon-root":{display:"inline-block",lineHeight:"21px",minWidth:"unset",width:"20px",marginRight:"8px","& > .MuiIcon-root":{color:e.palette.text.primary,display:"inline"}},"& > .MuiTypography-root":{flex:1}}},".MuiPaper-root > .drawer-header":{padding:"16px 16px 0px 16px",fontWeight:"bold",lineHeight:"24px",fontSize:"20px",wordBreak:"break-all"},"& > .MuiPaper-root":{borderTopLeftRadius:"16px",borderTopRightRadius:"16px"}})));exports.DrawerStyled=r;
+"use strict";var e=require("@mui/material/styles"),i=require("@mui/material");const r=e.styled(i.Drawer,{shouldForwardProp:e=>"hasHeader"!==e})((({theme:e,hasHeader:i})=>({"& .MuiPaper-root > .MuiList-root":{fontSize:"16px",fontWeight:400,paddingBottom:"32px",listStyleType:"none",maxHeight:"201px",marginTop:i?"9px":"0px","& > .MuiListItem-root":{lineHeight:"24px",padding:"23px 16px 11px 16px",display:"flex","&:hover":{background:e.palette.surface.primary},"& > .MuiListItemIcon-root":{display:"inline-block",lineHeight:"21px",minWidth:"unset",width:"20px",marginRight:"8px","& > .MuiIcon-root":{color:e.palette.text.primary,display:"inline"}},"& > .MuiTypography-root":{flex:1}}},".MuiPaper-root > .drawer-header":{padding:"16px 16px 0px 16px",fontWeight:"bold",lineHeight:"24px",fontSize:"20px",wordBreak:"break-all"},"& > .MuiPaper-root":{borderTopLeftRadius:"16px",borderTopRightRadius:"16px"}})));exports.DrawerStyled=r;
 //# sourceMappingURL=drawerStyled.js.map

package/cjs/components/cardMenu/styled/drawerStyled.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawerStyled.js","sources":["../../../../../../src/components/cardMenu/styled/drawerStyled.tsx"],"sourcesContent":["import { styled } from '@mui/system';\nimport { Drawer } from '@mui/material';\n\nexport const DrawerStyled = styled(Drawer, {\n  shouldForwardProp: (prop) => prop !== 'hasHeader',\n})<{ hasHeader: boolean }>(({ theme, hasHeader }) => {\n  return {\n    '& .MuiPaper-root > .MuiList-root': {\n      fontSize: '16px',\n      fontWeight: 400,\n      paddingBottom: '32px',\n      listStyleType: 'none',\n      maxHeight: '201px',\n      marginTop: hasHeader ? '9px' : '0px',\n      '& > .MuiListItem-root': {\n        lineHeight: '24px',\n        padding: '23px 16px 11px 16px',\n        display: 'flex',\n        '&:hover': {\n          background: theme.palette.surface.primary,\n        },\n        '& > .MuiListItemIcon-root': {\n          display: 'inline-block',\n          lineHeight: '21px',\n          minWidth: 'unset',\n          width: '20px',\n          marginRight: '8px',\n          '& > .MuiIcon-root': {\n            color: theme.palette.text.primary,\n            display: 'inline',\n          },\n        },\n        '& > .MuiTypography-root': {\n          flex: 1,\n        },\n      },\n    },\n    '.MuiPaper-root > .drawer-header': {\n      padding: '16px 16px 0px 16px',\n      fontWeight: 'bold',\n      lineHeight: '24px',\n      fontSize: '20px',\n      wordBreak: 'break-all',\n    },\n    '& > .MuiPaper-root': {\n      borderTopLeftRadius: '16px',\n      borderTopRightRadius: '16px',\n    },\n  };\n});\n"],"names":["DrawerStyled","styled","Drawer","shouldForwardProp","prop","theme","hasHeader","fontSize","fontWeight","paddingBottom","listStyleType","maxHeight","marginTop","lineHeight","padding","display","background","palette","surface","primary","minWidth","width","marginRight","color","text","flex","wordBreak","borderTopLeftRadius","borderTopRightRadius"],"mappings":"qEAGa,MAAAA,EAAeC,EAAMA,OAACC,SAAQ,CACzCC,kBAAoBC,GAAkB,cAATA,GADHH,EAED,EAAGI,QAAOC,gBAC5B,CACL,mCAAoC,CAClCC,SAAU,OACVC,WAAY,IACZC,cAAe,OACfC,cAAe,OACfC,UAAW,QACXC,UAAWN,EAAY,MAAQ,MAC/B,wBAAyB,CACvBO,WAAY,OACZC,QAAS,sBACTC,QAAS,OACT,UAAW,CACTC,WAAYX,EAAMY,QAAQC,QAAQC,SAEpC,4BAA6B,CAC3BJ,QAAS,eACTF,WAAY,OACZO,SAAU,QACVC,MAAO,OACPC,YAAa,MACb,oBAAqB,CACnBC,MAAOlB,EAAMY,QAAQO,KAAKL,QAC1BJ,QAAS,WAGb,0BAA2B,CACzBU,KAAM,KAIZ,kCAAmC,CACjCX,QAAS,qBACTN,WAAY,OACZK,WAAY,OACZN,SAAU,OACVmB,UAAW,aAEb,qBAAsB,CACpBC,oBAAqB,OACrBC,qBAAsB"}
+{"version":3,"file":"drawerStyled.js","sources":["../../../../../../src/components/cardMenu/styled/drawerStyled.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport { Drawer } from '@mui/material';\n\nexport const DrawerStyled = styled(Drawer, {\n  shouldForwardProp: (prop) => prop !== 'hasHeader',\n})<{ hasHeader: boolean }>(({ theme, hasHeader }) => {\n  return {\n    '& .MuiPaper-root > .MuiList-root': {\n      fontSize: '16px',\n      fontWeight: 400,\n      paddingBottom: '32px',\n      listStyleType: 'none',\n      maxHeight: '201px',\n      marginTop: hasHeader ? '9px' : '0px',\n      '& > .MuiListItem-root': {\n        lineHeight: '24px',\n        padding: '23px 16px 11px 16px',\n        display: 'flex',\n        '&:hover': {\n          background: theme.palette.surface.primary,\n        },\n        '& > .MuiListItemIcon-root': {\n          display: 'inline-block',\n          lineHeight: '21px',\n          minWidth: 'unset',\n          width: '20px',\n          marginRight: '8px',\n          '& > .MuiIcon-root': {\n            color: theme.palette.text.primary,\n            display: 'inline',\n          },\n        },\n        '& > .MuiTypography-root': {\n          flex: 1,\n        },\n      },\n    },\n    '.MuiPaper-root > .drawer-header': {\n      padding: '16px 16px 0px 16px',\n      fontWeight: 'bold',\n      lineHeight: '24px',\n      fontSize: '20px',\n      wordBreak: 'break-all',\n    },\n    '& > .MuiPaper-root': {\n      borderTopLeftRadius: '16px',\n      borderTopRightRadius: '16px',\n    },\n  };\n});\n"],"names":["DrawerStyled","styled","Drawer","shouldForwardProp","prop","theme","hasHeader","fontSize","fontWeight","paddingBottom","listStyleType","maxHeight","marginTop","lineHeight","padding","display","background","palette","surface","primary","minWidth","width","marginRight","color","text","flex","wordBreak","borderTopLeftRadius","borderTopRightRadius"],"mappings":"8EAGa,MAAAA,EAAeC,EAAMA,OAACC,SAAQ,CACzCC,kBAAoBC,GAAkB,cAATA,GADHH,EAED,EAAGI,QAAOC,gBAC5B,CACL,mCAAoC,CAClCC,SAAU,OACVC,WAAY,IACZC,cAAe,OACfC,cAAe,OACfC,UAAW,QACXC,UAAWN,EAAY,MAAQ,MAC/B,wBAAyB,CACvBO,WAAY,OACZC,QAAS,sBACTC,QAAS,OACT,UAAW,CACTC,WAAYX,EAAMY,QAAQC,QAAQC,SAEpC,4BAA6B,CAC3BJ,QAAS,eACTF,WAAY,OACZO,SAAU,QACVC,MAAO,OACPC,YAAa,MACb,oBAAqB,CACnBC,MAAOlB,EAAMY,QAAQO,KAAKL,QAC1BJ,QAAS,WAGb,0BAA2B,CACzBU,KAAM,KAIZ,kCAAmC,CACjCX,QAAS,qBACTN,WAAY,OACZK,WAAY,OACZN,SAAU,OACVmB,UAAW,aAEb,qBAAsB,CACpBC,oBAAqB,OACrBC,qBAAsB"}

package/cjs/components/cardMenu/styled/popperStyled.d.ts

@@ -1,4 +1,4 @@
-export declare const PopperStyled: import("@emotion/styled").StyledComponent<import("@mui/base").PopperOwnProps & Omit<any, keyof import("@mui/base").PopperOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & {
+export declare const PopperStyled: import("@emotion/styled").StyledComponent<import("@mui/material").PopperProps & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     theme?: any;
     isMobile?: boolean;
     rounded?: boolean;

package/cjs/components/cardMenu/styled/popperStyled.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@mui/system"),r=require("@mui/base");const d=e.styled(r.Popper,{shouldForwardProp:e=>"rounded"!==e})((({theme:e,rounded:r})=>({zIndex:"100",background:e.palette.background.primary,"& > *":{borderRadius:r?"4px":void 0}})));exports.PopperStyled=d;
+"use strict";var r=require("@mui/material/styles"),e=require("@mui/material");const d=r.styled(e.Popper,{shouldForwardProp:r=>"rounded"!==r})((({theme:r,rounded:e})=>({zIndex:"100",background:r.palette.background.primary,"& > *":{borderRadius:e?"4px":void 0}})));exports.PopperStyled=d;
 //# sourceMappingURL=popperStyled.js.map

package/cjs/components/cardMenu/styled/popperStyled.js.map

@@ -1 +1 @@
-{"version":3,"file":"popperStyled.js","sources":["../../../../../../src/components/cardMenu/styled/popperStyled.tsx"],"sourcesContent":["import { styled } from '@mui/system';\nimport { Popper } from '@mui/base';\n\nexport const PopperStyled = styled(Popper, {\n  shouldForwardProp: (propName) => propName !== 'rounded',\n})<{\n  theme?: any;\n  isMobile?: boolean;\n  rounded?: boolean;\n}>(({ theme, rounded }) => {\n  return {\n    zIndex: '100',\n    background: theme.palette.background.primary,\n    '& > *': {\n      borderRadius: rounded ? '4px' : undefined,\n    },\n  };\n});\n"],"names":["PopperStyled","styled","Popper","shouldForwardProp","propName","theme","rounded","zIndex","background","palette","primary","borderRadius","undefined"],"mappings":"iEAGa,MAAAA,EAAeC,EAAMA,OAACC,SAAQ,CACzCC,kBAAoBC,GAA0B,YAAbA,GADPH,EAMzB,EAAGI,QAAOC,cACJ,CACLC,OAAQ,MACRC,WAAYH,EAAMI,QAAQD,WAAWE,QACrC,QAAS,CACPC,aAAcL,EAAU,WAAQM"}
+{"version":3,"file":"popperStyled.js","sources":["../../../../../../src/components/cardMenu/styled/popperStyled.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport { Popper } from '@mui/material';\n\nexport const PopperStyled = styled(Popper, {\n  shouldForwardProp: (propName) => propName !== 'rounded',\n})<{\n  theme?: any;\n  isMobile?: boolean;\n  rounded?: boolean;\n}>(({ theme, rounded }) => {\n  return {\n    zIndex: '100',\n    background: theme.palette.background.primary,\n    '& > *': {\n      borderRadius: rounded ? '4px' : undefined,\n    },\n  };\n});\n"],"names":["PopperStyled","styled","Popper","shouldForwardProp","propName","theme","rounded","zIndex","background","palette","primary","borderRadius","undefined"],"mappings":"8EAGa,MAAAA,EAAeC,EAAMA,OAACC,SAAQ,CACzCC,kBAAoBC,GAA0B,YAAbA,GADPH,EAMzB,EAAGI,QAAOC,cACJ,CACLC,OAAQ,MACRC,WAAYH,EAAMI,QAAQD,WAAWE,QACrC,QAAS,CACPC,aAAcL,EAAU,WAAQM"}

package/cjs/components/carousel/navigation.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),s=require("react"),o=require("./hooks.js"),n=require("@mui/system"),t=require("@mui/material"),i=require("../icon/stroke/ChevronLeftIcon.js"),a=require("../icon/stroke/ChevronRightIcon.js"),c=require("../icon/stroke/ArrowLeftIcon.js"),l=require("../icon/stroke/ArrowRightIcon.js"),u=require("../../materialui/button/interactive.js");exports.CarouselNavigation=function({carousel:d,peekEffect:b=!1,prevButtonProps:g,prevIconProps:p,PrevIconComponent:j,nextButtonProps:x,nextIconProps:m,NextIconComponent:f,arrows:v=!0,onBackground:C=!1}){const I=o.useCarousel(),h=d||I,k="fade"!==(null==h?void 0:h.originalParams.effect)&&b,O=n.useTheme(),q=t.useMediaQuery(O.breakpoints.up("md")),P=g||{},{sx:y}=P,M=e.__rest(P,["sx"]),B=x||{},{sx:L}=B,w=e.__rest(B,["sx"]),[E,A]=o.useCarouselPeekEffect(h),N=j||(v?c.ArrowLeftIcon:i.ChevronLeftIcon),R=f||(v?l.ArrowRightIcon:a.ChevronRightIcon),_=s.useMemo((()=>Object.assign(Object.assign({position:"absolute",zIndex:"100",top:"50%",mt:"-22px"},u.getInteractiveStyle({color:"text.primary",borderColor:C?"transparent.transparent":"onSurface.os600",backgroundColor:C?"transparent.transparent":"surface.primary"},{backgroundColor:"surface.secondary"})),{"&.Mui-disabled":{color:"disabled.tertiary",borderColor:"disabled.primary",backgroundColor:C?"transparent.transparent":"disabled.secondary"}})),[]);return r.jsxs(r.Fragment,{children:[r.jsx(t.IconButton,Object.assign({disabled:h&&!h.originalParams.loop&&h.isBeginning,onClick:()=>{null==h||h.slidePrev(),k&&E&&A("reset")},onMouseEnter:()=>q&&k&&A("prev"),onMouseLeave:()=>k&&E&&A("reset"),sx:Object.assign(Object.assign(Object.assign({},_),{left:"16px"}),y),"aria-label":"Previous slide","aria-controls":"carousel",color:"surface"},M,{children:"rtl"===O.direction?r.jsx(R,Object.assign({},p)):r.jsx(N,Object.assign({},p))})),r.jsx(t.IconButton,Object.assign({disabled:h&&!h.originalParams.loop&&h.isEnd,onClick:()=>{null==h||h.slideNext(),k&&E&&A("reset")},onMouseEnter:()=>q&&k&&A("next"),onMouseLeave:()=>k&&E&&A("reset"),sx:Object.assign(Object.assign(Object.assign({},_),{right:"16px"}),L),"aria-label":"Next slide","aria-controls":"carousel",color:"surface"},w,{children:"rtl"===O.direction?r.jsx(N,Object.assign({},m)):r.jsx(R,Object.assign({},m))}))]})};
+"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),s=require("react"),o=require("./hooks.js"),n=require("@mui/material"),t=require("../icon/stroke/ChevronLeftIcon.js"),a=require("../icon/stroke/ChevronRightIcon.js"),i=require("../icon/stroke/ArrowLeftIcon.js"),c=require("../icon/stroke/ArrowRightIcon.js"),l=require("../../materialui/button/interactive.js");exports.CarouselNavigation=function({carousel:u,peekEffect:d=!1,prevButtonProps:x,prevIconProps:p,PrevIconComponent:g,nextButtonProps:b,nextIconProps:j,NextIconComponent:m,arrows:f=!0,onBackground:v=!1}){const h=o.useCarousel(),I=u||h,C="fade"!==(null==I?void 0:I.originalParams.effect)&&d,k=n.useTheme(),O=n.useMediaQuery(k.breakpoints.up("md")),P=x||{},{sx:q}=P,y=e.__rest(P,["sx"]),M=b||{},{sx:w}=M,B=e.__rest(M,["sx"]),[L,E]=o.useCarouselPeekEffect(I),A=g||(f?i.ArrowLeftIcon:t.ChevronLeftIcon),N=m||(f?c.ArrowRightIcon:a.ChevronRightIcon),R=s.useMemo((()=>Object.assign(Object.assign({position:"absolute",zIndex:"100",top:"50%",mt:"-22px",width:{xs:"32px",md:"40px",xl:"44px"},height:{xs:"32px",md:"40px",xl:"44px"},"& .MuiSvgIcon-root":{fontSize:{xs:"17px",xl:"20px"}}},l.getInteractiveStyle({color:"text.primary",borderColor:v?"transparent.transparent":"onSurface.os100",backgroundColor:v?"transparent.transparent":"surface.primary"},{backgroundColor:"surface.secondary"})),{"&.Mui-disabled":{color:"disabled.tertiary",borderColor:v?"transparent.transparent":"disabled.secondary",backgroundColor:v?"transparent.transparent":"disabled.secondary"}})),[]);return r.jsxs(r.Fragment,{children:[r.jsx(n.IconButton,Object.assign({disabled:I&&!I.originalParams.loop&&I.isBeginning,onClick:()=>{null==I||I.slidePrev(),C&&L&&E("reset")},onMouseEnter:()=>O&&C&&E("prev"),onMouseLeave:()=>C&&L&&E("reset"),sx:Object.assign(Object.assign(Object.assign({},R),{left:"16px"}),q),"aria-label":"Previous slide","aria-controls":"carousel",color:"surface",size:"medium"},y,{children:"rtl"===k.direction?r.jsx(N,Object.assign({},p)):r.jsx(A,Object.assign({},p))})),r.jsx(n.IconButton,Object.assign({disabled:I&&!I.originalParams.loop&&I.isEnd,onClick:()=>{null==I||I.slideNext(),C&&L&&E("reset")},onMouseEnter:()=>O&&C&&E("next"),onMouseLeave:()=>C&&L&&E("reset"),sx:Object.assign(Object.assign(Object.assign({},R),{right:"16px"}),w),"aria-label":"Next slide","aria-controls":"carousel",color:"surface"},B,{children:"rtl"===k.direction?r.jsx(A,Object.assign({},j)):r.jsx(N,Object.assign({},j))}))]})};
 //# sourceMappingURL=navigation.js.map

package/cjs/components/carousel/navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","sources":["../../../../../src/components/carousel/navigation.tsx"],"sourcesContent":["import React, { useMemo, ElementType } from 'react';\nimport { useCarousel, useCarouselPeekEffect } from './hooks';\nimport { useTheme } from '@mui/system';\nimport { CSSObject, IconButton, IconButtonProps, SvgIconProps, useMediaQuery } from '@mui/material';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\nimport { ArrowLeftIcon } from '@/src/components/icon/stroke/ArrowLeftIcon';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface CarouselNavigationProps {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Enable/disable peek effect on hover\n   * @default: false\n   */\n  peekEffect?: boolean;\n  /**\n   * Previous Slide IconButton\n   */\n  prevButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Previous icon props\n   */\n  prevIconProps?: SvgIconProps;\n  /**\n   * Previous icon node\n   */\n  PrevIconComponent?: ElementType<SvgIconProps>;\n  /**\n   * Next Slide IconButton\n   */\n  nextButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Previous icon props\n   */\n  nextIconProps?: SvgIconProps;\n  /**\n   * Next icon node\n   */\n  NextIconComponent?: ElementType<SvgIconProps>;\n  /**\n   * Replaces Chevrons with Arrows\n   * @default true\n   */\n  arrows?: boolean;\n  /**\n   * Enable if placing on a plain background (not on top of an image/video)\n   * @default false\n   */\n  onBackground?: boolean;\n}\n\n/**\n * Left & Right navigation arrows\n */\nexport function CarouselNavigation({\n  carousel: carouselProp,\n  peekEffect: propPeekEffect = false,\n  prevButtonProps,\n  prevIconProps,\n  PrevIconComponent,\n  nextButtonProps,\n  nextIconProps,\n  NextIconComponent,\n  arrows = true,\n  onBackground = false,\n}: CarouselNavigationProps) {\n  const carouselHook = useCarousel();\n  const carousel = carouselProp || carouselHook;\n  const peekEffect = carousel?.originalParams.effect !== 'fade' && propPeekEffect;\n  const theme = useTheme();\n  const upMD = useMediaQuery(theme.breakpoints.up('md'));\n  const { sx: prevSx, ...restPrev } = prevButtonProps || {};\n  const { sx: nextSx, ...restNext } = nextButtonProps || {};\n  const [peek, setPeek] = useCarouselPeekEffect(carousel);\n  const PrevIcon = PrevIconComponent || (arrows ? ArrowLeftIcon : ChevronLeftIcon);\n  const NextIcon = NextIconComponent || (arrows ? ArrowRightIcon : ChevronRightIcon);\n\n  // shared style between buttons\n  const sharedSx = useMemo<CSSObject>(\n    () => ({\n      // absolute inside the carousel position\n      position: 'absolute',\n      zIndex: '100',\n      top: '50%',\n      // manual v-align, half the icon size\n      mt: '-22px',\n      // highlight border\n      ...getInteractiveStyle(\n        {\n          color: 'text.primary',\n          borderColor: onBackground ? 'transparent.transparent' : 'onSurface.os600',\n          backgroundColor: onBackground ? 'transparent.transparent' : 'surface.primary',\n        },\n        {\n          backgroundColor: 'surface.secondary',\n        },\n      ),\n      // disabled state\n      '&.Mui-disabled': {\n        color: 'disabled.tertiary',\n        borderColor: 'disabled.primary',\n        backgroundColor: onBackground ? 'transparent.transparent' : 'disabled.secondary',\n      },\n    }),\n    [],\n  );\n\n  return (\n    <>\n      <IconButton\n        disabled={carousel && !carousel.originalParams.loop && carousel.isBeginning}\n        onClick={() => {\n          carousel?.slidePrev();\n          peekEffect && peek && setPeek('reset');\n        }}\n        onMouseEnter={() => upMD && peekEffect && setPeek('prev')}\n        onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n        sx={{\n          ...sharedSx,\n          left: '16px',\n          ...prevSx,\n        }}\n        aria-label=\"Previous slide\"\n        aria-controls=\"carousel\"\n        color=\"surface\"\n        {...restPrev}\n      >\n        {theme.direction === 'rtl' ? <NextIcon {...prevIconProps} /> : <PrevIcon {...prevIconProps} />}\n      </IconButton>\n      <IconButton\n        disabled={carousel && !carousel.originalParams.loop && carousel.isEnd}\n        onClick={() => {\n          carousel?.slideNext();\n          peekEffect && peek && setPeek('reset');\n        }}\n        onMouseEnter={() => upMD && peekEffect && setPeek('next')}\n        onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n        sx={{\n          ...sharedSx,\n          right: '16px',\n          ...nextSx,\n        }}\n        aria-label=\"Next slide\"\n        aria-controls=\"carousel\"\n        color=\"surface\"\n        {...restNext}\n      >\n        {theme.direction === 'rtl' ? <PrevIcon {...nextIconProps} /> : <NextIcon {...nextIconProps} />}\n      </IconButton>\n    </>\n  );\n}\n"],"names":["carousel","carouselProp","peekEffect","propPeekEffect","prevButtonProps","prevIconProps","PrevIconComponent","nextButtonProps","nextIconProps","NextIconComponent","arrows","onBackground","carouselHook","useCarousel","originalParams","effect","theme","useTheme","upMD","useMediaQuery","breakpoints","up","_a","sx","prevSx","restPrev","__rest","_b","nextSx","restNext","peek","setPeek","useCarouselPeekEffect","PrevIcon","ArrowLeftIcon","ChevronLeftIcon","NextIcon","ArrowRightIcon","ChevronRightIcon","sharedSx","useMemo","Object","assign","position","zIndex","top","mt","getInteractiveStyle","color","borderColor","backgroundColor","_jsxs","_jsx","IconButton","disabled","loop","isBeginning","onClick","slidePrev","onMouseEnter","onMouseLeave","left","children","direction","isEnd","slideNext","right"],"mappings":"2aA4DgB,UACdA,SAAUC,EACVC,WAAYC,GAAiB,EAAKC,gBAClCA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,gBACjBA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,OACjBA,GAAS,EAAIC,aACbA,GAAe,IAEf,MAAMC,EAAeC,EAAAA,cACfb,EAAWC,GAAgBW,EAC3BV,EAAiD,UAApCF,aAAA,EAAAA,EAAUc,eAAeC,SAAqBZ,EAC3Da,EAAQC,EAAAA,WACRC,EAAOC,EAAAA,cAAcH,EAAMI,YAAYC,GAAG,OAC1CC,EAA8BlB,GAAmB,IAA/CmB,GAAIC,KAAWC,EAAjBC,EAAAA,OAAAJ,EAAA,CAAA,OACAK,EAA8BpB,GAAmB,IAA/CgB,GAAIK,KAAWC,EAAjBH,EAAAA,OAAAC,EAAA,CAAA,QACCG,EAAMC,GAAWC,EAAAA,sBAAsBhC,GACxCiC,EAAW3B,IAAsBI,EAASwB,EAAAA,cAAgBC,EAAAA,iBAC1DC,EAAW3B,IAAsBC,EAAS2B,EAAAA,eAAiBC,EAAAA,kBAG3DC,EAAWC,EAAAA,SACf,IAAMC,OAAAC,OAAAD,OAAAC,OAAA,CAEJC,SAAU,WACVC,OAAQ,MACRC,IAAK,MAELC,GAAI,SAEDC,sBACD,CACEC,MAAO,eACPC,YAAatC,EAAe,0BAA4B,kBACxDuC,gBAAiBvC,EAAe,0BAA4B,mBAE9D,CACEuC,gBAAiB,uBAEpB,CAED,iBAAkB,CAChBF,MAAO,oBACPC,YAAa,mBACbC,gBAAiBvC,EAAe,0BAA4B,yBAGhE,IAGF,OACEwC,EAAAA,2BACEC,MAACC,EAAAA,0BACCC,SAAUtD,IAAaA,EAASc,eAAeyC,MAAQvD,EAASwD,YAChEC,QAAS,KACPzD,SAAAA,EAAU0D,YACVxD,GAAc4B,GAAQC,EAAQ,QAAQ,EAExC4B,aAAc,IAAMzC,GAAQhB,GAAc6B,EAAQ,QAClD6B,aAAc,IAAM1D,GAAc4B,GAAQC,EAAQ,SAClDR,GAAEkB,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACGH,GACH,CAAAsB,KAAM,SACHrC,GAEM,aAAA,iCACG,WACdwB,MAAM,WACFvB,EAAQ,CAAAqC,SAES,QAApB9C,EAAM+C,UAAsBX,EAAAA,IAAChB,EAAaK,OAAAC,OAAA,CAAA,EAAArC,IAAoB+C,EAAAA,IAACnB,mBAAa5B,OAE/E+C,EAAAA,IAACC,EAAAA,WACCZ,OAAAC,OAAA,CAAAY,SAAUtD,IAAaA,EAASc,eAAeyC,MAAQvD,EAASgE,MAChEP,QAAS,KACPzD,SAAAA,EAAUiE,YACV/D,GAAc4B,GAAQC,EAAQ,QAAQ,EAExC4B,aAAc,IAAMzC,GAAQhB,GAAc6B,EAAQ,QAClD6B,aAAc,IAAM1D,GAAc4B,GAAQC,EAAQ,SAClDR,GAAEkB,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACGH,GAAQ,CACX2B,MAAO,SACJtC,GAEM,aAAA,aACG,gBAAA,WACdoB,MAAM,WACFnB,EAEH,CAAAiC,SAAoB,QAApB9C,EAAM+C,UAAsBX,EAAAA,IAACnB,EAAQQ,OAAAC,OAAA,CAAA,EAAKlC,IAAoB4C,EAAAA,IAAChB,mBAAa5B,SAIrF"}
+{"version":3,"file":"navigation.js","sources":["../../../../../src/components/carousel/navigation.tsx"],"sourcesContent":["import React, { useMemo, ElementType } from 'react';\nimport { useCarousel, useCarouselPeekEffect } from './hooks';\nimport { useTheme, IconButton, IconButtonProps, SvgIconProps, useMediaQuery } from '@mui/material';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\nimport { ArrowLeftIcon } from '@/src/components/icon/stroke/ArrowLeftIcon';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface CarouselNavigationProps {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Enable/disable peek effect on hover\n   * @default: false\n   */\n  peekEffect?: boolean;\n  /**\n   * Previous Slide IconButton\n   */\n  prevButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Previous icon props\n   */\n  prevIconProps?: SvgIconProps;\n  /**\n   * Previous icon node\n   */\n  PrevIconComponent?: ElementType<SvgIconProps>;\n  /**\n   * Next Slide IconButton\n   */\n  nextButtonProps?: Partial<IconButtonProps>;\n  /**\n   * Previous icon props\n   */\n  nextIconProps?: SvgIconProps;\n  /**\n   * Next icon node\n   */\n  NextIconComponent?: ElementType<SvgIconProps>;\n  /**\n   * Replaces Chevrons with Arrows\n   * @default true\n   */\n  arrows?: boolean;\n  /**\n   * Enable if placing on a plain background (not on top of an image/video)\n   * @default false\n   */\n  onBackground?: boolean;\n}\n\n/**\n * Left & Right navigation arrows\n */\nexport function CarouselNavigation({\n  carousel: carouselProp,\n  peekEffect: propPeekEffect = false,\n  prevButtonProps,\n  prevIconProps,\n  PrevIconComponent,\n  nextButtonProps,\n  nextIconProps,\n  NextIconComponent,\n  arrows = true,\n  onBackground = false,\n}: CarouselNavigationProps) {\n  const carouselHook = useCarousel();\n  const carousel = carouselProp || carouselHook;\n  const peekEffect = carousel?.originalParams.effect !== 'fade' && propPeekEffect;\n  const theme = useTheme();\n  const upMD = useMediaQuery(theme.breakpoints.up('md'));\n  const { sx: prevSx, ...restPrev } = prevButtonProps || {};\n  const { sx: nextSx, ...restNext } = nextButtonProps || {};\n  const [peek, setPeek] = useCarouselPeekEffect(carousel);\n  const PrevIcon = PrevIconComponent || (arrows ? ArrowLeftIcon : ChevronLeftIcon);\n  const NextIcon = NextIconComponent || (arrows ? ArrowRightIcon : ChevronRightIcon);\n\n  // shared style between buttons\n  const sharedSx = useMemo(\n    () => ({\n      // absolute inside the carousel position\n      position: 'absolute',\n      zIndex: '100',\n      top: '50%',\n      // manual v-align, half the icon size\n      mt: '-22px',\n      // responsive\n      width: { xs: '32px', md: '40px', xl: '44px' },\n      height: { xs: '32px', md: '40px', xl: '44px' },\n      '& .MuiSvgIcon-root': {\n        fontSize: { xs: '17px', xl: '20px' },\n      },\n      // highlight border\n      ...getInteractiveStyle(\n        {\n          color: 'text.primary',\n          borderColor: onBackground ? 'transparent.transparent' : 'onSurface.os100',\n          backgroundColor: onBackground ? 'transparent.transparent' : 'surface.primary',\n        },\n        {\n          backgroundColor: 'surface.secondary',\n        },\n      ),\n      // disabled state\n      '&.Mui-disabled': {\n        color: 'disabled.tertiary',\n        borderColor: onBackground ? 'transparent.transparent' : 'disabled.secondary',\n        backgroundColor: onBackground ? 'transparent.transparent' : 'disabled.secondary',\n      },\n    }),\n    [],\n  );\n\n  return (\n    <>\n      <IconButton\n        disabled={carousel && !carousel.originalParams.loop && carousel.isBeginning}\n        onClick={() => {\n          carousel?.slidePrev();\n          peekEffect && peek && setPeek('reset');\n        }}\n        onMouseEnter={() => upMD && peekEffect && setPeek('prev')}\n        onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n        sx={{\n          ...sharedSx,\n          left: '16px',\n          ...prevSx,\n        }}\n        aria-label=\"Previous slide\"\n        aria-controls=\"carousel\"\n        color=\"surface\"\n        size=\"medium\"\n        {...restPrev}\n      >\n        {theme.direction === 'rtl' ? <NextIcon {...prevIconProps} /> : <PrevIcon {...prevIconProps} />}\n      </IconButton>\n      <IconButton\n        disabled={carousel && !carousel.originalParams.loop && carousel.isEnd}\n        onClick={() => {\n          carousel?.slideNext();\n          peekEffect && peek && setPeek('reset');\n        }}\n        onMouseEnter={() => upMD && peekEffect && setPeek('next')}\n        onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n        sx={{\n          ...sharedSx,\n          right: '16px',\n          ...nextSx,\n        }}\n        aria-label=\"Next slide\"\n        aria-controls=\"carousel\"\n        color=\"surface\"\n        {...restNext}\n      >\n        {theme.direction === 'rtl' ? <PrevIcon {...nextIconProps} /> : <NextIcon {...nextIconProps} />}\n      </IconButton>\n    </>\n  );\n}\n"],"names":["carousel","carouselProp","peekEffect","propPeekEffect","prevButtonProps","prevIconProps","PrevIconComponent","nextButtonProps","nextIconProps","NextIconComponent","arrows","onBackground","carouselHook","useCarousel","originalParams","effect","theme","useTheme","upMD","useMediaQuery","breakpoints","up","_a","sx","prevSx","restPrev","__rest","_b","nextSx","restNext","peek","setPeek","useCarouselPeekEffect","PrevIcon","ArrowLeftIcon","ChevronLeftIcon","NextIcon","ArrowRightIcon","ChevronRightIcon","sharedSx","useMemo","Object","assign","position","zIndex","top","mt","width","xs","md","xl","height","fontSize","getInteractiveStyle","color","borderColor","backgroundColor","_jsxs","_jsx","IconButton","disabled","loop","isBeginning","onClick","slidePrev","onMouseEnter","onMouseLeave","left","size","children","direction","jsx","isEnd","slideNext","right"],"mappings":"kZA2DgB,UACdA,SAAUC,EACVC,WAAYC,GAAiB,EAAKC,gBAClCA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,gBACjBA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,OACjBA,GAAS,EAAIC,aACbA,GAAe,IAEf,MAAMC,EAAeC,EAAAA,cACfb,EAAWC,GAAgBW,EAC3BV,EAAiD,UAApCF,aAAA,EAAAA,EAAUc,eAAeC,SAAqBZ,EAC3Da,EAAQC,EAAAA,WACRC,EAAOC,EAAAA,cAAcH,EAAMI,YAAYC,GAAG,OAC1CC,EAA8BlB,GAAmB,IAA/CmB,GAAIC,KAAWC,EAAjBC,EAAAA,OAAAJ,EAAA,CAAA,OACAK,EAA8BpB,GAAmB,IAA/CgB,GAAIK,KAAWC,EAAjBH,EAAAA,OAAAC,EAAA,CAAA,QACCG,EAAMC,GAAWC,EAAAA,sBAAsBhC,GACxCiC,EAAW3B,IAAsBI,EAASwB,EAAAA,cAAgBC,EAAAA,iBAC1DC,EAAW3B,IAAsBC,EAAS2B,EAAAA,eAAiBC,EAAAA,kBAG3DC,EAAWC,EAAAA,SACf,IAAMC,OAAAC,OAAAD,OAAAC,OAAA,CAEJC,SAAU,WACVC,OAAQ,MACRC,IAAK,MAELC,GAAI,QAEJC,MAAO,CAAEC,GAAI,OAAQC,GAAI,OAAQC,GAAI,QACrCC,OAAQ,CAAEH,GAAI,OAAQC,GAAI,OAAQC,GAAI,QACtC,qBAAsB,CACpBE,SAAU,CAAEJ,GAAI,OAAQE,GAAI,UAG3BG,EAAAA,oBACD,CACEC,MAAO,eACPC,YAAa5C,EAAe,0BAA4B,kBACxD6C,gBAAiB7C,EAAe,0BAA4B,mBAE9D,CACE6C,gBAAiB,uBAEpB,CAED,iBAAkB,CAChBF,MAAO,oBACPC,YAAa5C,EAAe,0BAA4B,qBACxD6C,gBAAiB7C,EAAe,0BAA4B,yBAGhE,IAGF,OACE8C,EAAAA,2BACEC,MAACC,EAAAA,0BACCC,SAAU5D,IAAaA,EAASc,eAAe+C,MAAQ7D,EAAS8D,YAChEC,QAAS,KACP/D,SAAAA,EAAUgE,YACV9D,GAAc4B,GAAQC,EAAQ,QAAQ,EAExCkC,aAAc,IAAM/C,GAAQhB,GAAc6B,EAAQ,QAClDmC,aAAc,IAAMhE,GAAc4B,GAAQC,EAAQ,SAClDR,GACKkB,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GAAAH,IACH4B,KAAM,SACH3C,gBAEM,iBAAgB,gBACb,WACd8B,MAAM,UACNc,KAAK,UACD3C,EAEH,CAAA4C,SAAoB,QAApBrD,EAAMsD,UAAsBZ,EAACa,IAAAnC,mBAAa/B,IAAoBqD,EAACa,IAAAtC,EAAaQ,OAAAC,OAAA,CAAA,EAAArC,OAE/EqD,EAAAA,IAACC,EAAAA,WAAUlB,OAAAC,OAAA,CACTkB,SAAU5D,IAAaA,EAASc,eAAe+C,MAAQ7D,EAASwE,MAChET,QAAS,KACP/D,SAAAA,EAAUyE,YACVvE,GAAc4B,GAAQC,EAAQ,QAAQ,EAExCkC,aAAc,IAAM/C,GAAQhB,GAAc6B,EAAQ,QAClDmC,aAAc,IAAMhE,GAAc4B,GAAQC,EAAQ,SAClDR,GAAEkB,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACGH,GAAQ,CACXmC,MAAO,SACJ9C,GAEM,aAAA,aACG,gBAAA,WACd0B,MAAM,WACFzB,EAEH,CAAAwC,SAAoB,QAApBrD,EAAMsD,UAAsBZ,EAAAA,IAACzB,EAAQQ,OAAAC,OAAA,CAAA,EAAKlC,IAAoBkD,EAAAA,IAACtB,mBAAa5B,SAIrF"}

package/cjs/components/carousel/pagination.d.ts

@@ -9,10 +9,14 @@ export interface CarouselPaginationVariantProps extends Omit<BoxProps<ElementTyp
 }
 export interface CarouselPaginationDotsProps extends CarouselPaginationVariantProps {
     variant?: 'dots';
+    /**
+     * Properties applied to wrapper of dots
+     */
+    dotsWrapperProps?: BoxProps<ElementType>;
     /**
      * Properties applied to each dot
      */
-    dotProps?: Partial<BoxProps<ElementType>>;
+    dotProps?: BoxProps<ElementType>;
 }
 export interface CarouselPaginationFractionProps extends CarouselPaginationVariantProps {
     variant?: 'fraction';

package/cjs/components/carousel/pagination.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),s=require("react"),o=require("@mui/material"),i=require("./hooks.js"),n=require("../../materialui/button/interactive.js"),t=require("../../materialui/slider/sliderContainer.js");const a=s.forwardRef(((o,n)=>{var{carousel:t,position:a,variant:p,sx:g}=o,f=e.__rest(o,["carousel","position","variant","sx"]);const h=i.useCarousel(),v=t||h,b=s.useMemo((()=>{switch(p){case"scrollbar":return x;case"slider":case"progress":return d;case"fraction":return c;case"lines":return u;default:return l}}),[p]),m=s.useMemo((()=>"inside"===a?Object.assign({position:"absolute",zIndex:"90",bottom:"0",left:"0",right:"0"},g):g),[a,JSON.stringify(g)]);return r.jsx(b,Object.assign({carousel:v,sx:m,ref:n},f))})),l=s.forwardRef(((s,i)=>{var{carousel:n,dotProps:t,sx:a}=s,l=e.__rest(s,["carousel","dotProps","sx"]);const c=t||{},{sx:u}=c,d=e.__rest(c,["sx"]);return r.jsx(o.Box,Object.assign({sx:Object.assign({px:2,height:"40px",display:"flex",alignItems:"center",justifyContent:"center",gap:1,pointerEvents:"none"},a),ref:i},l,{children:[...Array((null==n?void 0:n.slides.length)||0)].map(((e,s)=>r.jsx(o.Box,Object.assign({className:!(null==n?void 0:n.originalParams.loop)&&(null==n?void 0:n.isEnd)&&s===((null==n?void 0:n.slides.length)||0)-1?"active":(null==n?void 0:n.isEnd)&&!n.originalParams.loop||s!==(null==n?void 0:n.realIndex)?void 0:"active",sx:Object.assign({p:"0",width:"8px",height:"8px",borderRadius:"100%",backgroundColor:"onSurface.os500",transition:"all 0.3s ease-out","&.active":{width:"12px",height:"12px",backgroundColor:"text.primary"}},u)},d),s)))}))})),c=s.forwardRef(((s,i)=>{var{carousel:t,buttonProps:a,sx:l}=s,c=e.__rest(s,["carousel","buttonProps","sx"]);const u=a||{},{sx:d}=u,x=e.__rest(u,["sx"]);return r.jsx(o.Box,Object.assign({sx:Object.assign({display:"flex",alignItems:"center",justifyContent:"center",p:2},l),ref:i},c,{children:r.jsx(o.Button,Object.assign({variant:"text","aria-controls":"carousel",sx:Object.assign(Object.assign({px:2,py:.25,borderRadius:"4px",fontSize:"18px",lineHeight:"28px",letterSpacing:"0.02em"},n.getInteractiveStyle({backgroundColor:"transparent.backdrop"},{backgroundColor:"onSurface.os100"})),d),onClick:()=>(null==t?void 0:t.isEnd)&&!t.originalParams.loop?null==t?void 0:t.slideTo(0):null==t?void 0:t.slideNext()},x,{children:r.jsxs(o.Box,{component:"span",children:[r.jsx(o.Box,{component:"span",sx:{fontWeight:"700",color:"onSurface.os900"},children:`${((null==t?void 0:t.realIndex)||0)+1}`}),r.jsx(o.Box,{component:"span",sx:{color:"onSurface.os700",fontWeight:"400",mx:.5},children:" / "}),r.jsx(o.Box,{component:"span",sx:{color:"onSurface.os700",fontWeight:"300"},children:`${(null==t?void 0:t.slides.length)||0}`})]})}))}))})),u=s.forwardRef(((s,i)=>{var{carousel:t,sx:a,linesProps:l,lineProgress:c,lineProgressProps:u}=s,d=e.__rest(s,["carousel","sx","linesProps","lineProgress","lineProgressProps"]);const x=l||{},{sx:p}=x,g=e.__rest(x,["sx"]),f=u||{},{sx:h}=f,v=e.__rest(f,["sx"]);return r.jsx(o.Box,Object.assign({sx:Object.assign({display:"flex",alignItems:"center",justifyContent:{xs:"stretch",md:"center"},flexGrow:{xs:"1",md:0},gap:1,p:2},a),ref:i},d,{children:[...Array((null==t?void 0:t.slides.length)||0)].map(((e,s)=>{const i=!(null==t?void 0:t.originalParams.loop)&&(null==t?void 0:t.isEnd)&&s===((null==t?void 0:t.slides.length)||0)-1||(!(null==t?void 0:t.isEnd)||t.originalParams.loop)&&s===(null==t?void 0:t.realIndex),a=s<=((null==t?void 0:t.realIndex)||0);return r.jsxs(o.Button,Object.assign({color:"inherit",className:i?"active":void 0,sx:Object.assign(Object.assign({p:0,minHeight:"0",height:i||a?"8px":"4px",borderRadius:i||a?"4px":"2px",width:{xs:"100%",md:"56px"},justifyContent:"flex-start"},n.getInteractiveStyle({backgroundColor:"surface.primary","& .progress-line":{backgroundColor:"brand.secondary"}},{backgroundColor:"surface.secondary","& .progress-line":{backgroundColor:"brandHover.secondary"}})),p),"aria-controls":"carousel",onClick:()=>null==t?void 0:t[t.originalParams.loop?"slideToLoop":"slideTo"](s)},g,{children:[r.jsx(o.Box,{sx:{position:"absolute",top:"50%",left:"0",right:"0",height:"24px",transform:"translateY(-50%)",pointerEvents:"auto"}}),r.jsx(o.Box,{sx:{borderRadius:"4px",height:"100%",width:"100%",overflow:"hidden"},children:r.jsx(o.Box,Object.assign({className:"progress-line",role:i?"progress":void 0,"aria-valuenow":i?c:void 0,"aria-valuemin":0,"aria-valuemax":100,sx:Object.assign({opacity:void 0!==c||a?"1":"0",width:"100%",backgroundColor:"brand.secondary",height:"100%",transformOrigin:"left",transform:`scaleX(${void 0!==c&&i?c/100:a?1:0})`,transition:(void 0!==c?"transform 300ms ease-in-out, ":"")+"opacity 300ms ease-out, background-color 300ms ease-out"},h)},v))})]}),s)}))}))})),d=s.forwardRef(((i,n)=>{var t,{carousel:a,sliderProps:l,sx:c,progressProps:u}=i,d=e.__rest(i,["carousel","sliderProps","sx","progressProps"]);const x=l||{},{sx:p}=x,g=e.__rest(x,["sx"]),[f,h]=s.useState(Math.round(100*((null==a?void 0:a.progress)||0))),v=s.useRef(!1),[,b]=s.useState({});return s.useEffect((()=>{v.current||h(Math.round(100*((null==a?void 0:a.progress)||0)))}),[null==a?void 0:a.progress]),s.useEffect((()=>{if(a){const e=()=>{v.current||b({})};return a.on("sliderMove",e),()=>{a.off("sliderMove",e)}}}),[a]),r.jsx(o.Box,Object.assign({sx:Object.assign({my:2},c),ref:n},d,{children:r.jsx(o.Slider,Object.assign({value:f,min:0,max:100,onChange:(e,r)=>{v.current=!0,null==a||a.setProgress(r/100,150),h(r)},onChangeCommitted:()=>{null==a||a.slideToClosest(300),v.current=!1},sx:Object.assign({display:"block",height:"4px",".MuiSlider-rail":{color:"surface.primary"},".MuiSlider-track":{color:"onSurface.os500",transitionDuration:`${null!==(t=null==a?void 0:a.originalParams.speed)&&void 0!==t?t:300}ms`},".MuiSlider-thumb":{display:"none"}},p),"aria-controls":"carousel"},g))}))})),x=s.forwardRef(((o,i)=>{var n,a,{carousel:l,sliderProps:c}=o,u=e.__rest(o,["carousel","sliderProps"]);const x=c||{},{sx:p}=x,g=e.__rest(x,["sx"]),[f,h]=s.useState(!1),[,v]=s.useState({});s.useEffect((()=>{if(l){const e=()=>h(!0),r=()=>h(!1),s=()=>v({});return l.on("touchStart",e),l.on("touchEnd",r),l.on("resize",s),()=>{l.off("touchStart",e),l.off("touchEnd",r),l.off("resize",s)}}}),[l]);const b=s.useMemo((()=>{var e,r;if((null===(e=null==l?void 0:l.wrapperEl)||void 0===e?void 0:e.scrollWidth)&&(null==l?void 0:l.width)){const e=Math.ceil((null==l?void 0:l.width)**2/(null===(r=null==l?void 0:l.wrapperEl)||void 0===r?void 0:r.scrollWidth));return Math.max(e,40)}return 40}),[null===(n=null==l?void 0:l.wrapperEl)||void 0===n?void 0:n.scrollWidth,null==l?void 0:l.width]);return r.jsx(d,Object.assign({ref:i,carousel:l,component:t.SliderContainer,thumbSize:b,sliderProps:Object.assign({tabIndex:-1,valueLabelDisplay:"off",sx:Object.assign({display:"block",height:"4px",".MuiSlider-rail, .MuiSlider-track":{color:"surface.primary"},".MuiSlider-thumb":Object.assign(Object.assign({display:"flex",width:`${b}px`,height:"4px",border:"none",backgroundColor:"onSurface.os500"},!f&&{transition:`left ${null!==(a=null==l?void 0:l.originalParams.speed)&&void 0!==a?a:300}ms ease-out`}),{"&.Mui-focusVisible":{boxShadow:"none","&:before":{content:"none"}}})},p)},g)},u))}));exports.CarouselPagination=a,exports.DotsVariant=l,exports.FractionVariant=c,exports.LinesVariant=u,exports.ScrollbarVariant=x,exports.SliderVariant=d;
+"use strict";var s=require("tslib"),e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material"),i=require("./hooks.js"),n=require("../../materialui/button/interactive.js"),t=require("../../materialui/slider/sliderContainer.js");const a=r.forwardRef(((o,n)=>{var{carousel:t,position:a,variant:x,sx:g}=o,f=s.__rest(o,["carousel","position","variant","sx"]);const v=i.useCarousel(),b=t||v,h=r.useMemo((()=>{switch(x){case"scrollbar":return p;case"slider":case"progress":return c;case"fraction":return u;case"lines":return d;default:return l}}),[x]),m=r.useMemo((()=>"inside"===a?Object.assign({position:"absolute",zIndex:"90",bottom:"0",left:"0",right:"0"},g):g),[a,JSON.stringify(g)]);return e.jsx(h,Object.assign({carousel:b,sx:m,ref:n,position:a},f))})),l=r.forwardRef(((r,i)=>{var{carousel:n,dotsWrapperProps:t,dotProps:a,position:l,sx:u}=r,d=s.__rest(r,["carousel","dotsWrapperProps","dotProps","position","sx"]);const c=null!=t?t:{},{sx:p}=c,x=s.__rest(c,["sx"]),g=null!=a?a:{},{sx:f}=g,v=s.__rest(g,["sx"]);return e.jsx(o.Box,Object.assign({sx:Object.assign({p:2,display:"flex",alignItems:"center",justifyContent:"center"},u),ref:i},d,{children:e.jsx(o.Box,Object.assign({sx:Object.assign(Object.assign({display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"1000px",py:.5,px:1,gap:.5,width:12*((null==n?void 0:n.slides.length)||0)+4*(((null==n?void 0:n.slides.length)||1)-1)+4+16+"px"},"inside"===l&&{backgroundColor:s=>"dark"===s.palette.mode?"surface.primary":"transparent.backdrop"}),p)},x,{children:[...Array((null==n?void 0:n.slides.length)||0)].map(((s,r)=>e.jsx(o.Box,Object.assign({className:!(null==n?void 0:n.originalParams.loop)&&(null==n?void 0:n.isEnd)&&r===((null==n?void 0:n.slides.length)||0)-1?"active":(null==n?void 0:n.isEnd)&&!n.originalParams.loop||r!==(null==n?void 0:n.realIndex)?void 0:"active",sx:Object.assign({p:"0",width:"12px",height:"12px",transform:"scale(0.6667)",borderRadius:"100%",backgroundColor:"onSurface.os500",transition:"transform 0.3s ease-out, background-color 0.3s ease-out, margin 0.3s ease-out","&.active":{transform:"scale(1)",backgroundColor:"text.primary",margin:"0 2px"}},f)},v),r)))}))}))})),u=r.forwardRef(((r,i)=>{var{carousel:t,buttonProps:a,position:l,sx:u}=r,d=s.__rest(r,["carousel","buttonProps","position","sx"]);const c=null!=a?a:{},{sx:p}=c,x=s.__rest(c,["sx"]);return e.jsx(o.Box,Object.assign({sx:Object.assign({display:"flex",alignItems:"center",justifyContent:"center",p:2},u),ref:i},d,{children:e.jsx(o.Button,Object.assign({variant:"text","aria-controls":"carousel",sx:Object.assign(Object.assign({px:2,py:.25,borderRadius:"4px",fontSize:"18px",lineHeight:"28px",letterSpacing:"0.02em"},n.getInteractiveStyle({backgroundColor:"transparent.backdrop"},{backgroundColor:"onSurface.os100"})),p),onClick:()=>(null==t?void 0:t.isEnd)&&!t.originalParams.loop?null==t?void 0:t.slideTo(0):null==t?void 0:t.slideNext()},x,{children:e.jsxs(o.Box,{component:"span",children:[e.jsx(o.Box,{component:"span",sx:{fontWeight:"700",color:"onSurface.os900"},children:`${((null==t?void 0:t.realIndex)||0)+1}`}),e.jsx(o.Box,{component:"span",sx:{color:"onSurface.os700",fontWeight:"400",mx:.5},children:" / "}),e.jsx(o.Box,{component:"span",sx:{color:"onSurface.os700",fontWeight:"300"},children:`${(null==t?void 0:t.slides.length)||0}`})]})}))}))})),d=r.forwardRef(((r,i)=>{var{carousel:t,sx:a,linesProps:l,lineProgress:u,lineProgressProps:d,position:c}=r,p=s.__rest(r,["carousel","sx","linesProps","lineProgress","lineProgressProps","position"]);const x=null!=l?l:{},{sx:g}=x,f=s.__rest(x,["sx"]),v=null!=d?d:{},{sx:b}=v,h=s.__rest(v,["sx"]);return e.jsx(o.Box,Object.assign({sx:Object.assign({display:"flex",alignItems:"center",justifyContent:{xs:"stretch",md:"center"},flexGrow:{xs:"1",md:0},gap:1,p:2},a),ref:i},p,{children:[...Array((null==t?void 0:t.slides.length)||0)].map(((s,r)=>{const i=!(null==t?void 0:t.originalParams.loop)&&(null==t?void 0:t.isEnd)&&r===((null==t?void 0:t.slides.length)||0)-1||(!(null==t?void 0:t.isEnd)||t.originalParams.loop)&&r===(null==t?void 0:t.realIndex),a=r<=((null==t?void 0:t.realIndex)||0);return e.jsxs(o.Button,Object.assign({color:"inherit",className:i?"active":void 0,sx:Object.assign(Object.assign({p:0,minHeight:"0",height:i||a?"8px":"4px",borderRadius:i||a?"4px":"2px",width:{xs:"100%",md:"56px"},justifyContent:"flex-start"},n.getInteractiveStyle({backgroundColor:"surface.primary","& .progress-line":{backgroundColor:"brand.secondary"}},{backgroundColor:"surface.secondary","& .progress-line":{backgroundColor:"brandHover.secondary"}})),g),"aria-controls":"carousel",onClick:()=>null==t?void 0:t[t.originalParams.loop?"slideToLoop":"slideTo"](r)},f,{children:[e.jsx(o.Box,{sx:{position:"absolute",top:"50%",left:"0",right:"0",height:"24px",transform:"translateY(-50%)",pointerEvents:"auto"}}),e.jsx(o.Box,{sx:{borderRadius:"4px",height:"100%",width:"100%",overflow:"hidden"},children:e.jsx(o.Box,Object.assign({className:"progress-line",role:i?"progress":void 0,"aria-valuenow":i?u:void 0,"aria-valuemin":0,"aria-valuemax":100,sx:Object.assign({opacity:void 0!==u||a?"1":"0",width:"100%",backgroundColor:"brand.secondary",height:"100%",transformOrigin:"left",transform:`scaleX(${void 0!==u&&i?u/100:a?1:0})`,transition:(void 0!==u?"transform 300ms ease-in-out, ":"")+"opacity 300ms ease-out, background-color 300ms ease-out"},b)},h))})]}),r)}))}))})),c=r.forwardRef(((i,n)=>{var t,{carousel:a,sliderProps:l,sx:u,progressProps:d,position:c}=i,p=s.__rest(i,["carousel","sliderProps","sx","progressProps","position"]);const x=null!=l?l:{},{sx:g}=x,f=s.__rest(x,["sx"]),[v,b]=r.useState(Math.round(100*((null==a?void 0:a.progress)||0))),h=r.useRef(!1),[,m]=r.useState({});return r.useEffect((()=>{h.current||b(Math.round(100*((null==a?void 0:a.progress)||0)))}),[null==a?void 0:a.progress]),r.useEffect((()=>{if(a){const s=()=>{h.current||m({})};return a.on("sliderMove",s),()=>{a.off("sliderMove",s)}}}),[a]),e.jsx(o.Box,Object.assign({sx:Object.assign({my:2},u),ref:n},p,{children:e.jsx(o.Slider,Object.assign({value:v,min:0,max:100,onChange:(s,e)=>{h.current=!0,null==a||a.setProgress(e/100,150),b(e)},onChangeCommitted:()=>{null==a||a.slideToClosest(300),h.current=!1},sx:Object.assign({display:"block",height:"4px",".MuiSlider-rail":{color:"surface.primary"},".MuiSlider-track":{color:"onSurface.os500",transitionDuration:`${null!==(t=null==a?void 0:a.originalParams.speed)&&void 0!==t?t:300}ms`},".MuiSlider-thumb":{display:"none"}},g),"aria-controls":"carousel"},f))}))})),p=r.forwardRef(((o,i)=>{var n,a,{carousel:l,sliderProps:u,position:d}=o,p=s.__rest(o,["carousel","sliderProps","position"]);const x=null!=u?u:{},{sx:g}=x,f=s.__rest(x,["sx"]),[v,b]=r.useState(!1),[,h]=r.useState({});r.useEffect((()=>{if(l){const s=()=>b(!0),e=()=>b(!1),r=()=>h({});return l.on("touchStart",s),l.on("touchEnd",e),l.on("resize",r),()=>{l.off("touchStart",s),l.off("touchEnd",e),l.off("resize",r)}}}),[l]);const m=r.useMemo((()=>{var s,e;if((null===(s=null==l?void 0:l.wrapperEl)||void 0===s?void 0:s.scrollWidth)&&(null==l?void 0:l.width)){const s=Math.ceil((null==l?void 0:l.width)**2/(null===(e=null==l?void 0:l.wrapperEl)||void 0===e?void 0:e.scrollWidth));return Math.max(s,40)}return 40}),[null===(n=null==l?void 0:l.wrapperEl)||void 0===n?void 0:n.scrollWidth,null==l?void 0:l.width]);return e.jsx(c,Object.assign({ref:i,carousel:l,component:t.SliderContainer,thumbSize:m,sliderProps:Object.assign({tabIndex:-1,valueLabelDisplay:"off",sx:Object.assign({display:"block",height:"4px",".MuiSlider-rail, .MuiSlider-track":{color:"surface.primary"},".MuiSlider-thumb":Object.assign(Object.assign({display:"flex",width:`${m}px`,height:"4px",border:"none",backgroundColor:"onSurface.os500"},!v&&{transition:`left ${null!==(a=null==l?void 0:l.originalParams.speed)&&void 0!==a?a:300}ms ease-out`}),{"&.Mui-focusVisible":{boxShadow:"none","&:before":{content:"none"}}})},g)},f)},p))}));exports.CarouselPagination=a,exports.DotsVariant=l,exports.FractionVariant=u,exports.LinesVariant=d,exports.ScrollbarVariant=p,exports.SliderVariant=c;
 //# sourceMappingURL=pagination.js.map