@sanity/ui 3.0.0-static.10 → 3.0.0-static.11

package/dist/css.mjs

@@ -1,5 +1,5 @@
-import { color } from "@sanity/color";
-import { HUES, TINTS, SPACE, RADIUS, FONT_TEXT_SIZE, FONT_LABEL_SIZE, FONT_HEADING_SIZE, FONT_CODE_SIZE, AVATAR_SIZE, THEME_COLOR_STATE_TONES, THEME_COLOR_CARD_TONES, THEME_COLOR_AVATAR_COLORS, THEME_COLOR_SCHEMES as THEME_COLOR_SCHEMES$1, renderColor } from "@sanity/ui/theme";
+import { COLOR_HUES, COLOR_TINTS, color } from "@sanity/color";
+import { SPACE, SHADOW, RADIUS, FONT_TEXT_SIZE, FONT_LABEL_SIZE, FONT_HEADING_SIZE, FONT_CODE_SIZE, AVATAR_SIZE, THEME_COLOR_STATE_TONES, HUES, TINTS, THEME_COLOR_CARD_TONES, THEME_COLOR_AVATAR_COLORS, THEME_COLOR_SCHEMES as THEME_COLOR_SCHEMES$1, renderColor } from "@sanity/ui/theme";
 function _resp(prefix, prop) {
   if (!(prop === void 0 || prop === !1))
     return Array.isArray(prop) ? prop.map((value, index) => {
@@ -74,7 +74,14 @@ function radius(props) {
 function shadow(props) {
   return composeClassNames(_resp("shadow", props.shadow));
 }
-const PREFIX = "s-";
+const BREAKPOINTS = {
+  1: 360,
+  2: 600,
+  3: 900,
+  4: 1200,
+  5: 1800,
+  6: 2400
+}, PREFIX = "s-";
 function scopeClassName(className) {
   if (className !== void 0)
     return `${PREFIX}${className.trim()}`;
@@ -88,98 +95,6 @@ function textOverflow(props) {
 function width(props) {
   return _resp("w", props.width) ?? "";
 }
-function compileRule(selector, props, context) {
-  let css = compileProperties$1(selector, props);
-  if (props["@nest"] && (css += compileNestedRules(selector, props["@nest"], context)), props["@keyframes"])
-    for (const name in props["@keyframes"])
-      context.keyframes[name] = props["@keyframes"][name];
-  if (props["@media"])
-    for (const key in props["@media"])
-      context.media[key] || (context.media[key] = {}), context.media[key][selector] = props["@media"][key];
-  return css;
-}
-function compileProperties$1(selector, props) {
-  let css = "{";
-  for (const key in props) {
-    if (key === "@keyframes" || key === "@media" || key === "@nest") continue;
-    const value = props[key], valueArr = Array.isArray(value) ? value : [value];
-    for (const v of valueArr)
-      css += toSnakeCase$1(key) + ":" + v + ";";
-  }
-  return css === "{" ? "" : selector + css + "}";
-}
-function compileNestedRules(selector, props, context) {
-  if (!props) return "";
-  let css = "";
-  for (const [_selector, _props] of Object.entries(props))
-    css += `
-` + compileRule(_selector.replace(/\./g, `.${PREFIX}`).replace(/&/g, selector), _props, context);
-  return css;
-}
-function toSnakeCase$1(value) {
-  return value.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
-}
-function compilePalette() {
-  const props = {
-    ...compileHues(),
-    "--black": color.black.hex,
-    "--white": color.white.hex
-  };
-  return compileRule(":root", props, {
-    keyframes: {},
-    media: {}
-  });
-}
-function compileHues() {
-  const rules2 = {};
-  for (const hue of HUES)
-    for (const tint of TINTS)
-      rules2[`--${hue}-${tint}`] = color[hue][tint].hex;
-  return rules2;
-}
-function _mergeStyles(styles) {
-  const keyframes2 = {}, layers = {}, rules2 = {};
-  for (const s of styles)
-    if (s) {
-      Object.assign(keyframes2, s.keyframes);
-      for (const layerName in s.layers)
-        layers[layerName] || (layers[layerName] = {}), Object.assign(layers[layerName], s.layers[layerName]);
-      Object.assign(rules2, s.rules);
-    }
-  return {
-    keyframes: keyframes2,
-    layers,
-    rules: rules2
-  };
-}
-function _responsiveRule(rules2, _name, properties) {
-  const name = _name.replace(/\./g, "_");
-  rules2[`.${name}`] = properties, rules2[`.1\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 360px)": properties
-    }
-  }, rules2[`.2\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 600px)": properties
-    }
-  }, rules2[`.3\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 900px)": properties
-    }
-  }, rules2[`.4\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 1200px)": properties
-    }
-  }, rules2[`.5\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 1800px)": properties
-    }
-  }, rules2[`.6\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 2400px)": properties
-    }
-  };
-}
 const varNames = {
   avatar: {
     distance: "--avatar-distance",
@@ -196,6 +111,20 @@ const varNames = {
       }
     }), {})
   },
