@cleartrip/ct-design-horizontal-scroll 1.1.0

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

@@ -0,0 +1,1016 @@
+(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-use-theme'), require('@cleartrip/ct-design-icons')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', 'styled-components', '@cleartrip/ct-design-use-theme', '@cleartrip/ct-design-icons'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHorizontalScroll = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.styled, global.useTheme, global.ctDesignIcons));
+})(this, (function (exports, jsxRuntime, react, ctDesignContainer, styled, useTheme, ctDesignIcons) { 'use strict';
+
+    function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+    var styled__default = /*#__PURE__*/_interopDefault(styled);
+    var useTheme__default = /*#__PURE__*/_interopDefault(useTheme);
+
+    /******************************************************************************
+    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];
+        }
+        return t;
+      };
+      return __assign.apply(this, arguments);
+    };
+    function __makeTemplateObject(cooked, raw) {
+      if (Object.defineProperty) {
+        Object.defineProperty(cooked, "raw", {
+          value: raw
+        });
+      } else {
+        cooked.raw = raw;
+      }
+      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;
+    };
+
+    var StyledRightShadow = styled__default.default.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  width: ", ";\n  z-index: 10px;\n  background: ", ";\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  width: ", ";\n  z-index: 10px;\n  background: ", ";\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%)";
+    });
+    var templateObject_1$2;
+
+    var StyledLeftShadow = styled__default.default.div(templateObject_1$1 || (templateObject_1$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: 10px;\n  background: ", ";\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: 10px;\n  background: ", ";\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%)";
+    });
+    var templateObject_1$1;
+
+    var StyledHorizontalScroll = styled__default.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  white-space: no-wrap;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  -webkit-tap-highlight-color: transparent;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n\n  &::-webkit-scrollbar {\n    /* WebKit */\n    display: none;\n  }\n"], ["\n  display: flex;\n  white-space: no-wrap;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  -webkit-tap-highlight-color: transparent;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n\n  &::-webkit-scrollbar {\n    /* WebKit */\n    display: none;\n  }\n"])));
+    var templateObject_1;
+
+    var dayjs_minExports = {};
+    var dayjs_min = {
+      get exports(){ return dayjs_minExports; },
+      set exports(v){ dayjs_minExports = v; },
+    };
+
+    (function (module, exports) {
+      !function (t, e) {
+        module.exports = e() ;
+      }(this, function () {
+
+        var t = 1e3,
+          e = 6e4,
+          n = 36e5,
+          r = "millisecond",
+          i = "second",
+          s = "minute",
+          u = "hour",
+          a = "day",
+          o = "week",
+          c = "month",
+          f = "quarter",
+          h = "year",
+          d = "date",
+          l = "Invalid Date",
+          $ = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,
+          y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,
+          M = {
+            name: "en",
+            weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+            months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+            ordinal: function (t) {
+              var e = ["th", "st", "nd", "rd"],
+                n = t % 100;
+              return "[" + t + (e[(n - 20) % 10] || e[n] || e[0]) + "]";
+            }
+          },
+          m = function (t, e, n) {
+            var r = String(t);
+            return !r || r.length >= e ? t : "" + Array(e + 1 - r.length).join(n) + t;
+          },
+          v = {
+            s: m,
+            z: function (t) {
+              var e = -t.utcOffset(),
+                n = Math.abs(e),
+                r = Math.floor(n / 60),
+                i = n % 60;
+              return (e <= 0 ? "+" : "-") + m(r, 2, "0") + ":" + m(i, 2, "0");
+            },
+            m: function t(e, n) {
+              if (e.date() < n.date()) return -t(n, e);
+              var r = 12 * (n.year() - e.year()) + (n.month() - e.month()),
+                i = e.clone().add(r, c),
+                s = n - i < 0,
+                u = e.clone().add(r + (s ? -1 : 1), c);
+              return +(-(r + (n - i) / (s ? i - u : u - i)) || 0);
+            },
+            a: function (t) {
+              return t < 0 ? Math.ceil(t) || 0 : Math.floor(t);
+            },
+            p: function (t) {
+              return {
+                M: c,
+                y: h,
+                w: o,
+                d: a,
+                D: d,
+                h: u,
+                m: s,
+                s: i,
+                ms: r,
+                Q: f
+              }[t] || String(t || "").toLowerCase().replace(/s$/, "");
+            },
+            u: function (t) {
+              return void 0 === t;
+            }
+          },
+          g = "en",
+          D = {};
+        D[g] = M;
+        var p = "$isDayjsObject",
+          S = function (t) {
+            return t instanceof _ || !(!t || !t[p]);
+          },
+          w = function t(e, n, r) {
+            var i;
+            if (!e) return g;
+            if ("string" == typeof e) {
+              var s = e.toLowerCase();
+              D[s] && (i = s), n && (D[s] = n, i = s);
+              var u = e.split("-");
+              if (!i && u.length > 1) return t(u[0]);
+            } else {
+              var a = e.name;
+              D[a] = e, i = a;
+            }
+            return !r && i && (g = i), i || !r && g;
+          },
+          O = function (t, e) {
+            if (S(t)) return t.clone();
+            var n = "object" == typeof e ? e : {};
+            return n.date = t, n.args = arguments, new _(n);
+          },
+          b = v;
+        b.l = w, b.i = S, b.w = function (t, e) {
+          return O(t, {
+            locale: e.$L,
+            utc: e.$u,
+            x: e.$x,
+            $offset: e.$offset
+          });
+        };
+        var _ = function () {
+            function M(t) {
+              this.$L = w(t.locale, null, !0), this.parse(t), this.$x = this.$x || t.x || {}, this[p] = !0;
+            }
+            var m = M.prototype;
+            return m.parse = function (t) {
+              this.$d = function (t) {
+                var e = t.date,
+                  n = t.utc;
+                if (null === e) return new Date(NaN);
+                if (b.u(e)) return new Date();
+                if (e instanceof Date) return new Date(e);
+                if ("string" == typeof e && !/Z$/i.test(e)) {
+                  var r = e.match($);
+                  if (r) {
+                    var i = r[2] - 1 || 0,
+                      s = (r[7] || "0").substring(0, 3);
+                    return n ? new Date(Date.UTC(r[1], i, r[3] || 1, r[4] || 0, r[5] || 0, r[6] || 0, s)) : new Date(r[1], i, r[3] || 1, r[4] || 0, r[5] || 0, r[6] || 0, s);
+                  }
+                }
+                return new Date(e);
+              }(t), this.init();
+            }, m.init = function () {
+              var t = this.$d;
+              this.$y = t.getFullYear(), this.$M = t.getMonth(), this.$D = t.getDate(), this.$W = t.getDay(), this.$H = t.getHours(), this.$m = t.getMinutes(), this.$s = t.getSeconds(), this.$ms = t.getMilliseconds();
+            }, m.$utils = function () {
+              return b;
+            }, m.isValid = function () {
+              return !(this.$d.toString() === l);
+            }, m.isSame = function (t, e) {
+              var n = O(t);
+              return this.startOf(e) <= n && n <= this.endOf(e);
+            }, m.isAfter = function (t, e) {
+              return O(t) < this.startOf(e);
+            }, m.isBefore = function (t, e) {
+              return this.endOf(e) < O(t);
+            }, m.$g = function (t, e, n) {
+              return b.u(t) ? this[e] : this.set(n, t);
+            }, m.unix = function () {
+              return Math.floor(this.valueOf() / 1e3);
+            }, m.valueOf = function () {
+              return this.$d.getTime();
+            }, m.startOf = function (t, e) {
+              var n = this,
+                r = !!b.u(e) || e,
+                f = b.p(t),
+                l = function (t, e) {
+                  var i = b.w(n.$u ? Date.UTC(n.$y, e, t) : new Date(n.$y, e, t), n);
+                  return r ? i : i.endOf(a);
+                },
+                $ = function (t, e) {
+                  return b.w(n.toDate()[t].apply(n.toDate("s"), (r ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e)), n);
+                },
+                y = this.$W,
+                M = this.$M,
+                m = this.$D,
+                v = "set" + (this.$u ? "UTC" : "");
+              switch (f) {
+                case h:
+                  return r ? l(1, 0) : l(31, 11);
+                case c:
+                  return r ? l(1, M) : l(0, M + 1);
+                case o:
+                  var g = this.$locale().weekStart || 0,
+                    D = (y < g ? y + 7 : y) - g;
+                  return l(r ? m - D : m + (6 - D), M);
+                case a:
+                case d:
+                  return $(v + "Hours", 0);
+                case u:
+                  return $(v + "Minutes", 1);
+                case s:
+                  return $(v + "Seconds", 2);
+                case i:
+                  return $(v + "Milliseconds", 3);
+                default:
+                  return this.clone();
+              }
+            }, m.endOf = function (t) {
+              return this.startOf(t, !1);
+            }, m.$set = function (t, e) {
+              var n,
+                o = b.p(t),
+                f = "set" + (this.$u ? "UTC" : ""),
+                l = (n = {}, n[a] = f + "Date", n[d] = f + "Date", n[c] = f + "Month", n[h] = f + "FullYear", n[u] = f + "Hours", n[s] = f + "Minutes", n[i] = f + "Seconds", n[r] = f + "Milliseconds", n)[o],
+                $ = o === a ? this.$D + (e - this.$W) : e;
+              if (o === c || o === h) {
+                var y = this.clone().set(d, 1);
+                y.$d[l]($), y.init(), this.$d = y.set(d, Math.min(this.$D, y.daysInMonth())).$d;
+              } else l && this.$d[l]($);
+              return this.init(), this;
+            }, m.set = function (t, e) {
+              return this.clone().$set(t, e);
+            }, m.get = function (t) {
+              return this[b.p(t)]();
+            }, m.add = function (r, f) {
+              var d,
+                l = this;
+              r = Number(r);
+              var $ = b.p(f),
+                y = function (t) {
+                  var e = O(l);
+                  return b.w(e.date(e.date() + Math.round(t * r)), l);
+                };
+              if ($ === c) return this.set(c, this.$M + r);
+              if ($ === h) return this.set(h, this.$y + r);
+              if ($ === a) return y(1);
+              if ($ === o) return y(7);
+              var M = (d = {}, d[s] = e, d[u] = n, d[i] = t, d)[$] || 1,
+                m = this.$d.getTime() + r * M;
+              return b.w(m, this);
+            }, m.subtract = function (t, e) {
+              return this.add(-1 * t, e);
+            }, m.format = function (t) {
+              var e = this,
+                n = this.$locale();
+              if (!this.isValid()) return n.invalidDate || l;
+              var r = t || "YYYY-MM-DDTHH:mm:ssZ",
+                i = b.z(this),
+                s = this.$H,
+                u = this.$m,
+                a = this.$M,
+                o = n.weekdays,
+                c = n.months,
+                f = n.meridiem,
+                h = function (t, n, i, s) {
+                  return t && (t[n] || t(e, r)) || i[n].slice(0, s);
+                },
+                d = function (t) {
+                  return b.s(s % 12 || 12, t, "0");
+                },
+                $ = f || function (t, e, n) {
+                  var r = t < 12 ? "AM" : "PM";
+                  return n ? r.toLowerCase() : r;
+                };
+              return r.replace(y, function (t, r) {
+                return r || function (t) {
+                  switch (t) {
+                    case "YY":
+                      return String(e.$y).slice(-2);
+                    case "YYYY":
+                      return b.s(e.$y, 4, "0");
+                    case "M":
+                      return a + 1;
+                    case "MM":
+                      return b.s(a + 1, 2, "0");
+                    case "MMM":
+                      return h(n.monthsShort, a, c, 3);
+                    case "MMMM":
+                      return h(c, a);
+                    case "D":
+                      return e.$D;
+                    case "DD":
+                      return b.s(e.$D, 2, "0");
+                    case "d":
+                      return String(e.$W);
+                    case "dd":
+                      return h(n.weekdaysMin, e.$W, o, 2);
+                    case "ddd":
+                      return h(n.weekdaysShort, e.$W, o, 3);
+                    case "dddd":
+                      return o[e.$W];
+                    case "H":
+                      return String(s);
+                    case "HH":
+                      return b.s(s, 2, "0");
+                    case "h":
+                      return d(1);
+                    case "hh":
+                      return d(2);
+                    case "a":
+                      return $(s, u, !0);
+                    case "A":
+                      return $(s, u, !1);
+                    case "m":
+                      return String(u);
+                    case "mm":
+                      return b.s(u, 2, "0");
+                    case "s":
+                      return String(e.$s);
+                    case "ss":
+                      return b.s(e.$s, 2, "0");
+                    case "SSS":
+                      return b.s(e.$ms, 3, "0");
+                    case "Z":
+                      return i;
+                  }
+                  return null;
+                }(t) || i.replace(":", "");
+              });
+            }, m.utcOffset = function () {
+              return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
+            }, m.diff = function (r, d, l) {
+              var $,
+                y = this,
+                M = b.p(d),
+                m = O(r),
+                v = (m.utcOffset() - this.utcOffset()) * e,
+                g = this - m,
+                D = function () {
+                  return b.m(y, m);
+                };
+              switch (M) {
+                case h:
+                  $ = D() / 12;
+                  break;
+                case c:
+                  $ = D();
+                  break;
+                case f:
+                  $ = D() / 3;
+                  break;
+                case o:
+                  $ = (g - v) / 6048e5;
+                  break;
+                case a:
+                  $ = (g - v) / 864e5;
+                  break;
+                case u:
+                  $ = g / n;
+                  break;
+                case s:
+                  $ = g / e;
+                  break;
+                case i:
+                  $ = g / t;
+                  break;
+                default:
+                  $ = g;
+              }
+              return l ? $ : b.a($);
+            }, m.daysInMonth = function () {
+              return this.endOf(c).$D;
+            }, m.$locale = function () {
+              return D[this.$L];
+            }, m.locale = function (t, e) {
+              if (!t) return this.$L;
+              var n = this.clone(),
+                r = w(t, e, !0);
+              return r && (n.$L = r), n;
+            }, m.clone = function () {
+              return b.w(this.$d, this);
+            }, m.toDate = function () {
+              return new Date(this.valueOf());
+            }, m.toJSON = function () {
+              return this.isValid() ? this.toISOString() : null;
+            }, m.toISOString = function () {
+              return this.$d.toISOString();
+            }, m.toString = function () {
+              return this.$d.toUTCString();
+            }, M;
+          }(),
+          k = _.prototype;
+        return O.prototype = k, [["$ms", r], ["$s", i], ["$m", s], ["$H", u], ["$W", a], ["$M", c], ["$y", h], ["$D", d]].forEach(function (t) {
+          k[t[1]] = function (e) {
+            return this.$g(e, t[0], t[1]);
+          };
+        }), O.extend = function (t, e) {
+          return t.$i || (t(e, _, O), t.$i = !0), O;
+        }, O.locale = w, O.isDayjs = S, O.unix = function (t) {
+          return O(1e3 * t);
+        }, O.en = D[g], O.Ls = D, O.p = {}, O;
+      });
+    })(dayjs_min);
+
+    var ButtonVariant;
+    (function (ButtonVariant) {
+      ButtonVariant["CONTAINED"] = "contained";
+      ButtonVariant["OUTLINED"] = "outlined";
+      ButtonVariant["BARE"] = "bare";
+    })(ButtonVariant || (ButtonVariant = {}));
+    var ButtonColor;
+    (function (ButtonColor) {
+      ButtonColor["PRIMARY"] = "primary";
+      ButtonColor["SECONDARY"] = "secondary";
+    })(ButtonColor || (ButtonColor = {}));
+    var ButtonSize;
+    (function (ButtonSize) {
+      ButtonSize["SMALL"] = "sm";
+      ButtonSize["MEDIUM"] = "md";
+      ButtonSize["LARGE"] = "lg";
+    })(ButtonSize || (ButtonSize = {}));
+    var ButtonIconPosition;
+    (function (ButtonIconPosition) {
+      ButtonIconPosition["LEFT"] = "left";
+      ButtonIconPosition["RIGHT"] = "right";
+    })(ButtonIconPosition || (ButtonIconPosition = {}));
+    var ButtonPosition;
+    (function (ButtonPosition) {
+      ButtonPosition["LEFT"] = "left";
+      ButtonPosition["RIGHT"] = "right";
+      ButtonPosition["CENTER"] = "center";
+      ButtonPosition["STRETCH"] = "stretch";
+    })(ButtonPosition || (ButtonPosition = {}));
+    var ToastTypes;
+    (function (ToastTypes) {
+      ToastTypes["ERROR"] = "ERROR";
+      ToastTypes["SUCCESS"] = "SUCCESS";
+    })(ToastTypes || (ToastTypes = {}));
+    var CalloutTypes;
+    (function (CalloutTypes) {
+      CalloutTypes["ERROR"] = "ERROR";
+      CalloutTypes["WARNING"] = "WARNING";
+      CalloutTypes["SUCCESS"] = "SUCCESS";
+    })(CalloutTypes || (CalloutTypes = {}));
+    var CalenderMode;
+    (function (CalenderMode) {
+      CalenderMode["PWA"] = "pwa";
+      CalenderMode["DESKTOP"] = "desktop";
+    })(CalenderMode || (CalenderMode = {}));
+    var Theme;
+    (function (Theme) {
+      Theme["PRIMARY"] = "PRIMARY";
+    })(Theme || (Theme = {}));
+    var Tabs;
+    (function (Tabs) {
+      Tabs["FlatTabs"] = "FlatTab";
+      Tabs["CapsuleTabs"] = "CapsuleTab";
+    })(Tabs || (Tabs = {}));
+    var BorderStyle;
+    (function (BorderStyle) {
+      BorderStyle["SOLID"] = "SOLID";
+      BorderStyle["DOTTED"] = "DOTTED";
+    })(BorderStyle || (BorderStyle = {}));
+    var IconPosition;
+    (function (IconPosition) {
+      IconPosition["TOP"] = "top";
+      IconPosition["BOTTOM"] = "bottom";
+      IconPosition["LEFT"] = "left";
+      IconPosition["RIGHT"] = "right";
+    })(IconPosition || (IconPosition = {}));
+
+    var colors = {
+      neutral900: '#1A1A1A',
+      neutral700: '#808080',
+      neutral500: '#B3B3B3',
+      neutral400: '#CAC9C9',
+      neutral350: '#DBDBDB',
+      neutral300: '#F3F3F3',
+      neutral100: '#FFFFFF',
+      brand: '#FF4F17',
+      link: '#0F6BFF',
+      success: '#11A670',
+      alert: '#DF9641',
+      warning: '#C83232',
+      line: '#E7E7E7',
+      brandBg: '#FEF3ED',
+      linkBg: '#EFF3FB',
+      successBg: '#ECF8F4',
+      alertBg: '#FCF7F0',
+      warningBg: '#FBEFEF',
+      brandText: '#FF4F17',
+      successText: '#11A670',
+      alertText: '#DF9641',
+      warningText: '#C83232',
+      disabledText: '#B3B3B3',
+      disabled100: '#E6E6E6',
+      linkText: '#0F6BFF',
+      highlightBg: 'rgba(255, 255, 255, 0.2)',
+      shadow: '#1a1a1a14',
+      link2: '#3366CC',
+      link2Hover: '#1A469D',
+      bgPrimary: '#ED6521',
+      bgPrimaryHover: '#CE4501',
+      blue100: '#ECF3FF',
+      orange100: '#FFF1EC'
+    };
+    var border = {
+      radius: {
+        0: '0px',
+        2: '2px',
+        4: '4px',
+        6: '6px',
+        8: '8px',
+        12: '12px',
+        16: '16px',
+        30: '30px',
+        32: '32px',
+        '50P': '50%'
+      },
+      width: {
+        none: '0px',
+        sm: '1px',
+        md: '1.5px',
+        lg: '2px'
+      },
+      style: {
+        solid: 'solid',
+        dotted: 'dotted'
+      }
+    };
+    var typography = {
+      weight: {
+        bold: 700,
+        semibold: 600,
+        medium: 500,
+        normal: 400
+      },
+      size: {
+        10: '10px',
+        12: '12px',
+        14: '14px',
+        16: '16px',
+        20: '20px',
+        24: '24px',
+        32: '32px',
+        40: '40px',
+        48: '48px'
+      },
+      lineHeight: {
+        12: '12px',
+        14: '14px',
+        16: '16px',
+        18: '18px',
+        20: '20px',
+        22: '22px',
+        24: '24px',
+        28: '28px',
+        32: '32px',
+        40: '40px',
+        48: '48px',
+        56: '56px'
+      }
+    };
+    var spacing = {
+      0: '0px',
+      1: '4px',
+      2: '8px',
+      3: '12px',
+      4: '16px',
+      5: '20px',
+      6: '24px',
+      7: '28px',
+      8: '32px',
+      9: '36px',
+      10: '40px',
+      14: '56px'
+    };
+    var size = {
+      0: '0px',
+      1: '4px',
+      2: '8px',
+      '2.5': '10px',
+      3: '12px',
+      4: '16px',
+      5: '20px',
+      6: '24px',
+      7: '28px',
+      8: '32px',
+      9: '36px',
+      10: '40px',
+      11: '44px',
+      12: '48px',
+      13: '52px',
+      14: '56px',
+      15: '60px',
+      50: '200px'
+    };
+    var elevation = {
+      bottomE1: '0px 1px 0px #E7E7E7',
+      bottomE2: '0px 4px 16px rgba(26, 26, 26, 0.08)',
+      bottomE3: '0px 8px 24px rgba(26, 26, 26, 0.1)',
+      bottomE4: '0px 10px 32px rgba(26, 26, 26, 0.2)',
+      topE1: '0px -1px 0px #E7E7E7',
+      topE2: '0px -4px 16px rgba(26, 26, 26, 0.08)',
+      topE3: '0px -8px 24px rgba(26, 26, 26, 0.1)',
+      topE4: '0px -10px 32px rgba(26, 26, 26, 0.2)'
+    };
+    var duration = {
+      shortest: 150,
+      shorter: 200,
+      short: 250,
+      standard: 300,
+      complex: 375,
+      enteringScreen: 225,
+      leavingScreen: 195
+    };
+    var easing = {
+      easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
+      easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+      sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
+    };
+    function getAutoHeightDuration(height) {
+      if (!height) {
+        return 0;
+      }
+      var constant = height / 36;
+      return Math.round((4 + 15 * Math.pow(constant, 0.25) + constant / 5) * 10);
+    }
+    var create = function (props, options) {
+      if (props === void 0) {
+        props = ['all'];
+      }
+      if (options === void 0) {
+        options = {};
+      }
+      var _a = options.duration,
+        durationOption = _a === void 0 ? duration.standard : _a,
+        _b = options.easing,
+        easingOption = _b === void 0 ? easing.easeInOut : _b,
+        _c = options.delay,
+        delay = _c === void 0 ? 0 : _c;
+      return (Array.isArray(props) ? props : [props]).map(function (animatedProp) {
+        return "".concat(animatedProp, " ").concat(typeof durationOption === 'string' ? durationOption : "".concat(durationOption, "ms"), " ").concat(easingOption, " ").concat(typeof delay === 'string' ? delay : "".concat(delay, "ms"));
+      }).join(',');
+    };
+    var hover$1 = function (key) {
+      var _a;
+      var bg = (_a = {}, _a[colors.neutral100] = colors.neutral100, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral100] = colors.neutral100, _a[colors.brand] = colors.bgPrimaryHover, _a[colors.neutral100] = colors.neutral100, _a[colors.disabledText] = colors.disabledText, _a[colors.neutral300] = colors.neutral300, _a[colors.neutral100] = colors.neutral100, _a[colors.link2] = colors.link2Hover, _a[colors.neutral100] = colors.neutral100, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral100] = colors.neutral100, _a[colors.disabledText] = colors.disabledText, _a[colors.neutral300] = colors.neutral300, _a);
+      return bg[key];
+    };
+    var zIndex = {
+      drawer: 1200,
+      modal: 1300,
+      popOver: 1300,
+      tooltip: 1500,
+      sideNav: 100,
+      toolbar: 50
+    };
+    var counter = {
+      enabled: {
+        stroke: colors.neutral900
+      },
+      disabled: {
+        stroke: colors.neutral500
+      }
+    };
+    var BaseTheme = {
+      color: {
+        text: {
+          primary: colors.neutral900,
+          secondary: colors.brandText,
+          tertiary: colors.neutral500,
+          heading: colors.neutral900,
+          subHeading: colors.neutral700,
+          disabled: colors.disabledText,
+          success: colors.successText,
+          alert: colors.alertText,
+          warning: colors.warningText,
+          link: colors.linkText,
+          brand: colors.brandText,
+          neutral: colors.neutral100,
+          link2: colors.link2
+        },
+        button: {
+          outlinedPrimaryLabel: colors.neutral900,
+          outlinedPrimaryBorder: colors.neutral900,
+          outlinedPrimaryBg: colors.neutral100,
+          outlinedSecondaryLabel: colors.brand,
+          outlinedSecondaryBorder: colors.brand,
+          outlinedSecondaryBg: colors.neutral100,
+          outlinedTertiaryLabel: colors.link,
+          outlinedTertiaryBorder: colors.link,
+          outlinedTertiaryBg: colors.neutral100,
+          outlinedDisabledLabel: colors.disabledText,
+          outlinedDisabledBg: colors.neutral300,
+          containedPrimaryLabel: colors.neutral100,
+          containedPrimaryBg: colors.neutral900,
+          containedSecondaryLabel: colors.neutral100,
+          containedSecondaryBg: colors.brand,
+          containedTertiaryLabel: colors.neutral100,
+          containedTertiaryBg: colors.link,
+          containedDisabledLabel: colors.disabledText,
+          containedDisabledBg: colors.neutral300,
+          hover: hover$1
+        },
+        chip: {
+          nonSelectedPrimaryLabel: colors.neutral900,
+          disabledPrimaryLabel: colors.disabledText,
+          selectedPrimaryLabel: colors.neutral900,
+          selectedPrimaryBorder: colors.neutral900,
+          selectedPrimaryBg: colors.neutral300
+        },
+        dropdown: {
+          shadow: colors.shadow
+        },
+        tab: {
+          nonSelectedPrimaryLabel: colors.neutral700,
+          selectedPrimaryLabel: colors.neutral900
+        },
+        sidenav: {
+          primaryBg: colors.neutral900,
+          selectedTabBg: colors.highlightBg
+        },
+        tooltip: {
+          primaryBg: colors.neutral900
+        },
+        background: {
+          primary: colors.neutral900,
+          secondary: colors.brand,
+          tertiary: colors.link,
+          brand: colors.brand,
+          brandLightBg: colors.brandBg,
+          link: colors.link,
+          linkLightBg: colors.linkBg,
+          success: colors.success,
+          successLightBg: colors.successBg,
+          alert: colors.alert,
+          alertLightBg: colors.alertBg,
+          warning: colors.warning,
+          warningLightBg: colors.warningBg,
+          neutral: colors.neutral100,
+          disabled: colors.neutral300,
+          disabledSecondaryLight: colors.neutral350,
+          disabledSecondary: colors.neutral400,
+          disabledDark: colors.disabled100,
+          defaultDark: colors.neutral700,
+          defaultDarkest: colors.neutral900
+        },
+        border: {
+          primary: colors.neutral900,
+          secondary: colors.brand,
+          tertiary: colors.link,
+          brand: colors.brand,
+          neutral: colors.neutral900,
+          link: colors.link,
+          default: colors.line,
+          defaultDark: colors.neutral700,
+          disabled: colors.neutral500,
+          disabledDark: colors.disabled100,
+          warning: colors.warning
+        },
+        spinner: {
+          primary: colors.neutral700,
+          primaryBg: colors.alertBg
+        },
+        coupon: {
+          primaryBg: colors.blue100
+        },
+        alert: {
+          success: colors.successBg,
+          warning: colors.alertBg,
+          info: colors.blue100,
+          error: colors.alertBg
+        },
+        counter: counter
+      },
+      elevation: __assign({}, elevation),
+      border: __assign({}, border),
+      spacing: __assign({}, spacing),
+      typography: __assign({}, typography),
+      size: __assign({}, size),
+      transitions: {
+        duration: duration,
+        easing: easing,
+        create: create,
+        getAutoHeightDuration: getAutoHeightDuration
+      },
+      zIndex: zIndex
+    };
+    __assign({}, BaseTheme);
+    var hover = function (key) {
+      var _a;
+      var bg = (_a = {}, _a[colors.neutral100] = colors.neutral100, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral100] = colors.neutral100, _a[colors.brand] = colors.bgPrimaryHover, _a[colors.neutral100] = colors.neutral100, _a[colors.disabledText] = colors.disabledText, _a[colors.neutral300] = colors.neutral300, _a[colors.neutral100] = colors.neutral100, _a[colors.link2] = colors.link2Hover, _a[colors.neutral100] = colors.neutral100, _a[colors.neutral900] = colors.neutral900, _a[colors.neutral100] = colors.neutral100, _a[colors.disabledText] = colors.disabledText, _a[colors.neutral300] = colors.neutral300, _a);
+      return bg[key];
+    };
+    __assign(__assign({}, BaseTheme), {
+      color: __assign(__assign({}, BaseTheme.color), {
+        text: __assign(__assign({}, BaseTheme.color.text), {
+          secondary: colors.link2,
+          tertiary: colors.neutral500
+        }),
+        button: {
+          outlinedPrimaryLabel: colors.link2,
+          outlinedPrimaryBorder: colors.link2,
+          outlinedPrimaryBg: colors.neutral100,
+          outlinedSecondaryLabel: colors.neutral900,
+          outlinedSecondaryBorder: colors.neutral900,
+          outlinedSecondaryBg: colors.neutral100,
+          outlinedTertiaryLabel: colors.brand,
+          outlinedTertiaryBorder: colors.brand,
+          outlinedTertiaryBg: colors.neutral100,
+          outlinedDisabledLabel: colors.disabledText,
+          outlinedDisabledBg: colors.neutral300,
+          containedPrimaryLabel: colors.neutral100,
+          containedPrimaryBg: colors.link2,
+          containedSecondaryLabel: colors.neutral100,
+          containedSecondaryBg: colors.neutral900,
+          containedTertiaryLabel: colors.neutral100,
+          containedTertiaryBg: colors.brand,
+          containedDisabledLabel: colors.disabledText,
+          containedDisabledBg: colors.neutral300,
+          hover: hover
+        },
+        chip: __assign(__assign({}, BaseTheme.color.chip), {
+          selectedPrimaryLabel: colors.link2,
+          selectedPrimaryBorder: colors.link2,
+          selectedPrimaryBg: colors.linkBg
+        }),
+        tab: __assign(__assign({}, BaseTheme.color.tab), {
+          nonSelectedPrimaryLabel: colors.neutral900,
+          selectedPrimaryLabel: colors.link2
+        }),
+        background: __assign(__assign({}, BaseTheme.color.background), {
+          primary: colors.link2,
+          secondary: colors.neutral900,
+          tertiary: colors.brand
+        }),
+        border: __assign(__assign({}, BaseTheme.color.border), {
+          primary: colors.link2,
+          secondary: colors.neutral900,
+          tertiary: colors.brand
+        }),
+        spinner: {
+          primary: colors.link2,
+          primaryBg: colors.alertBg
+        }
+      })
+    });
+
+    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 = {}));
+
+    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 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;
+        var _c = shadowWidth || {}, leftShadowWidth = _c.left, rightShadowWidth = _c.right;
+        var theme = useTheme__default.default();
+        var _d = react.useState(false), isHovering = _d[0], setIsHovering = _d[1];
+        var _e = react.useState({
+            left: false,
+            right: false,
+        }), shadowDirection = _e[0], setShadowDirection = _e[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) {
+                    setShadowDirection(function (prevState) { return (__assign(__assign({}, prevState), { left: true })); });
+                }
+                else {
+                    setShadowDirection(function (prevState) { return (__assign(__assign({}, prevState), { left: false })); });
+                }
+                if (childContainerRight > horizontalScrollRight) {
+                    setShadowDirection(function (prevState) { return (__assign(__assign({}, prevState), { right: true })); });
+                }
+                else {
+                    setShadowDirection(function (prevState) { return (__assign(__assign({}, prevState), { right: false })); });
+                }
+            }
+        };
+        react.useEffect(function () {
+            updateArrowIcons();
+        }, []);
+        var onHover = react.useCallback(function (type) { return function () {
+            if (type === HOVER_TYPE.ENTER) {
+                setIsHovering(true);
+            }
+            else {
+                setIsHovering(false);
+            }
+        }; }, []);
+        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;
+                }
+            }
+            setTimeout(function () {
+                updateArrowIcons();
+            }, 200);
+        }; };
+        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];
+                }
+                case exports.ARROW_SIZE.LG: {
+                    return theme.size[10];
+                }
+                default: {
+                    return theme.size[6];
+                }
+            }
+        }, [arrowSize]);
+        return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ position: 'relative', onMouseEnter: onHover(HOVER_TYPE.ENTER), onMouseLeave: onHover(HOVER_TYPE.LEAVE), className: containerClassname, ref: horizontalScrollRef }, { children: [showShadow && shadowDirection.left && (jsxRuntime.jsx(StyledLeftShadow, __assign({ width: leftShadowWidth, shadowGradientStyle: shadowGradientStyle }, { 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) }, { children: jsxRuntime.jsx(ctDesignIcons.LeftChevronWithBoundingBox, { height: arrowDimension, width: arrowDimension }) }))) }))), jsxRuntime.jsx(StyledHorizontalScroll, __assign({ ref: parentContainerRef, className: className }, { children: jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: childrenClassname, ref: childContainerRef, display: 'flex' }, { children: children })) })), showShadow && shadowDirection.right && (jsxRuntime.jsx(StyledRightShadow, __assign({ width: rightShadowWidth, shadowGradientStyle: shadowGradientStyle }, { 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) }, { children: jsxRuntime.jsx(ctDesignIcons.RightChevronWithBoundingBox, { height: arrowDimension, width: arrowDimension }) }))) })))] })));
+    };
+    HorizontalScroll.defaultProps = {
+        children: null,
+        className: '',
+    };
+
+    exports.HorizontalScroll = HorizontalScroll;
+    exports.StyledHorizontalScroll = StyledHorizontalScroll;
+
+}));
+//# sourceMappingURL=ct-design-horizontal-scroll.umd.js.map