npm - @fox-dls/carousels - Versions diffs - 1.1.7 → 2.0.0 - Mend

@fox-dls/carousels 1.1.7 → 2.0.0

Files changed (21) hide show

package/.ultra.cache.json +1 -1
package/dist/carousels.cjs.development.js +71 -36
package/dist/carousels.cjs.development.js.map +1 -1
package/dist/carousels.cjs.production.min.js +1 -1
package/dist/carousels.cjs.production.min.js.map +1 -1
package/dist/carousels.esm.js +70 -35
package/dist/carousels.esm.js.map +1 -1
package/dist/lib/card/styles/index.d.ts +0 -1
package/dist/lib/free/styles/index.d.ts +1 -1
package/dist/lib/pagination/styles/index.d.ts +1 -1
package/dist/lib/pills/styles/index.d.ts +4 -1
package/dist/lib/styles/index.d.ts +0 -1
package/package.json +1 -1
package/src/index.ts +2 -0
package/src/lib/card/index.tsx +2 -10
package/src/lib/free/index.tsx +5 -19
package/src/lib/free/styles/index.tsx +6 -0
package/src/lib/pagination/index.tsx +12 -63
package/src/lib/pagination/styles/index.tsx +24 -0
package/src/lib/pills/index.tsx +24 -93
package/src/lib/pills/styles/index.tsx +59 -1

package/dist/carousels.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousels.esm.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","SwiperCore","use","Navigation","PillsCarousel","children","navigation","arrows","props","prevRef","useRef","nextRef","useState","progress","isBeginning","isEnd","swiperSlides","setSwiperSlides","swiper","setSwiper","React","css","left","ref","type","onClick","slidePrev","viewBox","xmlns","role","focusable","fill","d","cssMode","slidesPerView","onInit","params","prevEl","current","nextEl","init","update","onSlideChange","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","quickLink","Container","CarouselPillSvg","Pagination","PaginationCarousel","pagination","dynamicBullets","cloneElement"],"mappings":"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"}
1	+ {"version":3,"file":"carousels.esm.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","SwiperCore","use","Navigation","PillsCarousel","children","navigation","arrows","prevRef","useRef","nextRef","useState","progress","isBeginning","isEnd","swiperSlides","setSwiperSlides","swiper","setSwiper","React","left","ref","type","onClick","slidePrev","style","position","viewBox","xmlns","role","focusable","fill","d","cssMode","slidesPerView","onInit","params","prevEl","current","nextEl","init","update","onSlideChange","Children","map","child","SwiperSlide","right","slideNext","CarouselContainer","CarouselNavbar","NavbarTitleContainer","NavbarControlsContainer","NavbarControlsQuick","a","NavbarControlsSpace","span","ArrowsContainer","ArrowsFlex","ArrowsButton","ArrowsDivider","ArrowsIconClip","ArrowsSvg","CardCarousel","title","controls","onShowMore","CarouselMedia","FreeCarousel","quickLink","Container","CarouselPillSvg","CarouselPillAnimatedContainer","Pagination","PaginationCarousel","pagination","dynamicBullets","cloneElement"],"mappings":"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"}

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { Swiper } from 'swiper/react';
 export declare const CarouselSwiper: import("styled-components").StyledComponent<import("react").FunctionComponent<Swiper>, any, {}, never>;

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
 import { Swiper } from 'swiper/react';
 export declare const CarouselSwiper: import("styled-components").StyledComponent<import("react").FunctionComponent<Swiper>, any, {}, never>;
+export declare const CarouselMedia: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Swiper } from 'swiper/react';
 export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CarouselSwiper: import("styled-components").StyledComponent<import("react").FunctionComponent<Swiper>, any, {}, never>;
@@ -6,3 +5,4 @@ export declare const CarouselPill: import("styled-components").StyledComponent<i
     component?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
 }, string | number | symbol> & import("react").RefAttributes<any>>, any, {}, never>;
 export declare const CarouselPillSvg: import("styled-components").StyledComponent<"svg", any, {}, never>;
+export declare const CarouselPillAnimatedContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Swiper } from 'swiper/react';
 export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CarouselSwiper: import("styled-components").StyledComponent<import("react").FunctionComponent<Swiper>, any, {}, never>;
@@ -6,3 +5,7 @@ export declare const CarouselPillContainer: import("styled-components").StyledCo
 export declare const CarouselPill: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("@mui/core/ButtonUnstyled").ButtonUnstyledOwnProps & Pick<any, string | number | symbol> & {
     component?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
 }, string | number | symbol> & import("react").RefAttributes<any>>, any, any, never>;
+export declare const CarouselPillFlex: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CarouselPillArrowContainer: import("styled-components").StyledComponent<"div", any, any, never>;
+export declare const CarouselPillInlineChild: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CarouselPillArrowSVG: import("styled-components").StyledComponent<"svg", any, {}, never>;

package/dist/lib/styles/index.d.ts CHANGED Viewed

@@ -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>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fox-dls/carousels",
-  "version": "1.1.7",
+  "version": "2.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/core.esm.js",

package/src/index.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 /// <reference types="styled-components/cssprop" />
+//@ts-ignore
+import styled from 'styled-components/macro';
 export { PillsCarousel } from './lib/pills/index';

package/src/lib/card/index.tsx CHANGED Viewed

