@skodaflow/web-library 7.15.1 → 7.16.1

package/organisms/carousel2/galleryCarousel/galleryCarousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"galleryCarousel.js","sources":["../../../../src/organisms/carousel2/galleryCarousel/galleryCarousel.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { Carousel2Props } from '../carousel2';\nimport { useDefaultProps } from '../hooks/useDefaultProps';\nimport { useEmbla } from '../hooks/useEmbla';\nimport { NumberingColors, NumberingSizes } from '../../../utils/enum';\nimport { Box } from '@mui/material';\nimport { ItemsContainer } from '../components/ItemsContainer';\nimport { ViewPort } from '../components/ViewPort';\nimport { NavButton } from '../components/NavButton';\nimport { Numbering } from '../components/Numbering';\nimport { useContainerPeek } from '../hooks/useContainerPeek';\nimport { ResponsiveType, useResponsiveProp } from '../../../utils/ResponsiveType';\nimport { GalleryContextProvider } from './galleryContext';\n\nexport const GalleryDefaultProps: Partial<Carousel2Props> = {\n  align: 'start',\n  height: '100%',\n  controlOptions: {\n    color: 'light',\n    buttonPosition: '30%',\n    buttonAreaHeight: '30%',\n  },\n  maxSlideWidth: '100%',\n  isSlideDifferentWidth: true,\n  cssClass: 'gallery-variant',\n};\n\nexport type GalleryCarouselProps = {\n  /**\n   * Enables autoplay functionality, which can be used to automatically trigger slide changes after certain delay.\n   * @default false\n   */\n  autoPlay?: boolean;\n  /**\n   * Delay in ms between automatic slides\n   * @default 4000\n   */\n  autoPlayDelay?: number;\n  /**\n   * Adjust slide speed when using buttons to change Slide. Higher numbers enables faster scrolling. Values between `1`-`20` are recommended.\n   * @default 10\n   */\n  speed?: number;\n  /**\n   * Direction of content.\n   * @default ltr\n   */\n  direction?: 'rtl' | 'ltr';\n  /**\n   * Enables loop functionality, which can be used to continuously loop through all slides.\n   * @default false\n   */\n  loop?: boolean;\n  /**\n   * Separator of numbering component.\n   * @default /\n   */\n  numberingSeparator?: string;\n  /**\n   * Carousel slides. Any ReactNode can be used here, however `GalleryCarouselItem` component is suggested.\n   * @requires\n   */\n  children: React.ReactNode;\n  /**\n   * Index of Slide that is active by default.\n   * @default 0\n   */\n  startIndex?: number;\n\n  /**\n   * Optional height of carousel, this prop is added to height style property\n   * @default undefined\n   */\n  height?: ResponsiveType<string>;\n};\n\n/**\n * @deprecated use Carousel instead\n */\nexport const GalleryCarousel: React.FC<GalleryCarouselProps> = (inProps) => {\n  const galleryProps = { ...GalleryDefaultProps, ...inProps };\n  const props = useDefaultProps(galleryProps);\n\n  const [emblaRef, emblaApi] = useEmbla(props);\n  const { containerLeft, peekNextOnHover, peekPrevOnHover, resetPeek } = useContainerPeek(emblaApi, props.direction);\n\n  const height = useResponsiveProp(props.height);\n\n  const [numberingTopPos, setNumberingTopPos] = useState<number | undefined>();\n  const updateNumberingPosition = useCallback(() => {\n    if (emblaApi) {\n      const nodes = emblaApi.slideNodes();\n      const slideIndex = emblaApi.slidesInView().pop();\n      const slide = nodes[slideIndex];\n      if (slide) {\n        const picture = slide.getElementsByTagName('picture').item(0);\n        if (picture) {\n          const bottom = picture.getBoundingClientRect().bottom;\n          setNumberingTopPos(bottom - 62);\n        }\n      }\n    }\n  }, [emblaApi, setNumberingTopPos]);\n\n  useEffect(updateNumberingPosition, [updateNumberingPosition]);\n  useEffect(() => {\n    const e = () => updateNumberingPosition();\n    window.addEventListener('resize', e);\n    if (emblaApi) {\n      emblaApi.on('scroll', e);\n    }\n    return () => {\n      window.removeEventListener('resize', e);\n      if (emblaApi) {\n        emblaApi.off('scroll', e);\n      }\n    };\n  }, [updateNumberingPosition, emblaApi]);\n  return (\n    <GalleryContextProvider>\n      <Box\n        sx={{ overflow: 'hidden' }}\n        className=\"gallery\"\n        data-testid=\"GalleryCarousel\"\n        dir={props.direction}\n        data-state={emblaApi?.selectedScrollSnap()}\n      >\n        <Box sx={{ position: 'relative', height, maxHeight: height }}>\n          <ViewPort emblaRef={emblaRef}>\n            <ItemsContainer left={containerLeft}>{props.children}</ItemsContainer>\n            {props.controlOptions && (\n              <>\n                <NavButton\n                  direction={props.direction}\n                  emblaApi={emblaApi}\n                  type=\"prev\"\n                  onMouseEnter={peekPrevOnHover}\n                  onMouseLeave={resetPeek}\n                />\n                <NavButton\n                  direction={props.direction}\n                  emblaApi={emblaApi}\n                  type=\"next\"\n                  onMouseEnter={peekNextOnHover}\n                  onMouseLeave={resetPeek}\n                />\n              </>\n            )}\n          </ViewPort>\n\n          <Numbering\n            sx={{\n              top: numberingTopPos ? `${numberingTopPos}px` : 'inherit',\n              bottom: numberingTopPos ? 'inherit' : '24px',\n            }}\n            emblaApi={emblaApi}\n            separator={props.numberingSeparator}\n            color={NumberingColors.DARK}\n            size={NumberingSizes.LARGE}\n            direction={props.direction}\n          />\n        </Box>\n      </Box>\n    </GalleryContextProvider>\n  );\n};\n"],"names":["GalleryDefaultProps","align","height","controlOptions","color","buttonPosition","buttonAreaHeight","maxSlideWidth","isSlideDifferentWidth","cssClass","GalleryCarousel","inProps","galleryProps","Object","assign","props","useDefaultProps","emblaRef","emblaApi","useEmbla","containerLeft","peekNextOnHover","peekPrevOnHover","resetPeek","useContainerPeek","direction","useResponsiveProp","numberingTopPos","setNumberingTopPos","useState","updateNumberingPosition","useCallback","slide","slideNodes","slidesInView","pop","picture","getElementsByTagName","item","bottom","getBoundingClientRect","useEffect","e","window","addEventListener","on","removeEventListener","off","_jsx","GalleryContextProvider","children","Box","sx","overflow","className","dir","selectedScrollSnap","_jsxs","position","maxHeight","ViewPort","ItemsContainer","left","_Fragment","NavButton","type","onMouseEnter","onMouseLeave","Numbering","top","separator","numberingSeparator","NumberingColors","DARK","size","NumberingSizes","LARGE"],"mappings":"swBAcO,MAAMA,EAA+C,CAC1DC,MAAO,QACPC,OAAQ,OACRC,eAAgB,CACdC,MAAO,QACPC,eAAgB,MAChBC,iBAAkB,OAEpBC,cAAe,OACfC,uBAAuB,EACvBC,SAAU,mBAuDCC,EAAmDC,IAC9D,MAAMC,EAAYC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAQd,GAAwBW,GAC5CI,EAAQC,EAAgBJ,IAEvBK,EAAUC,GAAYC,EAASJ,IAChCK,cAAEA,EAAaC,gBAAEA,EAAeC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAiBN,EAAUH,EAAMU,WAElGvB,EAASwB,EAAkBX,EAAMb,SAEhCyB,EAAiBC,GAAsBC,IACxCC,EAA0BC,GAAY,KAC1C,GAAIb,EAAU,CACZ,MAEMc,EAFQd,EAASe,aACJf,EAASgB,eAAeC,OAE3C,GAAIH,EAAO,CACT,MAAMI,EAAUJ,EAAMK,qBAAqB,WAAWC,KAAK,GAC3D,GAAIF,EAAS,CACX,MAAMG,EAASH,EAAQI,wBAAwBD,OAC/CX,EAAmBW,EAAS,GAC9B,CACF,CACF,IACC,CAACrB,EAAUU,IAgBd,OAdAa,EAAUX,EAAyB,CAACA,IACpCW,GAAU,KACR,MAAMC,EAAI,IAAMZ,IAKhB,OAJAa,OAAOC,iBAAiB,SAAUF,GAC9BxB,GACFA,EAAS2B,GAAG,SAAUH,GAEjB,KACLC,OAAOG,oBAAoB,SAAUJ,GACjCxB,GACFA,EAAS6B,IAAI,SAAUL,EACzB,CACD,GACA,CAACZ,EAAyBZ,IAE3B8B,EAACC,EAAsB,CAAAC,SACrBF,EAACG,EAAG,CACFC,GAAI,CAAEC,SAAU,UAChBC,UAAU,UAAS,cACP,kBACZC,IAAKxC,EAAMU,UAAS,aACRP,eAAAA,EAAUsC,qBAAoBN,SAE1CO,EAACN,EAAG,CAACC,GAAI,CAAEM,SAAU,WAAYxD,SAAQyD,UAAWzD,GAAQgD,SAAA,CAC1DO,EAACG,EAAQ,CAAC3C,SAAUA,EAAQiC,SAAA,CAC1BF,EAACa,EAAc,CAACC,KAAM1C,EAAa8B,SAAGnC,EAAMmC,WAC3CnC,EAAMZ,gBACLsD,EAAAM,EAAA,CAAAb,SAAA,CACEF,EAACgB,EAAS,CACRvC,UAAWV,EAAMU,UACjBP,SAAUA,EACV+C,KAAK,OACLC,aAAc5C,EACd6C,aAAc5C,IAEhByB,EAACgB,EAAS,CACRvC,UAAWV,EAAMU,UACjBP,SAAUA,EACV+C,KAAK,OACLC,aAAc7C,EACd8C,aAAc5C,UAMtByB,EAACoB,EAAS,CACRhB,GAAI,CACFiB,IAAK1C,EAAkB,GAAGA,MAAsB,UAChDY,OAAQZ,EAAkB,UAAY,QAExCT,SAAUA,EACVoD,UAAWvD,EAAMwD,mBACjBnE,MAAOoE,EAAgBC,KACvBC,KAAMC,EAAeC,MACrBnD,UAAWV,EAAMU,kBAIA"}
+{"version":3,"file":"galleryCarousel.js","sources":["../../../../src/organisms/carousel2/galleryCarousel/galleryCarousel.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { Carousel2Props } from '../carousel2';\nimport { useDefaultProps } from '../hooks/useDefaultProps';\nimport { useEmbla } from '../hooks/useEmbla';\nimport { NumberingColors, NumberingSizes } from '../../../utils/enum';\nimport { Box } from '@mui/material';\nimport { ItemsContainer } from '../components/ItemsContainer';\nimport { ViewPort } from '../components/ViewPort';\nimport { NavButton } from '../components/NavButton';\nimport { Numbering } from '../components/Numbering';\nimport { useContainerPeek } from '../hooks/useContainerPeek';\nimport { ResponsiveType, useResponsiveProp } from '../../../utils/ResponsiveType';\nimport { GalleryContextProvider } from './galleryContext';\n\nexport const GalleryDefaultProps: Partial<Carousel2Props> = {\n  align: 'start',\n  height: '100%',\n  controlOptions: {\n    color: 'light',\n    buttonPosition: '30%',\n    buttonAreaHeight: '30%',\n  },\n  maxSlideWidth: '100%',\n  isSlideDifferentWidth: true,\n  cssClass: 'gallery-variant',\n};\n\nexport type GalleryCarouselProps = {\n  /**\n   * Enables autoplay functionality, which can be used to automatically trigger slide changes after certain delay.\n   * @default false\n   */\n  autoPlay?: boolean;\n  /**\n   * Delay in ms between automatic slides\n   * @default 4000\n   */\n  autoPlayDelay?: number;\n  /**\n   * Adjust slide speed when using buttons to change Slide. Higher numbers enables faster scrolling. Values between `1`-`20` are recommended.\n   * @default 10\n   */\n  speed?: number;\n  /**\n   * Direction of content.\n   * @default ltr\n   */\n  direction?: 'rtl' | 'ltr';\n  /**\n   * Enables loop functionality, which can be used to continuously loop through all slides.\n   * @default false\n   */\n  loop?: boolean;\n  /**\n   * Separator of numbering component.\n   * @default /\n   */\n  numberingSeparator?: string;\n  /**\n   * Carousel slides. Any ReactNode can be used here, however `GalleryCarouselItem` component is suggested.\n   * @requires\n   */\n  children: React.ReactNode;\n  /**\n   * Index of Slide that is active by default.\n   * @default 0\n   */\n  startIndex?: number;\n\n  /**\n   * Optional height of carousel, this prop is added to height style property\n   * @default undefined\n   */\n  height?: ResponsiveType<string>;\n};\n\n/**\n * @deprecated use Carousel instead\n */\nexport const GalleryCarousel: React.FC<GalleryCarouselProps> = (inProps) => {\n  const galleryProps = { ...GalleryDefaultProps, ...inProps };\n  const props = useDefaultProps(galleryProps);\n\n  const [emblaRef, emblaApi] = useEmbla(props);\n  const { containerLeft, peekNextOnHover, peekPrevOnHover, resetPeek } = useContainerPeek(emblaApi, props.direction);\n\n  const height = useResponsiveProp(props.height);\n\n  const [numberingTopPos, setNumberingTopPos] = useState<number | undefined>();\n  const updateNumberingPosition = useCallback(() => {\n    if (emblaApi) {\n      const nodes = emblaApi.slideNodes();\n      const slideIndex = emblaApi.slidesInView().pop();\n      const slide = nodes[slideIndex];\n      if (slide) {\n        const picture = slide.getElementsByTagName('picture').item(0);\n        if (picture) {\n          const bottom = picture.getBoundingClientRect().bottom;\n          setNumberingTopPos(bottom - 62);\n        }\n      }\n    }\n  }, [emblaApi, setNumberingTopPos]);\n\n  useEffect(updateNumberingPosition, [updateNumberingPosition]);\n  useEffect(() => {\n    const e = () => updateNumberingPosition();\n    window.addEventListener('resize', e);\n    if (emblaApi) {\n      emblaApi.on('scroll', e);\n    }\n    return () => {\n      window.removeEventListener('resize', e);\n      if (emblaApi) {\n        emblaApi.off('scroll', e);\n      }\n    };\n  }, [updateNumberingPosition, emblaApi]);\n  return (\n    <GalleryContextProvider>\n      <Box\n        sx={{ overflow: 'hidden' }}\n        className=\"gallery\"\n        data-testid=\"GalleryCarousel\"\n        dir={props.direction}\n        data-state={emblaApi?.selectedScrollSnap()}\n      >\n        <Box sx={{ position: 'relative', height, maxHeight: height }}>\n          <ViewPort emblaRef={emblaRef}>\n            <ItemsContainer left={containerLeft}>{props.children}</ItemsContainer>\n            {props.controlOptions && (\n              <>\n                <NavButton\n                  direction={props.direction}\n                  emblaApi={emblaApi}\n                  type=\"prev\"\n                  onMouseEnter={peekPrevOnHover}\n                  onMouseLeave={resetPeek}\n                />\n                <NavButton\n                  direction={props.direction}\n                  emblaApi={emblaApi}\n                  type=\"next\"\n                  onMouseEnter={peekNextOnHover}\n                  onMouseLeave={resetPeek}\n                />\n              </>\n            )}\n          </ViewPort>\n\n          <Numbering\n            sx={{\n              top: numberingTopPos ? `${numberingTopPos}px` : 'inherit',\n              bottom: numberingTopPos ? 'inherit' : '24px',\n            }}\n            emblaApi={emblaApi}\n            separator={props.numberingSeparator}\n            color={NumberingColors.DARK}\n            size={NumberingSizes.LARGE}\n            direction={props.direction}\n          />\n        </Box>\n      </Box>\n    </GalleryContextProvider>\n  );\n};\n"],"names":["GalleryDefaultProps","align","height","controlOptions","color","buttonPosition","buttonAreaHeight","maxSlideWidth","isSlideDifferentWidth","cssClass","GalleryCarousel","inProps","galleryProps","Object","assign","props","useDefaultProps","emblaRef","emblaApi","useEmbla","containerLeft","peekNextOnHover","peekPrevOnHover","resetPeek","useContainerPeek","direction","useResponsiveProp","numberingTopPos","setNumberingTopPos","useState","updateNumberingPosition","useCallback","slide","slideNodes","slidesInView","pop","picture","getElementsByTagName","item","bottom","getBoundingClientRect","useEffect","e","window","addEventListener","on","removeEventListener","off","_jsx","GalleryContextProvider","children","Box","sx","overflow","className","dir","selectedScrollSnap","_jsxs","position","maxHeight","ViewPort","ItemsContainer","left","_Fragment","NavButton","type","onMouseEnter","onMouseLeave","Numbering","top","separator","numberingSeparator","NumberingColors","DARK","size","NumberingSizes","LARGE"],"mappings":"swBAcO,MAAMA,EAA+C,CAC1DC,MAAO,QACPC,OAAQ,OACRC,eAAgB,CACdC,MAAO,QACPC,eAAgB,MAChBC,iBAAkB,OAEpBC,cAAe,OACfC,uBAAuB,EACvBC,SAAU,mBAuDCC,EAAmDC,IAC9D,MAAMC,EAAYC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAQd,GAAwBW,GAC5CI,EAAQC,EAAgBJ,IAEvBK,EAAUC,GAAYC,EAASJ,IAChCK,cAAEA,EAAaC,gBAAEA,EAAeC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAiBN,EAAUH,EAAMU,WAElGvB,EAASwB,EAAkBX,EAAMb,SAEhCyB,EAAiBC,GAAsBC,IACxCC,EAA0BC,EAAY,KAC1C,GAAIb,EAAU,CACZ,MAEMc,EAFQd,EAASe,aACJf,EAASgB,eAAeC,OAE3C,GAAIH,EAAO,CACT,MAAMI,EAAUJ,EAAMK,qBAAqB,WAAWC,KAAK,GAC3D,GAAIF,EAAS,CACX,MAAMG,EAASH,EAAQI,wBAAwBD,OAC/CX,EAAmBW,EAAS,GAC9B,CACF,CACF,GACC,CAACrB,EAAUU,IAgBd,OAdAa,EAAUX,EAAyB,CAACA,IACpCW,EAAU,KACR,MAAMC,EAAI,IAAMZ,IAKhB,OAJAa,OAAOC,iBAAiB,SAAUF,GAC9BxB,GACFA,EAAS2B,GAAG,SAAUH,GAEjB,KACLC,OAAOG,oBAAoB,SAAUJ,GACjCxB,GACFA,EAAS6B,IAAI,SAAUL,KAG1B,CAACZ,EAAyBZ,IAE3B8B,EAACC,EAAsB,CAAAC,SACrBF,EAACG,EAAG,CACFC,GAAI,CAAEC,SAAU,UAChBC,UAAU,UAAS,cACP,kBACZC,IAAKxC,EAAMU,UAAS,aACRP,eAAAA,EAAUsC,qBAAoBN,SAE1CO,EAACN,EAAG,CAACC,GAAI,CAAEM,SAAU,WAAYxD,SAAQyD,UAAWzD,GAAQgD,SAAA,CAC1DO,EAACG,EAAQ,CAAC3C,SAAUA,EAAQiC,SAAA,CAC1BF,EAACa,EAAc,CAACC,KAAM1C,EAAa8B,SAAGnC,EAAMmC,WAC3CnC,EAAMZ,gBACLsD,EAAAM,EAAA,CAAAb,SAAA,CACEF,EAACgB,EAAS,CACRvC,UAAWV,EAAMU,UACjBP,SAAUA,EACV+C,KAAK,OACLC,aAAc5C,EACd6C,aAAc5C,IAEhByB,EAACgB,EAAS,CACRvC,UAAWV,EAAMU,UACjBP,SAAUA,EACV+C,KAAK,OACLC,aAAc7C,EACd8C,aAAc5C,UAMtByB,EAACoB,EAAS,CACRhB,GAAI,CACFiB,IAAK1C,EAAkB,GAAGA,MAAsB,UAChDY,OAAQZ,EAAkB,UAAY,QAExCT,SAAUA,EACVoD,UAAWvD,EAAMwD,mBACjBnE,MAAOoE,EAAgBC,KACvBC,KAAMC,EAAeC,MACrBnD,UAAWV,EAAMU"}

package/organisms/carousel2/galleryCarousel/galleryCarouselItem.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as t,useRef as r,useCallback as o,useEffect as n}from"react";import{useResponsiveProp as l}from"../../../utils/ResponsiveType.js";import{GalleryItemContext as s}from"./galleryItemContext.js";import{useTheme as d,useMediaQuery as a,Box as c,Stack as m}from"@mui/material";const p=p=>{var h,g,x,v;const b=d(),f=l(p.imageSrc),w=l(p.imageFit),[k,y]=t("inherit"),S=r(null),$=r(null),j=r(null),z=a((e=>e.breakpoints.only("sm"))),I=a((e=>e.breakpoints.only("xs"))),H=o((()=>{var e,i,t,r,o;if(z||I){const n=(null!==(e=j.current.clientHeight)&&void 0!==e?e:0)-((null!==(t=null===(i=S.current)||void 0===i?void 0:i.clientHeight)&&void 0!==t?t:0)+(null!==(o=null===(r=$.current)||void 0===r?void 0:r.clientHeight)&&void 0!==o?o:0));y(`${n<0?0:n}px`)}else y("inherit")}),[z,I,y]);return n(H,[H]),n((()=>{const e=()=>H();return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[H]),e(s.Provider,{value:{color:null!==(h=p.color)&&void 0!==h?h:"dark"},children:e(c,{sx:{flexBasis:null!==(g=p.width)&&void 0!==g?g:"100%",maxWidth:null!==(x=p.width)&&void 0!==x?x:"100%"},"data-testid":"Carousel.slide",children:i(c,{ref:j,sx:{position:"relative",width:null!==(v=p.width)&&void 0!==v?v:"100%",height:"100%"},children:[p.header&&e(m,{ref:S,direction:"column",spacing:2,sx:{position:{sm:"static",md:"absolute"},padding:"24px",zIndex:2,top:0,right:0,left:0},children:p.header}),i(c,{component:"picture",sx:Object.assign({display:"flex",position:"relative",height:k},u),children:[e("source",{media:`(min-width: ${b.breakpoints.values.xl}px)`,srcSet:f.xl}),e("source",{media:`(min-width: ${b.breakpoints.values.lg}px)`,srcSet:f.lg}),e("source",{media:`(min-width: ${b.breakpoints.values.md}px)`,srcSet:f.md}),e("source",{media:`(min-width: ${b.breakpoints.values.sm}px)`,srcSet:f.sm}),e("source",{media:`(max-width: ${b.breakpoints.values.sm}px)`,srcSet:f.xs}),e(c,{component:"img",sx:{height:"100%",width:"100%",objectFit:null!=w?w:"cover"},src:f.xs,alt:p.alt})]}),p.footer&&e(m,{ref:$,direction:"column",spacing:2,sx:{position:{sm:"static",md:"absolute"},paddingRight:{md:"150px"},padding:"24px",zIndex:1,bottom:0,right:0,left:0},children:p.footer})]})})})},u={"&::before, &::after":{content:"''",display:"block",zIndex:1,position:"absolute",left:0,right:0,height:"30%"},"::before":{top:"0",background:"linear-gradient(0deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)"},"::after":{bottom:"0",background:"linear-gradient(180deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)"}};export{p as GalleryCarouselItem};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as t,useRef as r,useCallback as o,useEffect as n}from"react";import{useResponsiveProp as l}from"../../../utils/ResponsiveType.js";import{GalleryItemContext as s}from"./galleryItemContext.js";import{useTheme as d,useMediaQuery as a,Box as c,Stack as m}from"@mui/material";const p=p=>{var h,g,x,v;const b=d(),f=l(p.imageSrc),w=l(p.imageFit),[k,y]=t("inherit"),S=r(null),$=r(null),j=r(null),z=a(e=>e.breakpoints.only("sm")),I=a(e=>e.breakpoints.only("xs")),H=o(()=>{var e,i,t,r,o;if(z||I){const n=(null!==(e=j.current.clientHeight)&&void 0!==e?e:0)-((null!==(t=null===(i=S.current)||void 0===i?void 0:i.clientHeight)&&void 0!==t?t:0)+(null!==(o=null===(r=$.current)||void 0===r?void 0:r.clientHeight)&&void 0!==o?o:0));y(`${n<0?0:n}px`)}else y("inherit")},[z,I,y]);return n(H,[H]),n(()=>{const e=()=>H();return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[H]),e(s.Provider,{value:{color:null!==(h=p.color)&&void 0!==h?h:"dark"},children:e(c,{sx:{flexBasis:null!==(g=p.width)&&void 0!==g?g:"100%",maxWidth:null!==(x=p.width)&&void 0!==x?x:"100%"},"data-testid":"Carousel.slide",children:i(c,{ref:j,sx:{position:"relative",width:null!==(v=p.width)&&void 0!==v?v:"100%",height:"100%"},children:[p.header&&e(m,{ref:S,direction:"column",spacing:2,sx:{position:{sm:"static",md:"absolute"},padding:"24px",zIndex:2,top:0,right:0,left:0},children:p.header}),i(c,{component:"picture",sx:Object.assign({display:"flex",position:"relative",height:k},u),children:[e("source",{media:`(min-width: ${b.breakpoints.values.xl}px)`,srcSet:f.xl}),e("source",{media:`(min-width: ${b.breakpoints.values.lg}px)`,srcSet:f.lg}),e("source",{media:`(min-width: ${b.breakpoints.values.md}px)`,srcSet:f.md}),e("source",{media:`(min-width: ${b.breakpoints.values.sm}px)`,srcSet:f.sm}),e("source",{media:`(max-width: ${b.breakpoints.values.sm}px)`,srcSet:f.xs}),e(c,{component:"img",sx:{height:"100%",width:"100%",objectFit:null!=w?w:"cover"},src:f.xs,alt:p.alt})]}),p.footer&&e(m,{ref:$,direction:"column",spacing:2,sx:{position:{sm:"static",md:"absolute"},paddingRight:{md:"150px"},padding:"24px",zIndex:1,bottom:0,right:0,left:0},children:p.footer})]})})})},u={"&::before, &::after":{content:"''",display:"block",zIndex:1,position:"absolute",left:0,right:0,height:"30%"},"::before":{top:"0",background:"linear-gradient(0deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)"},"::after":{bottom:"0",background:"linear-gradient(180deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)"}};export{p as GalleryCarouselItem};
 //# sourceMappingURL=galleryCarouselItem.js.map

package/organisms/carousel2/galleryCarousel/galleryCarouselItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"galleryCarouselItem.js","sources":["../../../../src/organisms/carousel2/galleryCarousel/galleryCarouselItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { ResponsiveType, useResponsiveProp } from '../../../utils/ResponsiveType';\nimport { GalleryItemContext } from './galleryItemContext';\nimport { Box, useTheme, Stack, Theme, useMediaQuery } from '@mui/material';\n\ntype FitType = 'contain' | 'cover' | 'fill' | 'scale-down' | 'none';\n\nexport type GalleryCarouselItemProps = {\n  /**\n   * Link to image that should be displayed. This property can be responsive.\n   * @requires\n   * @example\n   * ```tsx\n   * <GalleryCarouselItem imageSrc=\"../image.png\"/>\n   * <GalleryCarouselItem imageSrc={{\n   *    xs: \"../xs-image.png\",\n   *    sm: \"../sm-image.png\",\n   *    md: \"../md-image.png\",\n   *    lg: \"../lg-image.png\",\n   *    xl: \"../xl-image.png\"\n   * }}/>\n   * ```\n   */\n  imageSrc: ResponsiveType<string>;\n  /**\n   * Css `object-fit` property\n   * @default cover\n   * @example\n   * ```tsx\n   * <GalleryCarouselItem imageFit=\"contain\"/>\n   * <GalleryCarouselItem imageFit={{\n   *    xs: \"contain\",\n   *    sm: \"cover\",\n   *    md: \"fill\",\n   *    lg: \"contain\",\n   *    xl: \"cover\"\n   * }}/>\n   * ```\n   */\n  imageFit?: ResponsiveType<FitType>;\n  /**\n   * Alternative text of image.\n   */\n  alt?: string;\n  /**\n   * Header content of an Slide. This can be any ReactNode, however `GalleryItemHeading` component is recommended.\n   */\n  header?: React.ReactNode;\n  /**\n   * Footer content of an Slide. This can be any ReactNode, however `GalleryItemFooter` component is recommended.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Width of an slide\n   * @example\n   * ```tsx\n   * <GalleryCarouselItem width=\"200px\"/>\n   * ```\n   */\n  width?: string;\n  /**\n   * Color that `header` and `footer` should have when overlapping rendered image.\n   * @default dark\n   */\n  color?: 'dark' | 'light';\n};\n\nexport const GalleryCarouselItem: React.FC<GalleryCarouselItemProps> = (props) => {\n  const theme = useTheme();\n\n  const imageSrc = useResponsiveProp(props.imageSrc);\n  const imageFit = useResponsiveProp(props.imageFit);\n\n  const [pictureHeight, setPictureHeight] = useState<string>('inherit');\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const isSm = useMediaQuery<Theme>((themeA) => themeA.breakpoints.only('sm'));\n  const isXs = useMediaQuery<Theme>((themeA) => themeA.breakpoints.only('xs'));\n\n  const updatePictureHeight = useCallback(() => {\n    if (isSm || isXs) {\n      const containerHeight = containerRef.current.clientHeight ?? 0;\n      const headerHeight = headerRef.current?.clientHeight ?? 0;\n      const footerHeight = footerRef.current?.clientHeight ?? 0;\n      const h = containerHeight - (headerHeight + footerHeight);\n      setPictureHeight(`${h < 0 ? 0 : h}px`);\n    } else {\n      setPictureHeight('inherit');\n    }\n  }, [isSm, isXs, setPictureHeight]);\n\n  useEffect(updatePictureHeight, [updatePictureHeight]);\n\n  useEffect(() => {\n    const e = () => updatePictureHeight();\n    window.addEventListener('resize', e);\n    return () => window.removeEventListener('resize', e);\n  }, [updatePictureHeight]);\n\n  return (\n    <GalleryItemContext.Provider value={{ color: props.color ?? 'dark' }}>\n      <Box\n        sx={{\n          flexBasis: props.width ?? '100%',\n          maxWidth: props.width ?? '100%',\n        }}\n        data-testid=\"Carousel.slide\"\n      >\n        <Box\n          ref={containerRef}\n          sx={{\n            position: 'relative',\n            width: props.width ?? '100%',\n            height: '100%',\n          }}\n        >\n          {props.header && (\n            <Stack\n              ref={headerRef}\n              direction=\"column\"\n              spacing={2}\n              sx={{\n                position: { sm: 'static', md: 'absolute' },\n                padding: '24px',\n                zIndex: 2,\n                top: 0,\n                right: 0,\n                left: 0,\n              }}\n            >\n              {props.header}\n            </Stack>\n          )}\n\n          <Box\n            component=\"picture\"\n            sx={{\n              display: 'flex',\n              position: 'relative',\n              height: pictureHeight,\n              ...shadowStyle,\n            }}\n          >\n            <source media={`(min-width: ${theme.breakpoints.values.xl}px)`} srcSet={imageSrc.xl} />\n            <source media={`(min-width: ${theme.breakpoints.values.lg}px)`} srcSet={imageSrc.lg} />\n            <source media={`(min-width: ${theme.breakpoints.values.md}px)`} srcSet={imageSrc.md} />\n            <source media={`(min-width: ${theme.breakpoints.values.sm}px)`} srcSet={imageSrc.sm} />\n            <source media={`(max-width: ${theme.breakpoints.values.sm}px)`} srcSet={imageSrc.xs} />\n            <Box\n              component=\"img\"\n              sx={{\n                height: '100%',\n                width: '100%',\n                objectFit: imageFit ?? 'cover',\n              }}\n              src={imageSrc.xs}\n              alt={props.alt}\n            />\n          </Box>\n\n          {props.footer && (\n            <Stack\n              ref={footerRef}\n              direction=\"column\"\n              spacing={2}\n              sx={{\n                position: { sm: 'static', md: 'absolute' },\n                paddingRight: { md: '150px' },\n                padding: '24px',\n                zIndex: 1,\n                bottom: 0,\n                right: 0,\n                left: 0,\n              }}\n            >\n              {props.footer}\n            </Stack>\n          )}\n        </Box>\n      </Box>\n    </GalleryItemContext.Provider>\n  );\n};\n\nconst shadowStyle = {\n  '&::before, &::after': {\n    content: \"''\",\n    display: 'block',\n    zIndex: 1,\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    height: '30%',\n  },\n  '::before': {\n    top: '0',\n    background: 'linear-gradient(0deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)',\n  },\n  '::after': {\n    bottom: '0',\n    background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)',\n  },\n};\n"],"names":["GalleryCarouselItem","props","theme","useTheme","imageSrc","useResponsiveProp","imageFit","pictureHeight","setPictureHeight","useState","headerRef","useRef","footerRef","containerRef","isSm","useMediaQuery","themeA","breakpoints","only","isXs","updatePictureHeight","useCallback","h","_a","current","clientHeight","_c","_b","_e","_d","useEffect","e","window","addEventListener","removeEventListener","_jsx","GalleryItemContext","Provider","value","color","Box","sx","flexBasis","width","maxWidth","children","_jsxs","ref","position","height","header","Stack","direction","spacing","sm","md","padding","zIndex","top","right","left","component","Object","assign","display","shadowStyle","media","values","xl","srcSet","lg","xs","objectFit","src","alt","footer","paddingRight","bottom","content","background"],"mappings":"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"}
+{"version":3,"file":"galleryCarouselItem.js","sources":["../../../../src/organisms/carousel2/galleryCarousel/galleryCarouselItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { ResponsiveType, useResponsiveProp } from '../../../utils/ResponsiveType';\nimport { GalleryItemContext } from './galleryItemContext';\nimport { Box, useTheme, Stack, Theme, useMediaQuery } from '@mui/material';\n\ntype FitType = 'contain' | 'cover' | 'fill' | 'scale-down' | 'none';\n\nexport type GalleryCarouselItemProps = {\n  /**\n   * Link to image that should be displayed. This property can be responsive.\n   * @requires\n   * @example\n   * ```tsx\n   * <GalleryCarouselItem imageSrc=\"../image.png\"/>\n   * <GalleryCarouselItem imageSrc={{\n   *    xs: \"../xs-image.png\",\n   *    sm: \"../sm-image.png\",\n   *    md: \"../md-image.png\",\n   *    lg: \"../lg-image.png\",\n   *    xl: \"../xl-image.png\"\n   * }}/>\n   * ```\n   */\n  imageSrc: ResponsiveType<string>;\n  /**\n   * Css `object-fit` property\n   * @default cover\n   * @example\n   * ```tsx\n   * <GalleryCarouselItem imageFit=\"contain\"/>\n   * <GalleryCarouselItem imageFit={{\n   *    xs: \"contain\",\n   *    sm: \"cover\",\n   *    md: \"fill\",\n   *    lg: \"contain\",\n   *    xl: \"cover\"\n   * }}/>\n   * ```\n   */\n  imageFit?: ResponsiveType<FitType>;\n  /**\n   * Alternative text of image.\n   */\n  alt?: string;\n  /**\n   * Header content of an Slide. This can be any ReactNode, however `GalleryItemHeading` component is recommended.\n   */\n  header?: React.ReactNode;\n  /**\n   * Footer content of an Slide. This can be any ReactNode, however `GalleryItemFooter` component is recommended.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Width of an slide\n   * @example\n   * ```tsx\n   * <GalleryCarouselItem width=\"200px\"/>\n   * ```\n   */\n  width?: string;\n  /**\n   * Color that `header` and `footer` should have when overlapping rendered image.\n   * @default dark\n   */\n  color?: 'dark' | 'light';\n};\n\nexport const GalleryCarouselItem: React.FC<GalleryCarouselItemProps> = (props) => {\n  const theme = useTheme();\n\n  const imageSrc = useResponsiveProp(props.imageSrc);\n  const imageFit = useResponsiveProp(props.imageFit);\n\n  const [pictureHeight, setPictureHeight] = useState<string>('inherit');\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const isSm = useMediaQuery<Theme>((themeA) => themeA.breakpoints.only('sm'));\n  const isXs = useMediaQuery<Theme>((themeA) => themeA.breakpoints.only('xs'));\n\n  const updatePictureHeight = useCallback(() => {\n    if (isSm || isXs) {\n      const containerHeight = containerRef.current.clientHeight ?? 0;\n      const headerHeight = headerRef.current?.clientHeight ?? 0;\n      const footerHeight = footerRef.current?.clientHeight ?? 0;\n      const h = containerHeight - (headerHeight + footerHeight);\n      setPictureHeight(`${h < 0 ? 0 : h}px`);\n    } else {\n      setPictureHeight('inherit');\n    }\n  }, [isSm, isXs, setPictureHeight]);\n\n  useEffect(updatePictureHeight, [updatePictureHeight]);\n\n  useEffect(() => {\n    const e = () => updatePictureHeight();\n    window.addEventListener('resize', e);\n    return () => window.removeEventListener('resize', e);\n  }, [updatePictureHeight]);\n\n  return (\n    <GalleryItemContext.Provider value={{ color: props.color ?? 'dark' }}>\n      <Box\n        sx={{\n          flexBasis: props.width ?? '100%',\n          maxWidth: props.width ?? '100%',\n        }}\n        data-testid=\"Carousel.slide\"\n      >\n        <Box\n          ref={containerRef}\n          sx={{\n            position: 'relative',\n            width: props.width ?? '100%',\n            height: '100%',\n          }}\n        >\n          {props.header && (\n            <Stack\n              ref={headerRef}\n              direction=\"column\"\n              spacing={2}\n              sx={{\n                position: { sm: 'static', md: 'absolute' },\n                padding: '24px',\n                zIndex: 2,\n                top: 0,\n                right: 0,\n                left: 0,\n              }}\n            >\n              {props.header}\n            </Stack>\n          )}\n\n          <Box\n            component=\"picture\"\n            sx={{\n              display: 'flex',\n              position: 'relative',\n              height: pictureHeight,\n              ...shadowStyle,\n            }}\n          >\n            <source media={`(min-width: ${theme.breakpoints.values.xl}px)`} srcSet={imageSrc.xl} />\n            <source media={`(min-width: ${theme.breakpoints.values.lg}px)`} srcSet={imageSrc.lg} />\n            <source media={`(min-width: ${theme.breakpoints.values.md}px)`} srcSet={imageSrc.md} />\n            <source media={`(min-width: ${theme.breakpoints.values.sm}px)`} srcSet={imageSrc.sm} />\n            <source media={`(max-width: ${theme.breakpoints.values.sm}px)`} srcSet={imageSrc.xs} />\n            <Box\n              component=\"img\"\n              sx={{\n                height: '100%',\n                width: '100%',\n                objectFit: imageFit ?? 'cover',\n              }}\n              src={imageSrc.xs}\n              alt={props.alt}\n            />\n          </Box>\n\n          {props.footer && (\n            <Stack\n              ref={footerRef}\n              direction=\"column\"\n              spacing={2}\n              sx={{\n                position: { sm: 'static', md: 'absolute' },\n                paddingRight: { md: '150px' },\n                padding: '24px',\n                zIndex: 1,\n                bottom: 0,\n                right: 0,\n                left: 0,\n              }}\n            >\n              {props.footer}\n            </Stack>\n          )}\n        </Box>\n      </Box>\n    </GalleryItemContext.Provider>\n  );\n};\n\nconst shadowStyle = {\n  '&::before, &::after': {\n    content: \"''\",\n    display: 'block',\n    zIndex: 1,\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    height: '30%',\n  },\n  '::before': {\n    top: '0',\n    background: 'linear-gradient(0deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)',\n  },\n  '::after': {\n    bottom: '0',\n    background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)',\n  },\n};\n"],"names":["GalleryCarouselItem","props","theme","useTheme","imageSrc","useResponsiveProp","imageFit","pictureHeight","setPictureHeight","useState","headerRef","useRef","footerRef","containerRef","isSm","useMediaQuery","themeA","breakpoints","only","isXs","updatePictureHeight","useCallback","h","_a","current","clientHeight","_c","_b","_e","_d","useEffect","e","window","addEventListener","removeEventListener","_jsx","GalleryItemContext","Provider","value","color","Box","sx","flexBasis","width","maxWidth","children","_jsxs","ref","position","height","header","Stack","direction","spacing","sm","md","padding","zIndex","top","right","left","component","Object","assign","display","shadowStyle","media","values","xl","srcSet","lg","xs","objectFit","src","alt","footer","paddingRight","bottom","content","background"],"mappings":"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"}

package/organisms/carousel2/galleryCarousel/galleryContext.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{createContext as r,useState as t,useMemo as o}from"react";const i=r({headerHeight:0,footerHeight:0,setHeaderHeight:()=>{},setFooterHeight:()=>{},color:"dark",setColor:()=>{}}),h=({children:r})=>{const[h,H]=t(0),[a,d]=t(0),s=o((()=>({headerHeight:h,setHeaderHeight:H,footerHeight:a,setFooterHeight:d,color:"dark",setColor:()=>{}})),[h,H,a,d]);return e(i.Provider,{value:s,children:r})};export{i as GalleryContext,h as GalleryContextProvider};
+import{jsx as e}from"react/jsx-runtime";import{createContext as r,useState as t,useMemo as o}from"react";const i=r({headerHeight:0,footerHeight:0,setHeaderHeight:()=>{},setFooterHeight:()=>{},color:"dark",setColor:()=>{}}),h=({children:r})=>{const[h,H]=t(0),[a,d]=t(0),s=o(()=>({headerHeight:h,setHeaderHeight:H,footerHeight:a,setFooterHeight:d,color:"dark",setColor:()=>{}}),[h,H,a,d]);return e(i.Provider,{value:s,children:r})};export{i as GalleryContext,h as GalleryContextProvider};
 //# sourceMappingURL=galleryContext.js.map

package/organisms/carousel2/galleryCarousel/galleryContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"galleryContext.js","sources":["../../../../src/organisms/carousel2/galleryCarousel/galleryContext.tsx"],"sourcesContent":["import React, { useState, createContext, useMemo } from 'react';\n\nexport type GalleryContextType = {\n  /**\n   * this value contains height of largest header element, it is used in xs gallery\n   */\n  headerHeight: number;\n  setHeaderHeight: (v: number) => void;\n  /**\n   * this value contains height of largest footer element, it is used in xs gallery\n   */\n  footerHeight: number;\n  setFooterHeight: (v: number) => void;\n\n  /** contains color scheme for current slide */\n  color: 'dark' | 'light';\n  setColor: (c: 'dark' | 'light') => void;\n};\n\nexport const GalleryContext = createContext<GalleryContextType>({\n  headerHeight: 0,\n  footerHeight: 0,\n  setHeaderHeight: () => {},\n  setFooterHeight: () => {},\n  color: 'dark',\n  setColor: () => {},\n});\n\nexport type GalleryContextProviderProps = {\n  children: React.ReactNode;\n};\n\nexport const GalleryContextProvider: React.FC<GalleryContextProviderProps> = ({ children }) => {\n  const [headerHeight, setHeaderHeight] = useState<number>(0);\n  const [footerHeight, setFooterHeight] = useState<number>(0);\n\n  const ctxValue = useMemo<GalleryContextType>(\n    () => ({\n      headerHeight,\n      setHeaderHeight,\n      footerHeight,\n      setFooterHeight,\n      color: 'dark',\n      setColor: () => {},\n    }),\n    [headerHeight, setHeaderHeight, footerHeight, setFooterHeight],\n  );\n\n  return <GalleryContext.Provider value={ctxValue}>{children}</GalleryContext.Provider>;\n};\n"],"names":["GalleryContext","createContext","headerHeight","footerHeight","setHeaderHeight","setFooterHeight","color","setColor","GalleryContextProvider","children","useState","ctxValue","useMemo","_jsx","Provider","value"],"mappings":"yGAmBO,MAAMA,EAAiBC,EAAkC,CAC9DC,aAAc,EACdC,aAAc,EACdC,gBAAiB,OACjBC,gBAAiB,OACjBC,MAAO,OACPC,SAAU,SAOCC,EAAgE,EAAGC,eAC9E,MAAOP,EAAcE,GAAmBM,EAAiB,IAClDP,EAAcE,GAAmBK,EAAiB,GAEnDC,EAAWC,GACf,KAAA,CACEV,eACAE,kBACAD,eACAE,kBACAC,MAAO,OACPC,SAAU,UAEZ,CAACL,EAAcE,EAAiBD,EAAcE,IAGhD,OAAOQ,EAACb,EAAec,SAAQ,CAACC,MAAOJ,EAAQF,SAAGA,GAAmC"}
+{"version":3,"file":"galleryContext.js","sources":["../../../../src/organisms/carousel2/galleryCarousel/galleryContext.tsx"],"sourcesContent":["import React, { useState, createContext, useMemo } from 'react';\n\nexport type GalleryContextType = {\n  /**\n   * this value contains height of largest header element, it is used in xs gallery\n   */\n  headerHeight: number;\n  setHeaderHeight: (v: number) => void;\n  /**\n   * this value contains height of largest footer element, it is used in xs gallery\n   */\n  footerHeight: number;\n  setFooterHeight: (v: number) => void;\n\n  /** contains color scheme for current slide */\n  color: 'dark' | 'light';\n  setColor: (c: 'dark' | 'light') => void;\n};\n\nexport const GalleryContext = createContext<GalleryContextType>({\n  headerHeight: 0,\n  footerHeight: 0,\n  setHeaderHeight: () => {},\n  setFooterHeight: () => {},\n  color: 'dark',\n  setColor: () => {},\n});\n\nexport type GalleryContextProviderProps = {\n  children: React.ReactNode;\n};\n\nexport const GalleryContextProvider: React.FC<GalleryContextProviderProps> = ({ children }) => {\n  const [headerHeight, setHeaderHeight] = useState<number>(0);\n  const [footerHeight, setFooterHeight] = useState<number>(0);\n\n  const ctxValue = useMemo<GalleryContextType>(\n    () => ({\n      headerHeight,\n      setHeaderHeight,\n      footerHeight,\n      setFooterHeight,\n      color: 'dark',\n      setColor: () => {},\n    }),\n    [headerHeight, setHeaderHeight, footerHeight, setFooterHeight],\n  );\n\n  return <GalleryContext.Provider value={ctxValue}>{children}</GalleryContext.Provider>;\n};\n"],"names":["GalleryContext","createContext","headerHeight","footerHeight","setHeaderHeight","setFooterHeight","color","setColor","GalleryContextProvider","children","useState","ctxValue","useMemo","_jsx","Provider","value"],"mappings":"yGAmBO,MAAMA,EAAiBC,EAAkC,CAC9DC,aAAc,EACdC,aAAc,EACdC,gBAAiB,OACjBC,gBAAiB,OACjBC,MAAO,OACPC,SAAU,SAOCC,EAAgE,EAAGC,eAC9E,MAAOP,EAAcE,GAAmBM,EAAiB,IAClDP,EAAcE,GAAmBK,EAAiB,GAEnDC,EAAWC,EACf,KAAA,CACEV,eACAE,kBACAD,eACAE,kBACAC,MAAO,OACPC,SAAU,SAEZ,CAACL,EAAcE,EAAiBD,EAAcE,IAGhD,OAAOQ,EAACb,EAAec,SAAQ,CAACC,MAAOJ,EAAQF,SAAGA"}

