@aws-amplify/ui 3.9.1 → 3.10.1

package/dist/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 19 May 2022 22:35:34 GMT
+ * Generated on Tue, 14 Jun 2022 23:36:33 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -360,6 +360,7 @@
   --amplify-colors-font-warning: var(--amplify-colors-orange-90);
   --amplify-colors-font-info: var(--amplify-colors-blue-90);
   --amplify-colors-font-inverse: var(--amplify-colors-white);
+  --amplify-colors-font-disabled: var(--amplify-colors-neutral-60);
   --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80);
   --amplify-colors-font-secondary: var(--amplify-colors-neutral-90);
   --amplify-colors-font-primary: var(--amplify-colors-neutral-100);
@@ -378,17 +379,19 @@
   --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-primary-pressed-color: var(--amplify-colors-white);
-  --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-overlay-50);
+  --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
   --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 +399,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);
@@ -442,6 +443,7 @@
   --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);
@@ -454,8 +456,6 @@
   --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium);
   --amplify-components-radio-button-outline-color: var(--amplify-colors-transparent);
   --amplify-components-radio-button-transition-duration: var(--amplify-time-medium);
-  --amplify-components-radio-button-background-color: var(--amplify-colors-white);
-  --amplify-components-radio-button-color: var(--amplify-colors-white);
   --amplify-components-radio-button-border-width: var(--amplify-border-widths-medium);
   --amplify-components-radio-button-height: var(--amplify-font-sizes-medium);
   --amplify-components-radio-button-width: var(--amplify-font-sizes-medium);
@@ -477,7 +477,6 @@
   --amplify-components-pagination-button-padding-inline-start: var(--amplify-space-xxs);
   --amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40);
   --amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small);
-  --amplify-components-pagination-current-color: var(--amplify-colors-white);
   --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
   --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium);
   --amplify-components-menu-large-height: var(--amplify-font-sizes-xxxl);
@@ -487,7 +486,6 @@
   --amplify-components-menu-gap: var(--amplify-space-zero);
   --amplify-components-menu-border-width: var(--amplify-border-widths-small);
   --amplify-components-menu-border-radius: var(--amplify-radii-medium);
-  --amplify-components-menu-background-color: var(--amplify-colors-white);
   --amplify-components-loader-linear-large-font-size: var(--amplify-font-sizes-large);
   --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-large);
   --amplify-components-loader-linear-small-font-size: var(--amplify-font-sizes-small);
@@ -569,7 +567,6 @@
   --amplify-components-expander-item-border-bottom-right-radius: var(--amplify-radii-medium);
   --amplify-components-expander-item-border-bottom-left-radius: var(--amplify-radii-medium);
   --amplify-components-expander-border-radius: var(--amplify-radii-medium);
-  --amplify-components-expander-background-color: var(--amplify-colors-white);
   --amplify-components-divider-opacity: var(--amplify-opacities-60);
   --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
   --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
@@ -591,7 +588,6 @@
   --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
   --amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent);
   --amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium);
-  --amplify-components-checkbox-button-color: var(--amplify-colors-white);
   --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs);
   --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow);
   --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small);
@@ -630,20 +626,29 @@
   --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);
   --amplify-colors-font-focus: var(--amplify-colors-brand-primary-100);
   --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-link-disabled-color: var(--amplify-colors-font-disabled);
+  --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary);
+  --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-focus-color: var(--amplify-colors-background-primary);
+  --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary);
   --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-disabled-color: var(--amplify-colors-font-disabled);
+  --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-disabled-color: var(--amplify-colors-font-disabled);
+  --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);
@@ -654,6 +659,7 @@
   --amplify-components-text-primary-color: var(--amplify-colors-font-primary);
   --amplify-components-text-color: var(--amplify-colors-font-primary);
   --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary);
+  --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary);
   --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary);
   --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary);
@@ -677,16 +683,22 @@
   --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
   --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
   --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
+  --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
   --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
   --amplify-components-radio-button-checked-color: var(--amplify-colors-brand-primary-80);
+  --amplify-components-radio-button-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-radio-button-color: var(--amplify-colors-background-primary);
   --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary);
   --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary);
   --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary);
+  --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary);
   --amplify-components-pagination-button-color: var(--amplify-colors-font-primary);
