@aws-amplify/ui 4.0.0 → 4.1.0

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Thu, 13 Oct 2022 23:54:04 GMT
+ * Generated on Tue, 08 Nov 2022 23:57:24 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);
@@ -338,6 +338,18 @@
   --amplify-components-button-loading-background-color: transparent;
   --amplify-components-badge-text-align: center;
   --amplify-components-badge-line-height: 1;
+  --amplify-components-autocomplete-menu-loading-display: flex;
+  --amplify-components-autocomplete-menu-loading-align-items: center;
+  --amplify-components-autocomplete-menu-empty-display: flex;
+  --amplify-components-autocomplete-menu-option-transition-timing-function: ease;
+  --amplify-components-autocomplete-menu-option-transition-property: background-color, color;
+  --amplify-components-autocomplete-menu-option-cursor: pointer;
+  --amplify-components-autocomplete-menu-option-color: currentcolor;
+  --amplify-components-autocomplete-menu-options-max-height: 300px;
+  --amplify-components-autocomplete-menu-options-flex-direction: column;
+  --amplify-components-autocomplete-menu-options-display: flex;
+  --amplify-components-autocomplete-menu-border-style: solid;
+  --amplify-components-autocomplete-menu-width: 100%;
   --amplify-components-authenticator-router-border-style: solid;
   --amplify-components-authenticator-container-width-max: 30rem;
   --amplify-components-authenticator-max-width: 60rem;
@@ -509,6 +521,7 @@
   --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
   --amplify-components-loader-height: var(--amplify-font-sizes-medium);
   --amplify-components-loader-width: var(--amplify-font-sizes-medium);
+  --amplify-components-highlightmatch-highlighted-font-weight: 700;
   --amplify-components-heading-line-height: var(--amplify-line-heights-small);
   --amplify-components-heading-6-font-weight: 800;
   --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium);
@@ -618,6 +631,14 @@
   --amplify-components-badge-padding-vertical: var(--amplify-space-xs);
   --amplify-components-badge-font-size: var(--amplify-font-sizes-small);
   --amplify-components-badge-font-weight: 600;
+  --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
+  --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
+  --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
+  --amplify-components-autocomplete-menu-option-active-color: var(--amplify-colors-white);
+  --amplify-components-autocomplete-menu-option-transition-duration: var(--amplify-time-short);
+  --amplify-components-autocomplete-menu-border-radius: var(--amplify-radii-small);
+  --amplify-components-autocomplete-menu-border-width: var(--amplify-border-widths-small);
+  --amplify-components-autocomplete-menu-margin-block-start: var(--amplify-space-xxxs);
   --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80);
   --amplify-components-authenticator-form-padding: var(--amplify-space-xl);
   --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium);
@@ -677,6 +698,7 @@
   --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary);
   --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary);
+  --amplify-components-switchfield-track-error-background-color: var(--amplify-colors-background-error);
   --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-80);
   --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary);
   --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
@@ -805,6 +827,10 @@
   --amplify-components-badge-info-color: var(--amplify-colors-font-info);
   --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary);
   --amplify-components-badge-color: var(--amplify-colors-font-primary);
+  --amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-brand-primary-80);
+  --amplify-components-autocomplete-menu-option-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-autocomplete-menu-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-autocomplete-menu-background-color: var(--amplify-colors-background-primary);
   --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary);
   --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary);
   --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium);
@@ -957,12 +983,14 @@
   --amplify-components-collection-search-button-active-color: var(--amplify-components-searchfield-button-active-color);
 }
 