+  button: {
+    border: {
+      width: "--button-border-width"
+    },
+    focusRing: {
+      offset: "--button-focus-ring-offset",
+      width: "--button-focus-ring-width"
+    }
+  },
+  card: {
+    shadow: {
+      outline: "--card-shadow-outline"
+    }
+  },
   color: {
     // card scope
     accent: {
@@ -423,6 +352,7 @@ const varNames = {
   font: {
     code: {
       family: "--font-code-family",
+      featureSettings: "--font-code-feature-settings",
       sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
@@ -434,7 +364,7 @@ const varNames = {
           iconSize: `--font-code-${size}-icon-size`
         }
       }), {}),
-      weight: {
+      weights: {
         regular: "--font-code-weight-regular",
         medium: "--font-code-weight-medium",
         semibold: "--font-code-weight-semibold",
@@ -443,6 +373,7 @@ const varNames = {
     },
     heading: {
       family: "--font-heading-family",
+      featureSettings: "--font-heading-feature-settings",
       sizes: FONT_HEADING_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
@@ -454,7 +385,7 @@ const varNames = {
           iconSize: `--font-heading-${size}-icon-size`
         }
       }), {}),
-      weight: {
+      weights: {
         regular: "--font-heading-weight-regular",
         medium: "--font-heading-weight-medium",
         semibold: "--font-heading-weight-semibold",
@@ -463,6 +394,7 @@ const varNames = {
     },
     label: {
       family: "--font-label-family",
+      featureSettings: "--font-label-feature-settings",
       sizes: FONT_LABEL_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
@@ -474,7 +406,7 @@ const varNames = {
           iconSize: `--font-label-${size}-icon-size`
         }
       }), {}),
-      weight: {
+      weights: {
         regular: "--font-label-weight-regular",
         medium: "--font-label-weight-medium",
         semibold: "--font-label-weight-semibold",
@@ -483,6 +415,7 @@ const varNames = {
     },
     text: {
       family: "--font-text-family",
+      featureSettings: "--font-text-feature-settings",
       sizes: FONT_TEXT_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
@@ -494,7 +427,7 @@ const varNames = {
           iconSize: `--font-text-${size}-icon-size`
         }
       }), {}),
-      weight: {
+      weights: {
         regular: "--font-text-weight-regular",
         medium: "--font-text-weight-medium",
         semibold: "--font-text-weight-semibold",
@@ -503,6 +436,47 @@ const varNames = {
     }
   },
   input: {
+    border: {
+      width: "--input-border-width"
+    },
+    checkbox: {
+      focusRing: {
+        offset: "--input-checkbox-focus-ring-offset",
+        width: "--input-checkbox-focus-ring-width"
+      },
+      size: "--input-checkbox-size"
+    },
+    radio: {
+      focusRing: {
+        offset: "--input-radio-focus-ring-offset",
+        width: "--input-radio-focus-ring-width"
+      },
+      markSize: "--input-radio-mark-size",
+      size: "--input-radio-size"
+    },
+    select: {
+      focusRing: {
+        offset: "--input-select-focus-ring-offset",
+        width: "--input-select-focus-ring-width"
+      }
+    },
+    switch: {
+      focusRing: {
+        offset: "--input-switch-focus-ring-offset",
+        width: "--input-switch-focus-ring-width"
+      },
+      height: "--input-switch-height",
+      padding: "--input-switch-padding",
+      transitionDurationMs: "--input-switch-transition-duration-ms",
+      transitionTimingFunction: "--input-switch-transition-timing-function",
+      width: "--input-switch-width"
+    },
+    text: {
+      focusRing: {
+        offset: "--input-text-focus-ring-offset",
+        width: "--input-text-focus-ring-width"
+      }
+    },
     fontSize: "--input-font-size",
     lineHeight: "--input-line-height",
     letterSpacing: "--input-letter-spacing",
@@ -513,7 +487,21 @@ const varNames = {
     padding: "--input-padding"
   },
   radius: Object.fromEntries(RADIUS.map((radius2) => [radius2, `--radius-${radius2}`])),
-  space: Object.fromEntries(SPACE.map((space) => [space, `--space-${String(space).replace(".", "_")}`]))
+  shadow: Object.fromEntries(SHADOW.map((shadow2) => [shadow2, {
+    umbra: `--shadow-${shadow2}-umbra`,
+    penumbra: `--shadow-${shadow2}-penumbra`,
+    ambient: `--shadow-${shadow2}-ambient`
+  }])),
+  space: Object.fromEntries(SPACE.map((space) => [space, `--space-${String(space).replace(".", "_")}`])),
+  // color
+  black: "--black",
+  white: "--white",
+  ...COLOR_HUES.reduce((acc, hue) => {
+    const tints = {};
+    for (const tint of COLOR_TINTS)
+      tints[tint] = `--${hue}-${tint}`;
+    return acc[hue] = tints, acc;
+  }, {})
 };
 function buildColorCardVarNames(props) {
   const {
@@ -691,6 +679,98 @@ function buildColorVariantVarNames(options) {
   }
   return vars2;
 }
+function compileRule(selector, props, context) {
+  let css = compileProperties$1(selector, props);
+  if (props["@nest"] && (css += compileNestedRules(selector, props["@nest"], context)), props["@keyframes"])
+    for (const name in props["@keyframes"])
+      context.keyframes[name] = props["@keyframes"][name];
+  if (props["@media"])
+    for (const key in props["@media"])
+      context.media[key] || (context.media[key] = {}), context.media[key][selector] = props["@media"][key];
+  return css;
+}
+function compileProperties$1(selector, props) {
+  let css = "{";
+  for (const key in props) {
+    if (key === "@keyframes" || key === "@media" || key === "@nest") continue;
+    const value = props[key], valueArr = Array.isArray(value) ? value : [value];
+    for (const v of valueArr)
+      css += toSnakeCase$1(key) + ":" + v + ";";
+  }
+  return css === "{" ? "" : selector + css + "}";
+}
+function compileNestedRules(selector, props, context) {
+  if (!props) return "";
+  let css = "";
+  for (const [_selector, _props] of Object.entries(props))
+    css += `
+` + compileRule(_selector.replace(/\./g, `.${PREFIX}`).replace(/&/g, selector), _props, context);
+  return css;
+}
+function toSnakeCase$1(value) {
+  return value.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+}
+function compilePalette() {
+  const props = {
+    ...compileHues(),
+    [varNames.black]: color.black.hex,
+    [varNames.white]: color.white.hex
+  };
+  return compileRule(":root", props, {
+    keyframes: {},
+    media: {}
+  });
+}
+function compileHues() {
+  const rules2 = {};
+  for (const hue of HUES)
+    for (const tint of TINTS)
+      rules2[varNames[hue][tint]] = color[hue][tint].hex;
+  return rules2;
+}
+function _mergeStyles(styles) {
+  const keyframes2 = {}, layers = {}, rules2 = {};
+  for (const s of styles)
+    if (s) {
+      Object.assign(keyframes2, s.keyframes);
+      for (const layerName in s.layers)
+        layers[layerName] || (layers[layerName] = {}), Object.assign(layers[layerName], s.layers[layerName]);
+      Object.assign(rules2, s.rules);
+    }
+  return {
+    keyframes: keyframes2,
+    layers,
+    rules: rules2
+  };
+}
+function _responsiveRule(rules2, _name, properties) {
+  const name = _name.replace(/\./g, "_");
+  rules2[`.${name}`] = properties, rules2[`.1\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 360px)": properties
+    }
+  }, rules2[`.2\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 600px)": properties
+    }
+  }, rules2[`.3\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 900px)": properties
+    }
+  }, rules2[`.4\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 1200px)": properties
+    }
+  }, rules2[`.5\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 1800px)": properties
+    }
+  }, rules2[`.6\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 2400px)": properties
+    }
+  };
+}
 const darkColorVars = {};
 for (const tone of THEME_COLOR_CARD_TONES)
   darkColorVars[tone] = buildColorCardVars({
@@ -843,6 +923,11 @@ const colorVars = {
       }
     }), {})
   },
+  card: {
+    shadow: {
+      outline: `var(${varNames.card.shadow.outline})`
+    }
+  },
   color: colorVars,
   container: {
     0: `var(${varNames.container[0]})`,
@@ -867,10 +952,10 @@ const colorVars = {
         }
       }), {}),
       weight: {
-        regular: `var(${varNames.font.code.weight.regular})`,
-        medium: `var(${varNames.font.code.weight.medium})`,
-        semibold: `var(${varNames.font.code.weight.semibold})`,
-        bold: `var(${varNames.font.code.weight.bold})`
+        regular: `var(${varNames.font.code.weights.regular})`,
+        medium: `var(${varNames.font.code.weights.medium})`,
+        semibold: `var(${varNames.font.code.weights.semibold})`,
+        bold: `var(${varNames.font.code.weights.bold})`
       }
     },
     heading: {
@@ -887,10 +972,10 @@ const colorVars = {
         }
       }), {}),
       weight: {
-        regular: `var(${varNames.font.heading.weight.regular})`,
-        medium: `var(${varNames.font.heading.weight.medium})`,
-        semibold: `var(${varNames.font.heading.weight.semibold})`,
-        bold: `var(${varNames.font.heading.weight.bold})`
+        regular: `var(${varNames.font.heading.weights.regular})`,
+        medium: `var(${varNames.font.heading.weights.medium})`,
+        semibold: `var(${varNames.font.heading.weights.semibold})`,
+        bold: `var(${varNames.font.heading.weights.bold})`
       }
     },
     label: {
@@ -907,10 +992,10 @@ const colorVars = {
         }
       }), {}),
       weight: {
-        regular: `var(${varNames.font.label.weight.regular})`,
-        medium: `var(${varNames.font.label.weight.medium})`,
-        semibold: `var(${varNames.font.label.weight.semibold})`,
-        bold: `var(${varNames.font.label.weight.bold})`
+        regular: `var(${varNames.font.label.weights.regular})`,
+        medium: `var(${varNames.font.label.weights.medium})`,
+        semibold: `var(${varNames.font.label.weights.semibold})`,
+        bold: `var(${varNames.font.label.weights.bold})`
       }
     },
     text: {
@@ -927,10 +1012,10 @@ const colorVars = {
         }
       }), {}),
       weight: {
-        regular: `var(${varNames.font.text.weight.regular})`,
-        medium: `var(${varNames.font.text.weight.medium})`,
-        semibold: `var(${varNames.font.text.weight.semibold})`,
-        bold: `var(${varNames.font.text.weight.bold})`
+        regular: `var(${varNames.font.text.weights.regular})`,
+        medium: `var(${varNames.font.text.weights.medium})`,
+        semibold: `var(${varNames.font.text.weights.semibold})`,
+        bold: `var(${varNames.font.text.weights.bold})`
       }
     }
   },
@@ -951,7 +1036,21 @@ const colorVars = {
     }
   },
   radius: Object.fromEntries(RADIUS.map((radius2) => [radius2, `var(${varNames.radius[radius2]})`])),
