no-frills-ui 0.0.14-alpha.0 → 0.0.14-alpha.1

package/dist/index.js

@@ -1,1612 +1,12 @@
 'use strict';
 
-var ReactJSXRuntime = require('react/jsx-runtime');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 var PropTypes = require('prop-types');
 var styled = require('@emotion/styled');
+var react = require('@emotion/react');
 var ReactDOM = require('react-dom');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var ReactJSXRuntime__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactJSXRuntime);
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-/*
-
-Based off glamor's StyleSheet, thanks Sunil ❤️
-
-high performance StyleSheet for css-in-js systems
-
-- uses multiple style tags behind the scenes for millions of rules
-- uses `insertRule` for appending in production for *much* faster performance
-
-// usage
-
-import { StyleSheet } from '@emotion/sheet'
-
-let styleSheet = new StyleSheet({ key: '', container: document.head })
-
-styleSheet.insert('#box { border: 1px solid red; }')
-- appends a css rule into the stylesheet
-
-styleSheet.flush()
-- empties the stylesheet of all its contents
-
-*/
-
-function sheetForTag(tag) {
-  if (tag.sheet) {
-    return tag.sheet;
-  } // this weirdness brought to you by firefox
-
-  /* istanbul ignore next */
-
-
-  for (var i = 0; i < document.styleSheets.length; i++) {
-    if (document.styleSheets[i].ownerNode === tag) {
-      return document.styleSheets[i];
-    }
-  } // this function should always return with a value
-  // TS can't understand it though so we make it stop complaining here
-
-
-  return undefined;
-}
-
-function createStyleElement(options) {
-  var tag = document.createElement('style');
-  tag.setAttribute('data-emotion', options.key);
-
-  if (options.nonce !== undefined) {
-    tag.setAttribute('nonce', options.nonce);
-  }
-
-  tag.appendChild(document.createTextNode(''));
-  tag.setAttribute('data-s', '');
-  return tag;
-}
-
-var StyleSheet = /*#__PURE__*/function () {
-  // Using Node instead of HTMLElement since container may be a ShadowRoot
-  function StyleSheet(options) {
-    var _this = this;
-
-    this._insertTag = function (tag) {
-      var before;
-
-      if (_this.tags.length === 0) {
-        if (_this.insertionPoint) {
-          before = _this.insertionPoint.nextSibling;
-        } else if (_this.prepend) {
-          before = _this.container.firstChild;
-        } else {
-          before = _this.before;
-        }
-      } else {
-        before = _this.tags[_this.tags.length - 1].nextSibling;
-      }
-
-      _this.container.insertBefore(tag, before);
-
-      _this.tags.push(tag);
-    };
-
-    this.isSpeedy = options.speedy === undefined ? true : options.speedy;
-    this.tags = [];
-    this.ctr = 0;
-    this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
-
-    this.key = options.key;
-    this.container = options.container;
-    this.prepend = options.prepend;
-    this.insertionPoint = options.insertionPoint;
-    this.before = null;
-  }
-
-  var _proto = StyleSheet.prototype;
-
-  _proto.hydrate = function hydrate(nodes) {
-    nodes.forEach(this._insertTag);
-  };
-
-  _proto.insert = function insert(rule) {
-    // the max length is how many rules we have per style tag, it's 65000 in speedy mode
-    // it's 1 in dev because we insert source maps that map a single rule to a location
-    // and you can only have one source map per style tag
-    if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
-      this._insertTag(createStyleElement(this));
-    }
-
-    var tag = this.tags[this.tags.length - 1];
-
-    if (this.isSpeedy) {
-      var sheet = sheetForTag(tag);
-
-      try {
-        // this is the ultrafast version, works across browsers
-        // the big drawback is that the css won't be editable in devtools
-        sheet.insertRule(rule, sheet.cssRules.length);
-      } catch (e) {
-      }
-    } else {
-      tag.appendChild(document.createTextNode(rule));
-    }
-
-    this.ctr++;
-  };
-
-  _proto.flush = function flush() {
-    this.tags.forEach(function (tag) {
-      var _tag$parentNode;
-
-      return (_tag$parentNode = tag.parentNode) == null ? void 0 : _tag$parentNode.removeChild(tag);
-    });
-    this.tags = [];
-    this.ctr = 0;
-  };
-
-  return StyleSheet;
-}();
-
-var e$1="-ms-";var r$1="-moz-";var a="-webkit-";var n$1="comm";var c$1="rule";var s="decl";var i="@import";var h$1="@keyframes";var $="@layer";var g$1=Math.abs;var k$1=String.fromCharCode;var m$1=Object.assign;function x$1(e,r){return O(e,0)^45?(((r<<2^O(e,0))<<2^O(e,1))<<2^O(e,2))<<2^O(e,3):0}function y$1(e){return e.trim()}function j(e,r){return (e=r.exec(e))?e[0]:e}function z$1(e,r,a){return e.replace(r,a)}function C(e,r){return e.indexOf(r)}function O(e,r){return e.charCodeAt(r)|0}function A$1(e,r,a){return e.slice(r,a)}function M(e){return e.length}function S(e){return e.length}function q$1(e,r){return r.push(e),e}function B(e,r){return e.map(r).join("")}var D=1;var E=1;var F=0;var G=0;var H=0;var I="";function J(e,r,a,n,c,s,t){return {value:e,root:r,parent:a,type:n,props:c,children:s,line:D,column:E,length:t,return:""}}function K(e,r){return m$1(J("",null,null,"",null,null,0),e,{length:-e.length},r)}function L(){return H}function N(){H=G>0?O(I,--G):0;if(E--,H===10)E=1,D--;return H}function P(){H=G<F?O(I,G++):0;if(E++,H===10)E=1,D++;return H}function Q(){return O(I,G)}function R(){return G}function T(e,r){return A$1(I,e,r)}function U(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function V(e){return D=E=1,F=M(I=e),G=0,[]}function W(e){return I="",e}function X(e){return y$1(T(G-1,re(e===91?e+2:e===40?e+1:e)))}function Z(e){while(H=Q())if(H<33)P();else break;return U(e)>2||U(H)>3?"":" "}function ee(e,r){while(--r&&P())if(H<48||H>102||H>57&&H<65||H>70&&H<97)break;return T(e,R()+(r<6&&Q()==32&&P()==32))}function re(e){while(P())switch(H){case e:return G;case 34:case 39:if(e!==34&&e!==39)re(H);break;case 40:if(e===41)re(e);break;case 92:P();break}return G}function ae(e,r){while(P())if(e+H===47+10)break;else if(e+H===42+42&&Q()===47)break;return "/*"+T(r,G-1)+"*"+k$1(e===47?e:P())}function ne(e){while(!U(Q()))P();return T(e,G)}function ce(e){return W(se("",null,null,null,[""],e=V(e),0,[0],e))}function se(e,r,a,n,c,s,t,u,i){var f=0;var o=0;var l=t;var v=0;var p=0;var h=0;var b=1;var w=1;var d=1;var $=0;var g="";var m=c;var x=s;var y=n;var j=g;while(w)switch(h=$,$=P()){case 40:if(h!=108&&O(j,l-1)==58){if(C(j+=z$1(X($),"&","&\f"),"&\f")!=-1)d=-1;break}case 34:case 39:case 91:j+=X($);break;case 9:case 10:case 13:case 32:j+=Z(h);break;case 92:j+=ee(R()-1,7);continue;case 47:switch(Q()){case 42:case 47:q$1(ue(ae(P(),R()),r,a),i);break;default:j+="/";}break;case 123*b:u[f++]=M(j)*d;case 125*b:case 59:case 0:switch($){case 0:case 125:w=0;case 59+o:if(d==-1)j=z$1(j,/\f/g,"");if(p>0&&M(j)-l)q$1(p>32?ie(j+";",n,a,l-1):ie(z$1(j," ","")+";",n,a,l-2),i);break;case 59:j+=";";default:q$1(y=te(j,r,a,f,o,c,u,g,m=[],x=[],l),s);if($===123)if(o===0)se(j,r,y,y,m,s,l,u,x);else switch(v===99&&O(j,3)===110?100:v){case 100:case 108:case 109:case 115:se(e,y,y,n&&q$1(te(e,y,y,0,0,c,u,g,c,m=[],l),x),c,x,l,u,n?m:x);break;default:se(j,y,y,y,[""],x,0,u,x);}}f=o=p=0,b=d=1,g=j="",l=t;break;case 58:l=1+M(j),p=h;default:if(b<1)if($==123)--b;else if($==125&&b++==0&&N()==125)continue;switch(j+=k$1($),$*b){case 38:d=o>0?1:(j+="\f",-1);break;case 44:u[f++]=(M(j)-1)*d,d=1;break;case 64:if(Q()===45)j+=X(P());v=Q(),o=l=M(g=j+=ne(R())),$++;break;case 45:if(h===45&&M(j)==2)b=0;}}return s}function te(e,r,a,n,s,t,u,i,f,o,l){var v=s-1;var p=s===0?t:[""];var h=S(p);for(var b=0,w=0,d=0;b<n;++b)for(var $=0,k=A$1(e,v+1,v=g$1(w=u[b])),m=e;$<h;++$)if(m=y$1(w>0?p[$]+" "+k:z$1(k,/&\f/g,p[$])))f[d++]=m;return J(e,r,a,s===0?c$1:i,f,o,l)}function ue(e,r,a){return J(e,r,a,n$1,k$1(L()),A$1(e,2,-2),0)}function ie(e,r,a,n){return J(e,r,a,s,A$1(e,0,n),A$1(e,n+1,-1),n)}function oe(e,r){var a="";var n=S(e);for(var c=0;c<n;c++)a+=r(e[c],c,e,r)||"";return a}function le(e,r,a,t){switch(e.type){case $:if(e.children.length)break;case i:case s:return e.return=e.return||e.value;case n$1:return "";case h$1:return e.return=e.value+"{"+oe(e.children,t)+"}";case c$1:e.value=e.props.join(",");}return M(a=oe(e.children,t))?e.return=e.value+"{"+a+"}":""}function ve(e){var r=S(e);return function(a,n,c,s){var t="";for(var u=0;u<r;u++)t+=e[u](a,n,c,s)||"";return t}}function pe(e){return function(r){if(!r.root)if(r=r.return)e(r);}}
-
-var weakMemoize = function weakMemoize(func) {
-  var cache = new WeakMap();
-  return function (arg) {
-    if (cache.has(arg)) {
-      // Use non-null assertion because we just checked that the cache `has` it
-      // This allows us to remove `undefined` from the return value
-      return cache.get(arg);
-    }
-
-    var ret = func(arg);
-    cache.set(arg, ret);
-    return ret;
-  };
-};
-
-function memoize(fn) {
-  var cache = Object.create(null);
-  return function (arg) {
-    if (cache[arg] === undefined) cache[arg] = fn(arg);
-    return cache[arg];
-  };
-}
-
-var isBrowser$3 = typeof document !== 'undefined';
-
-var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
-  var previous = 0;
-  var character = 0;
-
-  while (true) {
-    previous = character;
-    character = Q(); // &\f
-
-    if (previous === 38 && character === 12) {
-      points[index] = 1;
-    }
-
-    if (U(character)) {
-      break;
-    }
-
-    P();
-  }
-
-  return T(begin, G);
-};
-
-var toRules = function toRules(parsed, points) {
-  // pretend we've started with a comma
-  var index = -1;
-  var character = 44;
-
-  do {
-    switch (U(character)) {
-      case 0:
-        // &\f
-        if (character === 38 && Q() === 12) {
-          // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
-          // stylis inserts \f after & to know when & where it should replace this sequence with the context selector
-          // and when it should just concatenate the outer and inner selectors
-          // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
-          points[index] = 1;
-        }
-
-        parsed[index] += identifierWithPointTracking(G - 1, points, index);
-        break;
-
-      case 2:
-        parsed[index] += X(character);
-        break;
-
-      case 4:
-        // comma
-        if (character === 44) {
-          // colon
-          parsed[++index] = Q() === 58 ? '&\f' : '';
-          points[index] = parsed[index].length;
-          break;
-        }
-
-      // fallthrough
-
-      default:
-        parsed[index] += k$1(character);
-    }
-  } while (character = P());
-
-  return parsed;
-};
-
-var getRules = function getRules(value, points) {
-  return W(toRules(V(value), points));
-}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
-
-
-var fixedElements = /* #__PURE__ */new WeakMap();
-var compat = function compat(element) {
-  if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo
-  // negative .length indicates that this rule has been already prefixed
-  element.length < 1) {
-    return;
-  }
-
-  var value = element.value,
-      parent = element.parent;
-  var isImplicitRule = element.column === parent.column && element.line === parent.line;
-
-  while (parent.type !== 'rule') {
-    parent = parent.parent;
-    if (!parent) return;
-  } // short-circuit for the simplest case
-
-
-  if (element.props.length === 1 && value.charCodeAt(0) !== 58
-  /* colon */
-  && !fixedElements.get(parent)) {
-    return;
-  } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
-  // then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
-
-
-  if (isImplicitRule) {
-    return;
-  }
-
-  fixedElements.set(element, true);
-  var points = [];
-  var rules = getRules(value, points);
-  var parentRules = parent.props;
-
-  for (var i = 0, k = 0; i < rules.length; i++) {
-    for (var j = 0; j < parentRules.length; j++, k++) {
-      element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
-    }
-  }
-};
-var removeLabel = function removeLabel(element) {
-  if (element.type === 'decl') {
-    var value = element.value;
-
-    if ( // charcode for l
-    value.charCodeAt(0) === 108 && // charcode for b
-    value.charCodeAt(2) === 98) {
-      // this ignores label
-      element["return"] = '';
-      element.value = '';
-    }
-  }
-};
-
-/* eslint-disable no-fallthrough */
-
-function prefix(value, length) {
-  switch (x$1(value, length)) {
-    // color-adjust
-    case 5103:
-      return a + 'print-' + value + value;
-    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
-
-    case 5737:
-    case 4201:
-    case 3177:
-    case 3433:
-    case 1641:
-    case 4457:
-    case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
-
-    case 5572:
-    case 6356:
-    case 5844:
-    case 3191:
-    case 6645:
-    case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
-
-    case 6391:
-    case 5879:
-    case 5623:
-    case 6135:
-    case 4599:
-    case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
-
-    case 4215:
-    case 6389:
-    case 5109:
-    case 5365:
-    case 5621:
-    case 3829:
-      return a + value + value;
-    // appearance, user-select, transform, hyphens, text-size-adjust
-
-    case 5349:
-    case 4246:
-    case 4810:
-    case 6968:
-    case 2756:
-      return a + value + r$1 + value + e$1 + value + value;
-    // flex, flex-direction
-
-    case 6828:
-    case 4268:
-      return a + value + e$1 + value + value;
-    // order
-
-    case 6165:
-      return a + value + e$1 + 'flex-' + value + value;
-    // align-items
-
-    case 5187:
-      return a + value + z$1(value, /(\w+).+(:[^]+)/, a + 'box-$1$2' + e$1 + 'flex-$1$2') + value;
-    // align-self
-
-    case 5443:
-      return a + value + e$1 + 'flex-item-' + z$1(value, /flex-|-self/, '') + value;
-    // align-content
-
-    case 4675:
-      return a + value + e$1 + 'flex-line-pack' + z$1(value, /align-content|flex-|-self/, '') + value;
-    // flex-shrink
-
-    case 5548:
-      return a + value + e$1 + z$1(value, 'shrink', 'negative') + value;
-    // flex-basis
-
-    case 5292:
-      return a + value + e$1 + z$1(value, 'basis', 'preferred-size') + value;
-    // flex-grow
-
-    case 6060:
-      return a + 'box-' + z$1(value, '-grow', '') + a + value + e$1 + z$1(value, 'grow', 'positive') + value;
-    // transition
-
-    case 4554:
-      return a + z$1(value, /([^-])(transform)/g, '$1' + a + '$2') + value;
-    // cursor
-
-    case 6187:
-      return z$1(z$1(z$1(value, /(zoom-|grab)/, a + '$1'), /(image-set)/, a + '$1'), value, '') + value;
-    // background, background-image
-
-    case 5495:
-    case 3959:
-      return z$1(value, /(image-set\([^]*)/, a + '$1' + '$`$1');
-    // justify-content
-
-    case 4968:
-      return z$1(z$1(value, /(.+:)(flex-)?(.*)/, a + 'box-pack:$3' + e$1 + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + a + value + value;
-    // (margin|padding)-inline-(start|end)
-
-    case 4095:
-    case 3583:
-    case 4068:
-    case 2532:
-      return z$1(value, /(.+)-inline(.+)/, a + '$1$2') + value;
-    // (min|max)?(width|height|inline-size|block-size)
-
-    case 8116:
-    case 7059:
-    case 5753:
-    case 5535:
-    case 5445:
-    case 5701:
-    case 4933:
-    case 4677:
-    case 5533:
-    case 5789:
-    case 5021:
-    case 4765:
-      // stretch, max-content, min-content, fill-available
-      if (M(value) - 1 - length > 6) switch (O(value, length + 1)) {
-        // (m)ax-content, (m)in-content
-        case 109:
-          // -
-          if (O(value, length + 4) !== 45) break;
-        // (f)ill-available, (f)it-content
-
-        case 102:
-          return z$1(value, /(.+:)(.+)-([^]+)/, '$1' + a + '$2-$3' + '$1' + r$1 + (O(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
-        // (s)tretch
-
-        case 115:
-          return ~C(value, 'stretch') ? prefix(z$1(value, 'stretch', 'fill-available'), length) + value : value;
-      }
-      break;
-    // position: sticky
-
-    case 4949:
-      // (s)ticky?
-      if (O(value, length + 1) !== 115) break;
-    // display: (flex|inline-flex)
-
-    case 6444:
-      switch (O(value, M(value) - 3 - (~C(value, '!important') && 10))) {
-        // stic(k)y
-        case 107:
-          return z$1(value, ':', ':' + a) + value;
-        // (inline-)?fl(e)x
-
-        case 101:
-          return z$1(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + a + (O(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + a + '$2$3' + '$1' + e$1 + '$2box$3') + value;
-      }
-
-      break;
-    // writing-mode
-
-    case 5936:
-      switch (O(value, length + 11)) {
-        // vertical-l(r)
-        case 114:
-          return a + value + e$1 + z$1(value, /[svh]\w+-[tblr]{2}/, 'tb') + value;
-        // vertical-r(l)
-
-        case 108:
-          return a + value + e$1 + z$1(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value;
-        // horizontal(-)tb
-
-        case 45:
-          return a + value + e$1 + z$1(value, /[svh]\w+-[tblr]{2}/, 'lr') + value;
-      }
-
-      return a + value + e$1 + value + value;
-  }
-
-  return value;
-}
-
-var prefixer = function prefixer(element, index, children, callback) {
-  if (element.length > -1) if (!element["return"]) switch (element.type) {
-    case s:
-      element["return"] = prefix(element.value, element.length);
-      break;
-
-    case h$1:
-      return oe([K(element, {
-        value: z$1(element.value, '@', '@' + a)
-      })], callback);
-
-    case c$1:
-      if (element.length) return B(element.props, function (value) {
-        switch (j(value, /(::plac\w+|:read-\w+)/)) {
-          // :read-(only|write)
-          case ':read-only':
-          case ':read-write':
-            return oe([K(element, {
-              props: [z$1(value, /:(read-\w+)/, ':' + r$1 + '$1')]
-            })], callback);
-          // :placeholder
-
-          case '::placeholder':
-            return oe([K(element, {
-              props: [z$1(value, /:(plac\w+)/, ':' + a + 'input-$1')]
-            }), K(element, {
-              props: [z$1(value, /:(plac\w+)/, ':' + r$1 + '$1')]
-            }), K(element, {
-              props: [z$1(value, /:(plac\w+)/, e$1 + 'input-$1')]
-            })], callback);
-        }
-
-        return '';
-      });
-  }
-};
-
-/* import type { StylisPlugin } from './types' */
-
-/*
-export type Options = {
-  nonce?: string,
-  stylisPlugins?: StylisPlugin[],
-  key: string,
-  container?: HTMLElement,
-  speedy?: boolean,
-  prepend?: boolean,
-  insertionPoint?: HTMLElement
-}
-*/
-
-var getServerStylisCache = isBrowser$3 ? undefined : weakMemoize(function () {
-  return memoize(function () {
-    var cache = {};
-    return function (name) {
-      return cache[name];
-    };
-  });
-});
-var defaultStylisPlugins = [prefixer];
-
-var createCache = function
-  /*: EmotionCache */
-createCache(options
-/*: Options */
-) {
-  var key = options.key;
-
-  if (isBrowser$3 && key === 'css') {
-    var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
-    // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
-    // note this very very intentionally targets all style elements regardless of the key to ensure
-    // that creating a cache works inside of render of a React component
-
-    Array.prototype.forEach.call(ssrStyles, function (node
-    /*: HTMLStyleElement */
-    ) {
-      // we want to only move elements which have a space in the data-emotion attribute value
-      // because that indicates that it is an Emotion 11 server-side rendered style elements
-      // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
-      // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
-      // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
-      // will not result in the Emotion 10 styles being destroyed
-      var dataEmotionAttribute = node.getAttribute('data-emotion');
-
-      if (dataEmotionAttribute.indexOf(' ') === -1) {
-        return;
-      }
-
-      document.head.appendChild(node);
-      node.setAttribute('data-s', '');
-    });
-  }
-
-  var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
-
-  var inserted = {};
-  var container;
-  /* : Node */
-
-  var nodesToHydrate = [];
-
-  if (isBrowser$3) {
-    container = options.container || document.head;
-    Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
-    // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
-    document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node
-    /*: HTMLStyleElement */
-    ) {
-      var attrib = node.getAttribute("data-emotion").split(' ');
-
-      for (var i = 1; i < attrib.length; i++) {
-        inserted[attrib[i]] = true;
-      }
-
-      nodesToHydrate.push(node);
-    });
-  }
-
-  var _insert;
-  /*: (
-  selector: string,
-  serialized: SerializedStyles,
-  sheet: StyleSheet,
-  shouldCache: boolean
-  ) => string | void */
-
-
-  var omnipresentPlugins = [compat, removeLabel];
-
-  if (isBrowser$3) {
-    var currentSheet;
-    var finalizingPlugins = [le, pe(function (rule) {
-      currentSheet.insert(rule);
-    })];
-    var serializer = ve(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
-
-    var stylis = function stylis(styles) {
-      return oe(ce(styles), serializer);
-    };
-
-    _insert = function
-      /*: void */
-    insert(selector
-    /*: string */
-    , serialized
-    /*: SerializedStyles */
-    , sheet
-    /*: StyleSheet */
-    , shouldCache
-    /*: boolean */
-    ) {
-      currentSheet = sheet;
-
-      stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
-
-      if (shouldCache) {
-        cache.inserted[serialized.name] = true;
-      }
-    };
-  } else {
-    var _finalizingPlugins = [le];
-
-    var _serializer = ve(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
-
-    var _stylis = function _stylis(styles) {
-      return oe(ce(styles), _serializer);
-    };
-
-    var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
-
-    var getRules = function
-      /*: string */
-    getRules(selector
-    /*: string */
-    , serialized
-    /*: SerializedStyles */
-    ) {
-      var name = serialized.name;
-
-      if (serverStylisCache[name] === undefined) {
-        serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
-      }
-
-      return serverStylisCache[name];
-    };
-
-    _insert = function
-      /*: string | void */
-    _insert(selector
-    /*: string */
-    , serialized
-    /*: SerializedStyles */
-    , sheet
-    /*: StyleSheet */
-    , shouldCache
-    /*: boolean */
-    ) {
-      var name = serialized.name;
-      var rules = getRules(selector, serialized);
-
-      if (cache.compat === undefined) {
-        // in regular mode, we don't set the styles on the inserted cache
-        // since we don't need to and that would be wasting memory
-        // we return them so that they are rendered in a style tag
-        if (shouldCache) {
-          cache.inserted[name] = true;
-        }
-
-        return rules;
-      } else {
-        // in compat mode, we put the styles on the inserted cache so
-        // that emotion-server can pull out the styles
-        // except when we don't want to cache it which was in Global but now
-        // is nowhere but we don't want to do a major right now
-        // and just in case we're going to leave the case here
-        // it's also not affecting client side bundle size
-        // so it's really not a big deal
-        if (shouldCache) {
-          cache.inserted[name] = rules;
-        } else {
-          return rules;
-        }
-      }
-    };
-  }
-
-  var cache
-  /*: EmotionCache */
-  = {
-    key: key,
-    sheet: new StyleSheet({
-      key: key,
-      container: container,
-      nonce: options.nonce,
-      speedy: options.speedy,
-      prepend: options.prepend,
-      insertionPoint: options.insertionPoint
-    }),
-    nonce: options.nonce,
-    inserted: inserted,
-    registered: {},
-    insert: _insert
-  };
-  cache.sheet.hydrate(nodesToHydrate);
-  return cache;
-};
-
-function unwrapExports (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
-Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment$1=e;var Lazy=t;var Memo=r;var Portal=d;
-var Profiler=g;var StrictMode=f;var Suspense=p;var isAsyncMode=function(a){return A(a)||z(a)===l};var isConcurrentMode=A;var isContextConsumer=function(a){return z(a)===k};var isContextProvider=function(a){return z(a)===h};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};var isForwardRef=function(a){return z(a)===n};var isFragment=function(a){return z(a)===e};var isLazy=function(a){return z(a)===t};
-var isMemo=function(a){return z(a)===r};var isPortal=function(a){return z(a)===d};var isProfiler=function(a){return z(a)===g};var isStrictMode=function(a){return z(a)===f};var isSuspense=function(a){return z(a)===p};
-var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};var typeOf=z;
-
-var reactIs_production_min = {
-	AsyncMode: AsyncMode,
-	ConcurrentMode: ConcurrentMode,
-	ContextConsumer: ContextConsumer,
-	ContextProvider: ContextProvider,
-	Element: Element,
-	ForwardRef: ForwardRef,
-	Fragment: Fragment$1,
-	Lazy: Lazy,
-	Memo: Memo,
-	Portal: Portal,
-	Profiler: Profiler,
-	StrictMode: StrictMode,
-	Suspense: Suspense,
-	isAsyncMode: isAsyncMode,
-	isConcurrentMode: isConcurrentMode,
-	isContextConsumer: isContextConsumer,
-	isContextProvider: isContextProvider,
-	isElement: isElement,
-	isForwardRef: isForwardRef,
-	isFragment: isFragment,
-	isLazy: isLazy,
-	isMemo: isMemo,
-	isPortal: isPortal,
-	isProfiler: isProfiler,
-	isStrictMode: isStrictMode,
-	isSuspense: isSuspense,
-	isValidElementType: isValidElementType,
-	typeOf: typeOf
-};
-
-var reactIs_development = createCommonjsModule(function (module, exports) {
-
-
-
-if (process.env.NODE_ENV !== "production") {
-  (function() {
-
-// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-// nor polyfill, then a plain number is used for performance.
-var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
-var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
-var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
-var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
-var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
-var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
-var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
-// (unstable) APIs that have been removed. Can we remove the symbols?
-
-var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
-var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
-var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
-var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
-var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
-var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
-var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
-var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
-var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
-
-function isValidElementType(type) {
-  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
-}
-
-function typeOf(object) {
-  if (typeof object === 'object' && object !== null) {
-    var $$typeof = object.$$typeof;
-
-    switch ($$typeof) {
-      case REACT_ELEMENT_TYPE:
-        var type = object.type;
-
-        switch (type) {
-          case REACT_ASYNC_MODE_TYPE:
-          case REACT_CONCURRENT_MODE_TYPE:
-          case REACT_FRAGMENT_TYPE:
-          case REACT_PROFILER_TYPE:
-          case REACT_STRICT_MODE_TYPE:
-          case REACT_SUSPENSE_TYPE:
-            return type;
-
-          default:
-            var $$typeofType = type && type.$$typeof;
-
-            switch ($$typeofType) {
-              case REACT_CONTEXT_TYPE:
-              case REACT_FORWARD_REF_TYPE:
-              case REACT_LAZY_TYPE:
-              case REACT_MEMO_TYPE:
-              case REACT_PROVIDER_TYPE:
-                return $$typeofType;
-
-              default:
-                return $$typeof;
-            }
-
-        }
-
-      case REACT_PORTAL_TYPE:
-        return $$typeof;
-    }
-  }
-
-  return undefined;
-} // AsyncMode is deprecated along with isAsyncMode
-
-var AsyncMode = REACT_ASYNC_MODE_TYPE;
-var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
-var ContextConsumer = REACT_CONTEXT_TYPE;
-var ContextProvider = REACT_PROVIDER_TYPE;
-var Element = REACT_ELEMENT_TYPE;
-var ForwardRef = REACT_FORWARD_REF_TYPE;
-var Fragment = REACT_FRAGMENT_TYPE;
-var Lazy = REACT_LAZY_TYPE;
-var Memo = REACT_MEMO_TYPE;
-var Portal = REACT_PORTAL_TYPE;
-var Profiler = REACT_PROFILER_TYPE;
-var StrictMode = REACT_STRICT_MODE_TYPE;
-var Suspense = REACT_SUSPENSE_TYPE;
-var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
-
-function isAsyncMode(object) {
-  {
-    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
-
-      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
-    }
-  }
-
-  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
-}
-function isConcurrentMode(object) {
-  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
-}
-function isContextConsumer(object) {
-  return typeOf(object) === REACT_CONTEXT_TYPE;
-}
-function isContextProvider(object) {
-  return typeOf(object) === REACT_PROVIDER_TYPE;
-}
-function isElement(object) {
-  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-}
-function isForwardRef(object) {
-  return typeOf(object) === REACT_FORWARD_REF_TYPE;
-}
-function isFragment(object) {
-  return typeOf(object) === REACT_FRAGMENT_TYPE;
-}
-function isLazy(object) {
-  return typeOf(object) === REACT_LAZY_TYPE;
-}
-function isMemo(object) {
-  return typeOf(object) === REACT_MEMO_TYPE;
-}
-function isPortal(object) {
-  return typeOf(object) === REACT_PORTAL_TYPE;
-}
-function isProfiler(object) {
-  return typeOf(object) === REACT_PROFILER_TYPE;
-}
-function isStrictMode(object) {
-  return typeOf(object) === REACT_STRICT_MODE_TYPE;
-}
-function isSuspense(object) {
-  return typeOf(object) === REACT_SUSPENSE_TYPE;
-}
-
-exports.AsyncMode = AsyncMode;
-exports.ConcurrentMode = ConcurrentMode;
-exports.ContextConsumer = ContextConsumer;
-exports.ContextProvider = ContextProvider;
-exports.Element = Element;
-exports.ForwardRef = ForwardRef;
-exports.Fragment = Fragment;
-exports.Lazy = Lazy;
-exports.Memo = Memo;
-exports.Portal = Portal;
-exports.Profiler = Profiler;
-exports.StrictMode = StrictMode;
-exports.Suspense = Suspense;
-exports.isAsyncMode = isAsyncMode;
-exports.isConcurrentMode = isConcurrentMode;
-exports.isContextConsumer = isContextConsumer;
-exports.isContextProvider = isContextProvider;
-exports.isElement = isElement;
-exports.isForwardRef = isForwardRef;
-exports.isFragment = isFragment;
-exports.isLazy = isLazy;
-exports.isMemo = isMemo;
-exports.isPortal = isPortal;
-exports.isProfiler = isProfiler;
-exports.isStrictMode = isStrictMode;
-exports.isSuspense = isSuspense;
-exports.isValidElementType = isValidElementType;
-exports.typeOf = typeOf;
-  })();
-}
-});
-reactIs_development.AsyncMode;
-reactIs_development.ConcurrentMode;
-reactIs_development.ContextConsumer;
-reactIs_development.ContextProvider;
-reactIs_development.Element;
-reactIs_development.ForwardRef;
-reactIs_development.Fragment;
-reactIs_development.Lazy;
-reactIs_development.Memo;
-reactIs_development.Portal;
-reactIs_development.Profiler;
-reactIs_development.StrictMode;
-reactIs_development.Suspense;
-reactIs_development.isAsyncMode;
-reactIs_development.isConcurrentMode;
-reactIs_development.isContextConsumer;
-reactIs_development.isContextProvider;
-reactIs_development.isElement;
-reactIs_development.isForwardRef;
-reactIs_development.isFragment;
-reactIs_development.isLazy;
-reactIs_development.isMemo;
-reactIs_development.isPortal;
-reactIs_development.isProfiler;
-reactIs_development.isStrictMode;
-reactIs_development.isSuspense;
-reactIs_development.isValidElementType;
-reactIs_development.typeOf;
-
-var reactIs = createCommonjsModule(function (module) {
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = reactIs_production_min;
-} else {
-  module.exports = reactIs_development;
-}
-});
-
-var FORWARD_REF_STATICS = {
-  '$$typeof': true,
-  render: true,
-  defaultProps: true,
-  displayName: true,
-  propTypes: true
-};
-var MEMO_STATICS = {
-  '$$typeof': true,
-  compare: true,
-  defaultProps: true,
-  displayName: true,
-  propTypes: true,
-  type: true
-};
-var TYPE_STATICS = {};
-TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
-TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
-
-var isBrowser$2 = typeof document !== 'undefined';
-
-function getRegisteredStyles(registered, registeredStyles, classNames) {
-  var rawClassName = '';
-  classNames.split(' ').forEach(function (className) {
-    if (registered[className] !== undefined) {
-      registeredStyles.push(registered[className] + ";");
-    } else if (className) {
-      rawClassName += className + " ";
-    }
-  });
-  return rawClassName;
-}
-var registerStyles = function registerStyles(cache, serialized, isStringTag) {
-  var className = cache.key + "-" + serialized.name;
-
-  if ( // we only need to add the styles to the registered cache if the
-  // class name could be used further down
-  // the tree but if it's a string tag, we know it won't
-  // so we don't have to add it to registered cache.
-  // this improves memory usage since we can avoid storing the whole style string
-  (isStringTag === false || // we need to always store it if we're in compat mode and
-  // in node since emotion-server relies on whether a style is in
-  // the registered cache to know whether a style is global or not
-  // also, note that this check will be dead code eliminated in the browser
-  isBrowser$2 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
-    cache.registered[className] = serialized.styles;
-  }
-};
-var insertStyles = function insertStyles(cache, serialized, isStringTag) {
-  registerStyles(cache, serialized, isStringTag);
-  var className = cache.key + "-" + serialized.name;
-
-  if (cache.inserted[serialized.name] === undefined) {
-    var stylesForSSR = '';
-    var current = serialized;
-
-    do {
-      var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
-
-      if (!isBrowser$2 && maybeStyles !== undefined) {
-        stylesForSSR += maybeStyles;
-      }
-
-      current = current.next;
-    } while (current !== undefined);
-
-    if (!isBrowser$2 && stylesForSSR.length !== 0) {
-      return stylesForSSR;
-    }
-  }
-};
-
-/* eslint-disable */
-// Inspired by https://github.com/garycourt/murmurhash-js
-// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
-function murmur2(str) {
-  // 'm' and 'r' are mixing constants generated offline.
-  // They're not really 'magic', they just happen to work well.
-  // const m = 0x5bd1e995;
-  // const r = 24;
-  // Initialize the hash
-  var h = 0; // Mix 4 bytes at a time into the hash
-
-  var k,
-      i = 0,
-      len = str.length;
-
-  for (; len >= 4; ++i, len -= 4) {
-    k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
-    k =
-    /* Math.imul(k, m): */
-    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
-    k ^=
-    /* k >>> r: */
-    k >>> 24;
-    h =
-    /* Math.imul(k, m): */
-    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^
-    /* Math.imul(h, m): */
-    (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
-  } // Handle the last few bytes of the input array
-
-
-  switch (len) {
-    case 3:
-      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
-
-    case 2:
-      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
-
-    case 1:
-      h ^= str.charCodeAt(i) & 0xff;
-      h =
-      /* Math.imul(h, m): */
-      (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
-  } // Do a few final mixes of the hash to ensure the last few
-  // bytes are well-incorporated.
-
-
-  h ^= h >>> 13;
-  h =
-  /* Math.imul(h, m): */
-  (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
-  return ((h ^ h >>> 15) >>> 0).toString(36);
-}
-
-var unitlessKeys = {
-  animationIterationCount: 1,
-  aspectRatio: 1,
-  borderImageOutset: 1,
-  borderImageSlice: 1,
-  borderImageWidth: 1,
-  boxFlex: 1,
-  boxFlexGroup: 1,
-  boxOrdinalGroup: 1,
-  columnCount: 1,
-  columns: 1,
-  flex: 1,
-  flexGrow: 1,
-  flexPositive: 1,
-  flexShrink: 1,
-  flexNegative: 1,
-  flexOrder: 1,
-  gridRow: 1,
-  gridRowEnd: 1,
-  gridRowSpan: 1,
-  gridRowStart: 1,
-  gridColumn: 1,
-  gridColumnEnd: 1,
-  gridColumnSpan: 1,
-  gridColumnStart: 1,
-  msGridRow: 1,
-  msGridRowSpan: 1,
-  msGridColumn: 1,
-  msGridColumnSpan: 1,
-  fontWeight: 1,
-  lineHeight: 1,
-  opacity: 1,
-  order: 1,
-  orphans: 1,
-  scale: 1,
-  tabSize: 1,
-  widows: 1,
-  zIndex: 1,
-  zoom: 1,
-  WebkitLineClamp: 1,
-  // SVG-related properties
-  fillOpacity: 1,
-  floodOpacity: 1,
-  stopOpacity: 1,
-  strokeDasharray: 1,
-  strokeDashoffset: 1,
-  strokeMiterlimit: 1,
-  strokeOpacity: 1,
-  strokeWidth: 1
-};
-
-var hyphenateRegex = /[A-Z]|^ms/g;
-var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
-
-var isCustomProperty = function isCustomProperty(property) {
-  return property.charCodeAt(1) === 45;
-};
-
-var isProcessableValue = function isProcessableValue(value) {
-  return value != null && typeof value !== 'boolean';
-};
-
-var processStyleName = /* #__PURE__ */memoize(function (styleName) {
-  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
-});
-
-var processStyleValue = function processStyleValue(key, value) {
-  switch (key) {
-    case 'animation':
-    case 'animationName':
-      {
-        if (typeof value === 'string') {
-          return value.replace(animationRegex, function (match, p1, p2) {
-            cursor = {
-              name: p1,
-              styles: p2,
-              next: cursor
-            };
-            return p1;
-          });
-        }
-      }
-  }
-
-  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
-    return value + 'px';
-  }
-
-  return value;
-};
-
-function handleInterpolation(mergedProps, registered, interpolation) {
-  if (interpolation == null) {
-    return '';
-  }
-
-  var componentSelector = interpolation;
-
-  if (componentSelector.__emotion_styles !== undefined) {
-
-    return componentSelector;
-  }
-
-  switch (typeof interpolation) {
-    case 'boolean':
-      {
-        return '';
-      }
-
-    case 'object':
-      {
-        var keyframes = interpolation;
-
-        if (keyframes.anim === 1) {
-          cursor = {
-            name: keyframes.name,
-            styles: keyframes.styles,
-            next: cursor
-          };
-          return keyframes.name;
-        }
-
-        var serializedStyles = interpolation;
-
-        if (serializedStyles.styles !== undefined) {
-          var next = serializedStyles.next;
-
-          if (next !== undefined) {
-            // not the most efficient thing ever but this is a pretty rare case
-            // and there will be very few iterations of this generally
-            while (next !== undefined) {
-              cursor = {
-                name: next.name,
-                styles: next.styles,
-                next: cursor
-              };
-              next = next.next;
-            }
-          }
-
-          var styles = serializedStyles.styles + ";";
-          return styles;
-        }
-
-        return createStringFromObject(mergedProps, registered, interpolation);
-      }
-
-    case 'function':
-      {
-        if (mergedProps !== undefined) {
-          var previousCursor = cursor;
-          var result = interpolation(mergedProps);
-          cursor = previousCursor;
-          return handleInterpolation(mergedProps, registered, result);
-        }
-
-        break;
-      }
-  } // finalize string values (regular strings and functions interpolated into css calls)
-
-
-  var asString = interpolation;
-
-  {
-    return asString;
-  }
-}
-
-function createStringFromObject(mergedProps, registered, obj) {
-  var string = '';
-
-  if (Array.isArray(obj)) {
-    for (var i = 0; i < obj.length; i++) {
-      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
-    }
-  } else {
-    for (var key in obj) {
-      var value = obj[key];
-
-      if (typeof value !== 'object') {
-        var asString = value;
-
-        if (isProcessableValue(asString)) {
-          string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
-        }
-      } else {
-
-        if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null)) {
-          for (var _i = 0; _i < value.length; _i++) {
-            if (isProcessableValue(value[_i])) {
-              string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
-            }
-          }
-        } else {
-          var interpolated = handleInterpolation(mergedProps, registered, value);
-
-          switch (key) {
-            case 'animation':
-            case 'animationName':
-              {
-                string += processStyleName(key) + ":" + interpolated + ";";
-                break;
-              }
-
-            default:
-              {
-
-                string += key + "{" + interpolated + "}";
-              }
-          }
-        }
-      }
-    }
-  }
-
-  return string;
-}
-
-var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g; // this is the cursor for keyframes
-// keyframes are stored on the SerializedStyles object as a linked list
-
-var cursor;
-function serializeStyles(args, registered, mergedProps) {
-  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
-    return args[0];
-  }
-
-  var stringMode = true;
-  var styles = '';
-  cursor = undefined;
-  var strings = args[0];
-
-  if (strings == null || strings.raw === undefined) {
-    stringMode = false;
-    styles += handleInterpolation(mergedProps, registered, strings);
-  } else {
-    var asTemplateStringsArr = strings;
-
-    styles += asTemplateStringsArr[0];
-  } // we start at 1 since we've already handled the first arg
-
-
-  for (var i = 1; i < args.length; i++) {
-    styles += handleInterpolation(mergedProps, registered, args[i]);
-
-    if (stringMode) {
-      var templateStringsArr = strings;
-
-      styles += templateStringsArr[i];
-    }
-  } // using a global regex with .exec is stateful so lastIndex has to be reset each time
-
-
-  labelPattern.lastIndex = 0;
-  var identifierName = '';
-  var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
-
-  while ((match = labelPattern.exec(styles)) !== null) {
-    identifierName += '-' + match[1];
-  }
-
-  var name = murmur2(styles) + identifierName;
-
-  return {
-    name: name,
-    styles: styles,
-    next: cursor
-  };
-}
-
-var isBrowser$1 = typeof document !== 'undefined';
-
-var syncFallback = function syncFallback(create) {
-  return create();
-};
-
-var useInsertionEffect = React__namespace['useInsertion' + 'Effect'] ? React__namespace['useInsertion' + 'Effect'] : false;
-var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$1 ? syncFallback : useInsertionEffect || syncFallback;
-
-var isBrowser = typeof document !== 'undefined';
-
-/* import { type EmotionCache } from '@emotion/utils' */
-var EmotionCacheContext
-/*: React.Context<EmotionCache | null> */
-= /* #__PURE__ */React__namespace.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
-// because this module is primarily intended for the browser and node
-// but it's also required in react native and similar environments sometimes
-// and we could have a special build just for that
-// but this is much easier and the native packages
-// might use a different theme context in the future anyway
-typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
-  key: 'css'
-}) : null);
-
-EmotionCacheContext.Provider;
-
-var withEmotionCache = function withEmotionCache
-/* <Props, Ref: React.Ref<*>> */
-(func
-/*: (props: Props, cache: EmotionCache, ref: Ref) => React.Node */
-)
-/*: React.AbstractComponent<Props> */
-{
-  return /*#__PURE__*/React.forwardRef(function (props
-  /*: Props */
-  , ref
-  /*: Ref */
-  ) {
-    // the cache will never be null in the browser
-    var cache = React.useContext(EmotionCacheContext);
-    return func(props, cache, ref);
-  });
-};
-
-if (!isBrowser) {
-  withEmotionCache = function withEmotionCache
-  /* <Props> */
-  (func
-  /*: (props: Props, cache: EmotionCache) => React.Node */
-  )
-  /*: React.StatelessFunctionalComponent<Props> */
-  {
-    return function (props
-    /*: Props */
-    ) {
-      var cache = React.useContext(EmotionCacheContext);
-
-      if (cache === null) {
-        // yes, we're potentially creating this on every render
-        // it doesn't actually matter though since it's only on the server
-        // so there will only every be a single render
-        // that could change in the future because of suspense and etc. but for now,
-        // this works and i don't want to optimise for a future thing that we aren't sure about
-        cache = createCache({
-          key: 'css'
-        });
-        return /*#__PURE__*/React__namespace.createElement(EmotionCacheContext.Provider, {
-          value: cache
-        }, func(props, cache));
-      } else {
-        return func(props, cache);
-      }
-    };
-  };
-}
-
-var ThemeContext = /* #__PURE__ */React__namespace.createContext({});
-
-var hasOwn = {}.hasOwnProperty;
-
-var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
-var createEmotionProps = function createEmotionProps(type
-/*: React.ElementType */
-, props
-/*: Object */
-) {
-
-  var newProps
-  /*: any */
-  = {};
-
-  for (var key in props) {
-    if (hasOwn.call(props, key)) {
-      newProps[key] = props[key];
-    }
-  }
-
-  newProps[typePropName] = type; // Runtime labeling is an opt-in feature because:
-
-  return newProps;
-};
-
-var Insertion = function Insertion(_ref) {
-  var cache = _ref.cache,
-      serialized = _ref.serialized,
-      isStringTag = _ref.isStringTag;
-  registerStyles(cache, serialized, isStringTag);
-  var rules = useInsertionEffectAlwaysWithSyncFallback(function () {
-    return insertStyles(cache, serialized, isStringTag);
-  });
-
-  if (!isBrowser && rules !== undefined) {
-    var _ref2;
-
-    var serializedNames = serialized.name;
-    var next = serialized.next;
-
-    while (next !== undefined) {
-      serializedNames += ' ' + next.name;
-      next = next.next;
-    }
-
-    return /*#__PURE__*/React__namespace.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
-      __html: rules
-    }, _ref2.nonce = cache.sheet.nonce, _ref2));
-  }
-
-  return null;
-};
-
-var Emotion = /* #__PURE__ */withEmotionCache(
-/* <any, any> */
-function (props, cache, ref) {
-  var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
-  // not passing the registered cache to serializeStyles because it would
-  // make certain babel optimisations not possible
-
-  if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
-    cssProp = cache.registered[cssProp];
-  }
-
-  var WrappedComponent = props[typePropName];
-  var registeredStyles = [cssProp];
-  var className = '';
-
-  if (typeof props.className === 'string') {
-    className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
-  } else if (props.className != null) {
-    className = props.className + " ";
-  }
-
-  var serialized = serializeStyles(registeredStyles, undefined, React__namespace.useContext(ThemeContext));
-
-  className += cache.key + "-" + serialized.name;
-  var newProps = {};
-
-  for (var key in props) {
-    if (hasOwn.call(props, key) && key !== 'css' && key !== typePropName && (true )) {
-      newProps[key] = props[key];
-    }
-  }
-
-  newProps.className = className;
-
-  if (ref) {
-    newProps.ref = ref;
-  }
-
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Insertion, {
-    cache: cache,
-    serialized: serialized,
-    isStringTag: typeof WrappedComponent === 'string'
-  }), /*#__PURE__*/React__namespace.createElement(WrappedComponent, newProps));
-});
-
-var Emotion$1 = Emotion;
-
-var _extends_1 = createCommonjsModule(function (module) {
-function _extends() {
-  return module.exports = _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, module.exports.__esModule = true, module.exports["default"] = module.exports, _extends.apply(null, arguments);
-}
-module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
-});
-
-unwrapExports(_extends_1);
-
-var Fragment = ReactJSXRuntime__namespace.Fragment;
-function jsx(type, props, key) {
-  if (!hasOwn.call(props, 'css')) {
-    return ReactJSXRuntime__namespace.jsx(type, props, key);
-  }
-
-  return ReactJSXRuntime__namespace.jsx(Emotion$1, createEmotionProps(type, props), key);
-}
-function jsxs(type, props, key) {
-  if (!hasOwn.call(props, 'css')) {
-    return ReactJSXRuntime__namespace.jsxs(type, props, key);
-  }
-
-  return ReactJSXRuntime__namespace.jsxs(Emotion$1, createEmotionProps(type, props), key);
-}
-
 function Accordion(props) {
     const [active, setActive] = React.useState(props.active);
     const onStepClick = (index, disabled) => () => {
@@ -1621,7 +21,7 @@ function Accordion(props) {
             setActive(newIndex);
         }
     };
-    return (jsx(Fragment, { children: React.Children.map(props.children, (child, index) => {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: React.Children.map(props.children, (child, index) => {
             return React.cloneElement(child, {
                 open: active === index,
                 onStepClick: onStepClick(index, child.props.disabled)
@@ -1638,18 +38,6 @@ Accordion.defaultProps = {
     active: -1,
 };
 
-/* import type { Interpolation, SerializedStyles } from '@emotion/utils' */
-
-function css()
-/*: SerializedStyles */
-{
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  return serializeStyles(args);
-}
-
 var constants = {
     PRIMARY: '#2283d2',
     PRIMARY_LIGHT: '#64baff',
@@ -1713,35 +101,35 @@ const Footer$1 = styled.div `
 `;
 
 function CheckCircle$4(props) {
-    return (jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsx("path", { d: "M0 0h24v24H0V0zm0 0h24v24H0V0z", fill: "none" }), jsx("path", { d: "M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })] })));
+    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0zm0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })] })));
 }
 
 function ExpandMore(props) {
-    return (jsxs("svg", Object.assign({ viewBox: "0 0 24 24", width: "18px", height: "18px", fill: 'currentColor' }, props, { children: [jsx("path", { d: "M0 0h24v24H0z", fill: "none" }), jsx("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })] })));
+    return (jsxRuntime.jsxs("svg", Object.assign({ viewBox: "0 0 24 24", width: "18px", height: "18px", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })] })));
 }
 
 function FiberManualRecord(props) {
-    return (jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsx("path", { d: "M24 24H0V0h24v24z", fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "8" })] })));
+    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M24 24H0V0h24v24z", fill: "none" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "8" })] })));
 }
 
 function Close(props) {
-    return (jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" })] })));
+    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" })] })));
 }
 
 function CheckCircle$3(props) {
-    return (jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsx("path", { d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" })] })));
+    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" })] })));
 }
 
 function CheckCircle$2(props) {
-    return (jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsx("path", { d: "M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z" })] })));
+    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z" })] })));
 }
 
 function CheckCircle$1(props) {
-    return (jsx("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: jsx("path", { d: "M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) })));
+    return (jsxRuntime.jsx("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: jsxRuntime.jsx("path", { d: "M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) })));
 }
 
 function CheckCircle(props) {
-    return (jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsx("path", { d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })] })));
+    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })] })));
 }
 
 exports.BADGE_TYPE = void 0;
