@fox-dls/carousels 0.0.1 → 1.0.3

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": [["styled-components", { "pure": true, "ssr": true }]]
+}

package/.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["dist", "build"],
+  "extends": [
+    "../../.eslintrc.base.js",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended"
+  ],
+  // By loading testing-library as a plugin, we can only enable it
+  // on test files via overrides.
+  "plugins": ["testing-library", "storybook"],
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "rules": {
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "jsx-a11y/anchor-is-valid": "off"
+  },
+  "overrides": [
+    {
+      // For performance run jest/recommended on test files, not regular code
+      "files": ["**/__tests__/**/*.{ts,tsx}"],
+      "extends": ["plugin:testing-library/react"]
+    },
+    {
+      // For performance run storybook/recommended on test files, not regular code
+      "files": ["**/*.stories.{ts,tsx,mdx}"],
+      "extends": ["plugin:storybook/recommended"]
+    }
+  ]
+}

package/.ultra.cache.json

@@ -0,0 +1 @@
+{"files":{"dist":"1638860171762.2283","node_modules":"1638860140606.5718",".babelrc":"f03d0ca709d39fade7fd0a5ff24f9384b515b5b6",".eslintrc.json":"6a0edde9387ee5887d1e599f7a99f09362754acd","CHANGELOG.md":"938ca134a8f27f19d16eafbc8064d38ea166b934","README.md":"87a167329bff7478ccaa650e3d382475d8115cb1","package.json":"8512485560e1085b1d0365303d0dfa2ffc86681a.1638859664655.7837","src/index.ts":"1666f11be8aaf18be8a632f73ad0e73d407aae26","src/lib/card/index.tsx":"52c971cf55cfeb66bdb2f5be883f9a3a2fb62a37","src/lib/card/styles/index.tsx":"0e2c3284b69f0e5c3eabfcbaac81864ff10e5969","src/lib/free/index.tsx":"31d5d59052261c935edb986a1817ee7f273bbbd4","src/lib/free/styles/index.tsx":"5265cb7c9d6bf16b5b09c82bbac9d6aa8d32d798","src/lib/pagination/index.tsx":"561112dbc7d2eeb6e18037ca090a81a6dbe7ac07","src/lib/pagination/styles/index.tsx":"457b030d259318e0431b4d585406078e7ee4faab","src/lib/pills/index.tsx":"c472c9de1791a116bd7e5c1dbe650c3256f6128a","src/lib/pills/styles/index.tsx":"5b249d5b210dd9e81edff8a3412d4b7b9e2ad9a2","src/lib/styles/index.tsx":"276419cd5a78d7b7e027c6f2dc459ea3e81bb85d","tsconfig.build.json":"269572b997c81ac83266026b6b5a2c8699709823","tsconfig.json":"af31a7a31827eeec44ed853b8c3000c67f639047.1638859187936.8682"},"deps":{"@fox-dls/layout":1638860167770.2722}}

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @fox-dls/carousels
+
+## 1.0.0
+### Major Changes
+
+
+
+- Moved away from NX.
+
+
+
+- Upgraded packages to new format out of NX
+
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @fox-dls/layout@1.0.0

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

@@ -1,6 +1,4 @@
-import 'swiper/css';
-import 'swiper/css/pagination';
-export * from './lib/buttons/index';
+export * from './lib/pills/index';
 export * from './lib/card/index';
 export * from './lib/free/index';
 export * from './lib/pagination/index';

package/dist/index.js

