@aws-amplify/ui 5.0.0 → 5.1.0

package/dist/types/theme/tokens/components/index.d.ts

@@ -44,52 +44,61 @@ import { TextAreaFieldTokens } from './textAreaField';
 import { TextFieldTokens } from './textField';
 import { ToggleButtonTokens } from './toggleButton';
 import { ToggleButtonGroupTokens } from './toggleButtonGroup';
-export interface ComponentTokens {
-    alert: AlertTokens;
-    authenticator: AuthenticatorTokens;
-    autocomplete: AutocompleteTokens;
-    badge: BadgeTokens;
-    button: ButtonTokens;
-    card: CardTokens;
-    checkbox: CheckboxTokens;
-    checkboxfield: CheckboxFieldTokens;
-    collection: CollectionTokens;
-    copy: CopyTokens;
-    countrycodeselect: DialCodeSelectTokens;
-    divider: DividerTokens;
-    expander: ExpanderTokens;
-    field: FieldTokens;
-    fieldcontrol: FieldControlTokens;
-    fieldgroup: FieldGroupTokens;
-    fieldmessages: FieldMessagesTokens;
-    flex: FlexTokens;
-    heading: HeadingTokens;
-    icon: IconTokens;
-    highlightmatch: HighlightMatchTokens;
-    image: ImageTokens;
-    inappmessaging: InAppMessagingTokens;
-    link: LinkTokens;
-    loader: LoaderTokens;
-    menu: MenuTokens;
-    pagination: PaginationTokens;
-    passwordfield: PasswordFieldTokens;
-    phonenumberfield: PhoneNumberFieldTokens;
-    placeholder: PlaceholderTokens;
-    radio: RadioTokens;
-    radiogroup: RadioGroupTokens;
-    rating: RatingTokens;
-    searchfield: SearchFieldTokens;
-    select: SelectTokens;
-    selectfield: SelectFieldTokens;
-    sliderfield: SliderFieldTokens;
-    stepperfield: StepperFieldTokens;
-    switchfield: SwitchFieldTokens;
-    table: TableTokens;
-    tabs: TabsTokens;
-    text: TextTokens;
-    textareafield: TextAreaFieldTokens;
-    textfield: TextFieldTokens;
-    togglebutton: ToggleButtonTokens;
-    togglebuttongroup: ToggleButtonGroupTokens;
-}
-export declare const components: ComponentTokens;
+import { OutputVariantKey } from '../types/designToken';
+declare type BaseComponentTokens<Output extends OutputVariantKey> = {
+    alert?: AlertTokens<Output>;
+    authenticator?: AuthenticatorTokens<Output>;
+    autocomplete?: AutocompleteTokens<Output>;
+    badge?: BadgeTokens<Output>;
+    button?: ButtonTokens<Output>;
+    card?: CardTokens<Output>;
+    checkbox?: CheckboxTokens<Output>;
+    checkboxfield?: CheckboxFieldTokens<Output>;
+    collection?: CollectionTokens<Output>;
+    copy?: CopyTokens<Output>;
+    countrycodeselect?: DialCodeSelectTokens<Output>;
+    divider?: DividerTokens<Output>;
+    expander?: ExpanderTokens<Output>;
+    field?: FieldTokens<Output>;
+    fieldcontrol?: FieldControlTokens<Output>;
+    fieldgroup?: FieldGroupTokens<Output>;
+    fieldmessages?: FieldMessagesTokens<Output>;
+    flex?: FlexTokens<Output>;
+    heading?: HeadingTokens<Output>;
+    highlightmatch?: HighlightMatchTokens<Output>;
+    icon?: IconTokens<Output>;
+    image?: ImageTokens<Output>;
+    inappmessaging?: InAppMessagingTokens<Output>;
+    link?: LinkTokens<Output>;
+    loader?: LoaderTokens<Output>;
+    menu?: MenuTokens<Output>;
+    pagination?: PaginationTokens<Output>;
+    passwordfield?: PasswordFieldTokens<Output>;
+    phonenumberfield?: PhoneNumberFieldTokens<Output>;
+    placeholder?: PlaceholderTokens<Output>;
+    radio?: RadioTokens<Output>;
+    radiogroup?: RadioGroupTokens<Output>;
+    rating?: RatingTokens<Output>;
+    searchfield?: SearchFieldTokens<Output>;
+    select?: SelectTokens<Output>;
+    selectfield?: SelectFieldTokens<Output>;
+    sliderfield?: SliderFieldTokens<Output>;
+    stepperfield?: StepperFieldTokens<Output>;
+    switchfield?: SwitchFieldTokens<Output>;
+    table?: TableTokens<Output>;
+    tabs?: TabsTokens<Output>;
+    text?: TextTokens<Output>;
+    textareafield?: TextAreaFieldTokens<Output>;
+    textfield?: TextFieldTokens<Output>;
+    togglebutton?: ToggleButtonTokens<Output>;
+    togglebuttongroup?: ToggleButtonGroupTokens<Output>;
+};
+export declare type ComponentTokens = BaseComponentTokens<'optional'>;
+export declare type DefaultComponentTokens = Required<{
+    [Key in keyof ComponentTokens]: Required<BaseComponentTokens<'default'>[Key]>;
+}>;
+export declare type WebComponentTokens = Required<{
+    [Key in keyof ComponentTokens]: Required<BaseComponentTokens<'required'>[Key]>;
+}>;
+export declare const components: DefaultComponentTokens;
+export {};

package/dist/types/theme/tokens/components/link.d.ts

@@ -1,13 +1,5 @@
-import { ColorValue, DesignToken } from '../types/designToken';
-interface LinkStateTokens {
-    color: DesignToken<ColorValue>;
-}
-export interface LinkTokens {
-    active: LinkStateTokens;
-    color: DesignToken<ColorValue>;
-    focus: LinkStateTokens;
-    hover: LinkStateTokens;
-    visited: LinkStateTokens;
-}
-export declare const link: LinkTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type LinkState = 'active' | 'focus' | 'hover' | 'visited';
+export declare type LinkTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color'> & Record<LinkState, DesignTokenProperties<'color', Output>>;
+export declare const link: Required<LinkTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/loader.d.ts

@@ -1,40 +1,15 @@
-import { AnimationDurationValue, ColorValue, DesignToken, FontSizeValue, SpaceValue, StrokeEmptyValue, StrokeFilledValue, StrokeLinecapValue } from '../types/designToken';
-interface LoaderSizeTokens {
-    fontSize: DesignToken<FontSizeValue>;
-    height: DesignToken<SpaceValue>;
-    width: DesignToken<SpaceValue>;
-}
-interface LoaderLinearSizeTokens {
-    fontSize: DesignToken<FontSizeValue>;
-    strokeWidth: DesignToken<SpaceValue>;
-}
-interface LoaderLinearTokens {
-    width: DesignToken<SpaceValue>;
-    minWidth: DesignToken<SpaceValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    strokeWidth: DesignToken<SpaceValue>;
-    strokeFilled: DesignToken<StrokeFilledValue>;
-    strokeEmpty: DesignToken<StrokeEmptyValue>;
-    strokeLinecap: DesignToken<StrokeLinecapValue>;
-    animationDuration: DesignToken<AnimationDurationValue>;
-    small: LoaderLinearSizeTokens;
-    large: LoaderLinearSizeTokens;
-}
-interface LoaderTextTokens {
-    fill: DesignToken<ColorValue>;
-}
-export interface LoaderTokens {
-    width: DesignToken<SpaceValue>;
-    height: DesignToken<SpaceValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    strokeEmpty: DesignToken<StrokeEmptyValue>;
-    strokeFilled: DesignToken<StrokeFilledValue>;
-    strokeLinecap: DesignToken<StrokeLinecapValue>;
-    animationDuration: DesignToken<AnimationDurationValue>;
-    small: LoaderSizeTokens;
-    large: LoaderSizeTokens;
-    linear: LoaderLinearTokens;
-    text: LoaderTextTokens;
-}
-export declare const loader: LoaderTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type LoaderSizeTokens<Output> = DesignTokenProperties<'fontSize' | 'height' | 'width', Output>;
+declare type LoaderLinearSizeTokens<Output> = DesignTokenProperties<'fontSize' | 'strokeWidth', Output>;
+declare type BaseLoaderTokens<Output> = DesignTokenProperties<'animationDuration' | 'fontSize' | 'height' | 'strokeEmpty' | 'strokeFilled' | 'strokeLinecap' | 'width', Output>;
+export declare type LoaderTokens<Output extends OutputVariantKey> = BaseLoaderTokens<Output> & {
+    small?: LoaderSizeTokens<Output>;
+    large?: LoaderSizeTokens<Output>;
+    linear?: Omit<BaseLoaderTokens<Output> & DesignTokenProperties<'minWidth' | 'strokeWidth', Output> & {
+        small?: LoaderLinearSizeTokens<Output>;
+        large?: LoaderLinearSizeTokens<Output>;
+    }, Output extends 'default' ? 'height' : never>;
+    text?: DesignTokenProperties<'fill', Output>;
+};
+export declare const loader: Required<LoaderTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/menu.d.ts

@@ -1,27 +1,9 @@
-import { BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderStyleValue, BorderWidthValue, BoxShadowValue, DesignToken, FlexDirectionValue, GapValue, SpaceValue } from '../types/designToken';
-interface MenuSizeTokens {
-    width: DesignToken<SpaceValue>;
-    height: DesignToken<SpaceValue>;
-}
-interface MenuItemTokens {
-    minHeight: DesignToken<SpaceValue>;
-    paddingInlineStart: DesignToken<SpaceValue>;
-    paddingInlineEnd: DesignToken<SpaceValue>;
-}
-export interface MenuTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderRadius: DesignToken<BorderRadiusValue>;
-    borderWidth: DesignToken<BorderWidthValue>;
-    borderStyle: DesignToken<BorderStyleValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    boxShadow: DesignToken<BoxShadowValue>;
-    flexDirection: DesignToken<FlexDirectionValue>;
-    gap: DesignToken<GapValue>;
-    maxWidth: DesignToken<SpaceValue>;
-    minWidth: DesignToken<SpaceValue>;
-    small: MenuSizeTokens;
-    large: MenuSizeTokens;
-    item: MenuItemTokens;
-}
-export declare const menu: MenuTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type MenuSizeTokens<Output> = DesignTokenProperties<'width' | 'height', Output>;
+export declare type MenuTokens<Output extends OutputVariantKey> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'boxShadow' | 'flexDirection' | 'gap' | 'maxWidth' | 'minWidth', Output> & {
+    small?: MenuSizeTokens<Output>;
+    large?: MenuSizeTokens<Output>;
+    item?: DesignTokenProperties<'minHeight' | 'paddingInlineEnd' | 'paddingInlineStart', Output>;
+};
+export declare const menu: Required<MenuTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/pagination.d.ts

