@astryxdesign/core 0.6.3-canary.f22695a → 0.6.3

package/src/theme/generateThemeRules.ts

@@ -9,17 +9,11 @@
  * Used by both the runtime path (Theme injects <style>) and the build
  * path (`astryx theme build` pre-compiles to CSS files).
  *
- * Every consumer-supplied declaration is checked by declarationBoundary.ts
- * before it is emitted, so a value can never end its declaration or rule
- * early. A refused declaration is dropped and reported in the supplied
- * warnings array (build receipts), or through `console.warn` (runtime).
- *
  * Extracted from defineTheme.ts to reduce cyclomatic complexity and provide
  * a clear single-responsibility module for CSS generation.
  *
- * @input DefinedTheme (resolved theme object from defineTheme), optional warnings array
- * @output CSS rule strings, split by layer (component vs prose), and warning text
- *   for each dropped declaration
+ * @input DefinedTheme (resolved theme object from defineTheme)
+ * @output CSS rule strings, split by layer (component vs prose)
  * @position packages/core/src/theme/generateThemeRules.ts
  */
 
@@ -32,10 +26,6 @@ import {parseStyleKey} from '../utils/parseStyleKey';
 import {getDerivedVars} from './derivedVarRegistry';
 import {dataTokenDefaults} from './domainTokens/dataTokens';
 import {cssVar, classPrefix, dataAttrNamespace} from '../naming';
-import {
-  checkDeclarationName,
-  checkDeclarationValue,
-} from './declarationBoundary';
 
 /**
  * Theme @scope selectors.
@@ -376,117 +366,6 @@ function expandContainerPadding(
   return tokens;
 }
 
-// =============================================================================
-// Declaration assembly: a declaration always stays one declaration
-// =============================================================================
-
-type DiagnosticSink = (message: string) => void;
-
-const warnToConsole: DiagnosticSink = message => {
-  console.warn(`[astryx theme] ${message}`);
-};
-
-/** Build receipts collect warning text; runtime callers warn by default. */
-function diagnosticSink(warnings: string[] | undefined): DiagnosticSink {
-  return warnings ? message => warnings.push(message) : warnToConsole;
-}
-
-/** Shorten an authored value for a one-line message. */
-function previewValue(value: string): string {
-  const oneLine = JSON.stringify(value);
-  return oneLine.length > 80 ? `${oneLine.slice(0, 77)}..."` : oneLine;
-}
-
-function reportDrop(
-  sink: DiagnosticSink,
-  property: string,
-  value: string,
-  location: string,
-  reason: string,
-): void {
-  sink(
-    `dropped "${property}" in ${location}: ${reason} (value: ${previewValue(value)})`,
-  );
-}
-
-/**
- * True when `name: value;` stays exactly one declaration; otherwise reports
- * the drop and returns false. Both checks follow CSS syntax, so valid CSS a
- * browser keeps inside one declaration (a `data:` URI, `Gill\ Sans`, a closed
- * comment, a vendor-prefixed property) is never refused; see
- * declarationBoundary.ts for the rules.
- */
-function acceptDeclaration(
-  property: string,
-  value: string,
-  location: string,
-  sink: DiagnosticSink,
-): boolean {
-  const reason = checkDeclarationName(property) ?? checkDeclarationValue(value);
-  if (reason === null) {
-    return true;
-  }
-  reportDrop(sink, property, value, location, reason);
-  return false;
-}
-
-/**
- * Assemble `prop: value;` lines, dropping (and reporting) any entry whose
- * property or value could not stay a single declaration. Theme definitions
- * are code, but apps do assemble them from stored input (brand colors,
- * white-labeling), so the generated stylesheet must never extend beyond the
- * declarations it means to emit.
- */
-function joinDeclarations(
-  entries: [string, string][],
-  location: string,
-  sink: DiagnosticSink,
-  mapProp: (prop: string) => string = p => p,
-): string {
-  const lines: string[] = [];
-  for (const [rawProp, rawValue] of entries) {
-    // Legacy unenrolled tokens retain non-string values. Scan the same text
-    // interpolation has always emitted, without changing the normalized theme.
-    const value = `${rawValue}`;
-    const prop = mapProp(rawProp);
-    if (acceptDeclaration(prop, value, location, sink)) {
-      lines.push(`    ${prop}: ${value};`);
-    }
-  }
-  return lines.join('\n');
-}
-
-/** The `:scope` token block for portable and theme-local token values. */
-function tokenBlock(
-  source: ThemeRuleSource,
-  location: string,
-  sink: DiagnosticSink,
-): string | null {
-  const declarations = [
-    joinDeclarations(Object.entries(source.tokens), `${location}tokens`, sink),
-    joinDeclarations(
-      Object.entries(source.localTokens ?? {}),
-      `${location}localTokens`,
-      sink,
-    ),
-  ]
-    .filter(block => block.length > 0)
-    .join('\n');
-  const hasEntries =
-    Object.keys(source.tokens).length > 0 ||
-    Object.keys(source.localTokens ?? {}).length > 0;
-  return hasEntries ? `  :scope {\n${declarations}\n  }` : null;
-}
-
-/** `components.button["variant:secondary"]`-style location for a rule. */
-function componentLocation(
-  prefix: string,
-  component: string,
-  key: string,
-): string {
-  return `${prefix}components.${component}[${JSON.stringify(key)}]`;
-}
-
 // =============================================================================
 // Public API
 // =============================================================================
