@yahoo/uds 2.11.0 → 3.0.0

package/cli/ButtonFile2.mock.tsx

@@ -0,0 +1,11 @@
+import { Button, IconButton } from 'another-package';
+import { Link } from '@yahoo/uds-icons';
+
+export const PageB = () => {
+  return (
+    <Button>Click me</Button>
+    <Button type="button">Click me</Button>
+    <Button type="submit">Click me</Button>
+    <IconButton icon={Link} />
+  );
+}

package/cli/cli.ts

@@ -58,4 +58,4 @@ async function main() {
   await command.run(props);
 }
 
-main();
+await main();

package/cli/codemods/addCommentAboveComponents.ts

@@ -1,7 +1,13 @@
 import { IndentationText, Project } from 'ts-morph';
 
-import { getGlobPattern, getImportsFromPackage, getProject } from './utils';
-import { getJSXElements, hasJSXProperty, matchesJSXTagName } from './utils';
+import {
+  getGlobPattern,
+  getImportsFromPackage,
+  getJSXElements,
+  getProject,
+  hasJSXProperty,
+  matchesJSXTagName,
+} from './utils';
 
 interface LineInfo {
   linePos: number;
@@ -63,7 +69,7 @@ export async function addCommentAboveComponents({
       });
 
       const updateSrc = srcLines.join('\n');
-      console.log(updateSrc);
+      // console.log(updateSrc);
       sourceFile.replaceWithText(updateSrc);
     }
   });

package/cli/codemods/flattenButtonVariant.ts

@@ -0,0 +1,143 @@
+import { Project, SyntaxKind } from 'ts-morph';
+
+import { ButtonPalette, ButtonVariant, ButtonVariantFlat } from '~/tokens';
+
+import { getGlobPattern, getImportsFromPackage, getProject } from './utils';
+
+const buttonFlatValMap: Record<ButtonVariantFlat, ButtonVariantFlat> = {
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+  brand: 'brand',
+  alert: 'alert',
+  positive: 'positive',
+  warning: 'warning',
+  info: 'info',
+  'brand-secondary': 'brand-secondary',
+  'brand-tertiary': 'brand-tertiary',
+  'alert-secondary': 'alert-secondary',
+  'alert-tertiary': 'alert-tertiary',
+  'positive-secondary': 'positive-secondary',
+  'positive-tertiary': 'positive-tertiary',
+  'warning-secondary': 'warning-secondary',
+  'warning-tertiary': 'warning-tertiary',
+  'info-secondary': 'info-secondary',
+  'info-tertiary': 'info-tertiary',
+};
+
+// This is a hack to typecheck the keys of the object, ensure that all of the values are present
+// NOTE: Importing fixtures still causes issues
+const buttonVariantsFlat = Object.values(buttonFlatValMap);
+
+function parseButtonVariantFlat({
+  palette = 'accent',
+  variant = 'primary',
+}: {
+  palette?: ButtonPalette;
+  variant?: ButtonVariant;
+}): ButtonVariantFlat {
+  if (palette === 'accent') {
+    return variant; // primary, secondary, tertiary
+  }
+
+  if (variant === 'primary') {
+    return palette; // brand, alert, positive, warning
+  }
+
+  return `${palette}-${variant}`; // brand-secondary, alert-tertiary, etc.
+}
+
+interface Options {
+  selectedDirs?: string[];
+  project?: Project;
+}
+
+/**
+ * Flatten palette and variant into a single variant prop for UDS Button and IconButton.
+ */
+export async function flattenButtonVariant({ selectedDirs, project = getProject() }: Options) {
+  const glob = getGlobPattern(selectedDirs);
+  const sourceFiles = project.getSourceFiles(glob);
+
+  for (const sourceFile of sourceFiles) {
+    // Get UDS imports from '@yahoo/uds'
+    const importUdsComponents = getImportsFromPackage(sourceFile, '@yahoo/uds');
+
+    // Only process files that import Button or IconButton
+    if (!importUdsComponents.has('Button') && !importUdsComponents.has('IconButton')) {
+      continue;
+    }
+
+    // Process both JsxOpeningElement and JsxSelfClosingElement nodes.
+    const jsxElements = [
+      ...sourceFile.getDescendantsOfKind(SyntaxKind.JsxOpeningElement),
+      ...sourceFile.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement),
+    ].filter((el) => {
+      const tagName = el.getTagNameNode().getText();
+      return (tagName === 'Button' || tagName === 'IconButton') && importUdsComponents.has(tagName);
+    });
+
+    jsxElements.forEach((jsxEl) => {
+      // Get palette and variant attributes
+      const paletteAttr = jsxEl.getAttribute('palette');
+      const variantAttr = jsxEl.getAttribute('variant');
+
+      // Prepare to capture literal values.
+      let paletteLiteral: string | undefined;
+      let variantLiteral: string;
+
+      // Process palette attribute
+      if (paletteAttr) {
+        // @ts-expect-error - getInitializer() is not in the type definition
+        const initializer = paletteAttr.getInitializer();
+        if (initializer && initializer.getKind() === SyntaxKind.StringLiteral) {
+          paletteLiteral = initializer.getText().slice(1, -1);
+        }
+      }
+
+      // Process variant attribute
+      if (variantAttr) {
+        // @ts-expect-error - getInitializer() is not in the type definition
+        const initializer = variantAttr.getInitializer();
+        if (initializer && initializer.getKind() === SyntaxKind.StringLiteral) {
+          variantLiteral = initializer.getText().slice(1, -1);
+        } else {
+          variantLiteral = 'primary';
+        }
+      } else {
+        variantLiteral = 'primary';
+      }
+
+      // Remove the old palette and variant attributes.
+      if (paletteAttr) {
+        paletteAttr.remove();
+      }
+      if (variantAttr) {
+        variantAttr.remove();
+      }
+
+      if (!paletteLiteral && buttonVariantsFlat.includes(variantLiteral as ButtonVariantFlat)) {
+        // If the variant is already a valid flattened value, use it as is.
+        if (variantLiteral !== 'primary') {
+          // If its "primary", just remove all the props
+          jsxEl.addAttribute({
+            name: 'variant',
+            initializer: `"${variantLiteral}"`,
+          });
+        }
+      } else {
+        // Compute the flattened variant using the parsing function.
+        const flattened = parseButtonVariantFlat({
+          palette: paletteLiteral as ButtonPalette,
+          variant: variantLiteral as ButtonVariant,
+        });
+
+        jsxEl.addAttribute({
+          name: 'variant',
+          initializer: `"${flattened}"`,
+        });
+      }
+    });
+  }
+  await project.save();
+}