@@ -1,48 +1,12 @@
-import { AlignItemsValue, BackgroundColorValue, BorderRadiusValue, ColorValue, DesignToken, FontSizeValue, JustifyContentValue, SpaceValue, TransitionDurationValue, TransitionPropertyValue } from '../types/designToken';
-interface PaginationCurrentTokens {
-    alignItems: DesignToken<AlignItemsValue>;
-    justifyContent: DesignToken<JustifyContentValue>;
-    color: DesignToken<ColorValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface PaginationButtonTokens {
-    color: DesignToken<ColorValue>;
-    paddingInlineStart: DesignToken<SpaceValue>;
-    paddingInlineEnd: DesignToken<SpaceValue>;
-    transitionProperty: DesignToken<TransitionPropertyValue>;
-    transitionDuration: DesignToken<TransitionDurationValue>;
-    hover: PaginationButtonHoverTokens;
-    disabled: PaginationButtonDisabledTokens;
-}
-export interface PaginationButtonHoverTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    color: DesignToken<ColorValue>;
-}
-export interface PaginationButtonDisabledTokens {
-    color: DesignToken<ColorValue>;
-}
-interface PaginationEllipsisTokens {
-    alignItems: DesignToken<AlignItemsValue>;
-    justifyContent: DesignToken<JustifyContentValue>;
-    paddingInlineStart: DesignToken<SpaceValue>;
-    paddingInlineEnd: DesignToken<SpaceValue>;
-}
-interface PaginationItemContainerTokens {
-    marginLeft: DesignToken<SpaceValue>;
-    marginRight: DesignToken<SpaceValue>;
-}
-interface PaginationItemSharedTokens {
-    height: DesignToken<SpaceValue>;
-    minWidth: DesignToken<SpaceValue>;
-    borderRadius: DesignToken<BorderRadiusValue>;
-}
-export interface PaginationTokens {
-    current: PaginationCurrentTokens;
-    button: PaginationButtonTokens;
-    ellipsis: PaginationEllipsisTokens;
-    itemContainer: PaginationItemContainerTokens;
-    itemShared: PaginationItemSharedTokens;
-}
-export declare const pagination: PaginationTokens;
-export {};
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type PaginationTokens<Output extends OutputVariantKey> = {
+    current?: DesignTokenProperties<'alignItems' | 'backgroundColor' | 'color' | 'fontSize' | 'justifyContent', Output>;
+    button?: DesignTokenProperties<'color' | 'paddingInlineEnd' | 'paddingInlineStart' | 'transitionDuration' | 'transitionProperty', Output> & {
+        hover?: DesignTokenProperties<'backgroundColor' | 'color', Output>;
+        disabled?: DesignTokenProperties<'color', Output>;
+    };
+    ellipsis?: DesignTokenProperties<'alignItems' | 'justifyContent' | 'paddingInlineEnd' | 'paddingInlineStart', Output>;
+    itemContainer?: DesignTokenProperties<'marginLeft' | 'marginRight', Output>;
+    itemShared?: DesignTokenProperties<'borderRadius' | 'height' | 'minWidth', Output>;
+};
+export declare const pagination: Required<PaginationTokens<'default'>>;

package/dist/types/theme/tokens/components/passwordField.d.ts

@@ -1,15 +1,13 @@
-import { ColorValue, DesignToken } from '../types/designToken';
-import { StateTokens } from './button';
-interface ButtonTokens {
-    color: DesignToken<ColorValue>;
-    _active: StateTokens;
-    _disabled: StateTokens;
-    _focus: StateTokens;
-    _hover: StateTokens;
-}
-export interface PasswordFieldTokens {
-    color: DesignToken<ColorValue>;
-    button: ButtonTokens;
-}
-export declare const passwordfield: PasswordFieldTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type StateTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output>;
+declare type ButtonTokens<Output> = DesignTokenProperties<'color', Output> & {
+    _active?: StateTokens<Output>;
+    _disabled?: StateTokens<Output>;
+    _focus?: StateTokens<Output>;
+    _hover?: StateTokens<Output>;
+};
+export declare type PasswordFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color', Output> & {
+    button?: ButtonTokens<Output>;
+};
+export declare const passwordfield: Required<PasswordFieldTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/phoneNumberField.d.ts

