@aws-amplify/ui 3.9.0 → 3.10.0

package/dist/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 17 May 2022 21:59:14 GMT
+ * Generated on Wed, 08 Jun 2022 19:50:16 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -378,17 +378,22 @@
   --amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
   --amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
   --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent);
+  --amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90);
+  --amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90);
+  --amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent);
   --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90);
   --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent);
+  --amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent);
   --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50);
   --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent);
   --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50);
   --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
   --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
+  --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
+  --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-white);
+  --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-white);
   --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
-  --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-overlay-50);
   --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10);
-  --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-overlay-50);
   --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
   --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small);
   --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
@@ -396,9 +401,7 @@
   --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
   --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
   --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent);
-  --amplify-components-togglebutton-focus-color: var(--amplify-colors-overlay-50);
   --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10);
-  --amplify-components-togglebutton-color: var(--amplify-colors-overlay-50);
   --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium);
   --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
   --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small);
@@ -438,10 +441,11 @@
   --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
   --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
   --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
-  --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
+  --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium);
   --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
   --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
   --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
+  --amplify-components-searchfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
   --amplify-components-rating-small-size: var(--amplify-font-sizes-small);
   --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
   --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
@@ -630,6 +634,7 @@
   --amplify-components-alert-padding-inline: var(--amplify-space-medium);
   --amplify-components-alert-padding-block: var(--amplify-space-small);
   --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
+  --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
   --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
   --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
   --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
@@ -637,13 +642,16 @@
   --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
   --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
   --amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
+  --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
   --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
   --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
   --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
   --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
-  --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-tertiary);
+  --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary);
+  --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary);
   --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
-  --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
+  --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary);
+  --amplify-components-togglebutton-color: var(--amplify-colors-font-primary);
   --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
   --amplify-components-text-info-color: var(--amplify-colors-font-info);
   --amplify-components-text-success-color: var(--amplify-colors-font-success);
@@ -710,6 +718,10 @@
   --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary);
   --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
   --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary);
+  --amplify-components-collection-search-button-disabled-background-color: var(--amplify-components-searchfield-button-disabled-background-color);
+  --amplify-components-collection-pagination-button-hover-background-color: var(--amplify-components-pagination-button-hover-background-color);
+  --amplify-components-collection-pagination-current-background-color: var(--amplify-components-pagination-current-background-color);
+  --amplify-components-collection-pagination-current-color: var(--amplify-components-pagination-current-color);
   --amplify-components-checkbox-icon-background-color: var(--amplify-colors-brand-primary-80);
   --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
   --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
@@ -787,8 +799,12 @@
   --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
   --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
   --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
+  --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
+  --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
   --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
+  --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
   --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
+  --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
   --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
   --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
@@ -796,10 +812,19 @@
   --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
   --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
   --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
-  --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 3px var(--amplify-colors-border-focus);
+  --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
+  --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
+  --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
+  --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
+  --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
+  --amplify-components-searchfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
+  --amplify-components-searchfield-button-active-border-color: var(--amplify-components-button-active-border-color);
+  --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color);
+  --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
+  --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
   --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
   --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
@@ -818,6 +843,8 @@
   --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px  var(--amplify-colors-border-focus);
   --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
   --amplify-components-expander-item-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
+  --amplify-components-collection-pagination-button-hover-color: var(--amplify-components-pagination-button-hover-color);
+  --amplify-components-collection-pagination-button-color: var(--amplify-components-pagination-button-color);
   --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
@@ -846,8 +873,27 @@
   --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
   --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+  --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
+  --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color);
+  --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
+  --amplify-components-searchfield-button-disabled-color: var(--amplify-components-button-disabled-color);
+  --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color);
   --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+  --amplify-components-collection-search-button-hover-border-color: var(--amplify-components-searchfield-button-hover-border-color);
+  --amplify-components-collection-search-button-hover-background-color: var(--amplify-components-searchfield-button-hover-background-color);
+  --amplify-components-collection-search-button-focus-background-color: var(--amplify-components-searchfield-button-focus-background-color);
+  --amplify-components-collection-search-button-disabled-border-color: var(--amplify-components-searchfield-button-disabled-border-color);
+  --amplify-components-collection-search-button-active-border-color: var(--amplify-components-searchfield-button-active-border-color);
+  --amplify-components-collection-search-button-active-background-color: var(--amplify-components-searchfield-button-active-background-color);
+  --amplify-components-collection-search-button-color: var(--amplify-components-searchfield-button-color);
+  --amplify-components-collection-search-input-color: var(--amplify-components-searchfield-color);
+  --amplify-components-collection-pagination-button-disabled-color: var(--amplify-components-pagination-button-disabled-color);
   --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
   --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
   --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+  --amplify-components-collection-search-button-hover-color: var(--amplify-components-searchfield-button-hover-color);
