@pstdio/ui 0.5.2 → 0.7.0

package/dist/{theme-Dq4r3aRE.js → theme-D-aCJqTf.js}

@@ -1,11 +1,60 @@
-import { defineSlotRecipe as l, defineRecipe as o, defineLayerStyles as r, defineTextStyles as s, defineConfig as t, createSystem as c, defaultConfig as i } from "@chakra-ui/react";
-import { alertAnatomy as n, dialogAnatomy as u, drawerAnatomy as d, fieldsetAnatomy as b, menuAnatomy as g, popoverAnatomy as v, tooltipAnatomy as m } from "@chakra-ui/react/anatomy";
-import { progressCircleSlotRecipe as a } from "@chakra-ui/react/theme";
-const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted": "#75715E", "colors.fg.subtle": "#A59F85", "colors.fg.inverted": "#272822", "colors.fg.blue-dark": "#66D9EF", "colors.bg": "#272822", "colors.bg.muted": "#34352E", "colors.bg.subtle": "#1F201B", "colors.bg.hover": "#3E3D32", "colors.bg.active": "#49483E", "colors.bg.code": "#1F201B", "colors.bg.emphasized": "#49483E", "colors.bg.inverted": "#F8F8F2", "colors.bg.panel": "#1F201B", "colors.bg.dark": "#1F201B", "colors.bg.button.primary.default": "#E6DB74", "colors.bg.button.primary.hover": "#F4E98A", "colors.bg.button.primary.pressed": "#CFC25F", "colors.bg.menu-item.hover": "#3E3D32", "colors.bg.menu-item.focus": "#3E3D32", "colors.bg.menu-item.selected": "#49483E", "colors.bg.accent-primary.default": "#E6DB74", "colors.bg.accent-primary.hover": "#F4E98A", "colors.bg.accent-primary.pressed": "#CFC25F", "colors.bg.accent-primary.very-light": "#3B3A2B", "colors.bg.accent-primary.light": "#494531", "colors.bg.accent-primary.medium": "#E6DB74", "colors.bg.accent-primary.dark": "#F4E98A", "colors.bg.accent-secondary.grey-dark": "#272822", "colors.bg.accent-secondary.grey-light": "#34352E", "colors.bg.accent-secondary.red-very-light": "#3A1F1F", "colors.bg.accent-secondary.red-light": "#4A2424", "colors.bg.accent-secondary.pink-light": "#4A2039", "colors.bg.accent-secondary.pink-medium": "#F92672", "colors.bg.accent-secondary.blue-very-light": "#243A3D", "colors.bg.accent-secondary.blue-light": "#26464A", "colors.bg.accent-secondary.blue-medium": "#66D9EF", "colors.bg.accent-secondary.blue-dark": "#66D9EF", "colors.bg.accent-secondary.cyan-light": "#26464A", "colors.bg.accent-secondary.green-light": "#33401F", "colors.bg.accent-secondary.yellow-light": "#494531", "colors.bg.accent-secondary.yellow-medium": "#E6DB74", "colors.bg.accent-secondary.yellow-dark": "#F4E98A", "colors.bg.accent-secondary.sand-light": "#3E3D32", "colors.border": "#5B594A", "colors.border.muted": "#49483E", "colors.border.subtle": "#3E3D32", "colors.border.inverted": "#CFCFC2", "colors.border.accent-light": "#66D9EF", "colors.border.accent": "#66D9EF", "colors.blue.border": "#66D9EF", "colors.orange.contrast": "#272822", "colors.orange.fg": "#FD971F", "colors.orange.subtle": "#493522", "colors.orange.muted": "#5A3C20", "colors.orange.emphasized": "#7A4D1D", "colors.orange.solid": "#FD971F", "colors.orange.focusRing": "#FD971F", "colors.orange.border": "#FD971F", "colors.vis.text.primary": "#F8F8F2", "colors.vis.text.secondary": "#CFCFC2", "colors.vis.grid": "#49483E", "colors.vis.axis": "#A59F85", "colors.vis.categorical.1": "#66D9EF", "colors.vis.categorical.2": "#FD971F", "colors.vis.categorical.3": "#AE81FF", "colors.vis.categorical.4": "#F92672", "colors.vis.categorical.5": "#E6DB74", "colors.vis.categorical.6": "#A6E22E", "colors.vis.categorical.7": "#75715E", "colors.text.selectable.primary": "#272822" }, k = {
-  id: p,
-  mode: F,
-  tokens: h
-}, x = k, fe = [x], y = {
+import { defineSlotRecipe as r, defineRecipe as a, defineLayerStyles as d, defineTextStyles as g, defineConfig as b, createSystem as v, defaultConfig as m } from "@chakra-ui/react";
+import { alertAnatomy as h, dialogAnatomy as p, drawerAnatomy as F, fieldsetAnatomy as _, menuAnatomy as f, popoverAnatomy as k, tabsAnatomy as y, tooltipAnatomy as x } from "@chakra-ui/react/anatomy";
+import { progressCircleSlotRecipe as i } from "@chakra-ui/react/theme";
+const E = "monokai", C = "dark", S = { "colors.fg": "#F8F8F2", "colors.fg.muted": "#75715E", "colors.fg.subtle": "#A59F85", "colors.fg.inverted": "#272822", "colors.fg.blue-dark": "#66D9EF", "colors.bg": "#272822", "colors.bg.muted": "#34352E", "colors.bg.subtle": "#1F201B", "colors.bg.hover": "#3E3D32", "colors.bg.active": "#49483E", "colors.bg.code": "#1F201B", "colors.bg.emphasized": "#49483E", "colors.bg.inverted": "#F8F8F2", "colors.bg.panel": "#1F201B", "colors.bg.dark": "#1F201B", "colors.bg.button.primary.default": "#E6DB74", "colors.bg.button.primary.hover": "#F4E98A", "colors.bg.button.primary.pressed": "#CFC25F", "colors.bg.menu-item.hover": "#3E3D32", "colors.bg.menu-item.focus": "#3E3D32", "colors.bg.menu-item.selected": "#49483E", "colors.bg.accent-primary.default": "#E6DB74", "colors.bg.accent-primary.hover": "#F4E98A", "colors.bg.accent-primary.pressed": "#CFC25F", "colors.bg.accent-primary.very-light": "#3B3A2B", "colors.bg.accent-primary.light": "#494531", "colors.bg.accent-primary.medium": "#E6DB74", "colors.bg.accent-primary.dark": "#F4E98A", "colors.bg.accent-secondary.grey-dark": "#272822", "colors.bg.accent-secondary.grey-light": "#34352E", "colors.bg.accent-secondary.red-very-light": "#3A1F1F", "colors.bg.accent-secondary.red-light": "#4A2424", "colors.bg.accent-secondary.pink-light": "#4A2039", "colors.bg.accent-secondary.pink-medium": "#F92672", "colors.bg.accent-secondary.blue-very-light": "#243A3D", "colors.bg.accent-secondary.blue-light": "#26464A", "colors.bg.accent-secondary.blue-medium": "#66D9EF", "colors.bg.accent-secondary.blue-dark": "#66D9EF", "colors.bg.accent-secondary.cyan-light": "#26464A", "colors.bg.accent-secondary.green-light": "#33401F", "colors.bg.accent-secondary.yellow-light": "#494531", "colors.bg.accent-secondary.yellow-medium": "#E6DB74", "colors.bg.accent-secondary.yellow-dark": "#F4E98A", "colors.bg.accent-secondary.sand-light": "#3E3D32", "colors.border": "#5B594A", "colors.border.muted": "#49483E", "colors.border.subtle": "#3E3D32", "colors.border.inverted": "#CFCFC2", "colors.border.accent-light": "#66D9EF", "colors.border.accent": "#66D9EF", "colors.blue.border": "#66D9EF", "colors.orange.contrast": "#272822", "colors.orange.fg": "#FD971F", "colors.orange.subtle": "#493522", "colors.orange.muted": "#5A3C20", "colors.orange.emphasized": "#7A4D1D", "colors.orange.solid": "#FD971F", "colors.orange.focusRing": "#FD971F", "colors.orange.border": "#FD971F", "colors.vis.text.primary": "#F8F8F2", "colors.vis.text.secondary": "#CFCFC2", "colors.vis.grid": "#49483E", "colors.vis.axis": "#A59F85", "colors.vis.categorical.1": "#66D9EF", "colors.vis.categorical.2": "#FD971F", "colors.vis.categorical.3": "#AE81FF", "colors.vis.categorical.4": "#F92672", "colors.vis.categorical.5": "#E6DB74", "colors.vis.categorical.6": "#A6E22E", "colors.vis.categorical.7": "#75715E", "colors.text.selectable.primary": "#272822" }, D = {
+  id: E,
+  mode: C,
+  tokens: S
+}, A = {
+  "editor.background": ["colors.bg", "colors.bg.code"],
+  "editor.foreground": ["colors.fg"],
+  "editorWidget.background": ["colors.bg.panel"],
+  "sideBar.background": ["colors.bg.panel"],
+  "panel.background": ["colors.bg.panel"],
+  "input.background": ["colors.bg.subtle"],
+  "input.foreground": ["colors.fg"],
+  "input.border": ["colors.border"],
+  "dropdown.background": ["colors.bg.panel"],
+  "menu.background": ["colors.bg.panel", "colors.bg.menu-item.default"],
+  "menu.foreground": ["colors.fg.menu-item.default"],
+  "menu.selectionBackground": ["colors.bg.menu-item.selected"],
+  "button.background": ["colors.bg.button.primary.default", "colors.bg.accent-primary.default"],
+  "button.hoverBackground": ["colors.bg.button.primary.hover", "colors.bg.accent-primary.hover"],
+  "button.foreground": ["colors.fg.button.primary.default"],
+  focusBorder: ["colors.border.accent"],
+  foreground: ["colors.fg"],
+  descriptionForeground: ["colors.fg.muted"],
+  disabledForeground: ["colors.fg.subtle"],
+  border: ["colors.border"]
+}, w = (o) => o.replace(/^#/, ""), We = (o) => {
+  const t = {}, l = o.theme.colors ?? {};
+  for (const [c, s] of Object.entries(A)) {
+    const n = l[c];
+    if (n)
+      for (const u of s) t[u] = n;
+  }
+  return {
+    id: o.id,
+    mode: o.mode,
+    tokens: t
+  };
+}, Le = (o) => {
+  const t = (o.theme.tokenColors ?? []).flatMap((l) => (Array.isArray(l.scope) ? l.scope : l.scope ? [l.scope] : []).map((s) => ({
+    token: s,
+    ...l.settings?.foreground ? {
+      foreground: w(l.settings.foreground)
+    } : {},
+    ...l.settings?.fontStyle ? {
+      fontStyle: l.settings.fontStyle
+    } : {}
+  })));
+  return {
+    base: o.mode === "dark" ? "vs-dark" : "vs",
+    inherit: !0,
+    rules: t,
+    colors: o.theme.colors ?? {}
+  };
+}, B = D, Te = [B], z = {
   "*::selection": {
     bg: {
       base: "bg.accent-secondary.blue-medium",
@@ -63,7 +112,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       fontSize: "1.5rem"
     }
   }
-}, f = {
+}, R = {
   DEFAULT: {
     value: "#0A0D15"
   },
@@ -112,7 +161,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   1e3: {
     value: "#000000"
   }
-}, _ = {
+}, W = {
   DEFAULT: {
     value: "#5098FF"
   },
@@ -146,7 +195,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   900: {
     value: "#002862"
   }
-}, E = {
+}, L = {
   DEFAULT: {
     value: "#3A4BE4"
   },
@@ -183,7 +232,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   900: {
     value: "#0A125A"
   }
-}, C = {
+}, T = {
   DEFAULT: {
     value: "#E054EC"
   },
@@ -220,7 +269,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   900: {
     value: "#520659"
   }
-}, S = {
+}, H = {
   DEFAULT: {
     value: "#FBD8CE"
   },
@@ -254,7 +303,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   900: {
     value: "#522923"
   }
-}, D = {
+}, M = {
   DEFAULT: {
     value: "#FF3232"
   },
@@ -288,7 +337,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   900: {
     value: "#580707"
   }
-}, A = {
+}, U = {
   DEFAULT: {
     value: "#F78C25"
   },
@@ -322,7 +371,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   900: {
     value: "#552107"
   }
-}, w = {
+}, P = {
   DEFAULT: {
     value: "#FFD643"
   },
@@ -362,7 +411,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   900: {
     value: "#644E00"
   }
-}, B = {
+}, V = {
   DEFAULT: {
     value: "#2DD665"
   },
@@ -396,7 +445,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   900: {
     value: "#003110"
   }
-}, z = {
+}, X = {
   DEFAULT: {
     value: "#3EECC4"
   },
@@ -430,7 +479,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   900: {
     value: "#024F3D"
   }
-}, R = {
+}, I = {
   DEFAULT: {
     value: "#5CDCFF"
   },
@@ -464,7 +513,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   900: {
     value: "#005B73"
   }
-}, W = {
+}, O = {
   DEFAULT: {
     value: "#8B47FF"
   },
@@ -498,7 +547,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   900: {
     value: "#1E0050"
   }
-}, L = {
+}, Y = {
   DEFAULT: {
     value: "#F4F2EC"
   },
@@ -532,7 +581,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   900: {
     value: "#E8CECE"
   }
-}, H = {
+}, $ = {
   50: {
     value: "#FCFDFC"
   },
@@ -575,30 +624,30 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   950: {
     value: "#10141B"
   }
-}, T = {
+}, j = {
   100: {
     value: "#D3ECEE"
   },
   200: {
     value: "#B3DEE2"
   }
-}, U = {
-  sand: L,
-  blacks: f,
-  blue: _,
-  sapphire: E,
-  pink: C,
-  peach: S,
-  red: D,
-  orange: A,
-  yellow: w,
-  green: B,
-  teal: z,
-  cyan: R,
-  purple: W,
-  neutral: H,
-  mint: T
-}, M = {
+}, q = {
+  sand: Y,
+  blacks: R,
+  blue: W,
+  sapphire: L,
+  pink: T,
+  peach: H,
+  red: M,
+  orange: U,
+  yellow: P,
+  green: V,
+  teal: X,
+  cyan: I,
+  purple: O,
+  neutral: $,
+  mint: j
+}, G = {
   display: {
     value: "'Playfair Display', serif"
   },
@@ -614,7 +663,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   body: {
     value: "Inter, sans-serif"
   }
-}, X = {
+}, J = {
   xs: {
     value: "0.625rem"
   },
@@ -679,7 +728,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
     value: "1.25rem"
   }
   // 20px
-}, V = {
+}, K = {
   regular: {
     value: 400
   },
@@ -719,7 +768,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   900: "4.5rem",
   // 96px
   1600: "8rem"
-}, P = {
+}, N = {
   none: {
     value: "0"
   },
@@ -759,7 +808,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   "5xl": {
     value: e[1600]
   }
-}, I = {
+}, Q = {
   none: {
     value: "0"
   },
@@ -784,15 +833,15 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   full: {
     value: "100%"
   }
-}, O = l({
-  slots: n.keys(),
+}, Z = r({
+  slots: h.keys(),
   base: {
     root: {
       pt: "xs",
       pb: "xs"
     }
   }
-}), Y = o({
+}), ee = a({
   base: {
     borderRadius: "sm",
     transition: "all 0.1s ease-in-out",
@@ -985,19 +1034,19 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
     size: "md",
     variant: "outline"
   }
-}), $ = l({
-  slots: u.keys(),
+}), le = r({
+  slots: p.keys(),
   base: {
     content: {
       bg: "bg"
     }
   }
-}), j = o({
+}), oe = a({
   base: {
     borderColor: "border"
   }
-}), q = l({
-  slots: d.keys(),
+}), re = r({
+  slots: F.keys(),
   base: {
     header: {
       fontWeight: "medium",
@@ -1008,7 +1057,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       bg: "bg"
     }
   }
-}), G = l({
+}), ae = r({
   slots: ["preview", "input", "textarea"],
   base: {
     preview: {
@@ -1057,14 +1106,14 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       }
     }
   }
-}), J = l({
-  slots: b.keys(),
+}), te = r({
+  slots: _.keys(),
   base: {
     legend: {
       mb: "2xs"
     }
   }
-}), K = o({
+}), se = a({
   base: {
     px: "sm",
     borderRadius: "sm",
@@ -1096,7 +1145,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       }
     }
   }
