@yahoo/uds 3.59.0-beta.1 → 3.59.0-beta.2

package/src/tokens/automation/utils/index.ts

@@ -1,939 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import type {
-  ComponentConfig,
-  ComponentStateConfig,
-  LayerConfig,
-  PossibleStates,
-  SubComponentConfig,
-  VariantConfig,
-  VariantConfigWithComponentStates,
-  VariantConfigWithProperties,
-} from '@yahoo/uds/tokens';
-import type {
-  ConfigurablePropertiesName,
-  SelectedConfigurableProperty,
-} from '@yahoo/uds/tokens/automation/properties';
-import { configurableProperties } from '@yahoo/uds/tokens/automation/properties';
-import { isFunction, lowerCase, mergeWith } from 'lodash';
-
-import { generateSchemaKey } from './generateSchemaKey';
-
-type ThemeFn = (path: string) => string;
-
-type SchemaStateValue<T = any> = {
-  type: string;
-  valueType: 'alias' | 'custom';
-  value: T; // You might want to define a more specific type here
-};
-
-type VariableState = {
-  rest: SchemaStateValue;
-} & {
-  [K in PossibleStates]?: SchemaStateValue;
-};
-
-/**
- * Map our "states" to pseudo-classes (hover => :hover, pressed => :active, etc.).
- * Adjust or extend as needed.
- */
-const statePseudoMap: Record<PossibleStates | 'rest', string> = {
-  rest: '',
-  hover: ':hover:not(:has(:disabled))',
-  pressed: ':active:not(:has(:disabled))',
-  focused: ':focus',
-  'focus-within': ':focus-within',
-  // TODO: some of these are very specific to input we need to find a way to make them generic
-  invalid: ':has(input[aria-invalid="true"])',
-  'focused-keyboard': ':focus-visible',
-  visited: ':visited',
-  readonly: ':has(input:read-only)',
-  disabled: ':has(:disabled)',
-
-  // Compound selectors
-  'invalid&hover': ':has(input[aria-invalid="true"]):hover:not(:has(:disabled))',
-  'invalid&pressed': ':has(input[aria-invalid="true"]):active:not(:has(:disabled))',
-};
-
-export const statePseudoMapDocsMode: Record<PossibleStates | 'rest', string> = {
-  rest: '',
-  hover: 'hover',
-  pressed: 'active',
-  focused: 'focus',
-  'focus-within': 'focus-within',
-  invalid: 'has-input-invalid',
-  'focused-keyboard': 'focus-visible',
-  visited: 'visited',
-  readonly: 'input-readonly',
-  disabled: 'has-disabled',
-
-  // Compound selectors
-  'invalid&hover': 'has-input-invalid-and-hover',
-  'invalid&pressed': 'has-input-invalid-and-active',
-};
-
-export function findFixtureType(
-  property: SelectedConfigurableProperty<ConfigurablePropertiesName, string>,
-  variantKey: string,
-): string {
-  const defaultValue = property.defaults[variantKey];
-  const typeOfFixture = property.typeOfFixture;
-  // find the corresponding fixture type
-  let index = 0;
-  property.values.forEach((arrayOfValues, i) => {
-    if (arrayOfValues.includes(defaultValue)) {
-      index = i;
-    }
-  });
-  return typeOfFixture[index];
-}
-
-// We define a helper to produce the minimal shape at runtime
-// TODO: the return type shouldn't be `any` we need to have some sort of type safety for this, at least, just the shape
-export function toMinimalDbConfigObject<C extends ComponentConfig>(config: C): any {
-  const result: any = {};
-  // 1) "defaults"
-  // For each variant -> use the "default" if it is in `options`
-  const defaultsObj: any = {};
-  for (const variantKey in config.variants) {
-    const v = config.variants[variantKey];
-    // For runtime, we trust the user that "v.default" is in "v.options"
-    defaultsObj[variantKey] = v.default;
-  }
-  result.defaults = defaultsObj;
-
-  result.variables = {};
-  // for each variant key
-  for (const variantKey in config.variants) {
-    const variantConfig = config.variants[variantKey];
-    // for each variant option
-    for (const variantOption of variantConfig.options) {
-      // if we have componentStates
-      if ((variantConfig as VariantConfigWithComponentStates<string>).componentStates) {
-        const componentStates = (variantConfig as VariantConfigWithComponentStates<string>)
-          .componentStates;
-        // for each component state key
-        for (const componentStateKey in componentStates) {
-          const componentState = componentStates[componentStateKey];
-          // for each component state option
-          for (const componentStateOption of componentState.options) {
-            // for each layer key
-            for (const layerKey in componentState.layers) {
-              const layer = componentState.layers[layerKey];
-              // for each prop
-              const schemaKey = generateSchemaKey({
-                variantKey,
-                variantValue: variantOption,
-                stateKey: componentStateKey,
-                stateValue: componentStateOption,
-                layer: layerKey,
-              });
-
-              result.variables[schemaKey] = {};
-              for (const propKey in layer.properties) {
-                const prop = layer.properties[propKey];
-                // if the property has component states
-                // TODO: create a concrete type instead of using `any`
-                const variableObject: any = {
-                  [propKey]: {
-                    // for each pseudo state
-                    rest: {
-                      type: findFixtureType(prop, variantOption),
-                      valueType: 'alias',
-                      value: prop.defaults[variantOption],
-                    },
-                  },
-                };
-                if (prop.pseudoStates) {
-                  for (const pseudoState of prop.pseudoStates) {
-                    variableObject[propKey][pseudoState] = {
-                      type: findFixtureType(prop, variantOption),
-                      valueType: 'alias',
-                      value: prop.defaults[variantOption],
-                    };
-                  }
-                }
-                // add it to the result
-                result.variables[schemaKey] = {
-                  ...result.variables[schemaKey],
-                  ...variableObject,
-                };
-              }
-            }
-          }
-        }
-      }
-      // we don't have component states
-      else {
-        // for each layer key
-        for (const layerKey in (variantConfig as VariantConfigWithProperties).layers) {
-          const layer = (variantConfig as VariantConfigWithProperties).layers[layerKey];
-          // for each prop
-          const schemaKey = generateSchemaKey({
-            variantKey,
-            variantValue: variantOption,
-            layer: layerKey,
-          });
-
-          result.variables[schemaKey] = {};
-          for (const propKey in layer.properties) {
-            const prop = layer.properties[propKey];
-            // if the property has component states
-            // TODO: create a concrete type instead of using `any`
-            const variableObject: any = {
-              [propKey]: {
-                rest: {
-                  type: findFixtureType(prop, variantOption),
-                  valueType: 'alias',
-                  value: prop.defaults[variantOption],
-                },
-              },
-            };
-            if (prop.pseudoStates) {
-              for (const pseudoState of prop.pseudoStates) {
-                variableObject[propKey][pseudoState] = {
-                  type: findFixtureType(prop, variantOption),
-                  valueType: 'alias',
-                  value: prop.defaults[variantOption],
-                };
-              }
-            }
-            // add it to the result
-            result.variables[schemaKey] = {
-              ...result.variables[schemaKey],
-              ...variableObject,
-            };
-          }
-        }
-      }
-    }
-  }
-
-  // if we have sub components
-  if (config.subComponents) {
-    const { subComponents } = config;
-    for (const subComponentKey in subComponents) {
-      // for each variant key
-      for (const variantKey in subComponents[subComponentKey].variants) {
-        const variantConfig = subComponents[subComponentKey].variants[variantKey];
-        // add to the defaults
-        result.defaults[variantKey] = variantConfig.default;
-        // for each variant option
-        for (const variantOption of variantConfig.options) {
-          // if we have componentStates
-          if ((variantConfig as VariantConfigWithComponentStates<string>).componentStates) {
-            const componentStates = (variantConfig as VariantConfigWithComponentStates<string>)
-              .componentStates;
-            // for each component state key
-            for (const componentStateKey in componentStates) {
-              const componentState = componentStates[componentStateKey];
-              // for each component state option
-              for (const componentStateOption of componentState.options) {
-                // for each layer key
-                for (const layerKey in componentState.layers) {
-                  const layer = componentState.layers[layerKey];
-                  // for each prop
-                  const schemaKey = generateSchemaKey({
-                    variantKey,
-                    variantValue: variantOption,
-                    stateKey: componentStateKey,
-                    stateValue: componentStateOption,
-                    layer: layerKey,
-                    subComponentName: subComponentKey,
-                  });
-                  result.variables[schemaKey] = {};
-                  for (const propKey in layer.properties) {
-                    const prop = layer.properties[propKey];
-                    // if the property has component states
-                    // TODO: create a concrete type instead of using `any`
-                    const variableObject: any = {
-                      [propKey]: {
-                        rest: {
-                          type: findFixtureType(prop, variantOption),
-                          valueType: 'alias',
-                          value: prop.defaults[variantOption],
-                        },
-                      },
-                    };
-                    if (prop.pseudoStates) {
-                      for (const pseudoState of prop.pseudoStates) {
-                        variableObject[propKey][pseudoState] = {
-                          type: findFixtureType(prop, variantOption),
-                          valueType: 'alias',
-                          value: prop.defaults[variantOption],
-                        };
-                      }
-                    }
-                    // add it to the result
-                    result.variables[schemaKey] = {
-                      ...result.variables[schemaKey],
-                      ...variableObject,
-                    };
-                  }
-                }
-              }
-            }
-          }
-          // we don't have component states
-          else {
-            // for each layer key
-            for (const layerKey in (variantConfig as VariantConfigWithProperties).layers) {
-              const layer = (variantConfig as VariantConfigWithProperties).layers[layerKey];
-              // for each prop
-              const schemaKey = generateSchemaKey({
-                variantKey,
-                variantValue: variantOption,
-                layer: layerKey,
-                subComponentName: subComponentKey,
-              });
-
-              result.variables[schemaKey] = {};
-              for (const propKey in layer.properties) {
-                const prop = layer.properties[propKey];
-                // if the property has component states
-                // TODO: create a concrete type instead of using `any`
-                const variableObject: any = {
-                  [propKey]: {
-                    rest: {
-                      type: findFixtureType(prop, variantOption),
-                      valueType: 'alias',
-                      value: prop.defaults[variantOption],
-                    },
-                  },
-                };
-                if (prop.pseudoStates) {
-                  for (const pseudoState of prop.pseudoStates) {
-                    variableObject[propKey][pseudoState] = {
-                      type: findFixtureType(prop, variantOption),
-                      valueType: 'alias',
-                      value: prop.defaults[variantOption],
-                    };
-                  }
-                }
-                // add it to the result
-                result.variables[schemaKey] = {
-                  ...result.variables[schemaKey],
-                  ...variableObject,
-                };
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  return result;
-}
-
-export function generateClassName({
-  componentName,
-  variantKey,
-  variantValue,
-  layer,
-  layerOptionalPseudoSelector,
-  subComponentName,
-  stateKey,
-  stateValue,
-}: {
-  componentName: string;
-  variantKey: string;
-  variantValue?: string;
-  layer: string;
-  layerOptionalPseudoSelector?: string;
-  subComponentName?: string;
-  stateKey?: string;
-  stateValue?: string;
-}): string {
-  let className = '';
-  if (subComponentName) {
-    className = `uds-${lowerCase(componentName)}-${lowerCase(subComponentName)}-${lowerCase(variantKey)}`;
-  } else {
-    className = `uds-${lowerCase(componentName)}-${lowerCase(variantKey)}`;
-  }
-
-  if (variantValue) {
-    className = `${className}-${lowerCase(variantValue)}`;
-  }
-
-  if (stateKey && stateValue) {
-    className = `${className}-${lowerCase(stateKey)}-${lowerCase(stateValue)}`;
-  }
-
-  className = `${className}-${lowerCase(layer)}`;
-
-  if (layerOptionalPseudoSelector) {
-    className = `${className}${layerOptionalPseudoSelector}`;
-  }
-
-  return className.replaceAll(/\s+/g, '-');
-}
-
-export function generateDeclaration({
-  componentName,
-  variantKey,
-  variantValue,
-  layer,
-  layerOptionalPseudoSelector,
-  subComponentName,
-  stateKey,
-  stateValue,
-  schema,
-  propertyKey,
-  originalPropertyDefinition,
-  theme,
-  currentStyles,
-  previewOptions,
-}: {
-  componentName: string;
-  variantKey: string;
-  variantValue: string;
-  layer: string;
-  layerOptionalPseudoSelector?: string; // only gets applied to non root layers
-  subComponentName?: string;
-  stateKey?: string;
-  stateValue?: string;
-  // TODO: define and use a type for the Schema
-  schema: unknown;
-  propertyKey: string;
-  originalPropertyDefinition: SelectedConfigurableProperty<ConfigurablePropertiesName, any>;
-  theme: ThemeFn;
-  currentStyles: Readonly<Record<string, Record<string, string>>>;
-  previewOptions?: {
-    generatePseudoStateClassModifier?: boolean;
-  };
-}) {
-  /// Logic for generating the class names:
-  /// If its the root layer
-  /// - if we have component states
-  ///   - We need to combine the class that has the variant and the class that has the component state
-  ///   => example: '.uds-chip-toggle-variant-primary-root.uds-chip-toggle-variant-active-off-root'
-  /// - else
-  ///   - We only need one class for the root layer
-  ///   => example: '.uds-chip-link-variant-primary-root'
-  /// If its not the root layer
-  /// - We need to nest the child layer under the root layer
-  /// - if we have component states
-  ///   - The child layer should only have the variant and its value present since the root layer already has the component state present
-  ///   => example: '.uds-chip-toggle-variant-primary-root.uds-chip-toggle-variant-active-off-root .uds-chip-toggle-variant-primary-icon'
-  /// - If we dont have component state
-  ///   => example: '.uds-chip-dismissible-variant-primary-root .uds-chip-dismissible-variant-primary-icon'
-  /// Note: The classes should match what's on `autoVariants.ts`
-  const schemaKey = generateSchemaKey({
-    variantKey,
-    variantValue,
-    layer,
-    subComponentName,
-    stateKey,
-    stateValue,
-  });
-
-  let className = generateClassName({
-    componentName,
-    variantKey,
-    variantValue,
-    layer,
-    subComponentName,
-    stateKey,
-    stateValue,
-  });
-
-  // @ts-expect-error - fix the types later
-  const propertySelectedValueInSchema = schema.variables[schemaKey][propertyKey] as VariableState;
-
-  if (!propertySelectedValueInSchema) {
-    if (schemaKey === 'size/md/root' && propertyKey === 'spacingHorizontal') {
-      // @ts-expect-error - log
-      console.log({ componentName, schemaKey, propertyKey }, schema.variables);
-    }
-
-    throw new Error(
-      `Prop definition (${componentName} - ${schemaKey} - ${propertyKey}) not found, this is not expected, please report the bug to the UDS team`,
-    );
-  }
-
-  const styles: Record<string, Record<string, string>> = {};
-  // loop through the property states
-  for (const stateStr in propertySelectedValueInSchema) {
-    const state = stateStr as keyof VariableState;
-    const pseudo = statePseudoMap[state] ?? '';
-    const schemaValueForState = propertySelectedValueInSchema[state] as SchemaStateValue;
-
-    let fullClassName = ``;
-    if (layer === 'root') {
-      // We need to nest the component state classes under the variant classes
-      if (stateKey && stateValue) {
-        // We need to nest the component state classes under the variant class
-        const rootVariantClass = generateClassName({
-          componentName,
-          variantKey,
-          variantValue,
-          layer,
-          subComponentName,
-        });
-
-        className = generateClassName({
-          componentName,
-          variantKey,
-          layer,
-          subComponentName,
-          stateKey,
-          stateValue,
-        });
-
-        fullClassName = `.${rootVariantClass}${pseudo}.${className}`;
-      } else {
-        fullClassName = `.${className}${pseudo}`;
-      }
-    } else {
-      const rootVariantClassName = generateClassName({
-        componentName,
-        variantKey,
-        variantValue,
-        layer: 'root',
-        subComponentName,
-      });
-
-      if (stateKey && stateValue) {
-        const rootVariantClassNameWithComponentState = generateClassName({
-          componentName,
-          variantKey,
-          layer: 'root',
-          subComponentName,
-          stateKey,
-          stateValue,
-        });
-        // the layer class name should not have component states, but we need the variant key and value
-        className = generateClassName({
-          componentName,
-          variantKey,
-          variantValue,
-          layer,
-          layerOptionalPseudoSelector,
-          subComponentName,
-        });
-        fullClassName = `.${rootVariantClassName}${pseudo}.${rootVariantClassNameWithComponentState} .${className}`;
-      } else {
-        fullClassName = `.${rootVariantClassName}${pseudo} .${className}`;
-      }
-    }
-
-    const getTheCssPropertyValue = (
-      schemaStateValue: SchemaStateValue,
-      propertyName: keyof typeof configurableProperties,
-      theme: ThemeFn,
-      existingValue?: string,
-    ): string => {
-      const { value, type } = schemaStateValue;
-      const propertyConfig = configurableProperties[propertyName];
-
-      let newValue: string;
-      if (configurableProperties[propertyName].customValueRenderer) {
-        newValue = configurableProperties[propertyName].customValueRenderer(
-          schemaStateValue,
-          schema,
-          theme,
-        );
-      } else {
-        const twThemePath = configurableProperties[propertyName].twThemePath(
-          // @ts-expect-error - fix the types later
-          type,
-          String(value),
-        );
-        newValue = theme(twThemePath);
-      }
-
-      // If this property should be concatenated with existing values and we have an existing value
-      if (propertyConfig.concatenate && existingValue) {
-        const delimiter = propertyConfig.concatenationDelimiter || ', ';
-        return `${existingValue}${delimiter}${newValue}`;
-      }
-
-      return newValue;
-    };
-
-    // we need to get the property definition from the typescript object
-    // because we need to know the property name (not just the fixture type)
-    const { cssProperties, extendedProperties: extendedPropertiesGetter } =
-      configurableProperties[originalPropertyDefinition.name];
-    const cssDeclarations: Record<string, string> = {};
-
-    // Extended properties can either be a hardcoded array of strings or a function that returns an array of strings.
-    const isExtendedPropertiesFunction = isFunction(extendedPropertiesGetter);
-    const extendedProperties = isExtendedPropertiesFunction
-      ? extendedPropertiesGetter({ componentName, subComponentName, layer, propertyKey })
-      : extendedPropertiesGetter;
-
-    if (extendedProperties && extendedProperties.length) {
-      if (
-        !isExtendedPropertiesFunction &&
-        (typeof cssProperties === 'string' ||
-          (Array.isArray(cssProperties) && cssProperties.length > 0))
-      ) {
-        throw new Error(
-          'Invalid configuration: cssProperties should not be configured when extendedProperties are defined. Please update your property configuration accordingly.',
-        );
-      }
-
-      for (const extendedProp of extendedProperties) {
-        const originalPropertyDefinition = configurableProperties[extendedProp];
-        const cssPropertiesRef = originalPropertyDefinition.cssProperties;
-
-        if (typeof cssPropertiesRef === 'string') {
-          const existingValue = currentStyles?.[fullClassName]?.[cssPropertiesRef];
-
-          cssDeclarations[cssPropertiesRef] = getTheCssPropertyValue(
-            schemaValueForState,
-            extendedProp,
-            theme,
-            existingValue,
-          );
-        } else if (Array.isArray(cssPropertiesRef)) {
-          for (const cssProp of cssPropertiesRef) {
-            const existingValue = currentStyles?.[fullClassName]?.[cssProp];
-
-            cssDeclarations[cssProp] = getTheCssPropertyValue(
-              schemaValueForState,
-              extendedProp,
-              theme,
-              existingValue,
-            );
-          }
-        }
-      }
-    } else {
-      if (typeof cssProperties === 'string') {
-        // Check if we already have a value for this CSS property
-        const existingValue = currentStyles?.[fullClassName]?.[cssProperties];
-
-        cssDeclarations[cssProperties] = getTheCssPropertyValue(
-          schemaValueForState,
-          originalPropertyDefinition.name,
-          theme,
-          existingValue,
-        );
-      } else if (Array.isArray(cssProperties)) {
-        for (const cssProp of cssProperties) {
-          const existingValue = currentStyles?.[fullClassName]?.[cssProp];
-
-          cssDeclarations[cssProp] = getTheCssPropertyValue(
-            schemaValueForState,
-            originalPropertyDefinition.name,
-            theme,
-            existingValue,
-          );
-        }
-      }
-    }
-
-    if (!styles[fullClassName]) {
-      styles[fullClassName] = {
-        ...cssDeclarations,
-        ...styles[fullClassName],
-      };
-    }
-
-    // todo rename to prefix
-    if (previewOptions?.generatePseudoStateClassModifier) {
-      const pseudoPrefixClass = statePseudoMapDocsMode[state] ?? '';
-
-      if (pseudoPrefixClass.length > 0 && stateStr !== 'root') {
-        // Add !important to all CSS declarations for docs mode to ensure they override pseudo-class styles
-        const importantCssDeclarations = Object.fromEntries(
-          Object.entries(cssDeclarations).map(([prop, value]) => [prop, `${value} !important`]),
-        );
-
-        styles[`.${pseudoPrefixClass}${fullClassName}`.replace(pseudo, '')] = {
-          ...importantCssDeclarations,
-          ...styles[`.${pseudoPrefixClass}${fullClassName}`.replace(pseudo, '')],
-        };
-      }
-    }
-  }
-
-  return styles;
-}
-
-export function generateStyles<C extends ComponentConfig>(
-  config: C,
-  schema: any,
-  theme: ThemeFn,
-  previewOptions?: {
-    generatePseudoStateClassModifier: boolean;
-  },
-): Record<string, Record<string, string>> {
-  function deepMerge<T extends object, U extends object>(target: T, source: U): T & U {
-    return mergeWith({}, target, source);
-  }
-
-  let componentName = config.label.toLowerCase();
-  if (config.overrideComponentName) {
-    componentName = config.overrideComponentName.toLowerCase();
-  }
-
-  let styles: Record<string, Record<string, string>> = {};
-  for (const variantKey in config.variants) {
-    const variantConfig = config.variants[variantKey];
-    // for each variant option
-    for (const variantOption of variantConfig.options) {
-      // if we have componentStates
-      if ((variantConfig as VariantConfigWithComponentStates<string>).componentStates) {
-        const componentStates = (variantConfig as VariantConfigWithComponentStates<string>)
-          .componentStates;
-        // for each component state key
-        for (const componentStateKey in componentStates) {
-          const componentState = componentStates[componentStateKey];
-          // for each component state option
-          for (const componentStateOption of componentState.options) {
-            // for each layer key
-            for (const layerKey in componentState.layers) {
-              const layer = componentState.layers[layerKey];
-              // for each prop
-              for (const propertyKey in layer.properties) {
-                const originalPropertyDefinition = layer.properties[propertyKey];
-                const declarations = generateDeclaration({
-                  componentName,
-                  variantKey,
-                  variantValue: variantOption,
-                  stateKey: componentStateKey,
-                  stateValue: componentStateOption,
-                  layer: layerKey,
-                  layerOptionalPseudoSelector: layer.pseudoSelector,
-                  propertyKey,
-                  originalPropertyDefinition,
-                  theme,
-                  schema,
-                  currentStyles: styles,
-                  previewOptions,
-                });
-                styles = deepMerge(styles, declarations);
-              }
-            }
-          }
-        }
-      }
-      // we don't have component states
-      else {
-        // for each layer key
-        for (const layerKey in (variantConfig as VariantConfigWithProperties).layers) {
-          const layer = (variantConfig as VariantConfigWithProperties).layers[layerKey];
-
-          for (const propertyKey in layer.properties) {
-            const originalPropertyDefinition = layer.properties[propertyKey];
-            const declarations = generateDeclaration({
-              componentName,
-              variantKey,
-              variantValue: variantOption,
-              layer: layerKey,
-              layerOptionalPseudoSelector: layer.pseudoSelector,
-              propertyKey,
-              originalPropertyDefinition,
-              theme,
-              schema,
-              currentStyles: styles,
-              previewOptions,
-            });
-            styles = deepMerge(styles, declarations);
-          }
-        }
-      }
-    }
-  }
-
-  // if we have sub components
-  if (config.subComponents) {
-    const { subComponents } = config;
-    for (const subComponentKey in subComponents) {
-      // for each variant key
-      for (const variantKey in subComponents[subComponentKey].variants) {
-        const variantConfig = subComponents[subComponentKey].variants[variantKey];
-        // for each variant option
-        for (const variantOption of variantConfig.options) {
-          // if we have componentStates
-          if ((variantConfig as VariantConfigWithComponentStates<string>).componentStates) {
-            const componentStates = (variantConfig as VariantConfigWithComponentStates<string>)
-              .componentStates;
-            // for each component state key
-            for (const componentStateKey in componentStates) {
-              const componentState = componentStates[componentStateKey];
-              // for each component state option
-              for (const componentStateOption of componentState.options) {
-                // for each layer key
-                for (const layerKey in componentState.layers) {
-                  const layer = componentState.layers[layerKey];
-                  for (const propertyKey in layer.properties) {
-                    const originalPropertyDefinition = layer.properties[propertyKey];
-                    const declarations = generateDeclaration({
-                      componentName,
-                      variantKey,
-                      variantValue: variantOption,
-                      stateKey: componentStateKey,
-                      stateValue: componentStateOption,
-                      subComponentName: subComponentKey,
-                      layer: layerKey,
-                      layerOptionalPseudoSelector: layer.pseudoSelector,
-                      propertyKey,
-                      originalPropertyDefinition,
-                      theme,
-                      schema,
-                      currentStyles: styles,
-                      previewOptions,
-                    });
-                    styles = deepMerge(styles, declarations);
-                  }
-                }
-              }
-            }
-          }
-          // we don't have component states
-          else {
-            // for each layer key
-            for (const layerKey in (variantConfig as VariantConfigWithProperties).layers) {
-              const layer = (variantConfig as VariantConfigWithProperties).layers[layerKey];
-              // for each prop
-              for (const propertyKey in layer.properties) {
-                // if the property has component states
-                const originalPropertyDefinition = layer.properties[propertyKey];
-                const declarations = generateDeclaration({
-                  componentName,
-                  subComponentName: subComponentKey,
-                  variantKey,
-                  variantValue: variantOption,
-                  layer: layerKey,
-                  layerOptionalPseudoSelector: layer.pseudoSelector,
-                  propertyKey,
-                  originalPropertyDefinition,
-                  theme,
-                  schema,
-                  currentStyles: styles,
-                  previewOptions,
-                });
-                styles = deepMerge(styles, declarations);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  return styles;
-}
-
-export function createConfigurableProperty<
-  C extends ConfigurablePropertiesName,
-  O extends string,
-  T extends (typeof configurableProperties)[C]['possibleFixtures'],
-  V extends readonly (readonly string[])[] = readonly (readonly string[])[],
->(prop: {
-  name: C;
-  typeOfFixture: T;
-  values: V;
-  defaults: { [K in O]: V[number][number] };
-  label: string;
-  pseudoStates?: PossibleStates[];
-  supportsCustom?: boolean;
-}): SelectedConfigurableProperty<C, O, T, V> {
-  return prop;
-}
-
-/**
- * @deprecated use the new functions instead
- */
-export function createVariantConfig<
-  O extends string,
-  T extends Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, O>>,
->(config: {
-  label: string;
-  description: string;
-  isConfigurable: boolean;
-  default: O;
-  options: readonly O[];
-  properties: T;
-}): VariantConfig<O> {
-  return config;
-}
-
-export function createComponentStateConfig(config: {
-  label: string;
-  options: string[];
-  layers: {
-    root: LayerConfig;
-  } & Record<string, LayerConfig>;
-}): ComponentStateConfig {
-  return config;
-}
-
-export function createVariantConfigWithProperties(config: {
-  label: string;
-  description: string;
-  isConfigurable: boolean;
-  default: string;
-  options: readonly string[];
-  layers: {
-    root: LayerConfig;
-  } & Record<string, LayerConfig>;
-}): VariantConfigWithProperties {
-  return config;
-}
-
-export function createVariantConfigWithComponentStates(config: {
-  label: string;
-  description: string;
-  isConfigurable: boolean;
-  default: string;
-  options: readonly string[];
-  componentStates: Record<string, ComponentStateConfig>;
-}): VariantConfigWithComponentStates {
-  return config;
-}
-
-export function createComponentStates(config: {
-  label: string;
-  options: string[];
-  layers: {
-    root: LayerConfig;
-  } & Record<string, LayerConfig>;
-}): ComponentStateConfig {
-  return config;
-}
-
-export function createLayerConfig(config: {
-  label: string;
-  // a pseudo selector to apply to the layer (example placeholder on input)
-  pseudoSelector?: string;
-  properties: Readonly<
-    Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>
-  >;
-}): LayerConfig {
-  return config;
-}
-
-export function createSubComponentConfig(config: {
-  label: string;
-  description: string;
-  overrideComponentName?: string;
-  variants: Record<string, VariantConfigWithProperties | VariantConfigWithComponentStates>;
-}): SubComponentConfig {
-  return config;
-}
-
-export type { SchemaStateValue };
-export { cartesianProduct } from './cartesianProduct';
-export { coalesceConfigVariant } from './coalesceConfigVariant';
-export { getConfigDefaultValue, isConfigDefaultValue } from './defaults';
-export { generateKeyFromFlatConfigPath } from './generateKeyFromFlatConfigPath';
-export { generateSchemaKey } from './generateSchemaKey';
-export {
-  getConfigVariantComponentStates,
-  getConfigVariantComponentStatesMatrix,
-} from './getConfigVariantComponentStatesMatrix';
-export { getConfigVariantProperties } from './getConfigVariantProperties';
-export { getConfigVariantPseudoStates } from './getConfigVariantPseudoStates';
-export { getConfigVariants } from './getConfigVariants';
-export { getConfigSubcomponents } from './subcomponents';
-export {
-  getConfigPseudoStateVariables,
-  getConfigPseudoStateVariablesWithSetter,
-  setConfigPseudoStateVariable,
-} from './variableData';