@fox-dls/carousels 0.0.1 → 1.0.0

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.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';\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';\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';\nimport { Swiper } from 'swiper/react';\n\nexport const CarouselSwiper = styled(Swiper)``;\n","import React, { useRef } from 'react';\n\nimport SwiperCore, { Navigation } from 'swiper';\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';\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';\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';\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';\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","SwiperCore","use","Navigation","PillsCarousel","children","arrows","props","prevRef","useRef","nextRef","useState","progress","isBeginning","isEnd","swiperSlides","setSwiperSlides","swiper","setSwiper","_jsxs","css","_jsx","left","ref","type","onClick","slidePrev","viewBox","xmlns","role","focusable","fill","d","cssMode","slidesPerView","onInit","params","navigation","prevEl","current","nextEl","init","update","onSlideChange","React","Children","map","child","SwiperSlide","right","slideNext","CarouselContainer","CarouselNavbar","NavbarTitleContainer","NavbarControlsContainer","NavbarControlsQuick","a","NavbarControlsSpace","span","ArrowsContainer","ArrowsFlex","ArrowsButton","ArrowsDivider","ArrowsIconClip","ArrowsSvg","svg","CardCarousel","title","controls","onShowMore","FreeCarousel","Container","CarouselPillSvg","Pagination","PaginationCarousel","pagination","dynamicBullets","cloneElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,IAAMA,gBAAc,gBAAGC,0BAAM,CAACC,YAAD,CAAT;AAAA;AAAA;AAAA,uHAApB;AAUA,IAAMC,qBAAqB,gBAAGF,0BAAM,CAACG,GAAV;AAAA;AAAA;AAAA,8HAA3B;AAOA,IAAMC,cAAY,gBAAGJ,0BAAM,CAACK,kCAAD,CAAT;AAAA;AAAA;AAAA,06BAAlB;;;;;ACbPC,8BAAU,CAACC,GAAX,CAAe,CAACC,qBAAD,CAAf;IAEaC,aAAa,GAAkB,SAA/BA,aAA+B;MAC1CC,gBAAAA;MAIAC,cAAAA;MACGC;;AAEH,MAAMC,OAAO,GAAGC,YAAM,CAAM,IAAN,CAAtB;AACA,MAAMC,OAAO,GAAGD,YAAM,CAAM,IAAN,CAAtB;;AACA,kBAAwCE,cAAQ,CAAM;AACpDC,IAAAA,QAAQ,EAAE,CAD0C;AAEpDC,IAAAA,WAAW,EAAE,IAFuC;AAGpDC,IAAAA,KAAK,EAAE;AAH6C,GAAN,CAAhD;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAKA,mBAA4BL,cAAQ,CAAM,IAAN,CAApC;AAAA,MAAOM,MAAP;AAAA,MAAeC,SAAf;;AACA,SACEC;AACEC,IAAAA,GAAG;eAMHC;AACED,MAAAA,GAAG,+UAUCL,YAAY,CAACF,WAAb,IACFO,UADE,yKAVD;gBAiBFd,MAAM,IACLe,eAACxB;kBACCwB,eAACtB;AACCuB,UAAAA,IAAI,EAAE,CAAC;AACPC,UAAAA,GAAG,EAAEf;wBACM;AACXgB,UAAAA,IAAI,EAAC;AACLC,UAAAA,OAAO,EAAE;AAAA,mBAAMR,MAAM,CAACS,SAAP,EAAN;AAAA;oBAETL;AACED,YAAAA,GAAG;sBAIHC;AACEM,cAAAA,OAAO,EAAC;AACRC,cAAAA,KAAK,EAAC;6BACM;AACZC,cAAAA,IAAI,EAAC;AACLC,cAAAA,SAAS,EAAC;AACVV,cAAAA,GAAG;wBAUHC;AAAGU,gBAAAA,IAAI,EAAC;0BACNV;AAAMW,kBAAAA,CAAC,EAAC;;;;;;;gBAStBX,eAAC3B,+BACKa;AACJ0B,MAAAA,OAAO,EAAE;AACTC,MAAAA,aAAa,EAAC;AACdC,MAAAA,MAAM,EAAE,gBAAClB,MAAD;AACNC,QAAAA,SAAS,CAACD,MAAD,CAAT;AAEA;AACA;;AACAA,QAAAA,MAAM,CAACmB,MAAP,CAAcC,UAAd,CAAyBC,MAAzB,GAAkC9B,OAAO,CAAC+B,OAA1C;AAEA;AACA;;AACAtB,QAAAA,MAAM,CAACmB,MAAP,CAAcC,UAAd,CAAyBG,MAAzB,GAAkC9B,OAAO,CAAC6B,OAA1C;AACAtB,QAAAA,MAAM,CAACoB,UAAP,CAAkBI,IAAlB;AACAxB,QAAAA,MAAM,CAACoB,UAAP,CAAkBK,MAAlB;AACA1B,QAAAA,eAAe,CAAC;AACdJ,UAAAA,QAAQ,EAAEK,MAAM,CAACL,QADH;AAEdC,UAAAA,WAAW,EAAEI,MAAM,CAACJ,WAFN;AAGdC,UAAAA,KAAK,EAAEG,MAAM,CAACH;AAHA,SAAD,CAAf;AAMD;AACD6B,MAAAA,aAAa,EAAE,uBAAA1B,MAAM;AACnB;AAEAD,QAAAA,eAAe,CAAC;AACdJ,UAAAA,QAAQ,EAAEK,MAAM,CAACL,QADH;AAEdC,UAAAA,WAAW,EAAEI,MAAM,CAACJ,WAFN;AAGdC,UAAAA,KAAK,EAAEG,MAAM,CAACH;AAHA,SAAD,CAAf;AAKD;gBAEA8B,yBAAK,CAACC,QAAN,CAAeC,GAAf,CAAmBzC,QAAnB,EAA6B,UAAA0C,KAAK;AAAA,eACjC1B,eAAC2B;oBACC3B;AACED,YAAAA,GAAG;sBAQF2B;;kBAX4B;AAAA,OAAlC;iBAiBH1B;AACED,MAAAA,GAAG,kdAaCL,YAAY,CAACD,KAAb,IACFM,UADE,2KAbD;gBAoBFd,MAAM,IACLe,eAACxB;kBACCwB,eAACtB;AACCkD,UAAAA,KAAK,EAAE,CAAC;wBACG;AACXzB,UAAAA,IAAI,EAAC;AACLD,UAAAA,GAAG,EAAEb;AACLe,UAAAA,OAAO,EAAE;AAAA,mBAAMR,MAAM,CAACiC,SAAP,EAAN;AAAA;oBAET7B;AACED,YAAAA,GAAG;sBAIHC;AACEM,cAAAA,OAAO,EAAC;AACRC,cAAAA,KAAK,EAAC;6BACM;AACZC,cAAAA,IAAI,EAAC;AACLC,cAAAA,SAAS,EAAC;AACVV,cAAAA,GAAG;wBAUHC;AAAGU,gBAAAA,IAAI,EAAC;0BACNV;AAAMW,kBAAAA,CAAC,EAAC;;;;;;;;YAxK1B;AAkLD;;AC3MM,IAAMmB,iBAAiB,gBAAGxD,0BAAM,CAACG,GAAV;AAAA;AAAA;AAAA,0DAAvB;AAKA,IAAMsD,cAAc,gBAAGzD,0BAAM,CAACG,GAAV;AAAA;AAAA;AAAA,yfAApB;AAkBA,IAAMuD,oBAAoB,gBAAG1D,0BAAM,CAACG,GAAV;AAAA;AAAA;AAAA,2DAA1B;AAoBA,IAAMwD,uBAAuB,gBAAG3D,0BAAM,CAACG,GAAV;AAAA;AAAA;AAAA,0FAA7B;AAMA,IAAMyD,mBAAmB,gBAAG5D,0BAAM,CAAC6D,CAAV;AAAA;AAAA;AAAA,iWAAzB;AAgBA,IAAMC,mBAAmB,gBAAG9D,0BAAM,CAAC+D,IAAV;AAAA;AAAA;AAAA,+JAAzB;AASA,IAAMC,eAAe,gBAAGhE,0BAAM,CAACG,GAAV;AAAA;AAAA;AAAA,6JAArB;AAQA,IAAM8D,UAAU,gBAAGjE,0BAAM,CAACG,GAAV;AAAA;AAAA;AAAA,0JAAhB;AAQA,IAAM+D,YAAY,gBAAGlE,0BAAM,CAACK,kCAAD,CAAT;AAAA;AAAA;AAAA,mrCAAlB;AAiDA,IAAM8D,aAAa,gBAAGnE,0BAAM,CAAC+D,IAAV;AAAA;AAAA;AAAA,mCAAnB;AAIA,IAAMK,cAAc,gBAAGpE,0BAAM,CAAC+D,IAAV;AAAA;AAAA;AAAA,8RAApB;AAaA,IAAMM,SAAS,gBAAGrE,0BAAM,CAACsE,GAAV;AAAA;AAAA;AAAA,2GAAf;;AC5JA,IAAMvE,gBAAc,gBAAGC,0BAAM,CAACC,YAAD,CAAT;AAAA;AAAA;AAAA,QAApB;;;ACkBPK,8BAAU,CAACC,GAAX,CAAe,CAACC,qBAAD,CAAf;IAEa+D,YAAY,GAAkB,SAA9BA,YAA8B;MACzC7D,gBAAAA;MACAgC,kBAAAA;MACA8B,aAAAA;MACAC,gBAAAA;MACAC,kBAAAA;MACG9D;;AAEH,MAAMC,OAAO,GAAGC,YAAM,CAAiB,IAAjB,CAAtB;AACA,MAAMC,OAAO,GAAGD,YAAM,CAAiB,IAAjB,CAAtB;AACA,SACEU,gBAACgC;eACEd,UAAU,IACTlB,gBAACiC;iBACEe,KAAK,IAAI9C,eAACgC;kBAAsBc;kBAChCC,QAAQ,IACPjD,gBAACmC;mBACEe,UAAU,IACThD,eAACkC;AAAoB9B,UAAAA,OAAO,EAAE4C;;oBAIhChD,eAACoC,kCACDpC,eAACsC;yBAA4B;oBAC3BxC,gBAACyC;uBACCvC,eAACwC;AACCtC,cAAAA,GAAG,EAAEf;4BACM;AACXgB,cAAAA,IAAI,EAAC;wBAELL;AACEC,gBAAAA,GAAG;2BAIHC,eAAC0C,6BACD1C,eAAC2C;AACCrC,kBAAAA,OAAO,EAAC;AACRC,kBAAAA,KAAK,EAAC;iCACM;AACZC,kBAAAA,IAAI,EAAC;AACLC,kBAAAA,SAAS,EAAC;4BAEVT;AAAGU,oBAAAA,IAAI,EAAC;8BACNV;AAAMW,sBAAAA,CAAC,EAAC;;;;;wBAKhBX,eAACyC,4BACDzC,eAACwC;4BAAwB;AAAOrC,cAAAA,IAAI,EAAC;AAASD,cAAAA,GAAG,EAAEb;wBACjDS;AACEC,gBAAAA,GAAG;2BAIHC,eAAC0C,6BACD1C,eAAC2C;AACCrC,kBAAAA,OAAO,EAAC;AACRC,kBAAAA,KAAK,EAAC;iCACM;AACZC,kBAAAA,IAAI,EAAC;AACLC,kBAAAA,SAAS,EAAC;4BAEVT;AAAGU,oBAAAA,IAAI,EAAC;8BACNV;AAAMW,sBAAAA,CAAC,EAAC;;;;;;;;;gBAW5BX,eAAC3B,+BACKa;AACJ4B,MAAAA,MAAM,EAAE,gBAAAlB,MAAM;AACZ;AACA;AACA;AACAA,QAAAA,MAAM,CAACmB,MAAP,CAAcC,UAAd,CAAyBC,MAAzB,GAAkC9B,OAAO,CAAC+B,OAA1C;AAEA;AACA;;AACAtB,QAAAA,MAAM,CAACmB,MAAP,CAAcC,UAAd,CAAyBG,MAAzB,GAAkC9B,OAAO,CAAC6B,OAA1C;AACAtB,QAAAA,MAAM,CAACoB,UAAP,CAAkBI,IAAlB;AACAxB,QAAAA,MAAM,CAACoB,UAAP,CAAkBK,MAAlB;AAED;gBAEAE,yBAAK,CAACC,QAAN,CAAeC,GAAf,CAAmBzC,QAAnB,EAA6B,UAAA0C,KAAK;AAAA,eACjC1B,eAAC2B;oBAAaD;kBADmB;AAAA,OAAlC;;YAlFP;AAwFD;;ACtHM,IAAMrD,gBAAc,gBAAGC,0BAAM,CAACC,YAAD,CAAT;AAAA;AAAA;AAAA,gpEAApB;;;ACoBPK,8BAAU,CAACC,GAAX,CAAe,CAACC,qBAAD,CAAf;IAEamE,YAAY,GAAkB,SAA9BA,YAA8B;MACzCjE,gBAAAA;MACAgC,kBAAAA;MACA8B,aAAAA;MACAC,gBAAAA;MAEAC,kBAAAA;MACG9D;;AAEH,MAAMC,OAAO,GAAGC,YAAM,CAAiB,IAAjB,CAAtB;AACA,MAAMC,OAAO,GAAGD,YAAM,CAAiB,IAAjB,CAAtB;AACA,SACEU,gBAACgC;eACC9B;AACED,MAAAA,GAAG;gBAMHC,eAACkD;kBACElC,UAAU,IACTlB,gBAACiC;qBACEe,KAAK,IAAI9C,eAACgC;sBAAsBc;sBAChCC,QAAQ,IACPjD,gBAACmC;uBACEe,UAAU,IACThD,eAACkC;AAAoB9B,cAAAA,OAAO,EAAE4C;;wBAIhChD,eAACoC,kCACDpC,eAACsC;6BAA4B;wBAC3BxC,gBAACyC;2BACCvC,eAACwC;AACCtC,kBAAAA,GAAG,EAAEf;gCACM;AACXgB,kBAAAA,IAAI,EAAC;4BAELL;AACEC,oBAAAA,GAAG;+BAIHC,eAAC0C,6BACD1C,eAAC2C;AACCrC,sBAAAA,OAAO,EAAC;AACRC,sBAAAA,KAAK,EAAC;qCACM;AACZC,sBAAAA,IAAI,EAAC;AACLC,sBAAAA,SAAS,EAAC;gCAEVT;AAAGU,wBAAAA,IAAI,EAAC;kCACNV;AAAMW,0BAAAA,CAAC,EAAC;;;;;4BAKhBX,eAACyC,4BACDzC,eAACwC;gCACY;AACXrC,kBAAAA,IAAI,EAAC;AACLD,kBAAAA,GAAG,EAAEb;4BAELS;AACEC,oBAAAA,GAAG;+BAIHC,eAAC0C,6BACD1C,eAAC2C;AACCrC,sBAAAA,OAAO,EAAC;AACRC,sBAAAA,KAAK,EAAC;qCACM;AACZC,sBAAAA,IAAI,EAAC;AACLC,sBAAAA,SAAS,EAAC;gCAEVT;AAAGU,wBAAAA,IAAI,EAAC;kCACNV;AAAMW,0BAAAA,CAAC,EAAC;;;;;;;;;;;gBAahCX,eAAC3B,+BACKa;AACJ0B,MAAAA,OAAO;AACPE,MAAAA,MAAM,EAAE,gBAAAlB,MAAM;AACZ;AACA;AACA;AACAA,QAAAA,MAAM,CAACmB,MAAP,CAAcC,UAAd,CAAyBC,MAAzB,GAAkC9B,OAAO,CAAC+B,OAA1C;AAEA;AACA;;AACAtB,QAAAA,MAAM,CAACmB,MAAP,CAAcC,UAAd,CAAyBG,MAAzB,GAAkC9B,OAAO,CAAC6B,OAA1C;AACAtB,QAAAA,MAAM,CAACoB,UAAP,CAAkBI,IAAlB;AACAxB,QAAAA,MAAM,CAACoB,UAAP,CAAkBK,MAAlB;AAED;gBAEAE,yBAAK,CAACC,QAAN,CAAeC,GAAf,CAAmBzC,QAAnB,EAA6B,UAAA0C,KAAK;AAAA,eACjC1B,eAAC2B;oBAAaD;kBADmB;AAAA,OAAlC;;YAjGP;AAuGD;;ACrIM,IAAMrD,cAAc,gBAAGC,0BAAM,CAACC,YAAD,CAAT;AAAA;AAAA;AAAA,oNAApB;AAeA,IAAMG,YAAY,gBAAGJ,0BAAM,CAACK,kCAAD,CAAT;AAAA;AAAA;AAAA,0qDAAlB;AAoDA,IAAMwE,eAAe,gBAAG7E,0BAAM,CAACsE,GAAV;AAAA;AAAA;AAAA,+DAArB;;;ACjEPhE,8BAAU,CAACC,GAAX,CAAe,CAACC,qBAAD,EAAasE,qBAAb,CAAf;IAEaC,kBAAkB,GAAkB,SAApCA,kBAAoC;MAC/CrE,gBAAAA;MAIGE;;AAEH,MAAMC,OAAO,GAAGC,YAAM,CAAiB,IAAjB,CAAtB;AACA,MAAMC,OAAO,GAAGD,YAAM,CAAiB,IAAjB,CAAtB;AACA,SACEU;eACEE;AACED,MAAAA,GAAG;gBAwBHC,eAACtB;AAAawB,QAAAA,GAAG,EAAEf;kBACjBa;AACED,UAAAA,GAAG;oBAIHC,eAACmD;AACC7C,YAAAA,OAAO,EAAC;AACRE,YAAAA,IAAI,EAAC;2BACO;AACZC,YAAAA,SAAS,EAAC;sBAEVT;AAAMW,cAAAA,CAAC,EAAC;;;;;gBAKhBX;AACED,MAAAA,GAAG;gBAwBHC,eAACtB;AAAawB,QAAAA,GAAG,EAAEb;kBACjBW;AACED,UAAAA,GAAG;oBAIHC,eAACmD;AACC7C,YAAAA,OAAO,EAAC;AACRE,YAAAA,IAAI,EAAC;2BACO;AACZC,YAAAA,SAAS,EAAC;sBAEVT;AAAMW,cAAAA,CAAC,EAAC;;;;;gBAKhBX,eAAC3B,6BACKa;AACJoE,MAAAA,UAAU,EAAE;AACVC,QAAAA,cAAc,EAAE;AADN;AAGZzC,MAAAA,MAAM,EAAE,gBAAAlB,MAAM;AACZ;AACA;AACA;AACAA,QAAAA,MAAM,CAACmB,MAAP,CAAcC,UAAd,CAAyBC,MAAzB,GAAkC9B,OAAO,CAAC+B,OAA1C;AAEA;AACA;;AACAtB,QAAAA,MAAM,CAACmB,MAAP,CAAcC,UAAd,CAAyBG,MAAzB,GAAkC9B,OAAO,CAAC6B,OAA1C;AACAtB,QAAAA,MAAM,CAACoB,UAAP,CAAkBI,IAAlB;AACAxB,QAAAA,MAAM,CAACoB,UAAP,CAAkBK,MAAlB;AAED;gBAEAE,yBAAK,CAACC,QAAN,CAAeC,GAAf,CAAmBzC,QAAnB,EAA6B,UAAA0C,KAAK;AAAA,eACjCH,yBAAK,CAACiC,YAAN,CAAmBxD,eAAC2B;oBAAaD;kBAAjC,eACKxC,KADL,EADiC;AAAA,OAAlC;;YAzGP;AAiHD;;;;;;;"}