+  --amplify-components-collection-search-button-focus-color: var(--amplify-components-searchfield-button-focus-color);
+  --amplify-components-collection-search-button-focus-border-color: var(--amplify-components-searchfield-button-focus-border-color);
+  --amplify-components-collection-search-button-disabled-color: var(--amplify-components-searchfield-button-disabled-color);
+  --amplify-components-collection-search-button-active-color: var(--amplify-components-searchfield-button-active-color);
 }

package/dist/types/machines/authenticator/actors/resetPassword.d.ts

@@ -6,24 +6,4 @@ export declare type ResetPasswordMachineOptions = {
 export declare function resetPasswordActor({ services }: ResetPasswordMachineOptions): import("xstate").StateMachine<ResetPasswordContext, any, AuthEvent, {
     value: any;
     context: ResetPasswordContext;
-}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").TypegenDisabled & {
-    missingImplementations: {
-        actions: never;
-        delays: never;
-        guards: never;
-        services: never;
-    };
-} & {
-    eventsCausingActions: Record<string, string>;
-    eventsCausingDelays: Record<string, string>;
-    eventsCausingGuards: Record<string, string>;
-    eventsCausingServices: Record<string, string>;
-} & {
-    indexedActions: import("xstate").IndexByType<import("xstate").BaseActionObject>;
-    indexedEvents: Record<string, AuthEvent> & {
-        __XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__: {
-            data: any;
-        };
-    };
-    invokeSrcNameMap: Record<string, "__XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__">;
-}>;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, AuthEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;

package/dist/types/machines/authenticator/actors/signIn.d.ts

@@ -6,24 +6,4 @@ export declare type SignInMachineOptions = {
 export declare function signInActor({ services }: SignInMachineOptions): import("xstate").StateMachine<SignInContext, any, AuthEvent, {
     value: any;
     context: SignInContext;
-}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").TypegenDisabled & {
-    missingImplementations: {
-        actions: never;
-        delays: never;
-        guards: never;
-        services: never;
-    };
-} & {
-    eventsCausingActions: Record<string, string>;
-    eventsCausingDelays: Record<string, string>;
-    eventsCausingGuards: Record<string, string>;
-    eventsCausingServices: Record<string, string>;
-} & {
-    indexedActions: import("xstate").IndexByType<import("xstate").BaseActionObject>;
-    indexedEvents: Record<string, AuthEvent> & {
-        __XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__: {
-            data: any;
-        };
-    };
-    invokeSrcNameMap: Record<string, "__XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__">;
-}>;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, AuthEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;

package/dist/types/machines/authenticator/actors/signOut.d.ts

@@ -2,24 +2,4 @@ import { AuthEvent, SignOutContext } from '../../../types';
 export declare const signOutActor: import("xstate").StateMachine<SignOutContext, any, AuthEvent, {
     value: any;
     context: SignOutContext;
-}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").TypegenDisabled & {
-    missingImplementations: {
-        actions: never;
-        delays: never;
-        guards: never;
-        services: never;
-    };
-} & {
-    eventsCausingActions: Record<string, string>;
-    eventsCausingDelays: Record<string, string>;
-    eventsCausingGuards: Record<string, string>;
-    eventsCausingServices: Record<string, string>;
-} & {
-    indexedActions: import("xstate").IndexByType<import("xstate").BaseActionObject>;
-    indexedEvents: Record<string, AuthEvent> & {
-        __XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__: {
-            data: any;
-        };
-    };
-    invokeSrcNameMap: Record<string, "__XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__">;
-}>;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, AuthEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;

package/dist/types/machines/authenticator/index.d.ts

@@ -5,24 +5,4 @@ export declare type AuthenticatorMachineOptions = AuthContext['config'] & {
 export declare function createAuthenticatorMachine(): import("xstate").StateMachine<AuthContext, any, AuthEvent, {
     value: any;
     context: AuthContext;
-}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").TypegenDisabled & {
-    missingImplementations: {
-        actions: never;
-        delays: never;
-        guards: never;
-        services: never;
-    };
-} & {
-    eventsCausingActions: Record<string, string>;
-    eventsCausingDelays: Record<string, string>;
-    eventsCausingGuards: Record<string, string>;
-    eventsCausingServices: Record<string, string>;
-} & {
-    indexedActions: import("xstate").IndexByType<import("xstate").BaseActionObject>;
-    indexedEvents: Record<string, AuthEvent> & {
-        __XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__: {
-            data: any;
-        };
-    };
-    invokeSrcNameMap: Record<string, "__XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__">;
-}>;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, AuthEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;