@@ -1779,7 +167,7 @@ const BadgeSpan = styled.span `
     ${props => !props.inline && 'position: absolute; top: 0; right: 0; transform: translate(50%, -50%);'};
 `;
 function Badge(props) {
-    return jsx(BadgeSpan, Object.assign({}, props));
+    return jsxRuntime.jsx(BadgeSpan, Object.assign({}, props));
 }
 Badge.propTypes = {
     /** Display badge inline or overlay on parent component */
@@ -1885,7 +273,7 @@ function AccordionStep(props) {
     const toggleFocus = () => {
         setFocused(!focused);
     };
-    return (jsxs(Step$1, Object.assign({}, props, { focused: focused, elevated: props.open, children: [jsxs(StepHeader, { open: open, disabled: disabled, onClick: onStepClick, children: [jsxs(HeaderContainer, { open: open, completed: completed, children: [jsx("input", { type: 'checkbox', checked: open, disabled: disabled, onFocus: toggleFocus, onBlur: toggleFocus }), jsx(FiberManualRecord, {}), jsx(Ellipsis, { children: header })] }), jsxs(ExpandContainer, { open: open, children: [errorText && jsx(Badge, { css: css `margin-right: 15px;`, inline: true, type: exports.BADGE_TYPE.DANGER, children: errorText }), jsx(ExpandMore, {})] })] }), jsx(StepBody, { ref: ref, height: open ? height : 0, children: open && props.children })] })));
+    return (jsxRuntime.jsxs(Step$1, Object.assign({}, props, { focused: focused, elevated: props.open, children: [jsxRuntime.jsxs(StepHeader, { open: open, disabled: disabled, onClick: onStepClick, children: [jsxRuntime.jsxs(HeaderContainer, { open: open, completed: completed, children: [jsxRuntime.jsx("input", { type: 'checkbox', checked: open, disabled: disabled, onFocus: toggleFocus, onBlur: toggleFocus }), jsxRuntime.jsx(FiberManualRecord, {}), jsxRuntime.jsx(Ellipsis, { children: header })] }), jsxRuntime.jsxs(ExpandContainer, { open: open, children: [errorText && jsxRuntime.jsx(Badge, { css: react.css `margin-right: 15px;`, inline: true, type: exports.BADGE_TYPE.DANGER, children: errorText }), jsxRuntime.jsx(ExpandMore, {})] })] }), jsxRuntime.jsx(StepBody, { ref: ref, height: open ? height : 0, children: open && props.children })] })));
 }
 AccordionStep.propTypes = {
     /** Header text for the step */
@@ -2141,6 +529,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 
 const Container$8 = styled.div `
     padding: 5px;
+    padding-left: 15px;
     border-radius: 16px;
     background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
     display: inline-flex;
@@ -2149,7 +538,7 @@ const Container$8 = styled.div `
     align-items: center;
 
     &:focus-within {
-        background-color: var(--light-grey, ${constants.LIGHT_GREY});
+        outline: 2px solid var(--primary-light, ${constants.PRIMARY_LIGHT});
     }
 `;
 const Button$1 = styled.button `
@@ -2168,7 +557,7 @@ function Chip(props) {
             onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
         }
     };
-    return (jsxs(Container$8, Object.assign({}, rest, { onKeyUp: keyUpHandler, children: [label, jsx(Button$1, { onClick: onCloseClick, children: jsx(Close, { height: 20, width: 20 }) })] })));
+    return (jsxRuntime.jsxs(Container$8, Object.assign({}, rest, { onKeyUp: keyUpHandler, children: [label, jsxRuntime.jsx(Button$1, { onClick: onCloseClick, "aria-label": `Remove ${label}`, children: jsxRuntime.jsx(Close, { height: 20, width: 20 }) })] })));
 }
 
 /** Enums for layer position on screen. */
