@skodaflow/web-library 7.15.1 → 7.16.0

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","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,YAC/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,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","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]};
+"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      (\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,WAAU,KACJJ,IAGAC,QAAAA,EAAU,CACR,cACA,YACA,iBACA,WACA,gBACA,eACA,OACA,WAEFI,SAASC,IACTN,EAASO,GAAGD,GAAK,KACfJ,EAAY,CAAA,EAAG,GACf,GAEN,GACC,CAACF,IAEJQ,EAAAA,iBAAgB,KACdN,EAAY,CAAA,EAAG,GACd,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,WAAU,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,YACpB,KACEX,EAAQ,KAAK,MAEbZ,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,QAC3B,CACD,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.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"),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))}))]})};
+"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   * 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":"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"}
+{"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":"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"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../../../src/components/carousel/pagination.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useMemo, useState, useRef } from 'react';\nimport { Box, BoxProps, Button, ButtonProps, Slider, SliderProps, LinearProgressProps, CSSObject } from '@mui/material';\nimport { useCarousel } from './hooks';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { SliderContainer } from '@/src/materialui/slider/sliderContainer';\n\nexport interface CarouselPaginationVariantProps extends Omit<BoxProps<ElementType>, 'children' | 'position'> {\n  /**\n   * Carousel instance from useCarousel hook\n   */\n  carousel: CarouselInstance;\n}\nexport interface CarouselPaginationDotsProps extends CarouselPaginationVariantProps {\n  variant?: 'dots';\n  /**\n   * Properties applied to wrapper of dots\n   */\n  dotsWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to each dot\n   */\n  dotProps?: BoxProps<ElementType>;\n}\nexport interface CarouselPaginationFractionProps extends CarouselPaginationVariantProps {\n  variant?: 'fraction';\n  /**\n   * Properties applied to button used to render text\n   */\n  buttonProps?: ButtonProps;\n}\nexport interface CarouselPaginationLinesProps extends CarouselPaginationVariantProps {\n  variant?: 'lines';\n  /**\n   * Properties applied to each line\n   */\n  linesProps?: ButtonProps;\n  /**\n   * Show progress in active line instead\n   */\n  lineProgress?: number;\n  /**\n   * Properties applied to active line progress\n   */\n  lineProgressProps?: BoxProps<ElementType>;\n}\n/**\n * @deprecated use `slider` variant instead\n */\nexport interface CarouselPaginationProgressProps extends CarouselPaginationVariantProps {\n  variant?: 'progress';\n  /**\n   * @deprecated\n   */\n  progressProps?: LinearProgressProps;\n  /**\n   * Properties applied to Slider\n   */\n  sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationSliderProps extends CarouselPaginationVariantProps {\n  variant?: 'slider';\n  /**\n   * Properties applied to Slider\n   */\n  sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationScrollbarProps extends CarouselPaginationVariantProps {\n  variant?: 'scrollbar';\n  /**\n   * Properties applied to Slider\n   */\n  sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationBaseProps {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Append style to wrapper box to change position of control\n   * @default outside\n   */\n  position?: 'outside' | 'inside';\n}\nexport type CarouselPaginationProps = CarouselPaginationBaseProps &\n  (\n    | Omit<CarouselPaginationDotsProps, 'carousel'>\n    | Omit<CarouselPaginationFractionProps, 'carousel'>\n    | Omit<CarouselPaginationLinesProps, 'carousel'>\n    | Omit<CarouselPaginationProgressProps, 'carousel'>\n    | Omit<CarouselPaginationSliderProps, 'carousel'>\n    | Omit<CarouselPaginationScrollbarProps, 'carousel'>\n  );\n\n/**\n * Pagination controls\n */\nexport const CarouselPagination: React.FC<CarouselPaginationProps> = forwardRef(\n  ({ carousel: carouselProp, position, variant, sx: rawSx, ...rest }, ref) => {\n    const carouselHook = useCarousel();\n    const carousel = carouselProp || carouselHook;\n    // decide on component used\n    const VariantComponent = useMemo(() => {\n      switch (variant) {\n        case 'scrollbar':\n          return ScrollbarVariant;\n        case 'slider':\n        case 'progress':\n          return SliderVariant;\n        case 'fraction':\n          return FractionVariant;\n        case 'lines':\n          return LinesVariant;\n        case 'dots':\n          return DotsVariant;\n        default:\n          return DotsVariant;\n      }\n    }, [variant]);\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          ...rawSx,\n        };\n      } else {\n        return rawSx;\n      }\n    }, [position, JSON.stringify(rawSx)]);\n\n    return <VariantComponent carousel={carousel} sx={sx} ref={ref} position={position} {...rest} />;\n  },\n);\n\n/**\n * Dots variant (...)\n */\nexport const DotsVariant: React.FC<CarouselPaginationDotsProps> = forwardRef(\n  ({ carousel, dotsWrapperProps, dotProps, position, sx, ...rest }, ref) => {\n    const { sx: dotsWrapperSx, ...restDotsWrapper } = dotsWrapperProps ?? {};\n    const { sx: dotSx, ...restDot } = dotProps ?? {};\n\n    return (\n      <Box\n        sx={{\n          p: 2,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            borderRadius: '1000px',\n            py: 0.5,\n            px: 1,\n            gap: 0.5,\n            // ensure width does not change during transition\n            //  dots width space + gap space + extra active dot space + padding\n            width: `${(carousel?.slides.length || 0) * 12 + ((carousel?.slides.length || 1) - 1) * 4 + 4 + 16}px`,\n            // on image variant from Figma\n            ...(position === 'inside' && {\n              backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'surface.primary' : 'transparent.backdrop'),\n            }),\n            ...dotsWrapperSx,\n          }}\n          {...restDotsWrapper}\n        >\n          {[...Array(carousel?.slides.length || 0)].map((_, idx) => (\n            <Box\n              key={idx}\n              className={\n                !carousel?.originalParams.loop && carousel?.isEnd && idx === (carousel?.slides.length || 0) - 1\n                  ? 'active'\n                  : (!carousel?.isEnd || carousel.originalParams.loop) && idx === carousel?.realIndex\n                    ? 'active'\n                    : undefined\n              }\n              sx={{\n                p: '0',\n                width: '12px',\n                height: '12px',\n                // scale to 8px\n                transform: 'scale(0.6667)',\n                borderRadius: '100%',\n                backgroundColor: 'onSurface.os500',\n                transition: 'transform 0.3s ease-out, background-color 0.3s ease-out, margin 0.3s ease-out',\n                '&.active': {\n                  transform: 'scale(1)',\n                  backgroundColor: 'text.primary',\n                  margin: '0 2px',\n                },\n                ...dotSx,\n              }}\n              {...restDot}\n            />\n          ))}\n        </Box>\n      </Box>\n    );\n  },\n);\n\n/**\n * Fraction variant (text 1/3)\n */\nexport const FractionVariant: React.FC<CarouselPaginationFractionProps> = forwardRef(\n  ({ carousel, buttonProps, position, sx, ...rest }, ref) => {\n    const { sx: buttonSx, ...restButton } = buttonProps ?? {};\n\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          // space is needed for focus overflow\n          p: 2,\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Button\n          variant=\"text\"\n          aria-controls=\"carousel\"\n          sx={{\n            px: 2,\n            py: 0.25,\n            borderRadius: '4px',\n            // custom typography according to Figma (Pagination/Compact)\n            fontSize: '18px',\n            lineHeight: '28px',\n            letterSpacing: '0.02em',\n            ...getInteractiveStyle(\n              {\n                backgroundColor: 'transparent.backdrop',\n              },\n              {\n                backgroundColor: 'onSurface.os100',\n              },\n            ),\n            ...buttonSx,\n          }}\n          onClick={() =>\n            // at the end, slide to beginning\n            carousel?.isEnd && !carousel.originalParams.loop ? carousel?.slideTo(0) : carousel?.slideNext()\n          }\n          {...restButton}\n        >\n          <Box component=\"span\">\n            <Box component=\"span\" sx={{ fontWeight: '700', color: 'onSurface.os900' }}>\n              {`${(carousel?.realIndex || 0) + 1}`}\n            </Box>\n            <Box component=\"span\" sx={{ color: 'onSurface.os700', fontWeight: '400', mx: 0.5 }}>\n              {' / '}\n            </Box>\n            <Box component=\"span\" sx={{ color: 'onSurface.os700', fontWeight: '300' }}>\n              {`${carousel?.slides.length || 0}`}\n            </Box>\n          </Box>\n        </Button>\n      </Box>\n    );\n  },\n);\n\n/**\n * Lines variant (- - -)\n */\nexport const LinesVariant: React.FC<CarouselPaginationLinesProps> = forwardRef(\n  ({ carousel, sx, linesProps, lineProgress, lineProgressProps, position, ...rest }, ref) => {\n    const { sx: lineSx, ...lineRest } = linesProps ?? {};\n    const { sx: lineProgressSx, ...lineProgressRest } = lineProgressProps ?? {};\n\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: { xs: 'stretch', md: 'center' },\n          flexGrow: { xs: '1', md: 0 },\n          gap: 1,\n          // space is needed for focus overflow\n          p: 2,\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        {[...Array(carousel?.slides.length || 0)].map((_, idx) => {\n          const active =\n            (!carousel?.originalParams.loop && carousel?.isEnd && idx === (carousel?.slides.length || 0) - 1) ||\n            ((!carousel?.isEnd || carousel.originalParams.loop) && idx === carousel?.realIndex);\n          const seen = idx <= (carousel?.realIndex || 0);\n\n          return (\n            <Button\n              key={idx}\n              color=\"inherit\"\n              className={active ? 'active' : undefined}\n              sx={{\n                p: 0,\n                minHeight: '0',\n                height: active || seen ? '8px' : '4px',\n                borderRadius: active || seen ? '4px' : '2px',\n                width: { xs: '100%', md: '56px' },\n                justifyContent: 'flex-start',\n                ...getInteractiveStyle(\n                  {\n                    backgroundColor: 'surface.primary',\n                    '& .progress-line': {\n                      backgroundColor: 'brand.secondary',\n                    },\n                  },\n                  {\n                    backgroundColor: 'surface.secondary',\n                    '& .progress-line': {\n                      backgroundColor: 'brandHover.secondary',\n                    },\n                  },\n                ),\n                ...lineSx,\n              }}\n              aria-controls=\"carousel\"\n              onClick={() => carousel?.[carousel.originalParams.loop ? 'slideToLoop' : 'slideTo'](idx)}\n              {...lineRest}\n            >\n              <Box\n                sx={{\n                  // invisible hitbox expanding clickable area\n                  position: 'absolute',\n                  top: '50%',\n                  left: '0',\n                  right: '0',\n                  height: '24px', // Minimum a11y click area\n                  transform: 'translateY(-50%)',\n                  pointerEvents: 'auto',\n                }}\n              />\n              <Box sx={{ borderRadius: '4px', height: '100%', width: '100%', overflow: 'hidden' }}>\n                <Box\n                  className=\"progress-line\"\n                  role={active ? 'progress' : undefined} // Only the active one gets a role\n                  aria-valuenow={active ? lineProgress : undefined}\n                  aria-valuemin={0}\n                  aria-valuemax={100}\n                  sx={{\n                    opacity: lineProgress !== undefined || seen ? '1' : '0',\n                    width: '100%',\n                    backgroundColor: 'brand.secondary',\n                    height: '100%',\n                    transformOrigin: 'left',\n                    transform: `scaleX(${lineProgress !== undefined && active ? lineProgress / 100 : seen ? 1 : 0})`,\n                    transition: `${lineProgress !== undefined ? 'transform 300ms ease-in-out, ' : ''}opacity 300ms ease-out, background-color 300ms ease-out`,\n                    ...lineProgressSx,\n                  }}\n                  {...lineProgressRest}\n                />\n              </Box>\n            </Button>\n          );\n        })}\n      </Box>\n    );\n  },\n);\n\n/**\n * Slider variant (___)\n */\nexport const SliderVariant: React.FC<CarouselPaginationSliderProps> = forwardRef(\n  ({ carousel, sliderProps, sx, progressProps: __, position, ...rest }, ref) => {\n    const { sx: sliderSx, ...restSlider } = sliderProps ?? {};\n    // slider current value that might not match carousel progress\n    const [value, setValue] = useState<number>(Math.round((carousel?.progress || 0) * 100));\n    // watch user manipulating slider\n    const dragging = useRef<boolean>(false);\n    const [, setRerender] = useState({});\n    // monitor carousel progress to update slider value\n    useEffect(() => {\n      if (!dragging.current) {\n        setValue(Math.round((carousel?.progress || 0) * 100));\n      }\n    }, [carousel?.progress]);\n    // extra monitor of states\n    useEffect(() => {\n      if (carousel) {\n        const handleMove = () => {\n          if (!dragging.current) {\n            setRerender({});\n          }\n        };\n\n        // monitor of movement to immediately move thumb\n        carousel.on('sliderMove', handleMove);\n\n        return () => {\n          carousel.off('sliderMove', handleMove);\n        };\n      }\n    }, [carousel]);\n\n    return (\n      <Box sx={{ my: 2, ...sx }} ref={ref} {...rest}>\n        <Slider\n          value={value}\n          min={0}\n          max={100}\n          onChange={(_, newValue: number) => {\n            // prevent value updates from carousel progress\n            dragging.current = true;\n            // smoothly move carousel\n            carousel?.setProgress(newValue / 100, 150);\n            // update slider value\n            setValue(newValue);\n          }}\n          onChangeCommitted={() => {\n            // make sure to slide to correct position after user stop touching slider\n            carousel?.slideToClosest(300);\n            // enable changing value from carousel progress\n            dragging.current = false;\n          }}\n          sx={{\n            display: 'block',\n            height: '4px',\n            // restyle to less prominent variant\n            '.MuiSlider-rail': {\n              color: 'surface.primary',\n            },\n            '.MuiSlider-track': {\n              color: 'onSurface.os500',\n              // match transition speed of carousel\n              transitionDuration: `${carousel?.originalParams.speed ?? 300}ms`,\n            },\n            // hide control thumb\n            '.MuiSlider-thumb': {\n              display: 'none',\n            },\n            ...sliderSx,\n          }}\n          aria-controls=\"carousel\"\n          {...restSlider}\n        />\n      </Box>\n    );\n  },\n);\n\n/**\n * Scrollbar variant (_--)\n */\nexport const ScrollbarVariant: React.FC<CarouselPaginationSliderProps> = forwardRef(\n  ({ carousel, sliderProps, position, ...rest }, ref) => {\n    const { sx: sliderSx, ...restSlider } = sliderProps ?? {};\n    // watch states\n    const [carouselDragging, setCarouselDragging] = useState<boolean>(false);\n    const [, setRerender] = useState({});\n    // extra monitor of states\n    useEffect(() => {\n      if (carousel) {\n        const handleDragStart = () => setCarouselDragging(true);\n        const handleDragEnd = () => setCarouselDragging(false);\n        const handleResize = () => setRerender({});\n\n        // monitor of dragging to remove thumb transition for immediate feedback\n        carousel.on('touchStart', handleDragStart);\n        carousel.on('touchEnd', handleDragEnd);\n        // monitor resize to change size of the thumb\n        carousel.on('resize', handleResize);\n\n        return () => {\n          carousel.off('touchStart', handleDragStart);\n          carousel.off('touchEnd', handleDragEnd);\n          carousel.off('resize', handleResize);\n        };\n      }\n    }, [carousel]);\n    // calculate size of the thumb based on the visible content and full content\n    const thumbSize = useMemo<number>(() => {\n      if (carousel?.wrapperEl?.scrollWidth && carousel?.width) {\n        const size = Math.ceil(carousel?.width ** 2 / carousel?.wrapperEl?.scrollWidth);\n        return Math.max(size, 40);\n      }\n      return 40;\n    }, [carousel?.wrapperEl?.scrollWidth, carousel?.width]);\n\n    return (\n      <SliderVariant\n        ref={ref}\n        carousel={carousel}\n        component={SliderContainer}\n        thumbSize={thumbSize}\n        sliderProps={{\n          // prevent selection via keyboard, Carousel can be already controlled with Keyboard and we are not showing focus ring\n          tabIndex: -1,\n          // remove valueLabel tooltip above thumb\n          valueLabelDisplay: 'off',\n          sx: {\n            display: 'block',\n            height: '4px',\n            // restyle to match scrollbar\n            '.MuiSlider-rail, .MuiSlider-track': {\n              color: 'surface.primary',\n            },\n            '.MuiSlider-thumb': {\n              display: 'flex',\n              width: `${thumbSize}px`,\n              height: '4px',\n              border: 'none',\n              backgroundColor: 'onSurface.os500',\n              // match transition speed of carousel\n              ...(!carouselDragging && {\n                transition: `left ${carousel?.originalParams.speed ?? 300}ms ease-out`,\n              }),\n              // remove focus style\n              '&.Mui-focusVisible': {\n                boxShadow: 'none',\n                '&:before': {\n                  content: 'none',\n                },\n              },\n            },\n            ...sliderSx,\n          },\n          ...restSlider,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["CarouselPagination","forwardRef","_a","ref","carousel","carouselProp","position","variant","sx","rawSx","rest","__rest","carouselHook","useCarousel","VariantComponent","useMemo","ScrollbarVariant","SliderVariant","FractionVariant","LinesVariant","DotsVariant","Object","assign","zIndex","bottom","left","right","JSON","stringify","_jsx","dotsWrapperProps","dotProps","_b","dotsWrapperSx","restDotsWrapper","_c","dotSx","restDot","Box","p","display","alignItems","justifyContent","children","borderRadius","py","px","gap","width","slides","length","backgroundColor","theme","palette","mode","Array","map","_","idx","className","originalParams","loop","isEnd","realIndex","undefined","height","transform","transition","margin","buttonProps","buttonSx","restButton","Button","fontSize","lineHeight","letterSpacing","getInteractiveStyle","onClick","slideTo","slideNext","_jsxs","component","fontWeight","color","mx","linesProps","lineProgress","lineProgressProps","lineSx","lineRest","lineProgressSx","lineProgressRest","xs","md","flexGrow","active","seen","minHeight","top","pointerEvents","overflow","role","opacity","transformOrigin","sliderProps","progressProps","__","sliderSx","restSlider","value","setValue","useState","Math","round","progress","dragging","useRef","setRerender","useEffect","current","handleMove","on","off","my","Slider","min","max","onChange","newValue","setProgress","onChangeCommitted","slideToClosest","transitionDuration","speed","_d","carouselDragging","setCarouselDragging","handleDragStart","handleDragEnd","handleResize","thumbSize","wrapperEl","scrollWidth","size","ceil","SliderContainer","tabIndex","valueLabelDisplay","border","boxShadow","content"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../../../src/components/carousel/pagination.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useMemo, useState, useRef } from 'react';\nimport { Box, BoxProps, Button, ButtonProps, Slider, SliderProps, LinearProgressProps, CSSObject } from '@mui/material';\nimport { useCarousel } from './hooks';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { SliderContainer } from '@/src/materialui/slider/sliderContainer';\n\nexport interface CarouselPaginationVariantProps extends Omit<BoxProps<ElementType>, 'children' | 'position'> {\n  /**\n   * Carousel instance from useCarousel hook\n   */\n  carousel: CarouselInstance;\n}\nexport interface CarouselPaginationDotsProps extends CarouselPaginationVariantProps {\n  variant?: 'dots';\n  /**\n   * Properties applied to wrapper of dots\n   */\n  dotsWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to each dot\n   */\n  dotProps?: BoxProps<ElementType>;\n}\nexport interface CarouselPaginationFractionProps extends CarouselPaginationVariantProps {\n  variant?: 'fraction';\n  /**\n   * Properties applied to button used to render text\n   */\n  buttonProps?: ButtonProps;\n}\nexport interface CarouselPaginationLinesProps extends CarouselPaginationVariantProps {\n  variant?: 'lines';\n  /**\n   * Properties applied to each line\n   */\n  linesProps?: ButtonProps;\n  /**\n   * Show progress in active line instead\n   */\n  lineProgress?: number;\n  /**\n   * Properties applied to active line progress\n   */\n  lineProgressProps?: BoxProps<ElementType>;\n}\n/**\n * @deprecated use `slider` variant instead\n */\nexport interface CarouselPaginationProgressProps extends CarouselPaginationVariantProps {\n  variant?: 'progress';\n  /**\n   * @deprecated\n   */\n  progressProps?: LinearProgressProps;\n  /**\n   * Properties applied to Slider\n   */\n  sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationSliderProps extends CarouselPaginationVariantProps {\n  variant?: 'slider';\n  /**\n   * Properties applied to Slider\n   */\n  sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationScrollbarProps extends CarouselPaginationVariantProps {\n  variant?: 'scrollbar';\n  /**\n   * Properties applied to Slider\n   */\n  sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationBaseProps {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Append style to wrapper box to change position of control\n   * @default outside\n   */\n  position?: 'outside' | 'inside';\n}\nexport type CarouselPaginationProps = CarouselPaginationBaseProps &\n  (\n    | Omit<CarouselPaginationDotsProps, 'carousel'>\n    | Omit<CarouselPaginationFractionProps, 'carousel'>\n    | Omit<CarouselPaginationLinesProps, 'carousel'>\n    | Omit<CarouselPaginationProgressProps, 'carousel'>\n    | Omit<CarouselPaginationSliderProps, 'carousel'>\n    | Omit<CarouselPaginationScrollbarProps, 'carousel'>\n  );\n\n/**\n * Pagination controls\n */\nexport const CarouselPagination: React.FC<CarouselPaginationProps> = forwardRef(\n  ({ carousel: carouselProp, position, variant, sx: rawSx, ...rest }, ref) => {\n    const carouselHook = useCarousel();\n    const carousel = carouselProp || carouselHook;\n    // decide on component used\n    const VariantComponent = useMemo(() => {\n      switch (variant) {\n        case 'scrollbar':\n          return ScrollbarVariant;\n        case 'slider':\n        case 'progress':\n          return SliderVariant;\n        case 'fraction':\n          return FractionVariant;\n        case 'lines':\n          return LinesVariant;\n        case 'dots':\n          return DotsVariant;\n        default:\n          return DotsVariant;\n      }\n    }, [variant]);\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          ...rawSx,\n        };\n      } else {\n        return rawSx;\n      }\n    }, [position, JSON.stringify(rawSx)]);\n\n    return <VariantComponent carousel={carousel} sx={sx} ref={ref} position={position} {...rest} />;\n  },\n);\n\n/**\n * Dots variant (...)\n */\nexport const DotsVariant: React.FC<CarouselPaginationDotsProps> = forwardRef(\n  ({ carousel, dotsWrapperProps, dotProps, position, sx, ...rest }, ref) => {\n    const { sx: dotsWrapperSx, ...restDotsWrapper } = dotsWrapperProps ?? {};\n    const { sx: dotSx, ...restDot } = dotProps ?? {};\n\n    return (\n      <Box\n        sx={{\n          p: 2,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            borderRadius: '1000px',\n            py: 0.5,\n            px: 1,\n            gap: 0.5,\n            // ensure width does not change during transition\n            //  dots width space + gap space + extra active dot space + padding\n            width: `${(carousel?.slides.length || 0) * 12 + ((carousel?.slides.length || 1) - 1) * 4 + 4 + 16}px`,\n            // on image variant from Figma\n            ...(position === 'inside' && {\n              backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'surface.primary' : 'transparent.backdrop'),\n            }),\n            ...dotsWrapperSx,\n          }}\n          {...restDotsWrapper}\n        >\n          {[...Array(carousel?.slides.length || 0)].map((_, idx) => (\n            <Box\n              key={idx}\n              className={\n                !carousel?.originalParams.loop && carousel?.isEnd && idx === (carousel?.slides.length || 0) - 1\n                  ? 'active'\n                  : (!carousel?.isEnd || carousel.originalParams.loop) && idx === carousel?.realIndex\n                    ? 'active'\n                    : undefined\n              }\n              sx={{\n                p: '0',\n                width: '12px',\n                height: '12px',\n                // scale to 8px\n                transform: 'scale(0.6667)',\n                borderRadius: '100%',\n                backgroundColor: 'onSurface.os500',\n                transition: 'transform 0.3s ease-out, background-color 0.3s ease-out, margin 0.3s ease-out',\n                '&.active': {\n                  transform: 'scale(1)',\n                  backgroundColor: 'text.primary',\n                  margin: '0 2px',\n                },\n                ...dotSx,\n              }}\n              {...restDot}\n            />\n          ))}\n        </Box>\n      </Box>\n    );\n  },\n);\n\n/**\n * Fraction variant (text 1/3)\n */\nexport const FractionVariant: React.FC<CarouselPaginationFractionProps> = forwardRef(\n  ({ carousel, buttonProps, position, sx, ...rest }, ref) => {\n    const { sx: buttonSx, ...restButton } = buttonProps ?? {};\n\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          // space is needed for focus overflow\n          p: 2,\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <Button\n          variant=\"text\"\n          aria-controls=\"carousel\"\n          sx={{\n            px: 2,\n            py: 0.25,\n            borderRadius: '4px',\n            // custom typography according to Figma (Pagination/Compact)\n            fontSize: '18px',\n            lineHeight: '28px',\n            letterSpacing: '0.02em',\n            ...getInteractiveStyle(\n              {\n                backgroundColor: 'transparent.backdrop',\n              },\n              {\n                backgroundColor: 'onSurface.os100',\n              },\n            ),\n            ...buttonSx,\n          }}\n          onClick={() =>\n            // at the end, slide to beginning\n            carousel?.isEnd && !carousel.originalParams.loop ? carousel?.slideTo(0) : carousel?.slideNext()\n          }\n          {...restButton}\n        >\n          <Box component=\"span\">\n            <Box component=\"span\" sx={{ fontWeight: '700', color: 'onSurface.os900' }}>\n              {`${(carousel?.realIndex || 0) + 1}`}\n            </Box>\n            <Box component=\"span\" sx={{ color: 'onSurface.os700', fontWeight: '400', mx: 0.5 }}>\n              {' / '}\n            </Box>\n            <Box component=\"span\" sx={{ color: 'onSurface.os700', fontWeight: '300' }}>\n              {`${carousel?.slides.length || 0}`}\n            </Box>\n          </Box>\n        </Button>\n      </Box>\n    );\n  },\n);\n\n/**\n * Lines variant (- - -)\n */\nexport const LinesVariant: React.FC<CarouselPaginationLinesProps> = forwardRef(\n  ({ carousel, sx, linesProps, lineProgress, lineProgressProps, position, ...rest }, ref) => {\n    const { sx: lineSx, ...lineRest } = linesProps ?? {};\n    const { sx: lineProgressSx, ...lineProgressRest } = lineProgressProps ?? {};\n\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: { xs: 'stretch', md: 'center' },\n          flexGrow: { xs: '1', md: 0 },\n          gap: 1,\n          // space is needed for focus overflow\n          p: 2,\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        {[...Array(carousel?.slides.length || 0)].map((_, idx) => {\n          const active =\n            (!carousel?.originalParams.loop && carousel?.isEnd && idx === (carousel?.slides.length || 0) - 1) ||\n            ((!carousel?.isEnd || carousel.originalParams.loop) && idx === carousel?.realIndex);\n          const seen = idx <= (carousel?.realIndex || 0);\n\n          return (\n            <Button\n              key={idx}\n              color=\"inherit\"\n              className={active ? 'active' : undefined}\n              sx={{\n                p: 0,\n                minHeight: '0',\n                height: active || seen ? '8px' : '4px',\n                borderRadius: active || seen ? '4px' : '2px',\n                width: { xs: '100%', md: '56px' },\n                justifyContent: 'flex-start',\n                ...getInteractiveStyle(\n                  {\n                    backgroundColor: 'surface.primary',\n                    '& .progress-line': {\n                      backgroundColor: 'brand.secondary',\n                    },\n                  },\n                  {\n                    backgroundColor: 'surface.secondary',\n                    '& .progress-line': {\n                      backgroundColor: 'brandHover.secondary',\n                    },\n                  },\n                ),\n                ...lineSx,\n              }}\n              aria-controls=\"carousel\"\n              onClick={() => carousel?.[carousel.originalParams.loop ? 'slideToLoop' : 'slideTo'](idx)}\n              {...lineRest}\n            >\n              <Box\n                sx={{\n                  // invisible hitbox expanding clickable area\n                  position: 'absolute',\n                  top: '50%',\n                  left: '0',\n                  right: '0',\n                  height: '24px', // Minimum a11y click area\n                  transform: 'translateY(-50%)',\n                  pointerEvents: 'auto',\n                }}\n              />\n              <Box sx={{ borderRadius: '4px', height: '100%', width: '100%', overflow: 'hidden' }}>\n                <Box\n                  className=\"progress-line\"\n                  role={active ? 'progress' : undefined} // Only the active one gets a role\n                  aria-valuenow={active ? lineProgress : undefined}\n                  aria-valuemin={0}\n                  aria-valuemax={100}\n                  sx={{\n                    opacity: lineProgress !== undefined || seen ? '1' : '0',\n                    width: '100%',\n                    backgroundColor: 'brand.secondary',\n                    height: '100%',\n                    transformOrigin: 'left',\n                    transform: `scaleX(${lineProgress !== undefined && active ? lineProgress / 100 : seen ? 1 : 0})`,\n                    transition: `${lineProgress !== undefined ? 'transform 300ms ease-in-out, ' : ''}opacity 300ms ease-out, background-color 300ms ease-out`,\n                    ...lineProgressSx,\n                  }}\n                  {...lineProgressRest}\n                />\n              </Box>\n            </Button>\n          );\n        })}\n      </Box>\n    );\n  },\n);\n\n/**\n * Slider variant (___)\n */\nexport const SliderVariant: React.FC<CarouselPaginationSliderProps> = forwardRef(\n  ({ carousel, sliderProps, sx, progressProps: __, position, ...rest }, ref) => {\n    const { sx: sliderSx, ...restSlider } = sliderProps ?? {};\n    // slider current value that might not match carousel progress\n    const [value, setValue] = useState<number>(Math.round((carousel?.progress || 0) * 100));\n    // watch user manipulating slider\n    const dragging = useRef<boolean>(false);\n    const [, setRerender] = useState({});\n    // monitor carousel progress to update slider value\n    useEffect(() => {\n      if (!dragging.current) {\n        setValue(Math.round((carousel?.progress || 0) * 100));\n      }\n    }, [carousel?.progress]);\n    // extra monitor of states\n    useEffect(() => {\n      if (carousel) {\n        const handleMove = () => {\n          if (!dragging.current) {\n            setRerender({});\n          }\n        };\n\n        // monitor of movement to immediately move thumb\n        carousel.on('sliderMove', handleMove);\n\n        return () => {\n          carousel.off('sliderMove', handleMove);\n        };\n      }\n    }, [carousel]);\n\n    return (\n      <Box sx={{ my: 2, ...sx }} ref={ref} {...rest}>\n        <Slider\n          value={value}\n          min={0}\n          max={100}\n          onChange={(_, newValue: number) => {\n            // prevent value updates from carousel progress\n            dragging.current = true;\n            // smoothly move carousel\n            carousel?.setProgress(newValue / 100, 150);\n            // update slider value\n            setValue(newValue);\n          }}\n          onChangeCommitted={() => {\n            // make sure to slide to correct position after user stop touching slider\n            carousel?.slideToClosest(300);\n            // enable changing value from carousel progress\n            dragging.current = false;\n          }}\n          sx={{\n            display: 'block',\n            height: '4px',\n            // restyle to less prominent variant\n            '.MuiSlider-rail': {\n              color: 'surface.primary',\n            },\n            '.MuiSlider-track': {\n              color: 'onSurface.os500',\n              // match transition speed of carousel\n              transitionDuration: `${carousel?.originalParams.speed ?? 300}ms`,\n            },\n            // hide control thumb\n            '.MuiSlider-thumb': {\n              display: 'none',\n            },\n            ...sliderSx,\n          }}\n          aria-controls=\"carousel\"\n          {...restSlider}\n        />\n      </Box>\n    );\n  },\n);\n\n/**\n * Scrollbar variant (_--)\n */\nexport const ScrollbarVariant: React.FC<CarouselPaginationSliderProps> = forwardRef(\n  ({ carousel, sliderProps, position, ...rest }, ref) => {\n    const { sx: sliderSx, ...restSlider } = sliderProps ?? {};\n    // watch states\n    const [carouselDragging, setCarouselDragging] = useState<boolean>(false);\n    const [, setRerender] = useState({});\n    // extra monitor of states\n    useEffect(() => {\n      if (carousel) {\n        const handleDragStart = () => setCarouselDragging(true);\n        const handleDragEnd = () => setCarouselDragging(false);\n        const handleResize = () => setRerender({});\n\n        // monitor of dragging to remove thumb transition for immediate feedback\n        carousel.on('touchStart', handleDragStart);\n        carousel.on('touchEnd', handleDragEnd);\n        // monitor resize to change size of the thumb\n        carousel.on('resize', handleResize);\n\n        return () => {\n          carousel.off('touchStart', handleDragStart);\n          carousel.off('touchEnd', handleDragEnd);\n          carousel.off('resize', handleResize);\n        };\n      }\n    }, [carousel]);\n    // calculate size of the thumb based on the visible content and full content\n    const thumbSize = useMemo<number>(() => {\n      if (carousel?.wrapperEl?.scrollWidth && carousel?.width) {\n        const size = Math.ceil(carousel?.width ** 2 / carousel?.wrapperEl?.scrollWidth);\n        return Math.max(size, 40);\n      }\n      return 40;\n    }, [carousel?.wrapperEl?.scrollWidth, carousel?.width]);\n\n    return (\n      <SliderVariant\n        ref={ref}\n        carousel={carousel}\n        component={SliderContainer}\n        thumbSize={thumbSize}\n        sliderProps={{\n          // prevent selection via keyboard, Carousel can be already controlled with Keyboard and we are not showing focus ring\n          tabIndex: -1,\n          // remove valueLabel tooltip above thumb\n          valueLabelDisplay: 'off',\n          sx: {\n            display: 'block',\n            height: '4px',\n            // restyle to match scrollbar\n            '.MuiSlider-rail, .MuiSlider-track': {\n              color: 'surface.primary',\n            },\n            '.MuiSlider-thumb': {\n              display: 'flex',\n              width: `${thumbSize}px`,\n              height: '4px',\n              border: 'none',\n              backgroundColor: 'onSurface.os500',\n              // match transition speed of carousel\n              ...(!carouselDragging && {\n                transition: `left ${carousel?.originalParams.speed ?? 300}ms ease-out`,\n              }),\n              // remove focus style\n              '&.Mui-focusVisible': {\n                boxShadow: 'none',\n                '&:before': {\n                  content: 'none',\n                },\n              },\n            },\n            ...sliderSx,\n          },\n          ...restSlider,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["CarouselPagination","forwardRef","_a","ref","carousel","carouselProp","position","variant","sx","rawSx","rest","__rest","carouselHook","useCarousel","VariantComponent","useMemo","ScrollbarVariant","SliderVariant","FractionVariant","LinesVariant","DotsVariant","Object","assign","zIndex","bottom","left","right","JSON","stringify","_jsx","dotsWrapperProps","dotProps","_b","dotsWrapperSx","restDotsWrapper","_c","dotSx","restDot","Box","p","display","alignItems","justifyContent","children","borderRadius","py","px","gap","width","slides","length","backgroundColor","theme","palette","mode","Array","map","_","idx","className","originalParams","loop","isEnd","realIndex","undefined","height","transform","transition","margin","buttonProps","buttonSx","restButton","Button","fontSize","lineHeight","letterSpacing","getInteractiveStyle","onClick","slideTo","slideNext","_jsxs","component","fontWeight","color","mx","linesProps","lineProgress","lineProgressProps","lineSx","lineRest","lineProgressSx","lineProgressRest","xs","md","flexGrow","active","seen","minHeight","top","pointerEvents","overflow","role","opacity","transformOrigin","sliderProps","progressProps","__","sliderSx","restSlider","value","setValue","useState","Math","round","progress","dragging","useRef","setRerender","useEffect","current","handleMove","on","off","my","Slider","min","max","onChange","newValue","setProgress","onChangeCommitted","slideToClosest","transitionDuration","speed","_d","carouselDragging","setCarouselDragging","handleDragStart","handleDragEnd","handleResize","thumbSize","wrapperEl","scrollWidth","size","ceil","SliderContainer","tabIndex","valueLabelDisplay","border","boxShadow","content"],"mappings":"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"}

package/cjs/components/carousel/slide.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),i=require("react"),t=require("@mui/material"),s=require("../../node_modules/swiper/swiper-react.js");const a=i.forwardRef(((i,a)=>{var{children:o,sx:n}=i,l=e.__rest(i,["children","sx"]);const{originalParams:d}=s.useSwiper();return r.jsx(t.Box,Object.assign({component:s.SwiperSlide,ref:a},l,{sx:Object.assign({display:"block",width:"auto"===d.slidesPerView?"auto":"100%",height:d.autoHeight?"auto":"100%",position:"relative",zIndex:"50",transform:"translate3d(0px, 0, 0)",flexShrink:"0",transitionProperty:"fade"===d.effect?"opacity":"transform","& img":{display:"block",maxWidth:"100%"}},n),children:o}))}));a.displayName="SwiperSlide",exports.CarouselSlide=a;
+"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),i=require("react"),t=require("@mui/material"),s=require("../../node_modules/swiper/swiper-react.js");const a=i.forwardRef((i,a)=>{var{children:o,sx:n}=i,l=e.__rest(i,["children","sx"]);const{originalParams:d}=s.useSwiper();return r.jsx(t.Box,Object.assign({component:s.SwiperSlide,ref:a},l,{sx:Object.assign({display:"block",width:"auto"===d.slidesPerView?"auto":"100%",height:d.autoHeight?"auto":"100%",position:"relative",zIndex:"50",transform:"translate3d(0px, 0, 0)",flexShrink:"0",transitionProperty:"fade"===d.effect?"opacity":"transform","& img":{display:"block",maxWidth:"100%"}},n),children:o}))});a.displayName="SwiperSlide",exports.CarouselSlide=a;
 //# sourceMappingURL=slide.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slide.js","sources":["../../../../../src/components/carousel/slide.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { SwiperSlide, SwiperSlideProps, useSwiper } from 'swiper/react';\n\nexport interface CarouselSlideProps\n  extends Omit<SwiperSlideProps, 'children'>,\n    Omit<BoxProps, keyof SwiperSlideProps | 'component'> {\n  children?: BoxProps['children'];\n}\n\n/**\n * One slide in the carousel\n */\nexport const CarouselSlide: React.FC<CarouselSlideProps> = forwardRef(({ children, sx, ...rest }, ref) => {\n  const { originalParams: swiperOptions } = useSwiper();\n\n  return (\n    <Box\n      component={SwiperSlide}\n      ref={ref}\n      {...rest}\n      sx={{\n        display: 'block',\n        width: swiperOptions.slidesPerView === 'auto' ? 'auto' : '100%',\n        height: swiperOptions.autoHeight ? 'auto' : '100%',\n        position: 'relative',\n        zIndex: '50',\n        transform: 'translate3d(0px, 0, 0)',\n        flexShrink: '0',\n        transitionProperty: swiperOptions.effect === 'fade' ? 'opacity' : 'transform',\n        '& img': {\n          display: 'block',\n          maxWidth: '100%',\n        },\n        ...sx,\n      }}\n    >\n      {children}\n    </Box>\n  );\n});\nCarouselSlide.displayName = 'SwiperSlide';\n"],"names":["CarouselSlide","forwardRef","_a","ref","children","sx","rest","__rest","originalParams","swiperOptions","useSwiper","_jsx","Box","Object","assign","component","SwiperSlide","display","width","slidesPerView","height","autoHeight","position","zIndex","transform","flexShrink","transitionProperty","effect","maxWidth","displayName"],"mappings":"wKAaO,MAAMA,EAA8CC,EAAAA,YAAW,CAACC,EAA2BC,SAA3BC,SAAEA,EAAQC,GAAEA,GAAEH,EAAKI,EAAIC,EAAAA,OAAAL,EAAvB,mBACrE,MAAQM,eAAgBC,GAAkBC,cAE1C,OACEC,EAAAA,IAACC,MAAGC,OAAAC,OAAA,CACFC,UAAWC,EAAAA,YACXb,IAAKA,GACDG,GACJD,GAAEQ,OAAAC,OAAA,CACAG,QAAS,QACTC,MAAuC,SAAhCT,EAAcU,cAA2B,OAAS,OACzDC,OAAQX,EAAcY,WAAa,OAAS,OAC5CC,SAAU,WACVC,OAAQ,KACRC,UAAW,yBACXC,WAAY,IACZC,mBAA6C,SAAzBjB,EAAckB,OAAoB,UAAY,YAClE,QAAS,CACPV,QAAS,QACTW,SAAU,SAETvB,GAAED,SAGNA,IACG,IAGVJ,EAAc6B,YAAc"}
+{"version":3,"file":"slide.js","sources":["../../../../../src/components/carousel/slide.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { SwiperSlide, SwiperSlideProps, useSwiper } from 'swiper/react';\n\nexport interface CarouselSlideProps\n  extends Omit<SwiperSlideProps, 'children'>,\n    Omit<BoxProps, keyof SwiperSlideProps | 'component'> {\n  children?: BoxProps['children'];\n}\n\n/**\n * One slide in the carousel\n */\nexport const CarouselSlide: React.FC<CarouselSlideProps> = forwardRef(({ children, sx, ...rest }, ref) => {\n  const { originalParams: swiperOptions } = useSwiper();\n\n  return (\n    <Box\n      component={SwiperSlide}\n      ref={ref}\n      {...rest}\n      sx={{\n        display: 'block',\n        width: swiperOptions.slidesPerView === 'auto' ? 'auto' : '100%',\n        height: swiperOptions.autoHeight ? 'auto' : '100%',\n        position: 'relative',\n        zIndex: '50',\n        transform: 'translate3d(0px, 0, 0)',\n        flexShrink: '0',\n        transitionProperty: swiperOptions.effect === 'fade' ? 'opacity' : 'transform',\n        '& img': {\n          display: 'block',\n          maxWidth: '100%',\n        },\n        ...sx,\n      }}\n    >\n      {children}\n    </Box>\n  );\n});\nCarouselSlide.displayName = 'SwiperSlide';\n"],"names":["CarouselSlide","forwardRef","_a","ref","children","sx","rest","__rest","originalParams","swiperOptions","useSwiper","_jsx","Box","Object","assign","component","SwiperSlide","display","width","slidesPerView","height","autoHeight","position","zIndex","transform","flexShrink","transitionProperty","effect","maxWidth","displayName"],"mappings":"wKAaO,MAAMA,EAA8CC,EAAAA,WAAW,CAACC,EAA2BC,SAA3BC,SAAEA,EAAQC,GAAEA,GAAEH,EAAKI,EAAIC,EAAAA,OAAAL,EAAvB,mBACrE,MAAQM,eAAgBC,GAAkBC,cAE1C,OACEC,EAAAA,IAACC,MAAGC,OAAAC,OAAA,CACFC,UAAWC,EAAAA,YACXb,IAAKA,GACDG,GACJD,GAAEQ,OAAAC,OAAA,CACAG,QAAS,QACTC,MAAuC,SAAhCT,EAAcU,cAA2B,OAAS,OACzDC,OAAQX,EAAcY,WAAa,OAAS,OAC5CC,SAAU,WACVC,OAAQ,KACRC,UAAW,yBACXC,WAAY,IACZC,mBAA6C,SAAzBjB,EAAckB,OAAoB,UAAY,YAClE,QAAS,CACPV,QAAS,QACTW,SAAU,SAETvB,GAAED,SAGNA,OAIPJ,EAAc6B,YAAc"}

package/cjs/components/checkbox/checkbox.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),t=require("react"),o=require("@mui/material"),i=require("../common/styled/formControlLabelStyled.js");const a=t.forwardRef(((a,l)=>{var{error:n}=a,s=e.__rest(a,["error"]);const{label:c,defaultChecked:u,indeterminate:h,onChange:b,disabled:f}=s,[m,x]=t.useState(u||!1),g=r.jsx(d,{children:r.jsx(o.Checkbox,Object.assign({},s,{defaultChecked:u,indeterminate:h&&m,disabled:f,color:n?"error":void 0,ref:l,onChange:e=>{x(e.target.checked),"function"==typeof b&&b(e,e.target.checked)}}))});return r.jsx(o.FormGroup,{children:r.jsx(i.default,{control:g,label:c,disabled:f,error:n})})})),d=o.styled("div",{shouldForwardProp:e=>"error"!==e&&"disabled"!==e})((()=>{let e={};return e={display:"flex","& + .MuiTypography-root":{"& a":{color:"inherit",textDecoration:"underline",fontWeight:"700"},"& *":{margin:0}}},e}));exports.Checkbox=a;
+"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),t=require("react"),o=require("@mui/material"),i=require("../common/styled/formControlLabelStyled.js");const a=t.forwardRef((a,l)=>{var{error:n}=a,s=e.__rest(a,["error"]);const{label:c,defaultChecked:u,indeterminate:h,onChange:b,disabled:f}=s,[m,x]=t.useState(u||!1),g=r.jsx(d,{children:r.jsx(o.Checkbox,Object.assign({},s,{defaultChecked:u,indeterminate:h&&m,disabled:f,color:n?"error":void 0,ref:l,onChange:e=>{x(e.target.checked),"function"==typeof b&&b(e,e.target.checked)}}))});return r.jsx(o.FormGroup,{children:r.jsx(i.default,{control:g,label:c,disabled:f,error:n})})}),d=o.styled("div",{shouldForwardProp:e=>"error"!==e&&"disabled"!==e})(()=>{let e={};return e={display:"flex","& + .MuiTypography-root":{"& a":{color:"inherit",textDecoration:"underline",fontWeight:"700"},"& *":{margin:0}}},e});exports.Checkbox=a;
 //# sourceMappingURL=checkbox.js.map

package/cjs/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import React, { ReactNode, ChangeEvent, useState, forwardRef, HTMLAttributes } from 'react';\nimport { Checkbox as MuiCheckbox, styled, FormGroup } from '@mui/material';\nimport FormControlLabelStyled from '../common/styled/formControlLabelStyled';\n\n/**\n * @interface CheckboxProps\n * @description Base definition of SkodaFlow Checkbox independent on core implementation.\n * Properties are inherited from HTML Button element\n */\nexport interface CheckboxProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'color'> {\n  /**\n   *  Indeterminate state of checkbox, half checked.\n   */\n  indeterminate?: boolean;\n\n  /**\n   *  Disabled state, not changeable.\n   */\n  disabled?: boolean;\n\n  /**\n   *  Uncontrolled component. Set initial value. Do not use with \"checked\" together.\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * Controlled component. Set current value. Do not use with \"defaultChecked\" together.\n   */\n  checked?: boolean;\n\n  /**\n   * Error state of checkbox.\n   */\n  error?: boolean;\n\n  /**\n   * Is checkbox required field in form?\n   */\n  required?: boolean;\n\n  /**\n   * The value referenced with checkbox element\n   */\n  value?: string;\n\n  /**\n   * The value referenced with checkbox element\n   */\n  label?: string | ReactNode;\n\n  customNode?: ReactNode;\n\n  /**\n   * @description Triggered when element is changed.\n   * @param e React original event object\n   * @param value Current changed value\n   */\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>, value: boolean) => void;\n}\n\n/**\n * @description SkodaFlow Checkbox component.\n * Properties are inherited from HTML Button element.\n * @param props CheckboxProps\n * @returns React Functional Component\n * @deprecated Use Checkbox component from '@mui/material' module instead.\n */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(({ error, ...props }, ref) => {\n  const { label, defaultChecked, indeterminate, onChange, disabled } = props;\n  const [_checkState, setCheck] = useState(defaultChecked || false);\n\n  const _checkStateChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setCheck(e.target.checked);\n    typeof onChange === 'function' && onChange(e, e.target.checked);\n  };\n\n  const _checkbox = (\n    <CheckboxStyled>\n      <MuiCheckbox\n        {...props}\n        defaultChecked={defaultChecked}\n        indeterminate={indeterminate && _checkState}\n        disabled={disabled}\n        color={error ? 'error' : undefined}\n        ref={ref}\n        onChange={_checkStateChange}\n      />\n    </CheckboxStyled>\n  );\n\n  return (\n    <FormGroup>\n      <FormControlLabelStyled control={_checkbox} label={label} disabled={disabled} error={error} />\n    </FormGroup>\n  );\n});\n\n/**\n * @description Checkbox styling definition based on props\n */\n\nconst CheckboxStyled = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'error' && prop !== 'disabled',\n})<{ theme?: any; disabled?: boolean; error?: boolean }>(() => {\n  let styles = {};\n  styles = {\n    display: 'flex',\n    '& + .MuiTypography-root': {\n      '& a': {\n        color: 'inherit',\n        textDecoration: 'underline',\n        fontWeight: '700',\n      },\n      '& *': {\n        margin: 0,\n      },\n    },\n  };\n  return styles;\n});\n"],"names":["Checkbox","forwardRef","_a","ref","error","props","__rest","label","defaultChecked","indeterminate","onChange","disabled","_checkState","setCheck","useState","_checkbox","_jsx","CheckboxStyled","children","MuiCheckbox","Object","assign","color","undefined","e","target","checked","FormGroup","FormControlLabelStyled","control","styled","shouldForwardProp","prop","styles","display","textDecoration","fontWeight","margin"],"mappings":"yKAmEO,MAAMA,EAAWC,EAAAA,YAA6C,CAACC,EAAqBC,KAArB,IAAAC,MAAEA,GAAKF,EAAKG,EAAKC,EAAAA,OAAAJ,EAAjB,WACpE,MAAMK,MAAEA,EAAKC,eAAEA,EAAcC,cAAEA,EAAaC,SAAEA,EAAQC,SAAEA,GAAaN,GAC9DO,EAAaC,GAAYC,EAAAA,SAASN,IAAkB,GAOrDO,EACJC,EAAAA,IAACC,EAAc,CAAAC,SACbF,EAAAA,IAACG,EAAAA,SAAWC,OAAAC,OAAA,CAAA,EACNhB,GACJG,eAAgBA,EAChBC,cAAeA,GAAiBG,EAChCD,SAAUA,EACVW,MAAOlB,EAAQ,aAAUmB,EACzBpB,IAAKA,EACLO,SAdqBc,IACzBX,EAASW,EAAEC,OAAOC,SACE,mBAAbhB,GAA2BA,EAASc,EAAGA,EAAEC,OAAOC,QAAQ,OAiBjE,OACEV,EAAAA,IAACW,EAAAA,UAAS,CAAAT,SACRF,EAAAA,IAACY,EAAAA,QAAsB,CAACC,QAASd,EAAWR,MAAOA,EAAOI,SAAUA,EAAUP,MAAOA,KAC3E,IAQVa,EAAiBa,EAAAA,OAAO,MAAO,CACnCC,kBAAoBC,GAAkB,UAATA,GAA6B,aAATA,GAD5BF,EAEkC,KACvD,IAAIG,EAAS,CAAA,EAcb,OAbAA,EAAS,CACPC,QAAS,OACT,0BAA2B,CACzB,MAAO,CACLZ,MAAO,UACPa,eAAgB,YAChBC,WAAY,OAEd,MAAO,CACLC,OAAQ,KAIPJ,CAAM"}
+{"version":3,"file":"checkbox.js","sources":["../../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import React, { ReactNode, ChangeEvent, useState, forwardRef, HTMLAttributes } from 'react';\nimport { Checkbox as MuiCheckbox, styled, FormGroup } from '@mui/material';\nimport FormControlLabelStyled from '../common/styled/formControlLabelStyled';\n\n/**\n * @interface CheckboxProps\n * @description Base definition of SkodaFlow Checkbox independent on core implementation.\n * Properties are inherited from HTML Button element\n */\nexport interface CheckboxProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'color'> {\n  /**\n   *  Indeterminate state of checkbox, half checked.\n   */\n  indeterminate?: boolean;\n\n  /**\n   *  Disabled state, not changeable.\n   */\n  disabled?: boolean;\n\n  /**\n   *  Uncontrolled component. Set initial value. Do not use with \"checked\" together.\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * Controlled component. Set current value. Do not use with \"defaultChecked\" together.\n   */\n  checked?: boolean;\n\n  /**\n   * Error state of checkbox.\n   */\n  error?: boolean;\n\n  /**\n   * Is checkbox required field in form?\n   */\n  required?: boolean;\n\n  /**\n   * The value referenced with checkbox element\n   */\n  value?: string;\n\n  /**\n   * The value referenced with checkbox element\n   */\n  label?: string | ReactNode;\n\n  customNode?: ReactNode;\n\n  /**\n   * @description Triggered when element is changed.\n   * @param e React original event object\n   * @param value Current changed value\n   */\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>, value: boolean) => void;\n}\n\n/**\n * @description SkodaFlow Checkbox component.\n * Properties are inherited from HTML Button element.\n * @param props CheckboxProps\n * @returns React Functional Component\n * @deprecated Use Checkbox component from '@mui/material' module instead.\n */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(({ error, ...props }, ref) => {\n  const { label, defaultChecked, indeterminate, onChange, disabled } = props;\n  const [_checkState, setCheck] = useState(defaultChecked || false);\n\n  const _checkStateChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setCheck(e.target.checked);\n    typeof onChange === 'function' && onChange(e, e.target.checked);\n  };\n\n  const _checkbox = (\n    <CheckboxStyled>\n      <MuiCheckbox\n        {...props}\n        defaultChecked={defaultChecked}\n        indeterminate={indeterminate && _checkState}\n        disabled={disabled}\n        color={error ? 'error' : undefined}\n        ref={ref}\n        onChange={_checkStateChange}\n      />\n    </CheckboxStyled>\n  );\n\n  return (\n    <FormGroup>\n      <FormControlLabelStyled control={_checkbox} label={label} disabled={disabled} error={error} />\n    </FormGroup>\n  );\n});\n\n/**\n * @description Checkbox styling definition based on props\n */\n\nconst CheckboxStyled = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'error' && prop !== 'disabled',\n})<{ theme?: any; disabled?: boolean; error?: boolean }>(() => {\n  let styles = {};\n  styles = {\n    display: 'flex',\n    '& + .MuiTypography-root': {\n      '& a': {\n        color: 'inherit',\n        textDecoration: 'underline',\n        fontWeight: '700',\n      },\n      '& *': {\n        margin: 0,\n      },\n    },\n  };\n  return styles;\n});\n"],"names":["Checkbox","forwardRef","_a","ref","error","props","__rest","label","defaultChecked","indeterminate","onChange","disabled","_checkState","setCheck","useState","_checkbox","_jsx","CheckboxStyled","children","MuiCheckbox","Object","assign","color","undefined","e","target","checked","FormGroup","FormControlLabelStyled","control","styled","shouldForwardProp","prop","styles","display","textDecoration","fontWeight","margin"],"mappings":"yKAmEO,MAAMA,EAAWC,EAAAA,WAA6C,CAACC,EAAqBC,KAArB,IAAAC,MAAEA,GAAKF,EAAKG,EAAKC,EAAAA,OAAAJ,EAAjB,WACpE,MAAMK,MAAEA,EAAKC,eAAEA,EAAcC,cAAEA,EAAaC,SAAEA,EAAQC,SAAEA,GAAaN,GAC9DO,EAAaC,GAAYC,EAAAA,SAASN,IAAkB,GAOrDO,EACJC,EAAAA,IAACC,EAAc,CAAAC,SACbF,EAAAA,IAACG,EAAAA,SAAWC,OAAAC,OAAA,CAAA,EACNhB,GACJG,eAAgBA,EAChBC,cAAeA,GAAiBG,EAChCD,SAAUA,EACVW,MAAOlB,EAAQ,aAAUmB,EACzBpB,IAAKA,EACLO,SAdqBc,IACzBX,EAASW,EAAEC,OAAOC,SACE,mBAAbhB,GAA2BA,EAASc,EAAGA,EAAEC,OAAOC,eAiBzD,OACEV,EAAAA,IAACW,EAAAA,UAAS,CAAAT,SACRF,EAAAA,IAACY,EAAAA,QAAsB,CAACC,QAASd,EAAWR,MAAOA,EAAOI,SAAUA,EAAUP,MAAOA,QASrFa,EAAiBa,EAAAA,OAAO,MAAO,CACnCC,kBAAoBC,GAAkB,UAATA,GAA6B,aAATA,GAD5BF,CAEkC,KACvD,IAAIG,EAAS,CAAA,EAcb,OAbAA,EAAS,CACPC,QAAS,OACT,0BAA2B,CACzB,MAAO,CACLZ,MAAO,UACPa,eAAgB,YAChBC,WAAY,OAEd,MAAO,CACLC,OAAQ,KAIPJ"}