@skodaflow/web-library 7.15.0 → 7.16.0

package/cjs/components/cardMenu/hooks/useCardMenu.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react");exports.useCardMenu=(a,s,c,t,l)=>{const[i,n]=e.useState(!1),d=e.useCallback(((e,a)=>{c((e=>e.map((e=>e.disabled?e:Object.assign(Object.assign({},e),{isChecked:a})))))}),[c]),r=e.useCallback((e=>{c((a=>a.map((a=>a.text===e?Object.assign(Object.assign({},a),{isChecked:!a.isChecked}):a))))}),[c]),b=e.useCallback((e=>{e.url&&window.open(e.url,e.target||"_blank"),t&&t(e.text),e.callback&&e.callback(),s?r(e.text):l()}),[s,l,t,r]);return e.useEffect((()=>{const e=!a.find((e=>!e.isChecked&&!e.disabled));n(e)}),[a]),{onClickHandler:b,onToggleChange:d,isToggleChecked:i}};
+"use strict";var e=require("react");exports.useCardMenu=(a,s,c,t,l)=>{const[i,n]=e.useState(!1),d=e.useCallback((e,a)=>{c(e=>e.map(e=>e.disabled?e:Object.assign(Object.assign({},e),{isChecked:a})))},[c]),r=e.useCallback(e=>{c(a=>a.map(a=>a.text===e?Object.assign(Object.assign({},a),{isChecked:!a.isChecked}):a))},[c]),b=e.useCallback(e=>{e.url&&window.open(e.url,e.target||"_blank"),t&&t(e.text),e.callback&&e.callback(),s?r(e.text):l()},[s,l,t,r]);return e.useEffect(()=>{const e=!a.find(e=>!e.isChecked&&!e.disabled);n(e)},[a]),{onClickHandler:b,onToggleChange:d,isToggleChecked:i}};
 //# sourceMappingURL=useCardMenu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCardMenu.js","sources":["../../../../../../src/components/cardMenu/hooks/useCardMenu.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { CardMenuItem, CardMenuItemsArray } from '../cardMenu';\n\nexport const useCardMenu = (\n  items: CardMenuItemsArray,\n  allowMultiselect: boolean,\n  setItems: React.Dispatch<React.SetStateAction<CardMenuItemsArray>>,\n  onItemClick: (itemText: string) => void,\n  onClose: () => void,\n) => {\n  const [isToggleChecked, setIsToggleChecked] = useState(false);\n\n  const onToggleChange = useCallback(\n    (_: React.ChangeEvent<HTMLInputElement>, checkedState: boolean) => {\n      setItems((curr) =>\n        curr.map((item) => {\n          if (item.disabled) return item;\n          return { ...item, isChecked: checkedState };\n        }),\n      );\n    },\n    [setItems],\n  );\n\n  const updateItems = useCallback(\n    (textItem: string) => {\n      setItems((curr) =>\n        curr.map((item) => {\n          if (item.text === textItem) {\n            return { ...item, isChecked: !item.isChecked };\n          }\n\n          return item;\n        }),\n      );\n    },\n    [setItems],\n  );\n\n  const onClickHandler = useCallback(\n    (item: CardMenuItem) => {\n      if (item.url) {\n        window.open(item.url, item.target || '_blank');\n      }\n\n      if (onItemClick) onItemClick(item.text);\n      if (item.callback) item.callback();\n      if (!allowMultiselect) onClose();\n      else updateItems(item.text);\n    },\n    [allowMultiselect, onClose, onItemClick, updateItems],\n  );\n\n  useEffect(() => {\n    const areAllChecked = !items.find((item) => !item.isChecked && !item.disabled);\n\n    setIsToggleChecked(areAllChecked);\n  }, [items]);\n\n  return {\n    onClickHandler,\n    onToggleChange,\n    isToggleChecked,\n  };\n};\n"],"names":["items","allowMultiselect","setItems","onItemClick","onClose","isToggleChecked","setIsToggleChecked","useState","onToggleChange","useCallback","_","checkedState","curr","map","item","disabled","Object","assign","isChecked","updateItems","textItem","text","onClickHandler","url","window","open","target","callback","useEffect","areAllChecked","find"],"mappings":"wDAG2B,CACzBA,EACAC,EACAC,EACAC,EACAC,KAEA,MAAOC,EAAiBC,GAAsBC,EAAAA,UAAS,GAEjDC,EAAiBC,EAAAA,aACrB,CAACC,EAAwCC,KACvCT,GAAUU,GACRA,EAAKC,KAAKC,GACJA,EAAKC,SAAiBD,EAC1BE,OAAAC,OAAAD,OAAAC,OAAA,GAAYH,GAAI,CAAEI,UAAWP,OAEhC,GAEH,CAACT,IAGGiB,EAAcV,eACjBW,IACClB,GAAUU,GACRA,EAAKC,KAAKC,GACJA,EAAKO,OAASD,EACJJ,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAH,IAAMI,WAAYJ,EAAKI,YAG9BJ,KAEV,GAEH,CAACZ,IAGGoB,EAAiBb,eACpBK,IACKA,EAAKS,KACPC,OAAOC,KAAKX,EAAKS,IAAKT,EAAKY,QAAU,UAGnCvB,GAAaA,EAAYW,EAAKO,MAC9BP,EAAKa,UAAUb,EAAKa,WACnB1B,EACAkB,EAAYL,EAAKO,MADCjB,GACI,GAE7B,CAACH,EAAkBG,EAASD,EAAagB,IAS3C,OANAS,EAAAA,WAAU,KACR,MAAMC,GAAiB7B,EAAM8B,MAAMhB,IAAUA,EAAKI,YAAcJ,EAAKC,WAErET,EAAmBuB,EAAc,GAChC,CAAC7B,IAEG,CACLsB,iBACAd,iBACAH,kBACD"}
+{"version":3,"file":"useCardMenu.js","sources":["../../../../../../src/components/cardMenu/hooks/useCardMenu.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { CardMenuItem, CardMenuItemsArray } from '../cardMenu';\n\nexport const useCardMenu = (\n  items: CardMenuItemsArray,\n  allowMultiselect: boolean,\n  setItems: React.Dispatch<React.SetStateAction<CardMenuItemsArray>>,\n  onItemClick: (itemText: string) => void,\n  onClose: () => void,\n) => {\n  const [isToggleChecked, setIsToggleChecked] = useState(false);\n\n  const onToggleChange = useCallback(\n    (_: React.ChangeEvent<HTMLInputElement>, checkedState: boolean) => {\n      setItems((curr) =>\n        curr.map((item) => {\n          if (item.disabled) return item;\n          return { ...item, isChecked: checkedState };\n        }),\n      );\n    },\n    [setItems],\n  );\n\n  const updateItems = useCallback(\n    (textItem: string) => {\n      setItems((curr) =>\n        curr.map((item) => {\n          if (item.text === textItem) {\n            return { ...item, isChecked: !item.isChecked };\n          }\n\n          return item;\n        }),\n      );\n    },\n    [setItems],\n  );\n\n  const onClickHandler = useCallback(\n    (item: CardMenuItem) => {\n      if (item.url) {\n        window.open(item.url, item.target || '_blank');\n      }\n\n      if (onItemClick) onItemClick(item.text);\n      if (item.callback) item.callback();\n      if (!allowMultiselect) onClose();\n      else updateItems(item.text);\n    },\n    [allowMultiselect, onClose, onItemClick, updateItems],\n  );\n\n  useEffect(() => {\n    const areAllChecked = !items.find((item) => !item.isChecked && !item.disabled);\n\n    setIsToggleChecked(areAllChecked);\n  }, [items]);\n\n  return {\n    onClickHandler,\n    onToggleChange,\n    isToggleChecked,\n  };\n};\n"],"names":["items","allowMultiselect","setItems","onItemClick","onClose","isToggleChecked","setIsToggleChecked","useState","onToggleChange","useCallback","_","checkedState","curr","map","item","disabled","Object","assign","isChecked","updateItems","textItem","text","onClickHandler","url","window","open","target","callback","useEffect","areAllChecked","find"],"mappings":"wDAG2B,CACzBA,EACAC,EACAC,EACAC,EACAC,KAEA,MAAOC,EAAiBC,GAAsBC,EAAAA,UAAS,GAEjDC,EAAiBC,EAAAA,YACrB,CAACC,EAAwCC,KACvCT,EAAUU,GACRA,EAAKC,IAAKC,GACJA,EAAKC,SAAiBD,EAC1BE,OAAAC,OAAAD,OAAAC,OAAA,GAAYH,GAAI,CAAEI,UAAWP,OAInC,CAACT,IAGGiB,EAAcV,cACjBW,IACClB,EAAUU,GACRA,EAAKC,IAAKC,GACJA,EAAKO,OAASD,EAChBJ,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAYH,IAAMI,WAAYJ,EAAKI,YAG9BJ,KAIb,CAACZ,IAGGoB,EAAiBb,cACpBK,IACKA,EAAKS,KACPC,OAAOC,KAAKX,EAAKS,IAAKT,EAAKY,QAAU,UAGnCvB,GAAaA,EAAYW,EAAKO,MAC9BP,EAAKa,UAAUb,EAAKa,WACnB1B,EACAkB,EAAYL,EAAKO,MADCjB,KAGzB,CAACH,EAAkBG,EAASD,EAAagB,IAS3C,OANAS,EAAAA,UAAU,KACR,MAAMC,GAAiB7B,EAAM8B,KAAMhB,IAAUA,EAAKI,YAAcJ,EAAKC,UAErET,EAAmBuB,IAClB,CAAC7B,IAEG,CACLsB,iBACAd,iBACAH"}

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

