npm - @skodaflow/web-library - Versions diffs - 8.1.0 → 8.2.0 - Mend

@skodaflow/web-library 8.1.0 → 8.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (398) hide show

package/components/carousel/Navigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Navigation.js","sources":["../../../src/components/carousel/Navigation.tsx"],"sourcesContent":["import React, { useMemo, ComponentType } from 'react';\nimport { useCarousel, useCarouselPeekEffect } from './hooks';\nimport { useTheme, IconButton, IconButtonProps, SvgIconProps, useMediaQuery } from '@mui/material';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\nimport { ArrowLeftIcon } from '@/src/components/icon/stroke/ArrowLeftIcon';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface CarouselNavigationProps {\n /*\n Optional Carousel instance from useCarouselInstance hook\n /\n carousel?: CarouselInstance;\n /\n Enable/disable peek effect on hover\n * @default: false\n /\n peekEffect?: boolean;\n /\n Previous Slide IconButton\n /\n prevButtonProps?: Partial<IconButtonProps>;\n /\n Previous icon props\n /\n prevIconProps?: SvgIconProps;\n /\n Previous icon node\n /\n PrevIconComponent?: ComponentType<SvgIconProps>;\n /\n Next Slide IconButton\n /\n nextButtonProps?: Partial<IconButtonProps>;\n /\n Previous icon props\n /\n nextIconProps?: SvgIconProps;\n /\n Next icon node\n /\n NextIconComponent?: ComponentType<SvgIconProps>;\n /\n Replaces Chevrons with Arrows\n * @default true\n /\n arrows?: boolean;\n /\n Enable if placing on a plain background (not on top of an image/video)\n * @default false\n /\n onBackground?: boolean;\n /\n Hide navigation buttons on case there are not enough slides for sliding\n * @default false\n /\n autoHideNavigation?: boolean;\n}\n\n/\n Left & Right navigation arrows\n */\nexport function CarouselNavigation({\n carousel: carouselProp,\n peekEffect: propPeekEffect = false,\n prevButtonProps,\n prevIconProps,\n PrevIconComponent,\n nextButtonProps,\n nextIconProps,\n NextIconComponent,\n arrows = true,\n onBackground = false,\n autoHideNavigation = false,\n}: CarouselNavigationProps) {\n const carouselHook = useCarousel();\n const carousel = carouselProp \|\| carouselHook;\n const peekEffect = carousel?.params?.effect !== 'fade' && propPeekEffect;\n const theme = useTheme();\n const upMD = useMediaQuery(theme.breakpoints.up('md'));\n const { sx: prevSx, ...restPrev } = prevButtonProps \|\| {};\n const { sx: nextSx, ...restNext } = nextButtonProps \|\| {};\n const [peek, setPeek] = useCarouselPeekEffect(carousel);\n const PrevIcon = PrevIconComponent \|\| (arrows ? ArrowLeftIcon : ChevronLeftIcon);\n const NextIcon = NextIconComponent \|\| (arrows ? ArrowRightIcon : ChevronRightIcon);\n\n // shared style between buttons\n const sharedSx = useMemo(\n () => ({\n // absolute inside the carousel position\n position: 'absolute',\n zIndex: '100',\n top: '50%',\n // responsive\n width: { xs: '32px', md: '40px', xl: '44px' },\n height: { xs: '32px', md: '40px', xl: '44px' },\n // manual v-align, half the icon size\n mt: { xs: '-16px', md: '-20px', xl: '-22px' },\n '& .MuiSvgIcon-root': {\n fontSize: { xs: '17px', xl: '20px' },\n },\n // highlight border\n ...getInteractiveStyle(\n {\n color: 'text.primary',\n borderColor: onBackground ? 'transparent.transparent' : 'onSurface.os100',\n backgroundColor: onBackground ? 'transparent.transparent' : 'surface.primary',\n },\n {\n backgroundColor: 'surface.secondary',\n },\n ),\n // disabled state\n '&.Mui-disabled': {\n color: 'disabled.tertiary',\n borderColor: onBackground ? 'transparent.transparent' : 'disabled.secondary',\n backgroundColor: onBackground ? 'transparent.transparent' : 'disabled.secondary',\n },\n }),\n [],\n );\n\n // hide navigation when not needed\n if (autoHideNavigation && carousel?.isLocked) {\n return null;\n }\n return (\n <>\n <IconButton\n disabled={carousel && !carousel.params?.loop && carousel.isBeginning}\n onClick={() => {\n carousel?.slidePrev();\n peekEffect && peek && setPeek('reset');\n }}\n onMouseEnter={() => upMD && peekEffect && setPeek('prev')}\n onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n sx={{\n ...sharedSx,\n insetInlineStart: '16px',\n ~~...~~prevSx,\n }}\n aria-label=\"Previous slide\"\n aria-controls=\"carousel\"\n color=\"surface\"\n size=\"medium\"\n {...restPrev}\n >\n {theme.direction === 'rtl' ? <NextIcon {...prevIconProps} /> : <PrevIcon {...prevIconProps} />}\n </IconButton>\n <IconButton\n disabled={carousel && !carousel.params?.loop && carousel.isEnd}\n onClick={() => {\n carousel?.slideNext();\n peekEffect && peek && setPeek('reset');\n }}\n onMouseEnter={() => upMD && peekEffect && setPeek('next')}\n onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n sx={{\n ...sharedSx,\n insetInlineEnd: '16px',\n ~~...~~nextSx,\n }}\n aria-label=\"Next slide\"\n aria-controls=\"carousel\"\n color=\"surface\"\n {...restNext}\n >\n {theme.direction === 'rtl' ? <PrevIcon {...nextIconProps} /> : <NextIcon {...nextIconProps} />}\n </IconButton>\n </>\n );\n}\n"],"names":["CarouselNavigation","carousel","carouselProp","peekEffect","propPeekEffect","prevButtonProps","prevIconProps","PrevIconComponent","nextButtonProps","nextIconProps","NextIconComponent","arrows","onBackground","autoHideNavigation","carouselHook","useCarousel","params","effect","theme","useTheme","upMD","useMediaQuery","breakpoints","up","sx","prevSx","restPrev","nextSx","restNext","peek","setPeek","useCarouselPeekEffect","PrevIcon","ArrowLeftIcon","ChevronLeftIcon","NextIcon","ArrowRightIcon","ChevronRightIcon","sharedSx","useMemo","position","zIndex","top","width","xs","md","xl","height","mt","fontSize","getInteractiveStyle","color","borderColor","backgroundColor","isLocked","_jsxs","_jsx","IconButton","disabled","loop","isBeginning","onClick","slidePrev","onMouseEnter","onMouseLeave","insetInlineStart","size","children","direction","isEnd","slideNext","insetInlineEnd"],"mappings":"~~klBAgEgBA~~,GACdC,SAAUC,EACVC,WAAYC,GAAiB,EAAKC,gBAClCA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,gBACjBA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,OACjBA,GAAS,EAAIC,aACbA,GAAe,EAAKC,mBACpBA,GAAqB,IAErB,MAAMC,EAAeC,IACfd,EAAWC,GAAgBY,EAC3BX,EAA0C,SAA7BF,GAAUe,QAAQC,QAAqBb,EACpDc,EAAQC,IACRC,EAAOC,EAAcH,EAAMI,YAAYC,GAAG,QACxCC,GAAIC,KAAWC,GAAarB,GAAmB,CAAA,GAC/CmB,GAAIG,KAAWC,GAAapB,GAAmB,CAAA,GAChDqB,EAAMC,GAAWC,EAAsB9B,GACxC+B,EAAWzB,IAAsBI,EAASsB,EAAgBC,GAC1DC,EAAWzB,IAAsBC,EAASyB,EAAiBC,GAG3DC,EAAWC,EACf,KAAA,CAEEC,SAAU,WACVC,OAAQ,MACRC,IAAK,MAELC,MAAO,CAAEC,GAAI,OAAQC,GAAI,OAAQC,GAAI,QACrCC,OAAQ,CAAEH,GAAI,OAAQC,GAAI,OAAQC,GAAI,QAEtCE,GAAI,CAAEJ,GAAI,QAASC,GAAI,QAASC,GAAI,SACpC,qBAAsB,CACpBG,SAAU,CAAEL,GAAI,OAAQE,GAAI,YAG3BI,EACD,CACEC,MAAO,eACPC,YAAaxC,EAAe,0BAA4B,kBACxDyC,gBAAiBzC,EAAe,0BAA4B,mBAE9D,CACEyC,gBAAiB,sBAIrB,iBAAkB,CAChBF,MAAO,oBACPC,YAAaxC,EAAe,0BAA4B,qBACxDyC,gBAAiBzC,EAAe,0BAA4B,wBAGhE,IAIF,OAAIC,GAAsBZ,GAAUqD,SAC3B,KAGPC,eACEC,EAACC,GACCC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,EAAS2D,YACzDC,QAAS,KACP5D,GAAU6D,YACV3D,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,~~GAAI~~,~~IACCc~~,~~EACH2B~~,iBAAkB,~~UACfxC~~,~~GACJ~~,aACU,iBAAgB,gBACb,WACd0B,MAAM,~~UACNe~~,KAAK,~~YACDxC~~,~~EAAQyC~~,SAES,~~QAApBjD~~,~~EAAMkD~~,~~UAAsBZ~~,EAACrB,EAAQ,IAAK7B,IAAoBkD,EAACxB,EAAQ,IAAK1B,MAE/EkD,EAACC,EAAU,CACTC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,~~EAASoE~~,~~MACzDR~~,QAAS,KACP5D,~~GAAUqE~~,~~YACVnE~~,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,~~GAAI~~,~~IACCc~~,~~EACHiC~~,eAAgB,~~UACb5C~~,~~GACJ~~,aACU,aAAY,gBACT,WACdwB,MAAM,aACFvB,~~WAEiB~~,~~QAApBV~~,~~EAAMkD~~,~~UAAsBZ~~,EAACxB,EAAQ,IAAKvB,IAAoB+C,EAACrB,~~MAAa1B~~,QAIrF"}
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.transparent' : 'onSurface.os100',\n backgroundColor: onBackground ? 'transparent.transparent' : 'surface.primary',\n },\n {\n backgroundColor: 'surface.secondary',\n },\n ),\n // disabled state\n '&.Mui-disabled': {\n color: 'disabled.tertiary',\n borderColor: onBackground ? 'transparent.transparent' : 'disabled.secondary',\n backgroundColor: onBackground ? 'transparent.transparent' : 'disabled.secondary',\n },\n }),\n [],\n );\n\n // hide navigation when not needed\n if (autoHideNavigation && carousel?.isLocked) {\n return null;\n }\n return (\n <>\n <IconButton\n disabled={carousel && !carousel.params?.loop && carousel.isBeginning}\n onClick={() => {\n carousel?.slidePrev();\n peekEffect && peek && setPeek('reset');\n }}\n onMouseEnter={() => upMD && peekEffect && setPeek('prev')}\n onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n sx={sxOverride(\n {\n ...sharedSx,\n insetInlineStart: '16px',\n },\n prevSx,\n )}\n aria-label=\"Previous slide\"\n aria-controls=\"carousel\"\n color=\"surface\"\n size=\"medium\"\n {...restPrev}\n >\n {theme.direction === 'rtl' ? <NextIcon {...prevIconProps} /> : <PrevIcon {...prevIconProps} />}\n </IconButton>\n <IconButton\n disabled={carousel && !carousel.params?.loop && carousel.isEnd}\n onClick={() => {\n carousel?.slideNext();\n peekEffect && peek && setPeek('reset');\n }}\n onMouseEnter={() => upMD && peekEffect && setPeek('next')}\n onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n sx={sxOverride(\n {\n ...sharedSx,\n insetInlineEnd: '16px',\n },\n nextSx,\n )}\n aria-label=\"Next slide\"\n aria-controls=\"carousel\"\n color=\"surface\"\n {...restNext}\n >\n {theme.direction === 'rtl' ? <PrevIcon {...nextIconProps} /> : <NextIcon {...nextIconProps} />}\n </IconButton>\n </>\n );\n}\n"],"names":["CarouselNavigation","carousel","carouselProp","peekEffect","propPeekEffect","prevButtonProps","prevIconProps","PrevIconComponent","nextButtonProps","nextIconProps","NextIconComponent","arrows","onBackground","autoHideNavigation","carouselHook","useCarousel","params","effect","theme","useTheme","upMD","useMediaQuery","breakpoints","up","sx","prevSx","restPrev","nextSx","restNext","peek","setPeek","useCarouselPeekEffect","PrevIcon","ArrowLeftIcon","ChevronLeftIcon","NextIcon","ArrowRightIcon","ChevronRightIcon","sharedSx","useMemo","position","zIndex","top","width","xs","md","xl","height","mt","fontSize","getInteractiveStyle","color","borderColor","backgroundColor","isLocked","_jsxs","_jsx","IconButton","disabled","loop","isBeginning","onClick","slidePrev","onMouseEnter","onMouseLeave","sxOverride","insetInlineStart","size","children","direction","isEnd","slideNext","insetInlineEnd"],"mappings":"opBAiEgBA,GACdC,SAAUC,EACVC,WAAYC,GAAiB,EAAKC,gBAClCA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,gBACjBA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,OACjBA,GAAS,EAAIC,aACbA,GAAe,EAAKC,mBACpBA,GAAqB,IAErB,MAAMC,EAAeC,IACfd,EAAWC,GAAgBY,EAC3BX,EAA0C,SAA7BF,GAAUe,QAAQC,QAAqBb,EACpDc,EAAQC,IACRC,EAAOC,EAAcH,EAAMI,YAAYC,GAAG,QACxCC,GAAIC,KAAWC,GAAarB,GAAmB,CAAA,GAC/CmB,GAAIG,KAAWC,GAAapB,GAAmB,CAAA,GAChDqB,EAAMC,GAAWC,EAAsB9B,GACxC+B,EAAWzB,IAAsBI,EAASsB,EAAgBC,GAC1DC,EAAWzB,IAAsBC,EAASyB,EAAiBC,GAG3DC,EAAWC,EACf,KAAA,CAEEC,SAAU,WACVC,OAAQ,MACRC,IAAK,MAELC,MAAO,CAAEC,GAAI,OAAQC,GAAI,OAAQC,GAAI,QACrCC,OAAQ,CAAEH,GAAI,OAAQC,GAAI,OAAQC,GAAI,QAEtCE,GAAI,CAAEJ,GAAI,QAASC,GAAI,QAASC,GAAI,SACpC,qBAAsB,CACpBG,SAAU,CAAEL,GAAI,OAAQE,GAAI,YAG3BI,EACD,CACEC,MAAO,eACPC,YAAaxC,EAAe,0BAA4B,kBACxDyC,gBAAiBzC,EAAe,0BAA4B,mBAE9D,CACEyC,gBAAiB,sBAIrB,iBAAkB,CAChBF,MAAO,oBACPC,YAAaxC,EAAe,0BAA4B,qBACxDyC,gBAAiBzC,EAAe,0BAA4B,wBAGhE,IAIF,OAAIC,GAAsBZ,GAAUqD,SAC3B,KAGPC,eACEC,EAACC,GACCC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,EAAS2D,YACzDC,QAAS,KACP5D,GAAU6D,YACV3D,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,GAAIyC,EACF,IACK3B,EACH4B,iBAAkB,QAEpBzC,GACD,aACU,iBAAgB,gBACb,WACd0B,MAAM,UACNgB,KAAK,YACDzC,EAAQ0C,SAES,QAApBlD,EAAMmD,UAAsBb,EAACrB,EAAQ,IAAK7B,IAAoBkD,EAACxB,EAAQ,IAAK1B,MAE/EkD,EAACC,EAAU,CACTC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,EAASqE,MACzDT,QAAS,KACP5D,GAAUsE,YACVpE,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,GAAIyC,EACF,IACK3B,EACHkC,eAAgB,QAElB7C,GACD,aACU,aAAY,gBACT,WACdwB,MAAM,aACFvB,EAAQwC,SAES,QAApBlD,EAAMmD,UAAsBb,EAACxB,EAAQ,IAAKvB,IAAoB+C,EAACrB,EAAQ,IAAK1B,QAIrF"}

package/components/carousel/Pagination.d.ts CHANGED Viewed

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

package/components/carousel/Pagination.js CHANGED Viewed

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

package/components/carousel/Pagination.js.map CHANGED Viewed

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

package/components/carousel/Slide.js CHANGED Viewed

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

package/components/carousel/Slide.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slide.js","sources":["../../../src/components/carousel/Slide.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { SwiperSlide, SwiperSlideProps, useSwiper } from 'swiper/react';\n\nexport interface CarouselSlideProps\n extends Omit<SwiperSlideProps, 'children'>, Omit<BoxProps, keyof SwiperSlideProps \| 'component'> {\n children?: BoxProps['children'];\n}\n\n/*\n One slide in the carousel\n */\nexport const CarouselSlide: React.FC<CarouselSlideProps> = forwardRef(({ children, sx, ...rest }, ref) => {\n const { params: swiperOptions } = useSwiper();\n\n return (\n <Box\n component={SwiperSlide}\n ref={ref}\n {...rest}\n sx={{\n display: 'block',\n width: swiperOptions?.slidesPerView === 'auto' ? 'auto' : '100%',\n height: swiperOptions?.autoHeight ? 'auto' : '100%',\n position: 'relative',\n zIndex: '50',\n transform: 'translate3d(0px, 0, 0)',\n flexShrink: '0',\n transitionProperty: swiperOptions?.effect === 'fade' ? 'opacity' : 'transform',\n '& img': {\n display: 'block',\n maxWidth: '100%',\n },\n ~~...~~sx,\n }}\n >\n {children}\n </Box>\n );\n});\nCarouselSlide.displayName = 'SwiperSlide';\n"],"names":["CarouselSlide","forwardRef","children","sx","rest","ref","params","swiperOptions","useSwiper","_jsx","Box","component","SwiperSlide","display","width","slidesPerView","height","autoHeight","position","zIndex","transform","flexShrink","transitionProperty","effect","maxWidth","displayName"],"mappings":"~~yKAYO~~,MAAMA,EAA8CC,EAAW,EAAGC,WAAUC,QAAOC,GAAQC,KAChG,MAAQC,OAAQC,GAAkBC,IAElC,OACEC,EAACC,EAAG,CACFC,UAAWC,EACXP,IAAKA,KACDD,EACJD,~~GAAI~~,~~CACFU~~,QAAS,QACTC,MAAwC,~~SAAjCP~~,~~GAAeQ~~,cAA2B,OAAS,OAC1DC,~~OAAQT~~,~~GAAeU~~,WAAa,OAAS,OAC7CC,SAAU,WACVC,OAAQ,KACRC,UAAW,yBACXC,WAAY,IACZC,mBAA8C,~~SAA1Bf~~,~~GAAegB~~,OAAoB,UAAY,YACnE,QAAS,CACPV,QAAS,QACTW,SAAU,~~WAETrB~~,~~GACJD~~,SAEAA,MAIPF,~~EAAcyB~~,YAAc"}
1	+ {"version":3,"file":"Slide.js","sources":["../../../src/components/carousel/Slide.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { SwiperSlide, SwiperSlideProps, useSwiper } from 'swiper/react';\n\nexport interface CarouselSlideProps\n extends Omit<SwiperSlideProps, 'children'>, Omit<BoxProps, keyof SwiperSlideProps \| 'component'> {\n children?: BoxProps['children'];\n}\n\n/*\n One slide in the carousel\n */\nexport const CarouselSlide: React.FC<CarouselSlideProps> = forwardRef(({ children, sx, ...rest }, ref) => {\n const { params: swiperOptions } = useSwiper();\n\n return (\n <Box\n component={SwiperSlide}\n ref={ref}\n {...rest}\n sx={sxOverride(\n {\n display: 'block',\n width: swiperOptions?.slidesPerView === 'auto' ? 'auto' : '100%',\n height: swiperOptions?.autoHeight ? 'auto' : '100%',\n position: 'relative',\n zIndex: '50',\n transform: 'translate3d(0px, 0, 0)',\n flexShrink: '0',\n transitionProperty: swiperOptions?.effect === 'fade' ? 'opacity' : 'transform',\n '& img': {\n display: 'block',\n maxWidth: '100%',\n },\n },\n sx,\n )}\n >\n {children}\n </Box>\n );\n});\nCarouselSlide.displayName = 'SwiperSlide';\n"],"names":["CarouselSlide","forwardRef","children","sx","rest","ref","params","swiperOptions","useSwiper","_jsx","Box","component","SwiperSlide","sxOverride","display","width","slidesPerView","height","autoHeight","position","zIndex","transform","flexShrink","transitionProperty","effect","maxWidth","displayName"],"mappings":"2OAaO,MAAMA,EAA8CC,EAAW,EAAGC,WAAUC,QAAOC,GAAQC,KAChG,MAAQC,OAAQC,GAAkBC,IAElC,OACEC,EAACC,EAAG,CACFC,UAAWC,EACXP,IAAKA,KACDD,EACJD,GAAIU,EACF,CACEC,QAAS,QACTC,MAAwC,SAAjCR,GAAeS,cAA2B,OAAS,OAC1DC,OAAQV,GAAeW,WAAa,OAAS,OAC7CC,SAAU,WACVC,OAAQ,KACRC,UAAW,yBACXC,WAAY,IACZC,mBAA8C,SAA1BhB,GAAeiB,OAAoB,UAAY,YACnE,QAAS,CACPV,QAAS,QACTW,SAAU,SAGdtB,GACDD,SAEAA,MAIPF,EAAc0B,YAAc"}

package/components/errorContent/ErrorContent.js CHANGED Viewed

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

package/components/errorContent/ErrorContent.js.map CHANGED Viewed

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

package/components/flag/FlowFlag.js CHANGED Viewed

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

package/components/flag/FlowFlag.js.map CHANGED Viewed

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

package/components/footer/Footer.js CHANGED Viewed

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

package/components/footer/Footer.js.map CHANGED Viewed

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

package/components/footer/FooterAccordion.js CHANGED Viewed

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

package/components/footer/FooterAccordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FooterAccordion.js","sources":["../../../src/components/footer/FooterAccordion.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, ElementType } from 'react';\nimport {\n Accordion,\n AccordionSummary,\n AccordionDetails,\n AccordionProps,\n AccordionSummaryProps,\n AccordionDetailsProps,\n Typography,\n TypographyProps,\n useTheme,\n} from '@mui/material';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface FooterAccordionProps extends Omit<AccordionProps, 'variant'> {\n /*\n Label of the Accordion\n /\n label?: ReactNode;\n /\n Props applied to the wrapper of label\n /\n accordionSummaryProps?: AccordionSummaryProps<ElementType>;\n /\n Props applied to the content of the accodion\n /\n accordionDetailsProps?: AccordionDetailsProps;\n /\n Properties applied to wrapper of children\n /\n contentProps?: TypographyProps<ElementType>;\n /\n Variant of accordion\n * @default compact\n /\n variant?: 'compact' \| 'standard';\n}\n\n/\n Collapsible footer section\n */\nexport const FooterAccordion: FC<FooterAccordionProps> = forwardRef(\n (\n {\n sx,\n children,\n className,\n label,\n accordionSummaryProps,\n accordionDetailsProps,\n contentProps,\n variant = 'compact',\n ...rest\n },\n ref,\n ) => {\n const { sx: accordionSummarySx, ...restAccordionSummary } = accordionSummaryProps ?? {};\n const theme = useTheme();\n\n return (\n <Accordion\n ref={ref}\n data-testid=\"FooterAccordion\"\n className={[\n 'FooterAccordion-root',\n `FooterAccordion-variant${variant.charAt(0).toUpperCase()}${variant.slice(1)}`,\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n sx={{\n // recolor to dark mode\n color: 'currentColor',\n ...(variant === 'compact' && {\n border: 'none',\n }),\n ~~...~~sx,\n }}\n {...rest}\n >\n <AccordionSummary\n data-testid=\"FooterAccordion.label\"\n aria-controls=\"footer-accordion\"\n id=\"footer-accordion\"\n sx={{\n // recolor to dark mode\n color: 'currentColor',\n '&:hover': {\n color: 'currentColor',\n // hover over IconButton\n '& .MuiAccordion-IconButton': {\n backgroundColor: theme.palette.transparent.tertiary,\n },\n },\n // change variant of icon button to small & white\n '& .MuiAccordion-IconButton': {\n height: '32px',\n width: '32px',\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent',\n color: theme.palette.onSurface.os0,\n },\n {\n color: theme.palette.onSurface.os0,\n backgroundColor: theme.palette.transparent.tertiary,\n },\n ),\n },\n ...(variant === 'compact' && {\n ...theme.typography.caption2,\n p: '0',\n gap: 1.5,\n justifyContent: 'flex-start',\n // move icon next to label\n '& .MuiAccordionSummary-content': {\n flexGrow: '0',\n },\n }),\n ~~...~~accordionSummarySx,\n }}\n {...restAccordionSummary}\n >\n {label}\n </AccordionSummary>\n <AccordionDetails data-testid=\"FooterAccordion.children\" {...accordionDetailsProps}>\n <Typography variant=\"disclaimer1\" {...contentProps}>\n {children}\n </Typography>\n </AccordionDetails>\n </Accordion>\n );\n },\n);\n"],"names":["FooterAccordion","forwardRef","sx","children","className","label","accordionSummaryProps","accordionDetailsProps","contentProps","variant","rest","ref","accordionSummarySx","restAccordionSummary","theme","useTheme","_jsxs","Accordion","charAt","toUpperCase","slice","filter","Boolean","join","color","border","_jsx","AccordionSummary","id","backgroundColor","palette","transparent","tertiary","height","width","getInteractiveStyle","onSurface","os0","typography","caption2","p","gap","justifyContent","flexGrow","AccordionDetails","Typography"],"mappings":"~~sRAyCO~~,MAAMA,EAA4CC,EACvD,EAEIC,KACAC,WACAC,YACAC,QACAC,wBACAC,wBACAC,eACAC,UAAU,aACPC,GAELC,KAEA,MAAQT,GAAIU,KAAuBC,GAAyBP,GAAyB,CAAA,EAC/EQ,EAAQC,IAEd,OACEC,EAACC,EAAS,CACRN,IAAKA,EAAG,cACI,kBACZP,UAAW,CACT,uBACA,0BAA0BK,EAAQS,OAAO,GAAGC,gBAAgBV,EAAQW,MAAM,KAC1EhB,GAECiB,OAAOC,SACPC,KAAK,KACRrB,~~GAAI~~,~~CAEFsB~~,MAAO,kBACS,~~YAAZf~~,GAAyB,~~CAC3BgB~~,OAAQ,~~WAEPvB~~,~~MAEDQ~~,EAAIP,SAAA,~~CAERuB~~,EAACC,~~iBACa~~,~~wBAAuB~~,~~gBACrB~~,mBACdC,GAAG,~~mBACH1B~~,~~GAAI~~,~~CAEFsB~~,MAAO,eACP,UAAW,CACTA,MAAO,eAEP,6BAA8B,CAC5BK,~~gBAAiBf~~,~~EAAMgB~~,QAAQC,YAAYC,WAI/C,6BAA8B,CAC5BC,OAAQ,OACRC,MAAO,UACJC,EACD,CACEN,gBAAiB,cACjBL,~~MAAOV~~,~~EAAMgB~~,QAAQM,UAAUC,KAEjC,CACEb,~~MAAOV~~,~~EAAMgB~~,QAAQM,UAAUC,IAC/BR,~~gBAAiBf~~,~~EAAMgB~~,QAAQC,YAAYC,eAIjC,~~YAAZvB~~,GAAyB,IACxBK,~~EAAMwB~~,WAAWC,SACpBC,EAAG,IACHC,IAAK,IACLC,eAAgB,aAEhB,iCAAkC,CAChCC,SAAU,~~SAGX/B~~,~~MAEDC~~,EAAoBV,SAEvBE,~~IAEHqB~~,EAACkB,EAAgB,CAAA,cAAa,8BAA+~~BrC~~,EAAqBJ,~~SAChFuB~~,EAACmB,EAAU,~~CAACpC~~,QAAQ,iBAAkBD,EAAYL,SAC/CA"}
1	+ {"version":3,"file":"FooterAccordion.js","sources":["../../../src/components/footer/FooterAccordion.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, ElementType } from 'react';\nimport {\n Accordion,\n AccordionSummary,\n AccordionDetails,\n AccordionProps,\n AccordionSummaryProps,\n AccordionDetailsProps,\n Typography,\n TypographyProps,\n useTheme,\n} from '@mui/material';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface FooterAccordionProps extends Omit<AccordionProps, 'variant'> {\n /*\n Label of the Accordion\n /\n label?: ReactNode;\n /\n Props applied to the wrapper of label\n /\n accordionSummaryProps?: AccordionSummaryProps<ElementType>;\n /\n Props applied to the content of the accodion\n /\n accordionDetailsProps?: AccordionDetailsProps;\n /\n Properties applied to wrapper of children\n /\n contentProps?: TypographyProps<ElementType>;\n /\n Variant of accordion\n * @default compact\n /\n variant?: 'compact' \| 'standard';\n}\n\n/\n Collapsible footer section\n */\nexport const FooterAccordion: FC<FooterAccordionProps> = forwardRef(\n (\n {\n sx,\n children,\n className,\n label,\n accordionSummaryProps,\n accordionDetailsProps,\n contentProps,\n variant = 'compact',\n ...rest\n },\n ref,\n ) => {\n const { sx: accordionSummarySx, ...restAccordionSummary } = accordionSummaryProps ?? {};\n const theme = useTheme();\n\n return (\n <Accordion\n ref={ref}\n data-testid=\"FooterAccordion\"\n className={[\n 'FooterAccordion-root',\n `FooterAccordion-variant${variant.charAt(0).toUpperCase()}${variant.slice(1)}`,\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n sx={sxOverride(\n {\n // recolor to dark mode\n color: 'currentColor',\n ...(variant === 'compact' && {\n border: 'none',\n }),\n },\n sx,\n )}\n {...rest}\n >\n <AccordionSummary\n data-testid=\"FooterAccordion.label\"\n aria-controls=\"footer-accordion\"\n id=\"footer-accordion\"\n sx={sxOverride(\n {\n // recolor to dark mode\n color: 'currentColor',\n '&:hover': {\n color: 'currentColor',\n // hover over IconButton\n '& .MuiAccordion-IconButton': {\n backgroundColor: theme.palette.transparent.tertiary,\n },\n },\n // change variant of icon button to small & white\n '& .MuiAccordion-IconButton': {\n height: '32px',\n width: '32px',\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent',\n color: theme.palette.onSurface.os0,\n },\n {\n color: theme.palette.onSurface.os0,\n backgroundColor: theme.palette.transparent.tertiary,\n },\n ),\n },\n ...(variant === 'compact' && {\n ...theme.typography.caption2,\n p: '0',\n gap: 1.5,\n justifyContent: 'flex-start',\n // move icon next to label\n '& .MuiAccordionSummary-content': {\n flexGrow: '0',\n },\n }),\n },\n accordionSummarySx,\n )}\n {...restAccordionSummary}\n >\n {label}\n </AccordionSummary>\n <AccordionDetails data-testid=\"FooterAccordion.children\" {...accordionDetailsProps}>\n <Typography variant=\"disclaimer1\" {...contentProps}>\n {children}\n </Typography>\n </AccordionDetails>\n </Accordion>\n );\n },\n);\n"],"names":["FooterAccordion","forwardRef","sx","children","className","label","accordionSummaryProps","accordionDetailsProps","contentProps","variant","rest","ref","accordionSummarySx","restAccordionSummary","theme","useTheme","_jsxs","Accordion","charAt","toUpperCase","slice","filter","Boolean","join","sxOverride","color","border","_jsx","AccordionSummary","id","backgroundColor","palette","transparent","tertiary","height","width","getInteractiveStyle","onSurface","os0","typography","caption2","p","gap","justifyContent","flexGrow","AccordionDetails","Typography"],"mappings":"wVA0CO,MAAMA,EAA4CC,EACvD,EAEIC,KACAC,WACAC,YACAC,QACAC,wBACAC,wBACAC,eACAC,UAAU,aACPC,GAELC,KAEA,MAAQT,GAAIU,KAAuBC,GAAyBP,GAAyB,CAAA,EAC/EQ,EAAQC,IAEd,OACEC,EAACC,EAAS,CACRN,IAAKA,EAAG,cACI,kBACZP,UAAW,CACT,uBACA,0BAA0BK,EAAQS,OAAO,GAAGC,gBAAgBV,EAAQW,MAAM,KAC1EhB,GAECiB,OAAOC,SACPC,KAAK,KACRrB,GAAIsB,EACF,CAEEC,MAAO,kBACS,YAAZhB,GAAyB,CAC3BiB,OAAQ,SAGZxB,MAEEQ,EAAIP,SAAA,CAERwB,EAACC,EAAgB,CAAA,cACH,wCACE,mBACdC,GAAG,mBACH3B,GAAIsB,EACF,CAEEC,MAAO,eACP,UAAW,CACTA,MAAO,eAEP,6BAA8B,CAC5BK,gBAAiBhB,EAAMiB,QAAQC,YAAYC,WAI/C,6BAA8B,CAC5BC,OAAQ,OACRC,MAAO,UACJC,EACD,CACEN,gBAAiB,cACjBL,MAAOX,EAAMiB,QAAQM,UAAUC,KAEjC,CACEb,MAAOX,EAAMiB,QAAQM,UAAUC,IAC/BR,gBAAiBhB,EAAMiB,QAAQC,YAAYC,eAIjC,YAAZxB,GAAyB,IACxBK,EAAMyB,WAAWC,SACpBC,EAAG,IACHC,IAAK,IACLC,eAAgB,aAEhB,iCAAkC,CAChCC,SAAU,OAIhBhC,MAEEC,EAAoBV,SAEvBE,IAEHsB,EAACkB,EAAgB,CAAA,cAAa,8BAA+BtC,EAAqBJ,SAChFwB,EAACmB,EAAU,CAACrC,QAAQ,iBAAkBD,EAAYL,SAC/CA"}

package/components/footer/FooterLink.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Link as r}from"@mui/material";const i=e(({sx:e,children:i,label:o,...n},a)=>t(r,{sx:{display:"inline-flex",gap:1.5,alignItems:"center",justifyContent:"flex-start",padding:"4px 8px","&, &:hover":{textDecoration:"underline",color:"common.white"},"& .MuiSvgIcon-root":{fontSize:"20px"},...e},variant:"list",ref:a,...n,children:i||o}));export{i as FooterLink};
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Link as t}from"@mui/material";import{sxOverride as i}from"../../utils/sxOverride/sxOverride.js";const o=e(({sx:e,children:o,label:n,...l},m)=>r(t,{sx:i({display:"inline-flex",gap:1.5,alignItems:"center",justifyContent:"flex-start",padding:"4px 8px","&, &:hover":{textDecoration:"underline",color:"common.white"},"& .MuiSvgIcon-root":{fontSize:"20px"}},e),variant:"list",ref:m,...l,children:o||n}));export{o as FooterLink};
 //# sourceMappingURL=FooterLink.js.map

package/components/footer/FooterLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FooterLink.js","sources":["../../../src/components/footer/FooterLink.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef, ForwardedRef, ReactNode } from 'react';\nimport { Link, LinkProps } from '@mui/material';\n\nexport interface FooterLinkProps extends LinkProps<ElementType> {\n /*\n Displayed navigation text, can be provided as children as well\n /\n label?: ReactNode;\n}\n\n/\n Component to render styled link in the footer\n */\nexport const FooterLink: FC<FooterLinkProps> = forwardRef(({ sx, children, label, ...rest }, ref) => {\n return (\n <Link\n sx={{\n // icon and text next to each other\n display: 'inline-flex',\n gap: 1.5,\n alignItems: 'center',\n justifyContent: 'flex-start',\n padding: '4px 8px',\n // styling\n '&, &:hover': {\n textDecoration: 'underline',\n color: 'common.white',\n },\n // size of icon\n '& .MuiSvgIcon-root': {\n fontSize: '20px',\n },\n ~~...~~sx,\n }}\n variant=\"list\"\n ref={ref as ForwardedRef<HTMLAnchorElement>}\n {...rest}\n >\n {children \|\| label}\n </Link>\n );\n});\n"],"names":["FooterLink","forwardRef","sx","children","label","rest","ref","_jsx","Link","display","gap","alignItems","justifyContent","padding","textDecoration","color","fontSize","variant"],"mappings":"~~sHAaaA~~,EAAkCC,EAAW,EAAGC,KAAIC,WAAUC,WAAUC,GAAQC,IAEzFC,EAACC,~~EAAI~~,~~CACHN~~,~~GAAI~~,~~CAEFO~~,QAAS,cACTC,IAAK,IACLC,WAAY,SACZC,eAAgB,aAChBC,QAAS,UAET,aAAc,CACZC,eAAgB,YAChBC,MAAO,gBAGT,qBAAsB,CACpBC,SAAU,~~WAETd~~,~~GAELe~~,QAAQ,~~OACRX~~,IAAKA,KACDD,~~WAEHF~~,GAAYC"}
1	+ {"version":3,"file":"FooterLink.js","sources":["../../../src/components/footer/FooterLink.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef, ForwardedRef, ReactNode } from 'react';\nimport { Link, LinkProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface FooterLinkProps extends LinkProps<ElementType> {\n /*\n Displayed navigation text, can be provided as children as well\n /\n label?: ReactNode;\n}\n\n/\n Component to render styled link in the footer\n */\nexport const FooterLink: FC<FooterLinkProps> = forwardRef(({ sx, children, label, ...rest }, ref) => {\n return (\n <Link\n sx={sxOverride(\n {\n // icon and text next to each other\n display: 'inline-flex',\n gap: 1.5,\n alignItems: 'center',\n justifyContent: 'flex-start',\n padding: '4px 8px',\n // styling\n '&, &:hover': {\n textDecoration: 'underline',\n color: 'common.white',\n },\n // size of icon\n '& .MuiSvgIcon-root': {\n fontSize: '20px',\n },\n },\n sx,\n )}\n variant=\"list\"\n ref={ref as ForwardedRef<HTMLAnchorElement>}\n {...rest}\n >\n {children \|\| label}\n </Link>\n );\n});\n"],"names":["FooterLink","forwardRef","sx","children","label","rest","ref","_jsx","Link","sxOverride","display","gap","alignItems","justifyContent","padding","textDecoration","color","fontSize","variant"],"mappings":"wLAcaA,EAAkCC,EAAW,EAAGC,KAAIC,WAAUC,WAAUC,GAAQC,IAEzFC,EAACC,GACCN,GAAIO,EACF,CAEEC,QAAS,cACTC,IAAK,IACLC,WAAY,SACZC,eAAgB,aAChBC,QAAS,UAET,aAAc,CACZC,eAAgB,YAChBC,MAAO,gBAGT,qBAAsB,CACpBC,SAAU,SAGdf,GAEFgB,QAAQ,OACRZ,IAAKA,KACDD,EAAIF,SAEPA,GAAYC"}

package/components/footer/FooterMenu.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as r,useState as e}from"react";import{useTheme as t,useMediaQuery as n}from"@mui/material";import{FooterAccordion as a}from"./FooterAccordion.js";const i=r(({sx:r,children:i,label:s,accordionSummaryProps:c,contentProps:d,variant:p="auto",...l},m)=>{const{sx:u,...x}=d??{},{sx:f,...y}=c??{},b=t(),h=n(b.breakpoints.down("lg")),g="auto"===p?h:"accordion"===p,[v,M]=e(!1);return o(a,{ref:m,"data-testid":"FooterMenu",expanded:!g||v,onChange:(o,r)=>M(r),variant:"standard",sx:{flexBasis:{lg:"20%"},borderColor:"onSurface.os700",...!g&&{border:"none"},...r},accordionSummaryProps:{"data-testid":"FooterMenu.label",sx:{padding:"18px 0 8px","& .MuiLink-root":{...b.typography.subheadline,p:0,"&, &:hover":{textDecoration:"none",color:"common.white"}},...!g&&{overflow:"visible","&&:not(.Mui-disabled)":{cursor:"unset"},"& .MuiAccordionSummary-expandIconWrapper":{display:"none"}},...f},...y},label:s,contentProps:{component:"div","data-testid":"FooterMenu.content",sx:{display:"flex",alignItems:"flex-start",justifyContent:"flex-start",flexDirection:"column",gap:1.5,"& .MuiLink-root":{...b.typography.caption2,p:0,"&, &:hover":{textDecoration:"none",color:"onSurface.os200"}},...u},...x},...l,children:i},`${g}`)});export{i as FooterMenu};
+import{jsx as o}from"react/jsx-runtime";import{forwardRef as r,useState as e}from"react";import{useTheme as t,useMediaQuery as n}from"@mui/material";import{FooterAccordion as a}from"./FooterAccordion.js";import{sxOverride as i}from"../../utils/sxOverride/sxOverride.js";const s=r(({sx:r,children:s,label:d,accordionSummaryProps:c,contentProps:p,variant:l="auto",...m},u)=>{const{sx:x,...f}=p??{},{sx:y,...b}=c??{},g=t(),h=n(g.breakpoints.down("lg")),v="auto"===l?h:"accordion"===l,[M,S]=e(!1);return o(a,{ref:u,"data-testid":"FooterMenu",expanded:!v||M,onChange:(o,r)=>S(r),variant:"standard",sx:i({flexBasis:{lg:"20%"},borderColor:"onSurface.os700",...!v&&{border:"none"}},r),accordionSummaryProps:{"data-testid":"FooterMenu.label",sx:i({padding:"14px 0","& .MuiLink-root":{...g.typography.subheadline,p:0,"&, &:hover":{textDecoration:"none",color:"common.white"}},...!v&&{padding:"18px 0 8px",overflow:"visible","&&:not(.Mui-disabled)":{cursor:"unset"},"& .MuiAccordionSummary-expandIconWrapper":{display:"none"}}},y),...b},label:d,contentProps:{component:"div","data-testid":"FooterMenu.content",sx:i({display:"flex",alignItems:"flex-start",justifyContent:"flex-start",flexDirection:"column",gap:1.5,"& .MuiLink-root":{...g.typography.caption2,p:0,"&, &:hover":{textDecoration:"none",color:"onSurface.os200"}}},x),...f},...m,children:s},`${v}`)});export{s as FooterMenu};
 //# sourceMappingURL=FooterMenu.js.map

package/components/footer/FooterMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FooterMenu.js","sources":["../../../src/components/footer/FooterMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState } from 'react';\nimport { Theme, useMediaQuery, useTheme } from '@mui/material';\nimport { FooterAccordion, FooterAccordionProps } from './FooterAccordion';\n\nexport interface FooterMenuProps extends Omit<FooterAccordionProps, 'variant' \| 'children'> {\n /*\n Items in the menu\n /\n children?: React.ReactNode;\n /\n Variant of the menu\n * - auto: renders on large resolution as list and on mobile as accordion\n * - list: renders as list with title\n * - accordion: renders as collapsible accordion\n * @default auto\n /\n variant?: 'auto' \| 'list' \| 'accordion';\n}\n\n/\n Section for the secondary links, copyright and optional button\n */\nexport const FooterMenu: FC<FooterMenuProps> = forwardRef(\n ({ sx, children, label, accordionSummaryProps, contentProps, variant = 'auto', ...rest }, ref) => {\n const { sx: contentSx, ...restContent } = contentProps ?? {};\n const { sx: accSummarySx, ...restAccSummary } = accordionSummaryProps ?? {};\n const theme = useTheme();\n const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n const isAccordion = variant === 'auto' ? downLg : variant === 'accordion';\n const [expanded, setExpanded] = useState(false);\n\n return (\n <FooterAccordion\n key={`${isAccordion}`}\n ref={ref}\n data-testid=\"FooterMenu\"\n expanded={isAccordion ? expanded : true}\n onChange={(_, v) => setExpanded(v)}\n variant=\"standard\"\n sx={{\n // spacing in the FooterSectionMenu, take max 1/5 of space\n flexBasis: { lg: '20%' },\n borderColor: 'onSurface.os700',\n ...(!isAccordion && {\n border: 'none',\n }),\n ~~...~~sx,\n }}\n accordionSummaryProps={{\n ['data-testid']: 'FooterMenu.label',\n sx: {\n // adjust proportions ~~to be closer to menu~~\n padding: '~~18px~~ 0 ~~8px~~',\n // manipulates style of links inside\n '& .MuiLink-root': {\n ...theme.typography.subheadline,\n p: 0,\n '&, &:hover': {\n textDecoration: 'none',\n color: 'common.white',\n },\n },\n ...(!isAccordion && {\n // allow overflow of focus ring\n overflow: 'visible',\n // no longer clickable\n '&&:not(.Mui-disabled)': {\n cursor: 'unset',\n },\n // hide icon\n '& .MuiAccordionSummary-expandIconWrapper': {\n display: 'none',\n },\n }),\n ~~...~~accSummarySx,\n },\n ...restAccSummary,\n }}\n label={label}\n contentProps={{\n component: 'div',\n ['data-testid']: 'FooterMenu.content',\n sx: {\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n flexDirection: 'column',\n gap: 1.5,\n // manipulates style of links inside\n '& .MuiLink-root': {\n ...theme.typography.caption2,\n p: 0,\n '&, &:hover': {\n textDecoration: 'none',\n color: 'onSurface.os200',\n },\n },\n ~~...~~contentSx,\n },\n ...restContent,\n }}\n {...rest}\n >\n {children}\n </FooterAccordion>\n );\n },\n);\n"],"names":["FooterMenu","forwardRef","sx","children","label","accordionSummaryProps","contentProps","variant","rest","ref","contentSx","restContent","accSummarySx","restAccSummary","theme","useTheme","downLg","useMediaQuery","breakpoints","down","isAccordion","expanded","setExpanded","useState","_jsx","FooterAccordion","onChange","_","v","flexBasis","lg","borderColor","border","padding","typography","subheadline","p","textDecoration","color","overflow","cursor","display","component","alignItems","justifyContent","flexDirection","gap","caption2"],"mappings":"~~4MAsBO~~,MAAMA,EAAkCC,EAC7C,EAAGC,KAAIC,WAAUC,QAAOC,wBAAuBC,eAAcC,UAAU,UAAWC,GAAQC,KACxF,MAAQP,GAAIQ,KAAcC,GAAgBL,GAAgB,CAAA,GAClDJ,GAAIU,KAAiBC,GAAmBR,GAAyB,CAAA,EACnES,EAAQC,IACRC,EAASC,EAAqBH,EAAMI,YAAYC,KAAK,OACrDC,EAA0B,SAAZb,EAAqBS,EAAqB,cAAZT,GAC3Cc,EAAUC,GAAeC,GAAS,GAEzC,OACEC,EAACC,GAEChB,IAAKA,EAAG,cACI,aACZY,UAAUD,GAAcC,EACxBK,SAAU,CAACC,EAAGC,IAAMN,EAAYM,GAChCrB,QAAQ,WACRL,~~GAAI~~,~~CAEF2B~~,UAAW,CAAEC,GAAI,OACjBC,YAAa,~~sBACRX~~,GAAe,~~CAClBY~~,OAAQ,~~WAEP9B~~,~~GAELG~~,sBAAuB,CACrB,cAAiB,mBACjBH,~~GAAI~~,~~CAEF+B~~,QAAS,~~aAET~~,kBAAmB,~~IACdnB~~,~~EAAMoB~~,WAAWC,YACpBC,EAAG,EACH,aAAc,CACZC,eAAgB,OAChBC,MAAO,~~qBAGNlB~~,GAAe,~~CAElBmB~~,SAAU,UAEV,wBAAyB,CACvBC,OAAQ,SAGV,2CAA4C,CAC1CC,QAAS,~~YAGV7B~~,~~MAEFC~~,GAELT,MAAOA,EACPE,aAAc,~~CACZoC~~,UAAW,MACX,cAAiB,~~qBACjBxC~~,~~GAAI~~,~~CACFuC~~,QAAS,OACTE,WAAY,aACZC,eAAgB,aAChBC,cAAe,SACfC,IAAK,IAEL,kBAAmB,~~IACdhC~~,~~EAAMoB~~,WAAWa,SACpBX,EAAG,EACH,aAAc,CACZC,eAAgB,OAChBC,MAAO,~~uBAGR5B~~,~~MAEFC~~,MAEDH,WAEHL,~~GAtEI~~,GAAGiB"}
1	+ {"version":3,"file":"FooterMenu.js","sources":["../../../src/components/footer/FooterMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState } from 'react';\nimport { Theme, useMediaQuery, useTheme } from '@mui/material';\nimport { FooterAccordion, FooterAccordionProps } from './FooterAccordion';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface FooterMenuProps extends Omit<FooterAccordionProps, 'variant' \| 'children'> {\n /*\n Items in the menu\n /\n children?: React.ReactNode;\n /\n Variant of the menu\n * - auto: renders on large resolution as list and on mobile as accordion\n * - list: renders as list with title\n * - accordion: renders as collapsible accordion\n * @default auto\n /\n variant?: 'auto' \| 'list' \| 'accordion';\n}\n\n/\n Section for the secondary links, copyright and optional button\n */\nexport const FooterMenu: FC<FooterMenuProps> = forwardRef(\n ({ sx, children, label, accordionSummaryProps, contentProps, variant = 'auto', ...rest }, ref) => {\n const { sx: contentSx, ...restContent } = contentProps ?? {};\n const { sx: accSummarySx, ...restAccSummary } = accordionSummaryProps ?? {};\n const theme = useTheme();\n const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n const isAccordion = variant === 'auto' ? downLg : variant === 'accordion';\n const [expanded, setExpanded] = useState(false);\n\n return (\n <FooterAccordion\n key={`${isAccordion}`}\n ref={ref}\n data-testid=\"FooterMenu\"\n expanded={isAccordion ? expanded : true}\n onChange={(_, v) => setExpanded(v)}\n variant=\"standard\"\n sx={sxOverride(\n {\n // spacing in the FooterSectionMenu, take max 1/5 of space\n flexBasis: { lg: '20%' },\n borderColor: 'onSurface.os700',\n ...(!isAccordion && {\n border: 'none',\n }),\n },\n sx,\n )}\n accordionSummaryProps={{\n ['data-testid']: 'FooterMenu.label',\n sx: sxOverride(\n {\n // adjust proportions\n padding: '14px 0',\n // manipulates style of links inside\n '& .MuiLink-root': {\n ...theme.typography.subheadline,\n p: 0,\n '&, &:hover': {\n textDecoration: 'none',\n color: 'common.white',\n },\n },\n ...(!isAccordion && {\n // adjust proportions to be closer to menu\n padding: '18px 0 8px',\n // allow overflow of focus ring\n overflow: 'visible',\n // no longer clickable\n '&&:not(.Mui-disabled)': {\n cursor: 'unset',\n },\n // hide icon\n '& .MuiAccordionSummary-expandIconWrapper': {\n display: 'none',\n },\n }),\n },\n accSummarySx,\n ),\n ...restAccSummary,\n }}\n label={label}\n contentProps={{\n component: 'div',\n ['data-testid']: 'FooterMenu.content',\n sx: sxOverride(\n {\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n flexDirection: 'column',\n gap: 1.5,\n // manipulates style of links inside\n '& .MuiLink-root': {\n ...theme.typography.caption2,\n p: 0,\n '&, &:hover': {\n textDecoration: 'none',\n color: 'onSurface.os200',\n },\n },\n },\n contentSx,\n ),\n ...restContent,\n }}\n {...rest}\n >\n {children}\n </FooterAccordion>\n );\n },\n);\n"],"names":["FooterMenu","forwardRef","sx","children","label","accordionSummaryProps","contentProps","variant","rest","ref","contentSx","restContent","accSummarySx","restAccSummary","theme","useTheme","downLg","useMediaQuery","breakpoints","down","isAccordion","expanded","setExpanded","useState","_jsx","FooterAccordion","onChange","_","v","sxOverride","flexBasis","lg","borderColor","border","padding","typography","subheadline","p","textDecoration","color","overflow","cursor","display","component","alignItems","justifyContent","flexDirection","gap","caption2"],"mappings":"8QAuBO,MAAMA,EAAkCC,EAC7C,EAAGC,KAAIC,WAAUC,QAAOC,wBAAuBC,eAAcC,UAAU,UAAWC,GAAQC,KACxF,MAAQP,GAAIQ,KAAcC,GAAgBL,GAAgB,CAAA,GAClDJ,GAAIU,KAAiBC,GAAmBR,GAAyB,CAAA,EACnES,EAAQC,IACRC,EAASC,EAAqBH,EAAMI,YAAYC,KAAK,OACrDC,EAA0B,SAAZb,EAAqBS,EAAqB,cAAZT,GAC3Cc,EAAUC,GAAeC,GAAS,GAEzC,OACEC,EAACC,GAEChB,IAAKA,EAAG,cACI,aACZY,UAAUD,GAAcC,EACxBK,SAAU,CAACC,EAAGC,IAAMN,EAAYM,GAChCrB,QAAQ,WACRL,GAAI2B,EACF,CAEEC,UAAW,CAAEC,GAAI,OACjBC,YAAa,sBACRZ,GAAe,CAClBa,OAAQ,SAGZ/B,GAEFG,sBAAuB,CACrB,cAAiB,mBACjBH,GAAI2B,EACF,CAEEK,QAAS,SAET,kBAAmB,IACdpB,EAAMqB,WAAWC,YACpBC,EAAG,EACH,aAAc,CACZC,eAAgB,OAChBC,MAAO,qBAGNnB,GAAe,CAElBc,QAAS,aAETM,SAAU,UAEV,wBAAyB,CACvBC,OAAQ,SAGV,2CAA4C,CAC1CC,QAAS,UAIf9B,MAECC,GAELT,MAAOA,EACPE,aAAc,CACZqC,UAAW,MACX,cAAiB,qBACjBzC,GAAI2B,EACF,CACEa,QAAS,OACTE,WAAY,aACZC,eAAgB,aAChBC,cAAe,SACfC,IAAK,IAEL,kBAAmB,IACdjC,EAAMqB,WAAWa,SACpBX,EAAG,EACH,aAAc,CACZC,eAAgB,OAChBC,MAAO,qBAIb7B,MAECC,MAEDH,WAEHL,GA9EI,GAAGiB"}

package/components/footer/FooterSectionContact.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Box as a}from"@mui/material";const l=o(({sx:o,children:l,className:r,contactSlot:s,contactSlotProps:n,socialSlot:c,socialSlotProps:i,...x},f)=>{const{sx:p,...m}=n??{},{sx:d,...g}=i??{};return t(a,{sx:{display:"flex",alignItems:{xs:"flex-start",lg:"center"},justifyContent:"space-between",flexWrap:"wrap",gap:{xs:4,lg:2},flexDirection:{xs:"column",lg:"row"},...o},ref:f,"data-testid":"FooterSectionContact",className:["FlowSectionContact-root",r].filter(Boolean).join(" "),...x,children:[t(a,{sx:{display:"flex",alignItems:{xs:"flex-start",lg:"center"},justifyContent:"flex-start",flexWrap:"wrap",gap:2,flexDirection:{xs:"column",lg:"row"},...p},"data-testid":"FooterSectionContact.contact",...m,children:[l,s]}),e(a,{sx:{display:"flex",alignItems:"center",justifyContent:{xs:"flex-start",lg:"flex-end"},flexWrap:"wrap",gap:.5,...d},"data-testid":"FooterSectionContact.social",...g,children:c})]})});export{l as FooterSectionContact};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Box as r}from"@mui/material";import{sxOverride as a}from"../../utils/sxOverride/sxOverride.js";const l=o(({sx:o,children:l,className:s,contactSlot:i,contactSlotProps:n,socialSlot:c,socialSlotProps:x,...f},p)=>{const{sx:m,...d}=n??{},{sx:g,...u}=x??{};return t(r,{sx:a({display:"flex",alignItems:{xs:"flex-start",lg:"center"},justifyContent:"space-between",flexWrap:"wrap",gap:{xs:4,lg:2},flexDirection:{xs:"column",lg:"row"}},o),ref:p,"data-testid":"FooterSectionContact",className:["FlowSectionContact-root",s].filter(Boolean).join(" "),...f,children:[t(r,{sx:a({display:"flex",alignItems:{xs:"flex-start",lg:"center"},justifyContent:"flex-start",flexWrap:"wrap",gap:2,flexDirection:{xs:"column",lg:"row"}},m),"data-testid":"FooterSectionContact.contact",...d,children:[l,i]}),e(r,{sx:a({display:"flex",alignItems:"center",justifyContent:{xs:"flex-start",lg:"flex-end"},flexWrap:"wrap",gap:.5},g),"data-testid":"FooterSectionContact.social",...u,children:c})]})});export{l as FooterSectionContact};
 //# sourceMappingURL=FooterSectionContact.js.map