-}), N = o({
+}), ie = a({
   base: {
     display: "inline-flex",
     alignItems: "center",
@@ -1159,8 +1208,8 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
     size: "md",
     variant: "raised"
   }
-}), Q = l({
-  slots: g.keys(),
+}), ce = r({
+  slots: f.keys(),
   base: {
     itemGroupLabel: {
       ml: "{2xs}",
@@ -1196,8 +1245,8 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       textStyle: "label/M/regular"
     }
   }
-}), Z = l({
-  slots: v.keys(),
+}), ne = r({
+  slots: k.keys(),
   base: {
     positioner: {
       _focus: {
@@ -1250,12 +1299,12 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       }
     }
   }
-}), ee = a.variants?.size ?? {}, le = {
-  ...a,
+}), ue = i.variants?.size ?? {}, de = {
+  ...i,
   variants: {
-    ...a.variants,
+    ...i.variants,
     size: {
-      ...ee,
+      ...ue,
       "2xs": {
         circle: {
           "--size": "14px",
@@ -1267,12 +1316,37 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       }
     }
   }
-}, oe = o({
+}, ge = a({
   base: {
     "--start-color": "fg",
     "--end-color": "fg.muted"
   }
-}), ae = o({
+}), be = r({
+  slots: y.keys(),
+  base: {
+    trigger: {
+      borderRadius: "0"
+    }
+  },
+  variants: {
+    variant: {
+      subtle: {
+        trigger: {
+          color: "fg.muted",
+          bg: "transparent",
+          _hover: {
+            bg: "bg.hover",
+            color: "fg"
+          },
+          _selected: {
+            bg: "bg.muted",
+            color: "fg"
+          }
+        }
+      }
+    }
+  }
+}), ve = a({
   base: {
     paddingX: "sm",
     paddingY: "xs",
@@ -1298,8 +1372,8 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       color: "fg.subtle"
     }
   }
-}), re = l({
-  slots: m.keys(),
+}), me = r({
+  slots: x.keys(),
   base: {
     content: {
       bg: "bg.inverted",
@@ -1309,103 +1383,85 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       bg: "bg.inverted"
     }
   }
-}), se = {
+}), he = {
   DEFAULT: {
-    value: {
-      base: "1px solid {colors.blacks.400}",
-      _dark: "1px solid {colors.blacks.600}"
-    }
+    value: "1px solid {colors.border}"
   },
   muted: {
-    value: {
-      base: "1px solid {colors.blacks.300}",
-      _dark: "1px solid {colors.blacks.700}"
-    }
+    value: "1px solid {colors.border.muted}"
   },
   subtle: {
-    value: {
-      base: "1px solid {colors.blacks.300}",
-      _dark: "1px solid {colors.blacks.50}"
-    }
+    value: "1px solid {colors.border.subtle}"
   },
   inverted: {
-    value: {
-      base: "1px solid {colors.blacks.400}",
-      _dark: "1px solid {colors.blacks.600}"
-    }
+    value: "1px solid {colors.border.inverted}"
   },
   accent: {
-    value: {
-      base: "1px solid {colors.blue.700}",
-      _dark: "1px solid {colors.blue.200}"
-    }
+    value: "1px solid {colors.border.accent}"
   },
   "accent-light": {
-    value: {
-      base: "1px solid {colors.blue.200}",
-      _dark: "1px solid {colors.blue.900}"
-    }
+    value: "1px solid {colors.border.accent-light}"
   }
-}, te = {
+}, pe = {
   DEFAULT: {
     value: {
-      base: "{colors.blacks.800}",
+      _light: "{colors.blacks.800}",
       _dark: "{colors.blacks.200}"
     }
   },
   muted: {
     value: {
-      base: "{colors.blacks.450}",
+      _light: "{colors.blacks.450}",
       _dark: "{colors.blacks.500}"
     }
   },
   subtle: {
     value: {
-      base: "{colors.blacks.400}",
+      _light: "{colors.blacks.400}",
       _dark: "{colors.blacks.600}"
     }
   },
   inverted: {
     value: {
-      base: "{colors.blacks.50}",
+      _light: "{colors.blacks.50}",
       _dark: "{colors.blacks.800}"
     }
   },
   success: {
     value: {
-      base: "{colors.green.400}",
+      _light: "{colors.green.400}",
       _dark: "{colors.green.400}"
     }
   },
   error: {
     value: {
-      base: "{colors.red.400}",
+      _light: "{colors.red.400}",
       _dark: "{colors.red.400}"
     }
   },
   accent: {
     "pink-dark": {
       value: {
-        base: "{colors.pink.700}",
+        _light: "{colors.pink.700}",
         _dark: "{colors.pink.50}"
       }
     }
   },
   "green-dark": {
     value: {
-      base: "{colors.green.700}",
+      _light: "{colors.green.700}",
       _dark: "{colors.green.50}"
     }
   },
   "blue-dark": {
     value: {
-      base: "{colors.sapphire.700}",
+      _light: "{colors.sapphire.700}",
       _dark: "{colors.sapphire.100}"
     }
   },
   "blue-very-dark": {
     value: {
-      base: "{colors.sapphire.900}",
+      _light: "{colors.sapphire.900}",
       _dark: "{colors.sapphire.800}"
     }
   },
@@ -1413,7 +1469,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
     primary: {
       default: {
         value: {
-          base: "{colors.blacks.200}",
+          _light: "{colors.blacks.200}",
           _dark: "{colors.blacks.200}"
         }
       },
@@ -1430,70 +1486,70 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       value: "{colors.fg.muted}"
     }
   }
