@cleartrip/ct-design-horizontal-scroll 4.0.0 → 5.0.0

package/dist/ct-design-horizontal-scroll.umd.js

@@ -1,205 +1,1710 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-container'), require('styled-components'), require('@cleartrip/ct-design-icons'), require('@cleartrip/ct-design-theme'), require('@cleartrip/ct-design-common-utils')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', 'styled-components', '@cleartrip/ct-design-icons', '@cleartrip/ct-design-theme', '@cleartrip/ct-design-common-utils'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHorizontalScroll = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.styled, global.ctDesignIcons, global.ctDesignTheme, global.ctDesignCommonUtils));
-})(this, (function (exports, jsxRuntime, react, ctDesignContainer, styled, ctDesignIcons, ctDesignTheme, ctDesignCommonUtils) { 'use strict';
-
-    function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-    var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol */
-
-    var __assign = function () {
-      __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-use-merge-refs'), require('@cleartrip/ct-design-style-manager')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', '@cleartrip/ct-design-use-merge-refs', '@cleartrip/ct-design-style-manager'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHorizontalScroll = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.useMergeRefs, global.ctDesignStyleManager));
+})(this, (function (exports, jsxRuntime, react, ctDesignContainer, useMergeRefs, ctDesignStyleManager) { 'use strict';
+
+  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+  var useMergeRefs__default = /*#__PURE__*/_interopDefault(useMergeRefs);
+
+  var isDevelopment$1 = false;
+
+  /*
+
+  Based off glamor's StyleSheet, thanks Sunil ❤️
+
+  high performance StyleSheet for css-in-js systems
+
+  - uses multiple style tags behind the scenes for millions of rules
+  - uses `insertRule` for appending in production for *much* faster performance
+
+  // usage
+
+  import { StyleSheet } from '@emotion/sheet'
+
+  let styleSheet = new StyleSheet({ key: '', container: document.head })
+
+  styleSheet.insert('#box { border: 1px solid red; }')
+  - appends a css rule into the stylesheet
+
+  styleSheet.flush()
+  - empties the stylesheet of all its contents
+
+  */
+
+  function sheetForTag(tag) {
+    if (tag.sheet) {
+      return tag.sheet;
+    } // this weirdness brought to you by firefox
+
+    /* istanbul ignore next */
+
+    for (var i = 0; i < document.styleSheets.length; i++) {
+      if (document.styleSheets[i].ownerNode === tag) {
+        return document.styleSheets[i];
+      }
+    } // this function should always return with a value
+    // TS can't understand it though so we make it stop complaining here
+
+    return undefined;
+  }
+  function createStyleElement(options) {
+    var tag = document.createElement('style');
+    tag.setAttribute('data-emotion', options.key);
+    if (options.nonce !== undefined) {
+      tag.setAttribute('nonce', options.nonce);
+    }
+    tag.appendChild(document.createTextNode(''));
+    tag.setAttribute('data-s', '');
+    return tag;
+  }
+  var StyleSheet = /*#__PURE__*/function () {
+    // Using Node instead of HTMLElement since container may be a ShadowRoot
+    function StyleSheet(options) {
+      var _this = this;
+      this._insertTag = function (tag) {
+        var before;
+        if (_this.tags.length === 0) {
+          if (_this.insertionPoint) {
+            before = _this.insertionPoint.nextSibling;
+          } else if (_this.prepend) {
+            before = _this.container.firstChild;
+          } else {
+            before = _this.before;
+          }
+        } else {
+          before = _this.tags[_this.tags.length - 1].nextSibling;
         }
-        return t;
+        _this.container.insertBefore(tag, before);
+        _this.tags.push(tag);
       };
-      return __assign.apply(this, arguments);
+      this.isSpeedy = options.speedy === undefined ? !isDevelopment$1 : options.speedy;
+      this.tags = [];
+      this.ctr = 0;
+      this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
+
+      this.key = options.key;
+      this.container = options.container;
+      this.prepend = options.prepend;
+      this.insertionPoint = options.insertionPoint;
+      this.before = null;
+    }
+    var _proto = StyleSheet.prototype;
+    _proto.hydrate = function hydrate(nodes) {
+      nodes.forEach(this._insertTag);
     };
-    function __makeTemplateObject(cooked, raw) {
-      if (Object.defineProperty) {
-        Object.defineProperty(cooked, "raw", {
-          value: raw
-        });
+    _proto.insert = function insert(rule) {
+      // the max length is how many rules we have per style tag, it's 65000 in speedy mode
+      // it's 1 in dev because we insert source maps that map a single rule to a location
+      // and you can only have one source map per style tag
+      if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
+        this._insertTag(createStyleElement(this));
+      }
+      var tag = this.tags[this.tags.length - 1];
+      if (this.isSpeedy) {
+        var sheet = sheetForTag(tag);
+        try {
+          // this is the ultrafast version, works across browsers
+          // the big drawback is that the css won't be editable in devtools
+          sheet.insertRule(rule, sheet.cssRules.length);
+        } catch (e) {}
       } else {
-        cooked.raw = raw;
+        tag.appendChild(document.createTextNode(rule));
       }
-      return cooked;
-    }
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-      var e = new Error(message);
-      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+      this.ctr++;
+    };
+    _proto.flush = function flush() {
+      this.tags.forEach(function (tag) {
+        var _tag$parentNode;
+        return (_tag$parentNode = tag.parentNode) == null ? void 0 : _tag$parentNode.removeChild(tag);
+      });
+      this.tags = [];
+      this.ctr = 0;
     };
+    return StyleSheet;
+  }();
 
-    var StyledRightShadow = styled__default.default.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: 100%;\n\twidth: ", ";\n\tz-index: 10;\n\tbackground: ", ";\n\t\t", "\n"], ["\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: 100%;\n\twidth: ", ";\n\tz-index: 10;\n\tbackground: ", ";\n\t\t", "\n"])), function (_a) {
-        var width = _a.width;
-        return width || '64px';
-    }, function (_a) {
-        var shadowGradientStyle = _a.shadowGradientStyle;
-        return (shadowGradientStyle === null || shadowGradientStyle === void 0 ? void 0 : shadowGradientStyle.right) || "linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%)";
-    }, function (_a) {
-        var css = _a.css;
-        return css && styled.css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n\t", "\n "], ["\n\t", "\n "])), css);
-    });
-    var templateObject_1$2, templateObject_2$2;
-
-    var StyledLeftShadow = styled__default.default.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    position: absolute;\n    left: 0;\n    top: 0;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    height: 100%;\n    width: ", ";\n    z-index: 10;\n    background: ", ";\n        ", "\n"], ["\n    position: absolute;\n    left: 0;\n    top: 0;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    height: 100%;\n    width: ", ";\n    z-index: 10;\n    background: ", ";\n        ", "\n"])), function (_a) {
-        var width = _a.width;
-        return width || '64px';
-    }, function (_a) {
-        var shadowGradientStyle = _a.shadowGradientStyle;
-        return (shadowGradientStyle === null || shadowGradientStyle === void 0 ? void 0 : shadowGradientStyle.left) || "linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%)";
-    }, function (_a) {
-        var css = _a.css;
-        return css && styled.css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n\t", "\n "], ["\n\t", "\n "])), css);
-    });
-    var templateObject_1$1, templateObject_2$1;
+  var stylisExports = {};
+  var stylis = {
+    get exports(){ return stylisExports; },
+    set exports(v){ stylisExports = v; },
+  };
 
