@skodaflow/web-library 7.15.1 → 7.16.1

package/cjs/organisms/carousel2/galleryCarousel/galleryCarousel.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("../hooks/useDefaultProps.js"),i=require("../hooks/useEmbla.js"),s=require("../../../utils/enum.js"),o=require("@mui/material"),n=require("../components/ItemsContainer.js"),l=require("../components/ViewPort.js"),a=require("../components/NavButton.js"),u=require("../components/Numbering.js"),c=require("../hooks/useContainerPeek.js"),d=require("../../../utils/ResponsiveType.js"),p=require("./galleryContext.js");const m={align:"start",height:"100%",controlOptions:{color:"light",buttonPosition:"30%",buttonAreaHeight:"30%"},maxSlideWidth:"100%",isSlideDifferentWidth:!0,cssClass:"gallery-variant"};exports.GalleryCarousel=x=>{const h=Object.assign(Object.assign({},m),x),g=r.useDefaultProps(h),[j,v]=i.useEmbla(g),{containerLeft:b,peekNextOnHover:f,peekPrevOnHover:q,resetPeek:C}=c.useContainerPeek(v,g.direction),P=d.useResponsiveProp(g.height),[y,N]=t.useState(),E=t.useCallback((()=>{if(v){const e=v.slideNodes()[v.slidesInView().pop()];if(e){const t=e.getElementsByTagName("picture").item(0);if(t){const e=t.getBoundingClientRect().bottom;N(e-62)}}}}),[v,N]);return t.useEffect(E,[E]),t.useEffect((()=>{const e=()=>E();return window.addEventListener("resize",e),v&&v.on("scroll",e),()=>{window.removeEventListener("resize",e),v&&v.off("scroll",e)}}),[E,v]),e.jsx(p.GalleryContextProvider,{children:e.jsx(o.Box,{sx:{overflow:"hidden"},className:"gallery","data-testid":"GalleryCarousel",dir:g.direction,"data-state":null==v?void 0:v.selectedScrollSnap(),children:e.jsxs(o.Box,{sx:{position:"relative",height:P,maxHeight:P},children:[e.jsxs(l.ViewPort,{emblaRef:j,children:[e.jsx(n.ItemsContainer,{left:b,children:g.children}),g.controlOptions&&e.jsxs(e.Fragment,{children:[e.jsx(a.NavButton,{direction:g.direction,emblaApi:v,type:"prev",onMouseEnter:q,onMouseLeave:C}),e.jsx(a.NavButton,{direction:g.direction,emblaApi:v,type:"next",onMouseEnter:f,onMouseLeave:C})]})]}),e.jsx(u.Numbering,{sx:{top:y?`${y}px`:"inherit",bottom:y?"inherit":"24px"},emblaApi:v,separator:g.numberingSeparator,color:s.NumberingColors.DARK,size:s.NumberingSizes.LARGE,direction:g.direction})]})})})},exports.GalleryDefaultProps=m;
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("../hooks/useDefaultProps.js"),i=require("../hooks/useEmbla.js"),s=require("../../../utils/enum.js"),o=require("@mui/material"),n=require("../components/ItemsContainer.js"),l=require("../components/ViewPort.js"),a=require("../components/NavButton.js"),u=require("../components/Numbering.js"),c=require("../hooks/useContainerPeek.js"),d=require("../../../utils/ResponsiveType.js"),p=require("./galleryContext.js");const m={align:"start",height:"100%",controlOptions:{color:"light",buttonPosition:"30%",buttonAreaHeight:"30%"},maxSlideWidth:"100%",isSlideDifferentWidth:!0,cssClass:"gallery-variant"};exports.GalleryCarousel=x=>{const h=Object.assign(Object.assign({},m),x),g=r.useDefaultProps(h),[j,v]=i.useEmbla(g),{containerLeft:b,peekNextOnHover:f,peekPrevOnHover:q,resetPeek:C}=c.useContainerPeek(v,g.direction),P=d.useResponsiveProp(g.height),[y,N]=t.useState(),E=t.useCallback(()=>{if(v){const e=v.slideNodes()[v.slidesInView().pop()];if(e){const t=e.getElementsByTagName("picture").item(0);if(t){const e=t.getBoundingClientRect().bottom;N(e-62)}}}},[v,N]);return t.useEffect(E,[E]),t.useEffect(()=>{const e=()=>E();return window.addEventListener("resize",e),v&&v.on("scroll",e),()=>{window.removeEventListener("resize",e),v&&v.off("scroll",e)}},[E,v]),e.jsx(p.GalleryContextProvider,{children:e.jsx(o.Box,{sx:{overflow:"hidden"},className:"gallery","data-testid":"GalleryCarousel",dir:g.direction,"data-state":null==v?void 0:v.selectedScrollSnap(),children:e.jsxs(o.Box,{sx:{position:"relative",height:P,maxHeight:P},children:[e.jsxs(l.ViewPort,{emblaRef:j,children:[e.jsx(n.ItemsContainer,{left:b,children:g.children}),g.controlOptions&&e.jsxs(e.Fragment,{children:[e.jsx(a.NavButton,{direction:g.direction,emblaApi:v,type:"prev",onMouseEnter:q,onMouseLeave:C}),e.jsx(a.NavButton,{direction:g.direction,emblaApi:v,type:"next",onMouseEnter:f,onMouseLeave:C})]})]}),e.jsx(u.Numbering,{sx:{top:y?`${y}px`:"inherit",bottom:y?"inherit":"24px"},emblaApi:v,separator:g.numberingSeparator,color:s.NumberingColors.DARK,size:s.NumberingSizes.LARGE,direction:g.direction})]})})})},exports.GalleryDefaultProps=m;
 //# sourceMappingURL=galleryCarousel.js.map