@@ -2312,7 +701,7 @@ class LayerManager {
                             document.body.removeChild(divElement);
                         };
                     }, []);
-                    return ReactDOM.createPortal(jsx(Container$7, Object.assign({ onClick: overlayClickHandler(currentLayer), zIndex: currentIndex }, layerConfig, { children: layerConfig.component })), divElement);
+                    return ReactDOM.createPortal(jsxRuntime.jsx(Container$7, Object.assign({ onClick: overlayClickHandler(currentLayer), zIndex: currentIndex }, layerConfig, { children: layerConfig.component })), divElement);
                 },
                 (resp) => {
                     this.unmount(currentLayer, resp);
@@ -2384,10 +773,10 @@ class Dialog extends React.Component {
                 closeCallback: this.closeCallback,
                 closeOnOverlayClick,
                 position: LAYER_POSITION.DIALOG,
-                component: (jsx(DialogContainer, Object.assign({}, rest, { onClick: e => e.stopPropagation(), elevated: true, children: children })))
+                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { onClick: e => e.stopPropagation(), elevated: true, children: children })))
             });
             this.closeDialog = closeFn;
-            return jsx(Component, {});
+            return jsxRuntime.jsx(Component, {});
         }
         else {
             return null;
@@ -2418,7 +807,7 @@ class AlertDialog extends React.Component {
         this.close = () => this.dialog.current.close();
     }
     render() {
-        return (jsxs(Dialog, Object.assign({}, this.props.dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [this.props.header && jsx(Header$1, { children: this.props.header }), jsx(Body$1, { children: this.props.body }), jsx(Footer$1, { children: jsx(Button$2, { onClick: this.close, children: this.props.buttonText }) })] })));
+        return (jsxRuntime.jsxs(Dialog, Object.assign({}, this.props.dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [this.props.header && jsxRuntime.jsx(Header$1, { children: this.props.header }), jsxRuntime.jsx(Body$1, { children: this.props.body }), jsxRuntime.jsx(Footer$1, { children: jsxRuntime.jsx(Button$2, { onClick: this.close, children: this.props.buttonText }) })] })));
     }
 }
 AlertDialog.propTypes = {
@@ -2452,7 +841,7 @@ class ConfirmDialog extends React.Component {
     }
     render() {
         const { header, body, yesText, noText, dialogProps } = this.props;
-        return (jsxs(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [header && jsx(Header$1, { children: header }), jsx(Body$1, { children: body }), jsxs(Footer$1, { children: [jsx(Button$2, { onClick: this.cancel, children: noText }), jsx(ActionButton, { onClick: this.confirm, children: yesText })] })] })));
+        return (jsxRuntime.jsxs(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [header && jsxRuntime.jsx(Header$1, { children: header }), jsxRuntime.jsx(Body$1, { children: body }), jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsx(Button$2, { onClick: this.cancel, children: noText }), jsxRuntime.jsx(ActionButton, { onClick: this.confirm, children: yesText })] })] })));
     }
 }
 ConfirmDialog.propTypes = {
@@ -2480,7 +869,7 @@ const Label$5 = styled.label `
     margin: 10px 5px;
 `;
 const TextField$1 = styled.input `
-    border: none;
+    outline: none;
     color: inherit;
     padding: 0 8px;
     line-height: 30px;
@@ -2595,7 +984,7 @@ const Input$4 = React.forwardRef((props, ref) => {
             setValue(e.target.value);
         }
     };
-    return (jsxs(Label$5, { children: [jsx(TextField$1, Object.assign({}, props, { ref: ref, value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched })), jsx("span", { children: props.label }), props.errorText && jsx(ErrorContainer$3, { children: props.errorText })] }));
+    return (jsxRuntime.jsxs(Label$5, { children: [jsxRuntime.jsx(TextField$1, Object.assign({}, props, { ref: ref, value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched })), jsxRuntime.jsx("span", { children: props.label }), props.errorText && jsxRuntime.jsx(ErrorContainer$3, { children: props.errorText })] }));
 });
 Input$4.propTypes = {
     /** Label for the field */
@@ -2726,7 +1115,7 @@ function TextArea(props) {
             setValue(e.target.value);
         }
     };
-    return (jsxs(Label$4, { children: [jsx(TextField, Object.assign({}, props, { value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched })), jsx("span", { children: props.label }), props.errorText && jsx(ErrorContainer$2, { children: props.errorText })] }));
+    return (jsxRuntime.jsxs(Label$4, { children: [jsxRuntime.jsx(TextField, Object.assign({}, props, { value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched })), jsxRuntime.jsx("span", { children: props.label }), props.errorText && jsxRuntime.jsx(ErrorContainer$2, { children: props.errorText })] }));
 }
 TextArea.propTypes = {
     /** Label for the field */
@@ -2871,7 +1260,7 @@ function Select(props) {
             setValue(e.target.value);
         }
     };
-    return (jsxs(Label$3, { children: [jsxs(SelectField, Object.assign({}, props, { multiple: false, value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched, children: [jsx("option", {}), props.children] })), jsx("span", { children: props.label }), jsx(ArrowContainer$1, { children: jsx(ExpandMore, {}) }), props.errorText && jsx(ErrorContainer$1, { children: props.errorText })] }));
+    return (jsxRuntime.jsxs(Label$3, { children: [jsxRuntime.jsxs(SelectField, Object.assign({}, props, { multiple: false, value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched, children: [jsxRuntime.jsx("option", {}), props.children] })), jsxRuntime.jsx("span", { children: props.label }), jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(ExpandMore, {}) }), props.errorText && jsxRuntime.jsx(ErrorContainer$1, { children: props.errorText })] }));
 }
 Select.propTypes = {
     /** Label for the field */
@@ -2983,7 +1372,7 @@ function Checkbox(props) {
             }
         }
     }, []);
-    return (jsxs(Label$2, { children: [jsx(Input$3, Object.assign({}, props, { ref: ref, type: "checkbox" })), jsx("span", { children: props.label })] }));
+    return (jsxRuntime.jsxs(Label$2, { children: [jsxRuntime.jsx(Input$3, Object.assign({}, props, { ref: ref, type: "checkbox" })), jsxRuntime.jsx("span", { children: props.label })] }));
 }
 Checkbox.propTypes = {
     /** Label for the field */
@@ -3067,7 +1456,7 @@ const Input$2 = styled.input `
     }
 `;
 function Toggle(props) {
-    return (jsxs(Switch, { children: [jsx(Input$2, Object.assign({}, props, { type: 'checkbox' })), jsx("span", {}), jsx("span", { children: props.label })] }));
+    return (jsxRuntime.jsxs(Switch, { children: [jsxRuntime.jsx(Input$2, Object.assign({}, props, { type: 'checkbox' })), jsxRuntime.jsx("span", {}), jsxRuntime.jsx("span", { children: props.label })] }));
 }
 Toggle.propTypes = {
     /** Label for the field */
@@ -3143,7 +1532,7 @@ const Input$1 = styled.input `
     }
 `;
 function Radio(props) {
-    return (jsxs(Label$1, { children: [jsx(Input$1, Object.assign({}, props, { type: 'radio' })), jsx("span", { children: props.label })] }));
+    return (jsxRuntime.jsxs(Label$1, { children: [jsxRuntime.jsx(Input$1, Object.assign({}, props, { type: 'radio' })), jsxRuntime.jsx("span", { children: props.label })] }));
 }
 Radio.propTypes = {
     /** Label for the field */
@@ -3211,7 +1600,7 @@ const RadioGroup = styled.div `
     }
 `;
 function RadioButton(props) {
-    return (jsxs(Label, { children: [jsx(Input, Object.assign({}, props, { type: 'radio' })), jsx("span", { children: props.label })] }));
+    return (jsxRuntime.jsxs(Label, { children: [jsxRuntime.jsx(Input, Object.assign({}, props, { type: 'radio' })), jsxRuntime.jsx("span", { children: props.label })] }));
 }
 RadioButton.propTypes = {
     /** Label for the field */
@@ -3250,11 +1639,11 @@ const Menu = React.forwardRef(function (props, ref) {
         setValue(newVal);
         onChange === null || onChange === void 0 ? void 0 : onChange(newVal);
     };
-    return (jsx(MenuContext.Provider, { value: {
+    return (jsxRuntime.jsx(MenuContext.Provider, { value: {
             value,
             multiSelect,
             updateValue
-        }, children: jsx(MenuContainer, { ref: ref, children: props.children }) }));
+        }, children: jsxRuntime.jsx(MenuContainer, { ref: ref, children: props.children }) }));
 });
 Menu.defaultProps = {
     multiSelect: false,
@@ -3293,7 +1682,7 @@ function MenuItem(props) {
         context.updateValue(value);
     };
     const selected = context.multiSelect ? (_b = (_a = context.value) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, value) : context.value === value;
-    return (jsxs(Container$6, Object.assign({}, rest, { type: 'button', tabIndex: context.multiSelect ? -1 : 0, selected: selected, onClick: clickHandler, children: [context.multiSelect && jsx(Checkbox, { checked: selected }), props.children] })));
+    return (jsxRuntime.jsxs(Container$6, Object.assign({}, rest, { type: 'button', tabIndex: context.multiSelect ? -1 : 0, selected: selected, onClick: clickHandler, children: [context.multiSelect && jsxRuntime.jsx(Checkbox, { checked: selected }), props.children] })));
 }
 
 exports.POPOVER_POSITION = void 0;
@@ -3475,7 +1864,7 @@ function Popover(props) {
             popperRef.current.focus();
         }
     }, [open]);
-    return (jsxs(PopoverDiv, { ref: containerRef, children: [jsx(props.element, {}), open && (jsx(Popper, { elevated: true, tabIndex: 0, position: props.position, translateX: translate.x, translateY: translate.y, className: closing && 'closing', ref: popperRef, onClick: e => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); }, children: props.children }))] }));
+    return (jsxRuntime.jsxs(PopoverDiv, { ref: containerRef, children: [jsxRuntime.jsx(props.element, {}), open && (jsxRuntime.jsx(Popper, { elevated: true, tabIndex: 0, position: props.position, translateX: translate.x, translateY: translate.y, className: closing && 'closing', ref: popperRef, onClick: e => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); }, children: props.children }))] }));
 }
 Popover.propTypes = {
     /** Opens the popover */
@@ -3552,7 +1941,7 @@ function Dropdown(props) {
             setOpen(false);
         }
     };
-    return (jsx(Popover, { position: exports.POPOVER_POSITION.BOTTOM_LEFT, open: open, element: () => (jsxs(Fragment, { children: [jsx(Input$4, { type: 'text', value: value && String(value), label: props.label, errorText: props.errorText, onClick: clickHandler, onKeyUp: keyUp, required: props.required, disabled: props.disabled }), jsx(ArrowContainer, { children: jsx(ExpandMore, {}) })] })), onClose: () => setOpen(false), children: jsx(Menu, { value: value, multiSelect: multiSelect, onChange: changeHandler, children: props.children }) }));
+    return (jsxRuntime.jsx(Popover, { position: exports.POPOVER_POSITION.BOTTOM_LEFT, open: open, element: () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input$4, { type: 'text', value: value && String(value), label: props.label, errorText: props.errorText, onClick: clickHandler, onKeyUp: keyUp, required: props.required, disabled: props.disabled }), jsxRuntime.jsx(ArrowContainer, { children: jsxRuntime.jsx(ExpandMore, {}) })] })), onClose: () => setOpen(false), children: jsxRuntime.jsx(Menu, { value: value, multiSelect: multiSelect, onChange: changeHandler, children: props.children }) }));
 }
 Dropdown.defaultProps = {
     multiSelect: false,
@@ -3597,7 +1986,7 @@ class PromptDialog extends React.Component {
     }
     render() {
         const { header, body, inputProps, submitText, cancelText, dialogProps } = this.props;
-        return (jsx(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: jsxs("form", { onSubmit: this.submit, children: [header && jsx(Header$1, { children: header }), jsxs(Body$1, { children: [jsx(BodyText, { children: body }), jsx("div", { style: { display: 'flex' }, children: jsx(Input$4, Object.assign({ style: { width: 'auto', flex: '1' }, value: this.state.value, onChange: this.valueChange, autoFocus: true }, inputProps)) })] }), jsxs(Footer$1, { children: [jsx(Button$2, { type: 'button', onClick: this.cancel, children: cancelText }), jsx(ActionButton, { children: submitText })] })] }) })));
+        return (jsxRuntime.jsx(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: jsxRuntime.jsxs("form", { onSubmit: this.submit, children: [header && jsxRuntime.jsx(Header$1, { children: header }), jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(BodyText, { children: body }), jsxRuntime.jsx("div", { style: { display: 'flex' }, children: jsxRuntime.jsx(Input$4, Object.assign({ style: { width: 'auto', flex: '1' }, value: this.state.value, onChange: this.valueChange, autoFocus: true }, inputProps)) })] }), jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsx(Button$2, { type: 'button', onClick: this.cancel, children: cancelText }), jsxRuntime.jsx(ActionButton, { children: submitText })] })] }) })));
     }
 }
 PromptDialog.propTypes = {
@@ -3629,9 +2018,11 @@ exports.ORIENTATION = void 0;
 })(exports.ORIENTATION || (exports.ORIENTATION = {}));
 const DragContext = React.createContext(null);
 
+/** Styled component for the draggable item container */
 const Item = styled.div `
     cursor: ${props => props.showIndicator ? 'default' : 'move'};
     display: flex;
