@teamturing/react-kit 1.1.0

package/dist/index.js

@@ -0,0 +1,4010 @@
+'use strict';
+
+var React$1 = require('react');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React$1);
+
+const gray = {
+  gray50: '#F9FAFB',
+  gray100: '#F3F4F6',
+  gray200: '#E5E7EB',
+  gray300: '#D1D5DB',
+  gray400: '#8D94A0',
+  gray500: '#7A828D',
+  gray600: '#6F7680',
+  gray700: '#575C64',
+  gray800: '#43484E',
+  gray900: '#33373B'
+};
+const violet = {
+  violet50: '#F3EFFD',
+  violet100: '#E8E1FB',
+  violet200: '#D9CDF9',
+  violet300: '#C6B5F6',
+  violet400: '#9C7EEF',
+  violet500: '#835EEB',
+  violet600: '#7756D6',
+  violet700: '#5D43A7',
+  violet800: '#483481',
+  violet900: '#372763'
+};
+const green = {
+  green50: '#E9FAF6',
+  green100: '#BAEFE2',
+  green200: '#98E8D4',
+  green300: '#69DDC0',
+  green400: '#4CD6B4',
+  green500: '#1FCCA1',
+  green600: '#1CBA93',
+  green700: '#169172',
+  green800: '#117059',
+  green900: '#0D5644'
+};
+const yellow = {
+  yellow50: '#FFF9E6',
+  yellow100: '#FFECB2',
+  yellow200: '#FFE28D',
+  yellow300: '#FFD559',
+  yellow400: '#FFCD39',
+  yellow500: '#FFC107',
+  yellow600: '#E8B006',
+  yellow700: '#B58905',
+  yellow800: '#8C6A04',
+  yellow900: '#6B5103'
+};
+const red = {
+  red50: '#FEE9EB',
+  red100: '#FBBCC0',
+  red200: '#F99CA2',
+  red300: '#F66E78',
+  red400: '#F5525D',
+  red500: '#F22735',
+  red600: '#DC2330',
+  red700: '#AC1C26',
+  red800: '#85151D',
+  red900: '#661016'
+};
+const blue = {
+  blue50: '#edf2fd',
+  blue100: '#c6d8fa',
+  blue200: '#abc5f7',
+  blue300: '#84aaf4',
+  blue400: '#6d99f1',
+  blue500: '#4880ee',
+  blue600: '#4274d9',
+  blue700: '#335ba9',
+  blue800: '#284683',
+  blue900: '#1e3664'
+};
+const shade = {
+  transparent: '#FFFFFF00',
+  white: '#FFFFFF',
+  white10A: '#FFFFFF1A',
+  black: '#000000',
+  black60A: '#00000099'
+};
+const palette = {
+  ...gray,
+  ...violet,
+  ...green,
+  ...yellow,
+  ...red,
+  ...blue,
+  ...shade
+};
+
+const textColor = {
+  'text/primary': palette.violet500,
+  'text/accent/blue': palette.blue500,
+  'text/accent/green': palette.green500,
+  'text/accent/yellow': palette.yellow500,
+  'text/accent/red': palette.red500,
+  'text/neutral/subtlest': palette.gray400,
+  'text/neutral/subtler': palette.gray500,
+  'text/neutral/subtle': palette.gray700,
+  'text/neutral': palette.gray900,
+  'text/inverse': palette.white,
+  'text/inverse/subtle': palette.gray200,
+  'text/inverse/subtler': palette.gray300,
+  'text/disabled': palette.gray400,
+  'text/success': palette.green500,
+  'text/warning': palette.yellow500,
+  'text/danger': palette.red500,
+  'text/selected/neutral': palette.gray900
+};
+const bgColor = {
+  'bg/secondary': palette.violet50,
+  'bg/secondary/hovered': palette.violet200,
+  'bg/secondary/pressed': palette.violet200,
+  'bg/primary': palette.violet500,
+  'bg/primary/hovered': palette.violet700,
+  'bg/primary/pressed': palette.violet700,
+  'bg/neutral/subtler': palette.transparent,
+  'bg/neutral/subtler/hovered': palette.gray100,
+  'bg/neutral/subtler/pressed': palette.gray100,
+  'bg/neutral/subtle': palette.gray50,
+  'bg/neutral/subtle/hovered': palette.gray200,
+  'bg/neutral/subtle/pressed': palette.gray200,
+  'bg/neutral': palette.gray100,
+  'bg/neutral/hovered': palette.gray300,
+  'bg/neutral/pressed': palette.gray300,
+  'bg/neutral/bold': palette.gray700,
+  'bg/neutral/bold/hovered': palette.gray900,
+  'bg/neutral/bold/pressed': palette.gray900,
+  'bg/neutral/bolder': palette.gray900,
+  'bg/neutral/bolder/hovered': palette.black,
+  'bg/neutral/bolder/pressed': palette.black,
+  'bg/disabled': palette.gray100,
+  'bg/disabled/subtlest': palette.transparent,
+  'bg/input': palette.white,
+  'bg/accent/green/subtlest': palette.green50,
+  'bg/accent/yellow/subtlest': palette.yellow50,
+  'bg/accent/red/subtlest': palette.red50,
+  'bg/accent/red/subtle': palette.red400,
+  'bg/accent/red': palette.red500,
+  'bg/accent/gray/subtlest': palette.gray200,
+  'bg/accent/blue/subtlest': palette.blue50,
+  'bg/selected/violet': palette.violet500,
+  'bg/selected/neutral': palette.gray900,
+  'bg/selected/neutral/subtle': palette.gray100,
+  'bg/inverse': palette.black,
+  'bg/inverse/subtlest': palette.white10A,
+  'bg/success': palette.green50,
+  'bg/success/bold': palette.green500,
+  'bg/warning': palette.yellow50,
+  'bg/warning/bold': palette.yellow500,
+  'bg/danger': palette.red50,
+  'bg/danger/bold': palette.red400,
+  'bg/danger/bold/hovered': palette.red600,
+  'bg/danger/bold/pressed': palette.red600
+};
+const borderColor = {
+  'border/neutral/subtle': palette.gray100,
+  'border/neutral': palette.gray200,
+  'border/neutral/bolder': palette.gray300,
+  'border/input': palette.gray200,
+  'border/inverse': palette.white10A,
+  'border/disabled': palette.gray100,
+  'border/primary': palette.violet500,
+  'border/hovered': palette.blue300,
+  'border/focused': palette.blue500,
+  'border/danger': palette.red500,
+  'border/success': palette.green500
+};
+const iconColor = {
+  'icon/neutral': palette.gray300,
+  'icon/neutral/bold': palette.gray400,
+  'icon/neutral/bolder': palette.gray700,
+  'icon/accent/gray': palette.gray900,
+  'icon/accent/blue': palette.blue500,
+  'icon/accent/blue/bold': palette.blue700,
+  'icon/accent/green': palette.green500,
+  'icon/accent/yellow': palette.yellow500,
+  'icon/accent/red': palette.red500,
+  'icon/inverse': palette.white,
+  'icon/disabled': palette.gray300,
+  'icon/disabled/subtler': palette.gray200,
+  'icon/selected/primary': palette.violet500,
+  'icon/selected/neutral': palette.gray900,
+  'icon/primary': palette.violet500,
+  'icon/primary/subtle': palette.violet300,
+  'icon/primary/bold': palette.violet700,
+  'icon/success': palette.green500,
+  'icon/warning': palette.yellow500,
+  'icon/danger': palette.red500
+};
+const linkColor = {
+  'link': palette.blue500,
+  'link/hovered': palette.blue700,
+  'link/pressed': palette.blue700,
+  'link/neutral': palette.gray500,
+  'link/neutral/hovered': palette.gray700,
+  'link/neutral/pressed': palette.gray700,
+  'link/neutral/bold': palette.gray700,
+  'link/neutral/bold/hovered': palette.gray900,
+  'link/neutral/bold/pressed': palette.gray900,
+  'link/disabled': palette.gray700
+};
+const dimColor = {
+  dim: palette.black60A
+};
+const scaleColor = {
+  'scale/violet/0': palette.violet50,
+  'scale/violet/1': palette.violet100,
+  'scale/violet/2': palette.violet200,
+  'scale/violet/3': palette.violet300,
+  'scale/violet/4': palette.violet400,
+  'scale/violet/5': palette.violet500,
+  'scale/violet/6': palette.violet600,
+  'scale/violet/7': palette.violet700,
+  'scale/violet/8': palette.violet800,
+  'scale/violet/9': palette.violet900
+};
+const color$1 = {
+  ...textColor,
+  ...bgColor,
+  ...borderColor,
+  ...iconColor,
+  ...linkColor,
+  ...dimColor,
+  ...scaleColor
+};
+
+const rounding = {
+  rounding0: 0,
+  rounding4: 4,
+  rounding8: 8,
+  rounding12: 12,
+  rounding16: 16,
+  rounding20: 20,
+  rounding24: 24,
+  rounding32: 32,
+  rounding9999: 9999
+};
+
+const radii = {
+  none: rounding.rounding0,
+  xxs: rounding.rounding4,
+  xs: rounding.rounding8,
+  s: rounding.rounding12,
+  m: rounding.rounding16,
+  l: rounding.rounding20,
+  xl: rounding.rounding24,
+  xxl: rounding.rounding32,
+  full: rounding.rounding9999
+};
+
+const unit = 4;
+const spacing = {
+  spacing0: 0 * unit,
+  // 0
+  spacing1: 1,
+  // 1
+  spacing2: 0.5 * unit,
+  // 2
+  spacing4: 1 * unit,
+  // 4
+  spacing6: 1.5 * unit,
+  // 6
+  spacing8: 2 * unit,
+  // 8
+  spacing12: 3 * unit,
+  // 12
+  spacing16: 4 * unit,
+  // 16
+  spacing20: 5 * unit,
+  // 20
+  spacing24: 6 * unit,
+  // 24
+  spacing28: 7 * unit,
+  // 28
+  spacing32: 8 * unit,
+  // 32
+  spacing40: 10 * unit,
+  // 40
+  spacing48: 12 * unit,
+  // 48
+  spacing56: 14 * unit,
+  // 56
+  spacing64: 16 * unit,
+  // 64
+  spacing72: 18 * unit,
+  // 72
+  spacing80: 20 * unit,
+  // 80
+  spacing96: 24 * unit,
+  // 96
+  spacing112: 28 * unit,
+  // 112
+  spacing120: 30 * unit,
+  // 120
+  spacing128: 32 * unit,
+  // 128
+  spacing160: 40 * unit,
+  // 160
+  spacing192: 48 * unit,
+  // 192
+  spacing200: 50 * unit,
+  // 200
+  spacing320: 80 * unit // 320
+};
+
+const space$1 = {
+  '-80': -spacing.spacing320,
+  '-50': -spacing.spacing200,
+  '-48': -spacing.spacing192,
+  '-40': -spacing.spacing160,
+  '-32': -spacing.spacing128,
+  '-30': -spacing.spacing120,
+  '-28': -spacing.spacing112,
+  '-24': -spacing.spacing96,
+  '-20': -spacing.spacing80,
+  '-18': -spacing.spacing72,
+  '-16': -spacing.spacing64,
+  '-14': -spacing.spacing56,
+  '-12': -spacing.spacing48,
+  '-10': -spacing.spacing40,
+  '-8': -spacing.spacing32,
+  '-7': -spacing.spacing28,
+  '-6': -spacing.spacing24,
+  '-5': -spacing.spacing20,
+  '-4': -spacing.spacing16,
+  '-3': -spacing.spacing12,
+  '-2': -spacing.spacing8,
+  '-1': -spacing.spacing4,
+  '-0.5': -spacing.spacing2,
+  '-0.25': -spacing.spacing1,
+  0: spacing.spacing0,
+  0.25: spacing.spacing1,
+  0.5: spacing.spacing2,
+  1: spacing.spacing4,
+  2: spacing.spacing8,
+  3: spacing.spacing12,
+  4: spacing.spacing16,
+  5: spacing.spacing20,
+  6: spacing.spacing24,
+  7: spacing.spacing28,
+  8: spacing.spacing32,
+  10: spacing.spacing40,
+  12: spacing.spacing48,
+  14: spacing.spacing56,
+  16: spacing.spacing64,
+  18: spacing.spacing72,
+  20: spacing.spacing80,
+  24: spacing.spacing96,
+  28: spacing.spacing112,
+  30: spacing.spacing120,
+  32: spacing.spacing128,
+  40: spacing.spacing160,
+  48: spacing.spacing192,
+  50: spacing.spacing200,
+  80: spacing.spacing320
+};
+
+const fontSize$1 = {
+  fontSize50: 10,
+  fontSize100: 12,
+  fontSize200: 14,
+  fontSize300: 16,
+  fontSize400: 18,
+  fontSize500: 20,
+  fontSize600: 22,
+  fontSize700: 24,
+  fontSize800: 28,
+  fontSize900: 32,
+  fontSize1000: 40,
+  fontSize1100: 48,
+  fontSize1200: 64,
+  fontSize1300: 100
+};
+
+const fontWeight$1 = {
+  fontWeight100: 100,
+  fontWeight200: 200,
+  fontWeight300: 300,
+  fontWeight400: 400,
+  fontWeight500: 500,
+  fontWeight600: 600,
+  fontWeight700: 700,
+  fontWeight800: 800,
+  fontWeight900: 900
+};
+
+const lineHeight$1 = {
+  lineHeight1: 1.4,
+  lineHeight2: 1.5
+};
+
+const fontSizes = {
+  xxs: fontSize$1.fontSize100,
+  xs: fontSize$1.fontSize200,
+  s: fontSize$1.fontSize300,
+  m: fontSize$1.fontSize500,
+  l: fontSize$1.fontSize700,
+  xl: fontSize$1.fontSize800,
+  xxl: fontSize$1.fontSize900,
+  display4: fontSize$1.fontSize1000,
+  display3: fontSize$1.fontSize1100,
+  display2: fontSize$1.fontSize1200,
+  display1: fontSize$1.fontSize1300
+};
+
+const fontWeights = {
+  regular: fontWeight$1.fontWeight400,
+  medium: fontWeight$1.fontWeight500,
+  bold: fontWeight$1.fontWeight700
+};
+
+const lineHeights = {
+  1: lineHeight$1.lineHeight1,
+  2: lineHeight$1.lineHeight2
+};
+
+const typography$1 = {
+  'display1': {
+    fontSize: fontSizes.display1,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[1]
+  },
+  'display2': {
+    fontSize: fontSizes.display2,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[1]
+  },
+  'display3': {
+    fontSize: fontSizes.display3,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[1]
+  },
+  'display4': {
+    fontSize: fontSizes.display4,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xxl/regular': {
+    fontSize: fontSizes.xxl,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xxl': {
+    fontSize: fontSizes.xxl,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xxl/bold': {
+    fontSize: fontSizes.xxl,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xl/regular': {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xl': {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xl/bold': {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'l/regular': {
+    fontSize: fontSizes.l,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'l': {
+    fontSize: fontSizes.l,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'l/bold': {
+    fontSize: fontSizes.l,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'm/regular': {
+    fontSize: fontSizes.m,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'm': {
+    fontSize: fontSizes.m,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'm/bold': {
+    fontSize: fontSizes.m,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  's/regular': {
+    fontSize: fontSizes.s,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  's': {
+    fontSize: fontSizes.s,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  's/bold': {
+    fontSize: fontSizes.s,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xs/regular': {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xs': {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xs/bold': {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xxs/regular': {
+    fontSize: fontSizes.xxs,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xxs': {
+    fontSize: fontSizes.xxs,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xxs/bold': {
+    fontSize: fontSizes.xxs,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  }
+};
+
+/******************************************************************************
+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$1.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$1.createContext({
+    shouldForwardProp: void 0,
+    styleSheet: _e,
+    stylis: Ce
+  });
+  Ie.Consumer;
+function De() {
+  return React$1.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$1.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$1.useContext(Be),
+        m = De(),
+        y = e.shouldForwardProp || m.shouldForwardProp;
+      "production" !== process.env.NODE_ENV && React$1.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$1.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$1.createElement(g, S);
+    }(D, e, r);
+  }
+  "production" !== process.env.NODE_ENV && (O.displayName = y);
+  var D = /*#__PURE__*/React$1.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
+@license MIT
+*/
+/* eslint-disable no-unused-vars */
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+function toObject(val) {
+  if (val === null || val === undefined) {
+    throw new TypeError('Object.assign cannot be called with null or undefined');
+  }
+  return Object(val);
+}
+function shouldUseNative() {
+  try {
+    if (!Object.assign) {
+      return false;
+    }
+
+    // Detect buggy property enumeration order in older V8 versions.
+
+    // https://bugs.chromium.org/p/v8/issues/detail?id=4118
+    var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
+    test1[5] = 'de';
+    if (Object.getOwnPropertyNames(test1)[0] === '5') {
+      return false;
+    }
+
+    // https://bugs.chromium.org/p/v8/issues/detail?id=3056
+    var test2 = {};
+    for (var i = 0; i < 10; i++) {
+      test2['_' + String.fromCharCode(i)] = i;
+    }
+    var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+      return test2[n];
+    });
+    if (order2.join('') !== '0123456789') {
+      return false;
+    }
+
+    // https://bugs.chromium.org/p/v8/issues/detail?id=3056
+    var test3 = {};
+    'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+      test3[letter] = letter;
+    });
+    if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') {
+      return false;
+    }
+    return true;
+  } catch (err) {
+    // We don't expect any of the above to throw, but better to be safe.
+    return false;
+  }
+}
+var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
+  var from;
+  var to = toObject(target);
+  var symbols;
+  for (var s = 1; s < arguments.length; s++) {
+    from = Object(arguments[s]);
+    for (var key in from) {
+      if (hasOwnProperty.call(from, key)) {
+        to[key] = from[key];
+      }
+    }
+    if (getOwnPropertySymbols) {
+      symbols = getOwnPropertySymbols(from);
+      for (var i = 0; i < symbols.length; i++) {
+        if (propIsEnumerable.call(from, symbols[i])) {
+          to[symbols[i]] = from[symbols[i]];
+        }
+      }
+    }
+  }
+  return to;
+};
+var assign = /*@__PURE__*/getDefaultExportFromCjs(objectAssign);
+
+var merge = function merge(a, b) {
+  var result = assign({}, a, b);
+  for (var key in a) {
+    var _assign;
+    if (!a[key] || typeof b[key] !== 'object') continue;
+    assign(result, (_assign = {}, _assign[key] = assign(a[key], b[key]), _assign));
+  }
+  return result;
+}; // sort object-value responsive styles
+
+var sort = function sort(obj) {
+  var next = {};
+  Object.keys(obj).sort(function (a, b) {
+    return a.localeCompare(b, undefined, {
+      numeric: true,
+      sensitivity: 'base'
+    });
+  }).forEach(function (key) {
+    next[key] = obj[key];
+  });
+  return next;
+};
+var defaults$4 = {
+  breakpoints: [40, 52, 64].map(function (n) {
+    return n + 'em';
+  })
+};
+var createMediaQuery = function createMediaQuery(n) {
+  return "@media screen and (min-width: " + n + ")";
+};
+var getValue = function getValue(n, scale) {
+  return get$1(scale, n, n);
+};
+var get$1 = function get(obj, key, def, p, undef) {
+  key = key && key.split ? key.split('.') : [key];
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+  return obj === undef ? def : obj;
+};
+var createParser = function createParser(config) {
+  var cache = {};
+  var parse = function parse(props) {
+    var styles = {};
+    var shouldSort = false;
+    var isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
+    for (var key in props) {
+      if (!config[key]) continue;
+      var sx = config[key];
+      var raw = props[key];
+      var scale = get$1(props.theme, sx.scale, sx.defaults);
+      if (typeof raw === 'object') {
+        cache.breakpoints = !isCacheDisabled && cache.breakpoints || get$1(props.theme, 'breakpoints', defaults$4.breakpoints);
+        if (Array.isArray(raw)) {
+          cache.media = !isCacheDisabled && cache.media || [null].concat(cache.breakpoints.map(createMediaQuery));
+          styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
+          continue;
+        }
+        if (raw !== null) {
+          styles = merge(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props));
+          shouldSort = true;
+        }
+        continue;
+      }
+      assign(styles, sx(raw, scale, props));
+    } // sort object-based responsive styles
+
+    if (shouldSort) {
+      styles = sort(styles);
+    }
+    return styles;
+  };
+  parse.config = config;
+  parse.propNames = Object.keys(config);
+  parse.cache = cache;
+  var keys = Object.keys(config).filter(function (k) {
+    return k !== 'config';
+  });
+  if (keys.length > 1) {
+    keys.forEach(function (key) {
+      var _createParser;
+      parse[key] = createParser((_createParser = {}, _createParser[key] = config[key], _createParser));
+    });
+  }
+  return parse;
+};
+var parseResponsiveStyle = function parseResponsiveStyle(mediaQueries, sx, scale, raw, _props) {
+  var styles = {};
+  raw.slice(0, mediaQueries.length).forEach(function (value, i) {
+    var media = mediaQueries[i];
+    var style = sx(value, scale, _props);
+    if (!media) {
+      assign(styles, style);
+    } else {
+      var _assign2;
+      assign(styles, (_assign2 = {}, _assign2[media] = assign({}, styles[media], style), _assign2));
+    }
+  });
+  return styles;
+};
+var parseResponsiveObject = function parseResponsiveObject(breakpoints, sx, scale, raw, _props) {
+  var styles = {};
+  for (var key in raw) {
+    var breakpoint = breakpoints[key];
+    var value = raw[key];
+    var style = sx(value, scale, _props);
+    if (!breakpoint) {
+      assign(styles, style);
+    } else {
+      var _assign3;
+      var media = createMediaQuery(breakpoint);
+      assign(styles, (_assign3 = {}, _assign3[media] = assign({}, styles[media], style), _assign3));
+    }
+  }
+  return styles;
+};
+var createStyleFunction = function createStyleFunction(_ref) {
+  var properties = _ref.properties,
+    property = _ref.property,
+    scale = _ref.scale,
+    _ref$transform = _ref.transform,
+    transform = _ref$transform === void 0 ? getValue : _ref$transform,
+    defaultScale = _ref.defaultScale;
+  properties = properties || [property];
+  var sx = function sx(value, scale, _props) {
+    var result = {};
+    var n = transform(value, scale, _props);
+    if (n === null) return;
+    properties.forEach(function (prop) {
+      result[prop] = n;
+    });
+    return result;
+  };
+  sx.scale = scale;
+  sx.defaults = defaultScale;
+  return sx;
+}; // new v5 API
+
+var system = function system(args) {
+  if (args === void 0) {
+    args = {};
+  }
+  var config = {};
+  Object.keys(args).forEach(function (key) {
+    var conf = args[key];
+    if (conf === true) {
+      // shortcut definition
+      config[key] = createStyleFunction({
+        property: key,
+        scale: key
+      });
+      return;
+    }
+    if (typeof conf === 'function') {
+      config[key] = conf;
+      return;
+    }
+    config[key] = createStyleFunction(conf);
+  });
+  var parser = createParser(config);
+  return parser;
+};
+var compose = function compose() {
+  var config = {};
+  for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
+    parsers[_key] = arguments[_key];
+  }
+  parsers.forEach(function (parser) {
+    if (!parser || !parser.config) return;
+    assign(config, parser.config);
+  });
+  var parser = createParser(config);
+  return parser;
+};
+
+var isNumber$1 = function isNumber(n) {
+  return typeof n === 'number' && !isNaN(n);
+};
+var getWidth = function getWidth(n, scale) {
+  return get$1(scale, n, !isNumber$1(n) || n > 1 ? n : n * 100 + '%');
+};
+var config$7 = {
+  width: {
+    property: 'width',
+    scale: 'sizes',
+    transform: getWidth
+  },
+  height: {
+    property: 'height',
+    scale: 'sizes'
+  },
+  minWidth: {
+    property: 'minWidth',
+    scale: 'sizes'
+  },
+  minHeight: {
+    property: 'minHeight',
+    scale: 'sizes'
+  },
+  maxWidth: {
+    property: 'maxWidth',
+    scale: 'sizes'
+  },
+  maxHeight: {
+    property: 'maxHeight',
+    scale: 'sizes'
+  },
+  size: {
+    properties: ['width', 'height'],
+    scale: 'sizes'
+  },
+  overflow: true,
+  overflowX: true,
+  overflowY: true,
+  display: true,
+  verticalAlign: true
+};
+var layout = system(config$7);
+
+var config$6 = {
+  color: {
+    property: 'color',
+    scale: 'colors'
+  },
+  backgroundColor: {
+    property: 'backgroundColor',
+    scale: 'colors'
+  },
+  opacity: true
+};
+config$6.bg = config$6.backgroundColor;
+var color = system(config$6);
+
+var defaults$3 = {
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+var config$5 = {
+  fontFamily: {
+    property: 'fontFamily',
+    scale: 'fonts'
+  },
+  fontSize: {
+    property: 'fontSize',
+    scale: 'fontSizes',
+    defaultScale: defaults$3.fontSizes
+  },
+  fontWeight: {
+    property: 'fontWeight',
+    scale: 'fontWeights'
+  },
+  lineHeight: {
+    property: 'lineHeight',
+    scale: 'lineHeights'
+  },
+  letterSpacing: {
+    property: 'letterSpacing',
+    scale: 'letterSpacings'
+  },
+  textAlign: true,
+  fontStyle: true
+};
+var typography = system(config$5);
+
+var config$4 = {
+  alignItems: true,
+  alignContent: true,
+  justifyItems: true,
+  justifyContent: true,
+  flexWrap: true,
+  flexDirection: true,
+  // item
+  flex: true,
+  flexGrow: true,
+  flexShrink: true,
+  flexBasis: true,
+  justifySelf: true,
+  alignSelf: true,
+  order: true
+};
+var flexbox = system(config$4);
+
+var defaults$2 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var config$3 = {
+  gridGap: {
+    property: 'gridGap',
+    scale: 'space',
+    defaultScale: defaults$2.space
+  },
+  gridColumnGap: {
+    property: 'gridColumnGap',
+    scale: 'space',
+    defaultScale: defaults$2.space
+  },
+  gridRowGap: {
+    property: 'gridRowGap',
+    scale: 'space',
+    defaultScale: defaults$2.space
+  },
+  gridColumn: true,
+  gridRow: true,
+  gridAutoFlow: true,
+  gridAutoColumns: true,
+  gridAutoRows: true,
+  gridTemplateColumns: true,
+  gridTemplateRows: true,
+  gridTemplateAreas: true,
+  gridArea: true
+};
+var grid = system(config$3);
+
+var config$2 = {
+  border: {
+    property: 'border',
+    scale: 'borders'
+  },
+  borderWidth: {
+    property: 'borderWidth',
+    scale: 'borderWidths'
+  },
+  borderStyle: {
+    property: 'borderStyle',
+    scale: 'borderStyles'
+  },
+  borderColor: {
+    property: 'borderColor',
+    scale: 'colors'
+  },
+  borderRadius: {
+    property: 'borderRadius',
+    scale: 'radii'
+  },
+  borderTop: {
+    property: 'borderTop',
+    scale: 'borders'
+  },
+  borderTopLeftRadius: {
+    property: 'borderTopLeftRadius',
+    scale: 'radii'
+  },
+  borderTopRightRadius: {
+    property: 'borderTopRightRadius',
+    scale: 'radii'
+  },
+  borderRight: {
+    property: 'borderRight',
+    scale: 'borders'
+  },
+  borderBottom: {
+    property: 'borderBottom',
+    scale: 'borders'
+  },
+  borderBottomLeftRadius: {
+    property: 'borderBottomLeftRadius',
+    scale: 'radii'
+  },
+  borderBottomRightRadius: {
+    property: 'borderBottomRightRadius',
+    scale: 'radii'
+  },
+  borderLeft: {
+    property: 'borderLeft',
+    scale: 'borders'
+  },
+  borderX: {
+    properties: ['borderLeft', 'borderRight'],
+    scale: 'borders'
+  },
+  borderY: {
+    properties: ['borderTop', 'borderBottom'],
+    scale: 'borders'
+  }
+};
+config$2.borderTopWidth = {
+  property: 'borderTopWidth',
+  scale: 'borderWidths'
+};
+config$2.borderTopColor = {
+  property: 'borderTopColor',
+  scale: 'colors'
+};
+config$2.borderTopStyle = {
+  property: 'borderTopStyle',
+  scale: 'borderStyles'
+};
+config$2.borderTopLeftRadius = {
+  property: 'borderTopLeftRadius',
+  scale: 'radii'
+};
+config$2.borderTopRightRadius = {
+  property: 'borderTopRightRadius',
+  scale: 'radii'
+};
+config$2.borderBottomWidth = {
+  property: 'borderBottomWidth',
+  scale: 'borderWidths'
+};
+config$2.borderBottomColor = {
+  property: 'borderBottomColor',
+  scale: 'colors'
+};
+config$2.borderBottomStyle = {
+  property: 'borderBottomStyle',
+  scale: 'borderStyles'
+};
+config$2.borderBottomLeftRadius = {
+  property: 'borderBottomLeftRadius',
+  scale: 'radii'
+};
+config$2.borderBottomRightRadius = {
+  property: 'borderBottomRightRadius',
+  scale: 'radii'
+};
+config$2.borderLeftWidth = {
+  property: 'borderLeftWidth',
+  scale: 'borderWidths'
+};
+config$2.borderLeftColor = {
+  property: 'borderLeftColor',
+  scale: 'colors'
+};
+config$2.borderLeftStyle = {
+  property: 'borderLeftStyle',
+  scale: 'borderStyles'
+};
+config$2.borderRightWidth = {
+  property: 'borderRightWidth',
+  scale: 'borderWidths'
+};
+config$2.borderRightColor = {
+  property: 'borderRightColor',
+  scale: 'colors'
+};
+config$2.borderRightStyle = {
+  property: 'borderRightStyle',
+  scale: 'borderStyles'
+};
+var border = system(config$2);
+
+var config$1 = {
+  background: true,
+  backgroundImage: true,
+  backgroundSize: true,
+  backgroundPosition: true,
+  backgroundRepeat: true
+};
+config$1.bgImage = config$1.backgroundImage;
+config$1.bgSize = config$1.backgroundSize;
+config$1.bgPosition = config$1.backgroundPosition;
+config$1.bgRepeat = config$1.backgroundRepeat;
+var background = system(config$1);
+
+var defaults$1 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var config = {
+  position: true,
+  zIndex: {
+    property: 'zIndex',
+    scale: 'zIndices'
+  },
+  top: {
+    property: 'top',
+    scale: 'space',
+    defaultScale: defaults$1.space
+  },
+  right: {
+    property: 'right',
+    scale: 'space',
+    defaultScale: defaults$1.space
+  },
+  bottom: {
+    property: 'bottom',
+    scale: 'space',
+    defaultScale: defaults$1.space
+  },
+  left: {
+    property: 'left',
+    scale: 'space',
+    defaultScale: defaults$1.space
+  }
+};
+var position = system(config);
+
+var defaults = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var isNumber = function isNumber(n) {
+  return typeof n === 'number' && !isNaN(n);
+};
+var getMargin = function getMargin(n, scale) {
+  if (!isNumber(n)) {
+    return get$1(scale, n, n);
+  }
+  var isNegative = n < 0;
+  var absolute = Math.abs(n);
+  var value = get$1(scale, absolute, absolute);
+  if (!isNumber(value)) {
+    return isNegative ? '-' + value : value;
+  }
+  return value * (isNegative ? -1 : 1);
+};
+var configs = {};
+configs.margin = {
+  margin: {
+    property: 'margin',
+    scale: 'space',
+    transform: getMargin,
+    defaultScale: defaults.space
+  },
+  marginTop: {
+    property: 'marginTop',
+    scale: 'space',
+    transform: getMargin,
+    defaultScale: defaults.space
+  },
+  marginRight: {
+    property: 'marginRight',
+    scale: 'space',
+    transform: getMargin,
+    defaultScale: defaults.space
+  },
+  marginBottom: {
+    property: 'marginBottom',
+    scale: 'space',
+    transform: getMargin,
+    defaultScale: defaults.space
+  },
+  marginLeft: {
+    property: 'marginLeft',
+    scale: 'space',
+    transform: getMargin,
+    defaultScale: defaults.space
+  },
+  marginX: {
+    properties: ['marginLeft', 'marginRight'],
+    scale: 'space',
+    transform: getMargin,
+    defaultScale: defaults.space
+  },
+  marginY: {
+    properties: ['marginTop', 'marginBottom'],
+    scale: 'space',
+    transform: getMargin,
+    defaultScale: defaults.space
+  }
+};
+configs.margin.m = configs.margin.margin;
+configs.margin.mt = configs.margin.marginTop;
+configs.margin.mr = configs.margin.marginRight;
+configs.margin.mb = configs.margin.marginBottom;
+configs.margin.ml = configs.margin.marginLeft;
+configs.margin.mx = configs.margin.marginX;
+configs.margin.my = configs.margin.marginY;
+configs.padding = {
+  padding: {
+    property: 'padding',
+    scale: 'space',
+    defaultScale: defaults.space
+  },
+  paddingTop: {
+    property: 'paddingTop',
+    scale: 'space',
+    defaultScale: defaults.space
+  },
+  paddingRight: {
+    property: 'paddingRight',
+    scale: 'space',
+    defaultScale: defaults.space
+  },
+  paddingBottom: {
+    property: 'paddingBottom',
+    scale: 'space',
+    defaultScale: defaults.space
+  },
+  paddingLeft: {
+    property: 'paddingLeft',
+    scale: 'space',
+    defaultScale: defaults.space
+  },
+  paddingX: {
+    properties: ['paddingLeft', 'paddingRight'],
+    scale: 'space',
+    defaultScale: defaults.space
+  },
+  paddingY: {
+    properties: ['paddingTop', 'paddingBottom'],
+    scale: 'space',
+    defaultScale: defaults.space
+  }
+};
+configs.padding.p = configs.padding.padding;
+configs.padding.pt = configs.padding.paddingTop;
+configs.padding.pr = configs.padding.paddingRight;
+configs.padding.pb = configs.padding.paddingBottom;
+configs.padding.pl = configs.padding.paddingLeft;
+configs.padding.px = configs.padding.paddingX;
+configs.padding.py = configs.padding.paddingY;
+var margin = system(configs.margin);
+var padding = system(configs.padding);
+var space = compose(margin, padding);
+
+var shadow = system({
+  boxShadow: {
+    property: 'boxShadow',
+    scale: 'shadows'
+  },
+  textShadow: {
+    property: 'textShadow',
+    scale: 'shadows'
+  }
+});
+
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
+}
+
+// based on https://github.com/developit/dlv
+var get = function get(obj, key, def, p, undef) {
+  key = key && key.split ? key.split('.') : [key];
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+  return obj === undef ? def : obj;
+};
+var defaultBreakpoints = [40, 52, 64].map(function (n) {
+  return n + 'em';
+});
+var defaultTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+var aliases = {
+  bg: 'backgroundColor',
+  m: 'margin',
+  mt: 'marginTop',
+  mr: 'marginRight',
+  mb: 'marginBottom',
+  ml: 'marginLeft',
+  mx: 'marginX',
+  my: 'marginY',
+  p: 'padding',
+  pt: 'paddingTop',
+  pr: 'paddingRight',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  px: 'paddingX',
+  py: 'paddingY'
+};
+var multiples = {
+  marginX: ['marginLeft', 'marginRight'],
+  marginY: ['marginTop', 'marginBottom'],
+  paddingX: ['paddingLeft', 'paddingRight'],
+  paddingY: ['paddingTop', 'paddingBottom'],
+  size: ['width', 'height']
+};
+var scales = {
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  margin: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
+  padding: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: 'space',
+  top: 'space',
+  right: 'space',
+  bottom: 'space',
+  left: 'space',
+  gridGap: 'space',
+  gridColumnGap: 'space',
+  gridRowGap: 'space',
+  gap: 'space',
+  columnGap: 'space',
+  rowGap: 'space',
+  fontFamily: 'fonts',
+  fontSize: 'fontSizes',
+  fontWeight: 'fontWeights',
+  lineHeight: 'lineHeights',
+  letterSpacing: 'letterSpacings',
+  border: 'borders',
+  borderTop: 'borders',
+  borderRight: 'borders',
+  borderBottom: 'borders',
+  borderLeft: 'borders',
+  borderWidth: 'borderWidths',
+  borderStyle: 'borderStyles',
+  borderRadius: 'radii',
+  borderTopRightRadius: 'radii',
+  borderTopLeftRadius: 'radii',
+  borderBottomRightRadius: 'radii',
+  borderBottomLeftRadius: 'radii',
+  borderTopWidth: 'borderWidths',
+  borderTopColor: 'colors',
+  borderTopStyle: 'borderStyles',
+  borderBottomWidth: 'borderWidths',
+  borderBottomColor: 'colors',
+  borderBottomStyle: 'borderStyles',
+  borderLeftWidth: 'borderWidths',
+  borderLeftColor: 'colors',
+  borderLeftStyle: 'borderStyles',
+  borderRightWidth: 'borderWidths',
+  borderRightColor: 'colors',
+  borderRightStyle: 'borderStyles',
+  outlineColor: 'colors',
+  boxShadow: 'shadows',
+  textShadow: 'shadows',
+  zIndex: 'zIndices',
+  width: 'sizes',
+  minWidth: 'sizes',
+  maxWidth: 'sizes',
+  height: 'sizes',
+  minHeight: 'sizes',
+  maxHeight: 'sizes',
+  flexBasis: 'sizes',
+  size: 'sizes',
+  // svg
+  fill: 'colors',
+  stroke: 'colors'
+};
+var positiveOrNegative = function positiveOrNegative(scale, value) {
+  if (typeof value !== 'number' || value >= 0) {
+    return get(scale, value, value);
+  }
+  var absolute = Math.abs(value);
+  var n = get(scale, absolute, absolute);
+  if (typeof n === 'string') return '-' + n;
+  return n * -1;
+};
+var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
+  var _extends2;
+  return _extends$1({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
+}, {});
+var responsive = function responsive(styles) {
+  return function (theme) {
+    var next = {};
+    var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
+    var mediaQueries = [null].concat(breakpoints.map(function (n) {
+      return "@media screen and (min-width: " + n + ")";
+    }));
+    for (var key in styles) {
+      var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
+      if (value == null) continue;
+      if (!Array.isArray(value)) {
+        next[key] = value;
+        continue;
+      }
+      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+        var media = mediaQueries[i];
+        if (!media) {
+          next[key] = value[i];
+          continue;
+        }
+        next[media] = next[media] || {};
+        if (value[i] == null) continue;
+        next[media][key] = value[i];
+      }
+    }
+    return next;
+  };
+};
+var css = function css(args) {
+  return function (props) {
+    if (props === void 0) {
+      props = {};
+    }
+    var theme = _extends$1({}, defaultTheme, {}, props.theme || props);
+    var result = {};
+    var obj = typeof args === 'function' ? args(theme) : args;
+    var styles = responsive(obj)(theme);
+    for (var key in styles) {
+      var x = styles[key];
+      var val = typeof x === 'function' ? x(theme) : x;
+      if (key === 'variant') {
+        var variant = css(get(theme, val))(theme);
+        result = _extends$1({}, result, {}, variant);
+        continue;
+      }
+      if (val && typeof val === 'object') {
+        result[key] = css(val)(theme);
+        continue;
+      }
+      var prop = get(aliases, key, key);
+      var scaleName = get(scales, prop);
+      var scale = get(theme, scaleName, get(theme, prop, {}));
+      var transform = get(transforms, prop, get);
+      var value = transform(scale, val, val);
+      if (multiples[prop]) {
+        var dirs = multiples[prop];
+        for (var i = 0; i < dirs.length; i++) {
+          result[dirs[i]] = value;
+        }
+      } else {
+        result[prop] = value;
+      }
+    }
+    return result;
+  };
+};
+var css$1 = css;
+
+var variant = function variant(_ref) {
+  var _config;
+  var scale = _ref.scale,
+    _ref$prop = _ref.prop,
+    prop = _ref$prop === void 0 ? 'variant' : _ref$prop,
+    _ref$variants = _ref.variants,
+    variants = _ref$variants === void 0 ? {} : _ref$variants,
+    key = _ref.key;
+  var sx;
+  if (Object.keys(variants).length) {
+    sx = function sx(value, scale, props) {
+      return css$1(get$1(scale, value, null))(props.theme);
+    };
+  } else {
+    sx = function sx(value, scale) {
+      return get$1(scale, value, null);
+    };
+  }
+  sx.scale = scale || key;
+  sx.defaults = variants;
+  var config = (_config = {}, _config[prop] = sx, _config);
+  var parser = createParser(config);
+  return parser;
+};
+variant({
+  key: 'buttons'
+});
+variant({
+  key: 'textStyles',
+  prop: 'textStyle'
+});
+variant({
+  key: 'colorStyles',
+  prop: 'colors'
+});
+
+layout.width;
+  layout.height;
+  layout.minWidth;
+  layout.minHeight;
+  layout.maxWidth;
+  layout.maxHeight;
+  layout.size;
+  layout.verticalAlign;
+  layout.display;
+  layout.overflow;
+  layout.overflowX;
+  layout.overflowY;
+color.opacity;
+var fontSize = typography.fontSize;
+  typography.fontFamily;
+  var fontWeight = typography.fontWeight,
+  lineHeight = typography.lineHeight,
+  textAlign = typography.textAlign;
+  typography.fontStyle;
+  typography.letterSpacing;
+flexbox.alignItems;
+  flexbox.alignContent;
+  flexbox.justifyItems;
+  flexbox.justifyContent;
+  flexbox.flexWrap;
+  flexbox.flexDirection;
+  flexbox.flex;
+  flexbox.flexGrow;
+  flexbox.flexShrink;
+  flexbox.flexBasis;
+  flexbox.justifySelf;
+  flexbox.alignSelf;
+  flexbox.order;
+grid.gridGap;
+  grid.gridColumnGap;
+  grid.gridRowGap;
+  grid.gridColumn;
+  grid.gridRow;
+  grid.gridAutoFlow;
+  grid.gridAutoColumns;
+  grid.gridAutoRows;
+  grid.gridTemplateColumns;
+  grid.gridTemplateRows;
+  grid.gridTemplateAreas;
+  grid.gridArea;
+border.borderWidth;
+  border.borderStyle;
+  border.borderColor;
+  border.borderTop;
+  border.borderRight;
+  border.borderBottom;
+  border.borderLeft;
+  border.borderRadius;
+background.backgroundImage;
+  background.backgroundSize;
+  background.backgroundPosition;
+  background.backgroundRepeat;
+position.zIndex;
+  position.top;
+  position.right;
+  position.bottom;
+  position.left;
+
+// Support CSS custom properties in the `sx` prop
+
+const sx = props => css$1(props.sx);
+const textDecoration = system({
+  textDecoration: {
+    property: 'textDecoration',
+    scale: 'textDecoration'
+  }
+});
+const whiteSpace = system({
+  whiteSpace: {
+    property: 'whiteSpace',
+    scale: 'whiteSpace'
+  }
+});
+const wordBreak = system({
+  wordBreak: {
+    property: 'wordBreak',
+    scale: 'wordBreak'
+  }
+});
+
+const Chip = ({
+  children,
+  size = 'm',
+  variant = 'primary',
+  leadingIcon: LeadingIcon,
+  trailingIcon: TrailingIcon,
+  sx
+}) => /*#__PURE__*/React.createElement(BaseChip, {
+  sx: sx,
+  size: size,
+  variant: variant,
+  leadingIcon: LeadingIcon,
+  trailingIcon: TrailingIcon
+}, LeadingIcon ? /*#__PURE__*/React.createElement(LeadingIcon, null) : null, children, TrailingIcon ? /*#__PURE__*/React.createElement(TrailingIcon, null) : null);
+const BaseChip = Qe.span({
+  position: 'relative',
+  width: 'fit-content',
+  borderRadius: radii.full,
+  outline: 'none',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center'
+}, ({
+  leadingIcon,
+  trailingIcon
+}) => variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'pl': leadingIcon ? 2 : 3,
+      'pr': trailingIcon ? 2 : 3,
+      'py': 1,
+      'fontSize': typography$1['s'].fontSize,
+      'fontWeight': typography$1['s'].fontWeight,
+      'lineHeight': typography$1['s'].lineHeight,
+      'columnGap': 1,
+      '& svg': {
+        width: 16,
+        height: 16
+      }
+    },
+    m: {
+      'pl': leadingIcon ? 2 : 3,
+      'pr': trailingIcon ? 2 : 3,
+      'py': 1,
+      'fontSize': typography$1['xs'].fontSize,
+      'fontWeight': typography$1['xs'].fontWeight,
+      'lineHeight': typography$1['xs'].lineHeight,
+      'columnGap': 0.5,
+      '& svg': {
+        width: 16,
+        height: 16
+      }
+    },
+    s: {
+      'pl': !leadingIcon && trailingIcon ? 3 : 2,
+      'pr': leadingIcon && !trailingIcon ? 3 : 2,
+      'py': 0.5,
+      'fontSize': typography$1['xxs'].fontSize,
+      'fontWeight': typography$1['xxs'].fontWeight,
+      'lineHeight': typography$1['xxs'].lineHeight,
+      'columnGap': 0.5,
+      '& svg': {
+        width: 12,
+        height: 12
+      }
+    }
+  }
+}), variant({
+  prop: 'variant',
+  variants: {
+    'primary': {
+      'backgroundColor': color$1['bg/primary'],
+      'color': color$1['text/inverse'],
+      '& svg': {
+        color: color$1['icon/inverse']
+      }
+    },
+    'secondary': {
+      'backgroundColor': color$1['bg/secondary'],
+      'color': color$1['text/primary'],
+      '& svg': {
+        color: color$1['icon/primary']
+      }
+    },
+    'outlined-primary': {
+      'backgroundColor': color$1['bg/neutral/subtler'],
+      'color': color$1['text/primary'],
+      '& svg': {
+        color: color$1['icon/primary']
+      },
+      ':after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color$1['border/primary'],
+        borderRadius: radii.full,
+        boxSizing: 'border-box'
+      }
+    },
+    'outlined-neutral': {
+      'backgroundColor': color$1['bg/neutral/subtler'],
+      'color': color$1['text/neutral/subtle'],
+      '& svg': {
+        color: color$1['icon/neutral/bolder']
+      },
+      ':after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color$1['border/neutral/bolder'],
+        borderRadius: radii.full,
+        boxSizing: 'border-box'
+      }
+    },
+    'neutral': {
+      'backgroundColor': color$1['bg/neutral'],
+      'color': color$1['text/neutral/subtle'],
+      '& svg': {
+        color: color$1['icon/neutral/bolder']
+      }
+    },
+    'red': {
+      'backgroundColor': color$1['bg/accent/red/subtlest'],
+      'color': color$1['text/accent/red'],
+      '& svg': {
+        color: color$1['icon/accent/red']
+      }
+    },
+    'red-accent': {
+      'backgroundColor': color$1['bg/accent/red'],
+      'color': color$1['text/inverse'],
+      '& svg': {
+        color: color$1['icon/inverse']
+      }
+    },
+    'yellow': {
+      'backgroundColor': color$1['bg/accent/yellow/subtlest'],
+      'color': color$1['text/accent/yellow'],
+      '& svg': {
+        color: color$1['icon/accent/yellow']
+      }
+    },
+    'green': {
+      'backgroundColor': color$1['bg/accent/green/subtlest'],
+      'color': color$1['text/accent/green'],
+      '& svg': {
+        color: color$1['icon/accent/green']
+      }
+    },
+    'dim': {
+      'backgroundColor': color$1['dim'],
+      'color': color$1['text/inverse'],
+      '& svg': {
+        color: color$1['icon/inverse']
+      }
+    }
+  }
+}), sx);
+
+const Text = Qe.span({
+  'display': 'block',
+  'whiteSpace': 'pre-wrap',
+  '& > span': {
+    display: 'inline'
+  }
+}, variant({
+  prop: 'typography',
+  variants: {
+    'display1': typography$1.display1,
+    'display2': typography$1.display2,
+    'display3': typography$1.display3,
+    'display4': typography$1.display4,
+    'xxl/regular': typography$1['xxl/regular'],
+    'xxl': typography$1['xxl'],
+    'xxl/bold': typography$1['xxl/bold'],
+    'xl/regular': typography$1['xl/regular'],
+    'xl': typography$1['xl'],
+    'xl/bold': typography$1['xl/bold'],
+    'l/regular': typography$1['l/regular'],
+    'l': typography$1['l'],
+    'l/bold': typography$1['l/bold'],
+    'm/regular': typography$1['m/regular'],
+    'm': typography$1['m'],
+    'm/bold': typography$1['m/bold'],
+    's/regular': typography$1['s/regular'],
+    's': typography$1['s'],
+    's/bold': typography$1['s/bold'],
+    'xs/regular': typography$1['xs/regular'],
+    'xs': typography$1['xs'],
+    'xs/bold': typography$1['xs/bold'],
+    'xxs/regular': typography$1['xxs/regular'],
+    'xxs': typography$1['xxs'],
+    'xxs/bold': typography$1['xxs/bold']
+  }
+}), compose(wordBreak, whiteSpace, textDecoration, fontSize, fontWeight, lineHeight, color, textAlign), sx);
+Text.defaultProps = {
+  color: 'text/neutral'
+};
+
+const GradientText = Qe(Text)`
+  background: ${({
+  theme
+}) => `linear-gradient(${theme.gradients['text/accent']})`};
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+/**
+ * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
+ */
+const forcePixelValue = value => {
+  return typeof value === 'string' ? value : `${value}px`;
+};
+
+const isArray = value => Array.isArray(value);
+
+const isNullable = value => value === null || value === undefined;
+
+const View = Qe.div`
+  ${compose(layout, color, flexbox, background, border, position, shadow)}
+  ${sx}
+`;
+
+const Grid = /*#__PURE__*/React$1.forwardRef(({
+  children,
+  wrap: propWrap = true,
+  gapX = 0,
+  gapY = 0,
+  as,
+  ...props
+}, ref) => {
+  const wrap = Array.isArray(propWrap) ? propWrap.map(value => value === true ? 'true' : 'false') : propWrap === true ? 'true' : 'false';
+  return /*#__PURE__*/React.createElement(BaseGrid, _extends({
+    ref: ref,
+    gapX: gapX,
+    gapY: gapY,
+    wrap: wrap,
+    as: as
+  }, props), children);
+});
+const BaseGrid = Qe(View)({
+  display: 'flex',
+  flexDirection: 'row'
+}, variant({
+  prop: 'gapX',
+  variants: Object.fromEntries(Object.entries(space$1).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        px: forcePixelValue(value / 2)
+      },
+      'mx': forcePixelValue(-value / 2)
+    };
+    return [key, styleValue];
+  }))
+}), variant({
+  prop: 'gapY',
+  variants: Object.fromEntries(Object.entries(space$1).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        mt: forcePixelValue(value)
+      },
+      'mt': forcePixelValue(-value)
+    };
+    return [key, styleValue];
+  }))
+}), variant({
+  prop: 'wrap',
+  variants: {
+    true: {
+      flexWrap: 'wrap'
+    },
+    false: {
+      flexWrap: 'nowrap'
+    }
+  }
+}));
+const mapValueToResponsiveValueProps = (value, propsAccessor) => {
+  if (isNullable(value) || typeof value === 'object' && !isArray(value)) return null;
+  if (!isArray(value)) return propsAccessor(value);
+  return value.reduce((acc, cur) => {
+    const curProps = propsAccessor(cur);
+    const curPropKeys = Object.keys(curProps);
+    return Object.fromEntries(curPropKeys.map(curPropKey => [curPropKey, acc[curPropKey] === undefined || acc[curPropKey] === null ? [curProps[curPropKey]] : isArray(acc[curPropKey]) ? [...acc[curPropKey], curProps[curPropKey]] : [acc[curPropKey], curProps[curPropKey]]]));
+  }, {});
+};
+const Unit = ({
+  size,
+  as,
+  children,
+  ...props
+}) => {
+  const getFlexGrowBySize = size => size === 'max' ? 1 : size === 'min' ? 0 : 1;
+  const getFlexBySize = size => size === 'max' ? 1 : size === 'min' ? 'none' : 'none';
+  const getFlexBasisBySize = size => {
+    const percentage = Math.round(size * 100 * 10000) / 10000;
+    return size === 'max' ? 'auto' : size === 'min' ? 'auto' : `${percentage}%`;
+  };
+  const getWidthBySize = size => size === 'max' ? 'auto' : size === 'min' ? 'auto' : 'none';
+  const getMaxWidthBySize = size => {
+    const percentage = Math.round(size * 100 * 10000) / 10000;
+    return size === 'max' ? '100%' : size === 'min' ? 'none' : `${percentage}%`;
+  };
+  return /*#__PURE__*/React.createElement(View, _extends({}, mapValueToResponsiveValueProps(size, value => ({
+    display: value === 0 ? 'none' : 'initial',
+    flowGrow: getFlexGrowBySize(value),
+    flex: getFlexBySize(value),
+    flexBasis: getFlexBasisBySize(value),
+    width: getWidthBySize(value),
+    maxWidth: getMaxWidthBySize(value)
+  })), {
+    as: as
+  }, props), children);
+};
+var index$1 = Object.assign(Grid, {
+  Unit
+});
+
+const SvgProgressGradient = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M12 1.4a1.1 1.1 0 0 0-1.1 1.1v3.042a1.1 1.1 0 0 0 2.2 0V2.5A1.101 1.101 0 0 0 12 1.4Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M6.656 8.211a1.097 1.097 0 0 0 1.556 0 1.101 1.101 0 0 0 0-1.556L6.06 4.505A1.101 1.101 0 0 0 4.505 6.06l2.15 2.151h.001Z",
+  clipRule: "evenodd",
+  opacity: 0.16
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M6.642 12a1.1 1.1 0 0 0-1.1-1.1H2.5a1.1 1.1 0 0 0 0 2.2h3.042a1.1 1.1 0 0 0 1.1-1.1Z",
+  clipRule: "evenodd",
+  opacity: 0.32
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "m6.656 15.789-2.151 2.15a1.101 1.101 0 0 0 1.556 1.556l2.15-2.15a1.101 1.101 0 0 0-1.555-1.556ZM12 17.358a1.1 1.1 0 0 0-1.1 1.1V21.5a1.1 1.1 0 0 0 2.2 0v-3.042a1.1 1.1 0 0 0-1.1-1.1Z",
+  clipRule: "evenodd",
+  opacity: 0.56
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M17.344 15.789a1.1 1.1 0 0 0-1.556 1.556l2.151 2.15a1.098 1.098 0 0 0 1.878-.778 1.1 1.1 0 0 0-.322-.778l-2.15-2.15h-.001ZM21.5 10.9h-3.042a1.1 1.1 0 0 0 0 2.2H21.5a1.1 1.1 0 0 0 0-2.2ZM16.566 8.534c.281 0 .563-.107.778-.322l2.151-2.151a1.1 1.1 0 0 0-1.556-1.556l-2.15 2.15a1.1 1.1 0 0 0 .777 1.879Z",
+  clipRule: "evenodd",
+  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);
+`;
+Spinner.defaultProps = {
+  width: 32,
+  height: 32,
+  color: color$1['icon/neutral']
+};
+
+const UnstyledButton = Qe.button`
+  background: none;
+  border: 0;
+  padding: 0;
+  outline: none;
+  cursor: pointer;
+
+  ${sx}
+`;
+
+const IconButton = /*#__PURE__*/React$1.forwardRef(({
+  icon: Icon,
+  size = 'm',
+  variant = 'primary',
+  disabled = false,
+  loading = false,
+  type = 'button',
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(BaseIconButton, _extends({
+    ref: ref,
+    type: type,
+    icon: Icon,
+    size: size,
+    variant: variant,
+    disabled: disabled || loading,
+    $disabled: disabled,
+    $loading: loading
+  }, props), !loading ? /*#__PURE__*/React.createElement(Icon, null) : /*#__PURE__*/React.createElement(Spinner, {
+    color: 'currentColor'
+  }));
+});
+const BaseIconButton = Qe(UnstyledButton)(({
+  $loading,
+  $disabled
+}) => ({
+  'position': 'relative',
+  'borderRadius': radii.full,
+  'transition': 'background-color 100ms, color 100ms',
+  '& svg': {
+    display: 'block',
+    pointerEvents: 'none'
+  },
+  'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
+  ':focus-visible': {
+    outlineColor: color$1['border/focused'],
+    outlineStyle: 'solid',
+    outlineWidth: 2,
+    outlineOffset: 2
+  }
+}), variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'p': 3,
+      '& svg': {
+        width: 24,
+        height: 24
+      }
+    },
+    m: {
+      'p': 2,
+      '& svg': {
+        width: 24,
+        height: 24
+      }
+    },
+    s: {
+      'p': 2,
+      '& svg': {
+        width: 16,
+        height: 16
+      }
+    }
+  }
+}), ({
+  $disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    'primary': {
+      'backgroundColor': color$1['bg/primary'],
+      'color': color$1['icon/inverse'],
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/primary/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/primary/pressed']
+      },
+      ...($disabled ? {
+        backgroundColor: color$1['bg/disabled'],
+        color: color$1['icon/disabled']
+      } : {})
+    },
+    'secondary': {
+      'backgroundColor': color$1['bg/secondary'],
+      'color': color$1['icon/primary'],
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/secondary/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/secondary/pressed']
+      },
+      ...($disabled ? {
+        backgroundColor: color$1['bg/disabled'],
+        color: color$1['icon/disabled']
+      } : {})
+    },
+    'tertiary': {
+      'backgroundColor': color$1['bg/neutral'],
+      'color': color$1['icon/accent/gray'],
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/neutral/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/neutral/pressed']
+      },
+      ...($disabled ? {
+        backgroundColor: color$1['bg/disabled'],
+        color: color$1['icon/disabled']
+      } : {})
+    },
+    'outlined': {
+      'backgroundColor': color$1['bg/neutral/subtler'],
+      'color': color$1['icon/neutral/bolder'],
+      ':after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color$1['border/neutral/bolder'],
+        borderRadius: radii.full,
+        boxSizing: 'border-box'
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/neutral/subtler/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/neutral/subtler/pressed']
+      },
+      ...($disabled ? {
+        'backgroundColor': color$1['bg/disabled'],
+        'color': color$1['icon/disabled'],
+        ':after': {
+          display: 'none'
+        }
+      } : {})
+    },
+    'plain-bold': {
+      'backgroundColor': color$1['bg/neutral/subtler'],
+      'color': color$1['icon/neutral/bolder'],
+      ':hover:not(:disabled)': {
+        color: color$1['icon/accent/gray']
+      },
+      ':active:not(:disabled)': {
+        color: color$1['icon/accent/gray']
+      },
+      ...($disabled ? {
+        backgroundColor: color$1['bg/disabled/subtlest'],
+        color: color$1['icon/disabled']
+      } : {})
+    },
+    'plain': {
+      'backgroundColor': color$1['bg/neutral/subtler'],
+      'color': color$1['icon/neutral/bold'],
+      ':hover:not(:disabled)': {
+        color: color$1['icon/neutral/bolder']
+      },
+      ':active:not(:disabled)': {
+        color: color$1['icon/neutral/bolder']
+      },
+      ...($disabled ? {
+        backgroundColor: color$1['bg/disabled/subtlest'],
+        color: color$1['icon/disabled/subtler']
+      } : {})
+    },
+    'plain-subtle': {
+      'backgroundColor': color$1['bg/neutral/subtler'],
+      'color': color$1['icon/neutral'],
+      ':hover:not(:disabled)': {
+        color: color$1['icon/neutral/bold']
+      },
+      ':active:not(:disabled)': {
+        color: color$1['icon/neutral/bold']
+      },
+      ...($disabled ? {
+        backgroundColor: color$1['bg/disabled/subtlest'],
+        color: color$1['icon/disabled/subtler']
+      } : {})
+    },
+    'danger': {
+      'backgroundColor': color$1['bg/danger/bold'],
+      'color': color$1['icon/inverse'],
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/danger/bold/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/danger/bold/pressed']
+      },
+      ...($disabled ? {
+        backgroundColor: color$1['bg/disabled'],
+        color: color$1['icon/disabled']
+      } : {})
+    }
+  }
+}));
+
+const IconToggleButton = ({
+  icon: Icon,
+  size = 'm',
+  variant = 'primary',
+  selected = false,
+  disabled = false,
+  sx,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(BaseIconToggleButton, _extends({
+    icon: Icon,
+    size: size,
+    variant: variant,
+    selected: selected,
+    type: 'button',
+    disabled: disabled,
+    $disabled: disabled,
+    sx: sx
+  }, props), /*#__PURE__*/React.createElement(Icon, null));
+};
+const BaseIconToggleButton = Qe(UnstyledButton)(({
+  $disabled
+}) => ({
+  'position': 'relative',
+  'borderRadius': radii.full,
+  'transition': 'background-color 100ms, color 100ms',
+  '& svg': {
+    display: 'block'
+  },
+  'cursor': $disabled ? 'not-allowed' : 'pointer',
+  ':focus-visible': {
+    outlineColor: color$1['border/focused'],
+    outlineStyle: 'solid',
+    outlineWidth: 2,
+    outlineOffset: 2
+  }
+}), variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'p': 3,
+      '& svg': {
+        width: 24,
+        height: 24
+      }
+    },
+    m: {
+      'p': 2,
+      '& svg': {
+        width: 24,
+        height: 24
+      }
+    },
+    s: {
+      'p': 2,
+      '& svg': {
+        width: 16,
+        height: 16
+      }
+    }
+  }
+}), ({
+  selected,
+  $disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    primary: {
+      ...(selected ? {
+        backgroundColor: color$1['bg/selected/violet'],
+        color: color$1['icon/inverse']
+      } : {
+        backgroundColor: color$1['bg/neutral'],
+        color: color$1['icon/accent/gray']
+      }),
+      ...($disabled ? {
+        backgroundColor: color$1['bg/disabled'],
+        color: color$1['icon/disabled']
+      } : {})
+    },
+    plain: {
+      backgroundColor: color$1['bg/neutral/subtler'],
+      ...(selected ? {
+        color: color$1['icon/selected/primary']
+      } : {
+        color: color$1['icon/neutral']
+      }),
+      ...($disabled ? {
+        backgroundColor: color$1['bg/disabled/subtlest'],
+        color: color$1['icon/disabled/subtler']
+      } : {})
+    }
+  }
+}), sx);
+
+const ItemList = ({
+  items,
+  renderItem,
+  renderItemWrapper = children => children,
+  emptyState = null
+}) => {
+  if (items.length === 0) return emptyState;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, items.map((item, i) => renderItemWrapper(renderItem(item, i), item, i)));
+};
+
+const Space = Qe.div`
+  width: inherit;
+  ${space};
+  ${sx}
+`;
+
+const Stack = /*#__PURE__*/React$1.forwardRef(({
+  gapX = 0,
+  gapY = 0,
+  children,
+  alignItems = 'center',
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(BaseStack, _extends({
+  ref: ref,
+  alignItems: alignItems,
+  gapX: gapX,
+  gapY: gapY
+}, props), children));
+const BaseStack = Qe(View)({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap'
+}, variant({
+  prop: 'gapX',
+  variants: Object.fromEntries(Object.entries(space$1).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        px: forcePixelValue(value / 2)
+      },
+      'mx': forcePixelValue(-value / 2)
+    };
+    return [key, styleValue];
+  }))
+}), variant({
+  prop: 'gapY',
+  variants: Object.fromEntries(Object.entries(space$1).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        mt: forcePixelValue(value)
+      },
+      'mt': forcePixelValue(-value)
+    };
+    return [key, styleValue];
+  }))
+}));
+const Item = ({
+  children,
+  ...props
+}) => /*#__PURE__*/React.createElement(View, props, children);
+var index = Object.assign(Stack, {
+  Item
+});
+
+const StyledIcon = ({
+  icon: Icon,
+  sx,
+  ...props
+}) => /*#__PURE__*/React.createElement(View, _extends({}, props, {
+  color: props.color,
+  sx: {
+    '& svg': {
+      display: 'inline-flex',
+      width: '100%',
+      height: '100%'
+    },
+    ...sx
+  }
+}), /*#__PURE__*/React.createElement(Icon, null));
+
+exports.Chip = Chip;
+exports.GradientText = GradientText;
+exports.Grid = index$1;
+exports.IconButton = IconButton;
+exports.IconToggleButton = IconToggleButton;
+exports.ItemList = ItemList;
+exports.Space = Space;
+exports.Spinner = Spinner;
+exports.Stack = index;
+exports.StyledIcon = StyledIcon;
+exports.Text = Text;
+exports.View = View;