package/cjs/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","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":"0eAcO,MAAMA,EAA+C,CAC1DC,MAAO,QACPC,OAAQ,OACRC,eAAgB,CACdC,MAAO,QACPC,eAAgB,MAChBC,iBAAkB,OAEpBC,cAAe,OACfC,uBAAuB,EACvBC,SAAU,2CAuDoDC,IAC9D,MAAMC,EAAYC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAQb,GAAwBU,GAC5CI,EAAQC,EAAAA,gBAAgBJ,IAEvBK,EAAUC,GAAYC,EAAAA,SAASJ,IAChCK,cAAEA,EAAaC,gBAAEA,EAAeC,gBAAEA,EAAeC,UAAEA,GAAcC,mBAAiBN,EAAUH,EAAMU,WAElGtB,EAASuB,EAAAA,kBAAkBX,EAAMZ,SAEhCwB,EAAiBC,GAAsBC,aACxCC,EAA0BC,EAAAA,aAAY,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,YAAUX,EAAyB,CAACA,IACpCW,EAAAA,WAAU,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,MAACC,EAAAA,uBAAsB,CAAAC,SACrBF,EAAAA,IAACG,MAAG,CACFC,GAAI,CAAEC,SAAU,UAChBC,UAAU,UAAS,cACP,kBACZC,IAAKxC,EAAMU,UAAS,aACRP,eAAAA,EAAUsC,qBAAoBN,SAE1CO,EAAAA,KAACN,EAAAA,IAAG,CAACC,GAAI,CAAEM,SAAU,WAAYvD,SAAQwD,UAAWxD,GAAQ+C,SAAA,CAC1DO,OAACG,EAAAA,SAAQ,CAAC3C,SAAUA,EAAQiC,SAAA,CAC1BF,MAACa,EAAAA,eAAc,CAACC,KAAM1C,EAAa8B,SAAGnC,EAAMmC,WAC3CnC,EAAMX,gBACLqD,OAAAM,EAAAA,SAAA,CAAAb,SAAA,CACEF,EAAAA,IAACgB,EAAAA,UAAS,CACRvC,UAAWV,EAAMU,UACjBP,SAAUA,EACV+C,KAAK,OACLC,aAAc5C,EACd6C,aAAc5C,IAEhByB,EAAAA,IAACgB,YAAS,CACRvC,UAAWV,EAAMU,UACjBP,SAAUA,EACV+C,KAAK,OACLC,aAAc7C,EACd8C,aAAc5C,UAMtByB,EAAAA,IAACoB,YAAS,CACRhB,GAAI,CACFiB,IAAK1C,EAAkB,GAAGA,MAAsB,UAChDY,OAAQZ,EAAkB,UAAY,QAExCT,SAAUA,EACVoD,UAAWvD,EAAMwD,mBACjBlE,MAAOmE,EAAAA,gBAAgBC,KACvBC,KAAMC,EAAAA,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","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":"0eAcO,MAAMA,EAA+C,CAC1DC,MAAO,QACPC,OAAQ,OACRC,eAAgB,CACdC,MAAO,QACPC,eAAgB,MAChBC,iBAAkB,OAEpBC,cAAe,OACfC,uBAAuB,EACvBC,SAAU,2CAuDoDC,IAC9D,MAAMC,EAAYC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAQb,GAAwBU,GAC5CI,EAAQC,EAAAA,gBAAgBJ,IAEvBK,EAAUC,GAAYC,EAAAA,SAASJ,IAChCK,cAAEA,EAAaC,gBAAEA,EAAeC,gBAAEA,EAAeC,UAAEA,GAAcC,mBAAiBN,EAAUH,EAAMU,WAElGtB,EAASuB,EAAAA,kBAAkBX,EAAMZ,SAEhCwB,EAAiBC,GAAsBC,aACxCC,EAA0BC,EAAAA,YAAY,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,YAAUX,EAAyB,CAACA,IACpCW,EAAAA,UAAU,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,MAACC,EAAAA,uBAAsB,CAAAC,SACrBF,EAAAA,IAACG,MAAG,CACFC,GAAI,CAAEC,SAAU,UAChBC,UAAU,UAAS,cACP,kBACZC,IAAKxC,EAAMU,UAAS,aACRP,eAAAA,EAAUsC,qBAAoBN,SAE1CO,EAAAA,KAACN,EAAAA,IAAG,CAACC,GAAI,CAAEM,SAAU,WAAYvD,SAAQwD,UAAWxD,GAAQ+C,SAAA,CAC1DO,OAACG,EAAAA,SAAQ,CAAC3C,SAAUA,EAAQiC,SAAA,CAC1BF,MAACa,EAAAA,eAAc,CAACC,KAAM1C,EAAa8B,SAAGnC,EAAMmC,WAC3CnC,EAAMX,gBACLqD,OAAAM,EAAAA,SAAA,CAAAb,SAAA,CACEF,EAAAA,IAACgB,EAAAA,UAAS,CACRvC,UAAWV,EAAMU,UACjBP,SAAUA,EACV+C,KAAK,OACLC,aAAc5C,EACd6C,aAAc5C,IAEhByB,EAAAA,IAACgB,YAAS,CACRvC,UAAWV,EAAMU,UACjBP,SAAUA,EACV+C,KAAK,OACLC,aAAc7C,EACd8C,aAAc5C,UAMtByB,EAAAA,IAACoB,YAAS,CACRhB,GAAI,CACFiB,IAAK1C,EAAkB,GAAGA,MAAsB,UAChDY,OAAQZ,EAAkB,UAAY,QAExCT,SAAUA,EACVoD,UAAWvD,EAAMwD,mBACjBlE,MAAOmE,EAAAA,gBAAgBC,KACvBC,KAAMC,EAAAA,eAAeC,MACrBnD,UAAWV,EAAMU"}

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

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