package/cli/codemods/utils/index.ts

@@ -1,5 +1,5 @@
 /**
- * ------------------- GENERATED | DO NOT MODIFY THIS SECTINO ------------------
+ * ------------------- GENERATED | DO NOT MODIFY THIS SECTION ------------------
  * This file uses eslint-plugin-codegen to automatically watch for changes in
  * the `src/components` directory and updates this barrel file.
  */

package/cli/commands/codemod/flattenButtonVariant.ts

@@ -0,0 +1,16 @@
+import { type Props, spinStart, spinStop } from 'bluebun';
+
+import { flattenButtonVariant } from '../../codemods/flattenButtonVariant';
+
+export default {
+  name: 'flattenButtonVariant',
+  description: `Flatten deprecated button props into single variant prop`,
+
+  run: async (props: Props & { selectedDirs?: string[] }) => {
+    spinStart('Running codemod...');
+
+    await flattenButtonVariant({ selectedDirs: props.selectedDirs });
+
+    spinStop('Codemod complete! Peek the diff and commit your changes!');
+  },
+};

package/cli/commands/expo/_setup.ts

@@ -2,6 +2,7 @@ import fs from 'node:fs';
 import os from 'node:os';
 
 // @ts-expect-error this is a transitive dep of expo, which is required in consumers to even run this setup
+// eslint-disable-next-line import/no-unresolved
 import { EasJsonAccessor, EasJsonUtils, Platform } from '@expo/eas-json';
 import { print, type Props } from 'bluebun';
 import { $, semver, which } from 'bun';

package/cli/commands/sync.ts

@@ -1,5 +1,6 @@
 import { magenta, print, Props } from 'bluebun';
 
+import packageJson from '../../package.json';
 import { trackEvent } from '../utils/analytics';
 import { setupConfigWorker } from '../utils/setupConfigWorker';
 import { SyncOptions } from '../utils/types';
