@hexure/ui 1.10.0 → 1.11.0

package/dist/esm/index.js

@@ -1,6 +1,8 @@
-import React, { useRef, useDebugValue, createElement, useContext, useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect, useRef } from 'react';
+import styled, { ThemeContext, keyframes } from 'styled-components';
 import Icon, { Icon as Icon$1 } from '@mdi/react';
 import { mdiChevronUp, mdiChevronDown, mdiLoading, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiDotsHorizontal, mdiClose, mdiMinusCircle, mdiFolderPlusOutline, mdiChevronRight, mdiChevronLeft, mdiCheck } from '@mdi/js';
+import dayjs from 'dayjs';
 import Numeral from 'numeral';
 import Moment from 'moment';
 
@@ -20,16 +22,6 @@ PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 /* global Reflect, Promise */
 
-var __assign = function () {
-  __assign = Object.assign || function __assign(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
 function __rest(s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
@@ -38,1633 +30,6 @@ function __rest(s, e) {
   }
   return t;
 }
-function __spreadArray(to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-function memoize(fn) {
-  var cache = Object.create(null);
-  return function (arg) {
-    if (cache[arg] === undefined) cache[arg] = fn(arg);
-    return cache[arg];
-  };
-}
-
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
-
-var isPropValid = /* #__PURE__ */memoize(function (prop) {
-  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
-  /* o */ && prop.charCodeAt(1) === 110
-  /* n */ && prop.charCodeAt(2) < 91;
-}
-/* Z+1 */);
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var MS = '-ms-';
-var MOZ = '-moz-';
-var WEBKIT = '-webkit-';
-var COMMENT = 'comm';
-var RULESET = 'rule';
-var DECLARATION = 'decl';
-var IMPORT = '@import';
-var KEYFRAMES = '@keyframes';
-var LAYER = '@layer';
-
-/**
- * @param {number}
- * @return {number}
- */
-var abs = Math.abs;
-
-/**
- * @param {number}
- * @return {string}
- */
-var from = String.fromCharCode;
-
-/**
- * @param {object}
- * @return {object}
- */
-var assign = Object.assign;
-
-/**
- * @param {string} value
- * @param {number} length
- * @return {number}
- */
-function hash(value, length) {
-  return charat(value, 0) ^ 45 ? (((length << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3) : 0;
-}
-
-/**
- * @param {string} value
- * @return {string}
- */
-function trim(value) {
-  return value.trim();
-}
-
-/**
- * @param {string} value
- * @param {RegExp} pattern
- * @return {string?}
- */
-function match(value, pattern) {
-  return (value = pattern.exec(value)) ? value[0] : value;
-}
-
-/**
- * @param {string} value
- * @param {(string|RegExp)} pattern
- * @param {string} replacement
- * @return {string}
- */
-function replace(value, pattern, replacement) {
-  return value.replace(pattern, replacement);
-}
-
-/**
- * @param {string} value
- * @param {string} search
- * @param {number} position
- * @return {number}
- */
-function indexof(value, search, position) {
-  return value.indexOf(search, position);
-}
-
-/**
- * @param {string} value
- * @param {number} index
- * @return {number}
- */
-function charat(value, index) {
-  return value.charCodeAt(index) | 0;
-}
-
-/**
- * @param {string} value
- * @param {number} begin
- * @param {number} end
- * @return {string}
- */
-function substr(value, begin, end) {
-  return value.slice(begin, end);
-}
-
-/**
- * @param {string} value
- * @return {number}
- */
-function strlen(value) {
-  return value.length;
-}
-
-/**
- * @param {any[]} value
- * @return {number}
- */
-function sizeof(value) {
-  return value.length;
-}
-
-/**
- * @param {any} value
- * @param {any[]} array
- * @return {any}
- */
-function append(value, array) {
-  return array.push(value), value;
-}
-
-/**
- * @param {string[]} array
- * @param {function} callback
- * @return {string}
- */
-function combine(array, callback) {
-  return array.map(callback).join('');
-}
-
-/**
- * @param {string[]} array
- * @param {RegExp} pattern
- * @return {string[]}
- */
-function filter(array, pattern) {
-  return array.filter(function (value) {
-    return !match(value, pattern);
-  });
-}
-
-var line = 1;
-var column = 1;
-var length = 0;
-var position = 0;
-var character = 0;
-var characters = '';
-
-/**
- * @param {string} value
- * @param {object | null} root
- * @param {object | null} parent
- * @param {string} type
- * @param {string[] | string} props
- * @param {object[] | string} children
- * @param {object[]} siblings
- * @param {number} length
- */
-function node(value, root, parent, type, props, children, length, siblings) {
-  return {
-    value: value,
-    root: root,
-    parent: parent,
-    type: type,
-    props: props,
-    children: children,
-    line: line,
-    column: column,
-    length: length,
-    return: '',
-    siblings: siblings
-  };
-}
-
-/**
- * @param {object} root
- * @param {object} props
- * @return {object}
- */
-function copy(root, props) {
-  return assign(node('', null, null, '', null, null, 0, root.siblings), root, {
-    length: -root.length
-  }, props);
-}
-
-/**
- * @param {object} root
- */
-function lift(root) {
-  while (root.root) root = copy(root.root, {
-    children: [root]
-  });
-  append(root, root.siblings);
-}
-
-/**
- * @return {number}
- */
-function char() {
-  return character;
-}
-
-/**
- * @return {number}
- */
-function prev() {
-  character = position > 0 ? charat(characters, --position) : 0;
-  if (column--, character === 10) column = 1, line--;
-  return character;
-}
-
-/**
- * @return {number}
- */
-function next() {
-  character = position < length ? charat(characters, position++) : 0;
-  if (column++, character === 10) column = 1, line++;
-  return character;
-}
-
-/**
- * @return {number}
- */
-function peek() {
-  return charat(characters, position);
-}
-
-/**
- * @return {number}
- */
-function caret() {
-  return position;
-}
-
-/**
- * @param {number} begin
- * @param {number} end
- * @return {string}
- */
-function slice(begin, end) {
-  return substr(characters, begin, end);
-}
-
-/**
- * @param {number} type
- * @return {number}
- */
-function token(type) {
-  switch (type) {
-    // \0 \t \n \r \s whitespace token
-    case 0:
-    case 9:
-    case 10:
-    case 13:
-    case 32:
-      return 5;
-    // ! + , / > @ ~ isolate token
-    case 33:
-    case 43:
-    case 44:
-    case 47:
-    case 62:
-    case 64:
-    case 126:
-    // ; { } breakpoint token
-    case 59:
-    case 123:
-    case 125:
-      return 4;
-    // : accompanied token
-    case 58:
-      return 3;
-    // " ' ( [ opening delimit token
-    case 34:
-    case 39:
-    case 40:
-    case 91:
-      return 2;
-    // ) ] closing delimit token
-    case 41:
-    case 93:
-      return 1;
-  }
-  return 0;
-}
-
-/**
- * @param {string} value
- * @return {any[]}
- */
-function alloc(value) {
-  return line = column = 1, length = strlen(characters = value), position = 0, [];
-}
-
-/**
- * @param {any} value
- * @return {any}
- */
-function dealloc(value) {
-  return characters = '', value;
-}
-
-/**
- * @param {number} type
- * @return {string}
- */
-function delimit(type) {
-  return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)));
-}
-
-/**
- * @param {number} type
- * @return {string}
- */
-function whitespace(type) {
-  while (character = peek()) if (character < 33) next();else break;
-  return token(type) > 2 || token(character) > 3 ? '' : ' ';
-}
-
-/**
- * @param {number} index
- * @param {number} count
- * @return {string}
- */
-function escaping(index, count) {
-  while (--count && next())
-  // not 0-9 A-F a-f
-  if (character < 48 || character > 102 || character > 57 && character < 65 || character > 70 && character < 97) break;
-  return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32));
-}
-
-/**
- * @param {number} type
- * @return {number}
- */
-function delimiter(type) {
-  while (next()) switch (character) {
-    // ] ) " '
-    case type:
-      return position;
-    // " '
-    case 34:
-    case 39:
-      if (type !== 34 && type !== 39) delimiter(character);
-      break;
-    // (
-    case 40:
-      if (type === 41) delimiter(type);
-      break;
-    // \
-    case 92:
-      next();
-      break;
-  }
-  return position;
-}
-
-/**
- * @param {number} type
- * @param {number} index
- * @return {number}
- */
-function commenter(type, index) {
-  while (next())
-  // //
-  if (type + character === 47 + 10) break;
-  // /*
-  else if (type + character === 42 + 42 && peek() === 47) break;
-  return '/*' + slice(index, position - 1) + '*' + from(type === 47 ? type : next());
-}
-
-/**
- * @param {number} index
- * @return {string}
- */
-function identifier(index) {
-  while (!token(peek())) next();
-  return slice(index, position);
-}
-
-/**
- * @param {string} value
- * @return {object[]}
- */
-function compile(value) {
-  return dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value));
-}
-
-/**
- * @param {string} value
- * @param {object} root
- * @param {object?} parent
- * @param {string[]} rule
- * @param {string[]} rules
- * @param {string[]} rulesets
- * @param {number[]} pseudo
- * @param {number[]} points
- * @param {string[]} declarations
- * @return {object}
- */
-function parse(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
-  var index = 0;
-  var offset = 0;
-  var length = pseudo;
-  var atrule = 0;
-  var property = 0;
-  var previous = 0;
-  var variable = 1;
-  var scanning = 1;
-  var ampersand = 1;
-  var character = 0;
-  var type = '';
-  var props = rules;
-  var children = rulesets;
-  var reference = rule;
-  var characters = type;
-  while (scanning) switch (previous = character, character = next()) {
-    // (
-    case 40:
-      if (previous != 108 && charat(characters, length - 1) == 58) {
-        if (indexof(characters += replace(delimit(character), '&', '&\f'), '&\f', abs(index ? points[index - 1] : 0)) != -1) ampersand = -1;
-        break;
-      }
-    // " ' [
-    case 34:
-    case 39:
-    case 91:
-      characters += delimit(character);
-      break;
-    // \t \n \r \s
-    case 9:
-    case 10:
-    case 13:
-    case 32:
-      characters += whitespace(previous);
-      break;
-    // \
-    case 92:
-      characters += escaping(caret() - 1, 7);
-      continue;
-    // /
-    case 47:
-      switch (peek()) {
-        case 42:
-        case 47:
-          append(comment(commenter(next(), caret()), root, parent, declarations), declarations);
-          break;
-        default:
-          characters += '/';
-      }
-      break;
-    // {
-    case 123 * variable:
-      points[index++] = strlen(characters) * ampersand;
-    // } ; \0
-    case 125 * variable:
-    case 59:
-    case 0:
-      switch (character) {
-        // \0 }
-        case 0:
-        case 125:
-          scanning = 0;
-        // ;
-        case 59 + offset:
-          if (ampersand == -1) characters = replace(characters, /\f/g, '');
-          if (property > 0 && strlen(characters) - length) append(property > 32 ? declaration(characters + ';', rule, parent, length - 1, declarations) : declaration(replace(characters, ' ', '') + ';', rule, parent, length - 2, declarations), declarations);
-          break;
-        // @ ;
-        case 59:
-          characters += ';';
-        // { rule/at-rule
-        default:
-          append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length, rulesets), rulesets);
-          if (character === 123) if (offset === 0) parse(characters, root, reference, reference, props, rulesets, length, points, children);else switch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {
-            // d l m s
-            case 100:
-            case 108:
-            case 109:
-            case 115:
-              parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length, children), children), rules, children, length, points, rule ? props : children);
-              break;
-            default:
-              parse(characters, reference, reference, reference, [''], children, 0, points, children);
-          }
-      }
-      index = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo;
-      break;
-    // :
-    case 58:
-      length = 1 + strlen(characters), property = previous;
-    default:
-      if (variable < 1) if (character == 123) --variable;else if (character == 125 && variable++ == 0 && prev() == 125) continue;
-      switch (characters += from(character), character * variable) {
-        // &
-        case 38:
-          ampersand = offset > 0 ? 1 : (characters += '\f', -1);
-          break;
-        // ,
-        case 44:
-          points[index++] = (strlen(characters) - 1) * ampersand, ampersand = 1;
-          break;
-        // @
-        case 64:
-          // -
-          if (peek() === 45) characters += delimit(next());
-          atrule = peek(), offset = length = strlen(type = characters += identifier(caret())), character++;
-          break;
-        // -
-        case 45:
-          if (previous === 45 && strlen(characters) == 2) variable = 0;
-      }
-  }
-  return rulesets;
-}
-
-/**
- * @param {string} value
- * @param {object} root
- * @param {object?} parent
- * @param {number} index
- * @param {number} offset
- * @param {string[]} rules
- * @param {number[]} points
- * @param {string} type
- * @param {string[]} props
- * @param {string[]} children
- * @param {number} length
- * @param {object[]} siblings
- * @return {object}
- */
-function ruleset(value, root, parent, index, offset, rules, points, type, props, children, length, siblings) {
-  var post = offset - 1;
-  var rule = offset === 0 ? rules : [''];
-  var size = sizeof(rule);
-  for (var i = 0, j = 0, k = 0; i < index; ++i) for (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x) if (z = trim(j > 0 ? rule[x] + ' ' + y : replace(y, /&\f/g, rule[x]))) props[k++] = z;
-  return node(value, root, parent, offset === 0 ? RULESET : type, props, children, length, siblings);
-}
-
-/**
- * @param {number} value
- * @param {object} root
- * @param {object?} parent
- * @param {object[]} siblings
- * @return {object}
- */
-function comment(value, root, parent, siblings) {
-  return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0, siblings);
-}
-
-/**
- * @param {string} value
- * @param {object} root
- * @param {object?} parent
- * @param {number} length
- * @param {object[]} siblings
- * @return {object}
- */
-function declaration(value, root, parent, length, siblings) {
-  return node(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length, siblings);
-}
-
-/**
- * @param {string} value
- * @param {number} length
- * @param {object[]} children
- * @return {string}
- */
-function prefix(value, length, children) {
-  switch (hash(value, length)) {
-    // color-adjust
-    case 5103:
-      return WEBKIT + 'print-' + value + value;
-    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
-    case 5737:
-    case 4201:
-    case 3177:
-    case 3433:
-    case 1641:
-    case 4457:
-    case 2921:
-    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
-    case 5572:
-    case 6356:
-    case 5844:
-    case 3191:
-    case 6645:
-    case 3005:
-    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
-    case 6391:
-    case 5879:
-    case 5623:
-    case 6135:
-    case 4599:
-    case 4855:
-    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
-    case 4215:
-    case 6389:
-    case 5109:
-    case 5365:
-    case 5621:
-    case 3829:
-      return WEBKIT + value + value;
-    // tab-size
-    case 4789:
-      return MOZ + value + value;
-    // appearance, user-select, transform, hyphens, text-size-adjust
-    case 5349:
-    case 4246:
-    case 4810:
-    case 6968:
-    case 2756:
-      return WEBKIT + value + MOZ + value + MS + value + value;
-    // writing-mode
-    case 5936:
-      switch (charat(value, length + 11)) {
-        // vertical-l(r)
-        case 114:
-          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value;
-        // vertical-r(l)
-        case 108:
-          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value;
-        // horizontal(-)tb
-        case 45:
-          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value;
-        // default: fallthrough to below
-      }
-    // flex, flex-direction, scroll-snap-type, writing-mode
-    case 6828:
-    case 4268:
-    case 2903:
-      return WEBKIT + value + MS + value + value;
-    // order
-    case 6165:
-      return WEBKIT + value + MS + 'flex-' + value + value;
-    // align-items
-    case 5187:
-      return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value;
-    // align-self
-    case 5443:
-      return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/g, '') + (!match(value, /flex-|baseline/) ? MS + 'grid-row-' + replace(value, /flex-|-self/g, '') : '') + value;
-    // align-content
-    case 4675:
-      return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/g, '') + value;
-    // flex-shrink
-    case 5548:
-      return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value;
-    // flex-basis
-    case 5292:
-      return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value;
-    // flex-grow
-    case 6060:
-      return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value;
-    // transition
-    case 4554:
-      return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value;
-    // cursor
-    case 6187:
-      return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value;
-    // background, background-image
-    case 5495:
-    case 3959:
-      return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1');
-    // justify-content
-    case 4968:
-      return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value;
-    // justify-self
-    case 4200:
-      if (!match(value, /flex-|baseline/)) return MS + 'grid-column-align' + substr(value, length) + value;
-      break;
-    // grid-template-(columns|rows)
-    case 2592:
-    case 3360:
-      return MS + replace(value, 'template-', '') + value;
-    // grid-(row|column)-start
-    case 4384:
-    case 3616:
-      if (children && children.some(function (element, index) {
-        return length = index, match(element.props, /grid-\w+-end/);
-      })) {
-        return ~indexof(value + (children = children[length].value), 'span', 0) ? value : MS + replace(value, '-start', '') + value + MS + 'grid-row-span:' + (~indexof(children, 'span', 0) ? match(children, /\d+/) : +match(children, /\d+/) - +match(value, /\d+/)) + ';';
-      }
-      return MS + replace(value, '-start', '') + value;
-    // grid-(row|column)-end
-    case 4896:
-    case 4128:
-      return children && children.some(function (element) {
-        return match(element.props, /grid-\w+-start/);
-      }) ? value : MS + replace(replace(value, '-end', '-span'), 'span ', '') + value;
-    // (margin|padding)-inline-(start|end)
-    case 4095:
-    case 3583:
-    case 4068:
-    case 2532:
-      return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value;
-    // (min|max)?(width|height|inline-size|block-size)
-    case 8116:
-    case 7059:
-    case 5753:
-    case 5535:
-    case 5445:
-    case 5701:
-    case 4933:
-    case 4677:
-    case 5533:
-    case 5789:
-    case 5021:
-    case 4765:
-      // stretch, max-content, min-content, fill-available
-      if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {
-        // (m)ax-content, (m)in-content
-        case 109:
-          // -
-          if (charat(value, length + 4) !== 45) break;
-        // (f)ill-available, (f)it-content
-        case 102:
-          return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
-        // (s)tretch
-        case 115:
-          return ~indexof(value, 'stretch', 0) ? prefix(replace(value, 'stretch', 'fill-available'), length, children) + value : value;
-      }
-      break;
-    // grid-(column|row)
-    case 5152:
-    case 5920:
-      return replace(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function (_, a, b, c, d, e, f) {
-        return MS + a + ':' + b + f + (c ? MS + a + '-span:' + (d ? e : +e - +b) + f : '') + value;
-      });
-    // position: sticky
-    case 4949:
-      // stick(y)?
-      if (charat(value, length + 6) === 121) return replace(value, ':', ':' + WEBKIT) + value;
-      break;
-    // display: (flex|inline-flex|grid|inline-grid)
-    case 6444:
-      switch (charat(value, charat(value, 14) === 45 ? 18 : 11)) {
-        // (inline-)?fle(x)
-        case 120:
-          return replace(value, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value;
-        // (inline-)?gri(d)
-        case 100:
-          return replace(value, ':', ':' + MS) + value;
-      }
-      break;
-    // scroll-margin, scroll-margin-(top|right|bottom|left)
-    case 5719:
-    case 2647:
-    case 2135:
-    case 3927:
-    case 2391:
-      return replace(value, 'scroll-', 'scroll-snap-') + value;
-  }
-  return value;
-}
-
-/**
- * @param {object[]} children
- * @param {function} callback
- * @return {string}
- */
-function serialize(children, callback) {
-  var output = '';
-  for (var i = 0; i < children.length; i++) output += callback(children[i], i, children, callback) || '';
-  return output;
-}
-
-/**
- * @param {object} element
- * @param {number} index
- * @param {object[]} children
- * @param {function} callback
- * @return {string}
- */
-function stringify(element, index, children, callback) {
-  switch (element.type) {
-    case LAYER:
-      if (element.children.length) break;
-    case IMPORT:
-    case DECLARATION:
-      return element.return = element.return || element.value;
-    case COMMENT:
-      return '';
-    case KEYFRAMES:
-      return element.return = element.value + '{' + serialize(element.children, callback) + '}';
-    case RULESET:
-      if (!strlen(element.value = element.props.join(','))) return '';
-  }
-  return strlen(children = serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : '';
-}
-
-/**
- * @param {function[]} collection
- * @return {function}
- */
-function middleware(collection) {
-  var length = sizeof(collection);
-  return function (element, index, children, callback) {
-    var output = '';
-    for (var i = 0; i < length; i++) output += collection[i](element, index, children, callback) || '';
-    return output;
-  };
-}
-
-/**
- * @param {function} callback
- * @return {function}
- */
-function rulesheet(callback) {
-  return function (element) {
-    if (!element.root) if (element = element.return) callback(element);
-  };
-}
-
-/**
- * @param {object} element
- * @param {number} index
- * @param {object[]} children
- * @param {function} callback
- */
-function prefixer(element, index, children, callback) {
-  if (element.length > -1) if (!element.return) switch (element.type) {
-    case DECLARATION:
-      element.return = prefix(element.value, element.length, children);
-      return;
-    case KEYFRAMES:
-      return serialize([copy(element, {
-        value: replace(element.value, '@', '@' + WEBKIT)
-      })], callback);
-    case RULESET:
-      if (element.length) return combine(children = element.props, function (value) {
-        switch (match(value, callback = /(::plac\w+|:read-\w+)/)) {
-          // :read-(only|write)
-          case ':read-only':
-          case ':read-write':
-            lift(copy(element, {
-              props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
-            }));
-            lift(copy(element, {
-              props: [value]
-            }));
-            assign(element, {
-              props: filter(children, callback)
-            });
-            break;
-          // :placeholder
-          case '::placeholder':
-            lift(copy(element, {
-              props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]
-            }));
-            lift(copy(element, {
-              props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
-            }));
-            lift(copy(element, {
-              props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
-            }));
-            lift(copy(element, {
-              props: [value]
-            }));
-            assign(element, {
-              props: filter(children, callback)
-            });
-            break;
-        }
-        return '';
-      });
-  }
-}
-
-var unitlessKeys = {
-  animationIterationCount: 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,
-  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 f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled",
-  m = "active",
-  y = "data-styled-version",
-  v = "6.1.8",
-  g = "/*!sc*/\n",
-  S = "undefined" != typeof window && "HTMLElement" in window,
-  w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : "production" !== process.env.NODE_ENV),
-  E = /invalid hook call/i,
-  N = new Set(),
-  P = function (t, n) {
-    if ("production" !== process.env.NODE_ENV) {
-      var o = n ? ' with the id of "'.concat(n, '"') : "",
-        s = "The component ".concat(t).concat(o, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",
-        i = console.error;
-      try {
-        var a = !0;
-        console.error = function (t) {
-          for (var n = [], o = 1; o < arguments.length; o++) n[o - 1] = arguments[o];
-          E.test(t) ? (a = !1, N.delete(s)) : i.apply(void 0, __spreadArray([t], n, !1));
-        }, useRef(), a && !N.has(s) && (console.warn(s), N.add(s));
-      } catch (e) {
-        E.test(e.message) && N.delete(s);
-      } finally {
-        console.error = i;
-      }
-    }
-  },
-  _ = Object.freeze([]),
-  C = Object.freeze({});
-function I(e, t, n) {
-  return void 0 === n && (n = C), e.theme !== n.theme && e.theme || t || n.theme;
-}
-var A = new Set(["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "tr", "track", "u", "ul", "use", "var", "video", "wbr", "circle", "clipPath", "defs", "ellipse", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "text", "tspan"]),
-  O = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,
-  D = /(^-|-$)/g;
-function R(e) {
-  return e.replace(O, "-").replace(D, "");
-}
-var T = /(a)(d)/gi,
-  k = 52,
-  j = function (e) {
-    return String.fromCharCode(e + (e > 25 ? 39 : 97));
-  };
-function x(e) {
-  var t,
-    n = "";
-  for (t = Math.abs(e); t > k; t = t / k | 0) n = j(t % k) + n;
-  return (j(t % k) + n).replace(T, "$1-$2");
-}
-var V,
-  F = 5381,
-  M = function (e, t) {
-    for (var n = t.length; n;) e = 33 * e ^ t.charCodeAt(--n);
-    return e;
-  },
-  z = function (e) {
-    return M(F, e);
-  };
-function $(e) {
-  return x(z(e) >>> 0);
-}
-function B(e) {
-  return "production" !== process.env.NODE_ENV && "string" == typeof e && e || e.displayName || e.name || "Component";
-}
-function L(e) {
-  return "string" == typeof e && ("production" === process.env.NODE_ENV || e.charAt(0) === e.charAt(0).toLowerCase());
-}
-var G = "function" == typeof Symbol && Symbol.for,
-  Y = G ? Symbol.for("react.memo") : 60115,
-  q = G ? Symbol.for("react.forward_ref") : 60112,
-  W = {
-    childContextTypes: !0,
-    contextType: !0,
-    contextTypes: !0,
-    defaultProps: !0,
-    displayName: !0,
-    getDefaultProps: !0,
-    getDerivedStateFromError: !0,
-    getDerivedStateFromProps: !0,
-    mixins: !0,
-    propTypes: !0,
-    type: !0
-  },
-  H = {
-    name: !0,
-    length: !0,
-    prototype: !0,
-    caller: !0,
-    callee: !0,
-    arguments: !0,
-    arity: !0
-  },
-  U = {
-    $$typeof: !0,
-    compare: !0,
-    defaultProps: !0,
-    displayName: !0,
-    propTypes: !0,
-    type: !0
-  },
-  J = ((V = {})[q] = {
-    $$typeof: !0,
-    render: !0,
-    defaultProps: !0,
-    displayName: !0,
-    propTypes: !0
-  }, V[Y] = U, V);
-function X(e) {
-  return ("type" in (t = e) && t.type.$$typeof) === Y ? U : "$$typeof" in e ? J[e.$$typeof] : W;
-  var t;
-}
-var Z = Object.defineProperty,
-  K = Object.getOwnPropertyNames,
-  Q = Object.getOwnPropertySymbols,
-  ee = Object.getOwnPropertyDescriptor,
-  te = Object.getPrototypeOf,
-  ne = Object.prototype;
-function oe(e, t, n) {
-  if ("string" != typeof t) {
-    if (ne) {
-      var o = te(t);
-      o && o !== ne && oe(e, o, n);
-    }
-    var r = K(t);
-    Q && (r = r.concat(Q(t)));
-    for (var s = X(e), i = X(t), a = 0; a < r.length; ++a) {
-      var c = r[a];
-      if (!(c in H || n && n[c] || i && c in i || s && c in s)) {
-        var l = ee(t, c);
-        try {
-          Z(e, c, l);
-        } catch (e) {}
-      }
-    }
-  }
-  return e;
-}
-function re(e) {
-  return "function" == typeof e;
-}
-function se(e) {
-  return "object" == typeof e && "styledComponentId" in e;
-}
-function ie(e, t) {
-  return e && t ? "".concat(e, " ").concat(t) : e || t || "";
-}
-function ae(e, t) {
-  if (0 === e.length) return "";
-  for (var n = e[0], o = 1; o < e.length; o++) n += t ? t + e[o] : e[o];
-  return n;
-}
-function ce(e) {
-  return null !== e && "object" == typeof e && e.constructor.name === Object.name && !("props" in e && e.$$typeof);
-}
-function le(e, t, n) {
-  if (void 0 === n && (n = !1), !n && !ce(e) && !Array.isArray(e)) return t;
-  if (Array.isArray(t)) for (var o = 0; o < t.length; o++) e[o] = le(e[o], t[o]);else if (ce(t)) for (var o in t) e[o] = le(e[o], t[o]);
-  return e;
-}
-function ue(e, t) {
-  Object.defineProperty(e, "toString", {
-    value: t
-  });
-}
-var pe = "production" !== process.env.NODE_ENV ? {
-  1: "Cannot create styled-component for component: %s.\n\n",
-  2: "Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",
-  3: "Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",
-  4: "The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",
-  5: "The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",
-  6: "Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",
-  7: 'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',
-  8: 'ThemeProvider: Please make your "theme" prop an object.\n\n',
-  9: "Missing document `<head>`\n\n",
-  10: "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",
-  11: "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",
-  12: "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",
-  13: "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",
-  14: 'ThemeProvider: "theme" prop is required.\n\n',
-  15: "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",
-  16: "Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",
-  17: "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",
-  18: "ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`"
-} : {};
-function de() {
-  for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t];
-  for (var n = e[0], o = [], r = 1, s = e.length; r < s; r += 1) o.push(e[r]);
-  return o.forEach(function (e) {
-    n = n.replace(/%[a-z]/, e);
-  }), n;
-}
-function he(t) {
-  for (var n = [], o = 1; o < arguments.length; o++) n[o - 1] = arguments[o];
-  return "production" === process.env.NODE_ENV ? new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t, " for more information.").concat(n.length > 0 ? " Args: ".concat(n.join(", ")) : "")) : new Error(de.apply(void 0, __spreadArray([pe[t]], n, !1)).trim());
-}
-var fe = function () {
-    function e(e) {
-      this.groupSizes = new Uint32Array(512), this.length = 512, this.tag = e;
-    }
-    return e.prototype.indexOfGroup = function (e) {
-      for (var t = 0, n = 0; n < e; n++) t += this.groupSizes[n];
-      return t;
-    }, e.prototype.insertRules = function (e, t) {
-      if (e >= this.groupSizes.length) {
-        for (var n = this.groupSizes, o = n.length, r = o; e >= r;) if ((r <<= 1) < 0) throw he(16, "".concat(e));
-        this.groupSizes = new Uint32Array(r), this.groupSizes.set(n), this.length = r;
-        for (var s = o; s < r; s++) this.groupSizes[s] = 0;
-      }
-      for (var i = this.indexOfGroup(e + 1), a = (s = 0, t.length); s < a; s++) this.tag.insertRule(i, t[s]) && (this.groupSizes[e]++, i++);
-    }, e.prototype.clearGroup = function (e) {
-      if (e < this.length) {
-        var t = this.groupSizes[e],
-          n = this.indexOfGroup(e),
-          o = n + t;
-        this.groupSizes[e] = 0;
-        for (var r = n; r < o; r++) this.tag.deleteRule(n);
-      }
-    }, e.prototype.getGroup = function (e) {
-      var t = "";
-      if (e >= this.length || 0 === this.groupSizes[e]) return t;
-      for (var n = this.groupSizes[e], o = this.indexOfGroup(e), r = o + n, s = o; s < r; s++) t += "".concat(this.tag.getRule(s)).concat(g);
-      return t;
-    }, e;
-  }(),
-  me = new Map(),
-  ye = new Map(),
-  ve = 1,
-  ge = function (e) {
-    if (me.has(e)) return me.get(e);
-    for (; ye.has(ve);) ve++;
-    var t = ve++;
-    if ("production" !== process.env.NODE_ENV && ((0 | t) < 0 || t > 1073741824)) throw he(16, "".concat(t));
-    return me.set(e, t), ye.set(t, e), t;
-  },
-  Se = function (e, t) {
-    ve = t + 1, me.set(e, t), ye.set(t, e);
-  },
-  we = "style[".concat(f, "][").concat(y, '="').concat(v, '"]'),
-  be = new RegExp("^".concat(f, '\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),
-  Ee = function (e, t, n) {
-    for (var o, r = n.split(","), s = 0, i = r.length; s < i; s++) (o = r[s]) && e.registerName(t, o);
-  },
-  Ne = function (e, t) {
-    for (var n, o = (null !== (n = t.textContent) && void 0 !== n ? n : "").split(g), r = [], s = 0, i = o.length; s < i; s++) {
-      var a = o[s].trim();
-      if (a) {
-        var c = a.match(be);
-        if (c) {
-          var l = 0 | parseInt(c[1], 10),
-            u = c[2];
-          0 !== l && (Se(u, l), Ee(e, u, c[3]), e.getTag().insertRules(l, r)), r.length = 0;
-        } else r.push(a);
-      }
-    }
-  };
-function Pe() {
-  return "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : null;
-}
-var _e = function (e) {
-    var t = document.head,
-      n = e || t,
-      o = document.createElement("style"),
-      r = function (e) {
-        var t = Array.from(e.querySelectorAll("style[".concat(f, "]")));
-        return t[t.length - 1];
-      }(n),
-      s = void 0 !== r ? r.nextSibling : null;
-    o.setAttribute(f, m), o.setAttribute(y, v);
-    var i = Pe();
-    return i && o.setAttribute("nonce", i), n.insertBefore(o, s), o;
-  },
-  Ce = function () {
-    function e(e) {
-      this.element = _e(e), this.element.appendChild(document.createTextNode("")), this.sheet = function (e) {
-        if (e.sheet) return e.sheet;
-        for (var t = document.styleSheets, n = 0, o = t.length; n < o; n++) {
-          var r = t[n];
-          if (r.ownerNode === e) return r;
-        }
-        throw he(17);
-      }(this.element), this.length = 0;
-    }
-    return e.prototype.insertRule = function (e, t) {
-      try {
-        return this.sheet.insertRule(t, e), this.length++, !0;
-      } catch (e) {
-        return !1;
-      }
-    }, e.prototype.deleteRule = function (e) {
-      this.sheet.deleteRule(e), this.length--;
-    }, e.prototype.getRule = function (e) {
-      var t = this.sheet.cssRules[e];
-      return t && t.cssText ? t.cssText : "";
-    }, e;
-  }(),
-  Ie = function () {
-    function e(e) {
-      this.element = _e(e), this.nodes = this.element.childNodes, this.length = 0;
-    }
-    return e.prototype.insertRule = function (e, t) {
-      if (e <= this.length && e >= 0) {
-        var n = document.createTextNode(t);
-        return this.element.insertBefore(n, this.nodes[e] || null), this.length++, !0;
-      }
-      return !1;
-    }, e.prototype.deleteRule = function (e) {
-      this.element.removeChild(this.nodes[e]), this.length--;
-    }, e.prototype.getRule = function (e) {
-      return e < this.length ? this.nodes[e].textContent : "";
-    }, e;
-  }(),
-  Ae = function () {
-    function e(e) {
-      this.rules = [], this.length = 0;
-    }
-    return e.prototype.insertRule = function (e, t) {
-      return e <= this.length && (this.rules.splice(e, 0, t), this.length++, !0);
-    }, e.prototype.deleteRule = function (e) {
-      this.rules.splice(e, 1), this.length--;
-    }, e.prototype.getRule = function (e) {
-      return e < this.length ? this.rules[e] : "";
-    }, e;
-  }(),
-  Oe = S,
-  De = {
-    isServer: !S,
-    useCSSOMInjection: !w
-  },
-  Re = function () {
-    function e(e, n, o) {
-      void 0 === e && (e = C), void 0 === n && (n = {});
-      var r = this;
-      this.options = __assign(__assign({}, De), e), this.gs = n, this.names = new Map(o), this.server = !!e.isServer, !this.server && S && Oe && (Oe = !1, function (e) {
-        for (var t = document.querySelectorAll(we), n = 0, o = t.length; n < o; n++) {
-          var r = t[n];
-          r && r.getAttribute(f) !== m && (Ne(e, r), r.parentNode && r.parentNode.removeChild(r));
-        }
-      }(this)), ue(this, function () {
-        return function (e) {
-          for (var t = e.getTag(), n = t.length, o = "", r = function (n) {
-              var r = function (e) {
-                return ye.get(e);
-              }(n);
-              if (void 0 === r) return "continue";
-              var s = e.names.get(r),
-                i = t.getGroup(n);
-              if (void 0 === s || 0 === i.length) return "continue";
-              var a = "".concat(f, ".g").concat(n, '[id="').concat(r, '"]'),
-                c = "";
-              void 0 !== s && s.forEach(function (e) {
-                e.length > 0 && (c += "".concat(e, ","));
-              }), o += "".concat(i).concat(a, '{content:"').concat(c, '"}').concat(g);
-            }, s = 0; s < n; s++) r(s);
-          return o;
-        }(r);
-      });
-    }
-    return e.registerId = function (e) {
-      return ge(e);
-    }, e.prototype.reconstructWithOptions = function (n, o) {
-      return void 0 === o && (o = !0), new e(__assign(__assign({}, this.options), n), this.gs, o && this.names || void 0);
-    }, e.prototype.allocateGSInstance = function (e) {
-      return this.gs[e] = (this.gs[e] || 0) + 1;
-    }, e.prototype.getTag = function () {
-      return this.tag || (this.tag = (e = function (e) {
-        var t = e.useCSSOMInjection,
-          n = e.target;
-        return e.isServer ? new Ae(n) : t ? new Ce(n) : new Ie(n);
-      }(this.options), new fe(e)));
-      var e;
-    }, e.prototype.hasNameForId = function (e, t) {
-      return this.names.has(e) && this.names.get(e).has(t);
-    }, e.prototype.registerName = function (e, t) {
-      if (ge(e), this.names.has(e)) this.names.get(e).add(t);else {
-        var n = new Set();
-        n.add(t), this.names.set(e, n);
-      }
-    }, e.prototype.insertRules = function (e, t, n) {
-      this.registerName(e, t), this.getTag().insertRules(ge(e), n);
-    }, e.prototype.clearNames = function (e) {
-      this.names.has(e) && this.names.get(e).clear();
-    }, e.prototype.clearRules = function (e) {
-      this.getTag().clearGroup(ge(e)), this.clearNames(e);
-    }, e.prototype.clearTag = function () {
-      this.tag = void 0;
-    }, e;
-  }(),
-  Te = /&/g,
-  ke = /^\s*\/\/.*$/gm;
-function je(e, t) {
-  return e.map(function (e) {
-    return "rule" === e.type && (e.value = "".concat(t, " ").concat(e.value), e.value = e.value.replaceAll(",", ",".concat(t, " ")), e.props = e.props.map(function (e) {
-      return "".concat(t, " ").concat(e);
-    })), Array.isArray(e.children) && "@keyframes" !== e.type && (e.children = je(e.children, t)), e;
-  });
-}
-function xe(e) {
-  var t,
-    n,
-    o,
-    r = void 0 === e ? C : e,
-    s = r.options,
-    i = void 0 === s ? C : s,
-    a = r.plugins,
-    c = void 0 === a ? _ : a,
-    l = function (e, o, r) {
-      return r.startsWith(n) && r.endsWith(n) && r.replaceAll(n, "").length > 0 ? ".".concat(t) : e;
-    },
-    u = c.slice();
-  u.push(function (e) {
-    e.type === RULESET && e.value.includes("&") && (e.props[0] = e.props[0].replace(Te, n).replace(o, l));
-  }), i.prefix && u.push(prefixer), u.push(stringify);
-  var p = function (e, r, s, a) {
-    void 0 === r && (r = ""), void 0 === s && (s = ""), void 0 === a && (a = "&"), t = a, n = r, o = new RegExp("\\".concat(n, "\\b"), "g");
-    var c = e.replace(ke, ""),
-      l = compile(s || r ? "".concat(s, " ").concat(r, " { ").concat(c, " }") : c);
-    i.namespace && (l = je(l, i.namespace));
-    var p = [];
-    return serialize(l, middleware(u.concat(rulesheet(function (e) {
-      return p.push(e);
-    })))), p;
-  };
-  return p.hash = c.length ? c.reduce(function (e, t) {
-    return t.name || he(15), M(e, t.name);
-  }, F).toString() : "", p;
-}
-var Ve = new Re(),
-  Fe = xe(),
-  Me = React.createContext({
-    shouldForwardProp: void 0,
-    styleSheet: Ve,
-    stylis: Fe
-  });
-  Me.Consumer;
-  React.createContext(void 0);
-function Be() {
-  return useContext(Me);
-}
-var Ge = function () {
-    function e(e, t) {
-      var n = this;
-      this.inject = function (e, t) {
-        void 0 === t && (t = Fe);
-        var o = n.name + t.hash;
-        e.hasNameForId(n.id, o) || e.insertRules(n.id, o, t(n.rules, o, "@keyframes"));
-      }, this.name = e, this.id = "sc-keyframes-".concat(e), this.rules = t, ue(this, function () {
-        throw he(12, String(n.name));
-      });
-    }
-    return e.prototype.getName = function (e) {
-      return void 0 === e && (e = Fe), this.name + e.hash;
-    }, e;
-  }(),
-  Ye = function (e) {
-    return e >= "A" && e <= "Z";
-  };
-function qe(e) {
-  for (var t = "", n = 0; n < e.length; n++) {
-    var o = e[n];
-    if (1 === n && "-" === o && "-" === e[0]) return e;
-    Ye(o) ? t += "-" + o.toLowerCase() : t += o;
-  }
-  return t.startsWith("ms-") ? "-" + t : t;
-}
-var We = function (e) {
-    return null == e || !1 === e || "" === e;
-  },
-  He = function (t) {
-    var n,
-      o,
-      r = [];
-    for (var s in t) {
-      var i = t[s];
-      t.hasOwnProperty(s) && !We(i) && (Array.isArray(i) && i.isCss || re(i) ? r.push("".concat(qe(s), ":"), i, ";") : ce(i) ? r.push.apply(r, __spreadArray(__spreadArray(["".concat(s, " {")], He(i), !1), ["}"], !1)) : r.push("".concat(qe(s), ": ").concat((n = s, null == (o = i) || "boolean" == typeof o || "" === o ? "" : "number" != typeof o || 0 === o || n in unitlessKeys || n.startsWith("--") ? String(o).trim() : "".concat(o, "px")), ";")));
-    }
-    return r;
-  };
-function Ue(e, t, n, o) {
-  if (We(e)) return [];
-  if (se(e)) return [".".concat(e.styledComponentId)];
-  if (re(e)) {
-    if (!re(s = e) || s.prototype && s.prototype.isReactComponent || !t) return [e];
-    var r = e(t);
-    return "production" === process.env.NODE_ENV || "object" != typeof r || Array.isArray(r) || r instanceof Ge || ce(r) || null === r || console.error("".concat(B(e), " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")), Ue(r, t, n, o);
-  }
-  var s;
-  return e instanceof Ge ? n ? (e.inject(n, o), [e.getName(o)]) : [e] : ce(e) ? He(e) : Array.isArray(e) ? Array.prototype.concat.apply(_, e.map(function (e) {
-    return Ue(e, t, n, o);
-  })) : [e.toString()];
-}
-function Je(e) {
-  for (var t = 0; t < e.length; t += 1) {
-    var n = e[t];
-    if (re(n) && !se(n)) return !1;
-  }
-  return !0;
-}
-var Xe = z(v),
-  Ze = function () {
-    function e(e, t, n) {
-      this.rules = e, this.staticRulesId = "", this.isStatic = "production" === process.env.NODE_ENV && (void 0 === n || n.isStatic) && Je(e), this.componentId = t, this.baseHash = M(Xe, t), this.baseStyle = n, Re.registerId(t);
-    }
-    return e.prototype.generateAndInjectStyles = function (e, t, n) {
-      var o = this.baseStyle ? this.baseStyle.generateAndInjectStyles(e, t, n) : "";
-      if (this.isStatic && !n.hash) {
-        if (this.staticRulesId && t.hasNameForId(this.componentId, this.staticRulesId)) o = ie(o, this.staticRulesId);else {
-          var r = ae(Ue(this.rules, e, t, n)),
-            s = x(M(this.baseHash, r) >>> 0);
-          if (!t.hasNameForId(this.componentId, s)) {
-            var i = n(r, ".".concat(s), void 0, this.componentId);
-            t.insertRules(this.componentId, s, i);
-          }
-          o = ie(o, s), this.staticRulesId = s;
-        }
-      } else {
-        for (var a = M(this.baseHash, n.hash), c = "", l = 0; l < this.rules.length; l++) {
-          var u = this.rules[l];
-          if ("string" == typeof u) c += u, "production" !== process.env.NODE_ENV && (a = M(a, u));else if (u) {
-            var p = ae(Ue(u, e, t, n));
-            a = M(a, p + l), c += p;
-          }
-        }
-        if (c) {
-          var d = x(a >>> 0);
-          t.hasNameForId(this.componentId, d) || t.insertRules(this.componentId, d, n(c, ".".concat(d), void 0, this.componentId)), o = ie(o, d);
-        }
-      }
-      return o;
-    }, e;
-  }(),
-  Ke = React.createContext(void 0);
-  Ke.Consumer;
-var nt = {},
-  ot = new Set();
-function rt(e, r, s) {
-  var i = se(e),
-    a = e,
-    c = !L(e),
-    p = r.attrs,
-    d = void 0 === p ? _ : p,
-    h = r.componentId,
-    f = void 0 === h ? function (e, t) {
-      var n = "string" != typeof e ? "sc" : R(e);
-      nt[n] = (nt[n] || 0) + 1;
-      var o = "".concat(n, "-").concat($(v + n + nt[n]));
-      return t ? "".concat(t, "-").concat(o) : o;
-    }(r.displayName, r.parentComponentId) : h,
-    m = r.displayName,
-    y = void 0 === m ? function (e) {
-      return L(e) ? "styled.".concat(e) : "Styled(".concat(B(e), ")");
-    }(e) : m,
-    g = r.displayName && r.componentId ? "".concat(R(r.displayName), "-").concat(r.componentId) : r.componentId || f,
-    S = i && a.attrs ? a.attrs.concat(d).filter(Boolean) : d,
-    w = r.shouldForwardProp;
-  if (i && a.shouldForwardProp) {
-    var b = a.shouldForwardProp;
-    if (r.shouldForwardProp) {
-      var E = r.shouldForwardProp;
-      w = function (e, t) {
-        return b(e, t) && E(e, t);
-      };
-    } else w = b;
-  }
-  var N = new Ze(s, g, i ? a.componentStyle : void 0);
-  function O(e, r) {
-    return function (e, r, s) {
-      var i = e.attrs,
-        a = e.componentStyle,
-        c = e.defaultProps,
-        p = e.foldedComponentIds,
-        d = e.styledComponentId,
-        h = e.target,
-        f = React.useContext(Ke),
-        m = Be(),
-        y = e.shouldForwardProp || m.shouldForwardProp;
-      "production" !== process.env.NODE_ENV && useDebugValue(d);
-      var v = I(r, f, c) || C,
-        g = function (e, n, o) {
-          for (var r, s = __assign(__assign({}, n), {
-              className: void 0,
-              theme: o
-            }), i = 0; i < e.length; i += 1) {
-            var a = re(r = e[i]) ? r(s) : r;
-            for (var c in a) s[c] = "className" === c ? ie(s[c], a[c]) : "style" === c ? __assign(__assign({}, s[c]), a[c]) : a[c];
-          }
-          return n.className && (s.className = ie(s.className, n.className)), s;
-        }(i, r, v),
-        S = g.as || h,
-        w = {};
-      for (var b in g) void 0 === g[b] || "$" === b[0] || "as" === b || "theme" === b && g.theme === v || ("forwardedAs" === b ? w.as = g.forwardedAs : y && !y(b, S) || (w[b] = g[b], y || "development" !== process.env.NODE_ENV || isPropValid(b) || ot.has(b) || !A.has(S) || (ot.add(b), console.warn('styled-components: it looks like an unknown prop "'.concat(b, '" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));
-      var E = function (e, t) {
-        var n = Be(),
-          o = e.generateAndInjectStyles(t, n.styleSheet, n.stylis);
-        return "production" !== process.env.NODE_ENV && useDebugValue(o), o;
-      }(a, g);
-      "production" !== process.env.NODE_ENV && e.warnTooManyClasses && e.warnTooManyClasses(E);
-      var N = ie(p, d);
-      return E && (N += " " + E), g.className && (N += " " + g.className), w[L(S) && !A.has(S) ? "class" : "className"] = N, w.ref = s, createElement(S, w);
-    }(D, e, r);
-  }
-  O.displayName = y;
-  var D = React.forwardRef(O);
-  return D.attrs = S, D.componentStyle = N, D.displayName = y, D.shouldForwardProp = w, D.foldedComponentIds = i ? ie(a.foldedComponentIds, a.styledComponentId) : "", D.styledComponentId = g, D.target = i ? a.target : e, Object.defineProperty(D, "defaultProps", {
-    get: function () {
-      return this._foldedDefaultProps;
-    },
-    set: function (e) {
-      this._foldedDefaultProps = i ? function (e) {
-        for (var t = [], n = 1; n < arguments.length; n++) t[n - 1] = arguments[n];
-        for (var o = 0, r = t; o < r.length; o++) le(e, r[o], !0);
-        return e;
-      }({}, a.defaultProps, e) : e;
-    }
-  }), "production" !== process.env.NODE_ENV && (P(y, g), D.warnTooManyClasses = function (e, t) {
-    var n = {},
-      o = !1;
-    return function (r) {
-      if (!o && (n[r] = !0, Object.keys(n).length >= 200)) {
-        var s = t ? ' with the id of "'.concat(t, '"') : "";
-        console.warn("Over ".concat(200, " classes were generated for component ").concat(e).concat(s, ".\n") + "Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"), o = !0, n = {};
-      }
-    };
-  }(y, g)), ue(D, function () {
-    return ".".concat(D.styledComponentId);
-  }), c && oe(D, e, {
-    attrs: !0,
-    componentStyle: !0,
-    displayName: !0,
-    foldedComponentIds: !0,
-    shouldForwardProp: !0,
-    styledComponentId: !0,
-    target: !0
-  }), D;
-}
-function st(e, t) {
-  for (var n = [e[0]], o = 0, r = t.length; o < r; o += 1) n.push(t[o], e[o + 1]);
-  return n;
-}
-var it = function (e) {
-  return Object.assign(e, {
-    isCss: !0
-  });
-};
-function at(t) {
-  for (var n = [], o = 1; o < arguments.length; o++) n[o - 1] = arguments[o];
-  if (re(t) || ce(t)) return it(Ue(st(_, __spreadArray([t], n, !0))));
-  var r = t;
-  return 0 === n.length && 1 === r.length && "string" == typeof r[0] ? Ue(r) : it(Ue(st(r, n)));
-}
-function ct(n, o, r) {
-  if (void 0 === r && (r = C), !o) throw he(1, o);
-  var s = function (t) {
-    for (var s = [], i = 1; i < arguments.length; i++) s[i - 1] = arguments[i];
-    return n(o, r, at.apply(void 0, __spreadArray([t], s, !1)));
-  };
-  return s.attrs = function (e) {
-    return ct(n, o, __assign(__assign({}, r), {
-      attrs: Array.prototype.concat(r.attrs, e).filter(Boolean)
-    }));
-  }, s.withConfig = function (e) {
-    return ct(n, o, __assign(__assign({}, r), e));
-  }, s;
-}
-var lt = function (e) {
-    return ct(rt, e);
-  },
-  ut = lt;
-A.forEach(function (e) {
-  ut[e] = lt(e);
-});
-function ht(t) {
-  for (var n = [], o = 1; o < arguments.length; o++) n[o - 1] = arguments[o];
-  "production" !== process.env.NODE_ENV && "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");
-  var r = ae(at.apply(void 0, __spreadArray([t], n, !1))),
-    s = $(r);
-  return new Ge(s, r);
-}
-"production" !== process.env.NODE_ENV && "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");
-var gt = "__sc-".concat(f, "__");
-"production" !== process.env.NODE_ENV && "test" !== process.env.NODE_ENV && "undefined" != typeof window && (window[gt] || (window[gt] = 0), 1 === window[gt] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window[gt] += 1);
 
 const Colors = {
     PRIMARY: {
@@ -1716,7 +81,7 @@ const EditableTheme = {
     PRIMARY_COLOR: Colors.PRIMARY,
 };
 
-const Header$3 = ut.div `
+const Header$3 = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1727,7 +92,7 @@ const Header$3 = ut.div `
   height: 50px;
   cursor: pointer;
 `;
-const Title$2 = ut.div `
+const Title$2 = styled.div `
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
   color: ${Colors.BLACK.Hex};
@@ -1744,7 +109,7 @@ const Accordion = (_a) => {
         open ? children : null));
 };
 
-const StyledButton = ut.button `
+const StyledButton = styled.button `
   height: ${props => (props.$small ? '30px' : '40px')};
   line-height: 1em;
   border-radius: ${props => (props.$small ? '15px' : '20px')};
@@ -1787,21 +152,21 @@ const StyledButton = ut.button `
     opacity: ${props => (props.$disabled ? 0.6 : 1)};
   }
 `;
-const Label$5 = ut.span `
+const Label$5 = styled.span `
   color: ${props => props.$content_color || '#fff'};
   font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
   font-family: ${FontStyles.DEFAULT};
   font-weight: 500;
   line-height: 1;
 `;
-const StyledIcon$6 = ut.span `
+const StyledIcon$6 = styled.span `
   margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
   margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
   display: flex;
   align-items: center;
   box-sizing: border-box;
 `;
-const Badge$1 = ut.span `
+const Badge$1 = styled.span `
   width: ${props => (props.$small ? '20px' : '24px')};
   height: ${props => (props.$small ? '20px' : '24px')};
   line-height: 1;
@@ -1820,7 +185,7 @@ const Badge$1 = ut.span `
 `;
 const Button = (_a) => {
     var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format"]);
-    const theme = useContext(Ke) || EditableTheme;
+    const theme = useContext(ThemeContext) || EditableTheme;
     const has_children = children && children.length > 0;
     const button_type_mapping = {
         primary: {
@@ -1860,7 +225,7 @@ const Button = (_a) => {
         badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small }, badge)) : null));
 };
 
-const StyledComponent = ut.p `
+const StyledComponent = styled.p `
   color: ${props => Colors[props.$color || 'BLACK'].Hex};
   font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
   line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
@@ -1881,7 +246,7 @@ Copy.defaultProps = {
     type: 'default',
 };
 
-const H1 = ut.h1 `
+const H1 = styled.h1 `
   color: ${Colors.BLACK.Hex};
   font-size: 30px;
   font-weight: ${props => (props.$bold ? '500' : '400')};
@@ -1891,7 +256,7 @@ const H1 = ut.h1 `
   padding: ${props => props.$padding || '0px'};
   box-sizing: border-box;
 `;
-const H2 = ut.h2 `
+const H2 = styled.h2 `
   color: ${Colors.BLACK.Hex};
   font-size: 24px;
   font-weight: ${props => (props.$bold ? '500' : '400')};
@@ -1901,7 +266,7 @@ const H2 = ut.h2 `
   padding: ${props => props.$padding || '0px'};
   box-sizing: border-box;
 `;
-const H3 = ut.h3 `
+const H3 = styled.h3 `
   color: ${Colors.BLACK.Hex};
   font-size: 18px;
   font-weight: ${props => (props.$bold ? '500' : '400')};
@@ -1930,7 +295,7 @@ Heading.defaultProps = {
     type: 'primary',
 };
 
-const Wrapper$i = ut.div `
+const Wrapper$i = styled.div `
   position: fixed;
   top: 0;
   right: 0;
@@ -1943,7 +308,7 @@ const Wrapper$i = ut.div `
   justify-content: center;
   box-sizing: border-box;
 `;
-const Container$3 = ut.dialog `
+const Container$4 = styled.dialog `
   max-width: 600px;
   width: auto;
   border-radius: 8px;
@@ -1956,7 +321,7 @@ const Container$3 = ut.dialog `
   text-align: center;
   box-sizing: border-box;
 `;
-const Buttons = ut.div `
+const Buttons$1 = styled.div `
   display: flex;
   gap: 10px;
   align-items: center;
@@ -1967,16 +332,16 @@ const Buttons = ut.div `
 const ActionDialog = (_a) => {
     var { description, title, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton"]);
     return (React.createElement(Wrapper$i, Object.assign({}, accessibleProps),
-        React.createElement(Container$3, { open: true },
+        React.createElement(Container$4, { open: true },
             title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
             description ? React.createElement(Copy, { align: 'center' }, description) : null,
-            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(Buttons, null,
+            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(Buttons$1, null,
                 tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
                 secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
                 primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
 };
 
-const Wrapper$h = ut.div `
+const Wrapper$h = styled.div `
   border: 1px solid #f1f1f1;
   border-radius: 4px;
   border-left-width: 4px;
@@ -1987,10 +352,10 @@ const Wrapper$h = ut.div `
   padding: ${({ $small }) => ($small ? '11px' : '20px')};
   box-sizing: border-box;
 `;
-const StyledIcon$5 = ut(Icon) `
+const StyledIcon$5 = styled(Icon) `
   flex-shrink: 0;
 `;
-const Action$1 = ut.div `
+const Action$1 = styled.div `
   color: ${props => props.theme.PRIMARY_COLOR.Hex};
   font-size: ${FontSizes.DEFAULT};
   font-family: ${FontStyles.DEFAULT};
@@ -2001,7 +366,7 @@ const Action$1 = ut.div `
 Action$1.defaultProps = { theme: EditableTheme };
 const Alert = (_a) => {
     var { action, type = 'info', title, description, small = false } = _a, accessibleProps = __rest(_a, ["action", "type", "title", "description", "small"]);
-    const theme = useContext(Ke) || EditableTheme;
+    const theme = useContext(ThemeContext) || EditableTheme;
     const type_mapping = {
         info: {
             color: theme.PRIMARY_COLOR.Hex,
@@ -2028,7 +393,78 @@ const Alert = (_a) => {
             action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
 };
 
-const Wrapper$g = ut.div `
+const colorMapping = {
+    black: {
+        fill_1: '#000000',
+        fill_2: '#000000',
+        fill_3: '#000000',
+    },
+    white: {
+        fill_1: '#ffffff',
+        fill_2: '#ffffff',
+        fill_3: '#ffffff',
+    },
+    full: {
+        fill_1: '#000000',
+        fill_2: '#E82425',
+        fill_3: '#E82425',
+    },
+    reversed: {
+        fill_1: '#ffffff',
+        fill_2: '#E82425',
+        fill_3: '#E82425',
+    },
+};
+const Logo = (_a) => {
+    var { type = 'standard_full', height = '50px' } = _a, accessibleProps = __rest(_a, ["type", "height"]);
+    const type_parts = type.split('_');
+    switch (type_parts[0]) {
+        case 'mark':
+            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, viewBox: '0 0 58 51', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps),
+                React.createElement("path", { d: 'M43.9348 -1.14441e-05H13.3724L0 25.2376L7.27148 38.0136L14.1215 50.0487H43.1856L57.3077 25.2376L43.9348 -1.14441e-05ZM38.206 9.49903L46.459 25.0743L37.6507 40.5497H19.6567L15.5417 33.3199L10.8487 25.0743L19.1013 9.49903H38.206Z', fill: type_parts[1] })));
+        default:
+            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 236 50', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps),
+                React.createElement("path", { d: 'M230.794 29.59H219.306L214.279 39.0907L217.012 43.9001L219.587 48.4308H230.512L235.821 39.0907L230.794 29.59V29.59ZM228.641 33.1659L231.743 39.0292L228.432 44.8549H221.668L220.121 42.1332L218.356 39.0292L221.459 33.1659H228.641Z', fill: colorMapping[type_parts[1]].fill_3 }),
+                React.createElement("path", { d: 'M211.662 42.6033L199.206 42.6319C196.339 42.6319 193.862 41.6095 191.846 39.5923C189.828 37.5755 188.805 35.0985 188.805 32.2321C188.805 29.3656 189.828 26.8886 191.846 24.8718C193.848 22.8332 196.325 21.7975 199.206 21.7975C202.072 21.7975 204.549 22.8199 206.566 24.8374C207.613 25.8847 208.391 27.093 208.944 28.5312L209.253 29.3327H197.87L196.325 32.2579L197.921 35.0969H211.458L215.015 28.6192C214.296 25.5702 212.835 22.9293 210.672 20.7657C207.531 17.6257 203.674 16.0333 199.206 16.0333C194.737 16.0333 190.88 17.6257 187.739 20.7657C184.555 23.9501 183.007 27.7011 183.007 32.2321C183.007 36.7001 184.599 40.5577 187.739 43.6981C190.88 46.8384 194.737 48.4308 199.206 48.4308H210.095L214.745 48.3297L211.662 42.6033', fill: colorMapping[type_parts[1]].fill_1 }),
+                React.createElement("path", { d: 'M160.945 19.133L158.826 20.8384C155.734 23.9359 154.141 27.8058 154.141 32.2967L154.141 47.7903L156.985 49.407L159.939 47.8778L159.94 32.2967C159.94 29.6632 160.778 27.3706 162.432 25.4846C162.615 25.2739 162.811 25.0666 163.018 24.8639C163.074 24.8155 164.138 24.0061 164.811 23.5592C166.321 22.5576 168.076 21.9876 170.024 21.8632L170.166 21.8621C172.923 21.8621 175.32 22.7325 177.301 24.4494L180.146 23.0088L180.246 19.3426C177.44 17.1664 174.132 16.0633 170.408 16.0633C166.909 16.0633 163.725 17.0962 160.945 19.133', fill: colorMapping[type_parts[1]].fill_1 }),
+                React.createElement("path", { d: 'M131.392 50C135.884 50 139.753 48.4076 142.893 45.2676C146.033 42.1269 147.626 38.2581 147.626 33.7668V18.1124L144.782 16.4964L141.827 18.0251V33.7668C141.827 36.6932 140.792 39.1936 138.745 41.2034C136.684 43.1927 134.128 44.2013 131.151 44.2013L131.01 44.2002H131.81L131.669 44.2013C128.692 44.2013 126.136 43.1927 124.074 41.2034C122.028 39.1936 120.993 36.6932 120.993 33.7668V18.0251L118.038 16.4964L115.194 18.1124V33.7668C115.194 38.2581 116.786 42.1269 119.926 45.2676C123.067 48.4076 126.936 50 131.427 50H131.392Z', fill: colorMapping[type_parts[1]].fill_1 }),
+                React.createElement("path", { d: 'M93.8353 26.9933L97.8468 31.2421L100.788 28.1521L107.791 20.4534L106.753 17.3567L103.584 16.5678', fill: colorMapping[type_parts[1]].fill_2 }),
+                React.createElement("path", { d: 'M80.7509 16.5677L77.5821 17.3564L76.5441 20.4534L83.5514 28.1568L88.1484 32.9862L76.5412 45.2133L77.5187 48.3175C79.525 48.9571 80.359 49.1805 80.6985 49.2584L92.195 37.238L103.636 49.2584C103.976 49.1805 104.81 48.9571 106.817 48.3175L107.794 45.2133L80.7509 16.5677', fill: colorMapping[type_parts[1]].fill_1 }),
+                React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1 }),
+                React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1 })));
+    }
+};
+
+const Container$3 = styled.header `
+  width: 100%;
+  display: flex;
+  padding: 20px;
+  box-sizing: border-box;
+  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
+  background: '#fff';
+  justify-content: space-between;
+`;
+const LogoWrapper = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const Image = styled.img `
+  height: 30px !important;
+  width: auto !important;
+`;
+const Buttons = styled.div `
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  flex-direction: reverse;
+`;
+const AppHeader = ({ logoUrl, buttons = [] }) => {
+    return (React.createElement(Container$3, null,
+        React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
+        React.createElement(Buttons, null, buttons.map(b => (React.createElement(Button, Object.assign({}, b)))))));
+};
+
+const Wrapper$g = styled.div `
   border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
   border-radius: 8px;
   box-sizing: border-box;
@@ -2038,27 +474,27 @@ const Wrapper$g = ut.div `
   padding: 16px 20px;
 `;
 Wrapper$g.defaultProps = { theme: EditableTheme };
-const Left = ut.div `
+const Left = styled.div `
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-shrink: 0;
 `;
-const Info$1 = ut.div `
+const Info$1 = styled.div `
   box-sizing: border-box;
   display: flex;
   align-items: center;
   margin-right: 30px;
 `;
-const Selected = ut.span `
+const Selected = styled.span `
   font-size: 14px;
   font-weight: 400;
   font-family: ${FontStyles.DEFAULT};
   color: ${Colors.BLACK.Hex};
   line-height: 1;
 `;
-const Clear = ut.span `
+const Clear = styled.span `
   font-size: 14px;
   font-weight: 400;
   font-family: ${FontStyles.DEFAULT};
@@ -2070,13 +506,13 @@ const Clear = ut.span `
   border-left: 1px solid #ccc;
 `;
 Clear.defaultProps = { theme: EditableTheme };
-const Actions$1 = ut.div `
+const Actions$1 = styled.div `
   box-sizing: border-box;
   display: flex;
   align-items: center;
   column-gap: 10px;
 `;
-const Error$1 = ut.div `
+const Error = styled.div `
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -2088,7 +524,7 @@ const Error$1 = ut.div `
   overflow: hidden;
   margin-left: 30px;
 `;
-const ErrorMsg = ut.span `
+const ErrorMsg = styled.span `
   font-size: 14px;
   font-weight: 500;
   font-family: ${FontStyles.DEFAULT};
@@ -2106,12 +542,12 @@ const BulkActionBar = (_a) => {
                     " Selected"),
                 onClear ? React.createElement(Clear, { onClick: onClear }, "Clear") : null),
             React.createElement(Actions$1, null, actions.map((action, i) => (React.createElement(Button, Object.assign({}, action, { key: i, small: true })))))),
-        errorMsg ? (React.createElement(Error$1, null,
+        errorMsg ? (React.createElement(Error, null,
             React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
             React.createElement(ErrorMsg, null, errorMsg))) : null));
 };
 
-const Wrapper$f = ut.div `
+const Wrapper$f = styled.div `
   background: #fff;
   border-radius: 8px;
   box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
@@ -2122,7 +558,7 @@ const Wrapper$f = ut.div `
   padding: 10px;
   width: 200px;
 `;
-const MenuItem = ut.div `
+const MenuItem = styled.div `
   align-items: center;
   border-radius: 8px;
   border: 1px solid transparent;
@@ -2141,7 +577,7 @@ const MenuItem = ut.div `
   }
 `;
 MenuItem.defaultProps = { theme: EditableTheme };
-const Title$1 = ut.span `
+const Title$1 = styled.span `
   font-family: Roboto;
   font-size: 14px;
   font-weight: 400;
@@ -2159,11 +595,11 @@ const MoreMenu = (_a) => {
     })));
 };
 
-const Wrapper$e = ut.div `
+const Wrapper$e = styled.div `
   position: relative;
   display: inline-block;
 `;
-const StyledMoreMenu = ut(MoreMenu) `
+const StyledMoreMenu = styled(MoreMenu) `
   position: absolute;
   right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
   left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
@@ -2178,7 +614,7 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
         show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
 };
 
-const Wrapper$d = ut.label `
+const Wrapper$d = styled.label `
   border-radius: 4px;
   padding: 4px 0px 4px 6px;
   margin-left: -6px;
@@ -2194,13 +630,13 @@ const Wrapper$d = ut.label `
   }
 `;
 Wrapper$d.defaultProps = { theme: EditableTheme };
-const Input$2 = ut.input `
+const Input$2 = styled.input `
   font-size: 20px;
   margin: 5px 0px 0px 0px;
   line-height: 1.1em;
   box-sizing: border-box;
 `;
-const Label$4 = ut.span `
+const Label$4 = styled.span `
   font-family: ${FontStyles.DEFAULT};
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
@@ -2216,12 +652,12 @@ const Checkbox = (_a) => {
         children ? React.createElement(Label$4, null, children) : null));
 };
 
-const SelectAll = ut.div `
+const SelectAll = styled.div `
   padding: 8px 12px;
   border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
   box-sizing: border-box;
 `;
-const Options$1 = ut.div `
+const Options$1 = styled.div `
   padding: 12px;
   box-sizing: border-box;
 `;
@@ -2262,325 +698,7 @@ const Checklist = (_a) => {
         }))));
 };
 
-var dayjs_min = {exports: {}};
-
-(function (module, exports) {
-  !function (t, e) {
-    module.exports = e() ;
-  }(commonjsGlobal, function () {
-
-    var t = 1e3,
-      e = 6e4,
-      n = 36e5,
-      r = "millisecond",
-      i = "second",
-      s = "minute",
-      u = "hour",
-      a = "day",
-      o = "week",
-      f = "month",
-      h = "quarter",
-      c = "year",
-      d = "date",
-      l = "Invalid Date",
-      $ = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,
-      y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,
-      M = {
-        name: "en",
-        weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-        months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-        ordinal: function (t) {
-          var e = ["th", "st", "nd", "rd"],
-            n = t % 100;
-          return "[" + t + (e[(n - 20) % 10] || e[n] || e[0]) + "]";
-        }
-      },
-      m = function (t, e, n) {
-        var r = String(t);
-        return !r || r.length >= e ? t : "" + Array(e + 1 - r.length).join(n) + t;
-      },
-      v = {
-        s: m,
-        z: function (t) {
-          var e = -t.utcOffset(),
-            n = Math.abs(e),
-            r = Math.floor(n / 60),
-            i = n % 60;
-          return (e <= 0 ? "+" : "-") + m(r, 2, "0") + ":" + m(i, 2, "0");
-        },
-        m: function t(e, n) {
-          if (e.date() < n.date()) return -t(n, e);
-          var r = 12 * (n.year() - e.year()) + (n.month() - e.month()),
-            i = e.clone().add(r, f),
-            s = n - i < 0,
-            u = e.clone().add(r + (s ? -1 : 1), f);
-          return +(-(r + (n - i) / (s ? i - u : u - i)) || 0);
-        },
-        a: function (t) {
-          return t < 0 ? Math.ceil(t) || 0 : Math.floor(t);
-        },
-        p: function (t) {
-          return {
-            M: f,
-            y: c,
-            w: o,
-            d: a,
-            D: d,
-            h: u,
-            m: s,
-            s: i,
-            ms: r,
-            Q: h
-          }[t] || String(t || "").toLowerCase().replace(/s$/, "");
-        },
-        u: function (t) {
-          return void 0 === t;
-        }
-      },
-      g = "en",
-      D = {};
-    D[g] = M;
-    var p = function (t) {
-        return t instanceof _;
-      },
-      S = function t(e, n, r) {
-        var i;
-        if (!e) return g;
-        if ("string" == typeof e) {
-          var s = e.toLowerCase();
-          D[s] && (i = s), n && (D[s] = n, i = s);
-          var u = e.split("-");
-          if (!i && u.length > 1) return t(u[0]);
-        } else {
-          var a = e.name;
-          D[a] = e, i = a;
-        }
-        return !r && i && (g = i), i || !r && g;
-      },
-      w = function (t, e) {
-        if (p(t)) return t.clone();
-        var n = "object" == typeof e ? e : {};
-        return n.date = t, n.args = arguments, new _(n);
-      },
-      O = v;
-    O.l = S, O.i = p, O.w = function (t, e) {
-      return w(t, {
-        locale: e.$L,
-        utc: e.$u,
-        x: e.$x,
-        $offset: e.$offset
-      });
-    };
-    var _ = function () {
-        function M(t) {
-          this.$L = S(t.locale, null, !0), this.parse(t);
-        }
-        var m = M.prototype;
-        return m.parse = function (t) {
-          this.$d = function (t) {
-            var e = t.date,
-              n = t.utc;
-            if (null === e) return new Date(NaN);
-            if (O.u(e)) return new Date();
-            if (e instanceof Date) return new Date(e);
-            if ("string" == typeof e && !/Z$/i.test(e)) {
-              var r = e.match($);
-              if (r) {
-                var i = r[2] - 1 || 0,
-                  s = (r[7] || "0").substring(0, 3);
-                return n ? new Date(Date.UTC(r[1], i, r[3] || 1, r[4] || 0, r[5] || 0, r[6] || 0, s)) : new Date(r[1], i, r[3] || 1, r[4] || 0, r[5] || 0, r[6] || 0, s);
-              }
-            }
-            return new Date(e);
-          }(t), this.$x = t.x || {}, this.init();
-        }, m.init = function () {
-          var t = this.$d;
-          this.$y = t.getFullYear(), this.$M = t.getMonth(), this.$D = t.getDate(), this.$W = t.getDay(), this.$H = t.getHours(), this.$m = t.getMinutes(), this.$s = t.getSeconds(), this.$ms = t.getMilliseconds();
-        }, m.$utils = function () {
-          return O;
-        }, m.isValid = function () {
-          return !(this.$d.toString() === l);
-        }, m.isSame = function (t, e) {
-          var n = w(t);
-          return this.startOf(e) <= n && n <= this.endOf(e);
-        }, m.isAfter = function (t, e) {
-          return w(t) < this.startOf(e);
-        }, m.isBefore = function (t, e) {
-          return this.endOf(e) < w(t);
-        }, m.$g = function (t, e, n) {
-          return O.u(t) ? this[e] : this.set(n, t);
-        }, m.unix = function () {
-          return Math.floor(this.valueOf() / 1e3);
-        }, m.valueOf = function () {
-          return this.$d.getTime();
-        }, m.startOf = function (t, e) {
-          var n = this,
-            r = !!O.u(e) || e,
-            h = O.p(t),
-            l = function (t, e) {
-              var i = O.w(n.$u ? Date.UTC(n.$y, e, t) : new Date(n.$y, e, t), n);
-              return r ? i : i.endOf(a);
-            },
-            $ = function (t, e) {
-              return O.w(n.toDate()[t].apply(n.toDate("s"), (r ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e)), n);
-            },
-            y = this.$W,
-            M = this.$M,
-            m = this.$D,
-            v = "set" + (this.$u ? "UTC" : "");
-          switch (h) {
-            case c:
-              return r ? l(1, 0) : l(31, 11);
-            case f:
-              return r ? l(1, M) : l(0, M + 1);
-            case o:
-              var g = this.$locale().weekStart || 0,
-                D = (y < g ? y + 7 : y) - g;
-              return l(r ? m - D : m + (6 - D), M);
-            case a:
-            case d:
-              return $(v + "Hours", 0);
-            case u:
-              return $(v + "Minutes", 1);
-            case s:
-              return $(v + "Seconds", 2);
-            case i:
-              return $(v + "Milliseconds", 3);
-            default:
-              return this.clone();
-          }
-        }, m.endOf = function (t) {
-          return this.startOf(t, !1);
-        }, m.$set = function (t, e) {
-          var n,
-            o = O.p(t),
-            h = "set" + (this.$u ? "UTC" : ""),
-            l = (n = {}, n[a] = h + "Date", n[d] = h + "Date", n[f] = h + "Month", n[c] = h + "FullYear", n[u] = h + "Hours", n[s] = h + "Minutes", n[i] = h + "Seconds", n[r] = h + "Milliseconds", n)[o],
-            $ = o === a ? this.$D + (e - this.$W) : e;
-          if (o === f || o === c) {
-            var y = this.clone().set(d, 1);
-            y.$d[l]($), y.init(), this.$d = y.set(d, Math.min(this.$D, y.daysInMonth())).$d;
-          } else l && this.$d[l]($);
-          return this.init(), this;
-        }, m.set = function (t, e) {
-          return this.clone().$set(t, e);
-        }, m.get = function (t) {
-          return this[O.p(t)]();
-        }, m.add = function (r, h) {
-          var d,
-            l = this;
-          r = Number(r);
-          var $ = O.p(h),
-            y = function (t) {
-              var e = w(l);
-              return O.w(e.date(e.date() + Math.round(t * r)), l);
-            };
-          if ($ === f) return this.set(f, this.$M + r);
-          if ($ === c) return this.set(c, this.$y + r);
-          if ($ === a) return y(1);
-          if ($ === o) return y(7);
-          var M = (d = {}, d[s] = e, d[u] = n, d[i] = t, d)[$] || 1,
-            m = this.$d.getTime() + r * M;
-          return O.w(m, this);
-        }, m.subtract = function (t, e) {
-          return this.add(-1 * t, e);
-        }, m.format = function (t) {
-          var e = this,
-            n = this.$locale();
-          if (!this.isValid()) return n.invalidDate || l;
-          var r = t || "YYYY-MM-DDTHH:mm:ssZ",
-            i = O.z(this),
-            s = this.$H,
-            u = this.$m,
-            a = this.$M,
-            o = n.weekdays,
-            f = n.months,
-            h = function (t, n, i, s) {
-              return t && (t[n] || t(e, r)) || i[n].slice(0, s);
-            },
-            c = function (t) {
-              return O.s(s % 12 || 12, t, "0");
-            },
-            d = n.meridiem || function (t, e, n) {
-              var r = t < 12 ? "AM" : "PM";
-              return n ? r.toLowerCase() : r;
-            },
-            $ = {
-              YY: String(this.$y).slice(-2),
-              YYYY: O.s(this.$y, 4, "0"),
-              M: a + 1,
-              MM: O.s(a + 1, 2, "0"),
-              MMM: h(n.monthsShort, a, f, 3),
-              MMMM: h(f, a),
-              D: this.$D,
-              DD: O.s(this.$D, 2, "0"),
-              d: String(this.$W),
-              dd: h(n.weekdaysMin, this.$W, o, 2),
-              ddd: h(n.weekdaysShort, this.$W, o, 3),
-              dddd: o[this.$W],
-              H: String(s),
-              HH: O.s(s, 2, "0"),
-              h: c(1),
-              hh: c(2),
-              a: d(s, u, !0),
-              A: d(s, u, !1),
-              m: String(u),
-              mm: O.s(u, 2, "0"),
-              s: String(this.$s),
-              ss: O.s(this.$s, 2, "0"),
-              SSS: O.s(this.$ms, 3, "0"),
-              Z: i
-            };
-          return r.replace(y, function (t, e) {
-            return e || $[t] || i.replace(":", "");
-          });
-        }, m.utcOffset = function () {
-          return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
-        }, m.diff = function (r, d, l) {
-          var $,
-            y = O.p(d),
-            M = w(r),
-            m = (M.utcOffset() - this.utcOffset()) * e,
-            v = this - M,
-            g = O.m(this, M);
-          return g = ($ = {}, $[c] = g / 12, $[f] = g, $[h] = g / 3, $[o] = (v - m) / 6048e5, $[a] = (v - m) / 864e5, $[u] = v / n, $[s] = v / e, $[i] = v / t, $)[y] || v, l ? g : O.a(g);
-        }, m.daysInMonth = function () {
-          return this.endOf(f).$D;
-        }, m.$locale = function () {
-          return D[this.$L];
-        }, m.locale = function (t, e) {
-          if (!t) return this.$L;
-          var n = this.clone(),
-            r = S(t, e, !0);
-          return r && (n.$L = r), n;
-        }, m.clone = function () {
-          return O.w(this.$d, this);
-        }, m.toDate = function () {
-          return new Date(this.valueOf());
-        }, m.toJSON = function () {
-          return this.isValid() ? this.toISOString() : null;
-        }, m.toISOString = function () {
-          return this.$d.toISOString();
-        }, m.toString = function () {
-          return this.$d.toUTCString();
-        }, M;
-      }(),
-      T = _.prototype;
-    return w.prototype = T, [["$ms", r], ["$s", i], ["$m", s], ["$H", u], ["$W", a], ["$M", f], ["$y", c], ["$D", d]].forEach(function (t) {
-      T[t[1]] = function (e) {
-        return this.$g(e, t[0], t[1]);
-      };
-    }), w.extend = function (t, e) {
-      return t.$i || (t(e, _, w), t.$i = !0), w;
-    }, w.locale = S, w.isDayjs = p, w.unix = function (t) {
-      return w(1e3 * t);
-    }, w.en = D[g], w.Ls = D, w.p = {}, w;
-  });
-})(dayjs_min);
-var dayjs_minExports = dayjs_min.exports;
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
-
-const Wrapper$c = ut.div `
+const Wrapper$c = styled.div `
   border-radius: 4px;
   height: 40px;
   background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
@@ -2602,7 +720,7 @@ const Wrapper$c = ut.div `
   }
 `;
 Wrapper$c.defaultProps = { theme: EditableTheme };
-const Trigger$1 = ut.select `
+const Trigger$1 = styled.select `
   appearance: none;
   box-shadow: none;
   outline: none;
@@ -2622,7 +740,7 @@ const Trigger$1 = ut.select `
   position: relative;
   z-index: 2;
 `;
-const IconWrapper$2 = ut(Icon) `
+const IconWrapper$2 = styled(Icon) `
   position: absolute;
   right: 9px;
   z-index: 1;
@@ -2645,11 +763,11 @@ const Select = (_a) => {
         React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })));
 };
 