@@ -1,12 +1,7 @@
-import { ColorValue, DesignToken, BorderColorValue, FontSizeValue } from '../types/designToken';
-export interface PhoneNumberFieldTokens {
-    color: DesignToken<ColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    _focus: {
-        borderColor: DesignToken<BorderColorValue>;
-    };
-}
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type PhoneNumberFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color' | 'borderColor' | 'fontSize', Output> & {
+    _focus?: DesignTokenProperties<'borderColor', Output>;
+};
 export declare const phonenumberfield: {
     color: {
         value: string;

package/dist/types/theme/tokens/components/placeholder.d.ts

@@ -1,15 +1,9 @@
-import { BorderRadiusValue, ColorValue, DesignToken, SpaceValue, TransitionDurationValue } from '../types/designToken';
-interface PlaceholderSizeTokens {
-    height: DesignToken<SpaceValue>;
-}
-export interface PlaceholderTokens {
-    borderRadius: DesignToken<BorderRadiusValue>;
-    transitionDuration: DesignToken<TransitionDurationValue>;
-    startColor: DesignToken<ColorValue>;
-    endColor: DesignToken<ColorValue>;
-    small: PlaceholderSizeTokens;
-    default: PlaceholderSizeTokens;
-    large: PlaceholderSizeTokens;
-}
-export declare const placeholder: PlaceholderTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type PlaceholderSizeTokens<Output> = DesignTokenProperties<'height', Output>;
+export declare type PlaceholderTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderRadius' | 'transitionDuration' | 'startColor' | 'endColor', Output> & {
+    small?: PlaceholderSizeTokens<Output>;
+    default?: PlaceholderSizeTokens<Output>;
+    large?: PlaceholderSizeTokens<Output>;
+};
+export declare const placeholder: Required<PlaceholderTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/radio.d.ts

@@ -1,73 +1,22 @@
-import { AlignItemsValue, BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderStyleValue, BorderWidthValue, BoxShadowValue, BoxSizingValue, ColorValue, CursorValue, DesignToken, GapValue, JustifyContentValue, OutlineColorValue, OutlineOffsetValue, OutlineStyleValue, OutlineWidthValue, SpaceValue, TransitionDurationValue, TransitionPropertyValue } from '../types/designToken';
-interface RadioDisabledTokens {
-    cursor: DesignToken<CursorValue>;
-}
-interface RadioButtonTokens {
-    alignItems: DesignToken<AlignItemsValue>;
-    justifyContent: DesignToken<JustifyContentValue>;
-    width: DesignToken<SpaceValue>;
-    height: DesignToken<SpaceValue>;
-    boxSizing: DesignToken<BoxSizingValue>;
-    borderWidth: DesignToken<BorderWidthValue>;
-    borderStyle: DesignToken<BorderStyleValue>;
-    borderRadius: DesignToken<BorderRadiusValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    color: DesignToken<ColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    transitionProperty: DesignToken<TransitionPropertyValue>;
-    transitionDuration: DesignToken<TransitionDurationValue>;
-    outlineColor: DesignToken<OutlineColorValue>;
-    outlineStyle: DesignToken<OutlineStyleValue>;
-    outlineWidth: DesignToken<OutlineWidthValue>;
-    outlineOffset: DesignToken<OutlineOffsetValue>;
-    padding: DesignToken<SpaceValue>;
-    small: RadioButtonSizeTokens;
-    large: RadioButtonSizeTokens;
-    _checked: RadioButtonCheckedTokens;
-    _focus: RadioButtonFocusTokens;
-    _error: RadioButtonErrorTokens;
-    _disabled: RadioButtonDisabledTokens;
-}
-interface RadioButtonSizeTokens {
-    width: DesignToken<SpaceValue>;
-    height: DesignToken<SpaceValue>;
-}
-interface RadioButtonCheckedTokens {
-    color: DesignToken<ColorValue>;
-    _disabled: RadioButtonCheckedDisabledTokens;
-}
-interface RadioButtonCheckedDisabledTokens {
-    color: DesignToken<ColorValue>;
-}
-interface RadioButtonFocusTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    boxShadow: DesignToken<BoxShadowValue>;
-}
-interface RadioButtonErrorTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    _focus: RadioButtonErrorFocusTokens;
-}
-interface RadioButtonErrorFocusTokens {
-    boxShadow: DesignToken<BoxShadowValue>;
-}
-interface RadioButtonDisabledTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface RadioLabelTokens {
-    color: DesignToken<ColorValue>;
-    _disabled: RadioLabelDisabledTokens;
-}
-interface RadioLabelDisabledTokens {
-    color: DesignToken<ColorValue>;
-}
-export interface RadioTokens {
-    alignItems: DesignToken<AlignItemsValue>;
-    justifyContent: DesignToken<JustifyContentValue>;
-    gap: DesignToken<GapValue>;
-    _disabled: RadioDisabledTokens;
-    button: RadioButtonTokens;
-    label: RadioLabelTokens;
-}
-export declare const radio: RadioTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type RadioButtonSizeTokens<Output> = DesignTokenProperties<'width' | 'height', Output>;
+export declare type RadioTokens<Output extends OutputVariantKey> = DesignTokenProperties<'alignItems' | 'justifyContent' | 'gap', Output> & {
+    _disabled?: DesignTokenProperties<'cursor', Output>;
+    button?: DesignTokenProperties<'alignItems' | 'justifyContent' | 'width' | 'height' | 'boxSizing' | 'borderWidth' | 'borderStyle' | 'borderRadius' | 'borderColor' | 'color' | 'backgroundColor' | 'transitionProperty' | 'transitionDuration' | 'outlineColor' | 'outlineStyle' | 'outlineWidth' | 'outlineOffset' | 'padding', Output> & {
+        small?: RadioButtonSizeTokens<Output>;
+        large?: RadioButtonSizeTokens<Output>;
+        _checked?: DesignTokenProperties<'color', Output> & {
+            _disabled?: DesignTokenProperties<'color', Output>;
+        };
+        _focus?: DesignTokenProperties<'borderColor' | 'boxShadow', Output>;
+        _error?: DesignTokenProperties<'borderColor', Output> & {
+            _focus?: DesignTokenProperties<'boxShadow', Output>;
+        };
+        _disabled?: DesignTokenProperties<'borderColor' | 'backgroundColor', Output>;
+    };
+    label?: DesignTokenProperties<'color', Output> & {
+        _disabled?: DesignTokenProperties<'color', Output>;
+    };
+};
+export declare const radio: Required<RadioTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/radioGroup.d.ts

