@skodaflow/web-library 8.1.0 → 8.3.0

package/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\n    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: (theme) => theme.zIndex.carousel,\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: (theme) => theme.zIndex.carousel,\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","children","sx","onInit","effect","autoplay","parallax","peekDistance","peekSpeed","rest","ref","_jsx","Box","component","Swiper","spaceBetween","autoHeight","loop","keyboard","enabled","modules","Keyboard","EffectFade","Autoplay","Parallax","onSwiper","display","ml","mr","p","maxWidth","position","zIndex","theme","carousel","overflow","listStyle","touchAction","flexDirection","height","alignItems","transitionProperty","width","transitionTimingFunction","boxSizing","transform","transitionDuration","direction","visibility","WebkitBackfaceVisibility","backfaceVisibility"],"mappings":"2OAgCO,MAAMA,EAAoCC,EAC/C,EAAGC,WAAUC,KAAIC,SAAQC,SAAQC,WAAUC,WAAUC,eAAe,IAAKC,YAAY,OAAQC,GAAQC,IAEjGC,EAACC,EAAG,CACFC,UAAWC,EACXC,aAAc,EACdC,cACAC,MAAI,EACJC,SAAU,CACRC,SAAS,GAEXC,QAAS,CACPC,KACe,SAAXjB,EAAoB,CAACkB,GAAc,MACnCjB,EAAW,CAACkB,GAAY,MACxBjB,EAAW,CAACkB,GAAY,IAE9BlB,SAAUA,EACVF,OAAQA,EACRC,SAAUA,EACVK,IAAKA,KACDD,EACJgB,SAAUtB,EAAM,iBACAK,EAChBN,GAAI,CAEFwB,QAAS,QACTC,GAAI,OACJC,GAAI,OACJC,EAAG,IACHC,SAAU,OAEVC,SAAU,WACVC,OAASC,GAAUA,EAAMD,OAAOE,SAChCC,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,CACnBV,SAAU,WACVW,MAAO,OACPH,OAAQ,OACRP,OAASC,GAAUA,EAAMD,OAAOE,SAChCR,QAAS,OACTe,mBAAoB,YACpBE,yBAA0B,4DAC1BC,UAAW,cACXC,UAAW,6BAGE,SAAXzC,GAAqB,CACvB,4CAA6C,CAC3CqC,mBAAoB,YACpBK,mBAAoB,GAAGtC,MACvBmC,yBAA0B,6DAE5B,8CAA+C,CAC7CE,UAAYZ,GAAU,eAAmC,QAApBA,EAAMc,UAAsB,GAAK,MAAMxC,cAE9E,8CAA+C,CAC7CsC,UAAYZ,GAAU,eAAmC,QAApBA,EAAMc,UAAsB,IAAM,KAAKxC,eAIhF,gCAAiC,CAC/ByC,WAAY,UAEd,wCAAyC,CACvCH,UAAW,gBACXI,yBAA0B,SAC1BC,mBAAoB,aAGnBhD,GACJD,SAEAA"}
+{"version":3,"file":"Carousel.js","sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\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\n    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={sxOverride(\n          {\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: (theme) => theme.zIndex.carousel,\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: (theme) => theme.zIndex.carousel,\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          },\n          sx,\n        )}\n      >\n        {children}\n      </Box>\n    );\n  },\n);\n"],"names":["Carousel","forwardRef","children","sx","onInit","effect","autoplay","parallax","peekDistance","peekSpeed","rest","ref","_jsx","Box","component","Swiper","spaceBetween","autoHeight","loop","keyboard","enabled","modules","Keyboard","EffectFade","Autoplay","Parallax","onSwiper","sxOverride","display","ml","mr","p","maxWidth","position","zIndex","theme","carousel","overflow","listStyle","touchAction","flexDirection","height","alignItems","transitionProperty","width","transitionTimingFunction","boxSizing","transform","transitionDuration","direction","visibility","WebkitBackfaceVisibility","backfaceVisibility"],"mappings":"6SAiCO,MAAMA,EAAoCC,EAC/C,EAAGC,WAAUC,KAAIC,SAAQC,SAAQC,WAAUC,WAAUC,eAAe,IAAKC,YAAY,OAAQC,GAAQC,IAEjGC,EAACC,EAAG,CACFC,UAAWC,EACXC,aAAc,EACdC,cACAC,MAAI,EACJC,SAAU,CACRC,SAAS,GAEXC,QAAS,CACPC,KACe,SAAXjB,EAAoB,CAACkB,GAAc,MACnCjB,EAAW,CAACkB,GAAY,MACxBjB,EAAW,CAACkB,GAAY,IAE9BlB,SAAUA,EACVF,OAAQA,EACRC,SAAUA,EACVK,IAAKA,KACDD,EACJgB,SAAUtB,EAAM,iBACAK,EAChBN,GAAIwB,EACF,CAEEC,QAAS,QACTC,GAAI,OACJC,GAAI,OACJC,EAAG,IACHC,SAAU,OAEVC,SAAU,WACVC,OAASC,GAAUA,EAAMD,OAAOE,SAChCC,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,CACnBV,SAAU,WACVW,MAAO,OACPH,OAAQ,OACRP,OAASC,GAAUA,EAAMD,OAAOE,SAChCR,QAAS,OACTe,mBAAoB,YACpBE,yBAA0B,4DAC1BC,UAAW,cACXC,UAAW,6BAGE,SAAX1C,GAAqB,CACvB,4CAA6C,CAC3CsC,mBAAoB,YACpBK,mBAAoB,GAAGvC,MACvBoC,yBAA0B,6DAE5B,8CAA+C,CAC7CE,UAAYZ,GAAU,eAAmC,QAApBA,EAAMc,UAAsB,GAAK,MAAMzC,cAE9E,8CAA+C,CAC7CuC,UAAYZ,GAAU,eAAmC,QAApBA,EAAMc,UAAsB,IAAM,KAAKzC,eAIhF,gCAAiC,CAC/B0C,WAAY,UAEd,wCAAyC,CACvCH,UAAW,gBACXI,yBAA0B,SAC1BC,mBAAoB,WAIxBjD,GACDD,SAEAA"}

package/components/carousel/Navigation.js

