@yahoo/uds 3.59.0-beta.1 → 3.59.0

package/dist/tailwind/tsMorph.d.ts

@@ -1,2 +1,31 @@
-import { findReferencesAsJsxElements, getJsxElement, getJsxElements, getParentSpreadOrParamIdentifier, getReactFunctionDeclaration, getUsedPropsInReference, isForwardRefExpression, isJsxComponent } from "../scripts/utils/tsMorph.js";
-export { findReferencesAsJsxElements, getJsxElement, getJsxElements, getParentSpreadOrParamIdentifier, getReactFunctionDeclaration, getUsedPropsInReference, isForwardRefExpression, isJsxComponent };
+import { Node, CallExpression, VariableDeclaration, FunctionDeclaration, FunctionExpression, ArrowFunction, ClassDeclaration, JsxElement, JsxSelfClosingElement, Identifier, JsxOpeningElement } from 'ts-morph';
+
+/** Determines if an expression is using React.forwardRef. */
+declare function isForwardRefExpression(node: Node): node is CallExpression;
+/** Determines if a node is a JSX component. */
+declare function isJsxComponent(node: Node): node is VariableDeclaration | FunctionDeclaration | FunctionExpression | ArrowFunction | ClassDeclaration;
+/** Returns a functional component declaration, unwrapping forwardRef if needed. */
+declare function getReactFunctionDeclaration(declaration: Node): ArrowFunction | FunctionDeclaration | FunctionExpression | null;
+/** Get the first descendant JsxElement based on the identifier. */
+declare function getJsxElement(node: Node, name: string): JsxElement | JsxSelfClosingElement | undefined;
+/** Get all descendant JsxElement nodes. */
+declare function getJsxElements(node: Node): (JsxElement | JsxSelfClosingElement)[];
+/**
+ * Traces component references.
+ *
+ * This is similar to `findReferencesAsNodes` but returns JsxSelfClosingElement and JsxElement nodes.
+ * Note, this currently does not account for cases where the component is used as a prop or is renamed.
+ */
+declare function findReferencesAsJsxElements(identifer: Identifier): (JsxOpeningElement | JsxSelfClosingElement)[];
+/**
+ * Given a Jsx Reference, this function finds the parent of that reference,
+ * looks at the props, and returns the name used either for spread operator rest or
+ * the prop name if there's no spread operator
+ */
+declare const getParentSpreadOrParamIdentifier: (reference: JsxOpeningElement | JsxSelfClosingElement) => string | undefined;
+/**
+ * Get used props on a reference.
+ */
+declare const getUsedPropsInReference: (reference: JsxOpeningElement | JsxSelfClosingElement) => Array<[string, string[]]>;
+
+export { findReferencesAsJsxElements, getJsxElement, getJsxElements, getParentSpreadOrParamIdentifier, getReactFunctionDeclaration, getUsedPropsInReference, isForwardRefExpression, isJsxComponent };

package/dist/tailwind/tsMorph.js

@@ -1,4 +1,2 @@
-/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
-import { findReferencesAsJsxElements, getJsxElement, getJsxElements, getParentSpreadOrParamIdentifier, getReactFunctionDeclaration, getUsedPropsInReference, isForwardRefExpression, isJsxComponent } from "../scripts/utils/tsMorph.js";
-
-export { findReferencesAsJsxElements, getJsxElement, getJsxElements, getParentSpreadOrParamIdentifier, getReactFunctionDeclaration, getUsedPropsInReference, isForwardRefExpression, isJsxComponent };
+import{require_toString as e,require_createCompounder as t,require_baseKeys as n,require_getTag as r,require_isArguments as i,require_isArray as o,require_isArrayLike as s,require_isBuffer as u,require_isPrototype as f,require_isTypedArray as a,variants as d}from"../chunk-V5UIHMW2.js";import{__commonJS as c,__toESM as l}from"../chunk-GF4A6TFM.js";import{Node as p,SyntaxKind as g}from"ts-morph";/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+var h=c({"../../node_modules/lodash/_baseSlice.js"(e,t){t.exports=function(e,t,n){var r=-1,i=e.length;t<0&&(t=-t>i?0:i+t),(n=n>i?i:n)<0&&(n+=i),i=t>n?0:n-t>>>0,t>>>=0;for(var o=Array(i);++r<i;)o[r]=e[r+t];return o}}}),x=c({"../../node_modules/lodash/_castSlice.js"(e,t){var n=h();t.exports=function(e,t,r){var i=e.length;return r=void 0===r?i:r,!t&&r>=i?e:n(e,t,r)}}}),m=c({"../../node_modules/lodash/_hasUnicode.js"(e,t){var n=RegExp("[\\u200d\\ud800-\\udfff\\u0300-\\u036f\\ufe20-\\ufe2f\\u20d0-\\u20ff\\ufe0e\\ufe0f]");t.exports=function(e){return n.test(e)}}}),T=c({"../../node_modules/lodash/_asciiToArray.js"(e,t){t.exports=function(e){return e.split("")}}}),j=c({"../../node_modules/lodash/_unicodeToArray.js"(e,t){var n="\\ud800-\\udfff",r="["+n+"]",i="[\\u0300-\\u036f\\ufe20-\\ufe2f\\u20d0-\\u20ff]",o="\\ud83c[\\udffb-\\udfff]",s="[^"+n+"]",u="(?:\\ud83c[\\udde6-\\uddff]){2}",f="[\\ud800-\\udbff][\\udc00-\\udfff]",a="(?:"+i+"|"+o+")"+"?",d="[\\ufe0e\\ufe0f]?",c=d+a+("(?:\\u200d(?:"+[s,u,f].join("|")+")"+d+a+")*"),l="(?:"+[s+i+"?",i,u,f,r].join("|")+")",p=RegExp(o+"(?="+o+")|"+l+c,"g");t.exports=function(e){return e.match(p)||[]}}}),v=c({"../../node_modules/lodash/_stringToArray.js"(e,t){var n=T(),r=m(),i=j();t.exports=function(e){return r(e)?i(e):n(e)}}}),F=c({"../../node_modules/lodash/_createCaseFirst.js"(t,n){var r=x(),i=m(),o=v(),s=e();n.exports=function(e){return function(t){t=s(t);var n=i(t)?o(t):void 0,u=n?n[0]:t.charAt(0),f=n?r(n,1).join(""):t.slice(1);return u[e]()+f}}}}),A=c({"../../node_modules/lodash/upperFirst.js"(e,t){var n=F()("toUpperCase");t.exports=n}}),y=c({"../../node_modules/lodash/capitalize.js"(t,n){var r=e(),i=A();n.exports=function(e){return i(r(e).toLowerCase())}}}),D=c({"../../node_modules/lodash/camelCase.js"(e,n){var r=y(),i=t()(function(e,t,n){return t=t.toLowerCase(),e+(n?r(t):t)});n.exports=i}}),E=c({"../../node_modules/lodash/isEmpty.js"(e,t){var d=n(),c=r(),l=i(),p=o(),g=s(),h=u(),x=f(),m=a(),T=Object.prototype.hasOwnProperty;t.exports=function(e){if(null==e)return!0;if(g(e)&&(p(e)||"string"==typeof e||"function"==typeof e.splice||h(e)||m(e)||l(e)))return!e.length;var t=c(e);if("[object Map]"==t||"[object Set]"==t)return!e.size;if(x(e))return!d(e).length;for(var n in e)if(T.call(e,n))return!1;return!0}}}),_=l(D(),1),C=l(E(),1);function b(e){if(p.isCallExpression(e)){const t=e.getExpression();if(p.isIdentifier(t)&&"forwardRef"===t.getText())return!0;if(p.isPropertyAccessExpression(t)&&"React.forwardRef"===t.getText())return!0}return!1}function O(e){let t;if(p.isVariableDeclaration(e)||p.isFunctionDeclaration(e)||p.isClassDeclaration(e))t=e.getName();else if(p.isFunctionExpression(e)||p.isArrowFunction(e)){const n=e.getFirstAncestorByKind(g.VariableDeclaration);t=n?.getName()}return!!t&&/[A-Z]/.test(t.charAt(0))}function w(e){if(O(e)){if(p.isFunctionDeclaration(e))return e;if(p.isVariableDeclaration(e)){const t=e.getInitializer();if(t)if(b(t)){const[e]=t.getArguments();if(p.isFunctionDeclaration(e)||p.isFunctionExpression(e)||p.isArrowFunction(e))return e}else if(p.isFunctionDeclaration(t)||p.isFunctionExpression(t)||p.isArrowFunction(t))return t}}return null}function K(e,t){return N(e).find(e=>e.getFirstDescendantByKindOrThrow(g.Identifier).getText()===t)}function N(e){return e.getDescendants().filter(e=>p.isJsxElement(e)||p.isJsxSelfClosingElement(e))}function P(e){const t=[];for(const n of e.findReferencesAsNodes()){const e=n.getFirstAncestor(e=>p.isJsxOpeningElement(e)||p.isJsxSelfClosingElement(e));e&&t.push(e)}return t}var R=e=>{const t=e.getParentWhile(e=>!w(e)).getParent();if(!t)return;const n=w(t);if(n){const e=n.getParameters();for(let t=0;t<e.length;t++){const n=e[t],r=n.getChildrenOfKind(g.ObjectBindingPattern)[0],i=n.getChildrenOfKind(g.Identifier)[0];if(r){const e=r.getFirstDescendantByKind(g.DotDotDotToken);if(void 0!==e){const t=e?.getParent()?.getFirstChildByKindOrThrow(g.Identifier).getText();return t}}else if(i)return i.getText()}}},I=e=>{const t=e.getAttributes(),n=[];return t.forEach(t=>{if(p.isJsxAttribute(t)){const e=t.getNameNode().getText(),r=t.getDescendantsOfKind(g.StringLiteral),i=[];0!==r.length&&r.forEach(e=>i.push(e.getLiteralText()));const o=t.getFirstChildByKindOrThrow(g.Identifier).getDefinitions().map(e=>e.getDeclarationNode()?.getChildrenOfKind(g.TypeReference).pop()?.getText()).pop();o||(0,C.default)(e)?d[(0,_.default)(o)]&&!(0,C.default)(o)?n.push([(0,_.default)(o),i]):(0,C.default)(e)||n.push([e,i]):n.push([e,i])}if(p.isJsxSpreadAttribute(t)){const r=R(e),i=t.getExpression().getChildren(),o=0===i.length?t.getExpression():i.pop();if(!o||o?.getText()===r)return[];o.getType().getProperties().forEach(e=>{const t=e.getDeclarations().map(e=>{const t=e.getChildrenOfKind(g.TypeReference)[0]?.getText()??"";return(0,_.default)(t)})[0];(0,C.default)(e.getName())||n.push([e.getName(),[]]),(0,C.default)(t)||n.push([t,[]])})}return[]}),n};export{P as findReferencesAsJsxElements,K as getJsxElement,N as getJsxElements,R as getParentSpreadOrParamIdentifier,w as getReactFunctionDeclaration,I as getUsedPropsInReference,b as isForwardRefExpression,O as isJsxComponent};

package/dist/tailwind/utils.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("../chunk-LBBFEPKC.cjs"),t=require("../chunk-4UB6EIVI.cjs");Object.defineProperty(exports,"addFontsPlugin",{enumerable:!0,get:function(){return e.addFontsPlugin}}),Object.defineProperty(exports,"getColorModeStyles",{enumerable:!0,get:function(){return e.getColorModeStyles}}),Object.defineProperty(exports,"getFontFaceDeclarations",{enumerable:!0,get:function(){return e.getFontFaceDeclarations}}),Object.defineProperty(exports,"getFontStyles",{enumerable:!0,get:function(){return e.getFontStyles}}),Object.defineProperty(exports,"getMotionStyles",{enumerable:!0,get:function(){return e.getMotionStyles}}),Object.defineProperty(exports,"getScaleModeStyles",{enumerable:!0,get:function(){return e.getScaleModeStyles}}),Object.defineProperty(exports,"getShadowStyles",{enumerable:!0,get:function(){return e.getShadowStyles}}),Object.defineProperty(exports,"getBaseTextVars",{enumerable:!0,get:function(){return t.getBaseTextVars}}),Object.defineProperty(exports,"getResponsiveTextStyles",{enumerable:!0,get:function(){return t.getResponsiveTextStyles}}),Object.defineProperty(exports,"getShadowLayerValue",{enumerable:!0,get:function(){return t.getShadowLayerValue}}),Object.defineProperty(exports,"getShadowPresetValues",{enumerable:!0,get:function(){return t.getShadowPresetValues}});

package/dist/tailwind/utils.d.cts

@@ -0,0 +1,153 @@
+import { g as UniversalTokensConfig, bw as FontID, aj as FontDeclarationItemConfig, F as FontConfig, M as MotionConfig, m as ShadowPreset, cs as ShadowType } from '../types-gGaZxCMr.cjs';
+import { C as CssStyleObject } from '../types-BvOFo15W.cjs';
+import * as tailwindcss_types_config from 'tailwindcss/types/config';
+import { WebTokens } from '../tokens/parseTokens.cjs';
+import '@yahoo/uds-icons/types';
+import 'motion/react';
+import 'react';
+import 'type-fest';
+
+declare const getBaseTextVars: (config: UniversalTokensConfig) => CssStyleObject;
+declare const getResponsiveTextStyles: (config: UniversalTokensConfig) => CssStyleObject;
+
+interface AddFontsPluginOptions {
+    fontIds: FontID[];
+}
+declare const addFontsPlugin: {
+    (options: AddFontsPluginOptions): {
+        handler: tailwindcss_types_config.PluginCreator;
+        config?: Partial<tailwindcss_types_config.Config>;
+    };
+    __isOptionsFunction: true;
+};
+
+declare function getColorModeStyles(tokens: WebTokens): {
+    light: {
+        colorScheme: string;
+        '--uds-light-mode-icon': string;
+        '--uds-dark-mode-icon': string;
+    };
+    dark: {
+        colorScheme: string;
+        '--uds-light-mode-icon': string;
+        '--uds-dark-mode-icon': string;
+    };
+};
+
+/**
+ * Get all font face declarations for a given set of font IDs.
+ */
+declare function getFontFaceDeclarations(fontIds: FontID[]): FontDeclarationItemConfig[];
+
+/**
+ * Return CSS variables object based on font config.
+ * i.e. { --font-xyz: '"Font Family 1", "Font Family 2", sans-serif' }
+ *
+ * @example
+ * // 1. Use return value in style prop of an html element to assign font variables at runtime
+ *
+ * const fontVars = getFontStyles(fontConfig);
+ * <body style={fontVars}> {...} </body>
+ *
+ * // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
+ *
+ * const fontVars = getFontStyles(fontConfig);
+ * addRootVariables(fontVars);
+ *
+ */
+declare function getFontStyles(fontConfig: FontConfig): Record<"--uds-font-sans" | "--uds-font-serif" | "--uds-font-mono" | "--uds-font-sans-alt" | "--uds-font-serif-alt", string>;
+
+/**
+ * Return CSS variables object based on the motion config.
+ * i.e. { --uds-motion-damped-1--damping: '20.585796264350424' }
+ *
+ * @example
+ * // 1. Use return value in style prop of an html element to assign motion variables at runtime
+ *
+ * const motionVars = getMotionStyles(motionConfig);
+ * <body style={motionVars}> {...} </body>
+ *
+ * // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
+ *
+ * const motionVars = getMotionStyles(motionConfig);
+ * addRootVariables(motionVars);
+ *
+ */
+declare function getMotionStyles(motionConfig: MotionConfig): Record<"--uds-motion-damped-1-damping" | "--uds-motion-damped-1-stiffness" | "--uds-motion-damped-2-damping" | "--uds-motion-damped-2-stiffness" | "--uds-motion-damped-3-damping" | "--uds-motion-damped-3-stiffness" | "--uds-motion-damped-4-damping" | "--uds-motion-damped-4-stiffness" | "--uds-motion-smooth-1-damping" | "--uds-motion-smooth-1-stiffness" | "--uds-motion-smooth-2-damping" | "--uds-motion-smooth-2-stiffness" | "--uds-motion-smooth-3-damping" | "--uds-motion-smooth-3-stiffness" | "--uds-motion-smooth-4-damping" | "--uds-motion-smooth-4-stiffness" | "--uds-motion-subtle-1-damping" | "--uds-motion-subtle-1-stiffness" | "--uds-motion-subtle-2-damping" | "--uds-motion-subtle-2-stiffness" | "--uds-motion-subtle-3-damping" | "--uds-motion-subtle-3-stiffness" | "--uds-motion-subtle-4-damping" | "--uds-motion-subtle-4-stiffness" | "--uds-motion-bouncy-1-damping" | "--uds-motion-bouncy-1-stiffness" | "--uds-motion-bouncy-2-damping" | "--uds-motion-bouncy-2-stiffness" | "--uds-motion-bouncy-3-damping" | "--uds-motion-bouncy-3-stiffness" | "--uds-motion-bouncy-4-damping" | "--uds-motion-bouncy-4-stiffness" | "--uds-motion-veryBouncy-1-damping" | "--uds-motion-veryBouncy-1-stiffness" | "--uds-motion-veryBouncy-2-damping" | "--uds-motion-veryBouncy-2-stiffness" | "--uds-motion-veryBouncy-3-damping" | "--uds-motion-veryBouncy-3-stiffness" | "--uds-motion-veryBouncy-4-damping" | "--uds-motion-veryBouncy-4-stiffness", string>;
+
+declare function getScaleModeStyles(tokens: WebTokens): {
+    xSmall: {
+        [x: string]: string;
+    };
+    small: {
+        [x: string]: string;
+    };
+    medium: {
+        [x: string]: string;
+    };
+    large: {
+        [x: string]: string;
+    };
+    xLarge: {
+        [x: string]: string;
+    };
+    xxLarge: {
+        [x: string]: string;
+    };
+    xxxLarge: {
+        [x: string]: string;
+    };
+};
+
+/**
+ * Generate a single shadow value from a shadow preset configuration
+ *
+ * @param preset - The shadow preset configuration
+ * @param index - Optional index for numbered shadows (2-5)
+ * @param shadowType - The type of shadow (drop or inset)
+ * @returns A CSS box-shadow value string
+ */
+declare function getShadowLayerValue({ preset, prefix, shadowType, }: {
+    preset: ShadowPreset;
+    prefix?: string;
+    shadowType: ShadowType;
+}): string;
+/**
+ * Generate shadow values from the shadow config presets.
+ * Each size can have multiple shadow presets that are combined into a single box-shadow.
+ *
+ * For regular shadows:
+ * - Uses the outer shadow configuration from the shadow config
+ * - Uses CSS variables with the --uds-shadow-* prefix for shadow properties
+ * - The first shadow uses default variable names, subsequent shadows are numbered (e.g. --uds-shadow-2-*)
+ * - Shadow colors are scoped to the element, allowing for instance-specific colors
+ *
+ * For inset shadows:
+ * - Uses the inner shadow configuration from the shadow config
+ * - Uses CSS variables with the --uds-inset-shadow-* prefix for shadow properties
+ * - Adds the 'inset' keyword to each shadow value
+ * - Shadow colors are scoped to the element, allowing for instance-specific colors
+ *
+ * This approach ensures that both regular and inset shadows use the correct CSS variables
+ * set by the shadow utilities, while allowing for instance-specific color customization.
+ * The separation of variable namespaces allows both shadow types to be used together on the same element.
+ *
+ * When both shadow and inset-shadow utilities are used together on an element,
+ * they combine to create a box-shadow with both outer and inner shadows.
+ *
+ * @returns A record of shadow values by size (xs, sm, md, etc.)
+ */
+declare function getShadowPresetValues({ config, shadowType, }: {
+    config: UniversalTokensConfig;
+    shadowType: ShadowType;
+}): Record<string, string>;
+
+declare function getShadowStyles({ config, shadowType, }: {
+    config: UniversalTokensConfig;
+    shadowType: ShadowType;
+}): Record<".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-none" | ".uds-inset-shadow-xs" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-none" | ".uds-drop-shadow-xs", {
+    readonly [x: string]: "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-xs)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
+    readonly boxShadow: "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
+}>;
+
+export { type AddFontsPluginOptions, addFontsPlugin, getBaseTextVars, getColorModeStyles, getFontFaceDeclarations, getFontStyles, getMotionStyles, getResponsiveTextStyles, getScaleModeStyles, getShadowLayerValue, getShadowPresetValues, getShadowStyles };

package/dist/tailwind/utils.d.ts

@@ -0,0 +1,153 @@
+import { g as UniversalTokensConfig, bw as FontID, aj as FontDeclarationItemConfig, F as FontConfig, M as MotionConfig, m as ShadowPreset, cs as ShadowType } from '../types-gGaZxCMr.js';
+import { C as CssStyleObject } from '../types-BvOFo15W.js';
+import * as tailwindcss_types_config from 'tailwindcss/types/config';
+import { WebTokens } from '../tokens/parseTokens.js';
+import '@yahoo/uds-icons/types';
+import 'motion/react';
+import 'react';
+import 'type-fest';
+
+declare const getBaseTextVars: (config: UniversalTokensConfig) => CssStyleObject;
+declare const getResponsiveTextStyles: (config: UniversalTokensConfig) => CssStyleObject;
+
+interface AddFontsPluginOptions {
+    fontIds: FontID[];
+}
+declare const addFontsPlugin: {
+    (options: AddFontsPluginOptions): {
+        handler: tailwindcss_types_config.PluginCreator;
+        config?: Partial<tailwindcss_types_config.Config>;
+    };
+    __isOptionsFunction: true;
+};
+
+declare function getColorModeStyles(tokens: WebTokens): {
+    light: {
+        colorScheme: string;
+        '--uds-light-mode-icon': string;
+        '--uds-dark-mode-icon': string;
+    };
+    dark: {
+        colorScheme: string;
+        '--uds-light-mode-icon': string;
+        '--uds-dark-mode-icon': string;
+    };
+};
+
+/**
+ * Get all font face declarations for a given set of font IDs.
+ */
+declare function getFontFaceDeclarations(fontIds: FontID[]): FontDeclarationItemConfig[];
+
+/**
+ * Return CSS variables object based on font config.
+ * i.e. { --font-xyz: '"Font Family 1", "Font Family 2", sans-serif' }
+ *
+ * @example
+ * // 1. Use return value in style prop of an html element to assign font variables at runtime
+ *
+ * const fontVars = getFontStyles(fontConfig);
+ * <body style={fontVars}> {...} </body>
+ *
+ * // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
+ *
+ * const fontVars = getFontStyles(fontConfig);
+ * addRootVariables(fontVars);
+ *
+ */
+declare function getFontStyles(fontConfig: FontConfig): Record<"--uds-font-sans" | "--uds-font-serif" | "--uds-font-mono" | "--uds-font-sans-alt" | "--uds-font-serif-alt", string>;
+
+/**
+ * Return CSS variables object based on the motion config.
+ * i.e. { --uds-motion-damped-1--damping: '20.585796264350424' }
+ *
+ * @example
+ * // 1. Use return value in style prop of an html element to assign motion variables at runtime
+ *
+ * const motionVars = getMotionStyles(motionConfig);
+ * <body style={motionVars}> {...} </body>
+ *
+ * // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
+ *
+ * const motionVars = getMotionStyles(motionConfig);
+ * addRootVariables(motionVars);
+ *
+ */
+declare function getMotionStyles(motionConfig: MotionConfig): Record<"--uds-motion-damped-1-damping" | "--uds-motion-damped-1-stiffness" | "--uds-motion-damped-2-damping" | "--uds-motion-damped-2-stiffness" | "--uds-motion-damped-3-damping" | "--uds-motion-damped-3-stiffness" | "--uds-motion-damped-4-damping" | "--uds-motion-damped-4-stiffness" | "--uds-motion-smooth-1-damping" | "--uds-motion-smooth-1-stiffness" | "--uds-motion-smooth-2-damping" | "--uds-motion-smooth-2-stiffness" | "--uds-motion-smooth-3-damping" | "--uds-motion-smooth-3-stiffness" | "--uds-motion-smooth-4-damping" | "--uds-motion-smooth-4-stiffness" | "--uds-motion-subtle-1-damping" | "--uds-motion-subtle-1-stiffness" | "--uds-motion-subtle-2-damping" | "--uds-motion-subtle-2-stiffness" | "--uds-motion-subtle-3-damping" | "--uds-motion-subtle-3-stiffness" | "--uds-motion-subtle-4-damping" | "--uds-motion-subtle-4-stiffness" | "--uds-motion-bouncy-1-damping" | "--uds-motion-bouncy-1-stiffness" | "--uds-motion-bouncy-2-damping" | "--uds-motion-bouncy-2-stiffness" | "--uds-motion-bouncy-3-damping" | "--uds-motion-bouncy-3-stiffness" | "--uds-motion-bouncy-4-damping" | "--uds-motion-bouncy-4-stiffness" | "--uds-motion-veryBouncy-1-damping" | "--uds-motion-veryBouncy-1-stiffness" | "--uds-motion-veryBouncy-2-damping" | "--uds-motion-veryBouncy-2-stiffness" | "--uds-motion-veryBouncy-3-damping" | "--uds-motion-veryBouncy-3-stiffness" | "--uds-motion-veryBouncy-4-damping" | "--uds-motion-veryBouncy-4-stiffness", string>;
+
+declare function getScaleModeStyles(tokens: WebTokens): {
+    xSmall: {
+        [x: string]: string;
+    };
+    small: {
+        [x: string]: string;
+    };
+    medium: {
+        [x: string]: string;
+    };
+    large: {
+        [x: string]: string;
+    };
+    xLarge: {
+        [x: string]: string;
+    };
+    xxLarge: {
+        [x: string]: string;
+    };
+    xxxLarge: {
+        [x: string]: string;
+    };
+};
+
+/**
+ * Generate a single shadow value from a shadow preset configuration
+ *
+ * @param preset - The shadow preset configuration
+ * @param index - Optional index for numbered shadows (2-5)
+ * @param shadowType - The type of shadow (drop or inset)
+ * @returns A CSS box-shadow value string
+ */
+declare function getShadowLayerValue({ preset, prefix, shadowType, }: {
+    preset: ShadowPreset;
+    prefix?: string;
+    shadowType: ShadowType;
+}): string;
+/**
+ * Generate shadow values from the shadow config presets.
+ * Each size can have multiple shadow presets that are combined into a single box-shadow.
+ *
+ * For regular shadows:
+ * - Uses the outer shadow configuration from the shadow config
+ * - Uses CSS variables with the --uds-shadow-* prefix for shadow properties
+ * - The first shadow uses default variable names, subsequent shadows are numbered (e.g. --uds-shadow-2-*)
+ * - Shadow colors are scoped to the element, allowing for instance-specific colors
+ *
+ * For inset shadows:
+ * - Uses the inner shadow configuration from the shadow config
+ * - Uses CSS variables with the --uds-inset-shadow-* prefix for shadow properties
+ * - Adds the 'inset' keyword to each shadow value
+ * - Shadow colors are scoped to the element, allowing for instance-specific colors
+ *
+ * This approach ensures that both regular and inset shadows use the correct CSS variables
+ * set by the shadow utilities, while allowing for instance-specific color customization.
+ * The separation of variable namespaces allows both shadow types to be used together on the same element.
+ *
+ * When both shadow and inset-shadow utilities are used together on an element,
+ * they combine to create a box-shadow with both outer and inner shadows.
+ *
+ * @returns A record of shadow values by size (xs, sm, md, etc.)
+ */
+declare function getShadowPresetValues({ config, shadowType, }: {
+    config: UniversalTokensConfig;
+    shadowType: ShadowType;
+}): Record<string, string>;
+
+declare function getShadowStyles({ config, shadowType, }: {
+    config: UniversalTokensConfig;
+    shadowType: ShadowType;
+}): Record<".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-none" | ".uds-inset-shadow-xs" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-none" | ".uds-drop-shadow-xs", {
+    readonly [x: string]: "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-xs)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
+    readonly boxShadow: "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
+}>;
+
+export { type AddFontsPluginOptions, addFontsPlugin, getBaseTextVars, getColorModeStyles, getFontFaceDeclarations, getFontStyles, getMotionStyles, getResponsiveTextStyles, getScaleModeStyles, getShadowLayerValue, getShadowPresetValues, getShadowStyles };