@@ -22,10 +23,12 @@ export default {
       print(`${magenta('Usage:')} ${name} ${commandPath} --id <config-id>\n`);
       return;
     }
+
     try {
       await setupConfigWorker({
         id,
         outFile: outFile ?? './uds.config.ts',
+        version: packageJson.version,
         onUpdate: ({ worker }) => {
           if (!options.watch) {
             worker.terminate();

package/cli/preload.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-unresolved
 import { mock, spyOn } from 'bun:test';
 
 spyOn(global.Bun.Glob.prototype, 'scan').mockImplementation(() => {

package/cli/tailwindcss.d.ts

@@ -0,0 +1,2 @@
+// The typecheck script is not able to find the `flattenColorPalette` function from TailwindCSS.
+declare module 'tailwindcss/lib/util/flattenColorPalette';

package/cli/tsconfig.json

@@ -1,8 +1,12 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "display": "Default",
-  "include": ["."],
-  "exclude": ["node_modules"],
+  "include": [
+    "."
+  ],
+  "exclude": [
+    "node_modules"
+  ],
   "compilerOptions": {
     "composite": false,
     "declaration": true,
@@ -16,16 +20,34 @@
     "preserveWatchOutput": true,
     "skipLibCheck": true,
     "strict": true,
-    "types": ["bun-types"],
+    "types": [
+      "bun-types"
+    ],
     "target": "esnext",
-    "lib": ["ESNext"],
+    "lib": [
+      "ESNext"
+    ],
     "module": "esnext",
     "moduleResolution": "bundler",
     "paths": {
-      "@yahoo/uds/scripts/*": ["../scripts/*"],
-      "@yahoo/uds/*": ["../src/*"],
-      "@yahoo/uds/tailwind/tsMorph": ["../scripts/utils/tsMorph.ts"],
-      "root/*": ["../../*"]
+      "~/*": [
+        "../src/*"
+      ],
+      "@yahoo/uds/scripts/*": [
+        "../scripts/*"
+      ],
+      //      "@yahoo/uds/tokens": [
+      //        "../src/tokens/index.ts"
+      //      ],
+      "@yahoo/uds/tailwind/purger": [
+        "../src/tailwind/purger/index.ts"
+      ],
+      "@yahoo/uds/tailwind/tsMorph": [
+        "../scripts/utils/tsMorph.ts"
+      ],
+      "root/*": [
+        "../../*"
+      ]
     }
   }
 }

package/cli/utils/auth.ts

@@ -5,6 +5,7 @@ import util from 'node:util';
 
 import { ask, print, red } from 'bluebun';
 import Bun from 'bun';
+// eslint-disable-next-line import/no-unresolved
 import { type FirebaseUser } from 'root/database/firebase';
 import { v5 as uuidv5 } from 'uuid';
 

package/cli/utils/configWorker.ts

@@ -8,7 +8,7 @@ import { eq, gte } from 'semver';
 import { ConfigWorkerThreadMessageEvent } from './types';
 
 const PRODUCTION_PREFIX = 'https://config.uds.build';
-const STAGING_PREFIX = 'https://staging.uds.build';
+const STAGING_PREFIX = 'https://staging.config.uds.build';
 const LOCAL_PORT = process.env.PORT || 4001;
 const LOCAL_PREFIX = `http://localhost:${LOCAL_PORT}`;
 
@@ -31,8 +31,8 @@ if (process.env.DATABASE === 'local') {
 }
 
 self.onmessage = async ({ data }: ConfigWorkerThreadMessageEvent) => {
-  const { id } = data.resp;
-  const FETCH_URL = `${CONFIG_ENDPOINT}?id=${id}`;
+  const { id, version } = data.resp;
+  const FETCH_URL = `${CONFIG_ENDPOINT}?id=${id}&version=${version}`;
   if (data.type === 'init') {
     try {
       console.log('Fetching from configurator...');
@@ -50,6 +50,14 @@ self.onmessage = async ({ data }: ConfigWorkerThreadMessageEvent) => {
           `);
         }
 
+        // Needs upgrade
+        if (resp.status === 402) {
+          throw new Error(`
+            ${resp.status} error: ${resp.statusText}\n
+            This usually means you need to upgrade the npm package @yahoo/uds to the latest version.
+          `);
+        }
+
         throw new Error(`Error fetching config id '${id}'. Does it exist in the Configurator?`);
       }
 

package/cli/utils/purgeCSS.ts

@@ -8,14 +8,14 @@ import {
 } from '@yahoo/uds/tailwind/purger';
 import { findReferencesAsJsxElements, getUsedPropsInReference } from '@yahoo/uds/tailwind/tsMorph';
 import {
-  ColorModeConfig,
+  type ColorModeConfig,
   DARK_COLOR_MODE_CLASSNAME,
   LARGE_SCALE_MODE_CLASSNAME,
   LIGHT_COLOR_MODE_CLASSNAME,
   MEDIUM_SCALE_MODE_CLASSNAME,
-  ScaleModeConfig,
+  type ScaleModeConfig,
   SMALL_SCALE_MODE_CLASSNAME,
-  UniversalTokensConfig,
+  type UniversalTokensConfig,
   variants,
   XLARGE_SCALE_MODE_CLASSNAME,
   XSMALL_SCALE_MODE_CLASSNAME,
@@ -182,15 +182,27 @@ export const getTailwindSafelist = (project: Project, componentList: string[]):
   });
 
   for (const [propName, usedValues] of usedProps) {
-    usedValues.forEach((option) => {
-      safeList.push((variants[propName as never][option] as string)?.replaceAll('\\', ''));
-    });
+    const variantGroup = variants[propName as keyof typeof variants];
+    if (variantGroup) {
+      usedValues.forEach((option) => {
+        const variantClass = (variantGroup as Record<string, string>)[option];
+        if (variantClass) {
+          safeList.push(variantClass.replaceAll('\\', ''));
+        }
+      });
+    }
   }
 
   for (const [variant, variantOptions] of scanGetStylesReferences(project)) {
-    variantOptions.forEach((option) => {
-      safeList.push((variants[variant as never][option] as string)?.replaceAll('\\', ''));
-    });
+    const variantGroup = variants[variant as keyof typeof variants];
+    if (variantGroup) {
+      variantOptions.forEach((option) => {
+        const variantClass = (variantGroup as Record<string, string>)[option];
+        if (variantClass) {
+          safeList.push(variantClass.replaceAll('\\', ''));
+        }
+      });
+    }
   }
 
   // Return a deduped list and strip out any empty strings

package/cli/utils/setupConfigWorker.ts

@@ -7,7 +7,7 @@ interface ConfigWorkerOptions extends SyncOptions {
   onUpdate?: (params: { worker: Worker }) => void;
 }
 
-export async function setupConfigWorker({ id, outFile, onUpdate }: ConfigWorkerOptions) {
+export async function setupConfigWorker({ id, outFile, version, onUpdate }: ConfigWorkerOptions) {
   const workerPath = path.resolve(import.meta.dir, './configWorker');
   const workerURL = Bun.pathToFileURL(workerPath).href;
   const outFilePath = `${Bun.env.PWD}/${outFile}`;
@@ -22,7 +22,7 @@ export async function setupConfigWorker({ id, outFile, onUpdate }: ConfigWorkerO
   const worker = new Worker(workerURL);
 
   worker.addEventListener('open', () => {
-    worker.postMessage({ type: 'init', resp: { id } });
+    worker.postMessage({ type: 'init', resp: { id, version } });
   });
 
   worker.addEventListener('message', async ({ data }: ConfigWorkerMainThreadMessageEvent) => {

package/cli/utils/sortKeys.ts

@@ -2,6 +2,11 @@ export function sortKeys<T extends Record<string, unknown>>(
   unsortedObj: T,
 ): Record<string, unknown> {
   const sortedObj: Record<string, unknown> = {}; // Add index signature to allow indexing with a string
+
+  if (!unsortedObj || typeof unsortedObj !== 'object') {
+    return unsortedObj;
+  }
+
   const keys = Object.keys(unsortedObj).sort();
 
   for (var index in keys) {

package/cli/utils/types.ts

@@ -2,7 +2,7 @@ import { type UniversalTokensConfig } from '@yahoo/uds/tokens';
 
 export type ConfigWorkerThreadMessageEvent = Bun.MessageEvent<{
   type: 'init';
-  resp: { id: string };
+  resp: { id: string; version: string };
 }>;
 export type ConfigWorkerMainThreadMessageEvent = Bun.MessageEvent<{
   type: 'update';
@@ -16,4 +16,6 @@ export type SyncOptions = {
   outFile: string;
   /** Enable watch mode? */
   watch?: boolean;
+  /** The version of the CLI */
+  version: string;
 };

package/dist/{Text-UCDorZDD.d.cts → Text-yeQcITg9.d.cts}

@@ -1,4 +1,4 @@
-import { ReactNode, PropsWithChildren, Ref } from 'react';
+import { PropsWithChildren, ReactNode, Ref } from 'react';
 import { SvgIcon, IconSize, IconVariant } from '@yahoo/uds-icons/types';
 
 declare const alwaysPalette: {
@@ -8,22 +8,25 @@ declare const alwaysPalette: {
     current: string;
 };
 
-type CorePaletteAlias = 'brand' | 'accent' | 'alert' | 'positive' | 'warning';
-type BackgroundPaletteAlias = 'primary' | 'secondary';
-type ForegroundPaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'on-color';
-type LinePaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted';
+type SharedPrimaryPaletteAlias = 'brand' | 'alert' | 'positive' | 'warning' | 'info';
+type SharedSecondaryPaletteAlias = `${SharedPrimaryPaletteAlias}-secondary`;
+type SharedPaletteAlias = SharedPrimaryPaletteAlias | SharedSecondaryPaletteAlias;
+type DeprecatedAccentAlias = 'accent';
+type BackgroundPaletteAlias = 'primary' | 'secondary' | DeprecatedAccentAlias | SharedPaletteAlias;
+type ForegroundPaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'on-color' | DeprecatedAccentAlias | SharedPaletteAlias;
+type LinePaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | DeprecatedAccentAlias | SharedPaletteAlias;
 type AlwaysPalette = typeof alwaysPalette;
 type AlwaysPaletteAlias = keyof AlwaysPalette;
-type ForegroundColor = CorePaletteAlias | ForegroundPaletteAlias | AlwaysPaletteAlias;
-type LineColor = CorePaletteAlias | LinePaletteAlias | AlwaysPaletteAlias;
-type BackgroundColor = CorePaletteAlias | BackgroundPaletteAlias | AlwaysPaletteAlias;
-type TextVariant = 'display1' | 'display2' | 'display3' | 'title1' | 'title2' | 'title3' | 'title4' | 'headline1' | 'body1' | 'label1' | 'label2' | 'caption1' | 'caption2' | 'legal1';
+type ForegroundColor = ForegroundPaletteAlias | AlwaysPaletteAlias;
+type LineColor = LinePaletteAlias | AlwaysPaletteAlias;
+type BackgroundColor = BackgroundPaletteAlias | AlwaysPaletteAlias;
+type ShadowVariant = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ShadowVariantInvert = `${Exclude<ShadowVariant, 'none'>}-invert`;
+type TextVariant = 'display1' | 'display2' | 'display3' | 'title1' | 'title2' | 'title3' | 'title4' | 'headline1' | 'body1' | 'label1' | 'label2' | 'label3' | 'label4' | 'caption1' | 'caption2' | 'legal1';
 type FontAlias = 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono';
 type FontWeightDescriptive = 'thin' | 'extralight' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
 type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize';
 type TShirtSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-type TShirtSizeCommon = Extract<TShirtSize, 'sm' | 'md' | 'lg'>;
-type AvatarSize = TShirtSizeCommon;
 type SpacingAlias = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '14' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '52' | '56' | '60' | '64' | '72' | '80' | '96';
 type BorderRadius = TShirtSize;
 type BorderWidth = 'none' | 'thin' | 'medium' | 'thick';
@@ -40,12 +43,6 @@ type FlexBasis = 'min-content';
 type Display = 'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex' | 'table' | 'inline-table' | 'table-caption' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row-group' | 'table-row' | 'flow-root' | 'grid' | 'contents';
 type Overflow = 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';
 type Position = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
-type ImageStyleProps = {
-    /**
-     * Determines how the image should be resized to fit its container.
-     */
-    contentFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-};
 interface BorderStyleProps {
     /** Add a border radius to all corners of the box. */
     borderRadius?: BorderRadius;
@@ -82,6 +79,12 @@ interface BorderStyleProps {
     /** Sets the width of the bottom border of an element. */
     borderBottomWidth?: BorderWidth;
 }
+interface ShadowStyleProps {
+    /** Sets the variant of the shadow. */
+    dropShadow?: ShadowVariant;
+    /** Sets the variant of the inset shadow. */
+    insetShadow?: ShadowVariant | ShadowVariantInvert;
+}
 interface LayoutStyleProps {
     /** Sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. */
     display?: Display;
@@ -178,7 +181,7 @@ interface SizeStyleProps {
     /** Sets the height of an element. */
     height?: 'full' | 'fit' | 'screen';
 }
-interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SpacingStyleProps, SizeStyleProps {
+interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SpacingStyleProps, SizeStyleProps, ShadowStyleProps {
     /**
      * When asChild is set to true, the component's child will be cloned and passed
      * the props and behavior required to make it functional.
@@ -205,66 +208,24 @@ interface UniversalIconProps {
     /** Color of the icon. */
     color?: ForegroundColor;
 }
-interface UniversalImageProps extends Omit<UniversalBoxProps, 'width' | 'height'>, ImageStyleProps {
-    /** The source URL of the image. */
-    src: string;
-    /**  Provides fallback (alternate) text to display when the image specified by the Image element is not loaded. */
-    alt?: string;
-    /** Width of the image in px. */
-    width?: number;
-    /** Height of the image in pixel. */
-    height?: number;
-}
-interface UniversalAvatarProps extends UniversalImageProps {
-    /** The size of the Avatar. */
-    size?: AvatarSize;
-    /** The shape of the Avatar. */
-    shape?: BorderRadius;
-}
-interface UniversalTextInputProps {
-    disabled?: boolean;
-    required?: boolean;
-    backgroundColor?: BackgroundColor;
-    borderColor?: LineColor;
-    borderWidth?: BorderWidth;
-    borderRadius?: BorderRadius;
-    color?: ForegroundColor;
-    fontSize?: TextVariant;
-    placeholderColor?: ForegroundColor;
-    spacingVertical?: SpacingAlias;
-    spacingHorizontal?: SpacingAlias;
-}
-type DividerVariant = 'primary' | 'secondary' | 'tertiary' | 'muted';
-interface UniversalDividerProps {
-    /**
-     * Use a pre-defined variant.
-     * @default 'primary'
-     */
-    variant?: DividerVariant;
-    /**
-     * Set to true to scale the divider vertically.
-     */
-    vertical?: boolean;
-    /** Override thickness of the divider set by the variant. */
-    thickness?: BorderWidth;
-    /** Override color of the divider set by the variant. */
-    color?: LineColor;
-    /** When there are children, where are they placed?
-     * @default 'middle'
-     */
-    contentPosition?: 'start' | 'middle' | 'end';
+type SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;
+interface IconPropsWithSVGProps extends UniversalIconProps, SVGElementProps {
 }
 
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
 interface BoxProps extends UniversalBoxProps, DivProps {
 }
 
-type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
+type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li' | 'sup';
+type ColorWithInherit = Exclude<UniversalTextProps['color'], undefined> | 'inherit';
+type VariantWithInherit = Exclude<UniversalTextProps['variant'], undefined> | 'inherit';
 type TextProps<TagName extends TextElementTagName = TextElementTagName> = {
     /** Ref passed to the inner container. */
     ref?: Ref<HTMLElement>;
     /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
     as?: TagName;
-} & JSX.IntrinsicElements[TagName] & UniversalTextProps;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & JSX.IntrinsicElements[TagName] & Omit<UniversalTextProps, 'variant' | 'color'>;
 
-export type { BoxProps as B, DivProps as D, Overflow as O, SpacingStyleProps as S, TextProps as T, UniversalAvatarProps as U, UniversalStackProps as a, UniversalDividerProps as b, UniversalTextProps as c, UniversalIconProps as d, UniversalTextInputProps as e };
+export type { BoxProps as B, DivProps as D, IconPropsWithSVGProps as I, Overflow as O, TextProps as T, UniversalTextProps as U, UniversalStackProps as a };