@aws-amplify/ui-react 5.3.2 → 6.0.1

package/dist/index.js

@@ -1 +1,3485 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("lodash/isEqual.js"),t=require("aws-amplify"),n=require("@aws-amplify/ui"),l=require("./Field-94e428ed.js");require("@aws-amplify/datastore");var s=require("@aws-amplify/ui-react-core"),r=require("@aws-amplify/storage"),o=require("tslib"),i=require("classnames"),d=require("lodash/debounce.js"),c=require("@radix-ui/react-accordion"),u=require("@radix-ui/react-dropdown-menu"),m=require("@radix-ui/react-slider"),p=require("@radix-ui/react-tabs"),f=require("qrcode"),C=require("@radix-ui/react-direction");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function h(e){if(e&&e.__esModule)return e;var a=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),a.default=e,Object.freeze(a)}require("@aws-amplify/core");var b=h(e),N=g(e),E=g(a),v=g(i),F=g(d),y=h(c),w=h(u),x=h(m),S=h(p),I=g(f),T=h(C);function P({children:e,icons:a}){return b.createElement(l.IconsContext.Provider,{value:a},e)}const D=b.forwardRef(((e,a)=>{var t,{buttonRef:s,children:r,className:i,dismissButtonLabel:d=l.ComponentText.Alert.dismissButtonLabel,hasIcon:c=!0,heading:u,isDismissible:m=!1,onDismiss:p,variation:f}=e,C=o.__rest(e,["buttonRef","children","className","dismissButtonLabel","hasIcon","heading","isDismissible","onDismiss","variation"]);const[g,h]=b.useState(!1),N=l.useIcons("alert"),E=b.useCallback((()=>{h(!g),n.isFunction(p)&&p()}),[h,p,g]);return g?null:b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.Alert,i,n.classNameModifier(l.ComponentClassNames.Alert,f)),"data-variation":f,ref:a,role:"alert"},C),c&&b.createElement(l.AlertIcon,{variation:f,ariaHidden:!0}),b.createElement(l.View,{flex:"1"},u&&b.createElement(l.View,{className:l.ComponentClassNames.AlertHeading},u),b.createElement(l.View,{className:l.ComponentClassNames.AlertBody},r)),m&&b.createElement(l.Button,{ariaLabel:d,variation:"link",className:l.ComponentClassNames.AlertDismiss,onClick:E,ref:s},null!==(t=null==N?void 0:N.close)&&void 0!==t?t:b.createElement(l.IconClose,{"aria-hidden":"true"})))}));D.displayName="Alert";const k=b.forwardRef(((e,a)=>{var{children:t,className:s,isActive:r}=e,i=o.__rest(e,["children","className","isActive"]);return b.createElement(l.View,Object.assign({"aria-selected":r,as:"li",role:"option",className:v.default(l.ComponentClassNames.AutocompleteMenuOption,n.classNameModifierByFlag(l.ComponentClassNames.AutocompleteMenuOption,"active",r),s),ref:a},i),t)}));k.displayName="AutocompleteOption";const M=b.forwardRef(((e,a)=>{var{children:t,className:s,orientation:r}=e,i=o.__rest(e,["children","className","orientation"]);return b.createElement(l.View,Object.assign({className:v.default(l.ComponentClassNames.ScrollView,n.classNameModifier(l.ComponentClassNames.ScrollView,r),s),"data-orientation":r,ref:a},i),t)}));M.displayName="ScrollView";const O=b.forwardRef(((e,a)=>{var{ariaLabel:t,children:n,Header:s=null,Footer:r=null,LoadingIndicator:i=null,Empty:d=null,isLoading:c,listboxId:u}=e,m=o.__rest(e,["ariaLabel","children","Header","Footer","LoadingIndicator","Empty","isLoading","listboxId"]);return b.createElement(M,Object.assign({className:l.ComponentClassNames.AutocompleteMenu,ref:a},m),c?b.createElement((()=>{const e=null!=i?i:b.createElement(b.Fragment,null,b.createElement(l.Loader,null),l.ComponentText.Autocomplete.loadingText);return b.createElement(l.View,{className:l.ComponentClassNames.AutocompleteMenuLoading},e)}),null):b.createElement(b.Fragment,null,b.createElement((()=>s&&b.createElement(l.View,{className:l.ComponentClassNames.AutocompleteMenuHeader},s)),null),n.length>0?b.createElement(M,{as:"ul",ariaLabel:t,className:l.ComponentClassNames.AutocompleteMenuOptions,id:u,role:"listbox"},n):b.createElement((()=>d?b.createElement(l.View,{className:l.ComponentClassNames.AutocompleteMenuEmpty},d):b.createElement(l.View,{className:l.ComponentClassNames.AutocompleteMenuEmpty},l.ComponentText.Autocomplete.emptyText)),null),b.createElement((()=>r&&b.createElement(l.View,{className:l.ComponentClassNames.AutocompleteMenuFooter},r)),null)))}));O.displayName="AutocompleteMenu";const R=(null===globalThis||void 0===globalThis?void 0:globalThis.document)?b.useLayoutEffect:()=>{},B=b["useId".toString()]||(()=>{});let L=0;const V=e=>{const[a,t]=b.useState(B());return R((()=>{e||t((e=>null!=e?e:String(L++)))}),[e]),null!=e?e:a?`amplify-id-${a}`:""},_=new Set([l.ARROW_DOWN,l.ARROW_UP,l.ENTER_KEY,l.ESCAPE_KEY]),j=(e,a)=>e&&a?`${e}-${a}`:void 0,A=b.forwardRef(((e,a)=>{var{children:t,className:n,query:s,testId:r}=e,i=o.__rest(e,["children","className","query","testId"]);const d=j(r,"match"),c=null==t?void 0:t.toLocaleLowerCase().indexOf(null==s?void 0:s.toLocaleLowerCase());if(l.strHasLength(s)&&-1!==c){const e=t.substring(c,c+s.length);return b.createElement(l.View,Object.assign({as:"span",className:v.default(n,l.ComponentClassNames.HighlightMatch),testId:r,ref:a},i),t.substring(0,c),b.createElement(l.View,{as:"strong",className:l.ComponentClassNames.HighlightMatchHighlighted,testId:d},e),t.substring(c+s.length))}return b.createElement(l.View,{as:"span",testId:r},t)}));A.displayName="HighlightMatch";const H=l.ComponentText.SearchField.searchButtonLabel,z=b.forwardRef(((e,a)=>{var t,{size:n}=e,s=o.__rest(e,["size"]);const r=l.useIcons("searchField");return b.createElement(l.FieldGroupIconButton,Object.assign({ariaLabel:H,className:l.ComponentClassNames.SearchFieldSearch,size:n,ref:a,type:"submit"},s),null!==(t=null==r?void 0:r.search)&&void 0!==t?t:b.createElement(l.IconSearch,null))}));z.displayName="SearchFieldButton";const U=b.forwardRef(((e,a)=>{var{children:t,className:s,innerEndComponent:r,innerStartComponent:i,orientation:d="horizontal",outerEndComponent:c,outerStartComponent:u,variation:m}=e,p=o.__rest(e,["children","className","innerEndComponent","innerStartComponent","orientation","outerEndComponent","outerStartComponent","variation"]);const f=null!=r,C=null!=i?l.ComponentClassNames.FieldGroupHasInnerStart:null,g=f?l.ComponentClassNames.FieldGroupHasInnerEnd:null,h=v.default(l.ComponentClassNames.FieldGroup,C,g,n.classNameModifier(l.ComponentClassNames.FieldGroup,d),s);return b.createElement(l.Flex,Object.assign({className:h,"data-orientation":d,ref:a},p),u&&b.createElement(l.View,{className:v.default(l.ComponentClassNames.FieldGroupOuterStart,n.classNameModifier(l.ComponentClassNames.FieldGroupOuterStart,m))},u),b.createElement(l.View,{className:v.default(l.ComponentClassNames.FieldGroupFieldWrapper,n.classNameModifier(l.ComponentClassNames.FieldGroupFieldWrapper,d)),"data-orientation":d},i&&b.createElement(l.View,{className:l.ComponentClassNames.FieldGroupInnerStart},i),t,r&&b.createElement(l.View,{className:l.ComponentClassNames.FieldGroupInnerEnd},r)),c&&b.createElement(l.View,{className:v.default(l.ComponentClassNames.FieldGroupOuterEnd,n.classNameModifier(l.ComponentClassNames.FieldGroupOuterEnd,m))},c))}));U.displayName="FieldGroup";const G=b.forwardRef(((e,a)=>{var{autoComplete:t,checked:s,className:r,defaultChecked:i,defaultValue:d,id:c,isDisabled:u,isReadOnly:m,isRequired:p,size:f,type:C="text",hasError:g=!1,value:h,variation:N}=e,E=o.__rest(e,["autoComplete","checked","className","defaultChecked","defaultValue","id","isDisabled","isReadOnly","isRequired","size","type","hasError","value","variation"]);const F=v.default(l.ComponentClassNames.Input,l.ComponentClassNames.FieldGroupControl,n.classNameModifier(l.ComponentClassNames.Input,N),n.classNameModifierByFlag(l.ComponentClassNames.Input,"error",g),n.classNameModifier(l.ComponentClassNames.Input,f),r),{isFieldsetDisabled:y}=l.useFieldset();return b.createElement(l.View,Object.assign({"aria-invalid":g,as:"input",autoComplete:t,checked:s,className:F,"data-size":f,"data-variation":N,defaultChecked:i,defaultValue:d,isDisabled:y||u,id:c,readOnly:m,ref:a,required:p,type:C,value:h},E))}));G.displayName="Input";const q=e=>{const a={styleProps:{},rest:{}};return Object.keys(e).forEach((t=>{(e=>e in l.ComponentPropsToStylePropsMap)(t)?a.styleProps=Object.assign(Object.assign({},a.styleProps),{[t]:e[t]}):a.rest=Object.assign(Object.assign({},a.rest),{[t]:e[t]})})),a},W=b.forwardRef(((e,a)=>{const{className:t,descriptiveText:s,errorMessage:r,hasError:i=!1,id:d,innerEndComponent:c,innerStartComponent:u,label:m,labelHidden:p=!1,outerEndComponent:f,outerStartComponent:C,size:g,testId:h,variation:N,inputStyles:E}=e,F=o.__rest(e,["className","descriptiveText","errorMessage","hasError","id","innerEndComponent","innerStartComponent","label","labelHidden","outerEndComponent","outerStartComponent","size","testId","variation","inputStyles"]),y=V(d),w=V(),x=s?w:void 0,{styleProps:S,rest:I}=q(F);return b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.Field,n.classNameModifier(l.ComponentClassNames.Field,g),l.ComponentClassNames.TextField,t),"data-size":g,testId:h},S),b.createElement(l.Label,{htmlFor:y,visuallyHidden:p},m),b.createElement(l.FieldDescription,{id:w,labelHidden:p,descriptiveText:s}),b.createElement(U,{outerStartComponent:C,outerEndComponent:f,innerStartComponent:u,innerEndComponent:c,variation:N},b.createElement(G,Object.assign({"aria-describedby":x,hasError:i,id:y,ref:a,size:g,variation:N},E,I))),b.createElement(l.FieldErrorMessage,{hasError:i,errorMessage:r}))}));W.displayName="TextField";const $=new Set([l.ESCAPE_KEY,l.ENTER_KEY]),Z=({defaultValue:e="",value:a,onChange:t,onClear:s,onSubmit:r,externalRef:o})=>{const i=void 0!==a,[d,c]=b.useState(e),u=i?a:d,m=b.useRef(null),p=function({externalRef:e,internalRef:a}){return b.useCallback((t=>{n.isFunction(e)?e(t):e&&(e.current=t),a.current=t}),[e,a])}({externalRef:o,internalRef:m}),f=b.useCallback((()=>{var e;i||c(""),null===(e=null==m?void 0:m.current)||void 0===e||e.focus(),n.isFunction(s)&&s()}),[i,c,s]),C=b.useCallback((e=>{n.isFunction(r)&&r(e)}),[r]),g=b.useCallback((e=>{const{key:a}=e;$.has(a)&&(e.preventDefault(),a===l.ESCAPE_KEY?f():a===l.ENTER_KEY&&C(u))}),[u,f,C]),h=b.useCallback((e=>{i||c(e.target.value),n.isFunction(t)&&t(e)}),[i,t,c]),N=b.useCallback((()=>{C(u)}),[C,u]);return{composedValue:u,onClearHandler:f,onKeyDown:g,onClick:N,handleOnChange:h,composedRefs:p}},K=b.forwardRef(((e,a)=>{var{autoComplete:t="off",className:n,isDisabled:s,clearButtonLabel:r,labelHidden:i=!0,name:d="q",hasSearchButton:c=!0,hasSearchIcon:u=!1,onChange:m,onClear:p,onSubmit:f,searchButtonRef:C,size:g,defaultValue:h,value:N}=e,E=o.__rest(e,["autoComplete","className","isDisabled","clearButtonLabel","labelHidden","name","hasSearchButton","hasSearchIcon","onChange","onClear","onSubmit","searchButtonRef","size","defaultValue","value"]);const{composedValue:F,onClearHandler:y,onKeyDown:w,onClick:x,handleOnChange:S,composedRefs:I}=Z({defaultValue:h,value:N,onChange:m,onClear:p,onSubmit:f,externalRef:a}),T=c?b.createElement(z,{isDisabled:s,onClick:x,ref:C,size:g}):void 0,P=u?b.createElement(l.FieldGroupIcon,null,b.createElement(l.IconSearch,null)):void 0;return b.createElement(W,Object.assign({autoComplete:t,className:v.default(l.ComponentClassNames.SearchField,n),labelHidden:i,innerStartComponent:P,innerEndComponent:b.createElement(l.FieldClearButton,{ariaLabel:r,excludeFromTabOrder:!0,isVisible:!s&&l.strHasLength(F),onClick:y,size:g,variation:"link"}),isDisabled:s,name:d,onChange:S,onKeyDown:w,outerEndComponent:T,ref:I,size:g,value:F},E))}));K.displayName="SearchField";const Y=b.forwardRef(((e,a)=>{var{className:t,defaultValue:s,value:r,isLoading:i=!1,menuSlots:d={},options:c,optionFilter:u,onBlur:m,onChange:p,onClear:f,onClick:C,onSelect:g,onSubmit:h,renderOption:N,testId:E}=e,F=o.__rest(e,["className","defaultValue","value","isLoading","menuSlots","options","optionFilter","onBlur","onChange","onClear","onClick","onSelect","onSubmit","renderOption","testId"]);const{activeOptionId:y,autocompleteId:w,composedValue:x,filteredOptions:S,handleOnBlur:I,handleOnClear:T,handleOnClick:P,handleOnChange:D,handleOnKeyDown:M,isControlled:R,isCustomFiltering:B,isMenuOpen:L,listboxId:j,menuId:H,optionBaseId:z,setActiveOption:U,setIsMenuOpen:G,setInternalValue:q}=(({defaultValue:e="",value:a,options:t,optionFilter:s,onBlur:r,onChange:o,onClear:i,onClick:d,onSelect:c,onSubmit:u})=>{var m;const p=void 0!==a,[f,C]=b.useState(e),g=p?a:f,[h,N]=b.useState(!1),[E,v]=b.useState(null),F=n.isFunction(s),y=b.useMemo((()=>{var e;const a=F?e=>s(e,g):e=>{const{label:a}=e;return null==a?void 0:a.toLocaleLowerCase().includes(null==g?void 0:g.toLocaleLowerCase())};return null!==(e=null==t?void 0:t.filter(a))&&void 0!==e?e:[]}),[g,s,F,t]),w=V(),x=V(),S=V(),I=V(),T=y.findIndex((e=>e===E)),P=null!==(m=null==E?void 0:E.id)&&void 0!==m?m:-1!==T?`${I}-option-${T}`:void 0,D=b.useCallback((e=>{N(!1),v(null),n.isFunction(r)&&r(e)}),[r]),k=b.useCallback((e=>{v(null),N(!0),p||C(e.target.value),n.isFunction(o)&&o(e)}),[p,o]),M=b.useCallback((()=>{p||C(""),n.isFunction(i)&&i()}),[p,i]),O=b.useCallback((e=>{N(!0),n.isFunction(d)&&d(e)}),[d]);return b.useEffect((()=>{const e=document.getElementById(w),a=document.getElementById(S);if(a&&h&&e){const{bottom:t}=a.getBoundingClientRect(),{offsetParent:n,offsetTop:l}=e;n===document.body&&t>document.documentElement.clientHeight&&window.scrollTo({top:Math.min(t-document.documentElement.clientHeight+window.scrollY+20,l),behavior:"smooth"})}}),[w,h,S]),b.useEffect((()=>{const e=document.getElementById(x),a=l.strHasLength(P)?document.getElementById(P):null;if(a&&e){const{scrollTop:t,clientHeight:n}=e,{offsetHeight:l,offsetTop:s}=a,{top:r,bottom:o}=a.getBoundingClientRect();t>s&&(e.scrollTop=s),t+n<s+l&&(e.scrollTop=s+l-n),(r<0||o>document.documentElement.clientHeight)&&a.scrollIntoView({behavior:"smooth",block:"nearest"})}}),[P,x]),{activeOptionId:P,autocompleteId:w,composedValue:g,filteredOptions:y,handleOnBlur:D,handleOnClear:M,handleOnClick:O,handleOnChange:k,handleOnKeyDown:e=>{const{key:a}=e;if(_.has(a))switch(e.preventDefault(),a){case l.ESCAPE_KEY:h?(N(!1),v(null)):M();break;case l.ENTER_KEY:if(E){const{label:e}=E;p||C(e),n.isFunction(c)&&c(E)}else n.isFunction(u)&&u(g);N(!1),v(null);break;case l.ARROW_DOWN:{if(y.length<=0)return;N(!0);const e=T>=y.length-1?0:T+1;v(y[e]);break}case l.ARROW_UP:{if(y.length<=0)return;N(!0);const e=T<=0?y.length-1:T-1;v(y[e])}}},isControlled:p,isCustomFiltering:F,isMenuOpen:h,listboxId:x,menuId:S,optionBaseId:I,setActiveOption:v,setIsMenuOpen:N,setInternalValue:C}})({defaultValue:s,value:r,options:c,optionFilter:u,onBlur:m,onChange:p,onClear:f,onClick:C,onSelect:g,onSubmit:h}),W={role:"combobox","aria-activedescendant":y,"aria-autocomplete":"list","aria-controls":L?H:void 0,"aria-expanded":L,"aria-haspopup":"listbox","aria-owns":L?H:void 0},$=S.map(((e,a)=>{const{id:t,label:l}=e,s=o.__rest(e,["id","label"]),r=null!=t?t:`${z}-option-${a}`,i=r===y;return b.createElement(k,Object.assign({isActive:i,id:r,key:r,onClick:()=>{G(!1),U(null),R||q(l),n.isFunction(g)&&g(e)},onMouseDown:e=>{e.preventDefault()},onMouseMove:()=>{U(e)}},s),n.isFunction(N)?N(e,x):B?l:b.createElement(A,{query:x},l))}));return b.createElement(l.View,{className:v.default(l.ComponentClassNames.Autocomplete,t),id:w,testId:E},b.createElement(K,Object.assign({hasSearchButton:!1,hasSearchIcon:!0,onBlur:I,onChange:D,onClear:T,onClick:P,onKeyDown:M,ref:a,value:x},W,F)),L?b.createElement(O,Object.assign({id:H,isLoading:i,listboxId:j},d),$):null)}));Y.displayName="Autocomplete";const X=b.forwardRef(((e,a)=>{var{className:t,children:s,variation:r,size:i}=e,d=o.__rest(e,["className","children","variation","size"]);const c=v.default(l.ComponentClassNames.Badge,t,n.classNameModifier(l.ComponentClassNames.Badge,r),n.classNameModifier(l.ComponentClassNames.Badge,i));return b.createElement(l.View,Object.assign({as:"span",className:c,"data-variation":r,"data-size":i,ref:a},d),s)}));X.displayName="Badge";const Q=b.forwardRef(((e,a)=>{var{className:t,children:n,as:s="li"}=e,r=o.__rest(e,["className","children","as"]);const i=v.default(l.ComponentClassNames.BreadcrumbsItem,t);return b.createElement(l.View,Object.assign({},r,{as:s,className:i,ref:a}),n)}));Q.displayName="Breadcrumbs.Item";const J=b.forwardRef(((e,a)=>{var{as:t="a",children:n,className:s,isExternal:r}=e,i=o.__rest(e,["as","children","className","isExternal"]);return b.createElement(l.View,Object.assign({as:t,className:v.default(l.ComponentClassNames.Link,s),ref:a,rel:r?"noopener noreferrer":void 0,target:r?"_blank":void 0},i),n)}));J.displayName="Link";const ee=b.forwardRef(((e,a)=>{var t,s,{className:r,children:i,href:d,isCurrent:c}=e,u=o.__rest(e,["className","children","href","isCurrent"]);const m=v.default(l.ComponentClassNames.BreadcrumbsLink,n.classNameModifierByFlag(l.ComponentClassNames.BreadcrumbsLink,"current",c),r);if(c){const e=null!==(t=u["aria-current"])&&void 0!==t?t:"page",n=null!==(s=u.as)&&void 0!==s?s:"span";return b.createElement(l.Text,Object.assign({},u,{as:n,"aria-current":e,className:m,ref:a}),i)}return b.createElement(J,Object.assign({},u,{className:m,ref:a,href:d}),i)}));ee.displayName="Breadcrumbs.Link";const ae=b.forwardRef(((e,a)=>{var t,{className:n,children:s="/",as:r="span"}=e,i=o.__rest(e,["className","children","as"]);const d=null!==(t=i["aria-hidden"])&&void 0!==t?t:"true";return b.createElement(l.View,Object.assign({},i,{as:r,ref:a,"aria-hidden":d,className:v.default(l.ComponentClassNames.BreadcrumbsSeparator,n)}),s)}));ae.displayName="Breadcrumbs.Separator";const te=b.forwardRef(((e,a)=>{var t,{className:n,children:s}=e,r=o.__rest(e,["className","children"]);const i=v.default(l.ComponentClassNames.Breadcrumbs,n),d=null!==(t=r["aria-label"])&&void 0!==t?t:"Breadcrumb";return b.createElement(l.View,Object.assign({},r,{as:"nav","aria-label":d,className:i,ref:a}),b.createElement(l.View,{as:"ol",className:l.ComponentClassNames.BreadcrumbsList},s))}));te.displayName="Breadcrumbs.Container";const ne=Object.assign(b.forwardRef(((e,a)=>{var t,{className:n,items:l,separator:s=b.createElement(ae,null)}=e,r=o.__rest(e,["className","items","separator"]);const i=null!==(t=r["aria-label"])&&void 0!==t?t:"Breadcrumb";return b.createElement(te,Object.assign({},r,{"aria-label":i,className:n,ref:a}),null==l?void 0:l.map((({href:e,label:a},t)=>{const n=l.length-1===t;return b.createElement(Q,{key:`${e}${t}`},b.createElement(ee,{href:e,isCurrent:n},a),n?null:s)})))})),{Item:Q,Link:ee,Separator:ae,Container:te});ne.displayName="Breadcrumbs";const le=b.forwardRef(((e,a)=>{var{className:t,children:n,role:s="group",size:r,variation:i}=e,d=o.__rest(e,["className","children","role","size","variation"]);return b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.ButtonGroup,t),role:s,ref:a},d),b.Children.map(n,(e=>{if(b.isValidElement(e)){const{size:a=r,variation:t=i}=e.props;return b.cloneElement(e,{size:a,variation:t})}return e})))}));le.displayName="ButtonGroup";const se=b.forwardRef(((e,a)=>{var{className:t,children:s,variation:r}=e,i=o.__rest(e,["className","children","variation"]);return b.createElement(l.View,Object.assign({className:v.default(l.ComponentClassNames.Card,n.classNameModifier(l.ComponentClassNames.Card,r),t),"data-variation":r,ref:a},i),s)}));se.displayName="Card";const re=b.forwardRef(((e,a)=>{var{as:t="span",children:n,className:s}=e,r=o.__rest(e,["as","children","className"]);return b.createElement(l.View,Object.assign({as:t,className:v.default(l.ComponentClassNames.VisuallyHidden,s),ref:a},r),n)}));re.displayName="VisuallyHidden";const oe=b.forwardRef(((e,a)=>{var{checked:t,className:s,defaultChecked:r,hasError:i,isDisabled:d,isIndeterminate:c,label:u,labelHidden:m,labelPosition:p,onBlur:f,onFocus:C,onChange:g,testId:h,inputStyles:N}=e,E=o.__rest(e,["checked","className","defaultChecked","hasError","isDisabled","isIndeterminate","label","labelHidden","labelPosition","onBlur","onFocus","onChange","testId","inputStyles"]);const{styleProps:F,rest:y}=q(E),[w,x]=b.useState(!1),S=l.useIcons("checkbox"),{isFieldsetDisabled:I}=l.useFieldset(),T=I||d,P=void 0!==t,[D,k]=b.useState((()=>P?t:r)),M=P?t:D,O=V();b.useEffect((()=>{const e=document.querySelector(`[data-id="${O}"]`);e&&"boolean"==typeof c&&(e.indeterminate=c)}),[O,c]);const R=j(h,l.ComponentClassNames.CheckboxButton),B=j(h,l.ComponentClassNames.CheckboxIcon),L=j(h,l.ComponentClassNames.CheckboxLabel),_=v.default(l.ComponentClassNames.CheckboxButton,n.classNameModifierByFlag(l.ComponentClassNames.CheckboxButton,"disabled",T),n.classNameModifierByFlag(l.ComponentClassNames.CheckboxButton,"error",i),n.classNameModifierByFlag(l.ComponentClassNames.CheckboxButton,"focused",w)),A=v.default(l.ComponentClassNames.CheckboxIcon,n.classNameModifierByFlag(l.ComponentClassNames.CheckboxIcon,"checked",M),n.classNameModifierByFlag(l.ComponentClassNames.CheckboxIcon,"disabled",T),n.classNameModifierByFlag(l.ComponentClassNames.CheckboxIcon,"indeterminate",c)),H={className:v.default(A),"data-checked":D,"data-disabled":T,"data-testid":B},z=(null==S?void 0:S.checked)?b.createElement(l.View,{as:"span",className:v.default(A)},S.checked):b.createElement(l.IconCheck,Object.assign({},H)),U=(null==S?void 0:S.indeterminate)?b.createElement(l.View,{as:"span",className:v.default(A)},S.indeterminate):b.createElement(l.IconIndeterminate,Object.assign({},H));return b.createElement(l.Flex,Object.assign({as:"label",className:v.default(l.ComponentClassNames.Checkbox,n.classNameModifierByFlag(l.ComponentClassNames.Checkbox,"disabled",T),s),"data-disabled":T,"data-label-position":p,testId:h},F),b.createElement(re,null,b.createElement(G,Object.assign({checked:t,className:l.ComponentClassNames.CheckboxInput,"data-id":O,defaultChecked:r,isDisabled:T,onBlur:e=>{n.isFunction(f)&&f(e),x(!1)},onChange:e=>{n.isFunction(g)&&g(e),P||k(e.target.checked)},onFocus:e=>{n.isFunction(C)&&C(e),x(!0)},ref:a,type:"checkbox"},y))),u&&b.createElement(l.Text,{as:"span",className:v.default(l.ComponentClassNames.CheckboxLabel,{[l.ComponentClassNames.VisuallyHidden]:m}),"data-disabled":T,testId:L},u),b.createElement(l.Flex,Object.assign({"aria-hidden":"true",as:"span",className:_,"data-checked":M,"data-disabled":T,"data-focus":w,"data-error":i,testId:R},N),c?U:z))}));oe.displayName="Checkbox";const ie=b.forwardRef(((e,a)=>{var{className:t,errorMessage:s,hasError:r=!1,labelHidden:i=!1,labelPosition:d,testId:c,size:u}=e,m=o.__rest(e,["className","errorMessage","hasError","labelHidden","labelPosition","testId","size"]);const p=j(c,l.ComponentClassNames.Checkbox);return b.createElement(l.Flex,{className:v.default(l.ComponentClassNames.Field,l.ComponentClassNames.CheckboxField,n.classNameModifier(l.ComponentClassNames.Field,u),t),"data-size":u,testId:c},b.createElement(oe,Object.assign({hasError:r,labelHidden:i,testId:p,labelPosition:d,ref:a},m)),b.createElement(l.FieldErrorMessage,{hasError:r,errorMessage:s}))}));ie.displayName="CheckboxField";const de=b.forwardRef(((e,a)=>{var{className:t,children:n}=e,s=o.__rest(e,["className","children"]);return b.createElement(l.View,Object.assign({className:v.default(l.ComponentClassNames.Grid,t),ref:a},s),n)}));de.displayName="Grid";const ce="...",ue=e=>{var a,t,{type:s,page:r,currentPage:i,currentPageLabel:d=l.ComponentText.PaginationItem.currentPageLabel,isDisabled:c,onClick:u,ariaLabel:m}=e,p=o.__rest(e,["type","page","currentPage","currentPageLabel","isDisabled","onClick","ariaLabel"]);const f=l.useIcons("pagination"),C=v.default(l.ComponentClassNames.PaginationItemButton,n.classNameModifier(l.ComponentClassNames.PaginationItemButton,"link"),n.classNameModifierByFlag(l.ComponentClassNames.PaginationItemButton,"disabled",c)),g=v.default(l.ComponentClassNames.PaginationItemButton,n.classNameModifier(l.ComponentClassNames.PaginationItemButton,"link"),n.classNameModifierByFlag(l.ComponentClassNames.PaginationItemButton,"disabled",c));switch(s){case"page":return b.createElement(l.View,{as:"li"},r===i?b.createElement(l.Flex,Object.assign({"aria-current":"page",as:"button",className:l.ComponentClassNames.PaginationItemCurrent,testId:"current"},p),b.createElement(re,null,d,":"),r):b.createElement(l.Button,Object.assign({className:v.default(l.ComponentClassNames.PaginationItemButton,n.classNameModifier(l.ComponentClassNames.PaginationItemButton,"link")),size:"small",variation:"link",onClick:()=>{null==u||u()},ariaLabel:m},p),r));case"next":return b.createElement(l.View,{as:"li"},b.createElement(l.Button,Object.assign({className:C,size:"small",variation:"link",isDisabled:c,onClick:()=>{null==u||u()},ariaLabel:m},p),null!==(a=null==f?void 0:f.next)&&void 0!==a?a:b.createElement(l.IconChevronRight,null)));case"previous":return b.createElement(l.View,{as:"li"},b.createElement(l.Button,Object.assign({className:g,size:"small",variation:"link",isDisabled:c,onClick:()=>{null==u||u()},ariaLabel:m},p),null!==(t=null==f?void 0:f.previous)&&void 0!==t?t:b.createElement(l.IconChevronLeft,null)));case"ellipsis":return b.createElement(l.View,{as:"li"},b.createElement(l.Flex,Object.assign({as:"span",className:l.ComponentClassNames.PaginationItemEllipsis,testId:"ellipsis"},p),"…"))}return b.createElement(l.View,{as:"li"})};ue.displayName="PaginationItem";const me=({currentPage:e,totalPages:a,hasMorePages:t,siblingCount:n,currentPageLabel:s=l.ComponentText.PaginationItem.currentPageLabel,pageLabel:r=l.ComponentText.PaginationItem.pageLabel,previousLabel:o=l.ComponentText.PaginationItem.previousLabel,nextLabel:i=l.ComponentText.PaginationItem.nextLabel,onNext:d,onPrevious:c,onChange:u})=>{const m=b.createElement(ue,{type:"previous",key:"previous",currentPage:e,onClick:c,isDisabled:e<=1,ariaLabel:o}),p=b.createElement(ue,{type:"next",key:"next",currentPage:e,onClick:d,isDisabled:e>=a&&!t,ariaLabel:i}),f=((e,a,t=1)=>b.useMemo((()=>{const n=Math.max(e,1),s=Math.max(t,1),r=Math.max(n,a),o=r;if(r<5+2*s)return l.getConsecutiveIntArray(1,r);const i=Math.max(n-s,1),d=Math.min(n+s,o),c=i>2,u=d<o-1;if(c&&!u){const e=3+2*s,a=l.getConsecutiveIntArray(o-e+1,o);return[1,ce,...a]}if(!c&&u){const e=3+2*s;return[...l.getConsecutiveIntArray(1,e),ce,o]}const m=l.getConsecutiveIntArray(i,d);return[1,ce,...m,ce,o]}),[e,a,t]))(e,a,n);return[m,...b.useMemo((()=>f.map(((a,t)=>a===ce?b.createElement(ue,{type:"ellipsis",key:1===t?"start-ellipsis":"end-ellipsis"}):b.createElement(ue,{key:a,type:"page",page:a,currentPage:e,currentPageLabel:s,onClick:()=>null==u?void 0:u(a,e),ariaLabel:`${r} ${a}`})))),[f,e,s,r,u]),p]},pe=b.forwardRef(((e,a)=>{var{className:t,currentPage:n=1,totalPages:s,hasMorePages:r=!1,siblingCount:i,currentPageLabel:d,pageLabel:c,previousLabel:u,nextLabel:m,onNext:p,onPrevious:f,onChange:C}=e,g=o.__rest(e,["className","currentPage","totalPages","hasMorePages","siblingCount","currentPageLabel","pageLabel","previousLabel","nextLabel","onNext","onPrevious","onChange"]);const h=me({currentPage:n,totalPages:s,hasMorePages:r,siblingCount:i,currentPageLabel:d,pageLabel:c,previousLabel:u,nextLabel:m,onNext:p,onPrevious:f,onChange:C});return b.createElement(l.View,Object.assign({as:"nav",className:v.default(l.ComponentClassNames.Pagination,t),ref:a},g),b.createElement(l.Flex,{as:"ol",justifyContent:"center",alignItems:"center",gap:"inherit"},h))}));pe.displayName="Pagination";const fe=e=>{const{currentPage:a=1,totalPages:t,hasMorePages:n=!1,siblingCount:l=1}=e,s=Math.max(a,1),r=Math.max(s,t),[o,i]=b.useState(s);b.useEffect((()=>{i(s)}),[s,r]);const d=b.useCallback((()=>{o<r&&i(o+1)}),[o,r]),c=b.useCallback((()=>{o>1&&i(o-1)}),[o]),u=b.useCallback((e=>{"number"==typeof e&&i(e)}),[]);return{currentPage:o,hasMorePages:n,onChange:u,onNext:d,onPrevious:c,siblingCount:Math.max(l,1),totalPages:r}},Ce=(e,a)=>l.strHasLength(e)?e.toLowerCase().includes(a.toLowerCase()):"object"==typeof e&&null!==e&&Object.values(e).some((e=>Ce(e,a))),ge=(e,a)=>Math.ceil(e/a),he=10,be=e=>{var{children:a,direction:t="column",items:n}=e,s=o.__rest(e,["children","direction","items"]);return b.createElement(l.Flex,Object.assign({direction:t},s),Array.isArray(n)?n.map(a):null)},Ne=e=>{var{children:a,items:t}=e,n=o.__rest(e,["children","items"]);return b.createElement(de,Object.assign({},n),Array.isArray(t)?t.map(a):null)},Ee=e=>{var{className:a,isSearchable:t,isPaginated:n,items:s,itemsPerPage:r=he,searchFilter:i=Ce,searchLabel:d=l.ComponentText.Collection.searchButtonLabel,searchNoResultsFound:c,searchPlaceholder:u,type:m="list",testId:p}=e,f=o.__rest(e,["className","isSearchable","isPaginated","items","itemsPerPage","searchFilter","searchLabel","searchNoResultsFound","searchPlaceholder","type","testId"]);const[C,g]=b.useState(),h=b.useCallback(F.default(g,300),[g]);s=Array.isArray(s)?s:[],t&&l.strHasLength(C)&&(s=s.filter((e=>i(e,C))));const N=fe({totalPages:ge(s.length,r)});n&&(s=((e,a,t)=>{if(a<1||t<1)return[];const n=(a-1)*t;return e.slice(n,n+t)})(s,N.currentPage,r));const E="list"===m?b.createElement(be,Object.assign({className:l.ComponentClassNames.CollectionItems,items:s},f)):"grid"===m?b.createElement(Ne,Object.assign({className:l.ComponentClassNames.CollectionItems,items:s},f)):null;return b.createElement(l.Flex,{testId:p,className:v.default(l.ComponentClassNames.Collection,a)},t?b.createElement(l.Flex,{className:l.ComponentClassNames.CollectionSearch},b.createElement(K,{label:d,placeholder:u,onChange:e=>h(e.target.value),onClear:()=>g("")})):null,((e,a,t)=>a.length?e:t||b.createElement(l.Flex,{justifyContent:"center"},b.createElement(l.Text,null,l.ComponentText.Collection.searchNoResultsFound)))(E,s,c),n?b.createElement(l.Flex,{className:l.ComponentClassNames.CollectionPagination},b.createElement(pe,Object.assign({},N))):null)};Ee.displayName="Collection";const ve=b.forwardRef(((e,a)=>{var{className:t,orientation:s="horizontal",size:r,label:i}=e,d=o.__rest(e,["className","orientation","size","label"]);const c=v.default(l.ComponentClassNames.Divider,n.classNameModifier(l.ComponentClassNames.Divider,s),n.classNameModifier(l.ComponentClassNames.Divider,r),i?l.ComponentClassNames.DividerLabel:null,t);return b.createElement(l.View,Object.assign({"aria-orientation":s,as:"hr",className:c,"data-size":r,"data-label":i,ref:a},d))}));ve.displayName="Divider";const Fe=b.createContext("inactive"),ye=({value:e,children:a})=>b.createElement(Fe.Provider,{value:e},a),we=N.default.forwardRef(((e,a)=>{var{className:t,children:s,testId:r,isDisabled:i,onDragEnter:d,onDragLeave:c,onDragOver:u,onDragStart:m,onDrop:p}=e,f=o.__rest(e,["className","children","testId","isDisabled","onDragEnter","onDragLeave","onDragOver","onDragStart","onDrop"]);const C=N.default.useContext(Fe),g=i?{}:{onDragEnter:d,onDragLeave:c,onDragOver:u,onDragStart:m,onDrop:p};return N.default.createElement(l.View,Object.assign({},f,g,{isDisabled:i,className:v.default(t,n.classNameModifierByFlag(l.ComponentClassNames.DropZone,"rejected","reject"===C),n.classNameModifierByFlag(l.ComponentClassNames.DropZone,"accepted","accept"===C),n.classNameModifierByFlag(n.ComponentClassName.DropZone,"disabled",i),l.ComponentClassNames.DropZone),"data-testid":r,ref:a}),s)}));we.displayName="DropZoneContainer";const xe=Object.assign(b.forwardRef(((e,a)=>{var{children:t,testId:n,isDisabled:s,acceptedFileTypes:r,onDropComplete:i}=e,d=o.__rest(e,["children","testId","isDisabled","acceptedFileTypes","onDropComplete"]);const{dragState:c,onDragEnter:u,onDragLeave:m,onDragOver:p,onDragStart:f,onDrop:C}=l.useDropZone(Object.assign({acceptedFileTypes:r,onDropComplete:i},d));return b.createElement(ye,{value:c},b.createElement(we,Object.assign({},d,{testId:n,isDisabled:s,onDragStart:f,onDragEnter:u,onDragLeave:m,onDrop:C,onDragOver:p,ref:a}),t))})),{Accepted:({children:e})=>{const a=b.useContext(Fe);if(!a)throw new Error("`DropZone.Accept` must be used inside a DropZone");return"accept"===a?b.createElement(b.Fragment,null,e):null},Rejected:({children:e})=>{const a=b.useContext(Fe);if(!a)throw new Error("`DropZone.Rejected` must be used inside a DropZone");return"reject"===a?b.createElement(b.Fragment,null,e):null},Default:({children:e})=>{const a=b.useContext(Fe);if(!a)throw new Error("`DropZone.Default` must be used inside a DropZone");return"inactive"===a?b.createElement(b.Fragment,null,e):null}});xe.displayName="DropZone";const Se=({message:e,shouldWarn:a})=>{const t=a&&("undefined"==typeof process||process&&"production"!==process.env.NODE_ENV);s.useDeprecationWarning({message:e,shouldWarn:t})},{Root:Ie}=n.sanitizeNamespaceImport(y),Te=b.forwardRef(((e,a)=>{var{children:t,className:n,defaultValue:s,isCollapsible:r,onChange:i,onValueChange:d,testId:c,type:u="single",value:m}=e,p=o.__rest(e,["children","className","defaultValue","isCollapsible","onChange","onValueChange","testId","type","value"]);const{rest:f}=q(p),C=null!=d?d:i;Se({shouldWarn:!!i,message:"Expander `onChange` prop will be deprecated in the next major release of @aws-amplify/ui-react. Please replace usage with `onValueChange`."});return"multiple"===u?b.createElement(Ie,Object.assign({className:v.default(l.ComponentClassNames.Expander,n),"data-testid":c,defaultValue:s,onValueChange:C,ref:a,type:u,value:m},f),t):b.createElement(Ie,Object.assign({className:v.default(l.ComponentClassNames.Expander,n),collapsible:r,"data-testid":c,defaultValue:s,onValueChange:C,ref:a,type:u,value:m},f),t)}));Te.displayName="Expander";const{Item:Pe,Header:De,Trigger:ke,Content:Me}=n.sanitizeNamespaceImport(y),Oe=b.forwardRef(((e,a)=>{var t,{children:n,className:s,title:r,value:i}=e,d=o.__rest(e,["children","className","title","value"]);const c=V(),u=V(),{rest:m}=q(d),p=l.useIcons("expander");return b.createElement(Pe,Object.assign({className:v.default(l.ComponentClassNames.ExpanderItem,s),"data-testid":"expander-item",ref:a,value:i},m),b.createElement(De,{className:l.ComponentClassNames.ExpanderHeader,"data-testid":"expander-header"},b.createElement(ke,{"aria-controls":u,className:l.ComponentClassNames.ExpanderTrigger,id:c},r,b.createElement("span",{className:l.ComponentClassNames.ExpanderIcon,"data-testid":"expander-icon","aria-hidden":"true"},null!==(t=null==p?void 0:p.more)&&void 0!==t?t:b.createElement(l.IconExpandMore,null)))),b.createElement(Me,{"aria-labelledby":c,className:l.ComponentClassNames.ExpanderContent,id:u},b.createElement(l.View,{className:l.ComponentClassNames.ExpanderContentText,testId:"expander-content-text"},n)))}));Oe.displayName="ExpanderItem";const Re=b.forwardRef(((e,a)=>{var{children:t,className:s,isDisabled:r,legend:i,legendHidden:d,size:c,testId:u,variation:m="outlined"}=e,p=o.__rest(e,["children","className","isDisabled","legend","legendHidden","size","testId","variation"]);const{isFieldsetDisabled:f}=l.useFieldset(),C=f||r,g=b.useMemo((()=>({isFieldsetDisabled:C})),[C]),h=v.default(l.ComponentClassNames.Fieldset,n.classNameModifier(l.ComponentClassNames.Fieldset,m),n.classNameModifier(l.ComponentClassNames.Fieldset,c),s),N=v.default(l.ComponentClassNames.FieldsetLegend,n.classNameModifier(l.ComponentClassNames.FieldsetLegend,c),s,{[l.ComponentClassNames.VisuallyHidden]:d});return b.createElement(l.FieldsetContext.Provider,{value:g},b.createElement(l.Flex,Object.assign({as:"fieldset",className:h,ref:a,disabled:C,testId:u},p),b.createElement(re,{as:"legend"},i),b.createElement(l.View,{as:"div","aria-hidden":"true",className:N},i),t))}));Re.displayName="Fieldset";const Be={1:"h1",2:"h2",3:"h3",4:"h4",5:"h5",6:"h6"},Le=b.forwardRef(((e,a)=>{var{className:t,children:s,isTruncated:r,level:i=6}=e,d=o.__rest(e,["className","children","isTruncated","level"]);return b.createElement(l.View,Object.assign({as:Be[i],className:v.default(l.ComponentClassNames.Heading,n.classNameModifier(l.ComponentClassNames.Heading,i),n.classNameModifierByFlag(l.ComponentClassNames.Heading,"truncated",r),t),ref:a},d),s)}));Le.displayName="Heading";const Ve=b.forwardRef(((e,a)=>{var{className:t}=e,n=o.__rest(e,["className"]);return b.createElement(l.View,Object.assign({as:"img",ref:a,className:v.default(l.ComponentClassNames.Image,t)},n))}));Ve.displayName="Image";const _e=b.forwardRef(((e,a)=>{var{ariaLabel:t,className:s,children:r,isFullWidth:i=!1,isDisabled:d,isLoading:c,size:u,style:m,type:p="button",variation:f,testId:C}=e,g=o.__rest(e,["ariaLabel","className","children","isFullWidth","isDisabled","isLoading","size","style","type","variation","testId"]);const{propStyles:h,nonStyleProps:N}=l.useStyles(g,m),E=v.default(l.ComponentClassNames.Button,n.classNameModifier(l.ComponentClassNames.Button,u),n.classNameModifier(l.ComponentClassNames.Button,f),s);return b.createElement(l.Button,Object.assign({ref:a,className:E,"data-fullwidth":i,"data-loading":c,"data-size":u,"data-variation":f,disabled:null!=d?d:c,type:p,"data-testid":C,"aria-label":t,style:h},N),r)}));_e.displayName="MenuButton";const{DropdownMenu:je,DropdownMenuTrigger:Ae,DropdownMenuContent:He}=n.sanitizeNamespaceImport(w),ze=b.forwardRef(((e,a)=>{var t,{menuAlign:n="start",children:s,className:r,isOpen:i,size:d,trigger:c,triggerClassName:u,ariaLabel:m,onOpenChange:p}=e,f=o.__rest(e,["menuAlign","children","className","isOpen","size","trigger","triggerClassName","ariaLabel","onOpenChange"]);const C=l.useIcons("menu");return b.createElement(je,{onOpenChange:p,open:i},b.createElement(Ae,{asChild:!0},null!=c?c:b.createElement(_e,{ariaLabel:m,size:d,testId:"amplify-menu-trigger-test-id",className:v.default(l.ComponentClassNames.MenuTrigger,u)},null!==(t=null==C?void 0:C.menu)&&void 0!==t?t:b.createElement(l.IconMenu,null))),b.createElement(He,{align:n,className:l.ComponentClassNames.MenuContentWrapper},b.createElement(le,Object.assign({className:v.default(l.ComponentClassNames.MenuContent,r),ref:a,size:d,testId:"amplify-menu-items-group-test-id"},f),s)))}));ze.displayName="Menu";const{DropdownMenuItem:Ue}=n.sanitizeNamespaceImport(w),Ge=b.forwardRef(((e,a)=>{var{children:t,className:n}=e,s=o.__rest(e,["children","className"]);return b.createElement(Ue,{asChild:!0,ref:a},b.createElement(_e,Object.assign({className:v.default(l.ComponentClassNames.MenuItem,n),testId:"amplify-menu-item-test-id"},s,{variation:"menu"}),t))}));Ge.displayName="MenuItem";const qe=b.forwardRef(((e,a)=>{var{children:t,className:n}=e,s=o.__rest(e,["children","className"]);return b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.MessageHeading,n),ref:a},s),t)}));qe.displayName="MessageHeading";const We=b.createContext({dismissed:!1,setDismissed:()=>{}}),$e=()=>b.useContext(We),Ze=b.forwardRef(((e,a)=>{var t,n,s,r,{className:i}=e,d=o.__rest(e,["className"]);const c=l.useIcons("message"),{colorTheme:u}=$e();let m;switch(u){case"info":m=null!==(t=null==c?void 0:c.info)&&void 0!==t?t:b.createElement(l.IconInfo,null);break;case"error":m=null!==(n=null==c?void 0:c.error)&&void 0!==n?n:b.createElement(l.IconError,null);break;case"warning":m=null!==(s=null==c?void 0:c.warning)&&void 0!==s?s:b.createElement(l.IconWarning,null);break;case"success":m=null!==(r=null==c?void 0:c.success)&&void 0!==r?r:b.createElement(l.IconCheckCircle,null)}return m?b.createElement(l.View,Object.assign({className:v.default(l.ComponentClassNames.MessageIcon,i),"aria-hidden":"true",ref:a},d),m):null}));Ze.displayName="MessageIcon";const Ke=b.forwardRef(((e,a)=>{var t,{onDismiss:s,dismissLabel:r,hasIcon:i=!0,children:d,className:c}=e,u=o.__rest(e,["onDismiss","dismissLabel","hasIcon","children","className"]);const{setDismissed:m}=$e(),p=l.useIcons("message"),f=b.useCallback((()=>{m(!0),n.isFunction(s)&&s()}),[m,s]);return b.createElement(l.Button,Object.assign({variation:"link",colorTheme:"overlay",className:v.default(l.ComponentClassNames.MessageDismiss,c),ref:a,onClick:f},u),i?null!==(t=null==p?void 0:p.close)&&void 0!==t?t:b.createElement(l.IconClose,{"aria-hidden":"true"}):null,d||b.createElement(re,null,r||l.ComponentText.Message.dismissLabel))}));Ke.displayName="MessageContent";const Ye=b.forwardRef(((e,a)=>{var{children:t,className:n}=e,s=o.__rest(e,["children","className"]);return b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.MessageContent,n),ref:a},s),t)}));Ye.displayName="MessageContent";const Xe=b.forwardRef(((e,a)=>{var{children:t,className:s,colorTheme:r="neutral",variation:i="filled"}=e,d=o.__rest(e,["children","className","colorTheme","variation"]);const[c,u]=b.useState(!1),m=b.useMemo((()=>({colorTheme:r,dismissed:c,setDismissed:u})),[r,c]);return b.createElement(We.Provider,{value:m},c?null:b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.Message,n.classNameModifier(l.ComponentClassNames.Message,i),n.classNameModifier(l.ComponentClassNames.Message,r),s),ref:a},d),t))}));Xe.displayName="MessageContainer";const Qe=b.forwardRef(((e,a)=>{var{children:t,heading:n,dismissLabel:l,isDismissible:s,onDismiss:r,hasIcon:i=!0,colorTheme:d="neutral",variation:c="filled"}=e,u=o.__rest(e,["children","heading","dismissLabel","isDismissible","onDismiss","hasIcon","colorTheme","variation"]);return b.createElement(Xe,Object.assign({colorTheme:d,variation:c,ref:a},u),i?b.createElement(Ze,null):null,b.createElement(Ye,null,n?b.createElement(qe,null,n):null,t),s?b.createElement(Ke,{onDismiss:r,dismissLabel:l}):null)}));Qe.displayName="Message";const{passwordIsHidden:Je,passwordIsShown:ea,showPassword:aa}=l.ComponentText.PasswordField,ta=b.forwardRef(((e,a)=>{var t,s,{fieldType:r,passwordIsHiddenLabel:i=Je,passwordIsShownLabel:d=ea,showPasswordButtonLabel:c=aa,size:u,hasError:m}=e,p=o.__rest(e,["fieldType","passwordIsHiddenLabel","passwordIsShownLabel","showPasswordButtonLabel","size","hasError"]);const f=l.useIcons("passwordField"),C=v.default(l.ComponentClassNames.FieldShowPassword,n.classNameModifierByFlag(l.ComponentClassNames.FieldShowPassword,"error",m)),g="password"===r?null!==(t=null==f?void 0:f.visibility)&&void 0!==t?t:b.createElement(l.IconVisibility,{"aria-hidden":"true"}):null!==(s=null==f?void 0:f.visibilityOff)&&void 0!==s?s:b.createElement(l.IconVisibilityOff,{"aria-hidden":"true"});return b.createElement(l.Button,Object.assign({"aria-checked":"password"!==r,ariaLabel:c,className:C,ref:a,role:"switch",size:u},p),b.createElement(re,{"aria-live":"polite"},"password"===r?i:d),g)}));ta.displayName="ShowPasswordButton";const na=b.forwardRef(((e,a)=>{var{autoComplete:t="current-password",label:n,className:s,hideShowPassword:r=!1,passwordIsHiddenLabel:i,passwordIsShownLabel:d,showPasswordButtonLabel:c,showPasswordButtonRef:u,size:m,hasError:p}=e,f=o.__rest(e,["autoComplete","label","className","hideShowPassword","passwordIsHiddenLabel","passwordIsShownLabel","showPasswordButtonLabel","showPasswordButtonRef","size","hasError"]);const[C,g]=b.useState("password"),h=b.useCallback((()=>{g("password"===C?"text":"password")}),[g,C]);return b.createElement(W,Object.assign({autoComplete:t,outerEndComponent:r?null:b.createElement(ta,{fieldType:C,onClick:h,passwordIsHiddenLabel:i,passwordIsShownLabel:d,ref:u,size:m,showPasswordButtonLabel:c,hasError:p}),size:m,type:C,label:n,className:v.default(l.ComponentClassNames.PasswordField,s),ref:a,hasError:p},f))}));na.displayName="PasswordField";const la=b.forwardRef(((e,a)=>{var t,{autoComplete:s,className:r,size:i,variation:d,value:c,defaultValue:u,hasError:m,icon:p,iconColor:f,children:C,placeholder:g,isDisabled:h,isRequired:N,isMultiple:E=!1,selectSize:F=1}=e,y=o.__rest(e,["autoComplete","className","size","variation","value","defaultValue","hasError","icon","iconColor","children","placeholder","isDisabled","isRequired","isMultiple","selectSize"]);const w=void 0===c&&void 0===u&&g,x=E||F>1,S=v.default(l.ComponentClassNames.Select,l.ComponentClassNames.FieldGroupControl,n.classNameModifier(l.ComponentClassNames.Select,i),n.classNameModifier(l.ComponentClassNames.Select,d),n.classNameModifierByFlag(l.ComponentClassNames.Select,"error",m),n.classNameModifierByFlag(l.ComponentClassNames.Select,"expanded",x),r),I=l.useIcons("select"),{isFieldsetDisabled:T}=l.useFieldset();return b.createElement(l.View,{className:l.ComponentClassNames.SelectWrapper},b.createElement(l.View,Object.assign({"aria-invalid":m,as:"select",autoComplete:s,value:c,defaultValue:w?"":u,isDisabled:T||h,multiple:E,size:F,required:N,"data-size":i,"data-variation":d,className:S,ref:a},y),g&&b.createElement("option",{value:""},g),C),x?null:b.createElement(l.Flex,{className:v.default(l.ComponentClassNames.SelectIconWrapper,n.classNameModifier(l.ComponentClassNames.SelectIconWrapper,i)),color:f},null!==(t=null!=p?p:null==I?void 0:I.expand)&&void 0!==t?t:b.createElement(l.IconExpandMore,null)))}));la.displayName="Select";const sa=b.forwardRef(((e,a)=>{const{children:t,className:s,descriptiveText:r,errorMessage:i,hasError:d=!1,id:c,label:u,labelHidden:m=!1,options:p,size:f,testId:C,inputStyles:g}=e,h=o.__rest(e,["children","className","descriptiveText","errorMessage","hasError","id","label","labelHidden","options","size","testId","inputStyles"]),N=V(c),E=V(),F=r?E:void 0,{styleProps:y,rest:w}=q(h);return b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.Field,n.classNameModifier(l.ComponentClassNames.Field,f),l.ComponentClassNames.SelectField,s),"data-size":f,testId:C},y),b.createElement(l.Label,{htmlFor:N,visuallyHidden:m},u),b.createElement(l.FieldDescription,{id:E,labelHidden:m,descriptiveText:r}),b.createElement(la,Object.assign({"aria-describedby":F,hasError:d,id:N,ref:a,size:f},w,g),(({children:e,options:a})=>e?((null==a?void 0:a.length)&&console.warn("Amplify UI: <SelectField> component  defaults to rendering children over `options`. When using the `options` prop, omit children."),e):null==a?void 0:a.map(((e,a)=>b.createElement("option",{label:e,value:e,key:`${e}-${a}`},e))))({children:t,options:p})),b.createElement(l.FieldErrorMessage,{hasError:d,errorMessage:i}))}));sa.displayName="SelectField";const ra=b.forwardRef(((e,a)=>{var{className:t,dialCodeList:s,isReadOnly:r}=e,i=o.__rest(e,["className","dialCodeList","isReadOnly"]);const d=null!=s?s:n.countryDialCodes,c=b.useMemo((()=>d.map((e=>b.createElement("option",{key:e,value:e,disabled:r},e)))),[d,r]);return b.createElement(sa,Object.assign({"aria-disabled":r,autoComplete:"tel-country-code",className:v.default(l.ComponentClassNames.CountryCodeSelect,l.ComponentClassNames.DialCodeSelect,t),labelHidden:!0,ref:a},i),c)}));ra.displayName="CountryCodeSelect";const oa=b.forwardRef(((e,a)=>{var{autoComplete:t="tel-national",className:n,countryCodeName:s,countryCodeLabel:r=l.ComponentText.PhoneNumberField.countryCodeLabel,countryCodeRef:i,defaultCountryCode:d,defaultDialCode:c,dialCodeLabel:u=l.ComponentText.PhoneNumberField.countryCodeLabel,dialCodeList:m,dialCodeName:p,dialCodeRef:f,hasError:C,isDisabled:g,isReadOnly:h,onCountryCodeChange:N,onDialCodeChange:E,onInput:F,size:y,variation:w}=e,x=o.__rest(e,["autoComplete","className","countryCodeName","countryCodeLabel","countryCodeRef","defaultCountryCode","defaultDialCode","dialCodeLabel","dialCodeList","dialCodeName","dialCodeRef","hasError","isDisabled","isReadOnly","onCountryCodeChange","onDialCodeChange","onInput","size","variation"]);const S=null!=p?p:s,I=null!=u?u:r,T=null!=c?c:d,P=null!=E?E:N,D=null!=f?f:i;return b.createElement(W,Object.assign({outerStartComponent:b.createElement(ra,{defaultValue:T,dialCodeList:m,className:n,hasError:C,isDisabled:g,isReadOnly:h,label:I,name:S,onChange:P,ref:D,size:y,variation:w}),autoComplete:t,className:v.default(l.ComponentClassNames.PhoneNumberField,n),hasError:C,isDisabled:g,isReadOnly:h,onInput:F,ref:a,size:y,type:"tel",variation:w},x))}));oa.displayName="PhoneNumberField";const ia=b.forwardRef(((e,a)=>{var{className:t,children:s,isLoaded:r,size:i}=e,d=o.__rest(e,["className","children","isLoaded","size"]);return r?b.createElement(b.Fragment,null,s):b.createElement(l.View,Object.assign({className:v.default(l.ComponentClassNames.Placeholder,n.classNameModifier(l.ComponentClassNames.Placeholder,i),t),"data-size":i,ref:a},d))}));ia.displayName="Placeholder";const da=N.default.createContext({name:"default"}),ca=b.forwardRef(((a,t)=>{var{children:s,className:r,id:i,isDisabled:d,testId:c,value:u,labelPosition:m,height:p,width:f,bottom:C,left:g,position:h,padding:N,right:E,top:F}=a,y=o.__rest(a,["children","className","id","isDisabled","testId","value","labelPosition","height","width","bottom","left","position","padding","right","top"]);const{currentValue:w,defaultValue:x,name:S,hasError:I,isGroupDisabled:T,isRequired:P,isReadOnly:D,onChange:k,size:M,labelPosition:O}=e.useContext(da),{isFieldsetDisabled:R}=l.useFieldset(),B=R||(T||d||D&&x!==u),L=void 0!==w?u===w:void 0,V=void 0!==x?u===x:void 0,_=m||O;return b.createElement(l.Flex,{as:"label",className:v.default(l.ComponentClassNames.Radio,n.classNameModifierByFlag(l.ComponentClassNames.Radio,"disabled",B),r),"data-disabled":B,"data-label-position":_,height:p,width:f,bottom:C,top:F,right:E,left:g,position:h,padding:N},s&&b.createElement(l.Text,{as:"span",className:l.ComponentClassNames.RadioLabel,"data-disabled":B},s),b.createElement(G,Object.assign({checked:L,className:v.default(l.ComponentClassNames.VisuallyHidden,l.ComponentClassNames.RadioInput),defaultChecked:V,hasError:I,id:i,isDisabled:B,isReadOnly:D,isRequired:P,onChange:k,ref:t,type:"radio",name:S,value:u},y)),b.createElement(l.Flex,{"aria-hidden":"true",as:"span",className:v.default(l.ComponentClassNames.RadioButton,n.classNameModifier(l.ComponentClassNames.RadioButton,M)),"data-size":M,testId:c}))}));ca.displayName="Radio";const ua=b.forwardRef(((e,a)=>{var{children:t,className:s,defaultValue:r,descriptiveText:i,errorMessage:d,hasError:c=!1,id:u,isDisabled:m,isRequired:p,isReadOnly:f,label:C,labelHidden:g=!1,labelPosition:h,onChange:N,name:E,size:F,testId:y,value:w}=e,x=o.__rest(e,["children","className","defaultValue","descriptiveText","errorMessage","hasError","id","isDisabled","isRequired","isReadOnly","label","labelHidden","labelPosition","onChange","name","size","testId","value"]);const S=V(u),I=V(),T=i?I:void 0,P=j(y,l.ComponentClassNames.RadioGroup),D=b.useMemo((()=>({currentValue:w,defaultValue:r,hasError:c,isRequired:p,isReadOnly:f,isGroupDisabled:m,onChange:N,size:F,name:E,labelPosition:h})),[r,c,m,p,f,N,F,E,w,h]);return b.createElement(l.Flex,Object.assign({as:"fieldset",className:v.default(l.ComponentClassNames.Field,n.classNameModifier(l.ComponentClassNames.Field,F),l.ComponentClassNames.RadioGroupField,s),"data-size":F,ref:a,role:"radiogroup",testId:y},x),b.createElement(re,{as:"legend"},C),b.createElement(l.Label,{"aria-hidden":!0,visuallyHidden:g},C),b.createElement(l.FieldDescription,{id:I,labelHidden:g,descriptiveText:i}),b.createElement(l.Flex,{"aria-describedby":T,className:l.ComponentClassNames.RadioGroup,id:S,testId:P},b.createElement(da.Provider,{value:D},t)),b.createElement(l.FieldErrorMessage,{hasError:c,errorMessage:d}))}));ua.displayName="RadioGroupField";const ma=({icon:e,fill:a,className:t})=>b.createElement(l.View,{as:"span",className:"amplify-rating-icon-container","aria-hidden":"true"},b.createElement(l.View,{as:"span",className:v.default(t),color:a},e));ma.displayName="RatingIcon";const pa=({emptyColor:e,emptyIcon:a,fillColor:t,fillIcon:n,value:s})=>{const r=s%1*100+"%";return b.createElement(l.View,{as:"span",className:"amplify-rating-icon-container","aria-hidden":"true"},b.createElement(l.View,{as:"span",className:"amplify-rating-label"},b.createElement(l.View,{as:"span",className:v.default("amplify-rating-icon","amplify-rating-icon-empty"),color:e},a)),b.createElement(l.View,{as:"span",className:"amplify-rating-label",width:r},b.createElement(l.View,{as:"span",className:v.default("amplify-rating-icon","amplify-rating-icon-filled"),color:t},n)))};pa.displayName="RatingMixedIcon";const fa=5,Ca=0,ga=b.forwardRef(((e,a)=>{var t,s,r,{className:i,emptyColor:d,emptyIcon:c,fillColor:u,icon:m,maxValue:p=fa,size:f,value:C=Ca}=e,g=o.__rest(e,["className","emptyColor","emptyIcon","fillColor","icon","maxValue","size","value"]);const h=l.useIcons("rating"),N=null!==(t=null!=m?m:null==h?void 0:h.filled)&&void 0!==t?t:b.createElement(l.IconStar,null),E=null!==(r=null!==(s=null!=c?c:m)&&void 0!==s?s:null==h?void 0:h.empty)&&void 0!==r?r:b.createElement(l.IconStar,null),F=new Array(Math.ceil(p)).fill(1).map(((e,a)=>{const t=a+1;return((e,a)=>e<=a)(t,C)?b.createElement(ma,{key:a.toString(),icon:N,fill:u,className:"amplify-rating-icon-filled"}):((e,a)=>e-1>=a)(t,C)?b.createElement(ma,{key:a.toString(),icon:E,fill:d,className:"amplify-rating-icon-empty"}):((e,a)=>e>a&&e-1<a)(t,C)?b.createElement(pa,{key:a.toString(),fillIcon:N,emptyIcon:E,value:C,fillColor:u,emptyColor:d}):void 0}));return b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.Rating,n.classNameModifier(l.ComponentClassNames.Rating,f),i),"data-size":f,ref:a},g),F,b.createElement(re,null,C," out of ",p," rating"))}));ga.displayName="Rating";const{Range:ha,Root:ba,Thumb:Na,Track:Ea}=n.sanitizeNamespaceImport(x),va=b.forwardRef(((e,a)=>{var{ariaValuetext:t,className:s,defaultValue:r=0,descriptiveText:i,emptyTrackColor:d,errorMessage:c,filledTrackColor:u,formatValue:m,hasError:p=!1,id:f,isDisabled:C,isValueHidden:g=!1,label:h,labelHidden:N=!1,onChange:E,orientation:F="horizontal",outerEndComponent:y,outerStartComponent:w,testId:x,thumbColor:S,trackSize:I,value:T,size:P}=e,D=o.__rest(e,["ariaValuetext","className","defaultValue","descriptiveText","emptyTrackColor","errorMessage","filledTrackColor","formatValue","hasError","id","isDisabled","isValueHidden","label","labelHidden","onChange","orientation","outerEndComponent","outerStartComponent","testId","thumbColor","trackSize","value","size"]);const{isFieldsetDisabled:k}=l.useFieldset(),M=V(f),O=V(),R=V(),B=i?R:void 0,{styleProps:L,rest:_}=q(D),j=void 0!==T,[A,H]=b.useState(j?T:r),z=j?[T]:void 0,G=j?void 0:[r],W=b.useCallback((e=>{H(e[0]),n.isFunction(E)&&E(e[0])}),[E]),$=b.useMemo((()=>{const e=n.isFunction(m)?m(A):A;return"string"==typeof m?b.createElement(l.View,{as:"span"},e):e}),[A,m]),Z="vertical"===F,K=v.default(l.ComponentClassNames.SliderFieldTrack,n.classNameModifier(l.ComponentClassNames.SliderFieldTrack,F),n.classNameModifier(l.ComponentClassNames.SliderFieldTrack,P)),Y=v.default(l.ComponentClassNames.SliderFieldRoot,n.classNameModifier(l.ComponentClassNames.SliderFieldRoot,F),n.classNameModifier(l.ComponentClassNames.SliderFieldRoot,P),s);return b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.Field,n.classNameModifier(l.ComponentClassNames.Field,P),l.ComponentClassNames.SliderField),testId:x,"data-size":P},L),b.createElement(l.Label,{className:l.ComponentClassNames.SliderFieldLabel,id:O,testId:"slider-label",visuallyHidden:N},b.createElement(l.View,{as:"span"},h),g?null:$),b.createElement(l.FieldDescription,{id:R,labelHidden:N,descriptiveText:i}),b.createElement(U,{className:l.ComponentClassNames.SliderFieldGroup,id:M,orientation:F,outerStartComponent:w,outerEndComponent:y},b.createElement(ba,Object.assign({className:Y,"data-testid":"slider-root",disabled:k||C,defaultValue:G,onValueChange:W,orientation:F,ref:a,value:z},_),b.createElement(Ea,{className:K,"data-testid":"slider-track",style:{backgroundColor:String(d),[""+(Z?"width":"height")]:I}},b.createElement(ha,{className:v.default(l.ComponentClassNames.SliderFieldRange,n.classNameModifier(l.ComponentClassNames.SliderFieldRange,F)),"data-testid":"slider-range",style:{backgroundColor:String(u)}})),b.createElement(Na,{"aria-describedby":B,"aria-labelledby":O,"aria-valuetext":t,className:v.default(l.ComponentClassNames.SliderFieldThumb,n.classNameModifier(l.ComponentClassNames.SliderFieldThumb,P)),style:{backgroundColor:String(S)}}))),b.createElement(l.FieldErrorMessage,{hasError:p,errorMessage:c}))}));va.displayName="SliderField";const Fa=({max:e,min:a,step:t,value:n})=>{const l=(n-a)%t;return n=n-l+Math.round(l/t)*t,(n=Math.max(a,n))>e&&(n=e-(e-a)%t),n},ya=b.forwardRef(((e,a)=>{var t,s;const{className:r,defaultValue:i,descriptiveText:d,errorMessage:c,hasError:u=!1,id:m,inputStyles:p,isDisabled:f,isReadOnly:C,isRequired:g,increaseButtonLabel:h=l.ComponentText.StepperField.increaseButtonLabel,decreaseButtonLabel:N=l.ComponentText.StepperField.decreaseButtonLabel,label:E,labelHidden:F=!1,onStepChange:y,size:w,testId:x,value:S,variation:I}=e,T=o.__rest(e,["className","defaultValue","descriptiveText","errorMessage","hasError","id","inputStyles","isDisabled","isReadOnly","isRequired","increaseButtonLabel","decreaseButtonLabel","label","labelHidden","onStepChange","size","testId","value","variation"]),P=V(m),D=V(),k=d?D:void 0,{styleProps:M,rest:O}=q(T),R=l.useIcons("stepperField"),{step:B,value:L,inputValue:_,handleDecrease:j,handleIncrease:A,handleOnBlur:H,handleOnChange:z,handleOnWheel:W,setInputValue:$,shouldDisableDecreaseButton:Z,shouldDisableIncreaseButton:K}=(({defaultValue:e=0,value:a,step:t=1,max:l=Number.MAX_SAFE_INTEGER,min:s=Number.MIN_SAFE_INTEGER,isDisabled:r,isReadOnly:o,onChange:i,onDecrease:d,onIncrease:c,onStepChange:u})=>{var m,p;const f=void 0!==a;l=Math.max(s,l);const[C,g]=b.useState((()=>Fa({min:s,max:l,step:t,value:e}))),h=f?Fa({min:s,max:l,step:t,value:a}):C,N=null!==(m=null!=r?r:o)&&void 0!==m?m:h+t>l,E=null!==(p=null!=r?r:o)&&void 0!==p?p:h-t<s,[v,F]=b.useState(h),y=b.useCallback((e=>{F(e.target.value),n.isFunction(i)&&i(e)}),[i]),w=b.useCallback((e=>{const a=parseFloat(e.target.value);if(isNaN(a))return;const r=Fa({min:s,max:l,step:t,value:a});f||g(r),n.isFunction(u)&&u(r),F(r)}),[s,l,t,f,u]),x=b.useCallback((()=>{f||g(h+t),n.isFunction(u)&&u(h+t),n.isFunction(c)&&c(),F(h+t)}),[t,h,f,c,u]),S=b.useCallback((()=>{f||g(h-t),n.isFunction(u)&&u(h-t),n.isFunction(d)&&d(),F(h-t)}),[t,h,f,d,u]),I=b.useCallback((e=>{e.currentTarget.blur()}),[]);return{step:t,value:h,inputValue:v,handleDecrease:S,handleIncrease:x,handleOnBlur:w,handleOnChange:y,handleOnWheel:I,setInputValue:F,shouldDisableDecreaseButton:E,shouldDisableIncreaseButton:N}})(Object.assign(Object.assign({},e),{defaultValue:i,onStepChange:y}));return b.useEffect((()=>{void 0!==S&&$(S)}),[S,$]),b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.Field,n.classNameModifier(l.ComponentClassNames.Field,w),l.ComponentClassNames.StepperField,r),"data-size":w,"data-variation":I,testId:x},M),b.createElement(l.Label,{htmlFor:P,visuallyHidden:F},E),b.createElement(l.FieldDescription,{id:D,labelHidden:F,descriptiveText:d}),b.createElement(U,{outerStartComponent:b.createElement(l.FieldGroupIconButton,{"aria-controls":P,ariaLabel:`${N} ${L-B}`,className:v.default(l.ComponentClassNames.StepperFieldButtonDecrease,n.classNameModifier(l.ComponentClassNames.StepperFieldButtonDecrease,I),n.classNameModifierByFlag(l.ComponentClassNames.StepperFieldButtonDecrease,"disabled",Z)),"data-invalid":u,isDisabled:Z,onClick:j,size:w},null!==(t=null==R?void 0:R.remove)&&void 0!==t?t:b.createElement(l.IconRemove,{"data-testid":"decrease-icon"})),outerEndComponent:b.createElement(l.FieldGroupIconButton,{"aria-controls":P,ariaLabel:`${h} ${L+B}`,className:v.default(l.ComponentClassNames.StepperFieldButtonIncrease,n.classNameModifier(l.ComponentClassNames.StepperFieldButtonIncrease,I),n.classNameModifierByFlag(l.ComponentClassNames.StepperFieldButtonIncrease,"disabled",K)),"data-invalid":u,isDisabled:K,onClick:A,size:w},null!==(s=null==R?void 0:R.add)&&void 0!==s?s:b.createElement(l.IconAdd,{"data-testid":"increase-icon"}))},b.createElement(G,Object.assign({"aria-describedby":k,className:l.ComponentClassNames.StepperFieldInput,hasError:u,id:P,isDisabled:f,isReadOnly:C,isRequired:g,onBlur:H,onChange:z,onWheel:W,ref:a,size:w,variation:I,type:"number",value:_},p,O))),b.createElement(l.FieldErrorMessage,{hasError:u,errorMessage:c}))}));ya.displayName="StepperField";const wa=b.forwardRef(((a,t)=>{var{className:s,defaultChecked:r,id:i,isChecked:d,isDisabled:c,isLabelHidden:u,label:m,labelPosition:p,name:f,onChange:C,size:g,thumbColor:h,trackCheckedColor:N,trackColor:E,value:F,hasError:y,errorMessage:w}=a,x=o.__rest(a,["className","defaultChecked","id","isChecked","isDisabled","isLabelHidden","label","labelPosition","name","onChange","size","thumbColor","trackCheckedColor","trackColor","value","hasError","errorMessage"]);const{isOn:S,changeHandler:I,isFocused:T,setIsFocused:P}=(a=>{const{onChange:t,isChecked:l,defaultChecked:s,isDisabled:r}=a,o=void 0!==l,[i,d]=e.useState(o?l:!!s),[c,u]=e.useState(!1),m=e.useCallback((e=>{r?e.preventDefault():(n.isFunction(t)&&t(e),d(e.target.checked))}),[t,r]);return o&&i!==l&&d(l),{isOn:i,changeHandler:m,isFocused:c,setIsFocused:u}})({onChange:C,isChecked:d,defaultChecked:r,isDisabled:c}),{isFieldsetDisabled:D}=l.useFieldset(),k=D||c,M=V(i),O=u?re:l.View,R=v.default(l.ComponentClassNames.SwitchTrack,n.classNameModifierByFlag(l.ComponentClassNames.SwitchTrack,"checked",S),n.classNameModifierByFlag(l.ComponentClassNames.SwitchTrack,"disabled",k),n.classNameModifierByFlag(l.ComponentClassNames.SwitchTrack,"focused",T),n.classNameModifierByFlag(l.ComponentClassNames.SwitchTrack,"error",y)),B=v.default(l.ComponentClassNames.SwitchThumb,n.classNameModifierByFlag(l.ComponentClassNames.SwitchThumb,"checked",S),n.classNameModifierByFlag(l.ComponentClassNames.SwitchThumb,"disabled",k));return b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.SwitchField,n.classNameModifier(l.ComponentClassNames.SwitchField,g),s),"data-size":g,"data-label-position":p,ref:t},x),b.createElement(re,null,b.createElement(G,{role:"switch",type:"checkbox",id:M,onChange:I,disabled:c,name:f,checked:S,value:F,onFocus:()=>{P(!0)},onBlur:()=>{P(!1)}})),b.createElement(l.Label,{htmlFor:M,className:v.default(l.ComponentClassNames.SwitchWrapper,n.classNameModifier(l.ComponentClassNames.SwitchWrapper,p)),"data-label-position":p},b.createElement(O,{as:"span",className:l.ComponentClassNames.SwitchLabel},m),b.createElement(l.View,{as:"span",className:R,"data-checked":S,"data-disabled":k,"data-focused":T,backgroundColor:S?N:E},b.createElement(l.View,{as:"span",className:B,"data-checked":S,"data-disabled":k,backgroundColor:h}))),b.createElement(l.FieldErrorMessage,{hasError:y,errorMessage:w}))}));wa.displayName="SwitchField";const xa=b.forwardRef(((e,a)=>{var{caption:t,children:s,className:r,highlightOnHover:i=!1,size:d,variation:c}=e,u=o.__rest(e,["caption","children","className","highlightOnHover","size","variation"]);const m=v.default(l.ComponentClassNames.Table,n.classNameModifier(l.ComponentClassNames.Table,d),n.classNameModifier(l.ComponentClassNames.Table,c),r);return b.createElement(l.View,Object.assign({as:"table",className:m,"data-highlightonhover":i,"data-size":d,"data-variation":c,ref:a},u),t&&b.createElement(l.View,{as:"caption",className:l.ComponentClassNames.TableCaption},t),s)}));xa.displayName="Table";const Sa=b.forwardRef(((e,a)=>{var{children:t,className:n}=e,s=o.__rest(e,["children","className"]);return b.createElement(l.View,Object.assign({as:"tbody",className:v.default(l.ComponentClassNames.TableBody,n),ref:a},s),t)}));Sa.displayName="TableBody";const Ia=b.forwardRef(((e,a)=>{var{as:t="td",children:n,className:s}=e,r=o.__rest(e,["as","children","className"]);return b.createElement(l.View,Object.assign({as:t,className:v.default("td"===t?l.ComponentClassNames.TableTd:l.ComponentClassNames.TableTh,s),ref:a},r),n)}));Ia.displayName="TableCell";const Ta=b.forwardRef(((e,a)=>{var{children:t,className:n}=e,s=o.__rest(e,["children","className"]);return b.createElement(l.View,Object.assign({as:"tfoot",className:v.default(l.ComponentClassNames.TableFoot,n),ref:a},s),t)}));Ta.displayName="TableFoot";const Pa=b.forwardRef(((e,a)=>{var{children:t,className:n}=e,s=o.__rest(e,["children","className"]);return b.createElement(l.View,Object.assign({as:"thead",className:v.default(l.ComponentClassNames.TableHead,n),ref:a},s),t)}));Pa.displayName="TableHead";const Da=b.forwardRef(((e,a)=>{var{children:t,className:n}=e,s=o.__rest(e,["children","className"]);return b.createElement(l.View,Object.assign({as:"tr",className:v.default(l.ComponentClassNames.TableRow,n),ref:a},s),t)}));Da.displayName="TableRow";const{Root:ka,List:Ma,Trigger:Oa,Content:Ra}=n.sanitizeNamespaceImport(S),Ba=e=>b.isValidElement(e),La=b.forwardRef(((e,a)=>{var{ariaLabel:t,children:n,className:s,defaultIndex:r=0,currentIndex:i,onChange:d,indicatorPosition:c,spacing:u}=e,m=o.__rest(e,["ariaLabel","children","className","defaultIndex","currentIndex","onChange","indicatorPosition","spacing"]);const p={defaultValue:r.toString(),value:null!=i?i.toString():void 0,onValueChange:d},f=b.Children.toArray(n).filter((e=>!!e));return b.createElement(ka,Object.assign({},p),b.createElement(Ma,{"aria-label":t},b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.Tabs,s),"data-indicator-position":c,ref:a},m),b.Children.map(f,((e,a)=>{if(Ba(e))return b.cloneElement(e,{"data-spacing":u,key:a,value:`${a}`})})))),b.Children.map(f,((e,a)=>{if(Ba(e))return b.createElement(Ra,{key:a,value:`${a}`},e.props.children)})))})),Va=b.forwardRef(((e,a)=>{var{className:t,title:n}=e,s=o.__rest(e,["className","title"]);return b.createElement(l.View,Object.assign({as:Oa,className:v.default(l.ComponentClassNames.TabItems,t),ref:a},s),n)}));La.displayName="Tabs",Va.displayName="TabItem";const _a=b.forwardRef(((e,a)=>{var{className:t,isDisabled:s,isReadOnly:r,isRequired:i,size:d,hasError:c=!1,variation:u}=e,m=o.__rest(e,["className","isDisabled","isReadOnly","isRequired","size","hasError","variation"]);const p=v.default(l.ComponentClassNames.Textarea,l.ComponentClassNames.FieldGroupControl,n.classNameModifier(l.ComponentClassNames.Textarea,u),n.classNameModifier(l.ComponentClassNames.Textarea,d),n.classNameModifierByFlag(l.ComponentClassNames.Textarea,"error",c),t),{isFieldsetDisabled:f}=l.useFieldset();return b.createElement(l.View,Object.assign({"aria-invalid":c,as:"textarea",className:p,"data-size":d,"data-variation":u,disabled:f||s,readOnly:r,ref:a,required:i},m))}));_a.displayName="TextArea";const ja=b.forwardRef(((e,a)=>{const{className:t,descriptiveText:s,errorMessage:r,hasError:i=!1,id:d,label:c,labelHidden:u=!1,rows:m,size:p,testId:f,inputStyles:C,resize:g}=e,h=o.__rest(e,["className","descriptiveText","errorMessage","hasError","id","label","labelHidden","rows","size","testId","inputStyles","resize"]),N=V(d),E=V(),F=s?E:void 0,{styleProps:y,rest:w}=q(h);return b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.Field,n.classNameModifier(l.ComponentClassNames.Field,p),l.ComponentClassNames.TextAreaField,t),"data-size":p,testId:f},y),b.createElement(l.Label,{htmlFor:N,visuallyHidden:u},c),b.createElement(l.FieldDescription,{id:E,labelHidden:u,descriptiveText:s}),b.createElement(_a,Object.assign({"aria-describedby":F,hasError:i,id:N,ref:a,rows:null!=m?m:3,size:p,resize:g},w,C)),b.createElement(l.FieldErrorMessage,{hasError:i,errorMessage:r}))}));ja.displayName="TextAreaField";const Aa=b.forwardRef(((e,a)=>{var{className:t,children:s,defaultPressed:r=!1,isDisabled:i,isPressed:d,onChange:c,onClick:u,size:m,value:p,variation:f}=e,C=o.__rest(e,["className","children","defaultPressed","isDisabled","isPressed","onChange","onClick","size","value","variation"]);const{isPressed:g,handleClick:h}=(({isPressed:e,defaultPressed:a,onClick:t,onChange:l,value:s})=>{const r=void 0!==e,[o,i]=b.useState(a);return{isPressed:e=r?e:o,handleClick:b.useCallback((e=>{n.isFunction(t)&&t(e),r||i(!o),r&&n.isFunction(l)&&l(s)}),[r,t,l,o,s])}})({isPressed:d,defaultPressed:r,onChange:c,onClick:u,value:p}),N=v.default(l.ComponentClassNames.ToggleButton,n.classNameModifier(l.ComponentClassNames.ToggleButton,f),n.classNameModifierByFlag(l.ComponentClassNames.ToggleButton,"pressed",g),t);return b.createElement(l.Button,Object.assign({"aria-pressed":g,className:N,isDisabled:i,onClick:h,ref:a,size:m,type:"button",variation:f},C),s)}));Aa.displayName="ToggleButton";const Ha=b.forwardRef(((e,a)=>{var{children:t,className:s,isExclusive:r,isSelectionRequired:i,onChange:d,size:c,value:u,variation:m}=e,p=o.__rest(e,["children","className","isExclusive","isSelectionRequired","onChange","size","value","variation"]);const f=(({onChange:e,value:a,isExclusive:t=!1,isSelectionRequired:l=!1})=>{const s=b.useCallback((t=>{if(!n.isFunction(e)||!Array.isArray(a))return;const s=n.isString(t)?a.indexOf(t):-1;let r;s>=0?(r=[...a],(!l||r.length>1)&&r.splice(s,1)):r=[...a,t],e(r)}),[e,a,l]),r=b.useCallback((t=>{n.isFunction(e)&&e(a!==t||l?t:void 0)}),[e,a,l]);return t?r:s})({onChange:d,value:u,isExclusive:r,isSelectionRequired:i});return b.createElement(l.Flex,Object.assign({className:v.default(l.ComponentClassNames.ToggleButtonGroup,s),ref:a,role:"group"},p),b.Children.map(t,(e=>b.isValidElement(e)?b.cloneElement(e,{isPressed:r?u===e.props.value:n.isString(e.props.value)&&u.includes(e.props.value),onChange:f,size:c,variation:m}):e)))}));Ha.displayName="ToggleButtonGroup";var za,Ua=Object.freeze({__proto__:null,IconsProvider:P,Alert:D,Autocomplete:Y,Badge:X,Breadcrumbs:ne,Button:l.Button,ButtonGroup:le,Card:se,CheckboxField:ie,Collection:Ee,Divider:ve,DropZone:xe,Expander:Te,ExpanderItem:Oe,FieldGroupIcon:l.FieldGroupIcon,FieldGroupIconButton:l.FieldGroupIconButton,Fieldset:Re,Flex:l.Flex,Grid:de,Heading:Le,HighlightMatch:A,Icon:l.Icon,Image:Ve,Input:G,Label:l.Label,Link:J,Loader:l.Loader,Menu:ze,MenuButton:_e,MenuItem:Ge,Message:Qe,Pagination:pe,PasswordField:na,PhoneNumberField:oa,Placeholder:ia,Radio:ca,RadioGroupField:ua,Rating:ga,ScrollView:M,SearchField:K,SelectField:sa,SliderField:va,StepperField:ya,SwitchField:wa,Tabs:La,TabItem:Va,Text:l.Text,TextAreaField:ja,TextField:W,ToggleButton:Aa,ToggleButtonGroup:Ha,View:l.View,VisuallyHidden:re,Table:xa,TableBody:Sa,TableCell:Ia,TableFoot:Ta,TableHead:Pa,TableRow:Da,usePagination:fe,ComponentClassNames:l.ComponentClassNames,ComponentClassObject:l.ComponentClassObject,ComponentPropsToStylePropsMap:l.ComponentPropsToStylePropsMap,ComponentPropsToStylePropsMapKeys:l.ComponentPropsToStylePropsMapKeys});!function(e){e.ChangePassword="amplify-accountsettings-changepassword",e.DeleteUser="amplify-accountsettings-deleteuser"}(za||(za={}));const Ga=({errors:e,id:a,dataAttr:t})=>{if(!((null==e?void 0:e.length)>0))return null;const s=t?{[t]:!0}:{};return N.default.createElement(l.View,Object.assign({},s,{id:a}),e.map((e=>N.default.createElement(l.Text,{key:e,role:"alert",variation:"error"},n.translate(e)))))},qa=e=>N.default.createElement(D,Object.assign({variation:"error"},e)),Wa=e=>{var{fieldValidationErrors:a,label:t}=e,n=o.__rest(e,["fieldValidationErrors","label"]);return N.default.createElement(N.default.Fragment,null,N.default.createElement(na,Object.assign({},n,{label:t})),a?N.default.createElement(Ga,{errors:a}):null)},$a={CurrentPasswordField:Wa,NewPasswordField:Wa,ConfirmPasswordField:Wa,SubmitButton:l.Button,ErrorMessage:qa},Za=new t.Logger("ChangePassword");function Ka({onSuccess:e,onError:a,validators:t,components:s}){const[r,o]=N.default.useState(null),[i,d]=N.default.useState({}),[c,u]=N.default.useState({}),m=N.default.useRef([]),{user:p,isLoading:f}=l.useAuth(),C=((e,a)=>{var t,n;const{currentPassword:l,newPassword:s,confirmPassword:r}=e;return!(l&&s&&r)||((null===(t=a.newPassword)||void 0===t?void 0:t.length)>0||(null===(n=a.confirmPassword)||void 0===n?void 0:n.length)>0)})(i,c),g=N.default.useMemo((()=>null!=t?t:n.getDefaultPasswordValidators()),[t]),h=N.default.useCallback((({formValues:e,eventType:a})=>{const{newPassword:t}=e,l=m.current.includes("newPassword");return n.runFieldValidators({value:t,validators:g,eventType:a,hasBlurred:l})}),[g]),b=N.default.useCallback((({formValues:e,eventType:a})=>{const{newPassword:t,confirmPassword:l}=e,s=m.current.includes("confirmPassword"),r=n.getDefaultConfirmPasswordValidators(t);return n.runFieldValidators({value:l,validators:r,eventType:a,hasBlurred:s})}),[]),v=N.default.useCallback((e=>{const a={newPassword:h(e),confirmPassword:b(e)};E.default(c,a)||u(a)}),[b,h,c]),F=n.translate("Current Password"),y=n.translate("New Password"),w=n.translate("Confirm Password"),x=n.translate("Update password"),{CurrentPasswordField:S,NewPasswordField:I,ConfirmPasswordField:T,SubmitButton:P,ErrorMessage:D}=N.default.useMemo((()=>Object.assign(Object.assign({},$a),null!=s?s:{})),[s]),k=e=>{e.preventDefault();const{name:a,value:t}=e.target,n=Object.assign(Object.assign({},i),{[a]:t});v({formValues:n,eventType:"change"}),d(n)},M=e=>{e.preventDefault();const{name:a}=e.target;if(!m.current.includes(a)){const e=[...m.current,a];m.current=e,v({formValues:i,eventType:"blur"})}};return f?null:p?N.default.createElement(l.View,{as:"form",className:za.ChangePassword,onSubmit:t=>{if(t.preventDefault(),!p)return;const{currentPassword:l,newPassword:s}=i;r&&o(null),n.changePassword({user:p,currentPassword:l,newPassword:s}).then((()=>{null==e||e()})).catch((e=>{const t=e;t.message&&o(t.message),null==a||a(t)}))}},N.default.createElement(l.Flex,{direction:"column"},N.default.createElement(S,{autoComplete:"current-password",isRequired:!0,label:F,name:"currentPassword",onBlur:M,onChange:k}),N.default.createElement(I,{autoComplete:"new-password",fieldValidationErrors:null==c?void 0:c.newPassword,isRequired:!0,label:y,name:"newPassword",onBlur:M,onChange:k}),N.default.createElement(T,{autoComplete:"new-password",fieldValidationErrors:null==c?void 0:c.confirmPassword,isRequired:!0,label:w,name:"confirmPassword",onBlur:M,onChange:k}),N.default.createElement(P,{isDisabled:C,type:"submit"},x),r?N.default.createElement(D,null,r):null)):(Za.warn("<ChangePassword /> requires user to be authenticated."),null)}Ka.CurrentPasswordField=$a.CurrentPasswordField,Ka.NewPasswordField=$a.NewPasswordField,Ka.ConfirmPasswordField=$a.ConfirmPasswordField,Ka.SubmitButton=$a.SubmitButton,Ka.ErrorMessage=$a.ErrorMessage;const Ya={ErrorMessage:qa,DeleteButton:e=>N.default.createElement(l.Button,Object.assign({},e,{variation:"warning"})),WarningView:({onCancel:e,onConfirm:a,isDisabled:t})=>{const s=n.translate("Deleting your account is not reversable. You will lose access to your account and all data associated with it."),r=n.translate("Cancel"),o=n.translate("Delete my account");return N.default.createElement(se,null,N.default.createElement(l.Flex,{direction:"column"},N.default.createElement(l.Text,{color:"font.error"},s),N.default.createElement(l.Flex,null,N.default.createElement(l.Button,{variation:"link",onClick:e,isDisabled:t},r),N.default.createElement(l.Button,{variation:"destructive",onClick:a,isDisabled:t},o))))}},Xa=n.getLogger("Auth");function Qa({components:e,onSuccess:a,onError:t,handleDelete:s}){const[r,i]=N.default.useState("IDLE"),[d,c]=N.default.useState(null),u=n.translate("Delete Account"),{user:m,isLoading:p}=l.useAuth(),{ErrorMessage:f,DeleteButton:C,WarningView:g}=N.default.useMemo((()=>Object.assign(Object.assign({},Ya),null!=e?e:{})),[e]),h=N.default.useCallback((()=>o.__awaiter(this,void 0,void 0,(function*(){if(m){i("DELETING"),d&&c(null);try{s?yield s(m):yield n.deleteUser(),i("DONE"),null==a||a()}catch(e){const a=e;i("ERROR"),c(a.message),null==t||t(a)}}}))),[d,s,t,a,m]),b=N.default.useCallback((()=>{i("IDLE")}),[]),E=N.default.useCallback((()=>{h()}),[h]);return p?null:m?"DONE"===r?null:N.default.createElement(l.Flex,{className:za.DeleteUser,direction:"column"},N.default.createElement(C,{isDisabled:"CONFIRMATION"===r||"DELETING"===r,onClick:e=>{e.preventDefault(),i("CONFIRMATION")}},u),"CONFIRMATION"===r||"DELETING"===r?N.default.createElement(g,{onCancel:b,isDisabled:"DELETING"===r,onConfirm:E}):null,d?N.default.createElement(f,null,d):null):(Xa.warn("<DeleteUser /> requires user to be authenticated."),null)}Qa.ErrorMessage=Ya.ErrorMessage,Qa.DeleteButton=Ya.DeleteButton,Qa.WarningView=Ya.WarningView;var Ja={ChangePassword:Ka,DeleteUser:Qa};const et="5.3.2",at=b.createContext(null),tt=()=>{const e=b.useContext(at);if(!e)throw new Error("`useCustomComponents` cannot be used outside of a `CustomComponentsContext.Provider`");return e},nt=e=>"signIn"===e||"signUp";function lt({children:e,className:a,variation:t="default"}){const{route:n}=s.useAuthenticator((({route:e})=>[e])),{components:{Header:r,Footer:o}}=tt();return N.default.createElement(l.View,{className:a,"data-amplify-authenticator":"","data-variation":t},N.default.createElement(l.View,{"data-amplify-container":""},N.default.createElement(r,null),N.default.createElement(l.View,{"data-amplify-router":"","data-amplify-router-content":nt(n)?void 0:""},e),N.default.createElement(o,null)))}function st(){const{submitForm:a,updateBlur:t,updateForm:n}=s.useAuthenticator((e=>[e.submitForm,e.updateBlur,e.updateForm]));return{handleBlur:e.useCallback((({target:{name:e}})=>{t({name:e})}),[t]),handleChange:e.useCallback((({target:{checked:e,name:a,type:t,value:l}})=>{n({name:a,value:"checkbox"===t&&!e?void 0:l})}),[n]),handleSubmit:e.useCallback((e=>{e.preventDefault(),a(l.getFormDataFromEvent(e))}),[a])}}const rt=()=>{const{error:e}=s.useAuthenticator((e=>[e.error]));return N.default.createElement(N.default.Fragment,null,e?N.default.createElement(D,{variation:"error",isDismissible:!0},n.translate(e)):null)};function ot(e){var{autocomplete:a,dialCode:t,name:l,type:r}=e,i=o.__rest(e,["autocomplete","dialCode","name","type"]);const{validationErrors:d}=s.useAuthenticator((({validationErrors:e})=>[e])),c=b.useMemo((()=>n.getErrors(d[l])),[l,d]),u=(null==c?void 0:c.length)>0,m=V(),p=u?m:void 0;return"tel"===r?b.createElement(b.Fragment,null,b.createElement(oa,Object.assign({},i,{name:l,defaultDialCode:t,dialCodeName:"country_code",autoComplete:a,hasError:u,"aria-describedby":p})),b.createElement(Ga,{dataAttr:"data-amplify-sign-up-errors",errors:c,id:m})):"password"===r?b.createElement(b.Fragment,null,b.createElement(na,Object.assign({},i,{name:l,autoComplete:a,hasError:u,"aria-describedby":p})),b.createElement(Ga,{dataAttr:"data-amplify-sign-up-errors",errors:c,id:m})):b.createElement(b.Fragment,null,b.createElement(W,Object.assign({},i,{name:l,autoComplete:a,hasError:u,type:r,"aria-describedby":p})),b.createElement(Ga,{dataAttr:"data-amplify-sign-up-errors",errors:c,id:m}))}function it(){const{fields:e}=s.useAuthenticator((({route:e})=>[e])),a=b.useRef(e.map(((e,a)=>b.createElement(ot,Object.assign({key:a},e))))).current;return b.createElement(b.Fragment,null,a)}const{getDeliveryMessageText:dt,getDeliveryMethodText:ct,getConfirmingText:ut,getConfirmText:mt,getResendCodeText:pt}=n.authenticatorTextUtil;function ft({className:e,variation:a}){const{isPending:t,resendCode:n,codeDeliveryDetails:r}=s.useAuthenticator((e=>[e.isPending,e.resendCode,e.codeDeliveryDetails])),{handleChange:o,handleSubmit:i}=st(),{components:{ConfirmSignUp:{Header:d=ft.Header,Footer:c=ft.Footer}}}=tt();return N.default.createElement(lt,{className:e,variation:a},N.default.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-confirmsignup":"",method:"post",onChange:o,onSubmit:i},N.default.createElement(l.Flex,{as:"fieldset",direction:"column",isDisabled:t},N.default.createElement(d,null),N.default.createElement(l.Flex,{direction:"column"},N.default.createElement(l.Text,{className:"amplify-authenticator__subtitle"},dt(r)),N.default.createElement(it,null),N.default.createElement(rt,null),N.default.createElement(l.Button,{variation:"primary",isDisabled:t,type:"submit",loadingText:ut(),isLoading:t,fontWeight:"normal"},mt()),N.default.createElement(l.Button,{onClick:n,type:"button",fontWeight:"normal"},pt())),N.default.createElement(c,null))))}ft.Header=()=>{const{codeDeliveryDetails:e}=s.useAuthenticator((e=>[e.codeDeliveryDetails]));return N.default.createElement(Le,{level:4},ct(e))},ft.Footer=function(){return null};const{getChangePasswordText:Ct,getChangingText:gt,getBackToSignInText:ht}=n.authenticatorTextUtil,bt=({className:e,variation:a})=>{const{isPending:t,toSignIn:n}=s.useAuthenticator((e=>[e.isPending,e.toSignIn])),{handleBlur:r,handleChange:o,handleSubmit:i}=st(),{components:{ForceNewPassword:{FormFields:d=bt.FormFields,Header:c=bt.Header,Footer:u=bt.Footer}}}=tt();return N.default.createElement(lt,{className:e,variation:a},N.default.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-forcenewpassword":"",method:"post",onChange:o,onSubmit:i,onBlur:r},N.default.createElement(l.Flex,{as:"fieldset",direction:"column",isDisabled:t},N.default.createElement(c,null),N.default.createElement(d,null),N.default.createElement(rt,null),N.default.createElement(l.Button,{isDisabled:t,type:"submit",variation:"primary",isLoading:t,loadingText:gt(),fontWeight:"normal"},Ct()),N.default.createElement(l.Button,{onClick:n,type:"button",fontWeight:"normal",variation:"link",size:"small"},ht()),N.default.createElement(u,null))))};bt.FormFields=function(){return N.default.createElement(it,null)},bt.Header=function(){return N.default.createElement(Le,{level:4},Ct())},bt.Footer=function(){return null};const{getConfirmText:Nt,getConfirmingText:Et,getBackToSignInText:vt}=n.authenticatorTextUtil,Ft=()=>{const{isPending:e,toSignIn:a}=s.useAuthenticator((e=>[e.isPending,e.toSignIn]));return N.default.createElement(l.Flex,{direction:"column"},N.default.createElement(l.Button,{isDisabled:e,type:"submit",variation:"primary",fontWeight:"normal",isLoading:e,loadingText:Et()},Nt()),N.default.createElement(l.Button,{onClick:a,type:"button",variation:"link",fontWeight:"normal",size:"small"},vt()))},yt=new t.Logger("SetupTOTP-logger"),{getSetupTOTPText:wt,getCopiedText:xt,getLoadingText:St}=n.authenticatorTextUtil,It=({className:e,variation:a})=>{var t;const{totpSecretCode:r,isPending:i,user:d,QRFields:c}=s.useAuthenticator((e=>[e.isPending,e.totpSecretCode])),{handleChange:u,handleSubmit:m}=st(),{components:{SetupTOTP:{Header:p=It.Header,Footer:f=It.Footer}}}=tt(),[C,g]=b.useState(!0),[h,N]=b.useState(),[E,v]=b.useState("COPY"),{totpIssuer:F="AWSCognito",totpUsername:y=(null==d?void 0:d.username)}=null!==(t=c)&&void 0!==t?t:{},w=b.useCallback((()=>o.__awaiter(void 0,void 0,void 0,(function*(){try{const e=n.getTotpCodeURL(F,y,r),a=yield I.default.toDataURL(e);N(a)}catch(e){yt.error(e)}finally{g(!1)}}))),[F,y,r]);b.useEffect((()=>{h||w()}),[w,h]);return b.createElement(lt,{className:e,variation:a},b.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-setup-totp":"",method:"post",onChange:u,onSubmit:m},b.createElement(l.Flex,{as:"fieldset",direction:"column",isDisabled:i},b.createElement(p,null),b.createElement(l.Flex,{direction:"column"},C?b.createElement("p",null,St(),"…"):b.createElement("img",{"data-amplify-qrcode":!0,src:h,alt:"qr code",width:"228",height:"228"}),b.createElement(l.Flex,{"data-amplify-copy":!0},b.createElement("div",null,r),b.createElement(l.Flex,{"data-amplify-copy-svg":!0,onClick:()=>{navigator.clipboard.writeText(r),v(xt())}},b.createElement("div",{"data-amplify-copy-tooltip":!0},E),b.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},b.createElement("path",{d:"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM15 5H8C6.9 5 6.01 5.9 6.01 7L6 21C6 22.1 6.89 23 7.99 23H19C20.1 23 21 22.1 21 21V11L15 5ZM8 21V7H14V12H19V21H8Z"})))),b.createElement(it,null),b.createElement(rt,null)),b.createElement(Ft,null),b.createElement(f,null))))};It.Header=function(){return b.createElement(Le,{level:3},wt())},It.Footer=function(){return null};const{getSubmitText:Tt,getSubmittingText:Pt}=n.authenticatorTextUtil,Dt=e=>{const{cancelButtonSendType:a,cancelButtonText:t,submitButtonText:n}=e,{isPending:r,resendCode:o,skipVerification:i,toSignIn:d}=s.useAuthenticator((e=>[e.isPending])),c=r?N.default.createElement(N.default.Fragment,null,Pt(),"…"):N.default.createElement(N.default.Fragment,null,Tt()),u=null!=n?n:c;return N.default.createElement(l.Flex,{direction:"column"},N.default.createElement(l.Button,{fontWeight:"normal",variation:"primary",isDisabled:r,type:"submit"},u),N.default.createElement(l.Button,{onClick:()=>{switch(a){case"SKIP":i();break;case"RESEND":o();break;case"SIGN_IN":d();break;default:return}},type:"button",variation:"link",fontWeight:"normal",size:"small"},t))},kt=()=>N.default.createElement("svg",{"aria-label":"Apple icon",className:"amplify-icon federated-sign-in-icon",fill:"#000",preserveAspectRatio:"xMidYMid",stroke:"#000",strokeWidth:"0",viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"},N.default.createElement("path",{d:"M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-105.1-305c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z"})),Mt=()=>N.default.createElement("svg",{"aria-label":"Google icon",className:"amplify-icon federated-sign-in-icon",viewBox:"0 0 256 262",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid"},N.default.createElement("path",{d:"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027",fill:"#4285F4"}),N.default.createElement("path",{d:"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1",fill:"#34A853"}),N.default.createElement("path",{d:"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782",fill:"#FBBC05"}),N.default.createElement("path",{d:"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251",fill:"#EB4335"})),Ot=()=>N.default.createElement(l.Icon,{className:"federated-sign-in-icon",ariaLabel:"Facebook icon",viewBox:{minX:0,minY:0,width:279,height:538},pathData:"M82.3409742,538 L82.3409742,292.936652 L0,292.936652 L0,196.990154 L82.2410458,196.990154 L82.2410458,126.4295 C82.2410458,44.575144 132.205229,0 205.252865,0 C240.227794,0 270.306232,2.59855099 279,3.79788222 L279,89.2502322 L228.536175,89.2502322 C188.964542,89.2502322 181.270057,108.139699 181.270057,135.824262 L181.270057,196.89021 L276.202006,196.89021 L263.810888,292.836708 L181.16913,292.836708 L181.16913,538 L82.3409742,538 Z",fill:"#1877F2"}),Rt=()=>N.default.createElement("svg",{"aria-label":"Amazon icon",className:"amplify-icon federated-sign-in-icon",viewBox:"0 0 243 264",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid"},N.default.createElement("path",{d:"M230.826 208.039C227.468 203.683 208.551 205.982 200.056 206.998C197.471 207.321 197.076 205.042 199.407 203.405C214.475 192.665 239.201 195.766 242.082 199.364C244.966 202.982 241.337 228.071 227.173 240.049C225.001 241.888 222.93 240.904 223.898 238.468C227.077 230.431 234.205 212.419 230.826 208.039ZM123.769 264C71.0234 264 39.0764 241.955 14.7853 217.542C9.97339 212.706 3.71799 206.296 0.311513 200.691C-1.09773 198.372 2.59096 195.022 5.04421 196.844C35.239 219.268 79.1012 239.538 122.53 239.538C151.82 239.538 188.046 227.47 217.669 214.868C222.147 212.966 222.147 219.18 221.512 221.061C221.183 222.032 206.515 236.221 186.247 247.047C167.304 257.166 143.397 264 123.769 264Z",fill:"#F2541B"}),N.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M142.943 111.185C142.943 124.756 143.268 136.054 136.406 148.123C130.856 157.913 122.027 163.95 112.222 163.95C98.8288 163.95 90.9806 153.772 90.9806 138.693C90.9806 109.036 117.677 103.647 142.943 103.647V111.185ZM178.166 196.081C175.858 198.15 171.635 198.22 169.914 196.894C157.974 187.684 149.89 173.688 149.89 173.688C130.706 193.156 117.127 199 92.2879 199C62.8772 199 40 180.905 40 144.729C40 116.461 55.3552 97.2408 77.2563 87.823C96.2094 79.5256 122.684 78.0173 142.943 75.7517C142.943 75.7517 144.633 53.933 138.699 45.9806C134.098 39.8163 126.272 36.9329 119.089 36.9329C106.127 36.8829 93.61 43.9051 91.1262 57.4188C90.4136 61.2829 87.5533 64.5261 84.54 64.206L51.0823 60.5922C48.5156 60.2951 45.0381 57.6639 45.8636 53.3081C53.644 12.3684 90.7373 0 123.989 0C140.983 0 163.21 4.51651 176.608 17.3349C193.597 33.1648 191.969 54.2755 191.969 77.2722V131.51C191.969 147.835 198.768 154.987 205.151 163.775C207.376 166.953 207.886 170.714 205.04 173.032C197.902 178.999 178.166 196.081 178.166 196.081Z",fill:"#F2541B"})),Bt=e=>{const{icon:a,provider:t,text:n}=e,{toFederatedSignIn:r}=s.useAuthenticator();let o;return"facebook"===a?o=N.default.createElement(Ot,null):"google"===a?o=N.default.createElement(Mt,null):"amazon"===a?o=N.default.createElement(Rt,null):"apple"===a&&(o=N.default.createElement(kt,null)),N.default.createElement(l.Button,{onClick:e=>{e.preventDefault(),r({provider:t})},className:"federated-sign-in-button",fontWeight:"normal",gap:"1rem"},o,N.default.createElement(l.Text,{as:"span"},n))},{getSignInWithFederationText:Lt,getOrText:Vt}=n.authenticatorTextUtil;function _t(){const{route:e,socialProviders:a}=s.useAuthenticator((({route:e,socialProviders:a})=>[e,a]));return 0===a.length?null:N.default.createElement(l.Flex,{direction:"column",padding:"0 0 1rem 0",className:"federated-sign-in-container"},a.map((a=>{switch(a){case"amazon":return N.default.createElement(Bt,{icon:"amazon",key:a,provider:n.FederatedIdentityProviders.Amazon,text:Lt(e,a)});case"apple":return N.default.createElement(Bt,{icon:"apple",key:a,provider:n.FederatedIdentityProviders.Apple,text:Lt(e,a)});case"facebook":return N.default.createElement(Bt,{icon:"facebook",key:a,provider:n.FederatedIdentityProviders.Facebook,text:Lt(e,a)});case"google":return N.default.createElement(Bt,{icon:"google",key:a,provider:n.FederatedIdentityProviders.Google,text:Lt(e,a)});default:console.error(`Authenticator does not support ${a}. Please open an issue: https://github.com/aws-amplify/amplify-ui/issues/choose`)}})),N.default.createElement(ve,{size:"small",label:Vt()}))}const{getSignInText:jt,getSigningInText:At,getForgotPasswordText:Ht}=n.authenticatorTextUtil;function zt(){const{isPending:e}=s.useAuthenticator((e=>[e.isPending])),{handleChange:a,handleSubmit:t}=st(),{components:{SignIn:{Header:n=zt.Header,Footer:r=zt.Footer}}}=tt();return N.default.createElement(l.View,null,N.default.createElement(n,null),N.default.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-signin":"",method:"post",onSubmit:t,onChange:a},N.default.createElement(_t,null),N.default.createElement(l.Flex,{direction:"column"},N.default.createElement(l.Flex,{as:"fieldset",direction:"column",isDisabled:e},N.default.createElement(re,null,N.default.createElement("legend",null,jt())),N.default.createElement(it,null)),N.default.createElement(rt,null),N.default.createElement(l.Button,{isDisabled:e,isFullWidth:!0,type:"submit",variation:"primary",isLoading:e,loadingText:At()},jt()))),N.default.createElement(r,null))}zt.Footer=()=>{const{toResetPassword:e}=s.useAuthenticator((e=>[e.toResetPassword]));return N.default.createElement(l.View,{"data-amplify-footer":""},N.default.createElement(l.Button,{fontWeight:"normal",onClick:e,size:"small",variation:"link"},Ht()))},zt.Header=function(){return null};const{getCreateAccountText:Ut,getCreatingAccountText:Gt}=n.authenticatorTextUtil;function qt(){const{hasValidationErrors:e,isPending:a}=s.useAuthenticator((e=>[e.hasValidationErrors,e.isPending])),{handleChange:t,handleBlur:n,handleSubmit:r}=st(),{components:{SignUp:{Header:o=qt.Header,FormFields:i=qt.FormFields,Footer:d=qt.Footer}}}=tt();return N.default.createElement(l.View,null,N.default.createElement(o,null),N.default.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-signup":"",method:"post",onChange:t,onSubmit:r,onBlur:n},N.default.createElement(_t,null),N.default.createElement(l.Flex,{as:"fieldset",direction:"column",isDisabled:a},N.default.createElement(l.Flex,{direction:"column"},N.default.createElement(i,null),N.default.createElement(rt,null)),N.default.createElement(l.Button,{isDisabled:e||a,isFullWidth:!0,type:"submit",variation:"primary",isLoading:a,loadingText:Gt()},Ut()))),N.default.createElement(d,null))}qt.Header=function(){return null},qt.FormFields=function(){return N.default.createElement(it,null)},qt.Footer=function(){return null};const{getSignInTabText:Wt,getSignUpTabText:$t}=n.authenticatorTextUtil,Zt=({className:e,hideSignUp:a,variation:t})=>{const{route:n,toSignIn:r,toSignUp:o}=s.useAuthenticator((e=>[e.route,e.toSignIn,e.toSignUp]));return N.default.createElement(lt,{className:e,variation:t},a?N.default.createElement(l.View,{"data-amplify-router-content":""},"signIn"===n&&N.default.createElement(zt,null)):N.default.createElement(La,{indicatorPosition:"top",currentIndex:"signIn"===n?0:1,spacing:"equal",justifyContent:"center",onChange:()=>"signIn"===n?o():r()},N.default.createElement(Va,{title:Wt()},N.default.createElement(l.View,{"data-amplify-router-content":""},"signIn"===n&&N.default.createElement(zt,null))),N.default.createElement(Va,{title:$t()},N.default.createElement(l.View,{"data-amplify-router-content":""},"signUp"===n&&N.default.createElement(qt,null)))))},{getAccountRecoveryInfoText:Kt,getSkipText:Yt}=n.authenticatorTextUtil,Xt=({className:e,variation:a})=>{const{isPending:t}=s.useAuthenticator((e=>[e.isPending])),{handleChange:n,handleSubmit:r}=st(),{components:{ConfirmVerifyUser:{Header:o=Xt.Header,Footer:i=Xt.Footer}}}=tt();return N.default.createElement(lt,{className:e,variation:a},N.default.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-confirmverifyuser":"",method:"post",onChange:n,onSubmit:r},N.default.createElement(l.Flex,{as:"fieldset",direction:"column",isDisabled:t},N.default.createElement(o,null),N.default.createElement(l.Flex,{direction:"column"},N.default.createElement(it,null)),N.default.createElement(rt,null),N.default.createElement(Dt,{cancelButtonText:Yt(),cancelButtonSendType:"SKIP"}),N.default.createElement(i,null))))};Xt.Header=function(){return N.default.createElement(Le,{level:3},Kt())},Xt.Footer=function(){return null};const{getSkipText:Qt,getVerifyText:Jt,getVerifyContactText:en,getAccountRecoveryInfoText:an}=n.authenticatorTextUtil,tn=e=>Object.entries(e).map((([e,a])=>N.default.createElement(ca,{name:"unverifiedAttr",value:e,key:e},((e,a)=>{const t=n.translate(e);let l=a;if("Phone Number"===e)l=n.censorPhoneNumber(a);else if("Email"===e){const e=a.split("@");l=`${n.censorAllButFirstAndLast(e[0])}@${e[1]}`}return`${t}: ${l}`})(n.defaultFormFieldOptions[e].label,a)))),nn=({className:e,variation:a})=>{const{components:{VerifyUser:{Header:t=nn.Header,Footer:n=nn.Footer}}}=tt(),{isPending:r,unverifiedContactMethods:o}=s.useAuthenticator((({isPending:e,unverifiedContactMethods:a})=>[e,a])),{handleChange:i,handleSubmit:d}=st(),c=r?N.default.createElement(N.default.Fragment,null,"Verifying…"):N.default.createElement(N.default.Fragment,null,Jt()),u=N.default.createElement(ua,{label:en(),labelHidden:!0,name:"verify_context",isDisabled:r},tn(o));return N.default.createElement(lt,{className:e,variation:a},N.default.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-verifyuser":"",method:"post",onChange:i,onSubmit:d},N.default.createElement(l.Flex,{as:"fieldset",direction:"column",isDisabled:r},N.default.createElement(t,null),u,N.default.createElement(rt,null),N.default.createElement(Dt,{cancelButtonText:Qt(),cancelButtonSendType:"SKIP",submitButtonText:c}),N.default.createElement(n,null))))};nn.Header=function(){return N.default.createElement(Le,{level:3},an())},nn.Footer=function(){return null};const{getChallengeText:ln}=n.authenticatorTextUtil,sn=({className:e,variation:a})=>{const{isPending:t}=s.useAuthenticator((e=>[e.isPending])),{handleChange:n,handleSubmit:r}=st(),{components:{ConfirmSignIn:{Header:o=sn.Header,Footer:i=sn.Footer}}}=tt();return N.default.createElement(lt,{className:e,variation:a},N.default.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-confirmsignin":"",method:"post",onChange:n,onSubmit:r},N.default.createElement(l.Flex,{as:"fieldset",direction:"column",isDisabled:t},N.default.createElement(o,null),N.default.createElement(l.Flex,{direction:"column"},N.default.createElement(it,null),N.default.createElement(rt,null)),N.default.createElement(Ft,null),N.default.createElement(i,null))))};sn.Header=function(){const{user:{challengeName:e}}=s.useAuthenticator((({user:e})=>[e]));return N.default.createElement(Le,{level:3},ln(e))},sn.Footer=function(){return null};const{getResendCodeText:rn,getResetYourPasswordText:on}=n.authenticatorTextUtil,dn=({className:e,variation:a})=>{const{isPending:t}=s.useAuthenticator((e=>[e.isPending])),{handleBlur:n,handleChange:r,handleSubmit:o}=st(),{components:{ConfirmResetPassword:{Header:i=dn.Header,Footer:d=dn.Footer}}}=tt();return N.default.createElement(lt,{className:e,variation:a},N.default.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-confirmresetpassword":"",method:"post",onSubmit:o,onChange:r,onBlur:n},N.default.createElement(l.Flex,{as:"fieldset",direction:"column",isDisabled:t},N.default.createElement(i,null),N.default.createElement(l.Flex,{direction:"column"},N.default.createElement(it,null)),N.default.createElement(rt,null),N.default.createElement(Dt,{cancelButtonSendType:"RESEND",cancelButtonText:rn()}),N.default.createElement(d,null))))};dn.Header=function(){const e=on();return N.default.createElement(Le,{level:3},e)},dn.Footer=function(){return null};const{getBackToSignInText:cn,getSendingText:un,getSendCodeText:mn,getResetYourPasswordText:pn}=n.authenticatorTextUtil,fn=({className:e,variation:a})=>{const{isPending:t}=s.useAuthenticator((e=>[e.isPending])),{handleChange:n,handleSubmit:r}=st(),{components:{ResetPassword:{Header:o=fn.Header,Footer:i=fn.Footer}}}=tt();return N.default.createElement(lt,{className:e,variation:a},N.default.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-resetpassword":"",method:"post",onChange:n,onSubmit:r},N.default.createElement(l.Flex,{as:"fieldset",direction:"column",isDisabled:t},N.default.createElement(o,null),N.default.createElement(l.Flex,{direction:"column"},N.default.createElement(it,null)),N.default.createElement(rt,null),N.default.createElement(Dt,{cancelButtonText:cn(),cancelButtonSendType:"SIGN_IN",submitButtonText:t?N.default.createElement(N.default.Fragment,null,un(),"…"):N.default.createElement(N.default.Fragment,null,mn())}),N.default.createElement(i,null))))};fn.Header=function(){return N.default.createElement(Le,{level:3},pn())},fn.Footer=function(){return null};const Cn=e=>"signIn"===e||"signUp"===e;function gn(){return null}const hn=e=>{switch(e){case"authenticated":case"idle":case"setup":case"transition":return gn;case"confirmSignUp":return ft;case"confirmSignIn":return sn;case"setupTOTP":return It;case"signIn":case"signUp":return Zt;case"forceNewPassword":return bt;case"resetPassword":return fn;case"confirmResetPassword":return dn;case"verifyUser":return nn;case"confirmVerifyUser":return Xt;default:return console.warn(`Unhandled Authenticator route - please open an issue: ${e}`),gn}};function bn({className:a,hideSignUp:t,variation:n}){const{route:l}=s.useAuthenticator((({route:e})=>[e])),r=e.useMemo((()=>hn(l)),[l]);return N.default.createElement(r,{className:a,hideSignUp:Cn(l)?t:void 0,variation:n})}const Nn={Header:()=>null,SignIn:{Header:zt.Header,Footer:zt.Footer},SignUp:{Header:qt.Header,FormFields:qt.FormFields,Footer:qt.Footer},ConfirmSignUp:{Header:ft.Header,Footer:ft.Footer},SetupTOTP:{Header:It.Header,Footer:It.Footer},ConfirmResetPassword:{Header:dn.Header,Footer:dn.Footer},ConfirmSignIn:{Header:sn.Header,Footer:sn.Footer},VerifyUser:{Header:nn.Header,Footer:nn.Footer},ConfirmVerifyUser:{Header:Xt.Header,Footer:Xt.Footer},ForceNewPassword:{Header:bt.Header,Footer:bt.Footer,FormFields:bt.FormFields},ResetPassword:{Header:fn.Header,Footer:fn.Footer},Footer:()=>null};function En({children:e,className:a,components:t,formFields:l,hideSignUp:r,initialState:o,loginMechanisms:i,passwordSettings:d,signUpAttributes:c,services:u,socialProviders:m,variation:p}){Se({message:"The `passwordSettings` prop has been deprecated and will be removed in a future major version of Amplify UI.",shouldWarn:!!d});const{route:f,signOut:C,user:g}=s.useAuthenticator((({route:e,signOut:a,user:t})=>[e,a,t]));s.useAuthenticatorInitMachine({initialState:o,loginMechanisms:i,services:u,signUpAttributes:c,socialProviders:m,formFields:l});const h=b.useMemo((()=>({components:Object.assign(Object.assign({},Nn),t)})),[t]);return"authenticated"===f||"signOut"===f?e?b.createElement(b.Fragment,null,n.isFunction(e)?e({signOut:C,user:g}):e):null:b.createElement(at.Provider,{value:h},b.createElement(bn,{className:a,hideSignUp:r,variation:p}))}function vn(e){return b.useEffect((()=>{n.configureComponent({packageName:"@aws-amplify/ui-react",version:et})}),[]),b.createElement(s.AuthenticatorProvider,null,b.createElement(En,Object.assign({},e)))}function Fn(e,a={}){const{variation:t="modal"}=a;return function(n){return N.default.createElement(vn,Object.assign({variation:t},a),(a=>N.default.createElement(e,Object.assign({},n,a))))}}var yn;function wn({aggregatePercentage:e,children:a,dropZone:t,fileStatuses:s,isLoading:r,isSuccessful:o,hasMaxFilesError:i,maxFileCount:d,onClear:c,onFileClick:u}){const m=`${n.translate("Cannot choose more than")} ${d}`,p=()=>s.filter((e=>(null==e?void 0:e.fileState)===yn.SUCCESS)).length,f=s.length-p(),C=`${f} ${1===f?n.translate("file"):n.translate("files")}`,g=`${p()} ${1===p()?n.translate("file uploaded"):n.translate("files uploaded")}`,h=s.some((e=>[yn.ERROR,yn.EDITING].includes(null==e?void 0:e.fileState)))||0===f||i;return N.default.createElement(l.View,{className:l.ComponentClassNames.FileUploaderPreviewer},N.default.createElement(l.View,{className:l.ComponentClassNames.FileUploaderPreviewerBody},t,N.default.createElement(l.Text,{className:l.ComponentClassNames.FileUploaderPreviewerText},o?g:N.default.createElement(N.default.Fragment,null,`${C} ${n.translate("selected")}`)),a),N.default.createElement(l.View,{className:l.ComponentClassNames.FileUploaderPreviewerFooter},N.default.createElement(l.View,null,r&&N.default.createElement(N.default.Fragment,null,N.default.createElement(l.Text,null,n.translate("Uploading"),e>0?`: ${e}%`:""),N.default.createElement(l.Loader,{className:l.ComponentClassNames.FileUploaderLoader,variation:"linear",percentage:e,isPercentageTextHidden:!0,isDeterminate:!0}))),N.default.createElement(l.View,{className:n.ComponentClassName.FileUploaderPreviewerFooterActions},!r&&!o&&N.default.createElement(N.default.Fragment,null,N.default.createElement(l.Button,{size:"small",variation:"link",onClick:c},n.translate("Clear all")),N.default.createElement(l.Button,{disabled:h,size:"small",variation:"primary",onClick:u},`${n.translate("Upload")} ${C}`)),o&&N.default.createElement(l.Button,{size:"small",onClick:c},n.translate("Done")))),i&&N.default.createElement(D,{variation:"error",heading:m}))}function xn({children:e,inDropZone:a,onDragStart:t,onDragEnter:s,onDragLeave:r,onDrop:o,onDragOver:i}){return N.default.createElement(l.View,{className:v.default(a&&n.classNameModifier(l.ComponentClassNames.FileUploaderDropZone,"active"),l.ComponentClassNames.FileUploaderDropZone),onDragStart:t,onDragEnter:s,onDragLeave:r,onDrop:o,onDragOver:i},N.default.createElement(l.IconUpload,{"aria-hidden":!0,className:l.ComponentClassNames.FileUploaderDropZoneIcon}),N.default.createElement(l.Text,{className:l.ComponentClassNames.FileUploaderDropZoneText},n.translate("Drop files here or")),e)}vn.Provider=s.AuthenticatorProvider,vn.ResetPassword=fn,vn.SetupTOTP=It,vn.SignIn=zt,vn.SignUp=qt,vn.ForceNewPassword=bt,function(e){e.PAUSED="paused",e.SUCCESS="success",e.ERROR="error",e.LOADING="loading",e.RESUME="resume",e.EDITING="editing",e.INIT="init"}(yn||(yn={}));const Sn=({fileState:e,errorMessage:a,percentage:t})=>{switch(e){case yn.LOADING:{const e=t&&t>0?`${n.translate("Uploading")}: ${t}%`:n.translate("Uploading");return N.default.createElement(l.Text,{className:l.ComponentClassNames.FileUploaderFileStatus},e)}case yn.PAUSED:return N.default.createElement(l.Text,{className:l.ComponentClassNames.FileUploaderFileStatus},n.translate("Paused"),": ",t,"%");case yn.SUCCESS:return N.default.createElement(l.Text,{className:v.default(l.ComponentClassNames.FileUploaderFileStatus,n.classNameModifier(l.ComponentClassNames.FileUploaderFileStatus,"success"))},N.default.createElement(l.IconCheck,{fontSize:"xl"})," ",n.translate("Uploaded successfully"));case yn.ERROR:return N.default.createElement(l.Text,{className:v.default(l.ComponentClassNames.FileUploaderFileStatus,n.classNameModifier(l.ComponentClassNames.FileUploaderFileStatus,"error"))},N.default.createElement(l.IconError,{fontSize:"xl"})," ",a);default:return null}};function In({errorMessage:a,file:t,fileState:s,hasImage:r,name:o,onCancel:i,onCancelEdit:d,onPause:c,onResume:u,onSaveEdit:m,onStartEdit:p,percentage:f,isResumable:C,showImage:g}){const[h,b]=N.default.useState(o),E=N.default.useRef(null),v=URL.createObjectURL(t);N.default.useEffect((()=>{s===yn.EDITING&&E.current&&E.current.focus()}),[s]);const{size:F}=t,y=r?N.default.createElement(Ve,{alt:t.name,src:v}):N.default.createElement(l.IconFile,null),w=!C||f>0,x=s===yn.INIT||s===yn.ERROR&&a===n.translate("Extension not allowed"),S=e.useCallback((()=>N.default.createElement(N.default.Fragment,null,N.default.createElement(l.View,{className:l.ComponentClassNames.FileUploaderFileMain},N.default.createElement(l.Text,{className:l.ComponentClassNames.FileUploaderFileName},o)),x?N.default.createElement(l.Button,{onClick:p,size:"small",variation:"link"},N.default.createElement(re,null,"Edit file name ",t.name),N.default.createElement(l.IconEdit,{"aria-hidden":!0,fontSize:"medium"})):null,N.default.createElement(l.Text,{as:"span",className:l.ComponentClassNames.FileUploaderFileSize},n.humanFileSize(F,!0)))),[t.name,o,p,x,F]),I=e.useCallback((()=>{switch(s){case yn.EDITING:return N.default.createElement(N.default.Fragment,null,N.default.createElement(l.Button,{size:"small",onClick:()=>{b(o),null==d||d()}},"Cancel"),N.default.createElement(l.Button,{size:"small",variation:"primary",onClick:()=>{m(h)}},"Save"));case yn.RESUME:case yn.LOADING:return C?N.default.createElement(l.Button,{onClick:c,size:"small",variation:"link"},n.translate("pause")):null;case yn.PAUSED:return N.default.createElement(l.Button,{onClick:u,size:"small",variation:"link"},n.translate("Resume"));case yn.SUCCESS:return null;default:return N.default.createElement(l.Button,{size:"small",onClick:i},N.default.createElement(re,null,"Remove file name ",t.name),N.default.createElement(l.IconClose,{"aria-hidden":!0,fontSize:"medium"}))}}),[t.name,s,C,o,i,d,c,u,m,h]);return t?N.default.createElement(l.View,{className:l.ComponentClassNames.FileUploaderFile},N.default.createElement(l.View,{className:l.ComponentClassNames.FileUploaderFileWrapper},g?N.default.createElement(l.View,{className:l.ComponentClassNames.FileUploaderFileImage},y):null,s===yn.EDITING?N.default.createElement(l.View,{as:"form",flex:"1",onSubmit:()=>{m(h)}},N.default.createElement(W,{maxLength:1024,ref:E,label:"file name",size:"small",variation:"quiet",labelHidden:!0,onChange:e=>{b(e.target.value)},value:h})):N.default.createElement(S,null),N.default.createElement(I,null),s===yn.LOADING?N.default.createElement(l.Loader,{className:l.ComponentClassNames.FileUploaderLoader,variation:"linear",percentage:f,isDeterminate:w,isPercentageTextHidden:!0}):null),N.default.createElement(Sn,{fileState:s,errorMessage:a,percentage:f})):null}const Tn=e=>"function"==typeof(null==e?void 0:e.resume),Pn=new t.Logger("AmplifyUI:Storage");function Dn(a){var{acceptedFileTypes:t,shouldAutoProceed:s=!1,isPreviewerVisible:i,maxFileCount:d,maxSize:c,hasMultipleFiles:u=!0,onError:m,onSuccess:p,showImages:f=!0,accessLevel:C,variation:g="drop",isResumable:h=!1}=a,b=o.__rest(a,["acceptedFileTypes","shouldAutoProceed","isPreviewerVisible","maxFileCount","maxSize","hasMultipleFiles","onError","onSuccess","showImages","accessLevel","variation","isResumable"]);Se({shouldWarn:!0,message:"FileUploader has exited Dev Preview and was renamed to StorageManager with some API changes. Please migrate to the StorageManager component, as the FileUploader component is no longer supported and will be removed in a future major release. https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager"}),t&&C||Pn.warn("FileUploader requires accessLevel and acceptedFileTypes props");const[E,v]=e.useState(!1),[F,y]=e.useState(!1),w=function({maxSize:a,acceptedFileTypes:t,hasMultipleFiles:l,isLoading:s,setAutoLoad:r}){const[o,i]=e.useState([]),[d,c]=e.useState(!1),[u,m]=e.useState(!1),p=(e,t)=>{const l=[...t];[...e].forEach((e=>{const t=n.checkMaxSize(a,e);l.unshift({fileState:t?yn.ERROR:yn.INIT,fileErrors:t,file:e,name:e.name})})),i(l)},f=e=>{const a=n.returnAcceptedFiles([...e],t);return a?!l&&o.length>0?o.length:l||1!=a.length?!l&&a.length>1?(p([a[0]],o),1):a.length>0?(p([...a],o),a.length+o.length):0:(p([...a],o),a.length):0};return{inDropZone:u,onDragEnter:e=>{e.preventDefault(),e.stopPropagation()},onDragLeave:e=>{if(e.preventDefault(),e.stopPropagation(),s)return!1;m(!1)},onDragOver:e=>{if(e.preventDefault(),e.stopPropagation(),s)return!1;m(!0),e.dataTransfer.dropEffect="copy"},onDragStart:e=>{e.dataTransfer.clearData()},onDrop:e=>{if(e.preventDefault(),e.stopPropagation(),s)return!1;const{files:a}=e.dataTransfer;f([...a])>0&&(c(!0),r(!0)),m(!1)},setInDropZone:m,setShowPreviewer:c,addTargetFiles:f,showPreviewer:d,fileStatuses:o,setFileStatuses:i}}({maxSize:c,acceptedFileTypes:t,hasMultipleFiles:u,isLoading:E,setAutoLoad:y}),{addTargetFiles:x,fileStatuses:S,inDropZone:I,setFileStatuses:T,setShowPreviewer:P,showPreviewer:D}=w,k=o.__rest(w,["addTargetFiles","fileStatuses","inDropZone","setFileStatuses","setShowPreviewer","showPreviewer"]),M=Math.floor(S.reduce(((e,a)=>{var t;return e+(null!==(t=null==a?void 0:a.percentage)&&void 0!==t?t:0)}),0)/S.length),O=0!==S.length&&S.every((e=>100===(null==e?void 0:e.percentage))),R=S.filter((e=>100!==e.percentage)).length>d;e.useEffect((()=>{100===Math.floor(M)&&v(!1)}),[M]),e.useEffect((()=>{P(i)}),[P,i]);const B=e.useCallback((e=>a=>{T((t=>{const n=Object.assign({},t[e]),l=0!==a.total?Math.floor(a.loaded/a.total*100):100,s=100!==l?yn.LOADING:yn.SUCCESS,r=Object.assign(Object.assign({},n),{percentage:l,fileState:s});return t[e]=r,[...t]}))}),[T]),L=e.useCallback((e=>a=>{T((t=>{const l=Object.assign({},t[e]),s=Object.assign(Object.assign({},l),{fileState:"error",fileErrors:n.translate(a.toString())});return t[e]=s,[...t]})),v(!1),"function"==typeof m&&m(a)}),[m,T]),V=e.useCallback((e=>function(){const a=S[e];Tn(a.uploadTask)&&a.uploadTask.pause();const t=[...S];t[e]=Object.assign(Object.assign({},a),{fileState:yn.PAUSED}),T(t)}),[S,T]),_=e.useCallback((e=>function(){const a=S[e];Tn(a.uploadTask)&&a.uploadTask.resume();const t=[...S];t[e]=Object.assign(Object.assign({},a),{fileState:yn.RESUME}),T(t)}),[S,T]),j=e.useCallback((()=>{v(!0);const e=[];S.forEach(((a,t)=>{if((null==a?void 0:a.fileState)===yn.SUCCESS)return;const l=n.uploadFile(Object.assign({file:a.file,fileName:a.name,level:C,isResumable:h,progressCallback:B(t),errorCallback:L(t),completeCallback:p},b));Tn(l)&&h&&e.push(l)})),T((a=>a.map(((a,t)=>{var n;return Object.assign(Object.assign({},a),{uploadTask:null==e?void 0:e[t],fileState:a.fileState===yn.INIT?yn.LOADING:a.fileState,percentage:null!==(n=a.percentage)&&void 0!==n?n:0})}))))}),[S,T,C,h,B,L,p,b]),A=e.useCallback((e=>{if(!e.target.files||0===e.target.files.length)return;const{files:a}=e.target;x([...a])>0&&(P(!0),y(!0))}),[x,P]),H=e.useCallback((()=>{P(!1),T([])}),[T,P]),z=e.useCallback((e=>()=>{const{fileState:a,uploadTask:t}=S[e];"loading"===a&&Tn(t)&&(r.Storage.cancel(t),v(!1));const n=S.filter(((a,t)=>t!==e));T(n)}),[S,T]),U=e.useCallback((e=>a=>{if(0===a.trim().length)return;const t=[...S],l=S[e],s=n.isValidExtension(a,l.file.name);t[e]=Object.assign(Object.assign({},l),{name:a,fileState:s?yn.INIT:yn.ERROR,fileErrors:s?void 0:n.translate("Extension not allowed")}),T(t)}),[S,T]),G=e.useCallback(((e,a)=>{T((t=>{const l=[...t],s=l[e],r=n.isValidExtension(s.name,s.file.name)?yn.INIT:yn.ERROR,o=a===yn.INIT?r:a;return l[e]=Object.assign(Object.assign({},s),{fileState:o}),l}))}),[T]),q=e.useCallback((e=>()=>{G(e,yn.INIT)}),[G]),W=e.useCallback((e=>a=>{G(e,yn.EDITING)}),[G]);e.useEffect((()=>{s&&F&&!R&&(j(),y(!1))}),[s,j,F,R]);const $=N.default.useRef(null),Z=null==t?void 0:t.join(),K=e.useMemo((()=>N.default.createElement(N.default.Fragment,null,N.default.createElement(l.Button,{className:l.ComponentClassNames.FileUploaderDropZoneButton,isDisabled:E,onClick:()=>{var e;null===(e=null==$?void 0:$.current)||void 0===e||e.click(),$.current.value=""},size:"small"},n.translate("Browse files")),N.default.createElement(re,null,N.default.createElement("input",{type:"file",tabIndex:-1,ref:$,onChange:A,multiple:u,accept:Z})))),[E,A,u,Z]);return D?N.default.createElement(wn,{dropZone:N.default.createElement(xn,Object.assign({},k,{inDropZone:I}),K),fileStatuses:S,isLoading:E,isSuccessful:O,hasMaxFilesError:R,maxFileCount:d,onClear:H,onFileClick:j,aggregatePercentage:M},null==S?void 0:S.map(((e,a)=>{var t;return N.default.createElement(In,{errorMessage:null==e?void 0:e.fileErrors,file:e.file,fileState:null==e?void 0:e.fileState,hasImage:null===(t=e.file)||void 0===t?void 0:t.type.startsWith("image/"),showImage:f,key:a,name:e.name,onCancel:z(a),onCancelEdit:q(a),onPause:V(a),onResume:_(a),onSaveEdit:U(a),onStartEdit:W(a),percentage:e.percentage,isResumable:h})}))):"button"===g?K:N.default.createElement(xn,Object.assign({},k,{inDropZone:I}),K)}const{DirectionProvider:kn}=n.sanitizeNamespaceImport(T);function Mn({children:e,colorMode:a,direction:t="ltr",nonce:s,theme:r}){const o=b.useMemo((()=>({theme:n.createTheme(r)})),[r]),{theme:{name:i,cssText:d}}=o;return b.createElement(l.AmplifyContext.Provider,{value:o},b.createElement(kn,{dir:t},b.createElement("div",{"data-amplify-theme":i,"data-amplify-color-mode":a,dir:t},e),void 0===r||/<\/style/i.test(d)?null:b.createElement("style",{id:`amplify-theme-${i}`,dangerouslySetInnerHTML:{__html:d},nonce:s})))}const On=Mn;var Rn=Object.freeze({__proto__:null,AccountSettings:Ja,Authenticator:vn,withAuthenticator:Fn,useAuthenticator:s.useAuthenticator,FileUploader:Dn,AmplifyProvider:Mn,ThemeProvider:On});Object.defineProperty(exports,"createTheme",{enumerable:!0,get:function(){return n.createTheme}}),Object.defineProperty(exports,"defaultDarkModeOverride",{enumerable:!0,get:function(){return n.defaultDarkModeOverride}}),Object.defineProperty(exports,"defaultTheme",{enumerable:!0,get:function(){return n.defaultTheme}}),Object.defineProperty(exports,"translations",{enumerable:!0,get:function(){return n.translations}}),exports.Button=l.Button,exports.ComponentClassNames=l.ComponentClassNames,exports.ComponentClassObject=l.ComponentClassObject,exports.ComponentPropsToStylePropsMap=l.ComponentPropsToStylePropsMap,exports.ComponentPropsToStylePropsMapKeys=l.ComponentPropsToStylePropsMapKeys,exports.FieldGroupIcon=l.FieldGroupIcon,exports.FieldGroupIconButton=l.FieldGroupIconButton,exports.Flex=l.Flex,exports.Icon=l.Icon,exports.Label=l.Label,exports.Loader=l.Loader,exports.Text=l.Text,exports.View=l.View,exports.useTheme=l.useTheme,Object.defineProperty(exports,"useAuthenticator",{enumerable:!0,get:function(){return s.useAuthenticator}}),exports.AccountSettings=Ja,exports.Alert=D,exports.AmplifyProvider=Mn,exports.Authenticator=vn,exports.Autocomplete=Y,exports.Badge=X,exports.Breadcrumbs=ne,exports.ButtonGroup=le,exports.Card=se,exports.CheckboxField=ie,exports.Collection=Ee,exports.Divider=ve,exports.DropZone=xe,exports.Expander=Te,exports.ExpanderItem=Oe,exports.Fieldset=Re,exports.FileUploader=Dn,exports.Grid=de,exports.Heading=Le,exports.HighlightMatch=A,exports.IconsProvider=P,exports.Image=Ve,exports.Input=G,exports.Link=J,exports.Menu=ze,exports.MenuButton=_e,exports.MenuItem=Ge,exports.Message=Qe,exports.Pagination=pe,exports.PasswordField=na,exports.PhoneNumberField=oa,exports.Placeholder=ia,exports.Radio=ca,exports.RadioGroupField=ua,exports.Rating=ga,exports.ScrollView=M,exports.SearchField=K,exports.SelectField=sa,exports.SliderField=va,exports.StepperField=ya,exports.SwitchField=wa,exports.TabItem=Va,exports.Table=xa,exports.TableBody=Sa,exports.TableCell=Ia,exports.TableFoot=Ta,exports.TableHead=Pa,exports.TableRow=Da,exports.Tabs=La,exports.TextAreaField=ja,exports.TextField=W,exports.ThemeProvider=On,exports.ToggleButton=Aa,exports.ToggleButtonGroup=Ha,exports.VisuallyHidden=re,exports.components=Rn,exports.primitives=Ua,exports.useAmplify=function(){const e=b.useContext(l.AmplifyContext);return{theme:l.getThemeFromContext(e)}},exports.useBreakpointValue=(e,a="base",t)=>{const{breakpoints:{values:s},tokens:r}=l.useTheme(),o=l.useBreakpoint({breakpoints:s,defaultBreakpoint:a}),i=l.getValueAtCurrentBreakpoint({breakpoint:o,breakpoints:s,values:e});return n.isDesignToken(i)||n.isString(i)?l.getStyleValue({value:i,propKey:t,tokens:r}):i},exports.usePagination=fe,exports.withAuthenticator=Fn;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var isEqual = require('lodash/isEqual.js');
+var uiReactCore = require('@aws-amplify/ui-react-core');
+var ui = require('@aws-amplify/ui');
+var Field = require('./Field-6c0e096a.js');
+require('aws-amplify/storage');
+var debounce = require('lodash/debounce.js');
+var Dropdown = require('@radix-ui/react-dropdown-menu');
+var RadixSlider = require('@radix-ui/react-slider');
+var QRCode = require('qrcode');
+var utils = require('aws-amplify/utils');
+var RadixDirection = require('@radix-ui/react-direction');
+require('@aws-amplify/core');
+require('aws-amplify/auth');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var Dropdown__namespace = /*#__PURE__*/_interopNamespace(Dropdown);
+var RadixSlider__namespace = /*#__PURE__*/_interopNamespace(RadixSlider);
+var QRCode__default = /*#__PURE__*/_interopDefaultLegacy(QRCode);
+var RadixDirection__namespace = /*#__PURE__*/_interopNamespace(RadixDirection);
+
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/theming/responsive#usebreakpointvalue)
+ */
+const useBreakpointValue = (values, defaultBreakpoint = 'base', propKey) => {
+    const { breakpoints: { values: breakpoints }, tokens, } = Field.useTheme();
+    const breakpoint = Field.useBreakpoint({
+        breakpoints,
+        defaultBreakpoint,
+    });
+    const value = Field.getValueAtCurrentBreakpoint({
+        breakpoint,
+        breakpoints,
+        values,
+    });
+    if (ui.isDesignToken(value) || ui.isString(value)) {
+        return Field.getStyleValue({ value, propKey, tokens });
+    }
+    else {
+        return value;
+    }
+};
+
+function IconsProvider({ children, icons, }) {
+    return (React__namespace.createElement(Field.IconsContext.Provider, { value: icons }, children));
+}
+
+const AlertPrimitive = ({ buttonRef, children, className, dismissButtonLabel = Field.ComponentText.Alert.dismissButtonLabel, hasIcon = true, heading, isDismissible = false, onDismiss, variation, ...rest }, ref) => {
+    const [dismissed, setDismissed] = React__namespace.useState(false);
+    const icons = Field.useIcons('alert');
+    const dismissAlert = React__namespace.useCallback(() => {
+        setDismissed(!dismissed);
+        if (ui.isFunction(onDismiss)) {
+            onDismiss();
+        }
+    }, [setDismissed, onDismiss, dismissed]);
+    return !dismissed ? (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Alert, className, ui.classNameModifier(ui.ComponentClassName.Alert, variation)), ref: ref, role: "alert", ...rest },
+        hasIcon && React__namespace.createElement(Field.AlertIcon, { variation: variation, ariaHidden: true }),
+        React__namespace.createElement(Field.View, { flex: "1" },
+            heading && (React__namespace.createElement(Field.View, { className: ui.ComponentClassName.AlertHeading }, heading)),
+            React__namespace.createElement(Field.View, { className: ui.ComponentClassName.AlertBody }, children)),
+        isDismissible && (React__namespace.createElement(Field.Button, { ariaLabel: dismissButtonLabel, variation: "link", className: ui.ComponentClassName.AlertDismiss, onClick: dismissAlert, ref: buttonRef }, icons?.close ?? React__namespace.createElement(Field.IconClose, { "aria-hidden": "true" }))))) : null;
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/alert)
+ */
+const Alert = Field.primitiveWithForwardRef(AlertPrimitive);
+Alert.displayName = 'Alert';
+
+const AutocompleteOptionPrimitive = ({ children, className, isActive, ...rest }, ref) => {
+    return (React__namespace.createElement(Field.View, { "aria-selected": isActive, as: "li", role: "option", className: ui.classNames(ui.ComponentClassName.AutocompleteMenuOption, ui.classNameModifierByFlag(ui.ComponentClassName.AutocompleteMenuOption, 'active', isActive), className), ref: ref, ...rest }, children));
+};
+const AutocompleteOption = Field.primitiveWithForwardRef(AutocompleteOptionPrimitive);
+AutocompleteOption.displayName = 'AutocompleteOption';
+
+const ScrollViewPrimitive = ({ children, className, orientation, ...rest }, ref) => (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.ScrollView, ui.classNameModifier(ui.ComponentClassName.ScrollView, orientation), className), ref: ref, ...rest }, children));
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/scrollview)
+ */
+const ScrollView = Field.primitiveWithForwardRef(ScrollViewPrimitive);
+ScrollView.displayName = 'ScrollView';
+
+const MenuHeader = ({ children }) => {
+    if (!children) {
+        return null;
+    }
+    return (React__namespace.createElement(Field.View, { className: ui.ComponentClassName.AutocompleteMenuHeader }, children));
+};
+const MenuFooter = ({ children }) => {
+    if (!children) {
+        return null;
+    }
+    return (React__namespace.createElement(Field.View, { className: ui.ComponentClassName.AutocompleteMenuFooter }, children));
+};
+const MenuLoading = ({ children }) => {
+    return (React__namespace.createElement(Field.View, { className: ui.ComponentClassName.AutocompleteMenuLoading }, children ?? (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(Field.Loader, null),
+        Field.ComponentText.Autocomplete.loadingText))));
+};
+const MenuEmpty = ({ children }) => (React__namespace.createElement(Field.View, { className: ui.ComponentClassName.AutocompleteMenuEmpty }, children ?? Field.ComponentText.Autocomplete.emptyText));
+const AutocompleteMenuPrimitive = ({ ariaLabel, children, Header = null, Footer = null, LoadingIndicator = null, Empty = null, isLoading, listboxId, ...rest }, ref) => {
+    return (React__namespace.createElement(ScrollView, { className: ui.ComponentClassName.AutocompleteMenu, ref: ref, ...rest }, isLoading ? (React__namespace.createElement(MenuLoading, null, LoadingIndicator)) : (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(MenuHeader, null, Header),
+        children.length > 0 ? (React__namespace.createElement(ScrollView, { as: "ul", ariaLabel: ariaLabel, className: ui.ComponentClassName.AutocompleteMenuOptions, id: listboxId, role: "listbox" }, children)) : (React__namespace.createElement(MenuEmpty, null, Empty)),
+        React__namespace.createElement(MenuFooter, null, Footer)))));
+};
+const AutocompleteMenu = Field.primitiveWithForwardRef(AutocompleteMenuPrimitive);
+AutocompleteMenu.displayName = 'AutocompleteMenu';
+
+// Source: https://github.com/radix-ui/primitives/blob/7ae63b6cce6ea53ea5d65b6d411894c004b38f47/packages/react/use-layout-effect/src/useLayoutEffect.tsx
+/**
+ * On the server, React emits a warning when calling `useLayoutEffect`.
+ * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
+ * We use this safe version which suppresses the warning by replacing it with a noop on the server.
+ *
+ * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ */
+const useLayoutEffect = globalThis?.document ? React__namespace.useLayoutEffect : () => { };
+
+// Adapted from https://github.com/radix-ui/primitives/blob/main/packages/react/id/src/id.tsx#L8
+// Prefixed autogenerated id created by useStableId
+const AUTO_GENERATED_ID_PREFIX = 'amplify-id';
+// Create a local version of React.useId which will reference React.useId for React 18
+// and fallback to noop for React 17 and below
+// Note: We use `toString()` to prevent bundlers from trying to `import { useId } from 'react';`
+// since it doesn't exist in React 17 and below (prevents https://github.com/aws-amplify/amplify-ui/issues/1154)
+const useReactId = 
+// disable eslint below to allow usage of casting React to `any`, which ensures that TS
+// does not get confused about the existence of `useId` in React 17 and below
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+React__namespace['useId'.toString()] || (() => undefined);
+let count = 0;
+/**
+ * Create a uuid to use with amplify fields unless
+ * an id is provided
+ * @param id user specified id
+ * @returns string
+ */
+const useStableId = (id) => {
+    const [stableId, setStableId] = React__namespace.useState(useReactId());
+    // React versions older than 18 will have client-side ids only
+    useLayoutEffect(() => {
+        if (!id) {
+            setStableId((reactId) => reactId ?? String(count++));
+        }
+    }, [id]);
+    return id ?? (stableId ? `${AUTO_GENERATED_ID_PREFIX}-${stableId}` : '');
+};
+
+const DEFAULT_KEYS$1 = new Set([Field.ARROW_DOWN, Field.ARROW_UP, Field.ENTER_KEY, Field.ESCAPE_KEY]);
+const useAutocomplete = ({ defaultValue = '', value, options, optionFilter, onBlur, onChange, onClear, onClick, onSelect, onSubmit, }) => {
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React__namespace.useState(defaultValue);
+    const composedValue = isControlled ? value : internalValue;
+    const [isMenuOpen, setIsMenuOpen] = React__namespace.useState(false);
+    const [activeOption, setActiveOption] = React__namespace.useState(null);
+    const isCustomFiltering = ui.isFunction(optionFilter);
+    const filteredOptions = React__namespace.useMemo(() => {
+        const defaultFilter = (option) => {
+            const { label } = option;
+            return label
+                ?.toLocaleLowerCase()
+                .includes(composedValue?.toLocaleLowerCase());
+        };
+        const filter = isCustomFiltering
+            ? (option) => optionFilter(option, composedValue)
+            : defaultFilter;
+        return options?.filter(filter) ?? [];
+    }, [composedValue, optionFilter, isCustomFiltering, options]);
+    const autocompleteId = useStableId();
+    const listboxId = useStableId();
+    const menuId = useStableId();
+    const optionBaseId = useStableId();
+    const activeIndex = filteredOptions.findIndex((option) => option === activeOption);
+    const activeOptionId = activeOption?.id ??
+        (activeIndex !== -1 ? `${optionBaseId}-option-${activeIndex}` : undefined);
+    const handleOnBlur = React__namespace.useCallback((event) => {
+        setIsMenuOpen(false);
+        setActiveOption(null);
+        if (ui.isFunction(onBlur)) {
+            onBlur(event);
+        }
+    }, [onBlur]);
+    const handleOnChange = React__namespace.useCallback((event) => {
+        setActiveOption(null);
+        setIsMenuOpen(true);
+        if (!isControlled) {
+            setInternalValue(event.target.value);
+        }
+        if (ui.isFunction(onChange)) {
+            onChange(event);
+        }
+    }, [isControlled, onChange]);
+    const handleOnClear = React__namespace.useCallback(() => {
+        if (!isControlled) {
+            setInternalValue('');
+        }
+        if (ui.isFunction(onClear)) {
+            onClear();
+        }
+    }, [isControlled, onClear]);
+    const handleOnClick = React__namespace.useCallback((event) => {
+        setIsMenuOpen(true);
+        if (ui.isFunction(onClick)) {
+            onClick(event);
+        }
+    }, [onClick]);
+    const handleOnKeyDown = (event) => {
+        const { key } = event;
+        if (!DEFAULT_KEYS$1.has(key)) {
+            return;
+        }
+        event.preventDefault();
+        switch (key) {
+            case Field.ESCAPE_KEY: {
+                if (isMenuOpen) {
+                    setIsMenuOpen(false);
+                    setActiveOption(null);
+                }
+                else {
+                    handleOnClear();
+                }
+                break;
+            }
+            case Field.ENTER_KEY: {
+                if (!activeOption) {
+                    if (ui.isFunction(onSubmit)) {
+                        onSubmit(composedValue);
+                    }
+                }
+                else {
+                    const { label } = activeOption;
+                    if (!isControlled) {
+                        setInternalValue(label);
+                    }
+                    if (ui.isFunction(onSelect)) {
+                        onSelect(activeOption);
+                    }
+                }
+                setIsMenuOpen(false);
+                setActiveOption(null);
+                break;
+            }
+            case Field.ARROW_DOWN: {
+                if (filteredOptions.length <= 0) {
+                    return;
+                }
+                setIsMenuOpen(true);
+                const newActiveIndex = activeIndex >= filteredOptions.length - 1 ? 0 : activeIndex + 1;
+                setActiveOption(filteredOptions[newActiveIndex]);
+                break;
+            }
+            case Field.ARROW_UP: {
+                if (filteredOptions.length <= 0) {
+                    return;
+                }
+                setIsMenuOpen(true);
+                const newActiveIndex = activeIndex <= 0 ? filteredOptions.length - 1 : activeIndex - 1;
+                setActiveOption(filteredOptions[newActiveIndex]);
+            }
+        }
+    };
+    // The window will scroll down to the right place to show the whole menu
+    // if space is not enough in current viewport
+    React__namespace.useEffect(() => {
+        const autocompleteElement = document.getElementById(autocompleteId);
+        const menuElement = document.getElementById(menuId);
+        if (menuElement && isMenuOpen && autocompleteElement) {
+            const { bottom } = menuElement.getBoundingClientRect();
+            const { offsetParent, offsetTop } = autocompleteElement;
+            if (offsetParent === document.body &&
+                bottom > document.documentElement.clientHeight) {
+                window.scrollTo({
+                    top: Math.min(bottom -
+                        document.documentElement.clientHeight +
+                        window.scrollY +
+                        20, // Add 20 gap between menu bottom and window viewport bottom
+                    offsetTop),
+                    behavior: 'smooth',
+                });
+            }
+        }
+    }, [autocompleteId, isMenuOpen, menuId]);
+    // This will make the menu able to scroll with keyboard,
+    // and scroll each option into window viewport if necessary
+    React__namespace.useEffect(() => {
+        const listboxElement = document.getElementById(listboxId);
+        const activeOptionElement = Field.strHasLength(activeOptionId)
+            ? document.getElementById(activeOptionId)
+            : null;
+        if (activeOptionElement && listboxElement) {
+            const { scrollTop, clientHeight } = listboxElement;
+            const { offsetHeight, offsetTop } = activeOptionElement;
+            const { top, bottom } = activeOptionElement.getBoundingClientRect();
+            if (scrollTop > offsetTop) {
+                listboxElement.scrollTop = offsetTop;
+            }
+            if (scrollTop + clientHeight < offsetTop + offsetHeight) {
+                listboxElement.scrollTop = offsetTop + offsetHeight - clientHeight;
+            }
+            if (top < 0 || bottom > document.documentElement.clientHeight) {
+                activeOptionElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                });
+            }
+        }
+    }, [activeOptionId, listboxId]);
+    return {
+        activeOptionId,
+        autocompleteId,
+        composedValue,
+        filteredOptions,
+        handleOnBlur,
+        handleOnClear,
+        handleOnClick,
+        handleOnChange,
+        handleOnKeyDown,
+        isControlled,
+        isCustomFiltering,
+        isMenuOpen,
+        listboxId,
+        menuId,
+        optionBaseId,
+        setActiveOption,
+        setIsMenuOpen,
+        setInternalValue,
+    };
+};
+
+const getTestId = (testId, component) => testId && component ? `${testId}-${component}` : undefined;
+
+const HighlightMatchPrimitive = ({ children, className, query, testId, ...rest }, ref) => {
+    const matchTestId = getTestId(testId, 'match');
+    const startIndex = children
+        ?.toLocaleLowerCase()
+        .indexOf(query?.toLocaleLowerCase());
+    if (Field.strHasLength(query) && startIndex !== -1) {
+        const match = children.substring(startIndex, startIndex + query.length);
+        return (React__namespace.createElement(Field.View, { as: "span", className: ui.classNames(className, ui.ComponentClassName.HighlightMatch), testId: testId, ref: ref, ...rest },
+            children.substring(0, startIndex),
+            React__namespace.createElement(Field.View, { as: "strong", className: ui.ComponentClassName.HighlightMatchHighlighted, testId: matchTestId }, match),
+            children.substring(startIndex + query.length)));
+    }
+    return (React__namespace.createElement(Field.View, { as: "span", testId: testId }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/highlightmatch)
+ */
+const HighlightMatch = Field.primitiveWithForwardRef(HighlightMatchPrimitive);
+HighlightMatch.displayName = 'HighlightMatch';
+
+const ariaLabelText = Field.ComponentText.SearchField.searchButtonLabel;
+const SearchFieldButtonPrimitive = ({ size, ...props }, ref) => {
+    const icons = Field.useIcons('searchField');
+    return (React__namespace.createElement(Field.FieldGroupIconButton, { ariaLabel: ariaLabelText, className: ui.ComponentClassName.SearchFieldSearch, size: size, ref: ref, type: "submit", ...props }, icons?.search ?? React__namespace.createElement(Field.IconSearch, null)));
+};
+const SearchFieldButton = Field.primitiveWithForwardRef(SearchFieldButtonPrimitive);
+SearchFieldButton.displayName = 'SearchFieldButton';
+
+const FieldGroupPrimitive = ({ children, className, innerEndComponent, innerStartComponent, orientation = 'horizontal', outerEndComponent, outerStartComponent, variation, ...rest }, ref) => {
+    // Don't apply hasInner classnames unless a component was provided
+    const hasInnerStartComponent = innerStartComponent != null;
+    const hasInnerEndComponent = innerEndComponent != null;
+    const fieldGroupHasInnerStartClassName = hasInnerStartComponent
+        ? ui.ComponentClassName.FieldGroupHasInnerStart
+        : null;
+    const fieldGroupHasInnerEndClassName = hasInnerEndComponent
+        ? ui.ComponentClassName.FieldGroupHasInnerEnd
+        : null;
+    const componentClasses = ui.classNames(ui.ComponentClassName.FieldGroup, fieldGroupHasInnerStartClassName, fieldGroupHasInnerEndClassName, ui.classNameModifier(ui.ComponentClassName.FieldGroup, orientation), className);
+    return (React__namespace.createElement(Field.Flex, { className: componentClasses, ref: ref, ...rest },
+        outerStartComponent && (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.FieldGroupOuterStart, ui.classNameModifier(ui.ComponentClassName.FieldGroupOuterStart, variation)) }, outerStartComponent)),
+        React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.FieldGroupFieldWrapper, ui.classNameModifier(ui.ComponentClassName.FieldGroupFieldWrapper, orientation)) },
+            innerStartComponent && (React__namespace.createElement(Field.View, { className: ui.ComponentClassName.FieldGroupInnerStart }, innerStartComponent)),
+            children,
+            innerEndComponent && (React__namespace.createElement(Field.View, { className: ui.ComponentClassName.FieldGroupInnerEnd }, innerEndComponent))),
+        outerEndComponent && (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.FieldGroupOuterEnd, ui.classNameModifier(ui.ComponentClassName.FieldGroupOuterEnd, variation)) }, outerEndComponent))));
+};
+const FieldGroup = Field.primitiveWithForwardRef(FieldGroupPrimitive);
+FieldGroup.displayName = 'FieldGroup';
+
+const InputPrimitive = ({ autoComplete, checked, className, defaultChecked, defaultValue, id, isDisabled, isReadOnly, isRequired, size, type = 'text', hasError = false, value, variation, ...rest }, ref) => {
+    const componentClasses = ui.classNames(ui.ComponentClassName.Input, ui.ComponentClassName.FieldGroupControl, ui.classNameModifier(ui.ComponentClassName.Input, variation), ui.classNameModifierByFlag(ui.ComponentClassName.Input, 'error', hasError), ui.classNameModifier(ui.ComponentClassName.Input, size), className);
+    const { isFieldsetDisabled } = Field.useFieldset();
+    return (React__namespace.createElement(Field.View, { "aria-invalid": hasError, as: "input", autoComplete: autoComplete, checked: checked, className: componentClasses, defaultChecked: defaultChecked, defaultValue: defaultValue, isDisabled: isFieldsetDisabled ? isFieldsetDisabled : isDisabled, id: id, readOnly: isReadOnly, ref: ref, required: isRequired, type: type, value: value, ...rest }));
+};
+const Input = Field.primitiveWithForwardRef(InputPrimitive);
+Input.displayName = 'Input';
+
+const isStyleKey = (prop) => {
+    return prop in Field.ComponentPropsToStylePropsMap;
+};
+/**
+ * This function splits props into style props and non-style props. This is used
+ * on Field primitives so we can apply style props on the wrapper element and
+ * the rest on the input.
+ * @param props this should be a destructured `rest` from the component's props
+ */
+const splitPrimitiveProps = (props) => {
+    const splitProps = {
+        styleProps: {},
+        rest: {},
+    };
+    Object.keys(props).forEach((prop) => {
+        if (isStyleKey(prop)) {
+            // we know it is a style key
+            // so we know we can assign the key in styleProps
+            splitProps.styleProps = {
+                ...splitProps.styleProps,
+                [prop]: props[prop],
+            };
+        }
+        else {
+            splitProps.rest = {
+                ...splitProps.rest,
+                [prop]: props[prop],
+            };
+        }
+    });
+    return splitProps;
+};
+
+const TextFieldPrimitive = (props, ref) => {
+    const { className, descriptiveText, errorMessage, hasError = false, id, innerEndComponent, innerStartComponent, label, labelHidden = false, outerEndComponent, outerStartComponent, size, testId, variation, inputStyles, ..._rest } = props;
+    const fieldId = useStableId(id);
+    const descriptionId = useStableId();
+    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const { styleProps, rest } = splitPrimitiveProps(_rest);
+    return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Field, ui.classNameModifier(ui.ComponentClassName.Field, size), ui.ComponentClassName.TextField, className), testId: testId, ...styleProps },
+        React__namespace.createElement(Field.Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
+        React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
+        React__namespace.createElement(FieldGroup, { outerStartComponent: outerStartComponent, outerEndComponent: outerEndComponent, innerStartComponent: innerStartComponent, innerEndComponent: innerEndComponent, variation: variation },
+            React__namespace.createElement(Input, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, size: size, variation: variation, ...inputStyles, ...rest })),
+        React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/textfield)
+ */
+const TextField = Field.primitiveWithForwardRef(TextFieldPrimitive);
+TextField.displayName = 'TextField';
+
+/**
+ *  Creates ref callback to compose together external and internal refs
+ */
+function useComposeRefsCallback({ externalRef, internalRef, }) {
+    return React__namespace.useCallback((node) => {
+        // Handle callback ref
+        if (ui.isFunction(externalRef)) {
+            externalRef(node);
+        }
+        else if (externalRef) {
+            externalRef.current = node;
+        }
+        internalRef.current = node;
+    }, [externalRef, internalRef]);
+}
+
+const DEFAULT_KEYS = new Set([Field.ESCAPE_KEY, Field.ENTER_KEY]);
+const useSearchField = ({ defaultValue = '', value, onChange, onClear, onSubmit, externalRef, }) => {
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React__namespace.useState(defaultValue);
+    const composedValue = isControlled ? value : internalValue;
+    const internalRef = React__namespace.useRef(null);
+    const composedRefs = useComposeRefsCallback({
+        externalRef,
+        internalRef,
+    });
+    const onClearHandler = React__namespace.useCallback(() => {
+        if (!isControlled) {
+            setInternalValue('');
+        }
+        internalRef?.current?.focus();
+        if (ui.isFunction(onClear)) {
+            onClear();
+        }
+    }, [isControlled, setInternalValue, onClear]);
+    const onSubmitHandler = React__namespace.useCallback((value) => {
+        if (ui.isFunction(onSubmit)) {
+            onSubmit(value);
+        }
+    }, [onSubmit]);
+    const onKeyDown = React__namespace.useCallback((event) => {
+        const { key } = event;
+        if (!DEFAULT_KEYS.has(key)) {
+            return;
+        }
+        event.preventDefault();
+        if (key === Field.ESCAPE_KEY) {
+            onClearHandler();
+        }
+        else if (key === Field.ENTER_KEY) {
+            onSubmitHandler(composedValue);
+        }
+    }, [composedValue, onClearHandler, onSubmitHandler]);
+    const handleOnChange = React__namespace.useCallback((event) => {
+        if (!isControlled) {
+            setInternalValue(event.target.value);
+        }
+        if (ui.isFunction(onChange)) {
+            onChange(event);
+        }
+    }, [isControlled, onChange, setInternalValue]);
+    const onClick = React__namespace.useCallback(() => {
+        onSubmitHandler(composedValue);
+    }, [onSubmitHandler, composedValue]);
+    return {
+        composedValue,
+        onClearHandler,
+        onKeyDown,
+        onClick,
+        handleOnChange,
+        composedRefs,
+    };
+};
+
+const SearchFieldPrimitive = ({ autoComplete = 'off', className, isDisabled, clearButtonLabel, labelHidden = true, name = 'q', hasSearchButton = true, hasSearchIcon = false, onChange, onClear, onSubmit, searchButtonRef, size, defaultValue, value, ...rest }, ref) => {
+    const { composedValue, onClearHandler, onKeyDown, onClick, handleOnChange, composedRefs, } = useSearchField({
+        defaultValue,
+        value,
+        onChange,
+        onClear,
+        onSubmit,
+        externalRef: ref,
+    });
+    const SearchButton = hasSearchButton ? (React__namespace.createElement(SearchFieldButton, { isDisabled: isDisabled, onClick: onClick, ref: searchButtonRef, size: size })) : undefined;
+    const SearchIcon = hasSearchIcon ? (React__namespace.createElement(Field.FieldGroupIcon, null,
+        React__namespace.createElement(Field.IconSearch, null))) : undefined;
+    return (React__namespace.createElement(TextField, { autoComplete: autoComplete, className: ui.classNames(ui.ComponentClassName.SearchField, className), labelHidden: labelHidden, innerStartComponent: SearchIcon, innerEndComponent: React__namespace.createElement(Field.FieldClearButton, { ariaLabel: clearButtonLabel, excludeFromTabOrder: true, isVisible: !isDisabled && Field.strHasLength(composedValue), onClick: onClearHandler, size: size, variation: "link" }), isDisabled: isDisabled, name: name, onChange: handleOnChange, onKeyDown: onKeyDown, outerEndComponent: SearchButton, ref: composedRefs, size: size, value: composedValue, ...rest }));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/searchfield)
+ */
+const SearchField = Field.primitiveWithForwardRef(SearchFieldPrimitive);
+SearchField.displayName = 'SearchField';
+
+const AutocompletePrimitive = ({ className, defaultValue, value, isLoading = false, menuSlots = {}, options, optionFilter, onBlur, onChange, onClear, onClick, onSelect, onSubmit, renderOption, testId, ...rest }, ref) => {
+    const { activeOptionId, autocompleteId, composedValue, filteredOptions, handleOnBlur, handleOnClear, handleOnClick, handleOnChange, handleOnKeyDown, isControlled, isCustomFiltering, isMenuOpen, listboxId, menuId, optionBaseId, setActiveOption, setIsMenuOpen, setInternalValue, } = useAutocomplete({
+        defaultValue,
+        value,
+        options,
+        optionFilter,
+        onBlur,
+        onChange,
+        onClear,
+        onClick,
+        onSelect,
+        onSubmit,
+    });
+    const comboboxProps = {
+        role: 'combobox',
+        'aria-activedescendant': activeOptionId,
+        'aria-autocomplete': 'list',
+        'aria-controls': isMenuOpen ? menuId : undefined,
+        'aria-expanded': isMenuOpen,
+        'aria-haspopup': 'listbox',
+        'aria-owns': isMenuOpen ? menuId : undefined,
+    };
+    const Options = filteredOptions.map((option, idx) => {
+        const { id, label, ...rest } = option;
+        const handleOnClick = () => {
+            setIsMenuOpen(false);
+            setActiveOption(null);
+            if (!isControlled) {
+                setInternalValue(label);
+            }
+            if (ui.isFunction(onSelect)) {
+                onSelect(option);
+            }
+        };
+        // This is required. Mousedown event will fire a blur event by default
+        // and so the menu will close before the click event on an option gets a chance to fire
+        const handleOnMouseDown = (event) => {
+            event.preventDefault();
+        };
+        const handleOnMouseMove = () => {
+            setActiveOption(option);
+        };
+        const optionId = id ?? `${optionBaseId}-option-${idx}`;
+        const isActive = optionId === activeOptionId;
+        return (React__namespace.createElement(AutocompleteOption, { isActive: isActive, id: optionId, key: optionId, onClick: handleOnClick, onMouseDown: handleOnMouseDown, onMouseMove: handleOnMouseMove, ...rest }, ui.isFunction(renderOption) ? (renderOption(option, composedValue)) : isCustomFiltering ? (label) : (React__namespace.createElement(HighlightMatch, { query: composedValue }, label))));
+    });
+    return (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.Autocomplete, className), id: autocompleteId, testId: testId },
+        React__namespace.createElement(SearchField, { hasSearchButton: false, hasSearchIcon: true, onBlur: handleOnBlur, onChange: handleOnChange, onClear: handleOnClear, onClick: handleOnClick, onKeyDown: handleOnKeyDown, ref: ref, value: composedValue, ...comboboxProps, ...rest }),
+        isMenuOpen ? (React__namespace.createElement(AutocompleteMenu, { id: menuId, isLoading: isLoading, listboxId: listboxId, ...menuSlots }, Options)) : null));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/autocomplete)
+ */
+const Autocomplete = Field.primitiveWithForwardRef(AutocompletePrimitive);
+Autocomplete.displayName = 'Autocomplete';
+
+const BadgePrimitive = ({ className, children, variation, size, ...rest }, ref) => {
+    const componentClasses = ui.classNames(ui.ComponentClassName.Badge, className, ui.classNameModifier(ui.ComponentClassName.Badge, variation), ui.classNameModifier(ui.ComponentClassName.Badge, size));
+    return (React__namespace.createElement(Field.View, { as: "span", className: componentClasses, ref: ref, ...rest }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/badge)
+ */
+const Badge = Field.primitiveWithForwardRef(BadgePrimitive);
+Badge.displayName = 'Badge';
+
+const BreadcrumbItemPrimitive = ({ className, children, as = 'li', ...rest }, ref) => {
+    const componentClasses = ui.classNames(ui.ComponentClassName.BreadcrumbsItem, className);
+    return (React__namespace.createElement(Field.View, { ...rest, as: as, className: componentClasses, ref: ref }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
+ */
+const BreadcrumbItem = Field.primitiveWithForwardRef(BreadcrumbItemPrimitive);
+BreadcrumbItem.displayName = 'Breadcrumbs.Item';
+
+const LinkPrimitive = ({ as = 'a', children, className, isExternal, ...rest }, ref) => {
+    return (React__namespace.createElement(Field.View, { as: as, className: ui.classNames(ui.ComponentClassName.Link, className), ref: ref, rel: isExternal ? 'noopener noreferrer' : undefined, target: isExternal ? '_blank' : undefined, ...rest }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/link)
+ */
+const Link = Field.primitiveWithForwardRef(LinkPrimitive);
+Link.displayName = 'Link';
+
+const BreadcrumbLinkPrimitive = ({ className, children, href, isCurrent, ...rest }, ref) => {
+    const componentClasses = ui.classNames(ui.ComponentClassName.BreadcrumbsLink, ui.classNameModifierByFlag(ui.ComponentClassName.BreadcrumbsLink, 'current', isCurrent), className);
+    if (isCurrent) {
+        const ariaCurrent = rest['aria-current'] ?? 'page';
+        const as = rest.as ?? 'span';
+        return (React__namespace.createElement(Field.Text, { ...rest, as: as, "aria-current": ariaCurrent, className: componentClasses, ref: ref }, children));
+    }
+    else {
+        return (React__namespace.createElement(Link, { ...rest, className: componentClasses, ref: ref, href: href }, children));
+    }
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
+ */
+const BreadcrumbLink = Field.primitiveWithForwardRef(BreadcrumbLinkPrimitive);
+BreadcrumbLink.displayName = 'Breadcrumbs.Link';
+
+const BreadcrumbSeparatorPrimitive = ({ className, children = '/', as = 'span', ...rest }, ref) => {
+    const ariaHidden = rest['aria-hidden'] ?? 'true';
+    return (React__namespace.createElement(Field.View, { ...rest, as: as, ref: ref, "aria-hidden": ariaHidden, className: ui.classNames(ui.ComponentClassName.BreadcrumbsSeparator, className) }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
+ */
+const BreadcrumbSeparator = Field.primitiveWithForwardRef(BreadcrumbSeparatorPrimitive);
+BreadcrumbSeparator.displayName = 'Breadcrumbs.Separator';
+
+const BreadcrumbContainerPrimitive = ({ className, children, ...rest }, ref) => {
+    const componentClasses = ui.classNames(ui.ComponentClassName.Breadcrumbs, className);
+    const ariaLabel = rest['aria-label'] ?? 'Breadcrumb';
+    return (React__namespace.createElement(Field.View, { ...rest, as: "nav", "aria-label": ariaLabel, className: componentClasses, ref: ref },
+        React__namespace.createElement(Field.View, { as: "ol", className: ui.ComponentClassName.BreadcrumbsList }, children)));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
+ */
+const BreadcrumbContainer = Field.primitiveWithForwardRef(BreadcrumbContainerPrimitive);
+BreadcrumbContainer.displayName = 'Breadcrumbs.Container';
+
+const BreadcrumbsPrimitive = ({ className, items, separator = React__namespace.createElement(BreadcrumbSeparator, null), ...rest }, ref) => {
+    const ariaLabel = rest['aria-label'] ?? 'Breadcrumb';
+    return (React__namespace.createElement(BreadcrumbContainer, { ...rest, "aria-label": ariaLabel, className: className, ref: ref }, items?.map(({ href, label }, idx) => {
+        const isCurrent = items.length - 1 === idx;
+        return (React__namespace.createElement(BreadcrumbItem, { key: `${href}${idx}` },
+            React__namespace.createElement(BreadcrumbLink, { href: href, isCurrent: isCurrent }, label),
+            isCurrent ? null : separator));
+    })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
+ */
+const Breadcrumbs = Object.assign(Field.primitiveWithForwardRef(BreadcrumbsPrimitive), {
+    Item: BreadcrumbItem,
+    Link: BreadcrumbLink,
+    Separator: BreadcrumbSeparator,
+    Container: BreadcrumbContainer,
+});
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+const ButtonGroupPrimitive = ({ className, children, role = 'group', size: _size, variation: _variation, ...rest }, ref) => (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.ButtonGroup, className), role: role, ref: ref, ...rest }, React__namespace.Children.map(children, (child) => {
+    if (React__namespace.isValidElement(child)) {
+        const { size = _size, variation = _variation } = child.props;
+        return React__namespace.cloneElement(child, { size, variation });
+    }
+    return child;
+})));
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/button#buttongroup)
+ */
+const ButtonGroup = Field.primitiveWithForwardRef(ButtonGroupPrimitive);
+ButtonGroup.displayName = 'ButtonGroup';
+
+const CardPrimitive = ({ className, children, variation, ...rest }, ref) => {
+    return (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.Card, ui.classNameModifier(ui.ComponentClassName.Card, variation), className), ref: ref, ...rest }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/card)
+ */
+const Card = Field.primitiveWithForwardRef(CardPrimitive);
+Card.displayName = 'Card';
+
+const VisuallyHiddenPrimitive = ({ as = 'span', children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: as, className: ui.classNames(ui.ComponentClassName.VisuallyHidden, className), ref: ref, ...rest }, children));
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/visuallyhidden)
+ */
+const VisuallyHidden = Field.primitiveWithForwardRef(VisuallyHiddenPrimitive);
+VisuallyHidden.displayName = 'VisuallyHidden';
+
+const CheckboxPrimitive = ({ checked: controlledChecked, className, defaultChecked, hasError, isDisabled, isIndeterminate, label, labelHidden, labelPosition, onBlur: _onBlur, onFocus: _onFocus, onChange: _onChange, testId, inputStyles, ..._rest }, ref) => {
+    const { styleProps, rest } = splitPrimitiveProps(_rest);
+    const [focused, setFocused] = React__namespace.useState(false);
+    const icons = Field.useIcons('checkbox');
+    const { isFieldsetDisabled } = Field.useFieldset();
+    const shouldBeDisabled = isFieldsetDisabled ? isFieldsetDisabled : isDisabled;
+    const isControlled = controlledChecked !== undefined;
+    const [localChecked, setLocalChecked] = React__namespace.useState(() => 
+    // if controlled, initialize to `controlledChecked` else `defaultChecked`
+    isControlled ? controlledChecked : defaultChecked);
+    const checked = isControlled ? controlledChecked : localChecked;
+    const onChange = (e) => {
+        if (ui.isFunction(_onChange)) {
+            _onChange(e);
+        }
+        // in controlled mode, `controlledChecked` determines checked state
+        if (!isControlled) {
+            setLocalChecked(e.target.checked);
+        }
+    };
+    const onFocus = (e) => {
+        if (ui.isFunction(_onFocus)) {
+            _onFocus(e);
+        }
+        setFocused(true);
+    };
+    const onBlur = (e) => {
+        if (ui.isFunction(_onBlur)) {
+            _onBlur(e);
+        }
+        setFocused(false);
+    };
+    const dataId = useStableId();
+    React__namespace.useEffect(() => {
+        const input = document.querySelector(`[data-id="${dataId}"]`);
+        if (input && typeof isIndeterminate === 'boolean') {
+            // HTMLInputElement does not have an `indeterminate` attribute
+            input.indeterminate =
+                isIndeterminate;
+        }
+    }, [dataId, isIndeterminate]);
+    const buttonTestId = getTestId(testId, ui.ComponentClassName.CheckboxButton);
+    const iconTestId = getTestId(testId, ui.ComponentClassName.CheckboxIcon);
+    const labelTestId = getTestId(testId, ui.ComponentClassName.CheckboxLabel);
+    const flexClasses = ui.classNames(ui.ComponentClassName.CheckboxButton, ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxButton, 'disabled', shouldBeDisabled), ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxButton, 'error', hasError), ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxButton, 'focused', focused));
+    const iconClasses = ui.classNames(ui.ComponentClassName.CheckboxIcon, ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxIcon, 'checked', checked), ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxIcon, 'disabled', shouldBeDisabled), ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxIcon, 'indeterminate', isIndeterminate));
+    const iconProps = {
+        className: ui.classNames(iconClasses),
+        'data-checked': localChecked,
+        'data-disabled': shouldBeDisabled,
+        'data-testid': iconTestId,
+    };
+    const checkedIcon = icons?.checked ? (React__namespace.createElement(Field.View, { as: "span", className: ui.classNames(iconClasses) }, icons.checked)) : (React__namespace.createElement(Field.IconCheck, { ...iconProps }));
+    const indeterminateIcon = icons?.indeterminate ? (React__namespace.createElement(Field.View, { as: "span", className: ui.classNames(iconClasses) }, icons.indeterminate)) : (React__namespace.createElement(Field.IconIndeterminate, { ...iconProps }));
+    return (React__namespace.createElement(Field.Flex, { as: "label", className: ui.classNames(ui.ComponentClassName.Checkbox, ui.classNameModifierByFlag(ui.ComponentClassName.Checkbox, 'disabled', shouldBeDisabled), labelPosition ? `amplify-label-${labelPosition}` : null, className), testId: testId, ...styleProps },
+        React__namespace.createElement(VisuallyHidden, null,
+            React__namespace.createElement(Input, { checked: controlledChecked, className: ui.ComponentClassName.CheckboxInput, "data-id": dataId, defaultChecked: defaultChecked, isDisabled: shouldBeDisabled, onBlur: onBlur, onChange: onChange, onFocus: onFocus, ref: ref, type: "checkbox", ...rest })),
+        label && (React__namespace.createElement(Field.Text, { as: "span", className: ui.classNames(ui.ComponentClassName.CheckboxLabel, {
+                [ui.ComponentClassName.VisuallyHidden]: labelHidden,
+            }), "data-disabled": shouldBeDisabled, testId: labelTestId }, label)),
+        React__namespace.createElement(Field.Flex, { "aria-hidden": "true", as: "span", className: flexClasses, "data-checked": checked, "data-disabled": shouldBeDisabled, "data-focus": focused, "data-error": hasError, testId: buttonTestId, ...inputStyles }, isIndeterminate ? indeterminateIcon : checkedIcon)));
+};
+const Checkbox = Field.primitiveWithForwardRef(CheckboxPrimitive);
+Checkbox.displayName = 'Checkbox';
+
+const CheckboxFieldPrimitive = ({ className, errorMessage, hasError = false, labelHidden = false, labelPosition, testId, size, ...rest }, ref) => {
+    const checkboxTestId = getTestId(testId, ui.ComponentClassName.Checkbox);
+    return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Field, ui.ComponentClassName.CheckboxField, ui.classNameModifier(ui.ComponentClassName.Field, size), className), testId: testId },
+        React__namespace.createElement(Checkbox, { hasError: hasError, labelHidden: labelHidden, testId: checkboxTestId, labelPosition: labelPosition, ref: ref, ...rest }),
+        React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/checkboxfield)
+ */
+const CheckboxField = Field.primitiveWithForwardRef(CheckboxFieldPrimitive);
+CheckboxField.displayName = 'CheckboxField';
+
+const GridPrimitive = ({ className, children, ...rest }, ref) => (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.Grid, className), ref: ref, ...rest }, children));
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/grid)
+ */
+const Grid = Field.primitiveWithForwardRef(GridPrimitive);
+Grid.displayName = 'Grid';
+
+const ELLIPSIS = '...';
+/**
+ * This hook will be used to determine the range of page numbers to be rendered,
+ * including ellipsis dots(e.g., an array like [1, '...', 4, 5, 6, '...', 10]).
+ * @param currentPage current page number
+ * @param totalPages total number of pages
+ * @param siblingCount the number of siblings on each side of
+ * @returns an array that contains the range of numbers to be rendered
+ */
+const useRange = (currentPageParam, totalPagesParam, siblingCountParam = 1) => {
+    const range = React__namespace.useMemo(() => {
+        // The current page should not be less than 1
+        const currentPage = Math.max(currentPageParam, 1);
+        // The sibling count should not be less than 1
+        const siblingCount = Math.max(siblingCountParam, 1);
+        // The total pages should be always greater than current page
+        const totalPages = Math.max(currentPage, totalPagesParam);
+        // Note: 1-based index will be used for page value.
+        const firstPage = 1;
+        const lastPage = totalPages;
+        /**
+         * To avoid resizing our pagination component while a user is interacting with the component,
+         * the total number of items returned by the hook should remain constant.
+         * The consant is supposed to be the max number of items that would returned by the hook in all cases,
+         * so it should be calculated by 1(first page) + 1(last page) + 1(current page) + 2 * siblingCount + 2(ellipses)
+         */
+        const maxNumOfItems = 5 + 2 * siblingCount;
+        /**
+         * Case 1: If the total number of pages is not greater than the max number of items that would potentially be returned,
+         * then no need to run through the ellipsis cases, just simply return the range from 1 to totalPages (e.g. [1, 2, 3, 4]).
+         */
+        if (totalPages < maxNumOfItems) {
+            return Field.getConsecutiveIntArray(1, totalPages);
+        }
+        /**
+         * Determine if ellipsis dots should be rendered on either left or right side, or both
+         */
+        const leftSiblingPage = Math.max(currentPage - siblingCount, firstPage);
+        const rightSiblingPage = Math.min(currentPage + siblingCount, lastPage);
+        const shouldRenderStartEllipsis = leftSiblingPage > 2;
+        const shouldRenderEndEllipsis = rightSiblingPage < lastPage - 1;
+        /**
+         * Case 2: Only render ellipsis dots on the left side (e.g. [1, '...', 6, 7, 8, 9, 10]).
+         */
+        if (shouldRenderStartEllipsis && !shouldRenderEndEllipsis) {
+            // 1(current page) + 1(last page) + 1(fill up a page for the position of end ellipsis) + 2 * siblingCount
+            const rightItemCount = 3 + 2 * siblingCount;
+            const rightRange = Field.getConsecutiveIntArray(lastPage - rightItemCount + 1, lastPage);
+            return [firstPage, ELLIPSIS, ...rightRange];
+        }
+        /**
+         * Case 3: Only render ellipsis dots on the right side (e.g. [1, 2, 3, 4, 5, '...', 10]).
+         */
+        if (!shouldRenderStartEllipsis && shouldRenderEndEllipsis) {
+            // 1(current page) + 1(last page) + 1(fill up a page for the position of start ellipsis) + 2 * siblingCount
+            const leftItemCount = 3 + 2 * siblingCount;
+            const leftRange = Field.getConsecutiveIntArray(firstPage, leftItemCount);
+            return [...leftRange, ELLIPSIS, lastPage];
+        }
+        /**
+         * Case 4: Render ellipsis on both side (e.g. [1, '...', 4, 5, 6, '...', 10]).
+         */
+        const middleRange = Field.getConsecutiveIntArray(leftSiblingPage, rightSiblingPage);
+        return [firstPage, ELLIPSIS, ...middleRange, ELLIPSIS, lastPage];
+    }, [currentPageParam, totalPagesParam, siblingCountParam]);
+    return range;
+};
+
+const PAGINATION_CURRENT_TEST_ID = 'current';
+const PAGINATION_ELLIPSIS_TEST_ID = 'ellipsis';
+const PaginationItem = ({ type, page, currentPage, currentPageLabel = Field.ComponentText.PaginationItem.currentPageLabel, isDisabled, onClick, ariaLabel, ...rest }) => {
+    const icons = Field.useIcons('pagination');
+    const nextClasses = ui.classNames(ui.ComponentClassName.PaginationItem, ui.classNameModifier(ui.ComponentClassName.PaginationItem, 'link'), ui.classNameModifierByFlag(ui.ComponentClassName.PaginationItem, 'disabled', isDisabled));
+    const previousClasses = ui.classNames(ui.ComponentClassName.PaginationItem, ui.classNameModifier(ui.ComponentClassName.PaginationItem, 'link'), ui.classNameModifierByFlag(ui.ComponentClassName.PaginationItem, 'disabled', isDisabled));
+    switch (type) {
+        case 'page':
+            return (React__namespace.createElement(Field.View, { as: "li" }, page === currentPage ? (React__namespace.createElement(Field.Button, { "aria-current": "page", size: "small", variation: "link", className: ui.classNames(ui.ComponentClassName.PaginationItem, ui.classNameModifier(ui.ComponentClassName.PaginationItem, 'current')), testId: PAGINATION_CURRENT_TEST_ID, ...rest },
+                React__namespace.createElement(VisuallyHidden, null,
+                    currentPageLabel,
+                    ":"),
+                page)) : (React__namespace.createElement(Field.Button, { className: ui.ComponentClassName.PaginationItem, size: "small", variation: "link", onClick: () => {
+                    onClick?.();
+                }, ariaLabel: ariaLabel, ...rest }, page))));
+        case 'next':
+            return (React__namespace.createElement(Field.View, { as: "li" },
+                React__namespace.createElement(Field.Button, { className: nextClasses, size: "small", variation: "link", isDisabled: isDisabled, onClick: () => {
+                        onClick?.();
+                    }, ariaLabel: ariaLabel, ...rest }, icons?.next ?? React__namespace.createElement(Field.IconChevronRight, null))));
+        case 'previous':
+            return (React__namespace.createElement(Field.View, { as: "li" },
+                React__namespace.createElement(Field.Button, { className: previousClasses, size: "small", variation: "link", isDisabled: isDisabled, onClick: () => {
+                        onClick?.();
+                    }, ariaLabel: ariaLabel, ...rest }, icons?.previous ?? React__namespace.createElement(Field.IconChevronLeft, null))));
+        case 'ellipsis':
+            return (React__namespace.createElement(Field.View, { as: "li" },
+                React__namespace.createElement(Field.Flex, { as: "span", className: ui.classNameModifier(ui.ComponentClassName.PaginationItem, 'ellipsis'), testId: PAGINATION_ELLIPSIS_TEST_ID, ...rest }, "\u2026")));
+        // No match type found
+    }
+    return React__namespace.createElement(Field.View, { as: "li" });
+};
+PaginationItem.displayName = 'PaginationItem';
+
+/**
+ * This hook will be used to get the pagination items to be rendered in the pagination primitive
+ * @param currentPage current page number
+ * @param totalPages total number of pages
+ * @param siblingCount the number of siblings on each side of
+ * @param onNext callback function triggered when the next-page button is pressed
+ * @param onPrevious callback function triggered when the prev-page button is pressed
+ * @param onChange callback function triggered every time the page changes
+ * @returns an array of pagination items
+ */
+const usePaginationItems = ({ currentPage, totalPages, hasMorePages, siblingCount, currentPageLabel = Field.ComponentText.PaginationItem.currentPageLabel, pageLabel = Field.ComponentText.PaginationItem.pageLabel, previousLabel = Field.ComponentText.PaginationItem.previousLabel, nextLabel = Field.ComponentText.PaginationItem.nextLabel, onNext, onPrevious, onChange, }) => {
+    const previousItem = (React__namespace.createElement(PaginationItem, { type: "previous", key: "previous", currentPage: currentPage, onClick: onPrevious, isDisabled: currentPage <= 1, ariaLabel: previousLabel }));
+    const nextItem = (React__namespace.createElement(PaginationItem, { type: "next", key: "next", currentPage: currentPage, onClick: onNext, isDisabled: currentPage >= totalPages && !hasMorePages, ariaLabel: nextLabel }));
+    // To get the range of page numbers to be rendered in the pagination primitive
+    const range = useRange(currentPage, totalPages, siblingCount);
+    const pageItems = React__namespace.useMemo(() => range.map((item, idx) => {
+        if (item === ELLIPSIS) {
+            return (React__namespace.createElement(PaginationItem, { type: "ellipsis", key: idx === 1 ? 'start-ellipsis' : 'end-ellipsis' }));
+        }
+        return (
+        // Note: Do NOT use index for `key` and instead use page number
+        // otherwise, react cannot update the component correctly with its diff mechanism
+        React__namespace.createElement(PaginationItem, { key: item, type: "page", page: item, currentPage: currentPage, currentPageLabel: currentPageLabel, onClick: () => onChange?.(item, currentPage), 
+            /**
+             * @todo We should consider how we would support interpolation in our string translations.
+             * This works for "Go to page 31" or "translatedText {s}" as the supplied string
+             * But for Arabic or Japanese or some other languages the supplied string might look like: "{s} translatedText".
+             */
+            ariaLabel: `${pageLabel} ${item}` }));
+    }), [range, currentPage, currentPageLabel, pageLabel, onChange]);
+    return [previousItem, ...pageItems, nextItem];
+};
+
+const PaginationPrimitive = ({ className, currentPage = 1, totalPages, hasMorePages = false, siblingCount, currentPageLabel, pageLabel, previousLabel, nextLabel, onNext, onPrevious, onChange, ...rest }, ref) => {
+    const paginationItems = usePaginationItems({
+        currentPage,
+        totalPages,
+        hasMorePages,
+        siblingCount,
+        currentPageLabel,
+        pageLabel,
+        previousLabel,
+        nextLabel,
+        onNext,
+        onPrevious,
+        onChange,
+    });
+    return (React__namespace.createElement(Field.View, { as: "nav", className: ui.classNames(ui.ComponentClassName.Pagination, className), ref: ref, ...rest },
+        React__namespace.createElement(Field.Flex, { as: "ol", justifyContent: "center", alignItems: "center", gap: "inherit" }, paginationItems)));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/pagination)
+ */
+const Pagination = Field.primitiveWithForwardRef(PaginationPrimitive);
+Pagination.displayName = 'Pagination';
+
+const usePagination = (props) => {
+    const { currentPage: initialPage = 1, totalPages, hasMorePages = false, siblingCount = 1, } = props;
+    // The current page should not be less than 1
+    const sanitizedInitialPage = Math.max(initialPage, 1);
+    // The total pages should be always greater than current page
+    const sanitizedTotalPages = Math.max(sanitizedInitialPage, totalPages);
+    const [currentPage, setCurrentPage] = React__namespace.useState(sanitizedInitialPage);
+    // Reset current page if initialPage or totalPages changes
+    React__namespace.useEffect(() => {
+        setCurrentPage(sanitizedInitialPage);
+    }, [sanitizedInitialPage, sanitizedTotalPages]);
+    const onNext = React__namespace.useCallback(() => {
+        if (currentPage < sanitizedTotalPages) {
+            setCurrentPage(currentPage + 1);
+        }
+    }, [currentPage, sanitizedTotalPages]);
+    const onPrevious = React__namespace.useCallback(() => {
+        if (currentPage > 1) {
+            setCurrentPage(currentPage - 1);
+        }
+    }, [currentPage]);
+    const onChange = React__namespace.useCallback((newPageIndex) => {
+        if (typeof newPageIndex === 'number') {
+            setCurrentPage(newPageIndex);
+        }
+    }, []);
+    return {
+        currentPage,
+        hasMorePages,
+        onChange,
+        onNext,
+        onPrevious,
+        // The sibling count should not be less than 1
+        siblingCount: Math.max(siblingCount, 1),
+        totalPages: sanitizedTotalPages,
+    };
+};
+
+/**
+ * Slice a collection based on page index (starting at 1)
+ */
+const getItemsAtPage = (items, page, itemsPerPage) => {
+    if (page < 1 || itemsPerPage < 1) {
+        return [];
+    }
+    const startIndex = (page - 1) * itemsPerPage;
+    return items.slice(startIndex, startIndex + itemsPerPage);
+};
+/**
+ * Recursively find a keyword within an object (case insensitive)
+ */
+const itemHasText = (item, text) => {
+    if (Field.strHasLength(item)) {
+        return item.toLowerCase().includes(text.toLowerCase());
+    }
+    if (typeof item === 'object' && item !== null) {
+        return Object.values(item).some((subItem) => itemHasText(subItem, text));
+    }
+    return false;
+};
+/**
+ * Computes the amount of available pages
+ */
+const getPageCount = (totalItems, itemsPerPage) => Math.ceil(totalItems / itemsPerPage);
+
+const DEFAULT_PAGE_SIZE = 10;
+const TYPEAHEAD_DELAY_MS = 300;
+const ListCollection = ({ children, direction = 'column', items, ...rest }) => (React__namespace.createElement(Field.Flex, { direction: direction, ...rest }, Array.isArray(items) ? items.map(children) : null));
+const GridCollection = ({ children, items, ...rest }) => (React__namespace.createElement(Grid, { ...rest }, Array.isArray(items) ? items.map(children) : null));
+const renderCollectionOrNoResultsFound = (collection, items, searchNoResultsFound) => {
+    if (items.length) {
+        return collection;
+    }
+    if (searchNoResultsFound) {
+        return searchNoResultsFound;
+    }
+    return (React__namespace.createElement(Field.Flex, { justifyContent: "center" },
+        React__namespace.createElement(Field.Text, null, Field.ComponentText.Collection.searchNoResultsFound)));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/collection)
+ */
+const Collection = ({ className, isSearchable, isPaginated, items, itemsPerPage = DEFAULT_PAGE_SIZE, searchFilter = itemHasText, searchLabel = Field.ComponentText.Collection.searchButtonLabel, searchNoResultsFound, searchPlaceholder, type = 'list', testId, ...rest }) => {
+    const [searchText, setSearchText] = React__namespace.useState();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const onSearch = React__namespace.useCallback(debounce__default["default"](setSearchText, TYPEAHEAD_DELAY_MS), [setSearchText]);
+    // Make sure that items are iterable
+    items = Array.isArray(items) ? items : [];
+    // Filter items by text
+    if (isSearchable && Field.strHasLength(searchText)) {
+        items = items.filter((item) => searchFilter(item, searchText));
+    }
+    // Pagination
+    const pagination = usePagination({
+        totalPages: getPageCount(items.length, itemsPerPage),
+    });
+    if (isPaginated) {
+        items = getItemsAtPage(items, pagination.currentPage, itemsPerPage);
+    }
+    const collection = type === 'list' ? (React__namespace.createElement(ListCollection, { className: ui.ComponentClassName.CollectionItems, items: items, ...rest })) : type === 'grid' ? (React__namespace.createElement(GridCollection, { className: ui.ComponentClassName.CollectionItems, items: items, ...rest })) : null;
+    return (React__namespace.createElement(Field.Flex, { testId: testId, className: ui.classNames(ui.ComponentClassName.Collection, className) },
+        isSearchable ? (React__namespace.createElement(Field.Flex, { className: ui.ComponentClassName.CollectionSearch },
+            React__namespace.createElement(SearchField, { label: searchLabel, placeholder: searchPlaceholder, onChange: (e) => onSearch(e.target.value), onClear: () => setSearchText('') }))) : null,
+        renderCollectionOrNoResultsFound(collection, items, searchNoResultsFound),
+        isPaginated ? (React__namespace.createElement(Field.Flex, { className: ui.ComponentClassName.CollectionPagination },
+            React__namespace.createElement(Pagination, { ...pagination }))) : null));
+};
+Collection.displayName = 'Collection';
+
+const DividerPrimitive = ({ className, orientation = 'horizontal', size, label, ...rest }, ref) => {
+    const componentClasses = ui.classNames(ui.ComponentClassName.Divider, ui.classNameModifier(ui.ComponentClassName.Divider, orientation), ui.classNameModifier(ui.ComponentClassName.Divider, size), className);
+    return (React__namespace.createElement(Field.View, { "aria-orientation": orientation, as: "hr", className: componentClasses, "data-label": label, ref: ref, ...rest }));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/divider)
+ */
+const Divider = Field.primitiveWithForwardRef(DividerPrimitive);
+Divider.displayName = 'Divider';
+
+const DropZoneContext = React__namespace.createContext('inactive');
+const DropZoneProvider = ({ value, children, }) => {
+    return (React__namespace.createElement(DropZoneContext.Provider, { value: value }, children));
+};
+
+const Container = ({ className, children, testId, isDisabled, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, ...rest }, ref) => {
+    const dragState = React__default["default"].useContext(DropZoneContext);
+    // Don't add drag event handlers if it is disabled.
+    const dragProps = isDisabled
+        ? {}
+        : { onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop };
+    return (React__default["default"].createElement(Field.View, { ...rest, ...dragProps, isDisabled: isDisabled, className: ui.classNames(className, ui.classNameModifierByFlag(ui.ComponentClassName.DropZone, 'rejected', dragState === 'reject'), ui.classNameModifierByFlag(ui.ComponentClassName.DropZone, 'accepted', dragState === 'accept'), ui.classNameModifierByFlag(ui.ComponentClassName.DropZone, 'disabled', isDisabled), ui.ComponentClassName.DropZone), "data-testid": testId, ref: ref }, children));
+};
+const DropZoneContainer = Field.primitiveWithForwardRef(Container);
+DropZoneContainer.displayName = 'DropZoneContainer';
+
+/**
+ * These are syntactic sugar components that make it easy to compose children
+ * in DropZone without having to expose the DropZoneContext.
+ */
+/**
+ * This component renders when the user is dragging ONLY accepted files on the DropZone.
+ */
+const Accepted = ({ children, }) => {
+    const dragState = React__namespace.useContext(DropZoneContext);
+    if (!dragState) {
+        throw new Error('`DropZone.Accept` must be used inside a DropZone');
+    }
+    return dragState === 'accept' ? React__namespace.createElement(React__namespace.Fragment, null, children) : null;
+};
+/**
+ * This component renders when the user is dragging ANY rejected files on the DropZone.
+ */
+const Rejected = ({ children, }) => {
+    const dragState = React__namespace.useContext(DropZoneContext);
+    if (!dragState) {
+        throw new Error('`DropZone.Rejected` must be used inside a DropZone');
+    }
+    return dragState === 'reject' ? React__namespace.createElement(React__namespace.Fragment, null, children) : null;
+};
+/**
+ * This component renders by default when the user is not dragging.
+ */
+const Default = ({ children, }) => {
+    const dragState = React__namespace.useContext(DropZoneContext);
+    if (!dragState) {
+        throw new Error('`DropZone.Default` must be used inside a DropZone');
+    }
+    return dragState === 'inactive' ? React__namespace.createElement(React__namespace.Fragment, null, children) : null;
+};
+
+const DropZonePrimitive = ({ children, testId, isDisabled, acceptedFileTypes, onDropComplete, ...rest }, ref) => {
+    const { dragState, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, } = Field.useDropZone({
+        acceptedFileTypes,
+        onDropComplete,
+        ...rest,
+    });
+    return (React__namespace.createElement(DropZoneProvider, { value: dragState },
+        React__namespace.createElement(DropZoneContainer, { ...rest, testId: testId, isDisabled: isDisabled, onDragStart: onDragStart, onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: onDragOver, ref: ref }, children)));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/dropzone)
+ */
+const DropZone = Object.assign(Field.primitiveWithForwardRef(DropZonePrimitive), {
+    Accepted,
+    Rejected,
+    Default,
+});
+DropZone.displayName = 'DropZone';
+
+const AccordionContext = React__namespace.createContext(undefined);
+const AccordionItemContext = React__namespace.createContext(undefined);
+
+const AccordionItemPrimitive = ({ children, className, value, as = 'details', ...rest }, ref) => {
+    const context = React__namespace.useContext(AccordionContext);
+    const open = value ? context?.value?.includes(value) : undefined;
+    return (React__namespace.createElement(AccordionItemContext.Provider, { value: value },
+        React__namespace.createElement(Field.View, { ...rest, open: open, ref: ref, as: as, className: ui.classNames(ui.ComponentClassName.AccordionItem, className) }, children)));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
+ */
+const AccordionItem = Field.primitiveWithForwardRef(AccordionItemPrimitive);
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionContentPrimitive = ({ className, children, ...rest }, ref) => {
+    return (React__namespace.createElement(Field.View, { ...rest, className: ui.classNames(ui.ComponentClassName.AccordionItemContent, className), ref: ref }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
+ */
+const AccordionContent = Field.primitiveWithForwardRef(AccordionContentPrimitive);
+AccordionContent.displayName = 'Accordion.Content';
+
+const AccordionTriggerPrimitive = ({ children, className, ...rest }, ref) => {
+    const context = React__namespace.useContext(AccordionContext);
+    const value = React__namespace.useContext(AccordionItemContext);
+    const handleOnClick = (e) => {
+        if (ui.isTypedFunction(rest.onClick)) {
+            rest.onClick(e);
+        }
+        if (context?.setValue && value) {
+            e.preventDefault();
+            context.setValue(value);
+        }
+    };
+    return (React__namespace.createElement(Field.View, { ...rest, ref: ref, as: "summary", className: ui.classNames(ui.ComponentClassName.AccordionItemTrigger, className), onClick: handleOnClick }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
+ */
+const AccordionTrigger = Field.primitiveWithForwardRef(AccordionTriggerPrimitive);
+AccordionTrigger.displayName = 'Accordion.Trigger';
+
+const AccordionIconPrimitive = ({ className, as = 'span', ...rest }, ref) => {
+    const icons = Field.useIcons('accordion');
+    return (React__namespace.createElement(Field.View, { ...rest, ref: ref, as: as, className: ui.classNames(ui.ComponentClassName.AccordionItemIcon, className), "aria-hidden": "true" }, icons?.more ?? React__namespace.createElement(Field.IconExpandMore, null)));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
+ */
+const AccordionIcon = Field.primitiveWithForwardRef(AccordionIconPrimitive);
+AccordionIcon.displayName = 'Accordion.Icon';
+
+const AccordionContainerPrimitive = ({ children, className, defaultValue, allowMultiple, preventCollapse, onValueChange, testId, value: controlledValue, ...rest }, ref) => {
+    const isControlled = controlledValue !== undefined;
+    const [localValue, setLocalValue] = React__namespace.useState(() => isControlled ? controlledValue : defaultValue ?? []);
+    const value = isControlled ? controlledValue : localValue;
+    const setValue = React__namespace.useCallback((_value) => {
+        let newValue;
+        // if the value has the incoming value we try to close it by removing it from the array
+        if (value.includes(_value)) {
+            // only remove it from the array if preventCollapse is false/undefined OR
+            // the number of open accordions is more than 1 (so it won't fully collapse anyways)
+            newValue =
+                !preventCollapse || value.length > 1
+                    ? value.filter((v) => v !== _value)
+                    : value;
+        }
+        else {
+            // open the item by adding it to the array if allowMultiple is true
+            // or make it the whole array
+            newValue = allowMultiple ? [...value, _value] : [_value];
+        }
+        if (ui.isFunction(onValueChange)) {
+            onValueChange(newValue);
+        }
+        if (!isControlled) {
+            setLocalValue(newValue);
+        }
+    }, [onValueChange, value, isControlled, allowMultiple, preventCollapse]);
+    const contextValue = React__namespace.useMemo(() => {
+        return {
+            value,
+            setValue,
+        };
+    }, [value, setValue]);
+    return (React__namespace.createElement(AccordionContext.Provider, { value: contextValue },
+        React__namespace.createElement(Field.View, { ...rest, className: ui.classNames(ui.ComponentClassName.Accordion, className), "data-testid": testId, ref: ref }, children)));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
+ */
+const AccordionContainer = Field.primitiveWithForwardRef(AccordionContainerPrimitive);
+AccordionContainer.displayName = 'Accordion.Container';
+
+const AccordionPrimitive = ({ items, ...rest }, ref) => {
+    return (React__namespace.createElement(AccordionContainer, { ref: ref, ...rest }, items?.map(({ content, trigger, value }) => (React__namespace.createElement(AccordionItem, { key: value, value: value },
+        React__namespace.createElement(AccordionTrigger, null,
+            trigger,
+            React__namespace.createElement(AccordionIcon, null)),
+        React__namespace.createElement(AccordionContent, null, content))))));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
+ */
+const Accordion = Object.assign(Field.primitiveWithForwardRef(AccordionPrimitive), {
+    Container: AccordionContainer,
+    Content: AccordionContent,
+    Icon: AccordionIcon,
+    Item: AccordionItem,
+    Trigger: AccordionTrigger,
+});
+Accordion.displayName = 'Accordion';
+
+const FieldsetPrimitive = ({ children, className, isDisabled, legend, legendHidden, size, testId, variation = 'plain', ...rest }, ref) => {
+    const { isFieldsetDisabled } = Field.useFieldset();
+    // Fieldsets that are nested within a disabled Fieldset should
+    // also be disabled.
+    const shouldBeDisabled = isFieldsetDisabled ? isFieldsetDisabled : isDisabled;
+    const value = React__namespace.useMemo(() => ({
+        isFieldsetDisabled: shouldBeDisabled,
+    }), [shouldBeDisabled]);
+    const fieldsetClasses = ui.classNames(ui.ComponentClassName.Fieldset, ui.classNameModifier(ui.ComponentClassName.Fieldset, variation), ui.classNameModifier(ui.ComponentClassName.Fieldset, size), className);
+    const legendClasses = ui.classNames(ui.ComponentClassName.FieldsetLegend, ui.classNameModifier(ui.ComponentClassName.FieldsetLegend, size), {
+        [ui.ComponentClassName.VisuallyHidden]: legendHidden,
+    });
+    return (React__namespace.createElement(Field.FieldsetContext.Provider, { value: value },
+        React__namespace.createElement(Field.Flex, { as: "fieldset", className: fieldsetClasses, ref: ref, disabled: shouldBeDisabled, testId: testId, ...rest },
+            React__namespace.createElement(VisuallyHidden, { as: "legend" }, legend),
+            React__namespace.createElement(Field.View, { as: "div", "aria-hidden": "true", className: legendClasses }, legend),
+            children)));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/fieldset)
+ */
+const Fieldset = Field.primitiveWithForwardRef(FieldsetPrimitive);
+Fieldset.displayName = 'Fieldset';
+
+const headingLevels = {
+    1: 'h1',
+    2: 'h2',
+    3: 'h3',
+    4: 'h4',
+    5: 'h5',
+    6: 'h6',
+};
+const HeadingPrimitive = ({ className, children, isTruncated, level = 6, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: headingLevels[level], className: ui.classNames(ui.ComponentClassName.Heading, ui.classNameModifier(ui.ComponentClassName.Heading, level), ui.classNameModifierByFlag(ui.ComponentClassName.Heading, 'truncated', isTruncated), className), ref: ref, ...rest }, children));
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/heading)
+ */
+const Heading = Field.primitiveWithForwardRef(HeadingPrimitive);
+Heading.displayName = 'Heading';
+
+const ImagePrimitive = ({ className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "img", ref: ref, className: ui.classNames(ui.ComponentClassName.Image, className), ...rest }));
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/image)
+ */
+const Image = Field.primitiveWithForwardRef(ImagePrimitive);
+Image.displayName = 'Image';
+
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
+ */
+const MenuButtonPrimitive = ({ ariaLabel, className, children, isDisabled, isLoading, size, style, type = 'button', variation, testId, ...rest }, ref) => {
+    const { propStyles, nonStyleProps } = Field.useStyles(rest, style);
+    const componentClasses = ui.classNames(ui.ComponentClassName.Button, ui.classNameModifier(ui.ComponentClassName.Button, size), ui.classNameModifier(ui.ComponentClassName.Button, variation), className);
+    return (React__namespace.createElement(Field.Button, { ref: ref, className: componentClasses, disabled: isDisabled ?? isLoading, type: type, testId: testId, "aria-label": ariaLabel, style: propStyles, ...nonStyleProps }, children));
+};
+const MenuButton = Field.primitiveWithForwardRef(MenuButtonPrimitive);
+MenuButton.displayName = 'MenuButton';
+
+// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
+// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
+const { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } = ui.sanitizeNamespaceImport(Dropdown__namespace);
+const MENU_TRIGGER_TEST_ID = 'amplify-menu-trigger-test-id';
+const MENU_ITEMS_GROUP_TEST_ID = 'amplify-menu-items-group-test-id';
+const MenuPrimitive = ({ menuAlign = 'start', children, className, isOpen, size, trigger, triggerClassName, ariaLabel, onOpenChange, ...rest }, ref) => {
+    const icons = Field.useIcons('menu');
+    return (React__namespace.createElement(DropdownMenu, { onOpenChange: onOpenChange, open: isOpen },
+        React__namespace.createElement(DropdownMenuTrigger, { asChild: true }, trigger ?? (React__namespace.createElement(MenuButton, { ariaLabel: ariaLabel, size: size, testId: MENU_TRIGGER_TEST_ID, className: ui.classNames(ui.ComponentClassName.MenuTrigger, triggerClassName) }, icons?.menu ?? React__namespace.createElement(Field.IconMenu, null)))),
+        React__namespace.createElement(DropdownMenuContent, { align: menuAlign, className: ui.ComponentClassName.MenuWrapper },
+            React__namespace.createElement(ButtonGroup, { className: ui.classNames(ui.ComponentClassName.MenuContent, className), ref: ref, size: size, testId: MENU_ITEMS_GROUP_TEST_ID, ...rest }, children))));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
+ */
+const Menu = Field.primitiveWithForwardRef(MenuPrimitive);
+Menu.displayName = 'Menu';
+
+// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
+// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
+const { DropdownMenuItem } = ui.sanitizeNamespaceImport(Dropdown__namespace);
+const MENU_ITEM_TEST_ID = 'amplify-menu-item-test-id';
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
+ */
+const MenuItemPrimitive = ({ children, className, ...rest }, ref) => {
+    return (React__namespace.createElement(DropdownMenuItem, { asChild: true, ref: ref },
+        React__namespace.createElement(MenuButton, { className: ui.classNames(ui.ComponentClassName.MenuItem, className), testId: MENU_ITEM_TEST_ID, ...rest, variation: "menu" // ensures `menu` variation is not overwritten
+         }, children)));
+};
+const MenuItem = Field.primitiveWithForwardRef(MenuItemPrimitive);
+MenuItem.displayName = 'MenuItem';
+
+const MessageHeadingPrimitive = ({ children, className, ...rest }, ref) => {
+    return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.MessageHeading, className), ref: ref, ...rest }, children));
+};
+const MessageHeading = Field.primitiveWithForwardRef(MessageHeadingPrimitive);
+MessageHeading.displayName = 'MessageHeading';
+
+const MessageContext = React__namespace.createContext({
+    dismissed: false,
+    setDismissed: () => { },
+});
+const useMessage = () => React__namespace.useContext(MessageContext);
+
+const MessageIconPrimitive = ({ className, ...rest }, ref) => {
+    const icons = Field.useIcons('message');
+    const { colorTheme } = useMessage();
+    let icon;
+    switch (colorTheme) {
+        case 'info':
+            icon = icons?.info ?? React__namespace.createElement(Field.IconInfo, null);
+            break;
+        case 'error':
+            icon = icons?.error ?? React__namespace.createElement(Field.IconError, null);
+            break;
+        case 'warning':
+            icon = icons?.warning ?? React__namespace.createElement(Field.IconWarning, null);
+            break;
+        case 'success':
+            icon = icons?.success ?? React__namespace.createElement(Field.IconCheckCircle, null);
+            break;
+    }
+    return icon ? (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.MessageIcon, className), "aria-hidden": "true", ref: ref, ...rest }, icon)) : null;
+};
+const MessageIcon = Field.primitiveWithForwardRef(MessageIconPrimitive);
+MessageIcon.displayName = 'MessageIcon';
+
+const MessageDismissPrimitive = ({ onDismiss, dismissLabel, hasIcon = true, children, className, ...rest }, ref) => {
+    const { setDismissed } = useMessage();
+    const icons = Field.useIcons('message');
+    const dismissMessage = React__namespace.useCallback(() => {
+        setDismissed(true);
+        if (ui.isFunction(onDismiss)) {
+            onDismiss();
+        }
+    }, [setDismissed, onDismiss]);
+    return (React__namespace.createElement(Field.Button, { variation: "link", colorTheme: "overlay", className: ui.classNames(ui.ComponentClassName.MessageDismiss, className), ref: ref, onClick: dismissMessage, ...rest },
+        hasIcon ? icons?.close ?? React__namespace.createElement(Field.IconClose, { "aria-hidden": "true" }) : null,
+        children ? (children) : (React__namespace.createElement(VisuallyHidden, null, dismissLabel ? dismissLabel : Field.ComponentText.Message.dismissLabel))));
+};
+const MessageDismiss = Field.primitiveWithForwardRef(MessageDismissPrimitive);
+MessageDismiss.displayName = 'MessageContent';
+
+const MessageContentPrimitive = ({ children, className, ...rest }, ref) => {
+    return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.MessageContent, className), ref: ref, ...rest }, children));
+};
+const MessageContent = Field.primitiveWithForwardRef(MessageContentPrimitive);
+MessageContent.displayName = 'MessageContent';
+
+const MessageContainerPrimitive = ({ children, className, colorTheme = 'neutral', variation = 'filled', ...rest }, ref) => {
+    const [dismissed, setDismissed] = React__namespace.useState(false);
+    const value = React__namespace.useMemo(() => ({
+        colorTheme,
+        dismissed,
+        setDismissed,
+    }), [colorTheme, dismissed]);
+    return (React__namespace.createElement(MessageContext.Provider, { value: value }, !dismissed ? (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Message, ui.classNameModifier(ui.ComponentClassName.Message, variation), ui.classNameModifier(ui.ComponentClassName.Message, colorTheme), className), ref: ref, ...rest }, children)) : null));
+};
+const MessageContainer = Field.primitiveWithForwardRef(MessageContainerPrimitive);
+MessageContainer.displayName = 'MessageContainer';
+
+const MessagePrimitive = ({ children, heading, dismissLabel, isDismissible, onDismiss, hasIcon = true, colorTheme = 'neutral', variation = 'filled', ...rest }, ref) => {
+    return (React__namespace.createElement(MessageContainer, { colorTheme: colorTheme, variation: variation, ref: ref, ...rest },
+        hasIcon ? React__namespace.createElement(MessageIcon, null) : null,
+        React__namespace.createElement(MessageContent, null,
+            heading ? React__namespace.createElement(MessageHeading, null, heading) : null,
+            children),
+        isDismissible ? (React__namespace.createElement(MessageDismiss, { onDismiss: onDismiss, dismissLabel: dismissLabel })) : null));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/message)
+ */
+const Message = Field.primitiveWithForwardRef(MessagePrimitive);
+Message.displayName = 'Message';
+
+const { passwordIsHidden, passwordIsShown, showPassword } = Field.ComponentText.PasswordField;
+const ShowPasswordButtonPrimitive = ({ fieldType, passwordIsHiddenLabel = passwordIsHidden, passwordIsShownLabel = passwordIsShown, showPasswordButtonLabel = showPassword, size, hasError, ...rest }, ref) => {
+    const icons = Field.useIcons('passwordField');
+    const showPasswordButtonClass = ui.classNames(ui.ComponentClassName.FieldShowPassword, ui.classNameModifierByFlag(ui.ComponentClassName.FieldShowPassword, 'error', hasError));
+    const icon = fieldType === 'password'
+        ? icons?.visibility ?? React__namespace.createElement(Field.IconVisibility, { "aria-hidden": "true" })
+        : icons?.visibilityOff ?? React__namespace.createElement(Field.IconVisibilityOff, { "aria-hidden": "true" });
+    return (React__namespace.createElement(Field.Button, { "aria-checked": fieldType !== 'password', ariaLabel: showPasswordButtonLabel, className: showPasswordButtonClass, ref: ref, role: "switch", size: size, ...rest },
+        React__namespace.createElement(VisuallyHidden, { "aria-live": "polite" }, fieldType === 'password'
+            ? passwordIsHiddenLabel
+            : passwordIsShownLabel),
+        icon));
+};
+const ShowPasswordButton = Field.primitiveWithForwardRef(ShowPasswordButtonPrimitive);
+ShowPasswordButton.displayName = 'ShowPasswordButton';
+
+const PasswordFieldPrimitive = ({ autoComplete = 'current-password', label, className, hideShowPassword = false, passwordIsHiddenLabel, passwordIsShownLabel, showPasswordButtonLabel, showPasswordButtonRef, size, hasError, ...rest }, ref) => {
+    const [type, setType] = React__namespace.useState('password');
+    const showPasswordOnClick = React__namespace.useCallback(() => {
+        if (type === 'password') {
+            setType('text');
+        }
+        else {
+            setType('password');
+        }
+    }, [setType, type]);
+    return (React__namespace.createElement(TextField, { autoComplete: autoComplete, outerEndComponent: hideShowPassword ? null : (React__namespace.createElement(ShowPasswordButton, { fieldType: type, onClick: showPasswordOnClick, passwordIsHiddenLabel: passwordIsHiddenLabel, passwordIsShownLabel: passwordIsShownLabel, ref: showPasswordButtonRef, size: size, showPasswordButtonLabel: showPasswordButtonLabel, hasError: hasError })), size: size, type: type, label: label, className: ui.classNames(ui.ComponentClassName.PasswordField, className), ref: ref, hasError: hasError, ...rest }));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/passwordfield)
+ */
+const PasswordField = Field.primitiveWithForwardRef(PasswordFieldPrimitive);
+PasswordField.displayName = 'PasswordField';
+
+const SelectPrimitive = ({ autoComplete, className, size, variation, value, defaultValue, hasError, icon, iconColor, children, placeholder, isDisabled, isRequired, isMultiple = false, selectSize = 1, ...rest }, ref) => {
+    const DEFAULT_PLACEHOLDER_VALUE = '';
+    // value === undefined is to make sure that component is used in uncontrolled way so that setting defaultValue is valid
+    const shouldSetDefaultPlaceholderValue = value === undefined && defaultValue === undefined && placeholder;
+    const isExpanded = isMultiple || selectSize > 1;
+    const componentClasses = ui.classNames(ui.ComponentClassName.Select, ui.ComponentClassName.FieldGroupControl, ui.classNameModifier(ui.ComponentClassName.Select, size), ui.classNameModifier(ui.ComponentClassName.Select, variation), ui.classNameModifierByFlag(ui.ComponentClassName.Select, 'error', hasError), ui.classNameModifierByFlag(ui.ComponentClassName.Select, 'expanded', isExpanded), className);
+    const icons = Field.useIcons('select');
+    const { isFieldsetDisabled } = Field.useFieldset();
+    return (React__namespace.createElement(Field.View, { className: ui.ComponentClassName.SelectWrapper },
+        React__namespace.createElement(Field.View, { "aria-invalid": hasError, as: "select", autoComplete: autoComplete, value: value, defaultValue: shouldSetDefaultPlaceholderValue
+                ? DEFAULT_PLACEHOLDER_VALUE
+                : defaultValue, isDisabled: isFieldsetDisabled ? isFieldsetDisabled : isDisabled, multiple: isMultiple, size: selectSize, required: isRequired, className: componentClasses, ref: ref, ...rest },
+            placeholder && React__namespace.createElement("option", { value: "" }, placeholder),
+            children),
+        isExpanded ? null : (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.SelectIcon, ui.classNameModifier(ui.ComponentClassName.SelectIcon, size)), color: iconColor }, icon ?? icons?.expand ?? React__namespace.createElement(Field.IconExpandMore, null)))));
+};
+const Select = Field.primitiveWithForwardRef(SelectPrimitive);
+Select.displayName = 'Select';
+
+const selectFieldChildren = ({ children, options, }) => {
+    if (children) {
+        if (options?.length) {
+            // eslint-disable-next-line no-console
+            console.warn('Amplify UI: <SelectField> component  defaults to rendering children over `options`. When using the `options` prop, omit children.');
+        }
+        return children;
+    }
+    return options?.map((option, index) => (React__namespace.createElement("option", { label: option, value: option, key: `${option}-${index}` }, option)));
+};
+const SelectFieldPrimitive = (props, ref) => {
+    const { children, className, descriptiveText, errorMessage, hasError = false, id, label, labelHidden = false, options, size, testId, inputStyles, ..._rest } = props;
+    const fieldId = useStableId(id);
+    const descriptionId = useStableId();
+    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const { styleProps, rest } = splitPrimitiveProps(_rest);
+    return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Field, ui.classNameModifier(ui.ComponentClassName.Field, size), ui.ComponentClassName.SelectField, className), testId: testId, ...styleProps },
+        React__namespace.createElement(Field.Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
+        React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
+        React__namespace.createElement(Select, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, size: size, ...rest, ...inputStyles }, selectFieldChildren({ children, options })),
+        React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/selectfield)
+ */
+const SelectField = Field.primitiveWithForwardRef(SelectFieldPrimitive);
+SelectField.displayName = 'SelectField';
+
+const DialCodeSelectPrimitive = ({ className, dialCodeList, isReadOnly, ...props }, ref) => {
+    const dialList = dialCodeList ?? ui.countryDialCodes;
+    const dialCodeOptions = React__namespace.useMemo(() => dialList.map((dialCode) => (
+    // Regarding the `disabled` attribute, see comment in SelectField below
+    React__namespace.createElement("option", { key: dialCode, value: dialCode, disabled: isReadOnly }, dialCode))), [dialList, isReadOnly]);
+    return (React__namespace.createElement(SelectField
+    /*
+        Since <select> elements do not support the `readonly` html attribute, it is suggested to use the `disabled` html attribute
+        so that a screen reader will announce something to the user about the interactivity of the options list ( https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+      */
+    , { "aria-disabled": isReadOnly, autoComplete: "tel-country-code", className: ui.classNames(ui.ComponentClassName.CountryCodeSelect, ui.ComponentClassName.DialCodeSelect, className), labelHidden: true, ref: ref, ...props }, dialCodeOptions));
+};
+const DialCodeSelect = Field.primitiveWithForwardRef(DialCodeSelectPrimitive);
+DialCodeSelect.displayName = 'DialCodeSelect';
+
+const PhoneNumberFieldPrimitive = ({ autoComplete = 'tel-national', className, defaultDialCode, dialCodeLabel = Field.ComponentText.PhoneNumberField.countryCodeLabel, dialCodeList, dialCodeName, dialCodeRef, hasError, isDisabled, isReadOnly, onDialCodeChange, onInput, size, variation, ...rest }, ref) => {
+    return (React__namespace.createElement(TextField, { outerStartComponent: React__namespace.createElement(DialCodeSelect, { defaultValue: defaultDialCode, dialCodeList: dialCodeList, className: className, hasError: hasError, isDisabled: isDisabled, isReadOnly: isReadOnly, label: dialCodeLabel, name: dialCodeName, onChange: onDialCodeChange, ref: dialCodeRef, size: size, variation: variation }), autoComplete: autoComplete, className: ui.classNames(ui.ComponentClassName.PhoneNumberField, className), hasError: hasError, isDisabled: isDisabled, isReadOnly: isReadOnly, onInput: onInput, ref: ref, size: size, type: "tel", variation: variation, ...rest }));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/phonenumberfield)
+ */
+const PhoneNumberField = Field.primitiveWithForwardRef(PhoneNumberFieldPrimitive);
+PhoneNumberField.displayName = 'PhoneNumberField';
+
+const PlaceholderPrimitive = ({ className, children, isLoaded, size, ...rest }, ref) => {
+    if (isLoaded) {
+        return React__namespace.createElement(React__namespace.Fragment, null, children);
+    }
+    return (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.Placeholder, ui.classNameModifier(ui.ComponentClassName.Placeholder, size), className), ref: ref, ...rest }));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/placeholder)
+ */
+const Placeholder = Field.primitiveWithForwardRef(PlaceholderPrimitive);
+Placeholder.displayName = 'Placeholder';
+
+const defaultValue = { name: 'default' };
+const RadioGroupContext = React__default["default"].createContext(defaultValue);
+const useRadioGroupContext = () => {
+    return React.useContext(RadioGroupContext);
+};
+
+const RadioPrimitive = ({ children, className, id, isDisabled = false, testId, value, labelPosition: radioLabelPosition, ...rest }, ref) => {
+    const { currentValue, defaultValue, name, hasError, isGroupDisabled = false, isRequired, isReadOnly, onChange, size, labelPosition: groupLabelPosition, } = useRadioGroupContext();
+    const { isFieldsetDisabled } = Field.useFieldset();
+    const shouldBeDisabled = isFieldsetDisabled
+        ? isFieldsetDisabled
+        : isGroupDisabled || isDisabled || (isReadOnly && defaultValue !== value);
+    // for controlled component
+    const checked = currentValue !== undefined ? value === currentValue : undefined;
+    // for uncontrolled component
+    const defaultChecked = defaultValue !== undefined ? value === defaultValue : undefined;
+    const labelPosition = radioLabelPosition
+        ? radioLabelPosition
+        : groupLabelPosition;
+    return (React__namespace.createElement(Field.Flex, { as: "label", className: ui.classNames(ui.ComponentClassName.Radio, ui.classNameModifierByFlag(ui.ComponentClassName.Radio, `disabled`, shouldBeDisabled), labelPosition ? `amplify-label-${labelPosition}` : null, className) },
+        children && (React__namespace.createElement(Field.Text, { as: "span", className: ui.classNames(ui.ComponentClassName.RadioLabel, ui.classNameModifierByFlag(ui.ComponentClassName.RadioLabel, `disabled`, shouldBeDisabled)) }, children)),
+        React__namespace.createElement(Input, { checked: checked, className: ui.classNames(ui.ComponentClassName.VisuallyHidden, ui.ComponentClassName.RadioInput), defaultChecked: defaultChecked, hasError: hasError, id: id, isDisabled: shouldBeDisabled, isReadOnly: isReadOnly, isRequired: isRequired, onChange: onChange, ref: ref, type: "radio", name: name, value: value, ...rest }),
+        React__namespace.createElement(Field.Flex, { "aria-hidden": "true", as: "span", className: ui.classNames(ui.ComponentClassName.RadioButton, ui.classNameModifier(ui.ComponentClassName.RadioButton, size)), testId: testId })));
+};
+const Radio = Field.primitiveWithForwardRef(RadioPrimitive);
+Radio.displayName = 'Radio';
+
+const RadioGroupFieldPrimitive = ({ children, className, defaultValue, descriptiveText, errorMessage, hasError = false, id, isDisabled, isRequired, isReadOnly, legend, legendHidden = false, labelPosition, onChange, name, size, testId, value, variation, ...rest }, ref) => {
+    const fieldId = useStableId(id);
+    const descriptionId = useStableId();
+    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const radioGroupTestId = getTestId(testId, ui.ComponentClassName.RadioGroup);
+    const radioGroupContextValue = React__namespace.useMemo(() => ({
+        currentValue: value,
+        defaultValue,
+        hasError,
+        isRequired,
+        isReadOnly,
+        isGroupDisabled: isDisabled,
+        onChange,
+        size,
+        name,
+        labelPosition,
+    }), [
+        defaultValue,
+        hasError,
+        isDisabled,
+        isRequired,
+        isReadOnly,
+        onChange,
+        size,
+        name,
+        value,
+        labelPosition,
+    ]);
+    return (React__namespace.createElement(Fieldset, { className: ui.classNames(ui.ComponentClassName.Field, ui.classNameModifier(ui.ComponentClassName.Field, size), ui.ComponentClassName.RadioGroupField, className), isDisabled: isDisabled, legend: legend, legendHidden: legendHidden, ref: ref, role: "radiogroup", size: size, testId: testId, variation: variation, ...rest },
+        React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: legendHidden, descriptiveText: descriptiveText }),
+        React__namespace.createElement(Field.Flex, { "aria-describedby": ariaDescribedBy, className: ui.ComponentClassName.RadioGroup, id: fieldId, testId: radioGroupTestId },
+            React__namespace.createElement(RadioGroupContext.Provider, { value: radioGroupContextValue }, children)),
+        React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/radiogroupfield)
+ */
+const RadioGroupField = Field.primitiveWithForwardRef(RadioGroupFieldPrimitive);
+RadioGroupField.displayName = 'RadioGroupField';
+
+const isIconFilled = (currentIconIndex, ratingValue) => {
+    if (currentIconIndex <= ratingValue)
+        return true;
+    return false;
+};
+const isIconEmpty = (currentIconIndex, ratingValue) => {
+    if (currentIconIndex - 1 >= ratingValue)
+        return true;
+    return false;
+};
+const isIconMixed = (currentIconIndex, ratingValue) => {
+    if (currentIconIndex > ratingValue && currentIconIndex - 1 < ratingValue) {
+        return true;
+    }
+    return false;
+};
+
+const RatingIcon = ({ icon, fill, className, }) => {
+    return (React__namespace.createElement(Field.View, { as: "span", className: ui.ComponentClassName.RatingItem, "aria-hidden": "true" },
+        React__namespace.createElement(Field.View, { as: "span", className: ui.classNames(className), color: fill }, icon)));
+};
+RatingIcon.displayName = 'RatingIcon';
+
+const RatingMixedIcon = ({ emptyColor, emptyIcon, fillColor, fillIcon, value, }) => {
+    const widthPercentage = `${(value % 1) * 100}%`;
+    return (React__namespace.createElement(Field.View, { as: "span", className: ui.ComponentClassName.RatingItem, "aria-hidden": "true" },
+        React__namespace.createElement(Field.View, { as: "span", className: ui.classNames(ui.ComponentClassName.RatingIcon, ui.classNameModifier(ui.ComponentClassName.RatingIcon, 'empty')), color: emptyColor }, emptyIcon),
+        React__namespace.createElement(Field.View, { as: "span", className: ui.classNames(ui.ComponentClassName.RatingIcon, ui.classNameModifier(ui.ComponentClassName.RatingIcon, 'filled')), width: widthPercentage, color: fillColor }, fillIcon)));
+};
+RatingMixedIcon.displayName = 'RatingMixedIcon';
+
+const RATING_DEFAULT_MAX_VALUE = 5;
+const RATING_DEFAULT_VALUE = 0;
+const RatingPrimitive = ({ className, emptyColor, emptyIcon, fillColor, icon, maxValue = RATING_DEFAULT_MAX_VALUE, size, value = RATING_DEFAULT_VALUE, ...rest }, ref) => {
+    const icons = Field.useIcons('rating');
+    const filledIcon = icon ?? icons?.filled ?? React__namespace.createElement(Field.IconStar, null);
+    const _emptyIcon = emptyIcon ?? icon ?? icons?.empty ?? React__namespace.createElement(Field.IconStar, null);
+    const items = new Array(Math.ceil(maxValue)).fill(1).map((_, index) => {
+        const currentIconIndex = index + 1;
+        if (isIconFilled(currentIconIndex, value))
+            return (React__namespace.createElement(RatingIcon, { key: index.toString(), icon: filledIcon, fill: fillColor, className: ui.classNameModifier(ui.ComponentClassName.RatingIcon, 'filled') }));
+        if (isIconEmpty(currentIconIndex, value))
+            return (React__namespace.createElement(RatingIcon, { key: index.toString(), icon: _emptyIcon, fill: emptyColor, className: ui.classNameModifier(ui.ComponentClassName.RatingIcon, 'empty') }));
+        if (isIconMixed(currentIconIndex, value))
+            return (React__namespace.createElement(RatingMixedIcon, { key: index.toString(), fillIcon: filledIcon, emptyIcon: _emptyIcon, value: value, fillColor: fillColor, emptyColor: emptyColor }));
+    });
+    return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Rating, ui.classNameModifier(ui.ComponentClassName.Rating, size), className), ref: ref, ...rest },
+        items,
+        React__namespace.createElement(VisuallyHidden, null,
+            value,
+            " out of ",
+            maxValue,
+            " rating")));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/rating)
+ */
+const Rating = Field.primitiveWithForwardRef(RatingPrimitive);
+Rating.displayName = 'Rating';
+
+// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
+// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
+const { Range, Root, Thumb, Track } = ui.sanitizeNamespaceImport(RadixSlider__namespace);
+const SLIDER_LABEL_TEST_ID = 'slider-label';
+const SLIDER_ROOT_TEST_ID = 'slider-root';
+const SLIDER_TRACK_TEST_ID = 'slider-track';
+const SLIDER_RANGE_TEST_ID = 'slider-range';
+const SliderFieldPrimitive = ({ ariaValuetext, className, defaultValue = 0, descriptiveText, emptyTrackColor, errorMessage, filledTrackColor, formatValue, hasError = false, id, isDisabled, isValueHidden = false, label, labelHidden = false, onChange, orientation = 'horizontal', outerEndComponent, outerStartComponent, testId, thumbColor, trackSize, value, size, ..._rest }, ref) => {
+    const { isFieldsetDisabled } = Field.useFieldset();
+    const fieldId = useStableId(id);
+    const labelId = useStableId();
+    const descriptionId = useStableId();
+    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const disabled = isFieldsetDisabled ? isFieldsetDisabled : isDisabled;
+    const { styleProps, rest } = splitPrimitiveProps(_rest);
+    const isControlled = value !== undefined;
+    const [currentValue, setCurrentValue] = React__namespace.useState(isControlled ? value : defaultValue);
+    const values = isControlled ? [value] : undefined;
+    const defaultValues = !isControlled ? [defaultValue] : undefined;
+    const onValueChange = React__namespace.useCallback((value) => {
+        setCurrentValue(value[0]);
+        if (ui.isFunction(onChange)) {
+            // Do not have multiple thumbs support yet
+            onChange(value[0]);
+        }
+    }, [onChange]);
+    const renderedValue = React__namespace.useMemo(() => {
+        const formattedValue = ui.isFunction(formatValue)
+            ? formatValue(currentValue)
+            : currentValue;
+        return typeof formatValue === 'string' ? (React__namespace.createElement(Field.View, { as: "span" }, formattedValue)) : (formattedValue);
+    }, [currentValue, formatValue]);
+    const isVertical = orientation === 'vertical';
+    const componentClasses = ui.classNames(ui.ComponentClassName.SliderFieldTrack, ui.classNameModifier(ui.ComponentClassName.SliderFieldTrack, orientation), ui.classNameModifier(ui.ComponentClassName.SliderFieldTrack, size));
+    const rootComponentClasses = ui.classNames(ui.ComponentClassName.SliderFieldRoot, ui.classNameModifier(ui.ComponentClassName.SliderFieldRoot, orientation), ui.classNameModifier(ui.ComponentClassName.SliderFieldRoot, size), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldRoot, 'disabled', disabled), className);
+    return (React__namespace.createElement(Field.Flex
+    // Custom classnames will be added to Root below
+    , { 
+        // Custom classnames will be added to Root below
+        className: ui.classNames(ui.ComponentClassName.Field, ui.classNameModifier(ui.ComponentClassName.Field, size), ui.ComponentClassName.SliderField), testId: testId, ...styleProps },
+        React__namespace.createElement(Field.Label, { className: ui.ComponentClassName.SliderFieldLabel, id: labelId, testId: SLIDER_LABEL_TEST_ID, visuallyHidden: labelHidden },
+            React__namespace.createElement(Field.View, { as: "span" }, label),
+            !isValueHidden ? renderedValue : null),
+        React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
+        React__namespace.createElement(FieldGroup, { className: ui.ComponentClassName.SliderFieldGroup, id: fieldId, orientation: orientation, outerStartComponent: outerStartComponent, outerEndComponent: outerEndComponent },
+            React__namespace.createElement(Root, { className: rootComponentClasses, "data-testid": SLIDER_ROOT_TEST_ID, disabled: disabled, defaultValue: defaultValues, onValueChange: onValueChange, orientation: orientation, ref: ref, value: values, ...rest },
+                React__namespace.createElement(Track, { className: componentClasses, "data-testid": SLIDER_TRACK_TEST_ID, style: {
+                        backgroundColor: String(emptyTrackColor),
+                        [`${isVertical ? 'width' : 'height'}`]: trackSize,
+                    } },
+                    React__namespace.createElement(Range, { className: ui.classNames(ui.ComponentClassName.SliderFieldRange, ui.classNameModifier(ui.ComponentClassName.SliderFieldRange, orientation), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldRange, 'disabled', disabled)), "data-testid": SLIDER_RANGE_TEST_ID, style: { backgroundColor: String(filledTrackColor) } })),
+                React__namespace.createElement(Thumb, { "aria-describedby": ariaDescribedBy, "aria-labelledby": labelId, "aria-valuetext": ariaValuetext, className: ui.classNames(ui.ComponentClassName.SliderFieldThumb, ui.classNameModifier(ui.ComponentClassName.SliderFieldThumb, size), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldThumb, 'disabled', disabled)), style: { backgroundColor: String(thumbColor) } }))),
+        React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/sliderfield)
+ */
+const SliderField = Field.primitiveWithForwardRef(SliderFieldPrimitive);
+SliderField.displayName = 'SliderField';
+
+const getCorrectSteppingValue = ({ max, min, step, value, }) => {
+    // Round it to the closest step value
+    // It will be based off min to be consistent with native input[type="number"]
+    // This allows keyboard accessible
+    const remainder = (value - min) % step;
+    value = value - remainder + Math.round(remainder / step) * step;
+    // Make sure new value is not outside the bound
+    value = Math.max(min, value);
+    if (value > max) {
+        value = max - ((max - min) % step);
+    }
+    return value;
+};
+const useStepper = ({ defaultValue = 0, value: controlledValue, step = 1, max = Number.MAX_SAFE_INTEGER, min = Number.MIN_SAFE_INTEGER, isDisabled, isReadOnly, onChange, onDecrease, onIncrease, onStepChange, }) => {
+    const isControlled = controlledValue !== undefined;
+    // Make sure max value is greater than or equal to min value
+    max = Math.max(min, max);
+    // Maintain an internal state for uncontrolled components
+    // This allows to take over the input value and correct any invalid versus purely relying on the native uncontrolled input
+    const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(() => 
+    // This is required for users could provide any defaultValue
+    getCorrectSteppingValue({ min, max, step, value: defaultValue }));
+    // Same for controlled components on the first render because users could provide invalid initial value.
+    // It seems redundant afterwards but necessary for the first render
+    const value = isControlled
+        ? getCorrectSteppingValue({ min, max, step, value: controlledValue })
+        : uncontrolledValue;
+    const shouldDisableIncreaseButton = isDisabled ?? isReadOnly ?? value + step > max;
+    const shouldDisableDecreaseButton = isDisabled ?? isReadOnly ?? value - step < min;
+    // This is the exact value to be rendered on screen
+    // It could be a string, like '-' or empty string when users clear the input
+    const [inputValue, setInputValue] = React__namespace.useState(value);
+    const handleOnChange = React__namespace.useCallback((event) => {
+        setInputValue(event.target.value);
+        if (ui.isFunction(onChange)) {
+            onChange(event);
+        }
+    }, [onChange]);
+    const handleOnBlur = React__namespace.useCallback((event) => {
+        const parsedValue = parseFloat(event.target.value);
+        // Though input[type='number'] has built-in validation to reject non-numerical entries
+        // The entered value could still be empty string or minus '-'
+        // in these cases, no need to do the following validation
+        if (isNaN(parsedValue)) {
+            return;
+        }
+        const newValue = getCorrectSteppingValue({
+            min,
+            max,
+            step,
+            value: parsedValue,
+        });
+        if (!isControlled) {
+            setUncontrolledValue(newValue);
+        }
+        if (ui.isFunction(onStepChange)) {
+            onStepChange(newValue);
+        }
+        setInputValue(newValue);
+    }, [min, max, step, isControlled, onStepChange]);
+    const handleIncrease = React__namespace.useCallback(() => {
+        // No need to check if the value will be outside the bounds
+        // The button will be disabled if so
+        if (!isControlled) {
+            setUncontrolledValue(value + step);
+        }
+        if (ui.isFunction(onStepChange)) {
+            onStepChange(value + step);
+        }
+        if (ui.isFunction(onIncrease)) {
+            onIncrease();
+        }
+        setInputValue(value + step);
+    }, [step, value, isControlled, onIncrease, onStepChange]);
+    const handleDecrease = React__namespace.useCallback(() => {
+        // No need to check if the value will be outside the bounds
+        // The button will be disabled if so
+        if (!isControlled) {
+            setUncontrolledValue(value - step);
+        }
+        if (ui.isFunction(onStepChange)) {
+            onStepChange(value - step);
+        }
+        if (ui.isFunction(onDecrease)) {
+            onDecrease();
+        }
+        setInputValue(value - step);
+    }, [step, value, isControlled, onDecrease, onStepChange]);
+    // This aims to disable unwanted behaviors on React input[type='number']
+    // When the input gets focused, rotating a wheel will change its value
+    // But the parent container(mostly the entire window) will be scrolling to elsewhere
+    const handleOnWheel = React__namespace.useCallback((event) => {
+        event.currentTarget.blur();
+    }, []);
+    return {
+        step,
+        value,
+        inputValue,
+        handleDecrease,
+        handleIncrease,
+        handleOnBlur,
+        handleOnChange,
+        handleOnWheel,
+        setInputValue,
+        shouldDisableDecreaseButton,
+        shouldDisableIncreaseButton,
+    };
+};
+
+const DECREASE_ICON = 'decrease-icon';
+const INCREASE_ICON = 'increase-icon';
+const StepperFieldPrimitive = (props, ref) => {
+    const { className, 
+    // destructure to prevent `defaultValue` from being passed to underlying `Input` via `_rest`
+    defaultValue, descriptiveText, errorMessage, hasError = false, id, inputStyles, isDisabled, isReadOnly, isRequired, increaseButtonLabel = Field.ComponentText.StepperField.increaseButtonLabel, decreaseButtonLabel = Field.ComponentText.StepperField.decreaseButtonLabel, label, labelHidden = false, 
+    // destructure to prevent `onStepChange` from being passed to underlying `Input` via `_rest`
+    onStepChange, size, testId, 
+    // this is only required in useStepper hook but deconstruct here to remove its existence in rest
+    value: controlledValue, variation, ..._rest } = props;
+    const fieldId = useStableId(id);
+    const descriptionId = useStableId();
+    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const { styleProps, rest } = splitPrimitiveProps(_rest);
+    const icons = Field.useIcons('stepperField');
+    const { step, value, inputValue, handleDecrease, handleIncrease, handleOnBlur, handleOnChange, handleOnWheel, setInputValue, shouldDisableDecreaseButton, shouldDisableIncreaseButton, } = useStepper({ ...props, defaultValue, onStepChange });
+    React__namespace.useEffect(() => {
+        const isControlled = controlledValue !== undefined;
+        if (isControlled) {
+            setInputValue(controlledValue);
+        }
+    }, [controlledValue, setInputValue]);
+    return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Field, ui.classNameModifier(ui.ComponentClassName.Field, size), ui.ComponentClassName.StepperField, className), testId: testId, ...styleProps },
+        React__namespace.createElement(Field.Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
+        React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
+        React__namespace.createElement(FieldGroup, { outerStartComponent: React__namespace.createElement(Field.FieldGroupIconButton, { "aria-controls": fieldId, ariaLabel: `${decreaseButtonLabel} ${value - step}`, className: ui.classNames(ui.ComponentClassName.StepperFieldButtonDecrease, ui.classNameModifier(ui.ComponentClassName.StepperFieldButtonDecrease, variation), ui.classNameModifierByFlag(ui.ComponentClassName.StepperFieldButtonDecrease, 'disabled', shouldDisableDecreaseButton)), "data-invalid": hasError, isDisabled: shouldDisableDecreaseButton, onClick: handleDecrease, size: size }, icons?.remove ?? React__namespace.createElement(Field.IconRemove, { "data-testid": DECREASE_ICON })), outerEndComponent: React__namespace.createElement(Field.FieldGroupIconButton, { "aria-controls": fieldId, ariaLabel: `${increaseButtonLabel} ${value + step}`, className: ui.classNames(ui.ComponentClassName.StepperFieldButtonIncrease, ui.classNameModifier(ui.ComponentClassName.StepperFieldButtonIncrease, variation), ui.classNameModifierByFlag(ui.ComponentClassName.StepperFieldButtonIncrease, 'disabled', shouldDisableIncreaseButton)), "data-invalid": hasError, isDisabled: shouldDisableIncreaseButton, onClick: handleIncrease, size: size }, icons?.add ?? React__namespace.createElement(Field.IconAdd, { "data-testid": INCREASE_ICON })) },
+            React__namespace.createElement(Input, { "aria-describedby": ariaDescribedBy, className: ui.ComponentClassName.StepperFieldInput, hasError: hasError, id: fieldId, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, onBlur: handleOnBlur, onChange: handleOnChange, onWheel: handleOnWheel, ref: ref, size: size, variation: variation, type: "number", value: inputValue, ...inputStyles, ...rest })),
+        React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/stepperfield)
+ */
+const StepperField = Field.primitiveWithForwardRef(StepperFieldPrimitive);
+StepperField.displayName = 'StepperField';
+
+const useSwitch = (props) => {
+    const { onChange, isChecked, defaultChecked, isDisabled } = props;
+    const isControlled = typeof isChecked !== 'undefined';
+    const [isOn, setIsOn] = React.useState(isControlled ? isChecked : !!defaultChecked);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const changeHandler = React.useCallback((event) => {
+        if (isDisabled) {
+            event.preventDefault();
+            return;
+        }
+        if (ui.isFunction(onChange)) {
+            onChange(event);
+        }
+        setIsOn(event.target.checked);
+    }, [onChange, isDisabled]);
+    if (isControlled && isOn !== isChecked) {
+        setIsOn(isChecked);
+    }
+    return {
+        isOn,
+        changeHandler,
+        isFocused,
+        setIsFocused,
+    };
+};
+
+const SwitchFieldPrimitive = ({ className, defaultChecked, id, isChecked, isDisabled, isLabelHidden, label, labelPosition, name, onChange, size, thumbColor, trackCheckedColor, trackColor, value, hasError, errorMessage, ...rest }, ref) => {
+    const { isOn, changeHandler, isFocused, setIsFocused } = useSwitch({
+        onChange,
+        isChecked,
+        defaultChecked,
+        isDisabled,
+    });
+    const { isFieldsetDisabled } = Field.useFieldset();
+    const shouldBeDisabled = isFieldsetDisabled ? isFieldsetDisabled : isDisabled;
+    const fieldId = useStableId(id);
+    const wrapperClasses = ui.classNames(ui.ComponentClassName.SwitchTrack, ui.classNameModifierByFlag(ui.ComponentClassName.SwitchTrack, 'checked', isOn), ui.classNameModifierByFlag(ui.ComponentClassName.SwitchTrack, 'disabled', shouldBeDisabled), ui.classNameModifierByFlag(ui.ComponentClassName.SwitchTrack, 'focused', isFocused), ui.classNameModifierByFlag(ui.ComponentClassName.SwitchTrack, 'error', hasError));
+    const componentClasses = ui.classNames(ui.ComponentClassName.SwitchThumb, ui.classNameModifierByFlag(ui.ComponentClassName.SwitchThumb, 'checked', isOn), ui.classNameModifierByFlag(ui.ComponentClassName.SwitchThumb, 'disabled', shouldBeDisabled));
+    return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.SwitchField, ui.classNameModifier(ui.ComponentClassName.SwitchField, size), labelPosition ? `amplify-label-${labelPosition}` : null, className), ref: ref, ...rest },
+        React__namespace.createElement(VisuallyHidden, null,
+            React__namespace.createElement(Input, { role: "switch", type: "checkbox", id: fieldId, onChange: changeHandler, disabled: isDisabled, name: name, checked: isOn, value: value, onFocus: () => {
+                    setIsFocused(true);
+                }, onBlur: () => {
+                    setIsFocused(false);
+                } })),
+        React__namespace.createElement(Field.Label, { htmlFor: fieldId, className: ui.classNames(ui.ComponentClassName.SwitchWrapper, ui.classNameModifier(ui.ComponentClassName.SwitchWrapper, labelPosition)) },
+            isLabelHidden ? (React__namespace.createElement(VisuallyHidden, { as: "span", className: ui.ComponentClassName.SwitchLabel }, label)) : (React__namespace.createElement(Field.View, { as: "span", className: ui.ComponentClassName.SwitchLabel }, label)),
+            React__namespace.createElement(Field.View, { as: "span", className: wrapperClasses, backgroundColor: isOn ? trackCheckedColor : trackColor },
+                React__namespace.createElement(Field.View, { as: "span", className: componentClasses, "data-checked": isOn, "data-disabled": shouldBeDisabled, backgroundColor: thumbColor }))),
+        React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/switchfield)
+ */
+const SwitchField = Field.primitiveWithForwardRef(SwitchFieldPrimitive);
+SwitchField.displayName = 'SwitchField';
+
+const TablePrimitive = ({ caption, children, className, highlightOnHover = false, size, variation, ...rest }, ref) => {
+    const componentClasses = ui.classNames(ui.ComponentClassName.Table, ui.classNameModifier(ui.ComponentClassName.Table, size), ui.classNameModifier(ui.ComponentClassName.Table, variation), className);
+    return (React__namespace.createElement(Field.View, { as: "table", className: componentClasses, "data-highlightonhover": highlightOnHover, ref: ref, ...rest },
+        caption && (React__namespace.createElement(Field.View, { as: "caption", className: ui.ComponentClassName.TableCaption }, caption)),
+        children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/table)
+ */
+const Table = Field.primitiveWithForwardRef(TablePrimitive);
+Table.displayName = 'Table';
+
+const TableBodyPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "tbody", className: ui.classNames(ui.ComponentClassName.TableBody, className), ref: ref, ...rest }, children));
+const TableBody = Field.primitiveWithForwardRef(TableBodyPrimitive);
+TableBody.displayName = 'TableBody';
+
+const TableCellPrimitive = ({ as: asElementTag = 'td', children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: asElementTag, className: ui.classNames(asElementTag === 'td'
+        ? ui.ComponentClassName.TableTd
+        : ui.ComponentClassName.TableTh, className), ref: ref, ...rest }, children));
+const TableCell = Field.primitiveWithForwardRef(TableCellPrimitive);
+TableCell.displayName = 'TableCell';
+
+const TableFootPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "tfoot", className: ui.classNames(ui.ComponentClassName.TableFoot, className), ref: ref, ...rest }, children));
+const TableFoot = Field.primitiveWithForwardRef(TableFootPrimitive);
+TableFoot.displayName = 'TableFoot';
+
+const TableHeadPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "thead", className: ui.classNames(ui.ComponentClassName.TableHead, className), ref: ref, ...rest }, children));
+const TableHead = Field.primitiveWithForwardRef(TableHeadPrimitive);
+TableHead.displayName = 'TableHead';
+
+const TableRowPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "tr", className: ui.classNames(ui.ComponentClassName.TableRow, className), ref: ref, ...rest }, children));
+const TableRow = Field.primitiveWithForwardRef(TableRowPrimitive);
+TableRow.displayName = 'TableRow';
+
+const TabsContext = React__namespace.createContext({
+    activeTab: '',
+    setActiveTab: () => { },
+});
+
+const TabsItemPrimitive = ({ className, value, children, onClick, as = 'button', role = 'tab', ...rest }, ref) => {
+    const { activeTab, setActiveTab } = React__namespace.useContext(TabsContext);
+    const isActive = activeTab === value;
+    const handleOnClick = (e) => {
+        if (ui.isTypedFunction(onClick)) {
+            onClick?.(e);
+        }
+        setActiveTab(value);
+    };
+    return (React__namespace.createElement(Field.View, { ...rest, role: role, as: as, id: `${value}-tab`, "aria-selected": isActive, "aria-controls": `${value}-panel`, tabIndex: !isActive ? -1 : undefined, className: ui.classNames(ui.ComponentClassName.TabsItem, ui.classNameModifierByFlag(ui.ComponentClassName.TabsItem, 'active', activeTab === value), className), ref: ref, onClick: handleOnClick }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
+ */
+const TabsItem = Field.primitiveWithForwardRef(TabsItemPrimitive);
+TabsItem.displayName = 'Tabs.Item';
+
+const isValidTab = (child) => React__namespace.isValidElement(child);
+const TabListPrimitive = ({ className, children, indicatorPosition, spacing, role = 'tablist', ...rest }, ref) => {
+    const internalRef = React__namespace.useRef(null);
+    const { activeTab, setActiveTab } = React__namespace.useContext(TabsContext);
+    React__namespace.useImperativeHandle(ref, () => internalRef.current);
+    const values = React__namespace.useMemo(() => React__namespace.Children.toArray(children)
+        .map((child) => {
+        if (child && isValidTab(child)) {
+            return child.props.value;
+        }
+    })
+        .filter((child) => !!child), [children]);
+    const currentIndex = values.indexOf(activeTab);
+    const nextTab = React__namespace.useCallback(() => {
+        let nextIndex = currentIndex === values.length - 1 ? 0 : currentIndex + 1;
+        const elems = internalRef.current?.querySelectorAll('button') ?? [];
+        while (elems[nextIndex].disabled) {
+            if (nextIndex === values.length - 1) {
+                nextIndex = 0;
+            }
+            else {
+                nextIndex++;
+            }
+        }
+        const value = values[nextIndex];
+        if (value) {
+            setActiveTab(value);
+            const elem = elems[nextIndex];
+            elem?.focus();
+            elem?.click();
+        }
+    }, [currentIndex, setActiveTab, values]);
+    const prevTab = React__namespace.useCallback(() => {
+        let prevIndex = currentIndex === 0 ? values.length - 1 : currentIndex - 1;
+        const elems = internalRef.current?.querySelectorAll('button') ?? [];
+        while (elems[prevIndex].disabled) {
+            if (prevIndex === 0) {
+                prevIndex = values.length - 1;
+            }
+            else {
+                prevIndex--;
+            }
+        }
+        const value = values[prevIndex];
+        if (value) {
+            setActiveTab(value);
+            const elem = elems[prevIndex];
+            elem?.focus();
+            elem?.click();
+        }
+    }, [currentIndex, setActiveTab, values]);
+    const onKeyDown = React__namespace.useCallback((event) => {
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                event.stopPropagation();
+                prevTab();
+                break;
+            case 'ArrowUp':
+            case 'ArrowRight':
+                event.preventDefault();
+                event.stopPropagation();
+                nextTab();
+                break;
+        }
+    }, [prevTab, nextTab]);
+    return (React__namespace.createElement(Field.View, { ...rest, role: role, onKeyDown: onKeyDown, className: ui.classNames(ui.ComponentClassName.TabsList, indicatorPosition
+            ? ui.classNameModifier(ui.ComponentClassName.TabsList, indicatorPosition)
+            : null, spacing
+            ? ui.classNameModifier(ui.ComponentClassName.TabsList, spacing)
+            : null, className), ref: internalRef }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
+ */
+const TabList = Field.primitiveWithForwardRef(TabListPrimitive);
+TabList.displayName = 'Tabs.List';
+
+const TabPanelPrimitive = ({ className, value, children, role = 'tabpanel', ...rest }, ref) => {
+    const { activeTab, isLazy } = React__namespace.useContext(TabsContext);
+    if (isLazy && activeTab !== value)
+        return null;
+    return (React__namespace.createElement(Field.View, { ...rest, role: role, id: `${value}-panel`, "aria-labelledby": `${value}-tab`, className: ui.classNames(ui.ComponentClassName.TabsPanel, ui.classNameModifierByFlag(ui.ComponentClassName.TabsPanel, 'active', activeTab === value), className), ref: ref }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
+ */
+const TabPanel = Field.primitiveWithForwardRef(TabPanelPrimitive);
+TabPanel.displayName = 'Tabs.Panel';
+
+const TabsContainerPrimitive = ({ children, defaultValue, className, value: controlledValue, onValueChange, isLazy, ...rest }, ref) => {
+    const isControlled = controlledValue !== undefined;
+    const [localValue, setLocalValue] = React__namespace.useState(() => isControlled ? controlledValue : defaultValue);
+    const activeTab = isControlled ? controlledValue : localValue ?? '';
+    const setActiveTab = React__namespace.useCallback((newValue) => {
+        if (ui.isFunction(onValueChange)) {
+            onValueChange(newValue);
+        }
+        if (!isControlled) {
+            setLocalValue(newValue);
+        }
+    }, [onValueChange, isControlled]);
+    const _value = React__namespace.useMemo(() => {
+        return {
+            activeTab,
+            isLazy,
+            setActiveTab,
+        };
+    }, [activeTab, setActiveTab, isLazy]);
+    return (React__namespace.createElement(TabsContext.Provider, { value: _value },
+        React__namespace.createElement(Field.View, { ...rest, ref: ref, className: ui.classNames(className, ui.ComponentClassName.Tabs) }, children)));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
+ */
+const TabsContainer = Field.primitiveWithForwardRef(TabsContainerPrimitive);
+TabsContainer.displayName = 'Tabs.Container';
+
+const TabsPrimitive = ({ items, indicatorPosition, justifyContent, spacing, ...rest }, ref) => {
+    return (React__namespace.createElement(TabsContainer, { ...rest, ref: ref },
+        React__namespace.createElement(TabList, { indicatorPosition: indicatorPosition, justifyContent: justifyContent, spacing: spacing }, items?.map(({ value, label, content, ...rest }) => (React__namespace.createElement(TabsItem, { ...rest, key: value, value: value }, label)))),
+        items?.map(({ value, content, isDisabled }) => (React__namespace.createElement(TabPanel, { key: value, value: value, isDisabled: isDisabled }, content)))));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
+ */
+const Tabs = Object.assign(Field.primitiveWithForwardRef(TabsPrimitive), {
+    Item: TabsItem,
+    List: TabList,
+    Panel: TabPanel,
+    Container: TabsContainer,
+});
+Tabs.displayName = 'Tabs';
+
+const TextAreaPrimitive = ({ className, isDisabled, isReadOnly, isRequired, size, hasError = false, variation, ...rest }, ref) => {
+    const componentClasses = ui.classNames(ui.ComponentClassName.Textarea, ui.ComponentClassName.FieldGroupControl, ui.classNameModifier(ui.ComponentClassName.Textarea, variation), ui.classNameModifier(ui.ComponentClassName.Textarea, size), ui.classNameModifierByFlag(ui.ComponentClassName.Textarea, 'error', hasError), className);
+    const { isFieldsetDisabled } = Field.useFieldset();
+    return (React__namespace.createElement(Field.View, { "aria-invalid": hasError, as: "textarea", className: componentClasses, disabled: isFieldsetDisabled ? isFieldsetDisabled : isDisabled, readOnly: isReadOnly, ref: ref, required: isRequired, ...rest }));
+};
+const TextArea = Field.primitiveWithForwardRef(TextAreaPrimitive);
+TextArea.displayName = 'TextArea';
+
+const DEFAULT_ROW_COUNT = 3;
+const TextAreaFieldPrimitive = (props, ref) => {
+    const { className, descriptiveText, errorMessage, hasError = false, id, label, labelHidden = false, rows, size, testId, inputStyles, 
+    // Destructuring the 'resize' style prop because while it is a style prop
+    // it should go on the textarea element and not the wrapper div.
+    resize, ..._rest } = props;
+    const fieldId = useStableId(id);
+    const descriptionId = useStableId();
+    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const { styleProps, rest } = splitPrimitiveProps(_rest);
+    return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Field, ui.classNameModifier(ui.ComponentClassName.Field, size), ui.ComponentClassName.TextAreaField, className), testId: testId, ...styleProps },
+        React__namespace.createElement(Field.Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
+        React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
+        React__namespace.createElement(TextArea, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, rows: rows ?? DEFAULT_ROW_COUNT, size: size, resize: resize, ...rest, ...inputStyles }),
+        React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/textareafield)
+ */
+const TextAreaField = Field.primitiveWithForwardRef(TextAreaFieldPrimitive);
+TextAreaField.displayName = 'TextAreaField';
+
+const useToggleButton = ({ isPressed, defaultPressed, onClick, onChange, value, }) => {
+    const isControlled = isPressed !== undefined;
+    // Maintain internal selected state for uncontrolled component
+    const [pressed, setPressed] = React__namespace.useState(defaultPressed);
+    isPressed = isControlled ? isPressed : pressed;
+    const handleClick = React__namespace.useCallback((event) => {
+        if (ui.isFunction(onClick)) {
+            onClick(event);
+        }
+        if (!isControlled) {
+            setPressed(!pressed);
+        }
+        if (isControlled && ui.isFunction(onChange)) {
+            onChange(value);
+        }
+    }, [isControlled, onClick, onChange, pressed, value]);
+    return { isPressed, handleClick };
+};
+
+const ToggleButtonPrimitive = ({ className, children, defaultPressed = false, isDisabled, isPressed: isPressedProp, onChange, onClick, size, value, variation, ...rest }, ref) => {
+    const { isPressed, handleClick } = useToggleButton({
+        isPressed: isPressedProp,
+        defaultPressed,
+        onChange,
+        onClick,
+        value,
+    });
+    const componentClasses = ui.classNames(ui.ComponentClassName.ToggleButton, ui.classNameModifier(ui.ComponentClassName.ToggleButton, variation), ui.classNameModifierByFlag(ui.ComponentClassName.ToggleButton, 'pressed', isPressed), className);
+    return (React__namespace.createElement(Field.Button, { "aria-pressed": isPressed, className: componentClasses, isDisabled: isDisabled, onClick: handleClick, ref: ref, size: size, type: "button", variation: variation, ...rest }, children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/togglebutton)
+ */
+const ToggleButton = Field.primitiveWithForwardRef(ToggleButtonPrimitive);
+ToggleButton.displayName = 'ToggleButton';
+
+const useToggleButtonGroup = ({ onChange, value, isExclusive = false, isSelectionRequired = false, }) => {
+    // Multiple selection
+    const handleChange = React__namespace.useCallback((buttonValue) => {
+        if (!ui.isFunction(onChange) || !Array.isArray(value)) {
+            return;
+        }
+        const index = ui.isString(buttonValue) ? value.indexOf(buttonValue) : -1;
+        let newValue;
+        const shouldToggleOff = index >= 0;
+        if (shouldToggleOff) {
+            // Toggle off
+            newValue = [...value];
+            if (!isSelectionRequired || newValue.length > 1) {
+                newValue.splice(index, 1);
+            }
+        }
+        else {
+            // Toggle on
+            newValue = [...value, buttonValue];
+        }
+        onChange(newValue);
+    }, [onChange, value, isSelectionRequired]);
+    // Exclusive selection
+    const handleExclusiveChange = React__namespace.useCallback((buttonValue) => {
+        if (!ui.isFunction(onChange)) {
+            return;
+        }
+        onChange(value === buttonValue && !isSelectionRequired ? undefined : buttonValue);
+    }, [onChange, value, isSelectionRequired]);
+    return isExclusive ? handleExclusiveChange : handleChange;
+};
+
+const ToggleButtonGroupPrimitive = ({ children, className, isExclusive, isSelectionRequired, onChange, size, value, variation, ...rest }, ref) => {
+    const handleChange = useToggleButtonGroup({
+        onChange,
+        value,
+        isExclusive,
+        isSelectionRequired,
+    });
+    return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.ToggleButtonGroup, className), ref: ref, role: "group", ...rest }, React__namespace.Children.map(children, (child) => {
+        if (React__namespace.isValidElement(child)) {
+            return React__namespace.cloneElement(child, {
+                isPressed: isExclusive
+                    ? value === child.props.value
+                    : ui.isString(child.props.value) &&
+                        value.includes(child.props.value),
+                onChange: handleChange,
+                size,
+                variation,
+            });
+        }
+        return child;
+    })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/togglebutton#togglebuttongroup)
+ */
+const ToggleButtonGroup = Field.primitiveWithForwardRef(ToggleButtonGroupPrimitive);
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';
+
+var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    IconsProvider: IconsProvider,
+    Alert: Alert,
+    Autocomplete: Autocomplete,
+    Badge: Badge,
+    Breadcrumbs: Breadcrumbs,
+    Button: Field.Button,
+    ButtonGroup: ButtonGroup,
+    Card: Card,
+    CheckboxField: CheckboxField,
+    Collection: Collection,
+    Divider: Divider,
+    DropZone: DropZone,
+    Accordion: Accordion,
+    FieldGroupIcon: Field.FieldGroupIcon,
+    FieldGroupIconButton: Field.FieldGroupIconButton,
+    Fieldset: Fieldset,
+    Flex: Field.Flex,
+    Grid: Grid,
+    Heading: Heading,
+    HighlightMatch: HighlightMatch,
+    Icon: Field.Icon,
+    Image: Image,
+    Input: Input,
+    Label: Field.Label,
+    Link: Link,
+    Loader: Field.Loader,
+    Menu: Menu,
+    MenuButton: MenuButton,
+    MenuItem: MenuItem,
+    Message: Message,
+    Pagination: Pagination,
+    PasswordField: PasswordField,
+    PhoneNumberField: PhoneNumberField,
+    Placeholder: Placeholder,
+    Radio: Radio,
+    RadioGroupField: RadioGroupField,
+    Rating: Rating,
+    ScrollView: ScrollView,
+    SearchField: SearchField,
+    SelectField: SelectField,
+    SliderField: SliderField,
+    StepperField: StepperField,
+    SwitchField: SwitchField,
+    Tabs: Tabs,
+    Text: Field.Text,
+    TextAreaField: TextAreaField,
+    TextField: TextField,
+    ToggleButton: ToggleButton,
+    ToggleButtonGroup: ToggleButtonGroup,
+    View: Field.View,
+    VisuallyHidden: VisuallyHidden,
+    Table: Table,
+    TableBody: TableBody,
+    TableCell: TableCell,
+    TableFoot: TableFoot,
+    TableHead: TableHead,
+    TableRow: TableRow,
+    usePagination: usePagination,
+    ComponentPropsToStylePropsMap: Field.ComponentPropsToStylePropsMap,
+    ComponentPropsToStylePropsMapKeys: Field.ComponentPropsToStylePropsMapKeys
+});
+
+var ComponentClassName;
+(function (ComponentClassName) {
+    ComponentClassName["ChangePassword"] = "amplify-accountsettings-changepassword";
+    ComponentClassName["DeleteUser"] = "amplify-accountsettings-deleteuser";
+})(ComponentClassName || (ComponentClassName = {}));
+
+const ValidationErrors = ({ errors, id, dataAttr, }) => {
+    if (!(errors?.length > 0))
+        return null;
+    const dataAttrProp = dataAttr ? { [dataAttr]: true } : {};
+    return (React__default["default"].createElement(Field.View, { ...dataAttrProp, id: id }, errors.map((error) => {
+        return (React__default["default"].createElement(Field.Text, { key: error, role: "alert", variation: "error" }, ui.translate(error)));
+    })));
+};
+
+const DefaultErrorMessage = (props) => {
+    return React__default["default"].createElement(Alert, { variation: "error", ...props });
+};
+
+const DefaultPasswordField = ({ fieldValidationErrors, label, ...rest }) => {
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(PasswordField, { ...rest, label: label }),
+        fieldValidationErrors ? (React__default["default"].createElement(ValidationErrors, { errors: fieldValidationErrors })) : null));
+};
+const DEFAULTS$1 = {
+    CurrentPasswordField: DefaultPasswordField,
+    NewPasswordField: DefaultPasswordField,
+    ConfirmPasswordField: DefaultPasswordField,
+    SubmitButton: Field.Button,
+    ErrorMessage: DefaultErrorMessage,
+};
+
+const defaultChangePasswordDisplayText = {
+    confirmPasswordFieldLabel: 'Confirm Password',
+    currentPasswordFieldLabel: 'Current Password',
+    newPasswordFieldLabel: 'New Password',
+    updatePasswordButtonText: 'Update password',
+};
+const defaultDeleteUserDisplayText = {
+    cancelButtonText: 'Cancel',
+    confirmDeleteButtonText: 'Delete',
+    deleteAccountButtonText: 'Delete Account',
+    warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
+};
+
+const VERSION = '6.0.1';
+
+const logger$2 = ui.getLogger('AccountSettings');
+const getIsDisabled = (formValues, validationError) => {
+    const { currentPassword, newPassword, confirmPassword } = formValues;
+    const hasEmptyField = !currentPassword || !newPassword || !confirmPassword;
+    if (hasEmptyField) {
+        return true;
+    }
+    const arePasswordsInvalid = validationError.newPassword?.length > 0 ||
+        validationError.confirmPassword?.length > 0;
+    return arePasswordsInvalid;
+};
+function ChangePassword({ components, displayText: overrideDisplayText, onError, onSuccess, validators, }) {
+    const [errorMessage, setErrorMessage] = React__default["default"].useState(null);
+    const [formValues, setFormValues] = React__default["default"].useState({});
+    const [validationError, setValidationError] = React__default["default"].useState({});
+    const blurredFields = React__default["default"].useRef([]);
+    const { user, isLoading } = Field.useAuth();
+    const isDisabled = getIsDisabled(formValues, validationError);
+    const passwordValidators = React__default["default"].useMemo(() => {
+        return validators ?? ui.getDefaultPasswordValidators();
+    }, [validators]);
+    uiReactCore.useSetUserAgent({
+        componentName: 'ChangePassword',
+        packageName: 'react',
+        version: VERSION,
+    });
+    /*
+     * Note that formValues and other states are passed in as props so that
+     * it does not depend on whether or not those states have been updated yet
+     */
+    const validateNewPassword = React__default["default"].useCallback(({ formValues, eventType }) => {
+        const { newPassword } = formValues;
+        const hasBlurred = blurredFields.current.includes('newPassword');
+        return ui.runFieldValidators({
+            value: newPassword,
+            validators: passwordValidators,
+            eventType,
+            hasBlurred,
+        });
+    }, [passwordValidators]);
+    const validateConfirmPassword = React__default["default"].useCallback(({ formValues, eventType }) => {
+        const { newPassword, confirmPassword } = formValues;
+        const hasBlurred = blurredFields.current.includes('confirmPassword');
+        const confirmPasswordValidators = ui.getDefaultConfirmPasswordValidators(newPassword);
+        return ui.runFieldValidators({
+            value: confirmPassword,
+            validators: confirmPasswordValidators,
+            eventType,
+            hasBlurred,
+        });
+    }, []);
+    const runValidation = React__default["default"].useCallback((param) => {
+        const passwordErrors = validateNewPassword(param);
+        const confirmPasswordErrors = validateConfirmPassword(param);
+        const newValidationError = {
+            newPassword: passwordErrors,
+            confirmPassword: confirmPasswordErrors,
+        };
+        // only re-render if errors have changed
+        if (!isEqual__default["default"](validationError, newValidationError)) {
+            setValidationError(newValidationError);
+        }
+    }, [validateConfirmPassword, validateNewPassword, validationError]);
+    /* Translations */
+    const displayText = {
+        ...defaultChangePasswordDisplayText,
+        ...overrideDisplayText,
+    };
+    const { confirmPasswordFieldLabel, currentPasswordFieldLabel, newPasswordFieldLabel, updatePasswordButtonText, } = displayText;
+    /* Subcomponents */
+    const { CurrentPasswordField, NewPasswordField, ConfirmPasswordField, SubmitButton, ErrorMessage, } = React__default["default"].useMemo(() => ({ ...DEFAULTS$1, ...(components ?? {}) }), [components]);
+    /* Event Handlers */
+    const handleChange = (event) => {
+        event.preventDefault();
+        const { name, value } = event.target;
+        const newFormValues = { ...formValues, [name]: value };
+        runValidation({ formValues: newFormValues, eventType: 'change' });
+        setFormValues(newFormValues);
+    };
+    const handleBlur = (event) => {
+        event.preventDefault();
+        const { name } = event.target;
+        // only update state and run validation if this is the first time blurring the field
+        if (!blurredFields.current.includes(name)) {
+            const newBlurredFields = [...blurredFields.current, name];
+            blurredFields.current = newBlurredFields;
+            runValidation({ formValues, eventType: 'blur' });
+        }
+    };
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (!user) {
+            return;
+        }
+        const { currentPassword, newPassword } = formValues;
+        if (errorMessage) {
+            setErrorMessage(null);
+        }
+        ui.changePassword({ currentPassword, newPassword })
+            .then(() => {
+            // notify success to the parent
+            onSuccess?.();
+        })
+            .catch((e) => {
+            const error = e;
+            if (error.message)
+                setErrorMessage(error.message);
+            onError?.(error); // notify error to the parent
+        });
+    };
+    // Return null if Auth.getgetCurrentUser is still in progress
+    if (isLoading) {
+        return null;
+    }
+    // Return null if user isn't authenticated in the first place
+    if (!user) {
+        logger$2.warn('<ChangePassword /> requires user to be authenticated.');
+        return null;
+    }
+    return (React__default["default"].createElement(Field.View, { as: "form", className: ComponentClassName.ChangePassword, onSubmit: handleSubmit },
+        React__default["default"].createElement(Field.Flex, { direction: "column" },
+            React__default["default"].createElement(CurrentPasswordField, { autoComplete: "current-password", isRequired: true, label: currentPasswordFieldLabel, name: "currentPassword", onBlur: handleBlur, onChange: handleChange }),
+            React__default["default"].createElement(NewPasswordField, { autoComplete: "new-password", fieldValidationErrors: validationError?.newPassword, isRequired: true, label: newPasswordFieldLabel, name: "newPassword", onBlur: handleBlur, onChange: handleChange }),
+            React__default["default"].createElement(ConfirmPasswordField, { autoComplete: "new-password", fieldValidationErrors: validationError?.confirmPassword, isRequired: true, label: confirmPasswordFieldLabel, name: "confirmPassword", onBlur: handleBlur, onChange: handleChange }),
+            React__default["default"].createElement(SubmitButton, { isDisabled: isDisabled, type: "submit" }, updatePasswordButtonText),
+            errorMessage ? React__default["default"].createElement(ErrorMessage, null, errorMessage) : null)));
+}
+ChangePassword.CurrentPasswordField = DEFAULTS$1.CurrentPasswordField;
+ChangePassword.NewPasswordField = DEFAULTS$1.NewPasswordField;
+ChangePassword.ConfirmPasswordField = DEFAULTS$1.ConfirmPasswordField;
+ChangePassword.SubmitButton = DEFAULTS$1.SubmitButton;
+ChangePassword.ErrorMessage = DEFAULTS$1.ErrorMessage;
+
+const DefaultWarningView = ({ displayText: overrideDisplayText, isDisabled, onCancel, onConfirm, }) => {
+    // translations
+    const displayText = {
+        ...defaultDeleteUserDisplayText,
+        ...overrideDisplayText,
+    };
+    const { cancelButtonText, confirmDeleteButtonText, warningText } = displayText;
+    return (React__default["default"].createElement(Card, null,
+        React__default["default"].createElement(Field.Flex, { direction: "column" },
+            React__default["default"].createElement(Field.Text, { color: "font.error" }, warningText),
+            React__default["default"].createElement(Field.Flex, null,
+                React__default["default"].createElement(Field.Button, { variation: "link", onClick: onCancel, isDisabled: isDisabled }, cancelButtonText),
+                React__default["default"].createElement(Field.Button, { variation: "destructive", onClick: onConfirm, isDisabled: isDisabled }, confirmDeleteButtonText)))));
+};
+const DefaultDeleteButton = (props) => (React__default["default"].createElement(Field.Button, { ...props, variation: "warning" }));
+const DEFAULTS = {
+    ErrorMessage: DefaultErrorMessage,
+    DeleteButton: DefaultDeleteButton,
+    WarningView: DefaultWarningView,
+};
+
+const logger$1 = ui.getLogger('AccountSettings');
+function DeleteUser({ components, displayText: overrideDisplayText, handleDelete, onError, onSuccess, }) {
+    const [state, setState] = React__default["default"].useState('IDLE');
+    const [errorMessage, setErrorMessage] = React__default["default"].useState(null);
+    uiReactCore.useSetUserAgent({
+        componentName: 'DeleteUser',
+        packageName: 'react',
+        version: VERSION,
+    });
+    // translations
+    const displayText = {
+        ...defaultDeleteUserDisplayText,
+        ...overrideDisplayText,
+    };
+    const { deleteAccountButtonText } = displayText;
+    const { user, isLoading } = Field.useAuth();
+    // subcomponents
+    const { ErrorMessage, DeleteButton, WarningView } = React__default["default"].useMemo(() => ({ ...DEFAULTS, ...(components ?? {}) }), [components]);
+    const startConfirmation = (event) => {
+        event.preventDefault();
+        setState('CONFIRMATION');
+    };
+    const runDeleteUser = React__default["default"].useCallback(async () => {
+        if (!user) {
+            return;
+        }
+        setState('DELETING');
+        if (errorMessage) {
+            setErrorMessage(null);
+        }
+        try {
+            if (handleDelete) {
+                /*
+                 * run custom delete handler, if provided. We pass `user` so that
+                 * developer can do whichever cleanup with the user object they wish.
+                 */
+                await handleDelete(user);
+            }
+            else {
+                // else, run default deleteUser function.
+                await ui.deleteUser();
+            }
+            setState('DONE');
+            onSuccess?.();
+        }
+        catch (e) {
+            const error = e;
+            setState('ERROR');
+            setErrorMessage(error.message);
+            onError?.(error);
+        }
+    }, [errorMessage, handleDelete, onError, onSuccess, user]);
+    // called when end user cancels account deletion confirmation
+    const handleCancel = React__default["default"].useCallback(() => {
+        setState('IDLE');
+    }, []);
+    const handleConfirmDelete = React__default["default"].useCallback(() => {
+        runDeleteUser();
+    }, [runDeleteUser]);
+    // Return null if Auth.getgetCurrentUser is still in progress
+    if (isLoading) {
+        return null;
+    }
+    // Return null if user isn't authenticated
+    if (!user) {
+        logger$1.warn('<DeleteUser /> requires user to be authenticated.');
+        return null;
+    }
+    // Return null if delete user was successful
+    if (state === 'DONE') {
+        return null;
+    }
+    return (React__default["default"].createElement(Field.Flex, { className: ComponentClassName.DeleteUser, direction: "column" },
+        React__default["default"].createElement(DeleteButton, { isDisabled: state === 'CONFIRMATION' || state === 'DELETING', onClick: startConfirmation }, deleteAccountButtonText),
+        state === 'CONFIRMATION' || state === 'DELETING' ? (React__default["default"].createElement(WarningView, { onCancel: handleCancel, isDisabled: state === 'DELETING', onConfirm: handleConfirmDelete })) : null,
+        errorMessage ? React__default["default"].createElement(ErrorMessage, null, errorMessage) : null));
+}
+DeleteUser.ErrorMessage = DEFAULTS.ErrorMessage;
+DeleteUser.DeleteButton = DEFAULTS.DeleteButton;
+DeleteUser.WarningView = DEFAULTS.WarningView;
+
+var AccountSettings = { ChangePassword, DeleteUser };
+
+/**
+ * Logs a deprecation warning `message` to the console.
+ */
+const useDeprecationWarning = ({ message, shouldWarn: _shouldWarn, }) => {
+    const shouldWarn = _shouldWarn &&
+        // show message on builds without Node `process` polyfill
+        // or with process.env.NODE_ENV not production
+        (typeof process === 'undefined' ||
+            (process && process.env.NODE_ENV !== 'production'));
+    uiReactCore.useDeprecationWarning({ message, shouldWarn });
+};
+
+const CustomComponentsContext = 
+// @ts-ignore
+React__namespace.createContext(null);
+const useCustomComponents = () => {
+    const context = React__namespace.useContext(CustomComponentsContext);
+    if (!context) {
+        throw new Error('`useCustomComponents` cannot be used outside of a `CustomComponentsContext.Provider`');
+    }
+    return context;
+};
+
+// TODO replace usage of this util with the `isSignInOrSignUpRoute` util in v3.
+// Currently `hasTabs` always returns `undefined` as the right condition always
+// resolves to truthy. This prevents the "data-amplify-router-content" attribute
+// from being applied below. Fixing it will cause consumer snapshot tests to break,
+// so wait to update.
+const hasTabs = (route) => {
+    return route === 'signIn' || 'signUp';
+};
+function RouteContainer({ children, className, variation = 'default', }) {
+    const { route } = uiReactCore.useAuthenticator(({ route }) => [route]);
+    const { 
+    // @ts-ignore
+    components: { Header, Footer }, } = useCustomComponents();
+    return (React__default["default"].createElement(Field.View, { className: className, "data-amplify-authenticator": "", "data-variation": variation },
+        React__default["default"].createElement(Field.View, { "data-amplify-container": "" },
+            React__default["default"].createElement(Header, null),
+            React__default["default"].createElement(Field.View, { "data-amplify-router": "", "data-amplify-router-content": hasTabs(route) ? undefined : '' }, children),
+            React__default["default"].createElement(Footer, null))));
+}
+
+const getFormDataFromEvent = (event) => {
+    const formData = new FormData(event.target);
+    return Object.fromEntries(formData);
+};
+
+function useFormHandlers() {
+    const { submitForm, updateBlur, updateForm } = uiReactCore.useAuthenticator((context) => [
+        context.submitForm,
+        context.updateBlur,
+        context.updateForm,
+    ]);
+    const handleBlur = React.useCallback(({ target: { name } }) => {
+        updateBlur({ name });
+    }, [updateBlur]);
+    // @TODO: align multiple input type handling with react docs example for 3.0 release
+    // example: https://reactjs.org/docs/forms.html#handling-multiple-inputs
+    const handleChange = React.useCallback(({ target: { checked, name, type, value }, }) => {
+        const isUncheckedCheckbox = type === 'checkbox' && !checked;
+        updateForm({
+            name,
+            value: isUncheckedCheckbox ? undefined : value,
+        });
+    }, [updateForm]);
+    const handleSubmit = React.useCallback((event) => {
+        event.preventDefault();
+        submitForm(getFormDataFromEvent(event));
+    }, [submitForm]);
+    return { handleBlur, handleChange, handleSubmit };
+}
+
+const RemoteErrorMessage = () => {
+    const { error } = uiReactCore.useAuthenticator((context) => [context.error]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, error ? (React__default["default"].createElement(Alert, { variation: "error", isDismissible: true }, ui.translate(error))) : null));
+};
+
+function FormField({ autocomplete: autoComplete, dialCode, name, type, ...props }) {
+    const { validationErrors } = uiReactCore.useAuthenticator(({ validationErrors }) => [
+        validationErrors,
+    ]);
+    const errors = React__namespace.useMemo(() => ui.getErrors(validationErrors[name]), [name, validationErrors]);
+    const hasError = errors?.length > 0;
+    const errorId = useStableId();
+    const ariaDescribedBy = hasError ? errorId : undefined;
+    if (type === 'tel') {
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(PhoneNumberField, { ...props, name: name, defaultDialCode: dialCode, dialCodeName: "country_code", autoComplete: autoComplete, hasError: hasError, "aria-describedby": ariaDescribedBy }),
+            React__namespace.createElement(ValidationErrors, { dataAttr: "data-amplify-sign-up-errors", errors: errors, id: errorId })));
+    }
+    else if (type === 'password') {
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(PasswordField, { ...props, name: name, autoComplete: autoComplete, hasError: hasError, "aria-describedby": ariaDescribedBy }),
+            React__namespace.createElement(ValidationErrors, { dataAttr: "data-amplify-sign-up-errors", errors: errors, id: errorId })));
+    }
+    else {
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(TextField, { ...props, name: name, autoComplete: autoComplete, hasError: hasError, type: type, "aria-describedby": ariaDescribedBy }),
+            React__namespace.createElement(ValidationErrors, { dataAttr: "data-amplify-sign-up-errors", errors: errors, id: errorId })));
+    }
+}
+
+function FormFields() {
+    const { fields } = uiReactCore.useAuthenticator(({ route }) => [route]);
+    const formFields = React__namespace.useRef(fields.map((field, index) => (React__namespace.createElement(FormField
+    // use index for key, field order is static
+    , { 
+        // use index for key, field order is static
+        key: index, ...field })))).current;
+    return React__namespace.createElement(React__namespace.Fragment, null, formFields);
+}
+
+const { getDeliveryMessageText, getDeliveryMethodText, getConfirmingText: getConfirmingText$1, getConfirmText: getConfirmText$1, getResendCodeText: getResendCodeText$1, } = ui.authenticatorTextUtil;
+function ConfirmSignUp({ className, variation, }) {
+    const { isPending, resendCode, codeDeliveryDetails } = uiReactCore.useAuthenticator((context) => [
+        context.isPending,
+        context.resendCode,
+        context.codeDeliveryDetails,
+    ]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    ConfirmSignUp: { Header = ConfirmSignUp.Header, Footer = ConfirmSignUp.Footer, }, }, } = useCustomComponents();
+    return (
+    // TODO Automatically add these namespaces again from `useAmplify`
+    React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmsignup": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__default["default"].createElement(Header, null),
+                React__default["default"].createElement(Field.Flex, { direction: "column" },
+                    React__default["default"].createElement(Field.Text, { className: "amplify-authenticator__subtitle" }, getDeliveryMessageText(codeDeliveryDetails)),
+                    React__default["default"].createElement(FormFields, null),
+                    React__default["default"].createElement(RemoteErrorMessage, null),
+                    React__default["default"].createElement(Field.Button, { variation: "primary", isDisabled: isPending, type: "submit", loadingText: getConfirmingText$1(), isLoading: isPending, fontWeight: "normal" }, getConfirmText$1()),
+                    React__default["default"].createElement(Field.Button, { onClick: resendCode, type: "button", fontWeight: "normal" }, getResendCodeText$1())),
+                React__default["default"].createElement(Footer, null)))));
+}
+const DefaultHeader = () => {
+    const { codeDeliveryDetails } = uiReactCore.useAuthenticator((context) => [
+        context.codeDeliveryDetails,
+    ]);
+    return (React__default["default"].createElement(Heading, { level: 4 }, getDeliveryMethodText(codeDeliveryDetails)));
+};
+ConfirmSignUp.Header = DefaultHeader;
+ConfirmSignUp.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
+const { getChangePasswordText, getChangingText, getBackToSignInText: getBackToSignInText$2 } = ui.authenticatorTextUtil;
+const ForceNewPassword = ({ className, variation, }) => {
+    const { isPending, toSignIn } = uiReactCore.useAuthenticator((context) => [
+        context.isPending,
+        context.toSignIn,
+    ]);
+    const { handleBlur, handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    ForceNewPassword: { FormFields = ForceNewPassword.FormFields, Header = ForceNewPassword.Header, Footer = ForceNewPassword.Footer, }, }, } = useCustomComponents();
+    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-forcenewpassword": "", method: "post", onChange: handleChange, onSubmit: handleSubmit, onBlur: handleBlur },
+            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__default["default"].createElement(Header, null),
+                React__default["default"].createElement(FormFields, null),
+                React__default["default"].createElement(RemoteErrorMessage, null),
+                React__default["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getChangingText(), fontWeight: "normal" }, getChangePasswordText()),
+                React__default["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", fontWeight: "normal", variation: "link", size: "small" }, getBackToSignInText$2()),
+                React__default["default"].createElement(Footer, null)))));
+};
+ForceNewPassword.FormFields = function FormFields$1() {
+    return React__default["default"].createElement(FormFields, null);
+};
+ForceNewPassword.Header = function Header() {
+    return React__default["default"].createElement(Heading, { level: 4 }, getChangePasswordText());
+};
+ForceNewPassword.Footer = function Footer() {
+    return null;
+};
+
+const { getConfirmText, getConfirmingText, getBackToSignInText: getBackToSignInText$1 } = ui.authenticatorTextUtil;
+const ConfirmSignInFooter = () => {
+    const { isPending, toSignIn } = uiReactCore.useAuthenticator((context) => [
+        context.isPending,
+        context.toSignIn,
+    ]);
+    return (React__default["default"].createElement(Field.Flex, { direction: "column" },
+        React__default["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", fontWeight: "normal", isLoading: isPending, loadingText: getConfirmingText() }, getConfirmText()),
+        React__default["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", variation: "link", fontWeight: "normal", size: "small" }, getBackToSignInText$1())));
+};
+
+const logger = new utils.ConsoleLogger('SetupTotp-logger');
+const { getSetupTotpText, getCopiedText, getLoadingText } = ui.authenticatorTextUtil;
+const SetupTotp = ({ className, variation, }) => {
+    const { totpSecretCode, isPending, username, QRFields } = uiReactCore.useAuthenticator((context) => [context.isPending, context.totpSecretCode, context.username]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    SetupTotp: { Header = SetupTotp.Header, Footer = SetupTotp.Footer }, }, } = useCustomComponents();
+    const [isLoading, setIsLoading] = React__namespace.useState(true);
+    const [qrCode, setQrCode] = React__namespace.useState();
+    const [copyTextLabel, setCopyTextLabel] = React__namespace.useState('COPY');
+    const { totpIssuer = 'AWSCognito', totpUsername = username } = QRFields ?? {};
+    const generateQRCode = React__namespace.useCallback(async () => {
+        try {
+            const totpCode = ui.getTotpCodeURL(totpIssuer, totpUsername, totpSecretCode);
+            const qrCodeImageSource = await QRCode__default["default"].toDataURL(totpCode);
+            setQrCode(qrCodeImageSource);
+        }
+        catch (error) {
+            logger.error(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [totpIssuer, totpUsername, totpSecretCode]);
+    React__namespace.useEffect(() => {
+        if (!qrCode) {
+            generateQRCode();
+        }
+    }, [generateQRCode, qrCode]);
+    const copyText = () => {
+        navigator.clipboard.writeText(totpSecretCode);
+        setCopyTextLabel(getCopiedText());
+    };
+    return (React__namespace.createElement(RouteContainer, { className: className, variation: variation },
+        React__namespace.createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-setup-totp": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__namespace.createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__namespace.createElement(Header, null),
+                React__namespace.createElement(Field.Flex, { direction: "column" },
+                    isLoading ? (React__namespace.createElement("p", null,
+                        getLoadingText(),
+                        "\u2026")) : (React__namespace.createElement("img", { "data-amplify-qrcode": true, src: qrCode, alt: "qr code", width: "228", height: "228" })),
+                    React__namespace.createElement(Field.Flex, { "data-amplify-copy": true },
+                        React__namespace.createElement("div", null, totpSecretCode),
+                        React__namespace.createElement(Field.Flex, { "data-amplify-copy-svg": true, onClick: copyText },
+                            React__namespace.createElement("div", { "data-amplify-copy-tooltip": true }, copyTextLabel),
+                            React__namespace.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+                                React__namespace.createElement("path", { d: "M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM15 5H8C6.9 5 6.01 5.9 6.01 7L6 21C6 22.1 6.89 23 7.99 23H19C20.1 23 21 22.1 21 21V11L15 5ZM8 21V7H14V12H19V21H8Z" })))),
+                    React__namespace.createElement(FormFields, null),
+                    React__namespace.createElement(RemoteErrorMessage, null)),
+                React__namespace.createElement(ConfirmSignInFooter, null),
+                React__namespace.createElement(Footer, null)))));
+};
+SetupTotp.Header = function Header() {
+    return React__namespace.createElement(Heading, { level: 3 }, getSetupTotpText());
+};
+SetupTotp.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
+const { getSubmitText, getSubmittingText } = ui.authenticatorTextUtil;
+const TwoButtonSubmitFooter = (props) => {
+    const { cancelButtonSendType, cancelButtonText, submitButtonText } = props;
+    const { isPending, resendCode, skipVerification, toSignIn } = uiReactCore.useAuthenticator((context) => [context.isPending]);
+    const onClick = () => {
+        switch (cancelButtonSendType) {
+            case 'SKIP':
+                skipVerification();
+                break;
+            case 'RESEND':
+                resendCode();
+                break;
+            case 'SIGN_IN':
+                toSignIn();
+                break;
+            default:
+                return;
+        }
+    };
+    const defaultSubmitText = isPending ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+        getSubmittingText(),
+        "\u2026")) : (React__default["default"].createElement(React__default["default"].Fragment, null, getSubmitText()));
+    const submitText = submitButtonText ?? defaultSubmitText;
+    return (React__default["default"].createElement(Field.Flex, { direction: "column" },
+        React__default["default"].createElement(Field.Button, { fontWeight: "normal", variation: "primary", isDisabled: isPending, type: "submit" }, submitText),
+        React__default["default"].createElement(Field.Button, { onClick: onClick, type: "button", variation: "link", fontWeight: "normal", size: "small" }, cancelButtonText)));
+};
+
+const AppleIcon = () => {
+    return (React__default["default"].createElement("svg", { "aria-label": "Apple icon", className: "amplify-icon federated-sign-in-icon", fill: "#000", preserveAspectRatio: "xMidYMid", stroke: "#000", strokeWidth: "0", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg" },
+        React__default["default"].createElement("path", { d: "M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-105.1-305c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z" })));
+};
+const GoogleIcon = () => {
+    return (React__default["default"].createElement("svg", { "aria-label": "Google icon", className: "amplify-icon federated-sign-in-icon", viewBox: "0 0 256 262", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid" },
+        React__default["default"].createElement("path", { d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027", fill: "#4285F4" }),
+        React__default["default"].createElement("path", { d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1", fill: "#34A853" }),
+        React__default["default"].createElement("path", { d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782", fill: "#FBBC05" }),
+        React__default["default"].createElement("path", { d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251", fill: "#EB4335" })));
+};
+const FacebookIcon = () => {
+    return (React__default["default"].createElement(Field.Icon, { className: "federated-sign-in-icon", ariaLabel: "Facebook icon", viewBox: { minX: 0, minY: 0, width: 279, height: 538 }, pathData: "M82.3409742,538 L82.3409742,292.936652 L0,292.936652 L0,196.990154 L82.2410458,196.990154 L82.2410458,126.4295 C82.2410458,44.575144 132.205229,0 205.252865,0 C240.227794,0 270.306232,2.59855099 279,3.79788222 L279,89.2502322 L228.536175,89.2502322 C188.964542,89.2502322 181.270057,108.139699 181.270057,135.824262 L181.270057,196.89021 L276.202006,196.89021 L263.810888,292.836708 L181.16913,292.836708 L181.16913,538 L82.3409742,538 Z", fill: "#1877F2" }));
+};
+const AmazonIcon = () => {
+    return (React__default["default"].createElement("svg", { "aria-label": "Amazon icon", className: "amplify-icon federated-sign-in-icon", viewBox: "0 0 243 264", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid" },
+        React__default["default"].createElement("path", { d: "M230.826 208.039C227.468 203.683 208.551 205.982 200.056 206.998C197.471 207.321 197.076 205.042 199.407 203.405C214.475 192.665 239.201 195.766 242.082 199.364C244.966 202.982 241.337 228.071 227.173 240.049C225.001 241.888 222.93 240.904 223.898 238.468C227.077 230.431 234.205 212.419 230.826 208.039ZM123.769 264C71.0234 264 39.0764 241.955 14.7853 217.542C9.97339 212.706 3.71799 206.296 0.311513 200.691C-1.09773 198.372 2.59096 195.022 5.04421 196.844C35.239 219.268 79.1012 239.538 122.53 239.538C151.82 239.538 188.046 227.47 217.669 214.868C222.147 212.966 222.147 219.18 221.512 221.061C221.183 222.032 206.515 236.221 186.247 247.047C167.304 257.166 143.397 264 123.769 264Z", fill: "#F2541B" }),
+        React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M142.943 111.185C142.943 124.756 143.268 136.054 136.406 148.123C130.856 157.913 122.027 163.95 112.222 163.95C98.8288 163.95 90.9806 153.772 90.9806 138.693C90.9806 109.036 117.677 103.647 142.943 103.647V111.185ZM178.166 196.081C175.858 198.15 171.635 198.22 169.914 196.894C157.974 187.684 149.89 173.688 149.89 173.688C130.706 193.156 117.127 199 92.2879 199C62.8772 199 40 180.905 40 144.729C40 116.461 55.3552 97.2408 77.2563 87.823C96.2094 79.5256 122.684 78.0173 142.943 75.7517C142.943 75.7517 144.633 53.933 138.699 45.9806C134.098 39.8163 126.272 36.9329 119.089 36.9329C106.127 36.8829 93.61 43.9051 91.1262 57.4188C90.4136 61.2829 87.5533 64.5261 84.54 64.206L51.0823 60.5922C48.5156 60.2951 45.0381 57.6639 45.8636 53.3081C53.644 12.3684 90.7373 0 123.989 0C140.983 0 163.21 4.51651 176.608 17.3349C193.597 33.1648 191.969 54.2755 191.969 77.2722V131.51C191.969 147.835 198.768 154.987 205.151 163.775C207.376 166.953 207.886 170.714 205.04 173.032C197.902 178.999 178.166 196.081 178.166 196.081Z", fill: "#F2541B" })));
+};
+const FederatedSignInButton = (props) => {
+    const { icon, provider, text } = props;
+    const { toFederatedSignIn } = uiReactCore.useAuthenticator();
+    const handleClick = (event) => {
+        event.preventDefault();
+        toFederatedSignIn({ provider });
+    };
+    let iconComponent;
+    if (icon === 'facebook') {
+        iconComponent = React__default["default"].createElement(FacebookIcon, null);
+    }
+    else if (icon === 'google') {
+        iconComponent = React__default["default"].createElement(GoogleIcon, null);
+    }
+    else if (icon === 'amazon') {
+        iconComponent = React__default["default"].createElement(AmazonIcon, null);
+    }
+    else if (icon === 'apple') {
+        iconComponent = React__default["default"].createElement(AppleIcon, null);
+    }
+    return (React__default["default"].createElement(Field.Button, { onClick: handleClick, className: "federated-sign-in-button", fontWeight: "normal", gap: "1rem" },
+        iconComponent,
+        React__default["default"].createElement(Field.Text, { as: "span" }, text)));
+};
+
+const { getSignInWithFederationText, getOrText } = ui.authenticatorTextUtil;
+function FederatedSignIn() {
+    const { route, socialProviders } = uiReactCore.useAuthenticator(({ route, socialProviders }) => [route, socialProviders]);
+    if (socialProviders.length === 0) {
+        // @ts-ignore
+        return null;
+    }
+    return (React__default["default"].createElement(Field.Flex, { direction: "column", padding: `0 0 1rem 0`, className: "federated-sign-in-container" },
+        socialProviders.map((provider) => {
+            switch (provider) {
+                case 'amazon':
+                    return (React__default["default"].createElement(FederatedSignInButton, { icon: "amazon", key: provider, provider: ui.FederatedIdentityProviders.Amazon, text: getSignInWithFederationText(route, provider) }));
+                case 'apple':
+                    return (React__default["default"].createElement(FederatedSignInButton, { icon: "apple", key: provider, provider: ui.FederatedIdentityProviders.Apple, text: getSignInWithFederationText(route, provider) }));
+                case 'facebook':
+                    return (React__default["default"].createElement(FederatedSignInButton, { icon: "facebook", key: provider, provider: ui.FederatedIdentityProviders.Facebook, text: getSignInWithFederationText(route, provider) }));
+                case 'google':
+                    return (React__default["default"].createElement(FederatedSignInButton, { icon: "google", key: provider, provider: ui.FederatedIdentityProviders.Google, text: getSignInWithFederationText(route, provider) }));
+                default:
+                    // eslint-disable-next-line no-console
+                    console.error(`Authenticator does not support ${provider}. Please open an issue: https://github.com/aws-amplify/amplify-ui/issues/choose`);
+            }
+        }),
+        React__default["default"].createElement(Divider, { size: "small", label: getOrText() })));
+}
+
+const { getSignInText, getSigningInText, getForgotPasswordText } = ui.authenticatorTextUtil;
+function SignIn() {
+    const { isPending } = uiReactCore.useAuthenticator((context) => [context.isPending]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    SignIn: { Header = SignIn.Header, Footer = SignIn.Footer }, }, } = useCustomComponents();
+    return (React__default["default"].createElement(Field.View, null,
+        React__default["default"].createElement(Header, null),
+        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-signin": "", method: "post", onSubmit: handleSubmit, onChange: handleChange },
+            React__default["default"].createElement(FederatedSignIn, null),
+            React__default["default"].createElement(Field.Flex, { direction: "column" },
+                React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                    React__default["default"].createElement(VisuallyHidden, null,
+                        React__default["default"].createElement("legend", null, getSignInText())),
+                    React__default["default"].createElement(FormFields, null)),
+                React__default["default"].createElement(RemoteErrorMessage, null),
+                React__default["default"].createElement(Field.Button, { isDisabled: isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getSigningInText() }, getSignInText()))),
+        React__default["default"].createElement(Footer, null)));
+}
+const DefaultFooter = () => {
+    const { toForgotPassword } = uiReactCore.useAuthenticator((context) => [
+        context.toForgotPassword,
+    ]);
+    return (React__default["default"].createElement(Field.View, { "data-amplify-footer": "" },
+        React__default["default"].createElement(Field.Button, { fontWeight: "normal", onClick: toForgotPassword, size: "small", variation: "link" }, getForgotPasswordText())));
+};
+SignIn.Footer = DefaultFooter;
+SignIn.Header = function Header() {
+    // @ts-ignore
+    return null;
+};
+
+const { getCreateAccountText, getCreatingAccountText } = ui.authenticatorTextUtil;
+function SignUp() {
+    const { hasValidationErrors, isPending } = uiReactCore.useAuthenticator((context) => [
+        context.hasValidationErrors,
+        context.isPending,
+    ]);
+    const { handleChange, handleBlur, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    SignUp: { Header = SignUp.Header, FormFields = SignUp.FormFields, Footer = SignUp.Footer, }, }, } = useCustomComponents();
+    return (React__default["default"].createElement(Field.View, null,
+        React__default["default"].createElement(Header, null),
+        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-signup": "", method: "post", onChange: handleChange, onSubmit: handleSubmit, onBlur: handleBlur },
+            React__default["default"].createElement(FederatedSignIn, null),
+            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__default["default"].createElement(Field.Flex, { direction: "column" },
+                    React__default["default"].createElement(FormFields, null),
+                    React__default["default"].createElement(RemoteErrorMessage, null)),
+                React__default["default"].createElement(Field.Button, { isDisabled: hasValidationErrors || isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getCreatingAccountText() }, getCreateAccountText()))),
+        React__default["default"].createElement(Footer, null)));
+}
+SignUp.Header = function Header() {
+    // @ts-ignore
+    return null;
+};
+SignUp.FormFields = function FormFields$1() {
+    return React__default["default"].createElement(FormFields, null);
+};
+SignUp.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
+const { getSignInTabText, getSignUpTabText } = ui.authenticatorTextUtil;
+const SignInSignUpTabs = ({ className, hideSignUp, variation, }) => {
+    const { route, toSignIn, toSignUp } = uiReactCore.useAuthenticator((context) => [
+        context.route,
+        context.toSignIn,
+        context.toSignUp,
+    ]);
+    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation }, hideSignUp ? (React__default["default"].createElement(Field.View, { "data-amplify-router-content": "" }, route === 'signIn' && React__default["default"].createElement(SignIn, null))) : (React__default["default"].createElement(Tabs.Container, { value: route, isLazy: true, onValueChange: () => (route === 'signIn' ? toSignUp() : toSignIn()) },
+        React__default["default"].createElement(Tabs.List, { spacing: "equal", indicatorPosition: "top" },
+            React__default["default"].createElement(Tabs.Item, { value: "signIn" }, getSignInTabText()),
+            React__default["default"].createElement(Tabs.Item, { value: "signUp" }, getSignUpTabText())),
+        React__default["default"].createElement(Tabs.Panel, { value: "signIn", "data-amplify-router-content": "" },
+            React__default["default"].createElement(SignIn, null)),
+        React__default["default"].createElement(Tabs.Panel, { value: "signUp", "data-amplify-router-content": "" },
+            React__default["default"].createElement(SignUp, null))))));
+};
+
+const { getAccountRecoveryInfoText: getAccountRecoveryInfoText$1, getSkipText: getSkipText$1 } = ui.authenticatorTextUtil;
+const ConfirmVerifyUser = ({ className, variation, }) => {
+    const { isPending } = uiReactCore.useAuthenticator((context) => [context.isPending]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    ConfirmVerifyUser: { Header = ConfirmVerifyUser.Header, Footer = ConfirmVerifyUser.Footer, }, }, } = useCustomComponents();
+    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmverifyuser": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__default["default"].createElement(Header, null),
+                React__default["default"].createElement(Field.Flex, { direction: "column" },
+                    React__default["default"].createElement(FormFields, null)),
+                React__default["default"].createElement(RemoteErrorMessage, null),
+                React__default["default"].createElement(TwoButtonSubmitFooter, { cancelButtonText: getSkipText$1(), cancelButtonSendType: "SKIP" }),
+                React__default["default"].createElement(Footer, null)))));
+};
+ConfirmVerifyUser.Header = function Header() {
+    return React__default["default"].createElement(Heading, { level: 3 }, getAccountRecoveryInfoText$1());
+};
+ConfirmVerifyUser.Footer = function Footer() {
+    return null;
+};
+
+const { getSkipText, getVerifyText, getVerifyContactText, getAccountRecoveryInfoText, } = ui.authenticatorTextUtil;
+const censorContactInformation = (type, value) => {
+    const translated = ui.translate(type);
+    let newVal = value;
+    if (type === 'Phone Number') {
+        newVal = ui.censorPhoneNumber(value);
+    }
+    else if (type === 'Email') {
+        const splitEmail = value.split('@');
+        const censoredName = ui.censorAllButFirstAndLast(splitEmail[0]);
+        newVal = `${censoredName}@${splitEmail[1]}`;
+    }
+    return `${translated}: ${newVal}`;
+};
+const generateRadioGroup = (attributes) => {
+    return Object.entries(attributes).map(([key, value]) => (React__default["default"].createElement(Radio, { name: "unverifiedAttr", value: key, key: key }, censorContactInformation(ui.defaultFormFieldOptions[key].label, value))));
+};
+const VerifyUser = ({ className, variation, }) => {
+    const { components: { 
+    // @ts-ignore
+    VerifyUser: { Header = VerifyUser.Header, Footer = VerifyUser.Footer }, }, } = useCustomComponents();
+    const { isPending, unverifiedUserAttributes } = uiReactCore.useAuthenticator(({ isPending, unverifiedUserAttributes }) => [
+        isPending,
+        unverifiedUserAttributes,
+    ]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const footerSubmitText = isPending ? (React__default["default"].createElement(React__default["default"].Fragment, null, "Verifying\u2026")) : (React__default["default"].createElement(React__default["default"].Fragment, null, getVerifyText()));
+    const verificationRadioGroup = (React__default["default"].createElement(RadioGroupField, { legend: getVerifyContactText(), name: "verify_context", isDisabled: isPending, legendHidden: true }, generateRadioGroup(unverifiedUserAttributes)));
+    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-verifyuser": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__default["default"].createElement(Header, null),
+                verificationRadioGroup,
+                React__default["default"].createElement(RemoteErrorMessage, null),
+                React__default["default"].createElement(TwoButtonSubmitFooter, { cancelButtonText: getSkipText(), cancelButtonSendType: "SKIP", submitButtonText: footerSubmitText }),
+                React__default["default"].createElement(Footer, null)))));
+};
+VerifyUser.Header = function Header() {
+    return React__default["default"].createElement(Heading, { level: 3 }, getAccountRecoveryInfoText());
+};
+VerifyUser.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
+const { getChallengeText } = ui.authenticatorTextUtil;
+const ConfirmSignIn = ({ className, variation, }) => {
+    const { isPending } = uiReactCore.useAuthenticator((context) => [context.isPending]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    ConfirmSignIn: { Header = ConfirmSignIn.Header, Footer = ConfirmSignIn.Footer, }, }, } = useCustomComponents();
+    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmsignin": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__default["default"].createElement(Header, null),
+                React__default["default"].createElement(Field.Flex, { direction: "column" },
+                    React__default["default"].createElement(FormFields, null),
+                    React__default["default"].createElement(RemoteErrorMessage, null)),
+                React__default["default"].createElement(ConfirmSignInFooter, null),
+                React__default["default"].createElement(Footer, null)))));
+};
+function Header() {
+    const { challengeName } = uiReactCore.useAuthenticator(({ challengeName }) => [
+        challengeName,
+    ]);
+    return React__default["default"].createElement(Heading, { level: 3 }, getChallengeText(challengeName));
+}
+ConfirmSignIn.Header = Header;
+ConfirmSignIn.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
+const { getResendCodeText, getResetYourPasswordText: getResetYourPasswordText$1 } = ui.authenticatorTextUtil;
+const ConfirmResetPassword = ({ className, variation, }) => {
+    const { isPending } = uiReactCore.useAuthenticator((context) => [context.isPending]);
+    const { handleBlur, handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    ConfirmResetPassword: { Header = ConfirmResetPassword.Header, Footer = ConfirmResetPassword.Footer, }, }, } = useCustomComponents();
+    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmresetpassword": "", method: "post", onSubmit: handleSubmit, onChange: handleChange, onBlur: handleBlur },
+            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__default["default"].createElement(Header, null),
+                React__default["default"].createElement(Field.Flex, { direction: "column" },
+                    React__default["default"].createElement(FormFields, null)),
+                React__default["default"].createElement(RemoteErrorMessage, null),
+                React__default["default"].createElement(TwoButtonSubmitFooter, { cancelButtonSendType: "RESEND", cancelButtonText: getResendCodeText() }),
+                React__default["default"].createElement(Footer, null)))));
+};
+ConfirmResetPassword.Header = function Header() {
+    const headerText = getResetYourPasswordText$1();
+    return React__default["default"].createElement(Heading, { level: 3 }, headerText);
+};
+ConfirmResetPassword.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
+const { getBackToSignInText, getSendingText, getSendCodeText, getResetYourPasswordText, } = ui.authenticatorTextUtil;
+const ForgotPassword = ({ className, variation, }) => {
+    const { isPending } = uiReactCore.useAuthenticator((context) => [context.isPending]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    ForgotPassword: { Header = ForgotPassword.Header, Footer = ForgotPassword.Footer, }, }, } = useCustomComponents();
+    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-Forgotpassword": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__default["default"].createElement(Header, null),
+                React__default["default"].createElement(Field.Flex, { direction: "column" },
+                    React__default["default"].createElement(FormFields, null)),
+                React__default["default"].createElement(RemoteErrorMessage, null),
+                React__default["default"].createElement(TwoButtonSubmitFooter, { cancelButtonText: getBackToSignInText(), cancelButtonSendType: "SIGN_IN", submitButtonText: isPending ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+                        getSendingText(),
+                        "\u2026")) : (React__default["default"].createElement(React__default["default"].Fragment, null, getSendCodeText())) }),
+                React__default["default"].createElement(Footer, null)))));
+};
+ForgotPassword.Header = function Header() {
+    return React__default["default"].createElement(Heading, { level: 3 }, getResetYourPasswordText());
+};
+ForgotPassword.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
+const isSignInOrSignUpRoute = (route) => route === 'signIn' || route === 'signUp';
+
+function RenderNothing() {
+    // @ts-ignore
+    return null;
+}
+const getRouteComponent = (route) => {
+    switch (route) {
+        case 'authenticated':
+        case 'idle':
+        case 'setup':
+        case 'transition':
+            return RenderNothing;
+        case 'confirmSignUp':
+            return ConfirmSignUp;
+        case 'confirmSignIn':
+            return ConfirmSignIn;
+        case 'setupTotp':
+            return SetupTotp;
+        case 'signIn':
+        case 'signUp':
+            return SignInSignUpTabs;
+        case 'forceNewPassword':
+            return ForceNewPassword;
+        case 'forgotPassword':
+            return ForgotPassword;
+        case 'confirmResetPassword':
+            return ConfirmResetPassword;
+        case 'verifyUser':
+            return VerifyUser;
+        case 'confirmVerifyUser':
+            return ConfirmVerifyUser;
+        default:
+            // eslint-disable-next-line no-console
+            console.warn(`Unhandled Authenticator route - please open an issue: ${route}`);
+            return RenderNothing;
+    }
+};
+function Router({ className, hideSignUp, variation, }) {
+    const { route } = uiReactCore.useAuthenticator(({ route }) => [route]);
+    const RouterChildren = React.useMemo(() => getRouteComponent(route), [route]);
+    return (React__default["default"].createElement(RouterChildren, { className: className, 
+        // @ts-ignore
+        hideSignUp: isSignInOrSignUpRoute(route) ? hideSignUp : undefined, variation: variation }));
+}
+
+const defaultComponents = {
+    // @ts-ignore
+    Header: () => null,
+    SignIn: {
+        Header: SignIn.Header,
+        Footer: SignIn.Footer,
+    },
+    SignUp: {
+        Header: SignUp.Header,
+        FormFields: SignUp.FormFields,
+        Footer: SignUp.Footer,
+    },
+    ConfirmSignUp: {
+        Header: ConfirmSignUp.Header,
+        Footer: ConfirmSignUp.Footer,
+    },
+    SetupTotp: {
+        Header: SetupTotp.Header,
+        Footer: SetupTotp.Footer,
+    },
+    ConfirmResetPassword: {
+        Header: ConfirmResetPassword.Header,
+        Footer: ConfirmResetPassword.Footer,
+    },
+    ConfirmSignIn: {
+        Header: ConfirmSignIn.Header,
+        Footer: ConfirmSignIn.Footer,
+    },
+    VerifyUser: {
+        Header: VerifyUser.Header,
+        Footer: VerifyUser.Footer,
+    },
+    ConfirmVerifyUser: {
+        Header: ConfirmVerifyUser.Header,
+        // @ts-ignore
+        Footer: ConfirmVerifyUser.Footer,
+    },
+    ForceNewPassword: {
+        Header: ForceNewPassword.Header,
+        Footer: ForceNewPassword.Footer,
+        FormFields: ForceNewPassword.FormFields,
+    },
+    ForgotPassword: {
+        Header: ForgotPassword.Header,
+        Footer: ForgotPassword.Footer,
+    },
+    // @ts-ignore
+    Footer: () => null,
+};
+
+// `AuthenticatorInternal` exists to give access to the context returned via `useAuthenticator`,
+// which allows the `Authenticator` to just return `children` if a user is authenticated.
+// Once the `Provider` is removed from the `Authenticator` component and exported as
+// `AuthenticatorProvider`, this component should be renamed to `Authenticator`.
+function AuthenticatorInternal({ children, className, components: customComponents, formFields, hideSignUp, initialState, loginMechanisms, passwordSettings, signUpAttributes, services, socialProviders, variation, }) {
+    useDeprecationWarning({
+        message: 'The `passwordSettings` prop has been deprecated and will be removed in a future major version of Amplify UI.',
+        // shouldWarn: !!passwordSettings,
+        /**
+         * @migration turn off until getConfig returns zero config
+         */
+        shouldWarn: false,
+    });
+    const { route, signOut, user } = uiReactCore.useAuthenticator(({ route, signOut, user }) => [route, signOut, user]);
+    uiReactCore.useAuthenticatorInitMachine({
+        initialState,
+        loginMechanisms,
+        passwordSettings,
+        services,
+        signUpAttributes,
+        socialProviders,
+        formFields,
+    });
+    const value = React__namespace.useMemo(() => ({ components: { ...defaultComponents, ...customComponents } }), [customComponents]);
+    const isAuthenticatedRoute = route === 'authenticated' || route === 'signOut';
+    if (isAuthenticatedRoute) {
+        // `Authenticator` might not have user defined `children` for non SPA use cases.
+        if (!children) {
+            // @ts-ignore
+            return null;
+        }
+        return (React__namespace.createElement(React__namespace.Fragment, null, ui.isFunction(children)
+            ? children({ signOut, user }) // children is a render prop
+            : children));
+    }
+    return (React__namespace.createElement(CustomComponentsContext.Provider, { value: value },
+        React__namespace.createElement(Router, { className: className, hideSignUp: hideSignUp, variation: variation })));
+}
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/authenticator)
+ */
+function Authenticator(props) {
+    uiReactCore.useSetUserAgent({
+        componentName: 'Authenticator',
+        packageName: 'react',
+        version: VERSION,
+    });
+    return (React__namespace.createElement(uiReactCore.AuthenticatorProvider, null,
+        React__namespace.createElement(AuthenticatorInternal, { ...props })));
+}
+Authenticator.Provider = uiReactCore.AuthenticatorProvider;
+Authenticator.ForgotPassword = ForgotPassword;
+Authenticator.SetupTotp = SetupTotp;
+Authenticator.SignIn = SignIn;
+Authenticator.SignUp = SignUp;
+Authenticator.ForceNewPassword = ForceNewPassword;
+
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/authenticator)
+ */
+function withAuthenticator(Component, options = {}) {
+    const { variation = 'modal' } = options;
+    return function WrappedWithAuthenticator(props) {
+        return (React__default["default"].createElement(Authenticator, { variation: variation, ...options }, (withAuthenticatorProps) => (React__default["default"].createElement(Component, { ...props, ...withAuthenticatorProps }))));
+    };
+}
+
+// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
+// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
+const { DirectionProvider } = ui.sanitizeNamespaceImport(RadixDirection__namespace);
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/theming)
+ */
+function ThemeProvider({ children, colorMode, direction = 'ltr', nonce, theme, }) {
+    const value = React__namespace.useMemo(() => ({ theme: ui.createTheme(theme) }), [theme]);
+    const { theme: { name, cssText }, } = value;
+    return (React__namespace.createElement(Field.ThemeContext.Provider, { value: value },
+        React__namespace.createElement(DirectionProvider, { dir: direction },
+            React__namespace.createElement("div", { "data-amplify-theme": name, "data-amplify-color-mode": colorMode, dir: direction }, children),
+            typeof theme === 'undefined' || /<\/style/i.test(cssText) ? null : (React__namespace.createElement("style", { id: `amplify-theme-${name}`, 
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: { __html: cssText }, nonce: nonce })))));
+}
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AccountSettings: AccountSettings,
+    Authenticator: Authenticator,
+    withAuthenticator: withAuthenticator,
+    useAuthenticator: uiReactCore.useAuthenticator,
+    ThemeProvider: ThemeProvider
+});
+
+Object.defineProperty(exports, 'useAuthenticator', {
+    enumerable: true,
+    get: function () { return uiReactCore.useAuthenticator; }
+});
+Object.defineProperty(exports, 'createTheme', {
+    enumerable: true,
+    get: function () { return ui.createTheme; }
+});
+Object.defineProperty(exports, 'defaultDarkModeOverride', {
+    enumerable: true,
+    get: function () { return ui.defaultDarkModeOverride; }
+});
+Object.defineProperty(exports, 'defaultTheme', {
+    enumerable: true,
+    get: function () { return ui.defaultTheme; }
+});
+Object.defineProperty(exports, 'translations', {
+    enumerable: true,
+    get: function () { return ui.translations; }
+});
+exports.Button = Field.Button;
+exports.ComponentPropsToStylePropsMap = Field.ComponentPropsToStylePropsMap;
+exports.ComponentPropsToStylePropsMapKeys = Field.ComponentPropsToStylePropsMapKeys;
+exports.FieldGroupIcon = Field.FieldGroupIcon;
+exports.FieldGroupIconButton = Field.FieldGroupIconButton;
+exports.Flex = Field.Flex;
+exports.Icon = Field.Icon;
+exports.Label = Field.Label;
+exports.Loader = Field.Loader;
+exports.Text = Field.Text;
+exports.View = Field.View;
+exports.useTheme = Field.useTheme;
+exports.Accordion = Accordion;
+exports.AccountSettings = AccountSettings;
+exports.Alert = Alert;
+exports.Authenticator = Authenticator;
+exports.Autocomplete = Autocomplete;
+exports.Badge = Badge;
+exports.Breadcrumbs = Breadcrumbs;
+exports.ButtonGroup = ButtonGroup;
+exports.Card = Card;
+exports.CheckboxField = CheckboxField;
+exports.Collection = Collection;
+exports.Divider = Divider;
+exports.DropZone = DropZone;
+exports.Fieldset = Fieldset;
+exports.Grid = Grid;
+exports.Heading = Heading;
+exports.HighlightMatch = HighlightMatch;
+exports.IconsProvider = IconsProvider;
+exports.Image = Image;
+exports.Input = Input;
+exports.Link = Link;
+exports.Menu = Menu;
+exports.MenuButton = MenuButton;
+exports.MenuItem = MenuItem;
+exports.Message = Message;
+exports.Pagination = Pagination;
+exports.PasswordField = PasswordField;
+exports.PhoneNumberField = PhoneNumberField;
+exports.Placeholder = Placeholder;
+exports.Radio = Radio;
+exports.RadioGroupField = RadioGroupField;
+exports.Rating = Rating;
+exports.ScrollView = ScrollView;
+exports.SearchField = SearchField;
+exports.SelectField = SelectField;
+exports.SliderField = SliderField;
+exports.StepperField = StepperField;
+exports.SwitchField = SwitchField;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableFoot = TableFoot;
+exports.TableHead = TableHead;
+exports.TableRow = TableRow;
+exports.Tabs = Tabs;
+exports.TextAreaField = TextAreaField;
+exports.TextField = TextField;
+exports.ThemeProvider = ThemeProvider;
+exports.ToggleButton = ToggleButton;
+exports.ToggleButtonGroup = ToggleButtonGroup;
+exports.VisuallyHidden = VisuallyHidden;
+exports.components = index;
+exports.primitives = index$1;
+exports.useBreakpointValue = useBreakpointValue;
+exports.usePagination = usePagination;
+exports.withAuthenticator = withAuthenticator;