-const DatePickerWrapper = ut.div `
+const DatePickerWrapper = styled.div `
   display: flex;
   width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
 `;
-const Middle = ut.div `
+const Middle = styled.div `
   margin: 0px -1px;
   flex-grow: 1;
 `;
@@ -2715,7 +833,7 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
             React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
 };
 
-const Scrim$1 = ut.div `
+const Scrim$1 = styled.div `
   position: ${({ $position }) => $position};
   top: 0;
   right: 0;
@@ -2724,7 +842,7 @@ const Scrim$1 = ut.div `
   z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
   background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
 `;
-const Container$2 = ut.div `
+const Container$2 = styled.div `
   z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
   min-width: 400px;
   width: ${({ $width }) => $width || '400px'};
@@ -2742,7 +860,7 @@ const Container$2 = ut.div `
   box-sizing: border-box;
   background: #fff;
 `;
-const Header$2 = ut.div `
+const Header$2 = styled.div `
   padding: 30px 20px;
   display: flex;
   align-items: flex-start;
@@ -2750,21 +868,21 @@ const Header$2 = ut.div `
   flex-shrink: 0;
   background: #fff;
 `;
-const Close$1 = ut.div `
+const Close$1 = styled.div `
   margin-left: auto;
   display: flex;
   align-items: center;
   padding-left: 20px;
   cursor: pointer;
 `;
-const ContentWrapper$1 = ut.div `
+const ContentWrapper$1 = styled.div `
   overflow-x: hidden;
   overflow-y: auto;
   box-sizing: border-box;
   flex: 1;
   background: #fff;
 `;