@@ -1,18 +1,9 @@
-import { BackgroundColorValue, BorderColorValue, BorderWidthValue, ColorValue, DesignToken } from '../types/designToken';
-export interface RadioGroupTokens {
-    radio: {
-        borderWidth: DesignToken<BorderWidthValue>;
-        borderColor: DesignToken<BorderColorValue>;
-        backgroundColor: DesignToken<BackgroundColorValue>;
-        _checked: {
-            color: DesignToken<ColorValue>;
-        };
-        label: {
-            color: DesignToken<ColorValue>;
-        };
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type RadioGroupTokens<Output extends OutputVariantKey> = {
+    radio?: DesignTokenProperties<'borderWidth' | 'borderColor' | 'backgroundColor', Output> & {
+        _checked?: DesignTokenProperties<'color', Output>;
+        label?: DesignTokenProperties<'color', Output>;
     };
-    label: {
-        color: DesignToken<ColorValue>;
-    };
-}
-export declare const radiogroup: RadioGroupTokens;
+    label?: DesignTokenProperties<'color', Output>;
+};
+export declare const radiogroup: Required<RadioGroupTokens<'default'>>;

package/dist/types/theme/tokens/components/rating.d.ts

@@ -1,19 +1,9 @@
-import { ColorValue, DesignToken, SpaceValue } from '../types/designToken';
-interface RatingSizeTokens {
-    size: DesignToken<SpaceValue>;
-}
-interface RatingFilledTokens {
-    color: DesignToken<ColorValue>;
-}
-interface RatingEmptyTokens {
-    color: DesignToken<ColorValue>;
-}
-export interface RatingTokens {
-    large: RatingSizeTokens;
-    default: RatingSizeTokens;
-    small: RatingSizeTokens;
-    filled: RatingFilledTokens;
-    empty: RatingEmptyTokens;
-}
-export declare const rating: RatingTokens;
-export {};
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type RatingTokens<Output extends OutputVariantKey> = {
+    large: DesignTokenProperties<'size', Output>;
+    default: DesignTokenProperties<'size', Output>;
+    small: DesignTokenProperties<'size', Output>;
+    filled?: DesignTokenProperties<'color', Output>;
+    empty?: DesignTokenProperties<'color', Output>;
+};
+export declare const rating: Required<RatingTokens<'default'>>;

package/dist/types/theme/tokens/components/searchField.d.ts

@@ -1,16 +1,13 @@
-import { BackgroundColorValue, ColorValue, DesignToken } from '../types/designToken';
-import { StateTokens } from './button';
-interface SearchTokens {
-    color: DesignToken<ColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    _active: StateTokens;
-    _disabled: StateTokens;
-    _focus: StateTokens;
-    _hover: StateTokens;
-}
-export interface SearchFieldTokens {
-    color: DesignToken<ColorValue>;
-    button: SearchTokens;
-}
-export declare const searchfield: SearchFieldTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type StateTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output>;
+declare type SearchTokens<Output> = DesignTokenProperties<'backgroundColor' | 'color'> & {
+    _active?: StateTokens<Output>;
+    _disabled?: StateTokens<Output>;
+    _focus?: StateTokens<Output>;
+    _hover?: StateTokens<Output>;
+};
+export declare type SearchFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color', Output> & {
+    button?: SearchTokens<Output>;
+};
+export declare const searchfield: Required<SearchFieldTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/select.d.ts