package/cjs/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":["shadowStyle","content","display","zIndex","position","left","right","height","top","background","bottom","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","header","Stack","direction","spacing","sm","md","padding","component","Object","assign","media","values","xl","srcSet","lg","xs","objectFit","src","alt","footer","paddingRight"],"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":["shadowStyle","content","display","zIndex","position","left","right","height","top","background","bottom","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","header","Stack","direction","spacing","sm","md","padding","component","Object","assign","media","values","xl","srcSet","lg","xs","objectFit","src","alt","footer","paddingRight"],"mappings":"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"}

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

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

package/cjs/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","children","useState","ctxValue","useMemo","_jsx","Provider","value"],"mappings":"mEAmBO,MAAMA,EAAiBC,EAAAA,cAAkC,CAC9DC,aAAc,EACdC,aAAc,EACdC,gBAAiB,OACjBC,gBAAiB,OACjBC,MAAO,OACPC,SAAU,iEAOiE,EAAGC,eAC9E,MAAON,EAAcE,GAAmBK,EAAAA,SAAiB,IAClDN,EAAcE,GAAmBI,EAAAA,SAAiB,GAEnDC,EAAWC,EAAAA,SACf,KAAA,CACET,eACAE,kBACAD,eACAE,kBACAC,MAAO,OACPC,SAAU,UAEZ,CAACL,EAAcE,EAAiBD,EAAcE,IAGhD,OAAOO,EAAAA,IAACZ,EAAea,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","children","useState","ctxValue","useMemo","_jsx","Provider","value"],"mappings":"mEAmBO,MAAMA,EAAiBC,EAAAA,cAAkC,CAC9DC,aAAc,EACdC,aAAc,EACdC,gBAAiB,OACjBC,gBAAiB,OACjBC,MAAO,OACPC,SAAU,iEAOiE,EAAGC,eAC9E,MAAON,EAAcE,GAAmBK,EAAAA,SAAiB,IAClDN,EAAcE,GAAmBI,EAAAA,SAAiB,GAEnDC,EAAWC,EAAAA,QACf,KAAA,CACET,eACAE,kBACAD,eACAE,kBACAC,MAAO,OACPC,SAAU,SAEZ,CAACL,EAAcE,EAAiBD,EAAcE,IAGhD,OAAOO,EAAAA,IAACZ,EAAea,SAAQ,CAACC,MAAOJ,EAAQF,SAAGA"}

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

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