-const ButtonBar$1 = ut.div `
+const ButtonBar$1 = styled.div `
   padding: 20px;
   display: flex;
   align-items: center;
@@ -2802,12 +920,12 @@ const Drawer = (_a) => {
         scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
 };
 
-const Wrapper$b = ut.div `
+const Wrapper$b = styled.div `
   display: inline-block;
   position: relative;
   height: 16px;
 `;
-const StyledIcon$4 = ut(Icon) `
+const StyledIcon$4 = styled(Icon) `
   width: 16px;
   height: 16px;
   margin: 0px 6px;
@@ -2843,7 +961,7 @@ const positions = {
         transform: 'translateY(-50%)',
     },
 };
-const Content$3 = ut.div(props => (Object.assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: props.theme.PRIMARY_COLOR.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 10 }, positions[props.$position])));
+const Content$3 = styled.div(props => (Object.assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: props.theme.PRIMARY_COLOR.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 10 }, positions[props.$position])));
 Content$3.defaultProps = { theme: EditableTheme };
 const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }) => {
     const [show_content, toggleContent] = useState(false);
@@ -2852,15 +970,15 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
         show_content ? (React.createElement(Content$3, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
 };
 
-const Wrapper$a = ut.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
-const LabelRow = ut.div `
+const Wrapper$a = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
+const LabelRow = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0 0 4px 0;
   box-sizing: border-box;
 `;
-const Label$3 = ut.label `
+const Label$3 = styled.label `
   font-size: ${FontSizes.DEFAULT};
   font-weight: 500;
   line-height: 1em;
@@ -2869,11 +987,11 @@ const Label$3 = ut.label `
   display: flex;
   align-items: center;
 `;
-const Required = ut.span `
+const Required = styled.span `
   color: ${Colors.RED.Hex};
   margin-left: 4px;
 `;