@@ -1,37 +1,13 @@
-import { AlignItemsValue, BackgroundColorValue, ColorValue, CursorValue, DesignToken, DisplayValue, FlexValue, PointerEventsValue, PositionValue, SpaceValue, TransformValue, WhiteSpaceValue } from '../types/designToken';
-interface SelectWrapperTokens {
-    flex: DesignToken<FlexValue>;
-    display: DesignToken<DisplayValue>;
-    position: DesignToken<PositionValue>;
-    cursor: DesignToken<CursorValue>;
-}
-interface SelectIconWrapperTokens {
-    alignItems: DesignToken<AlignItemsValue>;
-    position: DesignToken<PositionValue>;
-    top: DesignToken<SpaceValue>;
-    right: DesignToken<SpaceValue>;
-    transform: DesignToken<TransformValue>;
-    pointerEvents: DesignToken<PointerEventsValue>;
-}
-interface SelectOptionTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    color: DesignToken<ColorValue>;
-    _disabled: {
-        color: DesignToken<ColorValue>;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type SelectSizeTokens<Output> = DesignTokenProperties<'minWidth', Output>;
+export declare type SelectTokens<Output extends OutputVariantKey> = DesignTokenProperties<'paddingInlineEnd' | 'whiteSpace' | 'minWidth'> & {
+    wrapper?: DesignTokenProperties<'cursor' | 'display' | 'flex' | 'position'>;
+    iconWrapper?: DesignTokenProperties<'alignItems' | 'position' | 'top' | 'right' | 'transform' | 'pointerEvents'>;
+    option?: DesignTokenProperties<'backgroundColor' | 'color'> & {
+        _disabled?: DesignTokenProperties<'color'>;
     };
-}
-interface SelectSizeTokens {
-    minWidth: DesignToken<SpaceValue>;
-}
-export interface SelectTokens {
-    paddingInlineEnd: DesignToken<SpaceValue>;
-    wrapper: SelectWrapperTokens;
-    iconWrapper: SelectIconWrapperTokens;
-    option: SelectOptionTokens;
-    whiteSpace: DesignToken<WhiteSpaceValue>;
-    minWidth: DesignToken<SpaceValue>;
-    small: SelectSizeTokens;
-    large: SelectSizeTokens;
-}
-export declare const select: SelectTokens;
+    small?: SelectSizeTokens<Output>;
+    large?: SelectSizeTokens<Output>;
+};
+export declare const select: Required<SelectTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/selectField.d.ts

@@ -1,14 +1,6 @@
-import { DesignToken, FlexDirectionValue, ColorValue, BorderColorValue, FontSizeValue } from '../types/designToken';
-export interface SelectFieldTokens {
-    flexDirection: DesignToken<FlexDirectionValue>;
-    color: DesignToken<ColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    _focus: {
-        borderColor: DesignToken<BorderColorValue>;
-    };
-    label: {
-        color: DesignToken<ColorValue>;
-    };
-}
-export declare const selectfield: SelectFieldTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type SelectFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderColor' | 'color' | 'flexDirection' | 'fontSize', Output> & {
+    _focus?: DesignTokenProperties<'borderColor', Output>;
+    label?: DesignTokenProperties<'color', Output>;
+};
+export declare const selectfield: Required<SelectFieldTokens<'default'>>;