@@ -1,2 +1,2 @@
-import{jsxs as r,Fragment as o,jsx as e}from"react/jsx-runtime";import{useMemo as t}from"react";import{useCarousel as n,useCarouselPeekEffect as s}from"./hooks.js";import{useTheme as a,useMediaQuery as i,IconButton as p}from"@mui/material";import{ChevronLeftIcon as c}from"../icon/stroke/ChevronLeftIcon.js";import{ChevronRightIcon as l}from"../icon/stroke/ChevronRightIcon.js";import{ArrowLeftIcon as d}from"../icon/stroke/ArrowLeftIcon.js";import{ArrowRightIcon as m}from"../icon/stroke/ArrowRightIcon.js";import{getInteractiveStyle as x}from"../../materialui/button/interactive.js";function u({carousel:u,peekEffect:f=!1,prevButtonProps:b,prevIconProps:k,PrevIconComponent:v,nextButtonProps:I,nextIconProps:g,NextIconComponent:h,arrows:C=!0,onBackground:j=!1,autoHideNavigation:P=!1}){const y=n(),M=u||y,E="fade"!==M?.params?.effect&&f,L=a(),w=i(L.breakpoints.up("md")),{sx:B,...N}=b||{},{sx:S,...z}=I||{},[A,R]=s(M),H=v||(C?d:c),q=h||(C?m:l),D=t(()=>({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"}},...x({color:"text.primary",borderColor:j?"transparent.transparent":"onSurface.os100",backgroundColor:j?"transparent.transparent":"surface.primary"},{backgroundColor:"surface.secondary"}),"&.Mui-disabled":{color:"disabled.tertiary",borderColor:j?"transparent.transparent":"disabled.secondary",backgroundColor:j?"transparent.transparent":"disabled.secondary"}}),[]);return P&&M?.isLocked?null:r(o,{children:[e(p,{disabled:M&&!M.params?.loop&&M.isBeginning,onClick:()=>{M?.slidePrev(),E&&A&&R("reset")},onMouseEnter:()=>w&&E&&R("prev"),onMouseLeave:()=>E&&A&&R("reset"),sx:{...D,insetInlineStart:"16px",...B},"aria-label":"Previous slide","aria-controls":"carousel",color:"surface",size:"medium",...N,children:"rtl"===L.direction?e(q,{...k}):e(H,{...k})}),e(p,{disabled:M&&!M.params?.loop&&M.isEnd,onClick:()=>{M?.slideNext(),E&&A&&R("reset")},onMouseEnter:()=>w&&E&&R("next"),onMouseLeave:()=>E&&A&&R("reset"),sx:{...D,insetInlineEnd:"16px",...S},"aria-label":"Next slide","aria-controls":"carousel",color:"surface",...z,children:"rtl"===L.direction?e(H,{...g}):e(q,{...g})})]})}export{u as CarouselNavigation};
+import{jsxs as r,Fragment as o,jsx as e}from"react/jsx-runtime";import{useMemo as t}from"react";import{useCarousel as n,useCarouselPeekEffect as s}from"./hooks.js";import{useTheme as i,useMediaQuery as a,IconButton as p}from"@mui/material";import{ChevronLeftIcon as c}from"../icon/stroke/ChevronLeftIcon.js";import{ChevronRightIcon as l}from"../icon/stroke/ChevronRightIcon.js";import{ArrowLeftIcon as d}from"../icon/stroke/ArrowLeftIcon.js";import{ArrowRightIcon as m}from"../icon/stroke/ArrowRightIcon.js";import{getInteractiveStyle as x}from"../../materialui/button/interactive.js";import{sxOverride as u}from"../../utils/sxOverride/sxOverride.js";function f({carousel:f,peekEffect:b=!1,prevButtonProps:v,prevIconProps:k,PrevIconComponent:I,nextButtonProps:g,nextIconProps:h,NextIconComponent:C,arrows:j=!0,onBackground:P=!1,autoHideNavigation:y=!1}){const M=n(),E=f||M,L="fade"!==E?.params?.effect&&b,w=i(),B=a(w.breakpoints.up("md")),{sx:N,...S}=v||{},{sx:z,...A}=g||{},[O,R]=s(E),H=I||(j?d:c),q=C||(j?m:l),D=t(()=>({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"}},...x({color:"text.primary",borderColor:P?"transparent.transparent":"onSurface.os100",backgroundColor:P?"transparent.transparent":"surface.primary"},{backgroundColor:"surface.secondary"}),"&.Mui-disabled":{color:"disabled.tertiary",borderColor:P?"transparent.transparent":"disabled.secondary",backgroundColor:P?"transparent.transparent":"disabled.secondary"}}),[]);return y&&E?.isLocked?null:r(o,{children:[e(p,{disabled:E&&!E.params?.loop&&E.isBeginning,onClick:()=>{E?.slidePrev(),L&&O&&R("reset")},onMouseEnter:()=>B&&L&&R("prev"),onMouseLeave:()=>L&&O&&R("reset"),sx:u({...D,insetInlineStart:"16px"},N),"aria-label":"Previous slide","aria-controls":"carousel",color:"surface",size:"medium",...S,children:"rtl"===w.direction?e(q,{...k}):e(H,{...k})}),e(p,{disabled:E&&!E.params?.loop&&E.isEnd,onClick:()=>{E?.slideNext(),L&&O&&R("reset")},onMouseEnter:()=>B&&L&&R("next"),onMouseLeave:()=>L&&O&&R("reset"),sx:u({...D,insetInlineEnd:"16px"},z),"aria-label":"Next slide","aria-controls":"carousel",color:"surface",...A,children:"rtl"===w.direction?e(H,{...h}):e(q,{...h})})]})}export{f as CarouselNavigation};
 //# sourceMappingURL=Navigation.js.map

package/components/carousel/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../src/components/carousel/Navigation.tsx"],"sourcesContent":["import React, { useMemo, ComponentType } 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?: ComponentType<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?: ComponentType<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?.params?.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.params?.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.params?.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":["CarouselNavigation","carousel","carouselProp","peekEffect","propPeekEffect","prevButtonProps","prevIconProps","PrevIconComponent","nextButtonProps","nextIconProps","NextIconComponent","arrows","onBackground","autoHideNavigation","carouselHook","useCarousel","params","effect","theme","useTheme","upMD","useMediaQuery","breakpoints","up","sx","prevSx","restPrev","nextSx","restNext","peek","setPeek","useCarouselPeekEffect","PrevIcon","ArrowLeftIcon","ChevronLeftIcon","NextIcon","ArrowRightIcon","ChevronRightIcon","sharedSx","useMemo","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":"klBAgEgBA,GACdC,SAAUC,EACVC,WAAYC,GAAiB,EAAKC,gBAClCA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,gBACjBA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,OACjBA,GAAS,EAAIC,aACbA,GAAe,EAAKC,mBACpBA,GAAqB,IAErB,MAAMC,EAAeC,IACfd,EAAWC,GAAgBY,EAC3BX,EAA0C,SAA7BF,GAAUe,QAAQC,QAAqBb,EACpDc,EAAQC,IACRC,EAAOC,EAAcH,EAAMI,YAAYC,GAAG,QACxCC,GAAIC,KAAWC,GAAarB,GAAmB,CAAA,GAC/CmB,GAAIG,KAAWC,GAAapB,GAAmB,CAAA,GAChDqB,EAAMC,GAAWC,EAAsB9B,GACxC+B,EAAWzB,IAAsBI,EAASsB,EAAgBC,GAC1DC,EAAWzB,IAAsBC,EAASyB,EAAiBC,GAG3DC,EAAWC,EACf,KAAA,CAEEC,SAAU,WACVC,OAAQ,MACRC,IAAK,MAELC,MAAO,CAAEC,GAAI,OAAQC,GAAI,OAAQC,GAAI,QACrCC,OAAQ,CAAEH,GAAI,OAAQC,GAAI,OAAQC,GAAI,QAEtCE,GAAI,CAAEJ,GAAI,QAASC,GAAI,QAASC,GAAI,SACpC,qBAAsB,CACpBG,SAAU,CAAEL,GAAI,OAAQE,GAAI,YAG3BI,EACD,CACEC,MAAO,eACPC,YAAaxC,EAAe,0BAA4B,kBACxDyC,gBAAiBzC,EAAe,0BAA4B,mBAE9D,CACEyC,gBAAiB,sBAIrB,iBAAkB,CAChBF,MAAO,oBACPC,YAAaxC,EAAe,0BAA4B,qBACxDyC,gBAAiBzC,EAAe,0BAA4B,wBAGhE,IAIF,OAAIC,GAAsBZ,GAAUqD,SAC3B,KAGPC,eACEC,EAACC,GACCC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,EAAS2D,YACzDC,QAAS,KACP5D,GAAU6D,YACV3D,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,GAAI,IACCc,EACH2B,iBAAkB,UACfxC,GACJ,aACU,iBAAgB,gBACb,WACd0B,MAAM,UACNe,KAAK,YACDxC,EAAQyC,SAES,QAApBjD,EAAMkD,UAAsBZ,EAACrB,EAAQ,IAAK7B,IAAoBkD,EAACxB,EAAQ,IAAK1B,MAE/EkD,EAACC,EAAU,CACTC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,EAASoE,MACzDR,QAAS,KACP5D,GAAUqE,YACVnE,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,GAAI,IACCc,EACHiC,eAAgB,UACb5C,GACJ,aACU,aAAY,gBACT,WACdwB,MAAM,aACFvB,WAEiB,QAApBV,EAAMkD,UAAsBZ,EAACxB,EAAQ,IAAKvB,IAAoB+C,EAACrB,MAAa1B,QAIrF"}
+{"version":3,"file":"Navigation.js","sources":["../../../src/components/carousel/Navigation.tsx"],"sourcesContent":["import React, { useMemo, ComponentType } 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';\nimport { sxOverride } from '@/src/utils/sxOverride';\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?: ComponentType<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?: ComponentType<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?.params?.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.params?.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={sxOverride(\n          {\n            ...sharedSx,\n            insetInlineStart: '16px',\n          },\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.params?.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={sxOverride(\n          {\n            ...sharedSx,\n            insetInlineEnd: '16px',\n          },\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":["CarouselNavigation","carousel","carouselProp","peekEffect","propPeekEffect","prevButtonProps","prevIconProps","PrevIconComponent","nextButtonProps","nextIconProps","NextIconComponent","arrows","onBackground","autoHideNavigation","carouselHook","useCarousel","params","effect","theme","useTheme","upMD","useMediaQuery","breakpoints","up","sx","prevSx","restPrev","nextSx","restNext","peek","setPeek","useCarouselPeekEffect","PrevIcon","ArrowLeftIcon","ChevronLeftIcon","NextIcon","ArrowRightIcon","ChevronRightIcon","sharedSx","useMemo","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","sxOverride","insetInlineStart","size","children","direction","isEnd","slideNext","insetInlineEnd"],"mappings":"opBAiEgBA,GACdC,SAAUC,EACVC,WAAYC,GAAiB,EAAKC,gBAClCA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,gBACjBA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,OACjBA,GAAS,EAAIC,aACbA,GAAe,EAAKC,mBACpBA,GAAqB,IAErB,MAAMC,EAAeC,IACfd,EAAWC,GAAgBY,EAC3BX,EAA0C,SAA7BF,GAAUe,QAAQC,QAAqBb,EACpDc,EAAQC,IACRC,EAAOC,EAAcH,EAAMI,YAAYC,GAAG,QACxCC,GAAIC,KAAWC,GAAarB,GAAmB,CAAA,GAC/CmB,GAAIG,KAAWC,GAAapB,GAAmB,CAAA,GAChDqB,EAAMC,GAAWC,EAAsB9B,GACxC+B,EAAWzB,IAAsBI,EAASsB,EAAgBC,GAC1DC,EAAWzB,IAAsBC,EAASyB,EAAiBC,GAG3DC,EAAWC,EACf,KAAA,CAEEC,SAAU,WACVC,OAAQ,MACRC,IAAK,MAELC,MAAO,CAAEC,GAAI,OAAQC,GAAI,OAAQC,GAAI,QACrCC,OAAQ,CAAEH,GAAI,OAAQC,GAAI,OAAQC,GAAI,QAEtCE,GAAI,CAAEJ,GAAI,QAASC,GAAI,QAASC,GAAI,SACpC,qBAAsB,CACpBG,SAAU,CAAEL,GAAI,OAAQE,GAAI,YAG3BI,EACD,CACEC,MAAO,eACPC,YAAaxC,EAAe,0BAA4B,kBACxDyC,gBAAiBzC,EAAe,0BAA4B,mBAE9D,CACEyC,gBAAiB,sBAIrB,iBAAkB,CAChBF,MAAO,oBACPC,YAAaxC,EAAe,0BAA4B,qBACxDyC,gBAAiBzC,EAAe,0BAA4B,wBAGhE,IAIF,OAAIC,GAAsBZ,GAAUqD,SAC3B,KAGPC,eACEC,EAACC,GACCC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,EAAS2D,YACzDC,QAAS,KACP5D,GAAU6D,YACV3D,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,GAAIyC,EACF,IACK3B,EACH4B,iBAAkB,QAEpBzC,GACD,aACU,iBAAgB,gBACb,WACd0B,MAAM,UACNgB,KAAK,YACDzC,EAAQ0C,SAES,QAApBlD,EAAMmD,UAAsBb,EAACrB,EAAQ,IAAK7B,IAAoBkD,EAACxB,EAAQ,IAAK1B,MAE/EkD,EAACC,EAAU,CACTC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,EAASqE,MACzDT,QAAS,KACP5D,GAAUsE,YACVpE,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,GAAIyC,EACF,IACK3B,EACHkC,eAAgB,QAElB7C,GACD,aACU,aAAY,gBACT,WACdwB,MAAM,aACFvB,EAAQwC,SAES,QAApBlD,EAAMmD,UAAsBb,EAACxB,EAAQ,IAAKvB,IAAoB+C,EAACrB,EAAQ,IAAK1B,QAIrF"}

package/components/carousel/Pagination.d.ts

@@ -14,9 +14,9 @@ export interface CarouselPaginationDotsProps extends CarouselPaginationVariantPr
      */
     dotsWrapperProps?: BoxProps<ElementType>;
     /**
-     * Properties applied to each dot
+     * Properties applied to each dot, or a factory receiving the dot index
      */
-    dotProps?: BoxProps<ElementType>;
+    dotProps?: BoxProps<ElementType> | ((index: number, active: boolean) => BoxProps<ElementType>);
 }
 export interface CarouselPaginationFractionProps extends CarouselPaginationVariantProps {
     variant?: 'fraction';
@@ -28,17 +28,17 @@ export interface CarouselPaginationFractionProps extends CarouselPaginationVaria
 export interface CarouselPaginationLinesProps extends CarouselPaginationVariantProps {
     variant?: 'lines';
     /**
-     * Properties applied to each line
+     * Properties applied to each line, or a factory receiving the line index
      */
-    linesProps?: ButtonProps;
+    linesProps?: ButtonProps | ((index: number, active: boolean) => ButtonProps);
     /**
      * Show progress in active line instead
      */
     lineProgress?: number;
     /**
-     * Properties applied to active line progress
+     * Properties applied to active line progress, or a factory receiving the line index
      */
-    lineProgressProps?: BoxProps<ElementType>;
+    lineProgressProps?: BoxProps<ElementType> | ((index: number, active: boolean) => BoxProps<ElementType>);
 }
 export interface CarouselPaginationSliderProps extends CarouselPaginationVariantProps {
     variant?: 'slider';

package/components/carousel/Pagination.js

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

package/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 } 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}\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<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, ...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          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\n    return (\n      <VariantComponent\n        carousel={carousel}\n        sx={{\n          ...(position === 'inside' && {\n            position: 'absolute',\n            zIndex: '90',\n            bottom: '0',\n            left: '0',\n            right: '0',\n          }),\n          ...sx,\n        }}\n        ref={ref}\n        position={position}\n        {...rest}\n      />\n    );\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          {[...new Array(carousel?.slides.length || 0)].map((_, idx) => (\n            <Box\n              key={idx}\n              className={\n                !carousel?.params?.loop && carousel?.isEnd && idx === (carousel?.slides.length || 0) - 1\n                  ? 'active'\n                  : (!carousel?.isEnd || carousel.params?.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.params?.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        {[...new Array(carousel?.slides.length || 0)].map((_, idx) => {\n          const active =\n            (!carousel?.params?.loop && carousel?.isEnd && idx === (carousel?.slides.length || 0) - 1) ||\n            ((!carousel?.isEnd || carousel.params?.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: 'auto', md: '56px' },\n                flexGrow: { xs: '1', md: '0' },\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.params?.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 ? 'progressbar' : 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            // from 6px to 4px\n            height: '4px',\n            // keep 32px height\n            py: '14px',\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?.params?.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            // 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              maxWidth: 'none',\n              height: '4px',\n              border: 'none',\n              backgroundColor: 'onSurface.os500',\n              // hitbox target\n              '&:after': {\n                width: `${thumbSize}px`,\n              },\n              // match transition speed of carousel\n              ...(!carouselDragging && {\n                transition: `left ${carousel?.params?.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","carousel","carouselProp","position","variant","sx","rest","ref","carouselHook","useCarousel","VariantComponent","useMemo","ScrollbarVariant","SliderVariant","FractionVariant","LinesVariant","DotsVariant","_jsx","zIndex","bottom","left","right","dotsWrapperProps","dotProps","dotsWrapperSx","restDotsWrapper","dotSx","restDot","Box","p","display","alignItems","justifyContent","borderRadius","py","px","gap","width","slides","length","backgroundColor","theme","palette","mode","children","Array","map","_","idx","className","params","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","carouselDragging","setCarouselDragging","handleDragStart","handleDragEnd","handleResize","thumbSize","wrapperEl","scrollWidth","size","ceil","SliderContainer","tabIndex","valueLabelDisplay","maxWidth","border","boxShadow","content"],"mappings":"0YAmFO,MAAMA,EAAwDC,EACnE,EAAGC,SAAUC,EAAcC,WAAUC,UAASC,QAAOC,GAAQC,KAC3D,MAAMC,EAAeC,IACfR,EAAWC,GAAgBM,EAE3BE,EAAmBC,EAAQ,KAC/B,OAAQP,GACN,IAAK,YACH,OAAOQ,EACT,IAAK,SACH,OAAOC,EACT,IAAK,WACH,OAAOC,EACT,IAAK,QACH,OAAOC,EAGT,QACE,OAAOC,IAEV,CAACZ,IAEJ,OACEa,EAACP,EAAgB,CACfT,SAAUA,EACVI,GAAI,IACe,WAAbF,GAAyB,CAC3BA,SAAU,WACVe,OAAQ,KACRC,OAAQ,IACRC,KAAM,IACNC,MAAO,QAENhB,GAELE,IAAKA,EACLJ,SAAUA,KACNG,MASCU,EAAqDhB,EAChE,EAAGC,WAAUqB,mBAAkBC,WAAUpB,WAAUE,QAAOC,GAAQC,KAChE,MAAQF,GAAImB,KAAkBC,GAAoBH,GAAoB,CAAA,GAC9DjB,GAAIqB,KAAUC,GAAYJ,GAAY,CAAA,EAE9C,OACEN,EAACW,EAAG,CACFvB,GAAI,CACFwB,EAAG,EACHC,QAAS,OACTC,WAAY,SACZC,eAAgB,YACb3B,GAELE,IAAKA,KACDD,WAEJW,EAACW,EAAG,CACFvB,GAAI,CACFyB,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,aAAc,SACdC,GAAI,GACJC,GAAI,EACJC,IAAK,GAGLC,MAA2C,IAAhCpC,GAAUqC,OAAOC,QAAU,GAAiD,IAArCtC,GAAUqC,OAAOC,QAAU,GAAK,GAAS,EAAI,GAAxF,QAEU,WAAbpC,GAAyB,CAC3BqC,gBAAkBC,GAAkC,SAAvBA,EAAMC,QAAQC,KAAkB,kBAAoB,2BAEhFnB,MAEDC,EAAemB,SAElB,IAAI,IAAIC,MAAM5C,GAAUqC,OAAOC,QAAU,IAAIO,IAAI,CAACC,EAAGC,IACpD/B,EAACW,EAAG,CAEFqB,WACGhD,GAAUiD,QAAQC,MAAQlD,GAAUmD,OAASJ,KAAS/C,GAAUqC,OAAOC,QAAU,GAAK,EACnF,SACEtC,GAAUmD,QAASnD,EAASiD,QAAQC,MAASH,IAAQ/C,GAAUoD,eAE/DC,EADA,SAGRjD,GAAI,CACFwB,EAAG,IACHQ,MAAO,OACPkB,OAAQ,OAERC,UAAW,gBACXvB,aAAc,OACdO,gBAAiB,kBACjBiB,WAAY,gFACZ,WAAY,CACVD,UAAW,WACXhB,gBAAiB,eACjBkB,OAAQ,YAEPhC,MAEDC,GAxBCqB,UAoCNlC,EAA6Dd,EACxE,EAAGC,WAAU0D,cAAaxD,WAAUE,QAAOC,GAAQC,KACjD,MAAQF,GAAIuD,KAAaC,GAAeF,GAAe,CAAA,EAEvD,OACE1C,EAACW,EAAG,CACFvB,GAAI,CACFyB,QAAS,OACTC,WAAY,SACZC,eAAgB,SAEhBH,EAAG,KACAxB,GAELE,IAAKA,KACDD,WAEJW,EAAC6C,EAAM,CACL1D,QAAQ,OAAM,gBACA,WACdC,GAAI,CACF8B,GAAI,EACJD,GAAI,IACJD,aAAc,MAEd8B,SAAU,OACVC,WAAY,OACZC,cAAe,YACZC,EACD,CACE1B,gBAAiB,wBAEnB,CACEA,gBAAiB,uBAGlBoB,GAELO,QAAS,IAEPlE,GAAUmD,QAAUnD,EAASiD,QAAQC,KAAOlD,GAAUmE,QAAQ,GAAKnE,GAAUoE,eAE3ER,EAAUjB,SAEd0B,EAAC1C,EAAG,CAAC2C,UAAU,OAAM3B,SAAA,CACnB3B,EAACW,EAAG,CAAC2C,UAAU,OAAOlE,GAAI,CAAEmE,WAAY,MAAOC,MAAO,mBAAmB7B,SACtE,IAAI3C,GAAUoD,WAAa,GAAK,MAEnCpC,EAACW,EAAG,CAAC2C,UAAU,OAAOlE,GAAI,CAAEoE,MAAO,kBAAmBD,WAAY,MAAOE,GAAI,IAAK9B,SAC/E,QAEH3B,EAACW,EAAG,CAAC2C,UAAU,OAAOlE,GAAI,CAAEoE,MAAO,kBAAmBD,WAAY,OAAO5B,SACtE,GAAG3C,GAAUqC,OAAOC,QAAU,eAYhCxB,EAAuDf,EAClE,EAAGC,WAAUI,KAAIsE,aAAYC,eAAcC,oBAAmB1E,cAAaG,GAAQC,KACjF,MAAQF,GAAIyE,KAAWC,GAAaJ,GAAc,CAAA,GAC1CtE,GAAI2E,KAAmBC,GAAqBJ,GAAqB,CAAA,EAEzE,OACE5D,EAACW,EAAG,CACFvB,GAAI,CACFyB,QAAS,OACTC,WAAY,SACZC,eAAgB,CAAEkD,GAAI,UAAWC,GAAI,UACrCC,SAAU,CAAEF,GAAI,IAAKC,GAAI,KACzB/C,IAAK,EAELP,EAAG,KACAxB,GAELE,IAAKA,KACDD,EAAIsC,SAEP,IAAI,IAAIC,MAAM5C,GAAUqC,OAAOC,QAAU,IAAIO,IAAI,CAACC,EAAGC,KACpD,MAAMqC,GACFpF,GAAUiD,QAAQC,MAAQlD,GAAUmD,OAASJ,KAAS/C,GAAUqC,OAAOC,QAAU,GAAK,KACrFtC,GAAUmD,OAASnD,EAASiD,QAAQC,OAASH,IAAQ/C,GAAUoD,UAC9DiC,EAAOtC,IAAQ/C,GAAUoD,WAAa,GAE5C,OACEiB,EAACR,EAAM,CAELW,MAAM,UACNxB,UAAWoC,EAAS,cAAW/B,EAC/BjD,GAAI,CACFwB,EAAG,EACH0D,UAAW,IACXhC,OAAQ8B,GAAUC,EAAO,MAAQ,MACjCrD,aAAcoD,GAAUC,EAAO,MAAQ,MACvCjD,MAAO,CAAE6C,GAAI,OAAQC,GAAI,QACzBC,SAAU,CAAEF,GAAI,IAAKC,GAAI,KACzBnD,eAAgB,gBACbkC,EACD,CACE1B,gBAAiB,kBACjB,mBAAoB,CAClBA,gBAAiB,oBAGrB,CACEA,gBAAiB,oBACjB,mBAAoB,CAClBA,gBAAiB,6BAIpBsC,GACJ,gBACa,WACdX,QAAS,IAAMlE,IAAWA,EAASiD,QAAQC,KAAO,cAAgB,WAAWH,MACzE+B,EAAQnC,SAAA,CAEZ3B,EAACW,EAAG,CACFvB,GAAI,CAEFF,SAAU,WACVqF,IAAK,MACLpE,KAAM,IACNC,MAAO,IACPkC,OAAQ,OACRC,UAAW,mBACXiC,cAAe,UAGnBxE,EAACW,EAAG,CAACvB,GAAI,CAAE4B,aAAc,MAAOsB,OAAQ,OAAQlB,MAAO,OAAQqD,SAAU,UAAU9C,SACjF3B,EAACW,EAAG,CACFqB,UAAU,gBACV0C,KAAMN,EAAS,mBAAgB/B,EAAS,gBACzB+B,EAAST,OAAetB,EAAS,gBACjC,EAAC,gBACD,IACfjD,GAAI,CACFuF,aAA0BtC,IAAjBsB,GAA8BU,EAAO,IAAM,IACpDjD,MAAO,OACPG,gBAAiB,kBACjBe,OAAQ,OACRsC,gBAAiB,OACjBrC,UAAW,eAA2BF,IAAjBsB,GAA8BS,EAAST,EAAe,IAAMU,EAAO,EAAI,KAC5F7B,iBAAgCH,IAAjBsB,EAA6B,gCAAkC,IAAlE,6DACTI,MAEDC,QA5DHjC,SA0ENnC,EAAyDb,EACpE,EAAGC,WAAU6F,cAAazF,KAAI0F,cAAeC,EAAI7F,cAAaG,GAAQC,KACpE,MAAQF,GAAI4F,KAAaC,GAAeJ,GAAe,CAAA,GAEhDK,EAAOC,GAAYC,EAAiBC,KAAKC,MAAkC,KAA3BtG,GAAUuG,UAAY,KAEvEC,EAAWC,GAAgB,KACxBC,GAAeN,EAAS,IAyBjC,OAvBAO,EAAU,KACHH,EAASI,SACZT,EAASE,KAAKC,MAAkC,KAA3BtG,GAAUuG,UAAY,MAE5C,CAACvG,GAAUuG,WAEdI,EAAU,KACR,GAAI3G,EAAU,CACZ,MAAM6G,EAAa,KACZL,EAASI,SACZF,EAAY,CAAA,IAOhB,OAFA1G,EAAS8G,GAAG,aAAcD,GAEnB,KACL7G,EAAS+G,IAAI,aAAcF,GAE/B,GACC,CAAC7G,IAGFgB,EAACW,GAAIvB,GAAI,CAAE4G,GAAI,KAAM5G,GAAME,IAAKA,KAASD,EAAIsC,SAC3C3B,EAACiG,EAAM,CACLf,MAAOA,EACPgB,IAAK,EACLC,IAAK,IACLC,SAAU,CAACtE,EAAGuE,KAEZb,EAASI,SAAU,EAEnB5G,GAAUsH,YAAYD,EAAW,IAAK,KAEtClB,EAASkB,IAEXE,kBAAmB,KAEjBvH,GAAUwH,eAAe,KAEzBhB,EAASI,SAAU,GAErBxG,GAAI,CACFyB,QAAS,QAETyB,OAAQ,MAERrB,GAAI,OAEJ,kBAAmB,CACjBuC,MAAO,mBAET,mBAAoB,CAClBA,MAAO,kBAEPiD,mBAAoB,GAAGzH,GAAUiD,QAAQyE,OAAS,SAGpD,mBAAoB,CAClB7F,QAAS,WAERmE,GACJ,gBACa,cACVC,QAUDtF,EAA4DZ,EACvE,EAAGC,WAAU6F,cAAa3F,cAAaG,GAAQC,KAC7C,MAAQF,GAAI4F,KAAaC,GAAeJ,GAAe,CAAA,GAEhD8B,EAAkBC,GAAuBxB,GAAkB,KACzDM,GAAeN,EAAS,IAEjCO,EAAU,KACR,GAAI3G,EAAU,CACZ,MAAM6H,EAAkB,IAAMD,GAAoB,GAC5CE,EAAgB,IAAMF,GAAoB,GAC1CG,EAAe,IAAMrB,EAAY,IAQvC,OALA1G,EAAS8G,GAAG,aAAce,GAC1B7H,EAAS8G,GAAG,WAAYgB,GAExB9H,EAAS8G,GAAG,SAAUiB,GAEf,KACL/H,EAAS+G,IAAI,aAAcc,GAC3B7H,EAAS+G,IAAI,WAAYe,GACzB9H,EAAS+G,IAAI,SAAUgB,GAE3B,GACC,CAAC/H,IAEJ,MAAMgI,EAAYtH,EAAgB,KAChC,GAAIV,GAAUiI,WAAWC,aAAelI,GAAUoC,MAAO,CACvD,MAAM+F,EAAO9B,KAAK+B,KAAKpI,GAAUoC,OAAS,EAAIpC,GAAUiI,WAAWC,aACnE,OAAO7B,KAAKc,IAAIgB,EAAM,GACxB,CACA,OAAO,IACN,CAACnI,GAAUiI,WAAWC,YAAalI,GAAUoC,QAEhD,OACEpB,EAACJ,EAAa,CACZN,IAAKA,EACLN,SAAUA,EACVsE,UAAW+D,EACXL,UAAWA,EACXnC,YAAa,CAEXyC,UAAU,EAEVC,kBAAmB,MACnBnI,GAAI,CAEF,oCAAqC,CACnCoE,MAAO,mBAET,mBAAoB,CAClB3C,QAAS,OACTO,MAAO,GAAG4F,MACVQ,SAAU,OACVlF,OAAQ,MACRmF,OAAQ,OACRlG,gBAAiB,kBAEjB,UAAW,CACTH,MAAO,GAAG4F,WAGPL,GAAoB,CACvBnE,WAAY,QAAQxD,GAAUiD,QAAQyE,OAAS,kBAGjD,qBAAsB,CACpBgB,UAAW,OACX,WAAY,CACVC,QAAS,aAIZ3C,MAEFC,MAED5F"}
+{"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 } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\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, or a factory receiving the dot index\n   */\n  dotProps?: BoxProps<ElementType> | ((index: number, active: boolean) => 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, or a factory receiving the line index\n   */\n  linesProps?: ButtonProps | ((index: number, active: boolean) => ButtonProps);\n  /**\n   * Show progress in active line instead\n   */\n  lineProgress?: number;\n  /**\n   * Properties applied to active line progress, or a factory receiving the line index\n   */\n  lineProgressProps?: BoxProps<ElementType> | ((index: number, active: boolean) => BoxProps<ElementType>);\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<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, ...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          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\n    return (\n      <VariantComponent\n        carousel={carousel}\n        sx={sxOverride(\n          {\n            ...(position === 'inside' && {\n              position: 'absolute',\n              zIndex: '90',\n              bottom: '0',\n              left: '0',\n              right: '0',\n            }),\n          },\n          sx,\n        )}\n        ref={ref}\n        position={position}\n        {...rest}\n      />\n    );\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\n    return (\n      <Box\n        sx={sxOverride(\n          {\n            p: 2,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          },\n          sx,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <Box\n          sx={sxOverride(\n            {\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) =>\n                  theme.palette.mode === 'dark' ? 'surface.primary' : 'transparent.backdrop',\n              }),\n            },\n            dotsWrapperSx,\n          )}\n          {...restDotsWrapper}\n        >\n          {carousel?.slides?.map((_, idx) => {\n            const active =\n              (!carousel?.params?.loop && carousel?.isEnd && idx === (carousel?.slides.length || 0) - 1) ||\n              ((!carousel?.isEnd || carousel.params?.loop) && idx === carousel?.realIndex);\n            const { sx: dotSx, ...restDot } = (typeof dotProps === 'function' ? dotProps(idx, active) : dotProps) ?? {};\n\n            return (\n              <Box\n                key={idx}\n                className={active ? 'active' : undefined}\n                sx={sxOverride(\n                  {\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                  },\n                  dotSx,\n                )}\n                {...restDot}\n              />\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={sxOverride(\n          {\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            // space is needed for focus overflow\n            p: 2,\n          },\n          sx,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <Button\n          variant=\"text\"\n          aria-controls=\"carousel\"\n          sx={sxOverride(\n            {\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            },\n            buttonSx,\n          )}\n          onClick={() =>\n            // at the end, slide to beginning\n            carousel?.isEnd && !carousel.params?.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    return (\n      <Box\n        sx={sxOverride(\n          {\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          },\n          sx,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {carousel?.slides?.map((_, idx) => {\n          const active =\n            (!carousel?.params?.loop && carousel?.isEnd && idx === (carousel?.slides.length || 0) - 1) ||\n            ((!carousel?.isEnd || carousel.params?.loop) && idx === carousel?.realIndex);\n          const seen = idx <= (carousel?.realIndex || 0);\n          const { sx: lineSx, ...lineRest } =\n            (typeof linesProps === 'function' ? linesProps(idx, active) : linesProps) ?? {};\n          const { sx: lineProgressSx, ...lineProgressRest } =\n            (typeof lineProgressProps === 'function' ? lineProgressProps(idx, active) : lineProgressProps) ?? {};\n\n          return (\n            <Button\n              key={idx}\n              color=\"inherit\"\n              className={active ? 'active' : undefined}\n              sx={sxOverride(\n                {\n                  p: 0,\n                  minHeight: '0',\n                  height: active || seen ? '8px' : '4px',\n                  borderRadius: active || seen ? '4px' : '2px',\n                  width: { xs: 'auto', md: '56px' },\n                  flexGrow: { xs: '1', md: '0' },\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                },\n                lineSx,\n              )}\n              aria-controls=\"carousel\"\n              onClick={() => carousel?.[carousel.params?.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                  {...(active && {\n                    role: 'progressbar',\n                  })}\n                  {...(active &&\n                    lineProgress !== undefined && {\n                      'aria-valuenow': lineProgress,\n                      'aria-valuemin': 0,\n                      'aria-valuemax': 100,\n                    })}\n                  sx={sxOverride(\n                    {\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                    },\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={sxOverride({ 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={sxOverride(\n            {\n              display: 'block',\n              // from 6px to 4px\n              height: '4px',\n              // keep 32px height\n              py: '14px',\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?.params?.speed ?? 300}ms`,\n              },\n              // hide control thumb\n              '.MuiSlider-thumb': {\n                display: 'none',\n              },\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: sxOverride(\n            {\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                maxWidth: 'none',\n                height: '4px',\n                border: 'none',\n                backgroundColor: 'onSurface.os500',\n                // hitbox target\n                '&:after': {\n                  width: `${thumbSize}px`,\n                },\n                // match transition speed of carousel\n                ...(!carouselDragging && {\n                  transition: `left ${carousel?.params?.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            },\n            sliderSx,\n          ),\n          ...restSlider,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["CarouselPagination","forwardRef","carousel","carouselProp","position","variant","sx","rest","ref","carouselHook","useCarousel","VariantComponent","useMemo","ScrollbarVariant","SliderVariant","FractionVariant","LinesVariant","DotsVariant","_jsx","sxOverride","zIndex","bottom","left","right","dotsWrapperProps","dotProps","dotsWrapperSx","restDotsWrapper","Box","p","display","alignItems","justifyContent","children","borderRadius","py","px","gap","width","slides","length","backgroundColor","theme","palette","mode","map","_","idx","active","params","loop","isEnd","realIndex","dotSx","restDot","className","undefined","height","transform","transition","margin","buttonProps","buttonSx","restButton","Button","fontSize","lineHeight","letterSpacing","getInteractiveStyle","onClick","slideTo","slideNext","_jsxs","component","fontWeight","color","mx","linesProps","lineProgress","lineProgressProps","xs","md","flexGrow","seen","lineSx","lineRest","lineProgressSx","lineProgressRest","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","carouselDragging","setCarouselDragging","handleDragStart","handleDragEnd","handleResize","thumbSize","wrapperEl","scrollWidth","size","ceil","SliderContainer","tabIndex","valueLabelDisplay","maxWidth","border","boxShadow","content"],"mappings":"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"}

package/components/carousel/Slide.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Box as e}from"@mui/material";import{useSwiper as i,SwiperSlide as o}from"swiper/react";const a=t(({children:t,sx:a,...m},s)=>{const{params:n}=i();return r(e,{component:o,ref:s,...m,sx:{display:"block",width:"auto"===n?.slidesPerView?"auto":"100%",height:n?.autoHeight?"auto":"100%",position:"relative",zIndex:"50",transform:"translate3d(0px, 0, 0)",flexShrink:"0",transitionProperty:"fade"===n?.effect?"opacity":"transform","& img":{display:"block",maxWidth:"100%"},...a},children:t})});a.displayName="SwiperSlide";export{a as CarouselSlide};
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Box as e}from"@mui/material";import{sxOverride as i}from"../../utils/sxOverride/sxOverride.js";import{useSwiper as o,SwiperSlide as a}from"swiper/react";const s=t(({children:t,sx:s,...m},p)=>{const{params:n}=o();return r(e,{component:a,ref:p,...m,sx:i({display:"block",width:"auto"===n?.slidesPerView?"auto":"100%",height:n?.autoHeight?"auto":"100%",position:"relative",zIndex:"50",transform:"translate3d(0px, 0, 0)",flexShrink:"0",transitionProperty:"fade"===n?.effect?"opacity":"transform","& img":{display:"block",maxWidth:"100%"}},s),children:t})});s.displayName="SwiperSlide";export{s as CarouselSlide};
 //# sourceMappingURL=Slide.js.map

package/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'>, 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 { params: 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","children","sx","rest","ref","params","swiperOptions","useSwiper","_jsx","Box","component","SwiperSlide","display","width","slidesPerView","height","autoHeight","position","zIndex","transform","flexShrink","transitionProperty","effect","maxWidth","displayName"],"mappings":"yKAYO,MAAMA,EAA8CC,EAAW,EAAGC,WAAUC,QAAOC,GAAQC,KAChG,MAAQC,OAAQC,GAAkBC,IAElC,OACEC,EAACC,EAAG,CACFC,UAAWC,EACXP,IAAKA,KACDD,EACJD,GAAI,CACFU,QAAS,QACTC,MAAwC,SAAjCP,GAAeQ,cAA2B,OAAS,OAC1DC,OAAQT,GAAeU,WAAa,OAAS,OAC7CC,SAAU,WACVC,OAAQ,KACRC,UAAW,yBACXC,WAAY,IACZC,mBAA8C,SAA1Bf,GAAegB,OAAoB,UAAY,YACnE,QAAS,CACPV,QAAS,QACTW,SAAU,WAETrB,GACJD,SAEAA,MAIPF,EAAcyB,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 { sxOverride } from '@/src/utils/sxOverride';\nimport { SwiperSlide, SwiperSlideProps, useSwiper } from 'swiper/react';\n\nexport interface CarouselSlideProps\n  extends Omit<SwiperSlideProps, 'children'>, 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 { params: swiperOptions } = useSwiper();\n\n  return (\n    <Box\n      component={SwiperSlide}\n      ref={ref}\n      {...rest}\n      sx={sxOverride(\n        {\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        },\n        sx,\n      )}\n    >\n      {children}\n    </Box>\n  );\n});\nCarouselSlide.displayName = 'SwiperSlide';\n"],"names":["CarouselSlide","forwardRef","children","sx","rest","ref","params","swiperOptions","useSwiper","_jsx","Box","component","SwiperSlide","sxOverride","display","width","slidesPerView","height","autoHeight","position","zIndex","transform","flexShrink","transitionProperty","effect","maxWidth","displayName"],"mappings":"2OAaO,MAAMA,EAA8CC,EAAW,EAAGC,WAAUC,QAAOC,GAAQC,KAChG,MAAQC,OAAQC,GAAkBC,IAElC,OACEC,EAACC,EAAG,CACFC,UAAWC,EACXP,IAAKA,KACDD,EACJD,GAAIU,EACF,CACEC,QAAS,QACTC,MAAwC,SAAjCR,GAAeS,cAA2B,OAAS,OAC1DC,OAAQV,GAAeW,WAAa,OAAS,OAC7CC,SAAU,WACVC,OAAQ,KACRC,UAAW,yBACXC,WAAY,IACZC,mBAA8C,SAA1BhB,GAAeiB,OAAoB,UAAY,YACnE,QAAS,CACPV,QAAS,QACTW,SAAU,SAGdtB,GACDD,SAEAA,MAIPF,EAAc0B,YAAc"}

package/components/carousel/hooks.js

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

package/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?.dataset?.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":["useCarouselInstance","events","carousel","setCarousel","useState","useRefreshInstance","useCarousel","useSwiper","setRerender","useEffect","forEach","evt","on","useLayoutEffect","useCarouselPeekEffect","peek","setPeek","peekTimeout","useRef","disabled","setDisabled","el","classList","remove","current","setTimeout","dataset","peekspeed","slideReset","slidePrev","slideNext","add","clearTimeout"],"mappings":"0HAQM,SAAUA,EAAoBC,GAClC,MAAOC,EAAUC,GAAeC,EAAkC,MAGlE,OAFAC,EAAmBH,EAAUD,GAEtB,CAACC,EAAUC,EACpB,CAKM,SAAUG,EAAYL,GAC1B,MAAMC,EAAWK,IAGjB,OAFAF,EAAmBH,EAAUD,GAEtBC,CACT,CAMA,SAASG,EAAmBH,EAA4BD,GAEtD,OAASO,GAAeJ,EAAS,IACjCK,EAAU,KACJP,IAGAD,GAAU,CACR,cACA,YACA,iBACA,WACA,gBACA,eACA,OACA,WAEFS,QAASC,IACTT,EAASU,GAAGD,EAAK,KACfH,EAAY,CAAA,QAIjB,CAACN,IAEJW,EAAgB,KACdL,EAAY,CAAA,IACX,GACL,CAKM,SAAUM,EAAsBZ,GACpC,MAAOa,EAAMC,GAAWZ,EAA2C,MAC7Da,EAAcC,EAA8B,OAC3CC,EAAUC,GAAehB,GAAkB,GAsDlD,OApDAK,EAAU,KACK,UAATM,GACFb,GAAUmB,IAAIC,UAAUC,OAAO,aAC/BrB,GAAUmB,IAAIC,UAAUC,OAAO,aAC/BN,EAAYO,QAAUC,WACpB,KACET,EAAQ,SAERd,GAAUmB,IAAIK,SAASC,WAAa,OAE/BZ,EACJI,IAEHjB,GAAU0B,WAAW,GACR,SAATb,GACFb,GAAU2B,UAAU,GACpB3B,GAAU4B,UAAU,KAEpB5B,GAAU4B,UAAU,GACpB5B,GAAU2B,UAAU,IAEtB3B,GAAUmB,IAAIC,UAAUS,IAAI,WAC5B7B,GAAUmB,IAAIC,UAAUS,IAAI,QAAQhB,OAGtCb,GAAUmB,IAAIC,UAAUC,OAAO,WAC/BrB,GAAUmB,IAAIC,UAAUC,OAAO,aAC/BrB,GAAUmB,IAAIC,UAAUC,OAAO,cAG1B,KACDN,EAAYO,SACdQ,aAAaf,EAAYO,WAG5B,CAACT,IAKJN,EAAU,KAERP,GAAUU,GAAG,aAAc,KACzBI,EAAQ,SACRI,GAAY,KAEdlB,GAAUU,GAAG,WAAY,KACvBI,EAAQ,SACRI,GAAY,MAEb,GAAGlB,IAEC,CAACa,EAAMC,EAChB"}
+{"version":3,"file":"hooks.js","sources":["../../../src/components/carousel/hooks.ts"],"sourcesContent":["import { useState, useEffect, useLayoutEffect, useMemo, 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  const renderCount = useRefreshInstance(carousel, events);\n\n  const proxiedCarousel = useMemo(\n    () => (carousel ? new Proxy(carousel, { _t: renderCount } as unknown as ProxyHandler<CarouselInstance>) : carousel),\n    [carousel, renderCount],\n  );\n\n  return [proxiedCarousel, 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  const renderCount = useRefreshInstance(carousel, events);\n\n  return useMemo(\n    () =>\n      carousel\n        ? (new Proxy(carousel, { _t: renderCount } as unknown as ProxyHandler<CarouselInstance>) as CarouselInstance)\n        : carousel,\n    [carousel, renderCount],\n  );\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)[]): number {\n  // force re-render\n  const [renderCount, setRerender] = useState(0);\n  useEffect(() => {\n    if (carousel) {\n      // subscribe to carousel events to trigger re-render\n      // https://swiperjs.com/swiper-api#events\n      (\n        events ?? [\n          'slideChange',\n          'afterInit',\n          'reachBeginning',\n          'reachEnd',\n          'fromEdge',\n          'autoplayStart',\n          'autoplayStop',\n          'lock',\n          'unlock',\n        ]\n      ).forEach((evt: keyof SwiperEvents) => {\n        carousel.on(evt, () => {\n          setRerender((t) => t + 1);\n        });\n      });\n    }\n  }, [carousel]);\n  // once everything is rendered, make sure to re-render to have proper data (initialization)\n  useLayoutEffect(() => {\n    setRerender((t) => t + 1);\n  }, []);\n\n  return renderCount;\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?.dataset?.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":["useCarouselInstance","events","carousel","setCarousel","useState","renderCount","useRefreshInstance","useMemo","Proxy","_t","useCarousel","useSwiper","setRerender","useEffect","forEach","evt","on","t","useLayoutEffect","useCarouselPeekEffect","peek","setPeek","peekTimeout","useRef","disabled","setDisabled","el","classList","remove","current","setTimeout","dataset","peekspeed","slideReset","slidePrev","slideNext","add","clearTimeout"],"mappings":"uIAQM,SAAUA,EAAoBC,GAClC,MAAOC,EAAUC,GAAeC,EAAkC,MAC5DC,EAAcC,EAAmBJ,EAAUD,GAOjD,MAAO,CALiBM,EACtB,IAAOL,EAAW,IAAIM,MAAMN,EAAU,CAAEO,GAAIJ,IAA8DH,EAC1G,CAACA,EAAUG,IAGYF,EAC3B,CAKM,SAAUO,EAAYT,GAC1B,MAAMC,EAAWS,IACXN,EAAcC,EAAmBJ,EAAUD,GAEjD,OAAOM,EACL,IACEL,EACK,IAAIM,MAAMN,EAAU,CAAEO,GAAIJ,IAC3BH,EACN,CAACA,EAAUG,GAEf,CAMA,SAASC,EAAmBJ,EAA4BD,GAEtD,MAAOI,EAAaO,GAAeR,EAAS,GA6B5C,OA5BAS,EAAU,KACJX,IAIAD,GAAU,CACR,cACA,YACA,iBACA,WACA,WACA,gBACA,eACA,OACA,WAEFa,QAASC,IACTb,EAASc,GAAGD,EAAK,KACfH,EAAaK,GAAMA,EAAI,QAI5B,CAACf,IAEJgB,EAAgB,KACdN,EAAaK,GAAMA,EAAI,IACtB,IAEIZ,CACT,CAKM,SAAUc,EAAsBjB,GACpC,MAAOkB,EAAMC,GAAWjB,EAA2C,MAC7DkB,EAAcC,EAA8B,OAC3CC,EAAUC,GAAerB,GAAkB,GAsDlD,OApDAS,EAAU,KACK,UAATO,GACFlB,GAAUwB,IAAIC,UAAUC,OAAO,aAC/B1B,GAAUwB,IAAIC,UAAUC,OAAO,aAC/BN,EAAYO,QAAUC,WACpB,KACET,EAAQ,SAERnB,GAAUwB,IAAIK,SAASC,WAAa,OAE/BZ,EACJI,IAEHtB,GAAU+B,WAAW,GACR,SAATb,GACFlB,GAAUgC,UAAU,GACpBhC,GAAUiC,UAAU,KAEpBjC,GAAUiC,UAAU,GACpBjC,GAAUgC,UAAU,IAEtBhC,GAAUwB,IAAIC,UAAUS,IAAI,WAC5BlC,GAAUwB,IAAIC,UAAUS,IAAI,QAAQhB,OAGtClB,GAAUwB,IAAIC,UAAUC,OAAO,WAC/B1B,GAAUwB,IAAIC,UAAUC,OAAO,aAC/B1B,GAAUwB,IAAIC,UAAUC,OAAO,cAG1B,KACDN,EAAYO,SACdQ,aAAaf,EAAYO,WAG5B,CAACT,IAKJP,EAAU,KAERX,GAAUc,GAAG,aAAc,KACzBK,EAAQ,SACRI,GAAY,KAEdvB,GAAUc,GAAG,WAAY,KACvBK,EAAQ,SACRI,GAAY,MAEb,GAAGvB,IAEC,CAACkB,EAAMC,EAChB"}

package/components/errorContent/ErrorContent.js

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Box as r,Typography as n}from"@mui/material";import{forwardRef as o}from"react";const i=o(({sx:o,children:i,status:s,message:a,actions:c,description:d,stacktrace:p,statusProps:l,messageProps:m,descriptionProps:x,actionsProps:h,stacktraceProps:f,...u},g)=>{const{sx:y,...C}=h??{},{sx:E,...P}=f??{};return t(r,{sx:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:{xs:2,md:4},textAlign:"center",margin:"0 auto",width:"600px",maxWidth:"100%",p:2,...o},ref:g,...u,children:[s&&e(n,{component:"h1",variant:"display","data-testid":"ErrorContent.status",...l,children:s}),a&&e(n,{component:"h2",variant:"h3","data-testid":"ErrorContent.message",...m,children:a}),d&&e(n,{"data-testid":"ErrorContent.description",...x,children:d}),i,c&&e(r,{sx:{display:"flex",gap:1,flexDirection:{xs:"column",md:"row"},alignItems:{xs:"stretch",md:"center"},justifyContent:"center",...y},"data-testid":"ErrorContent.actions",...C,children:c}),p&&e(r,{component:"code",sx:{display:"block",border:1,borderColor:"divider",whiteSpace:"pre",overflow:"auto",py:1,px:2,borderRadius:"8px",fontFamily:"monospace",fontSize:"11px",lineHeight:"18px",textAlign:"left",alignSelf:"stretch",...E},"data-testid":"ErrorContent.stacktrace",...P,children:p})]})});export{i as ErrorContent};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Box as r,Typography as o}from"@mui/material";import{forwardRef as i}from"react";import{sxOverride as s}from"../../utils/sxOverride/sxOverride.js";const n=i(({sx:i,children:n,status:a,message:c,actions:d,description:p,stacktrace:l,statusProps:m,messageProps:x,descriptionProps:f,actionsProps:h,stacktraceProps:u,...g},y)=>{const{sx:C,...v}=h??{},{sx:E,...P}=u??{};return t(r,{sx:s({display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:{xs:2,md:4},textAlign:"center",margin:"0 auto",width:"600px",maxWidth:"100%",p:2},i),ref:y,...g,children:[a&&e(o,{component:"h1",variant:"display","data-testid":"ErrorContent.status",...m,children:a}),c&&e(o,{component:"h2",variant:"h3","data-testid":"ErrorContent.message",...x,children:c}),p&&e(o,{"data-testid":"ErrorContent.description",...f,children:p}),n,d&&e(r,{sx:s({display:"flex",gap:1,flexDirection:{xs:"column",md:"row"},alignItems:{xs:"stretch",md:"center"},justifyContent:"center"},C),"data-testid":"ErrorContent.actions",...v,children:d}),l&&e(r,{component:"code",sx:s({display:"block",border:1,borderColor:"divider",whiteSpace:"pre",overflow:"auto",py:1,px:2,borderRadius:"8px",fontFamily:"monospace",fontSize:"11px",lineHeight:"18px",textAlign:"left",alignSelf:"stretch"},E),"data-testid":"ErrorContent.stacktrace",...P,children:l})]})});export{n as ErrorContent};
 //# sourceMappingURL=ErrorContent.js.map

package/components/errorContent/ErrorContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorContent.js","sources":["../../../src/components/errorContent/ErrorContent.tsx"],"sourcesContent":["import { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\nimport React, { ElementType, FC, forwardRef, ReactNode } from 'react';\n\nexport interface ErrorContentProps extends BoxProps<ElementType> {\n  /**\n   * Error Status code, eg. 404 or 500\n   */\n  status?: ReactNode;\n  /**\n   * Short message describing the error\n   */\n  message?: ReactNode;\n  /**\n   * Longer description of the error\n   */\n  description?: ReactNode;\n  /**\n   * Actions that user can interact with\n   */\n  actions?: ReactNode;\n  /**\n   * Stacktrace of an error\n   */\n  stacktrace?: ReactNode;\n  /**\n   * Properties passed to status code\n   */\n  statusProps?: TypographyProps<ElementType>;\n  /**\n   * Properties passed to message\n   */\n  messageProps?: TypographyProps<ElementType>;\n  /**\n   * Properties passed to description\n   */\n  descriptionProps?: TypographyProps<ElementType>;\n  /**\n   * Properties passed to wrapper of actions\n   */\n  actionsProps?: BoxProps<ElementType>;\n  /**\n   * Properties passed to code stacktrace\n   */\n  stacktraceProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component that renders an information about error\n */\nexport const ErrorContent: FC<ErrorContentProps> = forwardRef(\n  (\n    {\n      sx,\n      children,\n      status,\n      message,\n      actions,\n      description,\n      stacktrace,\n      statusProps,\n      messageProps,\n      descriptionProps,\n      actionsProps,\n      stacktraceProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: actionsSx, ...restActions } = actionsProps ?? {};\n    const { sx: stacktraceSx, ...restStacktrace } = stacktraceProps ?? {};\n\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: { xs: 2, md: 4 },\n          textAlign: 'center',\n          margin: '0 auto',\n          width: '600px',\n          maxWidth: '100%',\n          p: 2,\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        {status && (\n          <Typography component=\"h1\" variant=\"display\" data-testid=\"ErrorContent.status\" {...statusProps}>\n            {status}\n          </Typography>\n        )}\n        {message && (\n          <Typography component=\"h2\" variant=\"h3\" data-testid=\"ErrorContent.message\" {...messageProps}>\n            {message}\n          </Typography>\n        )}\n        {description && (\n          <Typography data-testid=\"ErrorContent.description\" {...descriptionProps}>\n            {description}\n          </Typography>\n        )}\n        {children}\n        {actions && (\n          <Box\n            sx={{\n              display: 'flex',\n              gap: 1,\n              flexDirection: { xs: 'column', md: 'row' },\n              alignItems: { xs: 'stretch', md: 'center' },\n              justifyContent: 'center',\n              ...actionsSx,\n            }}\n            data-testid=\"ErrorContent.actions\"\n            {...restActions}\n          >\n            {actions}\n          </Box>\n        )}\n        {stacktrace && (\n          <Box\n            component=\"code\"\n            sx={{\n              display: 'block',\n              border: 1,\n              borderColor: 'divider',\n              whiteSpace: 'pre',\n              overflow: 'auto',\n              py: 1,\n              px: 2,\n              borderRadius: '8px',\n              fontFamily: 'monospace',\n              fontSize: '11px',\n              lineHeight: '18px',\n              textAlign: 'left',\n              alignSelf: 'stretch',\n              ...stacktraceSx,\n            }}\n            data-testid=\"ErrorContent.stacktrace\"\n            {...restStacktrace}\n          >\n            {stacktrace}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["ErrorContent","forwardRef","sx","children","status","message","actions","description","stacktrace","statusProps","messageProps","descriptionProps","actionsProps","stacktraceProps","rest","ref","actionsSx","restActions","stacktraceSx","restStacktrace","_jsxs","Box","display","flexDirection","alignItems","justifyContent","gap","xs","md","textAlign","margin","width","maxWidth","p","_jsx","Typography","component","variant","border","borderColor","whiteSpace","overflow","py","px","borderRadius","fontFamily","fontSize","lineHeight","alignSelf"],"mappings":"yIAiDO,MAAMA,EAAsCC,EACjD,EAEIC,KACAC,WACAC,SACAC,UACAC,UACAC,cACAC,aACAC,cACAC,eACAC,mBACAC,eACAC,qBACGC,GAELC,KAEA,MAAQb,GAAIc,KAAcC,GAAgBL,GAAgB,CAAA,GAClDV,GAAIgB,KAAiBC,GAAmBN,GAAmB,CAAA,EAEnE,OACEO,EAACC,EAAG,CACFnB,GAAI,CACFoB,QAAS,OACTC,cAAe,SACfC,WAAY,SACZC,eAAgB,SAChBC,IAAK,CAAEC,GAAI,EAAGC,GAAI,GAClBC,UAAW,SACXC,OAAQ,SACRC,MAAO,QACPC,SAAU,OACVC,EAAG,KACA/B,GAELa,IAAKA,KACDD,EAAIX,SAAA,CAEPC,GACC8B,EAACC,EAAU,CAACC,UAAU,KAAKC,QAAQ,UAAS,cAAa,yBAA0B5B,WAChFL,IAGJC,GACC6B,EAACC,GAAWC,UAAU,KAAKC,QAAQ,KAAI,cAAa,0BAA2B3B,EAAYP,SACxFE,IAGJE,GACC2B,EAACC,EAAU,CAAA,cAAa,8BAA+BxB,EAAgBR,SACpEI,IAGJJ,EACAG,GACC4B,EAACb,EAAG,CACFnB,GAAI,CACFoB,QAAS,OACTI,IAAK,EACLH,cAAe,CAAEI,GAAI,SAAUC,GAAI,OACnCJ,WAAY,CAAEG,GAAI,UAAWC,GAAI,UACjCH,eAAgB,YACbT,GACJ,cACW,0BACRC,WAEHX,IAGJE,GACC0B,EAACb,EAAG,CACFe,UAAU,OACVlC,GAAI,CACFoB,QAAS,QACTgB,OAAQ,EACRC,YAAa,UACbC,WAAY,MACZC,SAAU,OACVC,GAAI,EACJC,GAAI,EACJC,aAAc,MACdC,WAAY,YACZC,SAAU,OACVC,WAAY,OACZlB,UAAW,OACXmB,UAAW,aACR9B,GACJ,cACW,6BACRC,EAAchB,SAEjBK"}
+{"version":3,"file":"ErrorContent.js","sources":["../../../src/components/errorContent/ErrorContent.tsx"],"sourcesContent":["import { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\nimport React, { ElementType, FC, forwardRef, ReactNode } from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface ErrorContentProps extends BoxProps<ElementType> {\n  /**\n   * Error Status code, eg. 404 or 500\n   */\n  status?: ReactNode;\n  /**\n   * Short message describing the error\n   */\n  message?: ReactNode;\n  /**\n   * Longer description of the error\n   */\n  description?: ReactNode;\n  /**\n   * Actions that user can interact with\n   */\n  actions?: ReactNode;\n  /**\n   * Stacktrace of an error\n   */\n  stacktrace?: ReactNode;\n  /**\n   * Properties passed to status code\n   */\n  statusProps?: TypographyProps<ElementType>;\n  /**\n   * Properties passed to message\n   */\n  messageProps?: TypographyProps<ElementType>;\n  /**\n   * Properties passed to description\n   */\n  descriptionProps?: TypographyProps<ElementType>;\n  /**\n   * Properties passed to wrapper of actions\n   */\n  actionsProps?: BoxProps<ElementType>;\n  /**\n   * Properties passed to code stacktrace\n   */\n  stacktraceProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component that renders an information about error\n */\nexport const ErrorContent: FC<ErrorContentProps> = forwardRef(\n  (\n    {\n      sx,\n      children,\n      status,\n      message,\n      actions,\n      description,\n      stacktrace,\n      statusProps,\n      messageProps,\n      descriptionProps,\n      actionsProps,\n      stacktraceProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: actionsSx, ...restActions } = actionsProps ?? {};\n    const { sx: stacktraceSx, ...restStacktrace } = stacktraceProps ?? {};\n\n    return (\n      <Box\n        sx={sxOverride(\n          {\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n            justifyContent: 'center',\n            gap: { xs: 2, md: 4 },\n            textAlign: 'center',\n            margin: '0 auto',\n            width: '600px',\n            maxWidth: '100%',\n            p: 2,\n          },\n          sx,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {status && (\n          <Typography component=\"h1\" variant=\"display\" data-testid=\"ErrorContent.status\" {...statusProps}>\n            {status}\n          </Typography>\n        )}\n        {message && (\n          <Typography component=\"h2\" variant=\"h3\" data-testid=\"ErrorContent.message\" {...messageProps}>\n            {message}\n          </Typography>\n        )}\n        {description && (\n          <Typography data-testid=\"ErrorContent.description\" {...descriptionProps}>\n            {description}\n          </Typography>\n        )}\n        {children}\n        {actions && (\n          <Box\n            sx={sxOverride(\n              {\n                display: 'flex',\n                gap: 1,\n                flexDirection: { xs: 'column', md: 'row' },\n                alignItems: { xs: 'stretch', md: 'center' },\n                justifyContent: 'center',\n              },\n              actionsSx,\n            )}\n            data-testid=\"ErrorContent.actions\"\n            {...restActions}\n          >\n            {actions}\n          </Box>\n        )}\n        {stacktrace && (\n          <Box\n            component=\"code\"\n            sx={sxOverride(\n              {\n                display: 'block',\n                border: 1,\n                borderColor: 'divider',\n                whiteSpace: 'pre',\n                overflow: 'auto',\n                py: 1,\n                px: 2,\n                borderRadius: '8px',\n                fontFamily: 'monospace',\n                fontSize: '11px',\n                lineHeight: '18px',\n                textAlign: 'left',\n                alignSelf: 'stretch',\n              },\n              stacktraceSx,\n            )}\n            data-testid=\"ErrorContent.stacktrace\"\n            {...restStacktrace}\n          >\n            {stacktrace}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["ErrorContent","forwardRef","sx","children","status","message","actions","description","stacktrace","statusProps","messageProps","descriptionProps","actionsProps","stacktraceProps","rest","ref","actionsSx","restActions","stacktraceSx","restStacktrace","_jsxs","Box","sxOverride","display","flexDirection","alignItems","justifyContent","gap","xs","md","textAlign","margin","width","maxWidth","p","_jsx","Typography","component","variant","border","borderColor","whiteSpace","overflow","py","px","borderRadius","fontFamily","fontSize","lineHeight","alignSelf"],"mappings":"2MAkDO,MAAMA,EAAsCC,EACjD,EAEIC,KACAC,WACAC,SACAC,UACAC,UACAC,cACAC,aACAC,cACAC,eACAC,mBACAC,eACAC,qBACGC,GAELC,KAEA,MAAQb,GAAIc,KAAcC,GAAgBL,GAAgB,CAAA,GAClDV,GAAIgB,KAAiBC,GAAmBN,GAAmB,CAAA,EAEnE,OACEO,EAACC,GACCnB,GAAIoB,EACF,CACEC,QAAS,OACTC,cAAe,SACfC,WAAY,SACZC,eAAgB,SAChBC,IAAK,CAAEC,GAAI,EAAGC,GAAI,GAClBC,UAAW,SACXC,OAAQ,SACRC,MAAO,QACPC,SAAU,OACVC,EAAG,GAELhC,GAEFa,IAAKA,KACDD,EAAIX,SAAA,CAEPC,GACC+B,EAACC,EAAU,CAACC,UAAU,KAAKC,QAAQ,UAAS,cAAa,yBAA0B7B,EAAWN,SAC3FC,IAGJC,GACC8B,EAACC,GAAWC,UAAU,KAAKC,QAAQ,KAAI,cAAa,0BAA2B5B,EAAYP,SACxFE,IAGJE,GACC4B,EAACC,EAAU,CAAA,cAAa,8BAA+BzB,EAAgBR,SACpEI,IAGJJ,EACAG,GACC6B,EAACd,GACCnB,GAAIoB,EACF,CACEC,QAAS,OACTI,IAAK,EACLH,cAAe,CAAEI,GAAI,SAAUC,GAAI,OACnCJ,WAAY,CAAEG,GAAI,UAAWC,GAAI,UACjCH,eAAgB,UAElBV,GACD,cACW,0BACRC,EAAWd,SAEdG,IAGJE,GACC2B,EAACd,EAAG,CACFgB,UAAU,OACVnC,GAAIoB,EACF,CACEC,QAAS,QACTgB,OAAQ,EACRC,YAAa,UACbC,WAAY,MACZC,SAAU,OACVC,GAAI,EACJC,GAAI,EACJC,aAAc,MACdC,WAAY,YACZC,SAAU,OACVC,WAAY,OACZlB,UAAW,OACXmB,UAAW,WAEb/B,GACD,cACW,6BACRC,EAAchB,SAEjBK"}

package/components/flag/FlowFlag.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,useMemo as t}from"react";import{Box as i}from"@mui/material";const o=e(({source:e,sx:o,width:a,size:s="small",variant:c="circle",disabled:l=!1,...d},n)=>{const u=t(()=>{switch(s){case"small":return 24;case"medium":return 44;case"large":return 56;default:return a??24}},[s,a]);return r(i,{"data-testid":"Flag",component:e??"div",sx:{width:`${u}px`,flexShrink:"0",border:1,borderColor:"onSurface.os500",...["circle","square"].includes(c)&&{height:`${u}px`,..."circle"===c?{borderRadius:`${u}px`}:{}},...l&&{userSelect:"none",borderColor:"disabled.tertiary",opacity:"0.65"},...o},ref:n,...d})});export{o as FlowFlag};
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,useMemo as t}from"react";import{Box as i}from"@mui/material";import{sxOverride as o}from"../../utils/sxOverride/sxOverride.js";const s=e(({source:e,sx:s,width:a,size:c="small",variant:d="circle",disabled:l=!1,...m},n)=>{const u=t(()=>{switch(c){case"small":return 24;case"medium":return 44;case"large":return 56;default:return a??24}},[c,a]);return r(i,{"data-testid":"Flag",component:e??"div",sx:o({width:`${u}px`,flexShrink:"0",border:1,borderColor:"onSurface.os500",...["circle","square"].includes(d)&&{height:`${u}px`,..."circle"===d?{borderRadius:`${u}px`}:{}},...l&&{userSelect:"none",borderColor:"disabled.tertiary",opacity:"0.65"}},s),ref:n,...m})});export{s as FlowFlag};
 //# sourceMappingURL=FlowFlag.js.map

package/components/flag/FlowFlag.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowFlag.js","sources":["../../../src/components/flag/FlowFlag.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useMemo } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface FlowFlagProps extends Omit<BoxProps, 'component'> {\n  /**\n   * SVG of Flag, e.g. import CZFLag from 'country-flag-icons/react/3x2/CZ';\n   */\n  source?: ElementType;\n  /**\n   * The size of the flag\n   * @default small\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * The width of the flag\n   */\n  width?: number;\n  /**\n   * Variants\n   * @default circle\n   */\n  variant?: '3x2' | 'circle' | 'square';\n  /**\n   * Disabled state\n   * @default false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Renders country flag icon\n */\nexport const FlowFlag: React.FC<FlowFlagProps> = forwardRef(\n  ({ source, sx, width: widthProp, size = 'small', variant = 'circle', disabled = false, ...rest }, ref) => {\n    // obtain width of the flag from size and width property\n    const width = useMemo(() => {\n      switch (size) {\n        case 'small':\n          return 24;\n        case 'medium':\n          return 44;\n        case 'large':\n          return 56;\n        default:\n          return widthProp ?? 24;\n      }\n    }, [size, widthProp]);\n\n    return (\n      <Box\n        data-testid=\"Flag\"\n        component={source ?? 'div'}\n        sx={{\n          width: `${width}px`,\n          flexShrink: '0',\n          // outline to improve accessibility\n          border: 1,\n          borderColor: 'onSurface.os500',\n          // 1:1 ratio\n          ...(['circle', 'square'].includes(variant) && {\n            height: `${width}px`,\n            ...(variant === 'circle' ? { borderRadius: `${width}px` } : {}),\n          }),\n          // disabled state\n          ...(disabled && {\n            userSelect: 'none',\n            borderColor: 'disabled.tertiary',\n            opacity: '0.65',\n          }),\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["FlowFlag","forwardRef","source","sx","width","widthProp","size","variant","disabled","rest","ref","useMemo","_jsx","Box","component","flexShrink","border","borderColor","includes","height","borderRadius","userSelect","opacity"],"mappings":"4HAgCO,MAAMA,EAAoCC,EAC/C,EAAGC,SAAQC,KAAIC,MAAOC,EAAWC,OAAO,QAASC,UAAU,SAAUC,YAAW,KAAUC,GAAQC,KAEhG,MAAMN,EAAQO,EAAQ,KACpB,OAAQL,GACN,IAAK,QACH,OAAO,GACT,IAAK,SACH,OAAO,GACT,IAAK,QACH,OAAO,GACT,QACE,OAAOD,GAAa,KAEvB,CAACC,EAAMD,IAEV,OACEO,EAACC,EAAG,CAAA,cACU,OACZC,UAAWZ,GAAU,MACrBC,GAAI,CACFC,MAAO,GAAGA,MACVW,WAAY,IAEZC,OAAQ,EACRC,YAAa,qBAET,CAAC,SAAU,UAAUC,SAASX,IAAY,CAC5CY,OAAQ,GAAGf,SACK,WAAZG,EAAuB,CAAEa,aAAc,GAAGhB,OAAc,OAG1DI,GAAY,CACda,WAAY,OACZJ,YAAa,oBACbK,QAAS,WAERnB,GAELO,IAAKA,KACDD"}
+{"version":3,"file":"FlowFlag.js","sources":["../../../src/components/flag/FlowFlag.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useMemo } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface FlowFlagProps extends Omit<BoxProps, 'component'> {\n  /**\n   * SVG of Flag, e.g. import CZFLag from 'country-flag-icons/react/3x2/CZ';\n   */\n  source?: ElementType;\n  /**\n   * The size of the flag\n   * @default small\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * The width of the flag\n   */\n  width?: number;\n  /**\n   * Variants\n   * @default circle\n   */\n  variant?: '3x2' | 'circle' | 'square';\n  /**\n   * Disabled state\n   * @default false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Renders country flag icon\n */\nexport const FlowFlag: React.FC<FlowFlagProps> = forwardRef(\n  ({ source, sx, width: widthProp, size = 'small', variant = 'circle', disabled = false, ...rest }, ref) => {\n    // obtain width of the flag from size and width property\n    const width = useMemo(() => {\n      switch (size) {\n        case 'small':\n          return 24;\n        case 'medium':\n          return 44;\n        case 'large':\n          return 56;\n        default:\n          return widthProp ?? 24;\n      }\n    }, [size, widthProp]);\n\n    return (\n      <Box\n        data-testid=\"Flag\"\n        component={source ?? 'div'}\n        sx={sxOverride(\n          {\n            width: `${width}px`,\n            flexShrink: '0',\n            // outline to improve accessibility\n            border: 1,\n            borderColor: 'onSurface.os500',\n            // 1:1 ratio\n            ...(['circle', 'square'].includes(variant) && {\n              height: `${width}px`,\n              ...(variant === 'circle' ? { borderRadius: `${width}px` } : {}),\n            }),\n            // disabled state\n            ...(disabled && {\n              userSelect: 'none',\n              borderColor: 'disabled.tertiary',\n              opacity: '0.65',\n            }),\n          },\n          sx,\n        )}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["FlowFlag","forwardRef","source","sx","width","widthProp","size","variant","disabled","rest","ref","useMemo","_jsx","Box","component","sxOverride","flexShrink","border","borderColor","includes","height","borderRadius","userSelect","opacity"],"mappings":"8LAiCO,MAAMA,EAAoCC,EAC/C,EAAGC,SAAQC,KAAIC,MAAOC,EAAWC,OAAO,QAASC,UAAU,SAAUC,YAAW,KAAUC,GAAQC,KAEhG,MAAMN,EAAQO,EAAQ,KACpB,OAAQL,GACN,IAAK,QACH,OAAO,GACT,IAAK,SACH,OAAO,GACT,IAAK,QACH,OAAO,GACT,QACE,OAAOD,GAAa,KAEvB,CAACC,EAAMD,IAEV,OACEO,EAACC,EAAG,CAAA,cACU,OACZC,UAAWZ,GAAU,MACrBC,GAAIY,EACF,CACEX,MAAO,GAAGA,MACVY,WAAY,IAEZC,OAAQ,EACRC,YAAa,qBAET,CAAC,SAAU,UAAUC,SAASZ,IAAY,CAC5Ca,OAAQ,GAAGhB,SACK,WAAZG,EAAuB,CAAEc,aAAc,GAAGjB,OAAc,OAG1DI,GAAY,CACdc,WAAY,OACZJ,YAAa,oBACbK,QAAS,SAGbpB,GAEFO,IAAKA,KACDD"}

package/components/footer/Footer.js

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Box as t,Container as i}from"@mui/material";const e=r(({sx:r,children:e,containerProps:c,primaryItems:n,secondaryItems:a,copyRight:m,location:s,socialButtons:d,...p},l)=>o(t,{component:"footer",sx:{py:1,"&:has(.FlowSectionContact-root)":{py:{xs:6,lg:10}},backgroundColor:"onSurface.os800",color:"common.white",".MuiDivider-root":{borderColor:"onSurface.os700",my:4,"& + .FooterSectionMenu-root":{marginTop:-4,"& > .MuiAccordion-root:first-of-type":{borderTop:"0"}},"& + .FooterAccordion-variantCompact":{mt:-1.5,"& + .MuiDivider-root":{mt:2.5}}},...r},ref:l,"data-testid":"Footer",...p,children:o(i,{maxWidth:"xl",...c,children:e})}));export{e as Footer};
+import{jsx as o}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Box as t,Container as i}from"@mui/material";import{sxOverride as e}from"../../utils/sxOverride/sxOverride.js";const c=r(({sx:r,children:c,containerProps:n,primaryItems:m,secondaryItems:a,copyRight:s,location:d,socialButtons:p,...l},u)=>o(t,{component:"footer",sx:e({py:1,"&:has(.FlowSectionContact-root)":{py:{xs:6,lg:10}},backgroundColor:"onSurface.os800",color:"common.white",".MuiDivider-root":{borderColor:"onSurface.os700",my:4,"& + .FooterSectionMenu-root":{marginTop:-4,"& > .MuiAccordion-root:first-of-type":{borderTop:"0"}},"& + .FooterAccordion-variantCompact":{mt:-1.5,"& + .MuiDivider-root":{mt:2.5}}}},r),ref:u,"data-testid":"Footer",...l,children:o(i,{maxWidth:"xl",...n,children:c})}));export{c as Footer};
 //# sourceMappingURL=Footer.js.map

package/components/footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sources":["../../../src/components/footer/Footer.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef } from 'react';\nimport { Box, BoxProps, Container, ContainerProps } from '@mui/material';\n\nexport interface FooterProps extends BoxProps<ElementType> {\n  /**\n   * Props applied to container\n   */\n  containerProps?: ContainerProps<ElementType>;\n}\n\n/**\n * Component to render content at the bottom of each page\n */\nexport const Footer: FC<FooterProps> = forwardRef(\n  (\n    { sx, children, containerProps, primaryItems, secondaryItems, copyRight, location, socialButtons, ...rest },\n    ref,\n  ) => {\n    return (\n      <Box\n        component=\"footer\"\n        sx={{\n          py: 1,\n          // complex footer has increased padding\n          '&:has(.FlowSectionContact-root)': {\n            py: { xs: 6, lg: 10 },\n          },\n          backgroundColor: 'onSurface.os800',\n          color: 'common.white',\n          // dividers inside\n          '.MuiDivider-root': {\n            borderColor: 'onSurface.os700',\n            my: 4,\n            // connect divider with FooterSectionMenu\n            '& + .FooterSectionMenu-root': {\n              marginTop: -4,\n              // connect divider and accordion borders\n              '& > .MuiAccordion-root:first-of-type': {\n                borderTop: '0',\n              },\n            },\n            // reduce divider space for the next compact accordion section\n            '& + .FooterAccordion-variantCompact': {\n              mt: -1.5,\n              // also reduce the space of divider after the accordion\n              '& + .MuiDivider-root': {\n                mt: 4 - 1.5,\n              },\n            },\n          },\n          ...sx,\n        }}\n        ref={ref}\n        data-testid=\"Footer\"\n        {...rest}\n      >\n        <Container maxWidth=\"xl\" {...containerProps}>\n          {children}\n        </Container>\n      </Box>\n    );\n  },\n);\n"],"names":["Footer","forwardRef","sx","children","containerProps","primaryItems","secondaryItems","copyRight","location","socialButtons","rest","ref","_jsx","Box","component","py","xs","lg","backgroundColor","color","borderColor","my","marginTop","borderTop","mt","Container","maxWidth"],"mappings":"8HAaO,MAAMA,EAA0BC,EACrC,EACIC,KAAIC,WAAUC,iBAAgBC,eAAcC,iBAAgBC,YAAWC,WAAUC,mBAAkBC,GACrGC,IAGEC,EAACC,EAAG,CACFC,UAAU,SACVZ,GAAI,CACFa,GAAI,EAEJ,kCAAmC,CACjCA,GAAI,CAAEC,GAAI,EAAGC,GAAI,KAEnBC,gBAAiB,kBACjBC,MAAO,eAEP,mBAAoB,CAClBC,YAAa,kBACbC,GAAI,EAEJ,8BAA+B,CAC7BC,WAAW,EAEX,uCAAwC,CACtCC,UAAW,MAIf,sCAAuC,CACrCC,IAAI,IAEJ,uBAAwB,CACtBA,GAAI,UAIPtB,GAELS,IAAKA,EAAG,cACI,YACRD,WAEJE,EAACa,GAAUC,SAAS,QAAStB,WAC1BD"}
+{"version":3,"file":"Footer.js","sources":["../../../src/components/footer/Footer.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef } from 'react';\nimport { Box, BoxProps, Container, ContainerProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface FooterProps extends BoxProps<ElementType> {\n  /**\n   * Props applied to container\n   */\n  containerProps?: ContainerProps<ElementType>;\n}\n\n/**\n * Component to render content at the bottom of each page\n */\nexport const Footer: FC<FooterProps> = forwardRef(\n  (\n    { sx, children, containerProps, primaryItems, secondaryItems, copyRight, location, socialButtons, ...rest },\n    ref,\n  ) => {\n    return (\n      <Box\n        component=\"footer\"\n        sx={sxOverride(\n          {\n            py: 1,\n            // complex footer has increased padding\n            '&:has(.FlowSectionContact-root)': {\n              py: { xs: 6, lg: 10 },\n            },\n            backgroundColor: 'onSurface.os800',\n            color: 'common.white',\n            // dividers inside\n            '.MuiDivider-root': {\n              borderColor: 'onSurface.os700',\n              my: 4,\n              // connect divider with FooterSectionMenu\n              '& + .FooterSectionMenu-root': {\n                marginTop: -4,\n                // connect divider and accordion borders\n                '& > .MuiAccordion-root:first-of-type': {\n                  borderTop: '0',\n                },\n              },\n              // reduce divider space for the next compact accordion section\n              '& + .FooterAccordion-variantCompact': {\n                mt: -1.5,\n                // also reduce the space of divider after the accordion\n                '& + .MuiDivider-root': {\n                  mt: 4 - 1.5,\n                },\n              },\n            },\n          },\n          sx,\n        )}\n        ref={ref}\n        data-testid=\"Footer\"\n        {...rest}\n      >\n        <Container maxWidth=\"xl\" {...containerProps}>\n          {children}\n        </Container>\n      </Box>\n    );\n  },\n);\n"],"names":["Footer","forwardRef","sx","children","containerProps","primaryItems","secondaryItems","copyRight","location","socialButtons","rest","ref","_jsx","Box","component","sxOverride","py","xs","lg","backgroundColor","color","borderColor","my","marginTop","borderTop","mt","Container","maxWidth"],"mappings":"gMAcO,MAAMA,EAA0BC,EACrC,EACIC,KAAIC,WAAUC,iBAAgBC,eAAcC,iBAAgBC,YAAWC,WAAUC,mBAAkBC,GACrGC,IAGEC,EAACC,EAAG,CACFC,UAAU,SACVZ,GAAIa,EACF,CACEC,GAAI,EAEJ,kCAAmC,CACjCA,GAAI,CAAEC,GAAI,EAAGC,GAAI,KAEnBC,gBAAiB,kBACjBC,MAAO,eAEP,mBAAoB,CAClBC,YAAa,kBACbC,GAAI,EAEJ,8BAA+B,CAC7BC,WAAW,EAEX,uCAAwC,CACtCC,UAAW,MAIf,sCAAuC,CACrCC,IAAI,IAEJ,uBAAwB,CACtBA,GAAI,QAKZvB,GAEFS,IAAKA,EAAG,cACI,YACRD,EAAIP,SAERS,EAACc,EAAS,CAACC,SAAS,QAASvB,WAC1BD"}

package/components/footer/FooterAccordion.js

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{useTheme as c,Accordion as e,AccordionSummary as a,AccordionDetails as n,Typography as i}from"@mui/material";import{getInteractiveStyle as l}from"../../materialui/button/interactive.js";const d=t(({sx:t,children:d,className:s,label:p,accordionSummaryProps:m,accordionDetailsProps:u,contentProps:f,variant:h="compact",...x},A)=>{const{sx:C,...b}=m??{},y=c();return o(e,{ref:A,"data-testid":"FooterAccordion",className:["FooterAccordion-root",`FooterAccordion-variant${h.charAt(0).toUpperCase()}${h.slice(1)}`,s].filter(Boolean).join(" "),sx:{color:"currentColor",..."compact"===h&&{border:"none"},...t},...x,children:[r(a,{"data-testid":"FooterAccordion.label","aria-controls":"footer-accordion",id:"footer-accordion",sx:{color:"currentColor","&:hover":{color:"currentColor","& .MuiAccordion-IconButton":{backgroundColor:y.palette.transparent.tertiary}},"& .MuiAccordion-IconButton":{height:"32px",width:"32px",...l({backgroundColor:"transparent",color:y.palette.onSurface.os0},{color:y.palette.onSurface.os0,backgroundColor:y.palette.transparent.tertiary})},..."compact"===h&&{...y.typography.caption2,p:"0",gap:1.5,justifyContent:"flex-start","& .MuiAccordionSummary-content":{flexGrow:"0"}},...C},...b,children:p}),r(n,{"data-testid":"FooterAccordion.children",...u,children:r(i,{variant:"disclaimer1",...f,children:d})})]})});export{d as FooterAccordion};
+import{jsxs as o,jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{useTheme as e,Accordion as c,AccordionSummary as a,AccordionDetails as n,Typography as i}from"@mui/material";import{getInteractiveStyle as l}from"../../materialui/button/interactive.js";import{sxOverride as s}from"../../utils/sxOverride/sxOverride.js";const d=t(({sx:t,children:d,className:p,label:m,accordionSummaryProps:u,accordionDetailsProps:f,contentProps:h,variant:x="compact",...A},C)=>{const{sx:b,...v}=u??{},y=e();return o(c,{ref:C,"data-testid":"FooterAccordion",className:["FooterAccordion-root",`FooterAccordion-variant${x.charAt(0).toUpperCase()}${x.slice(1)}`,p].filter(Boolean).join(" "),sx:s({color:"currentColor",..."compact"===x&&{border:"none"}},t),...A,children:[r(a,{"data-testid":"FooterAccordion.label","aria-controls":"footer-accordion",id:"footer-accordion",sx:s({color:"currentColor","&:hover":{color:"currentColor","& .MuiAccordion-IconButton":{backgroundColor:y.palette.transparent.tertiary}},"& .MuiAccordion-IconButton":{height:"32px",width:"32px",...l({backgroundColor:"transparent",color:y.palette.onSurface.os0},{color:y.palette.onSurface.os0,backgroundColor:y.palette.transparent.tertiary})},..."compact"===x&&{...y.typography.caption2,p:"0",gap:1.5,justifyContent:"flex-start","& .MuiAccordionSummary-content":{flexGrow:"0"}}},b),...v,children:m}),r(n,{"data-testid":"FooterAccordion.children",...f,children:r(i,{variant:"disclaimer1",...h,children:d})})]})});export{d as FooterAccordion};
 //# sourceMappingURL=FooterAccordion.js.map