@aws-amplify/ui-react 2.18.1 → 2.19.0

package/dist/internal.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@aws-amplify/auth"),a=require("@aws-amplify/core"),r=require("@aws-amplify/datastore"),i=require("@aws-amplify/storage"),s=require("./utils-97fdf48f.js"),o=require("aws-amplify");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function d(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}require("lodash/isEmpty"),require("lodash/isArray"),require("lodash/isObject");var c=d(e),u=n(t);const l=({model:e,criteria:t,pagination:a})=>{const[i,s]=c.useState({items:[],isLoading:!1,error:void 0});return c.useEffect((()=>{s({isLoading:!0,items:[]});const i=r.DataStore.observeQuery(e,t,a).subscribe((e=>s({items:e.items,isLoading:!1})),(e=>s({items:[],error:e,isLoading:!1})));if(i)return()=>i.unsubscribe()}),[]),i},f=({model:e,id:t})=>{const[a,i]=c.useState(),[s,o]=c.useState(!1),[n,d]=c.useState();return c.useEffect((()=>{o(!0),r.DataStore.query(e,t).then(i).catch(d).finally((()=>o(!1)))}),[]),{error:n,item:a,isLoading:s}};const p="undefined"!=typeof Symbol&&"function"==typeof Symbol.for?Symbol.for("amplify_default"):"@@amplify_default";const h=({fields:e,modelName:t,schema:a})=>c.useMemo((()=>{if(function(e,t){return!t}(0,a))return e;let r={};return Object.keys(e).forEach((i=>{var s,o,n;switch(null===(n=null===(o=null===(s=null==a?void 0:a.models[t])||void 0===s?void 0:s.fields)||void 0===o?void 0:o[i])||void 0===n?void 0:n.type){case"AWSTimestamp":case"Float":r[i]=Number(e[i]);break;case"Boolean":r[i]=Boolean(e[i]);break;case"Int":r[i]=parseInt(e[i]);break;default:r[i]=e[i]}})),r}),[e,a,t]),v=e=>e.reduce(((e,t)=>a=>t(e(a))),(e=>e)),g=e=>{const{and:t,or:a,field:r,operator:i,operand:o}=e;if(Array.isArray(t)){const e=t.map((e=>g(e)));return t=>t.and(v(e))}if(Array.isArray(a)){const e=a.map((e=>g(e)));return t=>t.or(v(e))}return e=>s.isFunction(e[r])?e[r].call(e,i,o):e};exports.findChildOverrides=s.findChildOverrides,exports.getOverrideProps=s.getOverrideProps,exports.getOverridesFromVariants=s.getOverridesFromVariants,exports.mergeVariantsAndOverrides=s.mergeVariantsAndOverrides,exports.createDataStorePredicate=g,exports.useAuth=()=>{const[e,t]=c.useState({error:void 0,isLoading:!0,user:void 0}),r=({payload:e})=>{switch(e.event){case"signIn":return t({user:e.data,isLoading:!1});case"signOut":return t({isLoading:!1})}},i=()=>(t({isLoading:!0}),u.default.currentAuthenticatedUser().then((e=>t({user:e,isLoading:!1}))).catch((e=>t({error:e,isLoading:!1}))),a.Hub.listen("auth",r),()=>a.Hub.remove("auth",r));return c.useEffect(i,[]),Object.assign(Object.assign({},e),{fetch:i})},exports.useAuthSignOutAction=e=>()=>s.__awaiter(void 0,void 0,void 0,(function*(){try{o.Hub.dispatch("ui",{event:"actions:auth:signout:started",data:{options:e}},"actions:auth:signout",p),yield o.Auth.signOut(e),o.Hub.dispatch("ui",{event:"actions:auth:signout:finished",data:{options:e}},"actions:auth:signout",p)}catch(t){o.Hub.dispatch("ui",{event:"actions:auth:signout:finished",data:{options:e,errorMessage:s.getErrorMessage(t)}},"actions:auth:signout",p)}})),exports.useDataStoreBinding=function(e){return"record"===e.type?f(e):l(e)},exports.useDataStoreCollection=l,exports.useDataStoreCreateAction=({model:e,fields:t,schema:a})=>{const r=h({fields:t,modelName:e.name,schema:a});return()=>s.__awaiter(void 0,void 0,void 0,(function*(){try{o.Hub.dispatch("ui",{event:"actions:datastore:create:started",data:{fields:r}},"actions:datastore:create",p);const t=yield o.DataStore.save(new e(r));o.Hub.dispatch("ui",{event:"actions:datastore:create:finished",data:{fields:r,item:t}},"actions:datastore:create",p)}catch(e){o.Hub.dispatch("ui",{event:"actions:datastore:create:finished",data:{fields:r,errorMessage:s.getErrorMessage(e)}},"actions:datastore:create",p)}}))},exports.useDataStoreDeleteAction=({model:e,id:t})=>()=>s.__awaiter(void 0,void 0,void 0,(function*(){try{o.Hub.dispatch("ui",{event:"actions:datastore:delete:started",data:{id:t}},"actions:datastore:delete",p),yield o.DataStore.delete(e,t),o.Hub.dispatch("ui",{event:"actions:datastore:delete:finished",data:{id:t}},"actions:datastore:delete",p)}catch(e){o.Hub.dispatch("ui",{event:"actions:datastore:delete:finished",data:{id:t,errorMessage:s.getErrorMessage(e)}},"actions:datastore:delete",p)}})),exports.useDataStoreItem=f,exports.useDataStoreUpdateAction=({fields:e,id:t,model:a,schema:r})=>{const i=h({fields:e,modelName:a.name,schema:r});return()=>s.__awaiter(void 0,void 0,void 0,(function*(){try{o.Hub.dispatch("ui",{event:"actions:datastore:update:started",data:{fields:i,id:t}},"actions:datastore:update",p);const e=yield o.DataStore.query(a,t);if(!e)throw new Error(`Error querying datastore item by id: ${t}`);const r=yield o.DataStore.save(a.copyOf(e,(e=>{Object.assign(e,i)})));o.Hub.dispatch("ui",{event:"actions:datastore:update:finished",data:{fields:i,id:t,item:r}},"actions:datastore:update",p)}catch(e){o.Hub.dispatch("ui",{event:"actions:datastore:update:finished",data:{fields:i,id:t,errorMessage:s.getErrorMessage(e)}},"actions:datastore:update",p)}}))},exports.useNavigateAction=e=>{const{type:t,url:a,anchor:r,target:i}=e,s=c.useMemo((()=>{switch(t){case"url":return()=>{window.open(a,i||"_self","noopener noreferrer")};case"anchor":return()=>{window.location.hash=r};case"reload":return()=>{window.location.reload()};default:return()=>{console.warn('Please provide a valid navigate type. Available types are "url", "anchor" and "reload".')}}}),[r,i,t,a]);return()=>{o.Hub.dispatch("ui",{event:"actions:core:navigate:started",data:e},"actions:core:navigate",p),s(),o.Hub.dispatch("ui",{event:"actions:core:navigate:finished",data:e},"actions:core:navigate",p)}},exports.useStateMutationAction=e=>{const[t,a]=c.useState(e),r=c.useCallback((e=>{const r=t;o.Hub.dispatch("ui",{event:"actions:core:statemutation:started",data:{prevState:r,newState:e}},"actions:core:statemutation",p),a(e),o.Hub.dispatch("ui",{event:"actions:core:statemutation:finished",data:{prevState:r,newState:e}},"actions:core:statemutation",p)}),[t]);return[t,r]},exports.useStorageURL=(e,t)=>{const[a,r]=c.useState({isLoading:!0}),s=JSON.stringify(t),o=()=>{r({isLoading:!0});const a=i.Storage.get(e,t);return a.then((e=>r({url:e,isLoading:!1}))).catch((e=>r({error:e,isLoading:!1}))),()=>i.Storage.cancel(a)};return c.useEffect(o,[e,t,s]),Object.assign(Object.assign({},a),{fetch:o})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@aws-amplify/auth"),a=require("@aws-amplify/core"),r=require("@aws-amplify/datastore"),i=require("@aws-amplify/storage"),s=require("./utils-55cbae67.js"),o=require("aws-amplify");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function d(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}require("lodash/isEmpty"),require("lodash/isArray"),require("lodash/isObject");var c=d(e),u=n(t);const l=({model:e,criteria:t,pagination:a})=>{const[i,s]=c.useState({items:[],isLoading:!1,error:void 0});return c.useEffect((()=>{s({isLoading:!0,items:[]});const i=r.DataStore.observeQuery(e,t,a).subscribe((e=>s({items:e.items,isLoading:!1})),(e=>s({items:[],error:e,isLoading:!1})));if(i)return()=>i.unsubscribe()}),[]),i},f=({model:e,id:t})=>{const[a,i]=c.useState(),[s,o]=c.useState(!1),[n,d]=c.useState();return c.useEffect((()=>{o(!0),r.DataStore.query(e,t).then(i).catch(d).finally((()=>o(!1)))}),[]),{error:n,item:a,isLoading:s}};const p="undefined"!=typeof Symbol&&"function"==typeof Symbol.for?Symbol.for("amplify_default"):"@@amplify_default";const h=({fields:e,modelName:t,schema:a})=>c.useMemo((()=>{if(function(e,t){return!t}(0,a))return e;let r={};return Object.keys(e).forEach((i=>{var s,o,n;switch(null===(n=null===(o=null===(s=null==a?void 0:a.models[t])||void 0===s?void 0:s.fields)||void 0===o?void 0:o[i])||void 0===n?void 0:n.type){case"AWSTimestamp":case"Float":r[i]=Number(e[i]);break;case"Boolean":r[i]=Boolean(e[i]);break;case"Int":r[i]=parseInt(e[i]);break;default:r[i]=e[i]}})),r}),[e,a,t]),v=e=>e.reduce(((e,t)=>a=>t(e(a))),(e=>e)),g=e=>{const{and:t,or:a,field:r,operator:i,operand:o}=e;if(Array.isArray(t)){const e=t.map((e=>g(e)));return t=>t.and(v(e))}if(Array.isArray(a)){const e=a.map((e=>g(e)));return t=>t.or(v(e))}return e=>s.isFunction(e[r])?e[r].call(e,i,o):e};exports.findChildOverrides=s.findChildOverrides,exports.getOverrideProps=s.getOverrideProps,exports.getOverridesFromVariants=s.getOverridesFromVariants,exports.mergeVariantsAndOverrides=s.mergeVariantsAndOverrides,exports.createDataStorePredicate=g,exports.useAuth=()=>{const[e,t]=c.useState({error:void 0,isLoading:!0,user:void 0}),r=({payload:e})=>{switch(e.event){case"signIn":return t({user:e.data,isLoading:!1});case"signOut":return t({isLoading:!1})}},i=()=>(t({isLoading:!0}),u.default.currentAuthenticatedUser().then((e=>t({user:e,isLoading:!1}))).catch((e=>t({error:e,isLoading:!1}))),a.Hub.listen("auth",r),()=>a.Hub.remove("auth",r));return c.useEffect(i,[]),Object.assign(Object.assign({},e),{fetch:i})},exports.useAuthSignOutAction=e=>()=>s.__awaiter(void 0,void 0,void 0,(function*(){try{o.Hub.dispatch("ui",{event:"actions:auth:signout:started",data:{options:e}},"actions:auth:signout",p),yield o.Auth.signOut(e),o.Hub.dispatch("ui",{event:"actions:auth:signout:finished",data:{options:e}},"actions:auth:signout",p)}catch(t){o.Hub.dispatch("ui",{event:"actions:auth:signout:finished",data:{options:e,errorMessage:s.getErrorMessage(t)}},"actions:auth:signout",p)}})),exports.useDataStoreBinding=function(e){return"record"===e.type?f(e):l(e)},exports.useDataStoreCollection=l,exports.useDataStoreCreateAction=({model:e,fields:t,schema:a})=>{const r=h({fields:t,modelName:e.name,schema:a});return()=>s.__awaiter(void 0,void 0,void 0,(function*(){try{o.Hub.dispatch("ui",{event:"actions:datastore:create:started",data:{fields:r}},"actions:datastore:create",p);const t=yield o.DataStore.save(new e(r));o.Hub.dispatch("ui",{event:"actions:datastore:create:finished",data:{fields:r,item:t}},"actions:datastore:create",p)}catch(e){o.Hub.dispatch("ui",{event:"actions:datastore:create:finished",data:{fields:r,errorMessage:s.getErrorMessage(e)}},"actions:datastore:create",p)}}))},exports.useDataStoreDeleteAction=({model:e,id:t})=>()=>s.__awaiter(void 0,void 0,void 0,(function*(){try{o.Hub.dispatch("ui",{event:"actions:datastore:delete:started",data:{id:t}},"actions:datastore:delete",p),yield o.DataStore.delete(e,t),o.Hub.dispatch("ui",{event:"actions:datastore:delete:finished",data:{id:t}},"actions:datastore:delete",p)}catch(e){o.Hub.dispatch("ui",{event:"actions:datastore:delete:finished",data:{id:t,errorMessage:s.getErrorMessage(e)}},"actions:datastore:delete",p)}})),exports.useDataStoreItem=f,exports.useDataStoreUpdateAction=({fields:e,id:t,model:a,schema:r})=>{const i=h({fields:e,modelName:a.name,schema:r});return()=>s.__awaiter(void 0,void 0,void 0,(function*(){try{o.Hub.dispatch("ui",{event:"actions:datastore:update:started",data:{fields:i,id:t}},"actions:datastore:update",p);const e=yield o.DataStore.query(a,t);if(!e)throw new Error(`Error querying datastore item by id: ${t}`);const r=yield o.DataStore.save(a.copyOf(e,(e=>{Object.assign(e,i)})));o.Hub.dispatch("ui",{event:"actions:datastore:update:finished",data:{fields:i,id:t,item:r}},"actions:datastore:update",p)}catch(e){o.Hub.dispatch("ui",{event:"actions:datastore:update:finished",data:{fields:i,id:t,errorMessage:s.getErrorMessage(e)}},"actions:datastore:update",p)}}))},exports.useNavigateAction=e=>{const{type:t,url:a,anchor:r,target:i}=e,s=c.useMemo((()=>{switch(t){case"url":return()=>{window.open(a,i||"_self","noopener noreferrer")};case"anchor":return()=>{window.location.hash=r};case"reload":return()=>{window.location.reload()};default:return()=>{console.warn('Please provide a valid navigate type. Available types are "url", "anchor" and "reload".')}}}),[r,i,t,a]);return()=>{o.Hub.dispatch("ui",{event:"actions:core:navigate:started",data:e},"actions:core:navigate",p),s(),o.Hub.dispatch("ui",{event:"actions:core:navigate:finished",data:e},"actions:core:navigate",p)}},exports.useStateMutationAction=e=>{const[t,a]=c.useState(e),r=c.useCallback((e=>{const r=t;o.Hub.dispatch("ui",{event:"actions:core:statemutation:started",data:{prevState:r,newState:e}},"actions:core:statemutation",p),a(e),o.Hub.dispatch("ui",{event:"actions:core:statemutation:finished",data:{prevState:r,newState:e}},"actions:core:statemutation",p)}),[t]);return[t,r]},exports.useStorageURL=(e,t)=>{const[a,r]=c.useState({isLoading:!0}),s=JSON.stringify(t),o=()=>{r({isLoading:!0});const a=i.Storage.get(e,t);return a.then((e=>r({url:e,isLoading:!1}))).catch((e=>r({error:e,isLoading:!1}))),()=>i.Storage.cancel(a)};return c.useEffect(o,[e,t,s]),Object.assign(Object.assign({},a),{fetch:o})};