-}, ce = {
+}, Fe = {
   DEFAULT: {
     value: {
-      base: "{colors.blacks.50}",
+      _light: "{colors.blacks.50}",
       _dark: "{colors.blacks.900}"
     }
   },
   muted: {
     value: {
-      base: "{colors.neutral.200}",
+      _light: "{colors.neutral.200}",
       _dark: "{colors.neutral.800}"
     }
   },
   subtle: {
     value: {
-      base: "{colors.neutral.50}",
+      _light: "{colors.neutral.50}",
       _dark: "{colors.neutral.950}"
     }
   },
   hover: {
     value: {
-      base: "{colors.neutral.100}",
+      _light: "{colors.neutral.100}",
       _dark: "{colors.neutral.850}"
     }
   },
   active: {
     value: {
-      base: "{colors.neutral.75}",
+      _light: "{colors.neutral.75}",
       _dark: "{colors.blacks.850}"
     }
   },
   code: {
     value: {
-      base: "{colors.blacks.50}",
+      _light: "{colors.blacks.50}",
       _dark: "{colors.blacks.800}"
     }
   },
   emphasized: {
     value: {
-      base: "{colors.bg.active}",
+      _light: "{colors.bg.active}",
       _dark: "{colors.bg.active}"
     }
   },
   inverted: {
     value: {
-      base: "{colors.blacks.800}",
+      _light: "{colors.blacks.800}",
       _dark: "{colors.blacks.100}"
     }
   },
   panel: {
     value: {
-      base: "{colors.blacks.100}",
+      _light: "{colors.blacks.100}",
       _dark: "{colors.blacks.850}"
     }
   },
   dark: {
     value: {
-      base: "{colors.blacks.900}",
+      _light: "{colors.blacks.900}",
       _dark: "{colors.blacks.900}"
     }
   },
   white: {
     value: {
-      base: "{colors.blacks.50}",
+      _light: "{colors.blacks.50}",
       _dark: "{colors.blacks.50}"
     }
   },
@@ -1501,19 +1557,19 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
     primary: {
       default: {
         value: {
-          base: "{colors.bg.accent-primary.default}",
+          _light: "{colors.bg.accent-primary.default}",
           _dark: "{colors.bg.accent-primary.dark}"
         }
       },
       hover: {
         value: {
-          base: "{colors.bg.accent-primary.hover}",
+          _light: "{colors.bg.accent-primary.hover}",
           _dark: "{colors.bg.accent-primary.medium}"
         }
       },
       pressed: {
         value: {
-          base: "{colors.bg.accent-primary.pressed}",
+          _light: "{colors.bg.accent-primary.pressed}",
           _dark: "{colors.bg.accent-primary.medium}"
         }
       },
@@ -1528,24 +1584,24 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
     },
     hover: {
       value: {
-        base: "{colors.bg.muted}"
+        _light: "{colors.bg.muted}"
       }
     },
     focus: {
       value: {
-        base: "{colors.bg.muted}"
+        _light: "{colors.bg.muted}"
       }
     },
     selected: {
       value: {
-        base: "{colors.bg.active}"
+        _light: "{colors.bg.active}"
       }
     }
   },
   display: {
     "very-light": {
       value: {
-        base: "{colors.sand.50}",
+        _light: "{colors.sand.50}",
         _dark: "{colors.blacks.1000}"
       }
     }
@@ -1553,43 +1609,43 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   "accent-primary": {
     default: {
       value: {
-        base: "{colors.yellow.75}",
+        _light: "{colors.yellow.75}",
         _dark: "{colors.yellow.75}"
       }
     },
     hover: {
       value: {
-        base: "{colors.yellow.100}",
+        _light: "{colors.yellow.100}",
         _dark: "{colors.yellow.100}"
       }
     },
     pressed: {
       value: {
-        base: "{colors.yellow.150}",
+        _light: "{colors.yellow.150}",
         _dark: "{colors.yellow.150}"
       }
     },
     "very-light": {
       value: {
-        base: "{colors.yellow.75}",
+        _light: "{colors.yellow.75}",
         _dark: "{colors.yellow.75}"
       }
     },
     light: {
       value: {
-        base: "{colors.yellow.75}",
+        _light: "{colors.yellow.75}",
         _dark: "{colors.yellow.75}"
       }
     },
     medium: {
       value: {
-        base: "{colors.yellow.100}",
+        _light: "{colors.yellow.100}",
         _dark: "{colors.yellow.100}"
       }
     },
     dark: {
       value: {
-        base: "{colors.yellow.150}",
+        _light: "{colors.yellow.150}",
         _dark: "{colors.yellow.150}"
       }
     }
@@ -1597,135 +1653,135 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   "accent-secondary": {
     "grey-dark": {
       value: {
-        base: "{colors.blacks.50}",
+        _light: "{colors.blacks.50}",
         _dark: "{colors.blacks.1000}"
       }
     },
     "grey-light": {
       value: {
-        base: "{colors.blacks.100}",
+        _light: "{colors.blacks.100}",
         _dark: "{colors.blacks.900}"
       }
     },
     "red-very-light": {
       value: {
-        base: "{colors.red.50}",
+        _light: "{colors.red.50}",
         _dark: "{colors.red.100}"
       }
     },
     "red-light": {
       value: {
-        base: "{colors.red.100}",
+        _light: "{colors.red.100}",
         _dark: "{colors.red.100}"
       }
     },
     "pink-light": {
       value: {
-        base: "{colors.pink.50}",
+        _light: "{colors.pink.50}",
         _dark: "{colors.pink.700}"
       }
     },
     "pink-medium": {
       value: {
-        base: "{colors.pink.100}",
+        _light: "{colors.pink.100}",
         _dark: "{colors.pink.800}"
       }
     },
     "blue-very-light": {
       value: {
-        base: "{colors.blue.25}",
+        _light: "{colors.blue.25}",
         _dark: "{colors.blue.50}"
       }
     },
     "blue-light": {
       value: {
-        base: "{colors.mint.100}",
+        _light: "{colors.mint.100}",
         _dark: "{colors.mint.100}"
       }
     },
     "blue-medium": {
       value: {
-        base: "{colors.mint.200}",
+        _light: "{colors.mint.200}",
         _dark: "{colors.mint.200}"
       }
     },
     "blue-dark": {
       value: {
-        base: "{colors.blue.700}",
+        _light: "{colors.blue.700}",
         _dark: "{colors.blue.200}"
       }
     },
     "cyan-light": {
       value: {
-        base: "{colors.cyan.50}",
+        _light: "{colors.cyan.50}",
         _dark: "{colors.cyan.100}"
       }
     },
     "green-light": {
       value: {
-        base: "{colors.green.50}",
+        _light: "{colors.green.50}",
         _dark: "{colors.sapphire.50}"
       }
     },
     "yellow-light": {
       value: {
-        base: "{colors.yellow.75}",
+        _light: "{colors.yellow.75}",
         _dark: "{colors.yellow.75}"
       }
     },
     "yellow-medium": {
       value: {
-        base: "{colors.yellow.100}",
+        _light: "{colors.yellow.100}",
         _dark: "{colors.yellow.100}"
       }
     },
     "yellow-dark": {
       value: {
-        base: "{colors.yellow.150}",
+        _light: "{colors.yellow.150}",
         _dark: "{colors.yellow.150}"
       }
     },
     "sand-light": {
       value: {
-        base: "{colors.sand.100}",
+        _light: "{colors.sand.100}",
         _dark: "{colors.sand.100}"
       }
     }
   }
-}, ie = {
+}, _e = {
   DEFAULT: {
     value: {
-      base: "{colors.neutral.500}",
+      _light: "{colors.neutral.500}",
       _dark: "{colors.neutral.600}"
     }
   },
   muted: {
     value: {
-      base: "{colors.neutral.500}",
+      _light: "{colors.neutral.400}",
       _dark: "{colors.neutral.700}"
     }
   },
   subtle: {
     value: {
-      base: "{colors.neutral.400}",
+      _light: "{colors.neutral.300}",
       _dark: "{colors.neutral.750}"
     }
   },
   inverted: {
     value: {
-      base: "{colors.neutral.600}",
+      _light: "{colors.neutral.600}",
       _dark: "{colors.neutral.500}"
     }
   },
   "accent-light": {
     value: {
-      base: "{colors.mint.100}",
+      _light: "{colors.mint.100}",
       _dark: "{colors.mint.100}"
     }
   },
   accent: {
     value: {
-      base: "{colors.blue.700}",
+      _light: "{colors.blue.700}",
       _dark: "{colors.blue.200}"
     }
   },
@@ -1734,14 +1790,14 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       value: "{colors.border.muted}"
     }
   }