-const Action = ut.span `
+const Action = styled.span `
   font-size: ${FontSizes.DEFAULT};
   font-weight: 500;
   line-height: 1em;
@@ -2882,7 +1000,7 @@ const Action = ut.span `
   cursor: pointer;
 `;
 Action.defaultProps = { theme: EditableTheme };
-const Description = ut.div `
+const Description = styled.div `
   font-size: ${FontSizes.SMALL};
   font-weight: 400;
   line-height: 1.3em;
@@ -2891,7 +1009,7 @@ const Description = ut.div `
   margin: 0 0 8px 0;
   box-sizing: border-box;
 `;
-const Validation = ut.div `
+const Validation = styled.div `
   font-size: ${FontSizes.SMALL};
   font-weight: 400;
   line-height: 1.3em;
@@ -2914,7 +1032,7 @@ const Field = (_a) => {
         validationText ? React.createElement(Validation, null, validationText) : null));
 };
 
-const Wrapper$9 = ut.fieldset `
+const Wrapper$9 = styled.fieldset `
   margin-inline-start: 0px;
   margin-inline-end: 0px;
   padding-block-start: 0px;
@@ -2927,7 +1045,7 @@ const Wrapper$9 = ut.fieldset `
   border-color: transparent;
   border-image: none;
 `;
-const Label$2 = ut.legend `
+const Label$2 = styled.legend `
   padding-inline-start: 0px;
   padding-inline-end: 0px;
 
@@ -2938,7 +1056,7 @@ const Label$2 = ut.legend `
   line-height: 22px;
   margin-bottom: 6px;
 `;
-const Content$2 = ut.div `
+const Content$2 = styled.div `
   padding: 20px;
   border-radius: 8px;
   background: #fcfcfc;
@@ -2949,7 +1067,7 @@ const FieldGroup = ({ children, label }) => {
         React.createElement(Content$2, null, children)));
 };
 
-const Dropzone = ut.div `
+const Dropzone = styled.div `
   border-radius: 8px;
   border-width: 1px;
   border-style: dashed;
@@ -2958,7 +1076,7 @@ const Dropzone = ut.div `
   cursor: copy;
 `;
 Dropzone.defaultProps = { theme: EditableTheme };
-const IconWrapper$1 = ut.div `
+const IconWrapper$1 = styled.div `
   width: 80px;
   height: 80px;
   border-radius: 40px;
@@ -2967,7 +1085,7 @@ const IconWrapper$1 = ut.div `
   align-items: center;
   justify-content: center;
 `;
-const StyledIcon$3 = ut(Icon) `
+const StyledIcon$3 = styled(Icon) `
   width: 40px !important;
   height: 40px !important;
 