package/dist/lib/card/styles/index.d.ts

@@ -0,0 +1 @@
+export declare const CarouselSwiper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("swiper/react").SwiperProps>, any, {}, never>;

package/dist/lib/free/styles/index.d.ts

@@ -0,0 +1 @@
+export declare const CarouselSwiper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("swiper/react").SwiperProps>, any, {}, never>;

package/dist/lib/pagination/styles/index.d.ts

@@ -0,0 +1,6 @@
+export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CarouselSwiper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("swiper/react").SwiperProps>, any, {}, never>;
+export declare const CarouselPill: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("@mui/core/ButtonUnstyled").ButtonUnstyledOwnProps & Omit<any, keyof import("@mui/core/ButtonUnstyled").ButtonUnstyledOwnProps> & {
+    component?: import("react").ElementType<any>;
+}, string | number | symbol> & import("react").RefAttributes<any>>, any, {}, never>;
+export declare const CarouselPillSvg: import("styled-components").StyledComponent<"svg", any, {}, never>;

package/dist/lib/pills/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PillsCarousel: React.FC<any>;

package/dist/lib/pills/styles/index.d.ts

@@ -0,0 +1,6 @@
+export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CarouselSwiper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("swiper/react").SwiperProps>, any, {}, never>;
+export declare const CarouselPillContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CarouselPill: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("@mui/core/ButtonUnstyled").ButtonUnstyledOwnProps & Omit<any, keyof import("@mui/core/ButtonUnstyled").ButtonUnstyledOwnProps> & {
+    component?: import("react").ElementType<any>;
+}, string | number | symbol> & import("react").RefAttributes<any>>, any, any, never>;