-    var StyledHorizontalScroll = styled__default.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\twhite-space: no-wrap;\n\toverflow-x: auto;\n    scroll-behavior: smooth;\n\t-webkit-tap-highlight-color: transparent;\n\tscrollbar-width: none; /* Firefox */\n\t-ms-overflow-style: none; /* Internet Explorer 10+ */\n\n\t&::-webkit-scrollbar {\n\t\t/* WebKit */\n\t\tdisplay: none;\n\t}\n\t", "\n"], ["\n\tdisplay: flex;\n\twhite-space: no-wrap;\n\toverflow-x: auto;\n    scroll-behavior: smooth;\n\t-webkit-tap-highlight-color: transparent;\n\tscrollbar-width: none; /* Firefox */\n\t-ms-overflow-style: none; /* Internet Explorer 10+ */\n\n\t&::-webkit-scrollbar {\n\t\t/* WebKit */\n\t\tdisplay: none;\n\t}\n\t", "\n"])), function (_a) {
-        var css = _a.css;
-        return css && styled.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n "], ["\n\t", "\n "])), css);
-    });
-    var templateObject_1, templateObject_2;
-
-    exports.ARROW_SIZE = void 0;
-    (function (ARROW_SIZE) {
-        ARROW_SIZE["SM"] = "sm";
-        ARROW_SIZE["MD"] = "md";
-        ARROW_SIZE["LG"] = "lg";
-    })(exports.ARROW_SIZE || (exports.ARROW_SIZE = {}));
-    exports.ARROW_DIRECTION = void 0;
-    (function (ARROW_DIRECTION) {
-        ARROW_DIRECTION["LEFT"] = "LEFT";
-        ARROW_DIRECTION["RIGHT"] = "RIGHT";
-    })(exports.ARROW_DIRECTION || (exports.ARROW_DIRECTION = {}));
-
-    var HOVER_TYPE;
-    (function (HOVER_TYPE) {
-      HOVER_TYPE["ENTER"] = "ENTER";
-      HOVER_TYPE["LEAVE"] = "LEAVE";
-    })(HOVER_TYPE || (HOVER_TYPE = {}));
-    var ITooltipV2BorderSize;
-    (function (ITooltipV2BorderSize) {
-      ITooltipV2BorderSize["XS"] = "xs";
-      ITooltipV2BorderSize["SM"] = "sm";
-      ITooltipV2BorderSize["MD"] = "md";
-      ITooltipV2BorderSize["LG"] = "lg";
-      ITooltipV2BorderSize["XL"] = "xl";
-    })(ITooltipV2BorderSize || (ITooltipV2BorderSize = {}));
-    var ITooltipV2Position;
-    (function (ITooltipV2Position) {
-      ITooltipV2Position["AUTO"] = "auto";
-      ITooltipV2Position["LEFT"] = "left";
-      ITooltipV2Position["RIGHT"] = "right";
-      ITooltipV2Position["TOP"] = "top";
-      ITooltipV2Position["BOTTOM"] = "bottom";
-    })(ITooltipV2Position || (ITooltipV2Position = {}));
-
-    var FLEX_RIGHT_PRECISION = 5;
-    var HorizontalScroll = function (_a) {
-        var children = _a.children, showShadow = _a.showShadow, showArrow = _a.showArrow, className = _a.className, containerClassname = _a.containerClassname, childrenClassname = _a.childrenClassname, shadowWidth = _a.shadowWidth, _b = _a.arrowSize, arrowSize = _b === void 0 ? exports.ARROW_SIZE.MD : _b, shadowGradientStyle = _a.shadowGradientStyle, _c = _a.styleConfig, styleConfig = _c === void 0 ? {} : _c;
-        var _d = shadowWidth || {}, leftShadowWidth = _d.left, rightShadowWidth = _d.right;
-        var theme = ctDesignTheme.useTheme();
-        var childrenContainer = styleConfig.childrenContainer, leftChevron = styleConfig.leftChevron, leftShadowContainer = styleConfig.leftShadowContainer, leftShadowWrapper = styleConfig.leftShadowWrapper, rightChevron = styleConfig.rightChevron, rightShadowContainer = styleConfig.rightShadowContainer, rightShadowWrapper = styleConfig.rightShadowWrapper, root = styleConfig.root, scrollWrapper = styleConfig.scrollWrapper;
-        var _e = react.useState(false), isHovering = _e[0], setIsHovering = _e[1];
-        var _f = react.useState({
-            left: false,
-            right: false,
-        }), shadowDirection = _f[0], setShadowDirection = _f[1];
-        var horizontalScrollRef = react.useRef(null);
-        var parentContainerRef = react.useRef(null);
-        var childContainerRef = react.useRef(null);
-        var updateArrowIcons = function () {
-            if (horizontalScrollRef.current && childContainerRef.current) {
-                var _a = horizontalScrollRef.current.getBoundingClientRect(), horizontalScrollRight = _a.right, horizontalScrollLeft = _a.left;
-                var _b = childContainerRef.current.getBoundingClientRect(), childContainerRight = _b.right, childContainerLeft = _b.left;
-                if (childContainerLeft - horizontalScrollLeft < -FLEX_RIGHT_PRECISION) {
-                    setShadowDirection(function (prevState) { return (__assign(__assign({}, prevState), { left: true })); });
-                }
-                else {
-                    setShadowDirection(function (prevState) { return (__assign(__assign({}, prevState), { left: false })); });
-                }
-                if (childContainerRight - horizontalScrollRight > FLEX_RIGHT_PRECISION) {
-                    setShadowDirection(function (prevState) { return (__assign(__assign({}, prevState), { right: true })); });
-                }
-                else {
-                    setShadowDirection(function (prevState) { return (__assign(__assign({}, prevState), { right: false })); });
-                }
-            }
+  (function (module, exports) {
+    (function (e, r) {
+      r(exports) ;
+    })(this, function (e) {
+
+      var r = "-ms-";
+      var a = "-moz-";
+      var c = "-webkit-";
+      var n = "comm";
+      var t = "rule";
+      var s = "decl";
+      var i = "@page";
+      var u = "@media";
+      var o = "@import";
+      var f = "@charset";
+      var l = "@viewport";
+      var p = "@supports";
+      var h = "@document";
+      var v = "@namespace";
+      var d = "@keyframes";
+      var b = "@font-face";
+      var w = "@counter-style";
+      var m = "@font-feature-values";
+      var g = "@layer";
+      var k = Math.abs;
+      var $ = String.fromCharCode;
+      var x = Object.assign;
+      function E(e, r) {
+        return M(e, 0) ^ 45 ? (((r << 2 ^ M(e, 0)) << 2 ^ M(e, 1)) << 2 ^ M(e, 2)) << 2 ^ M(e, 3) : 0;
+      }
+      function y(e) {
+        return e.trim();
+      }
+      function T(e, r) {
+        return (e = r.exec(e)) ? e[0] : e;
+      }
+      function A(e, r, a) {
+        return e.replace(r, a);
+      }
+      function O(e, r) {
+        return e.indexOf(r);
+      }
+      function M(e, r) {
+        return e.charCodeAt(r) | 0;
+      }
+      function C(e, r, a) {
+        return e.slice(r, a);
+      }
+      function R(e) {
+        return e.length;
+      }
+      function S(e) {
+        return e.length;
+      }
+      function z(e, r) {
+        return r.push(e), e;
+      }
+      function N(e, r) {
+        return e.map(r).join("");
+      }
+      e.line = 1;
+      e.column = 1;
+      e.length = 0;
+      e.position = 0;
+      e.character = 0;
+      e.characters = "";
+      function P(r, a, c, n, t, s, i) {
+        return {
+          value: r,
+          root: a,
+          parent: c,
+          type: n,
+          props: t,
+          children: s,
+          line: e.line,
+          column: e.column,
+          length: i,
+          return: ""
         };
-        react.useEffect(function () {
-            var _a;
-            setTimeout(updateArrowIcons, 200);
-            var callback = ctDesignCommonUtils.debounce(updateArrowIcons, 200);
-            (_a = parentContainerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', callback);
-            return function () {
-                var _a;
-                (_a = parentContainerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', callback);
-            };
-        }, []);
-        var onHover = react.useCallback(function (type) { return function () {
-            if (type === HOVER_TYPE.ENTER) {
-                setIsHovering(true);
+      }
+      function j(e, r) {
+        return x(P("", null, null, "", null, null, 0), e, {
+          length: -e.length
+        }, r);
+      }
+      function U() {
+        return e.character;
+      }
+      function _() {
+        e.character = e.position > 0 ? M(e.characters, --e.position) : 0;
+        if (e.column--, e.character === 10) e.column = 1, e.line--;
+        return e.character;
+      }
+      function F() {
+        e.character = e.position < e.length ? M(e.characters, e.position++) : 0;
+        if (e.column++, e.character === 10) e.column = 1, e.line++;
+        return e.character;
+      }
+      function I() {
+        return M(e.characters, e.position);
+      }
+      function L() {
+        return e.position;
+      }
+      function D(r, a) {
+        return C(e.characters, r, a);
+      }
+      function Y(e) {
+        switch (e) {
+          case 0:
+          case 9:
+          case 10:
+          case 13:
+          case 32:
+            return 5;
+          case 33:
+          case 43:
+          case 44:
+          case 47:
+          case 62:
+          case 64:
+          case 126:
+          case 59:
+          case 123:
+          case 125:
+            return 4;
+          case 58:
+            return 3;
+          case 34:
+          case 39:
+          case 40:
+          case 91:
+            return 2;
+          case 41:
+          case 93:
+            return 1;
+        }
+        return 0;
+      }
+      function K(r) {
+        return e.line = e.column = 1, e.length = R(e.characters = r), e.position = 0, [];
+      }
+      function V(r) {
+        return e.characters = "", r;
+      }
+      function W(r) {
+        return y(D(e.position - 1, q(r === 91 ? r + 2 : r === 40 ? r + 1 : r)));
+      }
+      function B(e) {
+        return V(H(K(e)));
+      }
+      function G(r) {
+        while (e.character = I()) if (e.character < 33) F();else break;
+        return Y(r) > 2 || Y(e.character) > 3 ? "" : " ";
+      }
+      function H(r) {
+        while (F()) switch (Y(e.character)) {
+          case 0:
+            z(Q(e.position - 1), r);
+            break;
+          case 2:
+            z(W(e.character), r);
+            break;
+          default:
+            z($(e.character), r);
+        }
+        return r;
+      }
+      function Z(r, a) {
+        while (--a && F()) if (e.character < 48 || e.character > 102 || e.character > 57 && e.character < 65 || e.character > 70 && e.character < 97) break;
+        return D(r, L() + (a < 6 && I() == 32 && F() == 32));
+      }
+      function q(r) {
+        while (F()) switch (e.character) {
+          case r:
+            return e.position;
+          case 34:
+          case 39:
+            if (r !== 34 && r !== 39) q(e.character);
+            break;
+          case 40:
+            if (r === 41) q(r);
+            break;
+          case 92:
+            F();
+            break;
+        }
+        return e.position;
+      }
+      function J(r, a) {
+        while (F()) if (r + e.character === 47 + 10) break;else if (r + e.character === 42 + 42 && I() === 47) break;
+        return "/*" + D(a, e.position - 1) + "*" + $(r === 47 ? r : F());
+      }
+      function Q(r) {
+        while (!Y(I())) F();
+        return D(r, e.position);
+      }
+      function X(e) {
+        return V(ee("", null, null, null, [""], e = K(e), 0, [0], e));
+      }
+      function ee(e, r, a, c, n, t, s, i, u) {
+        var o = 0;
+        var f = 0;
+        var l = s;
+        var p = 0;
+        var h = 0;
+        var v = 0;
+        var d = 1;
+        var b = 1;
+        var w = 1;
+        var m = 0;
+        var g = "";
+        var k = n;
+        var x = t;
+        var E = c;
+        var y = g;
+        while (b) switch (v = m, m = F()) {
+          case 40:
+            if (v != 108 && M(y, l - 1) == 58) {
+              if (O(y += A(W(m), "&", "&\f"), "&\f") != -1) w = -1;
+              break;
             }
-            else {
-                setIsHovering(false);
+          case 34:
+          case 39:
+          case 91:
+            y += W(m);
+            break;
+          case 9:
+          case 10:
+          case 13:
+          case 32:
+            y += G(v);
+            break;
+          case 92:
+            y += Z(L() - 1, 7);
+            continue;
+          case 47:
+            switch (I()) {
+              case 42:
+              case 47:
+                z(ae(J(F(), L()), r, a), u);
+                break;
+              default:
+                y += "/";
             }
-        }; }, []);
-        var onArrowClick = function (arrowDirection) { return function () {
-            if (parentContainerRef.current && horizontalScrollRef.current) {
-                var parentContainerElement = parentContainerRef.current;
-                var horizontalScrollWidth = horizontalScrollRef.current.getBoundingClientRect().width;
-                if (arrowDirection === exports.ARROW_DIRECTION.RIGHT) {
-                    parentContainerElement.scrollLeft = parentContainerElement.scrollLeft + horizontalScrollWidth / 2;
-                }
-                else {
-                    parentContainerElement.scrollLeft = parentContainerElement.scrollLeft - horizontalScrollWidth / 2;
+            break;
+          case 123 * d:
+            i[o++] = R(y) * w;
+          case 125 * d:
+          case 59:
+          case 0:
+            switch (m) {
+              case 0:
+              case 125:
+                b = 0;
+              case 59 + f:
+                if (w == -1) y = A(y, /\f/g, "");
+                if (h > 0 && R(y) - l) z(h > 32 ? ce(y + ";", c, a, l - 1) : ce(A(y, " ", "") + ";", c, a, l - 2), u);
+                break;
+              case 59:
+                y += ";";
+              default:
+                z(E = re(y, r, a, o, f, n, i, g, k = [], x = [], l), t);
+                if (m === 123) if (f === 0) ee(y, r, E, E, k, t, l, i, x);else switch (p === 99 && M(y, 3) === 110 ? 100 : p) {
+                  case 100:
+                  case 108:
+                  case 109:
+                  case 115:
+                    ee(e, E, E, c && z(re(e, E, E, 0, 0, n, i, g, n, k = [], l), x), n, x, l, i, c ? k : x);
+                    break;
+                  default:
+                    ee(y, E, E, E, [""], x, 0, i, x);
                 }
             }
-        }; };
-        var arrowDimension = react.useMemo(function () {
-            switch (arrowSize) {
-                case exports.ARROW_SIZE.SM: {
-                    return theme.size[6];
-                }
-                case exports.ARROW_SIZE.MD: {
-                    return theme.size[6];
+            o = f = h = 0, d = w = 1, g = y = "", l = s;
+            break;
+          case 58:
+            l = 1 + R(y), h = v;
+          default:
+            if (d < 1) if (m == 123) --d;else if (m == 125 && d++ == 0 && _() == 125) continue;
+            switch (y += $(m), m * d) {
+              case 38:
+                w = f > 0 ? 1 : (y += "\f", -1);
+                break;
+              case 44:
+                i[o++] = (R(y) - 1) * w, w = 1;
+                break;
+              case 64:
+                if (I() === 45) y += W(F());
+                p = I(), f = l = R(g = y += Q(L())), m++;
+                break;
+              case 45:
+                if (v === 45 && R(y) == 2) d = 0;
+            }
+        }
+        return t;
+      }
+      function re(e, r, a, c, n, s, i, u, o, f, l) {
+        var p = n - 1;
+        var h = n === 0 ? s : [""];
+        var v = S(h);
+        for (var d = 0, b = 0, w = 0; d < c; ++d) for (var m = 0, g = C(e, p + 1, p = k(b = i[d])), $ = e; m < v; ++m) if ($ = y(b > 0 ? h[m] + " " + g : A(g, /&\f/g, h[m]))) o[w++] = $;
+        return P(e, r, a, n === 0 ? t : u, o, f, l);
+      }
+      function ae(e, r, a) {
+        return P(e, r, a, n, $(U()), C(e, 2, -2), 0);
+      }
+      function ce(e, r, a, c) {
+        return P(e, r, a, s, C(e, 0, c), C(e, c + 1, -1), c);
+      }
+      function ne(e, n, t) {
+        switch (E(e, n)) {
+          case 5103:
+            return c + "print-" + e + e;
+          case 5737:
+          case 4201:
+          case 3177:
+          case 3433:
+          case 1641:
+          case 4457:
+          case 2921:
+          case 5572:
+          case 6356:
+          case 5844:
+          case 3191:
+          case 6645:
+          case 3005:
+          case 6391:
+          case 5879:
+          case 5623:
+          case 6135:
+          case 4599:
+          case 4855:
+          case 4215:
+          case 6389:
+          case 5109:
+          case 5365:
+          case 5621:
+          case 3829:
+            return c + e + e;
+          case 4789:
+            return a + e + e;
+          case 5349:
+          case 4246:
+          case 4810:
+          case 6968:
+          case 2756:
+            return c + e + a + e + r + e + e;
+          case 5936:
+            switch (M(e, n + 11)) {
+              case 114:
+                return c + e + r + A(e, /[svh]\w+-[tblr]{2}/, "tb") + e;
+              case 108:
+                return c + e + r + A(e, /[svh]\w+-[tblr]{2}/, "tb-rl") + e;
+              case 45:
+                return c + e + r + A(e, /[svh]\w+-[tblr]{2}/, "lr") + e;
+            }
+          case 6828:
+          case 4268:
+          case 2903:
+            return c + e + r + e + e;
+          case 6165:
+            return c + e + r + "flex-" + e + e;
+          case 5187:
+            return c + e + A(e, /(\w+).+(:[^]+)/, c + "box-$1$2" + r + "flex-$1$2") + e;
+          case 5443:
+            return c + e + r + "flex-item-" + A(e, /flex-|-self/g, "") + (!T(e, /flex-|baseline/) ? r + "grid-row-" + A(e, /flex-|-self/g, "") : "") + e;
+          case 4675:
+            return c + e + r + "flex-line-pack" + A(e, /align-content|flex-|-self/g, "") + e;
+          case 5548:
+            return c + e + r + A(e, "shrink", "negative") + e;
+          case 5292:
+            return c + e + r + A(e, "basis", "preferred-size") + e;
+          case 6060:
+            return c + "box-" + A(e, "-grow", "") + c + e + r + A(e, "grow", "positive") + e;
+          case 4554:
+            return c + A(e, /([^-])(transform)/g, "$1" + c + "$2") + e;
+          case 6187:
+            return A(A(A(e, /(zoom-|grab)/, c + "$1"), /(image-set)/, c + "$1"), e, "") + e;
+          case 5495:
+          case 3959:
+            return A(e, /(image-set\([^]*)/, c + "$1" + "$`$1");
+          case 4968:
+            return A(A(e, /(.+:)(flex-)?(.*)/, c + "box-pack:$3" + r + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + c + e + e;
+          case 4200:
+            if (!T(e, /flex-|baseline/)) return r + "grid-column-align" + C(e, n) + e;
+            break;
+          case 2592:
+          case 3360:
+            return r + A(e, "template-", "") + e;
+          case 4384:
+          case 3616:
+            if (t && t.some(function (e, r) {
+              return n = r, T(e.props, /grid-\w+-end/);
+            })) {
+              return ~O(e + (t = t[n].value), "span") ? e : r + A(e, "-start", "") + e + r + "grid-row-span:" + (~O(t, "span") ? T(t, /\d+/) : +T(t, /\d+/) - +T(e, /\d+/)) + ";";
+            }
+            return r + A(e, "-start", "") + e;
+          case 4896:
+          case 4128:
+            return t && t.some(function (e) {
+              return T(e.props, /grid-\w+-start/);
+            }) ? e : r + A(A(e, "-end", "-span"), "span ", "") + e;
+          case 4095:
+          case 3583:
+          case 4068:
+          case 2532:
+            return A(e, /(.+)-inline(.+)/, c + "$1$2") + e;
+          case 8116:
+          case 7059:
+          case 5753:
+          case 5535:
+          case 5445:
+          case 5701:
+          case 4933:
+          case 4677:
+          case 5533:
+          case 5789:
+          case 5021:
+          case 4765:
+            if (R(e) - 1 - n > 6) switch (M(e, n + 1)) {
+              case 109:
+                if (M(e, n + 4) !== 45) break;
+              case 102:
+                return A(e, /(.+:)(.+)-([^]+)/, "$1" + c + "$2-$3" + "$1" + a + (M(e, n + 3) == 108 ? "$3" : "$2-$3")) + e;
+              case 115:
+                return ~O(e, "stretch") ? ne(A(e, "stretch", "fill-available"), n, t) + e : e;
+            }
+            break;
+          case 5152:
+          case 5920:
+            return A(e, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function (a, c, n, t, s, i, u) {
+              return r + c + ":" + n + u + (t ? r + c + "-span:" + (s ? i : +i - +n) + u : "") + e;
+            });
+          case 4949:
+            if (M(e, n + 6) === 121) return A(e, ":", ":" + c) + e;
+            break;
+          case 6444:
+            switch (M(e, M(e, 14) === 45 ? 18 : 11)) {
+              case 120:
+                return A(e, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, "$1" + c + (M(e, 14) === 45 ? "inline-" : "") + "box$3" + "$1" + c + "$2$3" + "$1" + r + "$2box$3") + e;
+              case 100:
+                return A(e, ":", ":" + r) + e;
+            }
+            break;
+          case 5719:
+          case 2647:
+          case 2135:
+          case 3927:
+          case 2391:
+            return A(e, "scroll-", "scroll-snap-") + e;
+        }
+        return e;
+      }
+      function te(e, r) {
+        var a = "";
+        var c = S(e);
+        for (var n = 0; n < c; n++) a += r(e[n], n, e, r) || "";
+        return a;
+      }
+      function se(e, r, a, c) {
+        switch (e.type) {
+          case g:
+            if (e.children.length) break;
+          case o:
+          case s:
+            return e.return = e.return || e.value;
+          case n:
+            return "";
+          case d:
+            return e.return = e.value + "{" + te(e.children, c) + "}";
+          case t:
+            e.value = e.props.join(",");
+        }
+        return R(a = te(e.children, c)) ? e.return = e.value + "{" + a + "}" : "";
+      }
+      function ie(e) {
+        var r = S(e);
+        return function (a, c, n, t) {
+          var s = "";
+          for (var i = 0; i < r; i++) s += e[i](a, c, n, t) || "";
+          return s;
+        };
+      }
+      function ue(e) {
+        return function (r) {
+          if (!r.root) if (r = r.return) e(r);
+        };
+      }
+      function oe(e, n, i, u) {
+        if (e.length > -1) if (!e.return) switch (e.type) {
+          case s:
+            e.return = ne(e.value, e.length, i);
+            return;
+          case d:
+            return te([j(e, {
+              value: A(e.value, "@", "@" + c)
+            })], u);
+          case t:
+            if (e.length) return N(e.props, function (n) {
+              switch (T(n, /(::plac\w+|:read-\w+)/)) {
+                case ":read-only":
+                case ":read-write":
+                  return te([j(e, {
+                    props: [A(n, /:(read-\w+)/, ":" + a + "$1")]
+                  })], u);
+                case "::placeholder":
+                  return te([j(e, {
+                    props: [A(n, /:(plac\w+)/, ":" + c + "input-$1")]
+                  }), j(e, {
+                    props: [A(n, /:(plac\w+)/, ":" + a + "$1")]
+                  }), j(e, {
+                    props: [A(n, /:(plac\w+)/, r + "input-$1")]
+                  })], u);
+              }
+              return "";
+            });
+        }
+      }
+      function fe(e) {
+        switch (e.type) {
+          case t:
+            e.props = e.props.map(function (r) {
+              return N(B(r), function (r, a, c) {
+                switch (M(r, 0)) {
+                  case 12:
+                    return C(r, 1, R(r));
+                  case 0:
+                  case 40:
+                  case 43:
+                  case 62:
+                  case 126:
+                    return r;
+                  case 58:
+                    if (c[++a] === "global") c[a] = "", c[++a] = "\f" + C(c[a], a = 1, -1);
+                  case 32:
+                    return a === 1 ? "" : r;
+                  default:
+                    switch (a) {
+                      case 0:
+                        e = r;
+                        return S(c) > 1 ? "" : r;
+                      case a = S(c) - 1:
+                      case 2:
+                        return a === 2 ? r + e + e : r + e;
+                      default:
+                        return r;
+                    }
                 }
-                case exports.ARROW_SIZE.LG: {
-                    return theme.size[10];
+              });
+            });
+        }
+      }
+      e.CHARSET = f;
+      e.COMMENT = n;
+      e.COUNTER_STYLE = w;
+      e.DECLARATION = s;
+      e.DOCUMENT = h;
+      e.FONT_FACE = b;
+      e.FONT_FEATURE_VALUES = m;
+      e.IMPORT = o;
+      e.KEYFRAMES = d;
+      e.LAYER = g;
+      e.MEDIA = u;
+      e.MOZ = a;
+      e.MS = r;
+      e.NAMESPACE = v;
+      e.PAGE = i;
+      e.RULESET = t;
+      e.SUPPORTS = p;
+      e.VIEWPORT = l;
+      e.WEBKIT = c;
+      e.abs = k;
+      e.alloc = K;
+      e.append = z;
+      e.assign = x;
+      e.caret = L;
+      e.char = U;
+      e.charat = M;
+      e.combine = N;
+      e.comment = ae;
+      e.commenter = J;
+      e.compile = X;
+      e.copy = j;
+      e.dealloc = V;
+      e.declaration = ce;
+      e.delimit = W;
+      e.delimiter = q;
+      e.escaping = Z;
+      e.from = $;
+      e.hash = E;
+      e.identifier = Q;
+      e.indexof = O;
+      e.match = T;
+      e.middleware = ie;
+      e.namespace = fe;
+      e.next = F;
+      e.node = P;
+      e.parse = ee;
+      e.peek = I;
+      e.prefix = ne;
+      e.prefixer = oe;
+      e.prev = _;
+      e.replace = A;
+      e.ruleset = re;
+      e.rulesheet = ue;
+      e.serialize = te;
+      e.sizeof = S;
+      e.slice = D;
+      e.stringify = se;
+      e.strlen = R;
+      e.substr = C;
+      e.token = Y;
+      e.tokenize = B;
+      e.tokenizer = H;
+      e.trim = y;
+      e.whitespace = G;
+      Object.defineProperty(e, "__esModule", {
+        value: true
+      });
+    });
+  })(stylis, stylisExports);
+
+  var weakMemoize = function weakMemoize(func) {
+    var cache = new WeakMap();
+    return function (arg) {
+      if (cache.has(arg)) {
+        // Use non-null assertion because we just checked that the cache `has` it
+        // This allows us to remove `undefined` from the return value
+        return cache.get(arg);
+      }
+      var ret = func(arg);
+      cache.set(arg, ret);
+      return ret;
+    };
+  };
+
+  function memoize(fn) {
+    var cache = Object.create(null);
+    return function (arg) {
+      if (cache[arg] === undefined) cache[arg] = fn(arg);
+      return cache[arg];
+    };
+  }
+
+  var isBrowser$1 = typeof document !== 'undefined';
+  var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
+    var previous = 0;
+    var character = 0;
+    while (true) {
+      previous = character;
+      character = stylisExports.peek(); // &\f
+
+      if (previous === 38 && character === 12) {
+        points[index] = 1;
+      }
+      if (stylisExports.token(character)) {
+        break;
+      }
+      stylisExports.next();
+    }
+    return stylisExports.slice(begin, stylisExports.position);
+  };
+  var toRules = function toRules(parsed, points) {
+    // pretend we've started with a comma
+    var index = -1;
+    var character = 44;
+    do {
+      switch (stylisExports.token(character)) {
+        case 0:
+          // &\f
+          if (character === 38 && stylisExports.peek() === 12) {
+            // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
+            // stylis inserts \f after & to know when & where it should replace this sequence with the context selector
+            // and when it should just concatenate the outer and inner selectors
+            // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
+            points[index] = 1;
+          }
+          parsed[index] += identifierWithPointTracking(stylisExports.position - 1, points, index);
+          break;
+        case 2:
+          parsed[index] += stylisExports.delimit(character);
+          break;
+        case 4:
+          // comma
+          if (character === 44) {
+            // colon
+            parsed[++index] = stylisExports.peek() === 58 ? '&\f' : '';
+            points[index] = parsed[index].length;
+            break;
+          }
+
+        // fallthrough
+
+        default:
+          parsed[index] += stylisExports.from(character);
+      }
+    } while (character = stylisExports.next());
+    return parsed;
+  };
+  var getRules = function getRules(value, points) {
+    return stylisExports.dealloc(toRules(stylisExports.alloc(value), points));
+  }; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
+
+  var fixedElements = /* #__PURE__ */new WeakMap();
+  var compat = function compat(element) {
+    if (element.type !== 'rule' || !element.parent ||
+    // positive .length indicates that this rule contains pseudo
+    // negative .length indicates that this rule has been already prefixed
+    element.length < 1) {
+      return;
+    }
+    var value = element.value;
+    var parent = element.parent;
+    var isImplicitRule = element.column === parent.column && element.line === parent.line;
+    while (parent.type !== 'rule') {
+      parent = parent.parent;
+      if (!parent) return;
+    } // short-circuit for the simplest case
+
+    if (element.props.length === 1 && value.charCodeAt(0) !== 58
+    /* colon */ && !fixedElements.get(parent)) {
+      return;
+    } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
+    // then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
+
+    if (isImplicitRule) {
+      return;
+    }
+    fixedElements.set(element, true);
+    var points = [];
+    var rules = getRules(value, points);
+    var parentRules = parent.props;
+    for (var i = 0, k = 0; i < rules.length; i++) {
+      for (var j = 0; j < parentRules.length; j++, k++) {
+        element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
+      }
+    }
+  };
+  var removeLabel = function removeLabel(element) {
+    if (element.type === 'decl') {
+      var value = element.value;
+      if (
+      // charcode for l
+      value.charCodeAt(0) === 108 &&
+      // charcode for b
+      value.charCodeAt(2) === 98) {
+        // this ignores label
+        element["return"] = '';
+        element.value = '';
+      }
+    }
+  };
+
+  /* eslint-disable no-fallthrough */
+
+  function prefix(value, length) {
+    switch (stylisExports.hash(value, length)) {
+      // color-adjust
+      case 5103:
+        return stylisExports.WEBKIT + 'print-' + value + value;
+      // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+
+      case 5737:
+      case 4201:
+      case 3177:
+      case 3433:
+      case 1641:
+      case 4457:
+      case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+
+      case 5572:
+      case 6356:
+      case 5844:
+      case 3191:
+      case 6645:
+      case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+
+      case 6391:
+      case 5879:
+      case 5623:
+      case 6135:
+      case 4599:
+      case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+
+      case 4215:
+      case 6389:
+      case 5109:
+      case 5365:
+      case 5621:
+      case 3829:
+        return stylisExports.WEBKIT + value + value;
+      // appearance, user-select, transform, hyphens, text-size-adjust
+
+      case 5349:
+      case 4246:
+      case 4810:
+      case 6968:
+      case 2756:
+        return stylisExports.WEBKIT + value + stylisExports.MOZ + value + stylisExports.MS + value + value;
+      // flex, flex-direction
+
+      case 6828:
+      case 4268:
+        return stylisExports.WEBKIT + value + stylisExports.MS + value + value;
+      // order
+
+      case 6165:
+        return stylisExports.WEBKIT + value + stylisExports.MS + 'flex-' + value + value;
+      // align-items
+
+      case 5187:
+        return stylisExports.WEBKIT + value + stylisExports.replace(value, /(\w+).+(:[^]+)/, stylisExports.WEBKIT + 'box-$1$2' + stylisExports.MS + 'flex-$1$2') + value;
+      // align-self
+
+      case 5443:
+        return stylisExports.WEBKIT + value + stylisExports.MS + 'flex-item-' + stylisExports.replace(value, /flex-|-self/, '') + value;
+      // align-content
+
+      case 4675:
+        return stylisExports.WEBKIT + value + stylisExports.MS + 'flex-line-pack' + stylisExports.replace(value, /align-content|flex-|-self/, '') + value;
+      // flex-shrink
+
+      case 5548:
+        return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, 'shrink', 'negative') + value;
+      // flex-basis
+
+      case 5292:
+        return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, 'basis', 'preferred-size') + value;
+      // flex-grow
+
+      case 6060:
+        return stylisExports.WEBKIT + 'box-' + stylisExports.replace(value, '-grow', '') + stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, 'grow', 'positive') + value;
+      // transition
+
+      case 4554:
+        return stylisExports.WEBKIT + stylisExports.replace(value, /([^-])(transform)/g, '$1' + stylisExports.WEBKIT + '$2') + value;
+      // cursor
+
+      case 6187:
+        return stylisExports.replace(stylisExports.replace(stylisExports.replace(value, /(zoom-|grab)/, stylisExports.WEBKIT + '$1'), /(image-set)/, stylisExports.WEBKIT + '$1'), value, '') + value;
+      // background, background-image
+
+      case 5495:
+      case 3959:
+        return stylisExports.replace(value, /(image-set\([^]*)/, stylisExports.WEBKIT + '$1' + '$`$1');
+      // justify-content
+
+      case 4968:
+        return stylisExports.replace(stylisExports.replace(value, /(.+:)(flex-)?(.*)/, stylisExports.WEBKIT + 'box-pack:$3' + stylisExports.MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + stylisExports.WEBKIT + value + value;
+      // (margin|padding)-inline-(start|end)
+
+      case 4095:
+      case 3583:
+      case 4068:
+      case 2532:
+        return stylisExports.replace(value, /(.+)-inline(.+)/, stylisExports.WEBKIT + '$1$2') + value;
+      // (min|max)?(width|height|inline-size|block-size)
+
+      case 8116:
+      case 7059:
+      case 5753:
+      case 5535:
+      case 5445:
+      case 5701:
+      case 4933:
+      case 4677:
+      case 5533:
+      case 5789:
+      case 5021:
+      case 4765:
+        // stretch, max-content, min-content, fill-available
+        if (stylisExports.strlen(value) - 1 - length > 6) switch (stylisExports.charat(value, length + 1)) {
+          // (m)ax-content, (m)in-content
+          case 109:
+            // -
+            if (stylisExports.charat(value, length + 4) !== 45) break;
+          // (f)ill-available, (f)it-content
+
+          case 102:
+            return stylisExports.replace(value, /(.+:)(.+)-([^]+)/, '$1' + stylisExports.WEBKIT + '$2-$3' + '$1' + stylisExports.MOZ + (stylisExports.charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
+          // (s)tretch
+
+          case 115:
+            return ~stylisExports.indexof(value, 'stretch') ? prefix(stylisExports.replace(value, 'stretch', 'fill-available'), length) + value : value;
+        }
+        break;
+      // position: sticky
+
+      case 4949:
+        // (s)ticky?
+        if (stylisExports.charat(value, length + 1) !== 115) break;
+      // display: (flex|inline-flex)
+
+      case 6444:
+        switch (stylisExports.charat(value, stylisExports.strlen(value) - 3 - (~stylisExports.indexof(value, '!important') && 10))) {
+          // stic(k)y
+          case 107:
+            return stylisExports.replace(value, ':', ':' + stylisExports.WEBKIT) + value;
+          // (inline-)?fl(e)x
+
+          case 101:
+            return stylisExports.replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + stylisExports.WEBKIT + (stylisExports.charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + stylisExports.WEBKIT + '$2$3' + '$1' + stylisExports.MS + '$2box$3') + value;
+        }
+        break;
+      // writing-mode
+
+      case 5936:
+        switch (stylisExports.charat(value, length + 11)) {
+          // vertical-l(r)
+          case 114:
+            return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value;
+          // vertical-r(l)
+
+          case 108:
+            return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value;
+          // horizontal(-)tb
+
+          case 45:
+            return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value;
+        }
+        return stylisExports.WEBKIT + value + stylisExports.MS + value + value;
+    }
+    return value;
+  }
+  var prefixer = function prefixer(element, index, children, callback) {
+    if (element.length > -1) if (!element["return"]) switch (element.type) {
+      case stylisExports.DECLARATION:
+        element["return"] = prefix(element.value, element.length);
+        break;
+      case stylisExports.KEYFRAMES:
+        return stylisExports.serialize([stylisExports.copy(element, {
+          value: stylisExports.replace(element.value, '@', '@' + stylisExports.WEBKIT)
+        })], callback);
+      case stylisExports.RULESET:
+        if (element.length) return stylisExports.combine(element.props, function (value) {
+          switch (stylisExports.match(value, /(::plac\w+|:read-\w+)/)) {
+            // :read-(only|write)
+            case ':read-only':
+            case ':read-write':
+              return stylisExports.serialize([stylisExports.copy(element, {
+                props: [stylisExports.replace(value, /:(read-\w+)/, ':' + stylisExports.MOZ + '$1')]
+              })], callback);
+            // :placeholder
+
+            case '::placeholder':
+              return stylisExports.serialize([stylisExports.copy(element, {
+                props: [stylisExports.replace(value, /:(plac\w+)/, ':' + stylisExports.WEBKIT + 'input-$1')]
+              }), stylisExports.copy(element, {
+                props: [stylisExports.replace(value, /:(plac\w+)/, ':' + stylisExports.MOZ + '$1')]
+              }), stylisExports.copy(element, {
+                props: [stylisExports.replace(value, /:(plac\w+)/, stylisExports.MS + 'input-$1')]
+              })], callback);
+          }
+          return '';
+        });
+    }
+  };
+  var getServerStylisCache = isBrowser$1 ? undefined : weakMemoize(function () {
+    return memoize(function () {
+      return {};
+    });
+  });
+  var defaultStylisPlugins = [prefixer];
+  var createCache = function createCache(options) {
+    var key = options.key;
+    if (isBrowser$1 && key === 'css') {
+      var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
+      // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
+      // note this very very intentionally targets all style elements regardless of the key to ensure
+      // that creating a cache works inside of render of a React component
+
+      Array.prototype.forEach.call(ssrStyles, function (node) {
+        // we want to only move elements which have a space in the data-emotion attribute value
+        // because that indicates that it is an Emotion 11 server-side rendered style elements
+        // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
+        // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
+        // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
+        // will not result in the Emotion 10 styles being destroyed
+        var dataEmotionAttribute = node.getAttribute('data-emotion');
+        if (dataEmotionAttribute.indexOf(' ') === -1) {
+          return;
+        }
+        document.head.appendChild(node);
+        node.setAttribute('data-s', '');
+      });
+    }
+    var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
+    var inserted = {};
+    var container;
+    var nodesToHydrate = [];
+    if (isBrowser$1) {
+      container = options.container || document.head;
+      Array.prototype.forEach.call(
+      // this means we will ignore elements which don't have a space in them which
+      // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
+      document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
+        var attrib = node.getAttribute("data-emotion").split(' ');
+        for (var i = 1; i < attrib.length; i++) {
+          inserted[attrib[i]] = true;
+        }
+        nodesToHydrate.push(node);
+      });
+    }
+    var _insert;
+    var omnipresentPlugins = [compat, removeLabel];
+    if (!getServerStylisCache) {
+      var currentSheet;
+      var finalizingPlugins = [stylisExports.stringify, stylisExports.rulesheet(function (rule) {
+        currentSheet.insert(rule);
+      })];
+      var serializer = stylisExports.middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
+      var stylis = function stylis(styles) {
+        return stylisExports.serialize(stylisExports.compile(styles), serializer);
+      };
+      _insert = function insert(selector, serialized, sheet, shouldCache) {
+        currentSheet = sheet;
+        stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+        if (shouldCache) {
+          cache.inserted[serialized.name] = true;
+        }
+      };
+    } else {
+      var _finalizingPlugins = [stylisExports.stringify];
+      var _serializer = stylisExports.middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
+      var _stylis = function _stylis(styles) {
+        return stylisExports.serialize(stylisExports.compile(styles), _serializer);
+      };
+      var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
+      var getRules = function getRules(selector, serialized) {
+        var name = serialized.name;
+        if (serverStylisCache[name] === undefined) {
+          serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+        }
+        return serverStylisCache[name];
+      };
+      _insert = function _insert(selector, serialized, sheet, shouldCache) {
+        var name = serialized.name;
+        var rules = getRules(selector, serialized);
+        if (cache.compat === undefined) {
+          // in regular mode, we don't set the styles on the inserted cache
+          // since we don't need to and that would be wasting memory
+          // we return them so that they are rendered in a style tag
+          if (shouldCache) {
+            cache.inserted[name] = true;
+          }
+          return rules;
+        } else {
+          // in compat mode, we put the styles on the inserted cache so
+          // that emotion-server can pull out the styles
+          // except when we don't want to cache it which was in Global but now
+          // is nowhere but we don't want to do a major right now
+          // and just in case we're going to leave the case here
+          // it's also not affecting client side bundle size
+          // so it's really not a big deal
+          if (shouldCache) {
+            cache.inserted[name] = rules;
+          } else {
+            return rules;
+          }
+        }
+      };
+    }
+    var cache = {
+      key: key,
+      sheet: new StyleSheet({
+        key: key,
+        container: container,
+        nonce: options.nonce,
+        speedy: options.speedy,
+        prepend: options.prepend,
+        insertionPoint: options.insertionPoint
+      }),
+      nonce: options.nonce,
+      inserted: inserted,
+      registered: {},
+      insert: _insert
+    };
+    cache.sheet.hydrate(nodesToHydrate);
+    return cache;
+  };
+
+  /* eslint-disable */
+  // Inspired by https://github.com/garycourt/murmurhash-js
+  // Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
+  function murmur2(str) {
+    // 'm' and 'r' are mixing constants generated offline.
+    // They're not really 'magic', they just happen to work well.
+    // const m = 0x5bd1e995;
+    // const r = 24;
+    // Initialize the hash
+    var h = 0; // Mix 4 bytes at a time into the hash
+
+    var k,
+      i = 0,
+      len = str.length;
+    for (; len >= 4; ++i, len -= 4) {
+      k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
+      k = /* Math.imul(k, m): */
+      (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
+      k ^= /* k >>> r: */
+      k >>> 24;
+      h = /* Math.imul(k, m): */
+      (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^ /* Math.imul(h, m): */
+      (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+    } // Handle the last few bytes of the input array
+
+    switch (len) {
+      case 3:
+        h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+      case 2:
+        h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+      case 1:
+        h ^= str.charCodeAt(i) & 0xff;
+        h = /* Math.imul(h, m): */
+        (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+    } // Do a few final mixes of the hash to ensure the last few
+    // bytes are well-incorporated.
+
+    h ^= h >>> 13;
+    h = /* Math.imul(h, m): */
+    (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+    return ((h ^ h >>> 15) >>> 0).toString(36);
+  }
+
+  var unitlessKeys = {
+    animationIterationCount: 1,
+    aspectRatio: 1,
+    borderImageOutset: 1,
+    borderImageSlice: 1,
+    borderImageWidth: 1,
+    boxFlex: 1,
+    boxFlexGroup: 1,
+    boxOrdinalGroup: 1,
+    columnCount: 1,
+    columns: 1,
+    flex: 1,
+    flexGrow: 1,
+    flexPositive: 1,
+    flexShrink: 1,
+    flexNegative: 1,
+    flexOrder: 1,
+    gridRow: 1,
+    gridRowEnd: 1,
+    gridRowSpan: 1,
+    gridRowStart: 1,
+    gridColumn: 1,
+    gridColumnEnd: 1,
+    gridColumnSpan: 1,
+    gridColumnStart: 1,
+    msGridRow: 1,
+    msGridRowSpan: 1,
+    msGridColumn: 1,
+    msGridColumnSpan: 1,
+    fontWeight: 1,
+    lineHeight: 1,
+    opacity: 1,
+    order: 1,
+    orphans: 1,
+    scale: 1,
+    tabSize: 1,
+    widows: 1,
+    zIndex: 1,
+    zoom: 1,
+    WebkitLineClamp: 1,
+    // SVG-related properties
+    fillOpacity: 1,
+    floodOpacity: 1,
+    stopOpacity: 1,
+    strokeDasharray: 1,
+    strokeDashoffset: 1,
+    strokeMiterlimit: 1,
+    strokeOpacity: 1,
+    strokeWidth: 1
+  };
+
+  var isDevelopment = false;
+  var hyphenateRegex = /[A-Z]|^ms/g;
+  var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+  var isCustomProperty = function isCustomProperty(property) {
+    return property.charCodeAt(1) === 45;
+  };
+  var isProcessableValue = function isProcessableValue(value) {
+    return value != null && typeof value !== 'boolean';
+  };
+  var processStyleName = /* #__PURE__ */memoize(function (styleName) {
+    return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
+  });
+  var processStyleValue = function processStyleValue(key, value) {
+    switch (key) {
+      case 'animation':
+      case 'animationName':
+        {
+          if (typeof value === 'string') {
+            return value.replace(animationRegex, function (match, p1, p2) {
+              cursor = {
+                name: p1,
+                styles: p2,
+                next: cursor
+              };
+              return p1;
+            });
+          }
+        }
+    }
+    if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
+      return value + 'px';
+    }
+    return value;
+  };
+  var noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';
+  function handleInterpolation(mergedProps, registered, interpolation) {
+    if (interpolation == null) {
+      return '';
+    }
+    var componentSelector = interpolation;
+    if (componentSelector.__emotion_styles !== undefined) {
+      return componentSelector;
+    }
+    switch (typeof interpolation) {
+      case 'boolean':
+        {
+          return '';
+        }
+      case 'object':
+        {
+          var keyframes = interpolation;
+          if (keyframes.anim === 1) {
+            cursor = {
+              name: keyframes.name,
+              styles: keyframes.styles,
+              next: cursor
+            };
+            return keyframes.name;
+          }
+          var serializedStyles = interpolation;
+          if (serializedStyles.styles !== undefined) {
+            var next = serializedStyles.next;
+            if (next !== undefined) {
+              // not the most efficient thing ever but this is a pretty rare case
+              // and there will be very few iterations of this generally
+              while (next !== undefined) {
+                cursor = {
+                  name: next.name,
+                  styles: next.styles,
+                  next: cursor
+                };
+                next = next.next;
+              }
+            }
+            var styles = serializedStyles.styles + ";";
+            return styles;
+          }
+          return createStringFromObject(mergedProps, registered, interpolation);
+        }
+      case 'function':
+        {
+          if (mergedProps !== undefined) {
+            var previousCursor = cursor;
+            var result = interpolation(mergedProps);
+            cursor = previousCursor;
+            return handleInterpolation(mergedProps, registered, result);
+          }
+          break;
+        }
+    } // finalize string values (regular strings and functions interpolated into css calls)
+
+    var asString = interpolation;
+    if (registered == null) {
+      return asString;
+    }
+    var cached = registered[asString];
+    return cached !== undefined ? cached : asString;
+  }
+  function createStringFromObject(mergedProps, registered, obj) {
+    var string = '';
+    if (Array.isArray(obj)) {
+      for (var i = 0; i < obj.length; i++) {
+        string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
+      }
+    } else {
+      for (var key in obj) {
+        var value = obj[key];
+        if (typeof value !== 'object') {
+          var asString = value;
+          if (registered != null && registered[asString] !== undefined) {
+            string += key + "{" + registered[asString] + "}";
+          } else if (isProcessableValue(asString)) {
+            string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
+          }
+        } else {
+          if (key === 'NO_COMPONENT_SELECTOR' && isDevelopment) {
+            throw new Error(noComponentSelectorMessage);
+          }
+          if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
+            for (var _i = 0; _i < value.length; _i++) {
+              if (isProcessableValue(value[_i])) {
+                string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
+              }
+            }
+          } else {
+            var interpolated = handleInterpolation(mergedProps, registered, value);
+            switch (key) {
+              case 'animation':
+              case 'animationName':
+                {
+                  string += processStyleName(key) + ":" + interpolated + ";";
+                  break;
                 }
-                default: {
-                    return theme.size[6];
+              default:
+                {
+                  string += key + "{" + interpolated + "}";
                 }
             }
-        }, [arrowSize]);
-        return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ position: 'relative', onMouseEnter: onHover(HOVER_TYPE.ENTER), onMouseLeave: onHover(HOVER_TYPE.LEAVE), className: containerClassname, ref: horizontalScrollRef }, root, { children: [showShadow && shadowDirection.left && (jsxRuntime.jsx(StyledLeftShadow, __assign({ width: leftShadowWidth, shadowGradientStyle: shadowGradientStyle }, leftShadowWrapper, { children: showArrow && isHovering && (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer', paddingLeft: theme.spacing[4], onClick: onArrowClick(exports.ARROW_DIRECTION.LEFT) }, leftShadowContainer, { children: jsxRuntime.jsx(ctDesignIcons.LeftChevronWithBoundingBox, __assign({ height: arrowDimension, width: arrowDimension }, leftChevron)) }))) }))), jsxRuntime.jsx(StyledHorizontalScroll, __assign({ ref: parentContainerRef, className: (scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.className) || className, css: scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.css }, { children: jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: (childrenContainer === null || childrenContainer === void 0 ? void 0 : childrenContainer.className) || childrenClassname, ref: childContainerRef, css: childrenContainer === null || childrenContainer === void 0 ? void 0 : childrenContainer.css, display: 'flex' }, { children: children })) })), showShadow && shadowDirection.right && (jsxRuntime.jsx(StyledRightShadow, __assign({ width: rightShadowWidth, shadowGradientStyle: shadowGradientStyle }, rightShadowWrapper, { children: showArrow && isHovering && (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer', paddingRight: theme.spacing[4], onClick: onArrowClick(exports.ARROW_DIRECTION.RIGHT) }, rightShadowContainer, { children: jsxRuntime.jsx(ctDesignIcons.RightChevronWithBoundingBox, __assign({ height: arrowDimension, width: arrowDimension }, rightChevron)) }))) })))] })));
+          }
+        }
+      }
+    }
+    return string;
+  }
+  var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g; // this is the cursor for keyframes
+  // keyframes are stored on the SerializedStyles object as a linked list
+
+  var cursor;
+  function serializeStyles(args, registered, mergedProps) {
+    if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
+      return args[0];
+    }
+    var stringMode = true;
+    var styles = '';
+    cursor = undefined;
+    var strings = args[0];
+    if (strings == null || strings.raw === undefined) {
+      stringMode = false;
+      styles += handleInterpolation(mergedProps, registered, strings);
+    } else {
+      var asTemplateStringsArr = strings;
+      styles += asTemplateStringsArr[0];
+    } // we start at 1 since we've already handled the first arg
+
+    for (var i = 1; i < args.length; i++) {
+      styles += handleInterpolation(mergedProps, registered, args[i]);
+      if (stringMode) {
+        var templateStringsArr = strings;
+        styles += templateStringsArr[i];
+      }
+    } // using a global regex with .exec is stateful so lastIndex has to be reset each time
+
+    labelPattern.lastIndex = 0;
+    var identifierName = '';
+    var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
+
+    while ((match = labelPattern.exec(styles)) !== null) {
+      identifierName += '-' + match[1];
+    }
+    var name = murmur2(styles) + identifierName;
+    return {
+      name: name,
+      styles: styles,
+      next: cursor
     };
-    HorizontalScroll.defaultProps = {
-        children: null,
-        className: '',
+  }
+
+  var isBrowser = typeof document !== 'undefined';
+  function getRegisteredStyles(registered, registeredStyles, classNames) {
+    var rawClassName = '';
+    classNames.split(' ').forEach(function (className) {
+      if (registered[className] !== undefined) {
+        registeredStyles.push(registered[className] + ";");
+      } else if (className) {
+        rawClassName += className + " ";
+      }
+    });
+    return rawClassName;
+  }
+  var registerStyles = function registerStyles(cache, serialized, isStringTag) {
+    var className = cache.key + "-" + serialized.name;
+    if (
+    // we only need to add the styles to the registered cache if the
+    // class name could be used further down
+    // the tree but if it's a string tag, we know it won't
+    // so we don't have to add it to registered cache.
+    // this improves memory usage since we can avoid storing the whole style string
+    (isStringTag === false ||
+    // we need to always store it if we're in compat mode and
+    // in node since emotion-server relies on whether a style is in
+    // the registered cache to know whether a style is global or not
+    // also, note that this check will be dead code eliminated in the browser
+    isBrowser === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+      cache.registered[className] = serialized.styles;
+    }
+  };
+  var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+    registerStyles(cache, serialized, isStringTag);
+    var className = cache.key + "-" + serialized.name;
+    if (cache.inserted[serialized.name] === undefined) {
+      var stylesForSSR = '';
+      var current = serialized;
+      do {
+        var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
+        if (!isBrowser && maybeStyles !== undefined) {
+          stylesForSSR += maybeStyles;
+        }
+        current = current.next;
+      } while (current !== undefined);
+      if (!isBrowser && stylesForSSR.length !== 0) {
+        return stylesForSSR;
+      }
+    }
+  };
+
+  function insertWithoutScoping(cache, serialized) {
+    if (cache.inserted[serialized.name] === undefined) {
+      return cache.insert('', serialized, cache.sheet, true);
+    }
+  }
+  function merge(registered, css, className) {
+    var registeredStyles = [];
+    var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
+    if (registeredStyles.length < 2) {
+      return className;
+    }
+    return rawClassName + css(registeredStyles);
+  }
+  var createEmotion = function createEmotion(options) {
+    var cache = createCache(options);
+    cache.sheet.speedy = function (value) {
+      this.isSpeedy = value;
+    };
+    cache.compat = true;
+    var css = function css() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      var serialized = serializeStyles(args, cache.registered, undefined);
+      insertStyles(cache, serialized, false);
+      return cache.key + "-" + serialized.name;
+    };
+    var keyframes = function keyframes() {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      var serialized = serializeStyles(args, cache.registered);
+      var animation = "animation-" + serialized.name;
+      insertWithoutScoping(cache, {
+        name: serialized.name,
+        styles: "@keyframes " + animation + "{" + serialized.styles + "}"
+      });
+      return animation;
+    };
+    var injectGlobal = function injectGlobal() {
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
+      }
+      var serialized = serializeStyles(args, cache.registered);
+      insertWithoutScoping(cache, serialized);
     };
+    var cx = function cx() {
+      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+        args[_key4] = arguments[_key4];
+      }
+      return merge(cache.registered, css, classnames(args));
+    };
+    return {
+      css: css,
+      cx: cx,
+      injectGlobal: injectGlobal,
+      keyframes: keyframes,
+      hydrate: function hydrate(ids) {
+        ids.forEach(function (key) {
+          cache.inserted[key] = true;
+        });
+      },
+      flush: function flush() {
+        cache.registered = {};
+        cache.inserted = {};
+        cache.sheet.flush();
+      },
+      sheet: cache.sheet,
+      cache: cache,
+      getRegisteredStyles: getRegisteredStyles.bind(null, cache.registered),
+      merge: merge.bind(null, cache.registered, css)
+    };
+  };
+  var classnames = function classnames(args) {
+    var cls = '';
+    for (var i = 0; i < args.length; i++) {
+      var arg = args[i];
+      if (arg == null) continue;
+      var toAdd = void 0;
+      switch (typeof arg) {
+        case 'boolean':
+          break;
+        case 'object':
+          {
+            if (Array.isArray(arg)) {
+              toAdd = classnames(arg);
+            } else {
+              toAdd = '';
+              for (var k in arg) {
+                if (arg[k] && k) {
+                  toAdd && (toAdd += ' ');
+                  toAdd += k;
+                }
+              }
+            }
+            break;
+          }
+        default:
+          {
+            toAdd = arg;
+          }
+      }
+      if (toAdd) {
+        cls && (cls += ' ');
+        cls += toAdd;
+      }
+    }
+    return cls;
+  };
+
+  var _createEmotion = createEmotion({
+      key: 'css'
+    }),
+    css = _createEmotion.css;
+
+  const horizontalScrollStyles = css `
+  display: flex;
+  white-space: no-wrap;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  -webkit-tap-highlight-color: transparent;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+
+  &::-webkit-scrollbar {
+    /* WebKit */
+    display: none;
+  }
+`;
+  const HorizontalScroll = react.forwardRef(({ children, styleConfig = {}, onScroll }, forwardRef) => {
+      const { root, childContainer } = styleConfig;
+      const horizontalScrollRef = react.useRef(null);
+      const parentContainerRef = react.useRef(null);
+      const childContainerRef = react.useRef(null);
+      const combinedParentContainerRef = useMergeRefs__default.default(parentContainerRef, forwardRef);
+      const combinedParenAndChildContainerRef = useMergeRefs__default.default(parentContainerRef, childContainerRef);
+      const rootStyles = ctDesignStyleManager.useWebMergeStyles([...(root || []), horizontalScrollStyles], [root]);
+      const handleScroll = (event) => {
+          onScroll === null || onScroll === void 0 ? void 0 : onScroll({
+              nativeEvent: {
+                  contentOffset: { x: event.currentTarget.scrollLeft, y: event.currentTarget.scrollTop },
+                  layoutMeasurement: { height: event.currentTarget.clientHeight, width: event.currentTarget.clientWidth },
+                  contentSize: { height: event.currentTarget.scrollHeight, width: event.currentTarget.scrollWidth },
+              },
+          });
+      };
+      return (jsxRuntime.jsx("div", { ref: horizontalScrollRef, onScroll: handleScroll, children: jsxRuntime.jsx("div", { ref: combinedParentContainerRef, className: rootStyles, children: jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: childContainer }, ref: combinedParenAndChildContainerRef, children: children }) }) }));
+  });
+  HorizontalScroll.displayName = 'HorizontalScroll';
+
+  exports.ARROW_DIRECTION = void 0;
+  (function (ARROW_DIRECTION) {
+      ARROW_DIRECTION["LEFT"] = "LEFT";
+      ARROW_DIRECTION["RIGHT"] = "RIGHT";
+  })(exports.ARROW_DIRECTION || (exports.ARROW_DIRECTION = {}));
+  exports.ARROW_SIZE = void 0;
+  (function (ARROW_SIZE) {
+      ARROW_SIZE["SM"] = "sm";
+      ARROW_SIZE["MD"] = "md";
+      ARROW_SIZE["LG"] = "lg";
+  })(exports.ARROW_SIZE || (exports.ARROW_SIZE = {}));
 
-    exports.HorizontalScroll = HorizontalScroll;
-    exports.StyledHorizontalScroll = StyledHorizontalScroll;
+  exports.HorizontalScroll = HorizontalScroll;
 
 }));
 //# sourceMappingURL=ct-design-horizontal-scroll.umd.js.map