package/dist/tailwind/utils.js

@@ -0,0 +1 @@
+export{addFontsPlugin,getColorModeStyles,getFontFaceDeclarations,getFontStyles,getMotionStyles,getScaleModeStyles,getShadowStyles}from"../chunk-CCW6IDIM.js";export{getBaseTextVars,getResponsiveTextStyles,getShadowLayerValue,getShadowPresetValues}from"../chunk-OSJVSN23.js";

package/dist/tokens/automation/configs.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("../../chunk-4UB6EIVI.cjs"),a=require("@yahoo/uds/fixtures");/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */var r={label:"Avatar",description:"An avatar is a visual element that represents a user or entity, usually shown as a circle or square with an image, icon, or initials. It's commonly used in profiles, comments, or messages to help identify people.",variants:{size:e.createVariantConfigWithProperties({label:"Size",description:"These sizes will apply across all variants",isConfigurable:!0,default:"md",options:["xs","sm","md","lg","xl"],layers:{root:e.createLayerConfig({label:"root",properties:{height:e.createConfigurableProperty({name:"height",label:"Height",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{xs:"6",sm:"7",md:"10",lg:"12",xl:"16"}}),width:e.createConfigurableProperty({name:"width",label:"Width",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{xs:"6",sm:"7",md:"10",lg:"12",xl:"16"}}),borderWidth:e.createConfigurableProperty({name:"borderWidth",label:"Border width",typeOfFixture:["borderWidths"],values:[a.borderWidths],defaults:{xs:"thin",sm:"thin",md:"thin",lg:"thin",xl:"thin"}}),textVariant:e.createConfigurableProperty({name:"textVariant",label:"Text variant",typeOfFixture:["textVariants"],values:[a.textVariants],defaults:{xs:"caption1",sm:"caption2",md:"headline1",lg:"title4",xl:"title3"}})}}),icon:e.createLayerConfig({label:"icon",properties:{iconSize:e.createConfigurableProperty({name:"iconSize",label:"Icon size",typeOfFixture:["iconSizes"],values:[a.iconSizes],defaults:{xs:"sm",sm:"sm",md:"md",lg:"lg",xl:"lg"}})}})}})},subComponents:{text:e.createSubComponentConfig({label:"Text",description:"",variants:{variant:e.createVariantConfigWithProperties({label:"Variant",description:"Shapes and sizes defined here will be applied across the entire family of Avatar (Icon, Image, Text)",isConfigurable:!0,options:["primary","secondary"],default:"primary",layers:{root:e.createLayerConfig({label:"root",properties:{color:e.createConfigurableProperty({name:"color",label:"text color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{primary:"brand",secondary:"secondary"}}),backgroundColor:e.createConfigurableProperty({name:"backgroundColor",label:"background color",typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],defaults:{primary:"primary",secondary:"secondary"}}),borderColor:e.createConfigurableProperty({name:"borderColor",label:"border color",typeOfFixture:["spectrumColors","linePaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.linePaletteColors,a.alwaysPaletteAliases],defaults:{primary:"brand",secondary:"secondary"}}),borderRadius:e.createConfigurableProperty({name:"borderRadius",label:"Border radius",typeOfFixture:["borderRadii"],values:[a.borderRadii],defaults:{primary:"full",secondary:"sm"}})}})}})}}),image:e.createSubComponentConfig({label:"Image",description:"",variants:{variant:e.createVariantConfigWithProperties({label:"Variant",description:"Shapes and sizes defined here will be applied across the entire family of Avatar (Icon, Image, Text)",isConfigurable:!0,options:["primary","secondary"],default:"primary",layers:{root:e.createLayerConfig({label:"root",properties:{borderColor:e.createConfigurableProperty({name:"borderColor",label:"border color",typeOfFixture:["spectrumColors","linePaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.linePaletteColors,a.alwaysPaletteAliases],defaults:{primary:"muted",secondary:"muted"}}),borderRadius:e.createConfigurableProperty({name:"borderRadius",label:"border radius",typeOfFixture:["borderRadii"],values:[a.borderRadii],defaults:{primary:"full",secondary:"sm"}})}})}})}}),icon:e.createSubComponentConfig({label:"Icon",description:"",variants:{variant:e.createVariantConfigWithProperties({label:"Variant",description:"Shapes and sizes defined here will be applied across the entire family of Avatar (Icon, Image, Text)",isConfigurable:!0,options:["primary","secondary"],default:"primary",layers:{root:e.createLayerConfig({label:"root",properties:{color:e.createConfigurableProperty({name:"color",label:"icon color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{primary:"muted",secondary:"muted"}}),backgroundColor:e.createConfigurableProperty({name:"backgroundColor",label:"background color",typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],defaults:{primary:"secondary",secondary:"secondary"}}),borderColor:e.createConfigurableProperty({name:"borderColor",label:"border color",typeOfFixture:["spectrumColors","linePaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.linePaletteColors,a.alwaysPaletteAliases],defaults:{primary:"primary",secondary:"primary"}}),borderRadius:e.createConfigurableProperty({name:"borderRadius",label:"border radius",typeOfFixture:["borderRadii"],values:[a.borderRadii],defaults:{primary:"full",secondary:"sm"}})}})}})}})}};var t={label:"Badge",description:"Component for demo purposes and testing the automation",variants:{size:e.createVariantConfigWithProperties({label:"Size",description:"These sizes will apply across all variants",isConfigurable:!0,default:"md",options:["xs","sm","md","lg"],layers:{root:e.createLayerConfig({label:"root",properties:{spacingHorizontal:e.createConfigurableProperty({name:"spacingHorizontal",label:"Spacing horizontal",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{xs:"2",sm:"4",md:"6",lg:"8"}}),spacingVertical:e.createConfigurableProperty({name:"spacingVertical",label:"Spacing vertical",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{xs:"0.5",sm:"1",md:"1.5",lg:"2"}}),gap:e.createConfigurableProperty({name:"gap",label:"Gap",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{xs:"2",sm:"4",md:"6",lg:"8"}}),textVariant:e.createConfigurableProperty({name:"textVariant",label:"Text variant",typeOfFixture:["textVariants"],values:[a.textVariants],defaults:{xs:"label4",sm:"label3",md:"label2",lg:"label1"}})}}),icon:e.createLayerConfig({label:"icon",properties:{size:e.createConfigurableProperty({name:"iconSize",label:"Icon size",typeOfFixture:["iconSizes"],values:[a.iconSizes],defaults:{xs:"sm",sm:"sm",md:"md",lg:"lg"}})}})}}),variant:e.createVariantConfigWithProperties({label:"Variants",description:"",isConfigurable:!0,default:"primary",options:["primary","secondary","brand","brand-secondary","alert","alert-secondary","warning","warning-secondary","positive","positive-secondary","info","info-secondary"],layers:{root:e.createLayerConfig({label:"root",properties:{backgroundColor:e.createConfigurableProperty({name:"backgroundColor",label:"Background color",typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],defaults:{primary:"primary",secondary:"secondary",brand:"brand","brand-secondary":"brand-secondary",alert:"alert","alert-secondary":"alert-secondary",warning:"warning","warning-secondary":"warning-secondary",positive:"positive","positive-secondary":"positive-secondary",info:"info","info-secondary":"info-secondary"}}),color:e.createConfigurableProperty({name:"color",label:"Text color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{primary:"primary",secondary:"secondary",brand:"brand","brand-secondary":"brand-secondary",alert:"alert","alert-secondary":"alert-secondary",warning:"warning","warning-secondary":"warning-secondary",positive:"positive","positive-secondary":"positive-secondary",info:"info","info-secondary":"info-secondary"}}),borderWidth:e.createConfigurableProperty({name:"borderWidth",label:"Border width",typeOfFixture:["borderWidths"],values:[a.borderWidths],defaults:{primary:"thin",secondary:"none",brand:"none","brand-secondary":"none",alert:"none","alert-secondary":"none",warning:"none","warning-secondary":"none",positive:"none","positive-secondary":"none",info:"none","info-secondary":"none"}}),borderColor:e.createConfigurableProperty({name:"borderColor",label:"border color",typeOfFixture:["spectrumColors","linePaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.linePaletteColors,a.alwaysPaletteAliases],defaults:{primary:"primary",secondary:"secondary",brand:"brand","brand-secondary":"brand-secondary",alert:"alert","alert-secondary":"alert-secondary",warning:"warning","warning-secondary":"warning-secondary",positive:"positive","positive-secondary":"positive-secondary",info:"info","info-secondary":"info-secondary"}}),borderRadius:e.createConfigurableProperty({name:"borderRadius",label:"Border radius",typeOfFixture:["borderRadii"],values:[a.borderRadii],defaults:{primary:"sm",secondary:"sm",brand:"sm","brand-secondary":"sm",alert:"sm","alert-secondary":"sm",warning:"sm","warning-secondary":"sm",positive:"sm","positive-secondary":"sm",info:"sm","info-secondary":"sm"}}),shadow:e.createConfigurableProperty({name:"shadow",label:"Drop shadow",typeOfFixture:["shadowVariants"],supportsCustom:!0,values:[a.shadowVariants],defaults:{primary:"2xl",secondary:"xl",brand:"md","brand-secondary":"xl",alert:"xl","alert-secondary":"xl",warning:"xl","warning-secondary":"xl",positive:"xl","positive-secondary":"xl",info:"xl","info-secondary":"sm"}}),insetShadow:e.createConfigurableProperty({name:"insetShadow",label:"Inset shadow",typeOfFixture:["shadowVariantsWithInvert"],supportsCustom:!0,values:[a.shadowVariantsWithInvert],defaults:{primary:"2xl-invert",secondary:"md-invert",brand:"md","brand-secondary":"xl",alert:"xl","alert-secondary":"xl-invert",warning:"xl","warning-secondary":"xl",positive:"xl","positive-secondary":"xl",info:"xl","info-secondary":"sm"}})}}),icon:e.createLayerConfig({label:"icon",properties:{color:e.createConfigurableProperty({name:"color",label:"Icon color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{primary:"primary",secondary:"secondary",brand:"brand","brand-secondary":"brand-secondary",alert:"alert","alert-secondary":"alert-secondary",warning:"warning","warning-secondary":"warning-secondary",positive:"positive","positive-secondary":"positive-secondary",info:"info","info-secondary":"info-secondary"}})}})}})}};var o={label:"Checkbox",description:"A checkbox is a small, interactive element that lets users select one or more options from a list.",variants:{size:e.createVariantConfigWithProperties({label:"size",isConfigurable:!0,options:["sm","md"],default:"md",description:"",layers:{root:e.createLayerConfig({label:"root",properties:{gap:e.createConfigurableProperty({name:"gap",label:"Gap",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"2",md:"2.5"}}),textVariant:e.createConfigurableProperty({name:"textVariant",label:"Text variant",typeOfFixture:["textVariants"],values:[a.textVariants],defaults:{sm:"label4",md:"label2"}})}}),checkbox:e.createLayerConfig({label:"checkbox",properties:{borderWidth:e.createConfigurableProperty({name:"borderWidth",label:"Checkbox border width",typeOfFixture:["borderWidths"],values:[a.borderWidths],defaults:{sm:"thin",md:"thin"}}),height:e.createConfigurableProperty({name:"height",label:"Checkbox height",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"4",md:"5"}}),width:e.createConfigurableProperty({name:"width",label:"Checkbox width",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"4",md:"5"}})}})}}),variant:e.createVariantConfigWithComponentStates({label:"variant",description:"",isConfigurable:!0,options:["primary","secondary","alert","alert-secondary"],default:"primary",componentStates:{value:e.createComponentStates({label:"value",options:["checked","unchecked","indeterminate"],layers:{root:e.createLayerConfig({label:"root",properties:{color:e.createConfigurableProperty({name:"color",label:"Label color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","disabled"],defaults:{primary:"primary",secondary:"primary",alert:"primary","alert-secondary":"primary"}})}}),checkbox:e.createLayerConfig({label:"checkbox",properties:{borderColor:e.createConfigurableProperty({name:"borderColor",label:"border color",typeOfFixture:["spectrumColors","linePaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.linePaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","disabled"],defaults:{primary:"tertiary",secondary:"tertiary",alert:"tertiary","alert-secondary":"tertiary"}}),backgroundColor:e.createConfigurableProperty({name:"backgroundColor",label:"Checkbox background color",typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","disabled"],defaults:{primary:"secondary",secondary:"secondary",alert:"secondary","alert-secondary":"secondary"}}),shadow:e.createConfigurableProperty({name:"shadow",label:"Drop shadow",typeOfFixture:["shadowVariants"],supportsCustom:!0,values:[a.shadowVariants],pseudoStates:["hover","pressed","disabled"],defaults:{primary:"none",secondary:"none",alert:"md","alert-secondary":"none"}}),insetShadow:e.createConfigurableProperty({name:"insetShadow",label:"Inset shadow",typeOfFixture:["shadowVariantsWithInvert"],supportsCustom:!0,values:[a.shadowVariantsWithInvert],pseudoStates:["hover","pressed","disabled"],defaults:{primary:"2xl-invert",secondary:"md-invert",alert:"md","alert-secondary":"xl"}})}}),checkboxIcon:e.createLayerConfig({label:"checkboxIcon",properties:{color:e.createConfigurableProperty({name:"color",label:"Icon color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","disabled"],defaults:{primary:"primary",secondary:"primary",alert:"primary","alert-secondary":"primary"}})}})}})}})}};var l={label:"Chip",description:"A chip is a small, interactive element that presents information, actions, or selections in a compact form — commonly used for tags, filters, or user input.",subComponents:{toggle:e.createSubComponentConfig({label:"Toggle",description:"",variants:{variant:e.createVariantConfigWithComponentStates({label:"Variant",description:"",isConfigurable:!0,default:"primary",options:["primary","secondary","brand","brand-secondary"],componentStates:{active:e.createComponentStates({label:"active",options:["on","off"],layers:{root:e.createLayerConfig({label:"root",properties:{backgroundColor:e.createConfigurableProperty({name:"backgroundColor",label:"Background color",typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"primary",secondary:"secondary",brand:"secondary","brand-secondary":"secondary"}}),color:e.createConfigurableProperty({name:"color",label:"Text color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"primary",secondary:"secondary",brand:"secondary","brand-secondary":"secondary"}}),borderWidth:e.createConfigurableProperty({name:"borderWidth",label:"Border width",typeOfFixture:["borderWidths"],pseudoStates:["hover","pressed"],values:[a.borderWidths],defaults:{primary:"thin",secondary:"none",brand:"none","brand-secondary":"none"}}),borderColor:e.createConfigurableProperty({name:"borderColor",label:"Border color",typeOfFixture:["spectrumColors","linePaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.linePaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"primary",secondary:"secondary",brand:"brand","brand-secondary":"brand-secondary"}}),shadow:e.createConfigurableProperty({name:"shadow",label:"Drop shadow",typeOfFixture:["shadowVariants"],supportsCustom:!0,values:[a.shadowVariants],pseudoStates:["hover","pressed"],defaults:{primary:"2xl",secondary:"xl",brand:"md","brand-secondary":"xl"}}),insetShadow:e.createConfigurableProperty({name:"insetShadow",label:"Inset shadow",typeOfFixture:["shadowVariantsWithInvert"],supportsCustom:!0,values:[a.shadowVariantsWithInvert],pseudoStates:["hover","pressed"],defaults:{primary:"2xl-invert",secondary:"md-invert",brand:"md","brand-secondary":"xl"}})}}),icon:e.createLayerConfig({label:"icon",properties:{color:e.createConfigurableProperty({name:"color",label:"Icon color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],pseudoStates:["hover","pressed"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{primary:"primary",secondary:"secondary",brand:"brand","brand-secondary":"brand-secondary"}})}})}})}})}}),dismissible:e.createSubComponentConfig({label:"Dismissible",description:"",variants:{variant:e.createVariantConfigWithProperties({label:"Variant",description:"",isConfigurable:!0,default:"primary",options:["primary","secondary","brand","brand-secondary"],layers:{root:e.createLayerConfig({label:"root",properties:{backgroundColor:e.createConfigurableProperty({name:"backgroundColor",label:"Background color",typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"gray-4",secondary:"blue-4",brand:"red-4","brand-secondary":"purple-4"}}),color:e.createConfigurableProperty({name:"color",label:"Text color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"gray-9",secondary:"blue-9",brand:"red-9","brand-secondary":"red-4"}}),borderWidth:e.createConfigurableProperty({name:"borderWidth",label:"Border width",typeOfFixture:["borderWidths"],pseudoStates:["hover","pressed"],values:[a.borderWidths],defaults:{primary:"thin",secondary:"none",brand:"none","brand-secondary":"none"}}),borderColor:e.createConfigurableProperty({name:"borderColor",label:"Border color",typeOfFixture:["spectrumColors","linePaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.linePaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"primary",secondary:"secondary",brand:"brand","brand-secondary":"brand-secondary"}}),shadow:e.createConfigurableProperty({name:"shadow",label:"Drop shadow",typeOfFixture:["shadowVariants"],supportsCustom:!0,values:[a.shadowVariants],pseudoStates:["hover","pressed"],defaults:{primary:"2xl",secondary:"xl",brand:"md","brand-secondary":"xl"}}),insetShadow:e.createConfigurableProperty({name:"insetShadow",label:"Inset shadow",typeOfFixture:["shadowVariantsWithInvert"],supportsCustom:!0,values:[a.shadowVariantsWithInvert],pseudoStates:["hover","pressed"],defaults:{primary:"2xl-invert",secondary:"md-invert",brand:"md","brand-secondary":"xl"}})}}),icon:e.createLayerConfig({label:"icon",properties:{color:e.createConfigurableProperty({name:"color",label:"Icon color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"primary",secondary:"secondary",brand:"brand","brand-secondary":"brand-secondary"}})}})}})}}),link:e.createSubComponentConfig({label:"Link",description:"",variants:{variant:e.createVariantConfigWithProperties({label:"Variant",description:"",isConfigurable:!0,default:"primary",options:["primary","secondary","brand","brand-secondary"],layers:{root:e.createLayerConfig({label:"root",properties:{backgroundColor:e.createConfigurableProperty({name:"backgroundColor",label:"Background color",typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"primary",secondary:"secondary",brand:"secondary","brand-secondary":"secondary"}}),color:e.createConfigurableProperty({name:"color",label:"Text color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"primary",secondary:"secondary",brand:"secondary","brand-secondary":"secondary"}}),borderWidth:e.createConfigurableProperty({name:"borderWidth",label:"Border width",typeOfFixture:["borderWidths"],values:[a.borderWidths],pseudoStates:["hover","pressed"],defaults:{primary:"thin",secondary:"none",brand:"none","brand-secondary":"none"}}),borderColor:e.createConfigurableProperty({name:"borderColor",label:"Border color",typeOfFixture:["spectrumColors","linePaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.linePaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"primary",secondary:"secondary",brand:"brand","brand-secondary":"brand-secondary"}}),shadow:e.createConfigurableProperty({name:"shadow",label:"Drop shadow",typeOfFixture:["shadowVariants"],supportsCustom:!0,values:[a.shadowVariants],pseudoStates:["hover","pressed"],defaults:{primary:"2xl",secondary:"xl",brand:"md","brand-secondary":"xl"}}),insetShadow:e.createConfigurableProperty({name:"insetShadow",label:"Inset shadow",typeOfFixture:["shadowVariantsWithInvert"],supportsCustom:!0,values:[a.shadowVariantsWithInvert],pseudoStates:["hover","pressed"],defaults:{primary:"2xl-invert",secondary:"md-invert",brand:"md","brand-secondary":"xl"}})}}),icon:e.createLayerConfig({label:"icon",properties:{color:e.createConfigurableProperty({name:"color",label:"Icon color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"primary",secondary:"secondary",brand:"brand","brand-secondary":"brand-secondary"}})}})}})}})},variants:{size:e.createVariantConfigWithProperties({label:"Size",description:"These sizes will apply across all variants",isConfigurable:!0,default:"md",options:["sm","md"],layers:{root:e.createLayerConfig({label:"root",properties:{spacingHorizontal:e.createConfigurableProperty({name:"spacingHorizontal",label:"Spacing horizontal",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"3",md:"3"}}),spacingVertical:e.createConfigurableProperty({name:"spacingVertical",label:"Spacing vertical",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"1",md:"1.5"}}),gap:e.createConfigurableProperty({name:"gap",label:"Gap",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"2",md:"2"}}),textVariant:e.createConfigurableProperty({name:"textVariant",label:"Text variant",typeOfFixture:["textVariants"],values:[a.textVariants],defaults:{sm:"label1",md:"label1"}}),borderRadius:e.createConfigurableProperty({name:"borderRadius",label:"Border radius",typeOfFixture:["borderRadii"],values:[a.borderRadii],defaults:{sm:"full",md:"full"}})}}),icon:e.createLayerConfig({label:"icon",properties:{size:e.createConfigurableProperty({name:"iconSize",label:"Icon size",typeOfFixture:["iconSizes"],values:[a.iconSizes],defaults:{sm:"sm",md:"md"}})}})}})}};var s={label:"Divider",description:"Divider lines are purely decorative and non-interactive, serving as a visual guide. Use as horizontal and vertical lines.",variants:{variant:e.createVariantConfigWithProperties({label:"Variant",description:"",isConfigurable:!0,default:"primary",options:["primary","secondary","tertiary","muted"],layers:{root:e.createLayerConfig({label:"root",properties:{gap:e.createConfigurableProperty({name:"gap",label:"Gap",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{primary:"2",secondary:"2",tertiary:"2",muted:"2"}})}}),line:e.createLayerConfig({label:"line",properties:{borderWidth:e.createConfigurableProperty({name:"borderWidth",label:"Thickness",typeOfFixture:["borderWidths"],values:[a.borderWidths.filter(e=>"none"!==e)],defaults:{primary:"thin",secondary:"thin",tertiary:"thin",muted:"thin"}}),borderColor:e.createConfigurableProperty({name:"borderColor",label:"Border color",typeOfFixture:["spectrumColors","linePaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.linePaletteColors,a.alwaysPaletteAliases],defaults:{primary:"primary",secondary:"secondary",tertiary:"tertiary",muted:"muted"}})}}),label:e.createLayerConfig({label:"label",properties:{textVariant:e.createConfigurableProperty({name:"textVariant",label:"text variant",typeOfFixture:["textVariants"],values:[a.textVariants],defaults:{primary:"label3",secondary:"label3",tertiary:"label3",muted:"label3"}}),color:e.createConfigurableProperty({name:"color",label:"Text color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{primary:"primary",secondary:"secondary",tertiary:"tertiary",muted:"muted"}})}})}})}};var i={label:"input",description:"An input field is a box where users can type or select information. It can also open a dropdown menu to show options or help collect data.",variants:{size:e.createVariantConfigWithProperties({label:"size",isConfigurable:!0,options:["md","lg"],default:"md",description:"",layers:{root:e.createLayerConfig({label:"root",properties:{}}),inputWrapper:e.createLayerConfig({label:"inputWrapper",properties:{spacingHorizontal:e.createConfigurableProperty({name:"spacingHorizontal",label:"Spacing horizontal",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{md:"3.5",lg:"4"}}),spacingVertical:e.createConfigurableProperty({name:"spacingVertical",label:"Spacing vertical",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{md:"2",lg:"3.5"}}),gap:e.createConfigurableProperty({name:"gap",label:"Gap",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{md:"3",lg:"3"}}),borderWidth:e.createConfigurableProperty({name:"borderWidth",label:"Border width",typeOfFixture:["borderWidths"],values:[a.borderWidths],pseudoStates:["pressed","invalid"],defaults:{md:"thin",lg:"thin"}}),borderRadius:e.createConfigurableProperty({name:"borderRadius",label:"Border radius",typeOfFixture:["borderRadii"],values:[a.borderRadii],defaults:{md:"md",lg:"md"}}),textVariant:e.createConfigurableProperty({name:"textVariant",label:"Input text style",typeOfFixture:["textVariants"],pseudoStates:["hover"],values:[a.textVariants],defaults:{md:"label2",lg:"label2"}})}}),input:e.createLayerConfig({label:"input",properties:{height:e.createConfigurableProperty({name:"height",label:"Input element height",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{md:"6",lg:"6"}})}}),startIcon:e.createLayerConfig({label:"startIcon",properties:{size:e.createConfigurableProperty({name:"iconSize",label:"Start icon size",typeOfFixture:["iconSizes"],values:[a.iconSizes],defaults:{md:"md",lg:"md"}})}}),endIcon:e.createLayerConfig({label:"endIcon",properties:{size:e.createConfigurableProperty({name:"iconSize",label:"End icon size",typeOfFixture:["iconSizes"],values:[a.iconSizes],defaults:{md:"md",lg:"md"}})}}),label:e.createLayerConfig({label:"label",properties:{textVariant:e.createConfigurableProperty({name:"textVariant",label:"Label text style",typeOfFixture:["textVariants"],values:[a.textVariants],defaults:{md:"label4",lg:"label4"}})}}),helperIcon:e.createLayerConfig({label:"helperIcon",properties:{size:e.createConfigurableProperty({name:"iconSize",label:"Helper text icon size",typeOfFixture:["iconSizes"],values:[a.iconSizes],defaults:{md:"sm",lg:"sm"}})}}),helperText:e.createLayerConfig({label:"helperText",properties:{textVariant:e.createConfigurableProperty({name:"textVariant",label:"Label text style",typeOfFixture:["textVariants"],values:[a.textVariants],defaults:{md:"label4",lg:"label4"}})}})}}),variant:e.createVariantConfigWithComponentStates({label:"variant",description:"",isConfigurable:!0,options:["default"],default:"default",componentStates:{value:e.createComponentStates({label:"value",options:["filled","empty"],layers:{root:e.createLayerConfig({label:"root",properties:{}}),inputWrapper:e.createLayerConfig({label:"input",properties:{borderColor:e.createConfigurableProperty({name:"borderColor",label:"Border color",typeOfFixture:["spectrumColors","linePaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.linePaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","focus-within","invalid","invalid&hover","invalid&pressed","readonly","disabled"],defaults:{default:"tertiary"}}),backgroundColor:e.createConfigurableProperty({name:"backgroundColor",label:"Background color",typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","focus-within","invalid","invalid&hover","invalid&pressed","readonly","disabled"],defaults:{default:"primary"}})}}),input:e.createLayerConfig({label:"input",properties:{color:e.createConfigurableProperty({name:"color",label:"Input text color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","focus-within","invalid","invalid&hover","invalid&pressed","readonly","disabled"],defaults:{default:"muted"}})}}),inputPlaceholder:e.createLayerConfig({label:"inputPlaceholder",pseudoSelector:"::placeholder",properties:{color:e.createConfigurableProperty({name:"color",label:"Input text color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","focus-within","invalid","invalid&hover","invalid&pressed","readonly","disabled"],defaults:{default:"muted"}})}}),startIcon:e.createLayerConfig({label:"startIcon",properties:{color:e.createConfigurableProperty({name:"color",label:"Start icon color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","focus-within","invalid","invalid&hover","invalid&pressed","readonly","disabled"],defaults:{default:"muted"}})}}),endIcon:e.createLayerConfig({label:"endIcon",properties:{color:e.createConfigurableProperty({name:"color",label:"End icon color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","focus-within","invalid","invalid&hover","invalid&pressed","readonly","disabled"],defaults:{default:"muted"}})}}),label:e.createLayerConfig({label:"label",properties:{color:e.createConfigurableProperty({name:"color",label:"Label color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","focus-within","invalid","invalid&hover","invalid&pressed","readonly","disabled"],defaults:{default:"muted"}})}}),labelRequired:e.createLayerConfig({label:"labelRequired",properties:{color:e.createConfigurableProperty({name:"color",label:"Required color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","focus-within","invalid","invalid&hover","invalid&pressed","readonly","disabled"],defaults:{default:"muted"}})}}),helperIcon:e.createLayerConfig({label:"helperIcon",properties:{color:e.createConfigurableProperty({name:"color",label:"Helper icon color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","focus-within","invalid","invalid&hover","invalid&pressed","readonly","disabled"],defaults:{default:"muted"}})}}),helperText:e.createLayerConfig({label:"helpText",properties:{color:e.createConfigurableProperty({name:"color",label:"Helper text color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed","focus-within","invalid","invalid&hover","invalid&pressed","readonly","disabled"],defaults:{default:"brand"}})}})}})}})}};var n={label:"Link",description:"Customizing your own buttons involves adjusting text styles, icon sizes, and spacing values to create a personalized button.",variants:{textStyle:e.createVariantConfigWithProperties({label:"Text Style",description:"",isConfigurable:!0,default:"title1",options:a.textVariantsWithoutEmphasized,layers:{root:e.createLayerConfig({label:"root",properties:{gap:e.createConfigurableProperty({name:"gap",label:"Gap",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{display1:"2",display2:"2",display3:"2",title1:"2",title2:"2",title3:"2",title4:"2",headline1:"2",body1:"2",label1:"2",label2:"2",label3:"2",label4:"2",caption1:"2",caption2:"2",legal1:"2",ui1:"2",ui2:"2",ui3:"2",ui4:"2",ui5:"2",ui6:"2"}})}}),icon:e.createLayerConfig({label:"icon",properties:{size:e.createConfigurableProperty({name:"iconSize",label:"Icon size",typeOfFixture:["iconSizes"],values:[a.iconSizes],defaults:{display1:"lg",display2:"lg",display3:"lg",title1:"md",title2:"md",title3:"md",title4:"md",headline1:"md",body1:"md",label1:"md",label2:"md",label3:"md",label4:"sm",caption1:"md",caption2:"sm",legal1:"md",ui1:"md",ui2:"md",ui3:"md",ui4:"md",ui5:"md",ui6:"md"}})}})}}),variant:e.createVariantConfigWithProperties({label:"Variants",description:"Variants",isConfigurable:!0,default:"primary",options:["primary","secondary","tertiary","on-color"],layers:{root:e.createLayerConfig({label:"root",properties:{color:e.createConfigurableProperty({name:"color",label:"Text color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"primary",secondary:"secondary",tertiary:"tertiary","on-color":"on-color"}}),textDecorationLine:e.createConfigurableProperty({name:"textDecorationLine",label:"Underline",typeOfFixture:["textDecorationLines"],values:[a.textDecorationLines],pseudoStates:["hover","pressed"],defaults:{primary:"none",secondary:"none",tertiary:"none","on-color":"none"}})}}),iconStart:e.createLayerConfig({label:"iconStart",properties:{color:e.createConfigurableProperty({name:"color",label:"Icon start color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],pseudoStates:["hover","pressed"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{primary:"primary",secondary:"secondary",tertiary:"tertiary","on-color":"on-color"}})}}),iconEnd:e.createLayerConfig({label:"iconEnd",properties:{color:e.createConfigurableProperty({name:"color",label:"Icon end color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],pseudoStates:["hover","pressed"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{primary:"primary",secondary:"secondary",tertiary:"tertiary","on-color":"on-color"}})}})}})}};var d={label:"Menu",description:"A menu is a component that offers a list of choices to the user, such as a set of actions or functions. ",variants:{size:e.createVariantConfigWithProperties({label:"size",description:"",isConfigurable:!0,options:["default"],default:"default",layers:{root:e.createLayerConfig({label:"root",properties:{}}),startIcon:e.createLayerConfig({label:"startIcon",properties:{size:e.createConfigurableProperty({name:"iconSize",label:"Icon size",typeOfFixture:["iconSizes"],values:[a.iconSizes],defaults:{default:"sm"}})}}),endIcon:e.createLayerConfig({label:"endIcon",properties:{size:e.createConfigurableProperty({name:"iconSize",label:"Icon size",typeOfFixture:["iconSizes"],values:[a.iconSizes],defaults:{default:"sm"}})}})}})},subComponents:{item:e.createSubComponentConfig({label:"Item",description:"",variants:{variant:e.createVariantConfigWithComponentStates({label:"variant",description:"",isConfigurable:!0,options:["default"],default:"default",componentStates:{active:e.createComponentStates({label:"active",options:["on","off"],layers:{root:e.createLayerConfig({label:"root",properties:{backgroundColor:e.createConfigurableProperty({name:"backgroundColor",pseudoStates:["hover","focused"],label:"background color",typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],defaults:{default:"brand-secondary"}})}}),text:e.createLayerConfig({label:"text",properties:{color:e.createConfigurableProperty({name:"color",label:"Text color",pseudoStates:["hover","focused"],typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{default:"brand"}}),textVariant:e.createConfigurableProperty({name:"textVariant",label:"Text variant",typeOfFixture:["textVariants"],pseudoStates:["hover","focused"],values:[a.textVariants],defaults:{default:"label2"}})}}),icon:e.createLayerConfig({label:"icon",properties:{color:e.createConfigurableProperty({name:"color",label:"Icon color",pseudoStates:["hover","focused"],typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{default:"brand"}})}})}})}})}}),itemCheckbox:e.createSubComponentConfig({label:"ItemCheckbox",description:"",variants:{variant:e.createVariantConfigWithComponentStates({label:"variant",description:"",isConfigurable:!0,options:["default"],default:"default",componentStates:{active:e.createComponentStates({label:"active",options:["on","off"],layers:{root:e.createLayerConfig({label:"root",properties:{backgroundColor:e.createConfigurableProperty({name:"backgroundColor",label:"background color",pseudoStates:["hover","focused"],typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],defaults:{default:"brand-secondary"}})}}),text:e.createLayerConfig({label:"text",properties:{textVariant:e.createConfigurableProperty({name:"textVariant",label:"Text variant",typeOfFixture:["textVariants"],pseudoStates:["hover","focused"],values:[a.textVariants],defaults:{default:"label2"}}),color:e.createConfigurableProperty({name:"color",label:"Text color",pseudoStates:["hover","focused"],typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{default:"brand"}})}}),startIcon:e.createLayerConfig({label:"startIcon",properties:{color:e.createConfigurableProperty({name:"color",label:"Icon color",pseudoStates:["hover","focused"],typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{default:"brand"}})}}),endIcon:e.createLayerConfig({label:"endIcon",properties:{color:e.createConfigurableProperty({name:"color",label:"Icon color",pseudoStates:["hover","focused"],typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{default:"brand"}})}})}})}})}}),divider:e.createSubComponentConfig({label:"divider",description:"",variants:{variant:e.createVariantConfigWithProperties({label:"variant",description:"",isConfigurable:!0,options:["default"],default:"default",layers:{root:e.createLayerConfig({label:"root",properties:{}}),text:e.createLayerConfig({label:"text",properties:{color:e.createConfigurableProperty({name:"color",label:"text color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{default:"muted"}}),textVariant:e.createConfigurableProperty({name:"textVariant",label:"text variant",typeOfFixture:["textVariants"],values:[a.textVariants],defaults:{default:"label3"}})}}),line:e.createLayerConfig({label:"line",properties:{borderWidth:e.createConfigurableProperty({name:"borderWidth",label:"line thickness",typeOfFixture:["borderWidths"],values:[a.borderWidths.filter(e=>"none"!==e)],defaults:{default:"thin"}}),borderColor:e.createConfigurableProperty({name:"borderColor",label:"line color",typeOfFixture:["spectrumColors","linePaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.linePaletteColors,a.alwaysPaletteAliases],defaults:{default:"transparent"}})}})}})}})}};var p={label:"Radio",description:"Component for demo purposes and testing the automation",variants:{variant:e.createVariantConfigWithComponentStates({label:"Variant",description:"Preview the colors, spacing values, and motion effects of your component at their default size.",isConfigurable:!0,options:["primary","secondary","alert","alert-secondary"],default:"primary",componentStates:{value:e.createComponentStates({label:"value",options:["checked","unchecked"],layers:{root:e.createLayerConfig({label:"root",properties:{color:e.createConfigurableProperty({name:"color",label:"Label color",typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"primary",secondary:"secondary",alert:"alert","alert-secondary":"alert-secondary"}})}}),radio:e.createLayerConfig({label:"radio",properties:{borderColor:e.createConfigurableProperty({name:"borderColor",label:"Radio border color",typeOfFixture:["spectrumColors","linePaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.linePaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"tertiary",secondary:"secondary",alert:"alert","alert-secondary":"alert-secondary"}}),backgroundColor:e.createConfigurableProperty({name:"backgroundColor",label:"Radio background color",typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"secondary",secondary:"secondary",alert:"secondary","alert-secondary":"secondary"}}),shadow:e.createConfigurableProperty({name:"shadow",label:"Drop shadow",typeOfFixture:["shadowVariants"],supportsCustom:!0,values:[a.shadowVariants],pseudoStates:["hover","pressed"],defaults:{primary:"2xl",secondary:"xl",alert:"xl","alert-secondary":"xl"}}),insetShadow:e.createConfigurableProperty({name:"insetShadow",label:"Inset shadow",typeOfFixture:["shadowVariantsWithInvert"],supportsCustom:!0,values:[a.shadowVariantsWithInvert],pseudoStates:["hover","pressed"],defaults:{primary:"2xl-invert",secondary:"md-invert",alert:"xl","alert-secondary":"xl-invert"}})}}),radioCircle:e.createLayerConfig({label:"radioCircle",properties:{backgroundColor:e.createConfigurableProperty({name:"backgroundColor",label:"Radio circle color",typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],pseudoStates:["hover","pressed"],defaults:{primary:"brand",secondary:"brand-secondary",alert:"alert","alert-secondary":"alert-secondary"}})}})}})}}),size:e.createVariantConfigWithProperties({label:"Size",description:"These sizes will apply across all variants",isConfigurable:!0,default:"sm",options:["sm","md"],layers:{root:e.createLayerConfig({label:"root",properties:{gap:e.createConfigurableProperty({name:"gap",label:"Gap",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"2",md:"2.5"}}),textVariant:e.createConfigurableProperty({name:"textVariant",label:"Text variant",typeOfFixture:["textVariants"],values:[a.textVariants],defaults:{sm:"label4",md:"label2"}})}}),radio:e.createLayerConfig({label:"radio",properties:{borderWidth:e.createConfigurableProperty({name:"borderWidth",label:"Radio border width",typeOfFixture:["borderWidths"],values:[a.borderWidths],defaults:{sm:"thin",md:"thin"}}),height:e.createConfigurableProperty({name:"height",label:"Radio height",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"4",md:"5"}}),width:e.createConfigurableProperty({name:"width",label:"Radio width",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"4",md:"5"}})}})}})}};var c={label:"Switch",description:"A switch is a toggle control that lets users turn a setting on or off. It’s commonly used for binary actions like enabling or disabling a feature.",variants:{variant:e.createVariantConfigWithComponentStates({label:"Variant",description:"A switch is a toggle control that lets users turn a setting on or off. It’s commonly used for binary actions like enabling or disabling a feature.",default:"default",options:["default"],isConfigurable:!0,componentStates:{active:e.createComponentStates({label:"active",options:["on","off"],layers:{root:e.createLayerConfig({label:"root",properties:{labelColor:e.createConfigurableProperty({name:"color",label:"Label color",pseudoStates:["hover"],typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors,a.alwaysPaletteAliases],defaults:{default:"secondary"}})}}),switch:e.createLayerConfig({label:"switch",properties:{backgroundColor:e.createConfigurableProperty({name:"backgroundColor",label:"Track background color",pseudoStates:["hover"],typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],defaults:{default:"brand"}}),borderColor:e.createConfigurableProperty({name:"borderColor",label:"Track border color",pseudoStates:["hover"],typeOfFixture:["spectrumColors","linePaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.linePaletteColors,a.alwaysPaletteAliases],defaults:{default:"brand"}}),shadow:e.createConfigurableProperty({name:"shadow",label:"Drop shadow",typeOfFixture:["shadowVariants"],supportsCustom:!0,values:[a.shadowVariants],pseudoStates:["hover"],defaults:{default:"xl"}}),insetShadow:e.createConfigurableProperty({name:"insetShadow",label:"Inset shadow",typeOfFixture:["shadowVariantsWithInvert"],supportsCustom:!0,values:[a.shadowVariantsWithInvert],pseudoStates:["hover"],defaults:{default:"2xl-invert"}})}}),handle:e.createLayerConfig({label:"handle",properties:{backgroundColor:e.createConfigurableProperty({name:"backgroundColor",label:"Handle color",pseudoStates:["hover"],typeOfFixture:["spectrumColors","backgroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.backgroundPaletteColors,a.alwaysPaletteAliases],defaults:{default:"primary"}}),shadow:e.createConfigurableProperty({name:"shadow",label:"Drop shadow",typeOfFixture:["shadowVariants"],supportsCustom:!0,values:[a.shadowVariants],pseudoStates:["hover"],defaults:{default:"xl"}}),insetShadow:e.createConfigurableProperty({name:"insetShadow",label:"Inset shadow",typeOfFixture:["shadowVariantsWithInvert"],supportsCustom:!0,values:[a.shadowVariantsWithInvert],pseudoStates:["hover"],defaults:{default:"2xl-invert"}})}}),handleIcon:e.createLayerConfig({label:"handleIcon",properties:{color:e.createConfigurableProperty({name:"color",label:"Icon color",pseudoStates:["hover"],typeOfFixture:["spectrumColors","foregroundPaletteColors","alwaysPaletteAliases"],values:[a.spectrumColors,a.foregroundPaletteColors],defaults:{default:"brand"}})}})}})}}),size:e.createVariantConfigWithProperties({label:"Size",description:"These sizes will apply across all variants",isConfigurable:!0,default:"md",options:["sm","md"],layers:{root:e.createLayerConfig({label:"root",properties:{spacingHorizontal:e.createConfigurableProperty({name:"spacingHorizontal",label:"Spacing horizontal",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"0",md:"0"}}),spacingVertical:e.createConfigurableProperty({name:"spacingVertical",label:"Spacing vertical",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"1",md:"1.5"}}),gap:e.createConfigurableProperty({name:"gap",label:"Gap",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"2",md:"2"}}),textVariant:e.createConfigurableProperty({name:"textVariant",label:"Text variant",typeOfFixture:["textVariants"],values:[a.textVariants],defaults:{sm:"label4",md:"label2"}})}}),switch:e.createLayerConfig({label:"switch",properties:{height:e.createConfigurableProperty({name:"height",label:"Track height",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"5",md:"7"}}),width:e.createConfigurableProperty({name:"width",label:"Track width",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"8",md:"12"}}),borderWidth:e.createConfigurableProperty({name:"borderWidth",label:"Track border width",typeOfFixture:["borderWidths"],values:[a.borderWidths],defaults:{sm:"none",md:"none"}}),padding:e.createConfigurableProperty({name:"padding",label:"Track padding",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"0.5",md:"0.5"}})}}),handle:e.createLayerConfig({label:"Handle",properties:{height:e.createConfigurableProperty({name:"height",label:"Track height",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"4",md:"6"}}),width:e.createConfigurableProperty({name:"width",label:"Track width",typeOfFixture:["spacingAliases"],values:[a.spacingAliases],defaults:{sm:"4",md:"6"}})}}),handleIcon:e.createLayerConfig({label:"Icon",properties:{size:e.createConfigurableProperty({name:"iconSize",label:"Icon size",typeOfFixture:["iconSizes"],values:[a.iconSizes],defaults:{sm:"sm",md:"sm"}})}})}})}};exports.AvatarConfig=r,exports.BadgeConfig=t,exports.CheckboxConfig=o,exports.ChipConfig=l,exports.DividerConfig=s,exports.InputConfig=i,exports.LinkConfig=n,exports.MenuConfig=d,exports.RadioConfig=p,exports.SwitchConfig=c;

package/dist/tokens/automation/configs.d.cts

@@ -0,0 +1,110 @@
+import { e as VariantConfigWithProperties, d as SubComponentConfig, f as VariantConfigWithComponentStates } from '../../index-BPXfpHkp.cjs';
+import '@yahoo/uds/fixtures';
+import '../../types-gGaZxCMr.cjs';
+import '@yahoo/uds-icons/types';
+import 'motion/react';
+import 'react';
+import 'type-fest';
+
+declare const AvatarConfig: {
+    label: string;
+    description: string;
+    variants: {
+        size: VariantConfigWithProperties<string>;
+    };
+    subComponents: {
+        text: SubComponentConfig;
+        image: SubComponentConfig;
+        icon: SubComponentConfig;
+    };
+};
+
+declare const BadgeConfig: {
+    label: string;
+    description: string;
+    variants: {
+        size: VariantConfigWithProperties<string>;
+        variant: VariantConfigWithProperties<string>;
+    };
+};
+
+declare const CheckboxConfig: {
+    label: string;
+    description: string;
+    variants: {
+        size: VariantConfigWithProperties<string>;
+        variant: VariantConfigWithComponentStates<string>;
+    };
+};
+
+declare const ChipConfig: {
+    label: string;
+    description: string;
+    subComponents: {
+        toggle: SubComponentConfig;
+        dismissible: SubComponentConfig;
+        link: SubComponentConfig;
+    };
+    variants: {
+        size: VariantConfigWithProperties<string>;
+    };
+};
+
+declare const DividerConfig: {
+    label: string;
+    description: string;
+    variants: {
+        variant: VariantConfigWithProperties<string>;
+    };
+};
+
+declare const InputConfig: {
+    label: string;
+    description: string;
+    variants: {
+        size: VariantConfigWithProperties<string>;
+        variant: VariantConfigWithComponentStates<string>;
+    };
+};
+
+declare const LinkConfig: {
+    label: string;
+    description: string;
+    variants: {
+        textStyle: VariantConfigWithProperties<string>;
+        variant: VariantConfigWithProperties<string>;
+    };
+};
+
+declare const MenuConfig: {
+    label: string;
+    description: string;
+    variants: {
+        size: VariantConfigWithProperties<string>;
+    };
+    subComponents: {
+        item: SubComponentConfig;
+        itemCheckbox: SubComponentConfig;
+        divider: SubComponentConfig;
+    };
+};
+
+declare const RadioConfig: {
+    label: string;
+    description: string;
+    variants: {
+        variant: VariantConfigWithComponentStates<string>;
+        size: VariantConfigWithProperties<string>;
+    };
+};
+
+declare const SwitchConfig: {
+    label: string;
+    description: string;
+    variants: {
+        variant: VariantConfigWithComponentStates<string>;
+        size: VariantConfigWithProperties<string>;
+    };
+};
+
+export { AvatarConfig, BadgeConfig, CheckboxConfig, ChipConfig, DividerConfig, InputConfig, LinkConfig, MenuConfig, RadioConfig, SwitchConfig };