@yahoo/uds 2.2.0 → 2.3.0

package/cli/PropsToClass.mock.tsx

@@ -0,0 +1,14 @@
+import { Button, cx, HStack, Text } from '@yahoo/uds';
+const textClassName = cx('text-primary');
+const otherProps = { height: 'fit' };
+
+export const PageA = () => {
+  return (
+    <HStack className="w-full max-h-screen">
+      <Button className="min-w-full">Click me</Button>
+      {/* 🙏 TODO: Add w-10/12 to your className attribute */}
+      <Text className={textClassName}>Some text</Text>
+      <Text {...otherProps}>Some text</Text>
+    </HStack>
+  );
+}

package/cli/cli.ts

@@ -12,10 +12,9 @@ const EXEMPT_FROM_AUTH = ['login'];
 
 async function main() {
   if (process.env.CI !== '1') {
-    updateNotifier({
+    await updateNotifier({
       pkg: packageJson,
       shouldNotifyInNpmScript: true,
-      alwaysRun: true,
     });
   }
 

package/cli/utils/auth.ts

@@ -1,179 +1,47 @@
+import child_process from 'node:child_process';
 import { unlink } from 'node:fs/promises';
 import path from 'node:path';
+import util from 'node:util';
 
-import { print, red } from 'bluebun';
+import { ask, print, red } from 'bluebun';
 import Bun from 'bun';
-import { getApps, initializeApp } from 'firebase/app';
-import {
-  connectAuthEmulator,
-  getAuth,
-  GoogleAuthProvider,
-  signInWithCredential,
-} from 'firebase/auth';
-import { google, oauth2_v2 } from 'googleapis';
-import http from 'http';
-import open from 'open';
 import { type FirebaseUser } from 'root/database/firebase';
 import { v5 as uuidv5 } from 'uuid';
 
-import clientSecrets from './client_secrets.json';
+const exec = util.promisify(child_process.exec);
 
-type User = oauth2_v2.Schema$Userinfo | FirebaseUser;
-type LoginProvider = 'google' | 'firebase' | 'configurator';
-
-const LOGIN_PROVIDER: LoginProvider =
-  (process.env.LOGIN_PROVIDER as LoginProvider) ?? 'configurator';
-
-const REDIRECT_URL = clientSecrets.web.redirect_uris[0];
-const { port: PORT, origin: SERVER_ORIGIN } = new URL(REDIRECT_URL);
-
-const configuratorUrlOrigin =
-  process.env.NODE_ENV === 'development' ? 'http://localhost:4001' : 'https://config.uds.build';
+type User = Partial<FirebaseUser>;
 
 const CACHE_FILEPATH = '.uds/user.json';
 const DEFAULT_CLI_PATH = path.resolve(import.meta.dir, '..');
 const CACHED_USER_FILE = path.resolve(DEFAULT_CLI_PATH, CACHE_FILEPATH);
 
-const isEmulator = process.env.EMULATOR || process.env.NEXT_PUBLIC_EMULATOR;
-
-// TODO: consolidate with the firebase config and setup in database/firebase.ts
-const firebaseConfig = !isEmulator
-  ? clientSecrets.firebaseConfig
-  : {
-      projectId: 'uds-poc',
-      apiKey: 'DUMMY_API_KEY',
-      authDomain: 'uds-poc.firebaseapp.com',
-    };
-
-const firebaseApp = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
-const auth = getAuth(firebaseApp);
-
-if (isEmulator) {
-  connectAuthEmulator(auth, 'http://127.0.0.1:9099');
-}
-
-// Credentials can be found in https://console.cloud.google.com/apis/credentials/oauthclient/700524957090-6uju02gp6i0rlm3p17nt1v6vbrretfka.apps.googleusercontent.com?project=uds-poc.
-const oauth2Client = new google.auth.OAuth2(
-  clientSecrets.web.client_id,
-  clientSecrets.web.client_secret,
-  REDIRECT_URL,
-);
-
-function isYahooEmployee(user?: User) {
-  return user?.email?.endsWith('@yahooinc.com');
-}
-
-function getAuthorizeUrl(loginProvider = LOGIN_PROVIDER) {
-  if (loginProvider === 'configurator') {
-    return `${configuratorUrlOrigin}/login?continue=${REDIRECT_URL}`;
-  }
-
-  return oauth2Client.generateAuthUrl({
-    access_type: 'offline',
-    scope: [
-      'https://www.googleapis.com/auth/userinfo.profile',
-      'https://www.googleapis.com/auth/userinfo.email',
-    ].join(' '),
-    hd: 'yahooinc.com',
-    include_granted_scopes: true,
-  });
-}
-
-function onPostHandler(
-  this: http.Server,
-  req: http.IncomingMessage,
-  res: http.ServerResponse,
-  resolve: (user: User) => void,
-  reject: (reason?: unknown) => void,
-) {
-  const corsHeaders = {
-    'Access-Control-Allow-Origin': configuratorUrlOrigin,
-    'Access-Control-Allow-Methods': 'OPTIONS, POST',
-    'Access-Control-Allow-Headers': '*',
-    'Access-Control-Request-Method': '*',
-  };
-
-  for (const [header, value] of Object.entries(corsHeaders)) {
-    res.setHeader(header, value);
-  }
-
-  if (req.headers.origin !== configuratorUrlOrigin) {
-    res.writeHead(405).end(`Request origin not allowed.`);
-    reject(`Request origin not allowed.`);
-    return;
-  }
-
-  if (req.method === 'OPTIONS') {
-    res.writeHead(204).end();
-    return;
-  }
-
-  if (req.method !== 'POST') {
-    // Set the 405 status and Allow header
-    res.writeHead(405, { Allow: 'POST' }).end('Method Not Allowed');
-    reject('Method Not Allowed');
-    return;
-  }
-
-  let data = '';
-
-  req.on('data', (chunk) => {
-    data += chunk.toString();
-  });
-
-  req.on('error', (err: NodeJS.ErrnoException) => {
-    reject(err);
-  });
+async function getGitEmail(scope: 'local' | 'global' | 'system' = 'global') {
+  let email;
+  try {
+    const { stdout, stderr } = await exec(`git config --${scope} user.email`);
 
-  req.on('end', () => {
-    try {
-      const user: FirebaseUser = JSON.parse(data);
-      res.end('Authentication successful! Please close this window.');
-      resolve(user);
-    } catch (err) {
-      reject(err);
-    } finally {
-      this.close();
+    if (stderr) {
+      throw new Error(`Git config error: ${stderr}`);
     }
-  });
-}
-
-async function onGETHandler(
-  this: http.Server,
-  req: http.IncomingMessage,
-  res: http.ServerResponse,
-  resolve: (user: User) => void,
-  reject: (reason?: unknown) => void,
-) {
-  try {
-    const code = new URL(req.url || '', SERVER_ORIGIN).searchParams.get('code');
-    if (!code) {
-      res.end('There was no code parameter on the url.');
-      this.close();
-      return;
+    email = stdout.trim();
+    if (!isYahooEmployee({ email })) {
+      throw new Error(`Git config email is not a @yahooinc.com email address.`);
     }
+  } catch {
+    email = await ask('Please enter your @yahooinc.com email address:', {
+      validation: (answer) => {
+        const warning = red(`🚨 Email was not a @yahooinc.com address.`);
+        return isYahooEmployee({ email: answer }) || warning;
+      },
+    });
+  }
 
-    res.end('Authentication successful! Please close this window.');
-    this.close();
-
-    const { tokens } = await oauth2Client.getToken(code);
-    oauth2Client.setCredentials(tokens);
-
-    let user: User;
-
-    if (LOGIN_PROVIDER === 'firebase') {
-      // Build Firebase credential using the Google ID token.
-      const credential = GoogleAuthProvider.credential(tokens.id_token);
-      user = (await signInWithCredential(auth, credential)).user;
-    } else {
-      const oauth2 = google.oauth2({ version: 'v2', auth: oauth2Client });
-      user = (await oauth2.userinfo.get()).data;
-    }
+  return email ?? buildCIUser().email; // fallback to CI user if don't have an email for some reason.
+}
 
-    resolve(user);
-  } catch (err) {
-    reject(err);
-  }
+function isYahooEmployee(user?: User) {
+  return Boolean(user?.email?.endsWith('@yahooinc.com'));
 }
 
 /**
@@ -182,41 +50,14 @@ async function onGETHandler(
  * @returns
  */
 async function authenticateUser(): Promise<User> {
-  return new Promise((resolve, reject) => {
-    // TODO: If port (3000) is already in use, this will fail.
-    // Setup https://www.npmjs.com/package/find-free-ports, but that won't
-    // play well with the pre-configured redirect_uris in the Google Cloud Console.
-    const server = http.createServer();
-
-    server.listen(PORT, async () => {
-      const authorizeUrl = getAuthorizeUrl();
-
-      print(`Please visit the following URL if it didn't open automatically:\n${authorizeUrl}`);
-
-      const childProcess = await open(authorizeUrl, { wait: false });
-      childProcess.unref();
-
-      process.on('SIGINT', () => {
-        server.close();
-        reject('Received SIGINT.');
-      });
-    });
-
-    server.on('error', (err: NodeJS.ErrnoException) => {
-      if (err.code && err.code.includes('EADDRINUSE')) {
-        print(
-          red(`🚨 Port ${PORT} already in use. Cannot start local server to handle OAuth flow.`),
-        );
-        server.close();
-      }
-    });
+  // Fetch firebase user data from the configurator.
+  const email = await getGitEmail('local');
+  const resp = await Bun.fetch(`https://config.uds.build/api/cli-analytics?email=${email}`);
+  if (resp.status !== 200) {
+    throw new Error(`Failed to fetch firebase user data from endpoint. Status ${resp.status}`);
+  }
 
-    if (LOGIN_PROVIDER === 'configurator') {
-      server.on('request', (req, res) => onPostHandler.call(server, req, res, resolve, reject));
-    } else {
-      server.on('request', (req, res) => onGETHandler.call(server, req, res, resolve, reject));
-    }
-  });
+  return (await resp.json()) as User;
 }
 
 async function logout(cachePath?: string) {
@@ -242,8 +83,7 @@ async function login() {
       user = await authenticateUser();
       await Bun.write(CACHED_USER_FILE, JSON.stringify(user, null, 2));
     } catch (err) {
-      console.error('Error:', err);
-      throw err;
+      console.error((err as NodeJS.ErrnoException).message);
     }
   }
 
@@ -251,16 +91,16 @@ async function login() {
 }
 
 /**
- * Builds a FirebaseUser object for a Continuous Integration (CI) user.
+ * Builds a firebase user object for a Continuous Integration (CI) user.
  *
  * This function generates a CI user with an email based on the UDS_TEAM_SLUG
  * environment variable. If the UDS_TEAM_SLUG is not defined, it defaults to 'unknown'.
  * The generated user has a predefined first name, display name, and an empty avatar.
  * The analytics context includes the team and a role set to 'other'.
  *
- * @returns {FirebaseUser} The generated CI user object.
+ * @returns {user} The generated CI user object.
  */
-function buildCIUser(): FirebaseUser {
+function buildCIUser(): User {
   const team = process.env.UDS_TEAM_SLUG;
 
   if (!team) {
@@ -325,14 +165,11 @@ async function getAuthenticatedUser(cliPath = DEFAULT_CLI_PATH): Promise<User |
 export {
   authenticateUser,
   buildCIUser,
-  configuratorUrlOrigin,
+  exec,
   getAuthenticatedUser,
-  getAuthorizeUrl,
+  getGitEmail,
   isYahooEmployee,
   login,
-  type LoginProvider,
   logout,
-  onGETHandler,
-  onPostHandler,
   type User,
 };

package/dist/Text-CwmyqrBk.d.cts

@@ -0,0 +1,243 @@
+import { PropsWithChildren, Ref } from 'react';
+import { SvgIcon, IconSize, IconVariant } from '@yahoo/uds-icons/types';
+
+declare const alwaysPalette: {
+    white: string;
+    black: string;
+    transparent: string;
+    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 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 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';
+type Flex = '1' | 'auto' | 'initial' | 'none';
+type FlexGrow = '0' | '1' | '2' | '3';
+type FlexShrink = '0' | '1';
+type FlexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
+type FlexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type FlexAlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+type FlexJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+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;
+    /** Add a border radius to top left corner of the box. */
+    borderTopStartRadius?: BorderRadius;
+    /** Add a border radius to top right corner of the box. */
+    borderTopEndRadius?: BorderRadius;
+    /** Add a border radius to bottom left corner of the box. */
+    borderBottomStartRadius?: BorderRadius;
+    /** Add a border radius to bottom right corner of the box. */
+    borderBottomEndRadius?: BorderRadius;
+    /** Adds a custom border color from the palette */
+    borderColor?: LineColor;
+    /** Start border color */
+    borderStartColor?: LineColor;
+    /** End border color */
+    borderEndColor?: LineColor;
+    /** Top border color */
+    borderTopColor?: LineColor;
+    /** Bottom border color */
+    borderBottomColor?: LineColor;
+    /** Shorthand property to the width of an element's border. */
+    borderWidth?: BorderWidth;
+    /** Sets the width of the top and bottom border of an element. */
+    borderVerticalWidth?: BorderWidth;
+    /** Sets the width of the start (left) and end (right) border of an element. */
+    borderHorizontalWidth?: BorderWidth;
+    /** Sets the width of the start (left) border of an element. */
+    borderStartWidth?: BorderWidth;
+    /** Sets the width of the end (right) border of an element. */
+    borderEndWidth?: BorderWidth;
+    /** Sets the width of the top border of an element. */
+    borderTopWidth?: BorderWidth;
+    /** Sets the width of the bottom border of an element. */
+    borderBottomWidth?: BorderWidth;
+}
+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;
+    /** Shorthand property which sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction. */
+    overflow?: Overflow;
+    /** Sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property. */
+    overflowX?: Overflow;
+    /** sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property. */
+    overflowY?: Overflow;
+    /** Sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
+    position?: Position;
+}
+interface SpacingStyleProps {
+    /** Apply inner spacing on all sides. */
+    spacing?: SpacingAlias;
+    /** Apply inner spacing on the leading and trailing sides. */
+    spacingHorizontal?: SpacingAlias;
+    /** Apply inner spacing on the top and bottom sides. */
+    spacingVertical?: SpacingAlias;
+    /** Apply inner spacing on the bottom side. */
+    spacingBottom?: SpacingAlias;
+    /** Apply inner spacing on the trailing side. */
+    spacingEnd?: SpacingAlias;
+    /** Apply inner spacing on the leading side. */
+    spacingStart?: SpacingAlias;
+    /** Apply inner spacing on the top side. */
+    spacingTop?: SpacingAlias;
+    /** Apply negative outer spacing on all sides. */
+    offset?: SpacingAlias;
+    /** Apply negative outer spacing on the top and bottom sides. */
+    offsetVertical?: SpacingAlias;
+    /** Apply negative outer spacing on the leading and trailing sides. */
+    offsetHorizontal?: SpacingAlias;
+    /** Apply negative outer spacing on the bottom side. */
+    offsetBottom?: SpacingAlias;
+    /** Apply negative outer spacing on the trailing side. */
+    offsetEnd?: SpacingAlias;
+    /** Apply negative outer spacing on the leading side. */
+    offsetStart?: SpacingAlias;
+    /** Apply negative outer spacing on the top side. */
+    offsetTop?: SpacingAlias;
+    /** Control the horizontal gutters between grid and flexbox items. */
+    columnGap?: SpacingAlias;
+    /** Control the vertical gutters between grid and flexbox items. */
+    rowGap?: SpacingAlias;
+}
+interface FlexStyleProps {
+    /** Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. */
+    alignContent?: FlexAlignContent;
+    /** Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. */
+    alignItems?: FlexAlignItems;
+    /** Overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. */
+    alignSelf?: FlexAlignSelf;
+    /** Sets how a flex item will grow or shrink to fit the space available in its flex container. */
+    flex?: Flex;
+    /** Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). */
+    flexDirection?: FlexDirection;
+    /** Sets the flex grow factor, which specifies how much of the flex container's remaining space should be assigned to the flex item's main size. */
+    flexGrow?: FlexGrow;
+    /** Sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink. */
+    flexShrink?: FlexShrink;
+    /** Sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. */
+    flexWrap?: FlexWrap;
+    /** Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. */
+    justifyContent?: FlexJustifyContent;
+    /** Sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis */
+    flexBasis?: FlexBasis;
+}
+interface TextStyleProps {
+    /** Color of a Text or Icon element */
+    color?: ForegroundColor;
+    /** Color of placeholder text */
+    placeholderColor?: ForegroundColor;
+    /** Font family for the text */
+    fontFamily?: TextVariant | FontAlias;
+    /** Font size of the text */
+    fontSize?: TextVariant;
+    /** Font weight of the text */
+    fontWeight?: TextVariant | FontWeightDescriptive;
+    /** Line height of the text */
+    lineHeight?: TextVariant;
+    /** Text alignment of the text */
+    textAlign?: 'center' | 'justify' | 'start' | 'end';
+    /** Sets the text transform for the text  */
+    textTransform?: TextVariant | TextTransform;
+}
+interface BackgroundStyleProps {
+    /** Sets the background color. */
+    backgroundColor?: BackgroundColor;
+}
+interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SpacingStyleProps {
+    /**
+     * When asChild is set to true, the component's child will be cloned and passed
+     * the props and behavior required to make it functional.
+     */
+    asChild?: boolean;
+}
+interface UniversalStackProps extends Omit<UniversalBoxProps, 'flexDirection'> {
+    gap?: SpacingAlias;
+}
+interface UniversalTextProps extends PropsWithChildren, TextStyleProps, UniversalBoxProps {
+    /** Style of text. */
+    variant?: TextVariant;
+    /** Color of the text. */
+    color?: ForegroundColor;
+}
+interface UniversalIconProps {
+    /** Icon to render from the icons package. */
+    name: SvgIcon;
+    /** Size of the icon. */
+    size?: IconSize;
+    /** Variant for icon. Either fill or outline. */
+    variant?: IconVariant;
+    /** 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 DivProps = React.HTMLAttributes<HTMLDivElement>;
+interface BoxProps extends UniversalBoxProps, DivProps {
+}
+
+type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
+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;
+
+export type { BoxProps as B, DivProps as D, Overflow as O, TextProps as T, UniversalAvatarProps as U, UniversalTextProps as a, UniversalIconProps as b, UniversalStackProps as c, UniversalTextInputProps as d };