@fox-dls/carousels 1.1.8 → 2.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (19) hide show
  1. package/.ultra.cache.json +1 -1
  2. package/dist/carousels.cjs.development.js +71 -36
  3. package/dist/carousels.cjs.development.js.map +1 -1
  4. package/dist/carousels.cjs.production.min.js +1 -1
  5. package/dist/carousels.cjs.production.min.js.map +1 -1
  6. package/dist/carousels.esm.js +70 -35
  7. package/dist/carousels.esm.js.map +1 -1
  8. package/dist/lib/free/styles/index.d.ts +1 -0
  9. package/dist/lib/pagination/styles/index.d.ts +1 -0
  10. package/dist/lib/pills/styles/index.d.ts +4 -0
  11. package/package.json +1 -1
  12. package/src/lib/card/index.tsx +2 -10
  13. package/src/lib/free/index.tsx +5 -19
  14. package/src/lib/free/styles/index.tsx +6 -0
  15. package/src/lib/pagination/index.tsx +12 -63
  16. package/src/lib/pagination/styles/index.tsx +24 -0
  17. package/src/lib/pills/index.tsx +24 -93
  18. package/src/lib/pills/styles/index.tsx +59 -1
  19. package/tsconfig.build.json +1 -1
package/dist/carousels.cjs.production.min.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"carousels.cjs.production.min.js","sources":["../src/lib/pills/styles/index.tsx","../src/lib/pills/index.tsx","../src/lib/styles/index.tsx","../src/lib/card/styles/index.tsx","../src/lib/card/index.tsx","../src/lib/free/styles/index.tsx","../src/lib/free/index.tsx","../src/lib/pagination/styles/index.tsx","../src/lib/pagination/index.tsx"],"sourcesContent":["import ButtonUnstyled from '@mui/core/ButtonUnstyled';\nimport styled from 'styled-components';\n// eslint-disable-next-line import/extensions\nimport { Swiper } from 'swiper/react';\n\nexport const CarouselContainer = styled.div``;\n\nexport const CarouselSwiper = styled(Swiper)`\n margin: 0px !important;\n .swiper-wrapper {\n .swiper-slide {\n scroll-snap-align: start !important;\n width: auto !important;\n }\n }\n`;\n\nexport const CarouselPillContainer = styled.div`\n display: inline-block !important;\n padding-right: 8px !important;\n padding-top: 4px !important;\n padding-bottom: 4px !important;\n`;\n\nexport const CarouselPill = styled(ButtonUnstyled)<any>`\n -webkit-box-pack: center !important;\n -webkit-box-align: center !important;\n appearance: none !important;\n display: inline-flex !important;\n border-radius: 50% !important;\n border: 1px solid rgb(221, 221, 221) !important;\n outline: none !important;\n margin: 0px !important;\n padding: 0px !important;\n color: rgb(34, 34, 34) !important;\n cursor: pointer !important;\n touch-action: manipulation !important;\n position: relative !important;\n background: transparent !important;\n transition: -ms-transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s,\n transform 0.25s ease 0s !important;\n align-items: center !important;\n justify-content: center !important;\n width: 36px !important;\n height: 36px !important;\n ::before {\n content: '' !important;\n display: block !important;\n position: absolute !important;\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n width: 36px !important;\n height: 36px !important;\n border-radius: 50% !important;\n border: 1px solid rgb(221, 221, 221) !important;\n }\n`;\n","/* eslint-disable @typescript-eslint/no-shadow */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { useRef, useState } from 'react';\n\nimport { css } from 'styled-components';\nimport SwiperCore, { Navigation } from 'swiper';\n// eslint-disable-next-line import/extensions\nimport { SwiperSlide } from 'swiper/react';\n\nimport { CarouselSwiper, CarouselPillContainer, CarouselPill } from './styles';\n\nSwiperCore.use([Navigation]);\n\nexport const PillsCarousel: React.FC<any> = ({\n children,\n navigation,\n title,\n controls,\n arrows,\n ...props\n}) => {\n const prevRef = useRef<any>(null);\n const nextRef = useRef<any>(null);\n const [swiperSlides, setSwiperSlides] = useState<any>({\n progress: 0,\n isBeginning: true,\n isEnd: false\n });\n const [swiper, setSwiper] = useState<any>(null);\n return (\n <div\n css={`\n display: flex !important;\n position: relative !important;\n min-width: 0px !important;\n `}\n >\n <div\n css={`\n position: absolute !important;\n left: 0px !important;\n z-index: 3 !important;\n width: 65px !important;\n background: linear-gradient(\n to right,\n rgb(255, 255, 255) 56.77%,\n rgba(255, 255, 255, 0) 94.47%\n ) !important;\n ${swiperSlides.isBeginning &&\n css`\n display: none !important;\n visibility: hidden !important;\n `}\n `}\n >\n {arrows && (\n <CarouselPillContainer>\n <CarouselPill\n left={+true}\n ref={prevRef}\n aria-label=\"Previous\"\n type=\"button\"\n onClick={() => swiper.slidePrev()}\n >\n <span\n css={`\n position: relative !important;\n `}\n >\n <svg\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"presentation\"\n focusable=\"false\"\n css={`\n display: block;\n fill: none;\n height: 12px;\n width: 12px;\n stroke: currentcolor;\n stroke-width: 5.33333;\n overflow: visible;\n `}\n >\n <g fill=\"none\">\n <path d=\"m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932\" />\n </g>\n </svg>\n </span>\n </CarouselPill>\n </CarouselPillContainer>\n )}\n </div>\n\n <CarouselSwiper\n {...props}\n cssMode={false}\n slidesPerView=\"auto\"\n onInit={(swiper: any) => {\n setSwiper(swiper);\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.prevEl = prevRef.current;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.nextEl = nextRef.current;\n swiper.navigation.init();\n swiper.navigation.update();\n setSwiperSlides({\n progress: swiper.progress,\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd\n });\n // console.log(\"Swiper\", swiper);\n }}\n onSlideChange={swiper => {\n // console.log(\"Swiper Change\", swiper);\n\n setSwiperSlides({\n progress: swiper.progress,\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd\n });\n }}\n >\n {React.Children.map(children, child => (\n <SwiperSlide>\n <div\n css={`\n display: inline-block !important;\n white-space: nowrap !important;\n padding-right: 8px !important;\n padding-top: 4px !important;\n padding-bottom: 4px !important;\n `}\n >\n {child}\n </div>\n </SwiperSlide>\n ))}\n </CarouselSwiper>\n\n <div\n css={`\n -webkit-box-pack: end !important;\n position: absolute !important;\n right: 0px !important;\n z-index: 3 !important;\n width: 75px !important;\n display: flex !important;\n justify-content: flex-end !important;\n background: linear-gradient(\n to left,\n rgb(255, 255, 255) 56.77%,\n rgba(255, 255, 255, 0) 94.47%\n ) !important;\n ${swiperSlides.isEnd &&\n css`\n display: none !important;\n visibility: hidden !important;\n `}\n `}\n >\n {arrows && (\n <CarouselPillContainer>\n <CarouselPill\n right={+true}\n aria-label=\"Next\"\n type=\"button\"\n ref={nextRef}\n onClick={() => swiper.slideNext()}\n >\n <span\n css={`\n position: relative !important;\n `}\n >\n <svg\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"presentation\"\n focusable=\"false\"\n css={`\n display: block;\n fill: none;\n height: 12px;\n width: 12px;\n stroke: currentcolor;\n stroke-width: 5.33333;\n overflow: visible;\n `}\n >\n <g fill=\"none\">\n <path d=\"m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932\" />\n </g>\n </svg>\n </span>\n </CarouselPill>\n </CarouselPillContainer>\n )}\n </div>\n </div>\n );\n};\n","import ButtonUnstyled from '@mui/core/ButtonUnstyled';\nimport styled from 'styled-components';\n\nexport const CarouselContainer = styled.div`\n position: relative !important;\n z-index: 0 !important;\n`;\n\nexport const CarouselNavbar = styled.div`\n -webkit-box-pack: justify !important;\n -ms-flex-pack: justify !important;\n -webkit-box-align: center !important;\n -ms-flex-align: center !important;\n color: #222222 !important;\n display: -webkit-box !important;\n display: -moz-box !important;\n display: -ms-flexbox !important;\n display: -webkit-flex !important;\n display: flex !important;\n -webkit-align-items: center !important;\n align-items: center !important;\n -webkit-justify-content: space-between !important;\n justify-content: space-between !important;\n margin-bottom: 16px !important;\n`;\n\nexport const NavbarTitleContainer = styled.div`\n margin-right: 24px !important;\n width: auto !important;\n`;\n\nexport const NavbarTitle = styled.div`\n @media (min-width: 744px) {\n font-size: 32px !important;\n line-height: 36px !important;\n font-weight: 800 !important;\n text-align: left !important;\n color: #222222 !important;\n margin-bottom: 15px !important;\n }\n font-size: 22px !important;\n line-height: 26px !important;\n font-weight: 600 !important;\n margin-bottom: 10px !important;\n`;\n\nexport const NavbarControlsContainer = styled.div`\n display: flex !important;\n align-items: center !important;\n margin-left: auto !important;\n`;\n\nexport const NavbarControlsQuick = styled.a`\n @media (max-width: 744px) {\n display: none !important;\n }\n font-size: inherit !important;\n font-family: inherit !important;\n font-style: inherit !important;\n font-variant: inherit !important;\n line-height: inherit !important;\n color: #222222 !important;\n text-decoration: underline !important;\n border-radius: 4px !important;\n font-weight: 600 !important;\n outline: none !important;\n`;\n\nexport const NavbarControlsSpace = styled.span`\n display: inline-block !important;\n height: 32px !important;\n width: 1px !important;\n margin-right: 16px !important;\n padding: 0px !important;\n border: none !important;\n`;\n\nexport const ArrowsContainer = styled.div`\n -webkit-box-align: center !important;\n color: rgb(34, 34, 34) !important;\n display: flex !important;\n align-items: center !important;\n margin-left: auto !important;\n`;\n\nexport const ArrowsFlex = styled.div`\n display: -webkit-box !important;\n display: -moz-box !important;\n display: -ms-flexbox !important;\n display: -webkit-flex !important;\n display: flex !important;\n`;\n\nexport const ArrowsButton = styled(ButtonUnstyled)<any>`\n -webkit-box-pack: center !important;\n -webkit-box-align: center !important;\n appearance: none !important;\n display: inline-flex !important;\n border-radius: 50% !important;\n border: none !important;\n outline: none !important;\n margin: 0px !important;\n padding: 0px !important;\n color: rgb(34, 34, 34) !important;\n cursor: pointer !important;\n touch-action: manipulation !important;\n position: relative !important;\n background: transparent !important;\n transition: -ms-transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s,\n transform 0.25s ease 0s !important;\n align-items: center !important;\n justify-content: center !important;\n width: 32px !important;\n height: 32px !important;\n :focus {\n box-shadow: none !important;\n }\n ::before {\n content: '' !important;\n display: block !important;\n position: absolute !important;\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n width: 32px !important;\n height: 32px !important;\n border-radius: 50% !important;\n background: rgb(255, 255, 255) !important;\n border: 1px solid rgb(221, 221, 221) !important;\n }\n :disabled {\n opacity: 0.5 !important;\n cursor: not-allowed !important;\n color: rgb(221, 221, 221) !important;\n transform: scale(1) !important;\n }\n :hover:not([disabled]) {\n color: rgb(0, 0, 0) !important;\n transform: scale(1.04) !important;\n }\n`;\n\nexport const ArrowsDivider = styled.span`\n margin-left: 8px !important;\n`;\n\nexport const ArrowsIconClip = styled.span`\n border: 0px !important;\n clip: rect(0 0 0 0) !important;\n -webkit-clip-path: inset(100%) !important;\n clip-path: inset(100%) !important;\n height: 1px !important;\n overflow: hidden !important;\n padding: 0px !important;\n position: absolute !important;\n white-space: nowrap !important;\n width: 1px !important;\n`;\n\nexport const ArrowsSvg = styled.svg`\n display: block;\n fill: none;\n height: 12px;\n width: 12px;\n stroke: currentcolor;\n stroke-width: 4;\n overflow: visible;\n`;\n","import styled from 'styled-components';\n// eslint-disable-next-line import/extensions\nimport { Swiper } from 'swiper/react';\n\nexport const CarouselSwiper = styled(Swiper)``;\n","import React, { useRef } from 'react';\n\nimport SwiperCore, { Navigation } from 'swiper';\n// eslint-disable-next-line import/extensions\nimport { SwiperSlide } from 'swiper/react';\n\nimport {\n CarouselContainer,\n CarouselNavbar,\n NavbarTitleContainer,\n NavbarControlsContainer,\n NavbarControlsQuick,\n NavbarControlsSpace,\n ArrowsContainer,\n ArrowsFlex,\n ArrowsDivider,\n ArrowsButton,\n ArrowsIconClip,\n ArrowsSvg\n} from '../styles';\nimport { CarouselSwiper } from './styles';\n\nSwiperCore.use([Navigation]);\n\nexport const CardCarousel: React.FC<any> = ({\n children,\n navigation,\n title,\n controls,\n onShowMore,\n ...props\n}) => {\n const prevRef = useRef<HTMLDivElement>(null);\n const nextRef = useRef<HTMLDivElement>(null);\n return (\n <CarouselContainer>\n {navigation && (\n <CarouselNavbar>\n {title && <NavbarTitleContainer>{title}</NavbarTitleContainer>}\n {controls && (\n <NavbarControlsContainer>\n {onShowMore && (\n <NavbarControlsQuick onClick={onShowMore}>\n Show More\n </NavbarControlsQuick>\n )}\n <NavbarControlsSpace />\n <ArrowsContainer aria-hidden=\"false\">\n <ArrowsFlex>\n <ArrowsButton\n ref={prevRef}\n aria-label=\"Previous\"\n type=\"button\"\n >\n <span\n css={`\n position: relative;\n `}\n >\n <ArrowsIconClip />\n <ArrowsSvg\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"presentation\"\n focusable=\"false\"\n >\n <g fill=\"none\">\n <path d=\"m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932\" />\n </g>\n </ArrowsSvg>\n </span>\n </ArrowsButton>\n <ArrowsDivider />\n <ArrowsButton aria-label=\"Next\" type=\"button\" ref={nextRef}>\n <span\n css={`\n position: relative;\n `}\n >\n <ArrowsIconClip />\n <ArrowsSvg\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"presentation\"\n focusable=\"false\"\n >\n <g fill=\"none\">\n <path d=\"m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932\" />\n </g>\n </ArrowsSvg>\n </span>\n </ArrowsButton>\n </ArrowsFlex>\n </ArrowsContainer>\n </NavbarControlsContainer>\n )}\n </CarouselNavbar>\n )}\n <CarouselSwiper\n {...props}\n onInit={swiper => {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.prevEl = prevRef.current;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.nextEl = nextRef.current;\n swiper.navigation.init();\n swiper.navigation.update();\n // console.log(\"Swiper\", swiper);\n }}\n >\n {React.Children.map(children, child => (\n <SwiperSlide>{child}</SwiperSlide>\n ))}\n </CarouselSwiper>\n </CarouselContainer>\n );\n};\n","import styled from 'styled-components';\n// eslint-disable-next-line import/extensions\nimport { Swiper } from 'swiper/react';\n\nexport const CarouselSwiper = styled(Swiper)`\n .swiper-wrapper {\n box-sizing: inherit !important;\n @media (min-width: 744px) {\n scroll-padding: 40px !important;\n }\n @media (min-width: 1128px) {\n --scroll-padding: max(80px, calc((100vw - 1600px) / 2)) !important;\n scroll-padding: var(--scroll-padding) !important;\n }\n scroll-snap-type: x mandatory !important;\n overflow-x: auto !important;\n display: flex !important;\n scroll-padding: 24px !important;\n .swiper-slide {\n @media (min-width: 744px) {\n min-width: 476px !important;\n max-width: 588px !important;\n flex: 1 0 calc((100% - 80px) * 0.75) !important;\n }\n @media (min-width: 1128px) {\n flex: 1 0 calc(50% - 88px) !important;\n }\n margin-left: 16px !important;\n flex: 1 0 calc(100% - 84px) !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n }\n .swiper-slide:first-of-type {\n @media (min-width: 744px) {\n padding-left: 40px !important;\n min-width: calc(516px) !important;\n max-width: calc(628px) !important;\n flex: 1 0 calc((100% - 80px) * 0.75 + 40px) !important;\n }\n @media (min-width: 1128px) {\n max-width: calc(588px + max(80px, (100vw - 1600px) / 2)) !important;\n flex: 1 0 calc(50% - 8px) !important;\n padding-left: max(80px, (100vw - 1600px) / 2) !important;\n }\n @media (min-width: 2080px) {\n max-width: calc(588px + max(80px, (100vw - 1930px) / 2)) !important;\n flex: 1 0 calc(50% - 8px) !important;\n padding-left: max(80px, (100vw - 1930px) / 2) !important;\n }\n flex: 1 0 calc(100% - 84px) !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n margin-left: 0px !important;\n padding-left: 24px !important;\n }\n .swiper-slide:last-of-type {\n @media (min-width: 744px) {\n padding-right: 40px !important;\n min-width: calc(516px) !important;\n max-width: calc(628px) !important;\n flex: 1 0 calc((100% - 80px) * 0.75 + 40px) !important;\n }\n @media (min-width: 1128px) {\n max-width: calc(588px + max(80px, (100vw - 1600px) / 2)) !important;\n flex: 1 0 calc(50% - 8px) !important;\n padding-right: max(80px, (100vw - 1600px) / 2) !important;\n }\n @media (min-width: 2080px) {\n max-width: calc(588px + max(80px, (100vw - 1930px) / 2)) !important;\n flex: 1 0 calc(50% - 8px) !important;\n padding-right: max(80px, (100vw - 1930px) / 2) !important;\n }\n margin-left: 16px !important;\n flex: 1 0 calc(100% - 84px) !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n padding-right: 24px !important;\n }\n }\n`;\n","/* eslint-disable unused-imports/no-unused-vars */\nimport React, { useRef } from 'react';\n\nimport { Container } from '@fox-dls/layout';\nimport SwiperCore, { Navigation } from 'swiper';\n// eslint-disable-next-line import/extensions\nimport { SwiperSlide } from 'swiper/react';\n\nimport {\n CarouselContainer,\n CarouselNavbar,\n NavbarTitleContainer,\n NavbarControlsContainer,\n NavbarControlsQuick,\n NavbarControlsSpace,\n ArrowsContainer,\n ArrowsFlex,\n ArrowsDivider,\n ArrowsButton,\n ArrowsIconClip,\n ArrowsSvg\n} from '../styles';\nimport { CarouselSwiper } from './styles';\n\nSwiperCore.use([Navigation]);\n\nexport const FreeCarousel: React.FC<any> = ({\n children,\n navigation,\n title,\n controls,\n quickLink,\n onShowMore,\n ...props\n}) => {\n const prevRef = useRef<HTMLDivElement>(null);\n const nextRef = useRef<HTMLDivElement>(null);\n return (\n <CarouselContainer>\n <div\n css={`\n @media (max-width: 744px) {\n display: none !important;\n }\n `}\n >\n <Container>\n {navigation && (\n <CarouselNavbar>\n {title && <NavbarTitleContainer>{title}</NavbarTitleContainer>}\n {controls && (\n <NavbarControlsContainer>\n {onShowMore && (\n <NavbarControlsQuick onClick={onShowMore}>\n Show More\n </NavbarControlsQuick>\n )}\n <NavbarControlsSpace />\n <ArrowsContainer aria-hidden=\"false\">\n <ArrowsFlex>\n <ArrowsButton\n ref={prevRef}\n aria-label=\"Previous\"\n type=\"button\"\n >\n <span\n css={`\n position: relative;\n `}\n >\n <ArrowsIconClip />\n <ArrowsSvg\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"presentation\"\n focusable=\"false\"\n >\n <g fill=\"none\">\n <path d=\"m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932\" />\n </g>\n </ArrowsSvg>\n </span>\n </ArrowsButton>\n <ArrowsDivider />\n <ArrowsButton\n aria-label=\"Next\"\n type=\"button\"\n ref={nextRef}\n >\n <span\n css={`\n position: relative;\n `}\n >\n <ArrowsIconClip />\n <ArrowsSvg\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"presentation\"\n focusable=\"false\"\n >\n <g fill=\"none\">\n <path d=\"m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932\" />\n </g>\n </ArrowsSvg>\n </span>\n </ArrowsButton>\n </ArrowsFlex>\n </ArrowsContainer>\n </NavbarControlsContainer>\n )}\n </CarouselNavbar>\n )}\n </Container>\n </div>\n <CarouselSwiper\n {...props}\n cssMode\n onInit={swiper => {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.prevEl = prevRef.current;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.nextEl = nextRef.current;\n swiper.navigation.init();\n swiper.navigation.update();\n // console.log(\"Swiper\", swiper);\n }}\n >\n {React.Children.map(children, child => (\n <SwiperSlide>{child}</SwiperSlide>\n ))}\n </CarouselSwiper>\n </CarouselContainer>\n );\n};\n","import ButtonUnstyled from '@mui/core/ButtonUnstyled';\nimport styled from 'styled-components';\n// eslint-disable-next-line import/extensions\nimport { Swiper } from 'swiper/react';\n\nexport const CarouselContainer = styled.div``;\n\nexport const CarouselSwiper = styled(Swiper)`\n height: 100%;\n .swiper-pagination {\n .swiper-pagination-bullet-active {\n background-color: #fff;\n }\n .swiper-pagination-bullet-active-next {\n background-color: #ffffff;\n }\n .swiper-pagination-bullet {\n background-color: #ffffff;\n }\n }\n`;\n\nexport const CarouselPill = styled(ButtonUnstyled)`\n :hover {\n border-color: rgba(0, 0, 0, 0.08) !important;\n background-color: #ffffff !important;\n color: #000000 !important;\n box-shadow: 0px 0px 0px 1px transparent, 0px 0px 0px 4px transparent,\n 0px 6px 16px rgb(0 0 0 / 12%) !important;\n -webkit-transform: scale(1.04) !important;\n -ms-transform: scale(1.04) !important;\n transform: scale(1.04) !important;\n }\n\n -webkit-box-pack: center !important;\n -ms-flex-pack: center !important;\n -webkit-box-align: center !important;\n -ms-flex-align: center !important;\n -webkit-appearance: none !important;\n -moz-appearance: none !important;\n appearance: none !important;\n display: -webkit-inline-box !important;\n display: -moz-inline-box !important;\n display: -ms-inline-flexbox !important;\n display: -webkit-inline-flex !important;\n display: inline-flex !important;\n border-radius: 50% !important;\n border: 0px !important;\n outline: none !important;\n margin: 0px !important;\n padding: 0px !important;\n color: #222222 !important;\n background-color: rgba(255, 255, 255, 0.9) !important;\n cursor: pointer !important;\n -ms-touch-action: manipulation !important;\n touch-action: manipulation !important;\n -webkit-align-items: center !important;\n align-items: center !important;\n -webkit-justify-content: center !important;\n justify-content: center !important;\n border-style: solid !important;\n border-width: 1px !important;\n background-clip: padding-box !important;\n border-color: rgba(0, 0, 0, 0.08) !important;\n box-shadow: 0px 0px 0px 1px transparent, 0px 0px 0px 4px transparent,\n 0px 2px 4px rgb(0 0 0 / 18%) !important;\n -webkit-transition: -webkit-transform 0.25s ease, transform 0.25s ease !important;\n -moz-transition: transform 0.25s ease !important;\n transition: -ms-transform 0.25s ease, -webkit-transform 0.25s ease,\n transform 0.25s ease !important;\n width: 32px !important;\n height: 32px !important;\n`;\n\nexport const CarouselPillSvg = styled.svg`\n height: 10px;\n width: 10px;\n display: block;\n fill: currentcolor;\n`;\n","/* eslint-disable unused-imports/no-unused-vars */\nimport React, { useRef } from 'react';\n\nimport SwiperCore, { Navigation, Pagination } from 'swiper';\n// eslint-disable-next-line import/extensions\nimport { SwiperSlide } from 'swiper/react';\n\nimport { CarouselSwiper, CarouselPillSvg, CarouselPill } from './styles';\n\nSwiperCore.use([Navigation, Pagination]);\n\nexport const PaginationCarousel: React.FC<any> = ({\n children,\n navigation,\n title,\n controls,\n ...props\n}) => {\n const prevRef = useRef<HTMLDivElement>(null);\n const nextRef = useRef<HTMLDivElement>(null);\n return (\n <>\n <div\n css={`\n @keyframes fadein {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n }\n position: absolute !important;\n top: 50% !important;\n pointer-events: auto !important;\n transform: translateY(-50%) !important;\n left: 8px !important;\n animation-duration: 0.3s !important;\n animation-name: fadein !important;\n z-index: 180 !important;\n opacity: 0 !important;\n :hover {\n opacity: 1 !important;\n }\n `}\n >\n <CarouselPill ref={prevRef}>\n <span\n css={`\n position: relative !important;\n `}\n >\n <CarouselPillSvg\n viewBox=\"0 0 16 16\"\n role=\"presentation\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"m10.8 16c-.4 0-.7-.1-.9-.4l-6.8-6.7c-.5-.5-.5-1.3 0-1.8l6.8-6.7c.5-.5 1.2-.5 1.7 0s .5 1.2 0 1.7l-5.8 5.9 5.8 5.9c.5.5.5 1.2 0 1.7-.2.3-.5.4-.8.4\" />\n </CarouselPillSvg>\n </span>\n </CarouselPill>\n </div>\n <div\n css={`\n @keyframes fadein {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n }\n position: absolute !important;\n top: 50% !important;\n pointer-events: auto !important;\n transform: translateY(-50%) !important;\n right: 8px !important;\n animation-duration: 0.3s !important;\n animation-name: fadein !important;\n z-index: 180 !important;\n opacity: 0 !important;\n :hover {\n opacity: 1 !important;\n }\n `}\n >\n <CarouselPill ref={nextRef}>\n <span\n css={`\n position: relative !important;\n `}\n >\n <CarouselPillSvg\n viewBox=\"0 0 16 16\"\n role=\"presentation\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"m5.3 16c .3 0 .6-.1.8-.4l6.8-6.7c.5-.5.5-1.3 0-1.8l-6.8-6.7c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l5.8 5.9-5.8 5.9c-.5.5-.5 1.2 0 1.7.2.3.5.4.9.4\" />\n </CarouselPillSvg>\n </span>\n </CarouselPill>\n </div>\n <CarouselSwiper\n {...props}\n pagination={{\n dynamicBullets: true\n }}\n onInit={swiper => {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.prevEl = prevRef.current;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.nextEl = nextRef.current;\n swiper.navigation.init();\n swiper.navigation.update();\n // console.log(\"Swiper\", swiper);\n }}\n >\n {React.Children.map(children, child =>\n React.cloneElement(<SwiperSlide>{child}</SwiperSlide>, {\n ...props\n })\n )}\n </CarouselSwiper>\n </>\n );\n};\n"],"names":["CarouselSwiper","styled","Swiper","CarouselPillContainer","div","CarouselPill","ButtonUnstyled","use","Navigation","CarouselContainer","CarouselNavbar","NavbarTitleContainer","NavbarControlsContainer","NavbarControlsQuick","a","NavbarControlsSpace","span","ArrowsContainer","ArrowsFlex","ArrowsButton","ArrowsDivider","ArrowsIconClip","ArrowsSvg","svg","SwiperCore__default","CarouselPillSvg","Pagination","children","navigation","title","controls","onShowMore","props","prevRef","useRef","nextRef","React","onClick","ref","type","css","viewBox","xmlns","role","focusable","fill","d","onInit","swiper","params","prevEl","current","nextEl","init","update","Children","map","child","SwiperSlide","quickLink","Container","cssMode","pagination","dynamicBullets","cloneElement","arrows","useState","progress","isBeginning","isEnd","swiperSlides","setSwiperSlides","setSwiper","left","slidePrev","slidesPerView","onSlideChange","right","slideNext"],"mappings":"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"}
1
+ {"version":3,"file":"carousels.cjs.production.min.js","sources":["../src/lib/pills/styles/index.tsx","../src/lib/pills/index.tsx","../src/lib/styles/index.tsx","../src/lib/card/styles/index.tsx","../src/lib/card/index.tsx","../src/lib/free/styles/index.tsx","../src/lib/free/index.tsx","../src/lib/pagination/styles/index.tsx","../src/lib/pagination/index.tsx"],"sourcesContent":["import ButtonUnstyled from '@mui/core/ButtonUnstyled';\nimport styled, { css } from 'styled-components';\n// eslint-disable-next-line import/extensions\nimport { Swiper } from 'swiper/react';\n\nexport const CarouselContainer = styled.div``;\n\nexport const CarouselSwiper = styled(Swiper)`\n margin: 0px !important;\n .swiper-wrapper {\n .swiper-slide {\n scroll-snap-align: start !important;\n width: auto !important;\n }\n }\n`;\n\nexport const CarouselPillContainer = styled.div`\n display: inline-block !important;\n padding-right: 8px !important;\n padding-top: 4px !important;\n padding-bottom: 4px !important;\n`;\n\nexport const CarouselPill = styled(ButtonUnstyled)<any>`\n -webkit-box-pack: center !important;\n -webkit-box-align: center !important;\n appearance: none !important;\n display: inline-flex !important;\n border-radius: 50% !important;\n border: 1px solid rgb(221, 221, 221) !important;\n outline: none !important;\n margin: 0px !important;\n padding: 0px !important;\n color: rgb(34, 34, 34) !important;\n cursor: pointer !important;\n touch-action: manipulation !important;\n position: relative !important;\n background: transparent !important;\n transition: -ms-transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s,\n transform 0.25s ease 0s !important;\n align-items: center !important;\n justify-content: center !important;\n width: 36px !important;\n height: 36px !important;\n ::before {\n content: '' !important;\n display: block !important;\n position: absolute !important;\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n width: 36px !important;\n height: 36px !important;\n border-radius: 50% !important;\n border: 1px solid rgb(221, 221, 221) !important;\n }\n`;\n\nexport const CarouselPillFlex = styled.div`\n display: flex !important;\n position: relative !important;\n min-width: 0px !important;\n`;\n\nexport const CarouselPillArrowContainer = styled.div<any>`\n position: absolute !important;\n background: linear-gradient(\n to left,\n rgb(255, 255, 255) 56.77%,\n rgba(255, 255, 255, 0) 94.47%\n ) !important;\n z-index: 3 !important;\n\n ${props =>\n props.start &&\n css`\n left: 0px !important;\n width: 65px !important;\n `}\n\n ${props =>\n props.end &&\n css`\n -webkit-box-pack: end !important;\n right: 0px !important;\n width: 75px !important;\n display: flex !important;\n justify-content: flex-end !important;\n `}\n\n ${props =>\n props.hidden &&\n css`\n display: none !important;\n visibility: hidden !important;\n `}\n`;\n\nexport const CarouselPillInlineChild = styled.div`\n display: inline-block !important;\n white-space: nowrap !important;\n padding-right: 8px !important;\n padding-top: 4px !important;\n padding-bottom: 4px !important;\n`;\n\nexport const CarouselPillArrowSVG = styled.svg`\n display: block;\n fill: none;\n height: 12px;\n width: 12px;\n stroke: currentcolor;\n stroke-width: 5.33333;\n overflow: visible;\n`;\n","/* eslint-disable @typescript-eslint/no-shadow */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { useRef, useState } from 'react';\n\nimport SwiperCore, { Navigation } from 'swiper';\n// eslint-disable-next-line import/extensions\nimport { SwiperSlide } from 'swiper/react';\n\nimport {\n CarouselSwiper,\n CarouselPillContainer,\n CarouselPill,\n CarouselPillFlex,\n CarouselPillArrowContainer,\n CarouselPillInlineChild,\n CarouselPillArrowSVG\n} from './styles';\n\nSwiperCore.use([Navigation]);\n\nexport const PillsCarousel: React.FC<any> = ({\n children,\n navigation,\n title,\n controls,\n arrows,\n ...props\n}) => {\n const prevRef = useRef<any>(null);\n const nextRef = useRef<any>(null);\n const [swiperSlides, setSwiperSlides] = useState<any>({\n progress: 0,\n isBeginning: true,\n isEnd: false\n });\n const [swiper, setSwiper] = useState<any>(null);\n return (\n <CarouselPillFlex>\n <CarouselPillArrowContainer\n start={true}\n hidden={swiperSlides.isBeginning}\n >\n {arrows && (\n <CarouselPillContainer>\n <CarouselPill\n left={+true}\n ref={prevRef}\n aria-label=\"Previous\"\n type=\"button\"\n onClick={() => swiper.slidePrev()}\n >\n <span style={{ position: 'relative' }}>\n <CarouselPillArrowSVG\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"presentation\"\n focusable=\"false\"\n >\n <g fill=\"none\">\n <path d=\"m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932\" />\n </g>\n </CarouselPillArrowSVG>\n </span>\n </CarouselPill>\n </CarouselPillContainer>\n )}\n </CarouselPillArrowContainer>\n\n <CarouselSwiper\n {...props}\n cssMode={false}\n slidesPerView=\"auto\"\n onInit={(swiper: any) => {\n setSwiper(swiper);\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.prevEl = prevRef.current;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.nextEl = nextRef.current;\n swiper.navigation.init();\n swiper.navigation.update();\n setSwiperSlides({\n progress: swiper.progress,\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd\n });\n // console.log(\"Swiper\", swiper);\n }}\n onSlideChange={swiper => {\n // console.log(\"Swiper Change\", swiper);\n\n setSwiperSlides({\n progress: swiper.progress,\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd\n });\n }}\n >\n {React.Children.map(children, child => (\n <SwiperSlide>\n <CarouselPillInlineChild>{child}</CarouselPillInlineChild>\n </SwiperSlide>\n ))}\n </CarouselSwiper>\n\n <CarouselPillArrowContainer hidden={swiperSlides.isEnd} end={true}>\n {arrows && (\n <CarouselPillContainer>\n <CarouselPill\n right={+true}\n aria-label=\"Next\"\n type=\"button\"\n ref={nextRef}\n onClick={() => swiper.slideNext()}\n >\n <span style={{ position: 'relative' }}>\n <CarouselPillArrowSVG\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"presentation\"\n focusable=\"false\"\n >\n <g fill=\"none\">\n <path d=\"m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932\" />\n </g>\n </CarouselPillArrowSVG>\n </span>\n </CarouselPill>\n </CarouselPillContainer>\n )}\n </CarouselPillArrowContainer>\n </CarouselPillFlex>\n );\n};\n","import ButtonUnstyled from '@mui/core/ButtonUnstyled';\nimport styled from 'styled-components';\n\nexport const CarouselContainer = styled.div`\n position: relative !important;\n z-index: 0 !important;\n`;\n\nexport const CarouselNavbar = styled.div`\n -webkit-box-pack: justify !important;\n -ms-flex-pack: justify !important;\n -webkit-box-align: center !important;\n -ms-flex-align: center !important;\n color: #222222 !important;\n display: -webkit-box !important;\n display: -moz-box !important;\n display: -ms-flexbox !important;\n display: -webkit-flex !important;\n display: flex !important;\n -webkit-align-items: center !important;\n align-items: center !important;\n -webkit-justify-content: space-between !important;\n justify-content: space-between !important;\n margin-bottom: 16px !important;\n`;\n\nexport const NavbarTitleContainer = styled.div`\n margin-right: 24px !important;\n width: auto !important;\n`;\n\nexport const NavbarTitle = styled.div`\n @media (min-width: 744px) {\n font-size: 32px !important;\n line-height: 36px !important;\n font-weight: 800 !important;\n text-align: left !important;\n color: #222222 !important;\n margin-bottom: 15px !important;\n }\n font-size: 22px !important;\n line-height: 26px !important;\n font-weight: 600 !important;\n margin-bottom: 10px !important;\n`;\n\nexport const NavbarControlsContainer = styled.div`\n display: flex !important;\n align-items: center !important;\n margin-left: auto !important;\n`;\n\nexport const NavbarControlsQuick = styled.a`\n @media (max-width: 744px) {\n display: none !important;\n }\n font-size: inherit !important;\n font-family: inherit !important;\n font-style: inherit !important;\n font-variant: inherit !important;\n line-height: inherit !important;\n color: #222222 !important;\n text-decoration: underline !important;\n border-radius: 4px !important;\n font-weight: 600 !important;\n outline: none !important;\n`;\n\nexport const NavbarControlsSpace = styled.span`\n display: inline-block !important;\n height: 32px !important;\n width: 1px !important;\n margin-right: 16px !important;\n padding: 0px !important;\n border: none !important;\n`;\n\nexport const ArrowsContainer = styled.div`\n -webkit-box-align: center !important;\n color: rgb(34, 34, 34) !important;\n display: flex !important;\n align-items: center !important;\n margin-left: auto !important;\n`;\n\nexport const ArrowsFlex = styled.div`\n display: -webkit-box !important;\n display: -moz-box !important;\n display: -ms-flexbox !important;\n display: -webkit-flex !important;\n display: flex !important;\n`;\n\nexport const ArrowsButton = styled(ButtonUnstyled)<any>`\n -webkit-box-pack: center !important;\n -webkit-box-align: center !important;\n appearance: none !important;\n display: inline-flex !important;\n border-radius: 50% !important;\n border: none !important;\n outline: none !important;\n margin: 0px !important;\n padding: 0px !important;\n color: rgb(34, 34, 34) !important;\n cursor: pointer !important;\n touch-action: manipulation !important;\n position: relative !important;\n background: transparent !important;\n transition: -ms-transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s,\n transform 0.25s ease 0s !important;\n align-items: center !important;\n justify-content: center !important;\n width: 32px !important;\n height: 32px !important;\n :focus {\n box-shadow: none !important;\n }\n ::before {\n content: '' !important;\n display: block !important;\n position: absolute !important;\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n width: 32px !important;\n height: 32px !important;\n border-radius: 50% !important;\n background: rgb(255, 255, 255) !important;\n border: 1px solid rgb(221, 221, 221) !important;\n }\n :disabled {\n opacity: 0.5 !important;\n cursor: not-allowed !important;\n color: rgb(221, 221, 221) !important;\n transform: scale(1) !important;\n }\n :hover:not([disabled]) {\n color: rgb(0, 0, 0) !important;\n transform: scale(1.04) !important;\n }\n`;\n\nexport const ArrowsDivider = styled.span`\n margin-left: 8px !important;\n`;\n\nexport const ArrowsIconClip = styled.span`\n border: 0px !important;\n clip: rect(0 0 0 0) !important;\n -webkit-clip-path: inset(100%) !important;\n clip-path: inset(100%) !important;\n height: 1px !important;\n overflow: hidden !important;\n padding: 0px !important;\n position: absolute !important;\n white-space: nowrap !important;\n width: 1px !important;\n`;\n\nexport const ArrowsSvg = styled.svg`\n display: block;\n fill: none;\n height: 12px;\n width: 12px;\n stroke: currentcolor;\n stroke-width: 4;\n overflow: visible;\n`;\n","import styled from 'styled-components';\n// eslint-disable-next-line import/extensions\nimport { Swiper } from 'swiper/react';\n\nexport const CarouselSwiper = styled(Swiper)``;\n","import React, { useRef } from 'react';\n\nimport SwiperCore, { Navigation } from 'swiper';\n// eslint-disable-next-line import/extensions\nimport { SwiperSlide } from 'swiper/react';\n\nimport {\n CarouselContainer,\n CarouselNavbar,\n NavbarTitleContainer,\n NavbarControlsContainer,\n NavbarControlsQuick,\n NavbarControlsSpace,\n ArrowsContainer,\n ArrowsFlex,\n ArrowsDivider,\n ArrowsButton,\n ArrowsIconClip,\n ArrowsSvg\n} from '../styles';\nimport { CarouselSwiper } from './styles';\n\nSwiperCore.use([Navigation]);\n\nexport const CardCarousel: React.FC<any> = ({\n children,\n navigation,\n title,\n controls,\n onShowMore,\n ...props\n}) => {\n const prevRef = useRef<HTMLDivElement>(null);\n const nextRef = useRef<HTMLDivElement>(null);\n return (\n <CarouselContainer>\n {navigation && (\n <CarouselNavbar>\n {title && <NavbarTitleContainer>{title}</NavbarTitleContainer>}\n {controls && (\n <NavbarControlsContainer>\n {onShowMore && (\n <NavbarControlsQuick onClick={onShowMore}>\n Show More\n </NavbarControlsQuick>\n )}\n <NavbarControlsSpace />\n <ArrowsContainer aria-hidden=\"false\">\n <ArrowsFlex>\n <ArrowsButton\n ref={prevRef}\n aria-label=\"Previous\"\n type=\"button\"\n >\n <span style={{ position: 'relative' }}>\n <ArrowsIconClip />\n <ArrowsSvg\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"presentation\"\n focusable=\"false\"\n >\n <g fill=\"none\">\n <path d=\"m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932\" />\n </g>\n </ArrowsSvg>\n </span>\n </ArrowsButton>\n <ArrowsDivider />\n <ArrowsButton aria-label=\"Next\" type=\"button\" ref={nextRef}>\n <span style={{ position: 'relative' }}>\n <ArrowsIconClip />\n <ArrowsSvg\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"presentation\"\n focusable=\"false\"\n >\n <g fill=\"none\">\n <path d=\"m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932\" />\n </g>\n </ArrowsSvg>\n </span>\n </ArrowsButton>\n </ArrowsFlex>\n </ArrowsContainer>\n </NavbarControlsContainer>\n )}\n </CarouselNavbar>\n )}\n <CarouselSwiper\n {...props}\n onInit={swiper => {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.prevEl = prevRef.current;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.nextEl = nextRef.current;\n swiper.navigation.init();\n swiper.navigation.update();\n // console.log(\"Swiper\", swiper);\n }}\n >\n {React.Children.map(children, child => (\n <SwiperSlide>{child}</SwiperSlide>\n ))}\n </CarouselSwiper>\n </CarouselContainer>\n );\n};\n","import styled from 'styled-components';\n// eslint-disable-next-line import/extensions\nimport { Swiper } from 'swiper/react';\n\nexport const CarouselSwiper = styled(Swiper)`\n .swiper-wrapper {\n box-sizing: inherit !important;\n @media (min-width: 744px) {\n scroll-padding: 40px !important;\n }\n @media (min-width: 1128px) {\n --scroll-padding: max(80px, calc((100vw - 1600px) / 2)) !important;\n scroll-padding: var(--scroll-padding) !important;\n }\n scroll-snap-type: x mandatory !important;\n overflow-x: auto !important;\n display: flex !important;\n scroll-padding: 24px !important;\n .swiper-slide {\n @media (min-width: 744px) {\n min-width: 476px !important;\n max-width: 588px !important;\n flex: 1 0 calc((100% - 80px) * 0.75) !important;\n }\n @media (min-width: 1128px) {\n flex: 1 0 calc(50% - 88px) !important;\n }\n margin-left: 16px !important;\n flex: 1 0 calc(100% - 84px) !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n }\n .swiper-slide:first-of-type {\n @media (min-width: 744px) {\n padding-left: 40px !important;\n min-width: calc(516px) !important;\n max-width: calc(628px) !important;\n flex: 1 0 calc((100% - 80px) * 0.75 + 40px) !important;\n }\n @media (min-width: 1128px) {\n max-width: calc(588px + max(80px, (100vw - 1600px) / 2)) !important;\n flex: 1 0 calc(50% - 8px) !important;\n padding-left: max(80px, (100vw - 1600px) / 2) !important;\n }\n @media (min-width: 2080px) {\n max-width: calc(588px + max(80px, (100vw - 1930px) / 2)) !important;\n flex: 1 0 calc(50% - 8px) !important;\n padding-left: max(80px, (100vw - 1930px) / 2) !important;\n }\n flex: 1 0 calc(100% - 84px) !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n margin-left: 0px !important;\n padding-left: 24px !important;\n }\n .swiper-slide:last-of-type {\n @media (min-width: 744px) {\n padding-right: 40px !important;\n min-width: calc(516px) !important;\n max-width: calc(628px) !important;\n flex: 1 0 calc((100% - 80px) * 0.75 + 40px) !important;\n }\n @media (min-width: 1128px) {\n max-width: calc(588px + max(80px, (100vw - 1600px) / 2)) !important;\n flex: 1 0 calc(50% - 8px) !important;\n padding-right: max(80px, (100vw - 1600px) / 2) !important;\n }\n @media (min-width: 2080px) {\n max-width: calc(588px + max(80px, (100vw - 1930px) / 2)) !important;\n flex: 1 0 calc(50% - 8px) !important;\n padding-right: max(80px, (100vw - 1930px) / 2) !important;\n }\n margin-left: 16px !important;\n flex: 1 0 calc(100% - 84px) !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n padding-right: 24px !important;\n }\n }\n`;\n\nexport const CarouselMedia = styled.div`\n @media (max-width: 744px) {\n display: none !important;\n }\n`;\n","/* eslint-disable unused-imports/no-unused-vars */\nimport React, { useRef } from 'react';\n\nimport { Container } from '@fox-dls/layout';\nimport SwiperCore, { Navigation } from 'swiper';\n// eslint-disable-next-line import/extensions\nimport { SwiperSlide } from 'swiper/react';\n\nimport {\n CarouselContainer,\n CarouselNavbar,\n NavbarTitleContainer,\n NavbarControlsContainer,\n NavbarControlsQuick,\n NavbarControlsSpace,\n ArrowsContainer,\n ArrowsFlex,\n ArrowsDivider,\n ArrowsButton,\n ArrowsIconClip,\n ArrowsSvg\n} from '../styles';\nimport { CarouselSwiper, CarouselMedia } from './styles';\n\nSwiperCore.use([Navigation]);\n\nexport const FreeCarousel: React.FC<any> = ({\n children,\n navigation,\n title,\n controls,\n quickLink,\n onShowMore,\n ...props\n}) => {\n const prevRef = useRef<HTMLDivElement>(null);\n const nextRef = useRef<HTMLDivElement>(null);\n return (\n <CarouselContainer>\n <CarouselMedia>\n <Container>\n {navigation && (\n <CarouselNavbar>\n {title && <NavbarTitleContainer>{title}</NavbarTitleContainer>}\n {controls && (\n <NavbarControlsContainer>\n {onShowMore && (\n <NavbarControlsQuick onClick={onShowMore}>\n Show More\n </NavbarControlsQuick>\n )}\n <NavbarControlsSpace />\n <ArrowsContainer aria-hidden=\"false\">\n <ArrowsFlex>\n <ArrowsButton\n ref={prevRef}\n aria-label=\"Previous\"\n type=\"button\"\n >\n <span style={{ position: 'relative' }}>\n <ArrowsIconClip />\n <ArrowsSvg\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"presentation\"\n focusable=\"false\"\n >\n <g fill=\"none\">\n <path d=\"m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932\" />\n </g>\n </ArrowsSvg>\n </span>\n </ArrowsButton>\n <ArrowsDivider />\n <ArrowsButton\n aria-label=\"Next\"\n type=\"button\"\n ref={nextRef}\n >\n <span style={{ position: 'relative' }}>\n <ArrowsIconClip />\n <ArrowsSvg\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"presentation\"\n focusable=\"false\"\n >\n <g fill=\"none\">\n <path d=\"m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932\" />\n </g>\n </ArrowsSvg>\n </span>\n </ArrowsButton>\n </ArrowsFlex>\n </ArrowsContainer>\n </NavbarControlsContainer>\n )}\n </CarouselNavbar>\n )}\n </Container>\n </CarouselMedia>\n <CarouselSwiper\n {...props}\n cssMode\n onInit={swiper => {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.prevEl = prevRef.current;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.nextEl = nextRef.current;\n swiper.navigation.init();\n swiper.navigation.update();\n // console.log(\"Swiper\", swiper);\n }}\n >\n {React.Children.map(children, child => (\n <SwiperSlide>{child}</SwiperSlide>\n ))}\n </CarouselSwiper>\n </CarouselContainer>\n );\n};\n","import ButtonUnstyled from '@mui/core/ButtonUnstyled';\nimport styled from 'styled-components';\n// eslint-disable-next-line import/extensions\nimport { Swiper } from 'swiper/react';\n\nexport const CarouselContainer = styled.div``;\n\nexport const CarouselSwiper = styled(Swiper)`\n height: 100%;\n .swiper-pagination {\n .swiper-pagination-bullet-active {\n background-color: #fff;\n }\n .swiper-pagination-bullet-active-next {\n background-color: #ffffff;\n }\n .swiper-pagination-bullet {\n background-color: #ffffff;\n }\n }\n`;\n\nexport const CarouselPill = styled(ButtonUnstyled)`\n :hover {\n border-color: rgba(0, 0, 0, 0.08) !important;\n background-color: #ffffff !important;\n color: #000000 !important;\n box-shadow: 0px 0px 0px 1px transparent, 0px 0px 0px 4px transparent,\n 0px 6px 16px rgb(0 0 0 / 12%) !important;\n -webkit-transform: scale(1.04) !important;\n -ms-transform: scale(1.04) !important;\n transform: scale(1.04) !important;\n }\n\n -webkit-box-pack: center !important;\n -ms-flex-pack: center !important;\n -webkit-box-align: center !important;\n -ms-flex-align: center !important;\n -webkit-appearance: none !important;\n -moz-appearance: none !important;\n appearance: none !important;\n display: -webkit-inline-box !important;\n display: -moz-inline-box !important;\n display: -ms-inline-flexbox !important;\n display: -webkit-inline-flex !important;\n display: inline-flex !important;\n border-radius: 50% !important;\n border: 0px !important;\n outline: none !important;\n margin: 0px !important;\n padding: 0px !important;\n color: #222222 !important;\n background-color: rgba(255, 255, 255, 0.9) !important;\n cursor: pointer !important;\n -ms-touch-action: manipulation !important;\n touch-action: manipulation !important;\n -webkit-align-items: center !important;\n align-items: center !important;\n -webkit-justify-content: center !important;\n justify-content: center !important;\n border-style: solid !important;\n border-width: 1px !important;\n background-clip: padding-box !important;\n border-color: rgba(0, 0, 0, 0.08) !important;\n box-shadow: 0px 0px 0px 1px transparent, 0px 0px 0px 4px transparent,\n 0px 2px 4px rgb(0 0 0 / 18%) !important;\n -webkit-transition: -webkit-transform 0.25s ease, transform 0.25s ease !important;\n -moz-transition: transform 0.25s ease !important;\n transition: -ms-transform 0.25s ease, -webkit-transform 0.25s ease,\n transform 0.25s ease !important;\n width: 32px !important;\n height: 32px !important;\n`;\n\nexport const CarouselPillSvg = styled.svg`\n height: 10px;\n width: 10px;\n display: block;\n fill: currentcolor;\n`;\n\nexport const CarouselPillAnimatedContainer = styled.div`\n @keyframes fadein {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n }\n position: absolute !important;\n top: 50% !important;\n pointer-events: auto !important;\n transform: translateY(-50%) !important;\n left: 8px !important;\n animation-duration: 0.3s !important;\n animation-name: fadein !important;\n z-index: 180 !important;\n opacity: 0 !important;\n :hover {\n opacity: 1 !important;\n }\n`;\n","/* eslint-disable unused-imports/no-unused-vars */\nimport React, { useRef } from 'react';\n\nimport SwiperCore, { Navigation, Pagination } from 'swiper';\n// eslint-disable-next-line import/extensions\nimport { SwiperSlide } from 'swiper/react';\n\nimport {\n CarouselSwiper,\n CarouselPillSvg,\n CarouselPill,\n CarouselPillAnimatedContainer\n} from './styles';\n\nSwiperCore.use([Navigation, Pagination]);\n\nexport const PaginationCarousel: React.FC<any> = ({\n children,\n navigation,\n title,\n controls,\n ...props\n}) => {\n const prevRef = useRef<HTMLDivElement>(null);\n const nextRef = useRef<HTMLDivElement>(null);\n return (\n <>\n <CarouselPillAnimatedContainer>\n <CarouselPill ref={prevRef}>\n <span style={{ position: 'relative' }}>\n <CarouselPillSvg\n viewBox=\"0 0 16 16\"\n role=\"presentation\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"m10.8 16c-.4 0-.7-.1-.9-.4l-6.8-6.7c-.5-.5-.5-1.3 0-1.8l6.8-6.7c.5-.5 1.2-.5 1.7 0s .5 1.2 0 1.7l-5.8 5.9 5.8 5.9c.5.5.5 1.2 0 1.7-.2.3-.5.4-.8.4\" />\n </CarouselPillSvg>\n </span>\n </CarouselPill>\n </CarouselPillAnimatedContainer>\n <CarouselPillAnimatedContainer>\n <CarouselPill ref={nextRef}>\n <span style={{ position: 'relative' }}>\n <CarouselPillSvg\n viewBox=\"0 0 16 16\"\n role=\"presentation\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"m5.3 16c .3 0 .6-.1.8-.4l6.8-6.7c.5-.5.5-1.3 0-1.8l-6.8-6.7c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l5.8 5.9-5.8 5.9c-.5.5-.5 1.2 0 1.7.2.3.5.4.9.4\" />\n </CarouselPillSvg>\n </span>\n </CarouselPill>\n </CarouselPillAnimatedContainer>\n <CarouselSwiper\n {...props}\n pagination={{\n dynamicBullets: true\n }}\n onInit={swiper => {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.prevEl = prevRef.current;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line no-param-reassign\n swiper.params.navigation.nextEl = nextRef.current;\n swiper.navigation.init();\n swiper.navigation.update();\n // console.log(\"Swiper\", swiper);\n }}\n >\n {React.Children.map(children, child =>\n React.cloneElement(<SwiperSlide>{child}</SwiperSlide>, {\n ...props\n })\n )}\n </CarouselSwiper>\n </>\n );\n};\n"],"names":["CarouselSwiper","styled","Swiper","CarouselPillContainer","div","CarouselPill","ButtonUnstyled","CarouselPillFlex","CarouselPillArrowContainer","props","start","css","end","hidden","CarouselPillInlineChild","CarouselPillArrowSVG","svg","use","Navigation","CarouselContainer","CarouselNavbar","NavbarTitleContainer","NavbarControlsContainer","NavbarControlsQuick","a","NavbarControlsSpace","span","ArrowsContainer","ArrowsFlex","ArrowsButton","ArrowsDivider","ArrowsIconClip","ArrowsSvg","SwiperCore__default","CarouselMedia","CarouselPillSvg","CarouselPillAnimatedContainer","Pagination","children","navigation","title","controls","onShowMore","prevRef","useRef","nextRef","React","onClick","ref","type","style","position","viewBox","xmlns","role","focusable","fill","d","onInit","swiper","params","prevEl","current","nextEl","init","update","Children","map","child","SwiperSlide","quickLink","Container","cssMode","pagination","dynamicBullets","cloneElement","arrows","useState","progress","isBeginning","isEnd","swiperSlides","setSwiperSlides","setSwiper","left","slidePrev","slidesPerView","onSlideChange","right","slideNext"],"mappings":"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"}
package/dist/carousels.esm.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React, { useRef, useState } from 'react';
2
- import styled, { css } from 'styled-components';
3
2
  import SwiperCore, { Navigation, Pagination } from 'swiper';