@@ -0,0 +1,516 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import SwiperCore, { Navigation, Pagination } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import ButtonUnstyled from '@mui/core/ButtonUnstyled';
+import { Container } from '@fox-dls/layout';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _taggedTemplateLiteralLoose(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  strings.raw = raw;
+  return strings;
+}
+
+var CarouselSwiper$3 = /*#__PURE__*/styled(Swiper).withConfig({
+  displayName: "styles__CarouselSwiper",
+  componentId: "sc-1sue7gh-1"
+})(["margin:0px !important;.swiper-wrapper{.swiper-slide{scroll-snap-align:start !important;width:auto !important;}}"]);
+var CarouselPillContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "styles__CarouselPillContainer",
+  componentId: "sc-1sue7gh-2"
+})(["display:inline-block !important;padding-right:8px !important;padding-top:4px !important;padding-bottom:4px !important;"]);
+var CarouselPill$1 = /*#__PURE__*/styled(ButtonUnstyled).withConfig({
+  displayName: "styles__CarouselPill",
+  componentId: "sc-1sue7gh-3"
+})(["-webkit-box-pack:center !important;-webkit-box-align:center !important;appearance:none !important;display:inline-flex !important;border-radius:50% !important;border:1px solid rgb(221,221,221) !important;outline:none !important;margin:0px !important;padding:0px !important;color:rgb(34,34,34) !important;cursor:pointer !important;touch-action:manipulation !important;position:relative !important;background:transparent !important;transition:-ms-transform 0.25s ease 0s,-webkit-transform 0.25s ease 0s,transform 0.25s ease 0s !important;align-items:center !important;justify-content:center !important;width:36px !important;height:36px !important;::before{content:'' !important;display:block !important;position:absolute !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;width:36px !important;height:36px !important;border-radius:50% !important;border:1px solid rgb(221,221,221) !important;}"]);
+
+var _templateObject, _templateObject2;
+
+var _excluded$3 = ["children", "navigation", "title", "controls", "arrows"];
+SwiperCore.use([Navigation]);
+var PillsCarousel = function PillsCarousel(_ref) {
+  var children = _ref.children,
+      arrows = _ref.arrows,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+
+  var prevRef = useRef(null);
+  var nextRef = useRef(null);
+
+  var _useState = useState({
+    progress: 0,
+    isBeginning: true,
+    isEnd: false
+  }),
+      swiperSlides = _useState[0],
+      setSwiperSlides = _useState[1];
+
+  var _useState2 = useState(null),
+      swiper = _useState2[0],
+      setSwiper = _useState2[1];
+
+  return jsxs("div", {
+    css: "\n        display: flex !important;\n        position: relative !important;\n        min-width: 0px !important;\n      ",
+    children: [jsx("div", {
+      css: "\n          position: absolute !important;\n          left: 0px !important;\n          z-index: 3 !important;\n          width: 65px !important;\n          background: linear-gradient(\n            to right,\n            rgb(255, 255, 255) 56.77%,\n            rgba(255, 255, 255, 0) 94.47%\n          ) !important;\n          " + (swiperSlides.isBeginning && css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n            display: none !important;\n            visibility: hidden !important;\n          "])))) + "\n        ",
+      children: arrows && jsx(CarouselPillContainer, {
+        children: jsx(CarouselPill$1, {
+          left: +true,
+          ref: prevRef,
+          "aria-label": "Previous",
+          type: "button",
+          onClick: function onClick() {
+            return swiper.slidePrev();
+          },
+          children: jsx("span", {
+            css: "\n                  position: relative !important;\n                ",
+            children: jsx("svg", {
+              viewBox: "0 0 32 32",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              role: "presentation",
+              focusable: "false",
+              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                  ",
+              children: jsx("g", {
+                fill: "none",
+                children: jsx("path", {
+                  d: "m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932"
+                }, void 0)
+              }, void 0)
+            }, void 0)
+          }, void 0)
+        }, void 0)
+      }, void 0)
+    }, void 0), jsx(CarouselSwiper$3, _extends({}, props, {
+      cssMode: false,
+      slidesPerView: "auto",
+      onInit: function onInit(swiper) {
+        setSwiper(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();
+        setSwiperSlides({
+          progress: swiper.progress,
+          isBeginning: swiper.isBeginning,
+          isEnd: swiper.isEnd
+        }); // console.log("Swiper", swiper);
+      },
+      onSlideChange: function onSlideChange(swiper) {
+        // console.log("Swiper Change", swiper);
+        setSwiperSlides({
+          progress: swiper.progress,
+          isBeginning: swiper.isBeginning,
+          isEnd: swiper.isEnd
+        });
+      },
+      children: React.Children.map(children, function (child) {
+        return jsx(SwiperSlide, {
+          children: jsx("div", {
+            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              ",
+            children: child
+          }, void 0)
+        }, void 0);
+      })
+    }), void 0), jsx("div", {
+      css: "\n          -webkit-box-pack: end !important;\n          position: absolute !important;\n          right: 0px !important;\n          z-index: 3 !important;\n          width: 75px !important;\n          display: flex !important;\n          justify-content: flex-end !important;\n          background: linear-gradient(\n            to left,\n            rgb(255, 255, 255) 56.77%,\n            rgba(255, 255, 255, 0) 94.47%\n          ) !important;\n          " + (swiperSlides.isEnd && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n            display: none !important;\n            visibility: hidden !important;\n          "])))) + "\n        ",
+      children: arrows && jsx(CarouselPillContainer, {
+        children: jsx(CarouselPill$1, {
+          right: +true,
+          "aria-label": "Next",
+          type: "button",
+          ref: nextRef,
+          onClick: function onClick() {
+            return swiper.slideNext();
+          },
+          children: jsx("span", {
+            css: "\n                  position: relative !important;\n                ",
+            children: jsx("svg", {
+              viewBox: "0 0 32 32",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              role: "presentation",
+              focusable: "false",
+              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                  ",
+              children: jsx("g", {
+                fill: "none",
+                children: jsx("path", {
+                  d: "m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932"
+                }, void 0)
+              }, void 0)
+            }, void 0)
+          }, void 0)
+        }, void 0)
+      }, void 0)
+    }, void 0)]
+  }, void 0);
+};
+
+var CarouselContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "styles__CarouselContainer",
+  componentId: "sc-dwepxh-0"
+})(["position:relative !important;z-index:0 !important;"]);
+var CarouselNavbar = /*#__PURE__*/styled.div.withConfig({
+  displayName: "styles__CarouselNavbar",
+  componentId: "sc-dwepxh-1"
+})(["-webkit-box-pack:justify !important;-ms-flex-pack:justify !important;-webkit-box-align:center !important;-ms-flex-align:center !important;color:#222222 !important;display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;-webkit-align-items:center !important;align-items:center !important;-webkit-justify-content:space-between !important;justify-content:space-between !important;margin-bottom:16px !important;"]);
+var NavbarTitleContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "styles__NavbarTitleContainer",
+  componentId: "sc-dwepxh-2"
+})(["margin-right:24px !important;width:auto !important;"]);
+var NavbarControlsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "styles__NavbarControlsContainer",
+  componentId: "sc-dwepxh-4"
+})(["display:flex !important;align-items:center !important;margin-left:auto !important;"]);
+var NavbarControlsQuick = /*#__PURE__*/styled.a.withConfig({
+  displayName: "styles__NavbarControlsQuick",
+  componentId: "sc-dwepxh-5"
+})(["@media (max-width:744px){display:none !important;}font-size:inherit !important;font-family:inherit !important;font-style:inherit !important;font-variant:inherit !important;line-height:inherit !important;color:#222222 !important;text-decoration:underline !important;border-radius:4px !important;font-weight:600 !important;outline:none !important;"]);
+var NavbarControlsSpace = /*#__PURE__*/styled.span.withConfig({
+  displayName: "styles__NavbarControlsSpace",
+  componentId: "sc-dwepxh-6"
+})(["display:inline-block !important;height:32px !important;width:1px !important;margin-right:16px !important;padding:0px !important;border:none !important;"]);
+var ArrowsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "styles__ArrowsContainer",
+  componentId: "sc-dwepxh-7"
+})(["-webkit-box-align:center !important;color:rgb(34,34,34) !important;display:flex !important;align-items:center !important;margin-left:auto !important;"]);
+var ArrowsFlex = /*#__PURE__*/styled.div.withConfig({
+  displayName: "styles__ArrowsFlex",
+  componentId: "sc-dwepxh-8"
+})(["display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;"]);
+var ArrowsButton = /*#__PURE__*/styled(ButtonUnstyled).withConfig({
+  displayName: "styles__ArrowsButton",
+  componentId: "sc-dwepxh-9"
+})(["-webkit-box-pack:center !important;-webkit-box-align:center !important;appearance:none !important;display:inline-flex !important;border-radius:50% !important;border:none !important;outline:none !important;margin:0px !important;padding:0px !important;color:rgb(34,34,34) !important;cursor:pointer !important;touch-action:manipulation !important;position:relative !important;background:transparent !important;transition:-ms-transform 0.25s ease 0s,-webkit-transform 0.25s ease 0s,transform 0.25s ease 0s !important;align-items:center !important;justify-content:center !important;width:32px !important;height:32px !important;:focus{box-shadow:none !important;}::before{content:'' !important;display:block !important;position:absolute !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;width:32px !important;height:32px !important;border-radius:50% !important;background:rgb(255,255,255) !important;border:1px solid rgb(221,221,221) !important;}:disabled{opacity:0.5 !important;cursor:not-allowed !important;color:rgb(221,221,221) !important;transform:scale(1) !important;}:hover:not([disabled]){color:rgb(0,0,0) !important;transform:scale(1.04) !important;}"]);
+var ArrowsDivider = /*#__PURE__*/styled.span.withConfig({
+  displayName: "styles__ArrowsDivider",
+  componentId: "sc-dwepxh-10"
+})(["margin-left:8px !important;"]);
+var ArrowsIconClip = /*#__PURE__*/styled.span.withConfig({
+  displayName: "styles__ArrowsIconClip",
+  componentId: "sc-dwepxh-11"
+})(["border:0px !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;height:1px !important;overflow:hidden !important;padding:0px !important;position:absolute !important;white-space:nowrap !important;width:1px !important;"]);
+var ArrowsSvg = /*#__PURE__*/styled.svg.withConfig({
+  displayName: "styles__ArrowsSvg",
+  componentId: "sc-dwepxh-12"
+})(["display:block;fill:none;height:12px;width:12px;stroke:currentcolor;stroke-width:4;overflow:visible;"]);
+
+var CarouselSwiper$2 = /*#__PURE__*/styled(Swiper).withConfig({
+  displayName: "styles__CarouselSwiper",
+  componentId: "sc-1ja5jv1-0"
+})([""]);
+
+var _excluded$2 = ["children", "navigation", "title", "controls", "onShowMore"];
+SwiperCore.use([Navigation]);
+var CardCarousel = function CardCarousel(_ref) {
+  var children = _ref.children,
+      navigation = _ref.navigation,
+      title = _ref.title,
+      controls = _ref.controls,
+      onShowMore = _ref.onShowMore,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  var prevRef = useRef(null);
+  var nextRef = useRef(null);
+  return jsxs(CarouselContainer, {
+    children: [navigation && jsxs(CarouselNavbar, {
+      children: [title && jsx(NavbarTitleContainer, {
+        children: title
+      }, void 0), controls && jsxs(NavbarControlsContainer, {
+        children: [onShowMore && jsx(NavbarControlsQuick, {
+          onClick: onShowMore,
+          children: "Show More"
+        }, void 0), jsx(NavbarControlsSpace, {}, void 0), jsx(ArrowsContainer, {
+          "aria-hidden": "false",
+          children: jsxs(ArrowsFlex, {
+            children: [jsx(ArrowsButton, {
+              ref: prevRef,
+              "aria-label": "Previous",
+              type: "button",
+              children: jsxs("span", {
+                css: "\n                        position: relative;\n                      ",
+                children: [jsx(ArrowsIconClip, {}, void 0), jsx(ArrowsSvg, {
+                  viewBox: "0 0 32 32",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  "aria-hidden": "true",
+                  role: "presentation",
+                  focusable: "false",
+                  children: jsx("g", {
+                    fill: "none",
+                    children: jsx("path", {
+                      d: "m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932"
+                    }, void 0)
+                  }, void 0)
+                }, void 0)]
+              }, void 0)
+            }, void 0), jsx(ArrowsDivider, {}, void 0), jsx(ArrowsButton, {
+              "aria-label": "Next",
+              type: "button",
+              ref: nextRef,
+              children: jsxs("span", {
+                css: "\n                        position: relative;\n                      ",
+                children: [jsx(ArrowsIconClip, {}, void 0), jsx(ArrowsSvg, {
+                  viewBox: "0 0 32 32",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  "aria-hidden": "true",
+                  role: "presentation",
+                  focusable: "false",
+                  children: jsx("g", {
+                    fill: "none",
+                    children: jsx("path", {
+                      d: "m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932"
+                    }, void 0)
+                  }, void 0)
+                }, void 0)]
+              }, void 0)
+            }, void 0)]
+          }, void 0)
+        }, void 0)]
+      }, void 0)]
+    }, void 0), jsx(CarouselSwiper$2, _extends({}, props, {
+      onInit: function 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);
+      },
+      children: React.Children.map(children, function (child) {
+        return jsx(SwiperSlide, {
+          children: child
+        }, void 0);
+      })
+    }), void 0)]
+  }, void 0);
+};
+
+var CarouselSwiper$1 = /*#__PURE__*/styled(Swiper).withConfig({
+  displayName: "styles__CarouselSwiper",
+  componentId: "sc-y1spms-0"
+})([".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;}}"]);
+
+var _excluded$1 = ["children", "navigation", "title", "controls", "quickLink", "onShowMore"];
+SwiperCore.use([Navigation]);
+var FreeCarousel = function FreeCarousel(_ref) {
+  var children = _ref.children,
+      navigation = _ref.navigation,
+      title = _ref.title,
+      controls = _ref.controls,
+      onShowMore = _ref.onShowMore,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+  var prevRef = useRef(null);
+  var nextRef = useRef(null);
+  return jsxs(CarouselContainer, {
+    children: [jsx("div", {
+      css: "\n          @media (max-width: 744px) {\n            display: none !important;\n          }\n        ",
+      children: jsx(Container, {
+        children: navigation && jsxs(CarouselNavbar, {
+          children: [title && jsx(NavbarTitleContainer, {
+            children: title
+          }, void 0), controls && jsxs(NavbarControlsContainer, {
+            children: [onShowMore && jsx(NavbarControlsQuick, {
+              onClick: onShowMore,
+              children: "Show More"
+            }, void 0), jsx(NavbarControlsSpace, {}, void 0), jsx(ArrowsContainer, {
+              "aria-hidden": "false",
+              children: jsxs(ArrowsFlex, {
+                children: [jsx(ArrowsButton, {
+                  ref: prevRef,
+                  "aria-label": "Previous",
+                  type: "button",
+                  children: jsxs("span", {
+                    css: "\n                            position: relative;\n                          ",
+                    children: [jsx(ArrowsIconClip, {}, void 0), jsx(ArrowsSvg, {
+                      viewBox: "0 0 32 32",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      "aria-hidden": "true",
+                      role: "presentation",
+                      focusable: "false",
+                      children: jsx("g", {
+                        fill: "none",
+                        children: jsx("path", {
+                          d: "m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932"
+                        }, void 0)
+                      }, void 0)
+                    }, void 0)]
+                  }, void 0)
+                }, void 0), jsx(ArrowsDivider, {}, void 0), jsx(ArrowsButton, {
+                  "aria-label": "Next",
+                  type: "button",
+                  ref: nextRef,
+                  children: jsxs("span", {
+                    css: "\n                            position: relative;\n                          ",
+                    children: [jsx(ArrowsIconClip, {}, void 0), jsx(ArrowsSvg, {
+                      viewBox: "0 0 32 32",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      "aria-hidden": "true",
+                      role: "presentation",
+                      focusable: "false",
+                      children: jsx("g", {
+                        fill: "none",
+                        children: jsx("path", {
+                          d: "m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932"
+                        }, void 0)
+                      }, void 0)
+                    }, void 0)]
+                  }, void 0)
+                }, void 0)]
+              }, void 0)
+            }, void 0)]
+          }, void 0)]
+        }, void 0)
+      }, void 0)
+    }, void 0), jsx(CarouselSwiper$1, _extends({}, props, {
+      cssMode: true,
+      onInit: function 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);
+      },
+      children: React.Children.map(children, function (child) {
+        return jsx(SwiperSlide, {
+          children: child
+        }, void 0);
+      })
+    }), void 0)]
+  }, void 0);
+};
+
+var CarouselSwiper = /*#__PURE__*/styled(Swiper).withConfig({
+  displayName: "styles__CarouselSwiper",
+  componentId: "sc-jtjv4e-1"
+})(["height:100%;.swiper-pagination{.swiper-pagination-bullet-active{background-color:#fff;}.swiper-pagination-bullet-active-next{background-color:#ffffff;}.swiper-pagination-bullet{background-color:#ffffff;}}"]);
+var CarouselPill = /*#__PURE__*/styled(ButtonUnstyled).withConfig({
+  displayName: "styles__CarouselPill",
+  componentId: "sc-jtjv4e-2"
+})([":hover{border-color:rgba(0,0,0,0.08) !important;background-color:#ffffff !important;color:#000000 !important;box-shadow:0px 0px 0px 1px transparent,0px 0px 0px 4px transparent,0px 6px 16px rgb(0 0 0 / 12%) !important;-webkit-transform:scale(1.04) !important;-ms-transform:scale(1.04) !important;transform:scale(1.04) !important;}-webkit-box-pack:center !important;-ms-flex-pack:center !important;-webkit-box-align:center !important;-ms-flex-align:center !important;-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;display:-webkit-inline-box !important;display:-moz-inline-box !important;display:-ms-inline-flexbox !important;display:-webkit-inline-flex !important;display:inline-flex !important;border-radius:50% !important;border:0px !important;outline:none !important;margin:0px !important;padding:0px !important;color:#222222 !important;background-color:rgba(255,255,255,0.9) !important;cursor:pointer !important;-ms-touch-action:manipulation !important;touch-action:manipulation !important;-webkit-align-items:center !important;align-items:center !important;-webkit-justify-content:center !important;justify-content:center !important;border-style:solid !important;border-width:1px !important;background-clip:padding-box !important;border-color:rgba(0,0,0,0.08) !important;box-shadow:0px 0px 0px 1px transparent,0px 0px 0px 4px transparent,0px 2px 4px rgb(0 0 0 / 18%) !important;-webkit-transition:-webkit-transform 0.25s ease,transform 0.25s ease !important;-moz-transition:transform 0.25s ease !important;transition:-ms-transform 0.25s ease,-webkit-transform 0.25s ease,transform 0.25s ease !important;width:32px !important;height:32px !important;"]);
+var CarouselPillSvg = /*#__PURE__*/styled.svg.withConfig({
+  displayName: "styles__CarouselPillSvg",
+  componentId: "sc-jtjv4e-3"
+})(["height:10px;width:10px;display:block;fill:currentcolor;"]);
+
+var _excluded = ["children", "navigation", "title", "controls"];
+SwiperCore.use([Navigation, Pagination]);
+var PaginationCarousel = function PaginationCarousel(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var prevRef = useRef(null);
+  var nextRef = useRef(null);
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      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        ",
+      children: jsx(CarouselPill, {
+        ref: prevRef,
+        children: jsx("span", {
+          css: "\n              position: relative !important;\n            ",
+          children: jsx(CarouselPillSvg, {
+            viewBox: "0 0 16 16",
+            role: "presentation",
+            "aria-hidden": "true",
+            focusable: "false",
+            children: jsx("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"
+            }, void 0)
+          }, void 0)
+        }, void 0)
+      }, void 0)
+    }, void 0), jsx("div", {
+      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        ",
+      children: jsx(CarouselPill, {
+        ref: nextRef,
+        children: jsx("span", {
+          css: "\n              position: relative !important;\n            ",
+          children: jsx(CarouselPillSvg, {
+            viewBox: "0 0 16 16",
+            role: "presentation",
+            "aria-hidden": "true",
+            focusable: "false",
+            children: jsx("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"
+            }, void 0)
+          }, void 0)
+        }, void 0)
+      }, void 0)
+    }, void 0), jsx(CarouselSwiper, _extends({}, props, {
+      pagination: {
+        dynamicBullets: true
+      },
+      onInit: function 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);
+      },
+      children: React.Children.map(children, function (child) {
+        return React.cloneElement(jsx(SwiperSlide, {
+          children: child
+        }, void 0), _extends({}, props));
+      })
+    }), void 0)]
+  }, void 0);
+};
+
+export { CardCarousel, FreeCarousel, PaginationCarousel, PillsCarousel };
+//# sourceMappingURL=index.js.map