package/organisms/carousel2/galleryCarousel/galleryItemHeading.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{useMediaQuery as t,Typography as o}from"@mui/material";import{useContext as e,useMemo as i}from"react";import{GalleryItemContext as m}from"./galleryItemContext.js";const a=({children:a})=>{const{color:n}=e(m),l=t((r=>r.breakpoints.down("md"))),c=i((()=>l?"#161718":"light"===n?"#fff":"#161718"),[l,n]);return r(o,{color:c,variant:"h1",sx:{letterSpacing:"0.02em !important"},"data-testid":"Carousel.heading",children:a})};export{a as GalleryItemHeading};
+import{jsx as r}from"react/jsx-runtime";import{useMediaQuery as t,Typography as o}from"@mui/material";import{useContext as e,useMemo as i}from"react";import{GalleryItemContext as m}from"./galleryItemContext.js";const a=({children:a})=>{const{color:n}=e(m),l=t(r=>r.breakpoints.down("md")),c=i(()=>l?"#161718":"light"===n?"#fff":"#161718",[l,n]);return r(o,{color:c,variant:"h1",sx:{letterSpacing:"0.02em !important"},"data-testid":"Carousel.heading",children:a})};export{a as GalleryItemHeading};
 //# sourceMappingURL=galleryItemHeading.js.map

package/organisms/carousel2/galleryCarousel/galleryItemHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"galleryItemHeading.js","sources":["../../../../src/organisms/carousel2/galleryCarousel/galleryItemHeading.tsx"],"sourcesContent":["import { Theme, Typography, useMediaQuery } from '@mui/material';\nimport React, { useContext, useMemo } from 'react';\nimport { GalleryItemContext } from './galleryItemContext';\n\nexport type GalleryItemHeadingProps = {\n  children: React.ReactNode;\n};\n\nexport const GalleryItemHeading: React.FC<GalleryItemHeadingProps> = ({ children }) => {\n  const { color } = useContext(GalleryItemContext);\n  const smallerThanMd = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'));\n\n  const fontColor = useMemo(() => {\n    if (smallerThanMd) {\n      return '#161718';\n    }\n    return color === 'light' ? '#fff' : '#161718';\n  }, [smallerThanMd, color]);\n\n  return (\n    <Typography\n      color={fontColor}\n      variant=\"h1\"\n      sx={{\n        letterSpacing: '0.02em !important',\n      }}\n      data-testid=\"Carousel.heading\"\n    >\n      {children}\n    </Typography>\n  );\n};\n"],"names":["GalleryItemHeading","children","color","useContext","GalleryItemContext","smallerThanMd","useMediaQuery","theme","breakpoints","down","fontColor","useMemo","_jsx","Typography","variant","sx","letterSpacing"],"mappings":"yNAQaA,EAAwD,EAAGC,eACtE,MAAMC,MAAEA,GAAUC,EAAWC,GACvBC,EAAgBC,GAAsBC,GAAUA,EAAMC,YAAYC,KAAK,QAEvEC,EAAYC,GAAQ,IACpBN,EACK,UAEQ,UAAVH,EAAoB,OAAS,WACnC,CAACG,EAAeH,IAEnB,OACEU,EAACC,EAAU,CACTX,MAAOQ,EACPI,QAAQ,KACRC,GAAI,CACFC,cAAe,qBAChB,cACW,mBAAkBf,SAE7BA,GACU"}
+{"version":3,"file":"galleryItemHeading.js","sources":["../../../../src/organisms/carousel2/galleryCarousel/galleryItemHeading.tsx"],"sourcesContent":["import { Theme, Typography, useMediaQuery } from '@mui/material';\nimport React, { useContext, useMemo } from 'react';\nimport { GalleryItemContext } from './galleryItemContext';\n\nexport type GalleryItemHeadingProps = {\n  children: React.ReactNode;\n};\n\nexport const GalleryItemHeading: React.FC<GalleryItemHeadingProps> = ({ children }) => {\n  const { color } = useContext(GalleryItemContext);\n  const smallerThanMd = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'));\n\n  const fontColor = useMemo(() => {\n    if (smallerThanMd) {\n      return '#161718';\n    }\n    return color === 'light' ? '#fff' : '#161718';\n  }, [smallerThanMd, color]);\n\n  return (\n    <Typography\n      color={fontColor}\n      variant=\"h1\"\n      sx={{\n        letterSpacing: '0.02em !important',\n      }}\n      data-testid=\"Carousel.heading\"\n    >\n      {children}\n    </Typography>\n  );\n};\n"],"names":["GalleryItemHeading","children","color","useContext","GalleryItemContext","smallerThanMd","useMediaQuery","theme","breakpoints","down","fontColor","useMemo","_jsx","Typography","variant","sx","letterSpacing"],"mappings":"yNAQaA,EAAwD,EAAGC,eACtE,MAAMC,MAAEA,GAAUC,EAAWC,GACvBC,EAAgBC,EAAsBC,GAAUA,EAAMC,YAAYC,KAAK,OAEvEC,EAAYC,EAAQ,IACpBN,EACK,UAEQ,UAAVH,EAAoB,OAAS,UACnC,CAACG,EAAeH,IAEnB,OACEU,EAACC,EAAU,CACTX,MAAOQ,EACPI,QAAQ,KACRC,GAAI,CACFC,cAAe,qBAChB,cACW,mBAAkBf,SAE7BA"}

package/organisms/carousel2/heroCarousel/HeroCarouselSlide.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useTheme as i,Box as s}from"@mui/material";import{useRef as r,useContext as o,useCallback as l,useEffect as a}from"react";import{useResponsiveProp as m}from"../../../utils/ResponsiveType.js";import{HeroCarouselContext as c}from"./heroCarouselContext.js";const n=o=>{var l;const a=i(),c=m(o.imageSrc),n=m(o.imageFit),d=r(null);return p(d.current,o.footer),e(s,{ref:d,sx:{"&&":{flexBasis:null!==(l=o.width)&&void 0!==l?l:"100%"}},"data-testid":"Carousel.slide",children:t(s,{component:"picture",sx:{display:"flex",position:"relative",height:"100%"},children:[e("source",{media:`(min-width: ${a.breakpoints.values.xl}px)`,srcSet:c.xl}),e("source",{media:`(min-width: ${a.breakpoints.values.lg}px)`,srcSet:c.lg}),e("source",{media:`(min-width: ${a.breakpoints.values.md}px)`,srcSet:c.md}),e("source",{media:`(min-width: ${a.breakpoints.values.sm}px)`,srcSet:c.sm}),e("source",{media:`(max-width: ${a.breakpoints.values.sm}px)`,srcSet:c.xs}),e(s,{component:"img",sx:{height:"100%",width:"100%",objectFit:null!=n?n:"cover"},src:c.xs,alt:o.alt})]})})},p=(e,t)=>{const{emblaApi:i,setActiveFooter:s}=o(c),r=l((()=>{if(i){const r=i.selectedScrollSnap(),o=i.slideNodes()[r];e===o&&s(t)}}),[t,s,i]);a((()=>{if(i){const e=()=>r();return i.on("select",e),()=>{i.off("select",e)}}}),[!!i]),a(r,[i])};export{n as HeroCarouselSlide};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useTheme as i,Box as s}from"@mui/material";import{useRef as r,useContext as o,useCallback as l,useEffect as a}from"react";import{useResponsiveProp as m}from"../../../utils/ResponsiveType.js";import{HeroCarouselContext as c}from"./heroCarouselContext.js";const n=o=>{var l;const a=i(),c=m(o.imageSrc),n=m(o.imageFit),d=r(null);return p(d.current,o.footer),e(s,{ref:d,sx:{"&&":{flexBasis:null!==(l=o.width)&&void 0!==l?l:"100%"}},"data-testid":"Carousel.slide",children:t(s,{component:"picture",sx:{display:"flex",position:"relative",height:"100%"},children:[e("source",{media:`(min-width: ${a.breakpoints.values.xl}px)`,srcSet:c.xl}),e("source",{media:`(min-width: ${a.breakpoints.values.lg}px)`,srcSet:c.lg}),e("source",{media:`(min-width: ${a.breakpoints.values.md}px)`,srcSet:c.md}),e("source",{media:`(min-width: ${a.breakpoints.values.sm}px)`,srcSet:c.sm}),e("source",{media:`(max-width: ${a.breakpoints.values.sm}px)`,srcSet:c.xs}),e(s,{component:"img",sx:{height:"100%",width:"100%",objectFit:null!=n?n:"cover"},src:c.xs,alt:o.alt})]})})},p=(e,t)=>{const{emblaApi:i,setActiveFooter:s}=o(c),r=l(()=>{if(i){const r=i.selectedScrollSnap(),o=i.slideNodes()[r];e===o&&s(t)}},[t,s,i]);a(()=>{if(i){const e=()=>r();return i.on("select",e),()=>{i.off("select",e)}}},[!!i]),a(r,[i])};export{n as HeroCarouselSlide};
 //# sourceMappingURL=HeroCarouselSlide.js.map

