@sanity/ui 2.0.0-alpha.7 → 2.0.0-alpha.9

package/dist/index.esm.js

@@ -1367,10 +1367,11 @@ const cardVariables = {
   "--card-shadow-ambient-color": tonesCssVariables.default["base-shadow-ambient-color"],
   "--card-focus-ring-color": tonesCssVariables.positive["bg-accent"],
   "--card-icon-color": tonesCssVariables.default["icon-default"],
-  "--card-bg-image": "inherit",
   // Card
   "--card-bg-color": tonesCssVariables.default["bg-base"],
+  "--card-bg-image": "inherit",
   "--card-fg-color": tonesCssVariables.default["text-primary"],
+  "--card-border-color": tonesCssVariables.default["border-base"],
   "--card-muted-fg-color": tonesCssVariables.default["text-secondary"],
   "--card-accent-fg-color": tonesCssVariables.default["text-accent"],
   "--card-link-fg-color": tonesCssVariables.default["text-link"],
@@ -1381,9 +1382,7 @@ const cardVariables = {
   // @todo: deprecate
   "--card-link-color": tonesCssVariables.default["text-link"],
   "--card-hairline-soft-color": tonesCssVariables.default["border-base"],
-  "--card-hairline-hard-color": tonesCssVariables.default["border-base"],
-  // Card
-  "--card-bg2-color": tonesCssVariables.default["bg-tint"]
+  "--card-hairline-hard-color": tonesCssVariables.default["border-base"]
 };
 const createCssVars = function (scheme, tones) {
   let defaultTone = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "default";
@@ -1402,6 +1401,9 @@ const cssVars = {
    */
   mutable: mutableVariables
 };
+function createColorTheme() {
+  return null;
+}
 const tones = {
   default: hues.gray,
   transparent: hues.gray,
@@ -1675,65 +1677,4062 @@ const studioTheme = {
         width: 1
       }
     },
-    radio: {
-      size: 17,
-      markSize: 9,
-      focusRing: {
-        offset: -1,
-        width: 1
+    radio: {
+      size: 17,
+      markSize: 9,
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    },
+    switch: {
+      width: 21,
+      height: 13,
+      padding: 2,
+      transitionDurationMs: 150,
+      transitionTimingFunction: "ease-out",
+      focusRing: {
+        offset: 1,
+        width: 1
+      }
+    },
+    border: {
+      width: 1
+    },
+    select: {
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    },
+    text: {
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    }
+  }
+  // styles: {
+  //   button: {
+  //     root: {
+  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
+  //     },
+  //   },
+  //   card: {
+  //     root: {
+  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
+  //     },
+  //   },
+  // },
+};
+
+const DEFAULT_THEME_LAYER = {
+  dialog: {
+    zOffset: 600
+  },
+  popover: {
+    zOffset: 400
+  },
+  tooltip: {
+    zOffset: 200
+  }
+};
+const legacyColors = {
+  base: {
+    fg: "#111213",
+    bg: "#ffffff",
+    border: "#e2e6e9",
+    focusRing: "#388bff",
+    shadow: {
+      outline: "rgba(120,129,145,0.4)",
+      umbra: "rgba(120,129,145,0.2)",
+      penumbra: "rgba(120,129,145,0.14)",
+      ambient: "rgba(120,129,145,0.12)"
+    },
+    skeleton: {
+      from: "#f3f4f6",
+      to: "rgba(243,244,246,0.5)"
+    }
+  },
+  button: {
+    default: {
+      default: {
+        enabled: {
+          bg: "#788191",
+          bg2: "#848d9d",
+          border: "#788191",
+          fg: "#ffffff",
+          muted: {
+            fg: "#f3f4f6"
+          },
+          accent: {
+            fg: "#fef4f5"
+          },
+          link: {
+            fg: "#f1f8ff"
+          },
+          code: {
+            bg: "#757e8e",
+            fg: "#f3f4f6"
+          },
+          skeleton: {
+            from: "#929bac",
+            to: "rgba(146,155,172,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#e2e6e9",
+          bg2: "#e5e8eb",
+          border: "#e2e6e9",
+          fg: "#ffffff",
+          muted: {
+            fg: "#f9f9fa"
+          },
+          accent: {
+            fg: "#f9f9fa"
+          },
+          link: {
+            fg: "#f9f9fa"
+          },
+          code: {
+            bg: "#e2e6e9",
+            fg: "#f9f9fa"
+          },
+          skeleton: {
+            from: "#e8ebee",
+            to: "rgba(232,235,238,0.5)"
+          }
+        },
+        hovered: {
+          bg: "#5e6573",
+          bg2: "#6d7482",
+          border: "#5e6573",
+          fg: "#ffffff",
+          muted: {
+            fg: "#e2e6e9"
+          },
+          accent: {
+            fg: "#fce0e0"
+          },
+          link: {
+            fg: "#dcedff"
+          },
+          code: {
+            bg: "#5c6371",
+            fg: "#e2e6e9"
+          },
+          skeleton: {
+            from: "#7d8596",
+            to: "rgba(125,133,150,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#31353f",
+          bg2: "#444954",
+          border: "#31353f",
+          fg: "#ffffff",
+          muted: {
+            fg: "#e2e6e9"
+          },
+          accent: {
+            fg: "#fcd7d4"
+          },
+          link: {
+            fg: "#d2e7ff"
+          },
+          code: {
+            bg: "#30343e",
+            fg: "#e2e6e9"
+          },
+          skeleton: {
+            from: "#595f6e",
+            to: "rgba(89,95,110,0.5)"
+          }
+        },
+        selected: {
+          bg: "#073392",
+          bg2: "#1346a5",
+          border: "#073392",
+          fg: "#ffffff",
+          muted: {
+            fg: "#c7e1ff"
+          },
+          accent: {
+            fg: "#fbd6e7"
+          },
+          link: {
+            fg: "#c9e7ff"
+          },
+          code: {
+            bg: "#073292",
+            fg: "#c7e1ff"
+          },
+          skeleton: {
+            from: "#0e5cd0",
+            to: "rgba(14,92,208,0.5)"
+          }
+        }
+      },
+      primary: {
+        enabled: {
+          bg: "#388bff",
+          bg2: "#4196ff",
+          border: "#388bff",
+          fg: "#ffffff",
+          muted: {
+            fg: "#e5f1ff"
+          },
+          accent: {
+            fg: "#fef5ff"
+          },
+          link: {
+            fg: "#ebf9ff"
+          },
+          code: {
+            bg: "#3688ff",
+            fg: "#e5f1ff"
+          },
+          skeleton: {
+            from: "#3da2ff",
+            to: "rgba(61,162,255,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#e2e6e9",
+          bg2: "#e5e8eb",
+          border: "#e2e6e9",
+          fg: "#ffffff",
+          muted: {
+            fg: "#f9f9fa"
+          },
+          accent: {
+            fg: "#f9f9fa"
+          },
+          link: {
+            fg: "#f9f9fa"
+          },
+          code: {
+            bg: "#e2e6e9",
+            fg: "#f9f9fa"
+          },
+          skeleton: {
+            from: "#e8ebee",
+            to: "rgba(232,235,238,0.5)"
+          }
+        },
+        hovered: {
+          bg: "#0661fe",
+          bg2: "#1270fe",
+          border: "#0661fe",
+          fg: "#ffffff",
+          muted: {
+            fg: "#c7e1ff"
+          },
+          accent: {
+            fg: "#fbdfff"
+          },
+          link: {
+            fg: "#c8ecff"
+          },
+          code: {
+            bg: "#065ffe",
+            fg: "#c7e1ff"
+          },
+          skeleton: {
+            from: "#0d81ff",
+            to: "rgba(13,129,255,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#073392",
+          bg2: "#1346a5",
+          border: "#073392",
+          fg: "#ffffff",
+          muted: {
+            fg: "#c7e1ff"
+          },
+          accent: {
+            fg: "#fbd6e7"
+          },
+          link: {
+            fg: "#c9e7ff"
+          },
+          code: {
+            bg: "#073292",
+            fg: "#c7e1ff"
+          },
+          skeleton: {
+            from: "#0e5cd0",
+            to: "rgba(14,92,208,0.5)"
+          }
+        },
+        selected: {
+          bg: "#073392",
+          bg2: "#1346a5",
+          border: "#073392",
+          fg: "#ffffff",
+          muted: {
+            fg: "#c7e1ff"
+          },
+          accent: {
+            fg: "#fbd6e7"
+          },
+          link: {
+            fg: "#c9e7ff"
+          },
+          code: {
+            bg: "#073292",
+            fg: "#c7e1ff"
+          },
+          skeleton: {
+            from: "#0e5cd0",
+            to: "rgba(14,92,208,0.5)"
+          }
+        }
+      },
+      positive: {
+        enabled: {
+          bg: "#21d46c",
+          bg2: "#31da7b",
+          border: "#21d46c",
+          fg: "#ffffff",
+          muted: {
+            fg: "#dff6e9"
+          },
+          accent: {
+            fg: "#fefbf1"
+          },
+          link: {
+            fg: "#e8fdff"
+          },
+          code: {
+            bg: "#1fd268",
+            fg: "#dff6e9"
+          },
+          skeleton: {
+            from: "#31e185",
+            to: "rgba(49,225,133,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#e2e6e9",
+          bg2: "#e5e8eb",
+          border: "#e2e6e9",
+          fg: "#ffffff",
+          muted: {
+            fg: "#f9f9fa"
+          },
+          accent: {
+            fg: "#f9f9fa"
+          },
+          link: {
+            fg: "#f9f9fa"
+          },
+          code: {
+            bg: "#e2e6e9",
+            fg: "#f9f9fa"
+          },
+          skeleton: {
+            from: "#e8ebee",
+            to: "rgba(232,235,238,0.5)"
+          }
+        },
+        hovered: {
+          bg: "#1ba755",
+          bg2: "#2bb266",
+          border: "#1ba755",
+          fg: "#ffffff",
+          muted: {
+            fg: "#b1eccb"
+          },
+          accent: {
+            fg: "#fbedd9"
+          },
+          link: {
+            fg: "#cdf5ff"
+          },
+          code: {
+            bg: "#1aa552",
+            fg: "#b1eccb"
+          },
+          skeleton: {
+            from: "#2bc272",
+            to: "rgba(43,194,114,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#124e2b",
+          bg2: "#236541",
+          border: "#124e2b",
+          fg: "#ffffff",
+          muted: {
+            fg: "#b1eccb"
+          },
+          accent: {
+            fg: "#fbdcd0"
+          },
+          link: {
+            fg: "#cbeaff"
+          },
+          code: {
+            bg: "#114d29",
+            fg: "#b1eccb"
+          },
+          skeleton: {
+            from: "#23844f",
+            to: "rgba(35,132,79,0.5)"
+          }
+        },
+        selected: {
+          bg: "#124e2b",
+          bg2: "#236541",
+          border: "#124e2b",
+          fg: "#ffffff",
+          muted: {
+            fg: "#b1eccb"
+          },
+          accent: {
+            fg: "#fbdcd0"
+          },
+          link: {
+            fg: "#cbeaff"
+          },
+          code: {
+            bg: "#114d29",
+            fg: "#b1eccb"
+          },
+          skeleton: {
+            from: "#23844f",
+            to: "rgba(35,132,79,0.5)"
+          }
+        }
+      },
+      caution: {
+        enabled: {
+          bg: "#f3bc16",
+          bg2: "#f5c227",
+          border: "#f3bc16",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fef7cd"
+          },
+          accent: {
+            fg: "#fff9e9"
+          },
+          link: {
+            fg: "#fefbff"
+          },
+          code: {
+            bg: "#f3bb15",
+            fg: "#fef7cd"
+          },
+          skeleton: {
+            from: "#f8cd20",
+            to: "rgba(248,205,32,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#e2e6e9",
+          bg2: "#e5e8eb",
+          border: "#e2e6e9",
+          fg: "#ffffff",
+          muted: {
+            fg: "#f9f9fa"
+          },
+          accent: {
+            fg: "#f9f9fa"
+          },
+          link: {
+            fg: "#f9f9fa"
+          },
+          code: {
+            bg: "#e2e6e9",
+            fg: "#f9f9fa"
+          },
+          skeleton: {
+            from: "#e8ebee",
+            to: "rgba(232,235,238,0.5)"
+          }
+        },
+        hovered: {
+          bg: "#cb920b",
+          bg2: "#d29c1d",
+          border: "#cb920b",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fbf1a7"
+          },
+          accent: {
+            fg: "#fee9c8"
+          },
+          link: {
+            fg: "#f4f2ff"
+          },
+          code: {
+            bg: "#cb910a",
+            fg: "#fbf1a7"
+          },
+          skeleton: {
+            from: "#e0ad16",
+            to: "rgba(224,173,22,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#65400b",
+          bg2: "#78521d",
+          border: "#65400b",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fbf1a7"
+          },
+          accent: {
+            fg: "#fdd9c8"
+          },
+          link: {
+            fg: "#dde9ff"
+          },
+          code: {
+            bg: "#653f0a",
+            fg: "#fbf1a7"
+          },
+          skeleton: {
+            from: "#a27016",
+            to: "rgba(162,112,22,0.5)"
+          }
+        },
+        selected: {
+          bg: "#65400b",
+          bg2: "#78521d",
+          border: "#65400b",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fbf1a7"
+          },
+          accent: {
+            fg: "#fdd9c8"
+          },
+          link: {
+            fg: "#dde9ff"
+          },
+          code: {
+            bg: "#653f0a",
+            fg: "#fbf1a7"
+          },
+          skeleton: {
+            from: "#a27016",
+            to: "rgba(162,112,22,0.5)"
+          }
+        }
+      },
+      critical: {
+        enabled: {
+          bg: "#ec4636",
+          bg2: "#ef5545",
+          border: "#ec4636",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fee8e7"
+          },
+          accent: {
+            fg: "#ffeeec"
+          },
+          link: {
+            fg: "#fdf5ff"
+          },
+          code: {
+            bg: "#ec4334",
+            fg: "#fee8e7"
+          },
+          skeleton: {
+            from: "#f45943",
+            to: "rgba(244,89,67,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#e2e6e9",
+          bg2: "#e5e8eb",
+          border: "#e2e6e9",
+          fg: "#ffffff",
+          muted: {
+            fg: "#f9f9fa"
+          },
+          accent: {
+            fg: "#f9f9fa"
+          },
+          link: {
+            fg: "#f9f9fa"
+          },
+          code: {
+            bg: "#e2e6e9",
+            fg: "#f9f9fa"
+          },
+          skeleton: {
+            from: "#e8ebee",
+            to: "rgba(232,235,238,0.5)"
+          }
+        },
+        hovered: {
+          bg: "#d72414",
+          bg2: "#dd3526",
+          border: "#d72414",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fbccc6"
+          },
+          accent: {
+            fg: "#fed3ca"
+          },
+          link: {
+            fg: "#f6e5ff"
+          },
+          code: {
+            bg: "#d72313",
+            fg: "#fbccc6"
+          },
+          skeleton: {
+            from: "#e83a24",
+            to: "rgba(232,58,36,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#6f1a11",
+          bg2: "#842c23",
+          border: "#6f1a11",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fbccc6"
+          },
+          accent: {
+            fg: "#fdd1ca"
+          },
+          link: {
+            fg: "#dfe4ff"
+          },
+          code: {
+            bg: "#6f1910",
+            fg: "#fbccc6"
+          },
+          skeleton: {
+            from: "#ae3121",
+            to: "rgba(174,49,33,0.5)"
+          }
+        },
+        selected: {
+          bg: "#6f1a11",
+          bg2: "#842c23",
+          border: "#6f1a11",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fbccc6"
+          },
+          accent: {
+            fg: "#fdd1ca"
+          },
+          link: {
+            fg: "#dfe4ff"
+          },
+          code: {
+            bg: "#6f1910",
+            fg: "#fbccc6"
+          },
+          skeleton: {
+            from: "#ae3121",
+            to: "rgba(174,49,33,0.5)"
+          }
+        }
+      }
+    },
+    ghost: {
+      default: {
+        enabled: {
+          bg: "#ffffff",
+          bg2: "#f9f9fa",
+          border: "#e2e6e9",
+          fg: "#464c58",
+          muted: {
+            fg: "#5e6573"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#f9f9fa",
+            fg: "#5e6573"
+          },
+          skeleton: {
+            from: "#f3f4f6",
+            to: "rgba(243,244,246,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#ffffff",
+          bg2: "#f9f9fa",
+          border: "#f9f9fa",
+          fg: "#e2e6e9",
+          muted: {
+            fg: "#f3f4f6"
+          },
+          accent: {
+            fg: "#f3f4f6"
+          },
+          link: {
+            fg: "#f3f4f6"
+          },
+          code: {
+            bg: "#ffffff",
+            fg: "#f3f4f6"
+          },
+          skeleton: {
+            from: "rgba(243,244,246,0.5)",
+            to: "rgba(243,244,246,0.25)"
+          }
+        },
+        hovered: {
+          bg: "#5e6573",
+          bg2: "#6d7482",
+          border: "#5e6573",
+          fg: "#ffffff",
+          muted: {
+            fg: "#e2e6e9"
+          },
+          accent: {
+            fg: "#fce0e0"
+          },
+          link: {
+            fg: "#dcedff"
+          },
+          code: {
+            bg: "#5c6371",
+            fg: "#e2e6e9"
+          },
+          skeleton: {
+            from: "#7d8596",
+            to: "rgba(125,133,150,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#31353f",
+          bg2: "#444954",
+          border: "#31353f",
+          fg: "#ffffff",
+          muted: {
+            fg: "#e2e6e9"
+          },
+          accent: {
+            fg: "#fcd7d4"
+          },
+          link: {
+            fg: "#d2e7ff"
+          },
+          code: {
+            bg: "#30343e",
+            fg: "#e2e6e9"
+          },
+          skeleton: {
+            from: "#595f6e",
+            to: "rgba(89,95,110,0.5)"
+          }
+        },
+        selected: {
+          bg: "#073392",
+          bg2: "#1346a5",
+          border: "#073392",
+          fg: "#ffffff",
+          muted: {
+            fg: "#c7e1ff"
+          },
+          accent: {
+            fg: "#fbd6e7"
+          },
+          link: {
+            fg: "#c9e7ff"
+          },
+          code: {
+            bg: "#073292",
+            fg: "#c7e1ff"
+          },
+          skeleton: {
+            from: "#0e5cd0",
+            to: "rgba(14,92,208,0.5)"
+          }
+        }
+      },
+      primary: {
+        enabled: {
+          bg: "#ffffff",
+          bg2: "#f5faff",
+          border: "#e2e6e9",
+          fg: "#0345c9",
+          muted: {
+            fg: "#0661fe"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#f5faff",
+            fg: "#0661fe"
+          },
+          skeleton: {
+            from: "#e5f1ff",
+            to: "rgba(229,241,255,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#ffffff",
+          bg2: "#f9f9fa",
+          border: "#f9f9fa",
+          fg: "#e2e6e9",
+          muted: {
+            fg: "#f3f4f6"
+          },
+          accent: {
+            fg: "#f3f4f6"
+          },
+          link: {
+            fg: "#f3f4f6"
+          },
+          code: {
+            bg: "#ffffff",
+            fg: "#f3f4f6"
+          },
+          skeleton: {
+            from: "rgba(243,244,246,0.5)",
+            to: "rgba(243,244,246,0.25)"
+          }
+        },
+        hovered: {
+          bg: "#0661fe",
+          bg2: "#1270fe",
+          border: "#0661fe",
+          fg: "#ffffff",
+          muted: {
+            fg: "#c7e1ff"
+          },
+          accent: {
+            fg: "#fbdfff"
+          },
+          link: {
+            fg: "#c8ecff"
+          },
+          code: {
+            bg: "#065ffe",
+            fg: "#c7e1ff"
+          },
+          skeleton: {
+            from: "#0d81ff",
+            to: "rgba(13,129,255,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#073392",
+          bg2: "#1346a5",
+          border: "#073392",
+          fg: "#ffffff",
+          muted: {
+            fg: "#c7e1ff"
+          },
+          accent: {
+            fg: "#fbd6e7"
+          },
+          link: {
+            fg: "#c9e7ff"
+          },
+          code: {
+            bg: "#073292",
+            fg: "#c7e1ff"
+          },
+          skeleton: {
+            from: "#0e5cd0",
+            to: "rgba(14,92,208,0.5)"
+          }
+        },
+        selected: {
+          bg: "#073392",
+          bg2: "#1346a5",
+          border: "#073392",
+          fg: "#ffffff",
+          muted: {
+            fg: "#c7e1ff"
+          },
+          accent: {
+            fg: "#fbd6e7"
+          },
+          link: {
+            fg: "#c9e7ff"
+          },
+          code: {
+            bg: "#073292",
+            fg: "#c7e1ff"
+          },
+          skeleton: {
+            from: "#0e5cd0",
+            to: "rgba(14,92,208,0.5)"
+          }
+        }
+      },
+      positive: {
+        enabled: {
+          bg: "#ffffff",
+          bg2: "#f3fcf6",
+          border: "#e2e6e9",
+          fg: "#167941",
+          muted: {
+            fg: "#1ba755"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#f3fcf6",
+            fg: "#1ba755"
+          },
+          skeleton: {
+            from: "#dff6e9",
+            to: "rgba(223,246,233,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#ffffff",
+          bg2: "#f9f9fa",
+          border: "#f9f9fa",
+          fg: "#e2e6e9",
+          muted: {
+            fg: "#f3f4f6"
+          },
+          accent: {
+            fg: "#f3f4f6"
+          },
+          link: {
+            fg: "#f3f4f6"
+          },
+          code: {
+            bg: "#ffffff",
+            fg: "#f3f4f6"
+          },
+          skeleton: {
+            from: "rgba(243,244,246,0.5)",
+            to: "rgba(243,244,246,0.25)"
+          }
+        },
+        hovered: {
+          bg: "#1ba755",
+          bg2: "#2bb266",
+          border: "#1ba755",
+          fg: "#ffffff",
+          muted: {
+            fg: "#b1eccb"
+          },
+          accent: {
+            fg: "#fbedd9"
+          },
+          link: {
+            fg: "#cdf5ff"
+          },
+          code: {
+            bg: "#1aa552",
+            fg: "#b1eccb"
+          },
+          skeleton: {
+            from: "#2bc272",
+            to: "rgba(43,194,114,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#124e2b",
+          bg2: "#236541",
+          border: "#124e2b",
+          fg: "#ffffff",
+          muted: {
+            fg: "#b1eccb"
+          },
+          accent: {
+            fg: "#fbdcd0"
+          },
+          link: {
+            fg: "#cbeaff"
+          },
+          code: {
+            bg: "#114d29",
+            fg: "#b1eccb"
+          },
+          skeleton: {
+            from: "#23844f",
+            to: "rgba(35,132,79,0.5)"
+          }
+        },
+        selected: {
+          bg: "#124e2b",
+          bg2: "#236541",
+          border: "#124e2b",
+          fg: "#ffffff",
+          muted: {
+            fg: "#b1eccb"
+          },
+          accent: {
+            fg: "#fbdcd0"
+          },
+          link: {
+            fg: "#cbeaff"
+          },
+          code: {
+            bg: "#114d29",
+            fg: "#b1eccb"
+          },
+          skeleton: {
+            from: "#23844f",
+            to: "rgba(35,132,79,0.5)"
+          }
+        }
+      },
+      caution: {
+        enabled: {
+          bg: "#ffffff",
+          bg2: "#fffdf0",
+          border: "#e2e6e9",
+          fg: "#98670b",
+          muted: {
+            fg: "#cb920b"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#fffdf0",
+            fg: "#cb920b"
+          },
+          skeleton: {
+            from: "#fef7cd",
+            to: "rgba(254,247,205,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#ffffff",
+          bg2: "#f9f9fa",
+          border: "#f9f9fa",
+          fg: "#e2e6e9",
+          muted: {
+            fg: "#f3f4f6"
+          },
+          accent: {
+            fg: "#f3f4f6"
+          },
+          link: {
+            fg: "#f3f4f6"
+          },
+          code: {
+            bg: "#ffffff",
+            fg: "#f3f4f6"
+          },
+          skeleton: {
+            from: "rgba(243,244,246,0.5)",
+            to: "rgba(243,244,246,0.25)"
+          }
+        },
+        hovered: {
+          bg: "#cb920b",
+          bg2: "#d29c1d",
+          border: "#cb920b",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fbf1a7"
+          },
+          accent: {
+            fg: "#fee9c8"
+          },
+          link: {
+            fg: "#f4f2ff"
+          },
+          code: {
+            bg: "#cb910a",
+            fg: "#fbf1a7"
+          },
+          skeleton: {
+            from: "#e0ad16",
+            to: "rgba(224,173,22,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#65400b",
+          bg2: "#78521d",
+          border: "#65400b",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fbf1a7"
+          },
+          accent: {
+            fg: "#fdd9c8"
+          },
+          link: {
+            fg: "#dde9ff"
+          },
+          code: {
+            bg: "#653f0a",
+            fg: "#fbf1a7"
+          },
+          skeleton: {
+            from: "#a27016",
+            to: "rgba(162,112,22,0.5)"
+          }
+        },
+        selected: {
+          bg: "#65400b",
+          bg2: "#78521d",
+          border: "#65400b",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fbf1a7"
+          },
+          accent: {
+            fg: "#fdd9c8"
+          },
+          link: {
+            fg: "#dde9ff"
+          },
+          code: {
+            bg: "#653f0a",
+            fg: "#fbf1a7"
+          },
+          skeleton: {
+            from: "#a27016",
+            to: "rgba(162,112,22,0.5)"
+          }
+        }
+      },
+      critical: {
+        enabled: {
+          bg: "#ffffff",
+          bg2: "#fff5f5",
+          border: "#e2e6e9",
+          fg: "#a52112",
+          muted: {
+            fg: "#d72414"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#fff5f5",
+            fg: "#d72414"
+          },
+          skeleton: {
+            from: "#fee8e7",
+            to: "rgba(254,232,231,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#ffffff",
+          bg2: "#f9f9fa",
+          border: "#f9f9fa",
+          fg: "#e2e6e9",
+          muted: {
+            fg: "#f3f4f6"
+          },
+          accent: {
+            fg: "#f3f4f6"
+          },
+          link: {
+            fg: "#f3f4f6"
+          },
+          code: {
+            bg: "#ffffff",
+            fg: "#f3f4f6"
+          },
+          skeleton: {
+            from: "rgba(243,244,246,0.5)",
+            to: "rgba(243,244,246,0.25)"
+          }
+        },
+        hovered: {
+          bg: "#d72414",
+          bg2: "#dd3526",
+          border: "#d72414",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fbccc6"
+          },
+          accent: {
+            fg: "#fed3ca"
+          },
+          link: {
+            fg: "#f6e5ff"
+          },
+          code: {
+            bg: "#d72313",
+            fg: "#fbccc6"
+          },
+          skeleton: {
+            from: "#e83a24",
+            to: "rgba(232,58,36,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#6f1a11",
+          bg2: "#842c23",
+          border: "#6f1a11",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fbccc6"
+          },
+          accent: {
+            fg: "#fdd1ca"
+          },
+          link: {
+            fg: "#dfe4ff"
+          },
+          code: {
+            bg: "#6f1910",
+            fg: "#fbccc6"
+          },
+          skeleton: {
+            from: "#ae3121",
+            to: "rgba(174,49,33,0.5)"
+          }
+        },
+        selected: {
+          bg: "#6f1a11",
+          bg2: "#842c23",
+          border: "#6f1a11",
+          fg: "#ffffff",
+          muted: {
+            fg: "#fbccc6"
+          },
+          accent: {
+            fg: "#fdd1ca"
+          },
+          link: {
+            fg: "#dfe4ff"
+          },
+          code: {
+            bg: "#6f1910",
+            fg: "#fbccc6"
+          },
+          skeleton: {
+            from: "#ae3121",
+            to: "rgba(174,49,33,0.5)"
+          }
+        }
+      }
+    },
+    bleed: {
+      default: {
+        enabled: {
+          bg: "#ffffff",
+          bg2: "#f9f9fa",
+          border: "#ffffff",
+          fg: "#464c58",
+          muted: {
+            fg: "#5e6573"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#f9f9fa",
+            fg: "#5e6573"
+          },
+          skeleton: {
+            from: "#f3f4f6",
+            to: "rgba(243,244,246,0.5)"
+          }
+        },
+        hovered: {
+          bg: "#f9f9fa",
+          bg2: "#f3f3f5",
+          border: "#f9f9fa",
+          fg: "#31353f",
+          muted: {
+            fg: "#5e6573"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#f3f3f5",
+            fg: "#5e6573"
+          },
+          skeleton: {
+            from: "#edeef1",
+            to: "rgba(237,238,241,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#e5f1ff",
+          bg2: "#dcecff",
+          border: "#e5f1ff",
+          fg: "#073392",
+          muted: {
+            fg: "#0661fe"
+          },
+          accent: {
+            fg: "#d44236"
+          },
+          link: {
+            fg: "#055cfe"
+          },
+          code: {
+            bg: "#dcecff",
+            fg: "#0661fe"
+          },
+          skeleton: {
+            from: "#cee4ff",
+            to: "rgba(206,228,255,0.5)"
+          }
+        },
+        selected: {
+          bg: "#e5f1ff",
+          bg2: "#dcecff",
+          border: "#e5f1ff",
+          fg: "#073392",
+          muted: {
+            fg: "#0661fe"
+          },
+          accent: {
+            fg: "#d44236"
+          },
+          link: {
+            fg: "#055cfe"
+          },
+          code: {
+            bg: "#dcecff",
+            fg: "#0661fe"
+          },
+          skeleton: {
+            from: "#cee4ff",
+            to: "rgba(206,228,255,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#ffffff",
+          bg2: "#f9f9fa",
+          border: "#ffffff",
+          fg: "#e2e6e9",
+          muted: {
+            fg: "#f3f4f6"
+          },
+          accent: {
+            fg: "#f3f4f6"
+          },
+          link: {
+            fg: "#f3f4f6"
+          },
+          code: {
+            bg: "#ffffff",
+            fg: "#f3f4f6"
+          },
+          skeleton: {
+            from: "rgba(243,244,246,0.5)",
+            to: "rgba(243,244,246,0.25)"
+          }
+        }
+      },
+      primary: {
+        enabled: {
+          bg: "#ffffff",
+          bg2: "#f5faff",
+          border: "#ffffff",
+          fg: "#0345c9",
+          muted: {
+            fg: "#0661fe"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#f5faff",
+            fg: "#0661fe"
+          },
+          skeleton: {
+            from: "#e5f1ff",
+            to: "rgba(229,241,255,0.5)"
+          }
+        },
+        hovered: {
+          bg: "#f5faff",
+          bg2: "#ebf5ff",
+          border: "#f5faff",
+          fg: "#073392",
+          muted: {
+            fg: "#0661fe"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#ebf5ff",
+            fg: "#0661fe"
+          },
+          skeleton: {
+            from: "#dcecff",
+            to: "rgba(220,236,255,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#e5f1ff",
+          bg2: "#dcecff",
+          border: "#e5f1ff",
+          fg: "#073392",
+          muted: {
+            fg: "#0661fe"
+          },
+          accent: {
+            fg: "#d44236"
+          },
+          link: {
+            fg: "#055cfe"
+          },
+          code: {
+            bg: "#dcecff",
+            fg: "#0661fe"
+          },
+          skeleton: {
+            from: "#cee4ff",
+            to: "rgba(206,228,255,0.5)"
+          }
+        },
+        selected: {
+          bg: "#e5f1ff",
+          bg2: "#dcecff",
+          border: "#e5f1ff",
+          fg: "#073392",
+          muted: {
+            fg: "#0661fe"
+          },
+          accent: {
+            fg: "#d44236"
+          },
+          link: {
+            fg: "#055cfe"
+          },
+          code: {
+            bg: "#dcecff",
+            fg: "#0661fe"
+          },
+          skeleton: {
+            from: "#cee4ff",
+            to: "rgba(206,228,255,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#ffffff",
+          bg2: "#f9f9fa",
+          border: "#ffffff",
+          fg: "#e2e6e9",
+          muted: {
+            fg: "#f3f4f6"
+          },
+          accent: {
+            fg: "#f3f4f6"
+          },
+          link: {
+            fg: "#f3f4f6"
+          },
+          code: {
+            bg: "#ffffff",
+            fg: "#f3f4f6"
+          },
+          skeleton: {
+            from: "rgba(243,244,246,0.5)",
+            to: "rgba(243,244,246,0.25)"
+          }
+        }
+      },
+      positive: {
+        enabled: {
+          bg: "#ffffff",
+          bg2: "#f3fcf6",
+          border: "#ffffff",
+          fg: "#167941",
+          muted: {
+            fg: "#1ba755"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#f3fcf6",
+            fg: "#1ba755"
+          },
+          skeleton: {
+            from: "#dff6e9",
+            to: "rgba(223,246,233,0.5)"
+          }
+        },
+        hovered: {
+          bg: "#f3fcf6",
+          bg2: "#e8f9ed",
+          border: "#f3fcf6",
+          fg: "#124e2b",
+          muted: {
+            fg: "#1ba755"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#e8f9ed",
+            fg: "#1ba755"
+          },
+          skeleton: {
+            from: "#d5f3e1",
+            to: "rgba(213,243,225,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#dff6e9",
+          bg2: "#d5f3e1",
+          border: "#dff6e9",
+          fg: "#124e2b",
+          muted: {
+            fg: "#1ba755"
+          },
+          accent: {
+            fg: "#ce4431"
+          },
+          link: {
+            fg: "#055ee8"
+          },
+          code: {
+            bg: "#d5f3e1",
+            fg: "#1ba755"
+          },
+          skeleton: {
+            from: "#c3edd5",
+            to: "rgba(195,237,213,0.5)"
+          }
+        },
+        selected: {
+          bg: "#dff6e9",
+          bg2: "#d5f3e1",
+          border: "#dff6e9",
+          fg: "#124e2b",
+          muted: {
+            fg: "#1ba755"
+          },
+          accent: {
+            fg: "#ce4431"
+          },
+          link: {
+            fg: "#055ee8"
+          },
+          code: {
+            bg: "#d5f3e1",
+            fg: "#1ba755"
+          },
+          skeleton: {
+            from: "#c3edd5",
+            to: "rgba(195,237,213,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#ffffff",
+          bg2: "#f9f9fa",
+          border: "#ffffff",
+          fg: "#e2e6e9",
+          muted: {
+            fg: "#f3f4f6"
+          },
+          accent: {
+            fg: "#f3f4f6"
+          },
+          link: {
+            fg: "#f3f4f6"
+          },
+          code: {
+            bg: "#ffffff",
+            fg: "#f3f4f6"
+          },
+          skeleton: {
+            from: "rgba(243,244,246,0.5)",
+            to: "rgba(243,244,246,0.25)"
+          }
+        }
+      },
+      caution: {
+        enabled: {
+          bg: "#ffffff",
+          bg2: "#fffdf0",
+          border: "#ffffff",
+          fg: "#98670b",
+          muted: {
+            fg: "#cb920b"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#fffdf0",
+            fg: "#cb920b"
+          },
+          skeleton: {
+            from: "#fef7cd",
+            to: "rgba(254,247,205,0.5)"
+          }
+        },
+        hovered: {
+          bg: "#fffdf0",
+          bg2: "#fffbe2",
+          border: "#fffdf0",
+          fg: "#65400b",
+          muted: {
+            fg: "#cb920b"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#fffbe2",
+            fg: "#cb920b"
+          },
+          skeleton: {
+            from: "#fef5c1",
+            to: "rgba(254,245,193,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#fef7cd",
+          bg2: "#fef5c1",
+          border: "#fef7cd",
+          fg: "#65400b",
+          muted: {
+            fg: "#cb920b"
+          },
+          accent: {
+            fg: "#eb442b"
+          },
+          link: {
+            fg: "#065ecc"
+          },
+          code: {
+            bg: "#fef5c1",
+            fg: "#cb920b"
+          },
+          skeleton: {
+            from: "#fdefa5",
+            to: "rgba(253,239,165,0.5)"
+          }
+        },
+        selected: {
+          bg: "#fef7cd",
+          bg2: "#fef5c1",
+          border: "#fef7cd",
+          fg: "#65400b",
+          muted: {
+            fg: "#cb920b"
+          },
+          accent: {
+            fg: "#eb442b"
+          },
+          link: {
+            fg: "#065ecc"
+          },
+          code: {
+            bg: "#fef5c1",
+            fg: "#cb920b"
+          },
+          skeleton: {
+            from: "#fdefa5",
+            to: "rgba(253,239,165,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#ffffff",
+          bg2: "#f9f9fa",
+          border: "#ffffff",
+          fg: "#e2e6e9",
+          muted: {
+            fg: "#f3f4f6"
+          },
+          accent: {
+            fg: "#f3f4f6"
+          },
+          link: {
+            fg: "#f3f4f6"
+          },
+          code: {
+            bg: "#ffffff",
+            fg: "#f3f4f6"
+          },
+          skeleton: {
+            from: "rgba(243,244,246,0.5)",
+            to: "rgba(243,244,246,0.25)"
+          }
+        }
+      },
+      critical: {
+        enabled: {
+          bg: "#ffffff",
+          bg2: "#fff5f5",
+          border: "#ffffff",
+          fg: "#a52112",
+          muted: {
+            fg: "#d72414"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#fff5f5",
+            fg: "#d72414"
+          },
+          skeleton: {
+            from: "#fee8e7",
+            to: "rgba(254,232,231,0.5)"
+          }
+        },
+        hovered: {
+          bg: "#fff5f5",
+          bg2: "#ffebeb",
+          border: "#fff5f5",
+          fg: "#6f1a11",
+          muted: {
+            fg: "#d72414"
+          },
+          accent: {
+            fg: "#ec4636"
+          },
+          link: {
+            fg: "#0661fe"
+          },
+          code: {
+            bg: "#ffebeb",
+            fg: "#d72414"
+          },
+          skeleton: {
+            from: "#fedfde",
+            to: "rgba(254,223,222,0.5)"
+          }
+        },
+        pressed: {
+          bg: "#fee8e7",
+          bg2: "#fedfde",
+          border: "#fee8e7",
+          fg: "#6f1a11",
+          muted: {
+            fg: "#d72414"
+          },
+          accent: {
+            fg: "#eb4031"
+          },
+          link: {
+            fg: "#0658e6"
+          },
+          code: {
+            bg: "#fedfde",
+            fg: "#d72414"
+          },
+          skeleton: {
+            from: "#fdd3d1",
+            to: "rgba(253,211,209,0.5)"
+          }
+        },
+        selected: {
+          bg: "#fee8e7",
+          bg2: "#fedfde",
+          border: "#fee8e7",
+          fg: "#6f1a11",
+          muted: {
+            fg: "#d72414"
+          },
+          accent: {
+            fg: "#eb4031"
+          },
+          link: {
+            fg: "#0658e6"
+          },
+          code: {
+            bg: "#fedfde",
+            fg: "#d72414"
+          },
+          skeleton: {
+            from: "#fdd3d1",
+            to: "rgba(253,211,209,0.5)"
+          }
+        },
+        disabled: {
+          bg: "#ffffff",
+          bg2: "#f9f9fa",
+          border: "#ffffff",
+          fg: "#e2e6e9",
+          muted: {
+            fg: "#f3f4f6"
+          },
+          accent: {
+            fg: "#f3f4f6"
+          },
+          link: {
+            fg: "#f3f4f6"
+          },
+          code: {
+            bg: "#ffffff",
+            fg: "#f3f4f6"
+          },
+          skeleton: {
+            from: "rgba(243,244,246,0.5)",
+            to: "rgba(243,244,246,0.25)"
+          }
+        }
+      }
+    }
+  },
+  card: {
+    enabled: {
+      bg: "#ffffff",
+      bg2: "#f9f9fa",
+      fg: "#111213",
+      border: "#e2e6e9",
+      muted: {
+        fg: "#5e6573"
+      },
+      accent: {
+        fg: "#ec4636"
+      },
+      link: {
+        fg: "#0661fe"
+      },
+      code: {
+        bg: "#f9f9fa",
+        fg: "#5e6573"
+      },
+      skeleton: {
+        from: "#f3f4f6",
+        to: "rgba(243,244,246,0.5)"
+      }
+    },
+    disabled: {
+      bg: "#ffffff",
+      bg2: "#f9f9fa",
+      border: "#f9f9fa",
+      fg: "#e2e6e9",
+      muted: {
+        fg: "#f3f4f6"
+      },
+      accent: {
+        fg: "#f3f4f6"
+      },
+      link: {
+        fg: "#f3f4f6"
+      },
+      code: {
+        bg: "#ffffff",
+        fg: "#f3f4f6"
+      },
+      skeleton: {
+        from: "rgba(243,244,246,0.5)",
+        to: "rgba(243,244,246,0.25)"
+      }
+    },
+    hovered: {
+      bg: "#f9f9fa",
+      bg2: "#f3f3f5",
+      border: "#edeef1",
+      fg: "#31353f",
+      muted: {
+        fg: "#5e6573"
+      },
+      accent: {
+        fg: "#ec4636"
+      },
+      link: {
+        fg: "#0661fe"
+      },
+      code: {
+        bg: "#f3f3f5",
+        fg: "#5e6573"
+      },
+      skeleton: {
+        from: "#edeef1",
+        to: "rgba(237,238,241,0.5)"
+      }
+    },
+    pressed: {
+      bg: "#e5f1ff",
+      bg2: "#dcecff",
+      border: "#cee4ff",
+      fg: "#073392",
+      muted: {
+        fg: "#0661fe"
+      },
+      accent: {
+        fg: "#d44236"
+      },
+      link: {
+        fg: "#055cfe"
+      },
+      code: {
+        bg: "#dcecff",
+        fg: "#0661fe"
+      },
+      skeleton: {
+        from: "#cee4ff",
+        to: "rgba(206,228,255,0.5)"
+      }
+    },
+    selected: {
+      bg: "#388bff",
+      bg2: "#4196ff",
+      border: "#388bff",
+      fg: "#ffffff",
+      muted: {
+        fg: "#e5f1ff"
+      },
+      accent: {
+        fg: "#fef5ff"
+      },
+      link: {
+        fg: "#ebf9ff"
+      },
+      code: {
+        bg: "#3688ff",
+        fg: "#e5f1ff"
+      },
+      skeleton: {
+        from: "#3da2ff",
+        to: "rgba(61,162,255,0.5)"
+      }
+    }
+  },
+  dark: false,
+  input: {
+    default: {
+      enabled: {
+        bg: "#ffffff",
+        fg: "#111213",
+        border: "#e2e6e9",
+        placeholder: "#9aa1ac"
+      },
+      disabled: {
+        bg: "#f9f9fa",
+        fg: "#bec3cb",
+        border: "#f3f4f6",
+        placeholder: "#e2e6e9"
+      },
+      hovered: {
+        bg: "#ffffff",
+        fg: "#111213",
+        border: "#bec3cb",
+        placeholder: "#9aa1ac"
+      },
+      readOnly: {
+        bg: "#f9f9fa",
+        fg: "#31353f",
+        border: "#e2e6e9",
+        placeholder: "#9aa1ac"
+      }
+    },
+    invalid: {
+      enabled: {
+        bg: "#fff5f5",
+        fg: "#d72414",
+        border: "#fbccc6",
+        placeholder: "#f17165"
+      },
+      disabled: {
+        bg: "#fff5f5",
+        fg: "#d72414",
+        border: "#fbccc6",
+        placeholder: "#f17165"
+      },
+      hovered: {
+        bg: "#fff5f5",
+        fg: "#d72414",
+        border: "#fbccc6",
+        placeholder: "#f17165"
+      },
+      readOnly: {
+        bg: "#fff5f5",
+        fg: "#d72414",
+        border: "#fbccc6",
+        placeholder: "#f17165"
+      }
+    }
+  },
+  selectable: {
+    default: {
+      enabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f3f4f6",
+        fg: "#464c58",
+        muted: {
+          fg: "#5e6573"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#f9f9fa",
+          fg: "#5e6573"
+        },
+        skeleton: {
+          from: "#f3f4f6",
+          to: "rgba(243,244,246,0.5)"
+        }
+      },
+      hovered: {
+        bg: "#f9f9fa",
+        bg2: "#f3f3f5",
+        border: "#edeef1",
+        fg: "#31353f",
+        muted: {
+          fg: "#5e6573"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#f3f3f5",
+          fg: "#5e6573"
+        },
+        skeleton: {
+          from: "#edeef1",
+          to: "rgba(237,238,241,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#e5f1ff",
+        bg2: "#dcecff",
+        border: "#cee4ff",
+        fg: "#073392",
+        muted: {
+          fg: "#0661fe"
+        },
+        accent: {
+          fg: "#d44236"
+        },
+        link: {
+          fg: "#055cfe"
+        },
+        code: {
+          bg: "#dcecff",
+          fg: "#0661fe"
+        },
+        skeleton: {
+          from: "#cee4ff",
+          to: "rgba(206,228,255,0.5)"
+        }
+      },
+      selected: {
+        bg: "#388bff",
+        bg2: "#4196ff",
+        border: "#388bff",
+        fg: "#ffffff",
+        muted: {
+          fg: "#e5f1ff"
+        },
+        accent: {
+          fg: "#fef5ff"
+        },
+        link: {
+          fg: "#ebf9ff"
+        },
+        code: {
+          bg: "#3688ff",
+          fg: "#e5f1ff"
+        },
+        skeleton: {
+          from: "#3da2ff",
+          to: "rgba(61,162,255,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f9f9fa",
+        fg: "#e2e6e9",
+        muted: {
+          fg: "#f3f4f6"
+        },
+        accent: {
+          fg: "#f3f4f6"
+        },
+        link: {
+          fg: "#f3f4f6"
+        },
+        code: {
+          bg: "#ffffff",
+          fg: "#f3f4f6"
+        },
+        skeleton: {
+          from: "rgba(243,244,246,0.5)",
+          to: "rgba(243,244,246,0.25)"
+        }
+      }
+    },
+    primary: {
+      enabled: {
+        bg: "#ffffff",
+        bg2: "#f5faff",
+        border: "#e5f1ff",
+        fg: "#0345c9",
+        muted: {
+          fg: "#0661fe"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#f5faff",
+          fg: "#0661fe"
+        },
+        skeleton: {
+          from: "#e5f1ff",
+          to: "rgba(229,241,255,0.5)"
+        }
+      },
+      hovered: {
+        bg: "#f5faff",
+        bg2: "#ebf5ff",
+        border: "#dcecff",
+        fg: "#073392",
+        muted: {
+          fg: "#0661fe"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#ebf5ff",
+          fg: "#0661fe"
+        },
+        skeleton: {
+          from: "#dcecff",
+          to: "rgba(220,236,255,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#e5f1ff",
+        bg2: "#dcecff",
+        border: "#cee4ff",
+        fg: "#073392",
+        muted: {
+          fg: "#0661fe"
+        },
+        accent: {
+          fg: "#d44236"
+        },
+        link: {
+          fg: "#055cfe"
+        },
+        code: {
+          bg: "#dcecff",
+          fg: "#0661fe"
+        },
+        skeleton: {
+          from: "#cee4ff",
+          to: "rgba(206,228,255,0.5)"
+        }
+      },
+      selected: {
+        bg: "#388bff",
+        bg2: "#4196ff",
+        border: "#388bff",
+        fg: "#ffffff",
+        muted: {
+          fg: "#e5f1ff"
+        },
+        accent: {
+          fg: "#fef5ff"
+        },
+        link: {
+          fg: "#ebf9ff"
+        },
+        code: {
+          bg: "#3688ff",
+          fg: "#e5f1ff"
+        },
+        skeleton: {
+          from: "#3da2ff",
+          to: "rgba(61,162,255,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f9f9fa",
+        fg: "#e2e6e9",
+        muted: {
+          fg: "#f3f4f6"
+        },
+        accent: {
+          fg: "#f3f4f6"
+        },
+        link: {
+          fg: "#f3f4f6"
+        },
+        code: {
+          bg: "#ffffff",
+          fg: "#f3f4f6"
+        },
+        skeleton: {
+          from: "rgba(243,244,246,0.5)",
+          to: "rgba(243,244,246,0.25)"
+        }
+      }
+    },
+    positive: {
+      enabled: {
+        bg: "#ffffff",
+        bg2: "#f3fcf6",
+        border: "#dff6e9",
+        fg: "#167941",
+        muted: {
+          fg: "#1ba755"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#f3fcf6",
+          fg: "#1ba755"
+        },
+        skeleton: {
+          from: "#dff6e9",
+          to: "rgba(223,246,233,0.5)"
+        }
+      },
+      hovered: {
+        bg: "#f3fcf6",
+        bg2: "#e8f9ed",
+        border: "#d5f3e1",
+        fg: "#124e2b",
+        muted: {
+          fg: "#1ba755"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#e8f9ed",
+          fg: "#1ba755"
+        },
+        skeleton: {
+          from: "#d5f3e1",
+          to: "rgba(213,243,225,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#dff6e9",
+        bg2: "#d5f3e1",
+        border: "#c3edd5",
+        fg: "#124e2b",
+        muted: {
+          fg: "#1ba755"
+        },
+        accent: {
+          fg: "#ce4431"
+        },
+        link: {
+          fg: "#055ee8"
+        },
+        code: {
+          bg: "#d5f3e1",
+          fg: "#1ba755"
+        },
+        skeleton: {
+          from: "#c3edd5",
+          to: "rgba(195,237,213,0.5)"
+        }
+      },
+      selected: {
+        bg: "#21d46c",
+        bg2: "#31da7b",
+        border: "#21d46c",
+        fg: "#ffffff",
+        muted: {
+          fg: "#dff6e9"
+        },
+        accent: {
+          fg: "#fefbf1"
+        },
+        link: {
+          fg: "#e8fdff"
+        },
+        code: {
+          bg: "#1fd268",
+          fg: "#dff6e9"
+        },
+        skeleton: {
+          from: "#31e185",
+          to: "rgba(49,225,133,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f9f9fa",
+        fg: "#e2e6e9",
+        muted: {
+          fg: "#f3f4f6"
+        },
+        accent: {
+          fg: "#f3f4f6"
+        },
+        link: {
+          fg: "#f3f4f6"
+        },
+        code: {
+          bg: "#ffffff",
+          fg: "#f3f4f6"
+        },
+        skeleton: {
+          from: "rgba(243,244,246,0.5)",
+          to: "rgba(243,244,246,0.25)"
+        }
+      }
+    },
+    caution: {
+      enabled: {
+        bg: "#ffffff",
+        bg2: "#fffdf0",
+        border: "#fef7cd",
+        fg: "#98670b",
+        muted: {
+          fg: "#cb920b"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#fffdf0",
+          fg: "#cb920b"
+        },
+        skeleton: {
+          from: "#fef7cd",
+          to: "rgba(254,247,205,0.5)"
+        }
+      },
+      hovered: {
+        bg: "#fffdf0",
+        bg2: "#fffbe2",
+        border: "#fef5c1",
+        fg: "#65400b",
+        muted: {
+          fg: "#cb920b"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#fffbe2",
+          fg: "#cb920b"
+        },
+        skeleton: {
+          from: "#fef5c1",
+          to: "rgba(254,245,193,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#fef7cd",
+        bg2: "#fef5c1",
+        border: "#fdefa5",
+        fg: "#65400b",
+        muted: {
+          fg: "#cb920b"
+        },
+        accent: {
+          fg: "#eb442b"
+        },
+        link: {
+          fg: "#065ecc"
+        },
+        code: {
+          bg: "#fef5c1",
+          fg: "#cb920b"
+        },
+        skeleton: {
+          from: "#fdefa5",
+          to: "rgba(253,239,165,0.5)"
+        }
+      },
+      selected: {
+        bg: "#f3bc16",
+        bg2: "#f5c227",
+        border: "#f3bc16",
+        fg: "#ffffff",
+        muted: {
+          fg: "#fef7cd"
+        },
+        accent: {
+          fg: "#fff9e9"
+        },
+        link: {
+          fg: "#fefbff"
+        },
+        code: {
+          bg: "#f3bb15",
+          fg: "#fef7cd"
+        },
+        skeleton: {
+          from: "#f8cd20",
+          to: "rgba(248,205,32,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f9f9fa",
+        fg: "#e2e6e9",
+        muted: {
+          fg: "#f3f4f6"
+        },
+        accent: {
+          fg: "#f3f4f6"
+        },
+        link: {
+          fg: "#f3f4f6"
+        },
+        code: {
+          bg: "#ffffff",
+          fg: "#f3f4f6"
+        },
+        skeleton: {
+          from: "rgba(243,244,246,0.5)",
+          to: "rgba(243,244,246,0.25)"
+        }
+      }
+    },
+    critical: {
+      enabled: {
+        bg: "#ffffff",
+        bg2: "#fff5f5",
+        border: "#fee8e7",
+        fg: "#a52112",
+        muted: {
+          fg: "#d72414"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#fff5f5",
+          fg: "#d72414"
+        },
+        skeleton: {
+          from: "#fee8e7",
+          to: "rgba(254,232,231,0.5)"
+        }
+      },
+      hovered: {
+        bg: "#fff5f5",
+        bg2: "#ffebeb",
+        border: "#fedfde",
+        fg: "#6f1a11",
+        muted: {
+          fg: "#d72414"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#ffebeb",
+          fg: "#d72414"
+        },
+        skeleton: {
+          from: "#fedfde",
+          to: "rgba(254,223,222,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#fee8e7",
+        bg2: "#fedfde",
+        border: "#fdd3d1",
+        fg: "#6f1a11",
+        muted: {
+          fg: "#d72414"
+        },
+        accent: {
+          fg: "#eb4031"
+        },
+        link: {
+          fg: "#0658e6"
+        },
+        code: {
+          bg: "#fedfde",
+          fg: "#d72414"
+        },
+        skeleton: {
+          from: "#fdd3d1",
+          to: "rgba(253,211,209,0.5)"
+        }
+      },
+      selected: {
+        bg: "#ec4636",
+        bg2: "#ef5545",
+        border: "#ec4636",
+        fg: "#ffffff",
+        muted: {
+          fg: "#fee8e7"
+        },
+        accent: {
+          fg: "#ffeeec"
+        },
+        link: {
+          fg: "#fdf5ff"
+        },
+        code: {
+          bg: "#ec4334",
+          fg: "#fee8e7"
+        },
+        skeleton: {
+          from: "#f45943",
+          to: "rgba(244,89,67,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f9f9fa",
+        fg: "#e2e6e9",
+        muted: {
+          fg: "#f3f4f6"
+        },
+        accent: {
+          fg: "#f3f4f6"
+        },
+        link: {
+          fg: "#f3f4f6"
+        },
+        code: {
+          bg: "#ffffff",
+          fg: "#f3f4f6"
+        },
+        skeleton: {
+          from: "rgba(243,244,246,0.5)",
+          to: "rgba(243,244,246,0.25)"
+        }
+      }
+    }
+  },
+  spot: {
+    gray: "#788191",
+    blue: "#388bff",
+    purple: "#a065d7",
+    magenta: "#ea3e77",
+    red: "#ec4636",
+    orange: "#ef6115",
+    yellow: "#f3bc16",
+    green: "#21d46c",
+    cyan: "#0ecff1"
+  },
+  syntax: {
+    atrule: "#843dc7",
+    attrName: "#1ba755",
+    attrValue: "#cb920b",
+    attribute: "#cb920b",
+    boolean: "#843dc7",
+    builtin: "#843dc7",
+    cdata: "#cb920b",
+    char: "#cb920b",
+    class: "#c24e0f",
+    className: "#0e9ebe",
+    comment: "#9aa1ac",
+    constant: "#843dc7",
+    deleted: "#d72414",
+    doctype: "#9aa1ac",
+    entity: "#d72414",
+    function: "#1ba755",
+    hexcode: "#0661fe",
+    id: "#843dc7",
+    important: "#843dc7",
+    inserted: "#cb920b",
+    keyword: "#d11a60",
+    number: "#843dc7",
+    operator: "#d11a60",
+    prolog: "#9aa1ac",
+    property: "#0661fe",
+    pseudoClass: "#cb920b",
+    pseudoElement: "#cb920b",
+    punctuation: "#5e6573",
+    regex: "#0661fe",
+    selector: "#d72414",
+    string: "#cb920b",
+    symbol: "#843dc7",
+    tag: "#d72414",
+    unit: "#c24e0f",
+    url: "#d72414",
+    variable: "#d72414"
+  },
+  solid: {
+    default: {
+      enabled: {
+        bg: "#788191",
+        bg2: "#848d9d",
+        border: "#788191",
+        fg: "#ffffff",
+        muted: {
+          fg: "#f3f4f6"
+        },
+        accent: {
+          fg: "#fef4f5"
+        },
+        link: {
+          fg: "#f1f8ff"
+        },
+        code: {
+          bg: "#757e8e",
+          fg: "#f3f4f6"
+        },
+        skeleton: {
+          from: "#929bac",
+          to: "rgba(146,155,172,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#e2e6e9",
+        bg2: "#e5e8eb",
+        border: "#e2e6e9",
+        fg: "#ffffff",
+        muted: {
+          fg: "#f9f9fa"
+        },
+        accent: {
+          fg: "#f9f9fa"
+        },
+        link: {
+          fg: "#f9f9fa"
+        },
+        code: {
+          bg: "#e2e6e9",
+          fg: "#f9f9fa"
+        },
+        skeleton: {
+          from: "#e8ebee",
+          to: "rgba(232,235,238,0.5)"
+        }
+      },
+      hovered: {
+        bg: "#5e6573",
+        bg2: "#6d7482",
+        border: "#5e6573",
+        fg: "#ffffff",
+        muted: {
+          fg: "#e2e6e9"
+        },
+        accent: {
+          fg: "#fce0e0"
+        },
+        link: {
+          fg: "#dcedff"
+        },
+        code: {
+          bg: "#5c6371",
+          fg: "#e2e6e9"
+        },
+        skeleton: {
+          from: "#7d8596",
+          to: "rgba(125,133,150,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#31353f",
+        bg2: "#444954",
+        border: "#31353f",
+        fg: "#ffffff",
+        muted: {
+          fg: "#e2e6e9"
+        },
+        accent: {
+          fg: "#fcd7d4"
+        },
+        link: {
+          fg: "#d2e7ff"
+        },
+        code: {
+          bg: "#30343e",
+          fg: "#e2e6e9"
+        },
+        skeleton: {
+          from: "#595f6e",
+          to: "rgba(89,95,110,0.5)"
+        }
+      },
+      selected: {
+        bg: "#073392",
+        bg2: "#1346a5",
+        border: "#073392",
+        fg: "#ffffff",
+        muted: {
+          fg: "#c7e1ff"
+        },
+        accent: {
+          fg: "#fbd6e7"
+        },
+        link: {
+          fg: "#c9e7ff"
+        },
+        code: {
+          bg: "#073292",
+          fg: "#c7e1ff"
+        },
+        skeleton: {
+          from: "#0e5cd0",
+          to: "rgba(14,92,208,0.5)"
+        }
+      }
+    },
+    transparent: {
+      enabled: {
+        bg: "#788191",
+        bg2: "#848d9d",
+        border: "#788191",
+        fg: "#ffffff",
+        muted: {
+          fg: "#f3f4f6"
+        },
+        accent: {
+          fg: "#fef4f5"
+        },
+        link: {
+          fg: "#f1f8ff"
+        },
+        code: {
+          bg: "#757e8e",
+          fg: "#f3f4f6"
+        },
+        skeleton: {
+          from: "#929bac",
+          to: "rgba(146,155,172,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#e2e6e9",
+        bg2: "#e5e8eb",
+        border: "#e2e6e9",
+        fg: "#ffffff",
+        muted: {
+          fg: "#f9f9fa"
+        },
+        accent: {
+          fg: "#f9f9fa"
+        },
+        link: {
+          fg: "#f9f9fa"
+        },
+        code: {
+          bg: "#e2e6e9",
+          fg: "#f9f9fa"
+        },
+        skeleton: {
+          from: "#e8ebee",
+          to: "rgba(232,235,238,0.5)"
+        }
+      },
+      hovered: {
+        bg: "#5e6573",
+        bg2: "#6d7482",
+        border: "#5e6573",
+        fg: "#ffffff",
+        muted: {
+          fg: "#e2e6e9"
+        },
+        accent: {
+          fg: "#fce0e0"
+        },
+        link: {
+          fg: "#dcedff"
+        },
+        code: {
+          bg: "#5c6371",
+          fg: "#e2e6e9"
+        },
+        skeleton: {
+          from: "#7d8596",
+          to: "rgba(125,133,150,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#31353f",
+        bg2: "#444954",
+        border: "#31353f",
+        fg: "#ffffff",
+        muted: {
+          fg: "#e2e6e9"
+        },
+        accent: {
+          fg: "#fcd7d4"
+        },
+        link: {
+          fg: "#d2e7ff"
+        },
+        code: {
+          bg: "#30343e",
+          fg: "#e2e6e9"
+        },
+        skeleton: {
+          from: "#595f6e",
+          to: "rgba(89,95,110,0.5)"
+        }
+      },
+      selected: {
+        bg: "#073392",
+        bg2: "#1346a5",
+        border: "#073392",
+        fg: "#ffffff",
+        muted: {
+          fg: "#c7e1ff"
+        },
+        accent: {
+          fg: "#fbd6e7"
+        },
+        link: {
+          fg: "#c9e7ff"
+        },
+        code: {
+          bg: "#073292",
+          fg: "#c7e1ff"
+        },
+        skeleton: {
+          from: "#0e5cd0",
+          to: "rgba(14,92,208,0.5)"
+        }
+      }
+    },
+    primary: {
+      enabled: {
+        bg: "#388bff",
+        bg2: "#4196ff",
+        border: "#388bff",
+        fg: "#ffffff",
+        muted: {
+          fg: "#e5f1ff"
+        },
+        accent: {
+          fg: "#fef5ff"
+        },
+        link: {
+          fg: "#ebf9ff"
+        },
+        code: {
+          bg: "#3688ff",
+          fg: "#e5f1ff"
+        },
+        skeleton: {
+          from: "#3da2ff",
+          to: "rgba(61,162,255,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#e2e6e9",
+        bg2: "#e5e8eb",
+        border: "#e2e6e9",
+        fg: "#ffffff",
+        muted: {
+          fg: "#f9f9fa"
+        },
+        accent: {
+          fg: "#f9f9fa"
+        },
+        link: {
+          fg: "#f9f9fa"
+        },
+        code: {
+          bg: "#e2e6e9",
+          fg: "#f9f9fa"
+        },
+        skeleton: {
+          from: "#e8ebee",
+          to: "rgba(232,235,238,0.5)"
+        }
+      },
+      hovered: {
+        bg: "#0661fe",
+        bg2: "#1270fe",
+        border: "#0661fe",
+        fg: "#ffffff",
+        muted: {
+          fg: "#c7e1ff"
+        },
+        accent: {
+          fg: "#fbdfff"
+        },
+        link: {
+          fg: "#c8ecff"
+        },
+        code: {
+          bg: "#065ffe",
+          fg: "#c7e1ff"
+        },
+        skeleton: {
+          from: "#0d81ff",
+          to: "rgba(13,129,255,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#073392",
+        bg2: "#1346a5",
+        border: "#073392",
+        fg: "#ffffff",
+        muted: {
+          fg: "#c7e1ff"
+        },
+        accent: {
+          fg: "#fbd6e7"
+        },
+        link: {
+          fg: "#c9e7ff"
+        },
+        code: {
+          bg: "#073292",
+          fg: "#c7e1ff"
+        },
+        skeleton: {
+          from: "#0e5cd0",
+          to: "rgba(14,92,208,0.5)"
+        }
+      },
+      selected: {
+        bg: "#073392",
+        bg2: "#1346a5",
+        border: "#073392",
+        fg: "#ffffff",
+        muted: {
+          fg: "#c7e1ff"
+        },
+        accent: {
+          fg: "#fbd6e7"
+        },
+        link: {
+          fg: "#c9e7ff"
+        },
+        code: {
+          bg: "#073292",
+          fg: "#c7e1ff"
+        },
+        skeleton: {
+          from: "#0e5cd0",
+          to: "rgba(14,92,208,0.5)"
+        }
+      }
+    },
+    positive: {
+      enabled: {
+        bg: "#21d46c",
+        bg2: "#31da7b",
+        border: "#21d46c",
+        fg: "#ffffff",
+        muted: {
+          fg: "#dff6e9"
+        },
+        accent: {
+          fg: "#fefbf1"
+        },
+        link: {
+          fg: "#e8fdff"
+        },
+        code: {
+          bg: "#1fd268",
+          fg: "#dff6e9"
+        },
+        skeleton: {
+          from: "#31e185",
+          to: "rgba(49,225,133,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#e2e6e9",
+        bg2: "#e5e8eb",
+        border: "#e2e6e9",
+        fg: "#ffffff",
+        muted: {
+          fg: "#f9f9fa"
+        },
+        accent: {
+          fg: "#f9f9fa"
+        },
+        link: {
+          fg: "#f9f9fa"
+        },
+        code: {
+          bg: "#e2e6e9",
+          fg: "#f9f9fa"
+        },
+        skeleton: {
+          from: "#e8ebee",
+          to: "rgba(232,235,238,0.5)"
+        }
+      },
+      hovered: {
+        bg: "#1ba755",
+        bg2: "#2bb266",
+        border: "#1ba755",
+        fg: "#ffffff",
+        muted: {
+          fg: "#b1eccb"
+        },
+        accent: {
+          fg: "#fbedd9"
+        },
+        link: {
+          fg: "#cdf5ff"
+        },
+        code: {
+          bg: "#1aa552",
+          fg: "#b1eccb"
+        },
+        skeleton: {
+          from: "#2bc272",
+          to: "rgba(43,194,114,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#124e2b",
+        bg2: "#236541",
+        border: "#124e2b",
+        fg: "#ffffff",
+        muted: {
+          fg: "#b1eccb"
+        },
+        accent: {
+          fg: "#fbdcd0"
+        },
+        link: {
+          fg: "#cbeaff"
+        },
+        code: {
+          bg: "#114d29",
+          fg: "#b1eccb"
+        },
+        skeleton: {
+          from: "#23844f",
+          to: "rgba(35,132,79,0.5)"
+        }
+      },
+      selected: {
+        bg: "#124e2b",
+        bg2: "#236541",
+        border: "#124e2b",
+        fg: "#ffffff",
+        muted: {
+          fg: "#b1eccb"
+        },
+        accent: {
+          fg: "#fbdcd0"
+        },
+        link: {
+          fg: "#cbeaff"
+        },
+        code: {
+          bg: "#114d29",
+          fg: "#b1eccb"
+        },
+        skeleton: {
+          from: "#23844f",
+          to: "rgba(35,132,79,0.5)"
+        }
+      }
+    },
+    caution: {
+      enabled: {
+        bg: "#f3bc16",
+        bg2: "#f5c227",
+        border: "#f3bc16",
+        fg: "#ffffff",
+        muted: {
+          fg: "#fef7cd"
+        },
+        accent: {
+          fg: "#fff9e9"
+        },
+        link: {
+          fg: "#fefbff"
+        },
+        code: {
+          bg: "#f3bb15",
+          fg: "#fef7cd"
+        },
+        skeleton: {
+          from: "#f8cd20",
+          to: "rgba(248,205,32,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#e2e6e9",
+        bg2: "#e5e8eb",
+        border: "#e2e6e9",
+        fg: "#ffffff",
+        muted: {
+          fg: "#f9f9fa"
+        },
+        accent: {
+          fg: "#f9f9fa"
+        },
+        link: {
+          fg: "#f9f9fa"
+        },
+        code: {
+          bg: "#e2e6e9",
+          fg: "#f9f9fa"
+        },
+        skeleton: {
+          from: "#e8ebee",
+          to: "rgba(232,235,238,0.5)"
+        }
+      },
+      hovered: {
+        bg: "#cb920b",
+        bg2: "#d29c1d",
+        border: "#cb920b",
+        fg: "#ffffff",
+        muted: {
+          fg: "#fbf1a7"
+        },
+        accent: {
+          fg: "#fee9c8"
+        },
+        link: {
+          fg: "#f4f2ff"
+        },
+        code: {
+          bg: "#cb910a",
+          fg: "#fbf1a7"
+        },
+        skeleton: {
+          from: "#e0ad16",
+          to: "rgba(224,173,22,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#65400b",
+        bg2: "#78521d",
+        border: "#65400b",
+        fg: "#ffffff",
+        muted: {
+          fg: "#fbf1a7"
+        },
+        accent: {
+          fg: "#fdd9c8"
+        },
+        link: {
+          fg: "#dde9ff"
+        },
+        code: {
+          bg: "#653f0a",
+          fg: "#fbf1a7"
+        },
+        skeleton: {
+          from: "#a27016",
+          to: "rgba(162,112,22,0.5)"
+        }
+      },
+      selected: {
+        bg: "#65400b",
+        bg2: "#78521d",
+        border: "#65400b",
+        fg: "#ffffff",
+        muted: {
+          fg: "#fbf1a7"
+        },
+        accent: {
+          fg: "#fdd9c8"
+        },
+        link: {
+          fg: "#dde9ff"
+        },
+        code: {
+          bg: "#653f0a",
+          fg: "#fbf1a7"
+        },
+        skeleton: {
+          from: "#a27016",
+          to: "rgba(162,112,22,0.5)"
+        }
+      }
+    },
+    critical: {
+      enabled: {
+        bg: "#ec4636",
+        bg2: "#ef5545",
+        border: "#ec4636",
+        fg: "#ffffff",
+        muted: {
+          fg: "#fee8e7"
+        },
+        accent: {
+          fg: "#ffeeec"
+        },
+        link: {
+          fg: "#fdf5ff"
+        },
+        code: {
+          bg: "#ec4334",
+          fg: "#fee8e7"
+        },
+        skeleton: {
+          from: "#f45943",
+          to: "rgba(244,89,67,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#e2e6e9",
+        bg2: "#e5e8eb",
+        border: "#e2e6e9",
+        fg: "#ffffff",
+        muted: {
+          fg: "#f9f9fa"
+        },
+        accent: {
+          fg: "#f9f9fa"
+        },
+        link: {
+          fg: "#f9f9fa"
+        },
+        code: {
+          bg: "#e2e6e9",
+          fg: "#f9f9fa"
+        },
+        skeleton: {
+          from: "#e8ebee",
+          to: "rgba(232,235,238,0.5)"
+        }
+      },
+      hovered: {
+        bg: "#d72414",
+        bg2: "#dd3526",
+        border: "#d72414",
+        fg: "#ffffff",
+        muted: {
+          fg: "#fbccc6"
+        },
+        accent: {
+          fg: "#fed3ca"
+        },
+        link: {
+          fg: "#f6e5ff"
+        },
+        code: {
+          bg: "#d72313",
+          fg: "#fbccc6"
+        },
+        skeleton: {
+          from: "#e83a24",
+          to: "rgba(232,58,36,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#6f1a11",
+        bg2: "#842c23",
+        border: "#6f1a11",
+        fg: "#ffffff",
+        muted: {
+          fg: "#fbccc6"
+        },
+        accent: {
+          fg: "#fdd1ca"
+        },
+        link: {
+          fg: "#dfe4ff"
+        },
+        code: {
+          bg: "#6f1910",
+          fg: "#fbccc6"
+        },
+        skeleton: {
+          from: "#ae3121",
+          to: "rgba(174,49,33,0.5)"
+        }
+      },
+      selected: {
+        bg: "#6f1a11",
+        bg2: "#842c23",
+        border: "#6f1a11",
+        fg: "#ffffff",
+        muted: {
+          fg: "#fbccc6"
+        },
+        accent: {
+          fg: "#fdd1ca"
+        },
+        link: {
+          fg: "#dfe4ff"
+        },
+        code: {
+          bg: "#6f1910",
+          fg: "#fbccc6"
+        },
+        skeleton: {
+          from: "#ae3121",
+          to: "rgba(174,49,33,0.5)"
+        }
+      }
+    }
+  },
+  muted: {
+    default: {
+      enabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f3f4f6",
+        fg: "#464c58",
+        muted: {
+          fg: "#5e6573"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#f9f9fa",
+          fg: "#5e6573"
+        },
+        skeleton: {
+          from: "#f3f4f6",
+          to: "rgba(243,244,246,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f9f9fa",
+        fg: "#e2e6e9",
+        muted: {
+          fg: "#f3f4f6"
+        },
+        accent: {
+          fg: "#f3f4f6"
+        },
+        link: {
+          fg: "#f3f4f6"
+        },
+        code: {
+          bg: "#ffffff",
+          fg: "#f3f4f6"
+        },
+        skeleton: {
+          from: "rgba(243,244,246,0.5)",
+          to: "rgba(243,244,246,0.25)"
+        }
+      },
+      hovered: {
+        bg: "#f9f9fa",
+        bg2: "#f3f3f5",
+        border: "#edeef1",
+        fg: "#31353f",
+        muted: {
+          fg: "#5e6573"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#f3f3f5",
+          fg: "#5e6573"
+        },
+        skeleton: {
+          from: "#edeef1",
+          to: "rgba(237,238,241,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#e5f1ff",
+        bg2: "#dcecff",
+        border: "#cee4ff",
+        fg: "#073392",
+        muted: {
+          fg: "#0661fe"
+        },
+        accent: {
+          fg: "#d44236"
+        },
+        link: {
+          fg: "#055cfe"
+        },
+        code: {
+          bg: "#dcecff",
+          fg: "#0661fe"
+        },
+        skeleton: {
+          from: "#cee4ff",
+          to: "rgba(206,228,255,0.5)"
+        }
+      },
+      selected: {
+        bg: "#e5f1ff",
+        bg2: "#dcecff",
+        border: "#cee4ff",
+        fg: "#073392",
+        muted: {
+          fg: "#0661fe"
+        },
+        accent: {
+          fg: "#d44236"
+        },
+        link: {
+          fg: "#055cfe"
+        },
+        code: {
+          bg: "#dcecff",
+          fg: "#0661fe"
+        },
+        skeleton: {
+          from: "#cee4ff",
+          to: "rgba(206,228,255,0.5)"
+        }
+      }
+    },
+    transparent: {
+      enabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f3f4f6",
+        fg: "#464c58",
+        muted: {
+          fg: "#5e6573"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#f9f9fa",
+          fg: "#5e6573"
+        },
+        skeleton: {
+          from: "#f3f4f6",
+          to: "rgba(243,244,246,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f9f9fa",
+        fg: "#e2e6e9",
+        muted: {
+          fg: "#f3f4f6"
+        },
+        accent: {
+          fg: "#f3f4f6"
+        },
+        link: {
+          fg: "#f3f4f6"
+        },
+        code: {
+          bg: "#ffffff",
+          fg: "#f3f4f6"
+        },
+        skeleton: {
+          from: "rgba(243,244,246,0.5)",
+          to: "rgba(243,244,246,0.25)"
+        }
+      },
+      hovered: {
+        bg: "#f9f9fa",
+        bg2: "#f3f3f5",
+        border: "#edeef1",
+        fg: "#31353f",
+        muted: {
+          fg: "#5e6573"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#f3f3f5",
+          fg: "#5e6573"
+        },
+        skeleton: {
+          from: "#edeef1",
+          to: "rgba(237,238,241,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#e5f1ff",
+        bg2: "#dcecff",
+        border: "#cee4ff",
+        fg: "#073392",
+        muted: {
+          fg: "#0661fe"
+        },
+        accent: {
+          fg: "#d44236"
+        },
+        link: {
+          fg: "#055cfe"
+        },
+        code: {
+          bg: "#dcecff",
+          fg: "#0661fe"
+        },
+        skeleton: {
+          from: "#cee4ff",
+          to: "rgba(206,228,255,0.5)"
+        }
+      },
+      selected: {
+        bg: "#e5f1ff",
+        bg2: "#dcecff",
+        border: "#cee4ff",
+        fg: "#073392",
+        muted: {
+          fg: "#0661fe"
+        },
+        accent: {
+          fg: "#d44236"
+        },
+        link: {
+          fg: "#055cfe"
+        },
+        code: {
+          bg: "#dcecff",
+          fg: "#0661fe"
+        },
+        skeleton: {
+          from: "#cee4ff",
+          to: "rgba(206,228,255,0.5)"
+        }
       }
     },
-    switch: {
-      width: 21,
-      height: 13,
-      padding: 2,
-      transitionDurationMs: 150,
-      transitionTimingFunction: "ease-out",
-      focusRing: {
-        offset: 1,
-        width: 1
+    primary: {
+      enabled: {
+        bg: "#ffffff",
+        bg2: "#f5faff",
+        border: "#e5f1ff",
+        fg: "#0345c9",
+        muted: {
+          fg: "#0661fe"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#f5faff",
+          fg: "#0661fe"
+        },
+        skeleton: {
+          from: "#e5f1ff",
+          to: "rgba(229,241,255,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f9f9fa",
+        fg: "#e2e6e9",
+        muted: {
+          fg: "#f3f4f6"
+        },
+        accent: {
+          fg: "#f3f4f6"
+        },
+        link: {
+          fg: "#f3f4f6"
+        },
+        code: {
+          bg: "#ffffff",
+          fg: "#f3f4f6"
+        },
+        skeleton: {
+          from: "rgba(243,244,246,0.5)",
+          to: "rgba(243,244,246,0.25)"
+        }
+      },
+      hovered: {
+        bg: "#f5faff",
+        bg2: "#ebf5ff",
+        border: "#dcecff",
+        fg: "#073392",
+        muted: {
+          fg: "#0661fe"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#ebf5ff",
+          fg: "#0661fe"
+        },
+        skeleton: {
+          from: "#dcecff",
+          to: "rgba(220,236,255,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#e5f1ff",
+        bg2: "#dcecff",
+        border: "#cee4ff",
+        fg: "#073392",
+        muted: {
+          fg: "#0661fe"
+        },
+        accent: {
+          fg: "#d44236"
+        },
+        link: {
+          fg: "#055cfe"
+        },
+        code: {
+          bg: "#dcecff",
+          fg: "#0661fe"
+        },
+        skeleton: {
+          from: "#cee4ff",
+          to: "rgba(206,228,255,0.5)"
+        }
+      },
+      selected: {
+        bg: "#e5f1ff",
+        bg2: "#dcecff",
+        border: "#cee4ff",
+        fg: "#073392",
+        muted: {
+          fg: "#0661fe"
+        },
+        accent: {
+          fg: "#d44236"
+        },
+        link: {
+          fg: "#055cfe"
+        },
+        code: {
+          bg: "#dcecff",
+          fg: "#0661fe"
+        },
+        skeleton: {
+          from: "#cee4ff",
+          to: "rgba(206,228,255,0.5)"
+        }
       }
     },
-    border: {
-      width: 1
+    positive: {
+      enabled: {
+        bg: "#ffffff",
+        bg2: "#f3fcf6",
+        border: "#dff6e9",
+        fg: "#167941",
+        muted: {
+          fg: "#1ba755"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#f3fcf6",
+          fg: "#1ba755"
+        },
+        skeleton: {
+          from: "#dff6e9",
+          to: "rgba(223,246,233,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f9f9fa",
+        fg: "#e2e6e9",
+        muted: {
+          fg: "#f3f4f6"
+        },
+        accent: {
+          fg: "#f3f4f6"
+        },
+        link: {
+          fg: "#f3f4f6"
+        },
+        code: {
+          bg: "#ffffff",
+          fg: "#f3f4f6"
+        },
+        skeleton: {
+          from: "rgba(243,244,246,0.5)",
+          to: "rgba(243,244,246,0.25)"
+        }
+      },
+      hovered: {
+        bg: "#f3fcf6",
+        bg2: "#e8f9ed",
+        border: "#d5f3e1",
+        fg: "#124e2b",
+        muted: {
+          fg: "#1ba755"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#e8f9ed",
+          fg: "#1ba755"
+        },
+        skeleton: {
+          from: "#d5f3e1",
+          to: "rgba(213,243,225,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#dff6e9",
+        bg2: "#d5f3e1",
+        border: "#c3edd5",
+        fg: "#124e2b",
+        muted: {
+          fg: "#1ba755"
+        },
+        accent: {
+          fg: "#ce4431"
+        },
+        link: {
+          fg: "#055ee8"
+        },
+        code: {
+          bg: "#d5f3e1",
+          fg: "#1ba755"
+        },
+        skeleton: {
+          from: "#c3edd5",
+          to: "rgba(195,237,213,0.5)"
+        }
+      },
+      selected: {
+        bg: "#dff6e9",
+        bg2: "#d5f3e1",
+        border: "#c3edd5",
+        fg: "#124e2b",
+        muted: {
+          fg: "#1ba755"
+        },
+        accent: {
+          fg: "#ce4431"
+        },
+        link: {
+          fg: "#055ee8"
+        },
+        code: {
+          bg: "#d5f3e1",
+          fg: "#1ba755"
+        },
+        skeleton: {
+          from: "#c3edd5",
+          to: "rgba(195,237,213,0.5)"
+        }
+      }
     },
-    select: {
-      focusRing: {
-        offset: -1,
-        width: 1
+    caution: {
+      enabled: {
+        bg: "#ffffff",
+        bg2: "#fffdf0",
+        border: "#fef7cd",
+        fg: "#98670b",
+        muted: {
+          fg: "#cb920b"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#fffdf0",
+          fg: "#cb920b"
+        },
+        skeleton: {
+          from: "#fef7cd",
+          to: "rgba(254,247,205,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f9f9fa",
+        fg: "#e2e6e9",
+        muted: {
+          fg: "#f3f4f6"
+        },
+        accent: {
+          fg: "#f3f4f6"
+        },
+        link: {
+          fg: "#f3f4f6"
+        },
+        code: {
+          bg: "#ffffff",
+          fg: "#f3f4f6"
+        },
+        skeleton: {
+          from: "rgba(243,244,246,0.5)",
+          to: "rgba(243,244,246,0.25)"
+        }
+      },
+      hovered: {
+        bg: "#fffdf0",
+        bg2: "#fffbe2",
+        border: "#fef5c1",
+        fg: "#65400b",
+        muted: {
+          fg: "#cb920b"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#fffbe2",
+          fg: "#cb920b"
+        },
+        skeleton: {
+          from: "#fef5c1",
+          to: "rgba(254,245,193,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#fef7cd",
+        bg2: "#fef5c1",
+        border: "#fdefa5",
+        fg: "#65400b",
+        muted: {
+          fg: "#cb920b"
+        },
+        accent: {
+          fg: "#eb442b"
+        },
+        link: {
+          fg: "#065ecc"
+        },
+        code: {
+          bg: "#fef5c1",
+          fg: "#cb920b"
+        },
+        skeleton: {
+          from: "#fdefa5",
+          to: "rgba(253,239,165,0.5)"
+        }
+      },
+      selected: {
+        bg: "#fef7cd",
+        bg2: "#fef5c1",
+        border: "#fdefa5",
+        fg: "#65400b",
+        muted: {
+          fg: "#cb920b"
+        },
+        accent: {
+          fg: "#eb442b"
+        },
+        link: {
+          fg: "#065ecc"
+        },
+        code: {
+          bg: "#fef5c1",
+          fg: "#cb920b"
+        },
+        skeleton: {
+          from: "#fdefa5",
+          to: "rgba(253,239,165,0.5)"
+        }
       }
     },
-    text: {
-      focusRing: {
-        offset: -1,
-        width: 1
+    critical: {
+      enabled: {
+        bg: "#ffffff",
+        bg2: "#fff5f5",
+        border: "#fee8e7",
+        fg: "#a52112",
+        muted: {
+          fg: "#d72414"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#fff5f5",
+          fg: "#d72414"
+        },
+        skeleton: {
+          from: "#fee8e7",
+          to: "rgba(254,232,231,0.5)"
+        }
+      },
+      disabled: {
+        bg: "#ffffff",
+        bg2: "#f9f9fa",
+        border: "#f9f9fa",
+        fg: "#e2e6e9",
+        muted: {
+          fg: "#f3f4f6"
+        },
+        accent: {
+          fg: "#f3f4f6"
+        },
+        link: {
+          fg: "#f3f4f6"
+        },
+        code: {
+          bg: "#ffffff",
+          fg: "#f3f4f6"
+        },
+        skeleton: {
+          from: "rgba(243,244,246,0.5)",
+          to: "rgba(243,244,246,0.25)"
+        }
+      },
+      hovered: {
+        bg: "#fff5f5",
+        bg2: "#ffebeb",
+        border: "#fedfde",
+        fg: "#6f1a11",
+        muted: {
+          fg: "#d72414"
+        },
+        accent: {
+          fg: "#ec4636"
+        },
+        link: {
+          fg: "#0661fe"
+        },
+        code: {
+          bg: "#ffebeb",
+          fg: "#d72414"
+        },
+        skeleton: {
+          from: "#fedfde",
+          to: "rgba(254,223,222,0.5)"
+        }
+      },
+      pressed: {
+        bg: "#fee8e7",
+        bg2: "#fedfde",
+        border: "#fdd3d1",
+        fg: "#6f1a11",
+        muted: {
+          fg: "#d72414"
+        },
+        accent: {
+          fg: "#eb4031"
+        },
+        link: {
+          fg: "#0658e6"
+        },
+        code: {
+          bg: "#fedfde",
+          fg: "#d72414"
+        },
+        skeleton: {
+          from: "#fdd3d1",
+          to: "rgba(253,211,209,0.5)"
+        }
+      },
+      selected: {
+        bg: "#fee8e7",
+        bg2: "#fedfde",
+        border: "#fdd3d1",
+        fg: "#6f1a11",
+        muted: {
+          fg: "#d72414"
+        },
+        accent: {
+          fg: "#eb4031"
+        },
+        link: {
+          fg: "#0658e6"
+        },
+        code: {
+          bg: "#fedfde",
+          fg: "#d72414"
+        },
+        skeleton: {
+          from: "#fdd3d1",
+          to: "rgba(253,211,209,0.5)"
+        }
       }
     }
   }
-  // styles: {
-  //   button: {
-  //     root: {
-  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
-  //     },
-  //   },
-  //   card: {
-  //     root: {
-  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
-  //     },
-  //   },
-  // },
-};
-
-const DEFAULT_THEME_LAYER = {
-  dialog: {
-    zOffset: 600
-  },
-  popover: {
-    zOffset: 400
-  },
-  tooltip: {
-    zOffset: 200
-  }
 };
 function cssObjectToCssString(rules) {
   return Object.keys(rules).reduce((acc, key) => {
@@ -1801,7 +5800,11 @@ function ThemeProvider(props) {
     return {
       sanity: {
         ...restTheme,
-        layer
+        layer,
+        color: {
+          ...legacyColors,
+          tones: restTheme.color.tones
+        }
       }
     };
   }, [themeProp]);
@@ -3198,7 +7201,7 @@ const Root$z = styled(Box)(responsiveRadiusStyle, badgeStyle);
 const Badge = forwardRef(function Badge2(props, ref) {
   const {
     children,
-    fontSize,
+    fontSize = 1,
     mode = "default",
     padding = 1,
     radius = 2,
@@ -8579,5 +12582,5 @@ const TreeItem = memo(function TreeItem2(props) {
     })]
   });
 });
-export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createCssVars, cssVars, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTooltipDelayGroup, useTree };
+export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, createCssVars, cssVars, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTooltipDelayGroup, useTree };
 //# sourceMappingURL=index.esm.js.map