@cleartrip/ct-design-modal 4.0.0 → 5.1.0

package/dist/ct-design-modal.umd.js

@@ -1,13 +1,12 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('styled-components'), require('@cleartrip/ct-design-theme'), require('@cleartrip/ct-design-portal'), require('@cleartrip/ct-design-focus-lock'), require('@cleartrip/ct-design-transition'), require('@cleartrip/ct-design-use-merge-refs'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-box'), require('@cleartrip/ct-design-icons'), require('@cleartrip/ct-design-typography')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', 'styled-components', '@cleartrip/ct-design-theme', '@cleartrip/ct-design-portal', '@cleartrip/ct-design-focus-lock', '@cleartrip/ct-design-transition', '@cleartrip/ct-design-use-merge-refs', '@cleartrip/ct-design-container', '@cleartrip/ct-design-box', '@cleartrip/ct-design-icons', '@cleartrip/ct-design-typography'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemModal = {}, global.jsxRuntime, global.React, global.styled, global.ctDesignTheme, global.ctDesignPortal, global.ctDesignFocusLock, global.ctDesignTransition, global.useMergeRefs, global.ctDesignContainer, global.ctDesignBox, global.ctDesignIcons, global.ctDesignTypography));
-})(this, (function (exports, jsxRuntime, React, styled, ctDesignTheme, ctDesignPortal, ctDesignFocusLock, ctDesignTransition, useMergeRefs, ctDesignContainer, ctDesignBox, ctDesignIcons, ctDesignTypography) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-portal'), require('@cleartrip/ct-design-focus-lock'), require('@cleartrip/ct-design-transition'), require('@cleartrip/ct-design-style-manager'), require('@cleartrip/ct-design-use-merge-refs'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-box'), require('@cleartrip/ct-design-icons'), require('@cleartrip/ct-design-theme'), require('@cleartrip/ct-design-typography')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-portal', '@cleartrip/ct-design-focus-lock', '@cleartrip/ct-design-transition', '@cleartrip/ct-design-style-manager', '@cleartrip/ct-design-use-merge-refs', '@cleartrip/ct-design-container', '@cleartrip/ct-design-box', '@cleartrip/ct-design-icons', '@cleartrip/ct-design-theme', '@cleartrip/ct-design-typography'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemModal = {}, global.jsxRuntime, global.React, global.ctDesignPortal, global.ctDesignFocusLock, global.ctDesignTransition, global.ctDesignStyleManager, global.useMergeRefs, global.ctDesignContainer, global.ctDesignBox, global.ctDesignIcons, global.ctDesignTheme, global.ctDesignTypography));
+})(this, (function (exports, jsxRuntime, React, ctDesignPortal, ctDesignFocusLock, ctDesignTransition, ctDesignStyleManager, useMergeRefs, ctDesignContainer, ctDesignBox, ctDesignIcons, ctDesignTheme, ctDesignTypography) { 'use strict';
 
     function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
     var React__default = /*#__PURE__*/_interopDefault(React);
-    var styled__default = /*#__PURE__*/_interopDefault(styled);
     var useMergeRefs__default = /*#__PURE__*/_interopDefault(useMergeRefs);
 
     /******************************************************************************
@@ -24,18 +23,8 @@
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol */
+    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
-    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 __rest(s, e) {
       var t = {};
       for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
@@ -69,8 +58,20 @@
         ModalPlacement["CENTER"] = "center";
         ModalPlacement["BOTTOM"] = "bottom";
     })(exports.ModalPlacement || (exports.ModalPlacement = {}));
+    exports.ActionButtonVariant = void 0;
+    (function (ActionButtonVariant) {
+        ActionButtonVariant["BACK"] = "back";
+        ActionButtonVariant["CLOSE"] = "close";
+        ActionButtonVariant["NONE"] = "none";
+    })(exports.ActionButtonVariant || (exports.ActionButtonVariant = {}));
+    exports.ActionButtonAlignment = void 0;
+    (function (ActionButtonAlignment) {
+        ActionButtonAlignment["CENTER"] = "center";
+        ActionButtonAlignment["LEFT"] = "left";
+        ActionButtonAlignment["RIGHT"] = "right";
+    })(exports.ActionButtonAlignment || (exports.ActionButtonAlignment = {}));
 
-    var getModalSizeStyles = function (size) {
+    const getModalSizeStyles = (size) => {
         switch (size) {
             case exports.ModalSize.SMALL: {
                 return {
@@ -111,137 +112,1828 @@
             }
         }
     };
-    var getModalChildContainerStyle = function (_a) {
-        var theme = _a.theme, size = _a.size, blur = _a.blur, overflowY = _a.overflowY, modalContentCss = _a.modalContentCss, variant = _a.variant;
-        return (__assign(__assign({ boxSizing: 'content-box', borderRadius: size === exports.ModalSize.FULL_SCREEN ? 0 : theme.spacing['3'], borderBottomLeftRadius: size === exports.ModalSize.FULL_SCREEN ? 0 : theme.spacing['3'], borderBottomRightRadius: size === exports.ModalSize.FULL_SCREEN ? 0 : theme.spacing['3'], backgroundColor: variant === exports.ModalVariant.DARK ? theme.color.background.primary : theme.color.background.neutral, overflowY: overflowY, maxHeight: size === exports.ModalSize.FULL_SCREEN ? '100vh' : "calc(100vh - 64px)", boxShadow: blur
-                ? "".concat(theme.elevation.modalBlurLight, ", ").concat(theme.elevation.modalBlurMedium, ", ").concat(theme.elevation.modalBlurHeavy)
-                : 'none' }, getModalSizeStyles(size)), modalContentCss));
+
+    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;
+          }
+          _this.container.insertBefore(tag, before);
+          _this.tags.push(tag);
+        };
+        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);
+      };
+      _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 {
+          tag.appendChild(document.createTextNode(rule));
+        }
+        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 stylisExports = {};
+    var stylis = {
+      get exports(){ return stylisExports; },
+      set exports(v){ stylisExports = v; },
+    };
+
+    (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: ""
+          };
+        }
+        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;
+              }
+            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 += "/";
+              }
+              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);
+                  }
+              }
+              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;
+                      }
+                  }
+                });
+              });
+          }
+        }
+        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 getModalStyles = function (_a) {
-        var theme = _a.theme; _a.size; var overflowY = _a.overflowY, placement = _a.placement, bottomMargin = _a.bottomMargin, rest = __rest(_a, ["theme", "size", "overflowY", "placement", "bottomMargin"]);
-        return (__assign({ position: 'relative', zIndex: theme.zIndex.modal, overflowY: overflowY, display: 'flex', flexDirection: 'column', margin: 'auto', height: '100%', width: '100%', justifyContent: placement === exports.ModalPlacement.BOTTOM ? 'flex-end' : exports.ModalPlacement.CENTER, alignItems: exports.ModalPlacement.CENTER, paddingBottom: placement === exports.ModalPlacement.BOTTOM ? bottomMargin || '188px' : '0' }, rest));
+    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 = '';
+        }
+      }
     };
 