package/organisms/carousel2/heroCarousel/HeroCarouselSlide.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroCarouselSlide.js","sources":["../../../../src/organisms/carousel2/heroCarousel/HeroCarouselSlide.tsx"],"sourcesContent":["import { Box, useTheme } from '@mui/material';\nimport React, { useCallback, useContext, useEffect, useRef } from 'react';\nimport { ResponsiveType, useResponsiveProp } from '../../../utils/ResponsiveType';\nimport { HeroCarouselContext } from './heroCarouselContext';\n\ntype FitType = 'contain' | 'cover' | 'fill' | 'scale-down' | 'none';\n\nexport type HeroCarouselSlideProps = {\n  /**\n   * Link to image that should be displayed. This property can be responsive.\n   * @requires\n   * @example\n   * ```tsx\n   * <HeroCarouselSlide imageSrc=\"../image.png\"/>\n   * <HeroCarouselSlide imageSrc={{\n   *    xs: \"../xs-image.png\",\n   *    sm: \"../sm-image.png\",\n   *    md: \"../md-image.png\",\n   *    lg: \"../lg-image.png\",\n   *    xl: \"../xl-image.png\"\n   * }}/>\n   * ```\n   */\n  imageSrc: ResponsiveType<string>;\n  /**\n   * Width of slide component. This property can be responsive\n   * @default undefined\n   * @example\n   * ```tsx\n   * <HeroCarouselSlide width=\"500px\"/>\n   * <HeroCarouselSlide imageSrc={{\n   *    xs: \"100%\",\n   *    sm: \"500px\",\n   *    md: \"700px\",\n   *    lg: \"50%\",\n   *    xl: \"33%\"\n   * }}/>\n   * ```\n   */\n  width?: ResponsiveType<string>;\n  /**\n   * Css `object-fit` property\n   * @default cover\n   * @example\n   * ```tsx\n   * <HeroCarouselSlide imageFit=\"contain\"/>\n   * <HeroCarouselSlide imageFit={{\n   *    xs: \"contain\",\n   *    sm: \"cover\",\n   *    md: \"fill\",\n   *    lg: \"contain\",\n   *    xl: \"cover\"\n   * }}/>\n   * ```\n   */\n  imageFit?: ResponsiveType<FitType>;\n  /**\n   * Alternative text of image.\n   * @default undefined\n   */\n  alt?: string;\n  /**\n   * Footer content of an Slide, it can be any ReactNode. Footer is passed via context to `HeroCarousel` component\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n};\n\nexport const HeroCarouselSlide: React.FC<HeroCarouselSlideProps> = (props) => {\n  const theme = useTheme();\n  const imageSrc = useResponsiveProp(props.imageSrc);\n  const imageFit = useResponsiveProp(props.imageFit);\n\n  const containerRef = useRef(null);\n  useActivateFooter(containerRef.current, props.footer);\n\n  return (\n    <Box\n      ref={containerRef}\n      sx={{\n        '&&': {\n          flexBasis: props.width ?? '100%',\n        },\n      }}\n      data-testid=\"Carousel.slide\"\n    >\n      <Box\n        component=\"picture\"\n        sx={{\n          display: 'flex',\n          position: 'relative',\n          height: '100%',\n        }}\n      >\n        <source media={`(min-width: ${theme.breakpoints.values.xl}px)`} srcSet={imageSrc.xl} />\n        <source media={`(min-width: ${theme.breakpoints.values.lg}px)`} srcSet={imageSrc.lg} />\n        <source media={`(min-width: ${theme.breakpoints.values.md}px)`} srcSet={imageSrc.md} />\n        <source media={`(min-width: ${theme.breakpoints.values.sm}px)`} srcSet={imageSrc.sm} />\n        <source media={`(max-width: ${theme.breakpoints.values.sm}px)`} srcSet={imageSrc.xs} />\n        <Box\n          component=\"img\"\n          sx={{\n            height: '100%',\n            width: '100%',\n            objectFit: imageFit ?? 'cover',\n          }}\n          src={imageSrc.xs}\n          alt={props.alt}\n        />\n      </Box>\n    </Box>\n  );\n};\n\nconst useActivateFooter = (containerRef: HTMLDivElement, footer: React.ReactNode) => {\n  const { emblaApi, setActiveFooter } = useContext(HeroCarouselContext);\n\n  const activateFooter = useCallback(() => {\n    if (emblaApi) {\n      const slideIndex = emblaApi.selectedScrollSnap();\n      const slides = emblaApi.slideNodes();\n      const activeSlide = slides[slideIndex];\n      if (containerRef === activeSlide) {\n        setActiveFooter(footer);\n      }\n    }\n  }, [footer, setActiveFooter, emblaApi]);\n\n  useEffect(() => {\n    if (emblaApi) {\n      const e = () => activateFooter();\n      emblaApi.on('select', e);\n      return () => {\n        emblaApi.off('select', e);\n      };\n    }\n  }, [!!emblaApi]);\n\n  useEffect(activateFooter, [emblaApi]);\n};\n"],"names":["HeroCarouselSlide","props","theme","useTheme","imageSrc","useResponsiveProp","imageFit","containerRef","useRef","useActivateFooter","current","footer","_jsx","Box","ref","sx","flexBasis","_a","width","children","_jsxs","component","display","position","height","media","breakpoints","values","xl","srcSet","lg","md","sm","xs","objectFit","src","alt","emblaApi","setActiveFooter","useContext","HeroCarouselContext","activateFooter","useCallback","slideIndex","selectedScrollSnap","activeSlide","slideNodes","useEffect","e","on","off"],"mappings":"uTAoEO,MAAMA,EAAuDC,UAClE,MAAMC,EAAQC,IACRC,EAAWC,EAAkBJ,EAAMG,UACnCE,EAAWD,EAAkBJ,EAAMK,UAEnCC,EAAeC,EAAO,MAG5B,OAFAC,EAAkBF,EAAaG,QAAST,EAAMU,QAG5CC,EAACC,EAAG,CACFC,IAAKP,EACLQ,GAAI,CACF,KAAM,CACJC,kBAAWC,EAAAhB,EAAMiB,qBAAS,SAE7B,cACW,iBAAgBC,SAE5BC,EAACP,EAAG,CACFQ,UAAU,UACVN,GAAI,CACFO,QAAS,OACTC,SAAU,WACVC,OAAQ,QACTL,SAAA,CAEDP,EAAA,SAAA,CAAQa,MAAO,eAAevB,EAAMwB,YAAYC,OAAOC,QAASC,OAAQzB,EAASwB,KACjFhB,EAAA,SAAA,CAAQa,MAAO,eAAevB,EAAMwB,YAAYC,OAAOG,QAASD,OAAQzB,EAAS0B,KACjFlB,YAAQa,MAAO,eAAevB,EAAMwB,YAAYC,OAAOI,QAASF,OAAQzB,EAAS2B,KACjFnB,EAAA,SAAA,CAAQa,MAAO,eAAevB,EAAMwB,YAAYC,OAAOK,QAASH,OAAQzB,EAAS4B,KACjFpB,EAAA,SAAA,CAAQa,MAAO,eAAevB,EAAMwB,YAAYC,OAAOK,QAASH,OAAQzB,EAAS6B,KACjFrB,EAACC,EAAG,CACFQ,UAAU,MACVN,GAAI,CACFS,OAAQ,OACRN,MAAO,OACPgB,UAAW5B,QAAAA,EAAY,SAEzB6B,IAAK/B,EAAS6B,GACdG,IAAKnC,EAAMmC,UAGX,EAIJ3B,EAAoB,CAACF,EAA8BI,KACvD,MAAM0B,SAAEA,EAAQC,gBAAEA,GAAoBC,EAAWC,GAE3CC,EAAiBC,GAAY,KACjC,GAAIL,EAAU,CACZ,MAAMM,EAAaN,EAASO,qBAEtBC,EADSR,EAASS,aACGH,GACvBpC,IAAiBsC,GACnBP,EAAgB3B,EAEpB,IACC,CAACA,EAAQ2B,EAAiBD,IAE7BU,GAAU,KACR,GAAIV,EAAU,CACZ,MAAMW,EAAI,IAAMP,IAEhB,OADAJ,EAASY,GAAG,SAAUD,GACf,KACLX,EAASa,IAAI,SAAUF,EAAE,CAE7B,IACC,GAAGX,IAENU,EAAUN,EAAgB,CAACJ,GAAU"}
+{"version":3,"file":"HeroCarouselSlide.js","sources":["../../../../src/organisms/carousel2/heroCarousel/HeroCarouselSlide.tsx"],"sourcesContent":["import { Box, useTheme } from '@mui/material';\nimport React, { useCallback, useContext, useEffect, useRef } from 'react';\nimport { ResponsiveType, useResponsiveProp } from '../../../utils/ResponsiveType';\nimport { HeroCarouselContext } from './heroCarouselContext';\n\ntype FitType = 'contain' | 'cover' | 'fill' | 'scale-down' | 'none';\n\nexport type HeroCarouselSlideProps = {\n  /**\n   * Link to image that should be displayed. This property can be responsive.\n   * @requires\n   * @example\n   * ```tsx\n   * <HeroCarouselSlide imageSrc=\"../image.png\"/>\n   * <HeroCarouselSlide imageSrc={{\n   *    xs: \"../xs-image.png\",\n   *    sm: \"../sm-image.png\",\n   *    md: \"../md-image.png\",\n   *    lg: \"../lg-image.png\",\n   *    xl: \"../xl-image.png\"\n   * }}/>\n   * ```\n   */\n  imageSrc: ResponsiveType<string>;\n  /**\n   * Width of slide component. This property can be responsive\n   * @default undefined\n   * @example\n   * ```tsx\n   * <HeroCarouselSlide width=\"500px\"/>\n   * <HeroCarouselSlide imageSrc={{\n   *    xs: \"100%\",\n   *    sm: \"500px\",\n   *    md: \"700px\",\n   *    lg: \"50%\",\n   *    xl: \"33%\"\n   * }}/>\n   * ```\n   */\n  width?: ResponsiveType<string>;\n  /**\n   * Css `object-fit` property\n   * @default cover\n   * @example\n   * ```tsx\n   * <HeroCarouselSlide imageFit=\"contain\"/>\n   * <HeroCarouselSlide imageFit={{\n   *    xs: \"contain\",\n   *    sm: \"cover\",\n   *    md: \"fill\",\n   *    lg: \"contain\",\n   *    xl: \"cover\"\n   * }}/>\n   * ```\n   */\n  imageFit?: ResponsiveType<FitType>;\n  /**\n   * Alternative text of image.\n   * @default undefined\n   */\n  alt?: string;\n  /**\n   * Footer content of an Slide, it can be any ReactNode. Footer is passed via context to `HeroCarousel` component\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n};\n\nexport const HeroCarouselSlide: React.FC<HeroCarouselSlideProps> = (props) => {\n  const theme = useTheme();\n  const imageSrc = useResponsiveProp(props.imageSrc);\n  const imageFit = useResponsiveProp(props.imageFit);\n\n  const containerRef = useRef(null);\n  useActivateFooter(containerRef.current, props.footer);\n\n  return (\n    <Box\n      ref={containerRef}\n      sx={{\n        '&&': {\n          flexBasis: props.width ?? '100%',\n        },\n      }}\n      data-testid=\"Carousel.slide\"\n    >\n      <Box\n        component=\"picture\"\n        sx={{\n          display: 'flex',\n          position: 'relative',\n          height: '100%',\n        }}\n      >\n        <source media={`(min-width: ${theme.breakpoints.values.xl}px)`} srcSet={imageSrc.xl} />\n        <source media={`(min-width: ${theme.breakpoints.values.lg}px)`} srcSet={imageSrc.lg} />\n        <source media={`(min-width: ${theme.breakpoints.values.md}px)`} srcSet={imageSrc.md} />\n        <source media={`(min-width: ${theme.breakpoints.values.sm}px)`} srcSet={imageSrc.sm} />\n        <source media={`(max-width: ${theme.breakpoints.values.sm}px)`} srcSet={imageSrc.xs} />\n        <Box\n          component=\"img\"\n          sx={{\n            height: '100%',\n            width: '100%',\n            objectFit: imageFit ?? 'cover',\n          }}\n          src={imageSrc.xs}\n          alt={props.alt}\n        />\n      </Box>\n    </Box>\n  );\n};\n\nconst useActivateFooter = (containerRef: HTMLDivElement, footer: React.ReactNode) => {\n  const { emblaApi, setActiveFooter } = useContext(HeroCarouselContext);\n\n  const activateFooter = useCallback(() => {\n    if (emblaApi) {\n      const slideIndex = emblaApi.selectedScrollSnap();\n      const slides = emblaApi.slideNodes();\n      const activeSlide = slides[slideIndex];\n      if (containerRef === activeSlide) {\n        setActiveFooter(footer);\n      }\n    }\n  }, [footer, setActiveFooter, emblaApi]);\n\n  useEffect(() => {\n    if (emblaApi) {\n      const e = () => activateFooter();\n      emblaApi.on('select', e);\n      return () => {\n        emblaApi.off('select', e);\n      };\n    }\n  }, [!!emblaApi]);\n\n  useEffect(activateFooter, [emblaApi]);\n};\n"],"names":["HeroCarouselSlide","props","theme","useTheme","imageSrc","useResponsiveProp","imageFit","containerRef","useRef","useActivateFooter","current","footer","_jsx","Box","ref","sx","flexBasis","_a","width","children","_jsxs","component","display","position","height","media","breakpoints","values","xl","srcSet","lg","md","sm","xs","objectFit","src","alt","emblaApi","setActiveFooter","useContext","HeroCarouselContext","activateFooter","useCallback","slideIndex","selectedScrollSnap","activeSlide","slideNodes","useEffect","e","on","off"],"mappings":"uTAoEO,MAAMA,EAAuDC,UAClE,MAAMC,EAAQC,IACRC,EAAWC,EAAkBJ,EAAMG,UACnCE,EAAWD,EAAkBJ,EAAMK,UAEnCC,EAAeC,EAAO,MAG5B,OAFAC,EAAkBF,EAAaG,QAAST,EAAMU,QAG5CC,EAACC,EAAG,CACFC,IAAKP,EACLQ,GAAI,CACF,KAAM,CACJC,kBAAWC,EAAAhB,EAAMiB,qBAAS,SAE7B,cACW,iBAAgBC,SAE5BC,EAACP,EAAG,CACFQ,UAAU,UACVN,GAAI,CACFO,QAAS,OACTC,SAAU,WACVC,OAAQ,QACTL,SAAA,CAEDP,EAAA,SAAA,CAAQa,MAAO,eAAevB,EAAMwB,YAAYC,OAAOC,QAASC,OAAQzB,EAASwB,KACjFhB,EAAA,SAAA,CAAQa,MAAO,eAAevB,EAAMwB,YAAYC,OAAOG,QAASD,OAAQzB,EAAS0B,KACjFlB,YAAQa,MAAO,eAAevB,EAAMwB,YAAYC,OAAOI,QAASF,OAAQzB,EAAS2B,KACjFnB,EAAA,SAAA,CAAQa,MAAO,eAAevB,EAAMwB,YAAYC,OAAOK,QAASH,OAAQzB,EAAS4B,KACjFpB,EAAA,SAAA,CAAQa,MAAO,eAAevB,EAAMwB,YAAYC,OAAOK,QAASH,OAAQzB,EAAS6B,KACjFrB,EAACC,EAAG,CACFQ,UAAU,MACVN,GAAI,CACFS,OAAQ,OACRN,MAAO,OACPgB,UAAW5B,QAAAA,EAAY,SAEzB6B,IAAK/B,EAAS6B,GACdG,IAAKnC,EAAMmC,YAOf3B,EAAoB,CAACF,EAA8BI,KACvD,MAAM0B,SAAEA,EAAQC,gBAAEA,GAAoBC,EAAWC,GAE3CC,EAAiBC,EAAY,KACjC,GAAIL,EAAU,CACZ,MAAMM,EAAaN,EAASO,qBAEtBC,EADSR,EAASS,aACGH,GACvBpC,IAAiBsC,GACnBP,EAAgB3B,EAEpB,GACC,CAACA,EAAQ2B,EAAiBD,IAE7BU,EAAU,KACR,GAAIV,EAAU,CACZ,MAAMW,EAAI,IAAMP,IAEhB,OADAJ,EAASY,GAAG,SAAUD,GACf,KACLX,EAASa,IAAI,SAAUF,GAE3B,GACC,GAAGX,IAENU,EAAUN,EAAgB,CAACJ"}

package/organisms/carousel2/heroCarousel/heroCarousel.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as i,useState as o,useCallback as r,useEffect as n}from"react";import{useDefaultProps as s}from"../hooks/useDefaultProps.js";import{useEmbla as l}from"../hooks/useEmbla.js";import{ViewPort as a}from"../components/ViewPort.js";import{ItemsContainer as d}from"../components/ItemsContainer.js";import{useContainerPeek as m}from"../hooks/useContainerPeek.js";import{NavButton as p}from"../components/NavButton.js";import{Box as c,Stack as h,Container as u,Typography as g,useMediaQuery as x}from"@mui/material";import{Numbering as f}from"../components/Numbering.js";import{NumberingSizes as v,NumberingColors as b}from"../../../utils/enum.js";import{HeroCarouselContext as w}from"./heroCarouselContext.js";const j={direction:"ltr"},C=r=>{const n=Object.assign(Object.assign({},j),r),x=s(n),[C,E]=l(x),F=i(null),A=i(null),{containerLeft:y,peekNextOnHover:L,peekPrevOnHover:P,resetPeek:R}=m(E,x.direction),[B,H]=o(null),M=k(E,F.current,A.current,x.direction);return e(w.Provider,{value:{emblaApi:E,activeFooter:B,setActiveFooter:H},children:t(c,{className:"hero-carousel",position:"relative",dir:x.direction,"data-testid":"HeroCarousel","data-state":null==E?void 0:E.slidesInView(),sx:{overflow:"hidden"},children:[t(h,{component:u,spacing:3,fixed:!0,sx:{height:"100%"},children:[n.heading&&e(c,{ref:F,"data-testid":"HeroCarousel.heading",children:"string"==typeof n.heading?e(g,{variant:"h1",children:n.heading}):n.heading}),t(a,{emblaRef:e=>{C(e),A.current=e},sx:{width:{xl:"85%",md:"85%",sm:"95%",xs:"100%"},height:x.height},children:[e(d,{left:y,sx:{gap:"24px"},children:x.children}),e(p,{direction:x.direction,emblaApi:E,type:"prev",onMouseEnter:P,onMouseLeave:R,sx:{width:"21%",button:{visibility:"hidden"}}}),e(p,{direction:x.direction,emblaApi:E,type:"next",onMouseEnter:L,onMouseLeave:R,sx:{width:"30%",button:{visibility:"hidden"}}})]}),B&&e(c,{sx:{width:{xl:"860px",lg:"740px",md:"100%"},paddingRight:{lg:"0px",sm:"130px"}},"data-testid":"HeroCarousel.footer",children:"string"==typeof B?e(g,{children:B}):B})]}),!1!==n.numbering&&e(f,{sx:M,emblaApi:E,separator:x.numberingSeparator,color:b.DARK,size:v.LARGE,direction:x.direction})]})})},k=(e,t,i,s)=>{const l=x((e=>e.breakpoints.only("sm"))),a=x((e=>e.breakpoints.only("xs"))),[d,m]=o(),[p,c]=o(),h=r((()=>{var o,r;if(e){const e=i.getBoundingClientRect(),n=null==t?void 0:t.getBoundingClientRect();m({md:`${"ltr"===s?e.right:e.left-90}px`,sm:("ltr"===s?e.right-50:e.left-50)+"px",xs:`${"ltr"===s?e.right-100:e.left+10}px`}),c({sm:`${e.height+(null!==(o=null==n?void 0:n.height)&&void 0!==o?o:0)+20}px`,xs:e.height+(null!==(r=null==n?void 0:n.height)&&void 0!==r?r:0)-25+"px"})}}),[e,c,m,l,a,window.innerWidth,s]);return n(h,[h]),n((()=>{const t=()=>h();return window.addEventListener("resize",t),e&&e.on("select",t),()=>{window.removeEventListener("resize",t),e&&e.off("select",t)}}),[h,e]),{top:p,left:d,right:"inherit",backgroundColor:a?"#000000BF !important":"transparent",".total-container":{color:a?"##9E9FA0 !important":"#5A5B5C !important"},".separator-container":{color:"#E4E4E4 !important"},".index-container":{color:a?"#FFFFFF !important":"#161718 !important"}}};export{C as HeroCarousel};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as i,useState as o,useCallback as r,useEffect as n}from"react";import{useDefaultProps as s}from"../hooks/useDefaultProps.js";import{useEmbla as l}from"../hooks/useEmbla.js";import{ViewPort as a}from"../components/ViewPort.js";import{ItemsContainer as d}from"../components/ItemsContainer.js";import{useContainerPeek as m}from"../hooks/useContainerPeek.js";import{NavButton as p}from"../components/NavButton.js";import{Box as c,Stack as h,Container as u,Typography as g,useMediaQuery as x}from"@mui/material";import{Numbering as f}from"../components/Numbering.js";import{NumberingSizes as v,NumberingColors as b}from"../../../utils/enum.js";import{HeroCarouselContext as w}from"./heroCarouselContext.js";const j={direction:"ltr"},C=r=>{const n=Object.assign(Object.assign({},j),r),x=s(n),[C,E]=l(x),F=i(null),A=i(null),{containerLeft:y,peekNextOnHover:L,peekPrevOnHover:P,resetPeek:R}=m(E,x.direction),[B,H]=o(null),M=k(E,F.current,A.current,x.direction);return e(w.Provider,{value:{emblaApi:E,activeFooter:B,setActiveFooter:H},children:t(c,{className:"hero-carousel",position:"relative",dir:x.direction,"data-testid":"HeroCarousel","data-state":null==E?void 0:E.slidesInView(),sx:{overflow:"hidden"},children:[t(h,{component:u,spacing:3,fixed:!0,sx:{height:"100%"},children:[n.heading&&e(c,{ref:F,"data-testid":"HeroCarousel.heading",children:"string"==typeof n.heading?e(g,{variant:"h1",children:n.heading}):n.heading}),t(a,{emblaRef:e=>{C(e),A.current=e},sx:{width:{xl:"85%",md:"85%",sm:"95%",xs:"100%"},height:x.height},children:[e(d,{left:y,sx:{gap:"24px"},children:x.children}),e(p,{direction:x.direction,emblaApi:E,type:"prev",onMouseEnter:P,onMouseLeave:R,sx:{width:"21%",button:{visibility:"hidden"}}}),e(p,{direction:x.direction,emblaApi:E,type:"next",onMouseEnter:L,onMouseLeave:R,sx:{width:"30%",button:{visibility:"hidden"}}})]}),B&&e(c,{sx:{width:{xl:"860px",lg:"740px",md:"100%"},paddingRight:{lg:"0px",sm:"130px"}},"data-testid":"HeroCarousel.footer",children:"string"==typeof B?e(g,{children:B}):B})]}),!1!==n.numbering&&e(f,{sx:M,emblaApi:E,separator:x.numberingSeparator,color:b.DARK,size:v.LARGE,direction:x.direction})]})})},k=(e,t,i,s)=>{const l=x(e=>e.breakpoints.only("sm")),a=x(e=>e.breakpoints.only("xs")),[d,m]=o(),[p,c]=o(),h=r(()=>{var o,r;if(e){const e=i.getBoundingClientRect(),n=null==t?void 0:t.getBoundingClientRect();m({md:`${"ltr"===s?e.right:e.left-90}px`,sm:("ltr"===s?e.right-50:e.left-50)+"px",xs:`${"ltr"===s?e.right-100:e.left+10}px`}),c({sm:`${e.height+(null!==(o=null==n?void 0:n.height)&&void 0!==o?o:0)+20}px`,xs:e.height+(null!==(r=null==n?void 0:n.height)&&void 0!==r?r:0)-25+"px"})}},[e,c,m,l,a,window.innerWidth,s]);return n(h,[h]),n(()=>{const t=()=>h();return window.addEventListener("resize",t),e&&e.on("select",t),()=>{window.removeEventListener("resize",t),e&&e.off("select",t)}},[h,e]),{top:p,left:d,right:"inherit",backgroundColor:a?"#000000BF !important":"transparent",".total-container":{color:a?"##9E9FA0 !important":"#5A5B5C !important"},".separator-container":{color:"#E4E4E4 !important"},".index-container":{color:a?"#FFFFFF !important":"#161718 !important"}}};export{C as HeroCarousel};
 //# sourceMappingURL=heroCarousel.js.map

package/organisms/carousel2/heroCarousel/heroCarousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"heroCarousel.js","sources":["../../../../src/organisms/carousel2/heroCarousel/heroCarousel.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useDefaultProps } from '../hooks/useDefaultProps';\nimport { useEmbla } from '../hooks/useEmbla';\nimport { ViewPort } from '../components/ViewPort';\nimport { ItemsContainer } from '../components/ItemsContainer';\nimport { useContainerPeek } from '../hooks/useContainerPeek';\nimport { NavButton } from '../components/NavButton';\nimport { Box, Container, Stack, Theme, Typography, useMediaQuery } from '@mui/material';\nimport { Numbering } from '../components/Numbering';\nimport { NumberingColors, NumberingSizes } from '../../../utils/enum';\nimport { ResponsiveType } from '../../../utils/ResponsiveType';\nimport { Carousel2Props } from '../carousel2';\nimport { HeroCarouselContext } from './heroCarouselContext';\nimport { EmblaCarouselType } from 'embla-carousel-react';\n\nconst HeroDefaultProps: Partial<Carousel2Props> = {\n  direction: 'ltr',\n};\n\nexport type HeroCarouselProps = {\n  /**\n   * Enables autoplay functionality, which can be used to automatically trigger slide changes after certain delay.\n   * @default false\n   */\n  autoPlay?: boolean;\n  /**\n   * Delay in ms between automatic slides.\n   * @default 4000\n   */\n  autoPlayDelay?: number;\n  /**\n   * Adjust slide speed when using buttons to change Slide. Higher numbers enables faster scrolling. Values between `1`-`20` are recommended.\n   * @default 10\n   */\n  speed?: number;\n  /**\n   * Carousel slides. Any ReactNode can be used here, however `GalleryCarouselItem` component is suggested.\n   * @requires\n   */\n  children: React.ReactNode;\n  /**\n   * Direction of content.\n   * @default ltr\n   */\n  direction?: 'rtl' | 'ltr';\n  /**\n   * Separator of numbering component.\n   * @default /\n   */\n  numberingSeparator?: string;\n  /**\n   * Index of Slide that is active by default.\n   * @default 0\n   */\n  startIndex?: number;\n  /**\n   * Optional height of carousel, this prop is added to height style property.\n   * @default undefined\n   */\n  height?: ResponsiveType<string>;\n  /**\n   * Heading of the carousel. Any ReactElement can be used, however `Typography` component is suggested.\n   * @default undefined\n   */\n  heading?: React.ReactNode;\n  /**\n   * Enables numbering component, which shows number of active slide and number of total slides.\n   * @default false\n   */\n  numbering?: boolean;\n};\n\n/**\n * @deprecated use Carousel instead\n */\nexport const HeroCarousel: React.FC<HeroCarouselProps> = (inProps) => {\n  const heroProps = { ...HeroDefaultProps, ...inProps };\n  const props = useDefaultProps(heroProps);\n\n  const [emblaRef, emblaApi] = useEmbla(props);\n  const headingRef = useRef<HTMLElement>(null);\n  const viewportRef = useRef<HTMLElement>(null);\n\n  const { containerLeft, peekNextOnHover, peekPrevOnHover, resetPeek } = useContainerPeek(emblaApi, props.direction);\n\n  const [activeFooter, setActiveFooter] = useState<React.ReactNode>(null);\n\n  const numberingStyles = useNumberingStyles(emblaApi, headingRef.current, viewportRef.current, props.direction);\n\n  return (\n    <HeroCarouselContext.Provider value={{ emblaApi, activeFooter, setActiveFooter }}>\n      <Box\n        className=\"hero-carousel\"\n        position=\"relative\"\n        dir={props.direction}\n        data-testid=\"HeroCarousel\"\n        data-state={emblaApi?.slidesInView()}\n        sx={{ overflow: 'hidden' }}\n      >\n        <Stack component={Container} spacing={3} fixed sx={{ height: '100%' }}>\n          {heroProps.heading && (\n            <Box ref={headingRef} data-testid=\"HeroCarousel.heading\">\n              {typeof heroProps.heading === 'string' ? (\n                <Typography variant=\"h1\">{heroProps.heading}</Typography>\n              ) : (\n                heroProps.heading\n              )}\n            </Box>\n          )}\n          <ViewPort\n            emblaRef={(e) => {\n              emblaRef(e);\n              viewportRef.current = e;\n            }}\n            sx={{\n              width: {\n                xl: '85%',\n                md: '85%',\n                sm: '95%',\n                xs: '100%',\n              },\n              height: props.height,\n            }}\n          >\n            <ItemsContainer\n              left={containerLeft}\n              sx={{\n                gap: '24px',\n              }}\n            >\n              {props.children}\n            </ItemsContainer>\n\n            <NavButton\n              direction={props.direction}\n              emblaApi={emblaApi}\n              type=\"prev\"\n              onMouseEnter={peekPrevOnHover}\n              onMouseLeave={resetPeek}\n              sx={{\n                width: '21%',\n                button: { visibility: 'hidden' },\n              }}\n            />\n            <NavButton\n              direction={props.direction}\n              emblaApi={emblaApi}\n              type=\"next\"\n              onMouseEnter={peekNextOnHover}\n              onMouseLeave={resetPeek}\n              sx={{\n                width: '30%',\n                button: { visibility: 'hidden' },\n              }}\n            />\n          </ViewPort>\n          {activeFooter && (\n            <Box\n              sx={{\n                width: {\n                  xl: '860px',\n                  lg: '740px',\n                  md: '100%',\n                },\n                paddingRight: {\n                  lg: '0px',\n                  sm: '130px',\n                },\n              }}\n              data-testid=\"HeroCarousel.footer\"\n            >\n              {typeof activeFooter === 'string' ? <Typography>{activeFooter}</Typography> : activeFooter}\n            </Box>\n          )}\n        </Stack>\n        {heroProps.numbering !== false && (\n          <Numbering\n            sx={numberingStyles}\n            emblaApi={emblaApi}\n            separator={props.numberingSeparator}\n            color={NumberingColors.DARK}\n            size={NumberingSizes.LARGE}\n            direction={props.direction}\n          />\n        )}\n      </Box>\n    </HeroCarouselContext.Provider>\n  );\n};\n\n/* eslint-disable sonarjs/cognitive-complexity */\nconst useNumberingStyles = (\n  emblaApi: EmblaCarouselType,\n  headingRef: HTMLElement,\n  viewportRef: HTMLElement,\n  direction: 'rtl' | 'ltr',\n) => {\n  const isSm = useMediaQuery<Theme>((theme) => theme.breakpoints.only('sm'));\n  const isXs = useMediaQuery<Theme>((theme) => theme.breakpoints.only('xs'));\n\n  const [x, setX] = useState<Record<string, string> | undefined>();\n  const [y, setY] = useState<Record<string, string> | undefined>();\n\n  const updateNumberingPosition = useCallback(() => {\n    if (emblaApi) {\n      const viewport = viewportRef.getBoundingClientRect();\n      const heading = headingRef?.getBoundingClientRect();\n\n      setX({\n        md: `${direction === 'ltr' ? viewport.right : viewport.left - 90}px`,\n        sm: `${direction === 'ltr' ? viewport.right - 50 : viewport.left - 50}px`,\n        xs: `${direction === 'ltr' ? viewport.right - 100 : viewport.left + 10}px`,\n      });\n      setY({\n        sm: `${viewport.height + (heading?.height ?? 0) + 20}px`,\n        xs: `${viewport.height + (heading?.height ?? 0) - 25}px`,\n      });\n    }\n  }, [emblaApi, setY, setX, isSm, isXs, window.innerWidth, direction]);\n\n  useEffect(updateNumberingPosition, [updateNumberingPosition]);\n  useEffect(() => {\n    const e = () => updateNumberingPosition();\n    window.addEventListener('resize', e);\n    if (emblaApi) {\n      emblaApi.on('select', e);\n    }\n    return () => {\n      window.removeEventListener('resize', e);\n      if (emblaApi) {\n        emblaApi.off('select', e);\n      }\n    };\n  }, [updateNumberingPosition, emblaApi]);\n\n  return {\n    top: y,\n    left: x,\n    right: 'inherit',\n    backgroundColor: isXs ? '#000000BF !important' : 'transparent',\n    '.total-container': {\n      color: isXs ? '##9E9FA0 !important' : '#5A5B5C !important',\n    },\n    '.separator-container': {\n      color: '#E4E4E4 !important',\n    },\n    '.index-container': {\n      color: isXs ? '#FFFFFF !important' : '#161718 !important',\n    },\n  };\n};\n"],"names":["HeroDefaultProps","direction","HeroCarousel","inProps","heroProps","Object","assign","props","useDefaultProps","emblaRef","emblaApi","useEmbla","headingRef","useRef","viewportRef","containerLeft","peekNextOnHover","peekPrevOnHover","resetPeek","useContainerPeek","activeFooter","setActiveFooter","useState","numberingStyles","useNumberingStyles","current","_jsx","HeroCarouselContext","Provider","value","children","_jsxs","Box","className","position","dir","slidesInView","sx","overflow","Stack","component","Container","spacing","fixed","height","heading","ref","Typography","variant","ViewPort","e","width","xl","md","sm","xs","ItemsContainer","left","gap","NavButton","type","onMouseEnter","onMouseLeave","button","visibility","lg","paddingRight","numbering","Numbering","separator","numberingSeparator","color","NumberingColors","DARK","size","NumberingSizes","LARGE","isSm","useMediaQuery","theme","breakpoints","only","isXs","x","setX","y","setY","updateNumberingPosition","useCallback","viewport","getBoundingClientRect","right","_a","_b","window","innerWidth","useEffect","addEventListener","on","removeEventListener","off","top","backgroundColor"],"mappings":"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"}
+{"version":3,"file":"heroCarousel.js","sources":["../../../../src/organisms/carousel2/heroCarousel/heroCarousel.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useDefaultProps } from '../hooks/useDefaultProps';\nimport { useEmbla } from '../hooks/useEmbla';\nimport { ViewPort } from '../components/ViewPort';\nimport { ItemsContainer } from '../components/ItemsContainer';\nimport { useContainerPeek } from '../hooks/useContainerPeek';\nimport { NavButton } from '../components/NavButton';\nimport { Box, Container, Stack, Theme, Typography, useMediaQuery } from '@mui/material';\nimport { Numbering } from '../components/Numbering';\nimport { NumberingColors, NumberingSizes } from '../../../utils/enum';\nimport { ResponsiveType } from '../../../utils/ResponsiveType';\nimport { Carousel2Props } from '../carousel2';\nimport { HeroCarouselContext } from './heroCarouselContext';\nimport { EmblaCarouselType } from 'embla-carousel-react';\n\nconst HeroDefaultProps: Partial<Carousel2Props> = {\n  direction: 'ltr',\n};\n\nexport type HeroCarouselProps = {\n  /**\n   * Enables autoplay functionality, which can be used to automatically trigger slide changes after certain delay.\n   * @default false\n   */\n  autoPlay?: boolean;\n  /**\n   * Delay in ms between automatic slides.\n   * @default 4000\n   */\n  autoPlayDelay?: number;\n  /**\n   * Adjust slide speed when using buttons to change Slide. Higher numbers enables faster scrolling. Values between `1`-`20` are recommended.\n   * @default 10\n   */\n  speed?: number;\n  /**\n   * Carousel slides. Any ReactNode can be used here, however `GalleryCarouselItem` component is suggested.\n   * @requires\n   */\n  children: React.ReactNode;\n  /**\n   * Direction of content.\n   * @default ltr\n   */\n  direction?: 'rtl' | 'ltr';\n  /**\n   * Separator of numbering component.\n   * @default /\n   */\n  numberingSeparator?: string;\n  /**\n   * Index of Slide that is active by default.\n   * @default 0\n   */\n  startIndex?: number;\n  /**\n   * Optional height of carousel, this prop is added to height style property.\n   * @default undefined\n   */\n  height?: ResponsiveType<string>;\n  /**\n   * Heading of the carousel. Any ReactElement can be used, however `Typography` component is suggested.\n   * @default undefined\n   */\n  heading?: React.ReactNode;\n  /**\n   * Enables numbering component, which shows number of active slide and number of total slides.\n   * @default false\n   */\n  numbering?: boolean;\n};\n\n/**\n * @deprecated use Carousel instead\n */\nexport const HeroCarousel: React.FC<HeroCarouselProps> = (inProps) => {\n  const heroProps = { ...HeroDefaultProps, ...inProps };\n  const props = useDefaultProps(heroProps);\n\n  const [emblaRef, emblaApi] = useEmbla(props);\n  const headingRef = useRef<HTMLElement>(null);\n  const viewportRef = useRef<HTMLElement>(null);\n\n  const { containerLeft, peekNextOnHover, peekPrevOnHover, resetPeek } = useContainerPeek(emblaApi, props.direction);\n\n  const [activeFooter, setActiveFooter] = useState<React.ReactNode>(null);\n\n  const numberingStyles = useNumberingStyles(emblaApi, headingRef.current, viewportRef.current, props.direction);\n\n  return (\n    <HeroCarouselContext.Provider value={{ emblaApi, activeFooter, setActiveFooter }}>\n      <Box\n        className=\"hero-carousel\"\n        position=\"relative\"\n        dir={props.direction}\n        data-testid=\"HeroCarousel\"\n        data-state={emblaApi?.slidesInView()}\n        sx={{ overflow: 'hidden' }}\n      >\n        <Stack component={Container} spacing={3} fixed sx={{ height: '100%' }}>\n          {heroProps.heading && (\n            <Box ref={headingRef} data-testid=\"HeroCarousel.heading\">\n              {typeof heroProps.heading === 'string' ? (\n                <Typography variant=\"h1\">{heroProps.heading}</Typography>\n              ) : (\n                heroProps.heading\n              )}\n            </Box>\n          )}\n          <ViewPort\n            emblaRef={(e) => {\n              emblaRef(e);\n              viewportRef.current = e;\n            }}\n            sx={{\n              width: {\n                xl: '85%',\n                md: '85%',\n                sm: '95%',\n                xs: '100%',\n              },\n              height: props.height,\n            }}\n          >\n            <ItemsContainer\n              left={containerLeft}\n              sx={{\n                gap: '24px',\n              }}\n            >\n              {props.children}\n            </ItemsContainer>\n\n            <NavButton\n              direction={props.direction}\n              emblaApi={emblaApi}\n              type=\"prev\"\n              onMouseEnter={peekPrevOnHover}\n              onMouseLeave={resetPeek}\n              sx={{\n                width: '21%',\n                button: { visibility: 'hidden' },\n              }}\n            />\n            <NavButton\n              direction={props.direction}\n              emblaApi={emblaApi}\n              type=\"next\"\n              onMouseEnter={peekNextOnHover}\n              onMouseLeave={resetPeek}\n              sx={{\n                width: '30%',\n                button: { visibility: 'hidden' },\n              }}\n            />\n          </ViewPort>\n          {activeFooter && (\n            <Box\n              sx={{\n                width: {\n                  xl: '860px',\n                  lg: '740px',\n                  md: '100%',\n                },\n                paddingRight: {\n                  lg: '0px',\n                  sm: '130px',\n                },\n              }}\n              data-testid=\"HeroCarousel.footer\"\n            >\n              {typeof activeFooter === 'string' ? <Typography>{activeFooter}</Typography> : activeFooter}\n            </Box>\n          )}\n        </Stack>\n        {heroProps.numbering !== false && (\n          <Numbering\n            sx={numberingStyles}\n            emblaApi={emblaApi}\n            separator={props.numberingSeparator}\n            color={NumberingColors.DARK}\n            size={NumberingSizes.LARGE}\n            direction={props.direction}\n          />\n        )}\n      </Box>\n    </HeroCarouselContext.Provider>\n  );\n};\n\n/* eslint-disable sonarjs/cognitive-complexity */\nconst useNumberingStyles = (\n  emblaApi: EmblaCarouselType,\n  headingRef: HTMLElement,\n  viewportRef: HTMLElement,\n  direction: 'rtl' | 'ltr',\n) => {\n  const isSm = useMediaQuery<Theme>((theme) => theme.breakpoints.only('sm'));\n  const isXs = useMediaQuery<Theme>((theme) => theme.breakpoints.only('xs'));\n\n  const [x, setX] = useState<Record<string, string> | undefined>();\n  const [y, setY] = useState<Record<string, string> | undefined>();\n\n  const updateNumberingPosition = useCallback(() => {\n    if (emblaApi) {\n      const viewport = viewportRef.getBoundingClientRect();\n      const heading = headingRef?.getBoundingClientRect();\n\n      setX({\n        md: `${direction === 'ltr' ? viewport.right : viewport.left - 90}px`,\n        sm: `${direction === 'ltr' ? viewport.right - 50 : viewport.left - 50}px`,\n        xs: `${direction === 'ltr' ? viewport.right - 100 : viewport.left + 10}px`,\n      });\n      setY({\n        sm: `${viewport.height + (heading?.height ?? 0) + 20}px`,\n        xs: `${viewport.height + (heading?.height ?? 0) - 25}px`,\n      });\n    }\n  }, [emblaApi, setY, setX, isSm, isXs, window.innerWidth, direction]);\n\n  useEffect(updateNumberingPosition, [updateNumberingPosition]);\n  useEffect(() => {\n    const e = () => updateNumberingPosition();\n    window.addEventListener('resize', e);\n    if (emblaApi) {\n      emblaApi.on('select', e);\n    }\n    return () => {\n      window.removeEventListener('resize', e);\n      if (emblaApi) {\n        emblaApi.off('select', e);\n      }\n    };\n  }, [updateNumberingPosition, emblaApi]);\n\n  return {\n    top: y,\n    left: x,\n    right: 'inherit',\n    backgroundColor: isXs ? '#000000BF !important' : 'transparent',\n    '.total-container': {\n      color: isXs ? '##9E9FA0 !important' : '#5A5B5C !important',\n    },\n    '.separator-container': {\n      color: '#E4E4E4 !important',\n    },\n    '.index-container': {\n      color: isXs ? '#FFFFFF !important' : '#161718 !important',\n    },\n  };\n};\n"],"names":["HeroDefaultProps","direction","HeroCarousel","inProps","heroProps","Object","assign","props","useDefaultProps","emblaRef","emblaApi","useEmbla","headingRef","useRef","viewportRef","containerLeft","peekNextOnHover","peekPrevOnHover","resetPeek","useContainerPeek","activeFooter","setActiveFooter","useState","numberingStyles","useNumberingStyles","current","_jsx","HeroCarouselContext","Provider","value","children","_jsxs","Box","className","position","dir","slidesInView","sx","overflow","Stack","component","Container","spacing","fixed","height","heading","ref","Typography","variant","ViewPort","e","width","xl","md","sm","xs","ItemsContainer","left","gap","NavButton","type","onMouseEnter","onMouseLeave","button","visibility","lg","paddingRight","numbering","Numbering","separator","numberingSeparator","color","NumberingColors","DARK","size","NumberingSizes","LARGE","isSm","useMediaQuery","theme","breakpoints","only","isXs","x","setX","y","setY","updateNumberingPosition","useCallback","viewport","getBoundingClientRect","right","_a","_b","window","innerWidth","useEffect","addEventListener","on","removeEventListener","off","top","backgroundColor"],"mappings":"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"}