package/{lib → dist/lib}/styles/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CarouselNavbar: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NavbarTitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -9,7 +8,7 @@ export declare const NavbarControlsSpace: import("styled-components").StyledComp
 export declare const ArrowsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ArrowsFlex: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ArrowsButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("@mui/core/ButtonUnstyled").ButtonUnstyledOwnProps & Omit<any, keyof import("@mui/core/ButtonUnstyled").ButtonUnstyledOwnProps> & {
-    component?: import("react").ElementType<any> | undefined;
+    component?: import("react").ElementType<any>;
 }, string | number | symbol> & import("react").RefAttributes<any>>, any, any, never>;
 export declare const ArrowsDivider: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ArrowsIconClip: import("styled-components").StyledComponent<"span", any, {}, never>;

package/package.json

@@ -1,15 +1,117 @@
 {
   "name": "@fox-dls/carousels",
-  "version": "0.0.1",
-  "main": "./carousels.umd.js",
-  "module": "./carousels.esm.js",
-  "typings": "./index.d.ts",
-  "dependencies": {},
+  "version": "1.0.0",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rimraf --no-glob ./dist && cross-env NODE_ENV=production microbundle --tsconfig ./tsconfig.build.json --jsx React.createElement --jsxFragment React.Fragment -f cjs,es --no-compress",
+    "build:react17jsx": "microbundle --tsconfig ./tsconfig.build.json --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx --compress",
+    "dev": "microbundle watch",
+    "clean": "rimraf --no-glob ./dist ./coverage ./tsconfig.tsbuildinfo ./.eslintcache && jest --clear-cache",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+    "typecheck": "tsc --project ./tsconfig.json --noEmit",
+    "test": "run-s 'test:*'",
+    "test:unit": "jest --config jest.config.js --maxWorkers=50% --color $@",
+    "ci-test:unit": "jest --config jest.config.js --runInBand --color $@",
+    "fix:staged-files": "lint-staged --allow-empty",
+    "fix:all-files": "eslint . --ext .ts,.tsx,.js,.jsx --fix"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@changesets/changelog-github": "0.4.2",
+    "@changesets/cli": "2.18.1",
+    "@next/bundle-analyzer": "12.0.5-canary.13",
+    "@size-limit/file": "7.0.3",
+    "@storybook/react": "^6.4.4",
+    "@svgr/webpack": "6.1.0",
+    "@testing-library/jest-dom": "5.15.1",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/react-hooks": "7.0.2",
+    "@types/cors": "2.8.12",
+    "@types/eslint": "8.2.0",
+    "@types/google-map-react": "^2.1.3",
+    "@types/jest": "27.0.3",
+    "@types/node": "16.11.11",
+    "@types/react": "17.0.37",
+    "@types/react-dom": "17.0.11",
+    "@types/react-is": "17.0.3",
+    "@types/react-redux": "^7.1.20",
+    "@types/shell-quote": "1.7.1",
+    "@types/styled-components": "^5.1.16",
+    "@types/swiper": "^5.4.3",
+    "@types/uuid": "^8.3.3",
+    "@typescript-eslint/eslint-plugin": "5.5.0",
+    "@typescript-eslint/parser": "5.5.0",
+    "autoprefixer": "10.4.0",
+    "babel-jest": "27.4.2",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-styled-components": "^2.0.2",
+    "cross-env": "7.0.3",
+    "cypress": "^9.1.0",
+    "dotenv": "^10.0.0",
+    "dotenv-flow": "3.2.0",
+    "dotenv-flow-cli": "1.0.0",
+    "duplicate-package-checker-webpack-plugin": "^3.0.0",
+    "eslint": "8.3.0",
+    "eslint-config-airbnb": "^19.0.2",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-next": "12.0.5-canary.13",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-import-resolver-typescript": "2.5.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-jest": "25.3.0",
+    "eslint-plugin-jest-formatting": "3.1.0",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.27.1",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "eslint-plugin-regexp": "1.5.1",
+    "eslint-plugin-sonarjs": "0.11.0",
+    "eslint-plugin-testing-library": "5.0.1",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "husky": "^7.0.4",
+    "is-ci": "3.0.1",
+    "jest": "27.4.3",
+    "lint-staged": "^12.1.2",
+    "microbundle": "0.14.2",
+    "ngx-deploy-npm": "^3.0.6",
+    "nock": "^13.2.1",
+    "npm-run-all": "4.1.5",
+    "prettier": "2.5.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-test-renderer": "17.0.2",
+    "rimraf": "3.0.2",
+    "sass": "1.44.0",
+    "shell-quote": "1.7.3",
+    "size-limit": "7.0.3",
+    "symlink-dir": "5.0.1",
+    "sync-directory": "4.0.7",
+    "ts-jest": "27.0.7",
+    "ts-node": "10.4.0",
+    "typescript": "4.5.2",
+    "typescript-plugin-styled-components": "^2.0.0"
+  },
   "peerDependencies": {
-    "swiper": "^7.2.0",
+    "@fox-dls/layout": "1.0.0",
+    "@mui/core": "^5.0.0-alpha.54",
     "react": "^17.0.2",
     "styled-components": "^5.3.3",
-    "@mui/core": "^5.0.0-alpha.53",
-    "@fox-dls/layout": "0.0.1"
+    "swiper": "^7.3.1"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   }
 }

