@pstdio/ui 0.23.0 → 0.24.2

package/dist/{theme-C0empEin.js → theme-B5OVwYEU.js}

@@ -1,6 +1,6 @@
-import { defineSlotRecipe as t, defineRecipe as c, defaultConfig as d, defineLayerStyles as F, defineTextStyles as k, createSystem as C, defineConfig as w } from "@chakra-ui/react";
-import { alertAnatomy as E, colorPickerAnatomy as A, dialogAnatomy as z, drawerAnatomy as W, fieldsetAnatomy as R, menuAnatomy as D, numberInputAnatomy as B, popoverAnatomy as H, switchAnatomy as T, tabsAnatomy as L, timelineAnatomy as I, tooltipAnatomy as V } from "@chakra-ui/react/anatomy";
-import { progressCircleSlotRecipe as h } from "@chakra-ui/react/theme";
+import { defineSlotRecipe as t, defineRecipe as c, defaultConfig as d, defineLayerStyles as k, defineTextStyles as C, createSystem as F, defineConfig as E } from "@chakra-ui/react";
+import { alertAnatomy as W, colorPickerAnatomy as z, dialogAnatomy as D, drawerAnatomy as A, fieldsetAnatomy as R, menuAnatomy as B, numberInputAnatomy as H, popoverAnatomy as T, switchAnatomy as I, tabsAnatomy as L, timelineAnatomy as P, tooltipAnatomy as V } from "@chakra-ui/react/anatomy";
+import { progressCircleSlotRecipe as v } from "@chakra-ui/react/theme";
 const X = t({
   className: "ps-window-title-bar",
   slots: ["root", "content"],
@@ -10,10 +10,8 @@ const X = t({
       flexShrink: 0,
       width: "full",
       height: "window-title-bar",
-      bg: "bg.subtle",
+      bg: "bg",
       color: "fg",
-      borderBottomWidth: "1px",
-      borderColor: "border",
       userSelect: "none",
       WebkitAppRegion: "drag"
     },
@@ -33,7 +31,10 @@ const X = t({
     controls: {
       mac: {
         content: {
-          paddingInlineStart: "window-controls-mac"
+          paddingInlineStart: "window-controls-mac",
+          "[data-window-full-screen] &": {
+            paddingInlineStart: "compact"
+          }
         }
       },
       overlay: {
@@ -60,6 +61,7 @@ const X = t({
       scrollbarWidth: "none"
     },
     tab: {
+      position: "relative",
       display: "flex",
       alignItems: "center",
       flexShrink: 0,
@@ -77,7 +79,13 @@ const X = t({
       _hover: {
         bg: "bg.hover",
         color: "fg"
-      }
+      },
+      _dragging: {
+        bg: "bg.hover",
+        color: "fg",
+        zIndex: "docked"
+      },
+      WebkitAppRegion: "no-drag"
     },
     trigger: {
       display: "flex",
@@ -92,6 +100,7 @@ const X = t({
       borderRadius: "xs",
       focusVisibleRing: "inside",
       WebkitAppRegion: "no-drag",
+      touchAction: "none",
       _icon: {
         width: "icon-xs",
         height: "icon-xs",
@@ -126,7 +135,7 @@ const X = t({
       }
     }
   }
-}), P = {
+}), j = {
   "editor.background": ["colors.bg", "colors.bg.code"],
   "editor.foreground": ["colors.fg"],
   "editor.lineHighlightBackground": ["colors.bg.hover"],
@@ -159,8 +168,8 @@ const X = t({
   descriptionForeground: ["colors.fg.muted"],
   disabledForeground: ["colors.fg.subtle"],
   border: ["colors.border", "colors.border.subtle"]
-}, j = (e) => `colors.vscode.${e}`, U = (e) => e.replace(/^#/, ""), O = (e) => {
-  const l = (e.theme.tokenColors ?? []).flatMap((r) => (Array.isArray(r.scope) ? r.scope : r.scope ? [r.scope] : []).map((s) => ({
+}, O = (o) => `colors.vscode.${o}`, U = (o) => o.replace(/^#/, ""), N = (o) => {
+  const l = (o.theme.tokenColors ?? []).flatMap((r) => (Array.isArray(r.scope) ? r.scope : r.scope ? [r.scope] : []).map((s) => ({
     token: s,
     ...r.settings?.foreground ? {
       foreground: U(r.settings.foreground)
@@ -170,27 +179,27 @@ const X = t({
     } : {}
   })));
   return {
-    base: e.mode === "dark" ? "vs-dark" : "vs",
+    base: o.mode === "dark" ? "vs-dark" : "vs",
     inherit: !0,
     rules: l,
-    colors: e.theme.colors ?? {}
+    colors: o.theme.colors ?? {}
   };
-}, to = (e) => {
-  const l = {}, r = e.theme.colors ?? {};
+}, co = (o) => {
+  const l = {}, r = o.theme.colors ?? {};
   for (const [n, s] of Object.entries(r))
-    l[j(n)] = s;
-  for (const [n, s] of Object.entries(P)) {
-    const g = r[n];
-    if (g)
-      for (const m of s) l[m] = g;
+    l[O(n)] = s;
+  for (const [n, s] of Object.entries(j)) {
+    const b = r[n];
+    if (b)
+      for (const m of s) l[m] = b;
   }
   return {
-    id: e.id,
-    mode: e.mode,
+    id: o.id,
+    mode: o.mode,
     tokens: l,
-    monacoTheme: O({
-      mode: e.mode,
-      theme: e.theme
+    monacoTheme: N({
+      mode: o.mode,
+      theme: o.theme
     })
   };
 }, Y = {
@@ -254,7 +263,7 @@ const X = t({
       fontSize: "1.5rem"
     }
   }
-}, $ = {
+}, G = {
   DEFAULT: {
     value: "#0A0D15"
   },
@@ -303,7 +312,7 @@ const X = t({
   1e3: {
     value: "#000000"
   }
-}, N = {
+}, $ = {
   DEFAULT: {
     value: "#5098FF"
   },
@@ -374,7 +383,7 @@ const X = t({
   900: {
     value: "#0A125A"
   }
-}, G = {
+}, K = {
   DEFAULT: {
     value: "#E054EC"
   },
@@ -411,7 +420,7 @@ const X = t({
   900: {
     value: "#520659"
   }
-}, K = {
+}, J = {
   DEFAULT: {
     value: "#FBD8CE"
   },
@@ -445,7 +454,7 @@ const X = t({
   900: {
     value: "#522923"
   }
-}, J = {
+}, Q = {
   DEFAULT: {
     value: "#FF3232"
   },
@@ -479,7 +488,7 @@ const X = t({
   900: {
     value: "#580707"
   }
-}, Q = {
+}, Z = {
   DEFAULT: {
     value: "#F78C25"
   },
@@ -513,7 +522,7 @@ const X = t({
   900: {
     value: "#552107"
   }
-}, Z = {
+}, ee = {
   DEFAULT: {
     value: "#FFD643"
   },
@@ -553,7 +562,7 @@ const X = t({
   900: {
     value: "#644E00"
   }
-}, ee = {
+}, oe = {
   DEFAULT: {
     value: "#2DD665"
   },
@@ -587,7 +596,7 @@ const X = t({
   900: {
     value: "#003110"
   }
-}, oe = {
+}, re = {
   DEFAULT: {
     value: "#3EECC4"
   },
@@ -621,7 +630,7 @@ const X = t({
   900: {
     value: "#024F3D"
   }
-}, re = {
+}, le = {
   DEFAULT: {
     value: "#5CDCFF"
   },
@@ -655,7 +664,7 @@ const X = t({
   900: {
     value: "#005B73"
   }
-}, le = {
+}, te = {
   DEFAULT: {
     value: "#8B47FF"
   },
@@ -689,7 +698,7 @@ const X = t({
   900: {
     value: "#1E0050"
   }
-}, te = {
+}, ae = {
   DEFAULT: {
     value: "#F4F2EC"
   },
@@ -723,7 +732,7 @@ const X = t({
   900: {
     value: "#E8CECE"
   }
-}, ae = {
+}, ie = {
   50: {
     value: "#FCFDFC"
   },
@@ -766,30 +775,64 @@ const X = t({
   950: {
     value: "#10141B"
   }
-}, ie = {
+}, ne = {
   100: {
     value: "#D3ECEE"
   },
   200: {
     value: "#B3DEE2"
   }
-}, ne = {
-  sand: te,
-  blacks: $,
-  blue: N,
-  sapphire: q,
-  pink: G,
-  peach: K,
-  red: J,
-  orange: Q,
-  yellow: Z,
-  green: ee,
-  teal: oe,
-  cyan: re,
-  purple: le,
-  neutral: ae,
-  mint: ie
 }, se = {
+  windowControl: {
+    close: {
+      value: "#FF5F57"
+    },
+    minimize: {
+      value: "#FEBC2E"
+    },
+    zoom: {
+      value: "#28C840"
+    }
+  },
+  illustration: {
+    desktop: {
+      value: "#FF6B1A"
+    },
+    page: {
+      value: "#29ABE2"
+    },
+    command: {
+      value: "#FBB040"
+    },
+    editor: {
+      value: "#29ABE2"
+    },
+    skill: {
+      value: "#E6357F"
+    },
+    hook: {
+      value: "#E6357F"
+    },
+    automation: {
+      value: "#F7931E"
+    }
+  },
+  sand: ae,
+  blacks: G,
+  blue: $,
+  sapphire: q,
+  pink: K,
+  peach: J,
+  red: Q,
+  orange: Z,
+  yellow: ee,
+  green: oe,
+  teal: re,
+  cyan: le,
+  purple: te,
+  neutral: ie,
+  mint: ne
+}, de = {
   display: {
     value: "'Playfair Display', serif"
   },
@@ -805,7 +848,7 @@ const X = t({
   body: {
     value: "Inter, sans-serif"
   }
-}, de = {
+}, ce = {
   "2xs": {
     value: "0.5rem"
   },
@@ -874,7 +917,7 @@ const X = t({
     value: "1.25rem"
   }
   // 20px
-}, ce = {
+}, ue = {
   regular: {
     value: 400
   },
@@ -887,7 +930,7 @@ const X = t({
   bold: {
     value: 700
   }
-}, o = {
+}, e = {
   // 0px
   25: "0.125rem",
   // 2px
@@ -918,62 +961,68 @@ const X = t({
   1600: "8rem",
   // 128px
   2e3: "10rem"
-}, ue = {
+}, ge = {
   "window-tab-gap": {
     value: "0.4375rem"
   },
   "window-controls-mac": {
-    value: "4.875rem"
+    value: "5.625rem"
   },
   none: {
     value: "0"
   },
   "3xs": {
-    value: o[25]
+    value: e[25]
   },
   "2xs": {
-    value: o[50]
+    value: e[50]
   },
   xs: {
-    value: o[100]
+    value: e[100]
   },
   compact: {
     value: "0.625rem"
   },
   sm: {
-    value: o[150]
+    value: e[150]
   },
   comfortable: {
     value: "0.875rem"
   },
   md: {
-    value: o[200]
+    value: e[200]
   },
   lg: {
-    value: o[300]
+    value: e[300]
   },
   xl: {
-    value: o[400]
+    value: e[400]
   },
   "2xl": {
-    value: o[500]
+    value: e[500]
   },
   "3xl": {
-    value: o[600]
+    value: e[600]
   },
   "3.5xl": {
-    value: o[700]
+    value: e[700]
   },
   "4xl": {
-    value: o[800]
+    value: e[800]
   },
   "4.5xl": {
-    value: o[900]
+    value: e[900]
   },
   "5xl": {
-    value: o[1600]
+    value: e[1600]
+  },
+  "panel-gap": {
+    value: e[50]
   }
 }, be = {
+  "panel-gap": {
+    value: e[50]
+  },
   "window-title-bar": {
     value: "2.75rem"
   },
@@ -986,26 +1035,29 @@ const X = t({
   "window-tab-max": {
     value: "15rem"
   },
+  "mobile-titlebar": {
+    value: "3.25rem"
+  },
   "collection-row": {
     value: "2.125rem"
   },
   "filter-pill": {
-    value: o[300]
+    value: e[300]
   },
   "icon-2xs": {
-    value: o[150]
+    value: e[150]
   },
   "icon-xs": {
     value: "0.875rem"
   },
   "icon-sm": {
-    value: o[200]
+    value: e[200]
   },
   "icon-md": {
-    value: o[250]
+    value: e[250]
   },
   "tag-color-dot": {
-    value: o[250]
+    value: e[250]
   },
   "tag-icon-cell": {
     value: "1.75rem"
@@ -1023,13 +1075,13 @@ const X = t({
     value: "0.625rem"
   },
   "tag-editor-row": {
-    value: o[500]
+    value: e[500]
   },
   "tag-editor-add-row": {
     value: "2.25rem"
   },
   "tag-editor-lead": {
-    value: o[600]
+    value: e[600]
   },
   "tag-editor-commands": {
     value: "11.875rem"
@@ -1041,57 +1093,57 @@ const X = t({
     value: "1.75rem"
   },
   "segmented-control-xs": {
-    value: o[300]
+    value: e[300]
   },
   "segmented-control-item-sm": {
-    value: o[300]
+    value: e[300]
   },
   "segmented-control-item-xs": {
-    value: o[250]
+    value: e[250]
   },
   "tag-action-menu": {
-    value: o[2e3]
+    value: e[2e3]
   },
   "view-bar": {
-    value: o[500]
+    value: e[500]
   },
   "view-subheader": {
     value: "2.25rem"
   }
-}, ge = {
+}, me = {
   selection: {
     value: "0.09375rem"
   }
-}, me = {
+}, pe = {
   none: {
     value: "0"
   },
   "2xs": {
-    value: o[25]
+    value: e[25]
   },
   xs: {
-    value: o[50]
+    value: e[50]
   },
   compact: {
     value: "0.375rem"
   },
   sm: {
-    value: o[100]
+    value: e[100]
   },
   md: {
-    value: o[150]
+    value: e[150]
   },
   lg: {
-    value: o[200]
+    value: e[200]
   },
   xl: {
-    value: o[400]
+    value: e[400]
   },
   full: {
     value: "100%"
   }
-}, ve = t({
-  slots: E.keys(),
+}, he = t({
+  slots: W.keys(),
   base: {
     root: {
       px: "xs",
@@ -1163,7 +1215,7 @@ const X = t({
       }
     }
   }]
-}), he = c({
+}), ve = c({
   className: "chakra-badge",
   base: {
     display: "inline-flex",
@@ -1237,7 +1289,7 @@ const X = t({
     variant: "subtle",
     size: "sm"
   }
-}), pe = c({
+}), fe = c({
   base: {
     borderRadius: "xs",
     transition: "all 0.1s ease-in-out",
@@ -1455,8 +1507,8 @@ const X = t({
     size: "sm",
     variant: "outline"
   }
-}), u = "border.accent-light", fe = t({
-  slots: A.keys(),
+}), u = "border.accent-light", xe = t({
+  slots: z.keys(),
   base: {
     control: {
       display: "flex",
@@ -1575,8 +1627,8 @@ const X = t({
   defaultVariants: {
     size: "sm"
   }
-}), xe = t({
-  slots: z.keys(),
+}), ye = t({
+  slots: D.keys(),
   base: {
     content: {
       bg: "bg",
@@ -1586,12 +1638,12 @@ const X = t({
       overflow: "hidden"
     }
   }
-}), _e = c({
+}), Se = c({
   base: {
     borderColor: "border.subtle"
   }
-}), ye = t({
-  slots: W.keys(),
+}), _e = t({
+  slots: A.keys(),
   base: {
     header: {
       fontWeight: "medium",
@@ -1602,7 +1654,7 @@ const X = t({
       bg: "bg"
     }
   }
-}), Se = t({
+}), we = t({
   slots: ["preview", "input", "textarea"],
   base: {
     preview: {
@@ -1701,14 +1753,14 @@ const X = t({
       }
     }
   }
-}), Fe = t({
+}), ke = t({
   slots: R.keys(),
   base: {
     legend: {
       mb: "2xs"
     }
   }
-}), a = "border.accent-light", ke = c({
+}), a = "border.accent-light", Ce = c({
   base: {
     px: "sm",
     borderRadius: "xs",
@@ -1845,7 +1897,7 @@ const X = t({
     size: "sm",
     variant: "outline"
   }
-}), Ce = c({
+}), Fe = c({
   base: {
     display: "inline-flex",
     alignItems: "center",
@@ -1908,149 +1960,813 @@ const X = t({
     size: "md",
     variant: "raised"
   }
-}), we = t({
-  slots: D.keys(),
+}), Ee = t({
+  slots: ["root", "window", "titlebar", "windowControls", "windowControl", "mobileTitlebar", "mobileNav", "sidebar", "status", "body", "main", "hero", "heroCopy", "heroNavigation", "tools", "download", "brandTab", "panelsScroll", "panelScroll"],
   base: {
-    itemGroupLabel: {
-      ml: "{2xs}",
-      textStyle: "label/S/regular",
-      fontWeight: "normal",
-      color: "fg.muted"
+    root: {
+      height: "100dvh",
+      position: "relative",
+      overflow: "hidden",
+      bg: "bg.subtle"
     },
-    item: {
+    window: {
+      display: "flex",
+      flexDirection: "column",
+      height: "full",
       width: "full",
-      minWidth: "0",
-      maxWidth: "full",
-      minH: "1.75rem",
-      h: "auto",
+      position: "relative",
+      bg: "bg.subtle",
+      color: "fg",
+      overflow: "hidden"
+    },
+    titlebar: {
+      height: "11",
+      flexShrink: 0,
+      gap: "xs",
+      px: "compact",
+      display: {
+        base: "none",
+        md: "flex"
+      },
+      alignItems: "center"
+    },
+    windowControls: {
       display: "flex",
       alignItems: "center",
-      justifyContent: "space-between",
       gap: "xs",
       px: "sm",
-      py: "2xs",
-      borderRadius: "0",
-      bg: "transparent",
-      color: "fg.menu-item.default",
-      textStyle: "label/S/regular",
+      flexShrink: 0
+    },
+    windowControl: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "icon-2xs",
+      height: "icon-2xs",
+      borderRadius: "full",
+      color: "blackAlpha.700",
       cursor: "pointer",
-      overflow: "hidden",
-      textAlign: "left",
-      textDecoration: "none",
-      _hover: {
-        bg: "bg.menu-item.hover"
+      "& svg": {
+        width: "2",
+        height: "2",
+        visibility: "hidden"
       },
-      _highlighted: {
-        bg: "bg.menu-item.hover"
+      "&[data-control=close]:not(:disabled)": {
+        bg: "windowControl.close"
       },
-      _focusVisible: {
-        bg: "bg.menu-item.focus"
+      "&[data-control=minimize]:not(:disabled)": {
+        bg: "windowControl.minimize"
       },
-      _checked: {
-        bg: "bg.menu-item.selected",
-        color: "fg"
+      "&[data-control=zoom]": {
+        bg: "windowControl.zoom"
       },
-      _selected: {
-        bg: "bg.menu-item.selected",
-        color: "fg"
+      _groupHover: {
+        "&:not(:disabled) svg": {
+          visibility: "visible"
+        }
       },
-      "&[aria-checked=true]": {
-        bg: "bg.menu-item.selected",
-        color: "fg"
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "fg",
+        outlineOffset: "2px",
+        "& svg": {
+          visibility: "visible"
+        }
       },
       _disabled: {
+        bg: "bg.muted",
         cursor: "not-allowed",
-        color: "fg.muted"
+        "& svg": {
+          visibility: "hidden"
+        }
       }
     },
-    itemIndicator: {
-      color: "fg"
+    mobileTitlebar: {
+      height: "mobile-titlebar",
+      flexShrink: 0,
+      gap: "xs",
+      px: "sm",
+      display: {
+        base: "flex",
+        md: "none"
+      },
+      textAlign: "left",
+      alignItems: "center"
     },
-    separator: {
-      my: "0",
-      borderColor: "border.subtle"
+    mobileNav: {
+      alignItems: "center",
+      height: "10",
+      flexShrink: 0,
+      width: "full",
+      gap: "xs",
+      px: "md",
+      display: {
+        base: "flex",
+        lg: "none"
+      }
     },
-    content: {
+    sidebar: {
       display: "flex",
       flexDirection: "column",
-      width: "17.5rem",
-      minWidth: "17.5rem",
-      maxWidth: "17.5rem",
-      gap: "0",
-      borderRadius: "xs",
-      p: "0",
-      px: "0",
-      py: "0",
-      bg: "bg",
-      borderWidth: "1px",
-      borderStyle: "solid",
-      borderColor: "border",
-      textStyle: "label/M/regular"
-    }
-  }
-}), Ee = "var(--chakra-colors-border)", v = "var(--chakra-colors-border-accent-light)", Ae = t({
-  slots: B.keys(),
-  base: {
-    root: {
+      layerStyle: "panel",
+      height: "full",
+      width: "full",
+      flexShrink: 0,
+      gap: "2xs",
+      px: "xs",
+      py: "xs",
+      bg: "bg.subtle"
+    },
+    status: {
+      minHeight: "7",
+      flexShrink: 0,
+      flexWrap: "wrap",
+      gap: "xs",
+      rowGap: "2xs",
+      px: "xs",
+      color: "fg.muted"
+    },
+    body: {
+      display: "flex",
+      flex: 1,
+      minHeight: 0,
+      p: "panel-gap"
+    },
+    main: {
+      flex: 1,
+      minHeight: 0,
+      minWidth: 0,
       position: "relative",
-      zIndex: "0",
-      isolation: "isolate",
-      boxShadow: "none",
-      "--number-input-border-color": Ee,
-      "&:is(:hover, [data-hover])": {
-        "--number-input-border-color": v
-      },
-      "&:is(:active, [data-active])": {
-        "--number-input-border-color": v
+      overflow: "hidden"
+    },
+    panelsScroll: {
+      "& > [data-part=viewport] > [data-part=content]": {
+        height: {
+          base: "auto",
+          lg: "full"
+        }
       },
-      "&:focus-within": {
-        "--number-input-border-color": v
+      "& > [data-part=scrollbar]": {
+        display: {
+          base: "flex",
+          lg: "none"
+        }
       }
     },
-    input: {
-      px: "sm",
-      pe: "calc(var(--stepper-width) + 0.5rem)",
-      borderRadius: "xs",
-      transition: "border-color 0.2s ease-in-out",
-      bg: "bg",
-      color: "fg",
-      borderWidth: "1px",
-      borderStyle: "solid",
-      borderColor: "var(--number-input-border-color)",
-      outline: "none",
-      boxShadow: "none",
-      "--focus-ring-color": "var(--number-input-border-color)",
-      "--focus-ring-style": "none",
-      _hover: {
-        borderColor: "var(--number-input-border-color)"
-      },
-      _active: {
-        borderColor: "var(--number-input-border-color)"
-      },
-      _focus: {
-        borderColor: "var(--number-input-border-color)",
-        outline: "none",
-        boxShadow: "none"
-      },
-      _focusVisible: {
-        borderColor: "var(--number-input-border-color)",
-        outline: "none",
-        boxShadow: "none"
+    panelScroll: {
+      display: {
+        base: "contents",
+        lg: "flex"
       },
-      _placeholder: {
-        color: "fg.subtle"
+      "& > [data-part=viewport]": {
+        display: {
+          base: "contents",
+          lg: "block"
+        }
       },
-      "&:is(:hover, [data-hover])": {
-        borderColor: "var(--number-input-border-color)"
+      "& > [data-part=viewport] > [data-part=content]": {
+        display: {
+          base: "contents",
+          lg: "block"
+        }
       },
-      "&:is(:active, [data-active])": {
-        borderColor: "var(--number-input-border-color)"
+      "& > [data-part=scrollbar]": {
+        display: {
+          base: "none",
+          lg: "flex"
+        }
+      }
+    },
+    hero: {
+      display: "flex",
+      flexDirection: "column",
+      layerStyle: "panel",
+      bg: "bg",
+      width: "full",
+      height: "full",
+      overflow: "hidden"
+    },
+    heroNavigation: {
+      display: "flex",
+      flexWrap: "wrap",
+      justifyContent: "space-between",
+      gap: "sm",
+      flexShrink: 0,
+      px: {
+        base: "lg",
+        xl: "3xl"
       },
-      "&:not([data-invalid], [aria-invalid='true'], [data-state='invalid'])": {
-        borderColor: "var(--number-input-border-color)"
+      py: "lg",
+      "& [data-direction=next]": {
+        marginInlineStart: "auto",
+        flexDirection: "row-reverse"
       }
     },
-    control: {
+    heroCopy: {
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "full",
+      width: "full",
+      maxWidth: "2xl",
+      mx: "auto",
+      gap: "xl",
+      px: {
+        base: "lg",
+        xl: "3xl"
+      },
+      py: {
+        base: "xl",
+        xl: "4xl"
+      }
+    },
+    tools: {
+      layerStyle: "panel",
+      bg: "bg",
+      position: "relative",
+      overflow: "hidden",
+      width: "full",
+      height: "full",
+      minHeight: "0"
+    },
+    download: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sm",
+      alignItems: "start",
+      width: "full"
+    },
+    brandTab: {
+      height: "7",
+      px: "compact",
+      gap: "xs",
+      borderRadius: "xs",
+      bg: "bg.hover",
+      color: "fg",
+      borderWidth: "1px",
+      borderColor: "border.subtle",
+      flexShrink: 0,
+      cursor: "pointer"
+    }
+  },
+  variants: {
+    windowed: {
+      true: {
+        root: {
+          bg: "illustration.desktop"
+        },
+        window: {
+          height: "calc(100dvh - 12rem)",
+          width: "calc(100% - 15rem)",
+          mx: "7.5rem",
+          my: "6rem",
+          borderRadius: "lg",
+          boxShadow: "2xl"
+        },
+        titlebar: {
+          cursor: "grab",
+          _active: {
+            cursor: "grabbing"
+          }
+        }
+      }
+    }
+  }
+}), We = t({
+  slots: ["page", "section", "featureSection", "intro", "visual", "panels", "panel", "panelHeader", "panelBody", "blockGrid", "block", "blockSymbol", "blockMark", "composition"],
+  base: {
+    page: {
+      display: "flex",
+      flexDirection: "column",
+      width: "full",
+      minWidth: 0,
+      gap: "4xl",
+      px: {
+        base: "lg",
+        md: "xl"
+      },
+      py: "3xl",
+      containerType: "inline-size"
+    },
+    section: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "lg",
+      width: "full",
+      minWidth: 0
+    },
+    featureSection: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xl",
+      width: "full",
+      minWidth: 0,
+      pt: "xl",
+      pb: "xl"
+    },
+    intro: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sm",
+      maxWidth: "3xl"
+    },
+    visual: {
+      layerStyle: "panel",
+      bg: "bg.subtle",
+      p: "xs",
+      width: "full",
+      minWidth: 0
+    },
+    panels: {
+      display: "grid",
+      gridTemplateColumns: "minmax(0, 1fr)",
+      gap: "panel-gap",
+      "@container (min-width: 36rem)": {
+        gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.3fr)"
+      }
+    },
+    panel: {
+      layerStyle: "panel",
+      bg: "bg",
+      minWidth: 0,
+      height: "full",
+      display: "flex",
+      flexDirection: "column",
+      "&[data-highlighted=true]": {
+        borderColor: "fg.muted"
+      }
+    },
+    panelHeader: {
+      display: "flex",
+      alignItems: "center",
+      gap: "sm",
+      p: "md",
+      borderBottomWidth: "1px",
+      borderColor: "border.subtle",
+      textStyle: "label/M/medium"
+    },
+    panelBody: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "md",
+      p: "md",
+      flex: 1,
+      minWidth: 0
+    },
+    blockGrid: {
+      display: "grid",
+      gap: "sm",
+      gridTemplateColumns: "minmax(0, 1fr)",
+      "@container (min-width: 26rem)": {
+        gridTemplateColumns: "repeat(2, minmax(0, 1fr))"
+      },
+      "@container (min-width: 55rem)": {
+        gridTemplateColumns: "repeat(3, minmax(0, 1fr))"
+      }
+    },
+    block: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "start",
+      gap: "sm",
+      p: "lg",
+      bg: "bg.subtle",
+      borderRadius: "sm",
+      borderWidth: "1px",
+      borderColor: "border.subtle",
+      textAlign: "left",
+      color: "fg"
+    },
+    blockMark: {
+      display: "inline-flex",
+      flexShrink: 0,
+      "& svg": {
+        height: "full",
+        width: "auto",
+        maxWidth: "none"
+      }
+    },
+    blockSymbol: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "start",
+      height: "16",
+      width: "full"
+    },
+    composition: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "md",
+      borderTopWidth: "1px",
+      borderColor: "border.subtle",
+      pt: "lg"
+    }
+  },
+  variants: {
+    spacing: {
+      normal: {},
+      spacious: {
+        page: {
+          gap: "5xl"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    spacing: "normal"
+  }
+}), ze = t({
+  slots: ["iconEditor", "iconPicker", "iconGrid", "iconTile", "iconName", "tileSymbol", "iconCanvas", "inspectorSymbol", "inspector", "toolbar", "metrics", "metric", "sessions", "session", "sessionStatus", "preview", "checks", "prompt", "plot", "plotGrid", "plotCurve", "plotComparison", "plotCursor", "plotPoint", "shaderCode", "shaderCanvas", "extensionPanels"],
+  base: {
+    extensionPanels: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, {sizes.48}), 1fr))",
+      gap: "panel-gap",
+      minHeight: "64",
+      width: "full"
+    },
+    iconPicker: {
+      display: "grid",
+      gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+      "@container (min-width: 26rem)": {
+        gridTemplateColumns: "repeat(6, minmax(0, 1fr))"
+      },
+      gap: "xs"
+    },
+    shaderCode: {
+      textStyle: "mono/XS",
+      fontSize: "sm",
+      minHeight: "64",
+      flex: 1,
+      resize: "none"
+    },
+    shaderCanvas: {
+      display: "block",
+      width: "full",
+      aspectRatio: "4 / 3",
+      bg: "bg.subtle",
+      borderRadius: "sm"
+    },
+    plot: {
+      width: "full",
+      bg: "bg.subtle",
+      borderRadius: "sm"
+    },
+    plotGrid: {
+      fill: "none",
+      stroke: "border.subtle",
+      strokeWidth: 1
+    },
+    plotComparison: {
+      fill: "none",
+      stroke: "fg.muted",
+      strokeWidth: 2,
+      strokeDasharray: "5 5"
+    },
+    plotCurve: {
+      fill: "none",
+      stroke: "fg.info",
+      strokeWidth: 3,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    plotCursor: {
+      stroke: "fg.muted",
+      strokeWidth: 1,
+      strokeDasharray: "4 4"
+    },
+    plotPoint: {
+      fill: "fg",
+      stroke: "bg",
+      strokeWidth: 2
+    },
+    iconEditor: {
+      display: "grid",
+      gridTemplateColumns: "minmax(0, 1fr)",
+      gap: "panel-gap",
+      "@container (min-width: 36rem)": {
+        gridTemplateColumns: "minmax(0, 1.5fr) minmax(0, 1fr)"
+      }
+    },
+    iconGrid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fill, minmax(min({sizes.24}, 100%), 1fr))",
+      gap: "xs",
+      listStyle: "none",
+      py: "xs"
+    },
+    iconTile: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "xs",
+      minWidth: 0,
+      minHeight: "28",
+      p: "sm",
+      bg: "bg.subtle",
+      borderWidth: "1px",
+      borderColor: "border.subtle",
+      borderRadius: "sm",
+      color: "fg",
+      transitionProperty: "opacity, background-color, border-color",
+      transitionDuration: "moderate",
+      "&[data-state=pending]": {
+        opacity: 0.25
+      },
+      "&[data-state=active]": {
+        borderColor: "fg.info",
+        bg: "bg.info"
+      },
+      "@media (prefers-reduced-motion: reduce)": {
+        transition: "none"
+      },
+      "&[aria-pressed]": {
+        cursor: "pointer",
+        _hover: {
+          bg: "bg.hover"
+        }
+      },
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "fg",
+        outlineOffset: "2px"
+      },
+      "&[aria-pressed=true]": {
+        borderColor: "fg.info",
+        bg: "bg.info"
+      }
+    },
+    iconName: {
+      textStyle: "label/S/regular",
+      maxWidth: "full",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    tileSymbol: {
+      boxSize: "8",
+      fontSize: "{sizes.8}",
+      mb: "xs"
+    },
+    iconCanvas: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      bg: "bg.subtle",
+      borderRadius: "sm",
+      minHeight: "44",
+      p: "xl"
+    },
+    inspectorSymbol: {
+      boxSize: "24",
+      fontSize: "{sizes.24}"
+    },
+    inspector: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "md"
+    },
+    toolbar: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "sm",
+      flexWrap: "wrap"
+    },
+    metrics: {
+      display: "grid",
+      gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+      gap: "panel-gap"
+    },
+    metric: {
+      layerStyle: "panel",
+      bg: "bg",
+      p: "md",
+      display: "flex",
+      flexDirection: "column",
+      gap: "xs"
+    },
+    sessions: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sm",
+      listStyle: "none"
+    },
+    session: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "md",
+      width: "full",
+      p: "md",
+      minWidth: 0,
+      textAlign: "left",
+      color: "fg",
+      layerStyle: "panel",
+      bg: "bg.subtle",
+      "&[aria-pressed]": {
+        cursor: "pointer",
+        _hover: {
+          bg: "bg.hover"
+        }
+      },
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "fg",
+        outlineOffset: "2px"
+      },
+      "&[aria-pressed=true]": {
+        borderColor: "fg.muted",
+        bg: "bg.active"
+      },
+      "&[data-status=in_progress]": {
+        borderColor: "fg.info",
+        bg: "bg.info"
+      },
+      "&[data-status=completed]": {
+        borderColor: "fg.success"
+      }
+    },
+    sessionStatus: {
+      gap: "xs",
+      "&[data-status=in_progress] > svg": {
+        animation: "spin 1.2s linear infinite"
+      },
+      "@media (prefers-reduced-motion: reduce)": {
+        "&[data-status=in_progress] > svg": {
+          animation: "none"
+        }
+      }
+    },
+    preview: {
+      layerStyle: "panel",
+      bg: "bg.subtle",
+      p: "md",
+      overflow: "hidden",
+      minWidth: 0,
+      flex: 1
+    },
+    checks: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "md",
+      textStyle: "label/S/regular",
+      color: "fg.success"
+    },
+    prompt: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flexWrap: "wrap",
+      gap: "md",
+      p: "lg",
+      bg: "bg.subtle",
+      layerStyle: "panel",
+      textStyle: "paragraph/L/regular"
+    }
+  }
+}), De = t({
+  slots: B.keys(),
+  base: {
+    itemGroupLabel: {
+      ml: "{2xs}",
+      textStyle: "label/S/regular",
+      fontWeight: "normal",
+      color: "fg.muted"
+    },
+    item: {
+      width: "full",
+      minWidth: "0",
+      maxWidth: "full",
+      minH: "1.75rem",
+      h: "auto",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "xs",
+      px: "sm",
+      py: "2xs",
+      borderRadius: "0",
+      bg: "transparent",
+      color: "fg.menu-item.default",
+      textStyle: "label/S/regular",
+      cursor: "pointer",
+      overflow: "hidden",
+      textAlign: "left",
+      textDecoration: "none",
+      _hover: {
+        bg: "bg.menu-item.hover"
+      },
+      _highlighted: {
+        bg: "bg.menu-item.hover"
+      },
+      _focusVisible: {
+        bg: "bg.menu-item.focus"
+      },
+      _checked: {
+        bg: "bg.menu-item.selected",
+        color: "fg"
+      },
+      _selected: {
+        bg: "bg.menu-item.selected",
+        color: "fg"
+      },
+      "&[aria-checked=true]": {
+        bg: "bg.menu-item.selected",
+        color: "fg"
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        color: "fg.muted"
+      }
+    },
+    itemIndicator: {
+      color: "fg"
+    },
+    separator: {
+      my: "0",
+      borderColor: "border.subtle"
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      width: "17.5rem",
+      minWidth: "17.5rem",
+      maxWidth: "17.5rem",
+      gap: "0",
+      borderRadius: "xs",
+      p: "0",
+      px: "0",
+      py: "0",
+      bg: "bg",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "border",
+      textStyle: "label/M/regular"
+    }
+  }
+}), Ae = "var(--chakra-colors-border)", p = "var(--chakra-colors-border-accent-light)", Re = t({
+  slots: H.keys(),
+  base: {
+    root: {
+      position: "relative",
+      zIndex: "0",
+      isolation: "isolate",
+      boxShadow: "none",
+      "--number-input-border-color": Ae,
+      "&:is(:hover, [data-hover])": {
+        "--number-input-border-color": p
+      },
+      "&:is(:active, [data-active])": {
+        "--number-input-border-color": p
+      },
+      "&:focus-within": {
+        "--number-input-border-color": p
+      }
+    },
+    input: {
+      px: "sm",
+      pe: "calc(var(--stepper-width) + 0.5rem)",
+      borderRadius: "xs",
+      transition: "border-color 0.2s ease-in-out",
+      bg: "bg",
+      color: "fg",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "var(--number-input-border-color)",
+      outline: "none",
+      boxShadow: "none",
+      "--focus-ring-color": "var(--number-input-border-color)",
+      "--focus-ring-style": "none",
+      _hover: {
+        borderColor: "var(--number-input-border-color)"
+      },
+      _active: {
+        borderColor: "var(--number-input-border-color)"
+      },
+      _focus: {
+        borderColor: "var(--number-input-border-color)",
+        outline: "none",
+        boxShadow: "none"
+      },
+      _focusVisible: {
+        borderColor: "var(--number-input-border-color)",
+        outline: "none",
+        boxShadow: "none"
+      },
+      _placeholder: {
+        color: "fg.subtle"
+      },
+      "&:is(:hover, [data-hover])": {
+        borderColor: "var(--number-input-border-color)"
+      },
+      "&:is(:active, [data-active])": {
+        borderColor: "var(--number-input-border-color)"
+      },
+      "&:not([data-invalid], [aria-invalid='true'], [data-state='invalid'])": {
+        borderColor: "var(--number-input-border-color)"
+      }
+    },
+    control: {
       display: "flex",
       flexDirection: "column",
       position: "absolute",
@@ -2201,8 +2917,8 @@ const X = t({
     size: "sm",
     variant: "outline"
   }
-}), ze = t({
-  slots: H.keys(),
+}), Be = t({
+  slots: T.keys(),
   base: {
     positioner: {
       _focus: {
@@ -2255,12 +2971,12 @@ const X = t({
       }
     }
   }
-}), We = h.variants?.size ?? {}, Re = {
-  ...h,
+}), He = v.variants?.size ?? {}, Te = {
+  ...v,
   variants: {
-    ...h.variants,
+    ...v.variants,
     size: {
-      ...We,
+      ...He,
       "2xs": {
         circle: {
           "--size": "14px",
@@ -2272,13 +2988,134 @@ const X = t({
       }
     }
   }
-}, De = c({
+}, h = {
+  root: {
+    flexDirection: "column",
+    height: "auto",
+    overflow: "visible",
+    gap: "panel-gap"
+  },
+  resizablePanel: {
+    display: "flex",
+    width: "full",
+    height: "auto",
+    flex: "initial",
+    overflow: "visible"
+  },
+  contentPanel: {
+    height: "auto",
+    flex: "initial",
+    overflow: "visible"
+  },
+  separator: {
+    display: "none"
+  }
+}, Ie = t({
+  slots: ["root", "resizablePanel", "contentPanel", "separator"],
+  base: {
+    root: {
+      display: "flex",
+      width: "full",
+      minWidth: 0,
+      minHeight: 0
+    },
+    resizablePanel: {
+      minWidth: 0,
+      minHeight: 0,
+      "&[data-collapsed=true]": {
+        display: "none"
+      }
+    },
+    contentPanel: {
+      display: "flex",
+      minWidth: 0,
+      minHeight: 0
+    },
+    separator: {
+      "&[data-collapsed=true]": {
+        display: "none"
+      }
+    }
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: {
+          "--split-direction": "row",
+          "--split-width": "var(--split-size)",
+          "--split-height": "100%"
+        }
+      },
+      vertical: {
+        root: {
+          "--split-direction": "column",
+          "--split-width": "100%",
+          "--split-height": "var(--split-size)"
+        }
+      }
+    },
+    layout: {
+      split: {
+        root: {
+          flexDirection: "var(--split-direction)",
+          height: "full",
+          overflow: "hidden",
+          gap: "0"
+        },
+        resizablePanel: {
+          display: "flex",
+          width: "var(--split-width)",
+          height: "var(--split-height)",
+          flex: "0 0 var(--split-size)",
+          overflow: "hidden"
+        },
+        contentPanel: {
+          height: "full",
+          flex: "1",
+          overflow: "hidden"
+        },
+        separator: {
+          display: "flex"
+        }
+      },
+      stacked: h,
+      "stacked-reverse": {
+        ...h,
+        root: {
+          ...h.root,
+          flexDirection: "column-reverse"
+        }
+      },
+      content: {
+        root: {
+          height: "full",
+          overflow: "hidden"
+        },
+        resizablePanel: {
+          display: "none"
+        },
+        contentPanel: {
+          height: "full",
+          flex: "1",
+          overflow: "hidden"
+        },
+        separator: {
+          display: "none"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    layout: "split"
+  }
+}), Le = c({
   base: {
     "--start-color": "fg",
     "--end-color": "fg.muted"
   }
-}), Be = t({
-  slots: T.keys(),
+}), Pe = t({
+  slots: I.keys(),
   base: {
     control: {
       alignItems: "center",
@@ -2341,7 +3178,7 @@ const X = t({
       }
     }
   }
-}), He = t({
+}), Ve = t({
   slots: L.keys(),
   base: {
     root: {
@@ -2476,7 +3313,7 @@ const X = t({
     size: "xs",
     variant: "subtle"
   }
-}), i = "border.accent-light", Te = c({
+}), i = "border.accent-light", Xe = c({
   base: {
     paddingX: "sm",
     paddingY: "xs",
@@ -2582,8 +3419,8 @@ const X = t({
     size: "sm",
     variant: "outline"
   }
-}), Le = t({
-  slots: I.keys(),
+}), Me = t({
+  slots: P.keys(),
   base: {
     root: {
       display: "flex",
@@ -2729,7 +3566,7 @@ const X = t({
     variant: "solid",
     showLastSeparator: !1
   }
-}), Ie = t({
+}), je = t({
   slots: V.keys(),
   base: {
     content: {
@@ -2738,55 +3575,55 @@ const X = t({
       color: "fg.inverted"
     }
   }
-}), Ve = /* @__PURE__ */ new Set(["boxShadow", "boxShadowColor", "textShadow"]), p = /shadow/i, Xe = (e) => {
-  if (!p.test(e)) return e;
-  const l = e.split(",").map((r) => r.trim()).filter((r) => !p.test(r));
+}), Oe = /* @__PURE__ */ new Set(["boxShadow", "boxShadowColor", "textShadow"]), f = /shadow/i, Ue = (o) => {
+  if (!f.test(o)) return o;
+  const l = o.split(",").map((r) => r.trim()).filter((r) => !f.test(r));
   if (l.length !== 0)
     return l.join(", ");
-}, b = (e) => Array.isArray(e) ? e.map(b).filter((l) => l !== void 0) : typeof e == "string" ? Xe(e) : !e || typeof e != "object" ? e : Object.fromEntries(Object.entries(e).flatMap(([l, r]) => {
-  if (Ve.has(l) || p.test(l)) return [];
-  const n = b(r);
+}, g = (o) => Array.isArray(o) ? o.map(g).filter((l) => l !== void 0) : typeof o == "string" ? Ue(o) : !o || typeof o != "object" ? o : Object.fromEntries(Object.entries(o).flatMap(([l, r]) => {
+  if (Oe.has(l) || f.test(l)) return [];
+  const n = g(r);
   return n === void 0 ? [] : [[l, n]];
-})), x = (e) => {
+})), y = (o) => {
   const {
     shadows: l,
     ...r
-  } = e ?? {};
+  } = o ?? {};
   return r;
-}, Me = {
+}, Ne = {
   badge: ["surface"],
   button: ["secondary", "surface"]
-}, Pe = (e) => {
+}, Ye = (o) => {
   const l = {
-    ...e ?? {}
+    ...o ?? {}
   };
-  for (const [r, n] of Object.entries(Me)) {
+  for (const [r, n] of Object.entries(Ne)) {
     const s = l[r];
     if (!s || typeof s != "object") continue;
-    const g = s, m = g.variants, f = m?.variant;
-    if (!f) continue;
-    const _ = new Set(n), y = Object.fromEntries(Object.entries(f).filter(([S]) => !_.has(S)));
+    const b = s, m = b.variants, x = m?.variant;
+    if (!x) continue;
+    const S = new Set(n), _ = Object.fromEntries(Object.entries(x).filter(([w]) => !S.has(w)));
     l[r] = {
-      ...g,
+      ...b,
       variants: {
         ...m,
-        variant: y
+        variant: _
       }
     };
   }
   return l;
-}, je = {
+}, Ge = {
   ...d,
   theme: {
     ...d.theme,
-    tokens: x(d.theme?.tokens),
-    semanticTokens: x(d.theme?.semanticTokens),
-    recipes: Pe(b(d.theme?.recipes)),
-    slotRecipes: b(d.theme?.slotRecipes),
-    layerStyles: b(d.theme?.layerStyles),
-    animationStyles: b(d.theme?.animationStyles)
-  }
-}, Ue = {
+    tokens: y(d.theme?.tokens),
+    semanticTokens: y(d.theme?.semanticTokens),
+    recipes: Ye(g(d.theme?.recipes)),
+    slotRecipes: g(d.theme?.slotRecipes),
+    layerStyles: g(d.theme?.layerStyles),
+    animationStyles: g(d.theme?.animationStyles)
+  }
+}, $e = {
   DEFAULT: {
     value: "1px solid {colors.border}"
   },
@@ -2802,103 +3639,168 @@ const X = t({
   "accent-light": {
     value: "1px solid {colors.border.accent-light}"
   }
-}, Oe = {
-  DEFAULT: {
-    value: {
-      _light: "{colors.blacks.800}",
-      _dark: "#F7F8F8"
-    }
-  },
-  muted: {
-    value: {
-      _light: "{colors.blacks.600}",
-      _dark: "#8B9099"
-    }
-  },
-  subtle: {
-    value: {
-      _light: "{colors.blacks.400}",
-      _dark: "#646973"
+}, qe = {
+  text: {
+    primary: {
+      value: {
+        _light: "{colors.blacks.800}",
+        _dark: "{colors.blacks.200}"
+      }
+    },
+    secondary: {
+      value: {
+        _light: "{colors.blacks.600}",
+        _dark: "{colors.blacks.500}"
+      }
     }
   },
-  inverted: {
+  grid: {
     value: {
-      _light: "{colors.blacks.50}",
+      _light: "{colors.blacks.300}",
       _dark: "{colors.blacks.800}"
     }
   },
-  info: {
-    value: {
-      _light: "{colors.blue.700}",
-      _dark: "{colors.blue.300}"
-    }
-  },
-  warning: {
-    value: {
-      _light: "{colors.orange.700}",
-      _dark: "{colors.orange.300}"
-    }
-  },
-  success: {
-    value: {
-      _light: "{colors.green.700}",
-      _dark: "{colors.green.400}"
-    }
-  },
-  error: {
+  axis: {
     value: {
-      _light: "{colors.red.700}",
-      _dark: "{colors.red.400}"
+      _light: "{colors.blacks.700}",
+      _dark: "{colors.blacks.300}"
     }
   },
-  accent: {
-    "pink-dark": {
+  categorical: {
+    1: {
+      value: {
+        _light: "{colors.blue.700}",
+        _dark: "{colors.blue.300}"
+      }
+    },
+    2: {
+      value: {
+        _light: "{colors.orange.700}",
+        _dark: "{colors.orange.300}"
+      }
+    },
+    3: {
+      value: {
+        _light: "{colors.purple.700}",
+        _dark: "{colors.purple.300}"
+      }
+    },
+    4: {
+      value: {
+        _light: "{colors.red.700}",
+        _dark: "{colors.red.300}"
+      }
+    },
+    5: {
       value: {
         _light: "{colors.pink.700}",
-        _dark: "{colors.pink.50}"
+        _dark: "{colors.pink.300}"
+      }
+    },
+    6: {
+      value: {
+        _light: "{colors.teal.700}",
+        _dark: "{colors.teal.300}"
+      }
+    },
+    7: {
+      value: {
+        _light: "{colors.cyan.700}",
+        _dark: "{colors.cyan.300}"
       }
     }
   },
-  "green-dark": {
-    value: {
-      _light: "{colors.green.700}",
-      _dark: "{colors.green.50}"
-    }
-  },
-  "blue-dark": {
-    value: {
-      _light: "{colors.sapphire.700}",
-      _dark: "{colors.sapphire.100}"
-    }
-  },
-  "blue-very-dark": {
-    value: {
-      _light: "{colors.sapphire.900}",
-      _dark: "{colors.sapphire.800}"
-    }
-  },
-  button: {
-    primary: {
+  sequential: {
+    blue: {
+      "low-3": {
+        value: {
+          _light: "{colors.blue.200}",
+          _dark: "{colors.blue.800}"
+        }
+      },
+      "low-2": {
+        value: {
+          _light: "{colors.blue.300}",
+          _dark: "{colors.blue.700}"
+        }
+      },
+      "low-1": {
+        value: {
+          _light: "{colors.blue.400}",
+          _dark: "{colors.blue.600}"
+        }
+      },
       default: {
         value: {
-          _light: "{colors.blacks.800}",
-          _dark: "{colors.blacks.800}"
+          _light: "{colors.blue.500}",
+          _dark: "{colors.blue.500}"
         }
       },
-      disabled: {
-        value: "{colors.fg.subtle}"
+      "high-1": {
+        value: {
+          _light: "{colors.blue.600}",
+          _dark: "{colors.blue.400}"
+        }
+      },
+      "high-2": {
+        value: {
+          _light: "{colors.blue.700}",
+          _dark: "{colors.blue.300}"
+        }
+      },
+      "high-3": {
+        value: {
+          _light: "{colors.blue.800}",
+          _dark: "{colors.blue.200}"
+        }
       }
-    }
-  },
-  "menu-item": {
-    default: {
-      value: "{colors.fg}"
     },
-    secondary: {
-      value: "{colors.fg.muted}"
+    red: {
+      "low-3": {
+        value: {
+          _light: "{colors.red.200}",
+          _dark: "{colors.red.800}"
+        }
+      },
+      "low-2": {
+        value: {
+          _light: "{colors.red.300}",
+          _dark: "{colors.red.700}"
+        }
+      },
+      "low-1": {
+        value: {
+          _light: "{colors.red.400}",
+          _dark: "{colors.red.600}"
+        }
+      },
+      default: {
+        value: {
+          _light: "{colors.red.500}",
+          _dark: "{colors.red.500}"
+        }
+      },
+      "high-1": {
+        value: {
+          _light: "{colors.red.600}",
+          _dark: "{colors.red.400}"
+        }
+      },
+      "high-2": {
+        value: {
+          _light: "{colors.red.700}",
+          _dark: "{colors.red.300}"
+        }
+      },
+      "high-3": {
+        value: {
+          _light: "{colors.red.800}",
+          _dark: "{colors.red.200}"
+        }
+      }
     }
   }
-}, Ye = {
+}, Ke = {
   DEFAULT: {
     value: {
       _light: "{colors.blacks.50}",
@@ -3140,24 +4042,120 @@ const X = t({
     },
     "cyan-light": {
       value: {
-        _light: "{colors.cyan.50}",
-        _dark: "{colors.cyan.100}"
+        _light: "{colors.cyan.50}",
+        _dark: "{colors.cyan.100}"
+      }
+    },
+    "green-light": {
+      value: {
+        _light: "{colors.green.50}",
+        _dark: "{colors.sapphire.50}"
+      }
+    },
+    "sand-light": {
+      value: {
+        _light: "{colors.sand.100}",
+        _dark: "{colors.sand.100}"
+      }
+    }
+  }
+}, Je = {
+  DEFAULT: {
+    value: {
+      _light: "{colors.blacks.800}",
+      _dark: "#F7F8F8"
+    }
+  },
+  muted: {
+    value: {
+      _light: "{colors.blacks.600}",
+      _dark: "#8B9099"
+    }
+  },
+  subtle: {
+    value: {
+      _light: "{colors.blacks.400}",
+      _dark: "#646973"
+    }
+  },
+  inverted: {
+    value: {
+      _light: "{colors.blacks.50}",
+      _dark: "{colors.blacks.800}"
+    }
+  },
+  info: {
+    value: {
+      _light: "{colors.blue.700}",
+      _dark: "{colors.blue.300}"
+    }
+  },
+  warning: {
+    value: {
+      _light: "{colors.orange.700}",
+      _dark: "{colors.orange.300}"
+    }
+  },
+  success: {
+    value: {
+      _light: "{colors.green.700}",
+      _dark: "{colors.green.400}"
+    }
+  },
+  error: {
+    value: {
+      _light: "{colors.red.700}",
+      _dark: "{colors.red.400}"
+    }
+  },
+  accent: {
+    "pink-dark": {
+      value: {
+        _light: "{colors.pink.700}",
+        _dark: "{colors.pink.50}"
       }
-    },
-    "green-light": {
-      value: {
-        _light: "{colors.green.50}",
-        _dark: "{colors.sapphire.50}"
+    }
+  },
+  "green-dark": {
+    value: {
+      _light: "{colors.green.700}",
+      _dark: "{colors.green.50}"
+    }
+  },
+  "blue-dark": {
+    value: {
+      _light: "{colors.sapphire.700}",
+      _dark: "{colors.sapphire.100}"
+    }
+  },
+  "blue-very-dark": {
+    value: {
+      _light: "{colors.sapphire.900}",
+      _dark: "{colors.sapphire.800}"
+    }
+  },
+  button: {
+    primary: {
+      default: {
+        value: {
+          _light: "{colors.blacks.800}",
+          _dark: "{colors.blacks.800}"
+        }
+      },
+      disabled: {
+        value: "{colors.fg.subtle}"
       }
+    }
+  },
+  "menu-item": {
+    default: {
+      value: "{colors.fg}"
     },
-    "sand-light": {
-      value: {
-        _light: "{colors.sand.100}",
-        _dark: "{colors.sand.100}"
-      }
+    secondary: {
+      value: "{colors.fg.muted}"
     }
   }
-}, $e = {
+}, Qe = {
   DEFAULT: {
     value: {
       _light: "#EAF0EB",
@@ -3217,14 +4215,14 @@ const X = t({
       value: "{colors.border.subtle}"
     }
   }
-}, Ne = {
+}, Ze = {
   border: {
     value: {
       _light: "{colors.mint.200}",
       _dark: "{colors.mint.200}"
     }
   }
-}, qe = {
+}, eo = {
   contrast: {
     value: {
       _light: "black",
@@ -3273,168 +4271,7 @@ const X = t({
       _dark: "{colors.orange.500}"
     }
   }
-}, Ge = {
-  text: {
-    primary: {
-      value: {
-        _light: "{colors.blacks.800}",
-        _dark: "{colors.blacks.200}"
-      }
-    },
-    secondary: {
-      value: {
-        _light: "{colors.blacks.600}",
-        _dark: "{colors.blacks.500}"
-      }
-    }
-  },
-  grid: {
-    value: {
-      _light: "{colors.blacks.300}",
-      _dark: "{colors.blacks.800}"
-    }
-  },
-  axis: {
-    value: {
-      _light: "{colors.blacks.700}",
-      _dark: "{colors.blacks.300}"
-    }
-  },
-  categorical: {
-    1: {
-      value: {
-        _light: "{colors.blue.700}",
-        _dark: "{colors.blue.300}"
-      }
-    },
-    2: {
-      value: {
-        _light: "{colors.orange.700}",
-        _dark: "{colors.orange.300}"
-      }
-    },
-    3: {
-      value: {
-        _light: "{colors.purple.700}",
-        _dark: "{colors.purple.300}"
-      }
-    },
-    4: {
-      value: {
-        _light: "{colors.red.700}",
-        _dark: "{colors.red.300}"
-      }
-    },
-    5: {
-      value: {
-        _light: "{colors.pink.700}",
-        _dark: "{colors.pink.300}"
-      }
-    },
-    6: {
-      value: {
-        _light: "{colors.teal.700}",
-        _dark: "{colors.teal.300}"
-      }
-    },
-    7: {
-      value: {
-        _light: "{colors.cyan.700}",
-        _dark: "{colors.cyan.300}"
-      }
-    }
-  },
-  sequential: {
-    blue: {
-      "low-3": {
-        value: {
-          _light: "{colors.blue.200}",
-          _dark: "{colors.blue.800}"
-        }
-      },
-      "low-2": {
-        value: {
-          _light: "{colors.blue.300}",
-          _dark: "{colors.blue.700}"
-        }
-      },
-      "low-1": {
-        value: {
-          _light: "{colors.blue.400}",
-          _dark: "{colors.blue.600}"
-        }
-      },
-      default: {
-        value: {
-          _light: "{colors.blue.500}",
-          _dark: "{colors.blue.500}"
-        }
-      },
-      "high-1": {
-        value: {
-          _light: "{colors.blue.600}",
-          _dark: "{colors.blue.400}"
-        }
-      },
-      "high-2": {
-        value: {
-          _light: "{colors.blue.700}",
-          _dark: "{colors.blue.300}"
-        }
-      },
-      "high-3": {
-        value: {
-          _light: "{colors.blue.800}",
-          _dark: "{colors.blue.200}"
-        }
-      }
-    },
-    red: {
-      "low-3": {
-        value: {
-          _light: "{colors.red.200}",
-          _dark: "{colors.red.800}"
-        }
-      },
-      "low-2": {
-        value: {
-          _light: "{colors.red.300}",
-          _dark: "{colors.red.700}"
-        }
-      },
-      "low-1": {
-        value: {
-          _light: "{colors.red.400}",
-          _dark: "{colors.red.600}"
-        }
-      },
-      default: {
-        value: {
-          _light: "{colors.red.500}",
-          _dark: "{colors.red.500}"
-        }
-      },
-      "high-1": {
-        value: {
-          _light: "{colors.red.600}",
-          _dark: "{colors.red.400}"
-        }
-      },
-      "high-2": {
-        value: {
-          _light: "{colors.red.700}",
-          _dark: "{colors.red.300}"
-        }
-      },
-      "high-3": {
-        value: {
-          _light: "{colors.red.800}",
-          _dark: "{colors.red.200}"
-        }
-      }
-    }
-  }
-}, Ke = {
+}, oo = {
   selectable: {
     primary: {
       value: {
@@ -3443,15 +4280,15 @@ const X = t({
       }
     }
   }
-}, Je = {
-  fg: Oe,
-  bg: Ye,
-  border: $e,
-  blue: Ne,
-  orange: qe,
-  vis: Ge,
-  text: Ke
-}, Qe = F({
+}, ro = {
+  fg: Je,
+  bg: Ke,
+  border: Qe,
+  blue: Ze,
+  orange: eo,
+  vis: qe,
+  text: oo
+}, lo = k({
   floatingBar: {
     value: {
       paddingInline: "sm",
@@ -3463,6 +4300,15 @@ const X = t({
       boxShadow: "lg"
     }
   },
+  // Cards clip their content so square children never paint over the rounded corners.
+  panel: {
+    value: {
+      borderRadius: "sm",
+      borderWidth: "1px",
+      borderColor: "border.subtle",
+      overflow: "hidden"
+    }
+  },
   modal: {
     value: {
       paddingInline: "xs",
@@ -3473,7 +4319,7 @@ const X = t({
       borderColor: "border"
     }
   }
-}), Ze = k({
+}), to = C({
   brand: {
     value: {
       fontFamily: "brand",
@@ -3760,13 +4606,13 @@ const X = t({
       letterSpacing: "0.14px"
     }
   }
-}), eo = w({
+}), ao = E({
   globalCss: Y,
   utilities: {
     WebkitAppRegion: {
       values: ["drag", "no-drag"],
-      transform: (e) => ({
-        WebkitAppRegion: e
+      transform: (o) => ({
+        WebkitAppRegion: o
       })
     }
   },
@@ -3775,56 +4621,60 @@ const X = t({
       "3xl": "2560px",
       "4xl": "3840px"
     },
-    textStyles: Ze,
-    layerStyles: Qe,
+    textStyles: to,
+    layerStyles: lo,
     recipes: {
-      badge: he,
-      button: pe,
-      divider: _e,
-      input: ke,
-      kbd: Ce,
-      skeleton: De,
-      textarea: Te
+      badge: ve,
+      button: fe,
+      divider: Se,
+      input: Ce,
+      kbd: Fe,
+      skeleton: Le,
+      textarea: Xe
     },
     tokens: {
-      colors: ne,
-      borderWidths: ge,
-      fonts: se,
-      fontSizes: de,
-      fontWeights: ce,
-      radii: me,
+      colors: se,
+      borderWidths: me,
+      fonts: de,
+      fontSizes: ce,
+      fontWeights: ue,
+      radii: pe,
       sizes: be,
-      spacing: ue
+      spacing: ge
     },
     semanticTokens: {
-      colors: Je,
-      borders: Ue
+      colors: ro,
+      borders: $e
     },
     slotRecipes: {
       windowTitleBar: X,
       windowTabs: M,
-      alert: ve,
-      colorPicker: fe,
-      drawer: ye,
-      tooltip: Ie,
-      popover: ze,
-      menu: we,
-      numberInput: Ae,
-      editable: Se,
-      form: Fe,
-      dialog: xe,
-      progressCircle: Re,
-      switch: Be,
-      tabs: He,
-      timeline: Le
-    }
-  }
-}), ao = C(je, eo);
+      landing: Ee,
+      landingStory: We,
+      landingToolDemo: ze,
+      resizableSplitLayout: Ie,
+      alert: he,
+      colorPicker: xe,
+      drawer: _e,
+      tooltip: je,
+      popover: Be,
+      menu: De,
+      numberInput: Re,
+      editable: we,
+      form: ke,
+      dialog: ye,
+      progressCircle: Te,
+      switch: Pe,
+      tabs: Ve,
+      timeline: Me
+    }
+  }
+}), uo = F(Ge, ao);
 export {
-  to as a,
+  co as a,
   X as b,
-  O as c,
-  ao as t,
+  N as c,
+  uo as t,
   M as w
 };
-//# sourceMappingURL=theme-C0empEin.js.map
+//# sourceMappingURL=theme-B5OVwYEU.js.map