+    user-select: ${props => props.showIndicator ? 'auto' : 'none'};
     border-top: 2px solid ${props => props.orientation === exports.ORIENTATION.VERTICAL && props.active > 0
     ? constants.PRIMARY : 'transparent'};
     border-bottom: 2px solid ${props => props.orientation === exports.ORIENTATION.VERTICAL && props.active < 0
@@ -3640,55 +2031,227 @@ const Item = styled.div `
     ? constants.PRIMARY : 'transparent'};
     border-right: 2px solid ${props => props.orientation === exports.ORIENTATION.HORIZONTAL && props.active < 0
     ? constants.PRIMARY : 'transparent'};
+    opacity: ${props => props.dragging ? 0.5 : 1};
 `;
+/** Styled component for the drag handle indicator */
 const DragKnob = styled.div `
     padding-top: 8px;
     cursor: move;
+    touch-action: none;
     color: var(--disabled, ${constants.DISABLED});
 `;
+/** Container for the children */
 const Container$5 = styled.div `
     flex: 1;
 `;
+/**
+ * A draggable item component that supports both mouse and touch interactions for drag-and-drop functionality.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DragItem
+ *   index={0}
+ *   orientation={ORIENTATION.VERTICAL}
+ *   showIndicator={true}
+ *   dragOver={-1}
+ * >
+ *   <div>Draggable content</div>
+ * </DragItem>
+ * ```
+ *
+ * @param props - The component props
+ * @param props.index - The position index of this item in the draggable list
+ * @param props.orientation - The orientation of the drag operation (VERTICAL or HORIZONTAL)
+ * @param props.showIndicator - Whether to show a drag handle indicator instead of making the entire item draggable
+ * @param props.dragOver - The index of the item currently being dragged over
+ * @param props.children - The content to be rendered inside the draggable item
+ *
+ * @remarks
+ * - Uses the DragContext to manage drag state across items
+ * - Provides visual feedback with borders during drag operations
+ * - Supports haptic feedback (vibration) on touch devices
+ * - For touch devices, requires a 200ms hold before drag starts
+ * - When showIndicator is true, only the drag handle can initiate drag operations
+ *
+ * @returns A draggable item with optional drag indicator and visual feedback
+ */
 function DragItem(props) {
-    const { index, orientation, children, showIndicator } = props;
+    const { index, orientation, children, showIndicator, dragOver } = props;
     const [active, setActive] = React.useState(0);
+    const [touchTimer, setTouchTimer] = React.useState(null);
     const context = React.useContext(DragContext);
+    /**
+     * Vibrate the device for haptic feedback
+     * @param duration Duration of the vibration in milliseconds
+     */
+    const vibrate = (duration) => {
+        if (navigator.vibrate) {
+            navigator.vibrate(duration);
+        }
+    };
+    /**
+     * Drag start event handler
+     * @param e Event
+     */
     const dragStartHandler = (e) => {
         context.setStartIndex(index);
+        context.setIsDragging(true);
     };
+    /**
+     * Drag over event handler
+     * @param e Event
+     */
     const dragOverHandler = (e) => {
         e.preventDefault();
         e.stopPropagation();
         setActive(context.startIndex - index);
     };
+    /**
+     * Drag leave event handler
+     */
     const dragExitHandler = () => {
         setActive(0);
     };
+    /**
+     * Drop event handler
+     * @param e Event
+     */
     const dropHandler = (e) => {
         e.preventDefault();
         setActive(0);
         context.drop(index);
+        context.setIsDragging(false);
+    };
+    /**
+     * Touch start event handler
+     * @param e Event
+     */
+    const touchStartHandler = (e) => {
+        const timer = setTimeout(() => {
+            context.setStartIndex(index);
+            context.setIsDragging(true);
+            context.setDragOver(index);
+            document.body.style.overflow = 'hidden';
+            vibrate(50);
+        }, 200);
+        setTouchTimer(timer);
+    };
+    /**
+     * Touch move event handler
+     * @param e Event
+     * @returns void
+     */
+    const touchMoveHandler = (e) => {
+        var _a;
+        const touch = e.touches[0];
+        if (!touch)
+            return;
+        if (context.isDragging) {
+            e.preventDefault();
+            // get the element under the touch point
+            const el = document.elementFromPoint(touch.clientX, touch.clientY);
+            const overAttr = (_a = el === null || el === void 0 ? void 0 : el.closest('[data-drag-index]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-drag-index');
+            const overIndex = overAttr != null ? parseInt(overAttr, 10) : null;
+            // if we know which index we're over, update visual state
+            if (overIndex !== null) {
+                context.setDragOver(overIndex);
+            }
+        }
+        else if (touchTimer) {
+            clearTimeout(touchTimer);
+            setTouchTimer(null);
+        }
     };
-    return jsxs(Item, { draggable: !showIndicator, showIndicator: showIndicator, active: active, orientation: orientation, onDragStart: !showIndicator && dragStartHandler, onDragOver: dragOverHandler, onDragLeave: dragExitHandler, onDrop: dropHandler, children: [showIndicator && jsx(DragKnob, { draggable: true, onDragStart: dragStartHandler, children: jsx(CheckCircle, {}) }), jsx(Container$5, { children: children })] });
+    /**
+     * Touch end event handler
+     * @param e Event
+     */
+    const touchEndHandler = (e) => {
+        if (touchTimer) {
+            clearTimeout(touchTimer);
+            setTouchTimer(null);
+        }
+        if (context.isDragging) {
+            context.drop(dragOver);
+            vibrate(50);
+            context.setIsDragging(false);
+            document.body.style.overflow = 'auto';
+        }
+    };
+    /** Cleanup touch timer on unmount */
+    React.useEffect(() => {
+        return () => {
+            if (touchTimer)
+                clearTimeout(touchTimer);
+            document.body.style.overflow = 'auto';
+        };
+    }, [touchTimer]);
+    /** Update active state based on dragOver changes */
+    React.useEffect(() => {
+        if (context.isDragging && dragOver === index) {
+            setActive(context.startIndex - index);
+        }
+        else {
+            setActive(0);
+        }
+    }, [dragOver, context.startIndex, index, context.isDragging]);
+    return jsxRuntime.jsxs(Item, { draggable: !showIndicator, showIndicator: showIndicator, active: active, dragging: context.isDragging && context.startIndex === index, orientation: orientation, "data-drag-index": index, onDragStart: !showIndicator ? dragStartHandler : undefined, onDragOver: dragOverHandler, onDragLeave: dragExitHandler, onDrop: dropHandler, onTouchStart: !showIndicator ? touchStartHandler : undefined, onTouchMove: touchMoveHandler, onTouchEnd: touchEndHandler, onTouchCancel: touchEndHandler, children: [showIndicator && jsxRuntime.jsx(DragKnob, { draggable: true, onDragStart: dragStartHandler, onTouchStart: touchStartHandler, children: jsxRuntime.jsx(CheckCircle, {}) }), jsxRuntime.jsx(Container$5, { children: children })] });
 }
 
+/** Container Component */
 const Container$4 = styled.div `
     flex: 1;
     display: flex;
     position: relative;
+    flex-wrap: wrap;
     flex-direction: ${props => props.orientation === exports.ORIENTATION.HORIZONTAL ? 'row' : 'column'};
 `;
+/**
+ * A drag and drop container component that enables reordering of child elements.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DragAndDrop
+ *   orientation={ORIENTATION.VERTICAL}
+ *   onDrop={(start, end) => handleReorder(start, end)}
+ *   showIndicator={true}
+ * >
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </DragAndDrop>
+ * ```
+ *
+ * @param {DragAndDropProps} props - The component props
+ * @param {ORIENTATION} props.orientation - Determines the layout direction (horizontal or vertical). Defaults to VERTICAL.
+ * @param {(start: number, end: number) => void} props.onDrop - Callback fired when an item is dropped, receives the start and end indices
+ * @param {boolean} props.showIndicator - Whether to display drag indicators for each list item. Defaults to false.
+ * @param {React.ReactNode} props.children - Child elements to be rendered as draggable items
+ *
+ * @returns {JSX.Element} A draggable container with reorderable items
+ */
 function DragAndDrop(props) {
     const { orientation, children, onDrop, showIndicator } = props;
     const [startIndex, setStartIndex] = React.useState(null);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [dragOver, setDragOver] = React.useState(null);
+    /**
+     * Drop handler invoked when a draggable item is released.
+     * @param index
+     */
     const drop = (index) => {
         startIndex !== null && (onDrop === null || onDrop === void 0 ? void 0 : onDrop(startIndex, index));
         setStartIndex(null);
+        setIsDragging(false);
     };
-    return (jsx(DragContext.Provider, { value: { startIndex, setStartIndex, drop }, children: jsx(Container$4, { orientation: orientation, children: React.Children.map(children, (child, index) => (jsx(DragItem, { index: index, orientation: orientation, showIndicator: showIndicator, children: child }))) }) }));
+    return (jsxRuntime.jsx(DragContext.Provider, { value: { startIndex, setStartIndex, drop, isDragging, setIsDragging, setDragOver }, children: jsxRuntime.jsx(Container$4, { orientation: orientation, children: React.Children.map(children, (child, index) => (jsxRuntime.jsx(DragItem, { index: index, orientation: orientation, showIndicator: showIndicator, dragOver: dragOver, children: child }))) }) }));
 }
 DragAndDrop.defaultProps = {
+    /** Orientation of the list layout */
     orientation: exports.ORIENTATION.VERTICAL,
+    /** Whether to display drag indicators for each list item */
     showIndicator: false,
 };
 
@@ -3773,7 +2336,7 @@ class Drawer extends React.Component {
                 closeCallback: this.onClose,
                 closeOnEsc,
                 closeOnOverlayClick,
-                component: (jsx(DrawerDiv, Object.assign({}, rest, { position: position, size: size, onClick: e => e.stopPropagation(), children: children })))
+                component: (jsxRuntime.jsx(DrawerDiv, Object.assign({}, rest, { position: position, size: size, onClick: e => e.stopPropagation(), children: children })))
             });
             this.closeCallback = this.layer[1];
             this.forceUpdate();
@@ -3782,7 +2345,7 @@ class Drawer extends React.Component {
     render() {
         if (this.state.open && this.layer) {
             const [Component] = this.layer;
-            return jsx(Component, {});
+            return jsxRuntime.jsx(Component, {});
         }
         return null;
     }
@@ -3888,7 +2451,7 @@ const ErrorContainer = styled.div `
     font-size: 12px;
 `;
 function Group(props) {
-    return (jsxs(Fragment, { children: [jsx(Container$3, Object.assign({}, props, { children: props.children })), props.errorText && jsx(ErrorContainer, { children: props.errorText })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$3, Object.assign({}, props, { children: props.children })), props.errorText && jsxRuntime.jsx(ErrorContainer, { children: props.errorText })] }));
 }
 Group.propTypes = {
     /** Error Message for the group */
@@ -3948,7 +2511,7 @@ class Modal extends React.Component {
                 closeCallback: this.onClose,
                 closeOnEsc: closeOnEsc,
                 closeOnOverlayClick: closeOnOverlayClick,
-                component: (jsx(DialogContainer, Object.assign({}, rest, { onClick: e => e.stopPropagation(), elevated: true, children: children })))
+                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { onClick: e => e.stopPropagation(), elevated: true, children: children })))
             });
             this.closeCallback = this.layer[1];
             this.forceUpdate();