package/src/index.ts

@@ -0,0 +1,6 @@
+import type {} from 'styled-components/cssprop';
+
+export * from './lib/pills/index';
+export * from './lib/card/index';
+export * from './lib/free/index';
+export * from './lib/pagination/index';

package/src/lib/card/index.tsx

@@ -0,0 +1,122 @@
+import React, { useRef } from 'react';
+
+import SwiperCore, { Navigation } from 'swiper';
+import { SwiperSlide } from 'swiper/react';
+
+import {
+  CarouselContainer,
+  CarouselNavbar,
+  NavbarTitleContainer,
+  NavbarControlsContainer,
+  NavbarControlsQuick,
+  NavbarControlsSpace,
+  ArrowsContainer,
+  ArrowsFlex,
+  ArrowsDivider,
+  ArrowsButton,
+  ArrowsIconClip,
+  ArrowsSvg
+} from '../styles';
+import { CarouselSwiper } from './styles';
+
+SwiperCore.use([Navigation]);
+
+export const CardCarousel: React.FC<any> = ({
+  children,
+  navigation,
+  title,
+  controls,
+  onShowMore,
+  ...props
+}) => {
+  const prevRef = useRef<HTMLDivElement>(null);
+  const nextRef = useRef<HTMLDivElement>(null);
+  return (
+    <CarouselContainer>
+      {navigation && (
+        <CarouselNavbar>
+          {title && <NavbarTitleContainer>{title}</NavbarTitleContainer>}
+          {controls && (
+            <NavbarControlsContainer>
+              {onShowMore && (
+                <NavbarControlsQuick onClick={onShowMore}>
+                  Show More
+                </NavbarControlsQuick>
+              )}
+              <NavbarControlsSpace />
+              <ArrowsContainer aria-hidden="false">
+                <ArrowsFlex>
+                  <ArrowsButton
+                    ref={prevRef}
+                    aria-label="Previous"
+                    type="button"
+                  >
+                    <span
+                      css={`
+                        position: relative;
+                      `}
+                    >
+                      <ArrowsIconClip />
+                      <ArrowsSvg
+                        viewBox="0 0 32 32"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                        role="presentation"
+                        focusable="false"
+                      >
+                        <g fill="none">
+                          <path d="m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932" />
+                        </g>
+                      </ArrowsSvg>
+                    </span>
+                  </ArrowsButton>
+                  <ArrowsDivider />
+                  <ArrowsButton aria-label="Next" type="button" ref={nextRef}>
+                    <span
+                      css={`
+                        position: relative;
+                      `}
+                    >
+                      <ArrowsIconClip />
+                      <ArrowsSvg
+                        viewBox="0 0 32 32"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                        role="presentation"
+                        focusable="false"
+                      >
+                        <g fill="none">
+                          <path d="m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932" />
+                        </g>
+                      </ArrowsSvg>
+                    </span>
+                  </ArrowsButton>
+                </ArrowsFlex>
+              </ArrowsContainer>
+            </NavbarControlsContainer>
+          )}
+        </CarouselNavbar>
+      )}
+      <CarouselSwiper
+        {...props}
+        onInit={swiper => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line no-param-reassign
+          swiper.params.navigation.prevEl = prevRef.current;
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line no-param-reassign
+          swiper.params.navigation.nextEl = nextRef.current;
+          swiper.navigation.init();
+          swiper.navigation.update();
+          // console.log("Swiper", swiper);
+        }}
+      >
+        {React.Children.map(children, child => (
+          <SwiperSlide>{child}</SwiperSlide>
+        ))}
+      </CarouselSwiper>
+    </CarouselContainer>
+  );
+};