package/dist/primitives.json

@@ -3216,6 +3216,9 @@
       "isSearchable": {
         "type": "boolean"
       },
+      "searchLabel": {
+        "type": "string"
+      },
       "searchPlaceholder": {
         "type": "string"
       },
@@ -12584,6 +12587,18 @@
       },
       "hasMorePages": {
         "type": "boolean"
+      },
+      "currentPageLabel": {
+        "type": "string"
+      },
+      "pageLabel": {
+        "type": "string"
+      },
+      "previousLabel": {
+        "type": "string"
+      },
+      "nextLabel": {
+        "type": "string"
       }
     }
   },
@@ -13218,6 +13233,12 @@
         "type": "boolean",
         "priority": true
       },
+      "hidePasswordButtonLabel": {
+        "type": "string"
+      },
+      "showPasswordButtonLabel": {
+        "type": "string"
+      },
       "outerEndComponent": {
         "type": "string"
       },
@@ -17173,6 +17194,9 @@
       },
       "innerEndComponent": {
         "type": "string"
+      },
+      "clearButtonLabel": {
+        "type": "string"
       }
     }
   },
@@ -18988,6 +19012,12 @@
       },
       "innerEndComponent": {
         "type": "string"
+      },
+      "increaseButtonLabel": {
+        "type": "string"
+      },
+      "decreaseButtonLabel": {
+        "type": "string"
       }
     }
   },