-    var getBackdropStyles = function (_a) {
-        var blur = _a.blur, variant = _a.variant;
-        return ({
-            position: 'fixed',
+    /* 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:
+                  {
+                    string += key + "{" + interpolated + "}";
+                  }
+              }
+            }
+          }
+        }
+      }
+      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
+      };
+    }
+
+    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 staticBackdropStyles = ctDesignStyleManager.makeStyles(() => ({
+        root: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            background: blur ? 'rgba(26, 26, 26, 0.6);' : '',
-            backdropFilter: variant !== exports.ModalVariant.DARK && blur ? '(1px)' : 'none',
             zIndex: -1,
             inset: 0,
-        });
-    };
+        },
+    }));
+    const getBackdropDynamicStyles = ({ blur, variant }) => ({
+        backgroundColor: blur ? 'rgba(26, 26, 26, 0.6)' : '',
+        backdropFilter: variant !== exports.ModalVariant.DARK && blur ? 'blur(1px)' : 'none',
+    });
 
-    var StyledBackdrop = styled__default.default.div(function (_a) {
-        var css = _a.css, theme = _a.theme, blur = _a.blur, variant = _a.variant; __rest(_a, ["css", "theme", "blur", "variant"]);
-        return (__assign(__assign({}, getBackdropStyles({ blur: blur, theme: theme, variant: variant })), css));
+    const webStyle = css({
+        position: 'fixed',
     });
-    var Backdrop = React.forwardRef(function (_a, forwardedRef) {
-        _a.as; var children = _a.children, open = _a.open, transitionDuration = _a.transitionDuration, css = _a.css, className = _a.className, _b = _a.variant, variant = _b === void 0 ? exports.ModalVariant.NEUTRAL : _b, rest = __rest(_a, ["as", "children", "open", "transitionDuration", "css", "className", "variant"]);
-        var theme = ctDesignTheme.useTheme();
-        return (jsxRuntime.jsx(ctDesignTransition.Transition, __assign({ in: open, timeout: transitionDuration, type: 'fade' }, { children: jsxRuntime.jsx(StyledBackdrop, __assign({ ref: forwardedRef, css: css, theme: theme, className: className, variant: variant }, rest, { children: children })) })));
+    const Backdrop = React.forwardRef((_a, forwardedRef) => {
+        var _b;
+        var { children, open, transitionDuration, styleConfig, blur, variant = exports.ModalVariant.NEUTRAL } = _a, rest = __rest(_a, ["children", "open", "transitionDuration", "styleConfig", "blur", "variant"]);
+        const dynamicStyles = ctDesignStyleManager.useStyles(() => ({ root: getBackdropDynamicStyles({ blur, variant }) }), [blur, variant]);
+        const className = ctDesignStyleManager.useWebMergeStyles([staticBackdropStyles.root, dynamicStyles.root, webStyle, ...((_b = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) !== null && _b !== void 0 ? _b : [])], [dynamicStyles.root, styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root]);
+        return (jsxRuntime.jsx(ctDesignTransition.Transition, { in: open, timeout: transitionDuration, type: 'fade', children: jsxRuntime.jsx("div", Object.assign({ ref: forwardedRef, className: className }, rest, { children: children })) }));
     });
+    Backdrop.displayName = 'Backdrop';
 
-    var ModalContext = React.createContext({
+    const ModalContext = React.createContext({
         footerAlignment: 'end',
         hideCrossIcon: false,
-        onClose: function () { },
+        onClose: () => {
+            return;
+        },
         size: 'MEDIUM',
     });
 
-    var Handler = (function () {
-        function Handler() {
+    class Handler {
+        constructor() {
             this.parent = [];
         }
-        Handler.handleStyle = function (parentNode) {
+        static handleStyle(parentNode) {
             if (parentNode.ref) {
-                parentNode.prevStyle = __assign({}, parentNode.ref.style);
+                parentNode.prevStyle = Object.assign({}, parentNode.ref.style);
                 parentNode.ref.style.overflow = 'hidden';
             }
-        };
-        Handler.restoreStyle = function (parentNode) {
+        }
+        static restoreStyle(parentNode) {
             if (parentNode.ref && parentNode.prevStyle) {
                 parentNode.ref.style.overflow = parentNode.prevStyle.overflow || '';
             }
-        };
-        Handler.prototype.mount = function (modal, parentNode) {
-            if (parentNode === void 0) { parentNode = { ref: null }; }
+        }
+        mount(modal, parentNode = { ref: null }) {
             if (parentNode.ref) {
-                var parentIndex = this.parent.findIndex(function (node) { return node.parentNode === parentNode; });
+                const parentIndex = this.parent.findIndex((node) => node.parentNode === parentNode);
                 if (parentIndex !== -1) {
                     this.parent[parentIndex].modals.push(modal);
                 }
                 else {
                     this.parent.push({
-                        parentNode: parentNode,
+                        parentNode,
                         modals: [modal],
                     });
                 }
                 Handler.handleStyle(parentNode);
             }
             else {
-                var parent_1 = this.getTopModal();
-                parent_1.modals.push(modal);
-                Handler.handleStyle(parent_1.parentNode);
-                if (parent_1.parentNode.ref !== document.body) {
+                const parent = this.getTopModal();
+                parent.modals.push(modal);
+                Handler.handleStyle(parent.parentNode);
+                if (parent.parentNode.ref !== document.body) {
                     this.parent.push({
                         parentNode: modal,
                         modals: [],
                     });
                 }
                 else {
-                    this.parent.push(parent_1);
+                    this.parent.push(parent);
                 }
             }
-        };
-        Handler.prototype.getTopModal = function () {
+        }
+        getTopModal() {
             if (this.parent.length) {
                 return this.parent[this.parent.length - 1];
             }
             else {
                 return { parentNode: { ref: document.body, prevStyle: document.body.style }, modals: [] };
             }
-        };
-        Handler.prototype.remove = function (modal) {
-            var parentNode = this.parent.find(function (node) { return node.modals.find(function (_modal) { return _modal.ref === modal.ref; }); });
+        }
+        remove(modal) {
+            const parentNode = this.parent.find((node) => node.modals.find((_modal) => _modal.ref === modal.ref));
             if (parentNode) {
                 Handler.restoreStyle(parentNode.parentNode);
             }
-        };
-        return Handler;
-    }());
+        }
+    }
 
-    var StyledModal = styled__default.default.div(function (_a) {
-        var theme = _a.theme, _b = _a.size, size = _b === void 0 ? 'MEDIUM' : _b, _c = _a.overflowY, overflowY = _c === void 0 ? 'auto' : _c, _d = _a.styledModalWrapperCss, styledModalWrapperCss = _d === void 0 ? {} : _d, _e = _a.css, css = _e === void 0 ? {} : _e, _f = _a.placement, placement = _f === void 0 ? exports.ModalPlacement.CENTER : _f, bottomMargin = _a.bottomMargin;
-        return getModalStyles(__assign(__assign(__assign({ theme: theme, size: size, overflowY: overflowY }, styledModalWrapperCss), { placement: placement, bottomMargin: bottomMargin }), css));
-    });
-    var handler = new Handler();
-    var DEFAULT_ANIMATION_TIME = 350;
-    var Modal = React.forwardRef(function (_a, forwardedRef) {
-        var as = _a.as, children = _a.children, _b = _a.insidePortal, insidePortal = _b === void 0 ? true : _b, _c = _a.open, open = _c === void 0 ? false : _c, onClose = _a.onClose, onKeyDown = _a.onKeyDown, hideCrossIcon = _a.hideCrossIcon, footerAlignment = _a.footerAlignment, _d = _a.size, size = _d === void 0 ? 'MEDIUM' : _d, _e = _a.allowBackdropClose, allowBackdropClose = _e === void 0 ? true : _e; _a.width; var _f = _a.blur, blur = _f === void 0 ? true : _f, backDropComponent = _a.backDropComponent, _g = _a.animationDuration, animationDuration = _g === void 0 ? DEFAULT_ANIMATION_TIME : _g, _h = _a.overflowY, overflowY = _h === void 0 ? 'auto' : _h, styledModalWrapperCss = _a.styledModalWrapperCss, _j = _a.placement, placement = _j === void 0 ? 'center' : _j, bottomMargin = _a.bottomMargin, modalContentCss = _a.modalContentCss, variant = _a.variant, _k = _a.styleConfig, styleConfig = _k === void 0 ? {} : _k, rest = __rest(_a, ["as", "children", "insidePortal", "open", "onClose", "onKeyDown", "hideCrossIcon", "footerAlignment", "size", "allowBackdropClose", "width", "blur", "backDropComponent", "animationDuration", "overflowY", "styledModalWrapperCss", "placement", "bottomMargin", "modalContentCss", "variant", "styleConfig"]);
-        var theme = ctDesignTheme.useTheme();
-        var backdrop = styleConfig.backdrop, childrenContainer = styleConfig.childrenContainer, modalContainer = styleConfig.modalContainer, root = styleConfig.root;
-        var modalRef = React.useRef(null);
-        var containerRef = React.useRef({});
-        var _l = React.useState(open), isOpen = _l[0], setIsOpen = _l[1];
-        var handleRef = useMergeRefs__default.default(forwardedRef, modalRef);
-        React.useLayoutEffect(function () {
-            var timeoutId = null;
+    const staticModalStyles = ctDesignStyleManager.makeStyles(() => ({
+        modalContainer: {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            margin: 'auto',
+            height: '100%',
+            width: '100%',
+            alignItems: 'center',
+        },
+        outerContainer: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+        },
+    }));
+    const handler = new Handler();
+    const DEFAULT_ANIMATION_TIME = 350;
+    const Modal = React.forwardRef((_a, forwardedRef) => {
+        var { children, insidePortal = true, open = false, onClose, onKeyDown, hideCrossIcon, footerAlignment, size = 'MEDIUM', allowBackdropClose = true, blur = true, backDropComponent, animationDuration = DEFAULT_ANIMATION_TIME, placement = 'center', bottomMargin, variant, styleConfig = {} } = _a, rest = __rest(_a, ["children", "insidePortal", "open", "onClose", "onKeyDown", "hideCrossIcon", "footerAlignment", "size", "allowBackdropClose", "blur", "backDropComponent", "animationDuration", "placement", "bottomMargin", "variant", "styleConfig"]);
+        const { backdropStyles = [], modalContentStyles = [], root: rootStyles = [] } = styleConfig;
+        const overflowY = 'auto';
+        const isFullScreen = size === exports.ModalSize.FULL_SCREEN;
+        const dynamicStyles = ctDesignStyleManager.useStyles((theme) => ({
+            modalContainer: {
+                position: 'relative',
+                zIndex: theme.zIndex.modal,
+                overflowY,
+                display: 'flex',
+                flexDirection: 'column',
+                margin: 'auto',
+                height: '100%',
+                width: '100%',
+                justifyContent: placement === exports.ModalPlacement.BOTTOM ? 'flex-end' : exports.ModalPlacement.CENTER,
+                alignItems: exports.ModalPlacement.CENTER,
+                paddingBottom: placement === exports.ModalPlacement.BOTTOM ? bottomMargin || 188 : 0,
+            },
+            outerContainer: Object.assign({ zIndex: theme.zIndex.modal }, (isFullScreen ? { height: '100vh', width: '100vw' } : {})),
+            childContainer: {
+                boxSizing: 'content-box',
+                borderRadius: size === exports.ModalSize.FULL_SCREEN ? 0 : theme.spacing['3'],
+                borderBottomLeftRadius: size === exports.ModalSize.FULL_SCREEN ? 0 : theme.spacing['3'],
+                borderBottomRightRadius: size === exports.ModalSize.FULL_SCREEN ? 0 : theme.spacing['3'],
+                backgroundColor: variant === exports.ModalVariant.DARK ? theme.color.background.defaultDarkest : theme.color.background.neutral,
+                overflowY,
+                maxHeight: size === exports.ModalSize.FULL_SCREEN
+                    ? '100vh'
+                    : `calc(100vh - 64px)`,
+                boxShadow: blur
+                    ? `${theme.elevation.modalBlurLight}, ${theme.elevation.modalBlurMedium}, ${theme.elevation.modalBlurHeavy}`
+                    : 'none',
+            },
+        }), [size, overflowY, placement, bottomMargin, isFullScreen, blur, variant]);
+        const webDynamicStyles = React.useMemo(() => {
+            const styles = getModalSizeStyles(size);
+            return css(styles);
+        }, [size]);
+        const modalContainerClass = ctDesignStyleManager.useWebMergeStyles([staticModalStyles.modalContainer, dynamicStyles.modalContainer, webDynamicStyles, ...rootStyles], [dynamicStyles.modalContainer, rootStyles, webDynamicStyles]);
+        const modalRef = React.useRef(null);
+        const containerRef = React.useRef({});
+        const [isOpen, setIsOpen] = React.useState(open);
+        const handleRef = useMergeRefs__default.default(forwardedRef, modalRef);
+        React.useLayoutEffect(() => {
+            let timeoutId = null;
             if (!open) {
-                timeoutId = setTimeout(function () { return setIsOpen(false); }, animationDuration);
+                timeoutId = setTimeout(() => setIsOpen(false), animationDuration);
             }
             else {
                 setIsOpen(true);
             }
-            return function () {
+            return () => {
                 timeoutId && clearTimeout(timeoutId);
             };
         }, [open, animationDuration]);
-        React.useEffect(function () {
+        React.useEffect(() => {
             if (modalRef.current) {
                 modalRef.current.scrollTop = 0;
             }
@@ -249,22 +1941,22 @@
                 containerRef.current.modalRef = modalRef.current;
                 handler.mount({ ref: containerRef.current.modalRef });
             }
-            return function () {
+            return () => {
                 if (open) {
                     handler.remove({ ref: containerRef.current.modalRef || null });
                     containerRef.current.modalRef = modalRef.current;
                 }
             };
         }, [open]);
-        var handleBackdropClick = function (event) {
+        const handleBackdropClick = (event) => {
             if (event.target !== event.currentTarget) {
                 return;
             }
             if (allowBackdropClose && onClose) {
-                onClose(event);
+                onClose();
             }
         };
-        var handleKeyDown = function (event) {
+        const handleKeyDown = (event) => {
             if (onKeyDown) {
                 onKeyDown(event);
             }
@@ -273,82 +1965,131 @@
             }
             event.stopPropagation();
             if (onClose) {
-                onClose(event);
+                onClose();
             }
         };
         if (!isOpen || !React__default.default.isValidElement(children)) {
             return null;
         }
-        var fullScreenStyle = size === exports.ModalSize.FULL_SCREEN ? { height: '100vh', width: '100vw' } : {};
-        return (jsxRuntime.jsx(ctDesignPortal.Portal, __assign({ disablePortal: !insidePortal }, { children: jsxRuntime.jsx(ctDesignFocusLock.FocusLock, { children: jsxRuntime.jsx(ctDesignContainer.Container, __assign({ position: 'fixed', zIndex: theme.zIndex.modal, css: __assign({ inset: 0 }, fullScreenStyle) }, root, rest, { children: jsxRuntime.jsxs(StyledModal, __assign({ size: size, as: as, theme: theme, overflowY: overflowY, onKeyDown: handleKeyDown, ref: handleRef, styledModalWrapperCss: styledModalWrapperCss, placement: placement, bottomMargin: bottomMargin }, modalContainer, { children: [backDropComponent || (jsxRuntime.jsx(Backdrop, __assign({ open: open, blur: blur, transitionDuration: 350, onClick: handleBackdropClick, variant: variant }, backdrop))), jsxRuntime.jsx(ctDesignTransition.Transition, __assign({ type: size === exports.ModalSize.FULL_SCREEN ? 'slide' : 'fade', slideDirection: 'up', in: open, timeout: animationDuration }, { children: jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: childrenContainer === null || childrenContainer === void 0 ? void 0 : childrenContainer.className, css: getModalChildContainerStyle({
-                                        theme: theme,
-                                        size: size,
-                                        blur: blur,
-                                        overflowY: overflowY,
-                                        modalContentCss: (childrenContainer === null || childrenContainer === void 0 ? void 0 : childrenContainer.css) || modalContentCss,
-                                        variant: variant,
-                                    }) }, { children: jsxRuntime.jsx(ModalContext.Provider, __assign({ value: { footerAlignment: footerAlignment, hideCrossIcon: hideCrossIcon, onClose: onClose, size: size } }, { children: React__default.default.cloneElement(children, __assign({ onClose: onClose }, children.props)) })) })) }))] })) })) }) })));
+        const modalElement = (jsxRuntime.jsx(ctDesignFocusLock.FocusLock, { children: jsxRuntime.jsx(ctDesignContainer.Container, Object.assign({ styleConfig: {
+                    root: [staticModalStyles.outerContainer, dynamicStyles.outerContainer],
+                } }, rest, { children: jsxRuntime.jsxs("div", { className: modalContainerClass, onKeyDown: handleKeyDown, ref: handleRef, children: [backDropComponent || (jsxRuntime.jsx(Backdrop, { open: open, blur: blur, transitionDuration: 350, onClick: handleBackdropClick, variant: variant, styleConfig: { root: backdropStyles } })), jsxRuntime.jsx(ctDesignTransition.Transition, { type: isFullScreen ? 'slide' : 'fade', slideDirection: 'up', in: open, timeout: animationDuration, children: jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
+                                    root: [dynamicStyles.childContainer, ...modalContentStyles],
+                                }, children: jsxRuntime.jsx(ModalContext.Provider, { value: { footerAlignment, hideCrossIcon, onClose, size }, children: React__default.default.cloneElement(children, Object.assign(Object.assign({}, children.props), { onClose })) }) }) })] }) })) }));
+        if (insidePortal) {
+            return jsxRuntime.jsx(ctDesignPortal.Portal, { id: 'global_modal', children: modalElement });
+        }
+        return modalElement;
     });
+    Modal.displayName = 'Modal';
 
-    var ModalAction = function (_a) {
-        var children = _a.children, css = _a.css, className = _a.className;
-        var _b = React.useContext(ModalContext).footerAlignment, footerAlignment = _b === void 0 ? 'end' : _b;
-        var alignment = {
-            start: 'flex-start',
-            end: 'flex-end',
-            center: 'center',
-        }[footerAlignment];
-        var theme = ctDesignTheme.useTheme();
-        return (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ display: 'flex', justifyContent: alignment, className: className, css: __assign(__assign({}, css), { padding: '16px 24px 16px 24px', boxShadow: theme.elevation.topE1 }) }, { children: children })));
+    const alignmentMap = {
+        start: 'flex-start',
+        end: 'flex-end',
+        center: 'center',
     };
-
-    var ModalContainer = function (_a) {
-        var children = _a.children, css = _a.css, className = _a.className;
-        var size = React.useContext(ModalContext).size;
-        return (jsxRuntime.jsx(ctDesignBox.Box, __assign({ boxSize: 'zero', css: __assign({ maxHeight: size === 'FULL_SCREEN' ? '100%' : 'calc(100vh - 128px)', overflowY: 'auto', height: size === 'FULL_SCREEN' ? '100%' : undefined }, css), className: className }, { children: children })));
+    const ModalAction = ({ children, styleConfig }) => {
+        var _a;
+        const { footerAlignment = 'end' } = React.useContext(ModalContext);
+        const rootStyles = ctDesignStyleManager.useStyles((theme) => ({
+            root: {
+                display: 'flex',
+                justifyContent: alignmentMap[footerAlignment],
+                paddingTop: theme.spacing[6],
+                paddingBottom: theme.spacing[6],
+                paddingLeft: theme.spacing[4],
+                paddingRight: theme.spacing[4],
+                boxShadow: theme.elevation.topE1,
+            },
+        }), [footerAlignment]);
+        return jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [rootStyles.root, ...((_a = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) !== null && _a !== void 0 ? _a : [])] }, children: children });
     };
 
-    var ModalContent = function (_a) {
-        var children = _a.children, css = _a.css, _b = _a.styleConfig, styleConfig = _b === void 0 ? {} : _b;
-        var innerBox = styleConfig.innerBox, root = styleConfig.root;
-        return (jsxRuntime.jsx(ctDesignBox.Box, __assign({ boxSize: 'zero', className: root === null || root === void 0 ? void 0 : root.className, css: __assign({ overflowY: 'auto', flex: '1 1 auto' }, ((root === null || root === void 0 ? void 0 : root.css) || css)) }, { children: jsxRuntime.jsx(ctDesignBox.Box, __assign({ boxSize: 'xLarge', className: innerBox === null || innerBox === void 0 ? void 0 : innerBox.className, css: __assign({ padding: '16px 24px', width: '100%' }, (innerBox === null || innerBox === void 0 ? void 0 : innerBox.css)) }, { children: children })) })));
+    const ModalContainer = ({ children, styleConfig }) => {
+        var _a;
+        const { size } = React.useContext(ModalContext);
+        const isFullScreen = size === exports.ModalSize.FULL_SCREEN;
+        const rootStyles = ctDesignStyleManager.useStyles(() => ({
+            root: {
+                maxHeight: isFullScreen ? '100%' : 'calc(100vh - 128px)',
+                overflowY: 'auto',
+                height: isFullScreen ? '100%' : undefined,
+            },
+        }), [isFullScreen]);
+        return (jsxRuntime.jsx(ctDesignBox.Box, { boxSize: 'zero', styleConfig: { root: [rootStyles.root, ...((_a = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) !== null && _a !== void 0 ? _a : [])] }, children: children }));
     };
 
-    var ModalTitle = function (_a) {
-        var children = _a.children, _b = _a.styleConfig, styleConfig = _b === void 0 ? {} : _b;
-        var theme = ctDesignTheme.useTheme();
-        var root = styleConfig.root, childrenTypography = styleConfig.childrenTypography, iconContainer = styleConfig.iconContainer, crossIcon = styleConfig.crossIcon;
-        var _c = React.useContext(ModalContext), hideCrossIcon = _c.hideCrossIcon, onClose = _c.onClose, size = _c.size;
-        var padding = size === 'FULL_SCREEN' ? '22px 28px' : '24px 24px 16px 24px';
-        return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ display: 'flex', justifyContent: 'space-between', className: root === null || root === void 0 ? void 0 : root.className, css: __assign({ padding: padding, boxShadow: theme.elevation.bottomE1 }, root === null || root === void 0 ? void 0 : root.css) }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'HM2', styleConfig: childrenTypography }, { children: children })), !hideCrossIcon && (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ cursor: 'pointer', onClick: onClose, marginTop: theme.spacing[1], marginRight: theme.spacing[1], className: iconContainer === null || iconContainer === void 0 ? void 0 : iconContainer.className, css: iconContainer === null || iconContainer === void 0 ? void 0 : iconContainer.css }, { children: jsxRuntime.jsx(ctDesignIcons.Cross, __assign({ height: 24, width: 24, crossColor: theme.color.text.heading }, crossIcon)) })))] })));
+    const ModalContent = ({ children, styleConfig }) => {
+        var _a, _b;
+        const staticStyles = ctDesignStyleManager.useStyles((theme) => ({
+            root: {
+                overflowY: 'auto',
+                flex: 1,
+            },
+            innerBox: {
+                paddingTop: theme.spacing[6],
+                paddingBottom: theme.spacing[6],
+                paddingLeft: theme.spacing[4],
+                paddingRight: theme.spacing[4],
+                width: '100%',
+            },
+        }), []);
+        return (jsxRuntime.jsx(ctDesignBox.Box, { boxSize: 'zero', styleConfig: { root: [staticStyles.root, ...((_a = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) !== null && _a !== void 0 ? _a : [])] }, children: jsxRuntime.jsx(ctDesignBox.Box, { boxSize: 'xLarge', styleConfig: { root: [staticStyles.innerBox, ...((_b = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.innerBox) !== null && _b !== void 0 ? _b : [])] }, children: children }) }));
     };
 
-    var getCloseButtonStyle = function (_a) {
-        var theme = _a.theme, _b = _a.isLeft, isLeft = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? 'neutral' : _c, isCenter = _a.isCenter, isTop = _a.isTop;
-        return (__assign({ position: 'absolute', right: isCenter ? '50%' : isLeft ? 'unset' : 0, transform: isCenter ? 'translateX(50%)' : 'none', background: variant === exports.ModalVariant.DARK ? theme.color.background.primary : theme.color.background.neutral, height: '32px', width: '32px', display: 'flex', alignItems: 'center', padding: theme.spacing[1], borderRadius: '40px', cursor: 'pointer' }, (isTop ? { top: '-42px' } : { bottom: '-42px' })));
+    const ModalTitle = ({ children, styleConfig }) => {
+        var _a, _b;
+        const theme = ctDesignTheme.useTheme();
+        const { hideCrossIcon, onClose, size } = React.useContext(ModalContext);
+        const isFullScreen = size === exports.ModalSize.FULL_SCREEN;
+        const rootStyles = ctDesignStyleManager.useStyles((t) => ({
+            root: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                paddingTop: isFullScreen ? t.spacing[5] : t.spacing[6],
+                paddingBottom: isFullScreen ? t.spacing[5] : t.spacing[4],
+                paddingLeft: isFullScreen ? t.spacing[7] : t.spacing[6],
+                paddingRight: isFullScreen ? t.spacing[7] : t.spacing[6],
+                boxShadow: t.elevation.bottomE1,
+            },
+            iconContainer: {
+                cursor: 'pointer',
+                marginTop: t.spacing[1],
+                marginRight: t.spacing[1],
+            },
+        }), [isFullScreen]);
+        return (jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: { root: [rootStyles.root, ...((_a = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) !== null && _a !== void 0 ? _a : [])] }, children: [jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'HM2', styleConfig: styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.childrenTypography, children: children }), !hideCrossIcon && (jsxRuntime.jsx(ctDesignContainer.Container, { onClick: onClose, styleConfig: {
+                        root: [rootStyles.iconContainer, ...((_b = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.iconContainer) !== null && _b !== void 0 ? _b : [])],
+                    }, children: jsxRuntime.jsx(ctDesignIcons.Cross, Object.assign({ height: 24, width: 24, crossColor: theme.color.text.heading }, styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.crossIcon)) }))] }));
     };
 
-    var getCloseIcon = function (isBack, variant) {
-        if (isBack === void 0) { isBack = false; }
-        if (variant === void 0) { variant = exports.ModalVariant.NEUTRAL; }
+    const staticStyles = ctDesignStyleManager.makeStyles(() => ({
+        root: {
+            position: 'relative',
+        },
+    }));
+    const getCloseIcon = (isBack = false, variant = exports.ModalVariant.NEUTRAL) => {
         if (isBack) {
             return jsxRuntime.jsx(ctDesignIcons.ModalBack, {});
         }
         return variant === exports.ModalVariant.DARK ? (jsxRuntime.jsx(ctDesignIcons.Cross, { height: 24, width: 24, crossColor: 'rgba(255, 255, 255, 1)' })) : (jsxRuntime.jsx(ctDesignIcons.Cross, { height: 24, width: 24, crossColor: '#1A1A1A' }));
     };
-    var ModalWithCloseOverlay = React.forwardRef(function (props, forwardedRef) {
-        var _a = props || {}, wrapperCss = _a.wrapperCss, isBack = _a.isBack, children = _a.children, _b = _a.variant, variant = _b === void 0 ? exports.ModalVariant.NEUTRAL : _b, isCenter = _a.isCenter, _c = _a.isTop, isTop = _c === void 0 ? true : _c, rest = __rest(_a, ["wrapperCss", "isBack", "children", "variant", "isCenter", "isTop"]);
-        var onClose = rest.onClose;
-        var theme = ctDesignTheme.useTheme();
-        var closeButtonStyles = getCloseButtonStyle({ theme: theme, isLeft: isBack, variant: variant, isCenter: isCenter, isTop: isTop });
-        var CloseIcon = getCloseIcon(isBack, variant);
-        var onCloseClick = function (e) {
-            onClose(e);
-        };
-        return (jsxRuntime.jsx(Modal, __assign({ ref: forwardedRef, blur: true, size: 'NONE', insidePortal: true, variant: variant, overflowY: 'unset' }, rest, { children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'p-relative' }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({ css: __assign({}, wrapperCss) }, { children: jsxRuntime.jsx(ctDesignContainer.Container, __assign({ css: __assign({}, closeButtonStyles), onClick: onCloseClick }, { children: CloseIcon })) })), children] })) })));
+    const ModalWithCloseOverlay = React.forwardRef((props, forwardedRef) => {
+        var _a, _b, _c;
+        const _d = props || {}, { isBack = false, isCenter, isTop = true, variant = exports.ModalVariant.NEUTRAL, children, styleConfig, wrapperStyles } = _d, rest = __rest(_d, ["isBack", "isCenter", "isTop", "variant", "children", "styleConfig", "wrapperStyles"]);
+        const { onClose } = rest;
+        const closeButtonStyles = ctDesignStyleManager.useStyles((theme) => ({
+            root: Object.assign({ position: 'absolute', right: (isCenter ? '50%' : isBack ? 'unset' : 0), transform: isCenter ? 'translateX(50%)' : 'none', backgroundColor: variant === exports.ModalVariant.DARK ? theme.color.background.defaultDarkest : theme.color.background.neutral, height: 32, width: 32, display: 'flex', alignItems: 'center', padding: theme.spacing[1], borderRadius: 40, cursor: 'pointer' }, (isTop ? { top: -42 } : { bottom: -42 })),
+        }), [isBack, variant, isCenter, isTop]);
+        const CloseIcon = getCloseIcon(isBack, variant);
+        return (jsxRuntime.jsx(Modal, Object.assign({ ref: forwardedRef, blur: true, size: 'NONE', insidePortal: true, variant: variant }, rest, { children: jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: { root: [staticStyles.root, ...((_a = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) !== null && _a !== void 0 ? _a : [])] }, children: [jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [...(wrapperStyles !== null && wrapperStyles !== void 0 ? wrapperStyles : []), ...((_b = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.wrapper) !== null && _b !== void 0 ? _b : [])] }, children: jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [closeButtonStyles.root, ...((_c = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.closeButton) !== null && _c !== void 0 ? _c : [])] }, onClick: () => onClose === null || onClose === void 0 ? void 0 : onClose(), children: CloseIcon }) }), children] }) })));
     });
+    ModalWithCloseOverlay.displayName = 'ModalWithCloseOverlay';
+
+    const MODAL_ANIMATION_DURATION = 350;
 
     exports.Backdrop = Backdrop;
+    exports.MODAL_ANIMATION_DURATION = MODAL_ANIMATION_DURATION;
     exports.Modal = Modal;
     exports.ModalAction = ModalAction;
     exports.ModalContainer = ModalContainer;