@@ -1,2 +1,2 @@
-"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;
+"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/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"}
+{"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":"8EAGO,MAAMA,EAAeC,EAAAA,OAAOC,SAAQ,CACzCC,kBAAoBC,GAAkB,cAATA,GADHH,CAED,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/menuListStyled.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("@mui/material");const i=t.styled(t.MenuList,{shouldForwardProp:t=>"allowMultiselect"!==t})((({theme:t,allowMultiselect:i})=>{const e=i?{marginRight:"16px",marginRightCross:"3px",padding:"12px 12px 12px 24px"}:{marginRight:"0px",marginRightCross:"0px",padding:"12px 24px"};let o={};return o={boxShadow:"0px 3px 8px rgba(0, 0, 0, 0.15)",background:t.palette.common.white,padding:"0px",minWidth:"105px",maxWidth:"222px","& > .menu-item-divider":{margin:"0px !important"},"& > .menu-content-items":{maxHeight:"240px",overflowY:"overlay","& .MuiCheckbox-root":{marginRight:"4px"}},"& > .MuiMenuItem-root, > .menu-content-items > .MuiMenuItem-root":{color:t.palette.onSurface.os900,whiteSpace:"nowrap",padding:e.padding,"&.Mui-disabled":{color:t.palette.disabled.primary,opacity:1,"& .MuiIcon-root":{color:`${t.palette.disabled.primary}!important`}},"&:hover":{background:t.palette.surface.primary},"& > .MuiListItemText-root":{marginRight:e.marginRight},"& .MuiTypography-root":{fontSize:"16px",lineHeight:"24px",fontWeight:"400"},"& > .MuiListItemIcon-root":{display:"inline-block",lineHeight:"21px",minWidth:"unset",width:"20px",marginRight:"16px","& > .MuiIcon-root":{color:t.palette.text.primary,display:"inline"}},"&.menu-item-header":{padding:"12px 12px 12px 24px","& .MuiTypography-root":{fontWeight:"700",lineHeight:"20px"},"&:hover":{background:t.palette.background.primary,cursor:"default"},"& .MuiListItemIcon-root":{color:t.palette.onSurface.os900,marginRight:e.marginRightCross,cursor:"pointer"},"& > .MuiListItemText-root":{marginRight:"15px"}},"&.menu-select-all":{"&:hover":{background:t.palette.background.primary,cursor:"default"}}}},o}));exports.MenuListStyled=i;
+"use strict";var t=require("@mui/material");const i=t.styled(t.MenuList,{shouldForwardProp:t=>"allowMultiselect"!==t})(({theme:t,allowMultiselect:i})=>{const e=i?{marginRight:"16px",marginRightCross:"3px",padding:"12px 12px 12px 24px"}:{marginRight:"0px",marginRightCross:"0px",padding:"12px 24px"};let o={};return o={boxShadow:"0px 3px 8px rgba(0, 0, 0, 0.15)",background:t.palette.common.white,padding:"0px",minWidth:"105px",maxWidth:"222px","& > .menu-item-divider":{margin:"0px !important"},"& > .menu-content-items":{maxHeight:"240px",overflowY:"overlay","& .MuiCheckbox-root":{marginRight:"4px"}},"& > .MuiMenuItem-root, > .menu-content-items > .MuiMenuItem-root":{color:t.palette.onSurface.os900,whiteSpace:"nowrap",padding:e.padding,"&.Mui-disabled":{color:t.palette.disabled.primary,opacity:1,"& .MuiIcon-root":{color:`${t.palette.disabled.primary}!important`}},"&:hover":{background:t.palette.surface.primary},"& > .MuiListItemText-root":{marginRight:e.marginRight},"& .MuiTypography-root":{fontSize:"16px",lineHeight:"24px",fontWeight:"400"},"& > .MuiListItemIcon-root":{display:"inline-block",lineHeight:"21px",minWidth:"unset",width:"20px",marginRight:"16px","& > .MuiIcon-root":{color:t.palette.text.primary,display:"inline"}},"&.menu-item-header":{padding:"12px 12px 12px 24px","& .MuiTypography-root":{fontWeight:"700",lineHeight:"20px"},"&:hover":{background:t.palette.background.primary,cursor:"default"},"& .MuiListItemIcon-root":{color:t.palette.onSurface.os900,marginRight:e.marginRightCross,cursor:"pointer"},"& > .MuiListItemText-root":{marginRight:"15px"}},"&.menu-select-all":{"&:hover":{background:t.palette.background.primary,cursor:"default"}}}},o});exports.MenuListStyled=i;
 //# sourceMappingURL=menuListStyled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menuListStyled.js","sources":["../../../../../../src/components/cardMenu/styled/menuListStyled.tsx"],"sourcesContent":["import { Theme, MenuList, styled } from '@mui/material';\n\nexport const MenuListStyled = styled(MenuList, {\n  shouldForwardProp: (prop) => prop !== 'allowMultiselect',\n})<{ theme?: Theme; allowMultiselect?: boolean }>(({ theme, allowMultiselect }) => {\n  const conditionalStyles = allowMultiselect\n    ? { marginRight: '16px', marginRightCross: '3px', padding: '12px 12px 12px 24px' }\n    : { marginRight: '0px', marginRightCross: '0px', padding: '12px 24px' };\n\n  let style = {};\n  style = {\n    boxShadow: '0px 3px 8px rgba(0, 0, 0, 0.15)',\n    background: theme.palette.common.white,\n    padding: '0px',\n    minWidth: '105px',\n    maxWidth: '222px',\n    '& > .menu-item-divider': {\n      margin: '0px !important',\n    },\n    '& > .menu-content-items': {\n      maxHeight: '240px',\n      overflowY: 'overlay',\n      '& .MuiCheckbox-root': {\n        marginRight: '4px',\n      },\n    },\n    '& > .MuiMenuItem-root, > .menu-content-items > .MuiMenuItem-root': {\n      color: theme.palette.onSurface.os900,\n      whiteSpace: 'nowrap',\n      padding: conditionalStyles.padding,\n      '&.Mui-disabled': {\n        color: theme.palette.disabled.primary,\n        opacity: 1,\n        '& .MuiIcon-root': {\n          color: `${theme.palette.disabled.primary}!important`,\n        },\n      },\n      '&:hover': {\n        background: theme.palette.surface.primary,\n      },\n      '& > .MuiListItemText-root': {\n        marginRight: conditionalStyles.marginRight,\n      },\n      '& .MuiTypography-root': {\n        fontSize: '16px',\n        lineHeight: '24px',\n        fontWeight: '400',\n      },\n      '& > .MuiListItemIcon-root': {\n        display: 'inline-block',\n        lineHeight: '21px',\n        minWidth: 'unset',\n        width: '20px',\n        marginRight: '16px',\n        '& > .MuiIcon-root': {\n          color: theme.palette.text.primary,\n          display: 'inline',\n        },\n      },\n      '&.menu-item-header': {\n        padding: '12px 12px 12px 24px',\n        '& .MuiTypography-root': {\n          fontWeight: '700',\n          lineHeight: '20px',\n        },\n        '&:hover': {\n          background: theme.palette.background.primary,\n          cursor: 'default',\n        },\n        '& .MuiListItemIcon-root': {\n          color: theme.palette.onSurface.os900,\n          marginRight: conditionalStyles.marginRightCross,\n          cursor: 'pointer',\n        },\n        '& > .MuiListItemText-root': {\n          marginRight: '15px',\n        },\n      },\n      '&.menu-select-all': {\n        '&:hover': {\n          background: theme.palette.background.primary,\n          cursor: 'default',\n        },\n      },\n    },\n  };\n\n  return style;\n});\n"],"names":["MenuListStyled","styled","MenuList","shouldForwardProp","prop","theme","allowMultiselect","conditionalStyles","marginRight","marginRightCross","padding","style","boxShadow","background","palette","common","white","minWidth","maxWidth","margin","maxHeight","overflowY","color","onSurface","os900","whiteSpace","disabled","primary","opacity","surface","fontSize","lineHeight","fontWeight","display","width","text","cursor"],"mappings":"4CAEa,MAAAA,EAAiBC,EAAMA,OAACC,WAAU,CAC7CC,kBAAoBC,GAAkB,qBAATA,GADDH,EAEoB,EAAGI,QAAOC,uBAC1D,MAAMC,EAAoBD,EACtB,CAAEE,YAAa,OAAQC,iBAAkB,MAAOC,QAAS,uBACzD,CAAEF,YAAa,MAAOC,iBAAkB,MAAOC,QAAS,aAE5D,IAAIC,EAAQ,CAAE,EA8Ed,OA7EAA,EAAQ,CACNC,UAAW,kCACXC,WAAYR,EAAMS,QAAQC,OAAOC,MACjCN,QAAS,MACTO,SAAU,QACVC,SAAU,QACV,yBAA0B,CACxBC,OAAQ,kBAEV,0BAA2B,CACzBC,UAAW,QACXC,UAAW,UACX,sBAAuB,CACrBb,YAAa,QAGjB,mEAAoE,CAClEc,MAAOjB,EAAMS,QAAQS,UAAUC,MAC/BC,WAAY,SACZf,QAASH,EAAkBG,QAC3B,iBAAkB,CAChBY,MAAOjB,EAAMS,QAAQY,SAASC,QAC9BC,QAAS,EACT,kBAAmB,CACjBN,MAAO,GAAGjB,EAAMS,QAAQY,SAASC,sBAGrC,UAAW,CACTd,WAAYR,EAAMS,QAAQe,QAAQF,SAEpC,4BAA6B,CAC3BnB,YAAaD,EAAkBC,aAEjC,wBAAyB,CACvBsB,SAAU,OACVC,WAAY,OACZC,WAAY,OAEd,4BAA6B,CAC3BC,QAAS,eACTF,WAAY,OACZd,SAAU,QACViB,MAAO,OACP1B,YAAa,OACb,oBAAqB,CACnBc,MAAOjB,EAAMS,QAAQqB,KAAKR,QAC1BM,QAAS,WAGb,qBAAsB,CACpBvB,QAAS,sBACT,wBAAyB,CACvBsB,WAAY,MACZD,WAAY,QAEd,UAAW,CACTlB,WAAYR,EAAMS,QAAQD,WAAWc,QACrCS,OAAQ,WAEV,0BAA2B,CACzBd,MAAOjB,EAAMS,QAAQS,UAAUC,MAC/BhB,YAAaD,EAAkBE,iBAC/B2B,OAAQ,WAEV,4BAA6B,CAC3B5B,YAAa,SAGjB,oBAAqB,CACnB,UAAW,CACTK,WAAYR,EAAMS,QAAQD,WAAWc,QACrCS,OAAQ,cAMTzB,CAAK"}
+{"version":3,"file":"menuListStyled.js","sources":["../../../../../../src/components/cardMenu/styled/menuListStyled.tsx"],"sourcesContent":["import { Theme, MenuList, styled } from '@mui/material';\n\nexport const MenuListStyled = styled(MenuList, {\n  shouldForwardProp: (prop) => prop !== 'allowMultiselect',\n})<{ theme?: Theme; allowMultiselect?: boolean }>(({ theme, allowMultiselect }) => {\n  const conditionalStyles = allowMultiselect\n    ? { marginRight: '16px', marginRightCross: '3px', padding: '12px 12px 12px 24px' }\n    : { marginRight: '0px', marginRightCross: '0px', padding: '12px 24px' };\n\n  let style = {};\n  style = {\n    boxShadow: '0px 3px 8px rgba(0, 0, 0, 0.15)',\n    background: theme.palette.common.white,\n    padding: '0px',\n    minWidth: '105px',\n    maxWidth: '222px',\n    '& > .menu-item-divider': {\n      margin: '0px !important',\n    },\n    '& > .menu-content-items': {\n      maxHeight: '240px',\n      overflowY: 'overlay',\n      '& .MuiCheckbox-root': {\n        marginRight: '4px',\n      },\n    },\n    '& > .MuiMenuItem-root, > .menu-content-items > .MuiMenuItem-root': {\n      color: theme.palette.onSurface.os900,\n      whiteSpace: 'nowrap',\n      padding: conditionalStyles.padding,\n      '&.Mui-disabled': {\n        color: theme.palette.disabled.primary,\n        opacity: 1,\n        '& .MuiIcon-root': {\n          color: `${theme.palette.disabled.primary}!important`,\n        },\n      },\n      '&:hover': {\n        background: theme.palette.surface.primary,\n      },\n      '& > .MuiListItemText-root': {\n        marginRight: conditionalStyles.marginRight,\n      },\n      '& .MuiTypography-root': {\n        fontSize: '16px',\n        lineHeight: '24px',\n        fontWeight: '400',\n      },\n      '& > .MuiListItemIcon-root': {\n        display: 'inline-block',\n        lineHeight: '21px',\n        minWidth: 'unset',\n        width: '20px',\n        marginRight: '16px',\n        '& > .MuiIcon-root': {\n          color: theme.palette.text.primary,\n          display: 'inline',\n        },\n      },\n      '&.menu-item-header': {\n        padding: '12px 12px 12px 24px',\n        '& .MuiTypography-root': {\n          fontWeight: '700',\n          lineHeight: '20px',\n        },\n        '&:hover': {\n          background: theme.palette.background.primary,\n          cursor: 'default',\n        },\n        '& .MuiListItemIcon-root': {\n          color: theme.palette.onSurface.os900,\n          marginRight: conditionalStyles.marginRightCross,\n          cursor: 'pointer',\n        },\n        '& > .MuiListItemText-root': {\n          marginRight: '15px',\n        },\n      },\n      '&.menu-select-all': {\n        '&:hover': {\n          background: theme.palette.background.primary,\n          cursor: 'default',\n        },\n      },\n    },\n  };\n\n  return style;\n});\n"],"names":["MenuListStyled","styled","MenuList","shouldForwardProp","prop","theme","allowMultiselect","conditionalStyles","marginRight","marginRightCross","padding","style","boxShadow","background","palette","common","white","minWidth","maxWidth","margin","maxHeight","overflowY","color","onSurface","os900","whiteSpace","disabled","primary","opacity","surface","fontSize","lineHeight","fontWeight","display","width","text","cursor"],"mappings":"4CAEO,MAAMA,EAAiBC,EAAAA,OAAOC,WAAU,CAC7CC,kBAAoBC,GAAkB,qBAATA,GADDH,CAEoB,EAAGI,QAAOC,uBAC1D,MAAMC,EAAoBD,EACtB,CAAEE,YAAa,OAAQC,iBAAkB,MAAOC,QAAS,uBACzD,CAAEF,YAAa,MAAOC,iBAAkB,MAAOC,QAAS,aAE5D,IAAIC,EAAQ,CAAA,EA8EZ,OA7EAA,EAAQ,CACNC,UAAW,kCACXC,WAAYR,EAAMS,QAAQC,OAAOC,MACjCN,QAAS,MACTO,SAAU,QACVC,SAAU,QACV,yBAA0B,CACxBC,OAAQ,kBAEV,0BAA2B,CACzBC,UAAW,QACXC,UAAW,UACX,sBAAuB,CACrBb,YAAa,QAGjB,mEAAoE,CAClEc,MAAOjB,EAAMS,QAAQS,UAAUC,MAC/BC,WAAY,SACZf,QAASH,EAAkBG,QAC3B,iBAAkB,CAChBY,MAAOjB,EAAMS,QAAQY,SAASC,QAC9BC,QAAS,EACT,kBAAmB,CACjBN,MAAO,GAAGjB,EAAMS,QAAQY,SAASC,sBAGrC,UAAW,CACTd,WAAYR,EAAMS,QAAQe,QAAQF,SAEpC,4BAA6B,CAC3BnB,YAAaD,EAAkBC,aAEjC,wBAAyB,CACvBsB,SAAU,OACVC,WAAY,OACZC,WAAY,OAEd,4BAA6B,CAC3BC,QAAS,eACTF,WAAY,OACZd,SAAU,QACViB,MAAO,OACP1B,YAAa,OACb,oBAAqB,CACnBc,MAAOjB,EAAMS,QAAQqB,KAAKR,QAC1BM,QAAS,WAGb,qBAAsB,CACpBvB,QAAS,sBACT,wBAAyB,CACvBsB,WAAY,MACZD,WAAY,QAEd,UAAW,CACTlB,WAAYR,EAAMS,QAAQD,WAAWc,QACrCS,OAAQ,WAEV,0BAA2B,CACzBd,MAAOjB,EAAMS,QAAQS,UAAUC,MAC/BhB,YAAaD,EAAkBE,iBAC/B2B,OAAQ,WAEV,4BAA6B,CAC3B5B,YAAa,SAGjB,oBAAqB,CACnB,UAAW,CACTK,WAAYR,EAAMS,QAAQD,WAAWc,QACrCS,OAAQ,cAMTzB"}

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

@@ -1,2 +1,2 @@
-"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;
+"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/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"}
+{"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":"8EAGO,MAAMA,EAAeC,EAAAA,OAAOC,SAAQ,CACzCC,kBAAoBC,GAA0B,YAAbA,GADPH,CAMzB,EAAGI,QAAOC,cACJ,CACLC,OAAQ,MACRC,WAAYH,EAAMI,QAAQD,WAAWE,QACrC,QAAS,CACPC,aAAcL,EAAU,WAAQM"}

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

@@ -1,19 +1,16 @@
-import { IconButtonProps, CircularProgressProps, BoxProps, SvgIconProps } from '@mui/material';
+import { BoxProps } from '@mui/material';
 import { Swiper as CarouselInstance } from 'swiper';
-import { ElementType } from 'react';
+import { PlayPauseButtonProps } from '@/src/components/playPauseButton/PlayPauseButton';
+import { SpinnerProps } from '@/src/components/progress/Spinner';
 export interface CarouselAutoplayProgressProps extends Omit<BoxProps, 'children' | 'position'> {
     /**
      * Optional Carousel instance from useCarouselInstance hook
      */
     carousel?: CarouselInstance;
     /**
-     * Foreground Circular Progress (main) props
+     * Progress Props
      */
-    foregroundCircleProps?: CircularProgressProps;
-    /**
-     * Background Circular Progress props
-     */
-    backgroundCircleProps?: CircularProgressProps;
+    spinnerProps?: Omit<SpinnerProps, 'value'>;
     /**
      * Append style to wrapper box to change position of component
      */
@@ -22,25 +19,14 @@ export interface CarouselAutoplayProgressProps extends Omit<BoxProps, 'children'
 /**
  * Spinner with autoplay progress value
  */
-export declare const CarouselAutoplayProgress: ({ carousel: carouselProp, sx: rawSx, foregroundCircleProps, backgroundCircleProps, position, ...rest }: CarouselAutoplayProgressProps) => import("react/jsx-runtime").JSX.Element;
-export interface CarouselAutoplayIconButtonProps extends Partial<IconButtonProps> {
+export declare const CarouselAutoplayProgress: ({ carousel: carouselProp, sx: rawSx, spinnerProps, position, ...rest }: CarouselAutoplayProgressProps) => import("react/jsx-runtime").JSX.Element;
+export interface CarouselAutoplayIconButtonProps extends Partial<PlayPauseButtonProps> {
     /**
      * Optional Carousel instance from useCarouselInstance hook
      */
     carousel?: CarouselInstance;
-    /**
-     * Properties passed to the Icon component
-     */
-    iconProps?: SvgIconProps;
-    /**
-     * Nodes used for the icons
-     */
-    iconSlots?: {
-        pauseIcon?: ElementType<SvgIconProps>;
-        playIcon?: ElementType<SvgIconProps>;
-    };
 }
 /**
  * IconButton controlling play/paused state of the autoplay
  */
-export declare function CarouselAutoplayIconButton({ carousel: carouselProp, children, iconProps, iconSlots, ...rest }: CarouselAutoplayIconButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CarouselAutoplayIconButton({ carousel: carouselProp, ...rest }: CarouselAutoplayIconButtonProps): import("react/jsx-runtime").JSX.Element;

package/cjs/components/carousel/autoplay.js

@@ -1,2 +1,2 @@
-"use strict";var o=require("tslib"),s=require("react/jsx-runtime"),e=require("@mui/material"),r=require("./hooks.js"),a=require("../../node_modules/swiper/swiper-react.js"),t=require("react"),i=require("../icon/stroke/ControlsPlayIcon.js"),n=require("../icon/stroke/ControlsPauseIcon.js");exports.CarouselAutoplayIconButton=function(a){var t,l,{carousel:u,children:c,iconProps:d,iconSlots:p}=a,g=o.__rest(a,["carousel","children","iconProps","iconSlots"]);const v=r.useCarousel(),y=u||v,{playIcon:x,pauseIcon:j}=Object.assign({playIcon:i.ControlsPlayIcon,pauseIcon:n.ControlsPauseIcon},p||{}),P=(null===(t=null==y?void 0:y.autoplay)||void 0===t?void 0:t.running)?j:x;return s.jsx(e.IconButton,Object.assign({"aria-label":(null===(l=null==y?void 0:y.autoplay)||void 0===l?void 0:l.running)?"Pause carousel autoplay":"Play carousel autoplay",onClick:()=>{var o,s;return null===(o=null==y?void 0:y.autoplay)||void 0===o?void 0:o[(null===(s=null==y?void 0:y.autoplay)||void 0===s?void 0:s.running)?"stop":"start"]()}},g,{children:c||s.jsx(P,Object.assign({},d))}))},exports.CarouselAutoplayProgress=r=>{var{carousel:i,sx:n,foregroundCircleProps:l,backgroundCircleProps:u,position:c="outside"}=r,d=o.__rest(r,["carousel","sx","foregroundCircleProps","backgroundCircleProps","position"]);const[p,g]=t.useState(0),v=a.useSwiper(),y=i||v,x=l||{},{sx:j}=x,P=o.__rest(x,["sx"]),b=u||{},{sx:C}=b,m=o.__rest(b,["sx"]),I=t.useMemo((()=>"inside"===c?Object.assign({position:"absolute",zIndex:"90",bottom:"0",left:"0",right:"0",m:2},n):n),[c,JSON.stringify(n)]);return t.useEffect((()=>{y&&y.autoplay&&y.on("autoplayTimeLeft",((o,s,e)=>{g(o.autoplay.paused?0:Math.round(100-100*e))}))}),[!!y]),s.jsxs(e.Box,Object.assign({sx:Object.assign({position:"relative",display:"flex",m:2},I),"data-testid":"CarouselAutoplayProgress"},d,{children:[s.jsx(e.CircularProgress,Object.assign({variant:"determinate","data-testid":"CarouselAutoplayProgress.Foreground",value:p,sx:Object.assign({color:"brand.secondary",position:"relative",zIndex:"10",".MuiCircularProgress-circle":{transition:"none"}},j)},P)),s.jsx(e.CircularProgress,Object.assign({variant:"determinate","data-testid":"CarouselAutoplayProgress.Background",value:100,sx:Object.assign({position:"absolute",color:"common.white"},C)},m))]}))};
+"use strict";var e=require("tslib"),s=require("react/jsx-runtime"),a=require("@mui/material"),o=require("./hooks.js"),t=require("../../node_modules/swiper/swiper-react.js"),u=require("react"),r=require("../playPauseButton/PlayPauseButton.js"),i=require("../progress/Spinner.js");exports.CarouselAutoplayIconButton=function(a){var t,i,{carousel:l}=a,n=e.__rest(a,["carousel"]);const p=o.useCarousel(),d=l||p,[c,y]=u.useState(0);return u.useEffect(()=>{d&&d.autoplay&&d.on("autoplayTimeLeft",(e,s,a)=>{y(e.autoplay.paused?0:Math.round(100-100*a))})},[!!d]),s.jsx(r.PlayPauseButton,Object.assign({"aria-label":(null===(t=null==d?void 0:d.autoplay)||void 0===t?void 0:t.running)?"Pause carousel autoplay":"Play carousel autoplay",isPlaying:!!(null===(i=null==d?void 0:d.autoplay)||void 0===i?void 0:i.running),progress:c,onClick:()=>{var e,s;null===(e=null==d?void 0:d.autoplay)||void 0===e||e[(null===(s=null==d?void 0:d.autoplay)||void 0===s?void 0:s.running)?"stop":"start"]()}},n))},exports.CarouselAutoplayProgress=o=>{var{carousel:r,sx:l,spinnerProps:n,position:p="outside"}=o,d=e.__rest(o,["carousel","sx","spinnerProps","position"]);const[c,y]=u.useState(0),v=t.useSwiper(),g=r||v,j=u.useMemo(()=>"inside"===p?Object.assign({position:"absolute",zIndex:"90",bottom:"0",left:"0",right:"0",m:2},l):l,[p,JSON.stringify(l)]);return u.useEffect(()=>{g&&g.autoplay&&g.on("autoplayTimeLeft",(e,s,a)=>{y(e.autoplay.paused?0:Math.round(100-100*a))})},[!!g]),s.jsx(a.Box,Object.assign({sx:Object.assign({position:"relative",display:"flex",m:2},j),"data-testid":"CarouselAutoplayProgress"},d,{children:s.jsx(i.Spinner,Object.assign({value:c},n))}))};
 //# sourceMappingURL=autoplay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"autoplay.js","sources":["../../../../../src/components/carousel/autoplay.tsx"],"sourcesContent":["import {\n  Box,\n  IconButton,\n  IconButtonProps,\n  CircularProgress,\n  CircularProgressProps,\n  BoxProps,\n  CSSObject,\n  SvgIconProps,\n} from '@mui/material';\nimport { useCarousel } from './hooks';\nimport { Swiper as CarouselInstance } from 'swiper';\nimport { useSwiper } from 'swiper/react';\nimport { useEffect, useState, useMemo, ElementType } from 'react';\nimport { ControlsPlayIcon } from '@/src/components/icon/stroke/ControlsPlayIcon';\nimport { ControlsPauseIcon } from '@/src/components/icon/stroke/ControlsPauseIcon';\n\nexport interface CarouselAutoplayProgressProps extends Omit<BoxProps, 'children' | 'position'> {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Foreground Circular Progress (main) props\n   */\n  foregroundCircleProps?: CircularProgressProps;\n  /**\n   * Background Circular Progress props\n   */\n  backgroundCircleProps?: CircularProgressProps;\n  /**\n   * Append style to wrapper box to change position of component\n   */\n  position?: 'outside' | 'inside';\n}\n\n/**\n * Spinner with autoplay progress value\n */\nexport const CarouselAutoplayProgress = ({\n  carousel: carouselProp,\n  sx: rawSx,\n  foregroundCircleProps,\n  backgroundCircleProps,\n  position = 'outside',\n  ...rest\n}: CarouselAutoplayProgressProps) => {\n  const [value, setValue] = useState<number>(0);\n  const carouselHook = useSwiper();\n  const carousel = carouselProp || carouselHook;\n  const { sx: foregroundCircleSx, ...restForegroundCircle } = foregroundCircleProps || {};\n  const { sx: backgroundCircleSx, ...restBackgroundCircle } = backgroundCircleProps || {};\n\n  // position extra styling applied to wrapper\n  const sx = useMemo<CSSObject | BoxProps['sx']>(() => {\n    if (position === 'inside') {\n      return {\n        position: 'absolute',\n        zIndex: '90',\n        bottom: '0',\n        left: '0',\n        right: '0',\n        m: 2,\n        ...rawSx,\n      };\n    } else {\n      return rawSx;\n    }\n  }, [position, JSON.stringify(rawSx)]);\n\n  useEffect(() => {\n    // attach listener that controls progress value based on swiper special event\n    if (carousel && carousel.autoplay) {\n      carousel.on('autoplayTimeLeft', (instance, _timeLeft, percentage) => {\n        setValue(instance.autoplay.paused ? 0 : Math.round(100 - percentage * 100));\n      });\n    }\n  }, [!!carousel]);\n\n  return (\n    <Box sx={{ position: 'relative', display: 'flex', m: 2, ...sx }} data-testid=\"CarouselAutoplayProgress\" {...rest}>\n      <CircularProgress\n        variant=\"determinate\"\n        data-testid=\"CarouselAutoplayProgress.Foreground\"\n        value={value}\n        sx={{\n          color: 'brand.secondary',\n          // overlap\n          position: 'relative',\n          zIndex: '10',\n          '.MuiCircularProgress-circle': {\n            transition: 'none',\n          },\n          ...foregroundCircleSx,\n        }}\n        {...restForegroundCircle}\n      />\n      <CircularProgress\n        variant=\"determinate\"\n        data-testid=\"CarouselAutoplayProgress.Background\"\n        value={100}\n        sx={{ position: 'absolute', color: 'common.white', ...backgroundCircleSx }}\n        {...restBackgroundCircle}\n      />\n    </Box>\n  );\n};\n\nexport interface CarouselAutoplayIconButtonProps extends Partial<IconButtonProps> {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Properties passed to the Icon component\n   */\n  iconProps?: SvgIconProps;\n  /**\n   * Nodes used for the icons\n   */\n  iconSlots?: {\n    pauseIcon?: ElementType<SvgIconProps>;\n    playIcon?: ElementType<SvgIconProps>;\n  };\n}\n\n/**\n * IconButton controlling play/paused state of the autoplay\n */\nexport function CarouselAutoplayIconButton({\n  carousel: carouselProp,\n  children,\n  iconProps,\n  iconSlots,\n  ...rest\n}: CarouselAutoplayIconButtonProps) {\n  const carouselHook = useCarousel();\n  const carousel = carouselProp || carouselHook;\n  const { playIcon, pauseIcon } = {\n    playIcon: ControlsPlayIcon,\n    pauseIcon: ControlsPauseIcon,\n    ...(iconSlots || {}),\n  };\n  const AutoplayIcon = carousel?.autoplay?.running ? pauseIcon : playIcon;\n\n  return (\n    <IconButton\n      aria-label={carousel?.autoplay?.running ? 'Pause carousel autoplay' : 'Play carousel autoplay'}\n      onClick={() => carousel?.autoplay?.[carousel?.autoplay?.running ? 'stop' : 'start']()}\n      {...rest}\n    >\n      {children || <AutoplayIcon {...iconProps} />}\n    </IconButton>\n  );\n}\n"],"names":["_a","carousel","carouselProp","children","iconProps","iconSlots","rest","__rest","carouselHook","useCarousel","playIcon","pauseIcon","Object","assign","ControlsPlayIcon","ControlsPauseIcon","AutoplayIcon","_b","autoplay","running","_jsx","IconButton","_c","onClick","jsx","sx","rawSx","foregroundCircleProps","backgroundCircleProps","position","value","setValue","useState","useSwiper","foregroundCircleSx","restForegroundCircle","backgroundCircleSx","restBackgroundCircle","useMemo","zIndex","bottom","left","right","m","JSON","stringify","useEffect","on","instance","_timeLeft","percentage","paused","Math","round","_jsxs","Box","display","CircularProgress","variant","color","transition"],"mappings":"oUAiIM,SAAqCA,YACzCC,SAAUC,EAAYC,SACtBA,EAAQC,UACRA,EAASC,UACTA,GAEgCL,EAD7BM,EAAIC,EAAAA,OAAAP,EALkC,iDAOzC,MAAMQ,EAAeC,EAAAA,cACfR,EAAWC,GAAgBM,GAC3BE,SAAEA,EAAQC,UAAEA,GAChBC,OAAAC,OAAA,CAAAH,SAAUI,EAAAA,iBACVH,UAAWI,EAAAA,mBACPV,GAAa,CAAA,GAEbW,GAAmC,QAApBC,EAAAhB,eAAAA,EAAUiB,gBAAU,IAAAD,OAAA,EAAAA,EAAAE,SAAUR,EAAYD,EAE/D,OACEU,EAAAA,IAACC,EAAAA,WAAUT,OAAAC,OAAA,CAAA,cACqB,QAAlBS,EAAArB,eAAAA,EAAUiB,gBAAQ,IAAAI,OAAA,EAAAA,EAAEH,SAAU,0BAA4B,yBACtEI,QAAS,aAAM,OAAqB,QAArBvB,EAAAC,aAAA,EAAAA,EAAUiB,gBAAW,IAAAlB,OAAA,EAAAA,GAAoB,QAApBiB,EAAAhB,aAAQ,EAARA,EAAUiB,gBAAU,IAAAD,OAAA,EAAAA,EAAAE,SAAU,OAAS,UAAU,GACjFb,EAEH,CAAAH,SAAAA,GAAYiB,EAAAI,IAACR,EAAiBJ,OAAAC,OAAA,CAAA,EAAAT,MAGrC,mCAnHyCJ,QACvCC,SAAUC,EACVuB,GAAIC,EAAKC,sBACTA,EAAqBC,sBACrBA,EAAqBC,SACrBA,EAAW,WAAS7B,EACjBM,EAAIC,EAAAA,OAAAP,EANgC,8EAQvC,MAAO8B,EAAOC,GAAYC,EAAAA,SAAiB,GACrCxB,EAAeyB,EAAAA,YACfhC,EAAWC,GAAgBM,EAC3BS,EAAsDU,GAAyB,IAA7EF,GAAIS,KAAuBC,EAA7B5B,EAAAA,OAAAU,EAAA,CAAA,OACAK,EAAsDM,GAAyB,IAA7EH,GAAIW,KAAuBC,EAA7B9B,EAAAA,OAAAe,EAAA,CAAA,OAGAG,EAAKa,EAAAA,SAAoC,IAC5B,WAAbT,EAEAjB,OAAAC,OAAA,CAAAgB,SAAU,WACVU,OAAQ,KACRC,OAAQ,IACRC,KAAM,IACNC,MAAO,IACPC,EAAG,GACAjB,GAGEA,GAER,CAACG,EAAUe,KAAKC,UAAUnB,KAW7B,OATAoB,EAAAA,WAAU,KAEJ7C,GAAYA,EAASiB,UACvBjB,EAAS8C,GAAG,oBAAoB,CAACC,EAAUC,EAAWC,KACpDnB,EAASiB,EAAS9B,SAASiC,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,GAAkB,MAG9E,GAAGjD,IAGJqD,EAAAA,KAACC,EAAAA,mBAAI9B,GAAEb,OAAAC,OAAA,CAAIgB,SAAU,WAAY2B,QAAS,OAAQb,EAAG,GAAMlB,GAAE,cAAgB,4BAA+BnB,EAC1G,CAAAH,SAAA,CAAAiB,EAAAI,IAACiC,EAAgBA,iBACf7C,OAAAC,OAAA,CAAA6C,QAAQ,cAAa,cACT,sCACZ5B,MAAOA,EACPL,GACEb,OAAAC,OAAA,CAAA8C,MAAO,kBAEP9B,SAAU,WACVU,OAAQ,KACR,8BAA+B,CAC7BqB,WAAY,SAEX1B,IAEDC,IAENf,EAAAA,IAACqC,EAAAA,iBACC7C,OAAAC,OAAA,CAAA6C,QAAQ,cAAa,cACT,sCACZ5B,MAAO,IACPL,GAAMb,OAAAC,OAAA,CAAAgB,SAAU,WAAY8B,MAAO,gBAAmBvB,IAClDC,OAEF"}
+{"version":3,"file":"autoplay.js","sources":["../../../../../src/components/carousel/autoplay.tsx"],"sourcesContent":["import { Box, BoxProps, CSSObject } from '@mui/material';\nimport { useCarousel } from './hooks';\nimport { Swiper as CarouselInstance } from 'swiper';\nimport { useSwiper } from 'swiper/react';\nimport { useEffect, useState, useMemo } from 'react';\nimport { PlayPauseButton, PlayPauseButtonProps } from '@/src/components/playPauseButton/PlayPauseButton';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\n\nexport interface CarouselAutoplayProgressProps extends Omit<BoxProps, 'children' | 'position'> {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Progress Props\n   */\n  spinnerProps?: Omit<SpinnerProps, 'value'>;\n  /**\n   * Append style to wrapper box to change position of component\n   */\n  position?: 'outside' | 'inside';\n}\n\n/**\n * Spinner with autoplay progress value\n */\nexport const CarouselAutoplayProgress = ({\n  carousel: carouselProp,\n  sx: rawSx,\n  spinnerProps,\n  position = 'outside',\n  ...rest\n}: CarouselAutoplayProgressProps) => {\n  const [value, setValue] = useState<number>(0);\n  const carouselHook = useSwiper();\n  const carousel = carouselProp || carouselHook;\n\n  // position extra styling applied to wrapper\n  const sx = useMemo<CSSObject | BoxProps['sx']>(() => {\n    if (position === 'inside') {\n      return {\n        position: 'absolute',\n        zIndex: '90',\n        bottom: '0',\n        left: '0',\n        right: '0',\n        m: 2,\n        ...rawSx,\n      };\n    } else {\n      return rawSx;\n    }\n  }, [position, JSON.stringify(rawSx)]);\n\n  useEffect(() => {\n    // attach listener that controls progress value based on swiper special event\n    if (carousel && carousel.autoplay) {\n      carousel.on('autoplayTimeLeft', (instance, _timeLeft, percentage) => {\n        setValue(instance.autoplay.paused ? 0 : Math.round(100 - percentage * 100));\n      });\n    }\n  }, [!!carousel]);\n\n  return (\n    <Box sx={{ position: 'relative', display: 'flex', m: 2, ...sx }} data-testid=\"CarouselAutoplayProgress\" {...rest}>\n      <Spinner value={value} {...spinnerProps} />\n    </Box>\n  );\n};\n\nexport interface CarouselAutoplayIconButtonProps extends Partial<PlayPauseButtonProps> {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n}\n\n/**\n * IconButton controlling play/paused state of the autoplay\n */\nexport function CarouselAutoplayIconButton({ carousel: carouselProp, ...rest }: CarouselAutoplayIconButtonProps) {\n  const carouselHook = useCarousel();\n  const carousel = carouselProp || carouselHook;\n  const [value, setValue] = useState<number>(0);\n\n  useEffect(() => {\n    // attach listener that controls progress value based on swiper special event\n    if (carousel && carousel.autoplay) {\n      carousel.on('autoplayTimeLeft', (instance, _timeLeft, percentage) => {\n        setValue(instance.autoplay.paused ? 0 : Math.round(100 - percentage * 100));\n      });\n    }\n  }, [!!carousel]);\n\n  return (\n    <PlayPauseButton\n      aria-label={carousel?.autoplay?.running ? 'Pause carousel autoplay' : 'Play carousel autoplay'}\n      isPlaying={!!carousel?.autoplay?.running}\n      progress={value}\n      onClick={() => {\n        carousel?.autoplay?.[carousel?.autoplay?.running ? 'stop' : 'start']();\n      }}\n      {...rest}\n    />\n  );\n}\n"],"names":["_a","carousel","carouselProp","rest","__rest","carouselHook","useCarousel","value","setValue","useState","useEffect","autoplay","on","instance","_timeLeft","percentage","paused","Math","round","_jsx","PlayPauseButton","Object","assign","_b","running","isPlaying","_c","progress","onClick","sx","rawSx","spinnerProps","position","useSwiper","useMemo","zIndex","bottom","left","right","m","JSON","stringify","Box","display","children","Spinner"],"mappings":"0TAgFM,SAAqCA,YAAEC,SAAUC,GAAYF,EAAKG,EAAIC,SAAAJ,EAAjC,cACzC,MAAMK,EAAeC,EAAAA,cACfL,EAAWC,GAAgBG,GAC1BE,EAAOC,GAAYC,EAAAA,SAAiB,GAW3C,OATAC,EAAAA,UAAU,KAEJT,GAAYA,EAASU,UACvBV,EAASW,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,KACpDP,EAASK,EAASF,SAASK,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,GAAGd,IAGJkB,EAAAA,IAACC,kBAAeC,OAAAC,OAAA,CAAA,cACgB,QAAlBC,EAAAtB,aAAQ,EAARA,EAAUU,gBAAQ,IAAAY,OAAA,EAAAA,EAAEC,SAAU,0BAA4B,yBACtEC,qBAAaC,EAAAzB,aAAQ,EAARA,EAAUU,+BAAUa,SACjCG,SAAUpB,EACVqB,QAAS,aACW,QAAlB5B,EAAAC,aAAQ,EAARA,EAAUU,gBAAQ,IAAAX,GAAAA,GAAqB,QAAlBuB,EAAAtB,aAAQ,EAARA,EAAUU,gBAAQ,IAAAY,OAAA,EAAAA,EAAEC,SAAU,OAAS,aAE1DrB,GAGV,mCA/EyCH,IAAA,IACvCC,SAAUC,EACV2B,GAAIC,EAAKC,aACTA,EAAYC,SACZA,EAAW,WAAShC,EACjBG,EAAIC,EAAAA,OAAAJ,EALgC,6CAOvC,MAAOO,EAAOC,GAAYC,EAAAA,SAAiB,GACrCJ,EAAe4B,EAAAA,YACfhC,EAAWC,GAAgBG,EAG3BwB,EAAKK,EAAAA,QAAoC,IAC5B,WAAbF,EACFX,OAAAC,OAAA,CACEU,SAAU,WACVG,OAAQ,KACRC,OAAQ,IACRC,KAAM,IACNC,MAAO,IACPC,EAAG,GACAT,GAGEA,EAER,CAACE,EAAUQ,KAAKC,UAAUX,KAW7B,OATApB,EAAAA,UAAU,KAEJT,GAAYA,EAASU,UACvBV,EAASW,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,KACpDP,EAASK,EAASF,SAASK,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,GAAGd,IAGJkB,EAAAA,IAACuB,EAAAA,IAAGrB,OAAAC,OAAA,CAACO,GAAER,OAAAC,OAAA,CAAIU,SAAU,WAAYW,QAAS,OAAQJ,EAAG,GAAMV,iBAAkB,4BAA+B1B,EAAI,CAAAyC,SAC9GzB,EAAAA,IAAC0B,EAAAA,QAAOxB,OAAAC,OAAA,CAACf,MAAOA,GAAWwB"}

package/cjs/components/carousel/carousel.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),i=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),a=require("../../node_modules/swiper/swiper-react.js"),s=require("../../node_modules/swiper/modules/keyboard.js"),n=require("../../node_modules/swiper/modules/parallax.js"),o=require("../../node_modules/swiper/modules/autoplay.js"),p=require("../../node_modules/swiper/modules/effect-fade.js");const l=r.forwardRef(((r,l)=>{var{children:d,sx:u,onInit:c,effect:w,autoplay:f,parallax:m,peekDistance:x=100,peekSpeed:h=150}=r,b=e.__rest(r,["children","sx","onInit","effect","autoplay","parallax","peekDistance","peekSpeed"]);return i.jsx(t.Box,Object.assign({component:a.Swiper,spaceBetween:0,autoHeight:!0,loop:!0,keyboard:{enabled:!0},modules:[s.default,..."fade"===w?[p.default]:[],...f?[o.default]:[],...m?[n.default]:[]],parallax:m,effect:w,autoplay:f,ref:l},b,{onSwiper:c,"data-peekspeed":h,sx:Object.assign(Object.assign(Object.assign({display:"block",ml:"auto",mr:"auto",p:"0",maxWidth:"100%",position:"relative",zIndex:"50",overflow:"hidden",listStyle:"none","&.swiper-horizontal":{touchAction:"pan-y"},"&.swiper-vertical":{touchAction:"pan-x","& > .swiper-wrapper":{flexDirection:"column"}},"&.swiper-autoheight":{height:"auto","& > .swiper-wrapper":{alignItems:"flex-start",transitionProperty:"transform, height"}},"& .swiper-wrapper":{position:"relative",width:"100%",height:"100%",zIndex:"50",display:"flex",transitionProperty:"transform",transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)",boxSizing:"content-box",transform:"translate3d(0px, 0, 0)"}},"fade"!==w&&{"&.peeking .swiper-wrapper > .swiper-slide":{transitionProperty:"transform",transitionDuration:`${h}ms`,transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)"},"&.peek-next .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"":"-"}${x}px, 0, 0)`},"&.peek-prev .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"-":""}${x}px, 0, 0)`}}),{".swiper-slide-invisible-blank":{visibility:"hidden"},".swiper-backface-hidden .swiper-slide":{transform:"translateZ(0)",WebkitBackfaceVisibility:"hidden",backfaceVisibility:"hidden"}}),u),children:d}))}));exports.Carousel=l;
+"use strict";var e=require("tslib"),i=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),a=require("../../node_modules/swiper/swiper-react.js"),s=require("../../node_modules/swiper/modules/keyboard.js"),n=require("../../node_modules/swiper/modules/parallax.js"),o=require("../../node_modules/swiper/modules/autoplay.js"),p=require("../../node_modules/swiper/modules/effect-fade.js");const l=r.forwardRef((r,l)=>{var{children:d,sx:u,onInit:c,effect:w,autoplay:f,parallax:m,peekDistance:x=100,peekSpeed:h=150}=r,b=e.__rest(r,["children","sx","onInit","effect","autoplay","parallax","peekDistance","peekSpeed"]);return i.jsx(t.Box,Object.assign({component:a.Swiper,spaceBetween:0,autoHeight:!0,loop:!0,keyboard:{enabled:!0},modules:[s.default,..."fade"===w?[p.default]:[],...f?[o.default]:[],...m?[n.default]:[]],parallax:m,effect:w,autoplay:f,ref:l},b,{onSwiper:c,"data-peekspeed":h,sx:Object.assign(Object.assign(Object.assign({display:"block",ml:"auto",mr:"auto",p:"0",maxWidth:"100%",position:"relative",zIndex:"50",overflow:"hidden",listStyle:"none","&.swiper-horizontal":{touchAction:"pan-y"},"&.swiper-vertical":{touchAction:"pan-x","& > .swiper-wrapper":{flexDirection:"column"}},"&.swiper-autoheight":{height:"auto","& > .swiper-wrapper":{alignItems:"flex-start",transitionProperty:"transform, height"}},"& .swiper-wrapper":{position:"relative",width:"100%",height:"100%",zIndex:"50",display:"flex",transitionProperty:"transform",transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)",boxSizing:"content-box",transform:"translate3d(0px, 0, 0)"}},"fade"!==w&&{"&.peeking .swiper-wrapper > .swiper-slide":{transitionProperty:"transform",transitionDuration:`${h}ms`,transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)"},"&.peek-next .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"":"-"}${x}px, 0, 0)`},"&.peek-prev .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"-":""}${x}px, 0, 0)`}}),{".swiper-slide-invisible-blank":{visibility:"hidden"},".swiper-backface-hidden .swiper-slide":{transform:"translateZ(0)",WebkitBackfaceVisibility:"hidden",backfaceVisibility:"hidden"}}),u),children:d}))});exports.Carousel=l;
 //# sourceMappingURL=carousel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","sources":["../../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { Swiper, SwiperProps } from 'swiper/react';\nimport { Keyboard, EffectFade, Autoplay, Parallax } from 'swiper/modules';\n\nexport interface CarouselProps\n  // `cssMode` not supported\n  // instead of `navigation` use <CarouselNavigation />\n  // instead of `pagination` use <CarouselPagination />\n  // instead of `onSwiper` use `onInit`\n  extends Omit<SwiperProps, 'children' | 'cssMode' | 'navigation' | 'pagination' | 'onSwiper'>,\n    Omit<BoxProps, keyof Omit<SwiperProps, 'children'> | 'component'> {\n  /**\n   * Callback that receives Swiper instance\n   */\n  onInit?: SwiperProps['onSwiper'];\n  /**\n   * Travelled distance in px for peek effect\n   * @default 100\n   */\n  peekDistance?: number;\n  /**\n   * Speed of peek effect\n   * @default 150 (half of default Carousel's speed)\n   */\n  peekSpeed?: number;\n}\n\n/**\n * Modern mobile friendly carousel for slideshows, built with Swiper\n */\nexport const Carousel: React.FC<CarouselProps> = forwardRef(\n  ({ children, sx, onInit, effect, autoplay, parallax, peekDistance = 100, peekSpeed = 150, ...rest }, ref) => {\n    return (\n      <Box\n        component={Swiper}\n        spaceBetween={0}\n        autoHeight\n        loop\n        keyboard={{\n          enabled: true,\n        }}\n        modules={[\n          Keyboard,\n          ...(effect === 'fade' ? [EffectFade] : []),\n          ...(autoplay ? [Autoplay] : []),\n          ...(parallax ? [Parallax] : []),\n        ]}\n        parallax={parallax}\n        effect={effect}\n        autoplay={autoplay}\n        ref={ref}\n        {...rest}\n        onSwiper={onInit}\n        data-peekspeed={peekSpeed}\n        sx={{\n          // generic root styling, based on the `import 'swiper/css'`\n          display: 'block',\n          ml: 'auto',\n          mr: 'auto',\n          p: '0',\n          maxWidth: '100%',\n          // ensure correct position\n          position: 'relative',\n          zIndex: '50',\n          overflow: 'hidden',\n          // support for ul-type\n          listStyle: 'none',\n          // variants\n          '&.swiper-horizontal': {\n            touchAction: 'pan-y',\n          },\n          '&.swiper-vertical': {\n            touchAction: 'pan-x',\n            '& > .swiper-wrapper': {\n              flexDirection: 'column',\n            },\n          },\n          '&.swiper-autoheight': {\n            height: 'auto',\n            '& > .swiper-wrapper': {\n              alignItems: 'flex-start',\n              transitionProperty: 'transform, height',\n            },\n          },\n          // wrapper of all slides\n          '& .swiper-wrapper': {\n            position: 'relative',\n            width: '100%',\n            height: '100%',\n            zIndex: '50',\n            display: 'flex',\n            transitionProperty: 'transform',\n            transitionTimingFunction: 'var(--swiper-wrapper-transition-timing-function, initial)',\n            boxSizing: 'content-box',\n            transform: 'translate3d(0px, 0, 0)',\n          },\n          // peek effect\n          ...(effect !== 'fade' && {\n            '&.peeking .swiper-wrapper > .swiper-slide': {\n              transitionProperty: 'transform',\n              transitionDuration: `${peekSpeed}ms`,\n              transitionTimingFunction: 'var(--swiper-wrapper-transition-timing-function, initial)',\n            },\n            '&.peek-next .swiper-wrapper > .swiper-slide': {\n              transform: (theme) => `translate3D(${theme.direction === 'rtl' ? '' : '-'}${peekDistance}px, 0, 0)`,\n            },\n            '&.peek-prev .swiper-wrapper > .swiper-slide': {\n              transform: (theme) => `translate3D(${theme.direction === 'rtl' ? '-' : ''}${peekDistance}px, 0, 0)`,\n            },\n          }),\n          // swiper internal\n          '.swiper-slide-invisible-blank': {\n            visibility: 'hidden',\n          },\n          '.swiper-backface-hidden .swiper-slide': {\n            transform: 'translateZ(0)',\n            WebkitBackfaceVisibility: 'hidden',\n            backfaceVisibility: 'hidden',\n          },\n          // does not include CSS Mode, 3D Shadows, lazy loading\n          ...sx,\n        }}\n      >\n        {children}\n      </Box>\n    );\n  },\n);\n"],"names":["Carousel","forwardRef","_a","ref","children","sx","onInit","effect","autoplay","parallax","peekDistance","peekSpeed","rest","__rest","_jsx","jsx","Box","Object","assign","component","Swiper","spaceBetween","autoHeight","loop","keyboard","enabled","modules","Keyboard","default","EffectFade","Autoplay","Parallax","onSwiper","display","ml","mr","p","maxWidth","position","zIndex","overflow","listStyle","touchAction","flexDirection","height","alignItems","transitionProperty","width","transitionTimingFunction","boxSizing","transform","transitionDuration","theme","direction","visibility","WebkitBackfaceVisibility","backfaceVisibility"],"mappings":"uZA+Ba,MAAAA,EAAoCC,EAAUA,YACzD,CAACC,EAAoGC,SAApGC,SAAEA,EAAQC,GAAEA,EAAEC,OAAEA,EAAMC,OAAEA,EAAQC,SAAAA,WAAUC,EAAQC,aAAEA,EAAe,IAAGC,UAAEA,EAAY,OAAQC,EAA5FC,SAAAX,EAAA,CAAA,WAAA,KAAA,SAAA,SAAA,WAAA,WAAA,eAAA,cACC,OACEY,EAACC,IAAAC,EAAGA,IACFC,OAAAC,OAAA,CAAAC,UAAWC,EAAAA,OACXC,aAAc,EACdC,cACAC,MAAI,EACJC,SAAU,CACRC,SAAS,GAEXC,QAAS,CACPC,EAAQC,WACO,SAAXrB,EAAoB,CAACsB,EAAUD,SAAI,MACnCpB,EAAW,CAACsB,WAAY,MACxBrB,EAAW,CAACsB,WAAY,IAE9BtB,SAAUA,EACVF,OAAQA,EACRC,SAAUA,EACVL,IAAKA,GACDS,EACJ,CAAAoB,SAAU1B,EAAM,iBACAK,EAChBN,GAAEY,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAEAe,QAAS,QACTC,GAAI,OACJC,GAAI,OACJC,EAAG,IACHC,SAAU,OAEVC,SAAU,WACVC,OAAQ,KACRC,SAAU,SAEVC,UAAW,OAEX,sBAAuB,CACrBC,YAAa,SAEf,oBAAqB,CACnBA,YAAa,QACb,sBAAuB,CACrBC,cAAe,WAGnB,sBAAuB,CACrBC,OAAQ,OACR,sBAAuB,CACrBC,WAAY,aACZC,mBAAoB,sBAIxB,oBAAqB,CACnBR,SAAU,WACVS,MAAO,OACPH,OAAQ,OACRL,OAAQ,KACRN,QAAS,OACTa,mBAAoB,YACpBE,yBAA0B,4DAC1BC,UAAW,cACXC,UAAW,2BAGE,SAAX3C,GAAqB,CACvB,4CAA6C,CAC3CuC,mBAAoB,YACpBK,mBAAoB,GAAGxC,MACvBqC,yBAA0B,6DAE5B,8CAA+C,CAC7CE,UAAYE,GAAU,eAAmC,QAApBA,EAAMC,UAAsB,GAAK,MAAM3C,cAE9E,8CAA+C,CAC7CwC,UAAYE,GAAU,eAAmC,QAApBA,EAAMC,UAAsB,IAAM,KAAK3C,gBAE9E,CAEF,gCAAiC,CAC/B4C,WAAY,UAEd,wCAAyC,CACvCJ,UAAW,gBACXK,yBAA0B,SAC1BC,mBAAoB,YAGnBnD,GAAED,SAGNA,IACG"}
+{"version":3,"file":"carousel.js","sources":["../../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { Swiper, SwiperProps } from 'swiper/react';\nimport { Keyboard, EffectFade, Autoplay, Parallax } from 'swiper/modules';\n\nexport interface CarouselProps\n  // `cssMode` not supported\n  // instead of `navigation` use <CarouselNavigation />\n  // instead of `pagination` use <CarouselPagination />\n  // instead of `onSwiper` use `onInit`\n  extends Omit<SwiperProps, 'children' | 'cssMode' | 'navigation' | 'pagination' | 'onSwiper'>,\n    Omit<BoxProps, keyof Omit<SwiperProps, 'children'> | 'component'> {\n  /**\n   * Callback that receives Swiper instance\n   */\n  onInit?: SwiperProps['onSwiper'];\n  /**\n   * Travelled distance in px for peek effect\n   * @default 100\n   */\n  peekDistance?: number;\n  /**\n   * Speed of peek effect\n   * @default 150 (half of default Carousel's speed)\n   */\n  peekSpeed?: number;\n}\n\n/**\n * Modern mobile friendly carousel for slideshows, built with Swiper\n */\nexport const Carousel: React.FC<CarouselProps> = forwardRef(\n  ({ children, sx, onInit, effect, autoplay, parallax, peekDistance = 100, peekSpeed = 150, ...rest }, ref) => {\n    return (\n      <Box\n        component={Swiper}\n        spaceBetween={0}\n        autoHeight\n        loop\n        keyboard={{\n          enabled: true,\n        }}\n        modules={[\n          Keyboard,\n          ...(effect === 'fade' ? [EffectFade] : []),\n          ...(autoplay ? [Autoplay] : []),\n          ...(parallax ? [Parallax] : []),\n        ]}\n        parallax={parallax}\n        effect={effect}\n        autoplay={autoplay}\n        ref={ref}\n        {...rest}\n        onSwiper={onInit}\n        data-peekspeed={peekSpeed}\n        sx={{\n          // generic root styling, based on the `import 'swiper/css'`\n          display: 'block',\n          ml: 'auto',\n          mr: 'auto',\n          p: '0',\n          maxWidth: '100%',\n          // ensure correct position\n          position: 'relative',\n          zIndex: '50',\n          overflow: 'hidden',\n          // support for ul-type\n          listStyle: 'none',\n          // variants\n          '&.swiper-horizontal': {\n            touchAction: 'pan-y',\n          },\n          '&.swiper-vertical': {\n            touchAction: 'pan-x',\n            '& > .swiper-wrapper': {\n              flexDirection: 'column',\n            },\n          },\n          '&.swiper-autoheight': {\n            height: 'auto',\n            '& > .swiper-wrapper': {\n              alignItems: 'flex-start',\n              transitionProperty: 'transform, height',\n            },\n          },\n          // wrapper of all slides\n          '& .swiper-wrapper': {\n            position: 'relative',\n            width: '100%',\n            height: '100%',\n            zIndex: '50',\n            display: 'flex',\n            transitionProperty: 'transform',\n            transitionTimingFunction: 'var(--swiper-wrapper-transition-timing-function, initial)',\n            boxSizing: 'content-box',\n            transform: 'translate3d(0px, 0, 0)',\n          },\n          // peek effect\n          ...(effect !== 'fade' && {\n            '&.peeking .swiper-wrapper > .swiper-slide': {\n              transitionProperty: 'transform',\n              transitionDuration: `${peekSpeed}ms`,\n              transitionTimingFunction: 'var(--swiper-wrapper-transition-timing-function, initial)',\n            },\n            '&.peek-next .swiper-wrapper > .swiper-slide': {\n              transform: (theme) => `translate3D(${theme.direction === 'rtl' ? '' : '-'}${peekDistance}px, 0, 0)`,\n            },\n            '&.peek-prev .swiper-wrapper > .swiper-slide': {\n              transform: (theme) => `translate3D(${theme.direction === 'rtl' ? '-' : ''}${peekDistance}px, 0, 0)`,\n            },\n          }),\n          // swiper internal\n          '.swiper-slide-invisible-blank': {\n            visibility: 'hidden',\n          },\n          '.swiper-backface-hidden .swiper-slide': {\n            transform: 'translateZ(0)',\n            WebkitBackfaceVisibility: 'hidden',\n            backfaceVisibility: 'hidden',\n          },\n          // does not include CSS Mode, 3D Shadows, lazy loading\n          ...sx,\n        }}\n      >\n        {children}\n      </Box>\n    );\n  },\n);\n"],"names":["Carousel","forwardRef","_a","ref","children","sx","onInit","effect","autoplay","parallax","peekDistance","peekSpeed","rest","__rest","_jsx","Box","Object","assign","component","Swiper","spaceBetween","autoHeight","loop","keyboard","enabled","modules","Keyboard","EffectFade","Autoplay","Parallax","onSwiper","display","ml","mr","p","maxWidth","position","zIndex","overflow","listStyle","touchAction","flexDirection","height","alignItems","transitionProperty","width","transitionTimingFunction","boxSizing","transform","transitionDuration","theme","direction","visibility","WebkitBackfaceVisibility","backfaceVisibility"],"mappings":"uZA+BO,MAAMA,EAAoCC,EAAAA,WAC/C,CAACC,EAAoGC,SAApGC,SAAEA,EAAQC,GAAEA,EAAEC,OAAEA,EAAMC,OAAEA,EAAMC,SAAEA,WAAUC,EAAQC,aAAEA,EAAe,IAAGC,UAAEA,EAAY,OAAQC,EAAIC,SAAAX,EAAhG,CAAA,WAAA,KAAA,SAAA,SAAA,WAAA,WAAA,eAAA,cACC,OACEY,EAAAA,IAACC,EAAAA,IAAGC,OAAAC,OAAA,CACFC,UAAWC,EAAAA,OACXC,aAAc,EACdC,cACAC,MAAI,EACJC,SAAU,CACRC,SAAS,GAEXC,QAAS,CACPC,EAAAA,WACe,SAAXnB,EAAoB,CAACoB,EAAAA,SAAc,MACnCnB,EAAW,CAACoB,WAAY,MACxBnB,EAAW,CAACoB,WAAY,IAE9BpB,SAAUA,EACVF,OAAQA,EACRC,SAAUA,EACVL,IAAKA,GACDS,EAAI,CACRkB,SAAUxB,EAAM,iBACAK,EAChBN,GAAEW,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAEAc,QAAS,QACTC,GAAI,OACJC,GAAI,OACJC,EAAG,IACHC,SAAU,OAEVC,SAAU,WACVC,OAAQ,KACRC,SAAU,SAEVC,UAAW,OAEX,sBAAuB,CACrBC,YAAa,SAEf,oBAAqB,CACnBA,YAAa,QACb,sBAAuB,CACrBC,cAAe,WAGnB,sBAAuB,CACrBC,OAAQ,OACR,sBAAuB,CACrBC,WAAY,aACZC,mBAAoB,sBAIxB,oBAAqB,CACnBR,SAAU,WACVS,MAAO,OACPH,OAAQ,OACRL,OAAQ,KACRN,QAAS,OACTa,mBAAoB,YACpBE,yBAA0B,4DAC1BC,UAAW,cACXC,UAAW,2BAGE,SAAXzC,GAAqB,CACvB,4CAA6C,CAC3CqC,mBAAoB,YACpBK,mBAAoB,GAAGtC,MACvBmC,yBAA0B,6DAE5B,8CAA+C,CAC7CE,UAAYE,GAAU,eAAmC,QAApBA,EAAMC,UAAsB,GAAK,MAAMzC,cAE9E,8CAA+C,CAC7CsC,UAAYE,GAAU,eAAmC,QAApBA,EAAMC,UAAsB,IAAM,KAAKzC,gBAE9E,CAEF,gCAAiC,CAC/B0C,WAAY,UAEd,wCAAyC,CACvCJ,UAAW,gBACXK,yBAA0B,SAC1BC,mBAAoB,YAGnBjD,GAAED,SAGNA"}

package/cjs/components/carousel/hooks.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),l=require("../../node_modules/swiper/swiper-react.js");function t(l,t){const[,u]=e.useState({});e.useEffect((()=>{l&&(null!=t?t:["slideChange","afterInit","reachBeginning","reachEnd","autoplayStart","autoplayStop"]).forEach((e=>{l.on(e,(()=>{u({})}))}))}),[l]),e.useLayoutEffect((()=>{u({})}),[])}exports.useCarousel=function(e){const u=l.useSwiper();return t(u,e),u},exports.useCarouselInstance=function(l){const[u,n]=e.useState(null);return t(u,l),[u,n]},exports.useCarouselPeekEffect=function(l){const[t,u]=e.useState(null),n=e.useRef(null),[s,r]=e.useState(!1);return e.useEffect((()=>{var e,r,o,i,a,c,d;return"reset"===t?(null===(e=null==l?void 0:l.el)||void 0===e||e.classList.remove("peek-prev"),null===(r=null==l?void 0:l.el)||void 0===r||r.classList.remove("peek-next"),n.current=setTimeout((()=>{u(null)}),+((null==l?void 0:l.el.getAttribute("data-peekspeed"))||150))):t?s||(null==l||l.slideReset(0),"prev"===t?(null==l||l.slidePrev(0),null==l||l.slideNext(0)):(null==l||l.slideNext(0),null==l||l.slidePrev(0)),null===(o=null==l?void 0:l.el)||void 0===o||o.classList.add("peeking"),null===(i=null==l?void 0:l.el)||void 0===i||i.classList.add(`peek-${t}`)):(null===(a=null==l?void 0:l.el)||void 0===a||a.classList.remove("peeking"),null===(c=null==l?void 0:l.el)||void 0===c||c.classList.remove("peek-prev"),null===(d=null==l?void 0:l.el)||void 0===d||d.classList.remove("peek-next")),()=>{n.current&&clearTimeout(n.current)}}),[t]),e.useEffect((()=>{null==l||l.on("touchStart",(()=>{u("reset"),r(!0)})),null==l||l.on("touchEnd",(()=>{u("reset"),r(!1)}))}),[!!l]),[t,u]};
+"use strict";var e=require("react"),l=require("../../node_modules/swiper/swiper-react.js");function t(l,t){const[,u]=e.useState({});e.useEffect(()=>{l&&(null!=t?t:["slideChange","afterInit","reachBeginning","reachEnd","autoplayStart","autoplayStop","lock","unlock"]).forEach(e=>{l.on(e,()=>{u({})})})},[l]),e.useLayoutEffect(()=>{u({})},[])}exports.useCarousel=function(e){const u=l.useSwiper();return t(u,e),u},exports.useCarouselInstance=function(l){const[u,n]=e.useState(null);return t(u,l),[u,n]},exports.useCarouselPeekEffect=function(l){const[t,u]=e.useState(null),n=e.useRef(null),[s,r]=e.useState(!1);return e.useEffect(()=>{var e,r,o,i,a,c,d;return"reset"===t?(null===(e=null==l?void 0:l.el)||void 0===e||e.classList.remove("peek-prev"),null===(r=null==l?void 0:l.el)||void 0===r||r.classList.remove("peek-next"),n.current=setTimeout(()=>{u(null)},+((null==l?void 0:l.el.getAttribute("data-peekspeed"))||150))):t?s||(null==l||l.slideReset(0),"prev"===t?(null==l||l.slidePrev(0),null==l||l.slideNext(0)):(null==l||l.slideNext(0),null==l||l.slidePrev(0)),null===(o=null==l?void 0:l.el)||void 0===o||o.classList.add("peeking"),null===(i=null==l?void 0:l.el)||void 0===i||i.classList.add(`peek-${t}`)):(null===(a=null==l?void 0:l.el)||void 0===a||a.classList.remove("peeking"),null===(c=null==l?void 0:l.el)||void 0===c||c.classList.remove("peek-prev"),null===(d=null==l?void 0:l.el)||void 0===d||d.classList.remove("peek-next")),()=>{n.current&&clearTimeout(n.current)}},[t]),e.useEffect(()=>{null==l||l.on("touchStart",()=>{u("reset"),r(!0)}),null==l||l.on("touchEnd",()=>{u("reset"),r(!1)})},[!!l]),[t,u]};
 //# sourceMappingURL=hooks.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../../../src/components/carousel/hooks.ts"],"sourcesContent":["import { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { useSwiper } from 'swiper/react';\nimport { SwiperEvents } from 'swiper/types';\n\n/**\n * Hook to obtain and manage CarouselInstance\n * */\nexport function useCarouselInstance(events?: (keyof SwiperEvents)[]) {\n  const [carousel, setCarousel] = useState<CarouselInstance | null>(null);\n  useRefreshInstance(carousel, events);\n\n  return [carousel, setCarousel] as const;\n}\n\n/**\n * Hook to obtain CarouselInstance inside the Carousel component\n */\nexport function useCarousel(events?: (keyof SwiperEvents)[]) {\n  const carousel = useSwiper();\n  useRefreshInstance(carousel, events);\n\n  return carousel;\n}\n\n/**\n * Internal hook that forces re-renders on events like slideChange, so the carousel.realIndex is correct\n * https://github.com/nolimits4web/swiper/issues/5577\n */\nfunction useRefreshInstance(carousel: CarouselInstance, events?: (keyof SwiperEvents)[]) {\n  // force re-render\n  const [, setRerender] = useState({});\n  useEffect(() => {\n    if (carousel) {\n      // subscribe to carousel events to trigger re-render\n      (events ?? ['slideChange', 'afterInit', 'reachBeginning', 'reachEnd', 'autoplayStart', 'autoplayStop']).forEach(\n        (evt: keyof SwiperEvents) => {\n          carousel.on(evt, () => {\n            setRerender({});\n          });\n        },\n      );\n    }\n  }, [carousel]);\n  // once everything is rendered, make sure to re-render to have proper data (initialization)\n  useLayoutEffect(() => {\n    setRerender({});\n  }, []);\n}\n\n/**\n * Manage peek effect in the Carousel by adding classes to the Carousel instance\n */\nexport function useCarouselPeekEffect(carousel: CarouselInstance) {\n  const [peek, setPeek] = useState<'prev' | 'next' | 'reset' | null>(null);\n  const peekTimeout = useRef<NodeJS.Timeout | null>(null);\n  const [disabled, setDisabled] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (peek === 'reset') {\n      carousel?.el?.classList.remove('peek-prev');\n      carousel?.el?.classList.remove('peek-next');\n      peekTimeout.current = setTimeout(\n        () => {\n          setPeek(null);\n        },\n        +(carousel?.el.getAttribute('data-peekspeed') || 150),\n      ); // matches transitionDuration in the Carousel\n    } else if (peek) {\n      if (!disabled) {\n        // make sure prev/next slide is visible (loop)\n        carousel?.slideReset(0);\n        if (peek === 'prev') {\n          carousel?.slidePrev(0);\n          carousel?.slideNext(0);\n        } else {\n          carousel?.slideNext(0);\n          carousel?.slidePrev(0);\n        }\n        carousel?.el?.classList.add('peeking');\n        carousel?.el?.classList.add(`peek-${peek}`);\n      }\n    } else {\n      carousel?.el?.classList.remove('peeking');\n      carousel?.el?.classList.remove('peek-prev');\n      carousel?.el?.classList.remove('peek-next');\n    }\n\n    return () => {\n      if (peekTimeout.current) {\n        clearTimeout(peekTimeout.current);\n      }\n    };\n  }, [peek]);\n\n  /**\n   * Watch carousel instance\n   */\n  useEffect(() => {\n    // once carousel is being dragged, reset and disable peek effect\n    carousel?.on('touchStart', () => {\n      setPeek('reset');\n      setDisabled(true);\n    });\n    carousel?.on('touchEnd', () => {\n      setPeek('reset');\n      setDisabled(false);\n    });\n  }, [!!carousel]);\n\n  return [peek, setPeek] as const;\n}\n"],"names":["useRefreshInstance","carousel","events","setRerender","useState","useEffect","forEach","evt","on","useLayoutEffect","useSwiper","setCarousel","peek","setPeek","peekTimeout","useRef","disabled","setDisabled","_a","el","classList","remove","_b","current","setTimeout","getAttribute","slideReset","slidePrev","slideNext","_c","add","_d","_e","_f","_g","clearTimeout"],"mappings":"2FA6BA,SAASA,EAAmBC,EAA4BC,GAEtD,OAASC,GAAeC,EAAQA,SAAC,IACjCC,EAAAA,WAAU,KACJJ,IAEDC,QAAAA,EAAU,CAAC,cAAe,YAAa,iBAAkB,WAAY,gBAAiB,iBAAiBI,SACrGC,IACCN,EAASO,GAAGD,GAAK,KACfJ,EAAY,CAAA,EAAG,GACf,MAIP,CAACF,IAEJQ,EAAAA,iBAAgB,KACdN,EAAY,CAAA,EAAG,GACd,GACL,qBA9BM,SAAsBD,GAC1B,MAAMD,EAAWS,EAAAA,YAGjB,OAFAV,EAAmBC,EAAUC,GAEtBD,CACT,8BAfM,SAA8BC,GAClC,MAAOD,EAAUU,GAAeP,EAAAA,SAAkC,MAGlE,OAFAJ,EAAmBC,EAAUC,GAEtB,CAACD,EAAUU,EACpB,gCAwCM,SAAgCV,GACpC,MAAOW,EAAMC,GAAWT,EAAAA,SAA2C,MAC7DU,EAAcC,EAAMA,OAAwB,OAC3CC,EAAUC,GAAeb,EAAAA,UAAkB,GAsDlD,OApDAC,EAAAA,WAAU,uBA8BR,MA7Ba,UAATO,GACY,QAAdM,EAAAjB,aAAQ,EAARA,EAAUkB,UAAI,IAAAD,GAAAA,EAAAE,UAAUC,OAAO,aACjB,QAAdC,EAAArB,aAAQ,EAARA,EAAUkB,UAAI,IAAAG,GAAAA,EAAAF,UAAUC,OAAO,aAC/BP,EAAYS,QAAUC,YACpB,KACEX,EAAQ,KAAK,MAEbZ,aAAA,EAAAA,EAAUkB,GAAGM,aAAa,oBAAqB,OAE1Cb,EACJI,IAEHf,SAAAA,EAAUyB,WAAW,GACR,SAATd,GACFX,SAAAA,EAAU0B,UAAU,GACpB1B,SAAAA,EAAU2B,UAAU,KAEpB3B,SAAAA,EAAU2B,UAAU,GACpB3B,SAAAA,EAAU0B,UAAU,IAER,QAAdE,EAAA5B,aAAQ,EAARA,EAAUkB,UAAI,IAAAU,GAAAA,EAAAT,UAAUU,IAAI,WAChB,QAAZC,EAAA9B,aAAA,EAAAA,EAAUkB,UAAE,IAAAY,GAAAA,EAAEX,UAAUU,IAAI,QAAQlB,OAGxB,QAAdoB,EAAA/B,aAAQ,EAARA,EAAUkB,UAAI,IAAAa,GAAAA,EAAAZ,UAAUC,OAAO,WACjB,QAAdY,EAAAhC,aAAQ,EAARA,EAAUkB,UAAI,IAAAc,GAAAA,EAAAb,UAAUC,OAAO,aACjB,QAAda,EAAAjC,aAAQ,EAARA,EAAUkB,UAAI,IAAAe,GAAAA,EAAAd,UAAUC,OAAO,cAG1B,KACDP,EAAYS,SACdY,aAAarB,EAAYS,SAE5B,GACA,CAACX,IAKJP,EAAAA,WAAU,KAERJ,SAAAA,EAAUO,GAAG,cAAc,KACzBK,EAAQ,SACRI,GAAY,EAAK,IAEnBhB,SAAAA,EAAUO,GAAG,YAAY,KACvBK,EAAQ,SACRI,GAAY,EAAM,GAClB,GACD,GAAGhB,IAEC,CAACW,EAAMC,EAChB"}
+{"version":3,"file":"hooks.js","sources":["../../../../../src/components/carousel/hooks.ts"],"sourcesContent":["import { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { useSwiper } from 'swiper/react';\nimport { SwiperEvents } from 'swiper/types';\n\n/**\n * Hook to obtain and manage CarouselInstance\n * */\nexport function useCarouselInstance(events?: (keyof SwiperEvents)[]) {\n  const [carousel, setCarousel] = useState<CarouselInstance | null>(null);\n  useRefreshInstance(carousel, events);\n\n  return [carousel, setCarousel] as const;\n}\n\n/**\n * Hook to obtain CarouselInstance inside the Carousel component\n */\nexport function useCarousel(events?: (keyof SwiperEvents)[]) {\n  const carousel = useSwiper();\n  useRefreshInstance(carousel, events);\n\n  return carousel;\n}\n\n/**\n * Internal hook that forces re-renders on events like slideChange, so the carousel.realIndex is correct\n * https://github.com/nolimits4web/swiper/issues/5577\n */\nfunction useRefreshInstance(carousel: CarouselInstance, events?: (keyof SwiperEvents)[]) {\n  // force re-render\n  const [, setRerender] = useState({});\n  useEffect(() => {\n    if (carousel) {\n      // subscribe to carousel events to trigger re-render\n      (\n        events ?? [\n          'slideChange',\n          'afterInit',\n          'reachBeginning',\n          'reachEnd',\n          'autoplayStart',\n          'autoplayStop',\n          'lock',\n          'unlock',\n        ]\n      ).forEach((evt: keyof SwiperEvents) => {\n        carousel.on(evt, () => {\n          setRerender({});\n        });\n      });\n    }\n  }, [carousel]);\n  // once everything is rendered, make sure to re-render to have proper data (initialization)\n  useLayoutEffect(() => {\n    setRerender({});\n  }, []);\n}\n\n/**\n * Manage peek effect in the Carousel by adding classes to the Carousel instance\n */\nexport function useCarouselPeekEffect(carousel: CarouselInstance) {\n  const [peek, setPeek] = useState<'prev' | 'next' | 'reset' | null>(null);\n  const peekTimeout = useRef<NodeJS.Timeout | null>(null);\n  const [disabled, setDisabled] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (peek === 'reset') {\n      carousel?.el?.classList.remove('peek-prev');\n      carousel?.el?.classList.remove('peek-next');\n      peekTimeout.current = setTimeout(\n        () => {\n          setPeek(null);\n        },\n        +(carousel?.el.getAttribute('data-peekspeed') || 150),\n      ); // matches transitionDuration in the Carousel\n    } else if (peek) {\n      if (!disabled) {\n        // make sure prev/next slide is visible (loop)\n        carousel?.slideReset(0);\n        if (peek === 'prev') {\n          carousel?.slidePrev(0);\n          carousel?.slideNext(0);\n        } else {\n          carousel?.slideNext(0);\n          carousel?.slidePrev(0);\n        }\n        carousel?.el?.classList.add('peeking');\n        carousel?.el?.classList.add(`peek-${peek}`);\n      }\n    } else {\n      carousel?.el?.classList.remove('peeking');\n      carousel?.el?.classList.remove('peek-prev');\n      carousel?.el?.classList.remove('peek-next');\n    }\n\n    return () => {\n      if (peekTimeout.current) {\n        clearTimeout(peekTimeout.current);\n      }\n    };\n  }, [peek]);\n\n  /**\n   * Watch carousel instance\n   */\n  useEffect(() => {\n    // once carousel is being dragged, reset and disable peek effect\n    carousel?.on('touchStart', () => {\n      setPeek('reset');\n      setDisabled(true);\n    });\n    carousel?.on('touchEnd', () => {\n      setPeek('reset');\n      setDisabled(false);\n    });\n  }, [!!carousel]);\n\n  return [peek, setPeek] as const;\n}\n"],"names":["useRefreshInstance","carousel","events","setRerender","useState","useEffect","forEach","evt","on","useLayoutEffect","useSwiper","setCarousel","peek","setPeek","peekTimeout","useRef","disabled","setDisabled","_a","el","classList","remove","_b","current","setTimeout","getAttribute","slideReset","slidePrev","slideNext","_c","add","_d","_e","_f","_g","clearTimeout"],"mappings":"2FA6BA,SAASA,EAAmBC,EAA4BC,GAEtD,OAASC,GAAeC,EAAAA,SAAS,IACjCC,EAAAA,UAAU,KACJJ,IAGAC,QAAAA,EAAU,CACR,cACA,YACA,iBACA,WACA,gBACA,eACA,OACA,WAEFI,QAASC,IACTN,EAASO,GAAGD,EAAK,KACfJ,EAAY,CAAA,QAIjB,CAACF,IAEJQ,EAAAA,gBAAgB,KACdN,EAAY,CAAA,IACX,GACL,qBAvCM,SAAsBD,GAC1B,MAAMD,EAAWS,EAAAA,YAGjB,OAFAV,EAAmBC,EAAUC,GAEtBD,CACT,8BAfM,SAA8BC,GAClC,MAAOD,EAAUU,GAAeP,EAAAA,SAAkC,MAGlE,OAFAJ,EAAmBC,EAAUC,GAEtB,CAACD,EAAUU,EACpB,gCAiDM,SAAgCV,GACpC,MAAOW,EAAMC,GAAWT,EAAAA,SAA2C,MAC7DU,EAAcC,EAAAA,OAA8B,OAC3CC,EAAUC,GAAeb,EAAAA,UAAkB,GAsDlD,OApDAC,EAAAA,UAAU,uBA8BR,MA7Ba,UAATO,GACU,QAAZM,EAAAjB,aAAQ,EAARA,EAAUkB,UAAE,IAAAD,GAAAA,EAAEE,UAAUC,OAAO,aACnB,QAAZC,EAAArB,aAAQ,EAARA,EAAUkB,UAAE,IAAAG,GAAAA,EAAEF,UAAUC,OAAO,aAC/BP,EAAYS,QAAUC,WACpB,KACEX,EAAQ,UAERZ,aAAQ,EAARA,EAAUkB,GAAGM,aAAa,oBAAqB,OAE1Cb,EACJI,IAEHf,SAAAA,EAAUyB,WAAW,GACR,SAATd,GACFX,SAAAA,EAAU0B,UAAU,GACpB1B,SAAAA,EAAU2B,UAAU,KAEpB3B,SAAAA,EAAU2B,UAAU,GACpB3B,SAAAA,EAAU0B,UAAU,IAEV,QAAZE,EAAA5B,aAAQ,EAARA,EAAUkB,UAAE,IAAAU,GAAAA,EAAET,UAAUU,IAAI,WAChB,QAAZC,EAAA9B,aAAQ,EAARA,EAAUkB,UAAE,IAAAY,GAAAA,EAAEX,UAAUU,IAAI,QAAQlB,OAG1B,QAAZoB,EAAA/B,aAAQ,EAARA,EAAUkB,UAAE,IAAAa,GAAAA,EAAEZ,UAAUC,OAAO,WACnB,QAAZY,EAAAhC,aAAQ,EAARA,EAAUkB,UAAE,IAAAc,GAAAA,EAAEb,UAAUC,OAAO,aACnB,QAAZa,EAAAjC,aAAQ,EAARA,EAAUkB,UAAE,IAAAe,GAAAA,EAAEd,UAAUC,OAAO,cAG1B,KACDP,EAAYS,SACdY,aAAarB,EAAYS,WAG5B,CAACX,IAKJP,EAAAA,UAAU,KAERJ,SAAAA,EAAUO,GAAG,aAAc,KACzBK,EAAQ,SACRI,GAAY,KAEdhB,SAAAA,EAAUO,GAAG,WAAY,KACvBK,EAAQ,SACRI,GAAY,MAEb,GAAGhB,IAEC,CAACW,EAAMC,EAChB"}

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

@@ -45,8 +45,13 @@ export interface CarouselNavigationProps {
      * @default false
      */
     onBackground?: boolean;
+    /**
+     * Hide navigation buttons on case there are not enough slides for sliding
+     * @default false
+     */
+    autoHideNavigation?: boolean;
 }
 /**
  * Left & Right navigation arrows
  */
-export declare function CarouselNavigation({ carousel: carouselProp, peekEffect: propPeekEffect, prevButtonProps, prevIconProps, PrevIconComponent, nextButtonProps, nextIconProps, NextIconComponent, arrows, onBackground, }: CarouselNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function CarouselNavigation({ carousel: carouselProp, peekEffect: propPeekEffect, prevButtonProps, prevIconProps, PrevIconComponent, nextButtonProps, nextIconProps, NextIconComponent, arrows, onBackground, autoHideNavigation, }: CarouselNavigationProps): import("react/jsx-runtime").JSX.Element;

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/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))}))]})};
+"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"),i=require("../icon/stroke/ChevronRightIcon.js"),a=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:v=!0,onBackground:I=!1,autoHideNavigation:f=!1}){const h=o.useCarousel(),C=u||h,k="fade"!==(null==C?void 0:C.originalParams.effect)&&d,O=n.useTheme(),P=n.useMediaQuery(O.breakpoints.up("md")),q=x||{},{sx:y}=q,M=e.__rest(q,["sx"]),L=b||{},{sx:w}=L,B=e.__rest(L,["sx"]),[E,N]=o.useCarouselPeekEffect(C),S=g||(v?a.ArrowLeftIcon:t.ChevronLeftIcon),A=m||(v?c.ArrowRightIcon:i.ChevronRightIcon),R=s.useMemo(()=>Object.assign(Object.assign({position:"absolute",zIndex:"100",top:"50%",width:{xs:"32px",md:"40px",xl:"44px"},height:{xs:"32px",md:"40px",xl:"44px"},mt:{xs:"-16px",md:"-20px",xl:"-22px"},"& .MuiSvgIcon-root":{fontSize:{xs:"17px",xl:"20px"}}},l.getInteractiveStyle({color:"text.primary",borderColor:I?"transparent.transparent":"onSurface.os100",backgroundColor:I?"transparent.transparent":"surface.primary"},{backgroundColor:"surface.secondary"})),{"&.Mui-disabled":{color:"disabled.tertiary",borderColor:I?"transparent.transparent":"disabled.secondary",backgroundColor:I?"transparent.transparent":"disabled.secondary"}}),[]);return f&&(null==C?void 0:C.isLocked)?null:r.jsxs(r.Fragment,{children:[r.jsx(n.IconButton,Object.assign({disabled:C&&!C.originalParams.loop&&C.isBeginning,onClick:()=>{null==C||C.slidePrev(),k&&E&&N("reset")},onMouseEnter:()=>P&&k&&N("prev"),onMouseLeave:()=>k&&E&&N("reset"),sx:Object.assign(Object.assign(Object.assign({},R),{insetInlineStart:"16px"}),y),"aria-label":"Previous slide","aria-controls":"carousel",color:"surface",size:"medium"},M,{children:"rtl"===O.direction?r.jsx(A,Object.assign({},p)):r.jsx(S,Object.assign({},p))})),r.jsx(n.IconButton,Object.assign({disabled:C&&!C.originalParams.loop&&C.isEnd,onClick:()=>{null==C||C.slideNext(),k&&E&&N("reset")},onMouseEnter:()=>P&&k&&N("next"),onMouseLeave:()=>k&&E&&N("reset"),sx:Object.assign(Object.assign(Object.assign({},R),{insetInlineEnd:"16px"}),w),"aria-label":"Next slide","aria-controls":"carousel",color:"surface"},B,{children:"rtl"===O.direction?r.jsx(S,Object.assign({},j)):r.jsx(A,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, 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"}
+{"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   * Hide navigation buttons on case there are not enough slides for sliding\n   * @default false\n   */\n  autoHideNavigation?: 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  autoHideNavigation = 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      // responsive\n      width: { xs: '32px', md: '40px', xl: '44px' },\n      height: { xs: '32px', md: '40px', xl: '44px' },\n      // manual v-align, half the icon size\n      mt: { xs: '-16px', md: '-20px', xl: '-22px' },\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  // hide navigation when not needed\n  if (autoHideNavigation && carousel?.isLocked) {\n    return null;\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          insetInlineStart: '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          insetInlineEnd: '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","autoHideNavigation","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","width","xs","md","xl","height","mt","fontSize","getInteractiveStyle","color","borderColor","backgroundColor","isLocked","_jsxs","_jsx","IconButton","disabled","loop","isBeginning","onClick","slidePrev","onMouseEnter","onMouseLeave","insetInlineStart","size","children","direction","isEnd","slideNext","insetInlineEnd"],"mappings":"4ZAiEEA,SAAUC,EACVC,WAAYC,GAAiB,EAAKC,gBAClCA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,gBACjBA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,OACjBA,GAAS,EAAIC,aACbA,GAAe,EAAKC,mBACpBA,GAAqB,IAErB,MAAMC,EAAeC,EAAAA,cACfd,EAAWC,GAAgBY,EAC3BX,EAAiD,UAApCF,aAAQ,EAARA,EAAUe,eAAeC,SAAqBb,EAC3Dc,EAAQC,EAAAA,WACRC,EAAOC,EAAAA,cAAcH,EAAMI,YAAYC,GAAG,OAC1CC,EAA8BnB,GAAmB,IAA/CoB,GAAIC,KAAWC,EAAQC,EAAAA,OAAAJ,EAAzB,CAAA,OACAK,EAA8BrB,GAAmB,IAA/CiB,GAAIK,KAAWC,EAAQH,EAAAA,OAAAC,EAAzB,CAAA,QACCG,EAAMC,GAAWC,EAAAA,sBAAsBjC,GACxCkC,EAAW5B,IAAsBI,EAASyB,EAAAA,cAAgBC,EAAAA,iBAC1DC,EAAW5B,IAAsBC,EAAS4B,EAAAA,eAAiBC,EAAAA,kBAG3DC,EAAWC,EAAAA,QACf,IAAMC,OAAAC,OAAAD,OAAAC,OAAA,CAEJC,SAAU,WACVC,OAAQ,MACRC,IAAK,MAELC,MAAO,CAAEC,GAAI,OAAQC,GAAI,OAAQC,GAAI,QACrCC,OAAQ,CAAEH,GAAI,OAAQC,GAAI,OAAQC,GAAI,QAEtCE,GAAI,CAAEJ,GAAI,QAASC,GAAI,QAASC,GAAI,SACpC,qBAAsB,CACpBG,SAAU,CAAEL,GAAI,OAAQE,GAAI,UAG3BI,EAAAA,oBACD,CACEC,MAAO,eACPC,YAAa7C,EAAe,0BAA4B,kBACxD8C,gBAAiB9C,EAAe,0BAA4B,mBAE9D,CACE8C,gBAAiB,uBAEpB,CAED,iBAAkB,CAChBF,MAAO,oBACPC,YAAa7C,EAAe,0BAA4B,qBACxD8C,gBAAiB9C,EAAe,0BAA4B,wBAGhE,IAIF,OAAIC,IAAsBZ,aAAQ,EAARA,EAAU0D,UAC3B,KAGPC,EAAAA,2BACEC,MAACC,EAAAA,0BACCC,SAAU9D,IAAaA,EAASe,eAAegD,MAAQ/D,EAASgE,YAChEC,QAAS,KACPjE,SAAAA,EAAUkE,YACVhE,GAAc6B,GAAQC,EAAQ,UAEhCmC,aAAc,IAAMhD,GAAQjB,GAAc8B,EAAQ,QAClDoC,aAAc,IAAMlE,GAAc6B,GAAQC,EAAQ,SAClDR,GAAEkB,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACGH,IACH6B,iBAAkB,SACf5C,gBAEM,iBAAgB,gBACb,WACd8B,MAAM,UACNe,KAAK,UACD5C,EAAQ,CAAA6C,SAES,QAApBtD,EAAMuD,UAAsBZ,EAAAA,IAACvB,mBAAahC,IAAoBuD,EAAAA,IAAC1B,EAAQQ,OAAAC,OAAA,CAAA,EAAKtC,OAE/EuD,EAAAA,IAACC,EAAAA,WAAUnB,OAAAC,OAAA,CACTmB,SAAU9D,IAAaA,EAASe,eAAegD,MAAQ/D,EAASyE,MAChER,QAAS,KACPjE,SAAAA,EAAU0E,YACVxE,GAAc6B,GAAQC,EAAQ,UAEhCmC,aAAc,IAAMhD,GAAQjB,GAAc8B,EAAQ,QAClDoC,aAAc,IAAMlE,GAAc6B,GAAQC,EAAQ,SAClDR,GAAEkB,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACGH,GAAQ,CACXmC,eAAgB,SACb9C,GAAM,aAEA,aAAY,gBACT,WACd0B,MAAM,WACFzB,EAAQ,CAAAyC,SAES,QAApBtD,EAAMuD,UAAsBZ,EAAAA,IAAC1B,EAAQQ,OAAAC,OAAA,CAAA,EAAKnC,IAAoBoD,EAAAA,IAACvB,mBAAa7B,SAIrF"}

package/cjs/components/carousel/pagination.js

@@ -1,2 +1,2 @@
-"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;
+"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