@@ -3957,7 +2520,7 @@ class Modal extends React.Component {
     render() {
         if (this.state.open && this.layer) {
             const [Component] = this.layer;
-            return jsx(Component, {});
+            return jsxRuntime.jsx(Component, {});
         }
         return null;
     }
@@ -4270,9 +2833,9 @@ class NotificationManager extends React.Component {
         };
     }
     render() {
-        return (jsx(Container$2, { position: this.props.position, children: this.state.notices.map(notice => {
+        return (jsxRuntime.jsx(Container$2, { position: this.props.position, children: this.state.notices.map(notice => {
                 const { id, title, description, leaving, type = exports.NOTIFICATION_TYPE.INFO, buttonText, buttonClick, } = notice;
-                return (jsxs(Notice, Object.assign({}, notice, { position: this.props.position, className: leaving ? 'leave' : '', onMouseEnter: this.pause(id), onMouseLeave: this.resume(id), children: [jsxs(IconContainer, { type: type, children: [type === exports.NOTIFICATION_TYPE.INFO && jsx(CheckCircle$3, {}), type === exports.NOTIFICATION_TYPE.SUCCESS && jsx(CheckCircle$4, {}), type === exports.NOTIFICATION_TYPE.WARNING && jsx(CheckCircle$2, {}), type === exports.NOTIFICATION_TYPE.DANGER && jsx(CheckCircle$1, {})] }), jsxs(FillParent, { children: [jsxs(Title, { type: type, children: [jsx(FillParent, { children: title }), jsx(CloseButton, { onClick: this.closeClickHandler(id), children: jsx(Close, {}) })] }), jsx(Body, { children: description }), buttonText && (jsx(Footer, { children: jsx(ActionButton, { onClick: () => { buttonClick === null || buttonClick === void 0 ? void 0 : buttonClick(); }, children: buttonText }) }))] })] }), id));
+                return (jsxRuntime.jsxs(Notice, Object.assign({}, notice, { position: this.props.position, className: leaving ? 'leave' : '', onMouseEnter: this.pause(id), onMouseLeave: this.resume(id), children: [jsxRuntime.jsxs(IconContainer, { type: type, children: [type === exports.NOTIFICATION_TYPE.INFO && jsxRuntime.jsx(CheckCircle$3, {}), type === exports.NOTIFICATION_TYPE.SUCCESS && jsxRuntime.jsx(CheckCircle$4, {}), type === exports.NOTIFICATION_TYPE.WARNING && jsxRuntime.jsx(CheckCircle$2, {}), type === exports.NOTIFICATION_TYPE.DANGER && jsxRuntime.jsx(CheckCircle$1, {})] }), jsxRuntime.jsxs(FillParent, { children: [jsxRuntime.jsxs(Title, { type: type, children: [jsxRuntime.jsx(FillParent, { children: title }), jsxRuntime.jsx(CloseButton, { onClick: this.closeClickHandler(id), children: jsxRuntime.jsx(Close, {}) })] }), jsxRuntime.jsx(Body, { children: description }), buttonText && (jsxRuntime.jsx(Footer, { children: jsxRuntime.jsx(ActionButton, { onClick: () => { buttonClick === null || buttonClick === void 0 ? void 0 : buttonClick(); }, children: buttonText }) }))] })] }), id));
             }) }));
     }
 }
@@ -4341,13 +2904,13 @@ class Notification {
                     closeOnOverlayClick: false,
                     position: positionMap[position],
                     alwaysOnTop: true,
-                    component: (jsx(NotificationManager, { ref: ref, position: position, onEmpty: () => this.destroy(position) }))
+                    component: (jsxRuntime.jsx(NotificationManager, { ref: ref, position: position, onEmpty: () => this.destroy(position) }))
                 });
                 this.containers.set(position, {
                     ref,
                     element: div,
                 });
-                ReactDOM.render(jsx(Component, {}), div);
+                ReactDOM.render(jsxRuntime.jsx(Component, {}), div);
                 notification = ref;
             }
             else {
@@ -4396,7 +2959,7 @@ const SpinnerDiv = styled.div `
     }
 `;
 function Spinner(props) {
-    return jsx(SpinnerDiv, Object.assign({}, props));
+    return jsxRuntime.jsx(SpinnerDiv, Object.assign({}, props));
 }
 Spinner.propTypes = {
     /** Spinner's size */
@@ -4499,7 +3062,7 @@ function Stepper(props) {
         }
         return exports.BADGE_TYPE.DISABLED;
     };
-    return (jsxs(Container$1, { children: [jsxs(Header, { children: [React.Children.map(children, (child, index) => (jsx(Fragment, { children: jsxs(HeaderButton, { active: index === active, type: 'button', disabled: child.props.disabled, onClick: stepClickHandler(index), children: [jsx(Badge, { inline: true, type: getBadgeType(index, child.props.completed, child.props.disabled) }), jsx(Ellipsis, { children: child.props.name })] }) }))), jsxs(MobileHeader, { children: [jsx("span", { children: children[active].props.name }), jsxs(Badge, { inline: true, type: exports.BADGE_TYPE.PRIMARY, children: [active + 1, " of ", children.length] })] })] }), children[active]] }));
+    return (jsxRuntime.jsxs(Container$1, { children: [jsxRuntime.jsxs(Header, { children: [React.Children.map(children, (child, index) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(HeaderButton, { active: index === active, type: 'button', disabled: child.props.disabled, onClick: stepClickHandler(index), children: [jsxRuntime.jsx(Badge, { inline: true, type: getBadgeType(index, child.props.completed, child.props.disabled) }), jsxRuntime.jsx(Ellipsis, { children: child.props.name })] }) }))), jsxRuntime.jsxs(MobileHeader, { children: [jsxRuntime.jsx("span", { children: children[active].props.name }), jsxRuntime.jsxs(Badge, { inline: true, type: exports.BADGE_TYPE.PRIMARY, children: [active + 1, " of ", children.length] })] })] }), children[active]] }));
 }
 Stepper.propTypes = {
     /** Index of currently active step */
@@ -4518,7 +3081,7 @@ const Container = styled.div `
 `;
 function Step(props) {
     const { name, disabled, completed } = props, rest = __rest(props, ["name", "disabled", "completed"]);
-    return jsx(Container, Object.assign({}, rest));
+    return jsxRuntime.jsx(Container, Object.assign({}, rest));
 }
 Step.defaultProps = {
     disabled: false,
@@ -4562,7 +3125,7 @@ function Tabs(props) {
         setActive(props.active);
         props.onChange && props.onChange(props.active);
     }, [props.active]);
-    return (jsxs(Fragment, { children: [jsx(ButtonContainer, Object.assign({}, props.props, { children: React.Children.map(children, (child, index) => (jsx(Button, { type: "button", active: active === index, onClick: switchTab(index), disabled: child.props.disabled, children: child.props.name }))) })), jsx(TabBody, Object.assign({}, props.bodyProps, { children: children[active] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonContainer, Object.assign({}, props.props, { children: React.Children.map(children, (child, index) => (jsxRuntime.jsx(Button, { type: "button", active: active === index, onClick: switchTab(index), disabled: child.props.disabled, children: child.props.name }))) })), jsxRuntime.jsx(TabBody, Object.assign({}, props.bodyProps, { children: children[active] }))] }));
 }
 Tabs.propTypes = {
     /** Active Tab Index */
@@ -4580,7 +3143,7 @@ Tabs.defaultProps = {
 
 const Tab = (props) => {
     const { children } = props;
-    return jsx(Fragment, { children: children });
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
 };
 Tab.propTypes = {
     /** Name of the tab. This shown in the tab's button */
@@ -4708,10 +3271,10 @@ class Toast {
             closeOnOverlayClick: false,
             alwaysOnTop: true,
             position: LAYER_POSITION.BOTTOM_LEFT,
-            component: (jsxs(ToastContainer, Object.assign({}, options, { type: type, elevated: true, onMouseEnter: this.pause, onMouseLeave: this.resume(options), children: [jsx(TextContainer, { children: text }), buttonText && (jsx(CloseContainer, { onClick: buttonClick, type: 'button', children: buttonText }))] })))
+            component: (jsxRuntime.jsxs(ToastContainer, Object.assign({}, options, { type: type, elevated: true, onMouseEnter: this.pause, onMouseLeave: this.resume(options), children: [jsxRuntime.jsx(TextContainer, { children: text }), buttonText && (jsxRuntime.jsx(CloseContainer, { onClick: buttonClick, type: 'button', children: buttonText }))] })))
         });
         const Component = this.toast[0];
-        ReactDOM.render(jsx(Component, {}), this.element);
+        ReactDOM.render(jsxRuntime.jsx(Component, {}), this.element);
         this.timeout = setTimeout(() => {
             this.remove();
         }, duration || DEFAULT_DURATION);
@@ -4781,7 +3344,7 @@ const TooltipContainer = styled.div `
 `;
 function Tooltip(props) {
     const { children, position } = props, rest = __rest(props, ["children", "position"]);
-    return (jsxs(TooltipContainer, Object.assign({ position: position }, rest, { children: [children, jsx(TooltipDiv, { position: position, children: rest.tooltipText })] })));
+    return (jsxRuntime.jsxs(TooltipContainer, Object.assign({ position: position }, rest, { children: [children, jsxRuntime.jsx(TooltipDiv, { position: position, children: rest.tooltipText })] })));
 }
 Tooltip.propTypes = {
     /** Text to show in the tooltip */