package/dist/styles.css

@@ -4,7 +4,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 19 May 2022 22:35:34 GMT
+ * Generated on Thu, 02 Jun 2022 23:07:36 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -382,17 +382,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);
@@ -400,9 +405,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);
@@ -634,6 +637,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);
@@ -641,13 +645,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);
@@ -791,8 +798,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);
@@ -3417,9 +3428,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-togglebutton {
-  background-color: var(--amplify-internal-togglebutton-background-color);
-  border-color: var(--amplify-internal-togglebutton-border-color);
-  color: var(--amplify-internal-togglebutton-color);
   --amplify-internal-togglebutton-background-color: initial;
   --amplify-internal-togglebutton-border-color: var(
     --amplify-components-togglebutton-border-color
@@ -3427,9 +3435,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-color: var(
     --amplify-components-togglebutton-color
   );
-  --amplify-internal-togglebutton-hover-background-color: var(
-    --amplify-components-togglebutton-hover-background-color
-  );
+  background-color: var(--amplify-internal-togglebutton-background-color);
+  border-color: var(--amplify-internal-togglebutton-border-color);
+  color: var(--amplify-internal-togglebutton-color);
   --amplify-internal-togglebutton-focus-background-color: var(
     --amplify-internal-togglebutton-background-color
   );
@@ -3439,6 +3447,15 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-focus-color: var(
     --amplify-components-togglebutton-focus-color
   );
+  --amplify-internal-togglebutton-hover-background-color: var(
+    --amplify-components-togglebutton-hover-background-color
+  );
+  --amplify-internal-togglebutton-hover-border-color: var(
+    --amplify-internal-togglebutton-border-color
+  );
+  --amplify-internal-togglebutton-hover-color: var(
+    --amplify-internal-togglebutton-color
+  );
   --amplify-internal-togglebutton-active-background-color: var(
     --amplify-components-togglebutton-active-background-color
   );
@@ -3453,21 +3470,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
   );
 }
 