package/organisms/carousel2/hooks/useContainerPeek.js

@@ -1,2 +1,2 @@
-import{useState as e,useCallback as r,useEffect as t}from"react";const c=(c,o,n)=>{const[l,a]=e(),p=r((()=>{if(c){("ltr"===o?c.canScrollNext():c.canScrollPrev())&&a("-4%")}}),[c,a,n,o]),x=r((()=>{if(c){("rtl"===o?c.canScrollNext():c.canScrollPrev())&&a("4%")}}),[c,a,n,o]),v=r((()=>{a("0px")}),[a]);return t((()=>{c&&c.on("select",(()=>{a("0px")}))}),[c]),{containerLeft:l,peekNextOnHover:p,peekPrevOnHover:x,resetPeek:v}};export{c as useContainerPeek};
+import{useState as e,useCallback as r,useEffect as t}from"react";const c=(c,o,n)=>{const[l,a]=e(),p=r(()=>{if(c){("ltr"===o?c.canScrollNext():c.canScrollPrev())&&a("-4%")}},[c,a,n,o]),x=r(()=>{if(c){("rtl"===o?c.canScrollNext():c.canScrollPrev())&&a("4%")}},[c,a,n,o]),v=r(()=>{a("0px")},[a]);return t(()=>{c&&c.on("select",()=>{a("0px")})},[c]),{containerLeft:l,peekNextOnHover:p,peekPrevOnHover:x,resetPeek:v}};export{c as useContainerPeek};
 //# sourceMappingURL=useContainerPeek.js.map