+  --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse);
   --amplify-components-menu-box-shadow: var(--amplify-shadows-large);
   --amplify-components-menu-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-menu-background-color: var(--amplify-colors-background-primary);
   --amplify-components-loader-text-fill: var(--amplify-colors-font-primary);
   --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
   --amplify-components-loader-stroke-filled: var(--amplify-colors-brand-primary-80);
@@ -695,6 +707,7 @@
   --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error);
   --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
   --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
+  --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px  var(--amplify-colors-border-error);
   --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
   --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
@@ -706,14 +719,20 @@
   --amplify-components-expander-content-text-color: var(--amplify-colors-font-secondary);
   --amplify-components-expander-item-box-shadow: var(--amplify-shadows-small);
   --amplify-components-expander-box-shadow: var(--amplify-shadows-large);
+  --amplify-components-expander-background-color: var(--amplify-colors-background-primary);
   --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary);
   --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-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
   --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);
   --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-checkbox-button-color: var(--amplify-colors-font-inverse);
   --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium);
   --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
   --amplify-components-card-background-color: var(--amplify-colors-background-primary);
@@ -725,9 +744,12 @@
   --amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
   --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
   --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
+  --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-link-active-background-color: var(--amplify-colors-brand-primary-20);
   --amplify-components-button-link-focus-background-color: var(--amplify-colors-brand-primary-10);
   --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10);
+  --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-menu-active-background-color: var(--amplify-colors-brand-primary-90);
   --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse);
   --amplify-components-button-menu-focus-background-color: var(--amplify-colors-brand-primary-80);
@@ -740,10 +762,14 @@
   --amplify-components-button-primary-focus-background-color: var(--amplify-colors-brand-primary-90);
   --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse);
   --amplify-components-button-primary-hover-background-color: var(--amplify-colors-brand-primary-90);
+  --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled);
+  --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-primary-color: var(--amplify-colors-font-inverse);
   --amplify-components-button-primary-background-color: var(--amplify-colors-brand-primary-80);
   --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary);
+  --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary);
+  --amplify-components-button-loading-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-active-border-color: var(--amplify-colors-brand-primary-100);
   --amplify-components-button-active-background-color: var(--amplify-colors-brand-primary-20);
   --amplify-components-button-focus-background-color: var(--amplify-colors-brand-primary-10);
@@ -783,14 +809,14 @@
   --amplify-components-alert-info-color: var(--amplify-colors-font-info);
   --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary);
   --amplify-components-alert-color: var(--amplify-colors-font-primary);
-  --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled);
   --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-disabled-color: var(--amplify-colors-font-disabled);
+  --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
+  --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);
   --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
   --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
@@ -801,25 +827,34 @@
   --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-radio-label-disabled-color: var(--amplify-colors-font-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-color: var(--amplify-components-button-disabled-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-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);
   --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
   --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
-  --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
   --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
   --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
   --amplify-components-link-color: var(--amplify-colors-font-interactive);
   --amplify-components-link-active-color: var(--amplify-colors-font-active);
   --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
-  --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
   --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
   --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-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
+  --amplify-components-collection-pagination-button-disabled-color: var(--amplify-components-pagination-button-disabled-color);
+  --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-collection-pagination-current-color: var(--amplify-components-pagination-current-color);
   --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);
   --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
@@ -827,19 +862,12 @@
   --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color);
   --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size);
   --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
-  --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
-  --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-link-active-color: var(--amplify-colors-font-active);
   --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus);
   --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover);
   --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
-  --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
-  --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled);
-  --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled);
-  --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
-  --amplify-components-button-loading-color: var(--amplify-colors-font-disabled);
   --amplify-components-button-active-color: var(--amplify-colors-font-active);
   --amplify-components-button-focus-border-color: var(--amplify-colors-border-focus);
   --amplify-components-button-focus-color: var(--amplify-colors-font-focus);
@@ -847,8 +875,25 @@
   --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-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-color: var(--amplify-components-searchfield-button-disabled-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-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-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/index.d.ts

@@ -2,3 +2,4 @@ export { createTheme } from './createTheme';
 export { defaultTheme } from './defaultTheme';
 export { defaultDarkModeOverride } from './defaultDarkModeOverride';
 export * from './types';
+export { cssNameTransform } from './utils';

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/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 {