-.amplify-togglebutton:hover {
-  background-color: var(--amplify-internal-togglebutton-hover-background-color);
-  border-color: var(--amplify-internal-togglebutton-border-color);
-  color: var(--amplify-internal-togglebutton-color);
-  --amplify-internal-togglebutton-focus-background-color: var(
-    --amplify-internal-togglebutton-hover-background-color
-  );
-}
-
 .amplify-togglebutton:focus {
   background-color: var(--amplify-internal-togglebutton-focus-background-color);
   border-color: var(--amplify-internal-togglebutton-focus-border-color);
   color: var(--amplify-internal-togglebutton-focus-color);
 }
 
+.amplify-togglebutton:hover {
+  background-color: var(--amplify-internal-togglebutton-hover-background-color);
+  border-color: var(--amplify-internal-togglebutton-hover-border-color);
+  color: var(--amplify-internal-togglebutton-hover-color);
+}
+
 .amplify-togglebutton:active {
   background-color: var(--amplify-internal-togglebutton-active-background-color);
 }
@@ -3479,24 +3493,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-togglebutton--pressed {
+  --amplify-internal-togglebutton-border-color: var(
+    --amplify-components-togglebutton-pressed-border-color
+  );
   --amplify-internal-togglebutton-background-color: var(
     --amplify-components-togglebutton-pressed-background-color
   );
   --amplify-internal-togglebutton-color: var(
     --amplify-components-togglebutton-pressed-color
   );
-}
-
-.amplify-togglebutton--pressed:hover:not(:disabled) {
   --amplify-internal-togglebutton-hover-background-color: var(
     --amplify-components-togglebutton-pressed-hover-background-color
   );
-}
-
-.amplify-togglebutton--pressed:disabled {
   --amplify-internal-togglebutton-disabled-background-color: var(
     --amplify-components-togglebutton-pressed-background-color
   );
+  --amplify-internal-togglebutton-disabled-border-color: var(
+    --amplify-components-togglebutton-pressed-border-color
+  );
   --amplify-internal-togglebutton-disabled-color: var(
     --amplify-components-togglebutton-pressed-color
   );
@@ -3522,27 +3536,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
     --amplify-internal-togglebutton-primary-color
   );
   border-width: var(--amplify-components-togglebutton-primary-border-width);
