@yahoo/uds 0.5.11 → 1.0.0

package/cli/README.md

@@ -1,12 +1,14 @@
-import { Box } from '@yahoo/uds';
+import { DocTabs } from '~/components/DocTabs';
+import { Box, VStack } from '@yahoo/uds';
 import { RequiredChip } from '~/components/RequiredChip';
 import { DocImage } from '~/components/DocImage';
+import { PACKAGE_MANAGERS, CommandSnippet } from '~/components/CommandSnippet';
 
 # Universal CLI
 
-> **Early preview notice**: The CLI tool currently requires Bun. This requirement may change in the future but you will need to install and use Bun locally to use the `uds` command.
+> **Update**: The CLI tool no longer requires Bun. You can use any node package manager to run the CLI (e.g. `npx uds sync`).
 
-The Universal CLI is available as command, `uds`. The tool was created with [Bluebun](https://github.com/jamonholmgren/bluebun/) (inspired by [Gluegun](https://github.com/infinitered/gluegun)), but is specifically designed to be used with [Bun](https://bun.sh). Bluebun relies on Bun APIs and is designed to be extremely fast, with no-dependencies.
+The Universal CLI is available as command, `uds`. The tool was created with [Bluebun](https://github.com/jamonholmgren/bluebun/) (inspired by [Gluegun](https://github.com/infinitered/gluegun)). The UDS CLI is a standalone binary that doesn't require having Bun installed locally in order to use it.
 
 <Box justifyContent="center">
   <DocImage light={{ src: '/images/cli-screenshot.png', width: 500, height: 356 }} />
@@ -14,17 +16,20 @@ The Universal CLI is available as command, `uds`. The tool was created with [Blu
 
 ## Requirements
 
-1. To use the CLI, first [install](/docs/getting-started/quick-start#installation) the `@yahoo/uds` package as a dependency in your package.json. This makes the tool available in your repo.
-
-- Install Bun if you don't already have it:
-
-  ```bash
-  curl -fsSL https://bun.sh/install | bash
-  ```
+1. To use the CLI, first [install](/docs/getting-started/quick-start#installation) the `@yahoo/uds` package as a dependency in your package.json, which has the UDS CLI as a binary.
 
 ## Commands
 
-> **Note**: If you are _not_ running the CLI from a package.json script you will need to add `bun` before the binary in order to run it directly. i.e. `bun uds purge`
+> **Note**: If you are _not_ running the CLI from a package.json script you will need to call your package manager execute command before the binary in order to run it directly. i.e. `npx uds purge`
+
+<VStack spacingBottom="2">
+  <DocTabs
+    items={PACKAGE_MANAGERS.map((packageManager) => ({
+      label: packageManager,
+      content: <CommandSnippet name={packageManager} command="bunx uds purge" />,
+    }))}
+  />
+</VStack>
 
 The following command are available after installing `@yahoo/uds`:
 
@@ -44,6 +49,7 @@ The `uds sync` command fetches the latest design config from the [Configurator](
 ```shell
 uds sync --id [id] --outFile [path]
 uds sync --id [id]
+uds sync --id [id] --outFile=uds.config.js # pass a file with a JS extension if you are using Javascript
 ```
 
 #### Environment variables

package/cli/cli.ts

@@ -1,3 +1,4 @@
+/* eslint-disable n/no-unsupported-features/node-builtins */
 // Start bluebun to run the correct CLI command
 import { parseArgs } from 'node:util';
 

package/cli/consts.ts

@@ -1,9 +1,3 @@
 // Supported target platforms by Bun
 // https://bun.sh/docs/bundler/executables#cross-compile-to-other-platforms
-export const SUPPORTED_BUN_PLATFORMS = [
-  'linux-x64-baseline',
-  'linux-arm64',
-  'darwin-x64',
-  'darwin-arm64-baseline',
-  'windows-x64-baseline',
-];
+export const SUPPORTED_BUN_PLATFORMS = ['linux-x64-baseline', 'darwin-arm64-baseline'];

package/cli/preload.ts

@@ -31,7 +31,7 @@ mock.module('@yahoo/uds/tailwind/purger', () => ({
       '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',
     fontSize: 'font-size-display1 font-size-title1 ',
     fontFamily:
-      'font-icons font-sans font-sans-beta font-sans-condensed font-serif-text font-serif-display font-display1 font-title1 font-title2 font-title3 font-title4 font-headline1 font-body1 font-label1 font-label2 font-caption1 font-caption2 font-legal1',
+      'font-icons font-sans font-sans-alt font-serif font-serif-alt font-mono font-display1 font-title1 font-title2 font-title3 font-title4 font-headline1 font-body1 font-label1 font-label2 font-caption1 font-caption2 font-legal1',
   },
   componentToTwClasses: {
     Box: 'flex',

package/cli/uds-cli

@@ -7,13 +7,7 @@ import path from "path";
 import {fileURLToPath} from "url";
 
 // cli/consts.ts
-var SUPPORTED_BUN_PLATFORMS = [
-  "linux-x64-baseline",
-  "linux-arm64",
-  "darwin-x64",
-  "darwin-arm64-baseline",
-  "windows-x64-baseline"
-];
+var SUPPORTED_BUN_PLATFORMS = ["linux-x64-baseline", "darwin-arm64-baseline"];
 
 // cli/exec.ts
 var detectPlatform = () => {

package/cli/utils/configWorker.ts

@@ -1,52 +1,79 @@
+/* eslint-disable n/no-unsupported-features/node-builtins -- We're using Bun's fetch here because we're in a worker. */
 // prevents TS errors
 declare var self: Worker;
 
 import { UniversalTokensConfig } from '@yahoo/uds/tokens';
+import { gte } from 'semver';
 
 import { ConfigWorkerThreadMessage } from './types';
 
-const CLOUD_FUNCTION = 'https://syncconfig-j57v6zmjrq-uc.a.run.app';
+const PRODUCTION_PREFIX = 'https://config.uds.build';
+const STAGING_PREFIX = 'https://staging.uds.build';
+const LOCAL_PORT = process.env.PORT || 4001;
+const LOCAL_PREFIX = `http://localhost:${LOCAL_PORT}`;
+
+let CONFIG_ENDPOINT = `${PRODUCTION_PREFIX}/api/config`;
+
+// Setup auth bypass for Vercel preview deployments (staging)
+const PROTECTION_BYPASS = process.env.VERCEL_PROTECTION_BYPASS ?? '';
+const FETCH_REQUEST_INIT: FetchRequestInit = {
+  headers: {
+    'x-vercel-protection-bypass': PROTECTION_BYPASS,
+  },
+};
+
+if (process.env.DATABASE === 'staging') {
+  CONFIG_ENDPOINT = `${STAGING_PREFIX}/api/config`;
+}
+
+if (process.env.DATABASE === 'local') {
+  CONFIG_ENDPOINT = `${LOCAL_PREFIX}/api/config`;
+}
 
 self.onmessage = async ({ data }: ConfigWorkerThreadMessage) => {
   const { id } = data.resp;
-
+  const FETCH_URL = `${CONFIG_ENDPOINT}?id=${id}`;
   if (data.type === 'init') {
     try {
-      // The firebase packaage available if we're in the UDS monorepo. Listen for updates.
-      const firebase = await import('database/firebase');
-
-      // Bail if the branch doesn't exist in configurator.
-      const branchExists = await firebase.branchExists(id);
-      if (!branchExists) {
-        throw new Error(`Config id '${id}' does not exist in the Configurator.`);
-      }
+      console.log('Fetching from configurator...');
 
-      console.log('Fetching using local database package...');
+      const resp = await fetch(FETCH_URL, FETCH_REQUEST_INIT);
 
-      firebase.onBranchSnapshot(id, ({ config, status }) => {
-        postMessage({ type: 'update', resp: { config, status } });
-      });
-    } catch (err) {
-      try {
-        console.log('Fetching from configurator...');
-
-        // We're using Bun's fetch here because we're in a worker.
-        // eslint-disable-next-line n/no-unsupported-features/node-builtins
-        const resp = await fetch(`${CLOUD_FUNCTION}?id=${id}`);
-        if (!resp.ok) {
-          throw new Error(`Error fetching config id '${id}'. Does it exist in the Configurator?`);
+      if (!resp.ok) {
+        // Unauthorized
+        if (resp.status === 401) {
+          throw new Error(`
+            ${resp.status} error: ${resp.statusText}\n
+            You're not authorized to fetch from ${FETCH_URL}\n
+            Make sure you have a valid VERCEL_PROTECTION_BYPASS token in your root .env.local, which is
+            available at https://vercel.com/yahoo-design/configurator/settings/deployment-protection
+          `);
         }
 
-        const { config } = ((await resp.json()) as { config: UniversalTokensConfig }) ?? {};
-        if (!config) {
-          throw new Error('Config JSON could not be parsed.');
-        }
+        throw new Error(`Error fetching config id '${id}'. Does it exist in the Configurator?`);
+      }
 
-        postMessage({ type: 'update', resp: { config, status: 'error' } });
-      } catch (err) {
-        console.error(`\n${(err as Error).message}\n`);
-        throw err;
+      const { config, udsVersion } =
+        ((await resp.json()) as { config: UniversalTokensConfig; udsVersion: string }) ?? {};
+      if (!config) {
+        throw new Error('Config JSON could not be parsed.');
       }
+
+      // check if the locally installed version of UDS is compatible with the config version
+      // it needs to be equal or greater than the config version
+      const installedUdsVersion = (await import('@yahoo/uds/package.json')).default.version;
+      if (!gte(installedUdsVersion, udsVersion)) {
+        throw new Error(`
+          Installed version of UDS is not compatible with the config version. \n
+          Required: ${udsVersion}. Installed: ${installedUdsVersion} \n
+          Please update your @yahoo/uds version to ${udsVersion} or higher.
+        `);
+      }
+
+      postMessage({ type: 'update', resp: { config, status: 'error' } });
+    } catch (err) {
+      console.error(`\n${(err as Error).message}\n`);
+      throw err;
     }
   }
 };

package/cli/utils/purgeCSS.ts

@@ -6,10 +6,7 @@ import {
   componentToVariants,
   variantsList,
 } from '@yahoo/uds/tailwind/purger';
-import {
-  findReferencesAsJsxElements,
-  getUsedPropsInReference,
-} from '@yahoo/uds/tailwind/tsMorph';
+import { findReferencesAsJsxElements, getUsedPropsInReference } from '@yahoo/uds/tailwind/tsMorph';
 import {
   ColorModeConfig,
   DARK_COLOR_MODE_CLASSNAME,

package/cli/utils/setupConfigWorker.ts

@@ -11,6 +11,13 @@ export async function setupConfigWorker({ id, outFile, onUpdate }: ConfigWorkerO
   const workerURL = Bun.pathToFileURL(workerPath).href;
   const outFilePath = `${Bun.env.PWD}/${outFile}`;
 
+  const outFileExtension = outFile.split('.').pop()?.toLowerCase();
+
+  if (outFileExtension !== 'ts' && outFileExtension !== 'js') {
+    console.error('❌ Output file must be a TypeScript or JavaScript file.');
+    process.exit(1);
+  }
+
   const worker = new Worker(workerURL);
 
   worker.addEventListener('open', () => {
@@ -23,25 +30,19 @@ export async function setupConfigWorker({ id, outFile, onUpdate }: ConfigWorkerO
       // this can give us a false diff when writing to existing file
       const sortedConfig = sortKeys(data.resp.config);
 
-      let configContent = `
+      const configContentTs = `
 import { type UniversalTokensConfig } from '@yahoo/uds';
 
 export const config: UniversalTokensConfig = ${JSON.stringify(sortedConfig, null, 2)};
 `.trimStart();
 
-      console.log(`✅ Synced UDS config ${id} to ${outFilePath}`);
-
-      // TODO: Remove this once the migration work is complete
-      configContent = configContent
-        .replace(/"l"/g, '"lg"')
-        .replace(/"m"/g, '"md"')
-        .replace(/"s"/g, '"sm"');
+      const configContentJs = `
+export const config = ${JSON.stringify(sortedConfig, null, 2)};
+`.trimStart();
 
-      console.log(
-        `🚨 Migrated UDS config ${id} to new AvatarSizes types - this is temporary and will be removed in the future`,
-      );
+      console.log(`✅ Synced UDS config ${id} to ${outFilePath}`);
 
-      await Bun.write(outFilePath, configContent);
+      await Bun.write(outFilePath, outFileExtension === 'js' ? configContentJs : configContentTs);
       onUpdate?.({ worker });
     }
   });

package/dist/{Image.native-BxsXWBqp.d.ts → Image.native-BTcdQraV.d.ts}

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-CLPge83Y.js';
+import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-BVfWAIpr.js';
 import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ImageProps as ImageProps$1 } from 'expo-image';
@@ -24,7 +24,7 @@ interface IconButtonProps extends PressableProps, UniversalIconButtonProps {
  * import { IconButton } from "@yahoo/uds";
  * import { AddFolder } from "@yahoo/uds-icons";
  *
- * <IconButton name={AddFolder} color="primary" variant="accent" iconVariant="outline" />
+ * <IconButton name={AddFolder} variant="accent" iconVariant="outline" />
  * ```
  */
 declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<View>>;

package/dist/{Image.native-DBoB1LOc.d.cts → Image.native-D6qA03vT.d.ts}

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-CLPge83Y.cjs';
+import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-C7KJV1b1.js';
 import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ImageProps as ImageProps$1 } from 'expo-image';
@@ -24,7 +24,7 @@ interface IconButtonProps extends PressableProps, UniversalIconButtonProps {
  * import { IconButton } from "@yahoo/uds";
  * import { AddFolder } from "@yahoo/uds-icons";
  *
- * <IconButton name={AddFolder} color="primary" variant="accent" iconVariant="outline" />
+ * <IconButton name={AddFolder} variant="accent" iconVariant="outline" />
  * ```
  */
 declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<View>>;

package/dist/Image.native-D96MZTYD.d.cts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-BVfWAIpr.cjs';
+import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImageProps as ImageProps$1 } from 'expo-image';
+
+type NativePressableProps = Omit<PressableProps$1, 'children' | 'style' | 'onPress'> & {
+    style?: StyleProp<ViewStyle>;
+};
+interface PressableProps extends UniversalPressableProps, NativePressableProps {
+}
+declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<View>>;
+
+interface IconButtonProps extends PressableProps, UniversalIconButtonProps {
+}
+/**
+ * An icon button is essentially an interactive icon. They should be used to
+ * display an icon which, when clicked, allows the user to trigger an action.
+ * Icon buttons provide additional features such hover states, focus states, and
+ * pressable functionality.
+ *
+ * **Basic usage**
+ * ```tsx
+ * import { IconButton } from "@yahoo/uds";
+ * import { AddFolder } from "@yahoo/uds-icons";
+ *
+ * <IconButton name={AddFolder} variant="accent" iconVariant="outline" />
+ * ```
+ */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<View>>;
+
+interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImageProps {
+}
+/**
+ * An image element
+ */
+declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+
+export { type ImageProps as I, type PressableProps as P, IconButton as a, type IconButtonProps as b, Image as c, Pressable as d };

package/dist/Image.native-DX2YWGZD.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-DVTR9ROz.js';
+import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImageProps as ImageProps$1 } from 'expo-image';
+
+type NativePressableProps = Omit<PressableProps$1, 'children' | 'style' | 'onPress'> & {
+    style?: StyleProp<ViewStyle>;
+};
+interface PressableProps extends UniversalPressableProps, NativePressableProps {
+}
+declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<View>>;
+
+interface IconButtonProps extends PressableProps, UniversalIconButtonProps {
+}
+/**
+ * An icon button is essentially an interactive icon. They should be used to
+ * display an icon which, when clicked, allows the user to trigger an action.
+ * Icon buttons provide additional features such hover states, focus states, and
+ * pressable functionality.
+ *
+ * **Basic usage**
+ * ```tsx
+ * import { IconButton } from "@yahoo/uds";
+ * import { AddFolder } from "@yahoo/uds-icons";
+ *
+ * <IconButton name={AddFolder} variant="accent" iconVariant="outline" />
+ * ```
+ */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<View>>;
+
+interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImageProps {
+}
+/**
+ * An image element
+ */
+declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+
+export { type ImageProps as I, type PressableProps as P, IconButton as a, type IconButtonProps as b, Image as c, Pressable as d };

package/dist/Image.native-M8D2Y2sv.d.cts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-C4OR1S9X.cjs';
+import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImageProps as ImageProps$1 } from 'expo-image';
+
+type NativePressableProps = Omit<PressableProps$1, 'children' | 'style' | 'onPress'> & {
+    style?: StyleProp<ViewStyle>;
+};
+interface PressableProps extends UniversalPressableProps, NativePressableProps {
+}
+declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<View>>;
+
+interface IconButtonProps extends PressableProps, UniversalIconButtonProps {
+}
+/**
+ * An icon button is essentially an interactive icon. They should be used to
+ * display an icon which, when clicked, allows the user to trigger an action.
+ * Icon buttons provide additional features such hover states, focus states, and
+ * pressable functionality.
+ *
+ * **Basic usage**
+ * ```tsx
+ * import { IconButton } from "@yahoo/uds";
+ * import { AddFolder } from "@yahoo/uds-icons";
+ *
+ * <IconButton name={AddFolder} variant="accent" iconVariant="outline" />
+ * ```
+ */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<View>>;
+
+interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImageProps {
+}
+/**
+ * An image element
+ */
+declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+
+export { type ImageProps as I, type PressableProps as P, IconButton as a, type IconButtonProps as b, Image as c, Pressable as d };

package/dist/Image.native-QRZjcXm7.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-C4OR1S9X.js';
+import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImageProps as ImageProps$1 } from 'expo-image';
+
+type NativePressableProps = Omit<PressableProps$1, 'children' | 'style' | 'onPress'> & {
+    style?: StyleProp<ViewStyle>;
+};
+interface PressableProps extends UniversalPressableProps, NativePressableProps {
+}
+declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<View>>;
+
+interface IconButtonProps extends PressableProps, UniversalIconButtonProps {
+}
+/**
+ * An icon button is essentially an interactive icon. They should be used to
+ * display an icon which, when clicked, allows the user to trigger an action.
+ * Icon buttons provide additional features such hover states, focus states, and
+ * pressable functionality.
+ *
+ * **Basic usage**
+ * ```tsx
+ * import { IconButton } from "@yahoo/uds";
+ * import { AddFolder } from "@yahoo/uds-icons";
+ *
+ * <IconButton name={AddFolder} variant="accent" iconVariant="outline" />
+ * ```
+ */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<View>>;
+
+interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImageProps {
+}
+/**
+ * An image element
+ */
+declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+
+export { type ImageProps as I, type PressableProps as P, IconButton as a, type IconButtonProps as b, Image as c, Pressable as d };

package/dist/Image.native-f8x4GPuV.d.cts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-C7KJV1b1.cjs';
+import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImageProps as ImageProps$1 } from 'expo-image';
+
+type NativePressableProps = Omit<PressableProps$1, 'children' | 'style' | 'onPress'> & {
+    style?: StyleProp<ViewStyle>;
+};
+interface PressableProps extends UniversalPressableProps, NativePressableProps {
+}
+declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<View>>;
+
+interface IconButtonProps extends PressableProps, UniversalIconButtonProps {
+}
+/**
+ * An icon button is essentially an interactive icon. They should be used to
+ * display an icon which, when clicked, allows the user to trigger an action.
+ * Icon buttons provide additional features such hover states, focus states, and
+ * pressable functionality.
+ *
+ * **Basic usage**
+ * ```tsx
+ * import { IconButton } from "@yahoo/uds";
+ * import { AddFolder } from "@yahoo/uds-icons";
+ *
+ * <IconButton name={AddFolder} variant="accent" iconVariant="outline" />
+ * ```
+ */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<View>>;
+
+interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImageProps {
+}
+/**
+ * An image element
+ */
+declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+
+export { type ImageProps as I, type PressableProps as P, IconButton as a, type IconButtonProps as b, Image as c, Pressable as d };

package/dist/Image.native-mHTDIRbL.d.cts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-DVTR9ROz.cjs';
+import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImageProps as ImageProps$1 } from 'expo-image';
+
+type NativePressableProps = Omit<PressableProps$1, 'children' | 'style' | 'onPress'> & {
+    style?: StyleProp<ViewStyle>;
+};
+interface PressableProps extends UniversalPressableProps, NativePressableProps {
+}
+declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<View>>;
+
+interface IconButtonProps extends PressableProps, UniversalIconButtonProps {
+}
+/**
+ * An icon button is essentially an interactive icon. They should be used to
+ * display an icon which, when clicked, allows the user to trigger an action.
+ * Icon buttons provide additional features such hover states, focus states, and
+ * pressable functionality.
+ *
+ * **Basic usage**
+ * ```tsx
+ * import { IconButton } from "@yahoo/uds";
+ * import { AddFolder } from "@yahoo/uds-icons";
+ *
+ * <IconButton name={AddFolder} variant="accent" iconVariant="outline" />
+ * ```
+ */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<View>>;
+
+interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImageProps {
+}
+/**
+ * An image element
+ */
+declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+
+export { type ImageProps as I, type PressableProps as P, IconButton as a, type IconButtonProps as b, Image as c, Pressable as d };

package/dist/chunk-2C7RDVXS.js

@@ -0,0 +1,3 @@
+import{DARK_COLOR_MODE_CLASSNAME as e,LIGHT_COLOR_MODE_CLASSNAME as t,XSMALL_SCALE_MODE_CLASSNAME as r,SMALL_SCALE_MODE_CLASSNAME as o,MEDIUM_SCALE_MODE_CLASSNAME as a,LARGE_SCALE_MODE_CLASSNAME as n,XLARGE_SCALE_MODE_CLASSNAME as p,XXXLARGE_SCALE_MODE_CLASSNAME as l,XXLARGE_SCALE_MODE_CLASSNAME as i}from"./chunk-I2ENXXSN.js";
+/*! © 2024 Yahoo, Inc. UDS v0.5.11 */
+var d={color:{accent:"text-accent",alert:"text-alert",black:"text-black",brand:"text-brand",positive:"text-positive",warning:"text-warning",white:"text-white",transparent:"text-transparent",muted:"text-muted","on-color":"text-on-color",primary:"text-primary",secondary:"text-secondary",tertiary:"text-tertiary",current:"text-current"},placeholderColor:{accent:"placeholder:text-accent",alert:"placeholder:text-alert",black:"placeholder:text-black",brand:"placeholder:text-brand",positive:"placeholder:text-positive",warning:"placeholder:text-warning",white:"placeholder:text-white",transparent:"placeholder:text-transparent",muted:"placeholder:text-muted","on-color":"placeholder:text-on-color",primary:"placeholder:text-primary",secondary:"placeholder:text-secondary",tertiary:"placeholder:text-tertiary",current:"placeholder:text-current"},fontFamily:{sans:"font-sans","sans-alt":"font-sans-alt",serif:"font-serif","serif-alt":"font-serif-alt",mono:"font-mono",display1:"font-display1",display2:"font-display2",display3:"font-display3",title1:"font-title1",title2:"font-title2",title3:"font-title3",title4:"font-title4",headline1:"font-headline1",body1:"font-body1",label1:"font-label1",label2:"font-label2",caption1:"font-caption1",caption2:"font-caption2",legal1:"font-legal1"},fontSize:{display1:"font-size-display1",display2:"font-size-display2",display3:"font-size-display3",title1:"font-size-title1",title2:"font-size-title2",title3:"font-size-title3",title4:"font-size-title4",headline1:"font-size-headline1",body1:"font-size-body1",label1:"font-size-label1",label2:"font-size-label2",caption1:"font-size-caption1",caption2:"font-size-caption2",legal1:"font-size-legal1"},fontWeight:{thin:"font-weight-thin",extralight:"font-weight-extralight",light:"font-weight-light",regular:"font-weight-regular",medium:"font-weight-medium",semibold:"font-weight-semibold",bold:"font-weight-bold",extrabold:"font-weight-extrabold",black:"font-weight-black",display1:"font-weight-display1",display2:"font-weight-display2",display3:"font-weight-display3",title1:"font-weight-title1",title2:"font-weight-title2",title3:"font-weight-title3",title4:"font-weight-title4",headline1:"font-weight-headline1",body1:"font-weight-body1",label1:"font-weight-label1",label2:"font-weight-label2",caption1:"font-weight-caption1",caption2:"font-weight-caption2",legal1:"font-weight-legal1"},lineHeight:{display1:"leading-display1",display2:"leading-display2",display3:"leading-display3",title1:"leading-title1",title2:"leading-title2",title3:"leading-title3",title4:"leading-title4",headline1:"leading-headline1",body1:"leading-body1",label1:"leading-label1",label2:"leading-label2",caption1:"leading-caption1",caption2:"leading-caption2",legal1:"leading-legal1"},textAlign:{center:"text-center",justify:"text-justify",start:"text-start",end:"text-end"},textTransform:{display1:"case-display1",display2:"case-display2",display3:"case-display3",title1:"case-title1",title2:"case-title2",title3:"case-title3",title4:"case-title4",headline1:"case-headline1",body1:"case-body1",label1:"case-label1",label2:"case-label2",caption1:"case-caption1",caption2:"case-caption2",legal1:"case-legal1",none:"normal-case",uppercase:"uppercase",lowercase:"lowercase",capitalize:"capitalize"},spacing:{0:"p-0",px:"p-px",.5:"p-0.5",1:"p-1",1.5:"p-1.5",2:"p-2",2.5:"p-2.5",3:"p-3",3.5:"p-3.5",4:"p-4",5:"p-5",6:"p-6",7:"p-7",8:"p-8",9:"p-9",10:"p-10",11:"p-11",12:"p-12",14:"p-14",16:"p-16",20:"p-20",24:"p-24",28:"p-28",32:"p-32",36:"p-36",40:"p-40",44:"p-44",48:"p-48",52:"p-52",56:"p-56",60:"p-60",64:"p-64",72:"p-72",80:"p-80",96:"p-96"},spacingHorizontal:{0:"px-0",px:"px-px",.5:"px-0.5",1:"px-1",1.5:"px-1.5",2:"px-2",2.5:"px-2.5",3:"px-3",3.5:"px-3.5",4:"px-4",5:"px-5",6:"px-6",7:"px-7",8:"px-8",9:"px-9",10:"px-10",11:"px-11",12:"px-12",14:"px-14",16:"px-16",20:"px-20",24:"px-24",28:"px-28",32:"px-32",36:"px-36",40:"px-40",44:"px-44",48:"px-48",52:"px-52",56:"px-56",60:"px-60",64:"px-64",72:"px-72",80:"px-80",96:"px-96"},spacingVertical:{0:"py-0",px:"py-px",.5:"py-0.5",1:"py-1",1.5:"py-1.5",2:"py-2",2.5:"py-2.5",3:"py-3",3.5:"py-3.5",4:"py-4",5:"py-5",6:"py-6",7:"py-7",8:"py-8",9:"py-9",10:"py-10",11:"py-11",12:"py-12",14:"py-14",16:"py-16",20:"py-20",24:"py-24",28:"py-28",32:"py-32",36:"py-36",40:"py-40",44:"py-44",48:"py-48",52:"py-52",56:"py-56",60:"py-60",64:"py-64",72:"py-72",80:"py-80",96:"py-96"},spacingBottom:{0:"pb-0",px:"pb-px",.5:"pb-0.5",1:"pb-1",1.5:"pb-1.5",2:"pb-2",2.5:"pb-2.5",3:"pb-3",3.5:"pb-3.5",4:"pb-4",5:"pb-5",6:"pb-6",7:"pb-7",8:"pb-8",9:"pb-9",10:"pb-10",11:"pb-11",12:"pb-12",14:"pb-14",16:"pb-16",20:"pb-20",24:"pb-24",28:"pb-28",32:"pb-32",36:"pb-36",40:"pb-40",44:"pb-44",48:"pb-48",52:"pb-52",56:"pb-56",60:"pb-60",64:"pb-64",72:"pb-72",80:"pb-80",96:"pb-96"},spacingEnd:{0:"pe-0",px:"pe-px",.5:"pe-0.5",1:"pe-1",1.5:"pe-1.5",2:"pe-2",2.5:"pe-2.5",3:"pe-3",3.5:"pe-3.5",4:"pe-4",5:"pe-5",6:"pe-6",7:"pe-7",8:"pe-8",9:"pe-9",10:"pe-10",11:"pe-11",12:"pe-12",14:"pe-14",16:"pe-16",20:"pe-20",24:"pe-24",28:"pe-28",32:"pe-32",36:"pe-36",40:"pe-40",44:"pe-44",48:"pe-48",52:"pe-52",56:"pe-56",60:"pe-60",64:"pe-64",72:"pe-72",80:"pe-80",96:"pe-96"},spacingStart:{0:"ps-0",px:"ps-px",.5:"ps-0.5",1:"ps-1",1.5:"ps-1.5",2:"ps-2",2.5:"ps-2.5",3:"ps-3",3.5:"ps-3.5",4:"ps-4",5:"ps-5",6:"ps-6",7:"ps-7",8:"ps-8",9:"ps-9",10:"ps-10",11:"ps-11",12:"ps-12",14:"ps-14",16:"ps-16",20:"ps-20",24:"ps-24",28:"ps-28",32:"ps-32",36:"ps-36",40:"ps-40",44:"ps-44",48:"ps-48",52:"ps-52",56:"ps-56",60:"ps-60",64:"ps-64",72:"ps-72",80:"ps-80",96:"ps-96"},spacingTop:{0:"pt-0",px:"pt-px",.5:"pt-0.5",1:"pt-1",1.5:"pt-1.5",2:"pt-2",2.5:"pt-2.5",3:"pt-3",3.5:"pt-3.5",4:"pt-4",5:"pt-5",6:"pt-6",7:"pt-7",8:"pt-8",9:"pt-9",10:"pt-10",11:"pt-11",12:"pt-12",14:"pt-14",16:"pt-16",20:"pt-20",24:"pt-24",28:"pt-28",32:"pt-32",36:"pt-36",40:"pt-40",44:"pt-44",48:"pt-48",52:"pt-52",56:"pt-56",60:"pt-60",64:"pt-64",72:"pt-72",80:"pt-80",96:"pt-96"},offset:{0:"-m-0",px:"-m-px",.5:"-m-0.5",1:"-m-1",1.5:"-m-1.5",2:"-m-2",2.5:"-m-2.5",3:"-m-3",3.5:"-m-3.5",4:"-m-4",5:"-m-5",6:"-m-6",7:"-m-7",8:"-m-8",9:"-m-9",10:"-m-10",11:"-m-11",12:"-m-12",14:"-m-14",16:"-m-16",20:"-m-20",24:"-m-24",28:"-m-28",32:"-m-32",36:"-m-36",40:"-m-40",44:"-m-44",48:"-m-48",52:"-m-52",56:"-m-56",60:"-m-60",64:"-m-64",72:"-m-72",80:"-m-80",96:"-m-96"},offsetVertical:{0:"-my-0",px:"-my-px",.5:"-my-0.5",1:"-my-1",1.5:"-my-1.5",2:"-my-2",2.5:"-my-2.5",3:"-my-3",3.5:"-my-3.5",4:"-my-4",5:"-my-5",6:"-my-6",7:"-my-7",8:"-my-8",9:"-my-9",10:"-my-10",11:"-my-11",12:"-my-12",14:"-my-14",16:"-my-16",20:"-my-20",24:"-my-24",28:"-my-28",32:"-my-32",36:"-my-36",40:"-my-40",44:"-my-44",48:"-my-48",52:"-my-52",56:"-my-56",60:"-my-60",64:"-my-64",72:"-my-72",80:"-my-80",96:"-my-96"},offsetHorizontal:{0:"-mx-0",px:"-mx-px",.5:"-mx-0.5",1:"-mx-1",1.5:"-mx-1.5",2:"-mx-2",2.5:"-mx-2.5",3:"-mx-3",3.5:"-mx-3.5",4:"-mx-4",5:"-mx-5",6:"-mx-6",7:"-mx-7",8:"-mx-8",9:"-mx-9",10:"-mx-10",11:"-mx-11",12:"-mx-12",14:"-mx-14",16:"-mx-16",20:"-mx-20",24:"-mx-24",28:"-mx-28",32:"-mx-32",36:"-mx-36",40:"-mx-40",44:"-mx-44",48:"-mx-48",52:"-mx-52",56:"-mx-56",60:"-mx-60",64:"-mx-64",72:"-mx-72",80:"-mx-80",96:"-mx-96"},offsetBottom:{0:"-mb-0",px:"-mb-px",.5:"-mb-0.5",1:"-mb-1",1.5:"-mb-1.5",2:"-mb-2",2.5:"-mb-2.5",3:"-mb-3",3.5:"-mb-3.5",4:"-mb-4",5:"-mb-5",6:"-mb-6",7:"-mb-7",8:"-mb-8",9:"-mb-9",10:"-mb-10",11:"-mb-11",12:"-mb-12",14:"-mb-14",16:"-mb-16",20:"-mb-20",24:"-mb-24",28:"-mb-28",32:"-mb-32",36:"-mb-36",40:"-mb-40",44:"-mb-44",48:"-mb-48",52:"-mb-52",56:"-mb-56",60:"-mb-60",64:"-mb-64",72:"-mb-72",80:"-mb-80",96:"-mb-96"},offsetEnd:{0:"-me-0",px:"-me-px",.5:"-me-0.5",1:"-me-1",1.5:"-me-1.5",2:"-me-2",2.5:"-me-2.5",3:"-me-3",3.5:"-me-3.5",4:"-me-4",5:"-me-5",6:"-me-6",7:"-me-7",8:"-me-8",9:"-me-9",10:"-me-10",11:"-me-11",12:"-me-12",14:"-me-14",16:"-me-16",20:"-me-20",24:"-me-24",28:"-me-28",32:"-me-32",36:"-me-36",40:"-me-40",44:"-me-44",48:"-me-48",52:"-me-52",56:"-me-56",60:"-me-60",64:"-me-64",72:"-me-72",80:"-me-80",96:"-me-96"},offsetStart:{0:"-ms-0",px:"-ms-px",.5:"-ms-0.5",1:"-ms-1",1.5:"-ms-1.5",2:"-ms-2",2.5:"-ms-2.5",3:"-ms-3",3.5:"-ms-3.5",4:"-ms-4",5:"-ms-5",6:"-ms-6",7:"-ms-7",8:"-ms-8",9:"-ms-9",10:"-ms-10",11:"-ms-11",12:"-ms-12",14:"-ms-14",16:"-ms-16",20:"-ms-20",24:"-ms-24",28:"-ms-28",32:"-ms-32",36:"-ms-36",40:"-ms-40",44:"-ms-44",48:"-ms-48",52:"-ms-52",56:"-ms-56",60:"-ms-60",64:"-ms-64",72:"-ms-72",80:"-ms-80",96:"-ms-96"},offsetTop:{0:"-mt-0",px:"-mt-px",.5:"-mt-0.5",1:"-mt-1",1.5:"-mt-1.5",2:"-mt-2",2.5:"-mt-2.5",3:"-mt-3",3.5:"-mt-3.5",4:"-mt-4",5:"-mt-5",6:"-mt-6",7:"-mt-7",8:"-mt-8",9:"-mt-9",10:"-mt-10",11:"-mt-11",12:"-mt-12",14:"-mt-14",16:"-mt-16",20:"-mt-20",24:"-mt-24",28:"-mt-28",32:"-mt-32",36:"-mt-36",40:"-mt-40",44:"-mt-44",48:"-mt-48",52:"-mt-52",56:"-mt-56",60:"-mt-60",64:"-mt-64",72:"-mt-72",80:"-mt-80",96:"-mt-96"},columnGap:{0:"gap-x-0",px:"gap-x-px",.5:"gap-x-0.5",1:"gap-x-1",1.5:"gap-x-1.5",2:"gap-x-2",2.5:"gap-x-2.5",3:"gap-x-3",3.5:"gap-x-3.5",4:"gap-x-4",5:"gap-x-5",6:"gap-x-6",7:"gap-x-7",8:"gap-x-8",9:"gap-x-9",10:"gap-x-10",11:"gap-x-11",12:"gap-x-12",14:"gap-x-14",16:"gap-x-16",20:"gap-x-20",24:"gap-x-24",28:"gap-x-28",32:"gap-x-32",36:"gap-x-36",40:"gap-x-40",44:"gap-x-44",48:"gap-x-48",52:"gap-x-52",56:"gap-x-56",60:"gap-x-60",64:"gap-x-64",72:"gap-x-72",80:"gap-x-80",96:"gap-x-96"},rowGap:{0:"gap-y-0",px:"gap-y-px",.5:"gap-y-0.5",1:"gap-y-1",1.5:"gap-y-1.5",2:"gap-y-2",2.5:"gap-y-2.5",3:"gap-y-3",3.5:"gap-y-3.5",4:"gap-y-4",5:"gap-y-5",6:"gap-y-6",7:"gap-y-7",8:"gap-y-8",9:"gap-y-9",10:"gap-y-10",11:"gap-y-11",12:"gap-y-12",14:"gap-y-14",16:"gap-y-16",20:"gap-y-20",24:"gap-y-24",28:"gap-y-28",32:"gap-y-32",36:"gap-y-36",40:"gap-y-40",44:"gap-y-44",48:"gap-y-48",52:"gap-y-52",56:"gap-y-56",60:"gap-y-60",64:"gap-y-64",72:"gap-y-72",80:"gap-y-80",96:"gap-y-96"},backgroundColor:{accent:"bg-accent",alert:"bg-alert",black:"bg-black",brand:"bg-brand",positive:"bg-positive",warning:"bg-warning",white:"bg-white",primary:"bg-primary",secondary:"bg-secondary",transparent:"bg-transparent",current:"bg-current"},borderColor:{accent:"border-accent",alert:"border-alert",black:"border-black",brand:"border-brand",positive:"border-positive",warning:"border-warning",white:"border-white",transparent:"border-transparent",muted:"border-muted",primary:"border-primary",secondary:"border-secondary",tertiary:"border-tertiary",current:"border-current"},borderStartColor:{accent:"border-s-accent",alert:"border-s-alert",black:"border-s-black",brand:"border-s-brand",positive:"border-s-positive",warning:"border-s-warning",white:"border-s-white",transparent:"border-s-transparent",muted:"border-s-muted",primary:"border-s-primary",secondary:"border-s-secondary",tertiary:"border-s-tertiary",current:"border-s-current"},borderEndColor:{accent:"border-e-accent",alert:"border-e-alert",black:"border-e-black",brand:"border-e-brand",positive:"border-e-positive",warning:"border-e-warning",white:"border-e-white",transparent:"border-e-transparent",muted:"border-e-muted",primary:"border-e-primary",secondary:"border-e-secondary",tertiary:"border-e-tertiary",current:"border-e-current"},borderBottomColor:{accent:"border-b-accent",alert:"border-b-alert",black:"border-b-black",brand:"border-b-brand",positive:"border-b-positive",warning:"border-b-warning",white:"border-b-white",transparent:"border-b-transparent",muted:"border-b-muted",primary:"border-b-primary",secondary:"border-b-secondary",tertiary:"border-b-tertiary",current:"border-b-current"},borderTopColor:{accent:"border-t-accent",alert:"border-t-alert",black:"border-t-black",brand:"border-t-brand",positive:"border-t-positive",warning:"border-t-warning",white:"border-t-white",transparent:"border-t-transparent",muted:"border-t-muted",primary:"border-t-primary",secondary:"border-t-secondary",tertiary:"border-t-tertiary",current:"border-t-current"},borderRadius:{none:"rounded-none",xs:"rounded-xs",sm:"rounded-sm",md:"rounded-md",lg:"rounded-lg",xl:"rounded-xl",full:"rounded-full"},borderTopStartRadius:{none:"rounded-ss-none",xs:"rounded-ss-xs",sm:"rounded-ss-sm",md:"rounded-ss-md",lg:"rounded-ss-lg",xl:"rounded-ss-xl",full:"rounded-ss-full"},borderTopEndRadius:{none:"rounded-se-none",xs:"rounded-se-xs",sm:"rounded-se-sm",md:"rounded-se-md",lg:"rounded-se-lg",xl:"rounded-se-xl",full:"rounded-se-full"},borderBottomStartRadius:{none:"rounded-es-none",xs:"rounded-es-xs",sm:"rounded-es-sm",md:"rounded-es-md",lg:"rounded-es-lg",xl:"rounded-es-xl",full:"rounded-es-full"},borderBottomEndRadius:{none:"rounded-ee-none",xs:"rounded-ee-xs",sm:"rounded-ee-sm",md:"rounded-ee-md",lg:"rounded-ee-lg",xl:"rounded-ee-xl",full:"rounded-ee-full"},borderWidth:{none:"border-none",thin:"border-thin",medium:"border-medium",thick:"border-thick"},borderVerticalWidth:{none:"border-y-none",thin:"border-y-thin",medium:"border-y-medium",thick:"border-y-thick"},borderHorizontalWidth:{none:"border-x-none",thin:"border-x-thin",medium:"border-x-medium",thick:"border-x-thick"},borderStartWidth:{none:"border-s-none",thin:"border-s-thin",medium:"border-s-medium",thick:"border-s-thick"},borderEndWidth:{none:"border-e-none",thin:"border-e-thin",medium:"border-e-medium",thick:"border-e-thick"},borderTopWidth:{none:"border-t-none",thin:"border-t-thin",medium:"border-t-medium",thick:"border-t-thick"},borderBottomWidth:{none:"border-b-none",thin:"border-b-thin",medium:"border-b-medium",thick:"border-b-thick"},avatarSize:{sm:"avatarSize-sm",md:"avatarSize-md",lg:"avatarSize-lg"},iconSize:{sm:"iconSize-sm leading-none",md:"iconSize-md leading-none",lg:"iconSize-lg leading-none"},alignContent:{"flex-start":"content-start","flex-end":"content-end",center:"content-center",stretch:"content-stretch","space-between":"content-between","space-around":"content-around"},alignItems:{"flex-start":"items-start","flex-end":"items-end",center:"items-center",stretch:"items-stretch",baseline:"items-baseline"},alignSelf:{auto:"self-auto","flex-start":"self-start","flex-end":"self-end",center:"self-center",stretch:"self-stretch",baseline:"self-baseline"},flex:{1:"flex-1",auto:"flex-auto",initial:"flex-initial",none:"flex-none"},flexDirection:{row:"flex-row",column:"flex-col","row-reverse":"flex-row-reverse","column-reverse":"flex-col-reverse"},flexGrow:{0:"grow-0",1:"grow",2:"grow-[2]",3:"grow-[3]"},flexShrink:{0:"shrink-0",1:"shrink"},flexWrap:{wrap:"flex-wrap","wrap-reverse":"flex-wrap-reverse",nowrap:"flex-nowrap"},justifyContent:{"flex-start":"justify-start","flex-end":"justify-end",center:"justify-center","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly"},flexBasis:{"min-content":"basis-[min-content]"},display:{block:"block","inline-block":"inline-block",inline:"inline",flex:"flex","inline-flex":"inline-flex",table:"table","inline-table":"inline-table","table-caption":"table-caption","table-cell":"table-cell","table-column":"table-column","table-column-group":"table-column-group","table-footer-group":"table-footer-group","table-header-group":"table-header-group","table-row-group":"table-row-group","table-row":"table-row","flow-root":"flow-root",grid:"grid",contents:"contents"},overflow:{auto:"overflow-auto",hidden:"overflow-hidden",clip:"overflow-clip",visible:"overflow-visible",scroll:"overflow-scroll"},overflowX:{auto:"overflow-x-auto",hidden:"overflow-x-hidden",clip:"overflow-x-clip",visible:"overflow-x-visible",scroll:"overflow-x-scroll"},overflowY:{auto:"overflow-y-auto",hidden:"overflow-y-hidden",clip:"overflow-y-clip",visible:"overflow-y-visible",scroll:"overflow-y-scroll"},position:{static:"static",fixed:"fixed",absolute:"absolute",relative:"relative",sticky:"sticky"},contentFit:{contain:"object-contain",cover:"object-cover",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},colorMode:{dark:e,light:t},scaleMode:{xSmall:r,small:o,medium:a,large:n,xLarge:p,xxxLarge:l,xxLarge:i},buttonPalette:{accent:"uds-button-accent",brand:"uds-button-brand",alert:"uds-button-alert",positive:"uds-button-positive",warning:"uds-button-warning"},buttonVariant:{primary:"uds-button-primary",secondary:"uds-button-secondary",tertiary:"uds-button-tertiary"},buttonSize:{sm:"uds-button-sm",md:"uds-button-md",lg:"uds-button-lg"},iconButtonSize:{xs:"uds-icon-button-xs",sm:"uds-icon-button-sm",md:"uds-icon-button-md",lg:"uds-icon-button-lg",xl:"uds-icon-button-xl"}};export{d as variants};