-  space: Object.fromEntries(SPACE.map((space) => [space, `var(${varNames.space[space]})`]))
+  shadow: Object.fromEntries(SHADOW.map((shadow2) => [shadow2, {
+    umbra: `var(${varNames.shadow[shadow2].umbra})`,
+    penumbra: `var(${varNames.shadow[shadow2].penumbra})`,
+    ambient: `var(${varNames.shadow[shadow2].ambient})`
+  }])),
+  space: Object.fromEntries(SPACE.map((space) => [space, `var(${varNames.space[space]})`])),
+  // color
+  black: `var(${varNames.black})`,
+  white: `var(${varNames.white})`,
+  ...COLOR_HUES.reduce((acc, hue) => {
+    const tints = {};
+    for (const tint of COLOR_TINTS)
+      tints[tint] = `var(--${hue}-${tint})`;
+    return acc[hue] = tints, acc;
+  }, {})
 };
 function buildColorCardVars(props) {
   const {
@@ -1292,9 +1391,8 @@ const flexStyle = {
   layers: {
     util: util$n
   }
-}, rules$3 = {
+}, primitive$q = {
   ".font": {
-    // 'position': 'relative',
     fontFamily: "var(--font-family)",
     fontFeatureSettings: "var(--font-feature-settings)",
     fontSize: "var(--font-size)",
@@ -1349,24 +1447,24 @@ const flexStyle = {
     "--font-weight": "var(--font-weight-bold)"
   }
 };
-_responsiveRule(rules$3, "text-align-initial", {
+_responsiveRule(primitive$q, "text-align-initial", {
   textAlign: "initial"
 });
-_responsiveRule(rules$3, "text-align-left", {
+_responsiveRule(primitive$q, "text-align-left", {
   textAlign: "left"
 });
-_responsiveRule(rules$3, "text-align-center", {
+_responsiveRule(primitive$q, "text-align-center", {
   textAlign: "center"
 });
-_responsiveRule(rules$3, "text-align-right", {
+_responsiveRule(primitive$q, "text-align-right", {
   textAlign: "right"
 });
-_responsiveRule(rules$3, "text-align-justify", {
+_responsiveRule(primitive$q, "text-align-justify", {
   textAlign: "justify"
 });
 const fontStyle = {
   layers: {
-    primitive: rules$3
+    primitive: primitive$q
   }
 }, util$m = {};
 for (const space of SPACE)
@@ -2018,24 +2116,12 @@ const radiusStyle = {
     util: util$2
   }
 }, util$1 = {};
-_responsiveRule(util$1, "shadow-0", {
-  boxShadow: "none"
-});
-_responsiveRule(util$1, "shadow-1", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-1-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-1-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-1-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
-_responsiveRule(util$1, "shadow-2", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-2-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-2-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-2-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
-_responsiveRule(util$1, "shadow-3", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-3-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-3-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-3-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
-_responsiveRule(util$1, "shadow-4", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-4-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-4-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-4-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
-_responsiveRule(util$1, "shadow-5", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-5-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-5-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-5-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
+for (const shadow2 of SHADOW)
+  shadow2 === 0 ? _responsiveRule(util$1, "shadow-0", {
+    boxShadow: "none"
+  }) : _responsiveRule(util$1, `shadow-${shadow2}`, {
+    boxShadow: [`0 0 0 ${vars.card.shadow.outline} ${vars.color.shadow.outline}`, `${vars.shadow[shadow2].umbra} ${vars.color.shadow.umbra}`, `${vars.shadow[shadow2].penumbra} ${vars.color.shadow.penumbra}`, `${vars.shadow[shadow2].ambient} ${vars.color.shadow.ambient}`].join(", ")
+  });
 const shadowStyle = {
   layers: {
     util: util$1
@@ -2157,8 +2243,8 @@ const widthStyle = {
   layers: {
     component: component$3
   }
-}, keyframes$1 = {
-  "skeleton-pulse": {
+}, KEYFRAMES_PULSE = "skeleton-pulse", keyframes$1 = {
+  [KEYFRAMES_PULSE]: {
     "0%": {
       backgroundPosition: "100%"
     },
@@ -2168,8 +2254,8 @@ const widthStyle = {
   }
 }, component$2 = {
   ".skeleton": {
-    "--color-skeleton-from": `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
-    "--color-skeleton-to": `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
+    [varNames.color.skeleton.from]: `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
+    [varNames.color.skeleton.to]: `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
     backgroundColor: vars.color.skeleton.from,
     backgroundPosition: "100%",
     backgroundSize: "200% 100%",
@@ -2179,7 +2265,7 @@ const widthStyle = {
     "@nest": {
       "&[data-animated]": {
         backgroundImage: ["linear-gradient(to right", vars.color.skeleton.from, vars.color.skeleton.to, vars.color.skeleton.from, vars.color.skeleton.from, vars.color.skeleton.from, ")"].join(", "),
-        animationName: "skeleton-pulse",
+        animationName: KEYFRAMES_PULSE,
         animationTimingFunction: "ease-in-out",
         animationIterationCount: "infinite",
         animationDuration: "2000ms"
@@ -2334,8 +2420,13 @@ const skeletonStyle = {
       }
     }
   },
+  ".arrow-stroke-mask": {
+    // @ts-expect-error `y` is not a valid property in 'csstype'
+    y: vars.shadow.outline
+  },
   ".arrow-stroke": {
-    stroke: vars.color.shadow.outline
+    stroke: vars.color.shadow.outline,
+    strokeWidth: `calc(${vars.card.shadow.outline} * 2)`
   },
   ".arrow-shape": {
     fill: vars.color.bg
@@ -2480,9 +2571,9 @@ const _inputStyle = {
   ".selectable": {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
-    "--color-bg": vars.color.tinted.bg[0],
-    "--color-border": vars.color.tinted.border[2],
-    "--color-fg": vars.color.tinted.fg[2],
+    [varNames.color.bg]: vars.color.tinted.bg[0],
+    [varNames.color.border]: vars.color.tinted.border[2],
+    [varNames.color.fg]: vars.color.tinted.fg[2],
     "@nest": {
       "&:is(button)": {
         WebkitFontSmoothing: "inherit",
@@ -2508,32 +2599,32 @@ const _inputStyle = {
             // cursor: 'pointer',
           },
           "&:not([data-disabled]):hover": {
-            "--color-bg": vars.color.tinted.bg[1],
-            "--color-border": vars.color.tinted.border[3],
-            "--color-fg": vars.color.tinted.fg[1],
-            "--color-muted-bg": vars.color.tinted.bg[2],
-            "--color-muted-fg": vars.color.tinted.fg[4]
+            [varNames.color.bg]: vars.color.tinted.bg[1],
+            [varNames.color.border]: vars.color.tinted.border[3],
+            [varNames.color.fg]: vars.color.tinted.fg[1],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[2],
+            [varNames.color.muted.fg]: vars.color.tinted.fg[4]
           },
           '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-pressed]': {
-            "--color-bg": vars.color.tinted.bg[2],
-            "--color-border": vars.color.tinted.border[4],
-            "--color-fg": vars.color.tinted.fg[0],
-            "--color-muted-bg": vars.color.tinted.bg[3],
-            "--color-muted-fg": vars.color.tinted.fg[4]
+            [varNames.color.bg]: vars.color.tinted.bg[2],
+            [varNames.color.border]: vars.color.tinted.border[4],
+            [varNames.color.fg]: vars.color.tinted.fg[0],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[3],
+            [varNames.color.muted.fg]: vars.color.tinted.fg[4]
           },
           "&:not([data-disabled]):focus": {
-            "--color-bg": vars.color.solid.bg[0],
-            "--color-border": vars.color.solid.border[1],
-            "--color-fg": vars.color.solid.fg[1],
-            "--color-muted-bg": vars.color.solid.bg[1],
-            "--color-muted-fg": vars.color.solid.fg[3]
+            [varNames.color.bg]: vars.color.solid.primary.bg[0],
+            [varNames.color.border]: vars.color.solid.primary.border[1],
+            [varNames.color.fg]: vars.color.solid.primary.fg[0],
+            [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
+            [varNames.color.muted.fg]: vars.color.solid.primary.fg[3]
           },
           "&[data-disabled]": {
-            "--color-bg": vars.color.tinted.bg[0],
-            "--color-border": vars.color.tinted.border[1],
-            "--color-fg": vars.color.tinted.border[4],
-            "--color-muted-bg": vars.color.tinted.bg[1],
-            "--color-muted-fg": vars.color.tinted.border[4]
+            [varNames.color.bg]: vars.color.tinted.bg[0],
+            [varNames.color.border]: vars.color.tinted.border[1],
+            [varNames.color.fg]: vars.color.tinted.border[4],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[1],
+            [varNames.color.muted.fg]: vars.color.tinted.border[4]
           }
         }
       }
@@ -2854,11 +2945,22 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.muted.fg]: solid.fg[4]
       },
       "&[data-disabled]": {
-        [varNames.color.bg]: vars.color.default.tinted.bg[1],
-        [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
+        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.border]: vars.color.tinted.default.border[1],
+        [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.code.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[4]
       }
     }
   }, primitive$j[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
@@ -2894,11 +2996,22 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
       },
       "&[data-disabled]": {
-        [varNames.color.bg]: vars.color.default.tinted.bg[1],
-        [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
+        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.bg]: vars.color.tinted.default.bg[0],
+        [varNames.color.border]: vars.color.tinted.default.border[0],
+        [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+        [varNames.color.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[3]
       }
     }
   }, primitive$j[`.button.${variantMap.bleed}.${toneMap$1[tone]}`] = {
@@ -2932,11 +3045,22 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.muted.fg]: tinted.fg[3]
       },
       "&[data-disabled]": {
-        [varNames.color.bg]: vars.color.default.tinted.bg[0],
-        [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[1],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
+        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.bg]: vars.color.tinted.default.bg[0],
+        [varNames.color.border]: vars.color.tinted.default.border[0],
+        [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+        [varNames.color.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[3]
       }
     }
   };
@@ -3029,7 +3153,7 @@ const buttonStyle = {
       //   '--color-muted-bg': vars.color.solid.bg[1],
       //   '--color-muted-fg': vars.color.solid.fg[3],
       // },
-      "a&[data-disabled]), button&[data-disabled]": {
+      "a&[data-disabled], button&[data-disabled]": {
         [varNames.color.bg]: vars.color.tinted.default.bg[2],
         [varNames.color.border]: vars.color.tinted.default.border[4],
         [varNames.color.fg]: vars.color.tinted.default.fg[0],
@@ -3908,115 +4032,115 @@ const textStyle = {
     _prefix: !1,
     "@nest": {
       "&.atrule": {
-        color: "var(--color-token-atrule)"
+        color: vars.color.code.token.atrule
       },
       "&.attr-name": {
-        color: "var(--color-token-attr-name)"
+        color: vars.color.code.token.attrName
       },
       "&.attr-value": {
-        color: "var(--color-token-attr-value)"
+        color: vars.color.code.token.attrValue
       },
       "&.attribute": {
-        color: "var(--color-token-attribute)"
+        color: vars.color.code.token.attribute
       },
       "&.boolean": {
-        color: "var(--color-token-boolean)"
+        color: vars.color.code.token.boolean
       },
       "&.builtin": {
-        color: "var(--color-token-builtin)"
+        color: vars.color.code.token.builtin
       },
       "&.cdata": {
-        color: "var(--color-token-cdata)"
+        color: vars.color.code.token.cdata
       },
       "&.char": {
-        color: "var(--color-token-char)"
+        color: vars.color.code.token.char
       },
       "&.class": {
-        color: "var(--color-token-class)"
+        color: vars.color.code.token.class
       },
       "&.class-name": {
-        color: "var(--color-token-class-name)"
+        color: vars.color.code.token.className
       },
       "&.comment": {
-        color: "var(--color-token-comment)"
+        color: vars.color.code.token.comment
       },
       "&.constant": {
-        color: "var(--color-token-constant)"
+        color: vars.color.code.token.constant
       },
       "&.deleted": {
-        color: "var(--color-token-deleted)"
+        color: vars.color.code.token.deleted
       },
       "&.doctype": {
-        color: "var(--color-token-doctype)"
+        color: vars.color.code.token.doctype
       },
       "&.entity": {
-        color: "var(--color-token-entity)"
+        color: vars.color.code.token.entity
       },
       "&.function": {
-        color: "var(--color-token-function)"
+        color: vars.color.code.token.function
       },
       "&.hexcode": {
-        color: "var(--color-token-hexcode)"
+        color: vars.color.code.token.hexcode
       },
       "&.id": {
-        color: "var(--color-token-id)"
+        color: vars.color.code.token.id
       },
       "&.important": {
-        color: "var(--color-token-important)"
+        color: vars.color.code.token.important
       },
       "&.inserted": {
-        color: "var(--color-token-inserted)"
+        color: vars.color.code.token.inserted
       },
       "&.keyword": {
-        color: "var(--color-token-keyword)"
+        color: vars.color.code.token.keyword
       },
       "&.number": {
-        color: "var(--color-token-number)"
+        color: vars.color.code.token.number
       },
       "&.operator": {
-        color: "var(--color-token-operator)"
+        color: vars.color.code.token.operator
       },
       "&.prolog": {
-        color: "var(--color-token-prolog)"
+        color: vars.color.code.token.prolog
       },
       "&.property": {
-        color: "var(--color-token-property)"
+        color: vars.color.code.token.property
       },
       "&.pseudo-class": {
-        color: "var(--color-token-pseudo-class)"
+        color: vars.color.code.token.pseudoClass
       },
       "&.pseudo-element": {
-        color: "var(--color-token-pseudo-element)"
+        color: vars.color.code.token.pseudoElement
       },
       "&.punctuation": {
-        color: "var(--color-token-punctuation)"
+        color: vars.color.code.token.punctuation
       },
       "&.attr-value &:not(.attr-equals).punctuation": {
         color: "inherit"
       },
       "&.regex": {
-        color: "var(--color-token-regex)"
+        color: vars.color.code.token.regex
       },
       "&.selector": {
-        color: "var(--color-token-selector)"
+        color: vars.color.code.token.selector
       },
       "&.string": {
-        color: "var(--color-token-string)"
+        color: vars.color.code.token.string
       },
       "&.symbol": {
-        color: "var(--color-token-symbol)"
+        color: vars.color.code.token.symbol
       },
       "&.tag": {
-        color: "var(--color-token-tag)"
+        color: vars.color.code.token.tag
       },
       "&.unit": {
-        color: "var(--color-token-unit)"
+        color: vars.color.code.token.unit
       },
       "&.url": {
-        color: "var(--color-token-url)"
+        color: vars.color.code.token.url
       },
       "&.variable": {
-        color: "var(--color-token-variable)"
+        color: vars.color.code.token.variable
       }
     }
   }
@@ -4244,6 +4368,7 @@ function toSnakeCase(str) {
 function compileSystem() {
   return compileStyle(systemStyle);
 }
+const THEME_COLOR_SCHEMES = ["dark", "light"], THEME_COLOR_VARIANTS = ["tinted", "solid"];
 function compileTheme_v3(theme) {
   return compileRule(":root", compileThemeProperties(theme), {
     keyframes: {},
@@ -4254,6 +4379,7 @@ function compileThemeProperties(theme) {
   return {
     ...buildAvatarThemeProperties(theme),
     ...buildButtonThemeProperties(theme),
+    [varNames.card.shadow.outline]: px(theme.card.shadow.outline),
     ...buildContainerThemeProperties(theme),
     ...buildFontCodeThemeProperties(theme),
     ...buildFontHeadingThemeProperties(theme),
@@ -4268,161 +4394,166 @@ function compileThemeProperties(theme) {
 }
 function buildAvatarThemeProperties(theme) {
   return {
-    "--avatar-focus-ring-offset": px(theme.avatar.focusRing.offset),
-    "--avatar-focus-ring-width": px(theme.avatar.focusRing.width),
-    "--avatar-0-distance": px(theme.avatar.sizes[0].distance),
-    "--avatar-0-size": px(theme.avatar.sizes[0].size),
-    "--avatar-1-distance": px(theme.avatar.sizes[1].distance),
-    "--avatar-1-size": px(theme.avatar.sizes[1].size),
-    "--avatar-2-distance": px(theme.avatar.sizes[2].distance),
-    "--avatar-2-size": px(theme.avatar.sizes[2].size),
-    "--avatar-3-distance": px(theme.avatar.sizes[3].distance),
-    "--avatar-3-size": px(theme.avatar.sizes[3].size)
+    [varNames.avatar.focusRing.offset]: px(theme.avatar.focusRing.offset),
+    [varNames.avatar.focusRing.width]: px(theme.avatar.focusRing.width),
+    [varNames.avatar.sizes[0].distance]: px(theme.avatar.sizes[0].distance),
+    [varNames.avatar.sizes[0].size]: px(theme.avatar.sizes[0].size),
+    [varNames.avatar.sizes[1].distance]: px(theme.avatar.sizes[1].distance),
+    [varNames.avatar.sizes[1].size]: px(theme.avatar.sizes[1].size),
+    [varNames.avatar.sizes[2].distance]: px(theme.avatar.sizes[2].distance),
+    [varNames.avatar.sizes[2].size]: px(theme.avatar.sizes[2].size),
+    [varNames.avatar.sizes[3].distance]: px(theme.avatar.sizes[3].distance),
+    [varNames.avatar.sizes[3].size]: px(theme.avatar.sizes[3].size)
   };
 }
 function buildButtonThemeProperties(theme) {
   return {
-    "--button-border-width": px(theme.button.border.width),
-    "--button-focus-ring-offset": px(theme.button.focusRing.offset),
-    "--button-focus-ring-width": px(theme.button.focusRing.width)
-    // [`--button-text-weight`]: theme.button.textWeight,
+    [varNames.button.border.width]: px(theme.button.border.width),
+    [varNames.button.focusRing.offset]: px(theme.button.focusRing.offset),
+    [varNames.button.focusRing.width]: px(theme.button.focusRing.width)
   };
 }
 function buildContainerThemeProperties(theme) {
   return {
-    "--container-0": px(theme.container[0]),
-    "--container-1": px(theme.container[1]),
-    "--container-2": px(theme.container[2]),
-    "--container-3": px(theme.container[3]),
-    "--container-4": px(theme.container[4]),
-    "--container-5": px(theme.container[5])
+    [varNames.container[0]]: px(theme.container[0]),
+    [varNames.container[1]]: px(theme.container[1]),
+    [varNames.container[2]]: px(theme.container[2]),
+    [varNames.container[3]]: px(theme.container[3]),
+    [varNames.container[4]]: px(theme.container[4]),
+    [varNames.container[5]]: px(theme.container[5])
   };
 }
 function buildFontCodeThemeProperties(theme) {
   const props = {
-    "--font-code-family": theme.font.code.family,
-    "--font-code-feature-settings": theme.font.code.featureSettings,
-    "--font-code-weight-regular": `${theme.font.code.weights.regular}`,
-    "--font-code-weight-medium": `${theme.font.code.weights.medium}`,
-    "--font-code-weight-semibold": `${theme.font.code.weights.semibold}`,
-    "--font-code-weight-bold": `${theme.font.code.weights.bold}`
+    [varNames.font.code.family]: theme.font.code.family,
+    [varNames.font.code.featureSettings]: theme.font.code.featureSettings,
+    [varNames.font.code.weights.regular]: `${theme.font.code.weights.regular}`,
+    [varNames.font.code.weights.medium]: `${theme.font.code.weights.medium}`,
+    [varNames.font.code.weights.semibold]: `${theme.font.code.weights.semibold}`,
+    [varNames.font.code.weights.bold]: `${theme.font.code.weights.bold}`
   };
-  for (const size of FONT_CODE_SIZE)
-    props[`--font-code-${size}-size`] = rem(theme.font.code.sizes[size].fontSize), props[`--font-code-${size}-line-height`] = rem(theme.font.code.sizes[size].lineHeight), props[`--font-code-${size}-ascender-height`] = px(theme.font.code.sizes[size].ascenderHeight), props[`--font-code-${size}-descender-height`] = px(theme.font.code.sizes[size].descenderHeight), props[`--font-code-${size}-letter-spacing`] = px(theme.font.code.sizes[size].letterSpacing), props[`--font-code-${size}-icon-size`] = px(theme.font.code.sizes[size].iconSize);
+  for (const size of FONT_CODE_SIZE) {
+    const v = varNames.font.code.sizes[size], t = theme.font.code.sizes[size];
+    props[v.fontSize] = rem(t.fontSize), props[v.lineHeight] = rem(t.lineHeight), props[v.ascenderHeight] = px(t.ascenderHeight), props[v.descenderHeight] = px(t.descenderHeight), props[v.letterSpacing] = px(t.letterSpacing), props[v.iconSize] = px(t.iconSize);
+  }
   return props;
 }
 function buildFontHeadingThemeProperties(theme) {
   const props = {
-    "--font-heading-family": theme.font.heading.family,
-    "--font-heading-feature-settings": theme.font.heading.featureSettings,
-    "--font-heading-weight-regular": `${theme.font.heading.weights.regular}`,
-    "--font-heading-weight-medium": `${theme.font.heading.weights.medium}`,
-    "--font-heading-weight-semibold": `${theme.font.heading.weights.semibold}`,
-    "--font-heading-weight-bold": `${theme.font.heading.weights.bold}`
+    [varNames.font.heading.family]: theme.font.heading.family,
+    [varNames.font.heading.featureSettings]: theme.font.heading.featureSettings,
+    [varNames.font.heading.weights.regular]: `${theme.font.heading.weights.regular}`,
+    [varNames.font.heading.weights.medium]: `${theme.font.heading.weights.medium}`,
+    [varNames.font.heading.weights.semibold]: `${theme.font.heading.weights.semibold}`,
+    [varNames.font.heading.weights.bold]: `${theme.font.heading.weights.bold}`
   };
-  for (const size of FONT_HEADING_SIZE)
-    props[`--font-heading-${size}-size`] = rem(theme.font.heading.sizes[size].fontSize), props[`--font-heading-${size}-line-height`] = rem(theme.font.heading.sizes[size].lineHeight), props[`--font-heading-${size}-ascender-height`] = px(theme.font.heading.sizes[size].ascenderHeight), props[`--font-heading-${size}-descender-height`] = px(theme.font.heading.sizes[size].descenderHeight), props[`--font-heading-${size}-letter-spacing`] = px(theme.font.heading.sizes[size].letterSpacing), props[`--font-heading-${size}-icon-size`] = px(theme.font.heading.sizes[size].iconSize);
+  for (const size of FONT_HEADING_SIZE) {
+    const v = varNames.font.heading.sizes[size], t = theme.font.heading.sizes[size];
+    props[v.fontSize] = rem(t.fontSize), props[v.lineHeight] = rem(t.lineHeight), props[v.ascenderHeight] = px(t.ascenderHeight), props[v.descenderHeight] = px(t.descenderHeight), props[v.letterSpacing] = px(t.letterSpacing), props[v.iconSize] = px(t.iconSize);
+  }
   return props;
 }
 function buildFontLabelThemeProperties(theme) {
   const props = {
-    "--font-label-family": theme.font.label.family,
-    "--font-label-feature-settings": theme.font.label.featureSettings,
-    "--font-label-weight-regular": `${theme.font.label.weights.regular}`,
-    "--font-label-weight-medium": `${theme.font.label.weights.medium}`,
-    "--font-label-weight-semibold": `${theme.font.label.weights.semibold}`,
-    "--font-label-weight-bold": `${theme.font.label.weights.bold}`
+    [varNames.font.label.family]: theme.font.label.family,
+    [varNames.font.label.featureSettings]: theme.font.label.featureSettings,
+    [varNames.font.label.weights.regular]: `${theme.font.label.weights.regular}`,
+    [varNames.font.label.weights.medium]: `${theme.font.label.weights.medium}`,
+    [varNames.font.label.weights.semibold]: `${theme.font.label.weights.semibold}`,
+    [varNames.font.label.weights.bold]: `${theme.font.label.weights.bold}`
   };
-  for (const size of FONT_LABEL_SIZE)
-    props[`--font-label-${size}-size`] = rem(theme.font.label.sizes[size].fontSize), props[`--font-label-${size}-line-height`] = rem(theme.font.label.sizes[size].lineHeight), props[`--font-label-${size}-ascender-height`] = px(theme.font.label.sizes[size].ascenderHeight), props[`--font-label-${size}-descender-height`] = px(theme.font.label.sizes[size].descenderHeight), props[`--font-label-${size}-letter-spacing`] = px(theme.font.label.sizes[size].letterSpacing), props[`--font-label-${size}-icon-size`] = px(theme.font.label.sizes[size].iconSize);
+  for (const size of FONT_LABEL_SIZE) {
+    const v = varNames.font.label.sizes[size], t = theme.font.label.sizes[size];
+    props[v.fontSize] = rem(t.fontSize), props[v.lineHeight] = rem(t.lineHeight), props[v.ascenderHeight] = px(t.ascenderHeight), props[v.descenderHeight] = px(t.descenderHeight), props[v.letterSpacing] = px(t.letterSpacing), props[v.iconSize] = px(t.iconSize);
+  }
   return props;
 }
 function buildFontTextThemeProperties(theme) {
   const props = {
-    "--font-text-family": theme.font.text.family,
-    "--font-text-feature-settings": theme.font.text.featureSettings,
-    "--font-text-weight-regular": `${theme.font.text.weights.regular}`,
-    "--font-text-weight-medium": `${theme.font.text.weights.medium}`,
-    "--font-text-weight-semibold": `${theme.font.text.weights.semibold}`,
-    "--font-text-weight-bold": `${theme.font.text.weights.bold}`
+    [varNames.font.text.family]: theme.font.text.family,
+    [varNames.font.text.featureSettings]: theme.font.text.featureSettings,
+    [varNames.font.text.weights.regular]: `${theme.font.text.weights.regular}`,
+    [varNames.font.text.weights.medium]: `${theme.font.text.weights.medium}`,
+    [varNames.font.text.weights.semibold]: `${theme.font.text.weights.semibold}`,
+    [varNames.font.text.weights.bold]: `${theme.font.text.weights.bold}`
   };
-  for (const size of FONT_TEXT_SIZE)
-    props[`--font-text-${size}-size`] = rem(theme.font.text.sizes[size].fontSize), props[`--font-text-${size}-line-height`] = rem(theme.font.text.sizes[size].lineHeight), props[`--font-text-${size}-ascender-height`] = px(theme.font.text.sizes[size].ascenderHeight), props[`--font-text-${size}-descender-height`] = px(theme.font.text.sizes[size].descenderHeight), props[`--font-text-${size}-letter-spacing`] = px(theme.font.text.sizes[size].letterSpacing), props[`--font-text-${size}-icon-size`] = px(theme.font.text.sizes[size].iconSize);
+  for (const size of FONT_TEXT_SIZE) {
+    const v = varNames.font.text.sizes[size], t = theme.font.text.sizes[size];
+    props[v.fontSize] = rem(t.fontSize), props[v.lineHeight] = rem(t.lineHeight), props[v.ascenderHeight] = px(t.ascenderHeight), props[v.descenderHeight] = px(t.descenderHeight), props[v.letterSpacing] = px(t.letterSpacing), props[v.iconSize] = px(t.iconSize);
+  }
   return props;
 }
 function buildInputThemeProperties(theme) {
   return {
-    "--input-border-width": px(theme.input.border.width),
-    "--input-checkbox-focus-ring-offset": px(theme.input.checkbox.focusRing.offset),
-    "--input-checkbox-focus-ring-width": px(theme.input.checkbox.focusRing.width),
-    "--input-checkbox-size": px(theme.input.checkbox.size),
-    "--input-radio-focus-ring-offset": px(theme.input.radio.focusRing.offset),
-    "--input-radio-focus-ring-width": px(theme.input.radio.focusRing.width),
-    "--input-radio-mark-size": px(theme.input.radio.markSize),
-    "--input-radio-size": px(theme.input.radio.size),
-    "--input-select-focus-ring-offset": px(theme.input.select.focusRing.offset),
-    "--input-select-focus-ring-width": px(theme.input.select.focusRing.width),
-    "--input-switch-focus-ring-offset": px(theme.input.switch.focusRing.offset),
-    "--input-switch-focus-ring-width": px(theme.input.switch.focusRing.width),
-    "--input-switch-height": px(theme.input.switch.height),
-    "--input-switch-padding": px(theme.input.switch.padding),
-    "--input-switch-transition-duration-ms": `${theme.input.switch.transitionDurationMs}ms`,
-    "--input-switch-transition-timing-function": theme.input.switch.transitionTimingFunction,
-    "--input-switch-width": px(theme.input.switch.width),
-    "--input-text-focus-ring-offset": px(theme.input.text.focusRing.offset),
-    "--input-text-focus-ring-width": px(theme.input.text.focusRing.width)
+    [varNames.input.border.width]: px(theme.input.border.width),
+    [varNames.input.checkbox.focusRing.offset]: px(theme.input.checkbox.focusRing.offset),
+    [varNames.input.checkbox.focusRing.width]: px(theme.input.checkbox.focusRing.width),
+    [varNames.input.checkbox.size]: px(theme.input.checkbox.size),
+    [varNames.input.radio.focusRing.offset]: px(theme.input.radio.focusRing.offset),
+    [varNames.input.radio.focusRing.width]: px(theme.input.radio.focusRing.width),
+    [varNames.input.radio.markSize]: px(theme.input.radio.markSize),
+    [varNames.input.radio.size]: px(theme.input.radio.size),
+    [varNames.input.select.focusRing.offset]: px(theme.input.select.focusRing.offset),
+    [varNames.input.select.focusRing.width]: px(theme.input.select.focusRing.width),
+    [varNames.input.switch.focusRing.offset]: px(theme.input.switch.focusRing.offset),
+    [varNames.input.switch.focusRing.width]: px(theme.input.switch.focusRing.width),
+    [varNames.input.switch.height]: px(theme.input.switch.height),
+    [varNames.input.switch.padding]: px(theme.input.switch.padding),
+    [varNames.input.switch.transitionDurationMs]: `${theme.input.switch.transitionDurationMs}ms`,
+    [varNames.input.switch.transitionTimingFunction]: theme.input.switch.transitionTimingFunction,
+    [varNames.input.switch.width]: px(theme.input.switch.width),
+    [varNames.input.text.focusRing.offset]: px(theme.input.text.focusRing.offset),
+    [varNames.input.text.focusRing.width]: px(theme.input.text.focusRing.width)
   };
 }
 function buildRadiusThemeProperties(theme) {
   return {
-    "--radius-0": rem(theme.radius[0]),
-    "--radius-1": rem(theme.radius[1]),
-    "--radius-2": rem(theme.radius[2]),
-    "--radius-3": rem(theme.radius[3]),
-    "--radius-4": rem(theme.radius[4]),
-    "--radius-5": rem(theme.radius[5]),
-    "--radius-6": rem(theme.radius[6])
+    [varNames.radius[0]]: rem(theme.radius[0]),
+    [varNames.radius[1]]: rem(theme.radius[1]),
+    [varNames.radius[2]]: rem(theme.radius[2]),
+    [varNames.radius[3]]: rem(theme.radius[3]),
+    [varNames.radius[4]]: rem(theme.radius[4]),
+    [varNames.radius[5]]: rem(theme.radius[5]),
+    [varNames.radius[6]]: rem(theme.radius[6])
   };
 }
 function buildShadowThemeProperties(theme) {
   return {
-    "--shadow-outline": `0 0 0 ${theme.card.shadow.outline}px`,
-    "--shadow-0-umbra": toBoxShadow(theme.shadow[0]?.umbra),
-    "--shadow-0-penumbra": toBoxShadow(theme.shadow[0]?.penumbra),
-    "--shadow-0-ambient": toBoxShadow(theme.shadow[0]?.ambient),
-    "--shadow-1-umbra": toBoxShadow(theme.shadow[1]?.umbra),
-    "--shadow-1-penumbra": toBoxShadow(theme.shadow[1]?.penumbra),
-    "--shadow-1-ambient": toBoxShadow(theme.shadow[1]?.ambient),
-    "--shadow-2-umbra": toBoxShadow(theme.shadow[2]?.umbra),
-    "--shadow-2-penumbra": toBoxShadow(theme.shadow[2]?.penumbra),
-    "--shadow-2-ambient": toBoxShadow(theme.shadow[2]?.ambient),
-    "--shadow-3-umbra": toBoxShadow(theme.shadow[3]?.umbra),
-    "--shadow-3-penumbra": toBoxShadow(theme.shadow[3]?.penumbra),
-    "--shadow-3-ambient": toBoxShadow(theme.shadow[3]?.ambient),
-    "--shadow-4-umbra": toBoxShadow(theme.shadow[4]?.umbra),
-    "--shadow-4-penumbra": toBoxShadow(theme.shadow[4]?.penumbra),
-    "--shadow-4-ambient": toBoxShadow(theme.shadow[4]?.ambient),
-    "--shadow-5-umbra": toBoxShadow(theme.shadow[5]?.umbra),
-    "--shadow-5-penumbra": toBoxShadow(theme.shadow[5]?.penumbra),
-    "--shadow-5-ambient": toBoxShadow(theme.shadow[5]?.ambient)
+    [varNames.shadow[0].umbra]: toBoxShadow(theme.shadow[0]?.umbra),
+    [varNames.shadow[0].penumbra]: toBoxShadow(theme.shadow[0]?.penumbra),
+    [varNames.shadow[0].ambient]: toBoxShadow(theme.shadow[0]?.ambient),
+    [varNames.shadow[1].umbra]: toBoxShadow(theme.shadow[1]?.umbra),
+    [varNames.shadow[1].penumbra]: toBoxShadow(theme.shadow[1]?.penumbra),
+    [varNames.shadow[1].ambient]: toBoxShadow(theme.shadow[1]?.ambient),
+    [varNames.shadow[2].umbra]: toBoxShadow(theme.shadow[2]?.umbra),
+    [varNames.shadow[2].penumbra]: toBoxShadow(theme.shadow[2]?.penumbra),
+    [varNames.shadow[2].ambient]: toBoxShadow(theme.shadow[2]?.ambient),
+    [varNames.shadow[3].umbra]: toBoxShadow(theme.shadow[3]?.umbra),
+    [varNames.shadow[3].penumbra]: toBoxShadow(theme.shadow[3]?.penumbra),
+    [varNames.shadow[3].ambient]: toBoxShadow(theme.shadow[3]?.ambient),
+    [varNames.shadow[4].umbra]: toBoxShadow(theme.shadow[4]?.umbra),
+    [varNames.shadow[4].penumbra]: toBoxShadow(theme.shadow[4]?.penumbra),
+    [varNames.shadow[4].ambient]: toBoxShadow(theme.shadow[4]?.ambient),
+    [varNames.shadow[5].umbra]: toBoxShadow(theme.shadow[5]?.umbra),
+    [varNames.shadow[5].penumbra]: toBoxShadow(theme.shadow[5]?.penumbra),
+    [varNames.shadow[5].ambient]: toBoxShadow(theme.shadow[5]?.ambient)
   };
 }
 function buildSpaceThemeProperties(theme) {
   return {
-    "--space-0": rem(theme.space[0]),
-    "--space-0_5": rem(theme.space[1] / 2),
-    "--space-1": rem(theme.space[1]),
-    "--space-2": rem(theme.space[2]),
-    "--space-3": rem(theme.space[3]),
-    "--space-4": rem(theme.space[4]),
-    "--space-5": rem(theme.space[5]),
-    "--space-6": rem(theme.space[6]),
-    "--space-7": rem(theme.space[7]),
-    "--space-8": rem(theme.space[8]),
-    "--space-9": rem(theme.space[9])
+    [varNames.space[0]]: rem(theme.space[0]),
+    [varNames.space[0.5]]: rem(theme.space[1] / 2),
+    [varNames.space[1]]: rem(theme.space[1]),
+    [varNames.space[2]]: rem(theme.space[2]),
+    [varNames.space[3]]: rem(theme.space[3]),
+    [varNames.space[4]]: rem(theme.space[4]),
+    [varNames.space[5]]: rem(theme.space[5]),
+    [varNames.space[6]]: rem(theme.space[6]),
+    [varNames.space[7]]: rem(theme.space[7]),
+    [varNames.space[8]]: rem(theme.space[8]),
+    [varNames.space[9]]: rem(theme.space[9])
   };
 }
-const THEME_COLOR_SCHEMES = ["dark", "light"], THEME_COLOR_VARIANTS = ["tinted", "solid"];
 function buildColorThemeProperties(theme) {
   const props = {};
   for (const scheme of THEME_COLOR_SCHEMES)
@@ -4436,27 +4567,27 @@ function buildColorThemeProperties(theme) {
       }));
       for (const colorVariant of THEME_COLOR_VARIANTS)
         for (const elementTone of THEME_COLOR_STATE_TONES) {
-          const tokens = theme._tokens.color[cardTone].variant[colorVariant][elementTone], prefix = `--color-${scheme}-${cardTone}-${colorVariant}-${elementTone}`, context = {
-            bgVar: `${prefix}-bg-0`,
-            hue: tokens._hue,
+          const v = varNames.color[scheme][cardTone][colorVariant][elementTone], t = theme._tokens.color[cardTone].variant[colorVariant][elementTone], context = {
+            bgVar: v.bg[0],
+            hue: t._hue,
             scheme
           };
           Object.assign(props, {
-            [`${prefix}-bg-0`]: renderColor(tokens.bg[0], context),
-            [`${prefix}-bg-1`]: `color-mix(in srgb, var(${prefix}-bg-0), var(${prefix}-bg-4) 25%)`,
-            [`${prefix}-bg-2`]: `color-mix(in srgb, var(${prefix}-bg-0), var(${prefix}-bg-4) 50%)`,
-            [`${prefix}-bg-3`]: `color-mix(in srgb, var(${prefix}-bg-0), var(${prefix}-bg-4) 75%)`,
-            [`${prefix}-bg-4`]: renderColor(tokens.bg[4], context),
-            [`${prefix}-border-0`]: renderColor(tokens.border[0], context),
-            [`${prefix}-border-1`]: `color-mix(in srgb, var(${prefix}-border-0), var(${prefix}-border-4) 25%)`,
-            [`${prefix}-border-2`]: `color-mix(in srgb, var(${prefix}-border-0), var(${prefix}-border-4) 50%)`,
-            [`${prefix}-border-3`]: `color-mix(in srgb, var(${prefix}-border-0), var(${prefix}-border-4) 75%)`,
-            [`${prefix}-border-4`]: renderColor(tokens.border[4], context),
-            [`${prefix}-fg-0`]: renderColor(tokens.fg[0], context),
-            [`${prefix}-fg-1`]: `color-mix(in srgb, var(${prefix}-fg-0), var(${prefix}-fg-4) 25%)`,
-            [`${prefix}-fg-2`]: `color-mix(in srgb, var(${prefix}-fg-0), var(${prefix}-fg-4) 50%)`,
-            [`${prefix}-fg-3`]: `color-mix(in srgb, var(${prefix}-fg-0), var(${prefix}-fg-4) 75%)`,
-            [`${prefix}-fg-4`]: renderColor(tokens.fg[4], context)
+            [v.bg[0]]: renderColor(t.bg[0], context),
+            [v.bg[1]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 25%)`,
+            [v.bg[2]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 50%)`,
+            [v.bg[3]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 75%)`,
+            [v.bg[4]]: renderColor(t.bg[4], context),
+            [v.border[0]]: renderColor(t.border[0], context),
+            [v.border[1]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 25%)`,
+            [v.border[2]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 50%)`,
+            [v.border[3]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 75%)`,
+            [v.border[4]]: renderColor(t.border[4], context),
+            [v.fg[0]]: renderColor(t.fg[0], context),
+            [v.fg[1]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 25%)`,
+            [v.fg[2]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 50%)`,
+            [v.fg[3]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 75%)`,
+            [v.fg[4]]: renderColor(t.fg[4], context)
           });
         }
     }
@@ -4466,16 +4597,16 @@ function buildColorAvatarThemeProperties(theme, options) {
   const {
     scheme,
     cardTone
-  } = options, tokens = theme._tokens.color[cardTone], prefix = `--color-${scheme}-${cardTone}`, props = {};
+  } = options, v = varNames.color[scheme][cardTone], t = theme._tokens.color[cardTone], props = {};
   for (const hue of HUES) {
     const context = {
-      bgVar: `${prefix}-bg-0`,
-      hue: tokens.avatar[hue]._hue ?? hue,
+      bgVar: varNames.color.bg,
+      hue: t.avatar[hue]._hue ?? hue,
       scheme
     };
     Object.assign(props, {
-      [`${prefix}-avatar-${hue}-bg`]: renderColor(tokens.avatar[hue].bg, context),
-      [`${prefix}-avatar-${hue}-fg`]: renderColor(tokens.avatar[hue].fg, context)
+      [v.avatar[hue].bg]: renderColor(t.avatar[hue].bg, context),
+      [v.avatar[hue].fg]: renderColor(t.avatar[hue].fg, context)
     });
   }
   return props;
@@ -4484,63 +4615,63 @@ function buildColorCardThemeProperties(theme, options) {
   const {
     scheme,
     cardTone
-  } = options, tokens = theme._tokens.color[cardTone], prefix = `--color-${scheme}-${cardTone}`, context = {
-    bgVar: `${prefix}-bg-0`,
-    hue: tokens._hue,
+  } = options, v = varNames.color[scheme][cardTone], t = theme._tokens.color[cardTone], context = {
+    bgVar: varNames.color.bg,
+    hue: t._hue,
     scheme
   };
   return {
     // backdrop
-    [`${prefix}-backdrop`]: renderColor(tokens.backdrop, context),
+    [v.backdrop]: renderColor(t.backdrop, context),
     // code
-    [`${prefix}-code-bg`]: renderColor(tokens.code.bg, context),
-    [`${prefix}-code-fg`]: renderColor(tokens.code.fg, context),
+    [v.code.bg]: renderColor(t.code.bg, context),
+    [v.code.fg]: renderColor(t.code.fg, context),
     // code / token
-    [`${prefix}-code-token-atrule`]: renderColor(tokens.code.token.atrule, context),
-    [`${prefix}-code-token-attr-name`]: renderColor(tokens.code.token.attrName, context),
-    [`${prefix}-code-token-attr-value`]: renderColor(tokens.code.token.attrValue, context),
-    [`${prefix}-code-token-attribute`]: renderColor(tokens.code.token.attribute, context),
-    [`${prefix}-code-token-boolean`]: renderColor(tokens.code.token.boolean, context),
-    [`${prefix}-code-token-builtin`]: renderColor(tokens.code.token.builtin, context),
-    [`${prefix}-code-token-cdata`]: renderColor(tokens.code.token.cdata, context),
-    [`${prefix}-code-token-char`]: renderColor(tokens.code.token.char, context),
-    [`${prefix}-code-token-class-name`]: renderColor(tokens.code.token.className, context),
-    [`${prefix}-code-token-class`]: renderColor(tokens.code.token.class, context),
-    [`${prefix}-code-token-comment`]: renderColor(tokens.code.token.comment, context),
-    [`${prefix}-code-token-constant`]: renderColor(tokens.code.token.constant, context),
-    [`${prefix}-code-token-deleted`]: renderColor(tokens.code.token.deleted, context),
-    [`${prefix}-code-token-doctype`]: renderColor(tokens.code.token.doctype, context),
-    [`${prefix}-code-token-entity`]: renderColor(tokens.code.token.entity, context),
-    [`${prefix}-code-token-function`]: renderColor(tokens.code.token.function, context),
-    [`${prefix}-code-token-hexcode`]: renderColor(tokens.code.token.hexcode, context),
-    [`${prefix}-code-token-id`]: renderColor(tokens.code.token.id, context),
-    [`${prefix}-code-token-important`]: renderColor(tokens.code.token.important, context),
-    [`${prefix}-code-token-inserted`]: renderColor(tokens.code.token.inserted, context),
-    [`${prefix}-code-token-keyword`]: renderColor(tokens.code.token.keyword, context),
-    [`${prefix}-code-token-number`]: renderColor(tokens.code.token.number, context),
-    [`${prefix}-code-token-operator`]: renderColor(tokens.code.token.operator, context),
-    [`${prefix}-code-token-prolog`]: renderColor(tokens.code.token.prolog, context),
-    [`${prefix}-code-token-property`]: renderColor(tokens.code.token.property, context),
-    [`${prefix}-code-token-pseudo-class`]: renderColor(tokens.code.token.pseudoClass, context),
-    [`${prefix}-code-token-pseudo-eelement`]: renderColor(tokens.code.token.pseudoElement, context),
-    [`${prefix}-code-token-punctuation`]: renderColor(tokens.code.token.punctuation, context),
-    [`${prefix}-code-token-regex`]: renderColor(tokens.code.token.regex, context),
-    [`${prefix}-code-token-selector`]: renderColor(tokens.code.token.selector, context),
-    [`${prefix}-code-token-string`]: renderColor(tokens.code.token.string, context),
-    [`${prefix}-code-token-symbol`]: renderColor(tokens.code.token.symbol, context),
-    [`${prefix}-code-token-tag`]: renderColor(tokens.code.token.tag, context),
-    [`${prefix}-code-token-unit`]: renderColor(tokens.code.token.unit, context),
-    [`${prefix}-code-token-url`]: renderColor(tokens.code.token.url, context),
-    [`${prefix}-code-token-variable`]: renderColor(tokens.code.token.variable, context),
+    [v.code.token.atrule]: renderColor(t.code.token.atrule, context),
+    [v.code.token.attrName]: renderColor(t.code.token.attrName, context),
+    [v.code.token.attrValue]: renderColor(t.code.token.attrValue, context),
+    [v.code.token.attribute]: renderColor(t.code.token.attribute, context),
+    [v.code.token.boolean]: renderColor(t.code.token.boolean, context),
+    [v.code.token.builtin]: renderColor(t.code.token.builtin, context),
+    [v.code.token.cdata]: renderColor(t.code.token.cdata, context),
+    [v.code.token.char]: renderColor(t.code.token.char, context),
+    [v.code.token.className]: renderColor(t.code.token.className, context),
+    [v.code.token.class]: renderColor(t.code.token.class, context),
+    [v.code.token.comment]: renderColor(t.code.token.comment, context),
+    [v.code.token.constant]: renderColor(t.code.token.constant, context),
+    [v.code.token.deleted]: renderColor(t.code.token.deleted, context),
+    [v.code.token.doctype]: renderColor(t.code.token.doctype, context),
+    [v.code.token.entity]: renderColor(t.code.token.entity, context),
+    [v.code.token.function]: renderColor(t.code.token.function, context),
+    [v.code.token.hexcode]: renderColor(t.code.token.hexcode, context),
+    [v.code.token.id]: renderColor(t.code.token.id, context),
+    [v.code.token.important]: renderColor(t.code.token.important, context),
+    [v.code.token.inserted]: renderColor(t.code.token.inserted, context),
+    [v.code.token.keyword]: renderColor(t.code.token.keyword, context),
+    [v.code.token.number]: renderColor(t.code.token.number, context),
+    [v.code.token.operator]: renderColor(t.code.token.operator, context),
+    [v.code.token.prolog]: renderColor(t.code.token.prolog, context),
+    [v.code.token.property]: renderColor(t.code.token.property, context),
+    [v.code.token.pseudoClass]: renderColor(t.code.token.pseudoClass, context),
+    [v.code.token.pseudoElement]: renderColor(t.code.token.pseudoElement, context),
+    [v.code.token.punctuation]: renderColor(t.code.token.punctuation, context),
+    [v.code.token.regex]: renderColor(t.code.token.regex, context),
+    [v.code.token.selector]: renderColor(t.code.token.selector, context),
+    [v.code.token.string]: renderColor(t.code.token.string, context),
+    [v.code.token.symbol]: renderColor(t.code.token.symbol, context),
+    [v.code.token.tag]: renderColor(t.code.token.tag, context),
+    [v.code.token.unit]: renderColor(t.code.token.unit, context),
+    [v.code.token.url]: renderColor(t.code.token.url, context),
+    [v.code.token.variable]: renderColor(t.code.token.variable, context),
     // focus ring
-    [`${prefix}-focus-ring`]: renderColor(tokens.focusRing, context),
+    [v.focusRing]: renderColor(t.focusRing, context),
     // link
-    [`${prefix}-link-fg`]: renderColor(tokens.link.fg, context),
+    [v.link.fg]: renderColor(t.link.fg, context),
     // shadow
-    [`${prefix}-shadow-outline`]: renderColor(tokens.shadow.outline, context),
-    [`${prefix}-shadow-umbra`]: renderColor(tokens.shadow.umbra, context),
-    [`${prefix}-shadow-penumbra`]: renderColor(tokens.shadow.penumbra, context),
-    [`${prefix}-shadow-ambient`]: renderColor(tokens.shadow.ambient, context)
+    [v.shadow.outline]: renderColor(t.shadow.outline, context),
+    [v.shadow.umbra]: renderColor(t.shadow.umbra, context),
+    [v.shadow.penumbra]: renderColor(t.shadow.penumbra, context),
+    [v.shadow.ambient]: renderColor(t.shadow.ambient, context)
   };
 }
 function compileTheme(theme) {
@@ -4619,6 +4750,9 @@ function _arrow() {
 function _arrowStroke() {
   return _comp("arrow-stroke");
 }
+function _arrowStrokeMask() {
+  return _comp("arrow-stroke-mask");
+}
 function _arrowShape() {
   return _comp("arrow-shape");
 }
@@ -4776,9 +4910,12 @@ function srOnly() {
   return composeClassNames("sr-only");
 }
 export {
+  BREAKPOINTS,
+  PREFIX,
   _arrow,
   _arrowShape,
   _arrowStroke,
+  _arrowStrokeMask,
   _input,
   _inputElement,
   _inputPresentation,