-  --amplify-internal-togglebutton-hover-background-color: var(
-    --amplify-components-togglebutton-primary-background-color
-  );
-  --amplify-internal-togglebutton-focus-border-color: var(
-    --amplify-components-togglebutton-border-color
-  );
-  --amplify-internal-togglebutton-focus-color: var(
-    --amplify-components-togglebutton-color
-  );
-  --amplify-internal-togglebutton-active-background-color: var(
-    --amplify-components-togglebutton-primary-background-color
-  );
-  --amplify-internal-togglebutton-disabled-background-color: var(
-    --amplify-components-togglebutton-primary-background-color
-  );
-  --amplify-internal-togglebutton-disabled-border-color: var(
-    --amplify-components-togglebutton-border-color
-  );
-  --amplify-internal-togglebutton-disabled-color: var(
-    --amplify-components-togglebutton-color
-  );
   --amplify-internal-togglebutton-primary-focus-background-color: var(
     --amplify-components-togglebutton-primary-focus-background-color
   );
@@ -3552,6 +3545,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-primary-focus-color: var(
     --amplify-components-togglebutton-primary-focus-color
   );
+  --amplify-internal-togglebutton-primary-focus-box-shadow: var(
+    --amplify-components-togglebutton-primary-focus-box-shadow
+  );
+  --amplify-internal-togglebutton-focus-background-color: var(
+    --amplify-internal-togglebutton-primary-focus-background-color
+  );
+  --amplify-internal-togglebutton-focus-border-color: var(
+    --amplify-internal-togglebutton-primary-focus-border-color
+  );
+  --amplify-internal-togglebutton-focus-color: var(
+    --amplify-internal-togglebutton-primary-focus-color
+  );
   --amplify-internal-togglebutton-primary-hover-background-color: var(
     --amplify-components-togglebutton-primary-hover-background-color
   );