package/cjs/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":["children","color","useContext","GalleryItemContext","smallerThanMd","useMediaQuery","theme","breakpoints","down","fontColor","useMemo","_jsx","Typography","variant","sx","letterSpacing"],"mappings":"8JAQqE,EAAGA,eACtE,MAAMC,MAAEA,GAAUC,EAAAA,WAAWC,sBACvBC,EAAgBC,EAAAA,eAAsBC,GAAUA,EAAMC,YAAYC,KAAK,QAEvEC,EAAYC,EAAAA,SAAQ,IACpBN,EACK,UAEQ,UAAVH,EAAoB,OAAS,WACnC,CAACG,EAAeH,IAEnB,OACEU,EAAAA,IAACC,EAAAA,WAAU,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":["children","color","useContext","GalleryItemContext","smallerThanMd","useMediaQuery","theme","breakpoints","down","fontColor","useMemo","_jsx","Typography","variant","sx","letterSpacing"],"mappings":"8JAQqE,EAAGA,eACtE,MAAMC,MAAEA,GAAUC,EAAAA,WAAWC,sBACvBC,EAAgBC,EAAAA,cAAsBC,GAAUA,EAAMC,YAAYC,KAAK,OAEvEC,EAAYC,EAAAA,QAAQ,IACpBN,EACK,UAEQ,UAAVH,EAAoB,OAAS,UACnC,CAACG,EAAeH,IAEnB,OACEU,EAAAA,IAACC,EAAAA,WAAU,CACTX,MAAOQ,EACPI,QAAQ,KACRC,GAAI,CACFC,cAAe,qBAChB,cACW,mBAAkBf,SAE7BA"}

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

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