4
3
  import { Swiper, SwiperSlide } from 'swiper/react';
5
4
  import ButtonUnstyled from '@mui/core/ButtonUnstyled';
5
+ import styled, { css } from 'styled-components';
6
6
  import { Container } from '@fox-dls/layout';
7
7
 
8
8
  function _extends() {
@@ -47,6 +47,7 @@ function _taggedTemplateLiteralLoose(strings, raw) {
47
47
  return strings;
48
48
  }
49
49
 
50
+ var _templateObject, _templateObject2, _templateObject3;
50
51
  var CarouselSwiper = /*#__PURE__*/styled(Swiper).withConfig({
51
52
  displayName: "styles__CarouselSwiper",
52
53
  componentId: "sc-1sue7gh-1"
@@ -59,8 +60,28 @@ var CarouselPill = /*#__PURE__*/styled(ButtonUnstyled).withConfig({
59
60
  displayName: "styles__CarouselPill",
60
61
  componentId: "sc-1sue7gh-3"
61
62
  })(["-webkit-box-pack:center !important;-webkit-box-align:center !important;appearance:none !important;display:inline-flex !important;border-radius:50% !important;border:1px solid rgb(221,221,221) !important;outline:none !important;margin:0px !important;padding:0px !important;color:rgb(34,34,34) !important;cursor:pointer !important;touch-action:manipulation !important;position:relative !important;background:transparent !important;transition:-ms-transform 0.25s ease 0s,-webkit-transform 0.25s ease 0s,transform 0.25s ease 0s !important;align-items:center !important;justify-content:center !important;width:36px !important;height:36px !important;::before{content:'' !important;display:block !important;position:absolute !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;width:36px !important;height:36px !important;border-radius:50% !important;border:1px solid rgb(221,221,221) !important;}"]);
62
-
63
- var _templateObject, _templateObject2;
63
+ var CarouselPillFlex = /*#__PURE__*/styled.div.withConfig({
64
+ displayName: "styles__CarouselPillFlex",
65
+ componentId: "sc-1sue7gh-4"
66
+ })(["display:flex !important;position:relative !important;min-width:0px !important;"]);
67
+ var CarouselPillArrowContainer = /*#__PURE__*/styled.div.withConfig({
68
+ displayName: "styles__CarouselPillArrowContainer",
69
+ componentId: "sc-1sue7gh-5"
70
+ })(["position:absolute !important;background:linear-gradient( to left,rgb(255,255,255) 56.77%,rgba(255,255,255,0) 94.47% ) !important;z-index:3 !important;", " ", " ", ""], function (props) {
71
+ return props.start && css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n left: 0px !important;\n width: 65px !important;\n "])));
72
+ }, function (props) {
73
+ return props.end && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n -webkit-box-pack: end !important;\n right: 0px !important;\n width: 75px !important;\n display: flex !important;\n justify-content: flex-end !important;\n "])));
74
+ }, function (props) {
75
+ return props.hidden && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n display: none !important;\n visibility: hidden !important;\n "])));
76
+ });
77
+ var CarouselPillInlineChild = /*#__PURE__*/styled.div.withConfig({
78
+ displayName: "styles__CarouselPillInlineChild",
79
+ componentId: "sc-1sue7gh-6"
80
+ })(["display:inline-block !important;white-space:nowrap !important;padding-right:8px !important;padding-top:4px !important;padding-bottom:4px !important;"]);
81
+ var CarouselPillArrowSVG = /*#__PURE__*/styled.svg.withConfig({
82
+ displayName: "styles__CarouselPillArrowSVG",
83
+ componentId: "sc-1sue7gh-7"
84
+ })(["display:block;fill:none;height:12px;width:12px;stroke:currentcolor;stroke-width:5.33333;overflow:visible;"]);
64
85
 
65
86
  var _excluded = ["children", "navigation", "title", "controls", "arrows"];
66
87
  SwiperCore.use([Navigation]);
@@ -84,10 +105,9 @@ var PillsCarousel = function PillsCarousel(_ref) {
84
105
  swiper = _useState2[0],
85
106
  setSwiper = _useState2[1];
86
107
 
87
- return /*#__PURE__*/React.createElement("div", {
88
- css: "\n display: flex !important;\n position: relative !important;\n min-width: 0px !important;\n "
89
- }, /*#__PURE__*/React.createElement("div", {
90
- css: "\n position: absolute !important;\n left: 0px !important;\n z-index: 3 !important;\n width: 65px !important;\n background: linear-gradient(\n to right,\n rgb(255, 255, 255) 56.77%,\n rgba(255, 255, 255, 0) 94.47%\n ) !important;\n " + (swiperSlides.isBeginning && css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: none !important;\n visibility: hidden !important;\n "])))) + "\n "
108
+ return /*#__PURE__*/React.createElement(CarouselPillFlex, null, /*#__PURE__*/React.createElement(CarouselPillArrowContainer, {
109
+ start: true,
110
+ hidden: swiperSlides.isBeginning
91
111
  }, arrows && /*#__PURE__*/React.createElement(CarouselPillContainer, null, /*#__PURE__*/React.createElement(CarouselPill, {
92
112
  left: +true,
93
113
  ref: prevRef,
@@ -97,14 +117,15 @@ var PillsCarousel = function PillsCarousel(_ref) {
97
117
  return swiper.slidePrev();
98
118
  }
99
119
  }, /*#__PURE__*/React.createElement("span", {
100
- css: "\n position: relative !important;\n "
101
- }, /*#__PURE__*/React.createElement("svg", {
120
+ style: {
121
+ position: 'relative'
122
+ }
123
+ }, /*#__PURE__*/React.createElement(CarouselPillArrowSVG, {
102
124
  viewBox: "0 0 32 32",
103
125
  xmlns: "http://www.w3.org/2000/svg",
104
126
  "aria-hidden": "true",
105
127
  role: "presentation",
106
- focusable: "false",
107
- css: "\n display: block;\n fill: none;\n height: 12px;\n width: 12px;\n stroke: currentcolor;\n stroke-width: 5.33333;\n overflow: visible;\n "
128
+ focusable: "false"
108
129
  }, /*#__PURE__*/React.createElement("g", {
109
130
  fill: "none"
110
131
  }, /*#__PURE__*/React.createElement("path", {
@@ -139,11 +160,10 @@ var PillsCarousel = function PillsCarousel(_ref) {
139
160
  });
140
161
  }
141
162
  }), React.Children.map(children, function (child) {
142
- return /*#__PURE__*/React.createElement(SwiperSlide, null, /*#__PURE__*/React.createElement("div", {
143
- css: "\n display: inline-block !important;\n white-space: nowrap !important;\n padding-right: 8px !important;\n padding-top: 4px !important;\n padding-bottom: 4px !important;\n "
144
- }, child));
145
- })), /*#__PURE__*/React.createElement("div", {
146
- css: "\n -webkit-box-pack: end !important;\n position: absolute !important;\n right: 0px !important;\n z-index: 3 !important;\n width: 75px !important;\n display: flex !important;\n justify-content: flex-end !important;\n background: linear-gradient(\n to left,\n rgb(255, 255, 255) 56.77%,\n rgba(255, 255, 255, 0) 94.47%\n ) !important;\n " + (swiperSlides.isEnd && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n display: none !important;\n visibility: hidden !important;\n "])))) + "\n "
163
+ return /*#__PURE__*/React.createElement(SwiperSlide, null, /*#__PURE__*/React.createElement(CarouselPillInlineChild, null, child));
164
+ })), /*#__PURE__*/React.createElement(CarouselPillArrowContainer, {
165
+ hidden: swiperSlides.isEnd,
166
+ end: true
147
167
  }, arrows && /*#__PURE__*/React.createElement(CarouselPillContainer, null, /*#__PURE__*/React.createElement(CarouselPill, {
148
168
  right: +true,
149
169
  "aria-label": "Next",
@@ -153,14 +173,15 @@ var PillsCarousel = function PillsCarousel(_ref) {
153
173
  return swiper.slideNext();
154
174
  }
155
175
  }, /*#__PURE__*/React.createElement("span", {
156
- css: "\n position: relative !important;\n "
157
- }, /*#__PURE__*/React.createElement("svg", {
176
+ style: {
177
+ position: 'relative'
178
+ }
179
+ }, /*#__PURE__*/React.createElement(CarouselPillArrowSVG, {
158
180
  viewBox: "0 0 32 32",
159
181
  xmlns: "http://www.w3.org/2000/svg",
160
182
  "aria-hidden": "true",
161
183
  role: "presentation",
162
- focusable: "false",
163
- css: "\n display: block;\n fill: none;\n height: 12px;\n width: 12px;\n stroke: currentcolor;\n stroke-width: 5.33333;\n overflow: visible;\n "
184
+ focusable: "false"
164
185
  }, /*#__PURE__*/React.createElement("g", {
165
186
  fill: "none"
166
187
  }, /*#__PURE__*/React.createElement("path", {
@@ -243,7 +264,9 @@ var CardCarousel = function CardCarousel(_ref) {
243
264
  "aria-label": "Previous",
244
265
  type: "button"
245
266
  }, /*#__PURE__*/React.createElement("span", {
246
- css: "\n position: relative;\n "
267
+ style: {
268
+ position: 'relative'
269
+ }
247
270
  }, /*#__PURE__*/React.createElement(ArrowsIconClip, null), /*#__PURE__*/React.createElement(ArrowsSvg, {
248
271
  viewBox: "0 0 32 32",
249
272
  xmlns: "http://www.w3.org/2000/svg",
@@ -259,7 +282,9 @@ var CardCarousel = function CardCarousel(_ref) {
259
282
  type: "button",
260
283
  ref: nextRef
261
284
  }, /*#__PURE__*/React.createElement("span", {
262
- css: "\n position: relative;\n "
285
+ style: {
286
+ position: 'relative'
287
+ }
263
288
  }, /*#__PURE__*/React.createElement(ArrowsIconClip, null), /*#__PURE__*/React.createElement(ArrowsSvg, {
264
289
  viewBox: "0 0 32 32",
265
290
  xmlns: "http://www.w3.org/2000/svg",
@@ -292,6 +317,10 @@ var CarouselSwiper$2 = /*#__PURE__*/styled(Swiper).withConfig({
292
317
  displayName: "styles__CarouselSwiper",
293
318
  componentId: "sc-y1spms-0"
294
319
  })([".swiper-wrapper{box-sizing:inherit !important;@media (min-width:744px){scroll-padding:40px !important;}@media (min-width:1128px){--scroll-padding:max(80px,calc((100vw - 1600px) / 2)) !important;scroll-padding:var(--scroll-padding) !important;}scroll-snap-type:x mandatory !important;overflow-x:auto !important;display:flex !important;scroll-padding:24px !important;.swiper-slide{@media (min-width:744px){min-width:476px !important;max-width:588px !important;flex:1 0 calc((100% - 80px) * 0.75) !important;}@media (min-width:1128px){flex:1 0 calc(50% - 88px) !important;}margin-left:16px !important;flex:1 0 calc(100% - 84px) !important;scroll-snap-align:start !important;scroll-snap-stop:always !important;}.swiper-slide:first-of-type{@media (min-width:744px){padding-left:40px !important;min-width:calc(516px) !important;max-width:calc(628px) !important;flex:1 0 calc((100% - 80px) * 0.75 + 40px) !important;}@media (min-width:1128px){max-width:calc(588px + max(80px,(100vw - 1600px) / 2)) !important;flex:1 0 calc(50% - 8px) !important;padding-left:max(80px,(100vw - 1600px) / 2) !important;}@media (min-width:2080px){max-width:calc(588px + max(80px,(100vw - 1930px) / 2)) !important;flex:1 0 calc(50% - 8px) !important;padding-left:max(80px,(100vw - 1930px) / 2) !important;}flex:1 0 calc(100% - 84px) !important;scroll-snap-align:start !important;scroll-snap-stop:always !important;margin-left:0px !important;padding-left:24px !important;}.swiper-slide:last-of-type{@media (min-width:744px){padding-right:40px !important;min-width:calc(516px) !important;max-width:calc(628px) !important;flex:1 0 calc((100% - 80px) * 0.75 + 40px) !important;}@media (min-width:1128px){max-width:calc(588px + max(80px,(100vw - 1600px) / 2)) !important;flex:1 0 calc(50% - 8px) !important;padding-right:max(80px,(100vw - 1600px) / 2) !important;}@media (min-width:2080px){max-width:calc(588px + max(80px,(100vw - 1930px) / 2)) !important;flex:1 0 calc(50% - 8px) !important;padding-right:max(80px,(100vw - 1930px) / 2) !important;}margin-left:16px !important;flex:1 0 calc(100% - 84px) !important;scroll-snap-align:start !important;scroll-snap-stop:always !important;padding-right:24px !important;}}"]);
320
+ var CarouselMedia = /*#__PURE__*/styled.div.withConfig({
321
+ displayName: "styles__CarouselMedia",
322
+ componentId: "sc-y1spms-1"
323
+ })(["@media (max-width:744px){display:none !important;}"]);
295
324
 
296
325
  var _excluded$2 = ["children", "navigation", "title", "controls", "quickLink", "onShowMore"];
297
326
  SwiperCore.use([Navigation]);
@@ -305,9 +334,7 @@ var FreeCarousel = function FreeCarousel(_ref) {
305
334
 
306
335
  var prevRef = useRef(null);
307
336
  var nextRef = useRef(null);
308
- return /*#__PURE__*/React.createElement(CarouselContainer, null, /*#__PURE__*/React.createElement("div", {
309
- css: "\n @media (max-width: 744px) {\n display: none !important;\n }\n "
310
- }, /*#__PURE__*/React.createElement(Container, null, navigation && /*#__PURE__*/React.createElement(CarouselNavbar, null, title && /*#__PURE__*/React.createElement(NavbarTitleContainer, null, title), controls && /*#__PURE__*/React.createElement(NavbarControlsContainer, null, onShowMore && /*#__PURE__*/React.createElement(NavbarControlsQuick, {
337
+ return /*#__PURE__*/React.createElement(CarouselContainer, null, /*#__PURE__*/React.createElement(CarouselMedia, null, /*#__PURE__*/React.createElement(Container, null, navigation && /*#__PURE__*/React.createElement(CarouselNavbar, null, title && /*#__PURE__*/React.createElement(NavbarTitleContainer, null, title), controls && /*#__PURE__*/React.createElement(NavbarControlsContainer, null, onShowMore && /*#__PURE__*/React.createElement(NavbarControlsQuick, {
311
338
  onClick: onShowMore
312
339
  }, "Show More"), /*#__PURE__*/React.createElement(NavbarControlsSpace, null), /*#__PURE__*/React.createElement(ArrowsContainer, {
313
340
  "aria-hidden": "false"
@@ -316,7 +343,9 @@ var FreeCarousel = function FreeCarousel(_ref) {
316
343
  "aria-label": "Previous",
317
344
  type: "button"
318
345
  }, /*#__PURE__*/React.createElement("span", {
319
- css: "\n position: relative;\n "
346
+ style: {
347
+ position: 'relative'
348
+ }
320
349
  }, /*#__PURE__*/React.createElement(ArrowsIconClip, null), /*#__PURE__*/React.createElement(ArrowsSvg, {
321
350
  viewBox: "0 0 32 32",
322
351
  xmlns: "http://www.w3.org/2000/svg",
@@ -332,7 +361,9 @@ var FreeCarousel = function FreeCarousel(_ref) {
332
361
  type: "button",
333
362
  ref: nextRef
334
363
  }, /*#__PURE__*/React.createElement("span", {
335
- css: "\n position: relative;\n "
364
+ style: {
365
+ position: 'relative'
366
+ }
336
367
  }, /*#__PURE__*/React.createElement(ArrowsIconClip, null), /*#__PURE__*/React.createElement(ArrowsSvg, {
337
368
  viewBox: "0 0 32 32",
338
369
  xmlns: "http://www.w3.org/2000/svg",
@@ -374,6 +405,10 @@ var CarouselPillSvg = /*#__PURE__*/styled.svg.withConfig({
374
405
  displayName: "styles__CarouselPillSvg",
375
406
  componentId: "sc-jtjv4e-3"
376
407
  })(["height:10px;width:10px;display:block;fill:currentcolor;"]);
408
+ var CarouselPillAnimatedContainer = /*#__PURE__*/styled.div.withConfig({
409
+ displayName: "styles__CarouselPillAnimatedContainer",
410
+ componentId: "sc-jtjv4e-4"
411
+ })(["@keyframes fadein{0%{opacity:0;}100%{opacity:1;}}position:absolute !important;top:50% !important;pointer-events:auto !important;transform:translateY(-50%) !important;left:8px !important;animation-duration:0.3s !important;animation-name:fadein !important;z-index:180 !important;opacity:0 !important;:hover{opacity:1 !important;}"]);
377
412
 
378
413
  var _excluded$3 = ["children", "navigation", "title", "controls"];
379
414
  SwiperCore.use([Navigation, Pagination]);
@@ -383,12 +418,12 @@ var PaginationCarousel = function PaginationCarousel(_ref) {
383
418
 
384
419
  var prevRef = useRef(null);
385
420
  var nextRef = useRef(null);
386
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
387
- css: "\n @keyframes fadein {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n }\n position: absolute !important;\n top: 50% !important;\n pointer-events: auto !important;\n transform: translateY(-50%) !important;\n left: 8px !important;\n animation-duration: 0.3s !important;\n animation-name: fadein !important;\n z-index: 180 !important;\n opacity: 0 !important;\n :hover {\n opacity: 1 !important;\n }\n "
388
- }, /*#__PURE__*/React.createElement(CarouselPill$1, {
421
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CarouselPillAnimatedContainer, null, /*#__PURE__*/React.createElement(CarouselPill$1, {
389
422
  ref: prevRef
390
423
  }, /*#__PURE__*/React.createElement("span", {
391
- css: "\n position: relative !important;\n "
424
+ style: {
425
+ position: 'relative'
426
+ }
392
427
  }, /*#__PURE__*/React.createElement(CarouselPillSvg, {
393
428
  viewBox: "0 0 16 16",
394
429
  role: "presentation",
@@ -396,12 +431,12 @@ var PaginationCarousel = function PaginationCarousel(_ref) {
396
431
  focusable: "false"
397
432
  }, /*#__PURE__*/React.createElement("path", {
398
433
  d: "m10.8 16c-.4 0-.7-.1-.9-.4l-6.8-6.7c-.5-.5-.5-1.3 0-1.8l6.8-6.7c.5-.5 1.2-.5 1.7 0s .5 1.2 0 1.7l-5.8 5.9 5.8 5.9c.5.5.5 1.2 0 1.7-.2.3-.5.4-.8.4"
399
- }))))), /*#__PURE__*/React.createElement("div", {
400
- css: "\n @keyframes fadein {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n }\n position: absolute !important;\n top: 50% !important;\n pointer-events: auto !important;\n transform: translateY(-50%) !important;\n right: 8px !important;\n animation-duration: 0.3s !important;\n animation-name: fadein !important;\n z-index: 180 !important;\n opacity: 0 !important;\n :hover {\n opacity: 1 !important;\n }\n "
401
- }, /*#__PURE__*/React.createElement(CarouselPill$1, {
434
+ }))))), /*#__PURE__*/React.createElement(CarouselPillAnimatedContainer, null, /*#__PURE__*/React.createElement(CarouselPill$1, {
402
435
  ref: nextRef
403
436
  }, /*#__PURE__*/React.createElement("span", {
404
- css: "\n position: relative !important;\n "
437
+ style: {
438
+ position: 'relative'
439
+ }
405
440
  }, /*#__PURE__*/React.createElement(CarouselPillSvg, {
406
441
  viewBox: "0 0 16 16",
407
442
  role: "presentation",