@@ -2975,27 +1093,27 @@ const StyledIcon$3 = ut(Icon) `
     fill: ${Colors.GRAY.Hex} !important;
   }
 `;
-const ClickZone = ut.div `
+const ClickZone = styled.div `
   margin: 40px 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
 `;
-const Content$1 = ut.div `
+const Content$1 = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
 `;
-const Files = ut.div `
+const Files = styled.div `
   display: flex;
   flex-direction: column;
   align-self: stretch;
   gap: 10px;
   margin: 20px;
 `;
-const File = ut.div `
+const File = styled.div `
   display: flex;
   padding: 10px;
   align-items: center;
@@ -3005,7 +1123,7 @@ const File = ut.div `
   border: 1px solid #cccccc;
   background: #ffffff;
 `;
-const Remove$1 = ut(Icon) `
+const Remove$1 = styled(Icon) `
   width: 24px;
   height: 24px;
   cursor: pointer;
@@ -3199,7 +1317,7 @@ const formatAsSsn = (number) => {
     return formatted_value;
 };
 
-const StyledInput = ut.input `
+const StyledInput = styled.input `
   border: none !important;
   background: none !important;
   font-size: ${FontSizes.DEFAULT};
@@ -3220,7 +1338,7 @@ const StyledInput = ut.input `
   display: block;
   width: 100%;
 `;