package/cjs/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":["useActivateFooter","containerRef","footer","emblaApi","setActiveFooter","useContext","HeroCarouselContext","activateFooter","useCallback","slideIndex","selectedScrollSnap","activeSlide","slideNodes","useEffect","e","on","off","props","theme","useTheme","imageSrc","useResponsiveProp","imageFit","useRef","current","_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"],"mappings":"kLAoEO,MA8CDA,EAAoB,CAACC,EAA8BC,KACvD,MAAMC,SAAEA,EAAQC,gBAAEA,GAAoBC,EAAAA,WAAWC,EAAAA,qBAE3CC,EAAiBC,EAAAA,aAAY,KACjC,GAAIL,EAAU,CACZ,MAAMM,EAAaN,EAASO,qBAEtBC,EADSR,EAASS,aACGH,GACvBR,IAAiBU,GACnBP,EAAgBF,EAEpB,IACC,CAACA,EAAQE,EAAiBD,IAE7BU,EAAAA,WAAU,KACR,GAAIV,EAAU,CACZ,MAAMW,EAAI,IAAMP,IAEhB,OADAJ,EAASY,GAAG,SAAUD,GACf,KACLX,EAASa,IAAI,SAAUF,EAAE,CAE7B,IACC,GAAGX,IAENU,YAAUN,EAAgB,CAACJ,GAAU,4BAtE6Bc,UAClE,MAAMC,EAAQC,EAAAA,WACRC,EAAWC,EAAAA,kBAAkBJ,EAAMG,UACnCE,EAAWD,EAAAA,kBAAkBJ,EAAMK,UAEnCrB,EAAesB,EAAAA,OAAO,MAG5B,OAFAvB,EAAkBC,EAAauB,QAASP,EAAMf,QAG5CuB,EAAAA,IAACC,EAAAA,IAAG,CACFC,IAAK1B,EACL2B,GAAI,CACF,KAAM,CACJC,kBAAWC,EAAAb,EAAMc,qBAAS,SAE7B,cACW,iBAAgBC,SAE5BC,EAAAA,KAACP,EAAAA,IAAG,CACFQ,UAAU,UACVN,GAAI,CACFO,QAAS,OACTC,SAAU,WACVC,OAAQ,QACTL,SAAA,CAEDP,EAAAA,IAAA,SAAA,CAAQa,MAAO,eAAepB,EAAMqB,YAAYC,OAAOC,QAASC,OAAQtB,EAASqB,KACjFhB,EAAAA,IAAA,SAAA,CAAQa,MAAO,eAAepB,EAAMqB,YAAYC,OAAOG,QAASD,OAAQtB,EAASuB,KACjFlB,EAAAA,cAAQa,MAAO,eAAepB,EAAMqB,YAAYC,OAAOI,QAASF,OAAQtB,EAASwB,KACjFnB,MAAA,SAAA,CAAQa,MAAO,eAAepB,EAAMqB,YAAYC,OAAOK,QAASH,OAAQtB,EAASyB,KACjFpB,EAAAA,IAAA,SAAA,CAAQa,MAAO,eAAepB,EAAMqB,YAAYC,OAAOK,QAASH,OAAQtB,EAAS0B,KACjFrB,EAAAA,IAACC,EAAAA,IAAG,CACFQ,UAAU,MACVN,GAAI,CACFS,OAAQ,OACRN,MAAO,OACPgB,UAAWzB,QAAAA,EAAY,SAEzB0B,IAAK5B,EAAS0B,GACdG,IAAKhC,EAAMgC,UAGX"}
+{"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":["useActivateFooter","containerRef","footer","emblaApi","setActiveFooter","useContext","HeroCarouselContext","activateFooter","useCallback","slideIndex","selectedScrollSnap","activeSlide","slideNodes","useEffect","e","on","off","props","theme","useTheme","imageSrc","useResponsiveProp","imageFit","useRef","current","_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"],"mappings":"kLAoEO,MA8CDA,EAAoB,CAACC,EAA8BC,KACvD,MAAMC,SAAEA,EAAQC,gBAAEA,GAAoBC,EAAAA,WAAWC,EAAAA,qBAE3CC,EAAiBC,EAAAA,YAAY,KACjC,GAAIL,EAAU,CACZ,MAAMM,EAAaN,EAASO,qBAEtBC,EADSR,EAASS,aACGH,GACvBR,IAAiBU,GACnBP,EAAgBF,EAEpB,GACC,CAACA,EAAQE,EAAiBD,IAE7BU,EAAAA,UAAU,KACR,GAAIV,EAAU,CACZ,MAAMW,EAAI,IAAMP,IAEhB,OADAJ,EAASY,GAAG,SAAUD,GACf,KACLX,EAASa,IAAI,SAAUF,GAE3B,GACC,GAAGX,IAENU,YAAUN,EAAgB,CAACJ,+BAtEuCc,UAClE,MAAMC,EAAQC,EAAAA,WACRC,EAAWC,EAAAA,kBAAkBJ,EAAMG,UACnCE,EAAWD,EAAAA,kBAAkBJ,EAAMK,UAEnCrB,EAAesB,EAAAA,OAAO,MAG5B,OAFAvB,EAAkBC,EAAauB,QAASP,EAAMf,QAG5CuB,EAAAA,IAACC,EAAAA,IAAG,CACFC,IAAK1B,EACL2B,GAAI,CACF,KAAM,CACJC,kBAAWC,EAAAb,EAAMc,qBAAS,SAE7B,cACW,iBAAgBC,SAE5BC,EAAAA,KAACP,EAAAA,IAAG,CACFQ,UAAU,UACVN,GAAI,CACFO,QAAS,OACTC,SAAU,WACVC,OAAQ,QACTL,SAAA,CAEDP,EAAAA,IAAA,SAAA,CAAQa,MAAO,eAAepB,EAAMqB,YAAYC,OAAOC,QAASC,OAAQtB,EAASqB,KACjFhB,EAAAA,IAAA,SAAA,CAAQa,MAAO,eAAepB,EAAMqB,YAAYC,OAAOG,QAASD,OAAQtB,EAASuB,KACjFlB,EAAAA,cAAQa,MAAO,eAAepB,EAAMqB,YAAYC,OAAOI,QAASF,OAAQtB,EAASwB,KACjFnB,MAAA,SAAA,CAAQa,MAAO,eAAepB,EAAMqB,YAAYC,OAAOK,QAASH,OAAQtB,EAASyB,KACjFpB,EAAAA,IAAA,SAAA,CAAQa,MAAO,eAAepB,EAAMqB,YAAYC,OAAOK,QAASH,OAAQtB,EAAS0B,KACjFrB,EAAAA,IAACC,EAAAA,IAAG,CACFQ,UAAU,MACVN,GAAI,CACFS,OAAQ,OACRN,MAAO,OACPgB,UAAWzB,QAAAA,EAAY,SAEzB0B,IAAK5B,EAAS0B,GACdG,IAAKhC,EAAMgC"}