package/dist/types/machines/authenticator/signUp.d.ts

@@ -6,24 +6,4 @@ export declare type SignUpMachineOptions = {
 export declare function createSignUpMachine({ services }: SignUpMachineOptions): import("xstate").StateMachine<SignUpContext, any, AuthEvent, {
     value: any;
     context: SignUpContext;
-}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").TypegenDisabled & {
-    missingImplementations: {
-        actions: never;
-        delays: never;
-        guards: never;
-        services: never;
-    };
-} & {
-    eventsCausingActions: Record<string, string>;
-    eventsCausingDelays: Record<string, string>;
-    eventsCausingGuards: Record<string, string>;
-    eventsCausingServices: Record<string, string>;
-} & {
-    indexedActions: import("xstate").IndexByType<import("xstate").BaseActionObject>;
-    indexedEvents: Record<string, AuthEvent> & {
-        __XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__: {
-            data: any;
-        };
-    };
-    invokeSrcNameMap: Record<string, "__XSTATE_ALLOW_ANY_INVOKE_DATA_HACK__">;
-}>;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, AuthEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;

package/dist/types/theme/tokens/colors.d.ts

@@ -21,6 +21,7 @@ declare type BackgroundColors<DesignTokenType = DesignToken<ColorValue>> = {
 } & OrdinalScale<DesignTokenType> & OrdinalVariation<DesignTokenType>;
 declare type BorderColors<DesignTokenType = DesignToken<ColorValue>> = {
     disabled: DesignTokenType;
+    pressed: DesignTokenType;
     focus: DesignTokenType;
     error: DesignTokenType;
 } & OrdinalScale<DesignTokenType>;

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

@@ -1,5 +1,5 @@
 import { AlignItemsValue, BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderStyleValue, BorderWidthValue, BoxShadowValue, ColorValue, DesignToken, FontSizeValue, FontWeightValue, JustifyContentValue, LineHeightValue, SpaceValue, TransitionDurationValue } from '../types/designToken';