-html {
+html,
+[data-amplify-theme] {
   font-family: var(--amplify-fonts-default-static);
 }
 
 @supports (font-variation-settings: normal) {
-  html {
+  html,
+[data-amplify-theme] {
     font-family: var(--amplify-fonts-default-variable);
   }
 }
@@ -1427,6 +1455,10 @@ strong.amplify-text {
   width: var(--amplify-components-icon-height);
 }
 
+.amplify-highlightmatch__highlighted {
+  font-weight: var(--amplify-components-highlightmatch-highlighted-font-weight);
+}
+
 .amplify-input {
   box-sizing: border-box;
   color: var(--amplify-components-fieldcontrol-color);
@@ -1651,21 +1683,16 @@ strong.amplify-text {
 }
 .amplify-loader circle:last-of-type {
   transform-origin: center center;
-  -webkit-animation-name: amplify-loader-circular;
-          animation-name: amplify-loader-circular;
-  -webkit-animation-timing-function: linear;
-          animation-timing-function: linear;
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
-  -webkit-animation-duration: var(--amplify-components-loader-animation-duration);
-          animation-duration: var(--amplify-components-loader-animation-duration);
+  animation-name: amplify-loader-circular;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-duration: var(--amplify-components-loader-animation-duration);
   stroke: var(--amplify-components-loader-stroke-filled);
   stroke-linecap: var(--amplify-components-loader-stroke-linecap);
 }
 @media (prefers-reduced-motion) {
   .amplify-loader circle:last-of-type {
-    -webkit-animation: none;
-            animation: none;
+    animation: none;
     stroke-dasharray: 100% 200%;
     stroke-dashoffset: 50%;
   }
@@ -1673,19 +1700,14 @@ strong.amplify-text {
 .amplify-loader line:last-of-type {
   stroke: var(--amplify-components-loader-linear-stroke-filled);
   stroke-dasharray: 50% 200%;
-  -webkit-animation-name: amplify-loader-linear;
-          animation-name: amplify-loader-linear;
-  -webkit-animation-duration: var(--amplify-components-loader-linear-animation-duration);
-          animation-duration: var(--amplify-components-loader-linear-animation-duration);
-  -webkit-animation-timing-function: linear;
-          animation-timing-function: linear;
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
+  animation-name: amplify-loader-linear;
+  animation-duration: var(--amplify-components-loader-linear-animation-duration);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
 }
 @media (prefers-reduced-motion) {
   .amplify-loader line:last-of-type {
-    -webkit-animation: none;
-            animation: none;
+    animation: none;
     stroke-dashoffset: -50%;
   }
 }
@@ -1720,13 +1742,11 @@ strong.amplify-text {
   font-size: var(--amplify-internal-loader-linear-font-size);
 }
 .amplify-loader--determinate circle:last-of-type {
-  -webkit-animation: none;
-          animation: none;
+  animation: none;
   transform: rotate(-90deg);
 }
 .amplify-loader--determinate line:last-of-type {
-  -webkit-animation: none;
-          animation: none;
+  animation: none;
   stroke-dashoffset: 0%;
   stroke-dasharray: none;
 }
@@ -1735,20 +1755,6 @@ strong.amplify-text {
   stroke: none;
 }
 
-@-webkit-keyframes amplify-loader-circular {
-  0% {
-    stroke-dasharray: 100% 200%;
-    transform: rotate(120deg);
-  }
-  50% {
-    stroke-dasharray: 20% 400%;
-  }
-  100% {
-    stroke-dasharray: 100% 200%;
-    transform: rotate(480deg);
-  }
-}
-
 @keyframes amplify-loader-circular {
   0% {
     stroke-dasharray: 100% 200%;
@@ -1762,14 +1768,6 @@ strong.amplify-text {
     transform: rotate(480deg);
   }
 }
-@-webkit-keyframes amplify-loader-linear {
-  0% {
-    stroke-dashoffset: 200%;
-  }
-  100% {
-    stroke-dashoffset: -50%;
-  }
-}
 @keyframes amplify-loader-linear {
   0% {
     stroke-dashoffset: 200%;
@@ -1779,14 +1777,10 @@ strong.amplify-text {
   }
 }
 .amplify-placeholder {
-  -webkit-animation-direction: alternate;
-          animation-direction: alternate;
-  -webkit-animation-duration: var(--amplify-components-placeholder-transition-duration);
-          animation-duration: var(--amplify-components-placeholder-transition-duration);
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
-  -webkit-animation-name: amplify-placeholder-loading;
-          animation-name: amplify-placeholder-loading;
+  animation-direction: alternate;
+  animation-duration: var(--amplify-components-placeholder-transition-duration);
+  animation-iteration-count: infinite;
+  animation-name: amplify-placeholder-loading;
   border-radius: var(--amplify-components-placeholder-border-radius);
   height: var(--amplify-components-placeholder-default-height);
   width: 100%;
@@ -1799,15 +1793,6 @@ strong.amplify-text {
   height: var(--amplify-components-placeholder-large-height);
 }
 
-@-webkit-keyframes amplify-placeholder-loading {
-  0% {
-    background-color: var(--amplify-components-placeholder-start-color);
-  }
-  100% {
-    background-color: var(--amplify-components-placeholder-end-color);
-  }
-}
-
 @keyframes amplify-placeholder-loading {
   0% {
     background-color: var(--amplify-components-placeholder-start-color);
@@ -1818,8 +1803,7 @@ strong.amplify-text {
 }
 @media (prefers-reduced-motion: reduce) {
   .amplify-placeholder {
-    -webkit-animation: none;
-            animation: none;
+    animation: none;
     background-color: var(--amplify-components-placeholder-end-color);
   }
 }
@@ -1894,6 +1878,54 @@ strong.amplify-text {
   color: inherit;
 }
 
+.amplify-autocomplete__menu__option, .amplify-autocomplete__menu--loading, .amplify-autocomplete__menu--empty {
+  padding-block: var(--amplify-components-autocomplete-menu-space-shared-padding-block);
+  padding-inline: var(--amplify-components-autocomplete-menu-space-shared-padding-inline);
+}
+
+.amplify-autocomplete {
+  position: relative;
+}
+
+.amplify-autocomplete__menu {
+  position: absolute;
+  z-index: 99;
+  width: var(--amplify-components-autocomplete-menu-width);
+  -webkit-margin-before: var(--amplify-components-autocomplete-menu-margin-block-start);
+          margin-block-start: var(--amplify-components-autocomplete-menu-margin-block-start);
+  background-color: var(--amplify-components-autocomplete-menu-background-color);
+  border-color: var(--amplify-components-autocomplete-menu-border-color);
+  border-width: var(--amplify-components-autocomplete-menu-border-width);
+  border-style: var(--amplify-components-autocomplete-menu-border-style);
+  border-radius: var(--amplify-components-autocomplete-menu-border-radius);
+}
+.amplify-autocomplete__menu--empty {
+  display: var(--amplify-components-autocomplete-menu-empty-display);
+}
+.amplify-autocomplete__menu--loading {
+  display: var(--amplify-components-autocomplete-menu-loading-display);
+  align-items: var(--amplify-components-autocomplete-menu-loading-align-items);
+  gap: var(--amplify-components-autocomplete-menu-loading-gap);
+}
+.amplify-autocomplete__menu__options {
+  position: relative;
+  display: var(--amplify-components-autocomplete-menu-options-display);
+  flex-direction: var(--amplify-components-autocomplete-menu-options-flex-direction);
+  max-height: var(--amplify-components-autocomplete-menu-options-max-height);
+}
+.amplify-autocomplete__menu__option {
+  background-color: var(--amplify-components-autocomplete-menu-option-background-color);
+  color: var(--amplify-components-autocomplete-menu-option-color);
+  cursor: var(--amplify-components-autocomplete-menu-option-cursor);
+  transition-duration: var(--amplify-components-autocomplete-menu-option-transition-duration);
+  transition-property: var(--amplify-components-autocomplete-menu-option-transition-property);
+  transition-timing-function: var(--amplify-components-autocomplete-menu-option-transition-timing-function);
+}
+.amplify-autocomplete__menu__option--active {
+  background-color: var(--amplify-components-autocomplete-menu-option-active-background-color);
+  color: var(--amplify-components-autocomplete-menu-option-active-color);
+}
+
 /* Center by default */
 [data-amplify-authenticator] {
   display: grid;
@@ -2276,20 +2308,14 @@ strong.amplify-text {
           padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
 }
 .amplify-expander__content[data-state=open] {
-  -webkit-animation-name: amplify-expander-slide-down;
-          animation-name: amplify-expander-slide-down;
-  -webkit-animation-duration: var(--amplify-components-expander-content-open-animation-duration);
-          animation-duration: var(--amplify-components-expander-content-open-animation-duration);
-  -webkit-animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
-          animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
+  animation-name: amplify-expander-slide-down;
+  animation-duration: var(--amplify-components-expander-content-open-animation-duration);
+  animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
 }
 .amplify-expander__content[data-state=closed] {
-  -webkit-animation-name: amplify-expander-slide-up;
-          animation-name: amplify-expander-slide-up;
-  -webkit-animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
-          animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
-  -webkit-animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
-          animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
+  animation-name: amplify-expander-slide-up;
+  animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
+  animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
 }
 
 .amplify-expander__content__text {
@@ -2310,15 +2336,6 @@ strong.amplify-text {
   transform: rotate(180deg);
 }
 
-@-webkit-keyframes amplify-expander-slide-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: auto;
-  }
-}
-
 @keyframes amplify-expander-slide-down {
   from {
     height: 0;
@@ -2327,14 +2344,6 @@ strong.amplify-text {
     height: auto;
   }
 }
-@-webkit-keyframes amplify-expander-slide-up {
-  from {
-    height: auto;
-  }
-  to {
-    height: 0;
-  }
-}
 @keyframes amplify-expander-slide-up {
   from {
     height: auto;
@@ -2384,6 +2393,7 @@ strong.amplify-text {
 
 .amplify-field-group {
   gap: var(--amplify-components-fieldgroup-gap);
+  align-self: stretch;
 }
 .amplify-field-group--horizontal {
   flex-direction: row;
@@ -2433,7 +2443,6 @@ strong.amplify-text {
   width: 100%;
 }
 .amplify-field-group__field-wrapper--vertical {
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }
@@ -2876,6 +2885,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   display: var(--amplify-components-select-wrapper-display);
   position: var(--amplify-components-select-wrapper-position);
   cursor: var(--amplify-components-select-wrapper-cursor);
+  align-self: stretch;
 }
 
 .amplify-select__icon-wrapper {
@@ -3286,6 +3296,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-switch-track--focused {
   box-shadow: var(--amplify-components-switchfield-focused-shadow);
 }
+.amplify-switch-track--error {
+  background-color: var(--amplify-components-switchfield-track-error-background-color);
+}
 
 .amplify-switch-thumb {
   background-color: var(--amplify-components-switchfield-thumb-background-color);

package/dist/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 13 Oct 2022 23:54:04 GMT
+ * Generated on Tue, 08 Nov 2022 23:57:24 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -336,6 +336,18 @@
   --amplify-components-button-loading-background-color: transparent;
   --amplify-components-badge-text-align: center;
   --amplify-components-badge-line-height: 1;
+  --amplify-components-autocomplete-menu-loading-display: flex;
+  --amplify-components-autocomplete-menu-loading-align-items: center;
+  --amplify-components-autocomplete-menu-empty-display: flex;
+  --amplify-components-autocomplete-menu-option-transition-timing-function: ease;
+  --amplify-components-autocomplete-menu-option-transition-property: background-color, color;
+  --amplify-components-autocomplete-menu-option-cursor: pointer;
+  --amplify-components-autocomplete-menu-option-color: currentcolor;
+  --amplify-components-autocomplete-menu-options-max-height: 300px;
+  --amplify-components-autocomplete-menu-options-flex-direction: column;
+  --amplify-components-autocomplete-menu-options-display: flex;
+  --amplify-components-autocomplete-menu-border-style: solid;
+  --amplify-components-autocomplete-menu-width: 100%;
   --amplify-components-authenticator-router-border-style: solid;
   --amplify-components-authenticator-container-width-max: 30rem;
   --amplify-components-authenticator-max-width: 60rem;
@@ -507,6 +519,7 @@
   --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
   --amplify-components-loader-height: var(--amplify-font-sizes-medium);
   --amplify-components-loader-width: var(--amplify-font-sizes-medium);
+  --amplify-components-highlightmatch-highlighted-font-weight: 700;
   --amplify-components-heading-line-height: var(--amplify-line-heights-small);
   --amplify-components-heading-6-font-weight: 800;
   --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium);
@@ -616,6 +629,14 @@
   --amplify-components-badge-padding-vertical: var(--amplify-space-xs);
   --amplify-components-badge-font-size: var(--amplify-font-sizes-small);
   --amplify-components-badge-font-weight: 600;
+  --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
+  --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
+  --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
+  --amplify-components-autocomplete-menu-option-active-color: var(--amplify-colors-white);
+  --amplify-components-autocomplete-menu-option-transition-duration: var(--amplify-time-short);
+  --amplify-components-autocomplete-menu-border-radius: var(--amplify-radii-small);
+  --amplify-components-autocomplete-menu-border-width: var(--amplify-border-widths-small);
+  --amplify-components-autocomplete-menu-margin-block-start: var(--amplify-space-xxxs);
   --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80);
   --amplify-components-authenticator-form-padding: var(--amplify-space-xl);
   --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium);
@@ -675,6 +696,7 @@
   --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary);
   --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary);
+  --amplify-components-switchfield-track-error-background-color: var(--amplify-colors-background-error);
   --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-80);
   --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary);
   --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
@@ -803,6 +825,10 @@
   --amplify-components-badge-info-color: var(--amplify-colors-font-info);
   --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary);
   --amplify-components-badge-color: var(--amplify-colors-font-primary);
+  --amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-brand-primary-80);
+  --amplify-components-autocomplete-menu-option-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-autocomplete-menu-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-autocomplete-menu-background-color: var(--amplify-colors-background-primary);
   --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary);
   --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary);
   --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium);

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

@@ -0,0 +1,42 @@
+import { AlignItemsValue, BackgroundColorValue, BorderColorValue, BorderWidthValue, BorderStyleValue, BorderRadiusValue, ColorValue, CursorValue, DesignToken, DisplayValue, FlexDirectionValue, SpaceValue, TransitionDurationValue, TransitionPropertyValue, TransitionTimingFunctionValue } from '../types/designToken';
+export interface AutocompleteTokens {
+    menu: {
+        width: DesignToken<SpaceValue>;
+        marginBlockStart: DesignToken<SpaceValue>;
+        backgroundColor: DesignToken<BackgroundColorValue>;
+        borderColor: DesignToken<BorderColorValue>;
+        borderWidth: DesignToken<BorderWidthValue>;
+        borderStyle: DesignToken<BorderStyleValue>;
+        borderRadius: DesignToken<BorderRadiusValue>;
+        options: {
+            display: DesignToken<DisplayValue>;
+            flexDirection: DesignToken<FlexDirectionValue>;
+            maxHeight: DesignToken<SpaceValue>;
+        };
+        option: {
+            backgroundColor: DesignToken<BackgroundColorValue>;
+            color: DesignToken<ColorValue>;
+            cursor: DesignToken<CursorValue>;
+            transitionDuration: DesignToken<TransitionDurationValue>;
+            transitionProperty: DesignToken<TransitionPropertyValue>;
+            transitionTimingFunction: DesignToken<TransitionTimingFunctionValue>;
+            _active: {
+                backgroundColor: DesignToken<BackgroundColorValue>;
+                color: DesignToken<ColorValue>;
+            };
+        };
+        _empty: {
+            display: DesignToken<DisplayValue>;
+        };
+        _loading: {
+            alignItems: DesignToken<AlignItemsValue>;
+            display: DesignToken<DisplayValue>;
+            gap: DesignToken<SpaceValue>;
+        };
+        spaceShared: {
+            paddingBlock: DesignToken<SpaceValue>;
+            paddingInline: DesignToken<SpaceValue>;
+        };
+    };
+}
+export declare const autocomplete: AutocompleteTokens;

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

@@ -0,0 +1,9 @@
+import { DesignToken, FontWeightValue } from '../types/designToken';
+interface HighlightMatchHighlightedTokens {
+    fontWeight: DesignToken<FontWeightValue>;
+}
+export interface HighlightMatchTokens {
+    highlighted: HighlightMatchHighlightedTokens;
+}
+export declare const highlightmatch: HighlightMatchTokens;
+export {};

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

@@ -1,4 +1,5 @@
 import { AlertTokens } from './alert';
+import { AutocompleteTokens } from './autocomplete';
 import { AuthenticatorTokens } from './authenticator';
 import { BadgeTokens } from './badge';
 import { ButtonTokens } from './button';
@@ -16,6 +17,7 @@ import { FieldGroupTokens } from './fieldGroup';
 import { FieldMessagesTokens } from './fieldMessages';
 import { FlexTokens } from './flex';
 import { HeadingTokens } from './heading';
+import { HighlightMatchTokens } from './highlightMatch';
 import { IconTokens } from './icon';
 import { ImageTokens } from './image';
 import { LinkTokens } from './link';
@@ -44,6 +46,7 @@ import { ToggleButtonGroupTokens } from './toggleButtonGroup';
 export interface ComponentTokens {
     alert: AlertTokens;
     authenticator: AuthenticatorTokens;
+    autocomplete: AutocompleteTokens;
     badge: BadgeTokens;
     button: ButtonTokens;
     card: CardTokens;
@@ -61,6 +64,7 @@ export interface ComponentTokens {
     flex: FlexTokens;
     heading: HeadingTokens;
     icon: IconTokens;
+    highlightmatch: HighlightMatchTokens;
     image: ImageTokens;
     link: LinkTokens;
     loader: LoaderTokens;

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

@@ -33,6 +33,7 @@ interface SwitchFieldTrackTokens {
     padding: DesignToken<SpaceValue>;
     transition: SwitchFieldTrackTransitionTokens;
     width: DesignToken<SpaceValue>;
+    _error: SwitchFieldTrackCheckedTokens;
 }
 interface SwitchFieldTrackTransitionTokens {
     duration: DesignToken<TransitionDurationValue>;

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

@@ -1,2 +1,3 @@
 export * from './authenticator';
+export * from './primitives';
 export * from './util';