-const StyledSuffix = ut.div `
+const StyledSuffix = styled.div `
   box-sizing: border-box;
   border-radius: 0px 4px 4px 0px;
   display: flex;
@@ -3238,7 +1356,7 @@ const StyledSuffix = ut.div `
   font-size: ${FontSizes.DEFAULT};
   color: Colors.BLACK.Hex;
 `;
-const StyledWrapper = ut.div `
+const StyledWrapper = styled.div `
   display: flex;
   width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
   background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
@@ -3253,7 +1371,7 @@ const StyledWrapper = ut.div `
   }
 `;
 StyledWrapper.defaultProps = { theme: EditableTheme };
-const StyledTextarea = ut.textarea `
+const StyledTextarea = styled.textarea `
   background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
   border-radius: 4px;
   border-width: 1px;
@@ -3282,7 +1400,7 @@ const StyledTextarea = ut.textarea `
   }
 `;
 StyledTextarea.defaultProps = { theme: EditableTheme };
-const SuggestedValues = ut.div `
+const SuggestedValues = styled.div `
   background: #fff;
   box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
   border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
@@ -3299,7 +1417,7 @@ const SuggestedValues = ut.div `
   overflow: auto;
 `;
 SuggestedValues.defaultProps = { theme: EditableTheme };
-const SuggestedSummary = ut.div `
+const SuggestedSummary = styled.div `
   color: ${Colors.MEDIUM_GRAY.Hex};
   font-size: 12px;
   font-family: ${FontStyles.DEFAULT};
@@ -3312,7 +1430,7 @@ const SuggestedSummary = ut.div `
   position: sticky;
   top: 0px;
 `;
-const SuggestedValue = ut.div `
+const SuggestedValue = styled.div `
   cursor: pointer;
   padding: 8px 12px;
   font-size: ${FontSizes.DEFAULT};
@@ -3385,7 +1503,7 @@ const Input$1 = (_a) => {
             }))) : null));
 };
 
-const Wrapper$8 = ut.a `
+const Wrapper$8 = styled.a `
   color: ${props => props.theme.PRIMARY_COLOR.Hex};
   font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
   line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
@@ -3405,7 +1523,7 @@ const Link = (_a) => {
     return (React.createElement(Wrapper$8, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
 };
 
-const dash = ht `
+const dash = keyframes `
   0% {
     stroke-dasharray: 1, 160;
     stroke-dashoffset: 0;
@@ -3419,7 +1537,7 @@ const dash = ht `
     stroke-dashoffset: -124;
   }
 `;
-const Spinner = ut.svg `
+const Spinner = styled.svg `
   z-index: 2;
   position: absolute;
   top: 50%;
@@ -3428,7 +1546,7 @@ const Spinner = ut.svg `
   width: 40px;
   height: 40px;
 `;
-const Path = ut.path `
+const Path = styled.path `
   stroke: #0193d7;
   stroke-linecap: round;
   -webkit-animation: ${dash} 1.1s ease-in-out infinite;
@@ -3439,49 +1557,7 @@ const Loader = () => {
         React.createElement(Path, { d: 'M7.21487 1.2868C7.88431 0.9044 8.73031 0.9044 9.39974 1.2868L9.40283 1.28856L14.4613 4.20761C15.1684 4.598 15.5746 5.33558 15.5746 6.11465V8.99996V11.8853C15.5746 12.6507 15.1632 13.3848 14.4617 13.7721L9.37973 16.7132C8.71029 17.0956 7.86428 17.0956 7.19485 16.7132L7.19088 16.7109L2.11279 13.772C1.40602 13.3816 1 12.6441 1 11.8653V8.98995V6.11465C1 5.31458 1.44381 4.59039 2.10827 4.21051L7.21487 1.2868Z', fill: 'none', strokeWidth: '2' })));
 };
 
-const colorMapping = {
-    black: {
-        fill_1: '#000000',
-        fill_2: '#000000',
-        fill_3: '#000000',
-    },
-    white: {
-        fill_1: '#ffffff',
-        fill_2: '#ffffff',
-        fill_3: '#ffffff',
-    },
-    full: {
-        fill_1: '#000000',
-        fill_2: '#E82425',
-        fill_3: '#E82425',
-    },
-    reversed: {
-        fill_1: '#ffffff',
-        fill_2: '#E82425',
-        fill_3: '#E82425',
-    },
-};
-const Logo = (_a) => {
-    var { type = 'standard_full', height = '50px' } = _a, accessibleProps = __rest(_a, ["type", "height"]);
-    const type_parts = type.split('_');
-    switch (type_parts[0]) {
-        case 'mark':
-            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, viewBox: '0 0 58 51', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps),
-                React.createElement("path", { d: 'M43.9348 -1.14441e-05H13.3724L0 25.2376L7.27148 38.0136L14.1215 50.0487H43.1856L57.3077 25.2376L43.9348 -1.14441e-05ZM38.206 9.49903L46.459 25.0743L37.6507 40.5497H19.6567L15.5417 33.3199L10.8487 25.0743L19.1013 9.49903H38.206Z', fill: type_parts[1] })));
-        default:
-            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 236 50', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps),
-                React.createElement("path", { d: 'M230.794 29.59H219.306L214.279 39.0907L217.012 43.9001L219.587 48.4308H230.512L235.821 39.0907L230.794 29.59V29.59ZM228.641 33.1659L231.743 39.0292L228.432 44.8549H221.668L220.121 42.1332L218.356 39.0292L221.459 33.1659H228.641Z', fill: colorMapping[type_parts[1]].fill_3 }),
-                React.createElement("path", { d: 'M211.662 42.6033L199.206 42.6319C196.339 42.6319 193.862 41.6095 191.846 39.5923C189.828 37.5755 188.805 35.0985 188.805 32.2321C188.805 29.3656 189.828 26.8886 191.846 24.8718C193.848 22.8332 196.325 21.7975 199.206 21.7975C202.072 21.7975 204.549 22.8199 206.566 24.8374C207.613 25.8847 208.391 27.093 208.944 28.5312L209.253 29.3327H197.87L196.325 32.2579L197.921 35.0969H211.458L215.015 28.6192C214.296 25.5702 212.835 22.9293 210.672 20.7657C207.531 17.6257 203.674 16.0333 199.206 16.0333C194.737 16.0333 190.88 17.6257 187.739 20.7657C184.555 23.9501 183.007 27.7011 183.007 32.2321C183.007 36.7001 184.599 40.5577 187.739 43.6981C190.88 46.8384 194.737 48.4308 199.206 48.4308H210.095L214.745 48.3297L211.662 42.6033', fill: colorMapping[type_parts[1]].fill_1 }),
-                React.createElement("path", { d: 'M160.945 19.133L158.826 20.8384C155.734 23.9359 154.141 27.8058 154.141 32.2967L154.141 47.7903L156.985 49.407L159.939 47.8778L159.94 32.2967C159.94 29.6632 160.778 27.3706 162.432 25.4846C162.615 25.2739 162.811 25.0666 163.018 24.8639C163.074 24.8155 164.138 24.0061 164.811 23.5592C166.321 22.5576 168.076 21.9876 170.024 21.8632L170.166 21.8621C172.923 21.8621 175.32 22.7325 177.301 24.4494L180.146 23.0088L180.246 19.3426C177.44 17.1664 174.132 16.0633 170.408 16.0633C166.909 16.0633 163.725 17.0962 160.945 19.133', fill: colorMapping[type_parts[1]].fill_1 }),
-                React.createElement("path", { d: 'M131.392 50C135.884 50 139.753 48.4076 142.893 45.2676C146.033 42.1269 147.626 38.2581 147.626 33.7668V18.1124L144.782 16.4964L141.827 18.0251V33.7668C141.827 36.6932 140.792 39.1936 138.745 41.2034C136.684 43.1927 134.128 44.2013 131.151 44.2013L131.01 44.2002H131.81L131.669 44.2013C128.692 44.2013 126.136 43.1927 124.074 41.2034C122.028 39.1936 120.993 36.6932 120.993 33.7668V18.0251L118.038 16.4964L115.194 18.1124V33.7668C115.194 38.2581 116.786 42.1269 119.926 45.2676C123.067 48.4076 126.936 50 131.427 50H131.392Z', fill: colorMapping[type_parts[1]].fill_1 }),
-                React.createElement("path", { d: 'M93.8353 26.9933L97.8468 31.2421L100.788 28.1521L107.791 20.4534L106.753 17.3567L103.584 16.5678', fill: colorMapping[type_parts[1]].fill_2 }),
-                React.createElement("path", { d: 'M80.7509 16.5677L77.5821 17.3564L76.5441 20.4534L83.5514 28.1568L88.1484 32.9862L76.5412 45.2133L77.5187 48.3175C79.525 48.9571 80.359 49.1805 80.6985 49.2584L92.195 37.238L103.636 49.2584C103.976 49.1805 104.81 48.9571 106.817 48.3175L107.794 45.2133L80.7509 16.5677', fill: colorMapping[type_parts[1]].fill_1 }),
-                React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1 }),
-                React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1 })));
-    }
-};
-
-const Steps = ut.div `
+const Steps = styled.div `
   padding: 20px;
   border-bottom: 1px solid #e7e6e6;
   background: #f5f5f5;