@@ -3561,43 +3566,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-primary-hover-color: var(
     --amplify-components-togglebutton-primary-hover-color
   );
+  --amplify-internal-togglebutton-hover-background-color: var(
+    --amplify-internal-togglebutton-primary-hover-background-color
+  );
+  --amplify-internal-togglebutton-hover-border-color: var(
+    --amplify-internal-togglebutton-primary-hover-border-color
+  );
+  --amplify-internal-togglebutton-hover-color: var(
+    --amplify-internal-togglebutton-primary-hover-color
+  );
   --amplify-internal-togglebutton-primary-disabled-background-color: var(
     --amplify-components-togglebutton-primary-disabled-background-color
   );
   --amplify-internal-togglebutton-primary-disabled-border-color: var(
-    --amplify-internal-togglebutton-primary-border-color
+    --amplify-components-togglebutton-primary-disabled-border-color
   );
   --amplify-internal-togglebutton-primary-disabled-color: var(
     --amplify-components-togglebutton-primary-disabled-color
   );
-}
-
-.amplify-togglebutton--primary:focus {
-  --amplify-internal-togglebutton-focus-background-color: var(
-    --amplify-internal-togglebutton-primary-focus-background-color
-  );
-  --amplify-internal-togglebutton-focus-border-color: var(
-    --amplify-internal-togglebutton-primary-focus-border-color
-  );
-  --amplify-internal-togglebutton-focus-color: var(
-    --amplify-internal-togglebutton-primary-focus-color
-  );
-  box-shadow: var(--amplify-components-togglebutton-primary-focus-box-shadow);
-  --amplify-internal-togglebutton-primary-hover-border-color: var(
-    --amplify-internal-togglebutton-primary-focus-border-color
-  );
-}
-
-.amplify-togglebutton--primary:hover {
-  background-color: var(--amplify-internal-togglebutton-primary-hover-background-color);
-  border-color: var(--amplify-internal-togglebutton-primary-hover-border-color);
-  color: var(--amplify-internal-togglebutton-primary-hover-color);
-  --amplify-internal-togglebutton-focus-background-color: var(
-    --amplify-internal-togglebutton-primary-hover-background-color
-  );
-}
-
-.amplify-togglebutton--primary:disabled {
   --amplify-internal-togglebutton-disabled-background-color: var(
     --amplify-internal-togglebutton-primary-disabled-background-color
   );
@@ -3609,6 +3595,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
   );
 }
 
+.amplify-togglebutton--primary:focus {
+  box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
+}
+
 .amplify-togglebutton--pressed {
   --amplify-internal-togglebutton-primary-background-color: var(
     --amplify-components-togglebutton-primary-pressed-background-color
@@ -3619,48 +3609,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-primary-color: var(
     --amplify-components-togglebutton-primary-pressed-color
   );
-}
-
-.amplify-togglebutton--pressed:focus {
   --amplify-internal-togglebutton-primary-focus-background-color: var(
     --amplify-components-togglebutton-primary-pressed-focus-background-color
   );
   --amplify-internal-togglebutton-primary-focus-border-color: var(
     --amplify-components-togglebutton-primary-pressed-focus-border-color
   );
-}
-
-.amplify-togglebutton--pressed:hover:not(:disabled) {
-  --amplify-internal-togglebutton-primary-hover-background-color: var(
-    --amplify-components-togglebutton-primary-pressed-hover-background-color
-  );
-  --amplify-internal-togglebutton-primary-hover-border-color: var(
-    --amplify-components-togglebutton-primary-pressed-hover-border-color
-  );
-  --amplify-internal-togglebutton-primary-focus-background-color: var(
-    --amplify-components-togglebutton-primary-pressed-hover-background-color
-  );
-}
-
-.amplify-togglebutton--pressed:focus {
   --amplify-internal-togglebutton-primary-focus-color: var(
-    --amplify-components-togglebutton-primary-pressed-color
+    --amplify-components-togglebutton-primary-pressed-focus-color
   );
-}
-
-.amplify-togglebutton--pressed:hover {
   --amplify-internal-togglebutton-primary-hover-background-color: var(
-    --amplify-components-togglebutton-primary-hover-background-color
+    --amplify-components-togglebutton-primary-pressed-hover-background-color
   );
   --amplify-internal-togglebutton-primary-hover-border-color: var(
-    --amplify-internal-togglebutton-primary-border-color
+    --amplify-components-togglebutton-primary-pressed-hover-border-color
   );
   --amplify-internal-togglebutton-primary-hover-color: var(
-    --amplify-components-togglebutton-primary-pressed-color
+    --amplify-components-togglebutton-primary-pressed-hover-color
   );
-}
-
-.amplify-togglebutton--pressed:disabled {
   --amplify-internal-togglebutton-primary-disabled-background-color: var(
     --amplify-components-togglebutton-primary-pressed-background-color
   );
@@ -3672,29 +3638,25 @@ html[dir=rtl] .amplify-field-group__inner-start {
   );
 }
 
+.amplify-togglebutton--pressed:hover {
+  --amplify-internal-togglebutton-primary-focus-box-shadow: var(
+    --amplify-components-togglebutton-primary-pressed-hover-box-shadow
+  );
+}
+
 .amplify-togglebutton--link {
   --amplify-internal-togglebutton-link-background-color: var(
-    --amplify-components-togglebutton-background-color
+    --amplify-components-togglebutton-link-background-color
   );
   --amplify-internal-togglebutton-link-color: var(
     --amplify-components-togglebutton-link-color
   );
-  background-color: var(--amplify-internal-togglebutton-link-background-color);
-  color: var(--amplify-internal-togglebutton-link-color);
-  --amplify-internal-togglebutton-link-hover-background-color: var(
-    --amplify-components-togglebutton-link-hover-background-color
+  --amplify-internal-togglebutton-background-color: var(
+    --amplify-internal-togglebutton-link-background-color
   );
-  --amplify-internal-togglebutton-link-hover-color: var(
-    --amplify-components-togglebutton-link-hover-color
+  --amplify-internal-togglebutton-color: var(
+    --amplify-internal-togglebutton-link-color
   );
-}
-
-.amplify-togglebutton--link:hover {
-  background-color: var(--amplify-internal-togglebutton-link-hover-background-color);
-  color: var(--amplify-internal-togglebutton-link-hover-color);
-}
-
-.amplify-togglebutton--link:focus {
   --amplify-internal-togglebutton-link-focus-background-color: var(
     --amplify-components-togglebutton-link-focus-background-color
   );
@@ -3707,12 +3669,30 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-focus-color: var(
     --amplify-internal-togglebutton-link-focus-color
   );
-}
-
-.amplify-togglebutton--link:disabled {
-  --amplify-internal-togglebutton-disabled-color: var(
+  --amplify-internal-togglebutton-link-hover-background-color: var(
+    --amplify-components-togglebutton-link-hover-background-color
+  );
+  --amplify-internal-togglebutton-link-hover-color: var(
+    --amplify-components-togglebutton-link-hover-color
+  );
+  --amplify-internal-togglebutton-hover-background-color: var(
+    --amplify-internal-togglebutton-link-hover-background-color
+  );
+  --amplify-internal-togglebutton-hover-color: var(
+    --amplify-internal-togglebutton-link-hover-color
+  );
+  --amplify-internal-togglebutton-link-disabled-color: var(
     --amplify-components-togglebutton-link-disabled-color
   );
+  --amplify-internal-togglebutton-link-disabled-background-color: var(
+    --amplify-components-togglebutton-link-disabled-background-color
+  );
+  --amplify-internal-togglebutton-disabled-color: var(
+    --amplify-internal-togglebutton-link-disabled-color
+  );
+  --amplify-internal-togglebutton-disabled-background-color: var(
+    --amplify-internal-togglebutton-link-disabled-background-color
+  );
 }
 
 .amplify-togglebutton--pressed {
@@ -3722,22 +3702,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-link-background-color: var(
     --amplify-components-togglebutton-link-pressed-background-color
   );
-}
-
-.amplify-togglebutton--pressed:hover {
+  --amplify-internal-togglebutton-link-focus-background-color: var(
+    --amplify-components-togglebutton-link-pressed-focus-background-color
+  );
+  --amplify-internal-togglebutton-link-focus-color: var(
+    --amplify-components-togglebutton-link-pressed-focus-color
+  );
   --amplify-internal-togglebutton-link-hover-background-color: var(
     --amplify-components-togglebutton-link-pressed-hover-background-color
   );
   --amplify-internal-togglebutton-link-hover-color: var(
-    --amplify-components-togglebutton-link-pressed-color
-  );
-}
-
-.amplify-togglebutton--pressed:focus {
-  --amplify-internal-togglebutton-link-focus-background-color: var(
-    --amplify-components-togglebutton-link-pressed-background-color
+    --amplify-components-togglebutton-link-pressed-hover-color
   );
-  --amplify-internal-togglebutton-link-focus-color: var(
+  --amplify-internal-togglebutton-link-disabled-color: var(
     --amplify-components-togglebutton-link-pressed-color
   );
 }

package/dist/types/components/Authenticator/Authenticator.d.ts

@@ -3,6 +3,9 @@ import { AuthenticatorMachineOptions } from '@aws-amplify/ui';
 import { ComponentsProviderProps } from './hooks/useCustomComponents';
 import { RouterProps } from './Router';
 export declare type AuthenticatorProps = Partial<AuthenticatorMachineOptions & ComponentsProviderProps & RouterProps>;
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/authenticator)
+ */
 export declare function Authenticator({ children, className, components: customComponents, formFields, hideSignUp, initialState, loginMechanisms, signUpAttributes, services, socialProviders, variation, }: AuthenticatorProps): JSX.Element;
 export declare namespace Authenticator {
     var Provider: ({ children }: {

package/dist/types/components/Authenticator/ConfirmSignIn/ConfirmSignIn.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const ConfirmSignIn: {
     ({ className, variation, }: RouteProps): JSX.Element;

package/dist/types/components/Authenticator/ConfirmSignUp/ConfirmSignUp.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare function ConfirmSignUp({ className, variation }: RouteProps): JSX.Element;
 export declare namespace ConfirmSignUp {

package/dist/types/components/Authenticator/FederatedSignIn/FederatedSignIn.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function FederatedSignIn(): JSX.Element;

package/dist/types/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FederatedIdentityProviders, SocialProvider } from '@aws-amplify/ui';
 export interface FederatedSignInButtonProps {
     icon?: SocialProvider;

package/dist/types/components/Authenticator/ForceNewPassword/ForceNewPassword.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const ForceNewPassword: {
     ({ className, variation, }: RouteProps): JSX.Element;

package/dist/types/components/Authenticator/ResetPassword/ConfirmResetPassword.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const ConfirmResetPassword: {
     ({ className, variation, }: RouteProps): JSX.Element;

package/dist/types/components/Authenticator/ResetPassword/ResetPassword.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const ResetPassword: {
     ({ className, variation, }: RouteProps): JSX.Element;

package/dist/types/components/Authenticator/RouteContainer/RouteContainer.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { RouteContainerProps } from './types';
 export declare function RouteContainer({ children, className, variation, }: RouteContainerProps): JSX.Element;

package/dist/types/components/Authenticator/Router/Router.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouterProps } from './types';
 export declare function useRouterChildren(children: RouterProps['children']): (props?: Omit<RouterProps, 'children'>) => JSX.Element;
 export declare function Router({ children, className, hideSignUp, variation, }: RouterProps): JSX.Element;

package/dist/types/components/Authenticator/SetupTOTP/SetupTOTP.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const getTotpCode: (issuer: string, username: string, secret: string) => string;
 export declare const SetupTOTP: {

package/dist/types/components/Authenticator/SignIn/SignIn.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function SignIn(): JSX.Element;
 export declare namespace SignIn {
     var Footer: () => JSX.Element;

package/dist/types/components/Authenticator/SignUp/SignUp.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function SignUp(): JSX.Element;
 export declare namespace SignUp {
     var Header: () => JSX.Element;

package/dist/types/components/Authenticator/VerifyUser/ConfirmVerifyUser.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const ConfirmVerifyUser: {
     ({ className, variation, }: RouteProps): JSX.Element;

package/dist/types/components/Authenticator/VerifyUser/VerifyUser.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RouteProps } from '../RouteContainer';
 export declare const VerifyUser: {
     ({ className, variation, }: RouteProps): JSX.Element;

package/dist/types/components/Authenticator/hooks/useAuthenticator/index.d.ts

@@ -34,6 +34,9 @@ export declare type InternalAuthenticatorContext = {
  * desired value(s) that should trigger re-render.
  */
 export declare type Selector = (context: AuthenticatorContext) => Array<any>;
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/authenticator#useauthenticator-hook)
+ */
 export declare const useAuthenticator: (selector?: Selector) => {
     /** @deprecated For internal use only */
     _state: import("xstate").State<import("@aws-amplify/ui").AuthContext, import("@aws-amplify/ui").AuthEvent, any, any, any>;