@grafana/components 0.0.1

package/dist/cjs/index.cjs

@@ -0,0 +1,3914 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var css$1 = require('@emotion/css');
+var ui = require('@grafana/ui');
+var react = require('@floating-ui/react');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return 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__*/_interopNamespaceCompat(React);
+
+const ColorModeContext = React.createContext(void 0);
+const ColorModeProvider = ({
+  children,
+  defaultColorMode = "light"
+}) => {
+  const [colorMode, setColorMode] = React.useState(defaultColorMode);
+  React.useEffect(() => {
+    console.log("ColorModeProvider", { colorMode });
+    document.documentElement.setAttribute("data-color-mode", colorMode);
+  }, [colorMode]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ColorModeContext.Provider, { value: { colorMode, setColorMode }, children });
+};
+const useColorMode = () => {
+  const context = React.useContext(ColorModeContext);
+  if (context === void 0) {
+    throw new Error("useColorMode must be used within a ColorModeProvider");
+  }
+  return context;
+};
+
+const palette = {
+  legacy: {
+    white: "#ffffff",
+    black: "#000000",
+    grey90: "#fbfbfb",
+    grey100: "#f4f5f5",
+    grey80: "#d0d1d3",
+    grey25: "#2c3235",
+    grey15: "#22252b",
+    grey10: "#181b1f",
+    grey05: "#111217",
+    blueDarkMain: "#3d71d9",
+    blueDarkShade: "#5a86de",
+    blueDarkText: "#6e9fff",
+    redDarkMain: "#d10e5c",
+    redDarkText: "#ff5286",
+    redDarkShade: "#d73274",
+    greenDarkMain: "#1a7f4b",
+    greenDarkText: "#6ccf8e",
+    greenDarkShade: "#3c9266",
+    orangeDarkMain: "#ff9900",
+    orangeDarkText: "#fbad37",
+    orangeDarkShade: "#ffa826",
+    blueLightMain: "#3871dc",
+    blueLightShade: "#2c5ab0",
+    blueLightText: "#1f62e0",
+    redLightMain: "#e0226e",
+    redLightText: "#cf0e5b",
+    redLightShade: "#b31b58",
+    greenLightMain: "#1b855e",
+    greenLightText: "#0a764e",
+    greenLightShade: "#156a4b",
+    orangeLightMain: "#ff9900",
+    orangeLightText: "#b5510d",
+    orangeLightShade: "#cc7a00",
+    whiteBase: "#ccccdc",
+    blackBase: "#24292e",
+    orangeBrandGradientA: "#f55f3e",
+    orangeBrandGradientB: "#ff8833",
+    orangeBrandGradientC: "#f53e4c",
+    grey10Opacity20: "rgb(24 27 31 / 20%)",
+    grey10Opacity18: "rgb(24 27 31 / 18%)",
+    blackOpacity75: "rgb(0 0 0 / 75%)",
+    whiteBaseOpacity4: "rgb(204 204 220 / 4%)",
+    whiteBaseOpacity8: "rgb(204 204 220 / 8%)",
+    whiteBaseOpacity10: "rgb(204 204 220 / 10%)",
+    whiteBaseOpacity12: "rgb(204 204 220 / 12%)",
+    whiteBaseOpacity14: "rgb(204 204 220 / 14%)",
+    whiteBaseOpacity16: "rgb(204 204 220 / 16%)",
+    whiteBaseOpacity20: "rgb(204 204 220 / 20%)",
+    whiteBaseOpacity25: "rgb(204 204 220 / 25%)",
+    whiteBaseOpacity30: "rgb(204 204 220 / 30%)",
+    whiteBaseOpacity61: "rgb(204 204 220 / 61%)",
+    whiteBaseOpacity65: "rgb(204 204 220 / 65%)",
+    blueDarkMainOpacity15: "rgb(61 113 217 / 15%)",
+    blueDarkTextOpacity25: "rgb(110 159 255 / 25%)",
+    redDarkMainOpacity15: "rgb(209 14 92 / 15%)",
+    redDarkTextOpacity25: "rgb(255 82 134 / 25%)",
+    greenDarkMainOpacity15: "rgb(26 127 75 / 15%)",
+    greenDarkTextOpacity25: "rgb(108 207 142 / 25%)",
+    orangeDarkMainOpacity15: "rgb(255 153 0 / 15%)",
+    orangeDarkTextOpacity25: "rgb(251 173 55 / 25%)",
+    blackBaseOpacity4: "rgb(36 41 46 / 4%)",
+    blackBaseOpacity8: "rgb(36 41 46 / 8%)",
+    blackBaseOpacity12: "rgb(36 41 46 / 12%)",
+    blackBaseOpacity15: "rgb(36 41 46 / 15%)",
+    blackBaseOpacity25: "rgb(36 41 46 / 25%)",
+    blackBaseOpacity30: "rgb(36 41 46 / 30%)",
+    blackBaseOpacity40: "rgb(36 41 46 / 40%)",
+    blackBaseOpacity65: "rgb(36 41 46 / 65%)",
+    blackBaseOpacity75: "rgb(36 41 46 / 75%)",
+    blueLightMainOpacity15: "rgb(56 113 220 / 15%)",
+    blueLightTextOpacity25: "rgb(31 98 224 / 25%)",
+    redLightMainOpacity15: "rgb(224 34 110 / 15%)",
+    redLightTextOpacity25: "rgb(207 14 91 / 25%)",
+    greenLightMainOpacity15: "rgb(27 133 94 / 15%)",
+    greenLightTextOpacity25: "rgb(10 118 78 / 25%)",
+    orangeLightMainOpacity15: "rgb(255 153 0 / 15%)",
+    orangeLightTextOpacity25: "rgb(181 81 13 / 25%)"
+  }
+};
+
+const darkColors$1 = {
+  text: {
+    primary: "#ccccdc",
+    secondary: "rgb(204 204 220 / 65%)",
+    disabled: "rgb(204 204 220 / 61%)",
+    link: "#6e9fff",
+    maxContrast: "#ffffff"
+  },
+  action: {
+    hover: "rgb(204 204 220 / 16%)",
+    selected: "rgb(204 204 220 / 12%)",
+    selectedBorder: "#ff9900",
+    focus: "rgb(204 204 220 / 16%)",
+    disabledText: "rgb(204 204 220 / 61%)",
+    disabledBackground: "rgb(204 204 220 / 4%)",
+    hoverOpacity: 0.08,
+    disabledOpacity: 0.38
+  },
+  primary: {
+    name: "primary",
+    main: "#3d71d9",
+    text: "#6e9fff",
+    border: "#6e9fff",
+    shade: "#5a86de",
+    transparent: "rgb(61 113 217 / 15%)",
+    contrastText: "#ffffff",
+    borderTransparent: "rgb(110 159 255 / 25%)"
+  },
+  border: {
+    weak: "rgb(204 204 220 / 12%)",
+    medium: "rgb(204 204 220 / 20%)",
+    strong: "rgb(204 204 220 / 30%)"
+  },
+  secondary: {
+    name: "secondary",
+    main: "rgb(204 204 220 / 10%)",
+    shade: "rgb(204 204 220 / 14%)",
+    transparent: "rgb(204 204 220 / 8%)",
+    text: "#ccccdc",
+    contrastText: "#ccccdc",
+    border: "rgb(204 204 220 / 8%)",
+    borderTransparent: "rgb(204 204 220 / 25%)"
+  },
+  info: {
+    name: "info",
+    main: "#3d71d9",
+    text: "#6e9fff",
+    border: "#6e9fff",
+    shade: "#5a86de",
+    transparent: "rgb(61 113 217 / 15%)",
+    contrastText: "#ffffff",
+    borderTransparent: "rgb(110 159 255 / 25%)"
+  },
+  error: {
+    name: "error",
+    main: "#d10e5c",
+    text: "#ff5286",
+    border: "#ff5286",
+    shade: "#d73274",
+    transparent: "rgb(209 14 92 / 15%)",
+    contrastText: "#ffffff",
+    borderTransparent: "rgb(255 82 134 / 25%)"
+  },
+  success: {
+    name: "success",
+    main: "#1a7f4b",
+    text: "#6ccf8e",
+    border: "#6ccf8e",
+    shade: "#3c9266",
+    transparent: "rgb(26 127 75 / 15%)",
+    contrastText: "#ffffff",
+    borderTransparent: "rgb(108 207 142 / 25%)"
+  },
+  warning: {
+    name: "warning",
+    main: "#ff9900",
+    text: "#fbad37",
+    border: "#fbad37",
+    shade: "#ffa826",
+    transparent: "rgb(255 153 0 / 15%)",
+    contrastText: "#000000",
+    borderTransparent: "rgb(251 173 55 / 25%)"
+  },
+  background: {
+    canvas: "#111217",
+    primary: "#181b1f",
+    secondary: "#22252b",
+    elevated: "#22252b"
+  },
+  gradients: {
+    brandHorizontal: "linear-gradient(270deg, #f55f3e 0%, #ff8833 100%)",
+    brandVertical: "linear-gradient(0.01deg, #f55f3e 0.01%, #ff8833 99.99%)"
+  }
+};
+
+const darkColors = {
+  text: {
+    primary: "var(--color-text-primary)",
+    secondary: "var(--color-text-secondary)",
+    disabled: "var(--color-text-disabled)",
+    link: "var(--color-text-link)",
+    maxContrast: "var(--color-text-max-contrast)"
+  },
+  action: {
+    hover: "var(--color-action-hover)",
+    selected: "var(--color-action-selected)",
+    selectedBorder: "var(--color-action-selected-border)",
+    focus: "var(--color-action-focus)",
+    disabledText: "var(--color-action-disabled-text)",
+    disabledBackground: "var(--color-action-disabled-background)",
+    hoverOpacity: "var(--color-action-hover-opacity)",
+    disabledOpacity: "var(--color-action-disabled-opacity)"
+  },
+  primary: {
+    name: "var(--color-primary-name)",
+    main: "var(--color-primary-main)",
+    text: "var(--color-primary-text)",
+    border: "var(--color-primary-border)",
+    shade: "var(--color-primary-shade)",
+    transparent: "var(--color-primary-transparent)",
+    contrastText: "var(--color-primary-contrast-text)",
+    borderTransparent: "var(--color-primary-border-transparent)"
+  },
+  border: {
+    weak: "var(--color-border-weak)",
+    medium: "var(--color-border-medium)",
+    strong: "var(--color-border-strong)"
+  },
+  secondary: {
+    name: "var(--color-secondary-name)",
+    main: "var(--color-secondary-main)",
+    shade: "var(--color-secondary-shade)",
+    transparent: "var(--color-secondary-transparent)",
+    text: "var(--color-secondary-text)",
+    contrastText: "var(--color-secondary-contrast-text)",
+    border: "var(--color-secondary-border)",
+    borderTransparent: "var(--color-secondary-border-transparent)"
+  },
+  info: {
+    name: "var(--color-info-name)",
+    main: "var(--color-info-main)",
+    text: "var(--color-info-text)",
+    border: "var(--color-info-border)",
+    shade: "var(--color-info-shade)",
+    transparent: "var(--color-info-transparent)",
+    contrastText: "var(--color-info-contrast-text)",
+    borderTransparent: "var(--color-info-border-transparent)"
+  },
+  error: {
+    name: "var(--color-error-name)",
+    main: "var(--color-error-main)",
+    text: "var(--color-error-text)",
+    border: "var(--color-error-border)",
+    shade: "var(--color-error-shade)",
+    transparent: "var(--color-error-transparent)",
+    contrastText: "var(--color-error-contrast-text)",
+    borderTransparent: "var(--color-error-border-transparent)"
+  },
+  success: {
+    name: "var(--color-success-name)",
+    main: "var(--color-success-main)",
+    text: "var(--color-success-text)",
+    border: "var(--color-success-border)",
+    shade: "var(--color-success-shade)",
+    transparent: "var(--color-success-transparent)",
+    contrastText: "var(--color-success-contrast-text)",
+    borderTransparent: "var(--color-success-border-transparent)"
+  },
+  warning: {
+    name: "var(--color-warning-name)",
+    main: "var(--color-warning-main)",
+    text: "var(--color-warning-text)",
+    border: "var(--color-warning-border)",
+    shade: "var(--color-warning-shade)",
+    transparent: "var(--color-warning-transparent)",
+    contrastText: "var(--color-warning-contrast-text)",
+    borderTransparent: "var(--color-warning-border-transparent)"
+  },
+  background: {
+    canvas: "var(--color-background-canvas)",
+    primary: "var(--color-background-primary)",
+    secondary: "var(--color-background-secondary)",
+    elevated: "var(--color-background-elevated)"
+  },
+  gradients: {
+    brandHorizontal: "var(--color-gradients-brand-horizontal)",
+    brandVertical: "var(--color-gradients-brand-vertical)"
+  }
+};
+
+const lightColors$1 = {
+  text: {
+    primary: "#24292e",
+    secondary: "rgb(36 41 46 / 75%)",
+    disabled: "rgb(36 41 46 / 65%)",
+    link: "#24292e",
+    maxContrast: "#000000"
+  },
+  action: {
+    hover: "rgb(36 41 46 / 12%)",
+    selected: "rgb(36 41 46 / 8%)",
+    selectedBorder: "#ff9900",
+    focus: "rgb(36 41 46 / 12%)",
+    disabledText: "rgb(36 41 46 / 65%)",
+    disabledBackground: "rgb(36 41 46 / 4%)",
+    hoverOpacity: 0.08,
+    disabledOpacity: 0.38
+  },
+  primary: {
+    name: "primary",
+    main: "#3871dc",
+    text: "#1f62e0",
+    border: "#1f62e0",
+    shade: "#2c5ab0",
+    transparent: "rgb(56 113 220 / 15%)",
+    contrastText: "#ffffff",
+    borderTransparent: "rgb(31 98 224 / 25%)"
+  },
+  border: {
+    weak: "rgb(36 41 46 / 12%)",
+    medium: "rgb(36 41 46 / 30%)",
+    strong: "rgb(36 41 46 / 40%)"
+  },
+  secondary: {
+    name: "secondary",
+    main: "rgb(36 41 46 / 8%)",
+    shade: "rgb(36 41 46 / 15%)",
+    transparent: "rgb(36 41 46 / 8%)",
+    text: "#24292e",
+    contrastText: "#24292e",
+    border: "#24292e",
+    borderTransparent: "rgb(36 41 46 / 25%)"
+  },
+  info: {
+    name: "info",
+    main: "#3871dc",
+    text: "#1f62e0",
+    border: "#1f62e0",
+    shade: "#2c5ab0",
+    transparent: "rgb(56 113 220 / 15%)",
+    contrastText: "#ffffff",
+    borderTransparent: "rgb(31 98 224 / 25%)"
+  },
+  error: {
+    name: "error",
+    main: "#e0226e",
+    text: "#cf0e5b",
+    border: "#cf0e5b",
+    shade: "#b31b58",
+    transparent: "rgb(224 34 110 / 15%)",
+    contrastText: "#ffffff",
+    borderTransparent: "rgb(207 14 91 / 25%)"
+  },
+  success: {
+    name: "success",
+    main: "#1b855e",
+    text: "#0a764e",
+    border: "#0a764e",
+    shade: "#156a4b",
+    transparent: "rgb(27 133 94 / 15%)",
+    contrastText: "#ffffff",
+    borderTransparent: "rgb(10 118 78 / 25%)"
+  },
+  warning: {
+    name: "warning",
+    main: "#ff9900",
+    text: "#b5510d",
+    border: "#b5510d",
+    shade: "#cc7a00",
+    transparent: "rgb(255 153 0 / 15%)",
+    contrastText: "#000000",
+    borderTransparent: "rgb(181 81 13 / 25%)"
+  },
+  background: {
+    canvas: "#fbfbfb",
+    primary: "#ffffff",
+    secondary: "#f4f5f5",
+    elevated: "#ffffff"
+  },
+  gradients: {
+    brandHorizontal: "linear-gradient(270deg, #ff8833 0%, #f53e4c 100%)",
+    brandVertical: "linear-gradient(0.01deg, #f53e4c -31.2%, #ff8833 113.07%)"
+  }
+};
+
+const lightColors = {
+  text: {
+    primary: "var(--color-text-primary)",
+    secondary: "var(--color-text-secondary)",
+    disabled: "var(--color-text-disabled)",
+    link: "var(--color-text-link)",
+    maxContrast: "var(--color-text-max-contrast)"
+  },
+  action: {
+    hover: "var(--color-action-hover)",
+    selected: "var(--color-action-selected)",
+    selectedBorder: "var(--color-action-selected-border)",
+    focus: "var(--color-action-focus)",
+    disabledText: "var(--color-action-disabled-text)",
+    disabledBackground: "var(--color-action-disabled-background)",
+    hoverOpacity: "var(--color-action-hover-opacity)",
+    disabledOpacity: "var(--color-action-disabled-opacity)"
+  },
+  primary: {
+    name: "var(--color-primary-name)",
+    main: "var(--color-primary-main)",
+    text: "var(--color-primary-text)",
+    border: "var(--color-primary-border)",
+    shade: "var(--color-primary-shade)",
+    transparent: "var(--color-primary-transparent)",
+    contrastText: "var(--color-primary-contrast-text)",
+    borderTransparent: "var(--color-primary-border-transparent)"
+  },
+  border: {
+    weak: "var(--color-border-weak)",
+    medium: "var(--color-border-medium)",
+    strong: "var(--color-border-strong)"
+  },
+  secondary: {
+    name: "var(--color-secondary-name)",
+    main: "var(--color-secondary-main)",
+    shade: "var(--color-secondary-shade)",
+    transparent: "var(--color-secondary-transparent)",
+    text: "var(--color-secondary-text)",
+    contrastText: "var(--color-secondary-contrast-text)",
+    border: "var(--color-secondary-border)",
+    borderTransparent: "var(--color-secondary-border-transparent)"
+  },
+  info: {
+    name: "var(--color-info-name)",
+    main: "var(--color-info-main)",
+    text: "var(--color-info-text)",
+    border: "var(--color-info-border)",
+    shade: "var(--color-info-shade)",
+    transparent: "var(--color-info-transparent)",
+    contrastText: "var(--color-info-contrast-text)",
+    borderTransparent: "var(--color-info-border-transparent)"
+  },
+  error: {
+    name: "var(--color-error-name)",
+    main: "var(--color-error-main)",
+    text: "var(--color-error-text)",
+    border: "var(--color-error-border)",
+    shade: "var(--color-error-shade)",
+    transparent: "var(--color-error-transparent)",
+    contrastText: "var(--color-error-contrast-text)",
+    borderTransparent: "var(--color-error-border-transparent)"
+  },
+  success: {
+    name: "var(--color-success-name)",
+    main: "var(--color-success-main)",
+    text: "var(--color-success-text)",
+    border: "var(--color-success-border)",
+    shade: "var(--color-success-shade)",
+    transparent: "var(--color-success-transparent)",
+    contrastText: "var(--color-success-contrast-text)",
+    borderTransparent: "var(--color-success-border-transparent)"
+  },
+  warning: {
+    name: "var(--color-warning-name)",
+    main: "var(--color-warning-main)",
+    text: "var(--color-warning-text)",
+    border: "var(--color-warning-border)",
+    shade: "var(--color-warning-shade)",
+    transparent: "var(--color-warning-transparent)",
+    contrastText: "var(--color-warning-contrast-text)",
+    borderTransparent: "var(--color-warning-border-transparent)"
+  },
+  background: {
+    canvas: "var(--color-background-canvas)",
+    primary: "var(--color-background-primary)",
+    secondary: "var(--color-background-secondary)",
+    elevated: "var(--color-background-elevated)"
+  },
+  gradients: {
+    brandHorizontal: "var(--color-gradients-brand-horizontal)",
+    brandVertical: "var(--color-gradients-brand-vertical)"
+  }
+};
+
+const colors$2 = {
+  black: "#000000",
+  white: "#ffffff",
+  red50: "oklch(97.1% 0.013 17.38)",
+  red100: "oklch(93.6% 0.032 17.717)",
+  red200: "oklch(88.5% 0.062 18.334)",
+  red300: "oklch(80.8% 0.114 19.571)",
+  red400: "oklch(70.4% 0.191 22.216)",
+  red500: "oklch(63.7% 0.237 25.331)",
+  red600: "oklch(57.7% 0.245 27.325)",
+  red700: "oklch(50.5% 0.213 27.518)",
+  red800: "oklch(44.4% 0.177 26.899)",
+  red900: "oklch(39.6% 0.141 25.723)",
+  red950: "oklch(25.8% 0.092 26.042)",
+  orange50: "oklch(98% 0.016 73.684)",
+  orange100: "oklch(95.4% 0.038 75.164)",
+  orange200: "oklch(90.1% 0.076 70.697)",
+  orange300: "oklch(83.7% 0.128 66.29)",
+  orange400: "oklch(75% 0.183 55.934)",
+  orange500: "oklch(70.5% 0.213 47.604)",
+  orange600: "oklch(64.6% 0.222 41.116)",
+  orange700: "oklch(55.3% 0.195 38.402)",
+  orange800: "oklch(47% 0.157 37.304)",
+  orange900: "oklch(40.8% 0.123 38.172)",
+  orange950: "oklch(26.6% 0.079 36.259)",
+  amber50: "oklch(98.7% 0.022 95.277)",
+  amber100: "oklch(96.2% 0.059 95.617)",
+  amber200: "oklch(92.4% 0.12 95.746)",
+  amber300: "oklch(87.9% 0.169 91.605)",
+  amber400: "oklch(82.8% 0.189 84.429)",
+  amber500: "oklch(76.9% 0.188 70.08)",
+  amber600: "oklch(66.6% 0.179 58.318)",
+  amber700: "oklch(55.5% 0.163 48.998)",
+  amber800: "oklch(47.3% 0.137 46.201)",
+  amber900: "oklch(41.4% 0.112 45.904)",
+  amber950: "oklch(27.9% 0.077 45.635)",
+  yellow50: "oklch(98.7% 0.026 102.212)",
+  yellow100: "oklch(97.3% 0.071 103.193)",
+  yellow200: "oklch(94.5% 0.129 101.54)",
+  yellow300: "oklch(90.5% 0.182 98.111)",
+  yellow400: "oklch(85.2% 0.199 91.936)",
+  yellow500: "oklch(79.5% 0.184 86.047)",
+  yellow600: "oklch(68.1% 0.162 75.834)",
+  yellow700: "oklch(55.4% 0.135 66.442)",
+  yellow800: "oklch(47.6% 0.114 61.907)",
+  yellow900: "oklch(42.1% 0.095 57.708)",
+  yellow950: "oklch(28.6% 0.066 53.813)",
+  lime50: "oklch(98.6% 0.031 120.757)",
+  lime100: "oklch(96.7% 0.067 122.328)",
+  lime200: "oklch(93.8% 0.127 124.321)",
+  lime300: "oklch(89.7% 0.196 126.665)",
+  lime400: "oklch(84.1% 0.238 128.85)",
+  lime500: "oklch(76.8% 0.233 130.85)",
+  lime600: "oklch(64.8% 0.2 131.684)",
+  lime700: "oklch(53.2% 0.157 131.589)",
+  lime800: "oklch(45.3% 0.124 130.933)",
+  lime900: "oklch(40.5% 0.101 131.063)",
+  lime950: "oklch(27.4% 0.072 132.109)",
+  green50: "oklch(98.2% 0.018 155.826)",
+  green100: "oklch(96.2% 0.044 156.743)",
+  green200: "oklch(92.5% 0.084 155.995)",
+  green300: "oklch(87.1% 0.15 154.449)",
+  green400: "oklch(79.2% 0.209 151.711)",
+  green500: "oklch(72.3% 0.219 149.579)",
+  green600: "oklch(62.7% 0.194 149.214)",
+  green700: "oklch(52.7% 0.154 150.069)",
+  green800: "oklch(44.8% 0.119 151.328)",
+  green900: "oklch(39.3% 0.095 152.535)",
+  green950: "oklch(26.6% 0.065 152.934)",
+  emerald50: "oklch(97.9% 0.021 166.113)",
+  emerald100: "oklch(95% 0.052 163.051)",
+  emerald200: "oklch(90.5% 0.093 164.15)",
+  emerald300: "oklch(84.5% 0.143 164.978)",
+  emerald400: "oklch(76.5% 0.177 163.223)",
+  emerald500: "oklch(69.6% 0.17 162.48)",
+  emerald600: "oklch(59.6% 0.145 163.225)",
+  emerald700: "oklch(50.8% 0.118 165.612)",
+  emerald800: "oklch(43.2% 0.095 166.913)",
+  emerald900: "oklch(37.8% 0.077 168.94)",
+  emerald950: "oklch(26.2% 0.051 172.552)",
+  teal50: "oklch(98.4% 0.014 180.72)",
+  teal100: "oklch(95.3% 0.051 180.801)",
+  teal200: "oklch(91% 0.096 180.426)",
+  teal300: "oklch(85.5% 0.138 181.071)",
+  teal400: "oklch(77.7% 0.152 181.912)",
+  teal500: "oklch(70.4% 0.14 182.503)",
+  teal600: "oklch(60% 0.118 184.704)",
+  teal700: "oklch(51.1% 0.096 186.391)",
+  teal800: "oklch(43.7% 0.078 188.216)",
+  teal900: "oklch(38.6% 0.063 188.416)",
+  teal950: "oklch(27.7% 0.046 192.524)",
+  cyan50: "oklch(98.4% 0.019 200.873)",
+  cyan100: "oklch(95.6% 0.045 203.388)",
+  cyan200: "oklch(91.7% 0.08 205.041)",
+  cyan300: "oklch(86.5% 0.127 207.078)",
+  cyan400: "oklch(78.9% 0.154 211.53)",
+  cyan500: "oklch(71.5% 0.143 215.221)",
+  cyan600: "oklch(60.9% 0.126 221.723)",
+  cyan700: "oklch(52% 0.105 223.128)",
+  cyan800: "oklch(45% 0.085 224.283)",
+  cyan900: "oklch(39.8% 0.07 227.392)",
+  cyan950: "oklch(30.2% 0.056 229.695)",
+  sky50: "oklch(97.7% 0.013 236.62)",
+  sky100: "oklch(95.1% 0.026 236.824)",
+  sky200: "oklch(90.1% 0.058 230.902)",
+  sky300: "oklch(82.8% 0.111 230.318)",
+  sky400: "oklch(74.6% 0.16 232.661)",
+  sky500: "oklch(68.5% 0.169 237.323)",
+  sky600: "oklch(58.8% 0.158 241.966)",
+  sky700: "oklch(50% 0.134 242.749)",
+  sky800: "oklch(44.3% 0.11 240.79)",
+  sky900: "oklch(39.1% 0.09 240.876)",
+  sky950: "oklch(29.3% 0.066 243.157)",
+  blue50: "oklch(97% 0.014 254.604)",
+  blue100: "oklch(93.2% 0.032 255.585)",
+  blue200: "oklch(88.2% 0.059 254.128)",
+  blue300: "oklch(80.9% 0.105 251.813)",
+  blue400: "oklch(70.7% 0.165 254.624)",
+  blue500: "oklch(62.3% 0.214 259.815)",
+  blue600: "oklch(54.6% 0.245 262.881)",
+  blue700: "oklch(48.8% 0.243 264.376)",
+  blue800: "oklch(42.4% 0.199 265.638)",
+  blue900: "oklch(37.9% 0.146 265.522)",
+  blue950: "oklch(28.2% 0.091 267.935)",
+  indigo50: "oklch(96.2% 0.018 272.314)",
+  indigo100: "oklch(93% 0.034 272.788)",
+  indigo200: "oklch(87% 0.065 274.039)",
+  indigo300: "oklch(78.5% 0.115 274.713)",
+  indigo400: "oklch(67.3% 0.182 276.935)",
+  indigo500: "oklch(58.5% 0.233 277.117)",
+  indigo600: "oklch(51.1% 0.262 276.966)",
+  indigo700: "oklch(45.7% 0.24 277.023)",
+  indigo800: "oklch(39.8% 0.195 277.366)",
+  indigo900: "oklch(35.9% 0.144 278.697)",
+  indigo950: "oklch(25.7% 0.09 281.288)",
+  violet50: "oklch(96.9% 0.016 293.756)",
+  violet100: "oklch(94.3% 0.029 294.588)",
+  violet200: "oklch(89.4% 0.057 293.283)",
+  violet300: "oklch(81.1% 0.111 293.571)",
+  violet400: "oklch(70.2% 0.183 293.541)",
+  violet500: "oklch(60.6% 0.25 292.717)",
+  violet600: "oklch(54.1% 0.281 293.009)",
+  violet700: "oklch(49.1% 0.27 292.581)",
+  violet800: "oklch(43.2% 0.232 292.759)",
+  violet900: "oklch(38% 0.189 293.745)",
+  violet950: "oklch(28.3% 0.141 291.089)",
+  purple50: "oklch(97.7% 0.014 308.299)",
+  purple100: "oklch(94.6% 0.033 307.174)",
+  purple200: "oklch(90.2% 0.063 306.703)",
+  purple300: "oklch(82.7% 0.119 306.383)",
+  purple400: "oklch(71.4% 0.203 305.504)",
+  purple500: "oklch(62.7% 0.265 303.9)",
+  purple600: "oklch(55.8% 0.288 302.321)",
+  purple700: "oklch(49.6% 0.265 301.924)",
+  purple800: "oklch(43.8% 0.218 303.724)",
+  purple900: "oklch(38.1% 0.176 304.987)",
+  purple950: "oklch(29.1% 0.149 302.717)",
+  fuchsia50: "oklch(97.7% 0.017 320.058)",
+  fuchsia100: "oklch(95.2% 0.037 318.852)",
+  fuchsia200: "oklch(90.3% 0.076 319.62)",
+  fuchsia300: "oklch(83.3% 0.145 321.434)",
+  fuchsia400: "oklch(74% 0.238 322.16)",
+  fuchsia500: "oklch(66.7% 0.295 322.15)",
+  fuchsia600: "oklch(59.1% 0.293 322.896)",
+  fuchsia700: "oklch(51.8% 0.253 323.949)",
+  fuchsia800: "oklch(45.2% 0.211 324.591)",
+  fuchsia900: "oklch(40.1% 0.17 325.612)",
+  fuchsia950: "oklch(29.3% 0.136 325.661)",
+  pink50: "oklch(97.1% 0.014 343.198)",
+  pink100: "oklch(94.8% 0.028 342.258)",
+  pink200: "oklch(89.9% 0.061 343.231)",
+  pink300: "oklch(82.3% 0.12 346.018)",
+  pink400: "oklch(71.8% 0.202 349.761)",
+  pink500: "oklch(65.6% 0.241 354.308)",
+  pink600: "oklch(59.2% 0.249 0.584)",
+  pink700: "oklch(52.5% 0.223 3.958)",
+  pink800: "oklch(45.9% 0.187 3.815)",
+  pink900: "oklch(40.8% 0.153 2.432)",
+  pink950: "oklch(28.4% 0.109 3.907)",
+  rose50: "oklch(96.9% 0.015 12.422)",
+  rose100: "oklch(94.1% 0.03 12.58)",
+  rose200: "oklch(89.2% 0.058 10.001)",
+  rose300: "oklch(81% 0.117 11.638)",
+  rose400: "oklch(71.2% 0.194 13.428)",
+  rose500: "oklch(64.5% 0.246 16.439)",
+  rose600: "oklch(58.6% 0.253 17.585)",
+  rose700: "oklch(51.4% 0.222 16.935)",
+  rose800: "oklch(45.5% 0.188 13.697)",
+  rose900: "oklch(41% 0.159 10.272)",
+  rose950: "oklch(27.1% 0.105 12.094)",
+  slate50: "oklch(98.4% 0.003 247.858)",
+  slate100: "oklch(96.8% 0.007 247.896)",
+  slate200: "oklch(92.9% 0.013 255.508)",
+  slate300: "oklch(86.9% 0.022 252.894)",
+  slate400: "oklch(70.4% 0.04 256.788)",
+  slate500: "oklch(55.4% 0.046 257.417)",
+  slate600: "oklch(44.6% 0.043 257.281)",
+  slate700: "oklch(37.2% 0.044 257.287)",
+  slate800: "oklch(27.9% 0.041 260.031)",
+  slate900: "oklch(20.8% 0.042 265.755)",
+  slate950: "oklch(12.9% 0.042 264.695)",
+  gray50: "oklch(98.5% 0.002 247.839)",
+  gray100: "oklch(96.7% 0.003 264.542)",
+  gray200: "oklch(92.8% 0.006 264.531)",
+  gray300: "oklch(87.2% 0.01 258.338)",
+  gray400: "oklch(70.7% 0.022 261.325)",
+  gray500: "oklch(55.1% 0.027 264.364)",
+  gray600: "oklch(44.6% 0.03 256.802)",
+  gray700: "oklch(37.3% 0.034 259.733)",
+  gray800: "oklch(27.8% 0.033 256.848)",
+  gray900: "oklch(21% 0.034 264.665)",
+  gray950: "oklch(13% 0.028 261.692)",
+  zinc50: "oklch(98.5% 0 0)",
+  zinc100: "oklch(96.7% 0.001 286.375)",
+  zinc200: "oklch(92% 0.004 286.32)",
+  zinc300: "oklch(87.1% 0.006 286.286)",
+  zinc400: "oklch(70.5% 0.015 286.067)",
+  zinc500: "oklch(55.2% 0.016 285.938)",
+  zinc600: "oklch(44.2% 0.017 285.786)",
+  zinc700: "oklch(37% 0.013 285.805)",
+  zinc800: "oklch(27.4% 0.006 286.033)",
+  zinc900: "oklch(21% 0.006 285.885)",
+  zinc950: "oklch(14.1% 0.005 285.823)",
+  neutral50: "oklch(98.5% 0 0)",
+  neutral100: "oklch(97% 0 0)",
+  neutral200: "oklch(92.2% 0 0)",
+  neutral300: "oklch(87% 0 0)",
+  neutral400: "oklch(70.8% 0 0)",
+  neutral500: "oklch(55.6% 0 0)",
+  neutral600: "oklch(43.9% 0 0)",
+  neutral700: "oklch(37.1% 0 0)",
+  neutral800: "oklch(26.9% 0 0)",
+  neutral900: "oklch(20.5% 0 0)",
+  neutral950: "oklch(14.5% 0 0)",
+  stone50: "oklch(98.5% 0.001 106.423)",
+  stone100: "oklch(97% 0.001 106.424)",
+  stone200: "oklch(92.3% 0.003 48.717)",
+  stone300: "oklch(86.9% 0.005 56.366)",
+  stone400: "oklch(70.9% 0.01 56.259)",
+  stone500: "oklch(55.3% 0.013 58.071)",
+  stone600: "oklch(44.4% 0.011 73.639)",
+  stone700: "oklch(37.4% 0.01 67.558)",
+  stone800: "oklch(26.8% 0.007 34.298)",
+  stone900: "oklch(21.6% 0.006 56.043)",
+  stone950: "oklch(14.7% 0.004 49.25)"
+};
+
+const colors$1 = {
+  black: "var(--color-black)",
+  white: "var(--color-white)",
+  red50: "var(--color-red-50)",
+  red100: "var(--color-red-100)",
+  red200: "var(--color-red-200)",
+  red300: "var(--color-red-300)",
+  red400: "var(--color-red-400)",
+  red500: "var(--color-red-500)",
+  red600: "var(--color-red-600)",
+  red700: "var(--color-red-700)",
+  red800: "var(--color-red-800)",
+  red900: "var(--color-red-900)",
+  red950: "var(--color-red-950)",
+  orange50: "var(--color-orange-50)",
+  orange100: "var(--color-orange-100)",
+  orange200: "var(--color-orange-200)",
+  orange300: "var(--color-orange-300)",
+  orange400: "var(--color-orange-400)",
+  orange500: "var(--color-orange-500)",
+  orange600: "var(--color-orange-600)",
+  orange700: "var(--color-orange-700)",
+  orange800: "var(--color-orange-800)",
+  orange900: "var(--color-orange-900)",
+  orange950: "var(--color-orange-950)",
+  amber50: "var(--color-amber-50)",
+  amber100: "var(--color-amber-100)",
+  amber200: "var(--color-amber-200)",
+  amber300: "var(--color-amber-300)",
+  amber400: "var(--color-amber-400)",
+  amber500: "var(--color-amber-500)",
+  amber600: "var(--color-amber-600)",
+  amber700: "var(--color-amber-700)",
+  amber800: "var(--color-amber-800)",
+  amber900: "var(--color-amber-900)",
+  amber950: "var(--color-amber-950)",
+  yellow50: "var(--color-yellow-50)",
+  yellow100: "var(--color-yellow-100)",
+  yellow200: "var(--color-yellow-200)",
+  yellow300: "var(--color-yellow-300)",
+  yellow400: "var(--color-yellow-400)",
+  yellow500: "var(--color-yellow-500)",
+  yellow600: "var(--color-yellow-600)",
+  yellow700: "var(--color-yellow-700)",
+  yellow800: "var(--color-yellow-800)",
+  yellow900: "var(--color-yellow-900)",
+  yellow950: "var(--color-yellow-950)",
+  lime50: "var(--color-lime-50)",
+  lime100: "var(--color-lime-100)",
+  lime200: "var(--color-lime-200)",
+  lime300: "var(--color-lime-300)",
+  lime400: "var(--color-lime-400)",
+  lime500: "var(--color-lime-500)",
+  lime600: "var(--color-lime-600)",
+  lime700: "var(--color-lime-700)",
+  lime800: "var(--color-lime-800)",
+  lime900: "var(--color-lime-900)",
+  lime950: "var(--color-lime-950)",
+  green50: "var(--color-green-50)",
+  green100: "var(--color-green-100)",
+  green200: "var(--color-green-200)",
+  green300: "var(--color-green-300)",
+  green400: "var(--color-green-400)",
+  green500: "var(--color-green-500)",
+  green600: "var(--color-green-600)",
+  green700: "var(--color-green-700)",
+  green800: "var(--color-green-800)",
+  green900: "var(--color-green-900)",
+  green950: "var(--color-green-950)",
+  emerald50: "var(--color-emerald-50)",
+  emerald100: "var(--color-emerald-100)",
+  emerald200: "var(--color-emerald-200)",
+  emerald300: "var(--color-emerald-300)",
+  emerald400: "var(--color-emerald-400)",
+  emerald500: "var(--color-emerald-500)",
+  emerald600: "var(--color-emerald-600)",
+  emerald700: "var(--color-emerald-700)",
+  emerald800: "var(--color-emerald-800)",
+  emerald900: "var(--color-emerald-900)",
+  emerald950: "var(--color-emerald-950)",
+  teal50: "var(--color-teal-50)",
+  teal100: "var(--color-teal-100)",
+  teal200: "var(--color-teal-200)",
+  teal300: "var(--color-teal-300)",
+  teal400: "var(--color-teal-400)",
+  teal500: "var(--color-teal-500)",
+  teal600: "var(--color-teal-600)",
+  teal700: "var(--color-teal-700)",
+  teal800: "var(--color-teal-800)",
+  teal900: "var(--color-teal-900)",
+  teal950: "var(--color-teal-950)",
+  cyan50: "var(--color-cyan-50)",
+  cyan100: "var(--color-cyan-100)",
+  cyan200: "var(--color-cyan-200)",
+  cyan300: "var(--color-cyan-300)",
+  cyan400: "var(--color-cyan-400)",
+  cyan500: "var(--color-cyan-500)",
+  cyan600: "var(--color-cyan-600)",
+  cyan700: "var(--color-cyan-700)",
+  cyan800: "var(--color-cyan-800)",
+  cyan900: "var(--color-cyan-900)",
+  cyan950: "var(--color-cyan-950)",
+  sky50: "var(--color-sky-50)",
+  sky100: "var(--color-sky-100)",
+  sky200: "var(--color-sky-200)",
+  sky300: "var(--color-sky-300)",
+  sky400: "var(--color-sky-400)",
+  sky500: "var(--color-sky-500)",
+  sky600: "var(--color-sky-600)",
+  sky700: "var(--color-sky-700)",
+  sky800: "var(--color-sky-800)",
+  sky900: "var(--color-sky-900)",
+  sky950: "var(--color-sky-950)",
+  blue50: "var(--color-blue-50)",
+  blue100: "var(--color-blue-100)",
+  blue200: "var(--color-blue-200)",
+  blue300: "var(--color-blue-300)",
+  blue400: "var(--color-blue-400)",
+  blue500: "var(--color-blue-500)",
+  blue600: "var(--color-blue-600)",
+  blue700: "var(--color-blue-700)",
+  blue800: "var(--color-blue-800)",
+  blue900: "var(--color-blue-900)",
+  blue950: "var(--color-blue-950)",
+  indigo50: "var(--color-indigo-50)",
+  indigo100: "var(--color-indigo-100)",
+  indigo200: "var(--color-indigo-200)",
+  indigo300: "var(--color-indigo-300)",
+  indigo400: "var(--color-indigo-400)",
+  indigo500: "var(--color-indigo-500)",
+  indigo600: "var(--color-indigo-600)",
+  indigo700: "var(--color-indigo-700)",
+  indigo800: "var(--color-indigo-800)",
+  indigo900: "var(--color-indigo-900)",
+  indigo950: "var(--color-indigo-950)",
+  violet50: "var(--color-violet-50)",
+  violet100: "var(--color-violet-100)",
+  violet200: "var(--color-violet-200)",
+  violet300: "var(--color-violet-300)",
+  violet400: "var(--color-violet-400)",
+  violet500: "var(--color-violet-500)",
+  violet600: "var(--color-violet-600)",
+  violet700: "var(--color-violet-700)",
+  violet800: "var(--color-violet-800)",
+  violet900: "var(--color-violet-900)",
+  violet950: "var(--color-violet-950)",
+  purple50: "var(--color-purple-50)",
+  purple100: "var(--color-purple-100)",
+  purple200: "var(--color-purple-200)",
+  purple300: "var(--color-purple-300)",
+  purple400: "var(--color-purple-400)",
+  purple500: "var(--color-purple-500)",
+  purple600: "var(--color-purple-600)",
+  purple700: "var(--color-purple-700)",
+  purple800: "var(--color-purple-800)",
+  purple900: "var(--color-purple-900)",
+  purple950: "var(--color-purple-950)",
+  fuchsia50: "var(--color-fuchsia-50)",
+  fuchsia100: "var(--color-fuchsia-100)",
+  fuchsia200: "var(--color-fuchsia-200)",
+  fuchsia300: "var(--color-fuchsia-300)",
+  fuchsia400: "var(--color-fuchsia-400)",
+  fuchsia500: "var(--color-fuchsia-500)",
+  fuchsia600: "var(--color-fuchsia-600)",
+  fuchsia700: "var(--color-fuchsia-700)",
+  fuchsia800: "var(--color-fuchsia-800)",
+  fuchsia900: "var(--color-fuchsia-900)",
+  fuchsia950: "var(--color-fuchsia-950)",
+  pink50: "var(--color-pink-50)",
+  pink100: "var(--color-pink-100)",
+  pink200: "var(--color-pink-200)",
+  pink300: "var(--color-pink-300)",
+  pink400: "var(--color-pink-400)",
+  pink500: "var(--color-pink-500)",
+  pink600: "var(--color-pink-600)",
+  pink700: "var(--color-pink-700)",
+  pink800: "var(--color-pink-800)",
+  pink900: "var(--color-pink-900)",
+  pink950: "var(--color-pink-950)",
+  rose50: "var(--color-rose-50)",
+  rose100: "var(--color-rose-100)",
+  rose200: "var(--color-rose-200)",
+  rose300: "var(--color-rose-300)",
+  rose400: "var(--color-rose-400)",
+  rose500: "var(--color-rose-500)",
+  rose600: "var(--color-rose-600)",
+  rose700: "var(--color-rose-700)",
+  rose800: "var(--color-rose-800)",
+  rose900: "var(--color-rose-900)",
+  rose950: "var(--color-rose-950)",
+  slate50: "var(--color-slate-50)",
+  slate100: "var(--color-slate-100)",
+  slate200: "var(--color-slate-200)",
+  slate300: "var(--color-slate-300)",
+  slate400: "var(--color-slate-400)",
+  slate500: "var(--color-slate-500)",
+  slate600: "var(--color-slate-600)",
+  slate700: "var(--color-slate-700)",
+  slate800: "var(--color-slate-800)",
+  slate900: "var(--color-slate-900)",
+  slate950: "var(--color-slate-950)",
+  gray50: "var(--color-gray-50)",
+  gray100: "var(--color-gray-100)",
+  gray200: "var(--color-gray-200)",
+  gray300: "var(--color-gray-300)",
+  gray400: "var(--color-gray-400)",
+  gray500: "var(--color-gray-500)",
+  gray600: "var(--color-gray-600)",
+  gray700: "var(--color-gray-700)",
+  gray800: "var(--color-gray-800)",
+  gray900: "var(--color-gray-900)",
+  gray950: "var(--color-gray-950)",
+  zinc50: "var(--color-zinc-50)",
+  zinc100: "var(--color-zinc-100)",
+  zinc200: "var(--color-zinc-200)",
+  zinc300: "var(--color-zinc-300)",
+  zinc400: "var(--color-zinc-400)",
+  zinc500: "var(--color-zinc-500)",
+  zinc600: "var(--color-zinc-600)",
+  zinc700: "var(--color-zinc-700)",
+  zinc800: "var(--color-zinc-800)",
+  zinc900: "var(--color-zinc-900)",
+  zinc950: "var(--color-zinc-950)",
+  neutral50: "var(--color-neutral-50)",
+  neutral100: "var(--color-neutral-100)",
+  neutral200: "var(--color-neutral-200)",
+  neutral300: "var(--color-neutral-300)",
+  neutral400: "var(--color-neutral-400)",
+  neutral500: "var(--color-neutral-500)",
+  neutral600: "var(--color-neutral-600)",
+  neutral700: "var(--color-neutral-700)",
+  neutral800: "var(--color-neutral-800)",
+  neutral900: "var(--color-neutral-900)",
+  neutral950: "var(--color-neutral-950)",
+  stone50: "var(--color-stone-50)",
+  stone100: "var(--color-stone-100)",
+  stone200: "var(--color-stone-200)",
+  stone300: "var(--color-stone-300)",
+  stone400: "var(--color-stone-400)",
+  stone500: "var(--color-stone-500)",
+  stone600: "var(--color-stone-600)",
+  stone700: "var(--color-stone-700)",
+  stone800: "var(--color-stone-800)",
+  stone900: "var(--color-stone-900)",
+  stone950: "var(--color-stone-950)"
+};
+
+const typography$2 = {
+  fontFamily: {
+    ui: 'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    monospace: "'Roboto Mono', monospace"
+  },
+  fontSize: {
+    ui: {
+      xs: "10px",
+      sm: "12px",
+      md: "14px",
+      lg: "18px"
+    },
+    monospace: {
+      xs: "10px",
+      sm: "12px",
+      md: "14px",
+      lg: "18px"
+    }
+  },
+  fontWeight: {
+    light: "300",
+    normal: "400",
+    medium: "500",
+    bold: "700"
+  }
+};
+
+const typography$1 = {
+  fontFamily: {
+    ui: "var(--typography-font-family-ui)",
+    monospace: "var(--typography-font-family-monospace)"
+  },
+  fontSize: {
+    ui: {
+      xs: "var(--typography-font-size-ui-xs)",
+      sm: "var(--typography-font-size-ui-sm)",
+      md: "var(--typography-font-size-ui-md)",
+      lg: "var(--typography-font-size-ui-lg)"
+    },
+    monospace: {
+      xs: "var(--typography-font-size-monospace-xs)",
+      sm: "var(--typography-font-size-monospace-sm)",
+      md: "var(--typography-font-size-monospace-md)",
+      lg: "var(--typography-font-size-monospace-lg)"
+    }
+  },
+  fontWeight: {
+    light: "var(--typography-font-weight-light)",
+    normal: "var(--typography-font-weight-normal)",
+    medium: "var(--typography-font-weight-medium)",
+    bold: "var(--typography-font-weight-bold)"
+  }
+};
+
+const spacing$2 = {
+  zero: "0",
+  xxs: "2px",
+  xs: "4px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "20px",
+  xxl: "24px",
+  xxxl: "32px",
+  huge: "40px"
+};
+
+const spacing$1 = {
+  zero: "var(--spacing-zero)",
+  xxs: "var(--spacing-xxs)",
+  xs: "var(--spacing-xs)",
+  sm: "var(--spacing-sm)",
+  md: "var(--spacing-md)",
+  lg: "var(--spacing-lg)",
+  xl: "var(--spacing-xl)",
+  xxl: "var(--spacing-xxl)",
+  xxxl: "var(--spacing-xxxl)",
+  huge: "var(--spacing-huge)"
+};
+
+const borderRadius$1 = {
+  sm: "4px",
+  md: "6px",
+  lg: "10px",
+  pill: "9999px",
+  circle: "100%"
+};
+
+const borderRadius = {
+  sm: "var(--border-radius-sm)",
+  md: "var(--border-radius-md)",
+  lg: "var(--border-radius-lg)",
+  pill: "var(--border-radius-pill)",
+  circle: "var(--border-radius-circle)"
+};
+
+const boxshadows$3 = {
+  z1: "0 1px 2px #000000",
+  z2: "0 4px 8px #000000",
+  z3: "0 8px 24px #000000"
+};
+
+const boxshadows$2 = {
+  z1: "var(--boxshadow-z1)",
+  z2: "var(--boxshadow-z2)",
+  z3: "var(--boxshadow-z3)"
+};
+
+const boxshadows$1 = {
+  z1: "0 1px 2px #181b1f",
+  z2: "0 4px 8px #181b1f",
+  z3: "0 8px 24px #181b1f"
+};
+
+const boxshadows = {
+  z1: "var(--boxshadow-z1)",
+  z2: "var(--boxshadow-z2)",
+  z3: "var(--boxshadow-z3)"
+};
+
+const LEGACY_COLORS = {
+  literal: {
+    light: lightColors$1,
+    dark: darkColors$1
+  },
+  css: {
+    light: lightColors,
+    dark: darkColors
+  }
+};
+const LEGACY_BORDER_RADIUS = {
+  literal: borderRadius$1,
+  css: borderRadius
+};
+const LEGACY_BOXSHADOWS = {
+  literal: {
+    light: boxshadows$1,
+    dark: boxshadows$3
+  },
+  css: {
+    light: boxshadows,
+    dark: boxshadows$2
+  }
+};
+const colors = {
+  literal: colors$2,
+  css: colors$1
+};
+const typography = {
+  literal: typography$2,
+  css: typography$1
+};
+const spacing = {
+  literal: spacing$2,
+  css: spacing$1
+};
+const DEFAULT_OPTIONS = {
+  mode: "light",
+  valueType: void 0
+};
+const getDesignTokens = ({
+  mode = "light",
+  valueType: _valueType = void 0
+} = DEFAULT_OPTIONS) => {
+  const legacyValueType = _valueType || "literal";
+  const valueType = _valueType || "css";
+  return {
+    legacy: {
+      palette: palette.legacy,
+      colors: LEGACY_COLORS[legacyValueType][mode],
+      borderRadius: LEGACY_BORDER_RADIUS[legacyValueType],
+      boxShadows: LEGACY_BOXSHADOWS[legacyValueType][mode]
+    },
+    primitives: {
+      colors: colors[valueType],
+      typography: typography[valueType],
+      spacing: spacing[valueType]
+    }
+  };
+};
+
+const THEME_COLOR_MODES = ["light", "dark"];
+
+/*
+
+Based off glamor's StyleSheet, thanks Sunil ❤️
+
+high performance StyleSheet for css-in-js systems
+
+- uses multiple style tags behind the scenes for millions of rules
+- uses `insertRule` for appending in production for *much* faster performance
+
+// usage
+
+import { StyleSheet } from '@emotion/sheet'
+
+let styleSheet = new StyleSheet({ key: '', container: document.head })
+
+styleSheet.insert('#box { border: 1px solid red; }')
+- appends a css rule into the stylesheet
+
+styleSheet.flush()
+- empties the stylesheet of all its contents
+
+*/
+
+function sheetForTag(tag) {
+  if (tag.sheet) {
+    return tag.sheet;
+  } // this weirdness brought to you by firefox
+
+  /* istanbul ignore next */
+
+
+  for (var i = 0; i < document.styleSheets.length; i++) {
+    if (document.styleSheets[i].ownerNode === tag) {
+      return document.styleSheets[i];
+    }
+  } // this function should always return with a value
+  // TS can't understand it though so we make it stop complaining here
+
+
+  return undefined;
+}
+
+function createStyleElement(options) {
+  var tag = document.createElement('style');
+  tag.setAttribute('data-emotion', options.key);
+
+  if (options.nonce !== undefined) {
+    tag.setAttribute('nonce', options.nonce);
+  }
+
+  tag.appendChild(document.createTextNode(''));
+  tag.setAttribute('data-s', '');
+  return tag;
+}
+
+var StyleSheet = /*#__PURE__*/function () {
+  // Using Node instead of HTMLElement since container may be a ShadowRoot
+  function StyleSheet(options) {
+    var _this = this;
+
+    this._insertTag = function (tag) {
+      var before;
+
+      if (_this.tags.length === 0) {
+        if (_this.insertionPoint) {
+          before = _this.insertionPoint.nextSibling;
+        } else if (_this.prepend) {
+          before = _this.container.firstChild;
+        } else {
+          before = _this.before;
+        }
+      } else {
+        before = _this.tags[_this.tags.length - 1].nextSibling;
+      }
+
+      _this.container.insertBefore(tag, before);
+
+      _this.tags.push(tag);
+    };
+
+    this.isSpeedy = options.speedy === undefined ? true : options.speedy;
+    this.tags = [];
+    this.ctr = 0;
+    this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
+
+    this.key = options.key;
+    this.container = options.container;
+    this.prepend = options.prepend;
+    this.insertionPoint = options.insertionPoint;
+    this.before = null;
+  }
+
+  var _proto = StyleSheet.prototype;
+
+  _proto.hydrate = function hydrate(nodes) {
+    nodes.forEach(this._insertTag);
+  };
+
+  _proto.insert = function insert(rule) {
+    // the max length is how many rules we have per style tag, it's 65000 in speedy mode
+    // it's 1 in dev because we insert source maps that map a single rule to a location
+    // and you can only have one source map per style tag
+    if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
+      this._insertTag(createStyleElement(this));
+    }
+
+    var tag = this.tags[this.tags.length - 1];
+
+    if (this.isSpeedy) {
+      var sheet = sheetForTag(tag);
+
+      try {
+        // this is the ultrafast version, works across browsers
+        // the big drawback is that the css won't be editable in devtools
+        sheet.insertRule(rule, sheet.cssRules.length);
+      } catch (e) {
+      }
+    } else {
+      tag.appendChild(document.createTextNode(rule));
+    }
+
+    this.ctr++;
+  };
+
+  _proto.flush = function flush() {
+    this.tags.forEach(function (tag) {
+      var _tag$parentNode;
+
+      return (_tag$parentNode = tag.parentNode) == null ? void 0 : _tag$parentNode.removeChild(tag);
+    });
+    this.tags = [];
+    this.ctr = 0;
+  };
+
+  return StyleSheet;
+}();
+
+var MS = '-ms-';
+var MOZ = '-moz-';
+var WEBKIT = '-webkit-';
+
+var COMMENT = 'comm';
+var RULESET = 'rule';
+var DECLARATION = 'decl';
+var IMPORT = '@import';
+var KEYFRAMES = '@keyframes';
+var LAYER = '@layer';
+
+/**
+ * @param {number}
+ * @return {number}
+ */
+var abs = Math.abs;
+
+/**
+ * @param {number}
+ * @return {string}
+ */
+var from = String.fromCharCode;
+
+/**
+ * @param {object}
+ * @return {object}
+ */
+var assign = Object.assign;
+
+/**
+ * @param {string} value
+ * @param {number} length
+ * @return {number}
+ */
+function hash (value, length) {
+	return charat(value, 0) ^ 45 ? (((((((length << 2) ^ charat(value, 0)) << 2) ^ charat(value, 1)) << 2) ^ charat(value, 2)) << 2) ^ charat(value, 3) : 0
+}
+
+/**
+ * @param {string} value
+ * @return {string}
+ */
+function trim (value) {
+	return value.trim()
+}
+
+/**
+ * @param {string} value
+ * @param {RegExp} pattern
+ * @return {string?}
+ */
+function match (value, pattern) {
+	return (value = pattern.exec(value)) ? value[0] : value
+}
+
+/**
+ * @param {string} value
+ * @param {(string|RegExp)} pattern
+ * @param {string} replacement
+ * @return {string}
+ */
+function replace (value, pattern, replacement) {
+	return value.replace(pattern, replacement)
+}
+
+/**
+ * @param {string} value
+ * @param {string} search
+ * @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('')
+}
+
+var line = 1;
+var column = 1;
+var length = 0;
+var position = 0;
+var character = 0;
+var characters = '';
+
+/**
+ * @param {string} value
+ * @param {object | null} root
+ * @param {object | null} parent
+ * @param {string} type
+ * @param {string[] | string} props
+ * @param {object[] | string} children
+ * @param {number} length
+ */
+function node (value, root, parent, type, props, children, length) {
+	return {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''}
+}
+
+/**
+ * @param {object} root
+ * @param {object} props
+ * @return {object}
+ */
+function copy (root, props) {
+	return assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)
+}
+
+/**
+ * @return {number}
+ */
+function char () {
+	return character
+}
+
+/**
+ * @return {number}
+ */
+function prev () {
+	character = position > 0 ? charat(characters, --position) : 0;
+
+	if (column--, character === 10)
+		column = 1, line--;
+
+	return character
+}
+
+/**
+ * @return {number}
+ */
+function next () {
+	character = position < length ? charat(characters, position++) : 0;
+
+	if (column++, character === 10)
+		column = 1, line++;
+
+	return character
+}
+
+/**
+ * @return {number}
+ */
+function peek () {
+	return charat(characters, position)
+}
+
+/**
+ * @return {number}
+ */
+function caret () {
+	return position
+}
+
+/**
+ * @param {number} begin
+ * @param {number} end
+ * @return {string}
+ */
+function slice (begin, end) {
+	return substr(characters, begin, end)
+}
+
+/**
+ * @param {number} type
+ * @return {number}
+ */
+function token (type) {
+	switch (type) {
+		// \0 \t \n \r \s whitespace token
+		case 0: case 9: case 10: case 13: case 32:
+			return 5
+		// ! + , / > @ ~ isolate token
+		case 33: case 43: case 44: case 47: case 62: case 64: case 126:
+		// ; { } breakpoint token
+		case 59: case 123: case 125:
+			return 4
+		// : accompanied token
+		case 58:
+			return 3
+		// " ' ( [ opening delimit token
+		case 34: case 39: case 40: case 91:
+			return 2
+		// ) ] closing delimit token
+		case 41: case 93:
+			return 1
+	}
+
+	return 0
+}
+
+/**
+ * @param {string} value
+ * @return {any[]}
+ */
+function alloc (value) {
+	return line = column = 1, length = strlen(characters = value), position = 0, []
+}
+
+/**
+ * @param {any} value
+ * @return {any}
+ */
+function dealloc (value) {
+	return characters = '', value
+}
+
+/**
+ * @param {number} type
+ * @return {string}
+ */
+function delimit (type) {
+	return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
+}
+
+/**
+ * @param {number} type
+ * @return {string}
+ */
+function whitespace (type) {
+	while (character = peek())
+		if (character < 33)
+			next();
+		else
+			break
+
+	return token(type) > 2 || token(character) > 3 ? '' : ' '
+}
+
+/**
+ * @param {number} index
+ * @param {number} count
+ * @return {string}
+ */
+function escaping (index, count) {
+	while (--count && next())
+		// not 0-9 A-F a-f
+		if (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97))
+			break
+
+	return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32))
+}
+
+/**
+ * @param {number} type
+ * @return {number}
+ */
+function delimiter (type) {
+	while (next())
+		switch (character) {
+			// ] ) " '
+			case type:
+				return position
+			// " '
+			case 34: case 39:
+				if (type !== 34 && type !== 39)
+					delimiter(character);
+				break
+			// (
+			case 40:
+				if (type === 41)
+					delimiter(type);
+				break
+			// \
+			case 92:
+				next();
+				break
+		}
+
+	return position
+}
+
+/**
+ * @param {number} type
+ * @param {number} index
+ * @return {number}
+ */
+function commenter (type, index) {
+	while (next())
+		// //
+		if (type + character === 47 + 10)
+			break
+		// /*
+		else if (type + character === 42 + 42 && peek() === 47)
+			break
+
+	return '/*' + slice(index, position - 1) + '*' + from(type === 47 ? type : next())
+}
+
+/**
+ * @param {number} index
+ * @return {string}
+ */
+function identifier (index) {
+	while (!token(peek()))
+		next();
+
+	return slice(index, position)
+}
+
+/**
+ * @param {string} value
+ * @return {object[]}
+ */
+function compile (value) {
+	return dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value))
+}
+
+/**
+ * @param {string} value
+ * @param {object} root
+ * @param {object?} parent
+ * @param {string[]} rule
+ * @param {string[]} rules
+ * @param {string[]} rulesets
+ * @param {number[]} pseudo
+ * @param {number[]} points
+ * @param {string[]} declarations
+ * @return {object}
+ */
+function parse (value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
+	var index = 0;
+	var offset = 0;
+	var length = pseudo;
+	var atrule = 0;
+	var property = 0;
+	var previous = 0;
+	var variable = 1;
+	var scanning = 1;
+	var ampersand = 1;
+	var character = 0;
+	var type = '';
+	var props = rules;
+	var children = rulesets;
+	var reference = rule;
+	var characters = type;
+
+	while (scanning)
+		switch (previous = character, character = next()) {
+			// (
+			case 40:
+				if (previous != 108 && charat(characters, length - 1) == 58) {
+					if (indexof(characters += replace(delimit(character), '&', '&\f'), '&\f') != -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);
+						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) : declaration(replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations);
+						break
+					// @ ;
+					case 59: characters += ';';
+					// { rule/at-rule
+					default:
+						append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), 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), 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
+ * @return {object}
+ */
+function ruleset (value, root, parent, index, offset, rules, points, type, props, children, length) {
+	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)
+}
+
+/**
+ * @param {number} value
+ * @param {object} root
+ * @param {object?} parent
+ * @return {object}
+ */
+function comment (value, root, parent) {
+	return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0)
+}
+
+/**
+ * @param {string} value
+ * @param {object} root
+ * @param {object?} parent
+ * @param {number} length
+ * @return {object}
+ */
+function declaration (value, root, parent, length) {
+	return node(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length)
+}
+
+/**
+ * @param {object[]} children
+ * @param {function} callback
+ * @return {string}
+ */
+function serialize (children, callback) {
+	var output = '';
+	var length = sizeof(children);
+
+	for (var i = 0; i < 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: element.value = element.props.join(',');
+	}
+
+	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);
+	}
+}
+
+var weakMemoize = function weakMemoize(func) {
+  var cache = new WeakMap();
+  return function (arg) {
+    if (cache.has(arg)) {
+      // Use non-null assertion because we just checked that the cache `has` it
+      // This allows us to remove `undefined` from the return value
+      return cache.get(arg);
+    }
+
+    var ret = func(arg);
+    cache.set(arg, ret);
+    return ret;
+  };
+};
+
+function memoize(fn) {
+  var cache = Object.create(null);
+  return function (arg) {
+    if (cache[arg] === undefined) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+var isBrowser$3 = typeof document !== 'undefined';
+
+var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
+  var previous = 0;
+  var character = 0;
+
+  while (true) {
+    previous = character;
+    character = peek(); // &\f
+
+    if (previous === 38 && character === 12) {
+      points[index] = 1;
+    }
+
+    if (token(character)) {
+      break;
+    }
+
+    next();
+  }
+
+  return slice(begin, position);
+};
+
+var toRules = function toRules(parsed, points) {
+  // pretend we've started with a comma
+  var index = -1;
+  var character = 44;
+
+  do {
+    switch (token(character)) {
+      case 0:
+        // &\f
+        if (character === 38 && peek() === 12) {
+          // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
+          // stylis inserts \f after & to know when & where it should replace this sequence with the context selector
+          // and when it should just concatenate the outer and inner selectors
+          // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
+          points[index] = 1;
+        }
+
+        parsed[index] += identifierWithPointTracking(position - 1, points, index);
+        break;
+
+      case 2:
+        parsed[index] += delimit(character);
+        break;
+
+      case 4:
+        // comma
+        if (character === 44) {
+          // colon
+          parsed[++index] = peek() === 58 ? '&\f' : '';
+          points[index] = parsed[index].length;
+          break;
+        }
+
+      // fallthrough
+
+      default:
+        parsed[index] += from(character);
+    }
+  } while (character = next());
+
+  return parsed;
+};
+
+var getRules = function getRules(value, points) {
+  return dealloc(toRules(alloc(value), points));
+}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
+
+
+var fixedElements = /* #__PURE__ */new WeakMap();
+var compat = function compat(element) {
+  if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo
+  // negative .length indicates that this rule has been already prefixed
+  element.length < 1) {
+    return;
+  }
+
+  var value = element.value;
+  var parent = element.parent;
+  var isImplicitRule = element.column === parent.column && element.line === parent.line;
+
+  while (parent.type !== 'rule') {
+    parent = parent.parent;
+    if (!parent) return;
+  } // short-circuit for the simplest case
+
+
+  if (element.props.length === 1 && value.charCodeAt(0) !== 58
+  /* colon */
+  && !fixedElements.get(parent)) {
+    return;
+  } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
+  // then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
+
+
+  if (isImplicitRule) {
+    return;
+  }
+
+  fixedElements.set(element, true);
+  var points = [];
+  var rules = getRules(value, points);
+  var parentRules = parent.props;
+
+  for (var i = 0, k = 0; i < rules.length; i++) {
+    for (var j = 0; j < parentRules.length; j++, k++) {
+      element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
+    }
+  }
+};
+var removeLabel = function removeLabel(element) {
+  if (element.type === 'decl') {
+    var value = element.value;
+
+    if ( // charcode for l
+    value.charCodeAt(0) === 108 && // charcode for b
+    value.charCodeAt(2) === 98) {
+      // this ignores label
+      element["return"] = '';
+      element.value = '';
+    }
+  }
+};
+
+/* eslint-disable no-fallthrough */
+
+function prefix(value, length) {
+  switch (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;
+    // 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;
+    // flex, flex-direction
+
+    case 6828:
+    case 4268:
+      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/, '') + value;
+    // align-content
+
+    case 4675:
+      return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/, '') + 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;
+    // (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) + value : value;
+      }
+      break;
+    // position: sticky
+
+    case 4949:
+      // (s)ticky?
+      if (charat(value, length + 1) !== 115) break;
+    // display: (flex|inline-flex)
+
+    case 6444:
+      switch (charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))) {
+        // stic(k)y
+        case 107:
+          return replace(value, ':', ':' + WEBKIT) + value;
+        // (inline-)?fl(e)x
+
+        case 101:
+          return replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value;
+      }
+
+      break;
+    // 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;
+      }
+
+      return WEBKIT + value + MS + value + value;
+  }
+
+  return value;
+}
+
+var prefixer = 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);
+      break;
+
+    case KEYFRAMES:
+      return serialize([copy(element, {
+        value: replace(element.value, '@', '@' + WEBKIT)
+      })], callback);
+
+    case RULESET:
+      if (element.length) return combine(element.props, function (value) {
+        switch (match(value, /(::plac\w+|:read-\w+)/)) {
+          // :read-(only|write)
+          case ':read-only':
+          case ':read-write':
+            return serialize([copy(element, {
+              props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
+            })], callback);
+          // :placeholder
+
+          case '::placeholder':
+            return serialize([copy(element, {
+              props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]
+            }), copy(element, {
+              props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
+            }), copy(element, {
+              props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
+            })], callback);
+        }
+
+        return '';
+      });
+  }
+};
+
+var getServerStylisCache = isBrowser$3 ? undefined : weakMemoize(function () {
+  return memoize(function () {
+    return {};
+  });
+});
+var defaultStylisPlugins = [prefixer];
+
+var createCache = function createCache(options) {
+  var key = options.key;
+
+  if (isBrowser$3 && key === 'css') {
+    var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
+    // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
+    // note this very very intentionally targets all style elements regardless of the key to ensure
+    // that creating a cache works inside of render of a React component
+
+    Array.prototype.forEach.call(ssrStyles, function (node) {
+      // we want to only move elements which have a space in the data-emotion attribute value
+      // because that indicates that it is an Emotion 11 server-side rendered style elements
+      // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
+      // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
+      // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
+      // will not result in the Emotion 10 styles being destroyed
+      var dataEmotionAttribute = node.getAttribute('data-emotion');
+
+      if (dataEmotionAttribute.indexOf(' ') === -1) {
+        return;
+      }
+
+      document.head.appendChild(node);
+      node.setAttribute('data-s', '');
+    });
+  }
+
+  var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
+
+  var inserted = {};
+  var container;
+  var nodesToHydrate = [];
+
+  if (isBrowser$3) {
+    container = options.container || document.head;
+    Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
+    // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
+    document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
+      var attrib = node.getAttribute("data-emotion").split(' ');
+
+      for (var i = 1; i < attrib.length; i++) {
+        inserted[attrib[i]] = true;
+      }
+
+      nodesToHydrate.push(node);
+    });
+  }
+
+  var _insert;
+
+  var omnipresentPlugins = [compat, removeLabel];
+
+  if (!getServerStylisCache) {
+    var currentSheet;
+    var finalizingPlugins = [stringify, rulesheet(function (rule) {
+      currentSheet.insert(rule);
+    })];
+    var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
+
+    var stylis = function stylis(styles) {
+      return serialize(compile(styles), serializer);
+    };
+
+    _insert = function insert(selector, serialized, sheet, shouldCache) {
+      currentSheet = sheet;
+
+      stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+
+      if (shouldCache) {
+        cache.inserted[serialized.name] = true;
+      }
+    };
+  } else {
+    var _finalizingPlugins = [stringify];
+
+    var _serializer = middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
+
+    var _stylis = function _stylis(styles) {
+      return serialize(compile(styles), _serializer);
+    };
+
+    var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
+
+    var getRules = function getRules(selector, serialized) {
+      var name = serialized.name;
+
+      if (serverStylisCache[name] === undefined) {
+        serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+      }
+
+      return serverStylisCache[name];
+    };
+
+    _insert = function _insert(selector, serialized, sheet, shouldCache) {
+      var name = serialized.name;
+      var rules = getRules(selector, serialized);
+
+      if (cache.compat === undefined) {
+        // in regular mode, we don't set the styles on the inserted cache
+        // since we don't need to and that would be wasting memory
+        // we return them so that they are rendered in a style tag
+        if (shouldCache) {
+          cache.inserted[name] = true;
+        }
+
+        return rules;
+      } else {
+        // in compat mode, we put the styles on the inserted cache so
+        // that emotion-server can pull out the styles
+        // except when we don't want to cache it which was in Global but now
+        // is nowhere but we don't want to do a major right now
+        // and just in case we're going to leave the case here
+        // it's also not affecting client side bundle size
+        // so it's really not a big deal
+        if (shouldCache) {
+          cache.inserted[name] = rules;
+        } else {
+          return rules;
+        }
+      }
+    };
+  }
+
+  var cache = {
+    key: key,
+    sheet: new StyleSheet({
+      key: key,
+      container: container,
+      nonce: options.nonce,
+      speedy: options.speedy,
+      prepend: options.prepend,
+      insertionPoint: options.insertionPoint
+    }),
+    nonce: options.nonce,
+    inserted: inserted,
+    registered: {},
+    insert: _insert
+  };
+  cache.sheet.hydrate(nodesToHydrate);
+  return cache;
+};
+
+var reactIs = {exports: {}};
+
+var reactIs_production_min = {};
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_production_min;
+
+function requireReactIs_production_min () {
+	if (hasRequiredReactIs_production_min) return reactIs_production_min;
+	hasRequiredReactIs_production_min = 1;
+var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
+	Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
+	function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
+	reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t};
+	reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p};
+	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z;
+	return reactIs_production_min;
+}
+
+var reactIs_development = {};
+
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_development;
+
+function requireReactIs_development () {
+	if (hasRequiredReactIs_development) return reactIs_development;
+	hasRequiredReactIs_development = 1;
+
+
+
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
+
+	// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+	// nor polyfill, then a plain number is used for performance.
+	var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+	var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+	var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+	var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+	var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+	var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+	var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+	var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+	// (unstable) APIs that have been removed. Can we remove the symbols?
+
+	var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+	var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+	var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+	var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+	var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+	var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+	var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+	var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+	var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+	var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+	var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+
+	function isValidElementType(type) {
+	  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+	  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+	}
+
+	function typeOf(object) {
+	  if (typeof object === 'object' && object !== null) {
+	    var $$typeof = object.$$typeof;
+
+	    switch ($$typeof) {
+	      case REACT_ELEMENT_TYPE:
+	        var type = object.type;
+
+	        switch (type) {
+	          case REACT_ASYNC_MODE_TYPE:
+	          case REACT_CONCURRENT_MODE_TYPE:
+	          case REACT_FRAGMENT_TYPE:
+	          case REACT_PROFILER_TYPE:
+	          case REACT_STRICT_MODE_TYPE:
+	          case REACT_SUSPENSE_TYPE:
+	            return type;
+
+	          default:
+	            var $$typeofType = type && type.$$typeof;
+
+	            switch ($$typeofType) {
+	              case REACT_CONTEXT_TYPE:
+	              case REACT_FORWARD_REF_TYPE:
+	              case REACT_LAZY_TYPE:
+	              case REACT_MEMO_TYPE:
+	              case REACT_PROVIDER_TYPE:
+	                return $$typeofType;
+
+	              default:
+	                return $$typeof;
+	            }
+
+	        }
+
+	      case REACT_PORTAL_TYPE:
+	        return $$typeof;
+	    }
+	  }
+
+	  return undefined;
+	} // AsyncMode is deprecated along with isAsyncMode
+
+	var AsyncMode = REACT_ASYNC_MODE_TYPE;
+	var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+	var ContextConsumer = REACT_CONTEXT_TYPE;
+	var ContextProvider = REACT_PROVIDER_TYPE;
+	var Element = REACT_ELEMENT_TYPE;
+	var ForwardRef = REACT_FORWARD_REF_TYPE;
+	var Fragment = REACT_FRAGMENT_TYPE;
+	var Lazy = REACT_LAZY_TYPE;
+	var Memo = REACT_MEMO_TYPE;
+	var Portal = REACT_PORTAL_TYPE;
+	var Profiler = REACT_PROFILER_TYPE;
+	var StrictMode = REACT_STRICT_MODE_TYPE;
+	var Suspense = REACT_SUSPENSE_TYPE;
+	var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+
+	function isAsyncMode(object) {
+	  {
+	    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+	      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+	      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+	    }
+	  }
+
+	  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+	}
+	function isConcurrentMode(object) {
+	  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+	}
+	function isContextConsumer(object) {
+	  return typeOf(object) === REACT_CONTEXT_TYPE;
+	}
+	function isContextProvider(object) {
+	  return typeOf(object) === REACT_PROVIDER_TYPE;
+	}
+	function isElement(object) {
+	  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+	}
+	function isForwardRef(object) {
+	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+	}
+	function isFragment(object) {
+	  return typeOf(object) === REACT_FRAGMENT_TYPE;
+	}
+	function isLazy(object) {
+	  return typeOf(object) === REACT_LAZY_TYPE;
+	}
+	function isMemo(object) {
+	  return typeOf(object) === REACT_MEMO_TYPE;
+	}
+	function isPortal(object) {
+	  return typeOf(object) === REACT_PORTAL_TYPE;
+	}
+	function isProfiler(object) {
+	  return typeOf(object) === REACT_PROFILER_TYPE;
+	}
+	function isStrictMode(object) {
+	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+	}
+	function isSuspense(object) {
+	  return typeOf(object) === REACT_SUSPENSE_TYPE;
+	}
+
+	reactIs_development.AsyncMode = AsyncMode;
+	reactIs_development.ConcurrentMode = ConcurrentMode;
+	reactIs_development.ContextConsumer = ContextConsumer;
+	reactIs_development.ContextProvider = ContextProvider;
+	reactIs_development.Element = Element;
+	reactIs_development.ForwardRef = ForwardRef;
+	reactIs_development.Fragment = Fragment;
+	reactIs_development.Lazy = Lazy;
+	reactIs_development.Memo = Memo;
+	reactIs_development.Portal = Portal;
+	reactIs_development.Profiler = Profiler;
+	reactIs_development.StrictMode = StrictMode;
+	reactIs_development.Suspense = Suspense;
+	reactIs_development.isAsyncMode = isAsyncMode;
+	reactIs_development.isConcurrentMode = isConcurrentMode;
+	reactIs_development.isContextConsumer = isContextConsumer;
+	reactIs_development.isContextProvider = isContextProvider;
+	reactIs_development.isElement = isElement;
+	reactIs_development.isForwardRef = isForwardRef;
+	reactIs_development.isFragment = isFragment;
+	reactIs_development.isLazy = isLazy;
+	reactIs_development.isMemo = isMemo;
+	reactIs_development.isPortal = isPortal;
+	reactIs_development.isProfiler = isProfiler;
+	reactIs_development.isStrictMode = isStrictMode;
+	reactIs_development.isSuspense = isSuspense;
+	reactIs_development.isValidElementType = isValidElementType;
+	reactIs_development.typeOf = typeOf;
+	  })();
+	}
+	return reactIs_development;
+}
+
+var hasRequiredReactIs;
+
+function requireReactIs () {
+	if (hasRequiredReactIs) return reactIs.exports;
+	hasRequiredReactIs = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  reactIs.exports = requireReactIs_production_min();
+	} else {
+	  reactIs.exports = requireReactIs_development();
+	}
+	return reactIs.exports;
+}
+
+var hoistNonReactStatics_cjs;
+var hasRequiredHoistNonReactStatics_cjs;
+
+function requireHoistNonReactStatics_cjs () {
+	if (hasRequiredHoistNonReactStatics_cjs) return hoistNonReactStatics_cjs;
+	hasRequiredHoistNonReactStatics_cjs = 1;
+
+	var reactIs = requireReactIs();
+
+	/**
+	 * Copyright 2015, Yahoo! Inc.
+	 * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
+	 */
+	var REACT_STATICS = {
+	  childContextTypes: true,
+	  contextType: true,
+	  contextTypes: true,
+	  defaultProps: true,
+	  displayName: true,
+	  getDefaultProps: true,
+	  getDerivedStateFromError: true,
+	  getDerivedStateFromProps: true,
+	  mixins: true,
+	  propTypes: true,
+	  type: true
+	};
+	var KNOWN_STATICS = {
+	  name: true,
+	  length: true,
+	  prototype: true,
+	  caller: true,
+	  callee: true,
+	  arguments: true,
+	  arity: true
+	};
+	var FORWARD_REF_STATICS = {
+	  '$$typeof': true,
+	  render: true,
+	  defaultProps: true,
+	  displayName: true,
+	  propTypes: true
+	};
+	var MEMO_STATICS = {
+	  '$$typeof': true,
+	  compare: true,
+	  defaultProps: true,
+	  displayName: true,
+	  propTypes: true,
+	  type: true
+	};
+	var TYPE_STATICS = {};
+	TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
+	TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
+
+	function getStatics(component) {
+	  // React v16.11 and below
+	  if (reactIs.isMemo(component)) {
+	    return MEMO_STATICS;
+	  } // React v16.12 and above
+
+
+	  return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
+	}
+
+	var defineProperty = Object.defineProperty;
+	var getOwnPropertyNames = Object.getOwnPropertyNames;
+	var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+	var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+	var getPrototypeOf = Object.getPrototypeOf;
+	var objectPrototype = Object.prototype;
+	function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
+	  if (typeof sourceComponent !== 'string') {
+	    // don't hoist over string (html) components
+	    if (objectPrototype) {
+	      var inheritedComponent = getPrototypeOf(sourceComponent);
+
+	      if (inheritedComponent && inheritedComponent !== objectPrototype) {
+	        hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
+	      }
+	    }
+
+	    var keys = getOwnPropertyNames(sourceComponent);
+
+	    if (getOwnPropertySymbols) {
+	      keys = keys.concat(getOwnPropertySymbols(sourceComponent));
+	    }
+
+	    var targetStatics = getStatics(targetComponent);
+	    var sourceStatics = getStatics(sourceComponent);
+
+	    for (var i = 0; i < keys.length; ++i) {
+	      var key = keys[i];
+
+	      if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
+	        var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
+
+	        try {
+	          // Avoid failures from read-only properties
+	          defineProperty(targetComponent, key, descriptor);
+	        } catch (e) {}
+	      }
+	    }
+	  }
+
+	  return targetComponent;
+	}
+
+	hoistNonReactStatics_cjs = hoistNonReactStatics;
+	return hoistNonReactStatics_cjs;
+}
+
+requireHoistNonReactStatics_cjs();
+
+var isBrowser$2 = typeof document !== 'undefined';
+
+function getRegisteredStyles(registered, registeredStyles, classNames) {
+  var rawClassName = '';
+  classNames.split(' ').forEach(function (className) {
+    if (registered[className] !== undefined) {
+      registeredStyles.push(registered[className] + ";");
+    } else if (className) {
+      rawClassName += className + " ";
+    }
+  });
+  return rawClassName;
+}
+var registerStyles = function registerStyles(cache, serialized, isStringTag) {
+  var className = cache.key + "-" + serialized.name;
+
+  if ( // we only need to add the styles to the registered cache if the
+  // class name could be used further down
+  // the tree but if it's a string tag, we know it won't
+  // so we don't have to add it to registered cache.
+  // this improves memory usage since we can avoid storing the whole style string
+  (isStringTag === false || // we need to always store it if we're in compat mode and
+  // in node since emotion-server relies on whether a style is in
+  // the registered cache to know whether a style is global or not
+  // also, note that this check will be dead code eliminated in the browser
+  isBrowser$2 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+    cache.registered[className] = serialized.styles;
+  }
+};
+var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+  registerStyles(cache, serialized, isStringTag);
+  var className = cache.key + "-" + serialized.name;
+
+  if (cache.inserted[serialized.name] === undefined) {
+    var stylesForSSR = '';
+    var current = serialized;
+
+    do {
+      var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
+
+      if (!isBrowser$2 && maybeStyles !== undefined) {
+        stylesForSSR += maybeStyles;
+      }
+
+      current = current.next;
+    } while (current !== undefined);
+
+    if (!isBrowser$2 && stylesForSSR.length !== 0) {
+      return stylesForSSR;
+    }
+  }
+};
+
+/* eslint-disable */
+// Inspired by https://github.com/garycourt/murmurhash-js
+// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
+function murmur2(str) {
+  // 'm' and 'r' are mixing constants generated offline.
+  // They're not really 'magic', they just happen to work well.
+  // const m = 0x5bd1e995;
+  // const r = 24;
+  // Initialize the hash
+  var h = 0; // Mix 4 bytes at a time into the hash
+
+  var k,
+      i = 0,
+      len = str.length;
+
+  for (; len >= 4; ++i, len -= 4) {
+    k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
+    k =
+    /* Math.imul(k, m): */
+    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
+    k ^=
+    /* k >>> r: */
+    k >>> 24;
+    h =
+    /* Math.imul(k, m): */
+    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^
+    /* Math.imul(h, m): */
+    (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  } // Handle the last few bytes of the input array
+
+
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+
+    case 1:
+      h ^= str.charCodeAt(i) & 0xff;
+      h =
+      /* Math.imul(h, m): */
+      (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  } // Do a few final mixes of the hash to ensure the last few
+  // bytes are well-incorporated.
+
+
+  h ^= h >>> 13;
+  h =
+  /* Math.imul(h, m): */
+  (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  return ((h ^ h >>> 15) >>> 0).toString(36);
+}
+
+var unitlessKeys = {
+  animationIterationCount: 1,
+  aspectRatio: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  scale: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+
+var hyphenateRegex = /[A-Z]|^ms/g;
+var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+
+var isCustomProperty = function isCustomProperty(property) {
+  return property.charCodeAt(1) === 45;
+};
+
+var isProcessableValue = function isProcessableValue(value) {
+  return value != null && typeof value !== 'boolean';
+};
+
+var processStyleName = /* #__PURE__ */memoize(function (styleName) {
+  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
+});
+
+var processStyleValue = function processStyleValue(key, value) {
+  switch (key) {
+    case 'animation':
+    case 'animationName':
+      {
+        if (typeof value === 'string') {
+          return value.replace(animationRegex, function (match, p1, p2) {
+            cursor = {
+              name: p1,
+              styles: p2,
+              next: cursor
+            };
+            return p1;
+          });
+        }
+      }
+  }
+
+  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
+    return value + 'px';
+  }
+
+  return value;
+};
+
+function handleInterpolation(mergedProps, registered, interpolation) {
+  if (interpolation == null) {
+    return '';
+  }
+
+  var componentSelector = interpolation;
+
+  if (componentSelector.__emotion_styles !== undefined) {
+
+    return componentSelector;
+  }
+
+  switch (typeof interpolation) {
+    case 'boolean':
+      {
+        return '';
+      }
+
+    case 'object':
+      {
+        var keyframes = interpolation;
+
+        if (keyframes.anim === 1) {
+          cursor = {
+            name: keyframes.name,
+            styles: keyframes.styles,
+            next: cursor
+          };
+          return keyframes.name;
+        }
+
+        var serializedStyles = interpolation;
+
+        if (serializedStyles.styles !== undefined) {
+          var next = serializedStyles.next;
+
+          if (next !== undefined) {
+            // not the most efficient thing ever but this is a pretty rare case
+            // and there will be very few iterations of this generally
+            while (next !== undefined) {
+              cursor = {
+                name: next.name,
+                styles: next.styles,
+                next: cursor
+              };
+              next = next.next;
+            }
+          }
+
+          var styles = serializedStyles.styles + ";";
+          return styles;
+        }
+
+        return createStringFromObject(mergedProps, registered, interpolation);
+      }
+
+    case 'function':
+      {
+        if (mergedProps !== undefined) {
+          var previousCursor = cursor;
+          var result = interpolation(mergedProps);
+          cursor = previousCursor;
+          return handleInterpolation(mergedProps, registered, result);
+        }
+
+        break;
+      }
+  } // finalize string values (regular strings and functions interpolated into css calls)
+
+
+  var asString = interpolation;
+
+  {
+    return asString;
+  }
+}
+
+function createStringFromObject(mergedProps, registered, obj) {
+  var string = '';
+
+  if (Array.isArray(obj)) {
+    for (var i = 0; i < obj.length; i++) {
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
+    }
+  } else {
+    for (var key in obj) {
+      var value = obj[key];
+
+      if (typeof value !== 'object') {
+        var asString = value;
+
+        if (isProcessableValue(asString)) {
+          string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
+        }
+      } else {
+
+        if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null)) {
+          for (var _i = 0; _i < value.length; _i++) {
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
+            }
+          }
+        } else {
+          var interpolated = handleInterpolation(mergedProps, registered, value);
+
+          switch (key) {
+            case 'animation':
+            case 'animationName':
+              {
+                string += processStyleName(key) + ":" + interpolated + ";";
+                break;
+              }
+
+            default:
+              {
+
+                string += key + "{" + interpolated + "}";
+              }
+          }
+        }
+      }
+    }
+  }
+
+  return string;
+}
+
+var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g; // this is the cursor for keyframes
+// keyframes are stored on the SerializedStyles object as a linked list
+
+var cursor;
+function serializeStyles(args, registered, mergedProps) {
+  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
+    return args[0];
+  }
+
+  var stringMode = true;
+  var styles = '';
+  cursor = undefined;
+  var strings = args[0];
+
+  if (strings == null || strings.raw === undefined) {
+    stringMode = false;
+    styles += handleInterpolation(mergedProps, registered, strings);
+  } else {
+    var asTemplateStringsArr = strings;
+
+    styles += asTemplateStringsArr[0];
+  } // we start at 1 since we've already handled the first arg
+
+
+  for (var i = 1; i < args.length; i++) {
+    styles += handleInterpolation(mergedProps, registered, args[i]);
+
+    if (stringMode) {
+      var templateStringsArr = strings;
+
+      styles += templateStringsArr[i];
+    }
+  } // using a global regex with .exec is stateful so lastIndex has to be reset each time
+
+
+  labelPattern.lastIndex = 0;
+  var identifierName = '';
+  var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
+
+  while ((match = labelPattern.exec(styles)) !== null) {
+    identifierName += '-' + match[1];
+  }
+
+  var name = murmur2(styles) + identifierName;
+
+  return {
+    name: name,
+    styles: styles,
+    next: cursor
+  };
+}
+
+var isBrowser$1 = typeof document !== 'undefined';
+
+var syncFallback = function syncFallback(create) {
+  return create();
+};
+
+var useInsertionEffect = React__namespace['useInsertion' + 'Effect'] ? React__namespace['useInsertion' + 'Effect'] : false;
+var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$1 ? syncFallback : useInsertionEffect || syncFallback;
+var useInsertionEffectWithLayoutFallback = useInsertionEffect || React__namespace.useLayoutEffect;
+
+var isBrowser = typeof document !== 'undefined';
+
+var EmotionCacheContext = /* #__PURE__ */React__namespace.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
+// because this module is primarily intended for the browser and node
+// but it's also required in react native and similar environments sometimes
+// and we could have a special build just for that
+// but this is much easier and the native packages
+// might use a different theme context in the future anyway
+typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
+  key: 'css'
+}) : null);
+
+EmotionCacheContext.Provider;
+
+var withEmotionCache = function withEmotionCache(func) {
+  return /*#__PURE__*/React.forwardRef(function (props, ref) {
+    // the cache will never be null in the browser
+    var cache = React.useContext(EmotionCacheContext);
+    return func(props, cache, ref);
+  });
+};
+
+if (!isBrowser) {
+  withEmotionCache = function withEmotionCache(func) {
+    return function (props) {
+      var cache = React.useContext(EmotionCacheContext);
+
+      if (cache === null) {
+        // yes, we're potentially creating this on every render
+        // it doesn't actually matter though since it's only on the server
+        // so there will only every be a single render
+        // that could change in the future because of suspense and etc. but for now,
+        // this works and i don't want to optimise for a future thing that we aren't sure about
+        cache = createCache({
+          key: 'css'
+        });
+        return /*#__PURE__*/React__namespace.createElement(EmotionCacheContext.Provider, {
+          value: cache
+        }, func(props, cache));
+      } else {
+        return func(props, cache);
+      }
+    };
+  };
+}
+
+var ThemeContext = /* #__PURE__ */React__namespace.createContext({});
+
+var hasOwn = {}.hasOwnProperty;
+
+var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
+var createEmotionProps = function createEmotionProps(type, props) {
+
+  var newProps = {};
+
+  for (var _key in props) {
+    if (hasOwn.call(props, _key)) {
+      newProps[_key] = props[_key];
+    }
+  }
+
+  newProps[typePropName] = type; // Runtime labeling is an opt-in feature because:
+
+  return newProps;
+};
+
+var Insertion = function Insertion(_ref) {
+  var cache = _ref.cache,
+      serialized = _ref.serialized,
+      isStringTag = _ref.isStringTag;
+  registerStyles(cache, serialized, isStringTag);
+  var rules = useInsertionEffectAlwaysWithSyncFallback(function () {
+    return insertStyles(cache, serialized, isStringTag);
+  });
+
+  if (!isBrowser && rules !== undefined) {
+    var _ref2;
+
+    var serializedNames = serialized.name;
+    var next = serialized.next;
+
+    while (next !== undefined) {
+      serializedNames += ' ' + next.name;
+      next = next.next;
+    }
+
+    return /*#__PURE__*/React__namespace.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
+      __html: rules
+    }, _ref2.nonce = cache.sheet.nonce, _ref2));
+  }
+
+  return null;
+};
+
+var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
+  var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
+  // not passing the registered cache to serializeStyles because it would
+  // make certain babel optimisations not possible
+
+  if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
+    cssProp = cache.registered[cssProp];
+  }
+
+  var WrappedComponent = props[typePropName];
+  var registeredStyles = [cssProp];
+  var className = '';
+
+  if (typeof props.className === 'string') {
+    className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
+  } else if (props.className != null) {
+    className = props.className + " ";
+  }
+
+  var serialized = serializeStyles(registeredStyles, undefined, React__namespace.useContext(ThemeContext));
+
+  className += cache.key + "-" + serialized.name;
+  var newProps = {};
+
+  for (var _key2 in props) {
+    if (hasOwn.call(props, _key2) && _key2 !== 'css' && _key2 !== typePropName && (true )) {
+      newProps[_key2] = props[_key2];
+    }
+  }
+
+  newProps.className = className;
+
+  if (ref) {
+    newProps.ref = ref;
+  }
+
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Insertion, {
+    cache: cache,
+    serialized: serialized,
+    isStringTag: typeof WrappedComponent === 'string'
+  }), /*#__PURE__*/React__namespace.createElement(WrappedComponent, newProps));
+});
+
+var Emotion$1 = Emotion;
+
+var jsx = function jsx(type, props) {
+  // eslint-disable-next-line prefer-rest-params
+  var args = arguments;
+
+  if (props == null || !hasOwn.call(props, 'css')) {
+    return React__namespace.createElement.apply(undefined, args);
+  }
+
+  var argsLength = args.length;
+  var createElementArgArray = new Array(argsLength);
+  createElementArgArray[0] = Emotion$1;
+  createElementArgArray[1] = createEmotionProps(type, props);
+
+  for (var i = 2; i < argsLength; i++) {
+    createElementArgArray[i] = args[i];
+  }
+
+  return React__namespace.createElement.apply(null, createElementArgArray);
+};
+
+(function (_jsx) {
+  var JSX;
+
+  (function (_JSX) {})(JSX || (JSX = _jsx.JSX || (_jsx.JSX = {})));
+})(jsx || (jsx = {}));
+
+// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
+// initial client-side render from SSR, use place of hydrating tag
+
+var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
+
+  var styles = props.styles;
+  var serialized = serializeStyles([styles], undefined, React__namespace.useContext(ThemeContext));
+
+  if (!isBrowser) {
+    var _ref;
+
+    var serializedNames = serialized.name;
+    var serializedStyles = serialized.styles;
+    var next = serialized.next;
+
+    while (next !== undefined) {
+      serializedNames += ' ' + next.name;
+      serializedStyles += next.styles;
+      next = next.next;
+    }
+
+    var shouldCache = cache.compat === true;
+    var rules = cache.insert("", {
+      name: serializedNames,
+      styles: serializedStyles
+    }, cache.sheet, shouldCache);
+
+    if (shouldCache) {
+      return null;
+    }
+
+    return /*#__PURE__*/React__namespace.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + "-global " + serializedNames, _ref.dangerouslySetInnerHTML = {
+      __html: rules
+    }, _ref.nonce = cache.sheet.nonce, _ref));
+  } // yes, i know these hooks are used conditionally
+  // but it is based on a constant that will never change at runtime
+  // it's effectively like having two implementations and switching them out
+  // so it's not actually breaking anything
+
+
+  var sheetRef = React__namespace.useRef();
+  useInsertionEffectWithLayoutFallback(function () {
+    var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675
+
+    var sheet = new cache.sheet.constructor({
+      key: key,
+      nonce: cache.sheet.nonce,
+      container: cache.sheet.container,
+      speedy: cache.sheet.isSpeedy
+    });
+    var rehydrating = false;
+    var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]");
+
+    if (cache.sheet.tags.length) {
+      sheet.before = cache.sheet.tags[0];
+    }
+
+    if (node !== null) {
+      rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
+
+      node.setAttribute('data-emotion', key);
+      sheet.hydrate([node]);
+    }
+
+    sheetRef.current = [sheet, rehydrating];
+    return function () {
+      sheet.flush();
+    };
+  }, [cache]);
+  useInsertionEffectWithLayoutFallback(function () {
+    var sheetRefCurrent = sheetRef.current;
+    var sheet = sheetRefCurrent[0],
+        rehydrating = sheetRefCurrent[1];
+
+    if (rehydrating) {
+      sheetRefCurrent[1] = false;
+      return;
+    }
+
+    if (serialized.next !== undefined) {
+      // insert keyframes
+      insertStyles(cache, serialized.next, true);
+    }
+
+    if (sheet.tags.length) {
+      // if this doesn't exist then it will be null so the style element will be appended
+      var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
+      sheet.before = element;
+      sheet.flush();
+    }
+
+    cache.insert("", serialized, sheet, false);
+  }, [cache, serialized.name]);
+  return null;
+});
+
+function css() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return serializeStyles(args);
+}
+
+const GlobalCSSVariables = ({ variables, defaultColorMode = "dark" }) => {
+  const propertiesByColorMode = {};
+  const cssVariables = THEME_COLOR_MODES.reduce((properties, colorMode) => {
+    const formattedVariables = {};
+    for (const [variableName, propertyValue] of Object.entries(variables[colorMode])) {
+      formattedVariables[`--${variableName}`] = propertyValue;
+    }
+    if (defaultColorMode !== null && defaultColorMode === colorMode) {
+      properties[":root"] = formattedVariables;
+    }
+    return {
+      ...properties,
+      [`[data-color-mode='${colorMode}']`]: formattedVariables
+    };
+  }, propertiesByColorMode);
+  return /* @__PURE__ */ jsxRuntime.jsx(Global, { styles: css(cssVariables) });
+};
+
+const formatNumber = (value, options = {}) => {
+  const { decimals = 2, compactThreshold = 1e3, precise = false } = options;
+  if (value === "loading") {
+    return "";
+  }
+  const num = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(num)) {
+    return "N/A";
+  }
+  const abs = Math.abs(num);
+  if (!precise && abs >= compactThreshold) {
+    const sign = num < 0 ? "-" : "";
+    const absNum = Math.abs(num);
+    if (absNum >= 1e9) {
+      return `${sign}${(absNum / 1e9).toFixed(1)}b`;
+    } else if (absNum >= 1e6) {
+      return `${sign}${(absNum / 1e6).toFixed(1)}m`;
+    } else if (absNum >= 1e3) {
+      return `${sign}${(absNum / 1e3).toFixed(1)}k`;
+    }
+  }
+  return num.toLocaleString("en-US", {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  });
+};
+
+const calculateComparison = (current, baseline) => {
+  if (current === void 0 || current === null || baseline === void 0 || baseline === null || baseline === 0) {
+    return {
+      hasComparison: false,
+      direction: "neutral",
+      percentageChange: 0,
+      percentageLabel: ""
+    };
+  }
+  if (current === baseline) {
+    return {
+      hasComparison: true,
+      direction: "neutral",
+      percentageChange: 0,
+      percentageLabel: "0%"
+    };
+  }
+  const percentageChange = Math.abs((current - baseline) / baseline * 100);
+  const direction = current > baseline ? "up" : "down";
+  return {
+    hasComparison: true,
+    direction,
+    percentageChange,
+    percentageLabel: `${formatNumber(percentageChange, {
+      compactThreshold: 1e4,
+      decimals: 2
+    })}%`
+  };
+};
+
+const getStyles$1 = () => {
+  const {
+    legacy,
+    primitives: { spacing, typography }
+  } = getDesignTokens({ valueType: "css" });
+  const backgroundColor = legacy.colors.background.primary;
+  return {
+    arrow: css$1.css({
+      fill: backgroundColor
+    }),
+    shadow: css$1.css({
+      filter: `drop-shadow(${legacy.boxShadows.z2})`
+    }),
+    container: css$1.css({
+      backgroundColor,
+      borderRadius: `calc(${legacy.borderRadius.md} + ${spacing.xs})`,
+      padding: spacing.xs,
+      color: legacy.colors.text.primary,
+      fontFamily: typography.fontFamily.ui,
+      fontSize: typography.fontSize.ui.sm,
+      fontWeight: typography.fontWeight.medium
+    })
+  };
+};
+
+const POPOVER_OFFSET = 8;
+const getMiddleware = ({
+  placement,
+  arrowRef
+}) => {
+  var _a;
+  const BOUNDARY_ELEMENT_ID = "floating-boundary";
+  const _flip = react.flip({
+    // Ensure we flip to the perpendicular axis if it doesn't fit
+    // on narrow viewports.
+    crossAxis: "alignment",
+    fallbackAxisSideDirection: "end",
+    boundary: (_a = document.getElementById(BOUNDARY_ELEMENT_ID)) != null ? _a : void 0
+  });
+  const middleware = (placement == null ? void 0 : placement.includes("-")) ? [_flip, react.shift()] : [react.shift(), _flip];
+  return [
+    react.offset(POPOVER_OFFSET),
+    ...middleware,
+    react.arrow({
+      element: arrowRef
+    })
+  ];
+};
+const Popover = React.forwardRef(
+  ({
+    trigger,
+    children,
+    isOpen: isOpenControlled,
+    isInteractive = false,
+    placement = "bottom",
+    transitionDuration = 200,
+    hideDelay = 500
+  }, forwardedRef) => {
+    const arrowRef = React.useRef(null);
+    const closeTimer = React.useRef(void 0);
+    const popoverId = React.useId();
+    const [isOpenState, setOpen] = React.useState(isOpenControlled);
+    const [isDelayedOpen, setDelayedOpen] = React.useState(isOpenControlled);
+    const isOpen = isOpenControlled != null ? isOpenControlled : isOpenState;
+    const middleware = getMiddleware({ placement, arrowRef });
+    const styles = getStyles$1();
+    const { context, refs, floatingStyles } = react.useFloating({
+      open: isOpen,
+      placement,
+      onOpenChange: (open) => {
+        setOpen(open);
+        clearTimeout(closeTimer.current);
+        if (!open) {
+          closeTimer.current = setTimeout(() => {
+            setDelayedOpen(open);
+          }, transitionDuration + hideDelay);
+        } else {
+          setDelayedOpen(open);
+        }
+      },
+      middleware,
+      whileElementsMounted: react.autoUpdate
+    });
+    const { getReferenceProps, getFloatingProps } = react.useInteractions([
+      react.useDismiss(context),
+      react.useHover(context, {
+        handleClose: isInteractive ? react.safePolygon() : void 0,
+        move: false,
+        delay: {
+          open: 0,
+          close: hideDelay
+        }
+      }),
+      react.useFocus(context)
+    ]);
+    const { styles: transitionStyles } = react.useTransitionStyles(context, {
+      duration: transitionDuration,
+      initial: ({ side }) => ({
+        opacity: 0,
+        transform: side === "top" || side === "bottom" ? `translateY(${POPOVER_OFFSET}px)` : `translateX(${POPOVER_OFFSET}px)`
+      }),
+      open: ({ side }) => ({
+        opacity: 1,
+        transform: side === "top" || side === "bottom" ? `translateY(0)` : `translateX(0)`
+      }),
+      close: ({ side }) => ({
+        opacity: 0,
+        transform: side === "top" || side === "bottom" ? `translateY(${POPOVER_OFFSET}px)` : `translateX(${POPOVER_OFFSET}px)`
+      })
+    });
+    const handleRef = React.useCallback(
+      (ref) => {
+        refs.setReference(ref);
+        if (typeof forwardedRef === "function") {
+          forwardedRef(ref);
+        } else if (forwardedRef) {
+          forwardedRef.current = ref;
+        }
+      },
+      [forwardedRef, refs]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      React.cloneElement(trigger, {
+        ref: handleRef,
+        tabIndex: 0,
+        "aria-describedby": isOpen ? popoverId : void 0,
+        ...getReferenceProps()
+      }),
+      (isDelayedOpen || isOpen) && /* @__PURE__ */ jsxRuntime.jsx(ui.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: transitionStyles, className: styles.shadow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.FloatingArrow, { className: styles.arrow, ref: arrowRef, context }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { id: popoverId, role: "tooltip", className: styles.container, children })
+      ] }) }) })
+    ] });
+  }
+);
+Popover.displayName = "Popover";
+
+const getStyles = () => {
+  const {
+    legacy,
+    primitives: { spacing, typography }
+  } = getDesignTokens({ valueType: "css" });
+  return {
+    wrapper: css$1.css({
+      display: "flex",
+      flexDirection: "column",
+      gap: spacing.xs
+    }),
+    heading: css$1.css({
+      padding: `${spacing.sm} ${spacing.md}`,
+      fontFamily: typography.fontFamily.ui,
+      fontSize: typography.fontSize.ui.sm,
+      fontWeight: typography.fontWeight.bold,
+      color: legacy.colors.text.primary,
+      background: legacy.colors.background.secondary,
+      borderRadius: legacy.borderRadius.md
+    }),
+    content: css$1.css({
+      display: "flex",
+      gap: spacing.xs
+    }),
+    section: css$1.css({
+      display: "flex",
+      flex: 1,
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      gap: spacing.xs,
+      background: legacy.colors.background.secondary,
+      borderRadius: legacy.borderRadius.md,
+      padding: `${spacing.sm} ${spacing.md}`,
+      minWidth: `80px`
+    }),
+    sectionTitle: css$1.css({
+      fontFamily: typography.fontFamily.ui,
+      fontSize: typography.fontSize.ui.sm,
+      fontWeight: typography.fontWeight.medium,
+      color: legacy.colors.text.primary,
+      whiteSpace: "nowrap"
+    }),
+    value: css$1.css({
+      display: "flex",
+      alignItems: "center",
+      gap: spacing.xs,
+      fontFamily: typography.fontFamily.monospace,
+      fontSize: typography.fontSize.monospace.sm,
+      color: legacy.colors.text.secondary
+    }),
+    icon: css$1.css({
+      flexShrink: 0
+    })
+  };
+};
+
+const ComparisonTooltip = ({
+  trigger,
+  placement = "top",
+  current,
+  previous,
+  previousLabel,
+  currentLabel = "Current",
+  title,
+  currentIcon = "eye",
+  previousIcon = "clock-nine",
+  hideDelay
+}) => {
+  const styles = getStyles();
+  return /* @__PURE__ */ jsxRuntime.jsx(Popover, { trigger, placement, hideDelay, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.wrapper, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.heading, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.content, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.sectionTitle, children: currentLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.value, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: currentIcon, size: "sm", className: styles.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: current || "N/A" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.sectionTitle, children: previousLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.value, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: previousIcon, size: "sm", className: styles.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: previous || "N/A" })
+        ] })
+      ] })
+    ] })
+  ] }) });
+};
+
+const cssVariables = () => {
+  const { legacy } = getDesignTokens({ valueType: "css" });
+  return {
+    dark: {
+      "comparison-badge-icon-background-color": legacy.colors.background.secondary,
+      "comparison-badge-icon-highlight-background-color": legacy.palette.whiteBaseOpacity10
+    },
+    light: {
+      "comparison-badge-icon-background-color": legacy.colors.background.canvas,
+      "comparison-badge-icon-highlight-background-color": legacy.palette.blackBaseOpacity8
+    }
+  };
+};
+const BADGE_HEIGHT = 28;
+const TREND_ICON_SIZE = 20;
+const getComparisonBadgeStyles = ({
+  highlight,
+  direction,
+  tooltip
+}) => {
+  const {
+    legacy,
+    primitives: { spacing, typography }
+  } = getDesignTokens({ valueType: "css" });
+  const labelColor = (() => {
+    switch (true) {
+      case highlight:
+      case direction === "up":
+        return legacy.colors.text.maxContrast;
+      default:
+        return legacy.colors.primary.text;
+    }
+  })();
+  return {
+    container: css$1.css({
+      boxSizing: "border-box",
+      background: "transparent",
+      borderRadius: legacy.borderRadius.pill,
+      border: `1px solid
+        ${highlight ? legacy.colors.border.strong : legacy.colors.border.weak}`,
+      padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xxs}`,
+      textAlign: "left",
+      display: "inline-flex",
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center",
+      fontFamily: typography.fontFamily.ui,
+      fontSize: typography.fontSize.ui.sm,
+      height: `${BADGE_HEIGHT}px`,
+      position: "relative",
+      transition: "background 0.2s ease-in-out",
+      ...tooltip ? {
+        cursor: "pointer",
+        "&:hover": {
+          background: legacy.colors.background.secondary
+        }
+      } : {}
+    }),
+    clockIconWrapper: css$1.css({
+      background: highlight ? "var(--comparison-badge-icon-highlight-background-color)" : "var(--comparison-badge-icon-background-color)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "22px",
+      height: "22px",
+      borderRadius: legacy.borderRadius.pill,
+      color: legacy.colors.text.primary
+    }),
+    trendLabelContainer: css$1.css({
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing.xxs,
+      paddingLeft: spacing.xxs,
+      fontWeight: typography.fontWeight.medium
+    }),
+    trendLabel: css$1.css({
+      display: "flex",
+      alignItems: "center",
+      color: labelColor,
+      lineHeight: `${BADGE_HEIGHT}px`,
+      fontWeight: typography.fontWeight.medium,
+      fontVariantNumeric: "tabular-nums"
+    }),
+    timeframeLabel: css$1.css({
+      color: highlight ? legacy.colors.text.maxContrast : legacy.colors.text.primary,
+      paddingLeft: spacing.xxs,
+      lineHeight: `${BADGE_HEIGHT}px`,
+      fontWeight: typography.fontWeight.normal
+    }),
+    trendIconWrapper: css$1.css({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "16px",
+      height: "16px"
+    }),
+    trendIcon: css$1.css({
+      width: `${TREND_ICON_SIZE}px`,
+      height: `${TREND_ICON_SIZE}px`
+    }),
+    dash: css$1.css({
+      color: legacy.colors.text.secondary
+    })
+  };
+};
+
+const formatCurrency = (value) => {
+  return !!value ? `$${formatNumber(value, { precise: true })}` : "N/A";
+};
+const DIRECTION_ICON = {
+  up: "arrow-up",
+  down: "arrow-down",
+  neutral: "minus"
+};
+const ComparisonBadge = ({
+  current,
+  previous,
+  currentLabel,
+  previousLabel,
+  placement,
+  highlight = false,
+  timeframeLabel,
+  tooltip = true
+}) => {
+  const { direction, hasComparison, percentageLabel } = calculateComparison(current, previous);
+  const styles = getComparisonBadgeStyles({ highlight, direction, tooltip });
+  const directionIconStyle = (() => {
+    switch (true) {
+      case direction == "neutral":
+        return styles.dash;
+      default:
+        return void 0;
+    }
+  })();
+  const badgeContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.clockIconWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: "clock-nine" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.trendLabelContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.trendLabel, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.trendIconWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Icon,
+          {
+            name: DIRECTION_ICON[direction],
+            className: css$1.cx(styles.trendIcon, directionIconStyle)
+          }
+        ) }),
+        hasComparison && percentageLabel && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: percentageLabel })
+      ] }),
+      timeframeLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.timeframeLabel, children: [
+        "vs ",
+        timeframeLabel.toLowerCase()
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GlobalCSSVariables, { variables: cssVariables(), defaultColorMode: null }),
+    tooltip ? /* @__PURE__ */ jsxRuntime.jsx(
+      ComparisonTooltip,
+      {
+        trigger: badgeContent,
+        current: formatCurrency(current),
+        previous: formatCurrency(previous),
+        currentLabel,
+        previousLabel,
+        placement
+      }
+    ) : badgeContent
+  ] });
+};
+
+exports.ColorModeProvider = ColorModeProvider;
+exports.ComparisonBadge = ComparisonBadge;
+exports.ComparisonTooltip = ComparisonTooltip;
+exports.Popover = Popover;
+exports.calculateComparison = calculateComparison;
+exports.formatNumber = formatNumber;
+exports.useColorMode = useColorMode;
+//# sourceMappingURL=index.cjs.map