package/cjs/organisms/carousel2/heroCarousel/heroCarousel.js

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

package/cjs/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","useNumberingStyles","emblaApi","headingRef","viewportRef","isSm","useMediaQuery","theme","breakpoints","only","isXs","x","setX","useState","y","setY","updateNumberingPosition","useCallback","viewport","getBoundingClientRect","heading","md","right","left","sm","xs","height","_a","_b","window","innerWidth","useEffect","e","addEventListener","on","removeEventListener","off","top","backgroundColor","color","inProps","heroProps","Object","assign","props","useDefaultProps","emblaRef","useEmbla","useRef","containerLeft","peekNextOnHover","peekPrevOnHover","resetPeek","useContainerPeek","activeFooter","setActiveFooter","numberingStyles","current","_jsx","HeroCarouselContext","Provider","value","children","_jsxs","Box","className","position","dir","slidesInView","sx","overflow","Stack","component","Container","spacing","fixed","ref","Typography","variant","ViewPort","width","xl","ItemsContainer","gap","NavButton","type","onMouseEnter","onMouseLeave","button","visibility","lg","paddingRight","numbering","Numbering","separator","numberingSeparator","NumberingColors","DARK","size","NumberingSizes","LARGE"],"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","useNumberingStyles","emblaApi","headingRef","viewportRef","isSm","useMediaQuery","theme","breakpoints","only","isXs","x","setX","useState","y","setY","updateNumberingPosition","useCallback","viewport","getBoundingClientRect","heading","md","right","left","sm","xs","height","_a","_b","window","innerWidth","useEffect","e","addEventListener","on","removeEventListener","off","top","backgroundColor","color","inProps","heroProps","Object","assign","props","useDefaultProps","emblaRef","useEmbla","useRef","containerLeft","peekNextOnHover","peekPrevOnHover","resetPeek","useContainerPeek","activeFooter","setActiveFooter","numberingStyles","current","_jsx","HeroCarouselContext","Provider","value","children","_jsxs","Box","className","position","dir","slidesInView","sx","overflow","Stack","component","Container","spacing","fixed","ref","Typography","variant","ViewPort","width","xl","ItemsContainer","gap","NavButton","type","onMouseEnter","onMouseLeave","button","visibility","lg","paddingRight","numbering","Numbering","separator","numberingSeparator","NumberingColors","DARK","size","NumberingSizes","LARGE"],"mappings":"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"}

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

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

package/cjs/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":["emblaApi","direction","positions","containerLeft","setContainerLeft","useState","peekNextOnHover","useCallback","canScrollNext","canScrollPrev","peekPrevOnHover","resetPeek","useEffect","on"],"mappings":"6DAMgC,CAC9BA,EACAC,EACAC,KAEA,MAAOC,EAAeC,GAAoBC,aAEpCC,EAAkBC,EAAAA,aAAY,KAClC,GAAIP,EAAU,EACoB,QAAdC,EAAsBD,EAASQ,gBAAkBR,EAASS,kBAE1EL,EAAoC,MAExC,IACC,CAACJ,EAAUI,EAAkBF,EAAWD,IAErCS,EAAkBH,EAAAA,aAAY,KAClC,GAAIP,EAAU,EACoB,QAAdC,EAAsBD,EAASQ,gBAAkBR,EAASS,kBAE1EL,EAAoC,KAExC,IACC,CAACJ,EAAUI,EAAkBF,EAAWD,IAErCU,EAAYJ,EAAAA,aAAY,KAC5BH,EAAiB,MAAM,GACtB,CAACA,IAUJ,OARAQ,EAAAA,WAAU,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":["emblaApi","direction","positions","containerLeft","setContainerLeft","useState","peekNextOnHover","useCallback","canScrollNext","canScrollPrev","peekPrevOnHover","resetPeek","useEffect","on"],"mappings":"6DAMgC,CAC9BA,EACAC,EACAC,KAEA,MAAOC,EAAeC,GAAoBC,aAEpCC,EAAkBC,EAAAA,YAAY,KAClC,GAAIP,EAAU,EACoB,QAAdC,EAAsBD,EAASQ,gBAAkBR,EAASS,kBAE1EL,EAAoC,MAExC,GACC,CAACJ,EAAUI,EAAkBF,EAAWD,IAErCS,EAAkBH,EAAAA,YAAY,KAClC,GAAIP,EAAU,EACoB,QAAdC,EAAsBD,EAASQ,gBAAkBR,EAASS,kBAE1EL,EAAoC,KAExC,GACC,CAACJ,EAAUI,EAAkBF,EAAWD,IAErCU,EAAYJ,EAAAA,YAAY,KAC5BH,EAAiB,QAChB,CAACA,IAUJ,OARAQ,EAAAA,UAAU,KACJZ,GACFA,EAASa,GAAG,SAAU,KACpBT,EAAiB,UAGpB,CAACJ,IAEG,CACLG,gBACAG,kBACAI,kBACAC"}

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

@@ -1,2 +1,2 @@
-"use strict";var t=require("react");const e={prevIcon:"arrow-left",nextIcon:"arrow-right",iconStyle:"regular",iconSize:"medium",variant:"standard",color:"dark"};exports.useDefaultProps=o=>{const r=t.useMemo((()=>{if(o.controlOptions)return Object.assign({},e,o.controlOptions)}),[o.controlOptions]);return t.useMemo((()=>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},o),{controlOptions:r})),[o,r])};
+"use strict";var t=require("react");const e={prevIcon:"arrow-left",nextIcon:"arrow-right",iconStyle:"regular",iconSize:"medium",variant:"standard",color:"dark"};exports.useDefaultProps=o=>{const r=t.useMemo(()=>{if(o.controlOptions)return Object.assign({},e,o.controlOptions)},[o.controlOptions]);return t.useMemo(()=>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},o),{controlOptions:r}),[o,r])};
 //# sourceMappingURL=useDefaultProps.js.map

package/cjs/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","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":"oCAGA,MAAMA,EAAwB,CAC5BC,SAAU,aACVC,SAAU,cACVC,UAAW,UACXC,SAAU,SACVC,QAAS,WACTC,MAAO,gCAGuBC,IAC9B,MAAMC,EAAiBC,EAAAA,SAAQ,KAC7B,GAAIF,EAAMC,eACR,OAAOE,OAAOC,OAAO,CAAA,EAAIX,EAAuBO,EAAMC,eAExC,GACf,CAACD,EAAMC,iBAEV,OAAOC,EAAAA,SAAQ,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","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":"oCAGA,MAAMA,EAAwB,CAC5BC,SAAU,aACVC,SAAU,cACVC,UAAW,UACXC,SAAU,SACVC,QAAS,WACTC,MAAO,gCAGuBC,IAC9B,MAAMC,EAAiBC,EAAAA,QAAQ,KAC7B,GAAIF,EAAMC,eACR,OAAOE,OAAOC,OAAO,CAAA,EAAIX,EAAuBO,EAAMC,iBAGvD,CAACD,EAAMC,iBAEV,OAAOC,EAAAA,QAAQ,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/cjs/organisms/carousel2/hooks/useEmbla.js

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