@@ -514,12 +393,9 @@ export interface ThemeRuleSource {
   components?: ComponentStyleMap;
 }
 
-export function generateThemeRules(
-  theme: ThemeRuleSource,
-  warnings?: string[],
-): string[] {
+export function generateThemeRules(theme: ThemeRuleSource): string[] {
   const parts: string[] = [];
-  const sink = diagnosticSink(warnings);
+  const tokens = theme.tokens;
 
   // Bare prose rules reference semantic variables instead of baking the root
   // value. That lets adaptation token writes take effect through CSS alone
@@ -527,9 +403,15 @@ export function generateThemeRules(
   const val = (key: string): string => `var(${key})`;
 
   // 1. Token block — CSS custom properties on :scope
-  const tokenRules = tokenBlock(theme, '', sink);
-  if (tokenRules !== null) {
-    parts.push(tokenRules);
+  const tokenEntries = [
+    ...Object.entries(tokens),
+    ...Object.entries(theme.localTokens ?? {}),
+  ];
+  if (tokenEntries.length > 0) {
+    const declarations = tokenEntries
+      .map(([prop, value]) => `    ${prop}: ${value};`)
+      .join('\n');
+    parts.push(`  :scope {\n${declarations}\n  }`);
   }
 
   // 1b. Base font — apply the theme's declared body font to the scope root.
@@ -538,14 +420,14 @@ export function generateThemeRules(
   // sets a page font. `font-family` inherits, so one rule on :scope covers
   // the tree. Only emitted when the theme declares a body font, so a bare
   // theme still contributes no scope rules of its own.
-  if (theme.tokens['--font-family-body']) {
+  if (tokens['--font-family-body']) {
     parts.push(`  :scope {\n    font-family: var(--font-family-body);\n  }`);
   }
 
   // 2. Component overrides: stable .astryx-* target classes combined with
   // reflected data-* selectors for visual props and runtime states.
   if (theme.components) {
-    generateComponentRules(theme.components, parts, {sink});
+    generateComponentRules(theme.components, parts);
   }
 
   // 3. Prose HTML element rules (h1-h6, p, small, code, hr)
@@ -641,13 +523,6 @@ function generateHeadingWeightOverrides(
   }
 }
 
-/**
- * The `fontWeight` a heading rule authors for `styleKey`, or undefined when
- * it has none. A value that cannot stay one declaration is treated as not
- * authored, so the override falls back to the inherited or token weight
- * instead of interpolating it; the drop itself is reported where that same
- * rule's declarations are emitted, so it is not reported twice here.
- */
 function getAuthoredHeadingWeight(
   headingRuleMap: Record<string, unknown>,
   styleKey: string,
@@ -657,20 +532,13 @@ function getAuthoredHeadingWeight(
     return undefined;
   }
   const fontWeight = (rule as Record<string, unknown>).fontWeight;
-  return typeof fontWeight === 'string' &&
-    checkDeclarationValue(fontWeight) === null
-    ? fontWeight
-    : undefined;
+  return typeof fontWeight === 'string' ? fontWeight : undefined;
 }
 
 /** Options shared by root, adaptation, and media-surface component lowering. */
 interface ComponentRuleOptions {
   resetInheritedPaddingSpecificity?: boolean;
   surface?: MediaSurface;
-  /** Receives dropped declarations; defaults to `console.warn`. */
-  sink?: DiagnosticSink;
-  /** Location prefix for diagnostics, e.g. `onDark.` or `adaptations[0].`. */
-  location?: string;
 }
 
 /**
@@ -687,8 +555,6 @@ function generateComponentRules(
   {
     resetInheritedPaddingSpecificity = false,
     surface,
-    sink = warnToConsole,
-    location: locationPrefix = '',
   }: ComponentRuleOptions = {},
 ): void {
   for (const [component, rules] of Object.entries(components)) {
@@ -700,7 +566,6 @@ function generateComponentRules(
 
       const suffix = parseStyleKey(key);
       const baseSelector = componentSelector(component, suffix, surface);
-      const location = componentLocation(locationPrefix, component, key);
 
       // Separate regular properties from pseudo-class overrides
       const props: [string, string][] = [];
@@ -709,14 +574,7 @@ function generateComponentRules(
       for (const [prop, value] of entries) {
         if (prop.startsWith(':') && typeof value === 'object') {
           pseudos.push([prop, value]);
-        } else if (
-          acceptDeclaration(
-            toKebabCase(prop),
-            `${value as string}`,
-            location,
-            sink,
-          )
-        ) {
+        } else {
           props.push([prop, value as string]);
         }
       }
@@ -796,12 +654,9 @@ function generateComponentRules(
 
       // Emit base rule
       if (finalProps.length > 0) {
-        const declarations = joinDeclarations(
-          finalProps,
-          location,
-          sink,
-          toKebabCase,
-        );
+        const declarations = finalProps
+          .map(([prop, value]) => `    ${toKebabCase(prop)}: ${value};`)
+          .join('\n');
         parts.push(`  ${baseSelector} {\n${declarations}\n  }`);
       }
 
@@ -809,12 +664,9 @@ function generateComponentRules(
       for (const [pseudo, pseudoStyles] of pseudos) {
         const pseudoEntries = Object.entries(pseudoStyles);
         if (pseudoEntries.length > 0) {
-          const declarations = joinDeclarations(
-            pseudoEntries,
-            `${location}[${JSON.stringify(pseudo)}]`,
-            sink,
-            toKebabCase,
-          );
+          const declarations = pseudoEntries
+            .map(([prop, value]) => `    ${toKebabCase(prop)}: ${value};`)
+            .join('\n');
           parts.push(
             `  ${appendPseudoToSelectorList(baseSelector, pseudo)} {\n${declarations}\n  }`,
           );
@@ -980,11 +832,8 @@ function generateSizeOverrides(
  * Component rules (tokens, stable .astryx-* targets plus data-* selectors) are
  * that need to beat StyleX — they stay in astryx-theme (above StyleX layers).
  */
-export function generateThemeRulesSplit(
-  theme: DefinedTheme,
-  warnings?: string[],
-): ThemeRulesSplit {
-  const allRules = generateThemeRules(theme, warnings);
+export function generateThemeRulesSplit(theme: DefinedTheme): ThemeRulesSplit {
+  const allRules = generateThemeRules(theme);
 
   const prose: string[] = [];
   const component: string[] = [];
@@ -1008,29 +857,22 @@ export function generateThemeRulesSplit(
  * to media contexts — only tokens change. Themes can further customize
  * via onDark.components / onLight.components.
  */
-export function generateOnMediaCSS(
-  theme: DefinedTheme,
-  warnings?: string[],
-): string {
+export function generateOnMediaCSS(theme: DefinedTheme): string {
   const parts: string[] = [];
   const scopeSelector = themeScopeStart(theme.name);
-  const sink = diagnosticSink(warnings);
 
   for (const surface of ['dark', 'light'] as const) {
     const onMedia = surface === 'dark' ? theme.__onDark : theme.__onLight;
     if (!onMedia) {
       continue;
     }
-    const location = surface === 'dark' ? 'onDark.' : 'onLight.';
 
     // Token overrides
     const tokenEntries = Object.entries(onMedia.tokens);
     if (tokenEntries.length > 0) {
-      const declarations = joinDeclarations(
-        tokenEntries,
-        `${location}tokens`,
-        sink,
-      );
+      const declarations = tokenEntries
+        .map(([prop, value]) => `    ${prop}: ${value};`)
+        .join('\n');
       parts.push(`  ${mediaSelector(surface)} {\n${declarations}\n  }`);
     }
 
@@ -1040,8 +882,6 @@ export function generateOnMediaCSS(
       generateComponentRules(onMedia.components, parts, {
         resetInheritedPaddingSpecificity: true,
         surface,
-        sink,
-        location,
       });
       generateColorOverrides(onMedia.components, parts, surface);
       generateSizeOverrides(onMedia.components, parts, surface);
@@ -1065,22 +905,22 @@ export function generateOnMediaCSS(
 }
 
 /** Generate only the declarations one adaptation rule writes. */
-function generateAdaptationRuleRules(
-  rule: ThemeRuleSource,
-  location: string,
-  sink: DiagnosticSink,
-): string[] {
+function generateAdaptationRuleRules(rule: ThemeRuleSource): string[] {
   const parts: string[] = [];
-  const tokens = tokenBlock(rule, location, sink);
-  if (tokens !== null) {
-    parts.push(tokens);
+  const tokenEntries = [
+    ...Object.entries(rule.tokens),
+    ...Object.entries(rule.localTokens ?? {}),
+  ];
+  if (tokenEntries.length > 0) {
+    const declarations = tokenEntries
+      .map(([prop, value]) => `    ${prop}: ${value};`)
+      .join('\n');
+    parts.push(`  :scope {\n${declarations}\n  }`);
   }
 
   if (rule.components) {
     generateComponentRules(rule.components, parts, {
       resetInheritedPaddingSpecificity: true,
-      sink,
-      location,
     });
     generateColorOverrides(rule.components, parts);
     generateSizeOverrides(rule.components, parts);
@@ -1118,11 +958,7 @@ function generateAdaptationMediaBlock(
  * rule. Bare prose follows semantic variables, so token writes need no duplicate
  * prose selectors here.
  */
-export function generateAdaptationCSS(
-  theme: DefinedTheme,
-  warnings?: string[],
-): ThemeCSSOutput {
-  const sink = diagnosticSink(warnings);
+export function generateAdaptationCSS(theme: DefinedTheme): ThemeCSSOutput {
   // Built themes can reach this compiler without passing through defineTheme.
   // Validate retained metadata even when it has no rules (and therefore emits
   // no CSS): width points remain observable through AppShell and inheritance.
@@ -1156,12 +992,8 @@ export function generateAdaptationCSS(
   // active whenever the later condition matches, even if the earlier condition
   // does not. Pairwise merging cannot repair that: multiple mutually exclusive
   // earlier rules can each overlap one broad later rule.
-  for (const [index, rule] of rules.entries()) {
-    const parts = generateAdaptationRuleRules(
-      rule,
-      `adaptations[${index}].`,
-      sink,
-    );
+  for (const rule of rules) {
+    const parts = generateAdaptationRuleRules(rule);
     if (parts.length === 0) {
       continue;
     }
@@ -1207,9 +1039,12 @@ export function generateAdaptationCSS(
   return {prose: '', component: blocks.join('\n\n')};
 }
 
-/** Indent the rule start without rewriting newlines inside authored values. */
+/** Indent a generated rule one level further, for nesting inside `@media`. */
 function indentRule(rule: string): string {
-  return `  ${rule}`;
+  return rule
+    .split('\n')
+    .map(line => (line.length > 0 ? `  ${line}` : line))
+    .join('\n');
 }
 
 /**
@@ -1250,11 +1085,8 @@ export function generateDataTokenDefaultsCSS(): string {
  * The theme-independent `--color-data-*` defaults are not part of this output:
  * see `generateDataTokenDefaultsCSS`.
  */
-export function generateThemeCSS(
-  theme: DefinedTheme,
-  warnings?: string[],
-): ThemeCSSOutput {
-  const {component, prose} = generateThemeRulesSplit(theme, warnings);
+export function generateThemeCSS(theme: DefinedTheme): ThemeCSSOutput {
+  const {component, prose} = generateThemeRulesSplit(theme);
   const scopeSelector = themeScopeStart(theme.name);
   const scopeTo = THEME_SCOPE_TO;
 
@@ -1274,14 +1106,14 @@ export function generateThemeCSS(
 
   // Adaptations follow the root theme in authored order. Media-surface rules
   // follow adaptations so onDark/onLight keep their specified precedence.
-  const adaptationCss = generateAdaptationCSS(theme, warnings);
+  const adaptationCss = generateAdaptationCSS(theme);
   if (adaptationCss.component) {
     componentCss = componentCss
       ? `${componentCss}\n\n${adaptationCss.component}`
       : adaptationCss.component;
   }
 
-  const onMediaCss = generateOnMediaCSS(theme, warnings);
+  const onMediaCss = generateOnMediaCSS(theme);
   if (onMediaCss) {
     componentCss = componentCss
       ? `${componentCss}\n\n${onMediaCss}`

package/src/theme/tokenValueCompat.test.ts

@@ -22,7 +22,7 @@
  */
 
 import {describe, expect, it} from 'vitest';
-import {defineTheme, generateThemeCSS} from './defineTheme';
+import {defineTheme} from './defineTheme';
 import {resolveTokenValue} from './resolveThemeValues';
 
 /** Exactly what the pre-extraction implementation did with each shape. */
@@ -43,9 +43,6 @@ describe('root token values keep their historical acceptance', () => {
     });
 
     expect(theme.tokens['--color-background-body']).toBe(expected);
-    expect(generateThemeCSS(theme).component).toContain(
-      `--color-background-body: ${String(expected)};`,
-    );
   });
 
   it('still resolves the documented shapes', () => {

package/dist/Icon/IconDefaultSizeContext.d.ts

@@ -1,4 +0,0 @@
-import type { IconSize } from './IconSize.stylex';
-export declare const IconDefaultSizeProvider: import("react").Provider<"xsm" | "sm" | "lg" | "md" | null>;
-export declare function useIconSize(size: IconSize | undefined): IconSize;
-//# sourceMappingURL=IconDefaultSizeContext.d.ts.map

package/dist/Icon/IconDefaultSizeContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconDefaultSizeContext.d.ts","sourceRoot":"","sources":["../../src/Icon/IconDefaultSizeContext.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAKhD,eAAO,MAAM,uBAAuB,6DAAkC,CAAC;AAEvE,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAGhE"}

package/dist/Icon/IconDefaultSizeContext.js

@@ -1,18 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file IconDefaultSizeContext.ts
- * @input Uses React context and an optional Icon size prop
- * @output Supplies a component-owned default size to descendant Icon instances
- * @position Internal Icon sizing context; consumed by Icon and icon-slot owners
- */
-import { createContext, use } from 'react';
-const IconDefaultSizeContext = /*#__PURE__*/createContext(null);
-IconDefaultSizeContext.displayName = 'IconDefaultSizeContext';
-export const IconDefaultSizeProvider = IconDefaultSizeContext.Provider;
-export function useIconSize(size) {
-  const contextualSize = use(IconDefaultSizeContext);
-  return size ?? contextualSize ?? 'md';
-}

package/dist/Icon/IconSize.stylex.d.ts

@@ -1,65 +0,0 @@
-/**
- * @file IconSize.stylex.ts
- * @input Defines the Icon size scale
- * @output Exports shared Icon size types and StyleX styles
- * @position Internal Icon sizing source; consumed by Icon and icon-slot owners
- */
-import * as stylex from '@stylexjs/stylex';
-/**
- * Icon sizes are expressed in `rem` so they scale with the root font-size.
- * Values are the px-equivalents at a 16px root: 12, 16, 20, and 24px.
- */
-declare const iconSizeValues: {
-    readonly xsm: "0.75rem";
-    readonly sm: "1rem";
-    readonly md: "1.25rem";
-    readonly lg: "1.5rem";
-};
-export type IconSize = keyof typeof iconSizeValues;
-/** Size styles for direct SVG icon components. */
-export declare const iconSizeStyles: Readonly<{
-    readonly xsm: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "0.75rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "0.75rem">;
-    }>;
-    readonly sm: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "1rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1rem">;
-    }>;
-    readonly md: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "1.25rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1.25rem">;
-    }>;
-    readonly lg: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "1.5rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1.5rem">;
-    }>;
-}>;
-/**
- * Size styles for icon boxes and string-based registry icons. `fontSize`
- * keeps 1em-based icons in step with the box.
- */
-export declare const iconBoxSizeStyles: Readonly<{
-    readonly xsm: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "0.75rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "0.75rem">;
-        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "0.75rem">;
-    }>;
-    readonly sm: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "1rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1rem">;
-        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1rem">;
-    }>;
-    readonly md: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "1.25rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1.25rem">;
-        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1.25rem">;
-    }>;
-    readonly lg: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "1.5rem">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1.5rem">;
-        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1.5rem">;
-    }>;
-}>;
-export {};
-//# sourceMappingURL=IconSize.stylex.d.ts.map

package/dist/Icon/IconSize.stylex.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconSize.stylex.d.ts","sourceRoot":"","sources":["../../src/Icon/IconSize.stylex.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;GAGG;AACH,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,cAAc,CAAC;AAEnD,kDAAkD;AAClD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;EAiBzB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;EAqB5B,CAAC"}

package/dist/Icon/IconSize.stylex.js

@@ -1,75 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file IconSize.stylex.ts
- * @input Defines the Icon size scale
- * @output Exports shared Icon size types and StyleX styles
- * @position Internal Icon sizing source; consumed by Icon and icon-slot owners
- */
-
-import * as stylex from '@stylexjs/stylex';
-
-/**
- * Icon sizes are expressed in `rem` so they scale with the root font-size.
- * Values are the px-equivalents at a 16px root: 12, 16, 20, and 24px.
- */
-const iconSizeValues = {
-  xsm: '0.75rem',
-  sm: '1rem',
-  md: '1.25rem',
-  lg: '1.5rem'
-};
-/** Size styles for direct SVG icon components. */
-export const iconSizeStyles = {
-  xsm: {
-    kzqmXN: "x1jw3ynk",
-    kZKoxP: "xvle69y",
-    $$css: true
-  },
-  sm: {
-    kzqmXN: "xcdlrvm",
-    kZKoxP: "x1l36t39",
-    $$css: true
-  },
-  md: {
-    kzqmXN: "xwqq7k2",
-    kZKoxP: "xmll18r",
-    $$css: true
-  },
-  lg: {
-    kzqmXN: "xp8d6y2",
-    kZKoxP: "xam5rvr",
-    $$css: true
-  }
-};
-
-/**
- * Size styles for icon boxes and string-based registry icons. `fontSize`
- * keeps 1em-based icons in step with the box.
- */
-export const iconBoxSizeStyles = {
-  xsm: {
-    kzqmXN: "x1jw3ynk",
-    kZKoxP: "xvle69y",
-    kGuDYH: "xboafo0",
-    $$css: true
-  },
-  sm: {
-    kzqmXN: "xcdlrvm",
-    kZKoxP: "x1l36t39",
-    kGuDYH: "x1jchvi3",
-    $$css: true
-  },
-  md: {
-    kzqmXN: "xwqq7k2",
-    kZKoxP: "xmll18r",
-    kGuDYH: "x1603h9y",
-    $$css: true
-  },
-  lg: {
-    kzqmXN: "xp8d6y2",
-    kZKoxP: "xam5rvr",
-    kGuDYH: "xngnso2",
-    $$css: true
-  }
-};