@skodaflow/web-library 8.4.0 → 8.5.0

package/components/carousel/Autoplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autoplay.js","sources":["../../../src/components/carousel/Autoplay.tsx"],"sourcesContent":["import { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { useCarousel } from './hooks';\nimport { Swiper as CarouselInstance } from 'swiper';\nimport { useSwiper } from 'swiper/react';\nimport { useEffect, useState } from 'react';\nimport { PlayPauseButton, PlayPauseButtonProps } from '@/src/components/playPauseButton/PlayPauseButton';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\n\nexport interface CarouselAutoplayProgressProps extends Omit<BoxProps, 'children' | 'position'> {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Progress Props\n   */\n  spinnerProps?: Omit<SpinnerProps, 'value'>;\n  /**\n   * Append style to wrapper box to change position of component\n   */\n  position?: 'outside' | 'inside';\n}\n\n/**\n * Spinner with autoplay progress value\n */\nexport const CarouselAutoplayProgress = ({\n  carousel: carouselProp,\n  sx,\n  spinnerProps,\n  position = 'outside',\n  ...rest\n}: CarouselAutoplayProgressProps) => {\n  const [value, setValue] = useState<number>(0);\n  const carouselHook = useSwiper();\n  const carousel = carouselProp || carouselHook;\n\n  useEffect(() => {\n    // attach listener that controls progress value based on swiper special event\n    if (carousel?.autoplay) {\n      carousel.on('autoplayTimeLeft', (instance, _timeLeft, percentage) => {\n        setValue(instance.autoplay.paused ? 0 : Math.round(100 - percentage * 100));\n      });\n    }\n  }, [!!carousel]);\n\n  return (\n    <Box\n      sx={sxOverride(\n        {\n          position: 'relative',\n          display: 'flex',\n          m: 2,\n          ...(position === 'inside' && {\n            position: 'absolute',\n            zIndex: '90',\n            bottom: '0',\n            left: '0',\n            right: '0',\n            m: 2,\n          }),\n        },\n        sx,\n      )}\n      data-testid=\"CarouselAutoplayProgress\"\n      {...rest}\n    >\n      <Spinner value={value} {...spinnerProps} />\n    </Box>\n  );\n};\n\nexport interface CarouselAutoplayIconButtonProps extends Omit<Partial<PlayPauseButtonProps>, 'aria-label'> {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Accessible label for the button. Accepts a plain string or a function called with the current playing state.\n   * @default (isPlaying) => isPlaying ? 'Pause carousel autoplay' : 'Play carousel autoplay'\n   */\n  'aria-label'?: string | ((isPlaying: boolean) => string);\n}\n\n/**\n * IconButton controlling play/paused state of the autoplay\n */\nexport function CarouselAutoplayIconButton({\n  carousel: carouselProp,\n  'aria-label': ariaLabel = (isPlaying) => isPlaying ? 'Pause carousel autoplay' : 'Play carousel autoplay',\n  ...rest\n}: CarouselAutoplayIconButtonProps) {\n  const carouselHook = useCarousel();\n  const carousel = carouselProp || carouselHook;\n  const [value, setValue] = useState<number>(0);\n  const isPlaying = !!carousel?.autoplay?.running;\n\n  useEffect(() => {\n    // attach listener that controls progress value based on swiper special event\n    if (carousel?.autoplay) {\n      carousel.on('autoplayTimeLeft', (instance, _timeLeft, percentage) => {\n        setValue(instance.autoplay.paused ? 0 : Math.round(100 - percentage * 100));\n      });\n    }\n  }, [!!carousel]);\n\n  return (\n    <PlayPauseButton\n      aria-label={typeof ariaLabel === 'function' ? ariaLabel(isPlaying) : ariaLabel}\n      isPlaying={isPlaying}\n      progress={value}\n      onClick={() => {\n        carousel?.autoplay?.[carousel?.autoplay?.running ? 'stop' : 'start']();\n      }}\n      {...rest}\n    />\n  );\n}\n"],"names":["CarouselAutoplayProgress","carousel","carouselProp","sx","spinnerProps","position","rest","value","setValue","useState","carouselHook","useSwiper","useEffect","autoplay","on","instance","_timeLeft","percentage","paused","Math","round","_jsx","Box","sxOverride","display","m","zIndex","bottom","left","right","Spinner","CarouselAutoplayIconButton","ariaLabel","isPlaying","useCarousel","running","PlayPauseButton","progress","onClick"],"mappings":"+YA2BaA,EAA2B,EACtCC,SAAUC,EACVC,KACAC,eACAC,WAAW,aACRC,MAEH,MAAOC,EAAOC,GAAYC,EAAiB,GACrCC,EAAeC,IACfV,EAAWC,GAAgBQ,EAWjC,OATAE,EAAU,KAEJX,GAAUY,UACZZ,EAASa,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,KACpDT,EAASO,EAASF,SAASK,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,GAAGhB,IAGJoB,EAACC,GACCnB,GAAIoB,EACF,CACElB,SAAU,WACVmB,QAAS,OACTC,EAAG,KACc,WAAbpB,GAAyB,CAC3BA,SAAU,WACVqB,OAAQ,KACRC,OAAQ,IACRC,KAAM,IACNC,MAAO,IACPJ,EAAG,IAGPtB,GACD,cACW,8BACRG,WAEJe,EAACS,EAAO,CAACvB,MAAOA,KAAWH,OAoB3B,SAAU2B,GACd9B,SAAUC,EACV,aAAc8B,EAAaC,GAAcA,EAAY,0BAA4B,4BAC9E3B,IAEH,MAAMI,EAAewB,IACfjC,EAAWC,GAAgBQ,GAC1BH,EAAOC,GAAYC,EAAiB,GACrCwB,IAAchC,GAAUY,UAAUsB,QAWxC,OATAvB,EAAU,KAEJX,GAAUY,UACZZ,EAASa,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,KACpDT,EAASO,EAASF,SAASK,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,GAAGhB,IAGJoB,EAACe,EAAe,CAAA,aACmB,mBAAdJ,EAA2BA,EAAUC,GAAaD,EACrEC,UAAWA,EACXI,SAAU9B,EACV+B,QAAS,KACPrC,GAAUY,WAAWZ,GAAUY,UAAUsB,QAAU,OAAS,eAE1D7B,GAGV"}
+{"version":3,"file":"Autoplay.js","sources":["../../../src/components/carousel/Autoplay.tsx"],"sourcesContent":["import { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { useCarousel } from './hooks';\nimport { Swiper as CarouselInstance } from 'swiper';\nimport { useSwiper } from 'swiper/react';\nimport { useEffect, useState } from 'react';\nimport { PlayPauseButton, PlayPauseButtonProps } from '@/src/components/playPauseButton/PlayPauseButton';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\n\nexport interface CarouselAutoplayProgressProps extends Omit<BoxProps, 'children' | 'position'> {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Progress Props\n   */\n  spinnerProps?: Omit<SpinnerProps, 'value'>;\n  /**\n   * Append style to wrapper box to change position of component\n   */\n  position?: 'outside' | 'inside';\n}\n\n/**\n * Spinner with autoplay progress value\n */\nexport const CarouselAutoplayProgress = ({\n  carousel: carouselProp,\n  sx,\n  spinnerProps,\n  position = 'outside',\n  ...rest\n}: CarouselAutoplayProgressProps) => {\n  const [value, setValue] = useState<number>(0);\n  const carouselHook = useSwiper();\n  const carousel = carouselProp || carouselHook;\n\n  useEffect(() => {\n    // attach listener that controls progress value based on swiper special event\n    if (carousel?.autoplay) {\n      carousel.on('autoplayTimeLeft', (instance, _timeLeft, percentage) => {\n        setValue(instance.autoplay.paused ? 0 : Math.round(100 - percentage * 100));\n      });\n    }\n  }, [!!carousel]);\n\n  return (\n    <Box\n      sx={sxOverride(\n        {\n          position: 'relative',\n          display: 'flex',\n          m: 2,\n          ...(position === 'inside' && {\n            position: 'absolute',\n            zIndex: '90',\n            bottom: '0',\n            left: '0',\n            right: '0',\n            m: 2,\n          }),\n        },\n        sx,\n      )}\n      data-testid=\"CarouselAutoplayProgress\"\n      {...rest}\n    >\n      <Spinner value={value} {...spinnerProps} />\n    </Box>\n  );\n};\n\nexport interface CarouselAutoplayIconButtonProps extends Omit<Partial<PlayPauseButtonProps>, 'aria-label'> {\n  /**\n   * Optional Carousel instance from useCarouselInstance hook\n   */\n  carousel?: CarouselInstance;\n  /**\n   * Accessible label for the button. Accepts a plain string or a function called with the current playing state.\n   * @default (isPlaying) => isPlaying ? 'Pause carousel autoplay' : 'Play carousel autoplay'\n   */\n  'aria-label'?: string | ((isPlaying: boolean) => string);\n}\n\n/**\n * IconButton controlling play/paused state of the autoplay\n */\nexport function CarouselAutoplayIconButton({\n  carousel: carouselProp,\n  'aria-label': ariaLabel = (isPlaying) => (isPlaying ? 'Pause carousel autoplay' : 'Play carousel autoplay'),\n  ...rest\n}: CarouselAutoplayIconButtonProps) {\n  const carouselHook = useCarousel();\n  const carousel = carouselProp || carouselHook;\n  const [value, setValue] = useState<number>(0);\n  const isPlaying = !!carousel?.autoplay?.running;\n\n  useEffect(() => {\n    // attach listener that controls progress value based on swiper special event\n    if (carousel?.autoplay) {\n      carousel.on('autoplayTimeLeft', (instance, _timeLeft, percentage) => {\n        setValue(instance.autoplay.paused ? 0 : Math.round(100 - percentage * 100));\n      });\n    }\n  }, [!!carousel]);\n\n  return (\n    <PlayPauseButton\n      aria-label={typeof ariaLabel === 'function' ? ariaLabel(isPlaying) : ariaLabel}\n      isPlaying={isPlaying}\n      progress={value}\n      onClick={() => {\n        carousel?.autoplay?.[carousel?.autoplay?.running ? 'stop' : 'start']();\n      }}\n      {...rest}\n    />\n  );\n}\n"],"names":["CarouselAutoplayProgress","carousel","carouselProp","sx","spinnerProps","position","rest","value","setValue","useState","carouselHook","useSwiper","useEffect","autoplay","on","instance","_timeLeft","percentage","paused","Math","round","_jsx","Box","sxOverride","display","m","zIndex","bottom","left","right","Spinner","CarouselAutoplayIconButton","ariaLabel","isPlaying","useCarousel","running","PlayPauseButton","progress","onClick"],"mappings":"+YA2BaA,EAA2B,EACtCC,SAAUC,EACVC,KACAC,eACAC,WAAW,aACRC,MAEH,MAAOC,EAAOC,GAAYC,EAAiB,GACrCC,EAAeC,IACfV,EAAWC,GAAgBQ,EAWjC,OATAE,EAAU,KAEJX,GAAUY,UACZZ,EAASa,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,KACpDT,EAASO,EAASF,SAASK,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,GAAGhB,IAGJoB,EAACC,GACCnB,GAAIoB,EACF,CACElB,SAAU,WACVmB,QAAS,OACTC,EAAG,KACc,WAAbpB,GAAyB,CAC3BA,SAAU,WACVqB,OAAQ,KACRC,OAAQ,IACRC,KAAM,IACNC,MAAO,IACPJ,EAAG,IAGPtB,GACD,cACW,8BACRG,WAEJe,EAACS,EAAO,CAACvB,MAAOA,KAAWH,OAoB3B,SAAU2B,GACd9B,SAAUC,EACV,aAAc8B,EAAaC,GAAeA,EAAY,0BAA4B,4BAC/E3B,IAEH,MAAMI,EAAewB,IACfjC,EAAWC,GAAgBQ,GAC1BH,EAAOC,GAAYC,EAAiB,GACrCwB,IAAchC,GAAUY,UAAUsB,QAWxC,OATAvB,EAAU,KAEJX,GAAUY,UACZZ,EAASa,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,KACpDT,EAASO,EAASF,SAASK,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,GAAGhB,IAGJoB,EAACe,EAAe,CAAA,aACmB,mBAAdJ,EAA2BA,EAAUC,GAAaD,EACrEC,UAAWA,EACXI,SAAU9B,EACV+B,QAAS,KACPrC,GAAUY,WAAWZ,GAAUY,UAAUsB,QAAU,OAAS,eAE1D7B,GAGV"}

package/components/carousel/Carousel.js

@@ -1,2 +1,2 @@
-import{jsx as i}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Box as r}from"@mui/material";import{sxOverride as t}from"../../utils/sxOverride/sxOverride.js";import{Swiper as a}from"swiper/react";import{Keyboard as n,EffectFade as o,Autoplay as p,Parallax as s}from"swiper/modules";const l=e(({children:e,sx:l,onInit:d,effect:m,autoplay:c,parallax:w,peekDistance:f=100,peekSpeed:x=150,...u},h)=>i(r,{component:a,spaceBetween:0,autoHeight:!0,loop:!0,keyboard:{enabled:!0},modules:[n,..."fade"===m?[o]:[],...c?[p]:[],...w?[s]:[]],parallax:w,effect:m,autoplay:c,ref:h,...u,onSwiper:d,"data-peekspeed":x,sx:t({display:"block",ml:"auto",mr:"auto",p:"0",maxWidth:"100%",position:"relative",zIndex:i=>i.zIndex.carousel,overflow:"hidden",listStyle:"none","&.swiper-horizontal":{touchAction:"pan-y"},"&.swiper-vertical":{touchAction:"pan-x","& > .swiper-wrapper":{flexDirection:"column"}},"&.swiper-autoheight":{height:"auto","& > .swiper-wrapper":{alignItems:"flex-start",transitionProperty:"transform, height"}},"& .swiper-wrapper":{position:"relative",width:"100%",height:"100%",zIndex:i=>i.zIndex.carousel,display:"flex",transitionProperty:"transform",transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)",boxSizing:"content-box",transform:"translate3d(0px, 0, 0)"},..."fade"!==m&&{"&.peeking .swiper-wrapper > .swiper-slide":{transitionProperty:"transform",transitionDuration:`${x}ms`,transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)"},"&.peek-next .swiper-wrapper > .swiper-slide":{transform:i=>`translate3D(${"rtl"===i.direction?"":"-"}${f}px, 0, 0)`},"&.peek-prev .swiper-wrapper > .swiper-slide":{transform:i=>`translate3D(${"rtl"===i.direction?"-":""}${f}px, 0, 0)`}},".swiper-slide-invisible-blank":{visibility:"hidden"},".swiper-backface-hidden .swiper-slide":{transform:"translateZ(0)",WebkitBackfaceVisibility:"hidden",backfaceVisibility:"hidden"}},l),children:e}));export{l as Carousel};
+import{jsx as e}from"react/jsx-runtime";import{forwardRef as i,Children as r,isValidElement as t}from"react";import{Box as o}from"@mui/material";import{sxOverride as a}from"../../utils/sxOverride/sxOverride.js";import{Swiper as n}from"swiper/react";import{A11y as s,Keyboard as p,EffectFade as l,Autoplay as d,Parallax as c}from"swiper/modules";const m=i(({children:i,sx:m,onInit:f,effect:w,autoplay:u,parallax:x,a11y:h,peekDistance:y=100,peekSpeed:b=150,...v},g)=>{const k=r.toArray(i).filter(e=>t(e));return e(o,{component:n,spaceBetween:0,autoHeight:!0,loop:!0,keyboard:{enabled:!0},modules:[s,p,..."fade"===w?[l]:[],...u?[d]:[],...x?[c]:[]],parallax:x,effect:w,autoplay:u,a11y:"boolean"==typeof h?h:{...k.some(e=>void 0!==e.props?.role)&&{slideRole:""},...k.some(e=>void 0!==e.props?.["aria-label"])&&{slideLabelMessage:""},...h},ref:g,...v,onSwiper:f,"data-peekspeed":b,sx:a({display:"block",ml:"auto",mr:"auto",p:"0",maxWidth:"100%",position:"relative",zIndex:e=>e.zIndex.carousel,overflow:"hidden",listStyle:"none","&.swiper-horizontal":{touchAction:"pan-y"},"&.swiper-vertical":{touchAction:"pan-x","& > .swiper-wrapper":{flexDirection:"column"}},"&.swiper-autoheight":{height:"auto","& > .swiper-wrapper":{alignItems:"flex-start",transitionProperty:"transform, height"}},"& .swiper-wrapper":{position:"relative",width:"100%",height:"100%",zIndex:e=>e.zIndex.carousel,display:"flex",transitionProperty:"transform",transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)",boxSizing:"content-box",transform:"translate3d(0px, 0, 0)"},..."fade"!==w&&{"&.peeking .swiper-wrapper > .swiper-slide":{transitionProperty:"transform",transitionDuration:`${b}ms`,transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)"},"&.peek-next .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"":"-"}${y}px, 0, 0)`},"&.peek-prev .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"-":""}${y}px, 0, 0)`}},"& > .swiper-notification":{position:"absolute",left:"0",top:"0",pointerEvents:"none",opacity:"0",zIndex:"-1000"},".swiper-slide-invisible-blank":{visibility:"hidden"},".swiper-backface-hidden .swiper-slide":{transform:"translateZ(0)",WebkitBackfaceVisibility:"hidden",backfaceVisibility:"hidden"}},m),children:i})});export{m as Carousel};
 //# sourceMappingURL=Carousel.js.map

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 { 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"}
+{"version":3,"file":"Carousel.js","sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import React, { Children, forwardRef, HTMLAttributes, isValidElement } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { Swiper, SwiperProps } from 'swiper/react';\nimport { A11y, 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, a11y, peekDistance = 100, peekSpeed = 150, ...rest }, ref) => {\n    const slides = Children.toArray(children).filter((child) => isValidElement<HTMLAttributes<HTMLElement>>(child));\n\n    return (\n      <Box\n        component={Swiper}\n        spaceBetween={0}\n        autoHeight\n        loop\n        keyboard={{\n          enabled: true,\n        }}\n        modules={[\n          A11y,\n          Keyboard,\n          ...(effect === 'fade' ? [EffectFade] : []),\n          ...(autoplay ? [Autoplay] : []),\n          ...(parallax ? [Parallax] : []),\n        ]}\n        parallax={parallax}\n        effect={effect}\n        autoplay={autoplay}\n        a11y={\n          typeof a11y === 'boolean'\n            ? a11y\n            : {\n                // Swiper overwrites role and aria-label of every slide, keep the ones passed to a slide\n                ...(slides.some((slide) => slide.props?.role !== undefined) && { slideRole: '' }),\n                ...(slides.some((slide) => slide.props?.['aria-label'] !== undefined) && { slideLabelMessage: '' }),\n                ...a11y,\n              }\n        }\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            // live region of the Swiper A11y module, style taken from swiper/css/a11y\n            '& > .swiper-notification': {\n              position: 'absolute',\n              left: '0',\n              top: '0',\n              pointerEvents: 'none',\n              opacity: '0',\n              zIndex: '-1000',\n            },\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","a11y","peekDistance","peekSpeed","rest","ref","slides","Children","toArray","filter","child","isValidElement","_jsx","Box","component","Swiper","spaceBetween","autoHeight","loop","keyboard","enabled","modules","A11y","Keyboard","EffectFade","Autoplay","Parallax","some","slide","undefined","props","role","slideRole","slideLabelMessage","onSwiper","sxOverride","display","ml","mr","p","maxWidth","position","zIndex","theme","carousel","overflow","listStyle","touchAction","flexDirection","height","alignItems","transitionProperty","width","transitionTimingFunction","boxSizing","transform","transitionDuration","direction","left","top","pointerEvents","opacity","visibility","WebkitBackfaceVisibility","backfaceVisibility"],"mappings":"yVAiCO,MAAMA,EAAoCC,EAC/C,EAAGC,WAAUC,KAAIC,SAAQC,SAAQC,WAAUC,WAAUC,OAAMC,eAAe,IAAKC,YAAY,OAAQC,GAAQC,KACzG,MAAMC,EAASC,EAASC,QAAQb,GAAUc,OAAQC,GAAUC,EAA4CD,IAExG,OACEE,EAACC,EAAG,CACFC,UAAWC,EACXC,aAAc,EACdC,cACAC,MAAI,EACJC,SAAU,CACRC,SAAS,GAEXC,QAAS,CACPC,EACAC,KACe,SAAXzB,EAAoB,CAAC0B,GAAc,MACnCzB,EAAW,CAAC0B,GAAY,MACxBzB,EAAW,CAAC0B,GAAY,IAE9B1B,SAAUA,EACVF,OAAQA,EACRC,SAAUA,EACVE,KACkB,kBAATA,EACHA,EACA,IAEMK,EAAOqB,KAAMC,QAAgCC,IAAtBD,EAAME,OAAOC,OAAuB,CAAEC,UAAW,OACxE1B,EAAOqB,KAAMC,QAA0CC,IAAhCD,EAAME,QAAQ,gBAAgC,CAAEG,kBAAmB,OAC3FhC,GAGXI,IAAKA,KACDD,EACJ8B,SAAUrC,mBACMM,EAChBP,GAAIuC,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,SAAXzD,GAAqB,CACvB,4CAA6C,CAC3CqD,mBAAoB,YACpBK,mBAAoB,GAAGrD,MACvBkD,yBAA0B,6DAE5B,8CAA+C,CAC7CE,UAAYZ,GAAU,eAAmC,QAApBA,EAAMc,UAAsB,GAAK,MAAMvD,cAE9E,8CAA+C,CAC7CqD,UAAYZ,GAAU,eAAmC,QAApBA,EAAMc,UAAsB,IAAM,KAAKvD,eAKhF,2BAA4B,CAC1BuC,SAAU,WACViB,KAAM,IACNC,IAAK,IACLC,cAAe,OACfC,QAAS,IACTnB,OAAQ,SAEV,gCAAiC,CAC/BoB,WAAY,UAEd,wCAAyC,CACvCP,UAAW,gBACXQ,yBAA0B,SAC1BC,mBAAoB,WAIxBpE,GACDD,SAEAA"}

package/components/carousel/Navigation.js

@@ -1,2 +1,2 @@
-import{jsxs as o,Fragment as r,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 c}from"@mui/material";import{ChevronLeftIcon as l}from"../icon/stroke/ChevronLeftIcon.js";import{ChevronRightIcon as p}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:l),q=C||(j?m:p),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":"onSurface.os100",backgroundColor:P?"transparent":"surface.primary"},{backgroundColor:"surface.secondary"}),"&.Mui-disabled":{color:"disabled.tertiary",borderColor:P?"transparent":"disabled.secondary",backgroundColor:P?"transparent":"disabled.secondary"}}),[]);return y&&E?.isLocked?null:o(r,{children:[e(c,{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(c,{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};
+import{jsxs as r,Fragment as o,jsx as e}from"react/jsx-runtime";import{useRef as n,useMemo as t,useEffect as i}from"react";import{useCarousel as s,useCarouselPeekEffect as a}from"./hooks.js";import{useTheme as l,useMediaQuery as c,useForkRef as p,IconButton as u}from"@mui/material";import{ChevronLeftIcon as d}from"../icon/stroke/ChevronLeftIcon.js";import{ChevronRightIcon as x}from"../icon/stroke/ChevronRightIcon.js";import{ArrowLeftIcon as m}from"../icon/stroke/ArrowLeftIcon.js";import{ArrowRightIcon as f}from"../icon/stroke/ArrowRightIcon.js";import{getInteractiveStyle as v}from"../../materialui/button/interactive.js";import{sxOverride as b}from"../../utils/sxOverride/sxOverride.js";function k({carousel:k,peekEffect:C=!1,prevButtonProps:I,prevIconProps:g,PrevIconComponent:h,nextButtonProps:j,nextIconProps:P,NextIconComponent:y,arrows:M=!0,onBackground:E=!1,autoHideNavigation:L=!1}){const w=s(),B=k||w,N="fade"!==B?.params?.effect&&C,S=l(),z=c(S.breakpoints.up("md")),{sx:A,ref:O,onClick:R,...H}=I||{},{sx:q,ref:D,onClick:F,...G}=j||{},J=n(null),K=n(null),Q=p(O,J),T=p(D,K),U=n(null),V=!!B&&!B.params?.loop&&B.isBeginning,W=!!B&&!B.params?.loop&&B.isEnd,[X,Y]=a(B),Z=h||(M?m:d),$=y||(M?f:x),_=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"}},...v({color:"text.primary",borderColor:E?"transparent":"onSurface.os100",backgroundColor:E?"transparent":"surface.primary"},{backgroundColor:"surface.secondary"}),"&.Mui-disabled":{color:"disabled.tertiary",borderColor:E?"transparent":"disabled.secondary",backgroundColor:E?"transparent":"disabled.secondary"}}),[]);return i(()=>{V&&!W&&"prev"===U.current&&K.current?.focus(),W&&!V&&"next"===U.current&&J.current?.focus(),U.current=null},[V,W]),L&&B?.isLocked?null:r(o,{children:[e(u,{disabled:V,onClick:r=>{R?.(r),U.current=0===r.detail?"prev":null,B?.slidePrev(),N&&X&&Y("reset")},onMouseEnter:()=>z&&N&&Y("prev"),onMouseLeave:()=>N&&X&&Y("reset"),sx:b({..._,insetInlineStart:"16px"},A),"aria-label":"Previous slide","aria-controls":"carousel",color:"surface",size:"medium",ref:Q,...H,children:"rtl"===S.direction?e($,{...g}):e(Z,{...g})}),e(u,{disabled:W,onClick:r=>{F?.(r),U.current=0===r.detail?"next":null,B?.slideNext(),N&&X&&Y("reset")},onMouseEnter:()=>z&&N&&Y("next"),onMouseLeave:()=>N&&X&&Y("reset"),sx:b({..._,insetInlineEnd:"16px"},q),"aria-label":"Next slide","aria-controls":"carousel",color:"surface",ref:T,...G,children:"rtl"===S.direction?e(Z,{...P}):e($,{...P})})]})}export{k 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';\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' : 'onSurface.os100',\n          backgroundColor: onBackground ? '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' : 'disabled.secondary',\n        backgroundColor: onBackground ? '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,cAAgB,kBAC5CyC,gBAAiBzC,EAAe,cAAgB,mBAElD,CACEyC,gBAAiB,sBAIrB,iBAAkB,CAChBF,MAAO,oBACPC,YAAaxC,EAAe,cAAgB,qBAC5CyC,gBAAiBzC,EAAe,cAAgB,wBAGpD,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"}
+{"version":3,"file":"Navigation.js","sources":["../../../src/components/carousel/Navigation.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, ComponentType, MouseEvent } from 'react';\nimport { useCarousel, useCarouselPeekEffect } from './hooks';\nimport { useTheme, IconButton, IconButtonProps, SvgIconProps, useForkRef, 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, ref: prevRefProp, onClick: onPrevClick, ...restPrev } = prevButtonProps || {};\n  const { sx: nextSx, ref: nextRefProp, onClick: onNextClick, ...restNext } = nextButtonProps || {};\n  const prevRef = useRef<HTMLButtonElement>(null);\n  const nextRef = useRef<HTMLButtonElement>(null);\n  const handlePrevRef = useForkRef(prevRefProp, prevRef);\n  const handleNextRef = useForkRef(nextRefProp, nextRef);\n  // arrow activated by keyboard, it loses focus to the page once it gets disabled at the edge\n  const keyboardArrow = useRef<'prev' | 'next' | null>(null);\n  const prevDisabled = !!carousel && !carousel.params?.loop && carousel.isBeginning;\n  const nextDisabled = !!carousel && !carousel.params?.loop && carousel.isEnd;\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' : 'onSurface.os100',\n          backgroundColor: onBackground ? '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' : 'disabled.secondary',\n        backgroundColor: onBackground ? 'transparent' : 'disabled.secondary',\n      },\n    }),\n    [],\n  );\n\n  // keep keyboard focus in the navigation, hand it over to the other arrow at the edge\n  useEffect(() => {\n    if (prevDisabled && !nextDisabled && keyboardArrow.current === 'prev') {\n      nextRef.current?.focus();\n    }\n    if (nextDisabled && !prevDisabled && keyboardArrow.current === 'next') {\n      prevRef.current?.focus();\n    }\n    keyboardArrow.current = null;\n  }, [prevDisabled, nextDisabled]);\n\n  // hide navigation when not needed\n  if (autoHideNavigation && carousel?.isLocked) {\n    return null;\n  }\n  return (\n    <>\n      <IconButton\n        disabled={prevDisabled}\n        onClick={(event: MouseEvent<HTMLButtonElement>) => {\n          onPrevClick?.(event);\n          // detail is 0 for a click triggered by Enter or Space\n          keyboardArrow.current = event.detail === 0 ? 'prev' : null;\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        ref={handlePrevRef}\n        {...restPrev}\n      >\n        {theme.direction === 'rtl' ? <NextIcon {...prevIconProps} /> : <PrevIcon {...prevIconProps} />}\n      </IconButton>\n      <IconButton\n        disabled={nextDisabled}\n        onClick={(event: MouseEvent<HTMLButtonElement>) => {\n          onNextClick?.(event);\n          // detail is 0 for a click triggered by Enter or Space\n          keyboardArrow.current = event.detail === 0 ? 'next' : null;\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        ref={handleNextRef}\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","ref","prevRefProp","onClick","onPrevClick","restPrev","nextSx","nextRefProp","onNextClick","restNext","prevRef","useRef","nextRef","handlePrevRef","useForkRef","handleNextRef","keyboardArrow","prevDisabled","loop","isBeginning","nextDisabled","isEnd","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","useEffect","current","focus","isLocked","_jsxs","_Fragment","children","_jsx","IconButton","disabled","event","detail","slidePrev","onMouseEnter","onMouseLeave","sxOverride","insetInlineStart","size","direction","slideNext","insetInlineEnd"],"mappings":"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"}

package/components/carousel/Pagination.js

@@ -1,2 +1,2 @@
-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};
+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{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=o(({carousel:e,position:o,variant:t,sx:n,...i},a)=>{const l=p(),c=e||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"===o&&{position:"absolute",zIndex:"90",bottom:"0",left:"0",right:"0"}},n),ref:a,position:o,...i})}),f=o(({carousel:e,dotsWrapperProps:o,dotProps:s,position:t,sx:n,...i},l)=>{const{sx:c,...p}=o??{};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*(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),...p,children:e?.slides?.map((o,t)=>{const n=!e?.params?.loop&&e?.isEnd&&t===(e?.slides.length||0)-1||(!e?.isEnd||e.params?.loop)&&t===e?.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=o(({carousel:o,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:()=>o?.isEnd&&!o.params?.loop?o?.slideTo(0):o?.slideNext(),...x,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}`})]})})})}),g=o(({carousel:o,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:o?.slides?.map((s,c)=>{const p=!o?.params?.loop&&o?.isEnd&&c===(o?.slides.length||0)-1||(!o?.isEnd||o.params?.loop)&&c===o?.realIndex,x=c<=(o?.realIndex||0),{sx:m,...f}=("function"==typeof t?t(c,p):t)??{},{sx:h,...g}=("function"==typeof i?i(c,p):i)??{};return e(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","aria-label":`Go to slide ${c+1}`,...p&&{"aria-current":!0},onClick:()=>o?.[o.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=o(({carousel:e,sliderProps:o,sx:s,progressProps:l,position:p,...u},x)=>{const{sx:m,...f}=o??{},[h,g]=t(Math.round(100*(e?.progress||0))),b=n(!1),[,y]=t({});return i(()=>{b.current||g(Math.round(100*(e?.progress||0)))},[e?.progress]),i(()=>{if(e){const r=()=>{b.current||y({})};return e.on("sliderMove",r),()=>{e.off("sliderMove",r)}}},[e]),r(a,{sx:d({my:2},s),ref:x,...u,children:r(c,{value:h,min:0,max:100,onChange:(r,o)=>{b.current=!0,e?.setProgress(o/100,150),g(o)},onChangeCommitted:()=>{e?.slideToClosest(300),b.current=!1},sx:d({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"}},m),"aria-controls":"carousel",...f})})}),y=o(({carousel:e,sliderProps:o,position:n,...a},l)=>{const{sx:c,...p}=o??{},[u,m]=t(!1),[,f]=t({});i(()=>{if(e){const r=()=>m(!0),o=()=>m(!1),s=()=>f({});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(b,{ref:l,carousel:e,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 ${e?.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 { 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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"}
+{"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              aria-label={`Go to slide ${idx + 1}`}\n              {...(active && { 'aria-current': true })}\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/header/Header.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as o,jsx as t}from"react/jsx-runtime";import{forwardRef as r,useState as s,Children as n,isValidElement as i,Fragment as l}from"react";import{sxOverride as a}from"../../utils/sxOverride/sxOverride.js";import{useTheme as d,AppBar as p,Toolbar as c,Box as m,Drawer as x}from"@mui/material";import{MenuIcon as u}from"../icon/stroke/MenuIcon.js";import{CloseIcon as f}from"../icon/stroke/CloseIcon.js";import{getFocusRingStyle as b}from"../focusring/focusring.js";import{HeaderButton as h}from"./HeaderButton.js";import{HeaderContext as g,headerDesktopContext as y,headerMobileContext as v}from"./HeaderContext.js";function k(e,o,t,r,s){return void 0===o?{[e.breakpoints.down(t)]:s,[e.breakpoints.up(t)]:r}:o?s:r}function P(e){return n.toArray(e).some(e=>!i(e)||e.type!==l||P(e.props.children))}const j=r(({children:r,logo:n,buttons:i,visibleButtons:l,mobile:j,open:C,setOpen:I,inContainer:H=!1,breakpoint:w="lg",toolbarProps:B,logoProps:M,contentProps:S,mobileContentProps:F,buttonsProps:O,collapsibleButtonsProps:T,menuButtonProps:z,menuIcon:A,closeMenuIcon:G,drawerProps:D,...E},L)=>{const R=d(),{sx:V,...W}=M??{},{sx:$,...q}=S??{},{sx:J,...K}=F??{},{sx:N,...Q}=O??{},{sx:U,...X}=T??{},{sx:Y,...Z}=z??{},{sx:_,slotProps:ee,...oe}=D??{},{paper:te,backdrop:re,...se}=ee??{},{sx:ne,...ie}=te??{},{sx:le,...ae}=re??{},[de,pe]=s(!1),ce=C??de,me=I??pe,xe=P(r),ue=P(i),fe=!0!==l&&P(l),be=!!l&&ue,he=!1!==j&&(xe||be);return e(o,{children:[t(p,{ref:L,"data-testid":"Header",...E,children:t(g.Provider,{value:y,children:e(c,{disableGutters:!H,...B,children:[n&&t(m,{"data-testid":"Header.logo",sx:a({color:"dark"===R.palette.mode?"brand.secondary":"brand.tertiary",flexShrink:"0",display:"flex",alignItems:"center",justifyContent:"flex-start","& .MuiLink-root":{display:"block",position:"relative",py:1,...b(R),"&.Mui-focusVisible":{boxShadow:"none"}},"& .MuiSvgIcon-root":{display:"block"}},V),...W,children:n}),t(m,{sx:a({minWidth:"0",flexGrow:"1",alignSelf:"stretch",...k(R,j,w,{display:"flex",...n&&{pl:4}},{display:"none"}),alignItems:"stretch",justifyContent:"flex-start",gap:{xs:2,xl:4},mb:"-1px"},$),"data-testid":"Header.nav",...q,children:r}),(fe||ue||he)&&e(m,{sx:a({display:"flex",alignItems:"center",justifyContent:"flex-end",gap:.25,ml:"auto",...k(R,j,w,{mr:0},{mr:-1})},N),"data-testid":"Header.btns",...Q,children:[!0!==l&&l,l?ue&&t(m,{sx:a({...k(R,j,w,{display:"contents"},{display:"none"})},U),"data-testid":"Header.collapsiblebtns",...X,children:i}):i,he&&t(h,{"aria-label":"Toggle menu",extend:!1,onClick:()=>me(e=>!e),sx:a(ce?{display:"inline-flex"}:k(R,j,w,{display:"none"},{display:"inline-flex"}),Y),...Z,children:ce?G||t(f,{}):A||t(u,{})},"menu")]})]})})}),he&&t(x,{disablePortal:!0,disableEnforceFocus:!0,disableAutoFocus:!0,anchor:"top",open:ce,onClose:()=>me(!1),sx:a({zIndex:R.zIndex.appBar-10,top:R.mixins.toolbar.minHeight,bottom:"auto",height:`calc(100vh - ${R.mixins.toolbar.minHeight})`,position:"absolute"},_),slotProps:{backdrop:{sx:a({position:"absolute"},le),...ae},paper:{sx:a({position:"absolute",height:"100%",display:"grid",gridTemplateRows:"auto max-content"},ne),...ie},...se},...oe,children:e(g.Provider,{value:v,children:[t(m,{sx:a({p:2,overflow:"auto"},J),"data-testid":"Header.mobilenav",...K,children:r}),be&&t(m,{sx:{p:2,pt:0},children:t(m,{sx:{pt:.75,display:"flex",flexDirection:"column-reverse",alignItems:"stretch",justifyContent:"flex-start",borderTop:1,borderColor:"dark"===R.palette.mode?"onSurface.os700":"surface.secondary"},children:i})})]})})]})});export{j as Header,k as variantSx};
+import{jsxs as e,Fragment as o,jsx as t}from"react/jsx-runtime";import{forwardRef as r,useState as n,Children as i,isValidElement as s,Fragment as a}from"react";import{sxOverride as l}from"../../utils/sxOverride/sxOverride.js";import{useTheme as d,AppBar as p,Toolbar as c,Box as m,Drawer as x}from"@mui/material";import{MenuIcon as u}from"../icon/stroke/MenuIcon.js";import{CloseIcon as f}from"../icon/stroke/CloseIcon.js";import{getFocusRingStyle as b}from"../focusring/focusring.js";import{HeaderButton as h}from"./HeaderButton.js";import{HeaderContext as g,headerDesktopContext as y,headerMobileContext as k}from"./HeaderContext.js";function v(e,o,t,r,n){return void 0===o?{[e.breakpoints.down(t)]:n,[e.breakpoints.up(t)]:r}:o?n:r}function P(e){return i.toArray(e).some(e=>!s(e)||e.type!==a||P(e.props.children))}const C=r(({children:r,logo:i,buttons:s,visibleButtons:a,mobile:C,open:j,setOpen:I,inContainer:H=!1,breakpoint:w="lg",toolbarProps:B,logoProps:M,contentProps:S,mobileContentProps:F,buttonsProps:O,collapsibleButtonsProps:T,menuButtonProps:z,menuIcon:A,closeMenuIcon:G,drawerProps:D,...E},L)=>{const R=d(),{sx:V,...W}=M??{},{sx:$,...q}=S??{},{sx:J,...K}=F??{},{sx:N,...Q}=O??{},{sx:U,...X}=T??{},{sx:Y,onClick:Z,..._}=z??{},{sx:ee,slotProps:oe,...te}=D??{},{paper:re,backdrop:ne,...ie}=oe??{},{sx:se,...ae}=re??{},{sx:le,...de}=ne??{},[pe,ce]=n(!1),me=j??pe,xe=I??ce,ue=P(r),fe=P(s),be=!0!==a&&P(a),he=!!a&&fe,ge=!1!==C&&(ue||he);return e(o,{children:[t(p,{ref:L,"data-testid":"Header",...E,children:t(g.Provider,{value:y,children:e(c,{disableGutters:!H,...B,children:[i&&t(m,{"data-testid":"Header.logo",sx:l({color:"dark"===R.palette.mode?"brand.secondary":"brand.tertiary",flexShrink:"0",display:"flex",alignItems:"center",justifyContent:"flex-start","& .MuiLink-root":{display:"block",position:"relative",py:1,...b(R),"&.Mui-focusVisible":{boxShadow:"none"}},"& .MuiSvgIcon-root":{display:"block"}},V),...W,children:i}),t(m,{sx:l({minWidth:"0",flexGrow:"1",alignSelf:"stretch",...v(R,C,w,{display:"flex",...i&&{pl:4}},{display:"none"}),alignItems:"stretch",justifyContent:"flex-start",gap:{xs:2,xl:4},mb:"-1px"},$),"data-testid":"Header.nav",...q,children:r}),(be||fe||ge)&&e(m,{sx:l({display:"flex",alignItems:"center",justifyContent:"flex-end",gap:.25,ml:"auto",...v(R,C,w,{mr:0},{mr:-1})},N),"data-testid":"Header.btns",...Q,children:[!0!==a&&a,a?fe&&t(m,{sx:l({...v(R,C,w,{display:"contents"},{display:"none"})},U),"data-testid":"Header.collapsiblebtns",...X,children:s}):s,ge&&t(h,{"aria-label":"Toggle menu","aria-expanded":me,extend:!1,onClick:e=>{Z?.(e),xe(e=>!e)},sx:l(me?{display:"inline-flex"}:v(R,C,w,{display:"none"},{display:"inline-flex"}),Y),..._,children:me?G||t(f,{}):A||t(u,{})},"menu")]})]})})}),ge&&t(x,{disablePortal:!0,disableEnforceFocus:!0,disableAutoFocus:!0,anchor:"top",open:me,onClose:()=>xe(!1),sx:l({zIndex:R.zIndex.appBar-10,top:R.mixins.toolbar.minHeight,bottom:"auto",height:`calc(100vh - ${R.mixins.toolbar.minHeight})`,position:"absolute"},ee),slotProps:{backdrop:{sx:l({position:"absolute"},le),...de},paper:{sx:l({position:"absolute",height:"100%",display:"grid",gridTemplateRows:"auto max-content"},se),...ae},...ie},...te,children:e(g.Provider,{value:k,children:[t(m,{sx:l({p:2,overflow:"auto"},J),"data-testid":"Header.mobilenav",...K,children:r}),he&&t(m,{sx:{p:2,pt:0},children:t(m,{sx:{pt:.75,display:"flex",flexDirection:"column-reverse",alignItems:"stretch",justifyContent:"flex-start",borderTop:1,borderColor:"dark"===R.palette.mode?"onSurface.os700":"surface.secondary"},children:s})})]})})]})});export{C as Header,v as variantSx};
 //# sourceMappingURL=Header.js.map

package/components/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../src/components/header/Header.tsx"],"sourcesContent":["import React, { FC, useState, forwardRef, ReactNode, ElementType, Children, Fragment, isValidElement } from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport {\n  AppBar,\n  AppBarProps,\n  BackdropProps,\n  Box,\n  BoxProps,\n  Breakpoint,\n  Drawer,\n  DrawerProps,\n  PaperProps,\n  Theme,\n  Toolbar,\n  ToolbarProps,\n  useTheme,\n} from '@mui/material';\nimport { SystemStyleObject } from '@mui/system';\nimport { MenuIcon } from '@/src/components/icon/stroke/MenuIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { HeaderButton, HeaderButtonProps } from './HeaderButton';\nimport { HeaderContext, headerDesktopContext, headerMobileContext } from './HeaderContext';\n\nexport interface HeaderProps extends Omit<AppBarProps, 'color'> {\n  /**\n   * Logo component\n   */\n  logo?: ReactNode;\n  /**\n   * Wrap the navigation into container\n   * @default false\n   */\n  inContainer?: boolean;\n  /**\n   * ActionButtons on the right side\n   */\n  buttons?: ReactNode;\n  /**\n   * ActionButtons on the right side that stays visible even on mobile\n   */\n  visibleButtons?: ReactNode | true;\n  /**\n   * Controls if mobile version of Header should be shown, this collapses children into mobile menu\n   *\n   * @default undefined, leads to usage of breakpoint media query\n   */\n  mobile?: boolean;\n  /**\n   * Breakpoint at which Header collapses into mobile menu, number is treated as px value\n   * @default 'lg'\n   */\n  breakpoint?: Breakpoint | number;\n  /**\n   * Controls open/close state of mobile menu\n   */\n  open?: boolean;\n  /**\n   * Function to toggle open state of menu\n   */\n  setOpen?: (open: boolean) => void;\n  /**\n   * Properties applied to toolbar container\n   */\n  toolbarProps?: ToolbarProps<ElementType>;\n  /**\n   * Properties applied to logo wrapper\n   */\n  logoProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to content wrapper\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to content wrapper in drawer\n   */\n  mobileContentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to button wrapper\n   */\n  buttonsProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to wrapper of buttons that collapse into drawer, rendered only with visibleButtons\n   */\n  collapsibleButtonsProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to hamburger menu\n   */\n  menuButtonProps?: HeaderButtonProps;\n  /**\n   * Icon of the hamburger menu\n   */\n  menuIcon?: ReactNode;\n  /**\n   * Icon of the close hamburger menu\n   */\n  closeMenuIcon?: ReactNode;\n  /**\n   * Props applied to mobile drawer\n   */\n  drawerProps?: DrawerProps;\n}\n\n/**\n * Picks desktop or mobile styles, explicit mobile value wins over breakpoint media queries\n */\nexport function variantSx(\n  theme: Theme,\n  mobile: boolean | undefined,\n  breakpoint: Breakpoint | number,\n  desktop: SystemStyleObject<Theme>,\n  mobileStyles: SystemStyleObject<Theme>,\n): SystemStyleObject<Theme> {\n  if (mobile === undefined) {\n    return {\n      [theme.breakpoints.down(breakpoint)]: mobileStyles,\n      [theme.breakpoints.up(breakpoint)]: desktop,\n    };\n  }\n  return mobile ? mobileStyles : desktop;\n}\n\n/**\n * Checks for renderable content, recursively unwraps fragments\n */\nfunction hasRenderableChildren(nodes: ReactNode): boolean {\n  return Children.toArray(nodes).some((child) =>\n    isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment\n      ? hasRenderableChildren(child.props.children)\n      : true,\n  );\n}\n\n/**\n * Component to render Header with navigation and action buttons at the top of the page\n */\nexport const Header: FC<HeaderProps> = forwardRef(\n  (\n    {\n      children,\n      logo,\n      buttons,\n      visibleButtons,\n      mobile,\n      open: propOpen,\n      setOpen: propSetOpen,\n      inContainer = false,\n      breakpoint = 'lg',\n      toolbarProps,\n      logoProps,\n      contentProps,\n      mobileContentProps,\n      buttonsProps,\n      collapsibleButtonsProps,\n      menuButtonProps,\n      menuIcon,\n      closeMenuIcon,\n      drawerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: logoSx, ...restLogo } = logoProps ?? {};\n    const { sx: contentSx, ...restContent } = contentProps ?? {};\n    const { sx: mobileContentSx, ...restMobileContent } = mobileContentProps ?? {};\n    const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n    const { sx: collapsibleButtonsSx, ...restCollapsibleButtons } = collapsibleButtonsProps ?? {};\n    const { sx: menuButtonSx, ...restMenuButton } = menuButtonProps ?? {};\n    const { sx: drawerSx, slotProps: drawerSlotProps, ...restDrawer } = drawerProps ?? {};\n    const { paper: drawerPaperProps, backdrop: drawerBackdropProps, ...restDrawerSlotProps } = drawerSlotProps ?? {};\n    const { sx: drawerPaperSx, ...restDrawerPaper } = (drawerPaperProps as PaperProps) ?? {};\n    const { sx: drawerBackdropSx, ...restDrawerBackdrop } = (drawerBackdropProps as BackdropProps) ?? {};\n    const [rawOpen, rawSetOpen] = useState(false);\n    const open = propOpen ?? rawOpen;\n    const setOpen: React.Dispatch<React.SetStateAction<boolean>> = propSetOpen ?? rawSetOpen;\n\n    const hasChildren = hasRenderableChildren(children);\n    const hasButtons = hasRenderableChildren(buttons);\n    const hasVisibleButtons = visibleButtons !== true && hasRenderableChildren(visibleButtons);\n    // buttons collapse into drawer only when visibleButtons property is provided\n    const collapseButtons = !!visibleButtons && hasButtons;\n    const showMenu = mobile !== false && (hasChildren || collapseButtons);\n\n    return (\n      <>\n        <AppBar ref={ref} data-testid=\"Header\" {...rest}>\n          <HeaderContext.Provider value={headerDesktopContext}>\n            <Toolbar disableGutters={!inContainer} {...toolbarProps}>\n              {logo && (\n                <Box\n                  data-testid=\"Header.logo\"\n                  sx={sxOverride(\n                    {\n                      color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.tertiary',\n                      flexShrink: '0',\n                      display: 'flex',\n                      alignItems: 'center',\n                      justifyContent: 'flex-start',\n                      // restyle wrapper link, same style is applied in HeaderLogo\n                      '& .MuiLink-root': {\n                        display: 'block',\n                        position: 'relative',\n                        py: 1,\n                        // add proper focus ring\n                        ...getFocusRingStyle(theme),\n                        // remove default link box shadow\n                        '&.Mui-focusVisible': {\n                          boxShadow: 'none',\n                        },\n                      },\n                      '& .MuiSvgIcon-root': {\n                        display: 'block',\n                      },\n                    },\n                    logoSx,\n                  )}\n                  {...restLogo}\n                >\n                  {logo}\n                </Box>\n              )}\n              <Box\n                sx={sxOverride(\n                  {\n                    minWidth: '0',\n                    flexGrow: '1',\n                    alignSelf: 'stretch',\n                    // whole nav is hidden in mobile, children collapse into drawer\n                    ...variantSx(\n                      theme,\n                      mobile,\n                      breakpoint,\n                      {\n                        display: 'flex',\n                        ...(logo && {\n                          // increase size between logo and nav\n                          pl: 4,\n                        }),\n                      },\n                      { display: 'none' },\n                    ),\n                    alignItems: 'stretch',\n                    justifyContent: 'flex-start',\n                    gap: { xs: 2, xl: 4 },\n                    // move directly into border\n                    mb: '-1px',\n                  },\n                  contentSx,\n                )}\n                data-testid=\"Header.nav\"\n                {...restContent}\n              >\n                {children}\n              </Box>\n              {(hasVisibleButtons || hasButtons || showMenu) && (\n                <Box\n                  sx={sxOverride(\n                    {\n                      display: 'flex',\n                      alignItems: 'center',\n                      justifyContent: 'flex-end',\n                      gap: 0.25,\n                      // keep buttons on the right in mobile when nav is hidden\n                      ml: 'auto',\n                      // compensate icon padding in mobile\n                      ...variantSx(theme, mobile, breakpoint, { mr: 0 }, { mr: -1 }),\n                    },\n                    buttonsSx,\n                  )}\n                  data-testid=\"Header.btns\"\n                  {...restButtons}\n                >\n                  {visibleButtons !== true && visibleButtons}\n                  {visibleButtons\n                    ? hasButtons && (\n                        <Box\n                          sx={sxOverride(\n                            {\n                              // contents keeps buttons in flex layout, none collapses them into drawer in mobile\n                              ...variantSx(theme, mobile, breakpoint, { display: 'contents' }, { display: 'none' }),\n                            },\n                            collapsibleButtonsSx,\n                          )}\n                          data-testid=\"Header.collapsiblebtns\"\n                          {...restCollapsibleButtons}\n                        >\n                          {buttons}\n                        </Box>\n                      )\n                    : buttons}\n                  {showMenu && (\n                    <HeaderButton\n                      key=\"menu\"\n                      aria-label=\"Toggle menu\"\n                      extend={false}\n                      onClick={() => setOpen((prev: boolean) => !prev)}\n                      sx={sxOverride(\n                        // toggle stays visible while drawer is open, so it can be closed even in desktop\n                        open\n                          ? { display: 'inline-flex' }\n                          : variantSx(theme, mobile, breakpoint, { display: 'none' }, { display: 'inline-flex' }),\n                        menuButtonSx,\n                      )}\n                      {...restMenuButton}\n                    >\n                      {open ? closeMenuIcon || <CloseIcon /> : menuIcon || <MenuIcon />}\n                    </HeaderButton>\n                  )}\n                </Box>\n              )}\n            </Toolbar>\n          </HeaderContext.Provider>\n        </AppBar>\n        {showMenu && (\n          <Drawer\n            disablePortal\n            disableEnforceFocus\n            disableAutoFocus\n            anchor=\"top\"\n            open={open}\n            onClose={() => setOpen(false)}\n            sx={sxOverride(\n              {\n                // bellow Header, above SecondaryNavigation\n                zIndex: theme.zIndex.appBar - 10,\n                // header offset\n                top: theme.mixins.toolbar.minHeight,\n                bottom: 'auto',\n                height: `calc(100vh - ${theme.mixins.toolbar.minHeight})`,\n                // adjust position\n                position: 'absolute',\n              },\n              drawerSx,\n            )}\n            slotProps={{\n              backdrop: {\n                sx: sxOverride(\n                  {\n                    position: 'absolute',\n                  },\n                  drawerBackdropSx,\n                ),\n                ...restDrawerBackdrop,\n              },\n              paper: {\n                sx: sxOverride(\n                  {\n                    position: 'absolute',\n                    height: '100%',\n                    display: 'grid',\n                    gridTemplateRows: 'auto max-content',\n                  },\n                  drawerPaperSx,\n                ),\n                ...restDrawerPaper,\n              },\n              ...restDrawerSlotProps,\n            }}\n            {...restDrawer}\n          >\n            <HeaderContext.Provider value={headerMobileContext}>\n              <Box\n                sx={sxOverride(\n                  {\n                    p: 2,\n                    overflow: 'auto',\n                  },\n                  mobileContentSx,\n                )}\n                data-testid=\"Header.mobilenav\"\n                {...restMobileContent}\n              >\n                {children}\n              </Box>\n              {collapseButtons && (\n                <Box sx={{ p: 2, pt: 0 }}>\n                  <Box\n                    sx={{\n                      pt: 0.75,\n                      display: 'flex',\n                      flexDirection: 'column-reverse',\n                      alignItems: 'stretch',\n                      justifyContent: 'flex-start',\n                      // border from appbar.theme.ts\n                      borderTop: 1,\n                      borderColor: theme.palette.mode === 'dark' ? 'onSurface.os700' : 'surface.secondary',\n                    }}\n                  >\n                    {buttons}\n                  </Box>\n                </Box>\n              )}\n            </HeaderContext.Provider>\n          </Drawer>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["variantSx","theme","mobile","breakpoint","desktop","mobileStyles","undefined","breakpoints","down","up","hasRenderableChildren","nodes","Children","toArray","some","child","isValidElement","type","Fragment","props","children","Header","forwardRef","logo","buttons","visibleButtons","open","propOpen","setOpen","propSetOpen","inContainer","toolbarProps","logoProps","contentProps","mobileContentProps","buttonsProps","collapsibleButtonsProps","menuButtonProps","menuIcon","closeMenuIcon","drawerProps","rest","ref","useTheme","sx","logoSx","restLogo","contentSx","restContent","mobileContentSx","restMobileContent","buttonsSx","restButtons","collapsibleButtonsSx","restCollapsibleButtons","menuButtonSx","restMenuButton","drawerSx","slotProps","drawerSlotProps","restDrawer","paper","drawerPaperProps","backdrop","drawerBackdropProps","restDrawerSlotProps","drawerPaperSx","restDrawerPaper","drawerBackdropSx","restDrawerBackdrop","rawOpen","rawSetOpen","useState","hasChildren","hasButtons","hasVisibleButtons","collapseButtons","showMenu","_jsxs","_Fragment","_jsx","AppBar","HeaderContext","Provider","value","headerDesktopContext","Toolbar","disableGutters","Box","sxOverride","color","palette","mode","flexShrink","display","alignItems","justifyContent","position","py","getFocusRingStyle","boxShadow","minWidth","flexGrow","alignSelf","pl","gap","xs","xl","mb","ml","mr","HeaderButton","extend","onClick","prev","CloseIcon","MenuIcon","Drawer","disablePortal","disableEnforceFocus","disableAutoFocus","anchor","onClose","zIndex","appBar","top","mixins","toolbar","minHeight","bottom","height","gridTemplateRows","headerMobileContext","p","overflow","pt","flexDirection","borderTop","borderColor"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../src/components/header/Header.tsx"],"sourcesContent":["import React, { FC, useState, forwardRef, ReactNode, ElementType, Children, Fragment, isValidElement } from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport {\n  AppBar,\n  AppBarProps,\n  BackdropProps,\n  Box,\n  BoxProps,\n  Breakpoint,\n  Drawer,\n  DrawerProps,\n  PaperProps,\n  Theme,\n  Toolbar,\n  ToolbarProps,\n  useTheme,\n} from '@mui/material';\nimport { SystemStyleObject } from '@mui/system';\nimport { MenuIcon } from '@/src/components/icon/stroke/MenuIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { HeaderButton, HeaderButtonProps } from './HeaderButton';\nimport { HeaderContext, headerDesktopContext, headerMobileContext } from './HeaderContext';\n\nexport interface HeaderProps extends Omit<AppBarProps, 'color'> {\n  /**\n   * Logo component\n   */\n  logo?: ReactNode;\n  /**\n   * Wrap the navigation into container\n   * @default false\n   */\n  inContainer?: boolean;\n  /**\n   * ActionButtons on the right side\n   */\n  buttons?: ReactNode;\n  /**\n   * ActionButtons on the right side that stays visible even on mobile\n   */\n  visibleButtons?: ReactNode | true;\n  /**\n   * Controls if mobile version of Header should be shown, this collapses children into mobile menu\n   *\n   * @default undefined, leads to usage of breakpoint media query\n   */\n  mobile?: boolean;\n  /**\n   * Breakpoint at which Header collapses into mobile menu, number is treated as px value\n   * @default 'lg'\n   */\n  breakpoint?: Breakpoint | number;\n  /**\n   * Controls open/close state of mobile menu\n   */\n  open?: boolean;\n  /**\n   * Function to toggle open state of menu\n   */\n  setOpen?: (open: boolean) => void;\n  /**\n   * Properties applied to toolbar container\n   */\n  toolbarProps?: ToolbarProps<ElementType>;\n  /**\n   * Properties applied to logo wrapper\n   */\n  logoProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to content wrapper\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to content wrapper in drawer\n   */\n  mobileContentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to button wrapper\n   */\n  buttonsProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to wrapper of buttons that collapse into drawer, rendered only with visibleButtons\n   */\n  collapsibleButtonsProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to hamburger menu\n   */\n  menuButtonProps?: HeaderButtonProps;\n  /**\n   * Icon of the hamburger menu\n   */\n  menuIcon?: ReactNode;\n  /**\n   * Icon of the close hamburger menu\n   */\n  closeMenuIcon?: ReactNode;\n  /**\n   * Props applied to mobile drawer\n   */\n  drawerProps?: DrawerProps;\n}\n\n/**\n * Picks desktop or mobile styles, explicit mobile value wins over breakpoint media queries\n */\nexport function variantSx(\n  theme: Theme,\n  mobile: boolean | undefined,\n  breakpoint: Breakpoint | number,\n  desktop: SystemStyleObject<Theme>,\n  mobileStyles: SystemStyleObject<Theme>,\n): SystemStyleObject<Theme> {\n  if (mobile === undefined) {\n    return {\n      [theme.breakpoints.down(breakpoint)]: mobileStyles,\n      [theme.breakpoints.up(breakpoint)]: desktop,\n    };\n  }\n  return mobile ? mobileStyles : desktop;\n}\n\n/**\n * Checks for renderable content, recursively unwraps fragments\n */\nfunction hasRenderableChildren(nodes: ReactNode): boolean {\n  return Children.toArray(nodes).some((child) =>\n    isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment\n      ? hasRenderableChildren(child.props.children)\n      : true,\n  );\n}\n\n/**\n * Component to render Header with navigation and action buttons at the top of the page\n */\nexport const Header: FC<HeaderProps> = forwardRef(\n  (\n    {\n      children,\n      logo,\n      buttons,\n      visibleButtons,\n      mobile,\n      open: propOpen,\n      setOpen: propSetOpen,\n      inContainer = false,\n      breakpoint = 'lg',\n      toolbarProps,\n      logoProps,\n      contentProps,\n      mobileContentProps,\n      buttonsProps,\n      collapsibleButtonsProps,\n      menuButtonProps,\n      menuIcon,\n      closeMenuIcon,\n      drawerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: logoSx, ...restLogo } = logoProps ?? {};\n    const { sx: contentSx, ...restContent } = contentProps ?? {};\n    const { sx: mobileContentSx, ...restMobileContent } = mobileContentProps ?? {};\n    const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n    const { sx: collapsibleButtonsSx, ...restCollapsibleButtons } = collapsibleButtonsProps ?? {};\n    const { sx: menuButtonSx, onClick: onMenuButtonClick, ...restMenuButton } = menuButtonProps ?? {};\n    const { sx: drawerSx, slotProps: drawerSlotProps, ...restDrawer } = drawerProps ?? {};\n    const { paper: drawerPaperProps, backdrop: drawerBackdropProps, ...restDrawerSlotProps } = drawerSlotProps ?? {};\n    const { sx: drawerPaperSx, ...restDrawerPaper } = (drawerPaperProps as PaperProps) ?? {};\n    const { sx: drawerBackdropSx, ...restDrawerBackdrop } = (drawerBackdropProps as BackdropProps) ?? {};\n    const [rawOpen, rawSetOpen] = useState(false);\n    const open = propOpen ?? rawOpen;\n    const setOpen: React.Dispatch<React.SetStateAction<boolean>> = propSetOpen ?? rawSetOpen;\n\n    const hasChildren = hasRenderableChildren(children);\n    const hasButtons = hasRenderableChildren(buttons);\n    const hasVisibleButtons = visibleButtons !== true && hasRenderableChildren(visibleButtons);\n    // buttons collapse into drawer only when visibleButtons property is provided\n    const collapseButtons = !!visibleButtons && hasButtons;\n    const showMenu = mobile !== false && (hasChildren || collapseButtons);\n\n    return (\n      <>\n        <AppBar ref={ref} data-testid=\"Header\" {...rest}>\n          <HeaderContext.Provider value={headerDesktopContext}>\n            <Toolbar disableGutters={!inContainer} {...toolbarProps}>\n              {logo && (\n                <Box\n                  data-testid=\"Header.logo\"\n                  sx={sxOverride(\n                    {\n                      color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.tertiary',\n                      flexShrink: '0',\n                      display: 'flex',\n                      alignItems: 'center',\n                      justifyContent: 'flex-start',\n                      // restyle wrapper link, same style is applied in HeaderLogo\n                      '& .MuiLink-root': {\n                        display: 'block',\n                        position: 'relative',\n                        py: 1,\n                        // add proper focus ring\n                        ...getFocusRingStyle(theme),\n                        // remove default link box shadow\n                        '&.Mui-focusVisible': {\n                          boxShadow: 'none',\n                        },\n                      },\n                      '& .MuiSvgIcon-root': {\n                        display: 'block',\n                      },\n                    },\n                    logoSx,\n                  )}\n                  {...restLogo}\n                >\n                  {logo}\n                </Box>\n              )}\n              <Box\n                sx={sxOverride(\n                  {\n                    minWidth: '0',\n                    flexGrow: '1',\n                    alignSelf: 'stretch',\n                    // whole nav is hidden in mobile, children collapse into drawer\n                    ...variantSx(\n                      theme,\n                      mobile,\n                      breakpoint,\n                      {\n                        display: 'flex',\n                        ...(logo && {\n                          // increase size between logo and nav\n                          pl: 4,\n                        }),\n                      },\n                      { display: 'none' },\n                    ),\n                    alignItems: 'stretch',\n                    justifyContent: 'flex-start',\n                    gap: { xs: 2, xl: 4 },\n                    // move directly into border\n                    mb: '-1px',\n                  },\n                  contentSx,\n                )}\n                data-testid=\"Header.nav\"\n                {...restContent}\n              >\n                {children}\n              </Box>\n              {(hasVisibleButtons || hasButtons || showMenu) && (\n                <Box\n                  sx={sxOverride(\n                    {\n                      display: 'flex',\n                      alignItems: 'center',\n                      justifyContent: 'flex-end',\n                      gap: 0.25,\n                      // keep buttons on the right in mobile when nav is hidden\n                      ml: 'auto',\n                      // compensate icon padding in mobile\n                      ...variantSx(theme, mobile, breakpoint, { mr: 0 }, { mr: -1 }),\n                    },\n                    buttonsSx,\n                  )}\n                  data-testid=\"Header.btns\"\n                  {...restButtons}\n                >\n                  {visibleButtons !== true && visibleButtons}\n                  {visibleButtons\n                    ? hasButtons && (\n                        <Box\n                          sx={sxOverride(\n                            {\n                              // contents keeps buttons in flex layout, none collapses them into drawer in mobile\n                              ...variantSx(theme, mobile, breakpoint, { display: 'contents' }, { display: 'none' }),\n                            },\n                            collapsibleButtonsSx,\n                          )}\n                          data-testid=\"Header.collapsiblebtns\"\n                          {...restCollapsibleButtons}\n                        >\n                          {buttons}\n                        </Box>\n                      )\n                    : buttons}\n                  {showMenu && (\n                    <HeaderButton\n                      key=\"menu\"\n                      aria-label=\"Toggle menu\"\n                      aria-expanded={open}\n                      extend={false}\n                      onClick={(event) => {\n                        onMenuButtonClick?.(event);\n                        setOpen((prev: boolean) => !prev);\n                      }}\n                      sx={sxOverride(\n                        // toggle stays visible while drawer is open, so it can be closed even in desktop\n                        open\n                          ? { display: 'inline-flex' }\n                          : variantSx(theme, mobile, breakpoint, { display: 'none' }, { display: 'inline-flex' }),\n                        menuButtonSx,\n                      )}\n                      {...restMenuButton}\n                    >\n                      {open ? closeMenuIcon || <CloseIcon /> : menuIcon || <MenuIcon />}\n                    </HeaderButton>\n                  )}\n                </Box>\n              )}\n            </Toolbar>\n          </HeaderContext.Provider>\n        </AppBar>\n        {showMenu && (\n          <Drawer\n            disablePortal\n            disableEnforceFocus\n            disableAutoFocus\n            anchor=\"top\"\n            open={open}\n            onClose={() => setOpen(false)}\n            sx={sxOverride(\n              {\n                // bellow Header, above SecondaryNavigation\n                zIndex: theme.zIndex.appBar - 10,\n                // header offset\n                top: theme.mixins.toolbar.minHeight,\n                bottom: 'auto',\n                height: `calc(100vh - ${theme.mixins.toolbar.minHeight})`,\n                // adjust position\n                position: 'absolute',\n              },\n              drawerSx,\n            )}\n            slotProps={{\n              backdrop: {\n                sx: sxOverride(\n                  {\n                    position: 'absolute',\n                  },\n                  drawerBackdropSx,\n                ),\n                ...restDrawerBackdrop,\n              },\n              paper: {\n                sx: sxOverride(\n                  {\n                    position: 'absolute',\n                    height: '100%',\n                    display: 'grid',\n                    gridTemplateRows: 'auto max-content',\n                  },\n                  drawerPaperSx,\n                ),\n                ...restDrawerPaper,\n              },\n              ...restDrawerSlotProps,\n            }}\n            {...restDrawer}\n          >\n            <HeaderContext.Provider value={headerMobileContext}>\n              <Box\n                sx={sxOverride(\n                  {\n                    p: 2,\n                    overflow: 'auto',\n                  },\n                  mobileContentSx,\n                )}\n                data-testid=\"Header.mobilenav\"\n                {...restMobileContent}\n              >\n                {children}\n              </Box>\n              {collapseButtons && (\n                <Box sx={{ p: 2, pt: 0 }}>\n                  <Box\n                    sx={{\n                      pt: 0.75,\n                      display: 'flex',\n                      flexDirection: 'column-reverse',\n                      alignItems: 'stretch',\n                      justifyContent: 'flex-start',\n                      // border from appbar.theme.ts\n                      borderTop: 1,\n                      borderColor: theme.palette.mode === 'dark' ? 'onSurface.os700' : 'surface.secondary',\n                    }}\n                  >\n                    {buttons}\n                  </Box>\n                </Box>\n              )}\n            </HeaderContext.Provider>\n          </Drawer>\n        )}\n      </>\n    );\n  },\n);\n"],"names":["variantSx","theme","mobile","breakpoint","desktop","mobileStyles","undefined","breakpoints","down","up","hasRenderableChildren","nodes","Children","toArray","some","child","isValidElement","type","Fragment","props","children","Header","forwardRef","logo","buttons","visibleButtons","open","propOpen","setOpen","propSetOpen","inContainer","toolbarProps","logoProps","contentProps","mobileContentProps","buttonsProps","collapsibleButtonsProps","menuButtonProps","menuIcon","closeMenuIcon","drawerProps","rest","ref","useTheme","sx","logoSx","restLogo","contentSx","restContent","mobileContentSx","restMobileContent","buttonsSx","restButtons","collapsibleButtonsSx","restCollapsibleButtons","menuButtonSx","onClick","onMenuButtonClick","restMenuButton","drawerSx","slotProps","drawerSlotProps","restDrawer","paper","drawerPaperProps","backdrop","drawerBackdropProps","restDrawerSlotProps","drawerPaperSx","restDrawerPaper","drawerBackdropSx","restDrawerBackdrop","rawOpen","rawSetOpen","useState","hasChildren","hasButtons","hasVisibleButtons","collapseButtons","showMenu","_jsxs","_Fragment","_jsx","AppBar","HeaderContext","Provider","value","headerDesktopContext","Toolbar","disableGutters","Box","sxOverride","color","palette","mode","flexShrink","display","alignItems","justifyContent","position","py","getFocusRingStyle","boxShadow","minWidth","flexGrow","alignSelf","pl","gap","xs","xl","mb","ml","mr","HeaderButton","extend","event","prev","CloseIcon","MenuIcon","Drawer","disablePortal","disableEnforceFocus","disableAutoFocus","anchor","onClose","zIndex","appBar","top","mixins","toolbar","minHeight","bottom","height","gridTemplateRows","headerMobileContext","p","overflow","pt","flexDirection","borderTop","borderColor"],"mappings":"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"}

package/components/header/HeaderNavigationHero.js

@@ -1,2 +1,2 @@
-import{jsxs as r,Fragment as o,jsx as e}from"react/jsx-runtime";import{forwardRef as t,useRef as n,useState as i}from"react";import{useTheme as a,useMediaQuery as s,ClickAwayListener as d,Box as c,Collapse as l,Container as p,Portal as x,Backdrop as m}from"@mui/material";import{sxOverride as u}from"../../utils/sxOverride/sxOverride.js";import{ChevronDownIcon as f}from"../icon/stroke/ChevronDownIcon.js";import{HeaderNavigationLink as g}from"./HeaderNavigationLink.js";import{useHeaderContext as h}from"./HeaderContext.js";const v=t(({children:t,sx:v,label:k,icon:b,extend:C,inContainer:w=!1,disableBackdrop:y=!1,onClick:H,clickAwayListenerProps:P,contentProps:j,wrapperProps:S,containerProps:z,collapseProps:I,portalProps:A,backdropProps:B,...L},N)=>{const O=n(null),[$,D]=i(!1),W=a(),q=h(),E=C??q?.extend,F=s(W.breakpoints.down("lg")),G=void 0===E?F:E,{sx:J,...K}=B??{},{sx:M,...Q}=S??{},{sx:R,...T}=j??{};return r(o,{children:[e(g,{active:$,extend:E,icon:b||e(f,{sx:{"&&&":{fontSize:void 0===E?{xs:"20px",lg:"14px"}:["20px","14px"][+!E]},color:void 0===E?{xs:"dark"===W.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"}:["dark"===W.palette.mode?"onSurface.os300":"onSurface.os700","currentColor"][+!E],transform:`rotate(${$?"180":"0"}deg)`,transition:void 0===E?{xs:W.transitions.create("transform",{duration:W.transitions.duration.shortest}),lg:"none"}:[W.transitions.create("transform",{duration:W.transitions.duration.shortest}),"none"][+!E]}}),onClick:r=>{H?.(r),D(r=>!r)},sx:u({justifyContent:void 0===E?{xs:"space-between",lg:"flex-start"}:["space-between","flex-start"][+!E]},v),ref:N??O,"data-testid":"HeaderNavigationHero",...L,children:k}),e(d,{onClickAway:r=>!(N??O)?.current?.contains(r?.target)&&D(!1),...P,children:e(c,{sx:u({position:void 0===E?{xs:"static",lg:"absolute"}:["static","absolute"][+!E],zIndex:"10",left:"0",right:"0",top:W.mixins.toolbar.minHeight,maxHeight:`calc(100vh - ${W.mixins.toolbar.minHeight})`,overflow:"auto"},M),...Q,children:e(l,{in:$,...I,children:e(c,{sx:u({backgroundColor:void 0===E?{xs:"unset",lg:"dark"===W.palette.mode?"surface.primary":"background.primary"}:["unset","dark"===W.palette.mode?"surface.primary":"background.primary"][+!E],py:void 0===E?{xs:0,lg:2}:[0,2][+!E],px:void 0===E?{xs:1,lg:2}:[1,2][+!E],...w&&{px:0}},R),...T,children:w?e(p,{maxWidth:"xl",...z,children:t}):t})})})}),!y&&!G&&e(x,{...A,children:e(m,{open:$,sx:u({zIndex:W.zIndex.appBar-50},J),...K})})]})});export{v as HeaderNavigationHero};
+import{jsxs as r,Fragment as o,jsx as e}from"react/jsx-runtime";import{forwardRef as t,useRef as n,useState as i}from"react";import{useForkRef as a,useTheme as s,useMediaQuery as d,ClickAwayListener as c,Box as l,Collapse as p,Container as x,Portal as m,Backdrop as u}from"@mui/material";import{sxOverride as f}from"../../utils/sxOverride/sxOverride.js";import{ChevronDownIcon as g}from"../icon/stroke/ChevronDownIcon.js";import{HeaderNavigationLink as h}from"./HeaderNavigationLink.js";import{useHeaderContext as v}from"./HeaderContext.js";const k=t(({children:t,sx:k,label:b,icon:C,extend:w,inContainer:y=!1,disableBackdrop:H=!1,onClick:P,clickAwayListenerProps:j,contentProps:S,wrapperProps:z,containerProps:I,collapseProps:A,portalProps:B,backdropProps:L,...N},O)=>{const $=n(null),D=a(O,$),[W,q]=i(!1),E=s(),F=v(),G=w??F?.extend,J=d(E.breakpoints.down("lg")),K=void 0===G?J:G,{sx:M,...Q}=L??{},{sx:R,...T}=z??{},{sx:U,...V}=S??{};return r(o,{children:[e(h,{active:W,extend:G,icon:C||e(g,{sx:{"&&&":{fontSize:void 0===G?{xs:"20px",lg:"14px"}:["20px","14px"][+!G]},color:void 0===G?{xs:"dark"===E.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"}:["dark"===E.palette.mode?"onSurface.os300":"onSurface.os700","currentColor"][+!G],transform:`rotate(${W?"180":"0"}deg)`,transition:void 0===G?{xs:E.transitions.create("transform",{duration:E.transitions.duration.shortest}),lg:"none"}:[E.transitions.create("transform",{duration:E.transitions.duration.shortest}),"none"][+!G]}}),onClick:r=>{P?.(r),q(r=>!r)},sx:f({justifyContent:void 0===G?{xs:"space-between",lg:"flex-start"}:["space-between","flex-start"][+!G]},k),ref:D,"data-testid":"HeaderNavigationHero",...N,children:b}),e(c,{onClickAway:r=>!$.current?.contains(r?.target)&&q(!1),...j,children:e(l,{sx:f({position:void 0===G?{xs:"static",lg:"absolute"}:["static","absolute"][+!G],zIndex:"10",left:"0",right:"0",top:E.mixins.toolbar.minHeight,maxHeight:`calc(100vh - ${E.mixins.toolbar.minHeight})`,overflow:"auto"},R),...T,children:e(p,{in:W,...A,children:e(l,{sx:f({backgroundColor:void 0===G?{xs:"unset",lg:"dark"===E.palette.mode?"surface.primary":"background.primary"}:["unset","dark"===E.palette.mode?"surface.primary":"background.primary"][+!G],py:void 0===G?{xs:0,lg:2}:[0,2][+!G],px:void 0===G?{xs:1,lg:2}:[1,2][+!G],...y&&{px:0}},U),...V,children:y?e(x,{maxWidth:"xl",...I,children:t}):t})})})}),!H&&!K&&e(m,{...B,children:e(u,{open:W,sx:f({zIndex:E.zIndex.appBar-50},M),...Q})})]})});export{k as HeaderNavigationHero};
 //# sourceMappingURL=HeaderNavigationHero.js.map