package/organisms/carousel2/hooks/useContainerPeek.js.map

@@ -1 +1 @@
-{"version":3,"file":"useContainerPeek.js","sources":["../../../../src/organisms/carousel2/hooks/useContainerPeek.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { EmblaCarouselType } from 'embla-carousel-react';\n\n/**\n * Provides functionality to peek over the next slide\n */\nexport const useContainerPeek = (\n  emblaApi: EmblaCarouselType,\n  direction: 'ltr' | 'rtl',\n  positions?: { prev: string; next: string },\n) => {\n  const [containerLeft, setContainerLeft] = useState<string | undefined>();\n\n  const peekNextOnHover = useCallback(() => {\n    if (emblaApi) {\n      const canScroll = direction === 'ltr' ? emblaApi.canScrollNext() : emblaApi.canScrollPrev();\n      if (canScroll) {\n        setContainerLeft(positions?.next ?? '-4%');\n      }\n    }\n  }, [emblaApi, setContainerLeft, positions, direction]);\n\n  const peekPrevOnHover = useCallback(() => {\n    if (emblaApi) {\n      const canScroll = direction === 'rtl' ? emblaApi.canScrollNext() : emblaApi.canScrollPrev();\n      if (canScroll) {\n        setContainerLeft(positions?.prev ?? '4%');\n      }\n    }\n  }, [emblaApi, setContainerLeft, positions, direction]);\n\n  const resetPeek = useCallback(() => {\n    setContainerLeft('0px');\n  }, [setContainerLeft]);\n\n  useEffect(() => {\n    if (emblaApi) {\n      emblaApi.on('select', () => {\n        setContainerLeft('0px');\n      });\n    }\n  }, [emblaApi]);\n\n  return {\n    containerLeft,\n    peekNextOnHover,\n    peekPrevOnHover,\n    resetPeek,\n  };\n};\n"],"names":["useContainerPeek","emblaApi","direction","positions","containerLeft","setContainerLeft","useState","peekNextOnHover","useCallback","canScrollNext","canScrollPrev","peekPrevOnHover","resetPeek","useEffect","on"],"mappings":"iEAMO,MAAMA,EAAmB,CAC9BC,EACAC,EACAC,KAEA,MAAOC,EAAeC,GAAoBC,IAEpCC,EAAkBC,GAAY,KAClC,GAAIP,EAAU,EACoB,QAAdC,EAAsBD,EAASQ,gBAAkBR,EAASS,kBAE1EL,EAAoC,MAExC,IACC,CAACJ,EAAUI,EAAkBF,EAAWD,IAErCS,EAAkBH,GAAY,KAClC,GAAIP,EAAU,EACoB,QAAdC,EAAsBD,EAASQ,gBAAkBR,EAASS,kBAE1EL,EAAoC,KAExC,IACC,CAACJ,EAAUI,EAAkBF,EAAWD,IAErCU,EAAYJ,GAAY,KAC5BH,EAAiB,MAAM,GACtB,CAACA,IAUJ,OARAQ,GAAU,KACJZ,GACFA,EAASa,GAAG,UAAU,KACpBT,EAAiB,MAAM,GAE3B,GACC,CAACJ,IAEG,CACLG,gBACAG,kBACAI,kBACAC,YACD"}
+{"version":3,"file":"useContainerPeek.js","sources":["../../../../src/organisms/carousel2/hooks/useContainerPeek.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { EmblaCarouselType } from 'embla-carousel-react';\n\n/**\n * Provides functionality to peek over the next slide\n */\nexport const useContainerPeek = (\n  emblaApi: EmblaCarouselType,\n  direction: 'ltr' | 'rtl',\n  positions?: { prev: string; next: string },\n) => {\n  const [containerLeft, setContainerLeft] = useState<string | undefined>();\n\n  const peekNextOnHover = useCallback(() => {\n    if (emblaApi) {\n      const canScroll = direction === 'ltr' ? emblaApi.canScrollNext() : emblaApi.canScrollPrev();\n      if (canScroll) {\n        setContainerLeft(positions?.next ?? '-4%');\n      }\n    }\n  }, [emblaApi, setContainerLeft, positions, direction]);\n\n  const peekPrevOnHover = useCallback(() => {\n    if (emblaApi) {\n      const canScroll = direction === 'rtl' ? emblaApi.canScrollNext() : emblaApi.canScrollPrev();\n      if (canScroll) {\n        setContainerLeft(positions?.prev ?? '4%');\n      }\n    }\n  }, [emblaApi, setContainerLeft, positions, direction]);\n\n  const resetPeek = useCallback(() => {\n    setContainerLeft('0px');\n  }, [setContainerLeft]);\n\n  useEffect(() => {\n    if (emblaApi) {\n      emblaApi.on('select', () => {\n        setContainerLeft('0px');\n      });\n    }\n  }, [emblaApi]);\n\n  return {\n    containerLeft,\n    peekNextOnHover,\n    peekPrevOnHover,\n    resetPeek,\n  };\n};\n"],"names":["useContainerPeek","emblaApi","direction","positions","containerLeft","setContainerLeft","useState","peekNextOnHover","useCallback","canScrollNext","canScrollPrev","peekPrevOnHover","resetPeek","useEffect","on"],"mappings":"iEAMO,MAAMA,EAAmB,CAC9BC,EACAC,EACAC,KAEA,MAAOC,EAAeC,GAAoBC,IAEpCC,EAAkBC,EAAY,KAClC,GAAIP,EAAU,EACoB,QAAdC,EAAsBD,EAASQ,gBAAkBR,EAASS,kBAE1EL,EAAoC,MAExC,GACC,CAACJ,EAAUI,EAAkBF,EAAWD,IAErCS,EAAkBH,EAAY,KAClC,GAAIP,EAAU,EACoB,QAAdC,EAAsBD,EAASQ,gBAAkBR,EAASS,kBAE1EL,EAAoC,KAExC,GACC,CAACJ,EAAUI,EAAkBF,EAAWD,IAErCU,EAAYJ,EAAY,KAC5BH,EAAiB,QAChB,CAACA,IAUJ,OARAQ,EAAU,KACJZ,GACFA,EAASa,GAAG,SAAU,KACpBT,EAAiB,UAGpB,CAACJ,IAEG,CACLG,gBACAG,kBACAI,kBACAC"}

package/organisms/carousel2/hooks/useDefaultProps.js

@@ -1,2 +1,2 @@
-import{useMemo as t}from"react";const o={prevIcon:"arrow-left",nextIcon:"arrow-right",iconStyle:"regular",iconSize:"medium",variant:"standard",color:"dark"},e=e=>{const r=t((()=>{if(e.controlOptions)return Object.assign({},o,e.controlOptions)}),[e.controlOptions]);return t((()=>Object.assign(Object.assign({align:"start",autoPlay:!1,buttonAreaControlsHeight:"50%",buttonControls:!0,buttonControlsPosition:"0",cssClass:"",direction:"ltr",isSlideDifferentWidth:!1,loop:!1,numberingSeparator:"/",numberingSlides:!0,progressbar:!1,slideToScroll:1,slideToShow:1,slideSelectedClass:"slide-selected",speed:10,startIndex:0,bulletScroll:!1,bulletStyle:"dot",bulletTheme:"dark",autoPlayDelay:1600},e),{controlOptions:r})),[e,r])};export{e as useDefaultProps};
+import{useMemo as t}from"react";const o={prevIcon:"arrow-left",nextIcon:"arrow-right",iconStyle:"regular",iconSize:"medium",variant:"standard",color:"dark"},e=e=>{const r=t(()=>{if(e.controlOptions)return Object.assign({},o,e.controlOptions)},[e.controlOptions]);return t(()=>Object.assign(Object.assign({align:"start",autoPlay:!1,buttonAreaControlsHeight:"50%",buttonControls:!0,buttonControlsPosition:"0",cssClass:"",direction:"ltr",isSlideDifferentWidth:!1,loop:!1,numberingSeparator:"/",numberingSlides:!0,progressbar:!1,slideToScroll:1,slideToShow:1,slideSelectedClass:"slide-selected",speed:10,startIndex:0,bulletScroll:!1,bulletStyle:"dot",bulletTheme:"dark",autoPlayDelay:1600},e),{controlOptions:r}),[e,r])};export{e as useDefaultProps};
 //# sourceMappingURL=useDefaultProps.js.map

package/organisms/carousel2/hooks/useDefaultProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDefaultProps.js","sources":["../../../../src/organisms/carousel2/hooks/useDefaultProps.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Carousel2Props } from '../carousel2';\n\nconst defaultControlOptions = {\n  prevIcon: 'arrow-left',\n  nextIcon: 'arrow-right',\n  iconStyle: 'regular',\n  iconSize: 'medium',\n  variant: 'standard',\n  color: 'dark',\n};\n\nexport const useDefaultProps = (props: Carousel2Props): Carousel2Props => {\n  const controlOptions = useMemo(() => {\n    if (props.controlOptions) {\n      return Object.assign({}, defaultControlOptions, props.controlOptions);\n    }\n    return undefined;\n  }, [props.controlOptions]);\n\n  return useMemo(() => {\n    return {\n      align: 'start',\n      autoPlay: false,\n      buttonAreaControlsHeight: '50%',\n      buttonControls: true,\n      buttonControlsPosition: '0',\n      cssClass: '',\n      direction: 'ltr',\n      isSlideDifferentWidth: false,\n      loop: false,\n      numberingSeparator: '/',\n      numberingSlides: true,\n      progressbar: false,\n      slideToScroll: 1,\n      slideToShow: 1,\n      slideSelectedClass: 'slide-selected',\n      speed: 10,\n      startIndex: 0,\n      bulletScroll: false,\n      bulletStyle: 'dot',\n      bulletTheme: 'dark',\n      autoPlayDelay: 1600,\n      ...props,\n      controlOptions,\n    };\n  }, [props, controlOptions]);\n};\n"],"names":["defaultControlOptions","prevIcon","nextIcon","iconStyle","iconSize","variant","color","useDefaultProps","props","controlOptions","useMemo","Object","assign","align","autoPlay","buttonAreaControlsHeight","buttonControls","buttonControlsPosition","cssClass","direction","isSlideDifferentWidth","loop","numberingSeparator","numberingSlides","progressbar","slideToScroll","slideToShow","slideSelectedClass","speed","startIndex","bulletScroll","bulletStyle","bulletTheme","autoPlayDelay"],"mappings":"gCAGA,MAAMA,EAAwB,CAC5BC,SAAU,aACVC,SAAU,cACVC,UAAW,UACXC,SAAU,SACVC,QAAS,WACTC,MAAO,QAGIC,EAAmBC,IAC9B,MAAMC,EAAiBC,GAAQ,KAC7B,GAAIF,EAAMC,eACR,OAAOE,OAAOC,OAAO,CAAA,EAAIZ,EAAuBQ,EAAMC,eAExC,GACf,CAACD,EAAMC,iBAEV,OAAOC,GAAQ,IACbC,OAAAC,OAAAD,OAAAC,OAAA,CACEC,MAAO,QACPC,UAAU,EACVC,yBAA0B,MAC1BC,gBAAgB,EAChBC,uBAAwB,IACxBC,SAAU,GACVC,UAAW,MACXC,uBAAuB,EACvBC,MAAM,EACNC,mBAAoB,IACpBC,iBAAiB,EACjBC,aAAa,EACbC,cAAe,EACfC,YAAa,EACbC,mBAAoB,iBACpBC,MAAO,GACPC,WAAY,EACZC,cAAc,EACdC,YAAa,MACbC,YAAa,OACbC,cAAe,MACZzB,GAAK,CACRC,oBAED,CAACD,EAAOC,GAAgB"}
+{"version":3,"file":"useDefaultProps.js","sources":["../../../../src/organisms/carousel2/hooks/useDefaultProps.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Carousel2Props } from '../carousel2';\n\nconst defaultControlOptions = {\n  prevIcon: 'arrow-left',\n  nextIcon: 'arrow-right',\n  iconStyle: 'regular',\n  iconSize: 'medium',\n  variant: 'standard',\n  color: 'dark',\n};\n\nexport const useDefaultProps = (props: Carousel2Props): Carousel2Props => {\n  const controlOptions = useMemo(() => {\n    if (props.controlOptions) {\n      return Object.assign({}, defaultControlOptions, props.controlOptions);\n    }\n    return undefined;\n  }, [props.controlOptions]);\n\n  return useMemo(() => {\n    return {\n      align: 'start',\n      autoPlay: false,\n      buttonAreaControlsHeight: '50%',\n      buttonControls: true,\n      buttonControlsPosition: '0',\n      cssClass: '',\n      direction: 'ltr',\n      isSlideDifferentWidth: false,\n      loop: false,\n      numberingSeparator: '/',\n      numberingSlides: true,\n      progressbar: false,\n      slideToScroll: 1,\n      slideToShow: 1,\n      slideSelectedClass: 'slide-selected',\n      speed: 10,\n      startIndex: 0,\n      bulletScroll: false,\n      bulletStyle: 'dot',\n      bulletTheme: 'dark',\n      autoPlayDelay: 1600,\n      ...props,\n      controlOptions,\n    };\n  }, [props, controlOptions]);\n};\n"],"names":["defaultControlOptions","prevIcon","nextIcon","iconStyle","iconSize","variant","color","useDefaultProps","props","controlOptions","useMemo","Object","assign","align","autoPlay","buttonAreaControlsHeight","buttonControls","buttonControlsPosition","cssClass","direction","isSlideDifferentWidth","loop","numberingSeparator","numberingSlides","progressbar","slideToScroll","slideToShow","slideSelectedClass","speed","startIndex","bulletScroll","bulletStyle","bulletTheme","autoPlayDelay"],"mappings":"gCAGA,MAAMA,EAAwB,CAC5BC,SAAU,aACVC,SAAU,cACVC,UAAW,UACXC,SAAU,SACVC,QAAS,WACTC,MAAO,QAGIC,EAAmBC,IAC9B,MAAMC,EAAiBC,EAAQ,KAC7B,GAAIF,EAAMC,eACR,OAAOE,OAAOC,OAAO,CAAA,EAAIZ,EAAuBQ,EAAMC,iBAGvD,CAACD,EAAMC,iBAEV,OAAOC,EAAQ,IACbC,OAAAC,OAAAD,OAAAC,OAAA,CACEC,MAAO,QACPC,UAAU,EACVC,yBAA0B,MAC1BC,gBAAgB,EAChBC,uBAAwB,IACxBC,SAAU,GACVC,UAAW,MACXC,uBAAuB,EACvBC,MAAM,EACNC,mBAAoB,IACpBC,iBAAiB,EACjBC,aAAa,EACbC,cAAe,EACfC,YAAa,EACbC,mBAAoB,iBACpBC,MAAO,GACPC,WAAY,EACZC,cAAc,EACdC,YAAa,MACbC,YAAa,OACbC,cAAe,MACZzB,GAAK,CACRC,mBAED,CAACD,EAAOC"}