@@ -3489,18 +1565,18 @@ const Steps = ut.div `
   gap: 30px;
   align-items: center;
 `;
-const Step = ut.div `
+const Step = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
 `;
-const StyledIcon$2 = ut(Icon) `
+const StyledIcon$2 = styled(Icon) `
   > path {
     fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
   }
 `;
 StyledIcon$2.defaultProps = { theme: EditableTheme };
-const StepIndicator = ut.div `
+const StepIndicator = styled.div `
   width: 30px;
   height: 30px;
   border-radius: 15px;
@@ -3516,7 +1592,7 @@ const StepIndicator = ut.div `
   flex-shrink: 0;
 `;
 StepIndicator.defaultProps = { theme: EditableTheme };
-const StepLabel = ut.div `
+const StepLabel = styled.div `
   color: #000;
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
   font-size: 14px;
@@ -3531,7 +1607,7 @@ const ProgressBar = ({ steps }) => {
     })));
 };
 
-const Wrapper$7 = ut.div `
+const Wrapper$7 = styled.div `
   position: fixed;
   top: 0;
   right: 0;
@@ -3543,7 +1619,7 @@ const Wrapper$7 = ut.div `
   align-items: center;
   justify-content: center;
 `;
-const Container$1 = ut.dialog `
+const Container$1 = styled.dialog `
   width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
   max-width: calc(100vw - 80px);
   height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
@@ -3559,7 +1635,7 @@ const Container$1 = ut.dialog `
   display: flex;
   flex-direction: column;
 `;
-const Header$1 = ut.div `
+const Header$1 = styled.div `
   flex-shrink: 0;
   padding: 20px;
   border-bottom: 1px solid #e7e6e6;
@@ -3568,28 +1644,28 @@ const Header$1 = ut.div `
   background: #ffffff;
   box-sizing: border-box;
 `;
-const Close = ut.div `
+const Close = styled.div `
   margin-left: auto;
   display: flex;
   align-items: center;
   padding-left: 20px;
   cursor: pointer;
 `;
-const CloseMsg = ut.span `
+const CloseMsg = styled.span `
   font-size: ${FontSizes.SMALL};
   font-weight: 400;
   font-family: ${FontStyles.DEFAULT};
   line-height: 1em;
   color: ${Colors.MEDIUM_GRAY.Hex};
 `;
-const ContentWrapper = ut.div `
+const ContentWrapper = styled.div `
   overflow-x: hidden;
   overflow-y: auto;
   background: #ffffff;
   flex: 1;
   box-sizing: border-box;
 `;
-const ButtonBar = ut.div `
+const ButtonBar = styled.div `
   flex-shrink: 0;
   background: #ffffff;
   padding: 20px;
@@ -3632,11 +1708,11 @@ const Modal = (_a) => {
                     primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
 };
 
-const Wrapper$6 = ut.div `
+const Wrapper$6 = styled.div `
   position: relative;
   width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
 `;
-const Trigger = ut.div `
+const Trigger = styled.div `
   box-sizing: border-box;
   border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
   height: 40px;
@@ -3665,7 +1741,7 @@ const Trigger = ut.div `
   z-index: 1;
 `;
 Trigger.defaultProps = { theme: EditableTheme };
-const Value = ut.div `
+const Value = styled.div `
   color: ${Colors.BLACK.Hex};
   font-family: ${FontStyles.DEFAULT};
   font-size: ${FontSizes.DEFAULT};
@@ -3676,7 +1752,7 @@ const Value = ut.div `
   white-space: nowrap;
   width: 100%;
 `;
-const Options = ut.div `
+const Options = styled.div `
   background: #fff;
   box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
   border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
@@ -3692,7 +1768,7 @@ const Options = ut.div `
   overflow: auto;
 `;
 Options.defaultProps = { theme: EditableTheme };
-const Scrim = ut.div `
+const Scrim = styled.div `
   bottom: 0;
   left: 0;
   position: fixed;
@@ -3715,7 +1791,7 @@ const MultiSelect = (_a) => {
         showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
 };
 
-const Wrapper$5 = ut.div `
+const Wrapper$5 = styled.div `
   display: inline-block;
   border-radius: 4px;
   padding: 4px 6px;
@@ -3724,18 +1800,18 @@ const Wrapper$5 = ut.div `
   box-sizing: border-box;
   cursor: ${props => (props.$removable ? 'pointer' : 'default')};
 `;
-const Content = ut.div `
+const Content = styled.div `
   display: flex;
   align-items: center;
 `;
-const Label$1 = ut.div `
+const Label$1 = styled.div `
   color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
   font-size: ${FontSizes.SMALL};
   font-weight: 500;
   font-family: ${FontStyles.DEFAULT};
   line-height: 1.2em;
 `;
-const Remove = ut.div `
+const Remove = styled.div `
   margin-left: 10px;
   display: flex;
   align-items: center;
@@ -3749,7 +1825,7 @@ const Tag = (_a) => {
                 React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
 };
 
-const Wrapper$4 = ut.div `
+const Wrapper$4 = styled.div `
   display: flex;
   padding: 16px 30px;
   align-items: center;
@@ -3757,24 +1833,24 @@ const Wrapper$4 = ut.div `
   align-self: stretch;
   border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
 `;
-const Title = ut.div `
+const Title = styled.div `
   display: flex;
   align-items: center;
   gap: 20px;
 `;
-const Info = ut.div `
+const Info = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
   flex: 1 0 0;
 `;
-const Breadcrumbs = ut.div `
+const Breadcrumbs = styled.div `
   display: flex;
   align-items: center;
   gap: 4px;
 `;
-const Actions = ut.div `
+const Actions = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -3799,7 +1875,7 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
             menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
 };
 
-const Wrapper$3 = ut.nav `
+const Wrapper$3 = styled.nav `
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -3834,7 +1910,7 @@ const Pagination = (_a) => {
         React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, onClick: handleNextClick, small: true })));
 };
 
-const Wrapper$2 = ut.label `
+const Wrapper$2 = styled.label `
   border-radius: 4px;
   padding: 4px 0px 4px 6px;
   margin-left: -6px;
@@ -3850,12 +1926,12 @@ const Wrapper$2 = ut.label `
   }
 `;
 Wrapper$2.defaultProps = { theme: EditableTheme };
-const Input = ut.input `
+const Input = styled.input `
   font-size: 20px;
   margin: 0px 0px 2px 0px;
   line-height: 1.1em;
 `;
-const Label = ut.span `
+const Label = styled.span `
   font-family: ${FontStyles.DEFAULT};
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
@@ -3878,7 +1954,7 @@ const RadioList = (_a) => {
     })));
 };
 
-const StyledTable = ut.table `
+const StyledTable = styled.table `
   width: 100%;
   margin-top: 1px;
   table-layout: ${props => props.$tableLayout || 'auto'};
@@ -3888,7 +1964,7 @@ const StyledTable = ut.table `
   border-color: none;
   box-sizing: border-box;
 `;
-const Header = ut.th `
+const Header = styled.th `
   padding: 12px !important;
   text-align: left;
   font-weight: 500;
@@ -3907,7 +1983,7 @@ const Header = ut.th `
   color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
 `;
 Header.defaultProps = { theme: EditableTheme };
-const Row = ut.tr `
+const Row = styled.tr `
   cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
   transition: all 0.2s;
   background-color: ${props => props.$bgColor};
@@ -3917,7 +1993,7 @@ const Row = ut.tr `
   }
 `;
 Row.defaultProps = { theme: EditableTheme };
-const Column = ut.td `
+const Column = styled.td `
   padding: 16px 12px !important;
   font-size: ${FontSizes.DEFAULT} !important;
   font-weight: 400 !important;
@@ -3928,13 +2004,13 @@ const Column = ut.td `
   box-sizing: border-box;
   width: ${props => props.$width || 'auto'};
 `;
-const IconWrapper = ut.span `
+const IconWrapper = styled.span `
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   margin-left: 2px;
 `;
-const StyledIcon$1 = ut(Icon) `
+const StyledIcon$1 = styled(Icon) `
   > path {
     fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
   }
@@ -3957,7 +2033,7 @@ const Table = (_a) => {
         }))) : null));
 };
 
-const Wrapper$1 = ut.div `
+const Wrapper$1 = styled.div `
   display: flex;
   box-sizing: border-box;
   align-items: flex-end;
@@ -3968,7 +2044,7 @@ const Wrapper$1 = ut.div `
   padding: 0;
   margin: 0;
 `;
-const Tab = ut.div `
+const Tab = styled.div `
   display: flex;
   align-items: center;
   gap: 6px;
@@ -3990,7 +2066,7 @@ const Tab = ut.div `
   }
 `;
 Tab.defaultProps = { theme: EditableTheme };
-const Badge = ut.div `
+const Badge = styled.div `
   display: flex;
   width: 18px;
   height: 18px;
@@ -4017,7 +2093,7 @@ const Tabs = (_a) => {
 };
 Tabs.defaultProps = {};
 
-const Track = ut.div `
+const Track = styled.div `
   height: 24px;
   border-radius: 12px;
   background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
@@ -4028,7 +2104,7 @@ const Track = ut.div `
   padding: 2px;
   box-sizing: border-box;
 `;
-const Handle = ut.div `
+const Handle = styled.div `
   width: 20px;
   height: 20px;
   border-radius: 10px;
@@ -4048,7 +2124,7 @@ const Toggle = (_a) => {
 };
 Toggle.defaultProps = {};
 
-const Container = ut.div `
+const Container = styled.div `
   width: 100%;
   padding: 40px auto;
   gap: 20px;
@@ -4057,14 +2133,14 @@ const Container = ut.div `
   justify-items: center;
   align-items: center;
 `;
-const Wrapper = ut.div `
+const Wrapper = styled.div `
   gap: 10px;
   display: flex;
   flex-direction: column;
   justify-items: center;
   align-items: center;
 `;
-const StyledIcon = ut.div `
+const StyledIcon = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4084,5 +2160,5 @@ const ZeroState = (_a) => {
         action && (React.createElement(Button, { children: action === null || action === void 0 ? void 0 : action.children, icon: action === null || action === void 0 ? void 0 : action.icon, onClick: action === null || action === void 0 ? void 0 : action.onClick }))));
 };
 
-export { Accordion, ActionDialog, Alert, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
+export { Accordion, ActionDialog, Alert, AppHeader, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
 //# sourceMappingURL=index.js.map