package/src/lib/card/styles/index.tsx

@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+import { Swiper } from 'swiper/react';
+
+export const CarouselSwiper = styled(Swiper)``;

package/src/lib/free/index.tsx

@@ -0,0 +1,140 @@
+/* eslint-disable unused-imports/no-unused-vars */
+import React, { useRef } from 'react';
+
+import { Container } from '@fox-dls/layout';
+import SwiperCore, { Navigation } from 'swiper';
+import { SwiperSlide } from 'swiper/react';
+
+import {
+  CarouselContainer,
+  CarouselNavbar,
+  NavbarTitleContainer,
+  NavbarControlsContainer,
+  NavbarControlsQuick,
+  NavbarControlsSpace,
+  ArrowsContainer,
+  ArrowsFlex,
+  ArrowsDivider,
+  ArrowsButton,
+  ArrowsIconClip,
+  ArrowsSvg
+} from '../styles';
+import { CarouselSwiper } from './styles';
+
+SwiperCore.use([Navigation]);
+
+export const FreeCarousel: React.FC<any> = ({
+  children,
+  navigation,
+  title,
+  controls,
+  quickLink,
+  onShowMore,
+  ...props
+}) => {
+  const prevRef = useRef<HTMLDivElement>(null);
+  const nextRef = useRef<HTMLDivElement>(null);
+  return (
+    <CarouselContainer>
+      <div
+        css={`
+          @media (max-width: 744px) {
+            display: none !important;
+          }
+        `}
+      >
+        <Container>
+          {navigation && (
+            <CarouselNavbar>
+              {title && <NavbarTitleContainer>{title}</NavbarTitleContainer>}
+              {controls && (
+                <NavbarControlsContainer>
+                  {onShowMore && (
+                    <NavbarControlsQuick onClick={onShowMore}>
+                      Show More
+                    </NavbarControlsQuick>
+                  )}
+                  <NavbarControlsSpace />
+                  <ArrowsContainer aria-hidden="false">
+                    <ArrowsFlex>
+                      <ArrowsButton
+                        ref={prevRef}
+                        aria-label="Previous"
+                        type="button"
+                      >
+                        <span
+                          css={`
+                            position: relative;
+                          `}
+                        >
+                          <ArrowsIconClip />
+                          <ArrowsSvg
+                            viewBox="0 0 32 32"
+                            xmlns="http://www.w3.org/2000/svg"
+                            aria-hidden="true"
+                            role="presentation"
+                            focusable="false"
+                          >
+                            <g fill="none">
+                              <path d="m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932" />
+                            </g>
+                          </ArrowsSvg>
+                        </span>
+                      </ArrowsButton>
+                      <ArrowsDivider />
+                      <ArrowsButton
+                        aria-label="Next"
+                        type="button"
+                        ref={nextRef}
+                      >
+                        <span
+                          css={`
+                            position: relative;
+                          `}
+                        >
+                          <ArrowsIconClip />
+                          <ArrowsSvg
+                            viewBox="0 0 32 32"
+                            xmlns="http://www.w3.org/2000/svg"
+                            aria-hidden="true"
+                            role="presentation"
+                            focusable="false"
+                          >
+                            <g fill="none">
+                              <path d="m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932" />
+                            </g>
+                          </ArrowsSvg>
+                        </span>
+                      </ArrowsButton>
+                    </ArrowsFlex>
+                  </ArrowsContainer>
+                </NavbarControlsContainer>
+              )}
+            </CarouselNavbar>
+          )}
+        </Container>
+      </div>
+      <CarouselSwiper
+        {...props}
+        cssMode
+        onInit={swiper => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line no-param-reassign
+          swiper.params.navigation.prevEl = prevRef.current;
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line no-param-reassign
+          swiper.params.navigation.nextEl = nextRef.current;
+          swiper.navigation.init();
+          swiper.navigation.update();
+          // console.log("Swiper", swiper);
+        }}
+      >
+        {React.Children.map(children, child => (
+          <SwiperSlide>{child}</SwiperSlide>
+        ))}
+      </CarouselSwiper>
+    </CarouselContainer>
+  );
+};

package/src/lib/free/styles/index.tsx

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+import { Swiper } from 'swiper/react';
+
+export const CarouselSwiper = styled(Swiper)`
+  .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;
+    }
+  }
+`;