package/organisms/carousel2/hooks/useEmbla.js

@@ -1,2 +1,2 @@
-import o from"embla-carousel-react";import{useMediaQuery as a}from"@mui/material";import t from"embla-carousel-autoplay";import{useMemo as r}from"react";const e=e=>{const l=a((o=>o.breakpoints.down("sm"))),i=r((()=>t({playOnInit:!!e.autoPlay,delay:e.autoPlayDelay})),[e.autoPlay]),n=r((()=>Object.assign({align:e.align,axis:"x",containScroll:"center"!==e.align?"trimSnaps":"",direction:e.direction,loop:e.loop,slidesToScroll:l?1:e.slideToScroll,skipSnaps:!1,speed:e.speed,startIndex:e.startIndex},e.options)),[e,l]);return o(n,[i])};export{e as useEmbla};
+import o from"embla-carousel-react";import{useMediaQuery as a}from"@mui/material";import t from"embla-carousel-autoplay";import{useMemo as r}from"react";const e=e=>{const l=a(o=>o.breakpoints.down("sm")),i=r(()=>t({playOnInit:!!e.autoPlay,delay:e.autoPlayDelay}),[e.autoPlay]),n=r(()=>Object.assign({align:e.align,axis:"x",containScroll:"center"!==e.align?"trimSnaps":"",direction:e.direction,loop:e.loop,slidesToScroll:l?1:e.slideToScroll,skipSnaps:!1,speed:e.speed,startIndex:e.startIndex},e.options),[e,l]);return o(n,[i])};export{e as useEmbla};
 //# sourceMappingURL=useEmbla.js.map

package/organisms/carousel2/hooks/useEmbla.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEmbla.js","sources":["../../../../src/organisms/carousel2/hooks/useEmbla.ts"],"sourcesContent":["import useEmblaCarousel, { EmblaOptionsType } from 'embla-carousel-react';\nimport { Carousel2Props } from '../carousel2';\nimport { Theme, useMediaQuery } from '@mui/material';\nimport Autoplay from 'embla-carousel-autoplay';\nimport { useMemo } from 'react';\n\nexport const useEmbla = (props: Carousel2Props) => {\n  const smallerThanSm = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'));\n\n  const autoplayPlugin = useMemo(\n    () =>\n      Autoplay({\n        playOnInit: props.autoPlay ? true : false,\n        delay: props.autoPlayDelay,\n      }),\n    [props.autoPlay],\n  );\n\n  const emblaOptions: EmblaOptionsType = useMemo(\n    () => ({\n      align: props.align,\n      axis: 'x',\n      containScroll: props.align !== 'center' ? 'trimSnaps' : '',\n      direction: props.direction,\n      loop: props.loop,\n      slidesToScroll: smallerThanSm ? 1 : props.slideToScroll,\n      skipSnaps: false,\n      speed: props.speed,\n      startIndex: props.startIndex,\n      ...props.options,\n    }),\n    [props, smallerThanSm],\n  );\n\n  return useEmblaCarousel(emblaOptions, [autoplayPlugin]);\n};\n"],"names":["useEmbla","props","smallerThanSm","useMediaQuery","theme","breakpoints","down","autoplayPlugin","useMemo","Autoplay","playOnInit","autoPlay","delay","autoPlayDelay","emblaOptions","Object","assign","align","axis","containScroll","direction","loop","slidesToScroll","slideToScroll","skipSnaps","speed","startIndex","options","useEmblaCarousel"],"mappings":"yJAMO,MAAMA,EAAYC,IACvB,MAAMC,EAAgBC,GAAsBC,GAAUA,EAAMC,YAAYC,KAAK,QAEvEC,EAAiBC,GACrB,IACEC,EAAS,CACPC,aAAYT,EAAMU,SAClBC,MAAOX,EAAMY,iBAEjB,CAACZ,EAAMU,WAGHG,EAAiCN,GACrC,IAAMO,OAAAC,OAAA,CACJC,MAAOhB,EAAMgB,MACbC,KAAM,IACNC,cAA+B,WAAhBlB,EAAMgB,MAAqB,YAAc,GACxDG,UAAWnB,EAAMmB,UACjBC,KAAMpB,EAAMoB,KACZC,eAAgBpB,EAAgB,EAAID,EAAMsB,cAC1CC,WAAW,EACXC,MAAOxB,EAAMwB,MACbC,WAAYzB,EAAMyB,YACfzB,EAAM0B,UAEX,CAAC1B,EAAOC,IAGV,OAAO0B,EAAiBd,EAAc,CAACP,GAAgB"}
+{"version":3,"file":"useEmbla.js","sources":["../../../../src/organisms/carousel2/hooks/useEmbla.ts"],"sourcesContent":["import useEmblaCarousel, { EmblaOptionsType } from 'embla-carousel-react';\nimport { Carousel2Props } from '../carousel2';\nimport { Theme, useMediaQuery } from '@mui/material';\nimport Autoplay from 'embla-carousel-autoplay';\nimport { useMemo } from 'react';\n\nexport const useEmbla = (props: Carousel2Props) => {\n  const smallerThanSm = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'));\n\n  const autoplayPlugin = useMemo(\n    () =>\n      Autoplay({\n        playOnInit: props.autoPlay ? true : false,\n        delay: props.autoPlayDelay,\n      }),\n    [props.autoPlay],\n  );\n\n  const emblaOptions: EmblaOptionsType = useMemo(\n    () => ({\n      align: props.align,\n      axis: 'x',\n      containScroll: props.align !== 'center' ? 'trimSnaps' : '',\n      direction: props.direction,\n      loop: props.loop,\n      slidesToScroll: smallerThanSm ? 1 : props.slideToScroll,\n      skipSnaps: false,\n      speed: props.speed,\n      startIndex: props.startIndex,\n      ...props.options,\n    }),\n    [props, smallerThanSm],\n  );\n\n  return useEmblaCarousel(emblaOptions, [autoplayPlugin]);\n};\n"],"names":["useEmbla","props","smallerThanSm","useMediaQuery","theme","breakpoints","down","autoplayPlugin","useMemo","Autoplay","playOnInit","autoPlay","delay","autoPlayDelay","emblaOptions","Object","assign","align","axis","containScroll","direction","loop","slidesToScroll","slideToScroll","skipSnaps","speed","startIndex","options","useEmblaCarousel"],"mappings":"yJAMO,MAAMA,EAAYC,IACvB,MAAMC,EAAgBC,EAAsBC,GAAUA,EAAMC,YAAYC,KAAK,OAEvEC,EAAiBC,EACrB,IACEC,EAAS,CACPC,aAAYT,EAAMU,SAClBC,MAAOX,EAAMY,gBAEjB,CAACZ,EAAMU,WAGHG,EAAiCN,EACrC,IAAMO,OAAAC,OAAA,CACJC,MAAOhB,EAAMgB,MACbC,KAAM,IACNC,cAA+B,WAAhBlB,EAAMgB,MAAqB,YAAc,GACxDG,UAAWnB,EAAMmB,UACjBC,KAAMpB,EAAMoB,KACZC,eAAgBpB,EAAgB,EAAID,EAAMsB,cAC1CC,WAAW,EACXC,MAAOxB,EAAMwB,MACbC,WAAYzB,EAAMyB,YACfzB,EAAM0B,SAEX,CAAC1B,EAAOC,IAGV,OAAO0B,EAAiBd,EAAc,CAACP"}

package/organisms/carousel2/styledComponents/styledCarouselHorizontal.d.ts

@@ -3,6 +3,6 @@ export declare enum controlButtonsHover {
     NEXT = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNOC4xNDYgMTYuNDk2VjE5LjJIMjMuNzcyTDE2Ljg4MiAyNi4wMTJMMTguNTQ2IDI3LjY3NkwyOC4zNzQgMTcuODQ4TDE4LjU0NiA4LjAyTDE2Ljg4MiA5LjY4NEwyMy43NzIgMTYuNDk2SDguMTQ2WiIgZmlsbD0iIzE2MTcxOCIvPgo8L3N2Zz4K",
     PREV = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNMTkuMTE4IDI2LjAxMkwxMi4yMjggMTkuMkgyNy44NTRWMTYuNDk2SDEyLjIyOEwxOS4xMTggOS42ODRMMTcuNDU0IDguMDJMNy42MjYgMTcuODQ4TDE3LjQ1NCAyNy42NzZMMTkuMTE4IDI2LjAxMloiIGZpbGw9IiMxNjE3MTgiLz4KPC9zdmc+Cg=="
 }
-export declare const CarouselStyledHorizontal: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Carousel2Props & {
+export declare const CarouselStyledHorizontal: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & Carousel2Props & {
     theme?: any;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/organisms/common/buttonCardComponent/buttonCardComponent.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{useCallback as a}from"react";import{Button as c}from"../../../components/button/button.js";import{handleMaxChars as l}from"../../../utils/utilities.js";const o=({buttonObject:o,compact:r,className:e})=>{const n=a((t=>{t.callbackAnalytics&&t.callbackAnalytics(),t.url?window.open(encodeURI(t.url),t.target?t.target:""):t.callback&&t.callback()}),[]);return t("div",{className:e,children:t(c,{className:"cta-button",onClick:()=>n(o),compact:r,variant:o.variant,label:l(o.label,30)})})};export{o as default};
+import{jsx as t}from"react/jsx-runtime";import{useCallback as a}from"react";import{Button as c}from"../../../components/button/button.js";import{handleMaxChars as l}from"../../../utils/utilities.js";const o=({buttonObject:o,compact:r,className:e})=>{const n=a(t=>{t.callbackAnalytics&&t.callbackAnalytics(),t.url?window.open(encodeURI(t.url),t.target?t.target:""):t.callback&&t.callback()},[]);return t("div",{className:e,children:t(c,{className:"cta-button",onClick:()=>n(o),compact:r,variant:o.variant,label:l(o.label,30)})})};export{o as default};
 //# sourceMappingURL=buttonCardComponent.js.map

package/organisms/common/buttonCardComponent/buttonCardComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonCardComponent.js","sources":["../../../../src/organisms/common/buttonCardComponent/buttonCardComponent.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { Button, ButtonVariants } from '../../../components/button';\nimport { handleMaxChars } from '../../../utils/utilities';\n/**\n * @interface ButtonCardProps\n */\n\ninterface ButtonCardProps {\n  buttonObject?: {\n    label?: string;\n    variant?: ButtonVariants;\n    url?: string;\n    target?: string;\n    callback?: () => void;\n    callbackAnalytics?: () => void;\n  };\n  compact?: boolean;\n  className?: string;\n}\n\nconst ButtonCardComponent: React.FC<ButtonCardProps> = ({ buttonObject, compact, className }) => {\n  const onClickButton = useCallback((button) => {\n    button.callbackAnalytics && button.callbackAnalytics();\n    if (button.url) {\n      window.open(encodeURI(button.url), button.target ? button.target : '');\n    } else {\n      button.callback && button.callback();\n    }\n  }, []);\n\n  return (\n    <div className={className}>\n      <Button\n        className=\"cta-button\"\n        onClick={() => onClickButton(buttonObject)}\n        compact={compact}\n        variant={buttonObject.variant}\n        label={handleMaxChars(buttonObject.label, 30)}\n      />\n    </div>\n  );\n};\n\nexport default ButtonCardComponent;\n"],"names":["ButtonCardComponent","buttonObject","compact","className","onClickButton","useCallback","button","callbackAnalytics","url","window","open","encodeURI","target","callback","_jsx","children","Button","onClick","variant","label","handleMaxChars"],"mappings":"uMAoBA,MAAMA,EAAiD,EAAGC,eAAcC,UAASC,gBAC/E,MAAMC,EAAgBC,GAAaC,IACjCA,EAAOC,mBAAqBD,EAAOC,oBAC/BD,EAAOE,IACTC,OAAOC,KAAKC,UAAUL,EAAOE,KAAMF,EAAOM,OAASN,EAAOM,OAAS,IAEnEN,EAAOO,UAAYP,EAAOO,UAC5B,GACC,IAEH,OACEC,SAAKX,UAAWA,EAASY,SACvBD,EAACE,EAAM,CACLb,UAAU,aACVc,QAAS,IAAMb,EAAcH,GAC7BC,QAASA,EACTgB,QAASjB,EAAaiB,QACtBC,MAAOC,EAAenB,EAAakB,MAAO,OAExC"}
+{"version":3,"file":"buttonCardComponent.js","sources":["../../../../src/organisms/common/buttonCardComponent/buttonCardComponent.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { Button, ButtonVariants } from '../../../components/button';\nimport { handleMaxChars } from '../../../utils/utilities';\n/**\n * @interface ButtonCardProps\n */\n\ninterface ButtonCardProps {\n  buttonObject?: {\n    label?: string;\n    variant?: ButtonVariants;\n    url?: string;\n    target?: string;\n    callback?: () => void;\n    callbackAnalytics?: () => void;\n  };\n  compact?: boolean;\n  className?: string;\n}\n\nconst ButtonCardComponent: React.FC<ButtonCardProps> = ({ buttonObject, compact, className }) => {\n  const onClickButton = useCallback((button) => {\n    button.callbackAnalytics && button.callbackAnalytics();\n    if (button.url) {\n      window.open(encodeURI(button.url), button.target ? button.target : '');\n    } else {\n      button.callback && button.callback();\n    }\n  }, []);\n\n  return (\n    <div className={className}>\n      <Button\n        className=\"cta-button\"\n        onClick={() => onClickButton(buttonObject)}\n        compact={compact}\n        variant={buttonObject.variant}\n        label={handleMaxChars(buttonObject.label, 30)}\n      />\n    </div>\n  );\n};\n\nexport default ButtonCardComponent;\n"],"names":["ButtonCardComponent","buttonObject","compact","className","onClickButton","useCallback","button","callbackAnalytics","url","window","open","encodeURI","target","callback","_jsx","children","Button","onClick","variant","label","handleMaxChars"],"mappings":"uMAoBA,MAAMA,EAAiD,EAAGC,eAAcC,UAASC,gBAC/E,MAAMC,EAAgBC,EAAaC,IACjCA,EAAOC,mBAAqBD,EAAOC,oBAC/BD,EAAOE,IACTC,OAAOC,KAAKC,UAAUL,EAAOE,KAAMF,EAAOM,OAASN,EAAOM,OAAS,IAEnEN,EAAOO,UAAYP,EAAOO,YAE3B,IAEH,OACEC,SAAKX,UAAWA,EAASY,SACvBD,EAACE,EAAM,CACLb,UAAU,aACVc,QAAS,IAAMb,EAAcH,GAC7BC,QAASA,EACTgB,QAASjB,EAAaiB,QACtBC,MAAOC,EAAenB,EAAakB,MAAO"}