package/cjs/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":["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":"4NAMyBA,IACvB,MAAMC,EAAgBC,EAAAA,eAAsBC,GAAUA,EAAMC,YAAYC,KAAK,QAEvEC,EAAiBC,WACrB,IACEC,UAAS,CACPC,aAAYT,EAAMU,SAClBC,MAAOX,EAAMY,iBAEjB,CAACZ,EAAMU,WAGHG,EAAiCN,EAAAA,SACrC,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,UAAiBd,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":["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":"4NAMyBA,IACvB,MAAMC,EAAgBC,EAAAA,cAAsBC,GAAUA,EAAMC,YAAYC,KAAK,OAEvEC,EAAiBC,UACrB,IACEC,UAAS,CACPC,aAAYT,EAAMU,SAClBC,MAAOX,EAAMY,gBAEjB,CAACZ,EAAMU,WAGHG,EAAiCN,EAAAA,QACrC,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,UAAiBd,EAAc,CAACP"}

package/cjs/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/cjs/organisms/common/buttonCardComponent/buttonCardComponent.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("../../../components/button/button.js"),c=require("../../../utils/utilities.js");exports.default=({buttonObject:l,compact:r,className:s})=>{const n=t.useCallback((e=>{e.callbackAnalytics&&e.callbackAnalytics(),e.url?window.open(encodeURI(e.url),e.target?e.target:""):e.callback&&e.callback()}),[]);return e.jsx("div",{className:s,children:e.jsx(a.Button,{className:"cta-button",onClick:()=>n(l),compact:r,variant:l.variant,label:c.handleMaxChars(l.label,30)})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("../../../components/button/button.js"),c=require("../../../utils/utilities.js");exports.default=({buttonObject:l,compact:r,className:s})=>{const n=t.useCallback(e=>{e.callbackAnalytics&&e.callbackAnalytics(),e.url?window.open(encodeURI(e.url),e.target?e.target:""):e.callback&&e.callback()},[]);return e.jsx("div",{className:s,children:e.jsx(a.Button,{className:"cta-button",onClick:()=>n(l),compact:r,variant:l.variant,label:c.handleMaxChars(l.label,30)})})};
 //# sourceMappingURL=buttonCardComponent.js.map

package/cjs/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":["buttonObject","compact","className","onClickButton","useCallback","button","callbackAnalytics","url","window","open","encodeURI","target","callback","_jsx","children","Button","onClick","variant","label","handleMaxChars"],"mappings":"qOAoBuD,EAAGA,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,UAC5B,GACC,IAEH,OACEC,EAAAA,WAAKX,UAAWA,EAASY,SACvBD,MAACE,EAAAA,OAAM,CACLb,UAAU,aACVc,QAAS,IAAMb,EAAcH,GAC7BC,QAASA,EACTgB,QAASjB,EAAaiB,QACtBC,MAAOC,EAAAA,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":["buttonObject","compact","className","onClickButton","useCallback","button","callbackAnalytics","url","window","open","encodeURI","target","callback","_jsx","children","Button","onClick","variant","label","handleMaxChars"],"mappings":"qOAoBuD,EAAGA,eAAcC,UAASC,gBAC/E,MAAMC,EAAgBC,cAAaC,IACjCA,EAAOC,mBAAqBD,EAAOC,oBAC/BD,EAAOE,IACTC,OAAOC,KAAKC,UAAUL,EAAOE,KAAMF,EAAOM,OAASN,EAAOM,OAAS,IAEnEN,EAAOO,UAAYP,EAAOO,YAE3B,IAEH,OACEC,EAAAA,WAAKX,UAAWA,EAASY,SACvBD,MAACE,EAAAA,OAAM,CACLb,UAAU,aACVc,QAAS,IAAMb,EAAcH,GAC7BC,QAASA,EACTgB,QAASjB,EAAaiB,QACtBC,MAAOC,EAAAA,eAAenB,EAAakB,MAAO"}