-}, ne = {
+}, fe = {
   border: {
     value: {
       _light: "{colors.mint.200}",
       _dark: "{colors.mint.200}"
     }
   }
-}, ue = {
+}, ke = {
   contrast: {
     value: {
       _light: "black",
@@ -1790,73 +1846,73 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       _dark: "{colors.orange.500}"
     }
   }
-}, de = {
+}, ye = {
   text: {
     primary: {
       value: {
-        base: "{colors.blacks.800}",
+        _light: "{colors.blacks.800}",
         _dark: "{colors.blacks.200}"
       }
     },
     secondary: {
       value: {
-        base: "{colors.blacks.600}",
+        _light: "{colors.blacks.600}",
         _dark: "{colors.blacks.500}"
       }
     }
   },
   grid: {
     value: {
-      base: "{colors.blacks.300}",
+      _light: "{colors.blacks.300}",
       _dark: "{colors.blacks.800}"
     }
   },
   axis: {
     value: {
-      base: "{colors.blacks.700}",
+      _light: "{colors.blacks.700}",
       _dark: "{colors.blacks.300}"
     }
   },
   categorical: {
     1: {
       value: {
-        base: "{colors.blue.300}",
+        _light: "{colors.blue.300}",
         _dark: "{colors.blue.300}"
       }
     },
     2: {
       value: {
-        base: "{colors.orange.500}",
+        _light: "{colors.orange.500}",
         _dark: "{colors.orange.500}"
       }
     },
     3: {
       value: {
-        base: "{colors.purple.700}",
+        _light: "{colors.purple.700}",
         _dark: "{colors.purple.700}"
       }
     },
     4: {
       value: {
-        base: "{colors.red.500}",
+        _light: "{colors.red.500}",
         _dark: "{colors.red.600}"
       }
     },
     5: {
       value: {
-        base: "{colors.pink.500}",
+        _light: "{colors.pink.500}",
         _dark: "{colors.pink.500}"
       }
     },
     6: {
       value: {
-        base: "{colors.cyan.800}",
+        _light: "{colors.cyan.800}",
         _dark: "{colors.green.500}"
       }
     },
     7: {
       value: {
-        base: "{colors.red.200}",
+        _light: "{colors.red.200}",
         _dark: "{colors.cyan.700}"
       }
     }
@@ -1865,43 +1921,43 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
     blue: {
       "low-3": {
         value: {
-          base: "{colors.blue.200}",
+          _light: "{colors.blue.200}",
           _dark: "{colors.blue.800}"
         }
       },
       "low-2": {
         value: {
-          base: "{colors.blue.300}",
+          _light: "{colors.blue.300}",
           _dark: "{colors.blue.700}"
         }
       },
       "low-1": {
         value: {
-          base: "{colors.blue.400}",
+          _light: "{colors.blue.400}",
           _dark: "{colors.blue.600}"
         }
       },
       default: {
         value: {
-          base: "{colors.blue.500}",
+          _light: "{colors.blue.500}",
           _dark: "{colors.blue.500}"
         }
       },
       "high-1": {
         value: {
-          base: "{colors.blue.600}",
+          _light: "{colors.blue.600}",
           _dark: "{colors.blue.400}"
         }
       },
       "high-2": {
         value: {
-          base: "{colors.blue.700}",
+          _light: "{colors.blue.700}",
           _dark: "{colors.blue.300}"
         }
       },
       "high-3": {
         value: {
-          base: "{colors.blue.800}",
+          _light: "{colors.blue.800}",
           _dark: "{colors.blue.200}"
         }
       }
@@ -1909,66 +1965,66 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
     red: {
       "low-3": {
         value: {
-          base: "{colors.red.200}",
+          _light: "{colors.red.200}",
           _dark: "{colors.red.800}"
         }
       },
       "low-2": {
         value: {
-          base: "{colors.red.300}",
+          _light: "{colors.red.300}",
           _dark: "{colors.red.700}"
         }
       },
       "low-1": {
         value: {
-          base: "{colors.red.400}",
+          _light: "{colors.red.400}",
           _dark: "{colors.red.600}"
         }
       },
       default: {
         value: {
-          base: "{colors.red.500}",
+          _light: "{colors.red.500}",
           _dark: "{colors.red.500}"
         }
       },
       "high-1": {
         value: {
-          base: "{colors.red.600}",
+          _light: "{colors.red.600}",
           _dark: "{colors.red.400}"
         }
       },
       "high-2": {
         value: {
-          base: "{colors.red.700}",
+          _light: "{colors.red.700}",
           _dark: "{colors.red.300}"
         }
       },
       "high-3": {
         value: {
-          base: "{colors.red.800}",
+          _light: "{colors.red.800}",
           _dark: "{colors.red.200}"
         }
       }
     }
   }
-}, be = {
+}, xe = {
   selectable: {
     primary: {
       value: {
-        base: "{colors.blacks.800}",
+        _light: "{colors.blacks.800}",
         _dark: "{colors.blacks.800}"
       }
     }
   }
-}, ge = {
-  fg: te,
-  bg: ce,
-  border: ie,
-  blue: ne,
-  orange: ue,
-  vis: de,
-  text: be
-}, ve = r({
+}, Ee = {
+  fg: pe,
+  bg: Fe,
+  border: _e,
+  blue: fe,
+  orange: ke,
+  vis: ye,
+  text: xe
+}, Ce = d({
   modal: {
     value: {
       paddingInline: "xs",
@@ -1980,7 +2036,7 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       boxShadow: "mid"
     }
   }
-}), me = {
+}), Se = {
   "low-light": {
     value: "0px 2px 4px 0px rgba(0, 0, 0, 0.10)"
   },
@@ -2011,38 +2067,38 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
   "desktop-icon-label-text-selected-dark": {
     value: "0px 2px 4px rgba(37, 99, 235, 0.75)"
   }
-}, pe = {
+}, De = {
   low: {
     value: {
-      base: "{shadows.low-light}",
+      _light: "{shadows.low-light}",
       _dark: "{shadows.low-dark}"
     }
   },
   mid: {
     value: {
-      base: "{shadows.mid-light}",
+      _light: "{shadows.mid-light}",
       _dark: "{shadows.mid-dark}"
     }
   },
   high: {
     value: {
-      base: "{shadows.high-light}",
+      _light: "{shadows.high-light}",
       _dark: "{shadows.high-dark}"
     }
   },
   "desktop-icon-label": {
     value: {
-      base: "{shadows.desktop-icon-label-text-light}",
+      _light: "{shadows.desktop-icon-label-text-light}",
       _dark: "{shadows.desktop-icon-label-text-dark}"
     }
   },
   "desktop-icon-label-selected": {
     value: {
-      base: "{shadows.desktop-icon-label-text-selected-light}",
+      _light: "{shadows.desktop-icon-label-text-selected-light}",
       _dark: "{shadows.desktop-icon-label-text-selected-dark}"
     }
   }
-}, Fe = s({
+}, Ae = g({
   brand: {
     value: {
       fontFamily: "brand",
@@ -2275,53 +2331,56 @@ const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted"
       letterSpacing: "0.14px"
     }
   }
-}), he = t({
-  globalCss: y,
+}), we = b({
+  globalCss: z,
   theme: {
     breakpoints: {
       "3xl": "2560px",
       "4xl": "3840px"
     },
-    textStyles: Fe,
-    layerStyles: ve,
+    textStyles: Ae,
+    layerStyles: Ce,
     recipes: {
-      button: Y,
-      divider: j,
-      input: K,
-      kbd: N,
-      skeleton: oe,
-      textarea: ae
+      button: ee,
+      divider: oe,
+      input: se,
+      kbd: ie,
+      skeleton: ge,
+      textarea: ve
     },
     tokens: {
-      colors: U,
-      fonts: M,
-      fontSizes: X,
-      fontWeights: V,
-      radii: I,
-      shadows: me,
-      spacing: P
+      colors: q,
+      fonts: G,
+      fontSizes: J,
+      fontWeights: K,
+      radii: Q,
+      shadows: Se,
+      spacing: N
     },
     semanticTokens: {
-      colors: ge,
-      borders: se,
-      shadows: pe
+      colors: Ee,
+      borders: he,
+      shadows: De
     },
     slotRecipes: {
-      alert: O,
-      drawer: q,
-      tooltip: re,
-      popover: Z,
-      menu: Q,
-      editable: G,
-      form: J,
-      dialog: $,
-      progressCircle: le
+      alert: Z,
+      drawer: re,
+      tooltip: me,
+      popover: ne,
+      menu: ce,
+      editable: ae,
+      form: te,
+      dialog: le,
+      progressCircle: de,
+      tabs: be
     }
   }
-}), _e = c(i, he);
+}), He = v(m, we);
 export {
-  fe as c,
-  x as m,
-  _e as t
+  We as a,
+  Te as b,
+  Le as c,
+  B as m,
+  He as t
 };
-//# sourceMappingURL=theme-Dq4r3aRE.js.map
+//# sourceMappingURL=theme-D-aCJqTf.js.map