@@ -52,11 +52,7 @@ export const CardCarousel: React.FC<any> = ({
                     aria-label="Previous"
                     type="button"
                   >
-                    <span
-                      css={`
-                        position: relative;
-                      `}
-                    >
+                    <span style={{ position: 'relative' }}>
                       <ArrowsIconClip />
                       <ArrowsSvg
                         viewBox="0 0 32 32"
@@ -73,11 +69,7 @@ export const CardCarousel: React.FC<any> = ({
                   </ArrowsButton>
                   <ArrowsDivider />
                   <ArrowsButton aria-label="Next" type="button" ref={nextRef}>
-                    <span
-                      css={`
-                        position: relative;
-                      `}
-                    >
+                    <span style={{ position: 'relative' }}>
                       <ArrowsIconClip />
                       <ArrowsSvg
                         viewBox="0 0 32 32"

package/src/lib/free/index.tsx CHANGED Viewed

@@ -20,7 +20,7 @@ import {
   ArrowsIconClip,
   ArrowsSvg
 } from '../styles';
-import { CarouselSwiper } from './styles';
+import { CarouselSwiper, CarouselMedia } from './styles';
 SwiperCore.use([Navigation]);
@@ -37,13 +37,7 @@ export const FreeCarousel: React.FC<any> = ({
   const nextRef = useRef<HTMLDivElement>(null);
   return (
     <CarouselContainer>
-      <div
-        css={`
-          @media (max-width: 744px) {
-            display: none !important;
-          }
-        `}
-      >
+      <CarouselMedia>
         <Container>
           {navigation && (
             <CarouselNavbar>
@@ -63,11 +57,7 @@ export const FreeCarousel: React.FC<any> = ({
                         aria-label="Previous"
                         type="button"
                       >
-                        <span
-                          css={`
-                            position: relative;
-                          `}
-                        >
+                        <span style={{ position: 'relative' }}>
                           <ArrowsIconClip />
                           <ArrowsSvg
                             viewBox="0 0 32 32"
@@ -88,11 +78,7 @@ export const FreeCarousel: React.FC<any> = ({
                         type="button"
                         ref={nextRef}
                       >
-                        <span
-                          css={`
-                            position: relative;
-                          `}
-                        >
+                        <span style={{ position: 'relative' }}>
                           <ArrowsIconClip />
                           <ArrowsSvg
                             viewBox="0 0 32 32"
@@ -114,7 +100,7 @@ export const FreeCarousel: React.FC<any> = ({
             </CarouselNavbar>
           )}
         </Container>
-      </div>
+      </CarouselMedia>
       <CarouselSwiper
         {...props}
         cssMode

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

@@ -78,3 +78,9 @@ export const CarouselSwiper = styled(Swiper)`
     }
   }
 `;
+export const CarouselMedia = styled.div`
+  @media (max-width: 744px) {
+    display: none !important;
+  }
+`;

package/src/lib/pagination/index.tsx CHANGED Viewed

@@ -5,7 +5,12 @@ import SwiperCore, { Navigation, Pagination } from 'swiper';
 // eslint-disable-next-line import/extensions
 import { SwiperSlide } from 'swiper/react';
-import { CarouselSwiper, CarouselPillSvg, CarouselPill } from './styles';
+import {
+  CarouselSwiper,
+  CarouselPillSvg,
+  CarouselPill,
+  CarouselPillAnimatedContainer
+} from './styles';
 SwiperCore.use([Navigation, Pagination]);
@@ -20,37 +25,9 @@ export const PaginationCarousel: React.FC<any> = ({
   const nextRef = useRef<HTMLDivElement>(null);
   return (
     <>
-      <div
-        css={`
-          @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;
-          }
-        `}
-      >
+      <CarouselPillAnimatedContainer>
         <CarouselPill ref={prevRef}>
-          <span
-            css={`
-              position: relative !important;
-            `}
-          >
+          <span style={{ position: 'relative' }}>
             <CarouselPillSvg
               viewBox="0 0 16 16"
               role="presentation"
@@ -61,38 +38,10 @@ export const PaginationCarousel: React.FC<any> = ({
             </CarouselPillSvg>
           </span>
         </CarouselPill>
-      </div>
-      <div
-        css={`
-          @keyframes fadein {
-            0% {
-              opacity: 0;
-            }
-            100% {
-              opacity: 1;
-            }
-          }
-          position: absolute !important;
-          top: 50% !important;
-          pointer-events: auto !important;
-          transform: translateY(-50%) !important;
-          right: 8px !important;
-          animation-duration: 0.3s !important;
-          animation-name: fadein !important;
-          z-index: 180 !important;
-          opacity: 0 !important;
-          :hover {
-            opacity: 1 !important;
-          }
-        `}
-      >
+      </CarouselPillAnimatedContainer>
+      <CarouselPillAnimatedContainer>
         <CarouselPill ref={nextRef}>
-          <span
-            css={`
-              position: relative !important;
-            `}
-          >
+          <span style={{ position: 'relative' }}>
             <CarouselPillSvg
               viewBox="0 0 16 16"
               role="presentation"
@@ -103,7 +52,7 @@ export const PaginationCarousel: React.FC<any> = ({
             </CarouselPillSvg>
           </span>
         </CarouselPill>
-      </div>
+      </CarouselPillAnimatedContainer>
       <CarouselSwiper
         {...props}
         pagination={{

package/src/lib/pagination/styles/index.tsx CHANGED Viewed

@@ -78,3 +78,27 @@ export const CarouselPillSvg = styled.svg`
   display: block;
   fill: currentcolor;
 `;
+export const CarouselPillAnimatedContainer = styled.div`
+  @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;
+  }
+`;