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

package/dist/css.js

@@ -9,11 +9,11 @@ function _resp(prefix, prop) {
       return index === 0 ? className : `${index}:${className}`;
     }).filter(Boolean).join(" ") : (typeof prop == "boolean" ? [prefix] : [prefix, prop]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
 }
-function getClassNames(...classNames) {
+function _getClassNames(...classNames) {
   return classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean).join(" ").split(" ");
 }
 function composeClassNames(...classNames) {
-  return unique(getClassNames(...classNames)).join(" ") || void 0;
+  return unique(_getClassNames(...classNames)).join(" ") || void 0;
 }
 function unique(array) {
   return Array.from(new Set(array));
@@ -88,7 +88,7 @@ function scopeClassName(className) {
     return `${PREFIX}${className.trim()}`;
 }
 function _comp(...classNames) {
-  return getClassNames(...classNames).filter(Boolean).map(scopeClassName).join(" ") || void 0;
+  return _getClassNames(...classNames).filter(Boolean).map(scopeClassName).join(" ") || void 0;
 }
 function textOverflow(props) {
   return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`);
@@ -96,6 +96,109 @@ function textOverflow(props) {
 function width(props) {
   return _resp("w", props.width) ?? "";
 }
+function isRecord(value) {
+  return value !== null && typeof value == "object" && !Array.isArray(value);
+}
+function isArray(value) {
+  return Array.isArray(value);
+}
+function rem(value) {
+  return value === 0 ? "0" : `${value / 16}rem`;
+}
+function px(value) {
+  return value === 0 ? "0" : `${value}px`;
+}
+function toBoxShadow(value) {
+  return value ? value.map((n) => px(n)).join(" ") : "none";
+}
+function _compileStyle(style) {
+  let css = "";
+  if (style.rules && (css += compileStyleRules(style.rules)), style.keyframes && Object.keys(style.keyframes).length > 0)
+    for (const [name, value] of Object.entries(style.keyframes)) {
+      let keyframesCss = `@keyframes ${name} {
+`;
+      for (const [key, props] of Object.entries(value))
+        keyframesCss += `  ${key} {
+`, keyframesCss += compileProperties(props), keyframesCss += `}
+`;
+      keyframesCss += `
+}
+
+`, css += keyframesCss;
+    }
+  if (style.layers && Object.keys(style.layers).length > 0)
+    for (const [layerName, layerRules] of Object.entries(style.layers))
+      Object.keys(layerRules).length > 0 && (css += `@layer ${PREFIX}${layerName} {
+`, css += compileStyleRules(layerRules), css += `}
+
+`);
+  return css;
+}
+function compileStyleRules(rules2) {
+  let css = "";
+  const mediaMap = /* @__PURE__ */ new Map();
+  for (const [selector, properties] of Object.entries(rules2))
+    if (properties) {
+      if (properties["@media"])
+        for (const [mediaQuery, mediaProps] of Object.entries(properties["@media"])) {
+          const arr = mediaMap.get(mediaQuery) ?? [];
+          arr.push({
+            selector,
+            props: mediaProps
+          }), mediaMap.set(mediaQuery, arr);
+        }
+      css += compileStyleRule(selector, properties);
+    }
+  for (const [mediaQuery, mediaRules] of mediaMap) {
+    css += `@media ${mediaQuery} {
+`;
+    for (const rule of mediaRules)
+      css += compileStyleRule(rule.selector, rule.props);
+    css += `}
+
+`;
+  }
+  return css;
+}
+function compileStyleRule(_selector, properties) {
+  let css = "";
+  const {
+    _prefix = !0,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    "@media": _mediaProps,
+    "@nest": nestedProps,
+    ...restProperties
+  } = properties, selector = _prefix ? `${_selector.replace(/\./g, `.${PREFIX}`)}` : _selector;
+  if (Object.entries(restProperties).length && (css += `${selector} {
+`, css += compileProperties(restProperties), css += `}
+
+`), nestedProps)
+    for (const [_nestedSelector, nestedProperties] of Object.entries(nestedProps)) {
+      const nestedSelector = _prefix && (nestedProperties._prefix ?? !0) ? _nestedSelector.replace(/\./g, `.${PREFIX}`) : _nestedSelector;
+      css += `${nestedSelector.replace(/&/g, selector)} {
+`, css += compileProperties(nestedProperties), css += `}
+
+`;
+    }
+  return css;
+}
+function compileProperties(props) {
+  let css = "";
+  const propEntries = Object.entries(props);
+  for (const [key, value] of propEntries)
+    if (!key.startsWith("@"))
+      if (isArray(value))
+        for (const item of value)
+          css += `  ${toSnakeCase(key)}: ${item};
+`;
+      else
+        css += `  ${toSnakeCase(key)}: ${value};
+`;
+  return css;
+}
+function toSnakeCase(str) {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
 const varNames = {
   avatar: {
     distance: "--avatar-distance",
@@ -128,9 +231,6 @@ const varNames = {
   },
   color: {
     // card scope
-    accent: {
-      fg: "--color-accent-fg"
-    },
     avatar: {
       bg: "--color-avatar-bg",
       fg: "--color-avatar-fg",
@@ -248,99 +348,18 @@ const varNames = {
       variant: "tinted"
     }),
     // tone scopes
-    transparent: buildColorCardVarNames({
-      tone: "transparent"
-    }),
-    default: buildColorCardVarNames({
-      tone: "default"
-    }),
-    neutral: buildColorCardVarNames({
-      tone: "neutral"
-    }),
-    primary: buildColorCardVarNames({
-      tone: "primary"
-    }),
-    suggest: buildColorCardVarNames({
-      tone: "suggest"
-    }),
-    positive: buildColorCardVarNames({
-      tone: "positive"
-    }),
-    caution: buildColorCardVarNames({
-      tone: "caution"
-    }),
-    critical: buildColorCardVarNames({
-      tone: "critical"
-    }),
-    // scheme scope
-    dark: {
-      transparent: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "transparent"
-      }),
-      default: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "default"
-      }),
-      neutral: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "neutral"
-      }),
-      primary: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "primary"
-      }),
-      suggest: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "neutral"
-      }),
-      positive: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "positive"
-      }),
-      caution: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "caution"
-      }),
-      critical: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "critical"
-      })
-    },
-    light: {
-      transparent: buildColorCardVarNames({
-        scheme: "light",
-        tone: "transparent"
-      }),
-      default: buildColorCardVarNames({
-        scheme: "light",
-        tone: "default"
-      }),
-      neutral: buildColorCardVarNames({
-        scheme: "light",
-        tone: "neutral"
-      }),
-      primary: buildColorCardVarNames({
-        scheme: "light",
-        tone: "primary"
-      }),
-      suggest: buildColorCardVarNames({
-        scheme: "light",
-        tone: "suggest"
-      }),
-      positive: buildColorCardVarNames({
-        scheme: "light",
-        tone: "positive"
-      }),
-      caution: buildColorCardVarNames({
-        scheme: "light",
-        tone: "caution"
-      }),
-      critical: buildColorCardVarNames({
-        scheme: "light",
-        tone: "critical"
-      })
-    }
+    ...theme.THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
+      tone
+    }), acc), {}),
+    // scheme scopes
+    dark: theme.THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
+      scheme: "dark",
+      tone
+    }), acc), {}),
+    light: theme.THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
+      scheme: "light",
+      tone
+    }), acc), {})
   },
   container: {
     0: "--container-0",
@@ -483,7 +502,6 @@ const varNames = {
     letterSpacing: "--input-letter-spacing",
     ascenderHeight: "--input-ascender-height",
     descenderHeight: "--input-descender-height",
-    // capHeight: `--input-cap-height`,
     gap: "--input-gap",
     padding: "--input-padding"
   },
@@ -508,109 +526,106 @@ function buildColorCardVarNames(props) {
   const {
     scheme,
     tone
-  } = props, sourcePrefix = scheme ? `--color-${scheme}-${tone}` : `--color-${tone}`;
+  } = props, prefix = scheme ? `--color-${scheme}-${tone}` : `--color-${tone}`;
   return {
-    accent: {
-      fg: `${sourcePrefix}-accent-fg`
-    },
     avatar: {
       gray: {
-        bg: `${sourcePrefix}-avatar-gray-bg`,
-        fg: `${sourcePrefix}-avatar-gray-fg`
+        bg: `${prefix}-avatar-gray-bg`,
+        fg: `${prefix}-avatar-gray-fg`
       },
       blue: {
-        bg: `${sourcePrefix}-avatar-blue-bg`,
-        fg: `${sourcePrefix}-avatar-blue-fg`
+        bg: `${prefix}-avatar-blue-bg`,
+        fg: `${prefix}-avatar-blue-fg`
       },
       purple: {
-        bg: `${sourcePrefix}-avatar-purple-bg`,
-        fg: `${sourcePrefix}-avatar-purple-fg`
+        bg: `${prefix}-avatar-purple-bg`,
+        fg: `${prefix}-avatar-purple-fg`
       },
       magenta: {
-        bg: `${sourcePrefix}-avatar-magenta-bg`,
-        fg: `${sourcePrefix}-avatar-magenta-fg`
+        bg: `${prefix}-avatar-magenta-bg`,
+        fg: `${prefix}-avatar-magenta-fg`
       },
       red: {
-        bg: `${sourcePrefix}-avatar-red-bg`,
-        fg: `${sourcePrefix}-avatar-red-fg`
+        bg: `${prefix}-avatar-red-bg`,
+        fg: `${prefix}-avatar-red-fg`
       },
       orange: {
-        bg: `${sourcePrefix}-avatar-orange-bg`,
-        fg: `${sourcePrefix}-avatar-gray-fg`
+        bg: `${prefix}-avatar-orange-bg`,
+        fg: `${prefix}-avatar-gray-fg`
       },
       yellow: {
-        bg: `${sourcePrefix}-avatar-yellow-bg`,
-        fg: `${sourcePrefix}-avatar-yellow-fg`
+        bg: `${prefix}-avatar-yellow-bg`,
+        fg: `${prefix}-avatar-yellow-fg`
       },
       green: {
-        bg: `${sourcePrefix}-avatar-green-bg`,
-        fg: `${sourcePrefix}-avatar-green-fg`
+        bg: `${prefix}-avatar-green-bg`,
+        fg: `${prefix}-avatar-green-fg`
       },
       cyan: {
-        bg: `${sourcePrefix}-avatar-cyan-bg`,
-        fg: `${sourcePrefix}-avatar-yellow-fg`
+        bg: `${prefix}-avatar-cyan-bg`,
+        fg: `${prefix}-avatar-yellow-fg`
       }
     },
-    backdrop: `${sourcePrefix}-backdrop`,
+    backdrop: `${prefix}-backdrop`,
     code: {
-      bg: `${sourcePrefix}-code-bg`,
-      fg: `${sourcePrefix}-code-fg`,
+      bg: `${prefix}-code-bg`,
+      fg: `${prefix}-code-fg`,
       token: {
-        atrule: `${sourcePrefix}-code-token-atrule`,
-        attrName: `${sourcePrefix}-code-token-attr-name`,
-        attrValue: `${sourcePrefix}-code-token-attr-value`,
-        attribute: `${sourcePrefix}-code-token-attribute`,
-        boolean: `${sourcePrefix}-code-token-boolean`,
-        builtin: `${sourcePrefix}-code-token-builtin`,
-        cdata: `${sourcePrefix}-code-token-cdata`,
-        char: `${sourcePrefix}-code-token-char`,
-        class: `${sourcePrefix}-code-token-class`,
-        className: `${sourcePrefix}-code-token-class-name`,
-        comment: `${sourcePrefix}-code-token-comment`,
-        constant: `${sourcePrefix}-code-token-constant`,
-        deleted: `${sourcePrefix}-code-token-deleted`,
-        doctype: `${sourcePrefix}-code-token-doctype`,
-        entity: `${sourcePrefix}-code-token-entity`,
-        function: `${sourcePrefix}-code-token-function`,
-        hexcode: `${sourcePrefix}-code-token-hexcode`,
-        id: `${sourcePrefix}-code-token-id`,
-        important: `${sourcePrefix}-code-token-important`,
-        inserted: `${sourcePrefix}-code-token-inserted`,
-        keyword: `${sourcePrefix}-code-token-keyword`,
-        number: `${sourcePrefix}-code-token-number`,
-        operator: `${sourcePrefix}-code-token-operator`,
-        prolog: `${sourcePrefix}-code-token-prolog`,
-        property: `${sourcePrefix}-code-token-property`,
-        pseudoClass: `${sourcePrefix}-code-token-pseudo-class`,
-        pseudoElement: `${sourcePrefix}-code-token-pseudo-element`,
-        punctuation: `${sourcePrefix}-code-token-punctuation`,
-        regex: `${sourcePrefix}-code-token-regex`,
-        selector: `${sourcePrefix}-code-token-selector`,
-        string: `${sourcePrefix}-code-token-string`,
-        symbol: `${sourcePrefix}-code-token-symbol`,
-        tag: `${sourcePrefix}-code-token-tag`,
-        unit: `${sourcePrefix}-code-token-unit`,
-        url: `${sourcePrefix}-code-token-url`,
-        variable: `${sourcePrefix}-code-token-variable`
+        atrule: `${prefix}-code-token-atrule`,
+        attrName: `${prefix}-code-token-attr-name`,
+        attrValue: `${prefix}-code-token-attr-value`,
+        attribute: `${prefix}-code-token-attribute`,
+        boolean: `${prefix}-code-token-boolean`,
+        builtin: `${prefix}-code-token-builtin`,
+        cdata: `${prefix}-code-token-cdata`,
+        char: `${prefix}-code-token-char`,
+        class: `${prefix}-code-token-class`,
+        className: `${prefix}-code-token-class-name`,
+        comment: `${prefix}-code-token-comment`,
+        constant: `${prefix}-code-token-constant`,
+        deleted: `${prefix}-code-token-deleted`,
+        doctype: `${prefix}-code-token-doctype`,
+        entity: `${prefix}-code-token-entity`,
+        function: `${prefix}-code-token-function`,
+        hexcode: `${prefix}-code-token-hexcode`,
+        id: `${prefix}-code-token-id`,
+        important: `${prefix}-code-token-important`,
+        inserted: `${prefix}-code-token-inserted`,
+        keyword: `${prefix}-code-token-keyword`,
+        number: `${prefix}-code-token-number`,
+        operator: `${prefix}-code-token-operator`,
+        prolog: `${prefix}-code-token-prolog`,
+        property: `${prefix}-code-token-property`,
+        pseudoClass: `${prefix}-code-token-pseudo-class`,
+        pseudoElement: `${prefix}-code-token-pseudo-element`,
+        punctuation: `${prefix}-code-token-punctuation`,
+        regex: `${prefix}-code-token-regex`,
+        selector: `${prefix}-code-token-selector`,
+        string: `${prefix}-code-token-string`,
+        symbol: `${prefix}-code-token-symbol`,
+        tag: `${prefix}-code-token-tag`,
+        unit: `${prefix}-code-token-unit`,
+        url: `${prefix}-code-token-url`,
+        variable: `${prefix}-code-token-variable`
       }
     },
-    focusRing: `${sourcePrefix}-focus-ring`,
+    focusRing: `${prefix}-focus-ring`,
     link: {
-      fg: `${sourcePrefix}-link-fg`
+      fg: `${prefix}-link-fg`
     },
     muted: {
-      bg: `${sourcePrefix}-muted-bg`,
-      fg: `${sourcePrefix}-muted-fg`
+      bg: `${prefix}-muted-bg`,
+      fg: `${prefix}-muted-fg`
     },
     shadow: {
-      outline: `${sourcePrefix}-shadow-outline`,
-      umbra: `${sourcePrefix}-shadow-umbra`,
-      penumbra: `${sourcePrefix}-shadow-penumbra`,
-      ambient: `${sourcePrefix}-shadow-ambient`
+      outline: `${prefix}-shadow-outline`,
+      umbra: `${prefix}-shadow-umbra`,
+      penumbra: `${prefix}-shadow-penumbra`,
+      ambient: `${prefix}-shadow-ambient`
     },
     skeleton: {
-      from: `${sourcePrefix}-skeleton-from`,
-      to: `${sourcePrefix}-skeleton-to`
+      from: `${prefix}-skeleton-from`,
+      to: `${prefix}-skeleton-to`
     },
     solid: buildColorVariantVarNames({
       scheme,
@@ -629,101 +644,71 @@ function buildColorVariantVarNames(options) {
     scheme,
     tone,
     variant
-  } = options, _prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}` : tone ? `--color-${tone}-${variant}` : `--color-${variant}`, vars2 = {
+  } = options, prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}` : tone ? `--color-${tone}-${variant}` : `--color-${variant}`, vars2 = {
     bg: {
-      0: `${_prefix}-bg-0`,
-      1: `${_prefix}-bg-1`,
-      2: `${_prefix}-bg-2`,
-      3: `${_prefix}-bg-3`,
-      4: `${_prefix}-bg-4`
+      0: `${prefix}-bg-0`,
+      1: `${prefix}-bg-1`,
+      2: `${prefix}-bg-2`,
+      3: `${prefix}-bg-3`,
+      4: `${prefix}-bg-4`
     },
     border: {
-      0: `${_prefix}-border-0`,
-      1: `${_prefix}-border-1`,
-      2: `${_prefix}-border-2`,
-      3: `${_prefix}-border-3`,
-      4: `${_prefix}-border-4`
+      0: `${prefix}-border-0`,
+      1: `${prefix}-border-1`,
+      2: `${prefix}-border-2`,
+      3: `${prefix}-border-3`,
+      4: `${prefix}-border-4`
     },
     fg: {
-      0: `${_prefix}-fg-0`,
-      1: `${_prefix}-fg-1`,
-      2: `${_prefix}-fg-2`,
-      3: `${_prefix}-fg-3`,
-      4: `${_prefix}-fg-4`
+      0: `${prefix}-fg-0`,
+      1: `${prefix}-fg-1`,
+      2: `${prefix}-fg-2`,
+      3: `${prefix}-fg-3`,
+      4: `${prefix}-fg-4`
     }
   };
   for (const elementTone of theme.THEME_COLOR_STATE_TONES) {
-    const prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}-${elementTone}` : tone ? `--color-${tone}-${variant}-${elementTone}` : `--color-${variant}-${elementTone}`;
+    const _prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}-${elementTone}` : tone ? `--color-${tone}-${variant}-${elementTone}` : `--color-${variant}-${elementTone}`;
     vars2[elementTone] = {
       bg: {
-        0: `${prefix}-bg-0`,
-        1: `${prefix}-bg-1`,
-        2: `${prefix}-bg-2`,
-        3: `${prefix}-bg-3`,
-        4: `${prefix}-bg-4`
+        0: `${_prefix}-bg-0`,
+        1: `${_prefix}-bg-1`,
+        2: `${_prefix}-bg-2`,
+        3: `${_prefix}-bg-3`,
+        4: `${_prefix}-bg-4`
       },
       border: {
-        0: `${prefix}-border-0`,
-        1: `${prefix}-border-1`,
-        2: `${prefix}-border-2`,
-        3: `${prefix}-border-3`,
-        4: `${prefix}-border-4`
+        0: `${_prefix}-border-0`,
+        1: `${_prefix}-border-1`,
+        2: `${_prefix}-border-2`,
+        3: `${_prefix}-border-3`,
+        4: `${_prefix}-border-4`
       },
       fg: {
-        0: `${prefix}-fg-0`,
-        1: `${prefix}-fg-1`,
-        2: `${prefix}-fg-2`,
-        3: `${prefix}-fg-3`,
-        4: `${prefix}-fg-4`
+        0: `${_prefix}-fg-0`,
+        1: `${_prefix}-fg-1`,
+        2: `${_prefix}-fg-2`,
+        3: `${_prefix}-fg-3`,
+        4: `${_prefix}-fg-4`
       }
     };
   }
   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(),
+  return _compileStyle({
+    layers: {
+      theme: {
+        ":root": compilePaletteProperties()
+      }
+    }
+  });
+}
+function compilePaletteProperties() {
+  const rules2 = {
     [varNames.black]: color.color.black.hex,
     [varNames.white]: color.color.white.hex
   };
-  return compileRule(":root", props, {
-    keyframes: {},
-    media: {}
-  });
-}
-function compileHues() {
-  const rules2 = {};
   for (const hue of theme.HUES)
     for (const tint of theme.TINTS)
       rules2[varNames[hue][tint]] = color.color[hue][tint].hex;
@@ -785,9 +770,6 @@ for (const tone of theme.THEME_COLOR_CARD_TONES)
     tone
   });
 const colorVars = {
-  accent: {
-    fg: `var(${varNames.color.accent.fg})`
-  },
   avatar: {
     bg: `var(${varNames.color.avatar.bg})`,
     fg: `var(${varNames.color.avatar.fg})`,
@@ -1059,9 +1041,6 @@ function buildColorCardVars(props) {
     tone
   } = props, prefix = scheme ? varNames.color[scheme][tone] : varNames.color[tone];
   return {
-    accent: {
-      fg: `var(${prefix.accent.fg})`
-    },
     avatar: {
       ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
         ...acc,
@@ -2560,14 +2539,6 @@ const _inputStyle = {
   layers: {
     primitive: primitive$o
   }
-}, toneMap$2 = {
-  default: "default",
-  neutral: "neutral",
-  suggest: "suggest",
-  primary: "accent",
-  positive: "positive",
-  caution: "caution",
-  critical: "critical"
 }, primitive$n = {
   ".selectable": {
     backgroundColor: vars.color.bg,
@@ -2640,7 +2611,7 @@ function buildSelectableTones() {
   const rules2 = {};
   for (const tone of theme.THEME_COLOR_STATE_TONES) {
     const target = varNames.color, source = vars.color;
-    rules2[`&.${toneMap$2[tone]}`] = {
+    rules2[`&.${tone}`] = {
       [target.tinted.bg[0]]: source.tinted[tone].bg[0],
       [target.tinted.bg[1]]: source.tinted[tone].bg[1],
       [target.tinted.bg[2]]: source.tinted[tone].bg[2],
@@ -2677,6 +2648,7 @@ function buildSelectableTones() {
 }
 const primitive$m = {
   ".avatar": {
+    [varNames.color.fg]: vars.color.avatar.fg,
     backgroundColor: vars.color.avatar.bg,
     position: "relative",
     boxSizing: "border-box",
@@ -2687,11 +2659,7 @@ const primitive$m = {
     height: vars.avatar.size,
     borderRadius: vars.avatar.size,
     "@nest": {
-      '&[data-status="inactive"]': {
-        opacity: 0.5
-      },
-      // &:is(button)
-      "&:is(button)": {
+      "button&": {
         WebkitFontSmoothing: "inherit",
         appearance: "none",
         margin: 0,
@@ -2701,11 +2669,11 @@ const primitive$m = {
         color: "inherit",
         outline: "none"
       },
-      "&:is(button):focus": {
+      "button&:focus": {
         outline: "var(--avatar-focus-ring-width) solid var(--color-focus-ring)",
         outlineOffset: "var(--avatar-focus-ring-offset)"
       },
-      "&:is(button):focus:not(:focus-visible)": {
+      "button&:focus:not(:focus-visible)": {
         boxShadow: "none"
       },
       ":disabled &, [data-disabled] &": {
@@ -2855,7 +2823,7 @@ const badgeStyle = {
   layers: {
     primitive: primitive$k
   }
-}, toneMap$1 = {
+}, toneMap = {
   default: "default",
   neutral: "neutral",
   suggest: "suggest",
@@ -2916,7 +2884,7 @@ const badgeStyle = {
 };
 for (const tone of theme.THEME_COLOR_STATE_TONES) {
   const solid = vars.color.solid[tone], tinted = vars.color.tinted[tone];
-  primitive$j[`.button.${variantMap.default}.${toneMap$1[tone]}`] = {
+  primitive$j[`.button.${variantMap.default}.${toneMap[tone]}`] = {
     [varNames.color.bg]: solid.bg[0],
     [varNames.color.border]: solid.border[1],
     [varNames.color.fg]: solid.fg[0],
@@ -2964,7 +2932,7 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
         [varNames.color.muted.fg]: vars.color.tinted.default.border[4]
       }
     }
-  }, primitive$j[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
+  }, primitive$j[`.button.${variantMap.ghost}.${toneMap[tone]}`] = {
     [varNames.color.bg]: tinted.bg[1],
     [varNames.color.border]: tinted.border[0],
     [varNames.color.fg]: tinted.fg[2],
@@ -3015,7 +2983,7 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
         [varNames.color.muted.fg]: vars.color.tinted.default.border[3]
       }
     }
-  }, primitive$j[`.button.${variantMap.bleed}.${toneMap$1[tone]}`] = {
+  }, primitive$j[`.button.${variantMap.bleed}.${toneMap[tone]}`] = {
     boxShadow: "none",
     [varNames.color.bg]: tinted.bg[0],
     [varNames.color.border]: tinted.border[1],
@@ -3070,16 +3038,6 @@ const buttonStyle = {
   layers: {
     primitive: primitive$j
   }
-}, toneMap = {
-  transparent: "transparent",
-  default: "default",
-  neutral: "neutral",
-  suggest: "suggest",
-  primary: "accent",
-  positive: "positive",
-  caution: "caution",
-  critical: "critical",
-  inherit: void 0
 }, primitive$i = {
   ".card": {
     backgroundColor: vars.color.bg,
@@ -3205,9 +3163,10 @@ for (const tone of theme.THEME_COLOR_CARD_TONES) {
     "--card-shadow-umbra-color": vars.color.shadow.umbra,
     "--card-shadow-penumbra-color": vars.color.shadow.penumbra,
     "--card-shadow-ambient-color": vars.color.shadow.ambient
+    // todo
     // '--card-skeleton-from-color': 'var(--color-skeleton-from)',
     // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
-  }), primitive$i[`.card.${toneMap[tone]}`] = toneProps;
+  }), primitive$i[`.card.${tone}`] = toneProps;
 }
 const cardStyle = {
   layers: {
@@ -3215,9 +3174,6 @@ const cardStyle = {
   }
 };
 function _assignToneProps(toneProps, _varNames, _vars) {
-  Object.assign(toneProps, {
-    [_varNames.accent.fg]: _vars.accent.fg
-  });
   for (const hue of theme.THEME_COLOR_AVATAR_COLORS)
     toneProps[`${_varNames.avatar[hue].bg}`] = _vars.avatar[hue].bg, toneProps[`${_varNames.avatar[hue].fg}`] = _vars.avatar[hue].fg;
   Object.assign(toneProps, {
@@ -4180,8 +4136,8 @@ const textStyle = {
   layers: {
     primitive
   }
-}, systemStyle = _mergeStyles([
-  // NOTE: order matters in CSS
+}, _systemStyle = _mergeStyles([
+  // NOTE: Order matters in CSS!
   {
     // define order of layers
     layers: {
@@ -4264,116 +4220,17 @@ const textStyle = {
   toastStyle,
   treeStyle
 ]);
-function isRecord(value) {
-  return value !== null && typeof value == "object" && !Array.isArray(value);
-}
-function isArray(value) {
-  return Array.isArray(value);
-}
-function rem(value) {
-  return value === 0 ? "0" : `${value / 16}rem`;
-}
-function px(value) {
-  return value === 0 ? "0" : `${value}px`;
-}
-function toBoxShadow(value) {
-  return value ? value.map((n) => px(n)).join(" ") : "none";
-}
-function compileStyle(style) {
-  let css = "";
-  if (style.rules && (css += compileStyleRules(style.rules)), style.keyframes && Object.keys(style.keyframes).length > 0)
-    for (const [name, value] of Object.entries(style.keyframes)) {
-      let keyframesCss = `@keyframes ${name} {
-`;
-      for (const [key, props] of Object.entries(value))
-        keyframesCss += `  ${key} {
-`, keyframesCss += compileProperties(props), keyframesCss += `}
-`;
-      keyframesCss += `
-}
-`, css += keyframesCss;
-    }
-  if (style.layers && Object.keys(style.layers).length > 0)
-    for (const [layerName, layerRules] of Object.entries(style.layers))
-      Object.keys(layerRules).length > 0 && (css += `@layer ${PREFIX}${layerName} {
-`, css += compileStyleRules(layerRules), css += `}
-
-`);
-  return css;
-}
-function compileStyleRules(rules2) {
-  let css = "";
-  const mediaMap = /* @__PURE__ */ new Map();
-  for (const [selector, properties] of Object.entries(rules2))
-    if (properties) {
-      if (properties["@media"])
-        for (const [mediaQuery, mediaProps] of Object.entries(properties["@media"])) {
-          const arr = mediaMap.get(mediaQuery) ?? [];
-          arr.push({
-            selector,
-            props: mediaProps
-          }), mediaMap.set(mediaQuery, arr);
-        }
-      css += compileStyleRule(selector, properties);
-    }
-  for (const [mediaQuery, mediaRules] of mediaMap) {
-    css += `@media ${mediaQuery} {
-`;
-    for (const rule of mediaRules)
-      css += compileStyleRule(rule.selector, rule.props);
-    css += `}
-
-`;
-  }
-  return css;
-}
-function compileStyleRule(_selector, properties) {
-  let css = "";
-  const {
-    _prefix = !0,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    "@media": _mediaProps,
-    "@nest": nestedProps,
-    ...restProperties
-  } = properties, selector = _prefix ? `${_selector.replace(/\./g, `.${PREFIX}`)}` : _selector;
-  if (Object.entries(restProperties).length && (css += `${selector} {
-`, css += compileProperties(restProperties), css += `}
-
-`), nestedProps)
-    for (const [_nestedSelector, nestedProperties] of Object.entries(nestedProps)) {
-      const nestedSelector = _prefix && (nestedProperties._prefix ?? !0) ? _nestedSelector.replace(/\./g, `.${PREFIX}`) : _nestedSelector;
-      css += `${nestedSelector.replace(/&/g, selector)} {
-`, css += compileProperties(nestedProperties), css += `}
-
-`;
-    }
-  return css;
-}
-function compileProperties(props) {
-  let css = "";
-  const propEntries = Object.entries(props);
-  for (const [key, value] of propEntries)
-    if (!key.startsWith("@"))
-      if (isArray(value))
-        for (const item of value)
-          css += `  ${toSnakeCase(key)}: ${item};
-`;
-      else
-        css += `  ${toSnakeCase(key)}: ${value};
-`;
-  return css;
-}
-function toSnakeCase(str) {
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-}
 function compileSystem() {
-  return compileStyle(systemStyle);
+  return _compileStyle(_systemStyle);
 }
 const THEME_COLOR_SCHEMES = ["dark", "light"], THEME_COLOR_VARIANTS = ["tinted", "solid"];
 function compileTheme_v3(theme2) {
-  return compileRule(":root", compileThemeProperties(theme2), {
-    keyframes: {},
-    media: {}
+  return _compileStyle({
+    layers: {
+      theme: {
+        ":root": compileThemeProperties(theme2)
+      }
+    }
   });
 }
 function compileThemeProperties(theme2) {
@@ -4381,6 +4238,7 @@ function compileThemeProperties(theme2) {
     ...buildAvatarThemeProperties(theme2),
     ...buildButtonThemeProperties(theme2),
     [varNames.card.shadow.outline]: px(theme2.card.shadow.outline),
+    ...buildColorThemeProperties(theme2),
     ...buildContainerThemeProperties(theme2),
     ...buildFontCodeThemeProperties(theme2),
     ...buildFontHeadingThemeProperties(theme2),
@@ -4389,22 +4247,21 @@ function compileThemeProperties(theme2) {
     ...buildInputThemeProperties(theme2),
     ...buildRadiusThemeProperties(theme2),
     ...buildShadowThemeProperties(theme2),
-    ...buildSpaceThemeProperties(theme2),
-    ...buildColorThemeProperties(theme2)
+    ...buildSpaceThemeProperties(theme2)
   };
 }
 function buildAvatarThemeProperties(theme2) {
   return {
     [varNames.avatar.focusRing.offset]: px(theme2.avatar.focusRing.offset),
     [varNames.avatar.focusRing.width]: px(theme2.avatar.focusRing.width),
-    [varNames.avatar.sizes[0].distance]: px(theme2.avatar.sizes[0].distance),
-    [varNames.avatar.sizes[0].size]: px(theme2.avatar.sizes[0].size),
-    [varNames.avatar.sizes[1].distance]: px(theme2.avatar.sizes[1].distance),
-    [varNames.avatar.sizes[1].size]: px(theme2.avatar.sizes[1].size),
-    [varNames.avatar.sizes[2].distance]: px(theme2.avatar.sizes[2].distance),
-    [varNames.avatar.sizes[2].size]: px(theme2.avatar.sizes[2].size),
-    [varNames.avatar.sizes[3].distance]: px(theme2.avatar.sizes[3].distance),
-    [varNames.avatar.sizes[3].size]: px(theme2.avatar.sizes[3].size)
+    [varNames.avatar.sizes[0].distance]: rem(theme2.avatar.sizes[0].distance),
+    [varNames.avatar.sizes[0].size]: rem(theme2.avatar.sizes[0].size),
+    [varNames.avatar.sizes[1].distance]: rem(theme2.avatar.sizes[1].distance),
+    [varNames.avatar.sizes[1].size]: rem(theme2.avatar.sizes[1].size),
+    [varNames.avatar.sizes[2].distance]: rem(theme2.avatar.sizes[2].distance),
+    [varNames.avatar.sizes[2].size]: rem(theme2.avatar.sizes[2].size),
+    [varNames.avatar.sizes[3].distance]: rem(theme2.avatar.sizes[3].distance),
+    [varNames.avatar.sizes[3].size]: rem(theme2.avatar.sizes[3].size)
   };
 }
 function buildButtonThemeProperties(theme2) {
@@ -4416,71 +4273,71 @@ function buildButtonThemeProperties(theme2) {
 }
 function buildContainerThemeProperties(theme2) {
   return {
-    [varNames.container[0]]: px(theme2.container[0]),
-    [varNames.container[1]]: px(theme2.container[1]),
-    [varNames.container[2]]: px(theme2.container[2]),
-    [varNames.container[3]]: px(theme2.container[3]),
-    [varNames.container[4]]: px(theme2.container[4]),
-    [varNames.container[5]]: px(theme2.container[5])
+    [varNames.container[0]]: rem(theme2.container[0]),
+    [varNames.container[1]]: rem(theme2.container[1]),
+    [varNames.container[2]]: rem(theme2.container[2]),
+    [varNames.container[3]]: rem(theme2.container[3]),
+    [varNames.container[4]]: rem(theme2.container[4]),
+    [varNames.container[5]]: rem(theme2.container[5])
   };
 }
 function buildFontCodeThemeProperties(theme$1) {
-  const props = {
-    [varNames.font.code.family]: theme$1.font.code.family,
-    [varNames.font.code.featureSettings]: theme$1.font.code.featureSettings,
-    [varNames.font.code.weights.regular]: `${theme$1.font.code.weights.regular}`,
-    [varNames.font.code.weights.medium]: `${theme$1.font.code.weights.medium}`,
-    [varNames.font.code.weights.semibold]: `${theme$1.font.code.weights.semibold}`,
-    [varNames.font.code.weights.bold]: `${theme$1.font.code.weights.bold}`
+  const v = varNames.font.code, t = theme$1.font.code, props = {
+    [v.family]: t.family,
+    [v.featureSettings]: t.featureSettings || "normal",
+    [v.weights.regular]: t.weights.regular,
+    [v.weights.medium]: t.weights.medium,
+    [v.weights.semibold]: t.weights.semibold,
+    [v.weights.bold]: t.weights.bold
   };
   for (const size of theme.FONT_CODE_SIZE) {
-    const v = varNames.font.code.sizes[size], t = theme$1.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);
+    const _v = varNames.font.code.sizes[size], _t = theme$1.font.code.sizes[size];
+    props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
   }
   return props;
 }
 function buildFontHeadingThemeProperties(theme$1) {
-  const props = {
-    [varNames.font.heading.family]: theme$1.font.heading.family,
-    [varNames.font.heading.featureSettings]: theme$1.font.heading.featureSettings,
-    [varNames.font.heading.weights.regular]: `${theme$1.font.heading.weights.regular}`,
-    [varNames.font.heading.weights.medium]: `${theme$1.font.heading.weights.medium}`,
-    [varNames.font.heading.weights.semibold]: `${theme$1.font.heading.weights.semibold}`,
-    [varNames.font.heading.weights.bold]: `${theme$1.font.heading.weights.bold}`
+  const v = varNames.font.heading, t = theme$1.font.heading, props = {
+    [v.family]: t.family,
+    [v.featureSettings]: t.featureSettings,
+    [v.weights.regular]: t.weights.regular,
+    [v.weights.medium]: t.weights.medium,
+    [v.weights.semibold]: t.weights.semibold,
+    [v.weights.bold]: t.weights.bold
   };
   for (const size of theme.FONT_HEADING_SIZE) {
-    const v = varNames.font.heading.sizes[size], t = theme$1.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);
+    const _v = v.sizes[size], _t = t.sizes[size];
+    props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
   }
   return props;
 }
 function buildFontLabelThemeProperties(theme$1) {
-  const props = {
-    [varNames.font.label.family]: theme$1.font.label.family,
-    [varNames.font.label.featureSettings]: theme$1.font.label.featureSettings,
-    [varNames.font.label.weights.regular]: `${theme$1.font.label.weights.regular}`,
-    [varNames.font.label.weights.medium]: `${theme$1.font.label.weights.medium}`,
-    [varNames.font.label.weights.semibold]: `${theme$1.font.label.weights.semibold}`,
-    [varNames.font.label.weights.bold]: `${theme$1.font.label.weights.bold}`
+  const v = varNames.font.label, t = theme$1.font.label, props = {
+    [v.family]: t.family,
+    [v.featureSettings]: t.featureSettings,
+    [v.weights.regular]: t.weights.regular,
+    [v.weights.medium]: t.weights.medium,
+    [v.weights.semibold]: t.weights.semibold,
+    [v.weights.bold]: t.weights.bold
   };
   for (const size of theme.FONT_LABEL_SIZE) {
-    const v = varNames.font.label.sizes[size], t = theme$1.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);
+    const _v = v.sizes[size], _t = t.sizes[size];
+    props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
   }
   return props;
 }
 function buildFontTextThemeProperties(theme$1) {
-  const props = {
-    [varNames.font.text.family]: theme$1.font.text.family,
-    [varNames.font.text.featureSettings]: theme$1.font.text.featureSettings,
-    [varNames.font.text.weights.regular]: `${theme$1.font.text.weights.regular}`,
-    [varNames.font.text.weights.medium]: `${theme$1.font.text.weights.medium}`,
-    [varNames.font.text.weights.semibold]: `${theme$1.font.text.weights.semibold}`,
-    [varNames.font.text.weights.bold]: `${theme$1.font.text.weights.bold}`
+  const v = varNames.font.text, t = theme$1.font.text, props = {
+    [v.family]: t.family,
+    [v.featureSettings]: t.featureSettings,
+    [v.weights.regular]: t.weights.regular,
+    [v.weights.medium]: t.weights.medium,
+    [v.weights.semibold]: t.weights.semibold,
+    [v.weights.bold]: t.weights.bold
   };
   for (const size of theme.FONT_TEXT_SIZE) {
-    const v = varNames.font.text.sizes[size], t = theme$1.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);
+    const _v = v.sizes[size], _t = t.sizes[size];
+    props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
   }
   return props;
 }
@@ -4489,33 +4346,33 @@ function buildInputThemeProperties(theme2) {
     [varNames.input.border.width]: px(theme2.input.border.width),
     [varNames.input.checkbox.focusRing.offset]: px(theme2.input.checkbox.focusRing.offset),
     [varNames.input.checkbox.focusRing.width]: px(theme2.input.checkbox.focusRing.width),
-    [varNames.input.checkbox.size]: px(theme2.input.checkbox.size),
+    [varNames.input.checkbox.size]: rem(theme2.input.checkbox.size),
     [varNames.input.radio.focusRing.offset]: px(theme2.input.radio.focusRing.offset),
     [varNames.input.radio.focusRing.width]: px(theme2.input.radio.focusRing.width),
-    [varNames.input.radio.markSize]: px(theme2.input.radio.markSize),
-    [varNames.input.radio.size]: px(theme2.input.radio.size),
+    [varNames.input.radio.markSize]: rem(theme2.input.radio.markSize),
+    [varNames.input.radio.size]: rem(theme2.input.radio.size),
     [varNames.input.select.focusRing.offset]: px(theme2.input.select.focusRing.offset),
     [varNames.input.select.focusRing.width]: px(theme2.input.select.focusRing.width),
     [varNames.input.switch.focusRing.offset]: px(theme2.input.switch.focusRing.offset),
     [varNames.input.switch.focusRing.width]: px(theme2.input.switch.focusRing.width),
-    [varNames.input.switch.height]: px(theme2.input.switch.height),
-    [varNames.input.switch.padding]: px(theme2.input.switch.padding),
+    [varNames.input.switch.height]: rem(theme2.input.switch.height),
+    [varNames.input.switch.padding]: rem(theme2.input.switch.padding),
     [varNames.input.switch.transitionDurationMs]: `${theme2.input.switch.transitionDurationMs}ms`,
     [varNames.input.switch.transitionTimingFunction]: theme2.input.switch.transitionTimingFunction,
-    [varNames.input.switch.width]: px(theme2.input.switch.width),
+    [varNames.input.switch.width]: rem(theme2.input.switch.width),
     [varNames.input.text.focusRing.offset]: px(theme2.input.text.focusRing.offset),
     [varNames.input.text.focusRing.width]: px(theme2.input.text.focusRing.width)
   };
 }
 function buildRadiusThemeProperties(theme2) {
   return {
-    [varNames.radius[0]]: rem(theme2.radius[0]),
-    [varNames.radius[1]]: rem(theme2.radius[1]),
-    [varNames.radius[2]]: rem(theme2.radius[2]),
-    [varNames.radius[3]]: rem(theme2.radius[3]),
-    [varNames.radius[4]]: rem(theme2.radius[4]),
-    [varNames.radius[5]]: rem(theme2.radius[5]),
-    [varNames.radius[6]]: rem(theme2.radius[6])
+    [varNames.radius[0]]: px(theme2.radius[0]),
+    [varNames.radius[1]]: px(theme2.radius[1]),
+    [varNames.radius[2]]: px(theme2.radius[2]),
+    [varNames.radius[3]]: px(theme2.radius[3]),
+    [varNames.radius[4]]: px(theme2.radius[4]),
+    [varNames.radius[5]]: px(theme2.radius[5]),
+    [varNames.radius[6]]: px(theme2.radius[6])
   };
 }
 function buildShadowThemeProperties(theme2) {
@@ -4542,17 +4399,17 @@ function buildShadowThemeProperties(theme2) {
 }
 function buildSpaceThemeProperties(theme2) {
   return {
-    [varNames.space[0]]: rem(theme2.space[0]),
-    [varNames.space[0.5]]: rem(theme2.space[1] / 2),
-    [varNames.space[1]]: rem(theme2.space[1]),
-    [varNames.space[2]]: rem(theme2.space[2]),
-    [varNames.space[3]]: rem(theme2.space[3]),
-    [varNames.space[4]]: rem(theme2.space[4]),
-    [varNames.space[5]]: rem(theme2.space[5]),
-    [varNames.space[6]]: rem(theme2.space[6]),
-    [varNames.space[7]]: rem(theme2.space[7]),
-    [varNames.space[8]]: rem(theme2.space[8]),
-    [varNames.space[9]]: rem(theme2.space[9])
+    [varNames.space[0]]: px(theme2.space[0]),
+    [varNames.space[0.5]]: px(theme2.space[1] / 2),
+    [varNames.space[1]]: px(theme2.space[1]),
+    [varNames.space[2]]: px(theme2.space[2]),
+    [varNames.space[3]]: px(theme2.space[3]),
+    [varNames.space[4]]: px(theme2.space[4]),
+    [varNames.space[5]]: px(theme2.space[5]),
+    [varNames.space[6]]: px(theme2.space[6]),
+    [varNames.space[7]]: px(theme2.space[7]),
+    [varNames.space[8]]: px(theme2.space[8]),
+    [varNames.space[9]]: px(theme2.space[9])
   };
 }
 function buildColorThemeProperties(theme$1) {
@@ -4767,7 +4624,7 @@ function _inputPresentation() {
   return _comp("input-presentation");
 }
 function _selectable(props) {
-  return _comp("selectable", toneMap$2[props.tone ?? "default"], radius(props));
+  return _comp("selectable", props.tone ?? "default", radius(props));
 }
 function avatar(props) {
   return _comp("avatar", props.color || "gray", _resp("avatar", props.size));
@@ -4822,13 +4679,13 @@ function button(props) {
     mode,
     tone
   } = props;
-  return _comp("button", variantMap[mode ?? "default"], toneMap$1[tone ?? "default"], display(props), flexItem(props), radius(props), width(props));
+  return _comp("button", variantMap[mode ?? "default"], toneMap[tone ?? "default"], display(props), flexItem(props), radius(props), width(props));
 }
 function buttonLoadingBox() {
   return "button-loading-box";
 }
 function card(props) {
-  return _comp(props.scheme, toneMap[props.tone ?? "default"], "card", props.checkered && "card-checkered", shadow(props));
+  return _comp(props.scheme, props.tone ?? "default", "card", props.checkered && "card-checkered", shadow(props));
 }
 function checkbox() {
   return _comp("checkbox");
@@ -4908,7 +4765,7 @@ function tooltipCard() {
   return _comp("tooltip-card");
 }
 function srOnly() {
-  return composeClassNames("sr-only");
+  return _comp(composeClassNames("sr-only"));
 }
 exports.BREAKPOINTS = BREAKPOINTS;
 exports.PREFIX = PREFIX;
@@ -4916,6 +4773,7 @@ exports._arrow = _arrow;
 exports._arrowShape = _arrowShape;
 exports._arrowStroke = _arrowStroke;
 exports._arrowStrokeMask = _arrowStrokeMask;
+exports._getClassNames = _getClassNames;
 exports._input = _input;
 exports._inputElement = _inputElement;
 exports._inputPresentation = _inputPresentation;
@@ -4960,7 +4818,6 @@ exports.flex = flex;
 exports.flexItem = flexItem;
 exports.font = font;
 exports.gap = gap;
-exports.getClassNames = getClassNames;
 exports.grid = grid;
 exports.gridItem = gridItem;
 exports.heading = heading;