@pstdio/ui 0.16.0 → 0.17.0

package/dist/{theme-CJBYBJaA.js → theme-CNhnbvcE.js}

@@ -1,5 +1,5 @@
 import { defineSlotRecipe as i, defineRecipe as c, defaultConfig as d, defineLayerStyles as F, defineTextStyles as k, createSystem as C, defineConfig as E } from "@chakra-ui/react";
-import { alertAnatomy as w, colorPickerAnatomy as A, dialogAnatomy as D, drawerAnatomy as z, fieldsetAnatomy as R, menuAnatomy as W, numberInputAnatomy as B, popoverAnatomy as H, tabsAnatomy as T, timelineAnatomy as L, tooltipAnatomy as V } from "@chakra-ui/react/anatomy";
+import { alertAnatomy as w, colorPickerAnatomy as A, dialogAnatomy as z, drawerAnatomy as D, fieldsetAnatomy as W, menuAnatomy as R, numberInputAnatomy as B, popoverAnatomy as H, tabsAnatomy as T, timelineAnatomy as L, tooltipAnatomy as V } from "@chakra-ui/react/anatomy";
 import { progressCircleSlotRecipe as h } from "@chakra-ui/react/theme";
 const I = {
   "editor.background": ["colors.bg", "colors.bg.code"],
@@ -35,7 +35,7 @@ const I = {
   disabledForeground: ["colors.fg.subtle"],
   border: ["colors.border", "colors.border.subtle"]
 }, M = (e) => `colors.vscode.${e}`, P = (e) => e.replace(/^#/, ""), X = (e) => {
-  const r = (e.theme.tokenColors ?? []).flatMap((o) => (Array.isArray(o.scope) ? o.scope : o.scope ? [o.scope] : []).map((s) => ({
+  const l = (e.theme.tokenColors ?? []).flatMap((o) => (Array.isArray(o.scope) ? o.scope : o.scope ? [o.scope] : []).map((s) => ({
     token: s,
     ...o.settings?.foreground ? {
       foreground: P(o.settings.foreground)
@@ -47,22 +47,22 @@ const I = {
   return {
     base: e.mode === "dark" ? "vs-dark" : "vs",
     inherit: !0,
-    rules: r,
+    rules: l,
     colors: e.theme.colors ?? {}
   };
-}, Qe = (e) => {
-  const r = {}, o = e.theme.colors ?? {};
+}, Ze = (e) => {
+  const l = {}, o = e.theme.colors ?? {};
   for (const [n, s] of Object.entries(o))
-    r[M(n)] = s;
+    l[M(n)] = s;
   for (const [n, s] of Object.entries(I)) {
     const g = o[n];
     if (g)
-      for (const m of s) r[m] = g;
+      for (const m of s) l[m] = g;
   }
   return {
     id: e.id,
     mode: e.mode,
-    tokens: r,
+    tokens: l,
     monacoTheme: X({
       mode: e.mode,
       theme: e.theme
@@ -758,7 +758,7 @@ const I = {
   bold: {
     value: 700
   }
-}, l = {
+}, r = {
   // 0px
   25: "0.125rem",
   // 2px
@@ -790,67 +790,89 @@ const I = {
     value: "0"
   },
   "2xs": {
-    value: l[50]
+    value: r[50]
   },
   xs: {
-    value: l[100]
+    value: r[100]
+  },
+  compact: {
+    value: "0.625rem"
   },
   sm: {
-    value: l[150]
+    value: r[150]
+  },
+  comfortable: {
+    value: "0.875rem"
   },
   md: {
-    value: l[200]
+    value: r[200]
   },
   lg: {
-    value: l[300]
+    value: r[300]
   },
   xl: {
-    value: l[400]
+    value: r[400]
   },
   "2xl": {
-    value: l[500]
+    value: r[500]
   },
   "3xl": {
-    value: l[600]
+    value: r[600]
   },
   "3.5xl": {
-    value: l[700]
+    value: r[700]
   },
   "4xl": {
-    value: l[800]
+    value: r[800]
   },
   "4.5xl": {
-    value: l[900]
+    value: r[900]
   },
   "5xl": {
-    value: l[1600]
+    value: r[1600]
   }
 }, de = {
+  "collection-row": {
+    value: "2.125rem"
+  },
+  "filter-pill": {
+    value: r[300]
+  },
+  "view-bar": {
+    value: r[500]
+  },
+  "view-subheader": {
+    value: "2.25rem"
+  }
+}, ce = {
   none: {
     value: "0"
   },
   "2xs": {
-    value: l[25]
+    value: r[25]
   },
   xs: {
-    value: l[50]
+    value: r[50]
+  },
+  compact: {
+    value: "0.375rem"
   },
   sm: {
-    value: l[100]
+    value: r[100]
   },
   md: {
-    value: l[150]
+    value: r[150]
   },
   lg: {
-    value: l[200]
+    value: r[200]
   },
   xl: {
-    value: l[400]
+    value: r[400]
   },
   full: {
     value: "100%"
   }
-}, ce = i({
+}, ue = i({
   slots: w.keys(),
   base: {
     root: {
@@ -923,7 +945,7 @@ const I = {
       }
     }
   }]
-}), ue = c({
+}), be = c({
   className: "chakra-badge",
   base: {
     display: "inline-flex",
@@ -989,7 +1011,7 @@ const I = {
     variant: "subtle",
     size: "sm"
   }
-}), be = c({
+}), ge = c({
   base: {
     borderRadius: "xs",
     transition: "all 0.1s ease-in-out",
@@ -1112,6 +1134,12 @@ const I = {
         _expanded: {
           bg: "bg.active"
         },
+        "&[aria-pressed=true]": {
+          bg: "bg.active",
+          _hover: {
+            bg: "bg.active"
+          }
+        },
         _disabled: {
           bg: "transparent",
           _hover: {
@@ -1188,7 +1216,7 @@ const I = {
     size: "sm",
     variant: "outline"
   }
-}), u = "border.accent-light", ge = i({
+}), u = "border.accent-light", me = i({
   slots: A.keys(),
   base: {
     control: {
@@ -1282,8 +1310,8 @@ const I = {
       }
     }
   }
-}), me = i({
-  slots: D.keys(),
+}), ve = i({
+  slots: z.keys(),
   base: {
     content: {
       bg: "bg",
@@ -1293,12 +1321,12 @@ const I = {
       overflow: "hidden"
     }
   }
-}), ve = c({
+}), he = c({
   base: {
     borderColor: "border.subtle"
   }
-}), he = i({
-  slots: z.keys(),
+}), pe = i({
+  slots: D.keys(),
   base: {
     header: {
       fontWeight: "medium",
@@ -1309,7 +1337,7 @@ const I = {
       bg: "bg"
     }
   }
-}), pe = i({
+}), fe = i({
   slots: ["preview", "input", "textarea"],
   base: {
     preview: {
@@ -1408,14 +1436,14 @@ const I = {
       }
     }
   }
-}), fe = i({
-  slots: R.keys(),
+}), xe = i({
+  slots: W.keys(),
   base: {
     legend: {
       mb: "2xs"
     }
   }
-}), t = "border.accent-light", xe = c({
+}), t = "border.accent-light", _e = c({
   base: {
     px: "sm",
     borderRadius: "xs",
@@ -1520,7 +1548,7 @@ const I = {
     size: "sm",
     variant: "outline"
   }
-}), _e = c({
+}), ye = c({
   base: {
     display: "inline-flex",
     alignItems: "center",
@@ -1583,8 +1611,8 @@ const I = {
     size: "md",
     variant: "raised"
   }
-}), ye = i({
-  slots: W.keys(),
+}), Se = i({
+  slots: R.keys(),
   base: {
     itemGroupLabel: {
       ml: "{2xs}",
@@ -1648,6 +1676,9 @@ const I = {
     content: {
       display: "flex",
       flexDirection: "column",
+      width: "17.5rem",
+      minWidth: "17.5rem",
+      maxWidth: "17.5rem",
       gap: "0",
       borderRadius: "xs",
       p: "0",
@@ -1656,12 +1687,12 @@ const I = {
       bg: "bg",
       borderWidth: "1px",
       borderStyle: "solid",
-      borderColor: "border.subtle",
+      borderColor: "border",
       zIndex: "dropdown",
       textStyle: "label/M/regular"
     }
   }
-}), Se = "var(--chakra-colors-border)", v = "var(--chakra-colors-border-accent-light)", Fe = i({
+}), Fe = "var(--chakra-colors-border)", v = "var(--chakra-colors-border-accent-light)", ke = i({
   slots: B.keys(),
   base: {
     root: {
@@ -1669,7 +1700,7 @@ const I = {
       zIndex: "0",
       isolation: "isolate",
       boxShadow: "none",
-      "--number-input-border-color": Se,
+      "--number-input-border-color": Fe,
       "&:is(:hover, [data-hover])": {
         "--number-input-border-color": v
       },
@@ -1874,7 +1905,7 @@ const I = {
     size: "sm",
     variant: "outline"
   }
-}), ke = i({
+}), Ce = i({
   slots: H.keys(),
   base: {
     positioner: {
@@ -1897,7 +1928,7 @@ const I = {
       bg: "bg",
       borderWidth: "1px",
       borderStyle: "solid",
-      borderColor: "border.subtle",
+      borderColor: "border",
       _focus: {
         outline: "none"
       }
@@ -1928,12 +1959,12 @@ const I = {
       }
     }
   }
-}), Ce = h.variants?.size ?? {}, Ee = {
+}), Ee = h.variants?.size ?? {}, we = {
   ...h,
   variants: {
     ...h.variants,
     size: {
-      ...Ce,
+      ...Ee,
       "2xs": {
         circle: {
           "--size": "14px",
@@ -1945,12 +1976,12 @@ const I = {
       }
     }
   }
-}, we = c({
+}, Ae = c({
   base: {
     "--start-color": "fg",
     "--end-color": "fg.muted"
   }
-}), Ae = i({
+}), ze = i({
   slots: T.keys(),
   base: {
     root: {
@@ -1973,26 +2004,26 @@ const I = {
       py: "0",
       borderRadius: "xs",
       borderWidth: "1px",
-      borderColor: "border.subtle",
+      borderColor: "border",
       color: "fg.muted",
       bg: "transparent",
       _selected: {
         color: "fg",
         bg: "bg.muted",
-        borderColor: "border.subtle"
+        borderColor: "border"
       },
       _hover: {
         bg: "bg.hover",
-        borderColor: "border.subtle",
+        borderColor: "border",
         color: "fg"
       },
       _disabled: {
         color: "fg.subtle",
-        borderColor: "border.subtle",
+        borderColor: "border",
         bg: "transparent",
         _hover: {
           color: "fg.subtle",
-          borderColor: "border.subtle",
+          borderColor: "border",
           bg: "transparent"
         }
       }
@@ -2046,21 +2077,21 @@ const I = {
           _selected: {
             color: "fg",
             bg: "bg.muted",
-            borderColor: "border.subtle"
+            borderColor: "border"
           },
           _hover: {
             bg: "bg.hover",
-            borderColor: "border.subtle",
+            borderColor: "border",
             color: "fg"
           },
           _disabled: {
             bg: "transparent",
             color: "fg.subtle",
-            borderColor: "border.subtle",
+            borderColor: "border",
             _hover: {
               bg: "transparent",
               color: "fg.subtle",
-              borderColor: "border.subtle"
+              borderColor: "border"
             }
           }
         }
@@ -2177,7 +2208,7 @@ const I = {
     size: "sm",
     variant: "outline"
   }
-}), ze = i({
+}), We = i({
   slots: L.keys(),
   base: {
     root: {
@@ -2333,35 +2364,35 @@ const I = {
       color: "fg.inverted"
     }
   }
-}), We = /* @__PURE__ */ new Set(["boxShadow", "boxShadowColor", "textShadow"]), p = /shadow/i, Be = (e) => {
+}), Be = /* @__PURE__ */ new Set(["boxShadow", "boxShadowColor", "textShadow"]), p = /shadow/i, He = (e) => {
   if (!p.test(e)) return e;
-  const r = e.split(",").map((o) => o.trim()).filter((o) => !p.test(o));
-  if (r.length !== 0)
-    return r.join(", ");
-}, b = (e) => Array.isArray(e) ? e.map(b).filter((r) => r !== void 0) : typeof e == "string" ? Be(e) : !e || typeof e != "object" ? e : Object.fromEntries(Object.entries(e).flatMap(([r, o]) => {
-  if (We.has(r) || p.test(r)) return [];
+  const l = e.split(",").map((o) => o.trim()).filter((o) => !p.test(o));
+  if (l.length !== 0)
+    return l.join(", ");
+}, b = (e) => Array.isArray(e) ? e.map(b).filter((l) => l !== void 0) : typeof e == "string" ? He(e) : !e || typeof e != "object" ? e : Object.fromEntries(Object.entries(e).flatMap(([l, o]) => {
+  if (Be.has(l) || p.test(l)) return [];
   const n = b(o);
-  return n === void 0 ? [] : [[r, n]];
+  return n === void 0 ? [] : [[l, n]];
 })), x = (e) => {
   const {
-    shadows: r,
+    shadows: l,
     ...o
   } = e ?? {};
   return o;
-}, He = {
+}, Te = {
   badge: ["surface"],
   button: ["secondary", "surface"]
-}, Te = (e) => {
-  const r = {
+}, Le = (e) => {
+  const l = {
     ...e ?? {}
   };
-  for (const [o, n] of Object.entries(He)) {
-    const s = r[o];
+  for (const [o, n] of Object.entries(Te)) {
+    const s = l[o];
     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)));
-    r[o] = {
+    l[o] = {
       ...g,
       variants: {
         ...m,
@@ -2369,19 +2400,19 @@ const I = {
       }
     };
   }
-  return r;
-}, Le = {
+  return l;
+}, Ve = {
   ...d,
   theme: {
     ...d.theme,
     tokens: x(d.theme?.tokens),
     semanticTokens: x(d.theme?.semanticTokens),
-    recipes: Te(b(d.theme?.recipes)),
+    recipes: Le(b(d.theme?.recipes)),
     slotRecipes: b(d.theme?.slotRecipes),
     layerStyles: b(d.theme?.layerStyles),
     animationStyles: b(d.theme?.animationStyles)
   }
-}, Ve = {
+}, Ie = {
   DEFAULT: {
     value: "1px solid {colors.border}"
   },
@@ -2397,23 +2428,23 @@ const I = {
   "accent-light": {
     value: "1px solid {colors.border.accent-light}"
   }
-}, Ie = {
+}, Me = {
   DEFAULT: {
     value: {
       _light: "{colors.blacks.800}",
-      _dark: "{colors.blacks.200}"
+      _dark: "#F7F8F8"
     }
   },
   muted: {
     value: {
       _light: "{colors.blacks.450}",
-      _dark: "{colors.blacks.500}"
+      _dark: "#8B9099"
     }
   },
   subtle: {
     value: {
       _light: "{colors.blacks.400}",
-      _dark: "{colors.blacks.600}"
+      _dark: "#646973"
     }
   },
   inverted: {
@@ -2493,7 +2524,7 @@ const I = {
       value: "{colors.fg.muted}"
     }
   }
-}, Me = {
+}, Pe = {
   DEFAULT: {
     value: {
       _light: "{colors.blacks.50}",
@@ -2503,25 +2534,25 @@ const I = {
   muted: {
     value: {
       _light: "#F0F5F1",
-      _dark: "#0D1017"
+      _dark: "#171A22"
     }
   },
   subtle: {
     value: {
       _light: "#F9FBFA",
-      _dark: "#0A0C12"
+      _dark: "#0E1016"
     }
   },
   hover: {
     value: {
       _light: "#EDF2EE",
-      _dark: "#141821"
+      _dark: "#1E212A"
     }
   },
   active: {
     value: {
       _light: "#E7EEE9",
-      _dark: "#191E28"
+      _dark: "#252932"
     }
   },
   info: {
@@ -2551,7 +2582,7 @@ const I = {
   code: {
     value: {
       _light: "{colors.blacks.50}",
-      _dark: "#0D1017"
+      _dark: "#10131A"
     }
   },
   emphasized: {
@@ -2560,6 +2591,12 @@ const I = {
       _dark: "#1D242E"
     }
   },
+  elevated: {
+    value: {
+      _light: "{colors.blacks.50}",
+      _dark: "#1B1E26"
+    }
+  },
   inverted: {
     value: {
       _light: "{colors.blacks.800}",
@@ -2587,22 +2624,13 @@ const I = {
   button: {
     primary: {
       default: {
-        value: {
-          _light: "{colors.bg.accent-primary.default}",
-          _dark: "{colors.bg.accent-primary.dark}"
-        }
+        value: "{colors.bg.accent-primary.default}"
       },
       hover: {
-        value: {
-          _light: "{colors.bg.accent-primary.hover}",
-          _dark: "{colors.bg.accent-primary.medium}"
-        }
+        value: "{colors.bg.accent-primary.hover}"
       },
       pressed: {
-        value: {
-          _light: "{colors.bg.accent-primary.pressed}",
-          _dark: "{colors.bg.accent-primary.medium}"
-        }
+        value: "{colors.bg.accent-primary.pressed}"
       },
       disabled: {
         value: "{colors.bg.muted}"
@@ -2755,17 +2783,17 @@ const I = {
       }
     }
   }
-}, Pe = {
+}, Xe = {
   DEFAULT: {
     value: {
       _light: "#EAF0EB",
-      _dark: "#2C313D"
+      _dark: "#2E333F"
     }
   },
   subtle: {
     value: {
       _light: "#EDF2EE",
-      _dark: "#13161F"
+      _dark: "#1A1E26"
     }
   },
   inverted: {
@@ -2789,19 +2817,19 @@ const I = {
   info: {
     value: {
       _light: "{colors.blue.100}",
-      _dark: "{colors.blue.800}"
+      _dark: "#113A7C"
     }
   },
   warning: {
     value: {
       _light: "{colors.orange.100}",
-      _dark: "{colors.orange.800}"
+      _dark: "#7C3A0E"
     }
   },
   success: {
     value: {
       _light: "{colors.green.100}",
-      _dark: "{colors.green.800}"
+      _dark: "#0A5B24"
     }
   },
   error: {
@@ -2815,14 +2843,14 @@ const I = {
       value: "{colors.border.subtle}"
     }
   }
-}, Xe = {
+}, je = {
   border: {
     value: {
       _light: "{colors.mint.200}",
       _dark: "{colors.mint.200}"
     }
   }
-}, je = {
+}, Ue = {
   contrast: {
     value: {
       _light: "black",
@@ -2871,7 +2899,7 @@ const I = {
       _dark: "{colors.orange.500}"
     }
   }
-}, Ue = {
+}, Oe = {
   text: {
     primary: {
       value: {
@@ -2901,44 +2929,44 @@ const I = {
   categorical: {
     1: {
       value: {
-        _light: "{colors.blue.300}",
+        _light: "{colors.blue.700}",
         _dark: "{colors.blue.300}"
       }
     },
     2: {
       value: {
-        _light: "{colors.orange.500}",
-        _dark: "{colors.orange.500}"
+        _light: "{colors.orange.700}",
+        _dark: "{colors.orange.300}"
       }
     },
     3: {
       value: {
         _light: "{colors.purple.700}",
-        _dark: "{colors.purple.700}"
+        _dark: "{colors.purple.300}"
       }
     },
     4: {
       value: {
-        _light: "{colors.red.500}",
-        _dark: "{colors.red.600}"
+        _light: "{colors.red.700}",
+        _dark: "{colors.red.300}"
       }
     },
     5: {
       value: {
-        _light: "{colors.pink.500}",
-        _dark: "{colors.pink.500}"
+        _light: "{colors.pink.700}",
+        _dark: "{colors.pink.300}"
       }
     },
     6: {
       value: {
-        _light: "{colors.cyan.800}",
-        _dark: "{colors.green.500}"
+        _light: "{colors.teal.700}",
+        _dark: "{colors.teal.300}"
       }
     },
     7: {
       value: {
-        _light: "{colors.red.200}",
-        _dark: "{colors.cyan.700}"
+        _light: "{colors.cyan.700}",
+        _dark: "{colors.cyan.300}"
       }
     }
   },
@@ -3032,7 +3060,7 @@ const I = {
       }
     }
   }
-}, Oe = {
+}, Ye = {
   selectable: {
     primary: {
       value: {
@@ -3041,15 +3069,15 @@ const I = {
       }
     }
   }
-}, Ye = {
-  fg: Ie,
-  bg: Me,
-  border: Pe,
-  blue: Xe,
-  orange: je,
-  vis: Ue,
-  text: Oe
-}, $e = F({
+}, $e = {
+  fg: Me,
+  bg: Pe,
+  border: Xe,
+  blue: je,
+  orange: Ue,
+  vis: Oe,
+  text: Ye
+}, Ne = F({
   modal: {
     value: {
       paddingInline: "xs",
@@ -3060,7 +3088,7 @@ const I = {
       borderColor: "border"
     }
   }
-}), Ne = k({
+}), qe = k({
   brand: {
     value: {
       fontFamily: "brand",
@@ -3246,6 +3274,23 @@ const I = {
       letterSpacing: "0.1px"
     }
   },
+  "mono/XS": {
+    value: {
+      fontFamily: "mono",
+      fontSize: "xs",
+      fontWeight: "400",
+      lineHeight: "150%"
+    }
+  },
+  "paragraph/S/regular": {
+    value: {
+      fontFamily: "body",
+      fontSize: "sm",
+      fontWeight: "400",
+      lineHeight: "135%",
+      letterSpacing: "0.12px"
+    }
+  },
   "paragraph/M/regular": {
     value: {
       fontFamily: "body",
@@ -3302,22 +3347,22 @@ const I = {
       letterSpacing: "0.14px"
     }
   }
-}), qe = E({
+}), Ge = E({
   globalCss: j,
   theme: {
     breakpoints: {
       "3xl": "2560px",
       "4xl": "3840px"
     },
-    textStyles: Ne,
-    layerStyles: $e,
+    textStyles: qe,
+    layerStyles: Ne,
     recipes: {
-      badge: ue,
-      button: be,
-      divider: ve,
-      input: xe,
-      kbd: _e,
-      skeleton: we,
+      badge: be,
+      button: ge,
+      divider: he,
+      input: _e,
+      kbd: ye,
+      skeleton: Ae,
       textarea: De
     },
     tokens: {
@@ -3325,33 +3370,34 @@ const I = {
       fonts: ae,
       fontSizes: ie,
       fontWeights: ne,
-      radii: de,
+      radii: ce,
+      sizes: de,
       spacing: se
     },
     semanticTokens: {
-      colors: Ye,
-      borders: Ve
+      colors: $e,
+      borders: Ie
     },
     slotRecipes: {
-      alert: ce,
-      colorPicker: ge,
-      drawer: he,
+      alert: ue,
+      colorPicker: me,
+      drawer: pe,
       tooltip: Re,
-      popover: ke,
-      menu: ye,
-      numberInput: Fe,
-      editable: pe,
-      form: fe,
-      dialog: me,
-      progressCircle: Ee,
-      tabs: Ae,
-      timeline: ze
+      popover: Ce,
+      menu: Se,
+      numberInput: ke,
+      editable: fe,
+      form: xe,
+      dialog: ve,
+      progressCircle: we,
+      tabs: ze,
+      timeline: We
     }
   }
-}), Ze = C(Le, qe);
+}), eo = C(Ve, Ge);
 export {
-  Qe as a,
+  Ze as a,
   X as c,
-  Ze as t
+  eo as t
 };
-//# sourceMappingURL=theme-CJBYBJaA.js.map
+//# sourceMappingURL=theme-CNhnbvcE.js.map