@moda/om 19.7.2 → 19.8.0

package/dist/index.esm.js

@@ -3,1003 +3,1074 @@ import React__default, { useState, createContext, PureComponent, useRef, useEffe
 import { Link, Prompt } from 'react-router-dom';
 import require$$1, { createPortal } from 'react-dom';
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-(function (module, exports) {
-  (function (global, factory) {
-    factory() ;
-  })(commonjsGlobal, function () {
-
-    /**
-     * Applies the :focus-visible polyfill at the given scope.
-     * A scope in this case is either the top-level Document or a Shadow Root.
-     *
-     * @param {(Document|ShadowRoot)} scope
-     * @see https://github.com/WICG/focus-visible
-     */
-    function applyFocusVisiblePolyfill(scope) {
-      var hadKeyboardEvent = true;
-      var hadFocusVisibleRecently = false;
-      var hadFocusVisibleRecentlyTimeout = null;
-      var inputTypesAllowlist = {
-        text: true,
-        search: true,
-        url: true,
-        tel: true,
-        email: true,
-        password: true,
-        number: true,
-        date: true,
-        month: true,
-        week: true,
-        time: true,
-        datetime: true,
-        'datetime-local': true
-      };
+var focusVisible$1 = {exports: {}};
 
-      /**
-       * Helper function for legacy browsers and iframes which sometimes focus
-       * elements like document, body, and non-interactive SVG.
-       * @param {Element} el
-       */
-      function isValidFocusTarget(el) {
-        if (el && el !== document && el.nodeName !== 'HTML' && el.nodeName !== 'BODY' && 'classList' in el && 'contains' in el.classList) {
-          return true;
-        }
-        return false;
-      }
+var focusVisible = focusVisible$1.exports;
+var hasRequiredFocusVisible;
+function requireFocusVisible() {
+  if (hasRequiredFocusVisible) return focusVisible$1.exports;
+  hasRequiredFocusVisible = 1;
+  (function (module, exports) {
+    (function (global, factory) {
+      factory() ;
+    })(focusVisible, function () {
 
       /**
-       * Computes whether the given element should automatically trigger the
-       * `focus-visible` class being added, i.e. whether it should always match
-       * `:focus-visible` when focused.
-       * @param {Element} el
-       * @return {boolean}
+       * Applies the :focus-visible polyfill at the given scope.
+       * A scope in this case is either the top-level Document or a Shadow Root.
+       *
+       * @param {(Document|ShadowRoot)} scope
+       * @see https://github.com/WICG/focus-visible
        */
-      function focusTriggersKeyboardModality(el) {
-        var type = el.type;
-        var tagName = el.tagName;
-        if (tagName === 'INPUT' && inputTypesAllowlist[type] && !el.readOnly) {
-          return true;
-        }
-        if (tagName === 'TEXTAREA' && !el.readOnly) {
-          return true;
-        }
-        if (el.isContentEditable) {
-          return true;
-        }
-        return false;
-      }
+      function applyFocusVisiblePolyfill(scope) {
+        var hadKeyboardEvent = true;
+        var hadFocusVisibleRecently = false;
+        var hadFocusVisibleRecentlyTimeout = null;
+        var inputTypesAllowlist = {
+          text: true,
+          search: true,
+          url: true,
+          tel: true,
+          email: true,
+          password: true,
+          number: true,
+          date: true,
+          month: true,
+          week: true,
+          time: true,
+          datetime: true,
+          'datetime-local': true
+        };
 
-      /**
-       * Add the `focus-visible` class to the given element if it was not added by
-       * the author.
-       * @param {Element} el
-       */
-      function addFocusVisibleClass(el) {
-        if (el.classList.contains('focus-visible')) {
-          return;
+        /**
+         * Helper function for legacy browsers and iframes which sometimes focus
+         * elements like document, body, and non-interactive SVG.
+         * @param {Element} el
+         */
+        function isValidFocusTarget(el) {
+          if (el && el !== document && el.nodeName !== 'HTML' && el.nodeName !== 'BODY' && 'classList' in el && 'contains' in el.classList) {
+            return true;
+          }
+          return false;
         }
-        el.classList.add('focus-visible');
-        el.setAttribute('data-focus-visible-added', '');
-      }
 
-      /**
-       * Remove the `focus-visible` class from the given element if it was not
-       * originally added by the author.
-       * @param {Element} el
-       */
-      function removeFocusVisibleClass(el) {
-        if (!el.hasAttribute('data-focus-visible-added')) {
-          return;
+        /**
+         * Computes whether the given element should automatically trigger the
+         * `focus-visible` class being added, i.e. whether it should always match
+         * `:focus-visible` when focused.
+         * @param {Element} el
+         * @return {boolean}
+         */
+        function focusTriggersKeyboardModality(el) {
+          var type = el.type;
+          var tagName = el.tagName;
+          if (tagName === 'INPUT' && inputTypesAllowlist[type] && !el.readOnly) {
+            return true;
+          }
+          if (tagName === 'TEXTAREA' && !el.readOnly) {
+            return true;
+          }
+          if (el.isContentEditable) {
+            return true;
+          }
+          return false;
         }
-        el.classList.remove('focus-visible');
-        el.removeAttribute('data-focus-visible-added');
-      }
 
-      /**
-       * If the most recent user interaction was via the keyboard;
-       * and the key press did not include a meta, alt/option, or control key;
-       * then the modality is keyboard. Otherwise, the modality is not keyboard.
-       * Apply `focus-visible` to any current active element and keep track
-       * of our keyboard modality state with `hadKeyboardEvent`.
-       * @param {KeyboardEvent} e
-       */
-      function onKeyDown(e) {
-        if (e.metaKey || e.altKey || e.ctrlKey) {
-          return;
-        }
-        if (isValidFocusTarget(scope.activeElement)) {
-          addFocusVisibleClass(scope.activeElement);
+        /**
+         * Add the `focus-visible` class to the given element if it was not added by
+         * the author.
+         * @param {Element} el
+         */
+        function addFocusVisibleClass(el) {
+          if (el.classList.contains('focus-visible')) {
+            return;
+          }
+          el.classList.add('focus-visible');
+          el.setAttribute('data-focus-visible-added', '');
+        }
+
+        /**
+         * Remove the `focus-visible` class from the given element if it was not
+         * originally added by the author.
+         * @param {Element} el
+         */
+        function removeFocusVisibleClass(el) {
+          if (!el.hasAttribute('data-focus-visible-added')) {
+            return;
+          }
+          el.classList.remove('focus-visible');
+          el.removeAttribute('data-focus-visible-added');
+        }
+
+        /**
+         * If the most recent user interaction was via the keyboard;
+         * and the key press did not include a meta, alt/option, or control key;
+         * then the modality is keyboard. Otherwise, the modality is not keyboard.
+         * Apply `focus-visible` to any current active element and keep track
+         * of our keyboard modality state with `hadKeyboardEvent`.
+         * @param {KeyboardEvent} e
+         */
+        function onKeyDown(e) {
+          if (e.metaKey || e.altKey || e.ctrlKey) {
+            return;
+          }
+          if (isValidFocusTarget(scope.activeElement)) {
+            addFocusVisibleClass(scope.activeElement);
+          }
+          hadKeyboardEvent = true;
+        }
+
+        /**
+         * If at any point a user clicks with a pointing device, ensure that we change
+         * the modality away from keyboard.
+         * This avoids the situation where a user presses a key on an already focused
+         * element, and then clicks on a different element, focusing it with a
+         * pointing device, while we still think we're in keyboard modality.
+         * @param {Event} e
+         */
+        function onPointerDown(e) {
+          hadKeyboardEvent = false;
+        }
+
+        /**
+         * On `focus`, add the `focus-visible` class to the target if:
+         * - the target received focus as a result of keyboard navigation, or
+         * - the event target is an element that will likely require interaction
+         *   via the keyboard (e.g. a text box)
+         * @param {Event} e
+         */
+        function onFocus(e) {
+          // Prevent IE from focusing the document or HTML element.
+          if (!isValidFocusTarget(e.target)) {
+            return;
+          }
+          if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {
+            addFocusVisibleClass(e.target);
+          }
         }
-        hadKeyboardEvent = true;
-      }
-
-      /**
-       * If at any point a user clicks with a pointing device, ensure that we change
-       * the modality away from keyboard.
-       * This avoids the situation where a user presses a key on an already focused
-       * element, and then clicks on a different element, focusing it with a
-       * pointing device, while we still think we're in keyboard modality.
-       * @param {Event} e
-       */
-      function onPointerDown(e) {
-        hadKeyboardEvent = false;
-      }
 
-      /**
-       * On `focus`, add the `focus-visible` class to the target if:
-       * - the target received focus as a result of keyboard navigation, or
-       * - the event target is an element that will likely require interaction
-       *   via the keyboard (e.g. a text box)
-       * @param {Event} e
-       */
-      function onFocus(e) {
-        // Prevent IE from focusing the document or HTML element.
-        if (!isValidFocusTarget(e.target)) {
-          return;
-        }
-        if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {
-          addFocusVisibleClass(e.target);
+        /**
+         * On `blur`, remove the `focus-visible` class from the target.
+         * @param {Event} e
+         */
+        function onBlur(e) {
+          if (!isValidFocusTarget(e.target)) {
+            return;
+          }
+          if (e.target.classList.contains('focus-visible') || e.target.hasAttribute('data-focus-visible-added')) {
+            // To detect a tab/window switch, we look for a blur event followed
+            // rapidly by a visibility change.
+            // If we don't see a visibility change within 100ms, it's probably a
+            // regular focus change.
+            hadFocusVisibleRecently = true;
+            window.clearTimeout(hadFocusVisibleRecentlyTimeout);
+            hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
+              hadFocusVisibleRecently = false;
+            }, 100);
+            removeFocusVisibleClass(e.target);
+          }
         }
-      }
 
-      /**
-       * On `blur`, remove the `focus-visible` class from the target.
-       * @param {Event} e
-       */
-      function onBlur(e) {
-        if (!isValidFocusTarget(e.target)) {
-          return;
-        }
-        if (e.target.classList.contains('focus-visible') || e.target.hasAttribute('data-focus-visible-added')) {
-          // To detect a tab/window switch, we look for a blur event followed
-          // rapidly by a visibility change.
-          // If we don't see a visibility change within 100ms, it's probably a
-          // regular focus change.
-          hadFocusVisibleRecently = true;
-          window.clearTimeout(hadFocusVisibleRecentlyTimeout);
-          hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
-            hadFocusVisibleRecently = false;
-          }, 100);
-          removeFocusVisibleClass(e.target);
+        /**
+         * If the user changes tabs, keep track of whether or not the previously
+         * focused element had .focus-visible.
+         * @param {Event} e
+         */
+        function onVisibilityChange(e) {
+          if (document.visibilityState === 'hidden') {
+            // If the tab becomes active again, the browser will handle calling focus
+            // on the element (Safari actually calls it twice).
+            // If this tab change caused a blur on an element with focus-visible,
+            // re-apply the class when the user switches back to the tab.
+            if (hadFocusVisibleRecently) {
+              hadKeyboardEvent = true;
+            }
+            addInitialPointerMoveListeners();
+          }
         }
-      }
 
-      /**
-       * If the user changes tabs, keep track of whether or not the previously
-       * focused element had .focus-visible.
-       * @param {Event} e
-       */
-      function onVisibilityChange(e) {
-        if (document.visibilityState === 'hidden') {
-          // If the tab becomes active again, the browser will handle calling focus
-          // on the element (Safari actually calls it twice).
-          // If this tab change caused a blur on an element with focus-visible,
-          // re-apply the class when the user switches back to the tab.
-          if (hadFocusVisibleRecently) {
-            hadKeyboardEvent = true;
+        /**
+         * Add a group of listeners to detect usage of any pointing devices.
+         * These listeners will be added when the polyfill first loads, and anytime
+         * the window is blurred, so that they are active when the window regains
+         * focus.
+         */
+        function addInitialPointerMoveListeners() {
+          document.addEventListener('mousemove', onInitialPointerMove);
+          document.addEventListener('mousedown', onInitialPointerMove);
+          document.addEventListener('mouseup', onInitialPointerMove);
+          document.addEventListener('pointermove', onInitialPointerMove);
+          document.addEventListener('pointerdown', onInitialPointerMove);
+          document.addEventListener('pointerup', onInitialPointerMove);
+          document.addEventListener('touchmove', onInitialPointerMove);
+          document.addEventListener('touchstart', onInitialPointerMove);
+          document.addEventListener('touchend', onInitialPointerMove);
+        }
+        function removeInitialPointerMoveListeners() {
+          document.removeEventListener('mousemove', onInitialPointerMove);
+          document.removeEventListener('mousedown', onInitialPointerMove);
+          document.removeEventListener('mouseup', onInitialPointerMove);
+          document.removeEventListener('pointermove', onInitialPointerMove);
+          document.removeEventListener('pointerdown', onInitialPointerMove);
+          document.removeEventListener('pointerup', onInitialPointerMove);
+          document.removeEventListener('touchmove', onInitialPointerMove);
+          document.removeEventListener('touchstart', onInitialPointerMove);
+          document.removeEventListener('touchend', onInitialPointerMove);
+        }
+
+        /**
+         * When the polfyill first loads, assume the user is in keyboard modality.
+         * If any event is received from a pointing device (e.g. mouse, pointer,
+         * touch), turn off keyboard modality.
+         * This accounts for situations where focus enters the page from the URL bar.
+         * @param {Event} e
+         */
+        function onInitialPointerMove(e) {
+          // Work around a Safari quirk that fires a mousemove on <html> whenever the
+          // window blurs, even if you're tabbing out of the page. ¯\_(ツ)_/¯
+          if (e.target.nodeName && e.target.nodeName.toLowerCase() === 'html') {
+            return;
           }
-          addInitialPointerMoveListeners();
+          hadKeyboardEvent = false;
+          removeInitialPointerMoveListeners();
+        }
+
+        // For some kinds of state, we are interested in changes at the global scope
+        // only. For example, global pointer input, global key presses and global
+        // visibility change should affect the state at every scope:
+        document.addEventListener('keydown', onKeyDown, true);
+        document.addEventListener('mousedown', onPointerDown, true);
+        document.addEventListener('pointerdown', onPointerDown, true);
+        document.addEventListener('touchstart', onPointerDown, true);
+        document.addEventListener('visibilitychange', onVisibilityChange, true);
+        addInitialPointerMoveListeners();
+
+        // For focus and blur, we specifically care about state changes in the local
+        // scope. This is because focus / blur events that originate from within a
+        // shadow root are not re-dispatched from the host element if it was already
+        // the active element in its own scope:
+        scope.addEventListener('focus', onFocus, true);
+        scope.addEventListener('blur', onBlur, true);
+
+        // We detect that a node is a ShadowRoot by ensuring that it is a
+        // DocumentFragment and also has a host property. This check covers native
+        // implementation and polyfill implementation transparently. If we only cared
+        // about the native implementation, we could just check if the scope was
+        // an instance of a ShadowRoot.
+        if (scope.nodeType === Node.DOCUMENT_FRAGMENT_NODE && scope.host) {
+          // Since a ShadowRoot is a special kind of DocumentFragment, it does not
+          // have a root element to add a class to. So, we add this attribute to the
+          // host element instead:
+          scope.host.setAttribute('data-js-focus-visible', '');
+        } else if (scope.nodeType === Node.DOCUMENT_NODE) {
+          document.documentElement.classList.add('js-focus-visible');
+          document.documentElement.setAttribute('data-js-focus-visible', '');
+        }
+      }
+
+      // It is important to wrap all references to global window and document in
+      // these checks to support server-side rendering use cases
+      // @see https://github.com/WICG/focus-visible/issues/199
+      if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+        // Make the polyfill helper globally available. This can be used as a signal
+        // to interested libraries that wish to coordinate with the polyfill for e.g.,
+        // applying the polyfill to a shadow root:
+        window.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;
+
+        // Notify interested libraries of the polyfill's presence, in case the
+        // polyfill was loaded lazily:
+        var event;
+        try {
+          event = new CustomEvent('focus-visible-polyfill-ready');
+        } catch (error) {
+          // IE11 does not support using CustomEvent as a constructor directly:
+          event = document.createEvent('CustomEvent');
+          event.initCustomEvent('focus-visible-polyfill-ready', false, false, {});
         }
+        window.dispatchEvent(event);
       }
-
-      /**
-       * Add a group of listeners to detect usage of any pointing devices.
-       * These listeners will be added when the polyfill first loads, and anytime
-       * the window is blurred, so that they are active when the window regains
-       * focus.
-       */
-      function addInitialPointerMoveListeners() {
-        document.addEventListener('mousemove', onInitialPointerMove);
-        document.addEventListener('mousedown', onInitialPointerMove);
-        document.addEventListener('mouseup', onInitialPointerMove);
-        document.addEventListener('pointermove', onInitialPointerMove);
-        document.addEventListener('pointerdown', onInitialPointerMove);
-        document.addEventListener('pointerup', onInitialPointerMove);
-        document.addEventListener('touchmove', onInitialPointerMove);
-        document.addEventListener('touchstart', onInitialPointerMove);
-        document.addEventListener('touchend', onInitialPointerMove);
-      }
-      function removeInitialPointerMoveListeners() {
-        document.removeEventListener('mousemove', onInitialPointerMove);
-        document.removeEventListener('mousedown', onInitialPointerMove);
-        document.removeEventListener('mouseup', onInitialPointerMove);
-        document.removeEventListener('pointermove', onInitialPointerMove);
-        document.removeEventListener('pointerdown', onInitialPointerMove);
-        document.removeEventListener('pointerup', onInitialPointerMove);
-        document.removeEventListener('touchmove', onInitialPointerMove);
-        document.removeEventListener('touchstart', onInitialPointerMove);
-        document.removeEventListener('touchend', onInitialPointerMove);
+      if (typeof document !== 'undefined') {
+        // Apply the polyfill to the global document, so that no JavaScript
+        // coordination is required to use the polyfill in the top-level document:
+        applyFocusVisiblePolyfill(document);
       }
+    });
+  })();
+  return focusVisible$1.exports;
+}
 
-      /**
-       * When the polfyill first loads, assume the user is in keyboard modality.
-       * If any event is received from a pointing device (e.g. mouse, pointer,
-       * touch), turn off keyboard modality.
-       * This accounts for situations where focus enters the page from the URL bar.
-       * @param {Event} e
-       */
-      function onInitialPointerMove(e) {
-        // Work around a Safari quirk that fires a mousemove on <html> whenever the
-        // window blurs, even if you're tabbing out of the page. ¯\_(ツ)_/¯
-        if (e.target.nodeName && e.target.nodeName.toLowerCase() === 'html') {
-          return;
-        }
-        hadKeyboardEvent = false;
-        removeInitialPointerMoveListeners();
-      }
-
-      // For some kinds of state, we are interested in changes at the global scope
-      // only. For example, global pointer input, global key presses and global
-      // visibility change should affect the state at every scope:
-      document.addEventListener('keydown', onKeyDown, true);
-      document.addEventListener('mousedown', onPointerDown, true);
-      document.addEventListener('pointerdown', onPointerDown, true);
-      document.addEventListener('touchstart', onPointerDown, true);
-      document.addEventListener('visibilitychange', onVisibilityChange, true);
-      addInitialPointerMoveListeners();
-
-      // For focus and blur, we specifically care about state changes in the local
-      // scope. This is because focus / blur events that originate from within a
-      // shadow root are not re-dispatched from the host element if it was already
-      // the active element in its own scope:
-      scope.addEventListener('focus', onFocus, true);
-      scope.addEventListener('blur', onBlur, true);
-
-      // We detect that a node is a ShadowRoot by ensuring that it is a
-      // DocumentFragment and also has a host property. This check covers native
-      // implementation and polyfill implementation transparently. If we only cared
-      // about the native implementation, we could just check if the scope was
-      // an instance of a ShadowRoot.
-      if (scope.nodeType === Node.DOCUMENT_FRAGMENT_NODE && scope.host) {
-        // Since a ShadowRoot is a special kind of DocumentFragment, it does not
-        // have a root element to add a class to. So, we add this attribute to the
-        // host element instead:
-        scope.host.setAttribute('data-js-focus-visible', '');
-      } else if (scope.nodeType === Node.DOCUMENT_NODE) {
-        document.documentElement.classList.add('js-focus-visible');
-        document.documentElement.setAttribute('data-js-focus-visible', '');
-      }
-    }
-
-    // It is important to wrap all references to global window and document in
-    // these checks to support server-side rendering use cases
-    // @see https://github.com/WICG/focus-visible/issues/199
-    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
-      // Make the polyfill helper globally available. This can be used as a signal
-      // to interested libraries that wish to coordinate with the polyfill for e.g.,
-      // applying the polyfill to a shadow root:
-      window.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;
-
-      // Notify interested libraries of the polyfill's presence, in case the
-      // polyfill was loaded lazily:
-      var event;
-      try {
-        event = new CustomEvent('focus-visible-polyfill-ready');
-      } catch (error) {
-        // IE11 does not support using CustomEvent as a constructor directly:
-        event = document.createEvent('CustomEvent');
-        event.initCustomEvent('focus-visible-polyfill-ready', false, false, {});
-      }
-      window.dispatchEvent(event);
-    }
-    if (typeof document !== 'undefined') {
-      // Apply the polyfill to the global document, so that no JavaScript
-      // coordination is required to use the polyfill in the top-level document:
-      applyFocusVisiblePolyfill(document);
-    }
-  });
-})();
+requireFocusVisible();
 
 var dist$4 = {};
 
 var colors = {};
 
-Object.defineProperty(colors, "__esModule", {
-  value: true
-});
-colors.colors = void 0;
-// THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
-colors.colors = {
-  "all": {
-    "coal": "rgb(0, 0, 0)",
-    "ink": "rgb(25, 26, 27)",
-    "cement": "rgb(101, 101, 102)",
-    "fog": "rgb(151, 152, 153)",
-    "elephant": "rgb(202, 203, 204)",
-    "noise": "rgb(242, 243, 245)",
-    "snow": "rgb(255, 255, 255)",
-    "strawberry": "rgb(250, 222, 221)",
-    "code-red": "rgb(238, 7, 0)",
-    "mint": "rgb(227, 251, 226)",
-    "money-good": "rgb(4, 108, 0)",
-    "fuchsia": "rgb(196, 76, 176)",
-    "dark-fuchsia": "rgb(180, 60, 160)",
-    "teal": "rgb(0, 111, 98)",
-    "ivory": "rgb(242, 233, 219)",
-    "klein-blue": "rgb(38, 48, 120)",
-    "persian-blue": "rgb(30, 34, 170)",
-    "brick": "rgb(147, 58, 32)",
-    "goldenrod": "rgb(186, 145, 46)",
-    "seafoam": "rgb(177, 191, 170)",
-    "coral": "rgb(255, 146, 121)",
-    "burnt-orange": "rgb(213, 107, 39)",
-    "lilac": "rgb(215, 179, 208)",
-    "forest-green": "rgb(0, 55, 40)",
-    "cream": "rgb(248, 245, 238)",
-    "cornflower-blue": "rgb(127, 154, 207)",
-    "moss-green": "rgb(104, 104, 59)",
-    "blush": "rgb(243, 222, 217)",
-    "canary": "rgb(240, 246, 89)"
-  },
-  "ui": {
-    "strawberry": "rgb(250, 222, 221)",
-    "code-red": "rgb(238, 7, 0)",
-    "mint": "rgb(227, 251, 226)",
-    "money-good": "rgb(4, 108, 0)",
-    "fuchsia": "rgb(196, 76, 176)",
-    "dark-fuchsia": "rgb(180, 60, 160)",
-    "teal": "rgb(0, 111, 98)",
-    "ivory": "rgb(242, 233, 219)"
-  },
-  "global": {
-    "klein-blue": "rgb(38, 48, 120)",
-    "persian-blue": "rgb(30, 34, 170)",
-    "brick": "rgb(147, 58, 32)",
-    "goldenrod": "rgb(186, 145, 46)",
-    "seafoam": "rgb(177, 191, 170)",
-    "coral": "rgb(255, 146, 121)"
-  },
-  "mens": {
-    "cornflower-blue": "rgb(127, 154, 207)",
-    "moss-green": "rgb(104, 104, 59)",
-    "blush": "rgb(243, 222, 217)",
-    "noise": "rgb(242, 243, 245)",
-    "canary": "rgb(240, 246, 89)"
-  },
-  "womens": {
-    "burnt-orange": "rgb(213, 107, 39)",
-    "lilac": "rgb(215, 179, 208)",
-    "forest-green": "rgb(0, 55, 40)",
-    "cream": "rgb(248, 245, 238)",
-    "fuchsia": "rgb(196, 76, 176)",
-    "dark-fuchsia": "rgb(180, 60, 160)"
-  },
-  "greyscale": {
-    "coal": "rgb(0, 0, 0)",
-    "ink": "rgb(25, 26, 27)",
-    "cement": "rgb(101, 101, 102)",
-    "fog": "rgb(151, 152, 153)",
-    "elephant": "rgb(202, 203, 204)",
-    "noise": "rgb(242, 243, 245)",
-    "snow": "rgb(255, 255, 255)"
-  }
-};
-
-var typography = {};
-
-Object.defineProperty(typography, "__esModule", {
-  value: true
-});
-typography.typography = void 0;
-// THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
-typography.typography = {
-  "fonts": {
-    "sans": ["Moda Operandi Sans", "Arial", "sans-serif"],
-    "serif": ["Moda Operandi Serif", "Times New Roman", "Times", "serif"],
-    "code": ["Menlo", "Monaco", "Consolas", "Courier New", "monospace"]
-  },
-  "line-heights": [1.1, 1.2, 1.4, 1.6],
-  "letter-spacing": [0, "0.02em", "0.04em", "0.1em"],
-  "font-scale": ["0.75rem", "0.8125rem", "1rem", "1.25rem", "1.5rem", "2rem", "3rem", "3.75rem", "6rem"],
-  "root-font-size": "16px",
-  "text-treatments": {
-    "display": {
-      "font-size": "6rem",
-      "line-height": 1.1,
-      "letter-spacing": 0
-    },
-    "h1": {
-      "font-size": "3.75rem",
-      "line-height": 1.2,
-      "letter-spacing": 0
-    },
-    "h2": {
-      "font-size": "3rem",
-      "line-height": 1.1,
-      "letter-spacing": 0
-    },
-    "h3": {
-      "font-size": "2rem",
-      "line-height": 1.2,
-      "letter-spacing": 0
-    },
-    "h4": {
-      "font-size": "1.5rem",
-      "line-height": 1.4,
-      "letter-spacing": 0
+var hasRequiredColors;
+function requireColors() {
+  if (hasRequiredColors) return colors;
+  hasRequiredColors = 1;
+  Object.defineProperty(colors, "__esModule", {
+    value: true
+  });
+  colors.colors = void 0;
+  // THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
+  colors.colors = {
+    "all": {
+      "coal": "rgb(0, 0, 0)",
+      "ink": "rgb(25, 26, 27)",
+      "cement": "rgb(101, 101, 102)",
+      "fog": "rgb(151, 152, 153)",
+      "elephant": "rgb(202, 203, 204)",
+      "noise": "rgb(242, 243, 245)",
+      "snow": "rgb(255, 255, 255)",
+      "strawberry": "rgb(250, 222, 221)",
+      "code-red": "rgb(238, 7, 0)",
+      "mint": "rgb(227, 251, 226)",
+      "money-good": "rgb(4, 108, 0)",
+      "fuchsia": "rgb(196, 76, 176)",
+      "dark-fuchsia": "rgb(180, 60, 160)",
+      "teal": "rgb(0, 111, 98)",
+      "ivory": "rgb(242, 233, 219)",
+      "klein-blue": "rgb(38, 48, 120)",
+      "persian-blue": "rgb(30, 34, 170)",
+      "brick": "rgb(147, 58, 32)",
+      "goldenrod": "rgb(186, 145, 46)",
+      "seafoam": "rgb(177, 191, 170)",
+      "coral": "rgb(255, 146, 121)",
+      "burnt-orange": "rgb(213, 107, 39)",
+      "lilac": "rgb(215, 179, 208)",
+      "forest-green": "rgb(0, 55, 40)",
+      "cream": "rgb(248, 245, 238)",
+      "cornflower-blue": "rgb(127, 154, 207)",
+      "moss-green": "rgb(104, 104, 59)",
+      "blush": "rgb(243, 222, 217)",
+      "canary": "rgb(240, 246, 89)"
     },
-    "h5": {
-      "font-size": "1.25rem",
-      "line-height": 1.4,
-      "letter-spacing": "0.02em"
+    "ui": {
+      "strawberry": "rgb(250, 222, 221)",
+      "code-red": "rgb(238, 7, 0)",
+      "mint": "rgb(227, 251, 226)",
+      "money-good": "rgb(4, 108, 0)",
+      "fuchsia": "rgb(196, 76, 176)",
+      "dark-fuchsia": "rgb(180, 60, 160)",
+      "teal": "rgb(0, 111, 98)",
+      "ivory": "rgb(242, 233, 219)"
     },
-    "h6": {
-      "font-size": "1rem",
-      "line-height": 1.4,
-      "letter-spacing": "0.04em"
+    "global": {
+      "klein-blue": "rgb(38, 48, 120)",
+      "persian-blue": "rgb(30, 34, 170)",
+      "brick": "rgb(147, 58, 32)",
+      "goldenrod": "rgb(186, 145, 46)",
+      "seafoam": "rgb(177, 191, 170)",
+      "coral": "rgb(255, 146, 121)"
     },
-    "body1": {
-      "font-size": "0.8125rem",
-      "line-height": 1.6,
-      "letter-spacing": "0.04em"
+    "mens": {
+      "cornflower-blue": "rgb(127, 154, 207)",
+      "moss-green": "rgb(104, 104, 59)",
+      "blush": "rgb(243, 222, 217)",
+      "noise": "rgb(242, 243, 245)",
+      "canary": "rgb(240, 246, 89)"
     },
-    "bold1": {
-      "font-size": "0.8125rem",
-      "line-height": 1.6,
-      "letter-spacing": "0.1em",
-      "font-weight": "bold"
+    "womens": {
+      "burnt-orange": "rgb(213, 107, 39)",
+      "lilac": "rgb(215, 179, 208)",
+      "forest-green": "rgb(0, 55, 40)",
+      "cream": "rgb(248, 245, 238)",
+      "fuchsia": "rgb(196, 76, 176)",
+      "dark-fuchsia": "rgb(180, 60, 160)"
     },
-    "body2": {
-      "font-size": "0.75rem",
-      "line-height": 1.4,
-      "letter-spacing": "0.04em"
+    "greyscale": {
+      "coal": "rgb(0, 0, 0)",
+      "ink": "rgb(25, 26, 27)",
+      "cement": "rgb(101, 101, 102)",
+      "fog": "rgb(151, 152, 153)",
+      "elephant": "rgb(202, 203, 204)",
+      "noise": "rgb(242, 243, 245)",
+      "snow": "rgb(255, 255, 255)"
+    }
+  };
+  return colors;
+}
+
+var typography = {};
+
+var hasRequiredTypography;
+function requireTypography() {
+  if (hasRequiredTypography) return typography;
+  hasRequiredTypography = 1;
+  Object.defineProperty(typography, "__esModule", {
+    value: true
+  });
+  typography.typography = void 0;
+  // THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
+  typography.typography = {
+    "fonts": {
+      "sans": ["Moda Operandi Sans", "Arial", "sans-serif"],
+      "serif": ["Moda Operandi Serif", "Times New Roman", "Times", "serif"],
+      "code": ["Menlo", "Monaco", "Consolas", "Courier New", "monospace"]
     },
-    "eyebrow": {
-      "font-size": "0.75rem",
-      "line-height": 1.4,
-      "letter-spacing": "0.1em",
-      "text-transform": "uppercase"
+    "line-heights": [1.1, 1.2, 1.4, 1.6],
+    "letter-spacing": [0, "0.02em", "0.04em", "0.1em"],
+    "font-scale": ["0.75rem", "0.8125rem", "1rem", "1.25rem", "1.5rem", "2rem", "3rem", "3.75rem", "6rem"],
+    "root-font-size": "16px",
+    "text-treatments": {
+      "display": {
+        "font-size": "6rem",
+        "line-height": 1.1,
+        "letter-spacing": 0
+      },
+      "h1": {
+        "font-size": "3.75rem",
+        "line-height": 1.2,
+        "letter-spacing": 0
+      },
+      "h2": {
+        "font-size": "3rem",
+        "line-height": 1.1,
+        "letter-spacing": 0
+      },
+      "h3": {
+        "font-size": "2rem",
+        "line-height": 1.2,
+        "letter-spacing": 0
+      },
+      "h4": {
+        "font-size": "1.5rem",
+        "line-height": 1.4,
+        "letter-spacing": 0
+      },
+      "h5": {
+        "font-size": "1.25rem",
+        "line-height": 1.4,
+        "letter-spacing": "0.02em"
+      },
+      "h6": {
+        "font-size": "1rem",
+        "line-height": 1.4,
+        "letter-spacing": "0.04em"
+      },
+      "body1": {
+        "font-size": "0.8125rem",
+        "line-height": 1.6,
+        "letter-spacing": "0.04em"
+      },
+      "bold1": {
+        "font-size": "0.8125rem",
+        "line-height": 1.6,
+        "letter-spacing": "0.1em",
+        "font-weight": "bold"
+      },
+      "body2": {
+        "font-size": "0.75rem",
+        "line-height": 1.4,
+        "letter-spacing": "0.04em"
+      },
+      "eyebrow": {
+        "font-size": "0.75rem",
+        "line-height": 1.4,
+        "letter-spacing": "0.1em",
+        "text-transform": "uppercase"
+      }
     }
-  }
-};
+  };
+  return typography;
+}
 
 var space = {};
 
-Object.defineProperty(space, "__esModule", {
-  value: true
-});
-space.space = void 0;
-// THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
-space.space = {
-  "scale": ["0rem", "0.25rem", "0.5rem", "0.75rem", "1rem", "1.5rem", "2rem", "3rem", "4rem", "6rem", "8rem", "12rem", "24rem"],
-  "map": {
-    "0x": "0rem",
-    "quarter-x": "0.25rem",
-    "half-x": "0.5rem",
-    "three-quarter-x": "0.75rem",
-    "1x": "1rem",
-    "one-and-a-half-x": "1.5rem",
-    "2x": "2rem",
-    "3x": "3rem",
-    "4x": "4rem",
-    "6x": "6rem",
-    "8x": "8rem",
-    "12x": "12rem",
-    "24x": "24rem"
-  }
-};
+var hasRequiredSpace;
+function requireSpace() {
+  if (hasRequiredSpace) return space;
+  hasRequiredSpace = 1;
+  Object.defineProperty(space, "__esModule", {
+    value: true
+  });
+  space.space = void 0;
+  // THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
+  space.space = {
+    "scale": ["0rem", "0.25rem", "0.5rem", "0.75rem", "1rem", "1.5rem", "2rem", "3rem", "4rem", "6rem", "8rem", "12rem", "24rem"],
+    "map": {
+      "0x": "0rem",
+      "quarter-x": "0.25rem",
+      "half-x": "0.5rem",
+      "three-quarter-x": "0.75rem",
+      "1x": "1rem",
+      "one-and-a-half-x": "1.5rem",
+      "2x": "2rem",
+      "3x": "3rem",
+      "4x": "4rem",
+      "6x": "6rem",
+      "8x": "8rem",
+      "12x": "12rem",
+      "24x": "24rem"
+    }
+  };
+  return space;
+}
 
 var breakpoints = {};
 
-Object.defineProperty(breakpoints, "__esModule", {
-  value: true
-});
-breakpoints.breakpoints = void 0;
-// THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
-breakpoints.breakpoints = {
-  "xs": "25rem",
-  "sm": "48rem",
-  "md": "62rem",
-  "lg": "80rem",
-  "xl": "100rem"
-};
+var hasRequiredBreakpoints;
+function requireBreakpoints() {
+  if (hasRequiredBreakpoints) return breakpoints;
+  hasRequiredBreakpoints = 1;
+  Object.defineProperty(breakpoints, "__esModule", {
+    value: true
+  });
+  breakpoints.breakpoints = void 0;
+  // THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
+  breakpoints.breakpoints = {
+    "xs": "25rem",
+    "sm": "48rem",
+    "md": "62rem",
+    "lg": "80rem",
+    "xl": "100rem"
+  };
+  return breakpoints;
+}
 
 var helpers = {};
 
 var colorString = {exports: {}};
 
-var colorName = {
-  "aliceblue": [240, 248, 255],
-  "antiquewhite": [250, 235, 215],
-  "aqua": [0, 255, 255],
-  "aquamarine": [127, 255, 212],
-  "azure": [240, 255, 255],
-  "beige": [245, 245, 220],
-  "bisque": [255, 228, 196],
-  "black": [0, 0, 0],
-  "blanchedalmond": [255, 235, 205],
-  "blue": [0, 0, 255],
-  "blueviolet": [138, 43, 226],
-  "brown": [165, 42, 42],
-  "burlywood": [222, 184, 135],
-  "cadetblue": [95, 158, 160],
-  "chartreuse": [127, 255, 0],
-  "chocolate": [210, 105, 30],
-  "coral": [255, 127, 80],
-  "cornflowerblue": [100, 149, 237],
-  "cornsilk": [255, 248, 220],
-  "crimson": [220, 20, 60],
-  "cyan": [0, 255, 255],
-  "darkblue": [0, 0, 139],
-  "darkcyan": [0, 139, 139],
-  "darkgoldenrod": [184, 134, 11],
-  "darkgray": [169, 169, 169],
-  "darkgreen": [0, 100, 0],
-  "darkgrey": [169, 169, 169],
-  "darkkhaki": [189, 183, 107],
-  "darkmagenta": [139, 0, 139],
-  "darkolivegreen": [85, 107, 47],
-  "darkorange": [255, 140, 0],
-  "darkorchid": [153, 50, 204],
-  "darkred": [139, 0, 0],
-  "darksalmon": [233, 150, 122],
-  "darkseagreen": [143, 188, 143],
-  "darkslateblue": [72, 61, 139],
-  "darkslategray": [47, 79, 79],
-  "darkslategrey": [47, 79, 79],
-  "darkturquoise": [0, 206, 209],
-  "darkviolet": [148, 0, 211],
-  "deeppink": [255, 20, 147],
-  "deepskyblue": [0, 191, 255],
-  "dimgray": [105, 105, 105],
-  "dimgrey": [105, 105, 105],
-  "dodgerblue": [30, 144, 255],
-  "firebrick": [178, 34, 34],
-  "floralwhite": [255, 250, 240],
-  "forestgreen": [34, 139, 34],
-  "fuchsia": [255, 0, 255],
-  "gainsboro": [220, 220, 220],
-  "ghostwhite": [248, 248, 255],
-  "gold": [255, 215, 0],
-  "goldenrod": [218, 165, 32],
-  "gray": [128, 128, 128],
-  "green": [0, 128, 0],
-  "greenyellow": [173, 255, 47],
-  "grey": [128, 128, 128],
-  "honeydew": [240, 255, 240],
-  "hotpink": [255, 105, 180],
-  "indianred": [205, 92, 92],
-  "indigo": [75, 0, 130],
-  "ivory": [255, 255, 240],
-  "khaki": [240, 230, 140],
-  "lavender": [230, 230, 250],
-  "lavenderblush": [255, 240, 245],
-  "lawngreen": [124, 252, 0],
-  "lemonchiffon": [255, 250, 205],
-  "lightblue": [173, 216, 230],
-  "lightcoral": [240, 128, 128],
-  "lightcyan": [224, 255, 255],
-  "lightgoldenrodyellow": [250, 250, 210],
-  "lightgray": [211, 211, 211],
-  "lightgreen": [144, 238, 144],
-  "lightgrey": [211, 211, 211],
-  "lightpink": [255, 182, 193],
-  "lightsalmon": [255, 160, 122],
-  "lightseagreen": [32, 178, 170],
-  "lightskyblue": [135, 206, 250],
-  "lightslategray": [119, 136, 153],
-  "lightslategrey": [119, 136, 153],
-  "lightsteelblue": [176, 196, 222],
-  "lightyellow": [255, 255, 224],
-  "lime": [0, 255, 0],
-  "limegreen": [50, 205, 50],
-  "linen": [250, 240, 230],
-  "magenta": [255, 0, 255],
-  "maroon": [128, 0, 0],
-  "mediumaquamarine": [102, 205, 170],
-  "mediumblue": [0, 0, 205],
-  "mediumorchid": [186, 85, 211],
-  "mediumpurple": [147, 112, 219],
-  "mediumseagreen": [60, 179, 113],
-  "mediumslateblue": [123, 104, 238],
-  "mediumspringgreen": [0, 250, 154],
-  "mediumturquoise": [72, 209, 204],
-  "mediumvioletred": [199, 21, 133],
-  "midnightblue": [25, 25, 112],
-  "mintcream": [245, 255, 250],
-  "mistyrose": [255, 228, 225],
-  "moccasin": [255, 228, 181],
-  "navajowhite": [255, 222, 173],
-  "navy": [0, 0, 128],
-  "oldlace": [253, 245, 230],
-  "olive": [128, 128, 0],
-  "olivedrab": [107, 142, 35],
-  "orange": [255, 165, 0],
-  "orangered": [255, 69, 0],
-  "orchid": [218, 112, 214],
-  "palegoldenrod": [238, 232, 170],
-  "palegreen": [152, 251, 152],
-  "paleturquoise": [175, 238, 238],
-  "palevioletred": [219, 112, 147],
-  "papayawhip": [255, 239, 213],
-  "peachpuff": [255, 218, 185],
-  "peru": [205, 133, 63],
-  "pink": [255, 192, 203],
-  "plum": [221, 160, 221],
-  "powderblue": [176, 224, 230],
-  "purple": [128, 0, 128],
-  "rebeccapurple": [102, 51, 153],
-  "red": [255, 0, 0],
-  "rosybrown": [188, 143, 143],
-  "royalblue": [65, 105, 225],
-  "saddlebrown": [139, 69, 19],
-  "salmon": [250, 128, 114],
-  "sandybrown": [244, 164, 96],
-  "seagreen": [46, 139, 87],
-  "seashell": [255, 245, 238],
-  "sienna": [160, 82, 45],
-  "silver": [192, 192, 192],
-  "skyblue": [135, 206, 235],
-  "slateblue": [106, 90, 205],
-  "slategray": [112, 128, 144],
-  "slategrey": [112, 128, 144],
-  "snow": [255, 250, 250],
-  "springgreen": [0, 255, 127],
-  "steelblue": [70, 130, 180],
-  "tan": [210, 180, 140],
-  "teal": [0, 128, 128],
-  "thistle": [216, 191, 216],
-  "tomato": [255, 99, 71],
-  "turquoise": [64, 224, 208],
-  "violet": [238, 130, 238],
-  "wheat": [245, 222, 179],
-  "white": [255, 255, 255],
-  "whitesmoke": [245, 245, 245],
-  "yellow": [255, 255, 0],
-  "yellowgreen": [154, 205, 50]
-};
+var colorName;
+var hasRequiredColorName;
+function requireColorName() {
+  if (hasRequiredColorName) return colorName;
+  hasRequiredColorName = 1;
+  colorName = {
+    "aliceblue": [240, 248, 255],
+    "antiquewhite": [250, 235, 215],
+    "aqua": [0, 255, 255],
+    "aquamarine": [127, 255, 212],
+    "azure": [240, 255, 255],
+    "beige": [245, 245, 220],
+    "bisque": [255, 228, 196],
+    "black": [0, 0, 0],
+    "blanchedalmond": [255, 235, 205],
+    "blue": [0, 0, 255],
+    "blueviolet": [138, 43, 226],
+    "brown": [165, 42, 42],
+    "burlywood": [222, 184, 135],
+    "cadetblue": [95, 158, 160],
+    "chartreuse": [127, 255, 0],
+    "chocolate": [210, 105, 30],
+    "coral": [255, 127, 80],
+    "cornflowerblue": [100, 149, 237],
+    "cornsilk": [255, 248, 220],
+    "crimson": [220, 20, 60],
+    "cyan": [0, 255, 255],
+    "darkblue": [0, 0, 139],
+    "darkcyan": [0, 139, 139],
+    "darkgoldenrod": [184, 134, 11],
+    "darkgray": [169, 169, 169],
+    "darkgreen": [0, 100, 0],
+    "darkgrey": [169, 169, 169],
+    "darkkhaki": [189, 183, 107],
+    "darkmagenta": [139, 0, 139],
+    "darkolivegreen": [85, 107, 47],
+    "darkorange": [255, 140, 0],
+    "darkorchid": [153, 50, 204],
+    "darkred": [139, 0, 0],
+    "darksalmon": [233, 150, 122],
+    "darkseagreen": [143, 188, 143],
+    "darkslateblue": [72, 61, 139],
+    "darkslategray": [47, 79, 79],
+    "darkslategrey": [47, 79, 79],
+    "darkturquoise": [0, 206, 209],
+    "darkviolet": [148, 0, 211],
+    "deeppink": [255, 20, 147],
+    "deepskyblue": [0, 191, 255],
+    "dimgray": [105, 105, 105],
+    "dimgrey": [105, 105, 105],
+    "dodgerblue": [30, 144, 255],
+    "firebrick": [178, 34, 34],
+    "floralwhite": [255, 250, 240],
+    "forestgreen": [34, 139, 34],
+    "fuchsia": [255, 0, 255],
+    "gainsboro": [220, 220, 220],
+    "ghostwhite": [248, 248, 255],
+    "gold": [255, 215, 0],
+    "goldenrod": [218, 165, 32],
+    "gray": [128, 128, 128],
+    "green": [0, 128, 0],
+    "greenyellow": [173, 255, 47],
+    "grey": [128, 128, 128],
+    "honeydew": [240, 255, 240],
+    "hotpink": [255, 105, 180],
+    "indianred": [205, 92, 92],
+    "indigo": [75, 0, 130],
+    "ivory": [255, 255, 240],
+    "khaki": [240, 230, 140],
+    "lavender": [230, 230, 250],
+    "lavenderblush": [255, 240, 245],
+    "lawngreen": [124, 252, 0],
+    "lemonchiffon": [255, 250, 205],
+    "lightblue": [173, 216, 230],
+    "lightcoral": [240, 128, 128],
+    "lightcyan": [224, 255, 255],
+    "lightgoldenrodyellow": [250, 250, 210],
+    "lightgray": [211, 211, 211],
+    "lightgreen": [144, 238, 144],
+    "lightgrey": [211, 211, 211],
+    "lightpink": [255, 182, 193],
+    "lightsalmon": [255, 160, 122],
+    "lightseagreen": [32, 178, 170],
+    "lightskyblue": [135, 206, 250],
+    "lightslategray": [119, 136, 153],
+    "lightslategrey": [119, 136, 153],
+    "lightsteelblue": [176, 196, 222],
+    "lightyellow": [255, 255, 224],
+    "lime": [0, 255, 0],
+    "limegreen": [50, 205, 50],
+    "linen": [250, 240, 230],
+    "magenta": [255, 0, 255],
+    "maroon": [128, 0, 0],
+    "mediumaquamarine": [102, 205, 170],
+    "mediumblue": [0, 0, 205],
+    "mediumorchid": [186, 85, 211],
+    "mediumpurple": [147, 112, 219],
+    "mediumseagreen": [60, 179, 113],
+    "mediumslateblue": [123, 104, 238],
+    "mediumspringgreen": [0, 250, 154],
+    "mediumturquoise": [72, 209, 204],
+    "mediumvioletred": [199, 21, 133],
+    "midnightblue": [25, 25, 112],
+    "mintcream": [245, 255, 250],
+    "mistyrose": [255, 228, 225],
+    "moccasin": [255, 228, 181],
+    "navajowhite": [255, 222, 173],
+    "navy": [0, 0, 128],
+    "oldlace": [253, 245, 230],
+    "olive": [128, 128, 0],
+    "olivedrab": [107, 142, 35],
+    "orange": [255, 165, 0],
+    "orangered": [255, 69, 0],
+    "orchid": [218, 112, 214],
+    "palegoldenrod": [238, 232, 170],
+    "palegreen": [152, 251, 152],
+    "paleturquoise": [175, 238, 238],
+    "palevioletred": [219, 112, 147],
+    "papayawhip": [255, 239, 213],
+    "peachpuff": [255, 218, 185],
+    "peru": [205, 133, 63],
+    "pink": [255, 192, 203],
+    "plum": [221, 160, 221],
+    "powderblue": [176, 224, 230],
+    "purple": [128, 0, 128],
+    "rebeccapurple": [102, 51, 153],
+    "red": [255, 0, 0],
+    "rosybrown": [188, 143, 143],
+    "royalblue": [65, 105, 225],
+    "saddlebrown": [139, 69, 19],
+    "salmon": [250, 128, 114],
+    "sandybrown": [244, 164, 96],
+    "seagreen": [46, 139, 87],
+    "seashell": [255, 245, 238],
+    "sienna": [160, 82, 45],
+    "silver": [192, 192, 192],
+    "skyblue": [135, 206, 235],
+    "slateblue": [106, 90, 205],
+    "slategray": [112, 128, 144],
+    "slategrey": [112, 128, 144],
+    "snow": [255, 250, 250],
+    "springgreen": [0, 255, 127],
+    "steelblue": [70, 130, 180],
+    "tan": [210, 180, 140],
+    "teal": [0, 128, 128],
+    "thistle": [216, 191, 216],
+    "tomato": [255, 99, 71],
+    "turquoise": [64, 224, 208],
+    "violet": [238, 130, 238],
+    "wheat": [245, 222, 179],
+    "white": [255, 255, 255],
+    "whitesmoke": [245, 245, 245],
+    "yellow": [255, 255, 0],
+    "yellowgreen": [154, 205, 50]
+  };
+  return colorName;
+}
 
 var simpleSwizzle = {exports: {}};
 
-var isArrayish$1 = function isArrayish(obj) {
-  if (!obj || typeof obj === 'string') {
-    return false;
-  }
-  return obj instanceof Array || Array.isArray(obj) || obj.length >= 0 && (obj.splice instanceof Function || Object.getOwnPropertyDescriptor(obj, obj.length - 1) && obj.constructor.name !== 'String');
-};
+var isArrayish;
+var hasRequiredIsArrayish;
+function requireIsArrayish() {
+  if (hasRequiredIsArrayish) return isArrayish;
+  hasRequiredIsArrayish = 1;
+  isArrayish = function isArrayish(obj) {
+    if (!obj || typeof obj === 'string') {
+      return false;
+    }
+    return obj instanceof Array || Array.isArray(obj) || obj.length >= 0 && (obj.splice instanceof Function || Object.getOwnPropertyDescriptor(obj, obj.length - 1) && obj.constructor.name !== 'String');
+  };
+  return isArrayish;
+}
 
-var isArrayish = isArrayish$1;
-var concat = Array.prototype.concat;
-var slice = Array.prototype.slice;
-var swizzle$1 = simpleSwizzle.exports = function swizzle(args) {
-  var results = [];
-  for (var i = 0, len = args.length; i < len; i++) {
-    var arg = args[i];
-    if (isArrayish(arg)) {
-      // http://jsperf.com/javascript-array-concat-vs-push/98
-      results = concat.call(results, slice.call(arg));
-    } else {
-      results.push(arg);
+var hasRequiredSimpleSwizzle;
+function requireSimpleSwizzle() {
+  if (hasRequiredSimpleSwizzle) return simpleSwizzle.exports;
+  hasRequiredSimpleSwizzle = 1;
+  var isArrayish = requireIsArrayish();
+  var concat = Array.prototype.concat;
+  var slice = Array.prototype.slice;
+  var swizzle = simpleSwizzle.exports = function swizzle(args) {
+    var results = [];
+    for (var i = 0, len = args.length; i < len; i++) {
+      var arg = args[i];
+      if (isArrayish(arg)) {
+        // http://jsperf.com/javascript-array-concat-vs-push/98
+        results = concat.call(results, slice.call(arg));
+      } else {
+        results.push(arg);
+      }
     }
-  }
-  return results;
-};
-swizzle$1.wrap = function (fn) {
-  return function () {
-    return fn(swizzle$1(arguments));
+    return results;
   };
-};
-var simpleSwizzleExports = simpleSwizzle.exports;
+  swizzle.wrap = function (fn) {
+    return function () {
+      return fn(swizzle(arguments));
+    };
+  };
+  return simpleSwizzle.exports;
+}
 
 /* MIT license */
-var colorNames = colorName;
-var swizzle = simpleSwizzleExports;
-var hasOwnProperty = Object.hasOwnProperty;
-var reverseNames = Object.create(null);
-
-// create a list of reverse color names
-for (var name in colorNames) {
-  if (hasOwnProperty.call(colorNames, name)) {
-    reverseNames[colorNames[name]] = name;
-  }
-}
-var cs = colorString.exports = {
-  to: {},
-  get: {}
-};
-cs.get = function (string) {
-  var prefix = string.substring(0, 3).toLowerCase();
-  var val;
-  var model;
-  switch (prefix) {
-    case 'hsl':
-      val = cs.get.hsl(string);
-      model = 'hsl';
-      break;
-    case 'hwb':
-      val = cs.get.hwb(string);
-      model = 'hwb';
-      break;
-    default:
-      val = cs.get.rgb(string);
-      model = 'rgb';
-      break;
-  }
-  if (!val) {
-    return null;
-  }
-  return {
-    model: model,
-    value: val
+var hasRequiredColorString;
+function requireColorString() {
+  if (hasRequiredColorString) return colorString.exports;
+  hasRequiredColorString = 1;
+  var colorNames = requireColorName();
+  var swizzle = requireSimpleSwizzle();
+  var hasOwnProperty = Object.hasOwnProperty;
+  var reverseNames = Object.create(null);
+
+  // create a list of reverse color names
+  for (var name in colorNames) {
+    if (hasOwnProperty.call(colorNames, name)) {
+      reverseNames[colorNames[name]] = name;
+    }
+  }
+  var cs = colorString.exports = {
+    to: {},
+    get: {}
   };
-};
-cs.get.rgb = function (string) {
-  if (!string) {
-    return null;
-  }
-  var abbr = /^#([a-f0-9]{3,4})$/i;
-  var hex = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i;
-  var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
-  var per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
-  var keyword = /^(\w+)$/;
-  var rgb = [0, 0, 0, 1];
-  var match;
-  var i;
-  var hexAlpha;
-  if (match = string.match(hex)) {
-    hexAlpha = match[2];
-    match = match[1];
-    for (i = 0; i < 3; i++) {
-      // https://jsperf.com/slice-vs-substr-vs-substring-methods-long-string/19
-      var i2 = i * 2;
-      rgb[i] = parseInt(match.slice(i2, i2 + 2), 16);
-    }
-    if (hexAlpha) {
-      rgb[3] = parseInt(hexAlpha, 16) / 255;
-    }
-  } else if (match = string.match(abbr)) {
-    match = match[1];
-    hexAlpha = match[3];
-    for (i = 0; i < 3; i++) {
-      rgb[i] = parseInt(match[i] + match[i], 16);
+  cs.get = function (string) {
+    var prefix = string.substring(0, 3).toLowerCase();
+    var val;
+    var model;
+    switch (prefix) {
+      case 'hsl':
+        val = cs.get.hsl(string);
+        model = 'hsl';
+        break;
+      case 'hwb':
+        val = cs.get.hwb(string);
+        model = 'hwb';
+        break;
+      default:
+        val = cs.get.rgb(string);
+        model = 'rgb';
+        break;
     }
-    if (hexAlpha) {
-      rgb[3] = parseInt(hexAlpha + hexAlpha, 16) / 255;
+    if (!val) {
+      return null;
     }
-  } else if (match = string.match(rgba)) {
-    for (i = 0; i < 3; i++) {
-      rgb[i] = parseInt(match[i + 1], 0);
+    return {
+      model: model,
+      value: val
+    };
+  };
+  cs.get.rgb = function (string) {
+    if (!string) {
+      return null;
     }
-    if (match[4]) {
-      if (match[5]) {
-        rgb[3] = parseFloat(match[4]) * 0.01;
-      } else {
-        rgb[3] = parseFloat(match[4]);
+    var abbr = /^#([a-f0-9]{3,4})$/i;
+    var hex = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i;
+    var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
+    var per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
+    var keyword = /^(\w+)$/;
+    var rgb = [0, 0, 0, 1];
+    var match;
+    var i;
+    var hexAlpha;
+    if (match = string.match(hex)) {
+      hexAlpha = match[2];
+      match = match[1];
+      for (i = 0; i < 3; i++) {
+        // https://jsperf.com/slice-vs-substr-vs-substring-methods-long-string/19
+        var i2 = i * 2;
+        rgb[i] = parseInt(match.slice(i2, i2 + 2), 16);
+      }
+      if (hexAlpha) {
+        rgb[3] = parseInt(hexAlpha, 16) / 255;
+      }
+    } else if (match = string.match(abbr)) {
+      match = match[1];
+      hexAlpha = match[3];
+      for (i = 0; i < 3; i++) {
+        rgb[i] = parseInt(match[i] + match[i], 16);
+      }
+      if (hexAlpha) {
+        rgb[3] = parseInt(hexAlpha + hexAlpha, 16) / 255;
+      }
+    } else if (match = string.match(rgba)) {
+      for (i = 0; i < 3; i++) {
+        rgb[i] = parseInt(match[i + 1], 0);
+      }
+      if (match[4]) {
+        if (match[5]) {
+          rgb[3] = parseFloat(match[4]) * 0.01;
+        } else {
+          rgb[3] = parseFloat(match[4]);
+        }
+      }
+    } else if (match = string.match(per)) {
+      for (i = 0; i < 3; i++) {
+        rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);
+      }
+      if (match[4]) {
+        if (match[5]) {
+          rgb[3] = parseFloat(match[4]) * 0.01;
+        } else {
+          rgb[3] = parseFloat(match[4]);
+        }
+      }
+    } else if (match = string.match(keyword)) {
+      if (match[1] === 'transparent') {
+        return [0, 0, 0, 0];
       }
+      if (!hasOwnProperty.call(colorNames, match[1])) {
+        return null;
+      }
+      rgb = colorNames[match[1]];
+      rgb[3] = 1;
+      return rgb;
+    } else {
+      return null;
     }
-  } else if (match = string.match(per)) {
     for (i = 0; i < 3; i++) {
-      rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);
+      rgb[i] = clamp(rgb[i], 0, 255);
     }
-    if (match[4]) {
-      if (match[5]) {
-        rgb[3] = parseFloat(match[4]) * 0.01;
-      } else {
-        rgb[3] = parseFloat(match[4]);
-      }
+    rgb[3] = clamp(rgb[3], 0, 1);
+    return rgb;
+  };
+  cs.get.hsl = function (string) {
+    if (!string) {
+      return null;
     }
-  } else if (match = string.match(keyword)) {
-    if (match[1] === 'transparent') {
-      return [0, 0, 0, 0];
+    var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
+    var match = string.match(hsl);
+    if (match) {
+      var alpha = parseFloat(match[4]);
+      var h = (parseFloat(match[1]) % 360 + 360) % 360;
+      var s = clamp(parseFloat(match[2]), 0, 100);
+      var l = clamp(parseFloat(match[3]), 0, 100);
+      var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
+      return [h, s, l, a];
     }
-    if (!hasOwnProperty.call(colorNames, match[1])) {
+    return null;
+  };
+  cs.get.hwb = function (string) {
+    if (!string) {
       return null;
     }
-    rgb = colorNames[match[1]];
-    rgb[3] = 1;
-    return rgb;
-  } else {
-    return null;
-  }
-  for (i = 0; i < 3; i++) {
-    rgb[i] = clamp(rgb[i], 0, 255);
-  }
-  rgb[3] = clamp(rgb[3], 0, 1);
-  return rgb;
-};
-cs.get.hsl = function (string) {
-  if (!string) {
-    return null;
-  }
-  var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
-  var match = string.match(hsl);
-  if (match) {
-    var alpha = parseFloat(match[4]);
-    var h = (parseFloat(match[1]) % 360 + 360) % 360;
-    var s = clamp(parseFloat(match[2]), 0, 100);
-    var l = clamp(parseFloat(match[3]), 0, 100);
-    var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
-    return [h, s, l, a];
-  }
-  return null;
-};
-cs.get.hwb = function (string) {
-  if (!string) {
+    var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
+    var match = string.match(hwb);
+    if (match) {
+      var alpha = parseFloat(match[4]);
+      var h = (parseFloat(match[1]) % 360 + 360) % 360;
+      var w = clamp(parseFloat(match[2]), 0, 100);
+      var b = clamp(parseFloat(match[3]), 0, 100);
+      var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
+      return [h, w, b, a];
+    }
     return null;
-  }
-  var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
-  var match = string.match(hwb);
-  if (match) {
-    var alpha = parseFloat(match[4]);
-    var h = (parseFloat(match[1]) % 360 + 360) % 360;
-    var w = clamp(parseFloat(match[2]), 0, 100);
-    var b = clamp(parseFloat(match[3]), 0, 100);
-    var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
-    return [h, w, b, a];
-  }
-  return null;
-};
-cs.to.hex = function () {
-  var rgba = swizzle(arguments);
-  return '#' + hexDouble(rgba[0]) + hexDouble(rgba[1]) + hexDouble(rgba[2]) + (rgba[3] < 1 ? hexDouble(Math.round(rgba[3] * 255)) : '');
-};
-cs.to.rgb = function () {
-  var rgba = swizzle(arguments);
-  return rgba.length < 4 || rgba[3] === 1 ? 'rgb(' + Math.round(rgba[0]) + ', ' + Math.round(rgba[1]) + ', ' + Math.round(rgba[2]) + ')' : 'rgba(' + Math.round(rgba[0]) + ', ' + Math.round(rgba[1]) + ', ' + Math.round(rgba[2]) + ', ' + rgba[3] + ')';
-};
-cs.to.rgb.percent = function () {
-  var rgba = swizzle(arguments);
-  var r = Math.round(rgba[0] / 255 * 100);
-  var g = Math.round(rgba[1] / 255 * 100);
-  var b = Math.round(rgba[2] / 255 * 100);
-  return rgba.length < 4 || rgba[3] === 1 ? 'rgb(' + r + '%, ' + g + '%, ' + b + '%)' : 'rgba(' + r + '%, ' + g + '%, ' + b + '%, ' + rgba[3] + ')';
-};
-cs.to.hsl = function () {
-  var hsla = swizzle(arguments);
-  return hsla.length < 4 || hsla[3] === 1 ? 'hsl(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%)' : 'hsla(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%, ' + hsla[3] + ')';
-};
-
-// hwb is a bit different than rgb(a) & hsl(a) since there is no alpha specific syntax
-// (hwb have alpha optional & 1 is default value)
-cs.to.hwb = function () {
-  var hwba = swizzle(arguments);
-  var a = '';
-  if (hwba.length >= 4 && hwba[3] !== 1) {
-    a = ', ' + hwba[3];
-  }
-  return 'hwb(' + hwba[0] + ', ' + hwba[1] + '%, ' + hwba[2] + '%' + a + ')';
-};
-cs.to.keyword = function (rgb) {
-  return reverseNames[rgb.slice(0, 3)];
-};
-
-// helpers
-function clamp(num, min, max) {
-  return Math.min(Math.max(min, num), max);
-}
-function hexDouble(num) {
-  var str = Math.round(num).toString(16).toUpperCase();
-  return str.length < 2 ? '0' + str : str;
-}
-var colorStringExports = colorString.exports;
-
-(function (exports) {
-
-  var __assign = commonjsGlobal && commonjsGlobal.__assign || function () {
-    __assign = Object.assign || function (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);
   };
-  var __spreadArray = commonjsGlobal && commonjsGlobal.__spreadArray || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-      if (ar || !(i in from)) {
-        if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-        ar[i] = from[i];
-      }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
+  cs.to.hex = function () {
+    var rgba = swizzle(arguments);
+    return '#' + hexDouble(rgba[0]) + hexDouble(rgba[1]) + hexDouble(rgba[2]) + (rgba[3] < 1 ? hexDouble(Math.round(rgba[3] * 255)) : '');
   };
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.spacing = exports.colorInHex = exports.color = exports.remToUnitlessPx = exports.text = void 0;
-  var colorString = colorStringExports;
-  var colors_1 = colors;
-  var space_1 = space;
-  var typography_1 = typography;
-  var text = function text(name, font) {
-    if (font === void 0) {
-      font = 'sans';
-    }
-    var treatment = typography_1.typography['text-treatments'][name];
-    return __assign(__assign({}, treatment), {
-      'font-family': typography_1.typography.fonts[font].join(','),
-      'line-height': "".concat(treatment['line-height'])
-    });
+  cs.to.rgb = function () {
+    var rgba = swizzle(arguments);
+    return rgba.length < 4 || rgba[3] === 1 ? 'rgb(' + Math.round(rgba[0]) + ', ' + Math.round(rgba[1]) + ', ' + Math.round(rgba[2]) + ')' : 'rgba(' + Math.round(rgba[0]) + ', ' + Math.round(rgba[1]) + ', ' + Math.round(rgba[2]) + ', ' + rgba[3] + ')';
   };
-  exports.text = text;
-  var remToUnitlessPx = function remToUnitlessPx(value) {
-    return parseFloat(value) * parseInt(typography_1.typography['root-font-size'], 10);
+  cs.to.rgb.percent = function () {
+    var rgba = swizzle(arguments);
+    var r = Math.round(rgba[0] / 255 * 100);
+    var g = Math.round(rgba[1] / 255 * 100);
+    var b = Math.round(rgba[2] / 255 * 100);
+    return rgba.length < 4 || rgba[3] === 1 ? 'rgb(' + r + '%, ' + g + '%, ' + b + '%)' : 'rgba(' + r + '%, ' + g + '%, ' + b + '%, ' + rgba[3] + ')';
   };
-  exports.remToUnitlessPx = remToUnitlessPx;
-  var color = function color(name, alpha) {
-    var _a;
-    var color = colors_1.colors.all[name];
-    return alpha != null ?
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    colorString.to.rgb(__spreadArray(__spreadArray([], ((_a = colorString.get.rgb(color)) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) || [], true), [alpha], false)) : color;
+  cs.to.hsl = function () {
+    var hsla = swizzle(arguments);
+    return hsla.length < 4 || hsla[3] === 1 ? 'hsl(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%)' : 'hsla(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%, ' + hsla[3] + ')';
   };
-  exports.color = color;
-  var colorInHex = function colorInHex(name, alpha) {
-    return colorString.to.hex(colorString.get.rgb((0, exports.color)(name, alpha)));
+
+  // hwb is a bit different than rgb(a) & hsl(a) since there is no alpha specific syntax
+  // (hwb have alpha optional & 1 is default value)
+  cs.to.hwb = function () {
+    var hwba = swizzle(arguments);
+    var a = '';
+    if (hwba.length >= 4 && hwba[3] !== 1) {
+      a = ', ' + hwba[3];
+    }
+    return 'hwb(' + hwba[0] + ', ' + hwba[1] + '%, ' + hwba[2] + '%' + a + ')';
   };
-  exports.colorInHex = colorInHex;
-  var spacing = function spacing(topY, rightX, bottom, left) {
-    return [topY, rightX, bottom, left].reduce(function (acc, value) {
-      var _a;
-      if (value === undefined) return acc;
-      return [acc, (_a = space_1.space.scale[Number(value)]) !== null && _a !== void 0 ? _a : value].join(' ');
-    }, '');
+  cs.to.keyword = function (rgb) {
+    return reverseNames[rgb.slice(0, 3)];
   };
-  exports.spacing = spacing;
-})(helpers);
 
-(function (exports) {
+  // helpers
+  function clamp(num, min, max) {
+    return Math.min(Math.max(min, num), max);
+  }
+  function hexDouble(num) {
+    var str = Math.round(num).toString(16).toUpperCase();
+    return str.length < 2 ? '0' + str : str;
+  }
+  return colorString.exports;
+}
 
-  var __createBinding = commonjsGlobal && commonjsGlobal.__createBinding || (Object.create ? function (o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = {
-        enumerable: true,
-        get: function get() {
-          return m[k];
+var hasRequiredHelpers;
+function requireHelpers() {
+  if (hasRequiredHelpers) return helpers;
+  hasRequiredHelpers = 1;
+  (function (exports) {
+
+    var __assign = helpers && helpers.__assign || function () {
+      __assign = Object.assign || function (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;
       };
-    }
-    Object.defineProperty(o, k2, desc);
-  } : function (o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-  });
-  var __exportStar = commonjsGlobal && commonjsGlobal.__exportStar || function (m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-  };
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.breakpoints = exports.space = exports.typography = exports.colors = void 0;
-  var colors_1 = colors;
-  Object.defineProperty(exports, "colors", {
-    enumerable: true,
-    get: function get() {
-      return colors_1.colors;
-    }
-  });
-  var typography_1 = typography;
-  Object.defineProperty(exports, "typography", {
-    enumerable: true,
-    get: function get() {
-      return typography_1.typography;
-    }
-  });
-  var space_1 = space;
-  Object.defineProperty(exports, "space", {
-    enumerable: true,
-    get: function get() {
-      return space_1.space;
-    }
-  });
-  var breakpoints_1 = breakpoints;
-  Object.defineProperty(exports, "breakpoints", {
-    enumerable: true,
-    get: function get() {
-      return breakpoints_1.breakpoints;
-    }
-  });
-  __exportStar(helpers, exports);
-})(dist$4);
+      return __assign.apply(this, arguments);
+    };
+    var __spreadArray = helpers && helpers.__spreadArray || function (to, from, pack) {
+      if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+          ar[i] = from[i];
+        }
+      }
+      return to.concat(ar || Array.prototype.slice.call(from));
+    };
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    exports.spacing = exports.colorInHex = exports.color = exports.remToUnitlessPx = exports.text = void 0;
+    var colorString = requireColorString();
+    var colors_1 = requireColors();
+    var space_1 = requireSpace();
+    var typography_1 = requireTypography();
+    var text = function text(name, font) {
+      if (font === void 0) {
+        font = 'sans';
+      }
+      var treatment = typography_1.typography['text-treatments'][name];
+      return __assign(__assign({}, treatment), {
+        'font-family': typography_1.typography.fonts[font].join(','),
+        'line-height': "".concat(treatment['line-height'])
+      });
+    };
+    exports.text = text;
+    var remToUnitlessPx = function remToUnitlessPx(value) {
+      return parseFloat(value) * parseInt(typography_1.typography['root-font-size'], 10);
+    };
+    exports.remToUnitlessPx = remToUnitlessPx;
+    var color = function color(name, alpha) {
+      var _a;
+      var color = colors_1.colors.all[name];
+      return alpha != null ?
+      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      colorString.to.rgb(__spreadArray(__spreadArray([], ((_a = colorString.get.rgb(color)) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) || [], true), [alpha], false)) : color;
+    };
+    exports.color = color;
+    var colorInHex = function colorInHex(name, alpha) {
+      return colorString.to.hex(colorString.get.rgb((0, exports.color)(name, alpha)));
+    };
+    exports.colorInHex = colorInHex;
+    var spacing = function spacing(topY, rightX, bottom, left) {
+      return [topY, rightX, bottom, left].reduce(function (acc, value) {
+        var _a;
+        if (value === undefined) return acc;
+        return [acc, (_a = space_1.space.scale[Number(value)]) !== null && _a !== void 0 ? _a : value].join(' ');
+      }, '');
+    };
+    exports.spacing = spacing;
+  })(helpers);
+  return helpers;
+}
+
+var hasRequiredDist$4;
+function requireDist$4() {
+  if (hasRequiredDist$4) return dist$4;
+  hasRequiredDist$4 = 1;
+  (function (exports) {
+
+    var __createBinding = dist$4 && dist$4.__createBinding || (Object.create ? function (o, m, k, k2) {
+      if (k2 === undefined) k2 = k;
+      var desc = Object.getOwnPropertyDescriptor(m, k);
+      if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+        desc = {
+          enumerable: true,
+          get: function get() {
+            return m[k];
+          }
+        };
+      }
+      Object.defineProperty(o, k2, desc);
+    } : function (o, m, k, k2) {
+      if (k2 === undefined) k2 = k;
+      o[k2] = m[k];
+    });
+    var __exportStar = dist$4 && dist$4.__exportStar || function (m, exports) {
+      for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+    };
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    exports.breakpoints = exports.space = exports.typography = exports.colors = void 0;
+    var colors_1 = requireColors();
+    Object.defineProperty(exports, "colors", {
+      enumerable: true,
+      get: function get() {
+        return colors_1.colors;
+      }
+    });
+    var typography_1 = requireTypography();
+    Object.defineProperty(exports, "typography", {
+      enumerable: true,
+      get: function get() {
+        return typography_1.typography;
+      }
+    });
+    var space_1 = requireSpace();
+    Object.defineProperty(exports, "space", {
+      enumerable: true,
+      get: function get() {
+        return space_1.space;
+      }
+    });
+    var breakpoints_1 = requireBreakpoints();
+    Object.defineProperty(exports, "breakpoints", {
+      enumerable: true,
+      get: function get() {
+        return breakpoints_1.breakpoints;
+      }
+    });
+    __exportStar(requireHelpers(), exports);
+  })(dist$4);
+  return dist$4;
+}
+
+var distExports$4 = requireDist$4();
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -1200,61 +1271,68 @@ var isRenderProps = function isRenderProps(children) {
 
 var classnames = {exports: {}};
 
-(function (module) {
-  /* global define */
+var hasRequiredClassnames;
+function requireClassnames() {
+  if (hasRequiredClassnames) return classnames.exports;
+  hasRequiredClassnames = 1;
+  (function (module) {
+    /* global define */
 
-  (function () {
+    (function () {
 
-    var hasOwn = {}.hasOwnProperty;
-    function classNames() {
-      var classes = '';
-      for (var i = 0; i < arguments.length; i++) {
-        var arg = arguments[i];
-        if (arg) {
-          classes = appendClass(classes, parseValue(arg));
+      var hasOwn = {}.hasOwnProperty;
+      function classNames() {
+        var classes = '';
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (arg) {
+            classes = appendClass(classes, parseValue(arg));
+          }
         }
+        return classes;
       }
-      return classes;
-    }
-    function parseValue(arg) {
-      if (typeof arg === 'string' || typeof arg === 'number') {
-        return arg;
-      }
-      if (_typeof$1(arg) !== 'object') {
-        return '';
-      }
-      if (Array.isArray(arg)) {
-        return classNames.apply(null, arg);
-      }
-      if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-        return arg.toString();
-      }
-      var classes = '';
-      for (var key in arg) {
-        if (hasOwn.call(arg, key) && arg[key]) {
-          classes = appendClass(classes, key);
+      function parseValue(arg) {
+        if (typeof arg === 'string' || typeof arg === 'number') {
+          return arg;
+        }
+        if (_typeof$1(arg) !== 'object') {
+          return '';
+        }
+        if (Array.isArray(arg)) {
+          return classNames.apply(null, arg);
         }
+        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+          return arg.toString();
+        }
+        var classes = '';
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes = appendClass(classes, key);
+          }
+        }
+        return classes;
       }
-      return classes;
-    }
-    function appendClass(value, newClass) {
-      if (!newClass) {
-        return value;
+      function appendClass(value, newClass) {
+        if (!newClass) {
+          return value;
+        }
+        if (value) {
+          return value + ' ' + newClass;
+        }
+        return value + newClass;
       }
-      if (value) {
-        return value + ' ' + newClass;
+      if (module.exports) {
+        classNames["default"] = classNames;
+        module.exports = classNames;
+      } else {
+        window.classNames = classNames;
       }
-      return value + newClass;
-    }
-    if (module.exports) {
-      classNames["default"] = classNames;
-      module.exports = classNames;
-    } else {
-      window.classNames = classNames;
-    }
-  })();
-})(classnames);
-var classnamesExports = classnames.exports;
+    })();
+  })(classnames);
+  return classnames.exports;
+}
+
+var classnamesExports = requireClassnames();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 var _excluded$G = ["className", "children", "space", "direction", "alignItems", "justifyContent", "style"];
@@ -1385,15 +1463,15 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol */
 
 
-var __assign$b = function() {
-  __assign$b = Object.assign || function __assign(t) {
+var __assign$a = function() {
+  __assign$a = 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$b.apply(this, arguments);
+  return __assign$a.apply(this, arguments);
 };
 
 function __rest$a(s, e) {
@@ -1637,7 +1715,7 @@ function createSidecarMedium(options) {
     options = {};
   }
   var medium = innerCreateMedium(null);
-  medium.options = __assign$b({
+  medium.options = __assign$a({
     async: true,
     ssr: false
   }, options);
@@ -1654,7 +1732,7 @@ var SideCar$1 = function SideCar(_a) {
   if (!Target) {
     throw new Error('Sidecar medium not found');
   }
-  return /*#__PURE__*/React.createElement(Target, __assign$b({}, rest));
+  return /*#__PURE__*/React.createElement(Target, __assign$a({}, rest));
 };
 SideCar$1.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -1695,8 +1773,8 @@ var RemoveScroll = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
     rest = __rest$a(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
   var SideCar = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
-  var containerProps = __assign$b(__assign$b({}, rest), callbacks);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, enabled && ( /*#__PURE__*/React.createElement(SideCar, {
+  var containerProps = __assign$a(__assign$a({}, rest), callbacks);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, enabled && (/*#__PURE__*/React.createElement(SideCar, {
     sideCar: effectCar$1,
     removeScrollBar: removeScrollBar,
     shards: shards,
@@ -1706,9 +1784,9 @@ var RemoveScroll = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
     allowPinchZoom: !!allowPinchZoom,
     lockRef: ref,
     gapMode: gapMode
-  })), forwardProps ? ( /*#__PURE__*/React.cloneElement(React.Children.only(children), __assign$b(__assign$b({}, containerProps), {
+  })), forwardProps ? (/*#__PURE__*/React.cloneElement(React.Children.only(children), __assign$a(__assign$a({}, containerProps), {
     ref: containerRef
-  }))) : ( /*#__PURE__*/React.createElement(Container, __assign$b({}, containerProps, {
+  }))) : (/*#__PURE__*/React.createElement(Container, __assign$a({}, containerProps, {
     className: className,
     ref: containerRef
   }), children)));
@@ -2147,9 +2225,9 @@ function requireCheckPropTypes() {
   hasRequiredCheckPropTypes = 1;
   var printWarning = function printWarning() {};
   if (process.env.NODE_ENV !== 'production') {
-    var ReactPropTypesSecret = requireReactPropTypesSecret();
+    var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
     var loggedTypeFailures = {};
-    var has = requireHas();
+    var has = /*@__PURE__*/requireHas();
     printWarning = function printWarning(text) {
       var message = 'Warning: ' + text;
       if (typeof console !== 'undefined') {
@@ -2231,9 +2309,9 @@ function requireFactoryWithTypeCheckers() {
   hasRequiredFactoryWithTypeCheckers = 1;
   var ReactIs = requireReactIs();
   var assign = requireObjectAssign();
-  var ReactPropTypesSecret = requireReactPropTypesSecret();
-  var has = requireHas();
-  var checkPropTypes = requireCheckPropTypes();
+  var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
+  var has = /*@__PURE__*/requireHas();
+  var checkPropTypes = /*@__PURE__*/requireCheckPropTypes();
   var printWarning = function printWarning() {};
   if (process.env.NODE_ENV !== 'production') {
     printWarning = function printWarning(text) {
@@ -2782,7 +2860,7 @@ var hasRequiredFactoryWithThrowingShims;
 function requireFactoryWithThrowingShims() {
   if (hasRequiredFactoryWithThrowingShims) return factoryWithThrowingShims;
   hasRequiredFactoryWithThrowingShims = 1;
-  var ReactPropTypesSecret = requireReactPropTypesSecret();
+  var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
   function emptyFunction() {}
   function emptyFunctionWithReset() {}
   emptyFunctionWithReset.resetWarningCache = emptyFunction;
@@ -2837,19 +2915,26 @@ function requireFactoryWithThrowingShims() {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-if (process.env.NODE_ENV !== 'production') {
-  var ReactIs = requireReactIs();
+var hasRequiredPropTypes;
+function requirePropTypes() {
+  if (hasRequiredPropTypes) return propTypes.exports;
+  hasRequiredPropTypes = 1;
+  if (process.env.NODE_ENV !== 'production') {
+    var ReactIs = requireReactIs();
 
-  // By explicitly using `prop-types` you are opting into new development behavior.
-  // http://fb.me/prop-types-in-prod
-  var throwOnDirectAccess = true;
-  propTypes.exports = requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
-} else {
-  // By explicitly using `prop-types` you are opting into new production behavior.
-  // http://fb.me/prop-types-in-prod
-  propTypes.exports = requireFactoryWithThrowingShims()();
+    // By explicitly using `prop-types` you are opting into new development behavior.
+    // http://fb.me/prop-types-in-prod
+    var throwOnDirectAccess = true;
+    propTypes.exports = /*@__PURE__*/requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
+  } else {
+    // By explicitly using `prop-types` you are opting into new production behavior.
+    // http://fb.me/prop-types-in-prod
+    propTypes.exports = /*@__PURE__*/requireFactoryWithThrowingShims()();
+  }
+  return propTypes.exports;
 }
-var propTypesExports = propTypes.exports;
+
+var propTypesExports = /*@__PURE__*/ requirePropTypes();
 var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
 
 /**
@@ -3125,7 +3210,7 @@ var FocusOn$1 = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
   var onActivation = lockProps.onActivation,
     onDeactivation = lockProps.onDeactivation,
     restProps = __rest$a(lockProps, ["onActivation", "onDeactivation"]);
-  var appliedLockProps = __assign$b(__assign$b({}, restProps), {
+  var appliedLockProps = __assign$a(__assign$a({}, restProps), {
     as: as,
     style: style,
     sideCar: sideCar,
@@ -3150,7 +3235,7 @@ var FocusOn$1 = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
     lockProps: appliedLockProps,
     focusOptions: preventScrollOnFocus ? PREVENT_SCROLL : undefined,
     as: RemoveScroll
-  }, children), enabled && ( /*#__PURE__*/React.createElement(SideCar, __assign$b({}, rest, {
+  }, children), enabled && (/*#__PURE__*/React.createElement(SideCar, __assign$a({}, rest, {
     sideCar: effectCar,
     setLockProps: setLockProps,
     shards: shards
@@ -4789,7 +4874,7 @@ function RemoveScrollSideCar(props) {
     return;
   }, [props.inert, props.lockRef.current, props.shards]);
   var shouldCancelEvent = React.useCallback(function (event, parent) {
-    if ('touches' in event && event.touches.length === 2) {
+    if ('touches' in event && event.touches.length === 2 || event.type === 'wheel' && event.ctrlKey) {
       return !lastProps.current.allowPinchZoom;
     }
     var touch = getTouchXY(event);
@@ -5173,10 +5258,10 @@ function Effect(_a) {
 var SideCar = exportSidecar(effectCar, Effect);
 
 var RequireSideCar = function RequireSideCar(props) {
-  return /*#__PURE__*/React.createElement(SideCar, __assign$b({}, props));
+  return /*#__PURE__*/React.createElement(SideCar, __assign$a({}, props));
 };
 var FocusOn = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(FocusOn$1, __assign$b({}, props, {
+  return /*#__PURE__*/React.createElement(FocusOn$1, __assign$a({}, props, {
     ref: ref,
     sideCar: RequireSideCar
   }));
@@ -5186,87 +5271,101 @@ var dist$3 = {};
 
 var scale = {};
 
-(function (exports) {
+var hasRequiredScale;
+function requireScale() {
+  if (hasRequiredScale) return scale;
+  hasRequiredScale = 1;
+  (function (exports) {
 
-  var __assign = commonjsGlobal && commonjsGlobal.__assign || function () {
-    __assign = Object.assign || function (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];
+    var __assign = scale && scale.__assign || function () {
+      __assign = Object.assign || function (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);
+    };
+    var __rest = scale && scale.__rest || function (s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
       }
       return t;
     };
-    return __assign.apply(this, arguments);
-  };
-  var __rest = commonjsGlobal && commonjsGlobal.__rest || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-    }
-    return t;
-  };
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.scale = exports.paddingBottom = exports.factor = void 0;
-  exports.factor = function (_a) {
-    var width = _a.width,
-      height = _a.height,
-      dimensions = __rest(_a, ["width", "height"]);
-    if ("maxHeight" in dimensions && !("maxWidth" in dimensions)) return dimensions.maxHeight / height;
-    if ("maxWidth" in dimensions && !("maxHeight" in dimensions)) return dimensions.maxWidth / width;
-    return Math.min(dimensions.maxWidth / width, dimensions.maxHeight / height);
-  };
-  exports.paddingBottom = function (_a) {
-    var width = _a.width,
-      height = _a.height;
-    return height / width * 100.0 + "%";
-  };
-  exports.scale = function (_a) {
-    var width = _a.width,
-      height = _a.height,
-      dimensions = __rest(_a, ["width", "height"]);
-    var scale = exports.factor(__assign({
-      width: width,
-      height: height
-    }, dimensions));
-    var scaledWidth = Math.floor(width * scale);
-    var scaledHeight = Math.floor(height * scale);
-    return {
-      width: scaledWidth,
-      height: scaledHeight,
-      paddingBottom: exports.paddingBottom({
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    exports.scale = exports.paddingBottom = exports.factor = void 0;
+    exports.factor = function (_a) {
+      var width = _a.width,
+        height = _a.height,
+        dimensions = __rest(_a, ["width", "height"]);
+      if ("maxHeight" in dimensions && !("maxWidth" in dimensions)) return dimensions.maxHeight / height;
+      if ("maxWidth" in dimensions && !("maxHeight" in dimensions)) return dimensions.maxWidth / width;
+      return Math.min(dimensions.maxWidth / width, dimensions.maxHeight / height);
+    };
+    exports.paddingBottom = function (_a) {
+      var width = _a.width,
+        height = _a.height;
+      return height / width * 100.0 + "%";
+    };
+    exports.scale = function (_a) {
+      var width = _a.width,
+        height = _a.height,
+        dimensions = __rest(_a, ["width", "height"]);
+      var scale = exports.factor(__assign({
         width: width,
         height: height
-      }),
-      scale: scale
+      }, dimensions));
+      var scaledWidth = Math.floor(width * scale);
+      var scaledHeight = Math.floor(height * scale);
+      return {
+        width: scaledWidth,
+        height: scaledHeight,
+        paddingBottom: exports.paddingBottom({
+          width: width,
+          height: height
+        }),
+        scale: scale
+      };
     };
-  };
-})(scale);
+  })(scale);
+  return scale;
+}
 
-(function (exports) {
+var hasRequiredDist$3;
+function requireDist$3() {
+  if (hasRequiredDist$3) return dist$3;
+  hasRequiredDist$3 = 1;
+  (function (exports) {
 
-  var __createBinding = commonjsGlobal && commonjsGlobal.__createBinding || (Object.create ? function (o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, {
-      enumerable: true,
-      get: function get() {
-        return m[k];
-      }
+    var __createBinding = dist$3 && dist$3.__createBinding || (Object.create ? function (o, m, k, k2) {
+      if (k2 === undefined) k2 = k;
+      Object.defineProperty(o, k2, {
+        enumerable: true,
+        get: function get() {
+          return m[k];
+        }
+      });
+    } : function (o, m, k, k2) {
+      if (k2 === undefined) k2 = k;
+      o[k2] = m[k];
     });
-  } : function (o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-  });
-  var __exportStar = commonjsGlobal && commonjsGlobal.__exportStar || function (m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
-  };
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  __exportStar(scale, exports);
-})(dist$3);
+    var __exportStar = dist$3 && dist$3.__exportStar || function (m, exports) {
+      for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    };
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    __exportStar(requireScale(), exports);
+  })(dist$3);
+  return dist$3;
+}
+
+var distExports$3 = requireDist$3();
 
 var _excluded$D = ["aspectWidth", "aspectHeight", "maxWidth", "maxHeight", "outlined", "children", "className"];
 var DEFAULT_PRODUCT_ASPECT_WIDTH = 128;
@@ -5277,18 +5376,18 @@ var scaleDimensions = function scaleDimensions(_ref) {
     height = _ref.height,
     maxWidth = _ref.maxWidth,
     maxHeight = _ref.maxHeight;
-  if (maxWidth && maxHeight) return dist$3.scale({
+  if (maxWidth && maxHeight) return distExports$3.scale({
     width: width,
     height: height,
     maxWidth: maxWidth,
     maxHeight: maxHeight
   });
-  if (maxWidth) return dist$3.scale({
+  if (maxWidth) return distExports$3.scale({
     width: width,
     height: height,
     maxWidth: maxWidth
   });
-  if (maxHeight) return dist$3.scale({
+  if (maxHeight) return distExports$3.scale({
     width: width,
     height: height,
     maxHeight: maxHeight
@@ -5296,7 +5395,7 @@ var scaleDimensions = function scaleDimensions(_ref) {
   return {
     width: width,
     height: height,
-    paddingBottom: dist$3.paddingBottom({
+    paddingBottom: distExports$3.paddingBottom({
       width: width,
       height: height
     }),
@@ -5364,7 +5463,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     itemType: "http://schema.org/BreadcrumbList",
     className: classNames('Breadcrumbs', className)
   }, rest), Children.map(children, function (child, index) {
-    if ( /*#__PURE__*/isValidElement(child)) {
+    if (/*#__PURE__*/isValidElement(child)) {
       position = position + 1;
       return /*#__PURE__*/cloneElement(child, _objectSpread2(_objectSpread2({}, child.props), {}, {
         key: index,
@@ -6238,7 +6337,7 @@ function _xfilter(f) {
  *
  *      R.filter(isEven, {a: 1, b: 2, c: 3, d: 4}); //=> {b: 2, d: 4}
  */
-var filter = /*#__PURE__*/_curry2( /*#__PURE__*/_dispatchable(['fantasy-land/filter', 'filter'], _xfilter, function (pred, filterable) {
+var filter = /*#__PURE__*/_curry2(/*#__PURE__*/_dispatchable(['fantasy-land/filter', 'filter'], _xfilter, function (pred, filterable) {
   return _isObject(filterable) ? _arrayReduce(function (acc, key) {
     if (pred(filterable[key])) {
       acc[key] = filterable[key];
@@ -6459,7 +6558,7 @@ var _xmap = function _xmap(f) {
  * @symb R.map(f, { x: a, y: b }) = { x: f(a), y: f(b) }
  * @symb R.map(f, functor_o) = functor_o.map(f)
  */
-var map = /*#__PURE__*/_curry2( /*#__PURE__*/_dispatchable(['fantasy-land/map', 'map'], _xmap, function map(fn, functor) {
+var map = /*#__PURE__*/_curry2(/*#__PURE__*/_dispatchable(['fantasy-land/map', 'map'], _xmap, function map(fn, functor) {
   switch (Object.prototype.toString.call(functor)) {
     case '[object Function]':
       return curryN(functor.length, function () {
@@ -6951,7 +7050,7 @@ function _xuniqBy(f) {
  *
  *      R.uniqBy(Math.abs, [-1, -5, 2, 10, 1, 2]); //=> [-1, -5, 2, 10]
  */
-var uniqBy = /*#__PURE__*/_curry2( /*#__PURE__*/_dispatchable([], _xuniqBy, function (fn, list) {
+var uniqBy = /*#__PURE__*/_curry2(/*#__PURE__*/_dispatchable([], _xuniqBy, function (fn, list) {
   var set = new _Set();
   var result = [];
   var idx = 0;
@@ -7053,7 +7152,7 @@ var range = /*#__PURE__*/_curry2(function range(from, to) {
   return result;
 });
 
-var breakpointKeys = Object.keys(dist$4.breakpoints);
+var breakpointKeys = Object.keys(distExports$4.breakpoints);
 
 // eslint-disable-next-line @typescript-eslint/no-magic-numbers
 var ONE_PIXEL = 1 / 16;
@@ -7064,19 +7163,19 @@ var getMediaQueryBounds = function getMediaQueryBounds(_ref) {
     case 'at':
       {
         var prevIndex = breakpointKeys.indexOf(breakpoint) - 1;
-        var prevWidth = prevIndex === -1 ? 0 : parseInt(dist$4.breakpoints[breakpointKeys[prevIndex]], 10) + ONE_PIXEL;
+        var prevWidth = prevIndex === -1 ? 0 : parseInt(distExports$4.breakpoints[breakpointKeys[prevIndex]], 10) + ONE_PIXEL;
         return {
           min: prevWidth,
-          max: parseInt(dist$4.breakpoints[breakpoint], 10)
+          max: parseInt(distExports$4.breakpoints[breakpoint], 10)
         };
       }
     case 'gt':
       return {
-        min: parseInt(dist$4.breakpoints[breakpoint], 10) + ONE_PIXEL
+        min: parseInt(distExports$4.breakpoints[breakpoint], 10) + ONE_PIXEL
       };
     case 'lt':
       return {
-        max: parseInt(dist$4.breakpoints[breakpoint], 10)
+        max: parseInt(distExports$4.breakpoints[breakpoint], 10)
       };
   }
 };
@@ -7198,15 +7297,15 @@ var Button = function Button(_ref) {
   }, rest));
 };
 
-var __assign$a = undefined && undefined.__assign || function () {
-  __assign$a = Object.assign || function (t) {
+var __assign$9 = undefined && undefined.__assign || function () {
+  __assign$9 = Object.assign || function (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$a.apply(this, arguments);
+  return __assign$9.apply(this, arguments);
 };
 var __rest$9 = undefined && undefined.__rest || function (s, e) {
   var t = {};
@@ -7224,7 +7323,7 @@ var Checkmark16 = function Checkmark16(_a) {
     _d = _a.width,
     width = _d === void 0 ? '16px' : _d,
     rest = __rest$9(_a, ["color", "height", "width"]);
-  var svgStyle = __assign$a({
+  var svgStyle = __assign$9({
     "position": "absolute",
     "top": "0",
     "right": "0",
@@ -7235,8 +7334,8 @@ var Checkmark16 = function Checkmark16(_a) {
   }, {
     fill: color
   });
-  return /*#__PURE__*/React.createElement("div", __assign$a({
-    style: __assign$a({
+  return /*#__PURE__*/React.createElement("div", __assign$9({
+    style: __assign$9({
       "position": "relative"
     }, {
       height: height,
@@ -7251,15 +7350,15 @@ var Checkmark16 = function Checkmark16(_a) {
 };
 Checkmark16.displayName = 'Checkmark16';
 
-var __assign$9 = undefined && undefined.__assign || function () {
-  __assign$9 = Object.assign || function (t) {
+var __assign$8 = undefined && undefined.__assign || function () {
+  __assign$8 = Object.assign || function (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$9.apply(this, arguments);
+  return __assign$8.apply(this, arguments);
 };
 var __rest$8 = undefined && undefined.__rest || function (s, e) {
   var t = {};
@@ -7277,7 +7376,7 @@ var Circle12 = function Circle12(_a) {
     _d = _a.width,
     width = _d === void 0 ? '12px' : _d,
     rest = __rest$8(_a, ["color", "height", "width"]);
-  var svgStyle = __assign$9({
+  var svgStyle = __assign$8({
     "position": "absolute",
     "top": "0",
     "right": "0",
@@ -7288,8 +7387,8 @@ var Circle12 = function Circle12(_a) {
   }, {
     fill: color
   });
-  return /*#__PURE__*/React.createElement("div", __assign$9({
-    style: __assign$9({
+  return /*#__PURE__*/React.createElement("div", __assign$8({
+    style: __assign$8({
       "position": "relative"
     }, {
       height: height,
@@ -7545,7 +7644,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     };
   }, [element]);
   if (!element) return null;
-  return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(Overlay, _extends$1({
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(Overlay, _extends$1({
     className: classNames('ModalOverlay', overlayClassName),
     show: show
   }, rest), /*#__PURE__*/React__default.createElement(Modal, {
@@ -7574,7 +7673,7 @@ var Text = function Text(_ref) {
   return /*#__PURE__*/React__default.createElement(Component, _extends$1({
     className: classNames("Text Text--".concat(treatment, " ").concat(family ? "Text--".concat(family) : ''), className),
     style: _objectSpread2({
-      color: dist$4.colors.all[color]
+      color: distExports$4.colors.all[color]
     }, style)
   }, rest), children);
 };
@@ -9265,377 +9364,430 @@ function requireReactInputMask_development() {
   return reactInputMask_development;
 }
 
-if (process.env.NODE_ENV === 'production') {
-  reactInputMask.exports = requireReactInputMask_production_min();
-} else {
-  reactInputMask.exports = requireReactInputMask_development();
+var hasRequiredReactInputMask;
+function requireReactInputMask() {
+  if (hasRequiredReactInputMask) return reactInputMask.exports;
+  hasRequiredReactInputMask = 1;
+  if (process.env.NODE_ENV === 'production') {
+    reactInputMask.exports = requireReactInputMask_production_min();
+  } else {
+    reactInputMask.exports = requireReactInputMask_development();
+  }
+  return reactInputMask.exports;
 }
-var reactInputMaskExports = reactInputMask.exports;
+
+var reactInputMaskExports = requireReactInputMask();
 var InputMask = /*@__PURE__*/getDefaultExportFromCjs(reactInputMaskExports);
 
-var cardTypes$1 = {
-  visa: {
-    niceType: "Visa",
-    type: "visa",
-    patterns: [4],
-    gaps: [4, 8, 12],
-    lengths: [16, 18, 19],
-    code: {
-      name: "CVV",
-      size: 3
-    }
-  },
-  mastercard: {
-    niceType: "Mastercard",
-    type: "mastercard",
-    patterns: [[51, 55], [2221, 2229], [223, 229], [23, 26], [270, 271], 2720],
-    gaps: [4, 8, 12],
-    lengths: [16],
-    code: {
-      name: "CVC",
-      size: 3
-    }
-  },
-  "american-express": {
-    niceType: "American Express",
-    type: "american-express",
-    patterns: [34, 37],
-    gaps: [4, 10],
-    lengths: [15],
-    code: {
-      name: "CID",
-      size: 4
-    }
-  },
-  "diners-club": {
-    niceType: "Diners Club",
-    type: "diners-club",
-    patterns: [[300, 305], 36, 38, 39],
-    gaps: [4, 10],
-    lengths: [14, 16, 19],
-    code: {
-      name: "CVV",
-      size: 3
-    }
-  },
-  discover: {
-    niceType: "Discover",
-    type: "discover",
-    patterns: [6011, [644, 649], 65],
-    gaps: [4, 8, 12],
-    lengths: [16, 19],
-    code: {
-      name: "CID",
-      size: 3
-    }
-  },
-  jcb: {
-    niceType: "JCB",
-    type: "jcb",
-    patterns: [2131, 1800, [3528, 3589]],
-    gaps: [4, 8, 12],
-    lengths: [16, 17, 18, 19],
-    code: {
-      name: "CVV",
-      size: 3
-    }
-  },
-  unionpay: {
-    niceType: "UnionPay",
-    type: "unionpay",
-    patterns: [620, [62100, 62182], [62184, 62187], [62185, 62197], [62200, 62205], [622010, 622999], 622018, [62207, 62209], [623, 626], 6270, 6272, 6276, [627700, 627779], [627781, 627799], [6282, 6289], 6291, 6292, 810, [8110, 8131], [8132, 8151], [8152, 8163], [8164, 8171]],
-    gaps: [4, 8, 12],
-    lengths: [14, 15, 16, 17, 18, 19],
-    code: {
-      name: "CVN",
-      size: 3
-    }
-  },
-  maestro: {
-    niceType: "Maestro",
-    type: "maestro",
-    patterns: [493698, [500000, 504174], [504176, 506698], [506779, 508999], [56, 59], 63, 67, 6],
-    gaps: [4, 8, 12],
-    lengths: [12, 13, 14, 15, 16, 17, 18, 19],
-    code: {
-      name: "CVC",
-      size: 3
-    }
-  },
-  elo: {
-    niceType: "Elo",
-    type: "elo",
-    patterns: [401178, 401179, 438935, 457631, 457632, 431274, 451416, 457393, 504175, [506699, 506778], [509000, 509999], 627780, 636297, 636368, [650031, 650033], [650035, 650051], [650405, 650439], [650485, 650538], [650541, 650598], [650700, 650718], [650720, 650727], [650901, 650978], [651652, 651679], [655000, 655019], [655021, 655058]],
-    gaps: [4, 8, 12],
-    lengths: [16],
-    code: {
-      name: "CVE",
-      size: 3
-    }
-  },
-  mir: {
-    niceType: "Mir",
-    type: "mir",
-    patterns: [[2200, 2204]],
-    gaps: [4, 8, 12],
-    lengths: [16, 17, 18, 19],
-    code: {
-      name: "CVP2",
-      size: 3
-    }
-  },
-  hiper: {
-    niceType: "Hiper",
-    type: "hiper",
-    patterns: [637095, 63737423, 63743358, 637568, 637599, 637609, 637612],
-    gaps: [4, 8, 12],
-    lengths: [16],
-    code: {
-      name: "CVC",
-      size: 3
-    }
-  },
-  hipercard: {
-    niceType: "Hipercard",
-    type: "hipercard",
-    patterns: [606282],
-    gaps: [4, 8, 12],
-    lengths: [16],
-    code: {
-      name: "CVC",
-      size: 3
+var cardTypes_1;
+var hasRequiredCardTypes;
+function requireCardTypes() {
+  if (hasRequiredCardTypes) return cardTypes_1;
+  hasRequiredCardTypes = 1;
+  var cardTypes = {
+    visa: {
+      niceType: "Visa",
+      type: "visa",
+      patterns: [4],
+      gaps: [4, 8, 12],
+      lengths: [16, 18, 19],
+      code: {
+        name: "CVV",
+        size: 3
+      }
+    },
+    mastercard: {
+      niceType: "Mastercard",
+      type: "mastercard",
+      patterns: [[51, 55], [2221, 2229], [223, 229], [23, 26], [270, 271], 2720],
+      gaps: [4, 8, 12],
+      lengths: [16],
+      code: {
+        name: "CVC",
+        size: 3
+      }
+    },
+    "american-express": {
+      niceType: "American Express",
+      type: "american-express",
+      patterns: [34, 37],
+      gaps: [4, 10],
+      lengths: [15],
+      code: {
+        name: "CID",
+        size: 4
+      }
+    },
+    "diners-club": {
+      niceType: "Diners Club",
+      type: "diners-club",
+      patterns: [[300, 305], 36, 38, 39],
+      gaps: [4, 10],
+      lengths: [14, 16, 19],
+      code: {
+        name: "CVV",
+        size: 3
+      }
+    },
+    discover: {
+      niceType: "Discover",
+      type: "discover",
+      patterns: [6011, [644, 649], 65],
+      gaps: [4, 8, 12],
+      lengths: [16, 19],
+      code: {
+        name: "CID",
+        size: 3
+      }
+    },
+    jcb: {
+      niceType: "JCB",
+      type: "jcb",
+      patterns: [2131, 1800, [3528, 3589]],
+      gaps: [4, 8, 12],
+      lengths: [16, 17, 18, 19],
+      code: {
+        name: "CVV",
+        size: 3
+      }
+    },
+    unionpay: {
+      niceType: "UnionPay",
+      type: "unionpay",
+      patterns: [620, [62100, 62182], [62184, 62187], [62185, 62197], [62200, 62205], [622010, 622999], 622018, [62207, 62209], [623, 626], 6270, 6272, 6276, [627700, 627779], [627781, 627799], [6282, 6289], 6291, 6292, 810, [8110, 8131], [8132, 8151], [8152, 8163], [8164, 8171]],
+      gaps: [4, 8, 12],
+      lengths: [14, 15, 16, 17, 18, 19],
+      code: {
+        name: "CVN",
+        size: 3
+      }
+    },
+    maestro: {
+      niceType: "Maestro",
+      type: "maestro",
+      patterns: [493698, [500000, 504174], [504176, 506698], [506779, 508999], [56, 59], 63, 67, 6],
+      gaps: [4, 8, 12],
+      lengths: [12, 13, 14, 15, 16, 17, 18, 19],
+      code: {
+        name: "CVC",
+        size: 3
+      }
+    },
+    elo: {
+      niceType: "Elo",
+      type: "elo",
+      patterns: [401178, 401179, 438935, 457631, 457632, 431274, 451416, 457393, 504175, [506699, 506778], [509000, 509999], 627780, 636297, 636368, [650031, 650033], [650035, 650051], [650405, 650439], [650485, 650538], [650541, 650598], [650700, 650718], [650720, 650727], [650901, 650978], [651652, 651679], [655000, 655019], [655021, 655058]],
+      gaps: [4, 8, 12],
+      lengths: [16],
+      code: {
+        name: "CVE",
+        size: 3
+      }
+    },
+    mir: {
+      niceType: "Mir",
+      type: "mir",
+      patterns: [[2200, 2204]],
+      gaps: [4, 8, 12],
+      lengths: [16, 17, 18, 19],
+      code: {
+        name: "CVP2",
+        size: 3
+      }
+    },
+    hiper: {
+      niceType: "Hiper",
+      type: "hiper",
+      patterns: [637095, 63737423, 63743358, 637568, 637599, 637609, 637612],
+      gaps: [4, 8, 12],
+      lengths: [16],
+      code: {
+        name: "CVC",
+        size: 3
+      }
+    },
+    hipercard: {
+      niceType: "Hipercard",
+      type: "hipercard",
+      patterns: [606282],
+      gaps: [4, 8, 12],
+      lengths: [16],
+      code: {
+        name: "CVC",
+        size: 3
+      }
     }
-  }
-};
-var cardTypes_1 = cardTypes$1;
+  };
+  cardTypes_1 = cardTypes;
+  return cardTypes_1;
+}
 
-var addMatchingCardsToResults$1 = {};
+var addMatchingCardsToResults = {};
 
-var clone$1 = {};
+var clone = {};
 
-Object.defineProperty(clone$1, "__esModule", {
-  value: true
-});
-clone$1.clone = void 0;
-function clone(originalObject) {
-  if (!originalObject) {
-    return null;
+var hasRequiredClone;
+function requireClone() {
+  if (hasRequiredClone) return clone;
+  hasRequiredClone = 1;
+  Object.defineProperty(clone, "__esModule", {
+    value: true
+  });
+  clone.clone = void 0;
+  function clone$1(originalObject) {
+    if (!originalObject) {
+      return null;
+    }
+    return JSON.parse(JSON.stringify(originalObject));
   }
-  return JSON.parse(JSON.stringify(originalObject));
+  clone.clone = clone$1;
+  return clone;
 }
-clone$1.clone = clone;
 
-var matches$1 = {};
+var matches = {};
 
-/*
- * Adapted from https://github.com/polvo-labs/card-type/blob/aaab11f80fa1939bccc8f24905a06ae3cd864356/src/cardType.js#L37-L42
- * */
-Object.defineProperty(matches$1, "__esModule", {
-  value: true
-});
-matches$1.matches = void 0;
-function matchesRange(cardNumber, min, max) {
-  var maxLengthToCheck = String(min).length;
-  var substr = cardNumber.substr(0, maxLengthToCheck);
-  var integerRepresentationOfCardNumber = parseInt(substr, 10);
-  min = parseInt(String(min).substr(0, substr.length), 10);
-  max = parseInt(String(max).substr(0, substr.length), 10);
-  return integerRepresentationOfCardNumber >= min && integerRepresentationOfCardNumber <= max;
-}
-function matchesPattern(cardNumber, pattern) {
-  pattern = String(pattern);
-  return pattern.substring(0, cardNumber.length) === cardNumber.substring(0, pattern.length);
-}
-function matches(cardNumber, pattern) {
-  if (Array.isArray(pattern)) {
-    return matchesRange(cardNumber, pattern[0], pattern[1]);
+var hasRequiredMatches;
+function requireMatches() {
+  if (hasRequiredMatches) return matches;
+  hasRequiredMatches = 1;
+  /*
+   * Adapted from https://github.com/polvo-labs/card-type/blob/aaab11f80fa1939bccc8f24905a06ae3cd864356/src/cardType.js#L37-L42
+   * */
+  Object.defineProperty(matches, "__esModule", {
+    value: true
+  });
+  matches.matches = void 0;
+  function matchesRange(cardNumber, min, max) {
+    var maxLengthToCheck = String(min).length;
+    var substr = cardNumber.substr(0, maxLengthToCheck);
+    var integerRepresentationOfCardNumber = parseInt(substr, 10);
+    min = parseInt(String(min).substr(0, substr.length), 10);
+    max = parseInt(String(max).substr(0, substr.length), 10);
+    return integerRepresentationOfCardNumber >= min && integerRepresentationOfCardNumber <= max;
+  }
+  function matchesPattern(cardNumber, pattern) {
+    pattern = String(pattern);
+    return pattern.substring(0, cardNumber.length) === cardNumber.substring(0, pattern.length);
+  }
+  function matches$1(cardNumber, pattern) {
+    if (Array.isArray(pattern)) {
+      return matchesRange(cardNumber, pattern[0], pattern[1]);
+    }
+    return matchesPattern(cardNumber, pattern);
   }
-  return matchesPattern(cardNumber, pattern);
+  matches.matches = matches$1;
+  return matches;
 }
-matches$1.matches = matches;
 
-Object.defineProperty(addMatchingCardsToResults$1, "__esModule", {
-  value: true
-});
-addMatchingCardsToResults$1.addMatchingCardsToResults = void 0;
-var clone_1$1 = clone$1;
-var matches_1 = matches$1;
-function addMatchingCardsToResults(cardNumber, cardConfiguration, results) {
-  var i, patternLength;
-  for (i = 0; i < cardConfiguration.patterns.length; i++) {
-    var pattern = cardConfiguration.patterns[i];
-    if (!(0, matches_1.matches)(cardNumber, pattern)) {
-      continue;
-    }
-    var clonedCardConfiguration = (0, clone_1$1.clone)(cardConfiguration);
-    if (Array.isArray(pattern)) {
-      patternLength = String(pattern[0]).length;
-    } else {
-      patternLength = String(pattern).length;
-    }
-    if (cardNumber.length >= patternLength) {
-      clonedCardConfiguration.matchStrength = patternLength;
+var hasRequiredAddMatchingCardsToResults;
+function requireAddMatchingCardsToResults() {
+  if (hasRequiredAddMatchingCardsToResults) return addMatchingCardsToResults;
+  hasRequiredAddMatchingCardsToResults = 1;
+  Object.defineProperty(addMatchingCardsToResults, "__esModule", {
+    value: true
+  });
+  addMatchingCardsToResults.addMatchingCardsToResults = void 0;
+  var clone_1 = requireClone();
+  var matches_1 = requireMatches();
+  function addMatchingCardsToResults$1(cardNumber, cardConfiguration, results) {
+    var i, patternLength;
+    for (i = 0; i < cardConfiguration.patterns.length; i++) {
+      var pattern = cardConfiguration.patterns[i];
+      if (!(0, matches_1.matches)(cardNumber, pattern)) {
+        continue;
+      }
+      var clonedCardConfiguration = (0, clone_1.clone)(cardConfiguration);
+      if (Array.isArray(pattern)) {
+        patternLength = String(pattern[0]).length;
+      } else {
+        patternLength = String(pattern).length;
+      }
+      if (cardNumber.length >= patternLength) {
+        clonedCardConfiguration.matchStrength = patternLength;
+      }
+      results.push(clonedCardConfiguration);
+      break;
     }
-    results.push(clonedCardConfiguration);
-    break;
   }
+  addMatchingCardsToResults.addMatchingCardsToResults = addMatchingCardsToResults$1;
+  return addMatchingCardsToResults;
 }
-addMatchingCardsToResults$1.addMatchingCardsToResults = addMatchingCardsToResults;
 
-var isValidInputType$1 = {};
+var isValidInputType = {};
 
-Object.defineProperty(isValidInputType$1, "__esModule", {
-  value: true
-});
-isValidInputType$1.isValidInputType = void 0;
-function isValidInputType(cardNumber) {
-  return typeof cardNumber === "string" || cardNumber instanceof String;
+var hasRequiredIsValidInputType;
+function requireIsValidInputType() {
+  if (hasRequiredIsValidInputType) return isValidInputType;
+  hasRequiredIsValidInputType = 1;
+  Object.defineProperty(isValidInputType, "__esModule", {
+    value: true
+  });
+  isValidInputType.isValidInputType = void 0;
+  function isValidInputType$1(cardNumber) {
+    return typeof cardNumber === "string" || cardNumber instanceof String;
+  }
+  isValidInputType.isValidInputType = isValidInputType$1;
+  return isValidInputType;
 }
-isValidInputType$1.isValidInputType = isValidInputType;
 
-var findBestMatch$1 = {};
+var findBestMatch = {};
 
-Object.defineProperty(findBestMatch$1, "__esModule", {
-  value: true
-});
-findBestMatch$1.findBestMatch = void 0;
-function hasEnoughResultsToDetermineBestMatch(results) {
-  var numberOfResultsWithMaxStrengthProperty = results.filter(function (result) {
-    return result.matchStrength;
-  }).length;
-  /*
-   * if all possible results have a maxStrength property that means the card
-   * number is sufficiently long enough to determine conclusively what the card
-   * type is
-   * */
-  return numberOfResultsWithMaxStrengthProperty > 0 && numberOfResultsWithMaxStrengthProperty === results.length;
-}
-function findBestMatch(results) {
-  if (!hasEnoughResultsToDetermineBestMatch(results)) {
-    return null;
-  }
-  return results.reduce(function (bestMatch, result) {
-    if (!bestMatch) {
-      return result;
-    }
+var hasRequiredFindBestMatch;
+function requireFindBestMatch() {
+  if (hasRequiredFindBestMatch) return findBestMatch;
+  hasRequiredFindBestMatch = 1;
+  Object.defineProperty(findBestMatch, "__esModule", {
+    value: true
+  });
+  findBestMatch.findBestMatch = void 0;
+  function hasEnoughResultsToDetermineBestMatch(results) {
+    var numberOfResultsWithMaxStrengthProperty = results.filter(function (result) {
+      return result.matchStrength;
+    }).length;
     /*
-     * If the current best match pattern is less specific than this result, set
-     * the result as the new best match
+     * if all possible results have a maxStrength property that means the card
+     * number is sufficiently long enough to determine conclusively what the card
+     * type is
      * */
-    if (Number(bestMatch.matchStrength) < Number(result.matchStrength)) {
-      return result;
+    return numberOfResultsWithMaxStrengthProperty > 0 && numberOfResultsWithMaxStrengthProperty === results.length;
+  }
+  function findBestMatch$1(results) {
+    if (!hasEnoughResultsToDetermineBestMatch(results)) {
+      return null;
     }
-    return bestMatch;
-  });
+    return results.reduce(function (bestMatch, result) {
+      if (!bestMatch) {
+        return result;
+      }
+      /*
+       * If the current best match pattern is less specific than this result, set
+       * the result as the new best match
+       * */
+      if (Number(bestMatch.matchStrength) < Number(result.matchStrength)) {
+        return result;
+      }
+      return bestMatch;
+    });
+  }
+  findBestMatch.findBestMatch = findBestMatch$1;
+  return findBestMatch;
 }
-findBestMatch$1.findBestMatch = findBestMatch;
 
-var __assign$8 = commonjsGlobal && commonjsGlobal.__assign || function () {
-  __assign$8 = Object.assign || function (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;
+var dist$2;
+var hasRequiredDist$2;
+function requireDist$2() {
+  if (hasRequiredDist$2) return dist$2;
+  hasRequiredDist$2 = 1;
+  var __assign = dist$2 && dist$2.__assign || function () {
+    __assign = Object.assign || function (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);
   };
-  return __assign$8.apply(this, arguments);
-};
-var cardTypes = cardTypes_1;
-var add_matching_cards_to_results_1 = addMatchingCardsToResults$1;
-var is_valid_input_type_1 = isValidInputType$1;
-var find_best_match_1 = findBestMatch$1;
-var clone_1 = clone$1;
-var customCards = {};
-var cardNames = {
-  VISA: "visa",
-  MASTERCARD: "mastercard",
-  AMERICAN_EXPRESS: "american-express",
-  DINERS_CLUB: "diners-club",
-  DISCOVER: "discover",
-  JCB: "jcb",
-  UNIONPAY: "unionpay",
-  MAESTRO: "maestro",
-  ELO: "elo",
-  MIR: "mir",
-  HIPER: "hiper",
-  HIPERCARD: "hipercard"
-};
-var ORIGINAL_TEST_ORDER = [cardNames.VISA, cardNames.MASTERCARD, cardNames.AMERICAN_EXPRESS, cardNames.DINERS_CLUB, cardNames.DISCOVER, cardNames.JCB, cardNames.UNIONPAY, cardNames.MAESTRO, cardNames.ELO, cardNames.MIR, cardNames.HIPER, cardNames.HIPERCARD];
-var testOrder = (0, clone_1.clone)(ORIGINAL_TEST_ORDER);
-function findType(cardType) {
-  return customCards[cardType] || cardTypes[cardType];
-}
-function getAllCardTypes() {
-  return testOrder.map(function (cardType) {
-    return (0, clone_1.clone)(findType(cardType));
-  });
-}
-function getCardPosition(name, ignoreErrorForNotExisting) {
-  if (ignoreErrorForNotExisting === void 0) {
-    ignoreErrorForNotExisting = false;
+  var cardTypes = requireCardTypes();
+  var add_matching_cards_to_results_1 = requireAddMatchingCardsToResults();
+  var is_valid_input_type_1 = requireIsValidInputType();
+  var find_best_match_1 = requireFindBestMatch();
+  var clone_1 = requireClone();
+  var customCards = {};
+  var cardNames = {
+    VISA: "visa",
+    MASTERCARD: "mastercard",
+    AMERICAN_EXPRESS: "american-express",
+    DINERS_CLUB: "diners-club",
+    DISCOVER: "discover",
+    JCB: "jcb",
+    UNIONPAY: "unionpay",
+    MAESTRO: "maestro",
+    ELO: "elo",
+    MIR: "mir",
+    HIPER: "hiper",
+    HIPERCARD: "hipercard"
+  };
+  var ORIGINAL_TEST_ORDER = [cardNames.VISA, cardNames.MASTERCARD, cardNames.AMERICAN_EXPRESS, cardNames.DINERS_CLUB, cardNames.DISCOVER, cardNames.JCB, cardNames.UNIONPAY, cardNames.MAESTRO, cardNames.ELO, cardNames.MIR, cardNames.HIPER, cardNames.HIPERCARD];
+  var testOrder = (0, clone_1.clone)(ORIGINAL_TEST_ORDER);
+  function findType(cardType) {
+    return customCards[cardType] || cardTypes[cardType];
+  }
+  function getAllCardTypes() {
+    return testOrder.map(function (cardType) {
+      return (0, clone_1.clone)(findType(cardType));
+    });
   }
-  var position = testOrder.indexOf(name);
-  if (!ignoreErrorForNotExisting && position === -1) {
-    throw new Error('"' + name + '" is not a supported card type.');
+  function getCardPosition(name, ignoreErrorForNotExisting) {
+    if (ignoreErrorForNotExisting === void 0) {
+      ignoreErrorForNotExisting = false;
+    }
+    var position = testOrder.indexOf(name);
+    if (!ignoreErrorForNotExisting && position === -1) {
+      throw new Error('"' + name + '" is not a supported card type.');
+    }
+    return position;
   }
-  return position;
-}
-function creditCardType(cardNumber) {
-  var results = [];
-  if (!(0, is_valid_input_type_1.isValidInputType)(cardNumber)) {
+  function creditCardType(cardNumber) {
+    var results = [];
+    if (!(0, is_valid_input_type_1.isValidInputType)(cardNumber)) {
+      return results;
+    }
+    if (cardNumber.length === 0) {
+      return getAllCardTypes();
+    }
+    testOrder.forEach(function (cardType) {
+      var cardConfiguration = findType(cardType);
+      (0, add_matching_cards_to_results_1.addMatchingCardsToResults)(cardNumber, cardConfiguration, results);
+    });
+    var bestMatch = (0, find_best_match_1.findBestMatch)(results);
+    if (bestMatch) {
+      return [bestMatch];
+    }
     return results;
   }
-  if (cardNumber.length === 0) {
-    return getAllCardTypes();
-  }
-  testOrder.forEach(function (cardType) {
-    var cardConfiguration = findType(cardType);
-    (0, add_matching_cards_to_results_1.addMatchingCardsToResults)(cardNumber, cardConfiguration, results);
-  });
-  var bestMatch = (0, find_best_match_1.findBestMatch)(results);
-  if (bestMatch) {
-    return [bestMatch];
-  }
-  return results;
+  creditCardType.getTypeInfo = function (cardType) {
+    return (0, clone_1.clone)(findType(cardType));
+  };
+  creditCardType.removeCard = function (name) {
+    var position = getCardPosition(name);
+    testOrder.splice(position, 1);
+  };
+  creditCardType.addCard = function (config) {
+    var existingCardPosition = getCardPosition(config.type, true);
+    customCards[config.type] = config;
+    if (existingCardPosition === -1) {
+      testOrder.push(config.type);
+    }
+  };
+  creditCardType.updateCard = function (cardType, updates) {
+    var originalObject = customCards[cardType] || cardTypes[cardType];
+    if (!originalObject) {
+      throw new Error("\"".concat(cardType, "\" is not a recognized type. Use `addCard` instead.'"));
+    }
+    if (updates.type && originalObject.type !== updates.type) {
+      throw new Error("Cannot overwrite type parameter.");
+    }
+    var clonedCard = (0, clone_1.clone)(originalObject);
+    clonedCard = __assign(__assign({}, clonedCard), updates);
+    customCards[clonedCard.type] = clonedCard;
+  };
+  creditCardType.changeOrder = function (name, position) {
+    var currentPosition = getCardPosition(name);
+    testOrder.splice(currentPosition, 1);
+    testOrder.splice(position, 0, name);
+  };
+  creditCardType.resetModifications = function () {
+    testOrder = (0, clone_1.clone)(ORIGINAL_TEST_ORDER);
+    customCards = {};
+  };
+  creditCardType.types = cardNames;
+  dist$2 = creditCardType;
+  return dist$2;
 }
-creditCardType.getTypeInfo = function (cardType) {
-  return (0, clone_1.clone)(findType(cardType));
-};
-creditCardType.removeCard = function (name) {
-  var position = getCardPosition(name);
-  testOrder.splice(position, 1);
-};
-creditCardType.addCard = function (config) {
-  var existingCardPosition = getCardPosition(config.type, true);
-  customCards[config.type] = config;
-  if (existingCardPosition === -1) {
-    testOrder.push(config.type);
-  }
-};
-creditCardType.updateCard = function (cardType, updates) {
-  var originalObject = customCards[cardType] || cardTypes[cardType];
-  if (!originalObject) {
-    throw new Error("\"".concat(cardType, "\" is not a recognized type. Use `addCard` instead.'"));
-  }
-  if (updates.type && originalObject.type !== updates.type) {
-    throw new Error("Cannot overwrite type parameter.");
-  }
-  var clonedCard = (0, clone_1.clone)(originalObject);
-  clonedCard = __assign$8(__assign$8({}, clonedCard), updates);
-  customCards[clonedCard.type] = clonedCard;
-};
-creditCardType.changeOrder = function (name, position) {
-  var currentPosition = getCardPosition(name);
-  testOrder.splice(currentPosition, 1);
-  testOrder.splice(position, 0, name);
-};
-creditCardType.resetModifications = function () {
-  testOrder = (0, clone_1.clone)(ORIGINAL_TEST_ORDER);
-  customCards = {};
-};
-creditCardType.types = cardNames;
-var dist$2 = creditCardType;
-var creditCardType$1 = /*@__PURE__*/getDefaultExportFromCjs(dist$2);
+
+var distExports$2 = requireDist$2();
+var creditCardType = /*@__PURE__*/getDefaultExportFromCjs(distExports$2);
 
 var __assign$7 = undefined && undefined.__assign || function () {
   __assign$7 = Object.assign || function (t) {
@@ -9829,27 +9981,41 @@ var dist$1 = {};
 
 var mapCursorToMax = {};
 
-Object.defineProperty(mapCursorToMax, "__esModule", {
-  value: true
-});
-mapCursorToMax.mapCursorToMax = function (cursor, max) {
-  if (max === 0) return 0;
-  if (cursor >= 0) return cursor % max;
-  var modulo = cursor % max;
-  if (modulo === 0) return Math.abs(modulo); // -0
-  return modulo + max;
-};
-
-(function (exports) {
-
-  function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-  }
-  Object.defineProperty(exports, "__esModule", {
+var hasRequiredMapCursorToMax;
+function requireMapCursorToMax() {
+  if (hasRequiredMapCursorToMax) return mapCursorToMax;
+  hasRequiredMapCursorToMax = 1;
+  Object.defineProperty(mapCursorToMax, "__esModule", {
     value: true
   });
-  __export(mapCursorToMax);
-})(dist$1);
+  mapCursorToMax.mapCursorToMax = function (cursor, max) {
+    if (max === 0) return 0;
+    if (cursor >= 0) return cursor % max;
+    var modulo = cursor % max;
+    if (modulo === 0) return Math.abs(modulo); // -0
+    return modulo + max;
+  };
+  return mapCursorToMax;
+}
+
+var hasRequiredDist$1;
+function requireDist$1() {
+  if (hasRequiredDist$1) return dist$1;
+  hasRequiredDist$1 = 1;
+  (function (exports) {
+
+    function __export(m) {
+      for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+    }
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    __export(requireMapCursorToMax());
+  })(dist$1);
+  return dist$1;
+}
+
+var distExports$1 = requireDist$1();
 
 var reducer$1 = function reducer(state, action) {
   switch (action.type) {
@@ -9913,7 +10079,7 @@ var useKeyboardListNavigation = function useKeyboardListNavigation(_ref) {
     dispatch = _useReducer2[1];
   var searchTerm = useRef('');
   var idleTimeout = useRef(null);
-  var index = dist$1.mapCursorToMax(state.cursor, list.length);
+  var index = distExports$1.mapCursorToMax(state.cursor, list.length);
   var handleKeyDown = useCallback(function (event) {
     switch (event.key) {
       case 'ArrowUp':
@@ -10134,7 +10300,8 @@ var Search20 = function Search20(_a) {
 };
 Search20.displayName = 'Search20';
 
-var _excluded$l = ["className", "onChange", "onClear", "roundBorders", "noBorders", "value"];
+var _excluded$l = ["className", "onChange", "onClear", "roundBorders", "noBorders", "value", "searchIconSize"];
+var SEARCH_ICON_DEFAULT_SIZE = 20;
 var DEFAULT_INPUT_VALUE = '';
 var SearchInput = function SearchInput(_ref) {
   var className = _ref.className,
@@ -10146,6 +10313,8 @@ var SearchInput = function SearchInput(_ref) {
     noBorders = _ref$noBorders === void 0 ? false : _ref$noBorders,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? DEFAULT_INPUT_VALUE : _ref$value,
+    _ref$searchIconSize = _ref.searchIconSize,
+    searchIconSize = _ref$searchIconSize === void 0 ? SEARCH_ICON_DEFAULT_SIZE : _ref$searchIconSize,
     rest = _objectWithoutProperties(_ref, _excluded$l);
   var ref = useRef(null);
   var _useState = useState(value),
@@ -10170,7 +10339,10 @@ var SearchInput = function SearchInput(_ref) {
     className: classNames('SearchInput', className)
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "SearchInput__icon"
-  }, /*#__PURE__*/React__default.createElement(Search20, null)), /*#__PURE__*/React__default.createElement(TextInput, _extends$1({
+  }, /*#__PURE__*/React__default.createElement(Search20, {
+    height: "".concat(searchIconSize, "px"),
+    width: "".concat(searchIconSize, "px")
+  })), /*#__PURE__*/React__default.createElement(TextInput, _extends$1({
     className: classNames('SearchInput__input', {
       'SearchInput__input--round-borders': roundBorders,
       'SearchInput__input--no-borders': noBorders
@@ -10930,7 +11102,7 @@ var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
     value = _useState2[0],
     setValue = _useState2[1];
   var mask = useMemo(function () {
-    var cardType = creditCardType$1(value)[0];
+    var cardType = creditCardType(value)[0];
     if (!cardType) return DEFAULT_MASK;
     var gaps = cardType.gaps,
       lengths = cardType.lengths;
@@ -11077,53 +11249,67 @@ var dist = {};
 
 var useCursor = {};
 
-Object.defineProperty(useCursor, "__esModule", {
-  value: true
-});
-var react_1 = React__default;
-var map_cursor_to_max_1 = dist$1;
-useCursor.useCursor = function (_a) {
-  var max = _a.max,
-    _b = _a.initialCursor,
-    initialCursor = _b === void 0 ? 0 : _b;
-  var _c = react_1.useState(initialCursor),
-    cursor = _c[0],
-    setCursor = _c[1];
-  react_1.useEffect(function () {
-    return setCursor(initialCursor);
-  }, [initialCursor]);
-  var handlePrev = react_1.useCallback(function () {
-    return setCursor(function (n) {
-      return n - 1;
-    });
-  }, []);
-  var handleNext = react_1.useCallback(function () {
-    return setCursor(function (n) {
-      return n + 1;
-    });
-  }, []);
-  var index = react_1.useMemo(function () {
-    return map_cursor_to_max_1.mapCursorToMax(cursor, max);
-  }, [cursor, max]);
-  return {
-    handlePrev: handlePrev,
-    handleNext: handleNext,
-    setCursor: setCursor,
-    cursor: cursor,
-    index: index
+var hasRequiredUseCursor;
+function requireUseCursor() {
+  if (hasRequiredUseCursor) return useCursor;
+  hasRequiredUseCursor = 1;
+  Object.defineProperty(useCursor, "__esModule", {
+    value: true
+  });
+  var react_1 = React__default;
+  var map_cursor_to_max_1 = requireDist$1();
+  useCursor.useCursor = function (_a) {
+    var max = _a.max,
+      _b = _a.initialCursor,
+      initialCursor = _b === void 0 ? 0 : _b;
+    var _c = react_1.useState(initialCursor),
+      cursor = _c[0],
+      setCursor = _c[1];
+    react_1.useEffect(function () {
+      return setCursor(initialCursor);
+    }, [initialCursor]);
+    var handlePrev = react_1.useCallback(function () {
+      return setCursor(function (n) {
+        return n - 1;
+      });
+    }, []);
+    var handleNext = react_1.useCallback(function () {
+      return setCursor(function (n) {
+        return n + 1;
+      });
+    }, []);
+    var index = react_1.useMemo(function () {
+      return map_cursor_to_max_1.mapCursorToMax(cursor, max);
+    }, [cursor, max]);
+    return {
+      handlePrev: handlePrev,
+      handleNext: handleNext,
+      setCursor: setCursor,
+      cursor: cursor,
+      index: index
+    };
   };
-};
+  return useCursor;
+}
 
-(function (exports) {
+var hasRequiredDist;
+function requireDist() {
+  if (hasRequiredDist) return dist;
+  hasRequiredDist = 1;
+  (function (exports) {
 
-  function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-  }
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  __export(useCursor);
-})(dist);
+    function __export(m) {
+      for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+    }
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    __export(requireUseCursor());
+  })(dist);
+  return dist;
+}
+
+var distExports = requireDist();
 
 var Window = function Window(props) {
   return /*#__PURE__*/React__default.createElement("svg", _extends$1({
@@ -11266,7 +11452,7 @@ var FRAMES = [Triangle, Diamond, ArcWindow, Circle];
 var Loading = function Loading(_ref) {
   var className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded$a);
-  var _useCursor = dist.useCursor({
+  var _useCursor = distExports.useCursor({
       max: FRAMES.length
     }),
     index = _useCursor.index,
@@ -11342,7 +11528,7 @@ var LoadingBalls = function LoadingBalls(_ref) {
 var INTERVAL_MS = 250;
 var LoadingShapes = function LoadingShapes() {
   var items = [Triangle, Diamond, ArcWindow, Circle];
-  var _useCursor = dist.useCursor({
+  var _useCursor = distExports.useCursor({
       max: items.length
     }),
     index = _useCursor.index,
@@ -12041,10 +12227,10 @@ var VerticalDivider = function VerticalDivider(_ref) {
 };
 
 var tokens = {
-  colors: dist$4.colors,
-  typography: dist$4.typography,
-  space: dist$4.space,
-  breakpoints: dist$4.breakpoints
+  colors: distExports$4.colors,
+  typography: distExports$4.typography,
+  space: distExports$4.space,
+  breakpoints: distExports$4.breakpoints
 };
 var Utilities = {
   States: States