-interface StateTokens {
+export interface StateTokens {
     color: DesignToken<ColorValue>;
     backgroundColor: DesignToken<BackgroundColorValue>;
     borderColor: DesignToken<BorderColorValue>;

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

@@ -0,0 +1,32 @@
+import { PaginationButtonDisabledTokens, PaginationButtonHoverTokens } from './pagination';
+import { StateTokens } from './button';
+import { BackgroundColorValue, ColorValue, DesignToken } from '../types/designToken';
+interface PaginationTokens {
+    current: {
+        color: DesignToken<ColorValue>;
+        backgroundColor: DesignToken<BackgroundColorValue>;
+    };
+    button: {
+        color: DesignToken<ColorValue>;
+        _hover: PaginationButtonHoverTokens;
+        _disabled: PaginationButtonDisabledTokens;
+    };
+}
+export interface SearchTokens {
+    input: {
+        color: DesignToken<ColorValue>;
+    };
+    button: {
+        color: DesignToken<ColorValue>;
+        _active: StateTokens;
+        _disabled: StateTokens;
+        _focus: StateTokens;
+        _hover: StateTokens;
+    };
+}
+export interface CollectionTokens {
+    pagination: PaginationTokens;
+    search: SearchTokens;
+}
+export declare const collection: CollectionTokens;
+export {};

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

@@ -5,6 +5,7 @@ import { ButtonTokens } from './button';
 import { CardTokens } from './card';
 import { CheckboxTokens } from './checkbox';
 import { CheckboxFieldTokens } from './checkboxField';
+import { CollectionTokens } from './collection';
 import { CopyTokens } from './copy';
 import { CountryCodeSelectTokens } from './countryCodeSelect';
 import { DividerTokens } from './divider';
@@ -24,6 +25,7 @@ import { PaginationTokens } from './pagination';
 import { PlaceholderTokens } from './placeholder';
 import { RadioTokens } from './radio';
 import { RatingTokens } from './rating';
+import { SearchFieldTokens } from './searchField';
 import { SelectTokens } from './select';
 import { SelectFieldTokens } from './selectField';
 import { SliderFieldTokens } from './sliderField';
@@ -42,6 +44,7 @@ export interface ComponentTokens {
     card: CardTokens;
     checkbox: CheckboxTokens;
     checkboxfield: CheckboxFieldTokens;
+    collection: CollectionTokens;
     copy: CopyTokens;
     countrycodeselect: CountryCodeSelectTokens;
     divider: DividerTokens;
@@ -61,6 +64,7 @@ export interface ComponentTokens {
     placeholder: PlaceholderTokens;
     radio: RadioTokens;
     rating: RatingTokens;
+    searchfield: SearchFieldTokens;
     select: SelectTokens;
     selectfield: SelectFieldTokens;
     sliderfield: SliderFieldTokens;

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

@@ -15,11 +15,11 @@ interface PaginationButtonTokens {
     hover: PaginationButtonHoverTokens;
     disabled: PaginationButtonDisabledTokens;
 }
-interface PaginationButtonHoverTokens {
+export interface PaginationButtonHoverTokens {
     backgroundColor: DesignToken<BackgroundColorValue>;
     color: DesignToken<ColorValue>;
 }
-interface PaginationButtonDisabledTokens {
+export interface PaginationButtonDisabledTokens {
     color: DesignToken<ColorValue>;
 }
 interface PaginationEllipsisTokens {

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

@@ -0,0 +1,15 @@
+import { ColorValue, DesignToken } from '../types/designToken';
+import { StateTokens } from './button';
+interface SearchTokens {
+    color: DesignToken<ColorValue>;
+    _active: StateTokens;
+    _disabled: StateTokens;
+    _focus: StateTokens;
+    _hover: StateTokens;
+}
+export interface SearchFieldTokens {
+    color: DesignToken<ColorValue>;
+    button: SearchTokens;
+}
+export declare const searchfield: SearchFieldTokens;
+export {};

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

@@ -36,6 +36,7 @@ interface SliderFieldThumbHoverTokens {
     borderColor: DesignToken<BorderColorValue>;
 }
 interface SliderFieldThumbFocusTokens {
+    borderColor: DesignToken<BorderColorValue>;
     boxShadow: DesignToken<BoxShadowValue>;
 }
 interface SliderFieldSizeTokens {

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

@@ -15,6 +15,7 @@ interface ToggleButtonDisabledTokens {
     color: DesignToken<ColorValue>;
 }
 interface ToggleButtonPressedTokens {
+    borderColor: DesignToken<BorderColorValue>;
     color: DesignToken<ColorValue>;
     backgroundColor: DesignToken<BackgroundColorValue>;
     _hover: ToggleButtonPressedHoverTokens;
@@ -41,6 +42,7 @@ interface ToggleButtonPrimaryHoverTokens {
     color: DesignToken<ColorValue>;
 }
 interface ToggleButtonPrimaryDisabledTokens {
+    borderColor: DesignToken<BorderColorValue>;
     backgroundColor: DesignToken<BackgroundColorValue>;
     color: DesignToken<ColorValue>;
 }
@@ -57,12 +59,16 @@ interface ToggleButtonPrimaryPressedTokens {
 interface TogglButtonPrimaryPressedFocusTokens {
     backgroundColor: DesignToken<BackgroundColorValue>;
     borderColor: DesignToken<BorderColorValue>;
+    color: DesignToken<ColorValue>;
 }
 interface TogglButtonPrimaryPressedHoverTokens {
     backgroundColor: DesignToken<BackgroundColorValue>;
     borderColor: DesignToken<BorderColorValue>;
+    boxShadow: DesignToken<BoxShadowValue>;
+    color: DesignToken<ColorValue>;
 }
 interface ToggleButtonLinkTokens {
+    backgroundColor: DesignToken<BackgroundColorValue>;
     color: DesignToken<ColorValue>;
     _hover: ToggleButtonLinkHoverTokens;
     _focus: ToggleButtonLinkFocusTokens;
@@ -78,14 +84,21 @@ interface ToggleButtonLinkFocusTokens {
     color: DesignToken<ColorValue>;
 }
 interface ToggleButtonLinkDisabledTokens {
+    backgroundColor: DesignToken<BackgroundColorValue>;
     color: DesignToken<ColorValue>;
 }
 interface ToggleButtonLinkPressedTokens {
     backgroundColor: DesignToken<BackgroundColorValue>;
     color: DesignToken<ColorValue>;
+    _focus: ToggleButtonLinkPressedFocusTokens;
     _hover: ToggleButtonLinkPressedHoverTokens;
 }
+interface ToggleButtonLinkPressedFocusTokens {
+    color: DesignToken<ColorValue>;
+    backgroundColor: DesignToken<BackgroundColorValue>;
+}
 interface ToggleButtonLinkPressedHoverTokens {
+    color: DesignToken<ColorValue>;
     backgroundColor: DesignToken<BackgroundColorValue>;
 }
 export interface ToggleButtonTokens {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -24,6 +24,7 @@
   },
   "files": [
     "dist",
+    "dist/esm/node_modules",
     "LICENSE"
   ],
   "scripts": {