@teamturing/react-kit 1.2.2 → 1.2.4

package/dist/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var styled = require('styled-components');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -565,1631 +566,10 @@ const typography$1 = {
   }
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-var __assign = function() {
-  __assign = Object.assign || function __assign(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-      return t;
-  };
-  return __assign.apply(this, arguments);
-};
-
-function __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));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-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 */);
-
 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$1 = 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
- * @return {number}
- */
-function indexof(value, search) {
-  return value.indexOf(search);
-}
-
-/**
- * @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$1 = 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$1(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$1 > 0 ? charat(characters, --position$1) : 0;
-  if (column--, character === 10) column = 1, line--;
-  return character;
-}
-
-/**
- * @return {number}
- */
-function next() {
-  character = position$1 < length ? charat(characters, position$1++) : 0;
-  if (column++, character === 10) column = 1, line++;
-  return character;
-}
-
-/**
- * @return {number}
- */
-function peek() {
-  return charat(characters, position$1);
-}
-
-/**
- * @return {number}
- */
-function caret() {
-  return position$1;
-}
-
-/**
- * @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$1 = 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 - 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$1;
-    // " '
-    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$1;
-}
-
-/**
- * @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 - 1) + '*' + from(type === 47 ? type : next());
-}
-
-/**
- * @param {number} index
- * @return {string}
- */
-function identifier(index) {
-  while (!token(peek())) next();
-  return slice(index, position$1);
-}
-
-/**
- * @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') != -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') ? value : MS + replace(value, '-start', '') + value + MS + 'grid-row-span:' + (~indexof(children, 'span') ? 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') ? 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$1(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$1(element, {
-              props: filter(children, callback)
-            });
-            break;
-        }
-        return '';
-      });
-  }
-}
-
-var unitlessKeys = {
-  animationIterationCount: 1,
-  aspectRatio: 1,
-  borderImageOutset: 1,
-  borderImageSlice: 1,
-  borderImageWidth: 1,
-  boxFlex: 1,
-  boxFlexGroup: 1,
-  boxOrdinalGroup: 1,
-  columnCount: 1,
-  columns: 1,
-  flex: 1,
-  flexGrow: 1,
-  flexPositive: 1,
-  flexShrink: 1,
-  flexNegative: 1,
-  flexOrder: 1,
-  gridRow: 1,
-  gridRowEnd: 1,
-  gridRowSpan: 1,
-  gridRowStart: 1,
-  gridColumn: 1,
-  gridColumnEnd: 1,
-  gridColumnSpan: 1,
-  gridColumnStart: 1,
-  msGridRow: 1,
-  msGridRowSpan: 1,
-  msGridColumn: 1,
-  msGridColumnSpan: 1,
-  fontWeight: 1,
-  lineHeight: 1,
-  opacity: 1,
-  order: 1,
-  orphans: 1,
-  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",
-  y = 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),
-  g = /invalid hook call/i,
-  S = new Set(),
-  w = 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];
-          g.test(t) ? (a = !1, S.delete(s)) : i.apply(void 0, __spreadArray([t], n, !1));
-        }, React.useRef(), a && !S.has(s) && (console.warn(s), S.add(s));
-      } catch (e) {
-        g.test(e.message) && S.delete(s);
-      } finally {
-        console.error = i;
-      }
-    }
-  },
-  b = Object.freeze([]),
-  E = Object.freeze({});
-function N(e, t, n) {
-  return void 0 === n && (n = E), e.theme !== n.theme && e.theme || t || n.theme;
-}
-var P = 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", "head", "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", "title", "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"]),
-  _ = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,
-  C = /(^-|-$)/g;
-function I(e) {
-  return e.replace(_, "-").replace(C, "");
-}
-var A = /(a)(d)/gi,
-  O = function (e) {
-    return String.fromCharCode(e + (e > 25 ? 39 : 97));
-  };
-function D(e) {
-  var t,
-    n = "";
-  for (t = Math.abs(e); t > 52; t = t / 52 | 0) n = O(t % 52) + n;
-  return (O(t % 52) + n).replace(A, "$1-$2");
-}
-var R,
-  T = function (e, t) {
-    for (var n = t.length; n;) e = 33 * e ^ t.charCodeAt(--n);
-    return e;
-  },
-  j = function (e) {
-    return T(5381, e);
-  };
-function x(e) {
-  return D(j(e) >>> 0);
-}
-function k(e) {
-  return "production" !== process.env.NODE_ENV && "string" == typeof e && e || e.displayName || e.name || "Component";
-}
-function V(e) {
-  return "string" == typeof e && ("production" === process.env.NODE_ENV || e.charAt(0) === e.charAt(0).toLowerCase());
-}
-var F = "function" == typeof Symbol && Symbol.for,
-  M = F ? Symbol.for("react.memo") : 60115,
-  $ = F ? Symbol.for("react.forward_ref") : 60112,
-  z = {
-    childContextTypes: !0,
-    contextType: !0,
-    contextTypes: !0,
-    defaultProps: !0,
-    displayName: !0,
-    getDefaultProps: !0,
-    getDerivedStateFromError: !0,
-    getDerivedStateFromProps: !0,
-    mixins: !0,
-    propTypes: !0,
-    type: !0
-  },
-  B = {
-    name: !0,
-    length: !0,
-    prototype: !0,
-    caller: !0,
-    callee: !0,
-    arguments: !0,
-    arity: !0
-  },
-  G = {
-    $$typeof: !0,
-    compare: !0,
-    defaultProps: !0,
-    displayName: !0,
-    propTypes: !0,
-    type: !0
-  },
-  L = ((R = {})[$] = {
-    $$typeof: !0,
-    render: !0,
-    defaultProps: !0,
-    displayName: !0,
-    propTypes: !0
-  }, R[M] = G, R);
-function Y(e) {
-  return ("type" in (t = e) && t.type.$$typeof) === M ? G : "$$typeof" in e ? L[e.$$typeof] : z;
-  var t;
-}
-var W = Object.defineProperty,
-  q = Object.getOwnPropertyNames,
-  H = Object.getOwnPropertySymbols,
-  U = Object.getOwnPropertyDescriptor,
-  J = Object.getPrototypeOf,
-  X = Object.prototype;
-function Z(e, t, n) {
-  if ("string" != typeof t) {
-    if (X) {
-      var o = J(t);
-      o && o !== X && Z(e, o, n);
-    }
-    var r = q(t);
-    H && (r = r.concat(H(t)));
-    for (var s = Y(e), i = Y(t), a = 0; a < r.length; ++a) {
-      var c = r[a];
-      if (!(c in B || n && n[c] || i && c in i || s && c in s)) {
-        var l = U(t, c);
-        try {
-          W(e, c, l);
-        } catch (e) {}
-      }
-    }
-  }
-  return e;
-}
-function K(e) {
-  return "function" == typeof e;
-}
-function Q(e) {
-  return "object" == typeof e && "styledComponentId" in e;
-}
-function ee(e, t) {
-  return e && t ? "".concat(e, " ").concat(t) : e || t || "";
-}
-function te(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 ne(e) {
-  return null !== e && "object" == typeof e && e.constructor.name === Object.name && !("props" in e && e.$$typeof);
-}
-function oe(e, t, n) {
-  if (void 0 === n && (n = !1), !n && !ne(e) && !Array.isArray(e)) return t;
-  if (Array.isArray(t)) for (var o = 0; o < t.length; o++) e[o] = oe(e[o], t[o]);else if (ne(t)) for (var o in t) e[o] = oe(e[o], t[o]);
-  return e;
-}
-function re(e, t) {
-  Object.defineProperty(e, "toString", {
-    value: t
-  });
-}
-var se = "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 ie() {
-  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 ae(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(ie.apply(void 0, __spreadArray([se[t]], n, !1)).trim());
-}
-var ce = 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 ae(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("/*!sc*/\n");
-      return t;
-    }, e;
-  }(),
-  le = new Map(),
-  ue = new Map(),
-  pe = 1,
-  de = function (e) {
-    if (le.has(e)) return le.get(e);
-    for (; ue.has(pe);) pe++;
-    var t = pe++;
-    if ("production" !== process.env.NODE_ENV && ((0 | t) < 0 || t > 1073741824)) throw ae(16, "".concat(t));
-    return le.set(e, t), ue.set(t, e), t;
-  },
-  he = (function (e) {
-    for (var t = e.getTag(), n = t.length, o = "", r = function (n) {
-        var r = function (e) {
-          return ue.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("/*!sc*/\n");
-      }, s = 0; s < n; s++) r(s);
-    return o;
-  });
-function fe() {
-  return "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : null;
-}
-var me = 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, "active"), o.setAttribute("data-styled-version", "6.0.7");
-    var i = fe();
-    return i && o.setAttribute("nonce", i), n.insertBefore(o, s), o;
-  },
-  ye = function () {
-    function e(e) {
-      this.element = me(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 ae(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;
-  }(),
-  ve = function () {
-    function e(e) {
-      this.element = me(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;
-  }(),
-  ge = 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;
-  }(),
-  Se = {
-    isServer: !0,
-    useCSSOMInjection: !y
-  },
-  we = function () {
-    function e(e, n, o) {
-      void 0 === e && (e = E), void 0 === n && (n = {});
-      var r = this;
-      this.options = __assign(__assign({}, Se), e), this.gs = n, this.names = new Map(o), this.server = !!e.isServer, re(this, function () {
-        return he(r);
-      });
-    }
-    return e.registerId = function (e) {
-      return de(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 ge(n) : t ? new ye(n) : new ve(n);
-      }(this.options), new ce(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 (de(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(de(e), n);
-    }, e.prototype.clearNames = function (e) {
-      this.names.has(e) && this.names.get(e).clear();
-    }, e.prototype.clearRules = function (e) {
-      this.getTag().clearGroup(de(e)), this.clearNames(e);
-    }, e.prototype.clearTag = function () {
-      this.tag = void 0;
-    }, e;
-  }(),
-  be = /&/g,
-  Ee = /^\s*\/\/.*$/gm;
-function Ne(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 = Ne(e.children, t)), e;
-  });
-}
-function Pe(e) {
-  var t,
-    n,
-    o,
-    r = void 0 === e ? E : e,
-    s = r.options,
-    i = void 0 === s ? E : s,
-    a = r.plugins,
-    c = void 0 === a ? b : a,
-    l = function (e, o, r) {
-      return r === n || 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(be, 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(Ee, ""),
-      l = compile(s || r ? "".concat(s, " ").concat(r, " { ").concat(c, " }") : c);
-    i.namespace && (l = Ne(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 || ae(15), T(e, t.name);
-  }, 5381).toString() : "", p;
-}
-var _e = new we(),
-  Ce = Pe(),
-  Ie = /*#__PURE__*/React.createContext({
-    shouldForwardProp: void 0,
-    styleSheet: _e,
-    stylis: Ce
-  });
-  Ie.Consumer;
-function De() {
-  return React.useContext(Ie);
-}
-var Te = function () {
-    function e(e, t) {
-      var n = this;
-      this.inject = function (e, t) {
-        void 0 === t && (t = Ce);
-        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, re(this, function () {
-        throw ae(12, String(n.name));
-      });
-    }
-    return e.prototype.getName = function (e) {
-      return void 0 === e && (e = Ce), this.name + e.hash;
-    }, e;
-  }(),
-  je = function (e) {
-    return e >= "A" && e <= "Z";
-  };
-function xe(e) {
-  for (var t = "", n = 0; n < e.length; n++) {
-    var o = e[n];
-    if (1 === n && "-" === o && "-" === e[0]) return e;
-    je(o) ? t += "-" + o.toLowerCase() : t += o;
-  }
-  return t.startsWith("ms-") ? "-" + t : t;
-}
-var ke = function (e) {
-    return null == e || !1 === e || "" === e;
-  },
-  Ve = function (t) {
-    var n,
-      o,
-      r = [];
-    for (var s in t) {
-      var i = t[s];
-      t.hasOwnProperty(s) && !ke(i) && (Array.isArray(i) && i.isCss || K(i) ? r.push("".concat(xe(s), ":"), i, ";") : ne(i) ? r.push.apply(r, __spreadArray(__spreadArray(["".concat(s, " {")], Ve(i), !1), ["}"], !1)) : r.push("".concat(xe(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 Fe(e, t, n, o) {
-  if (ke(e)) return [];
-  if (Q(e)) return [".".concat(e.styledComponentId)];
-  if (K(e)) {
-    if (!K(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 Te || ne(r) || null === r || console.error("".concat(k(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.")), Fe(r, t, n, o);
-  }
-  var s;
-  return e instanceof Te ? n ? (e.inject(n, o), [e.getName(o)]) : [e] : ne(e) ? Ve(e) : Array.isArray(e) ? Array.prototype.concat.apply(b, e.map(function (e) {
-    return Fe(e, t, n, o);
-  })) : [e.toString()];
-}
-function Me(e) {
-  for (var t = 0; t < e.length; t += 1) {
-    var n = e[t];
-    if (K(n) && !Q(n)) return !1;
-  }
-  return !0;
-}
-var $e = j("6.0.7"),
-  ze = function () {
-    function e(e, t, n) {
-      this.rules = e, this.staticRulesId = "", this.isStatic = "production" === process.env.NODE_ENV && (void 0 === n || n.isStatic) && Me(e), this.componentId = t, this.baseHash = T($e, t), this.baseStyle = n, we.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 = ee(o, this.staticRulesId);else {
-          var r = te(Fe(this.rules, e, t, n)),
-            s = D(T(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 = ee(o, s), this.staticRulesId = s;
-        }
-      } else {
-        for (var a = T(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 = T(a, u));else if (u) {
-            var p = te(Fe(u, e, t, n));
-            a = T(a, p), c += p;
-          }
-        }
-        if (c) {
-          var d = D(a >>> 0);
-          t.hasNameForId(this.componentId, d) || t.insertRules(this.componentId, d, n(c, ".".concat(d), void 0, this.componentId)), o = ee(o, d);
-        }
-      }
-      return o;
-    }, e;
-  }(),
-  Be = /*#__PURE__*/React.createContext(void 0);
-  Be.Consumer;
-var We = {},
-  qe = new Set();
-function He(e, r, s) {
-  var i = Q(e),
-    a = e,
-    c = !V(e),
-    p = r.attrs,
-    d = void 0 === p ? b : p,
-    h = r.componentId,
-    f = void 0 === h ? function (e, t) {
-      var n = "string" != typeof e ? "sc" : I(e);
-      We[n] = (We[n] || 0) + 1;
-      var o = "".concat(n, "-").concat(x("6.0.7" + n + We[n]));
-      return t ? "".concat(t, "-").concat(o) : o;
-    }(r.displayName, r.parentComponentId) : h,
-    m = r.displayName,
-    y = void 0 === m ? function (e) {
-      return V(e) ? "styled.".concat(e) : "Styled(".concat(k(e), ")");
-    }(e) : m,
-    v = r.displayName && r.componentId ? "".concat(I(r.displayName), "-").concat(r.componentId) : r.componentId || f,
-    g = i && a.attrs ? a.attrs.concat(d).filter(Boolean) : d,
-    S = r.shouldForwardProp;
-  if (i && a.shouldForwardProp) {
-    var _ = a.shouldForwardProp;
-    if (r.shouldForwardProp) {
-      var C = r.shouldForwardProp;
-      S = function (e, t) {
-        return _(e, t) && C(e, t);
-      };
-    } else S = _;
-  }
-  var A = new ze(s, v, 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(Be),
-        m = De(),
-        y = e.shouldForwardProp || m.shouldForwardProp;
-      "production" !== process.env.NODE_ENV && React.useDebugValue(d);
-      var v = 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 = K(r = e[i]) ? r(s) : r;
-            for (var c in a) s[c] = "className" === c ? ee(s[c], a[c]) : "style" === c ? __assign(__assign({}, s[c]), a[c]) : a[c];
-          }
-          return n.className && (s.className = ee(s.className, n.className)), s;
-        }(i, r, N(r, f, c) || E),
-        g = v.as || h,
-        S = {};
-      for (var w in v) void 0 === v[w] || "$" === w[0] || "as" === w || "theme" === w || ("forwardedAs" === w ? S.as = v.forwardedAs : y && !y(w, g) || (S[w] = v[w], y || "development" !== process.env.NODE_ENV || isPropValid(w) || qe.has(w) || !P.has(g) || (qe.add(w), console.warn('styled-components: it looks like an unknown prop "'.concat(w, '" 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 b = function (e, t) {
-        var n = De(),
-          o = e.generateAndInjectStyles(t, n.styleSheet, n.stylis);
-        return "production" !== process.env.NODE_ENV && React.useDebugValue(o), o;
-      }(a, v);
-      "production" !== process.env.NODE_ENV && e.warnTooManyClasses && e.warnTooManyClasses(b);
-      var _ = ee(p, d);
-      return b && (_ += " " + b), v.className && (_ += " " + v.className), S[V(g) && !P.has(g) ? "class" : "className"] = _, S.ref = s, /*#__PURE__*/React.createElement(g, S);
-    }(D, e, r);
-  }
-  "production" !== process.env.NODE_ENV && (O.displayName = y);
-  var D = /*#__PURE__*/React.forwardRef(O);
-  return D.attrs = g, D.componentStyle = A, D.shouldForwardProp = S, "production" !== process.env.NODE_ENV && (D.displayName = y), D.foldedComponentIds = i ? ee(a.foldedComponentIds, a.styledComponentId) : "", D.styledComponentId = v, 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++) oe(e, r[o], !0);
-        return e;
-      }({}, a.defaultProps, e) : e;
-    }
-  }), "production" !== process.env.NODE_ENV && (w(y, v), 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, v)), re(D, function () {
-    return ".".concat(D.styledComponentId);
-  }), c && Z(D, e, {
-    attrs: !0,
-    componentStyle: !0,
-    displayName: !0,
-    foldedComponentIds: !0,
-    shouldForwardProp: !0,
-    styledComponentId: !0,
-    target: !0
-  }), D;
-}
-function Ue(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 Je = function (e) {
-  return Object.assign(e, {
-    isCss: !0
-  });
-};
-function Xe(t) {
-  for (var n = [], o = 1; o < arguments.length; o++) n[o - 1] = arguments[o];
-  if (K(t) || ne(t)) {
-    var r = t;
-    return Je(Fe(Ue(b, __spreadArray([r], n, !0))));
-  }
-  var s = t;
-  return 0 === n.length && 1 === s.length && "string" == typeof s[0] ? Fe(s) : Je(Fe(Ue(s, n)));
-}
-function Ze(n, o, r) {
-  if (void 0 === r && (r = E), !o) throw ae(1, o);
-  var s = function (t) {
-    for (var s = [], i = 1; i < arguments.length; i++) s[i - 1] = arguments[i];
-    return n(o, r, Xe.apply(void 0, __spreadArray([t], s, !1)));
-  };
-  return s.attrs = function (e) {
-    return Ze(n, o, __assign(__assign({}, r), {
-      attrs: Array.prototype.concat(r.attrs, e).filter(Boolean)
-    }));
-  }, s.withConfig = function (e) {
-    return Ze(n, o, __assign(__assign({}, r), e));
-  }, s;
-}
-var Ke = function (e) {
-    return Ze(He, e);
-  },
-  Qe = Ke;
-P.forEach(function (e) {
-  Qe[e] = Ke(e);
-});
-function nt(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 = te(Xe.apply(void 0, __spreadArray([t], n, !1))),
-    s = x(r);
-  return new Te(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"), "production" !== process.env.NODE_ENV && process;
-
 /*
 object-assign
 (c) Sindre Sorhus
@@ -3243,17 +1623,11 @@ const SvgProgressGradient = props => /*#__PURE__*/React__namespace.createElement
   opacity: 0.72
 }));
 
-const spin = nt`
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-const Spinner = Qe(SvgProgressGradient)`
-  animation: ${spin} 1000ms infinite steps(8, end);
-`;
+const spin = styled.keyframes(["from{transform:rotate(0);}to{transform:rotate(360deg);}"]);
+const Spinner = styled(SvgProgressGradient).withConfig({
+  displayName: "Spinner",
+  componentId: "sc-13dlgyx-0"
+})(["animation:", " 1000ms infinite steps(8,end);"], spin);
 Spinner.defaultProps = {
   width: 32,
   height: 32,
@@ -3282,20 +1656,15 @@ const wordBreak = system({
   }
 });
 
-const View = Qe.div`
-  ${compose(layout, color, flexbox, background, border, position, shadow)}
-  ${sx}
-`;
-
-const UnstyledButton = Qe.button`
-  background: none;
-  border: 0;
-  padding: 0;
-  outline: none;
-  cursor: pointer;
+const View = styled.div.withConfig({
+  displayName: "View",
+  componentId: "sc-1v428e-0"
+})(["", " ", ""], compose(layout, color, flexbox, background, border, position, shadow), sx);
 
-  ${sx}
-`;
+const UnstyledButton = styled.button.withConfig({
+  displayName: "_UnstyledButton__UnstyledButton",
+  componentId: "sc-j96ib-0"
+})(["background:none;border:0;padding:0;outline:none;cursor:pointer;", ""], sx);
 
 var jsxRuntime = {exports: {}};
 
@@ -4545,7 +2914,10 @@ const Button = /*#__PURE__*/React.forwardRef(({
     }) : null]
   });
 });
-const BaseButton = Qe(UnstyledButton)(({
+const BaseButton = styled(UnstyledButton).withConfig({
+  displayName: "Button__BaseButton",
+  componentId: "sc-1yhc0ra-0"
+})(({
   $loading,
   $disabled,
   fillWidth
@@ -4793,7 +3165,10 @@ const BaseButton = Qe(UnstyledButton)(({
     }
   }
 }));
-const BaseSpinner = Qe(Spinner)(variant({
+const BaseSpinner = styled(Spinner).withConfig({
+  displayName: "Button__BaseSpinner",
+  componentId: "sc-1yhc0ra-1"
+})(variant({
   prop: 'size',
   variants: {
     l: {
@@ -4848,7 +3223,10 @@ const Chip = ({
   trailingIcon: TrailingIcon,
   children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
 });
-const BaseChip = Qe.span({
+const BaseChip = styled.span.withConfig({
+  displayName: "Chip__BaseChip",
+  componentId: "sc-sq73uo-0"
+})({
   position: 'relative',
   width: 'fit-content',
   borderRadius: radii.full,
@@ -5004,7 +3382,10 @@ const BaseChip = Qe.span({
   }
 }), sx);
 
-const Text = Qe.span({
+const Text = styled.span.withConfig({
+  displayName: "Text",
+  componentId: "sc-yuorjy-0"
+})({
   'display': 'block',
   'whiteSpace': 'pre-wrap',
   '& > span': {
@@ -5044,14 +3425,12 @@ Text.defaultProps = {
   color: 'text/neutral'
 };
 
-const GradientText = Qe(Text)`
-  background: ${({
+const GradientText = styled(Text).withConfig({
+  displayName: "GradientText",
+  componentId: "sc-1jku3z1-0"
+})(["background:", ";background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;"], ({
   theme
-}) => `linear-gradient(${theme.gradients['text/accent']})`};
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-`;
+}) => `linear-gradient(${theme.gradients['text/accent']})`);
 
 /**
  * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
@@ -5083,7 +3462,10 @@ const Grid = /*#__PURE__*/React.forwardRef(({
     children: children
   });
 });
-const BaseGrid = Qe(View)({
+const BaseGrid = styled(View).withConfig({
+  displayName: "Grid__BaseGrid",
+  componentId: "sc-4l957f-0"
+})({
   display: 'flex',
   flexDirection: 'row'
 }, variant({
@@ -5187,7 +3569,10 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
     })
   });
 });
-const BaseIconButton = Qe(UnstyledButton)(({
+const BaseIconButton = styled(UnstyledButton).withConfig({
+  displayName: "IconButton__BaseIconButton",
+  componentId: "sc-13ybfes-0"
+})(({
   $loading,
   $disabled
 }) => ({
@@ -5388,7 +3773,10 @@ const IconToggleButton = ({
     children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
   });
 };
-const BaseIconToggleButton = Qe(UnstyledButton)(({
+const BaseIconToggleButton = styled(UnstyledButton).withConfig({
+  displayName: "IconToggleButton__BaseIconToggleButton",
+  componentId: "sc-1y68w0-0"
+})(({
   $disabled
 }) => ({
   'position': 'relative',
@@ -5475,11 +3863,10 @@ const ItemList = ({
   });
 };
 
-const Space = Qe.div`
-  width: inherit;
-  ${space};
-  ${sx}
-`;
+const Space = styled.div.withConfig({
+  displayName: "Space",
+  componentId: "sc-4g4g8r-0"
+})(["width:inherit;", ";", ""], space, sx);
 
 const Stack = /*#__PURE__*/React.forwardRef(({
   gapX = 0,
@@ -5495,7 +3882,10 @@ const Stack = /*#__PURE__*/React.forwardRef(({
   ...props,
   children: children
 }));
-const BaseStack = Qe(View)({
+const BaseStack = styled(View).withConfig({
+  displayName: "Stack__BaseStack",
+  componentId: "sc-1lqh56h-0"
+})({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap'