@aws-amplify/ui-react 5.3.2 → 6.0.0

package/dist/esm/primitives/shared/constants.mjs

@@ -1 +1,98 @@
-import{ComponentClassName as e}from"@aws-amplify/ui";const a={Alert:{className:e.Alert,components:["Alert"],description:"Top level element that wraps the Alert primitive"},AlertIcon:{className:e.AlertIcon,components:["Alert"],description:"Class applied to Icon component within the Alert primitive"},AlertHeading:{className:e.AlertHeading,components:["Alert"],description:"Class applied to the heading View"},AlertBody:{className:e.AlertBody,components:["Alert"],description:"Class applied to the body View"},AlertDismiss:{className:e.AlertDismiss,components:["Alert"],description:"Class applied to the close Button"},Autocomplete:{className:e.Autocomplete,components:["Autocomplete"],description:"Top level element that wraps the Autocomplete primitive"},AutocompleteMenu:{className:e.AutocompleteMenu,components:["Autocomplete"],description:"Top level element that wraps the dropdown menu"},AutocompleteMenuEmpty:{className:e.AutocompleteMenuEmpty,components:["Autocomplete"],description:"Class applied to the no options slot of menu"},AutocompleteMenuFooter:{className:e.AutocompleteMenuFooter,components:["Autocomplete"],description:"Class applied to menu footer"},AutocompleteMenuHeader:{className:e.AutocompleteMenuHeader,components:["Autocomplete"],description:"Class applied to menu header"},AutocompleteMenuLoading:{className:e.AutocompleteMenuLoading,components:["Autocomplete"],description:"Class applied to the loading slot of menu"},AutocompleteMenuOption:{className:e.AutocompleteMenuOption,components:["Autocomplete"],description:"Class applied to each li option"},AutocompleteMenuOptions:{className:e.AutocompleteMenuOptions,components:["Autocomplete"],description:"Class applied to ul container element"},Badge:{className:e.Badge,components:["Badge"],description:"Top level element that wraps the Badge component"},Breadcrumbs:{className:e.Breadcrumbs,components:["Breadcrumbs"],description:"Top level element that wraps the Breadcrumbs component"},BreadcrumbsItem:{className:e.BreadcrumbsItem,components:["Breadcrumbs"],description:"Each breadcrumb"},BreadcrumbsLink:{className:e.BreadcrumbsLink,components:["Breadcrumbs"],description:"Links used within breadcrumbs"},BreadcrumbsList:{className:e.BreadcrumbsList,components:["Breadcrumbs"],description:"List element within nav"},BreadcrumbsSeparator:{className:e.BreadcrumbsSeparator,components:["Breadcrumbs"],description:"Separator between each breadcrumb"},Button:{className:e.Button,components:["Button"],description:"Top level element that wraps the Button primitive"},ButtonGroup:{className:e.ButtonGroup},ButtonLoaderWrapper:{className:e.ButtonLoaderWrapper,components:["Button"],description:"Class applied to the Loader component within the Button Loading state"},Card:{className:e.Card,components:["Card"],description:"Top level element that wraps the Card primitive"},Checkbox:{className:e.Checkbox,components:["Checkbox"],description:"Top level element that wraps the Checkbox primitive"},CheckboxButton:{className:e.CheckboxButton,components:["Checkbox"],description:"Wrapper for the checked icon within the Checkbox primitive"},CheckboxIcon:{className:e.CheckboxIcon,components:["Checkbox"],description:"Class applied to the checked icon within the Checkbox primitive"},CheckboxInput:{className:e.CheckboxInput,components:["Checkbox"],description:"Class applied to the visually hidden checkbox input within the Checkbox primitive"},CheckboxLabel:{className:e.CheckboxLabel,components:["Checkbox"],description:"Class applied to the label within the Checkbox primitive"},CheckboxField:{className:e.CheckboxField,components:["CheckboxField"],description:"Top level element that wraps the CheckboxField primitive"},Collection:{className:e.Collection,components:["Collection"],description:"Top level element that wraps the Collection primitive"},CollectionItems:{className:e.CollectionItems,components:["Collection"],description:"Class applied to the element that wraps all the items in a collection"},CollectionSearch:{className:e.CollectionSearch,components:["Collection"],description:"Class applied to the element that wraps the collection search box"},CollectionPagination:{className:e.CollectionPagination,components:["Collection"],description:"Class applied to the element that wraps the pagination component in a collection"},CountryCodeSelect:{className:e.CountryCodeSelect,components:["PhoneNumberField"],description:"Class applied to the Dial Code Select within the PhoneNumberField primitive"},DialCodeSelect:{className:e.DialCodeSelect,components:["PhoneNumberField"],description:"Class applied to the Dial Code Select within the PhoneNumberField primitive"},Divider:{className:e.Divider,components:["Divider"],description:"Top level element that wraps the Divider primitive"},DividerLabel:{className:e.DividerLabel,components:["Divider"],description:"Class applied to the label of the Divider component"},DropZone:{className:e.DropZone,components:["DropZone"],description:"Class applied to the DropZone component"},Expander:{className:e.Expander,components:["Expander"],description:"Top level element that wraps the Expander primitive"},ExpanderContent:{className:e.ExpanderContent,components:["Expander"],description:"Expander content container"},ExpanderContentText:{className:e.ExpanderContentText,components:["Expander"],description:"Expander content text"},ExpanderHeader:{className:e.ExpanderHeader,components:["Expander"],description:"Expander item header"},ExpanderIcon:{className:e.ExpanderIcon,components:["Expander"],description:"Icon to indicate whether an item is expanded or collapsed"},ExpanderItem:{className:e.ExpanderItem,components:["Expander"],description:"Expander item(containier for header, trigger, and content)"},ExpanderTrigger:{className:e.ExpanderTrigger,components:["Expander"],description:"Expander item trigger(button)"},Field:{className:e.Field},FieldDescription:{className:e.FieldDescription},FieldErrorMessage:{className:e.FieldErrorMessage},FieldGroup:{className:e.FieldGroup},FieldGroupControl:{className:e.FieldGroupControl},FieldGroupFieldWrapper:{className:e.FieldGroupFieldWrapper},FieldGroupOuterEnd:{className:e.FieldGroupOuterEnd},FieldGroupOuterStart:{className:e.FieldGroupOuterStart},FieldGroupInnerEnd:{className:e.FieldGroupInnerEnd},FieldGroupInnerStart:{className:e.FieldGroupInnerStart},FieldGroupIcon:{className:e.FieldGroupIcon},FieldGroupIconButton:{className:e.FieldGroupIconButton},FieldGroupHasInnerEnd:{className:e.FieldGroupHasInnerEnd},FieldGroupHasInnerStart:{className:e.FieldGroupHasInnerStart},FieldShowPassword:{className:e.FieldShowPassword},Fieldset:{className:e.Fieldset,components:["Fieldset"],description:"Top level element that wraps the Fieldset primitive"},FieldsetLegend:{className:e.FieldsetLegend,components:["Fieldset"],description:"Visual label for the Fieldset primitive"},FileUploaderDropZone:{className:e.FileUploaderDropZone,components:["FileUploader"]},FileUploaderDropZoneIcon:{className:e.FileUploaderDropZoneIcon,components:["FileUploader"]},FileUploaderDropZoneText:{className:e.FileUploaderDropZoneText,components:["FileUploader"]},FileUploaderDropZoneButton:{className:e.FileUploaderDropZoneButton,components:["FileUploader"]},FileUploaderFile:{className:e.FileUploaderFile,components:["FileUploader"]},FileUploaderFileWrapper:{className:e.FileUploaderFileWrapper,components:["FileUploader"]},FileUploaderFileName:{className:e.FileUploaderFileName,components:["FileUploader"]},FileUploaderLoader:{className:e.FileUploaderLoader,components:["FileUploader"]},FileUploaderFileSize:{className:e.FileUploaderFileSize,components:["FileUploader"]},FileUploaderFileInfo:{className:e.FileUploaderFileInfo,components:["FileUploader"]},FileUploaderFileImage:{className:e.FileUploaderFileImage,components:["FileUploader"]},FileUploaderFileMain:{className:e.FileUploaderFileMain,components:["FileUploader"]},FileUploaderFileStatus:{className:e.FileUploaderFileStatus,components:["FileUploader"]},FileUploaderPreviewer:{className:e.FileUploaderPreviewer,components:["FileUploader"]},FileUploaderPreviewerText:{className:e.FileUploaderPreviewerText,components:["FileUploader"]},FileUploaderPreviewerBody:{className:e.FileUploaderPreviewerBody,components:["FileUploader"]},FileUploaderPreviewerFooter:{className:e.FileUploaderPreviewerFooter,components:["FileUploader"]},FileUploaderPreviewerFooterActions:{className:e.FileUploaderPreviewerFooterActions,components:["FileUploader"]},Flex:{className:e.Flex,components:["Flex"],description:"Top level element that wraps the Flex primitive"},Grid:{className:e.Grid,components:["Grid"],description:"Top level element that wraps the Grid primitive"},Heading:{className:e.Heading,components:["Heading"],description:"Top level element that wraps the Heading primitive"},HighlightMatch:{className:e.HighlightMatch,components:["HighlightMatch"],description:"Top level element that wraps the HighlightMatch primitive"},HighlightMatchHighlighted:{className:e.HighlightMatchHighlighted,components:["HighlightMatch"],description:"Class applied to the highlighted text of the HighlightMatch primitive"},Icon:{className:e.Icon,components:["Icon"],description:"Top level element that wraps the Icon primitive"},Image:{className:e.Image,components:["Image"],description:"Top level element that wraps the Image primitive"},Input:{className:e.Input,components:["Input"],description:"Class applied to the input element"},Label:{className:e.Label,components:["Label"],description:"Class applied to the label element"},Link:{className:e.Link,components:["Link"],description:"Top level element that wraps the Link primitive"},Loader:{className:e.Loader,components:["Loader"],description:"Top level element that wraps the Loader primitive"},LoaderDeterminate:{className:e.LoaderDeterminate,components:["Loader"],description:"Class applied to a determinate loader"},LoaderPercentageText:{className:e.LoaderPercentageText,components:["Loader"],description:"Class applied to the percentage text of loader"},MenuContent:{className:e.MenuContent,components:["Menu"],description:"Menu content container (Flex)"},MenuContentWrapper:{className:e.MenuContentWrapper,components:["Menu"],description:"Menu content wrapper"},MenuItem:{className:e.MenuItem,components:["Menu"],description:"Menu item button (MenuButton, wrapped in amplify-menu-content class)"},MenuTrigger:{className:e.MenuTrigger,components:["Menu"],description:"Menu trigger button (MenuButton, not wrapped in amplify-menu-content class)"},Message:{className:e.Message,components:["Message"],description:"Class applied to the root element of the Message"},MessageIcon:{className:e.MessageIcon,components:["Message"],description:"Class applied to Icon component within the Message primitive"},MessageHeading:{className:e.MessageHeading,components:["Message"],description:"Class applied to the heading View"},MessageBody:{className:e.MessageBody,components:["Message"],description:"Class applied to the body View"},MessageContent:{className:e.MessageContent,components:["Message"],description:"Class applied to the wrappar around heading and children of the Message"},MessageDismiss:{className:e.MessageDismiss,components:["Message"],description:"Class applied to the close Button"},Pagination:{className:e.Pagination,components:["Pagination"],description:"Top level element that wraps the Pagination primitive"},PaginationItemButton:{className:e.PaginationItemButton,components:["Pagination"],description:"Class applied to the pagination buttons"},PaginationItemCurrent:{className:e.PaginationItemCurrent,components:["Pagination"],description:"Class applied to the currently selected pagination button"},PaginationItemEllipsis:{className:e.PaginationItemEllipsis,components:["Pagination"],description:"Class applied to the ellipsis within the Pagination primitive"},PasswordField:{className:e.PasswordField,components:["PasswordField"],description:"Top level element that wraps the PasswordField primitive"},PhoneNumberField:{className:e.PhoneNumberField,components:["PhoneNumberField"],description:"Top level element that wraps the PhoneNumberField primitive"},Placeholder:{className:e.Placeholder,components:["Placeholder"],description:"Top level element that wraps the Placeholder primitive"},Radio:{className:e.Radio,components:["RadioGroupField","Radio"],description:"Top level element that wraps the Radio primitive"},RadioButton:{className:e.RadioButton,components:["RadioGroupField","Radio"],description:"Class applied to the displayed radio button"},RadioInput:{className:e.RadioInput,components:["RadioGroupField","Radio"],description:"Class applied to the visually hidden radio input"},RadioLabel:{className:e.RadioLabel,components:["RadioGroupField","Radio"],description:"Class applied to the radio label"},RadioGroupField:{className:e.RadioGroupField,components:["RadioGroupField"],description:"Top level element that wraps the RadioGroupField primitive"},RadioGroup:{className:e.RadioGroup,components:["RadioGroupField"],description:"Class applied to the radio group wrapper"},Rating:{className:e.Rating,components:["Rating"],description:"Top level element that wraps the Rating primitive"},ScrollView:{className:e.ScrollView,components:["ScrollView"],description:"Top level element that wraps the ScrollView primitive"},SearchField:{className:e.SearchField,components:["SearchField"],description:"Top level element that wraps the SearchField primitive"},SearchFieldClear:{className:e.SearchFieldClear,components:["SearchField"],description:"Class applied to the search field clear button"},SearchFieldSearch:{className:e.SearchFieldSearch,components:["SearchField"],description:"Class applied to the search button"},Select:{className:e.Select,components:["Select","SelectField"],description:"Class applied to the select element"},SelectField:{className:e.SelectField,components:["SelectField"],description:"Top level element that wraps the SelectField primitive"},SelectWrapper:{className:e.SelectWrapper,components:["Select","SelectField"],description:"Class applied to the select wrapper"},SelectIconWrapper:{className:e.SelectIconWrapper,components:["Select","SelectField"],description:"Class applied to the select icon wrapper"},SliderField:{className:e.SliderField,components:["SliderField"],description:"Top level element that wraps the SliderField primitive"},SliderFieldGroup:{className:e.SliderFieldGroup,components:["SliderField"],description:"Class applied to the element that wraps the slider root"},SliderFieldLabel:{className:e.SliderFieldLabel,components:["SliderField"],description:"Class applied to the slider label"},SliderFieldRange:{className:e.SliderFieldRange,components:["SliderField"],description:"Class applied to the filled in portion of the slider track"},SliderFieldRoot:{className:e.SliderFieldRoot,components:["SliderField"],description:"Class applied to the slider root which wraps the track and thumb"},SliderFieldThumb:{className:e.SliderFieldThumb,components:["SliderField"],description:"Class applied to the slider thumb"},SliderFieldTrack:{className:e.SliderFieldTrack,components:["SliderField"],description:"Class applied to the slider track"},StepperField:{className:e.StepperField,components:["StepperField"],description:"Top level element that wraps the StepperField primitive"},StepperFieldButtonDecrease:{className:e.StepperFieldButtonDecrease,components:["StepperField"],description:"Class applied to the decrease button"},StepperFieldButtonIncrease:{className:e.StepperFieldButtonIncrease,components:["StepperField"],description:"Class applied to the increase button"},StepperFieldInput:{className:e.StepperFieldInput,components:["StepperField"],description:"Class applied to the StepperField input"},StorageImage:{className:e.StorageImage,components:["StorageImage"],description:"Class applied to the img tag"},StorageManager:{className:e.StorageManager,components:["StorageManager"]},StorageManagerDropZone:{className:e.StorageManagerDropZone,components:["StorageManager"]},StorageManagerDropZoneIcon:{className:e.StorageManagerDropZoneIcon,components:["StorageManager"]},StorageManagerDropZoneText:{className:e.StorageManagerDropZoneText,components:["StorageManager"]},StorageManagerFilePicker:{className:e.StorageManagerFilePicker,components:["StorageManager"]},StorageManagerFile:{className:e.StorageManagerFile,components:["StorageManager"]},StorageManagerFileWrapper:{className:e.StorageManagerFileWrapper,components:["StorageManager"]},StorageManagerFileList:{className:e.StorageManagerFileList,components:["StorageManager"]},StorageManagerFileName:{className:e.StorageManagerFileName,components:["StorageManager"]},StorageManagerLoader:{className:e.StorageManagerLoader,components:["StorageManager"]},StorageManagerFileSize:{className:e.StorageManagerFileSize,components:["StorageManager"]},StorageManagerFileInfo:{className:e.StorageManagerFileInfo,components:["StorageManager"]},StorageManagerFileImage:{className:e.StorageManagerFileImage,components:["StorageManager"]},StorageManagerFileMain:{className:e.StorageManagerFileMain,components:["StorageManager"]},StorageManagerFileStatus:{className:e.StorageManagerFileStatus,components:["StorageManager"]},StorageManagerPreviewer:{className:e.StorageManagerPreviewer,components:["StorageManager"]},StorageManagerPreviewerText:{className:e.StorageManagerPreviewerText,components:["StorageManager"]},StorageManagerPreviewerActions:{className:e.StorageManagerPreviewerActions,components:["StorageManager"]},StorageManagerPreviewerFooter:{className:e.StorageManagerPreviewerFooter,components:["StorageManager"]},SwitchField:{className:e.SwitchField,components:["SwitchField"],description:"Top level element that wraps the SwitchField primitive"},SwitchLabel:{className:e.SwitchLabel,components:["SwitchField"],description:"Class applied to the SwitchField label text"},SwitchThumb:{className:e.SwitchThumb,components:["SwitchField"],description:"Class applied to the SwitchField thumb"},SwitchTrack:{className:e.SwitchTrack,components:["SwitchField"],description:"Class applied to the SwitchField track"},SwitchWrapper:{className:e.SwitchWrapper,components:["SwitchField"],description:"Class applied to the label element that wraps the SwitchField label and track"},Table:{className:e.Table,components:["Table"],description:"Top level element that wraps the Table primitive"},TableCaption:{className:e.TableCaption,components:["Table"],description:"Class applied to the content provided as the caption prop"},TableBody:{className:e.TableBody,components:["Table"],description:"Class applied to TableBody component"},TableTd:{className:e.TableTd,components:["Table"],description:'Class applied to TableCell component rendered as a <td> element (<TableCell as="td" />)'},TableTh:{className:e.TableTh,components:["Table"],description:'Class applied to TableCell comopnent rendered as a <th> element (<TableCell as="th" />)'},TableFoot:{className:e.TableFoot,components:["Table"],description:"Class applied to TableFoot component"},TableHead:{className:e.TableHead,components:["Table"],description:"Class applied to TableHead component"},TableRow:{className:e.TableRow,components:["Table"],description:"Class applied to TableRow component"},Tabs:{className:e.Tabs,components:["Tabs"],description:"Top level element that wraps the Tabs primitive"},TabItems:{className:e.TabItems,components:["Tabs"],description:"Top level element that wraps the TabItem primitive"},Text:{className:e.Text,components:["Text"],description:"Top level element that wraps the Text primitive"},Textarea:{className:e.Textarea,components:["TextAreaField"],description:"Class applied to the text area"},TextAreaField:{className:e.TextAreaField,components:["TextAreaField"],description:"Top level element that wraps the TextAreaField primitive"},TextField:{className:e.TextField,components:["TextField"],description:"Top level element that wraps the TextField primitive"},ToggleButton:{className:e.ToggleButton,components:["ToggleButton"],description:"Top level element that wraps the ToggleButton primitive"},ToggleButtonGroup:{className:e.ToggleButtonGroup,components:["ToggleButton","ToggleButtonGroup"],description:"Top level element that wraps the ToggleButtonGroup primitive"},VisuallyHidden:{className:e.VisuallyHidden,components:["VisuallyHidden"],description:"Top level element that wraps the VisuallyHidden primitive"}},t={Alert:a.Alert.className,AlertIcon:a.AlertIcon.className,AlertHeading:a.AlertHeading.className,AlertBody:a.AlertBody.className,AlertDismiss:a.AlertDismiss.className,Autocomplete:a.Autocomplete.className,AutocompleteMenu:a.AutocompleteMenu.className,AutocompleteMenuEmpty:a.AutocompleteMenuEmpty.className,AutocompleteMenuFooter:a.AutocompleteMenuFooter.className,AutocompleteMenuHeader:a.AutocompleteMenuHeader.className,AutocompleteMenuLoading:a.AutocompleteMenuLoading.className,AutocompleteMenuOption:a.AutocompleteMenuOption.className,AutocompleteMenuOptions:a.AutocompleteMenuOptions.className,Badge:a.Badge.className,Breadcrumbs:a.Breadcrumbs.className,BreadcrumbsItem:a.BreadcrumbsItem.className,BreadcrumbsLink:a.BreadcrumbsLink.className,BreadcrumbsList:a.BreadcrumbsList.className,BreadcrumbsSeparator:a.BreadcrumbsSeparator.className,Button:a.Button.className,ButtonGroup:a.ButtonGroup.className,ButtonLoaderWrapper:a.ButtonLoaderWrapper.className,Card:a.Card.className,Checkbox:a.Checkbox.className,CheckboxButton:a.CheckboxButton.className,CheckboxIcon:a.CheckboxIcon.className,CheckboxInput:a.CheckboxInput.className,CheckboxLabel:a.CheckboxLabel.className,CheckboxField:a.CheckboxField.className,Collection:a.Collection.className,CollectionItems:a.CollectionItems.className,CollectionSearch:a.CollectionSearch.className,CollectionPagination:a.CollectionPagination.className,CountryCodeSelect:a.CountryCodeSelect.className,DialCodeSelect:a.DialCodeSelect.className,Divider:a.Divider.className,DividerLabel:a.DividerLabel.className,DropZone:a.DropZone.className,Expander:a.Expander.className,ExpanderContent:a.ExpanderContent.className,ExpanderContentText:a.ExpanderContentText.className,ExpanderHeader:a.ExpanderHeader.className,ExpanderIcon:a.ExpanderIcon.className,ExpanderItem:a.ExpanderItem.className,ExpanderTrigger:a.ExpanderTrigger.className,Field:a.Field.className,FieldDescription:a.FieldDescription.className,FieldErrorMessage:a.FieldErrorMessage.className,FieldGroup:a.FieldGroup.className,FieldGroupControl:a.FieldGroupControl.className,FieldGroupOuterEnd:a.FieldGroupOuterEnd.className,FieldGroupOuterStart:a.FieldGroupOuterStart.className,FieldGroupInnerEnd:a.FieldGroupInnerEnd.className,FieldGroupInnerStart:a.FieldGroupInnerStart.className,FieldGroupIcon:a.FieldGroupIcon.className,FieldGroupIconButton:a.FieldGroupIconButton.className,FieldGroupHasInnerEnd:a.FieldGroupHasInnerEnd.className,FieldGroupHasInnerStart:a.FieldGroupHasInnerStart.className,FieldShowPassword:a.FieldShowPassword.className,FieldGroupFieldWrapper:a.FieldGroupFieldWrapper.className,Fieldset:a.Fieldset.className,FieldsetLegend:a.FieldsetLegend.className,FileUploaderDropZone:a.FileUploaderDropZone.className,FileUploaderDropZoneIcon:a.FileUploaderDropZoneIcon.className,FileUploaderDropZoneText:a.FileUploaderDropZoneText.className,FileUploaderDropZoneButton:a.FileUploaderDropZoneButton.className,FileUploaderFile:a.FileUploaderFile.className,FileUploaderFileWrapper:a.FileUploaderFileWrapper.className,FileUploaderFileName:a.FileUploaderFileName.className,FileUploaderLoader:a.FileUploaderLoader.className,FileUploaderFileSize:a.FileUploaderFileSize.className,FileUploaderFileInfo:a.FileUploaderFileInfo.className,FileUploaderFileImage:a.FileUploaderFileImage.className,FileUploaderFileMain:a.FileUploaderFileMain.className,FileUploaderFileStatus:a.FileUploaderFileStatus.className,FileUploaderPreviewer:a.FileUploaderPreviewer.className,FileUploaderPreviewerText:a.FileUploaderPreviewerText.className,FileUploaderPreviewerBody:a.FileUploaderPreviewerBody.className,FileUploaderPreviewerFooter:a.FileUploaderPreviewerFooter.className,FileUploaderPreviewerFooterActions:a.FileUploaderPreviewerFooterActions.className,Flex:a.Flex.className,Grid:a.Grid.className,Heading:a.Heading.className,HighlightMatch:a.HighlightMatch.className,HighlightMatchHighlighted:a.HighlightMatchHighlighted.className,Icon:a.Icon.className,Image:a.Image.className,Input:a.Input.className,Label:a.Label.className,Link:a.Link.className,Loader:a.Loader.className,LoaderDeterminate:a.LoaderDeterminate.className,LoaderPercentageText:a.LoaderPercentageText.className,MenuContent:a.MenuContent.className,MenuContentWrapper:a.MenuContentWrapper.className,MenuItem:a.MenuItem.className,MenuTrigger:a.MenuTrigger.className,Message:a.Message.className,MessageIcon:a.MessageIcon.className,MessageHeading:a.MessageHeading.className,MessageBody:a.MessageBody.className,MessageContent:a.MessageContent.className,MessageDismiss:a.MessageDismiss.className,Pagination:a.Pagination.className,PaginationItemButton:a.PaginationItemButton.className,PaginationItemCurrent:a.PaginationItemCurrent.className,PaginationItemEllipsis:a.PaginationItemEllipsis.className,PasswordField:a.PasswordField.className,PhoneNumberField:a.PhoneNumberField.className,Placeholder:a.Placeholder.className,Radio:a.Radio.className,RadioButton:a.RadioButton.className,RadioInput:a.RadioInput.className,RadioLabel:a.RadioLabel.className,RadioGroupField:a.RadioGroupField.className,RadioGroup:a.RadioGroup.className,Rating:a.Rating.className,ScrollView:a.ScrollView.className,SearchField:a.SearchField.className,SearchFieldClear:a.SearchFieldClear.className,SearchFieldSearch:a.SearchFieldSearch.className,Select:a.Select.className,SelectField:a.SelectField.className,SelectWrapper:a.SelectWrapper.className,SelectIconWrapper:a.SelectIconWrapper.className,SliderField:a.SliderField.className,SliderFieldGroup:a.SliderFieldGroup.className,SliderFieldLabel:a.SliderFieldLabel.className,SliderFieldRange:a.SliderFieldRange.className,SliderFieldRoot:a.SliderFieldRoot.className,SliderFieldThumb:a.SliderFieldThumb.className,SliderFieldTrack:a.SliderFieldTrack.className,StepperField:a.StepperField.className,StepperFieldButtonDecrease:a.StepperFieldButtonDecrease.className,StepperFieldButtonIncrease:a.StepperFieldButtonIncrease.className,StepperFieldInput:a.StepperFieldInput.className,StorageImage:a.StorageImage.className,StorageManager:a.StorageManager.className,StorageManagerDropZone:a.StorageManagerDropZone.className,StorageManagerDropZoneIcon:a.StorageManagerDropZoneIcon.className,StorageManagerDropZoneText:a.StorageManagerDropZoneText.className,StorageManagerFilePicker:a.StorageManagerFilePicker.className,StorageManagerFile:a.StorageManagerFile.className,StorageManagerFileWrapper:a.StorageManagerFileWrapper.className,StorageManagerFileList:a.StorageManagerFileList.className,StorageManagerFileName:a.StorageManagerFileName.className,StorageManagerLoader:a.StorageManagerLoader.className,StorageManagerFileSize:a.StorageManagerFileSize.className,StorageManagerFileInfo:a.StorageManagerFileInfo.className,StorageManagerFileImage:a.StorageManagerFileImage.className,StorageManagerFileMain:a.StorageManagerFileMain.className,StorageManagerFileStatus:a.StorageManagerFileStatus.className,StorageManagerPreviewer:a.StorageManagerPreviewer.className,StorageManagerPreviewerText:a.StorageManagerPreviewerText.className,StorageManagerPreviewerActions:a.StorageManagerPreviewerActions.className,StorageManagerPreviewerFooter:a.StorageManagerPreviewerFooter.className,SwitchField:a.SwitchField.className,SwitchLabel:a.SwitchLabel.className,SwitchThumb:a.SwitchThumb.className,SwitchTrack:a.SwitchTrack.className,SwitchWrapper:a.SwitchWrapper.className,Table:a.Table.className,TableCaption:a.TableCaption.className,TableBody:a.TableBody.className,TableTd:a.TableTd.className,TableTh:a.TableTh.className,TableFoot:a.TableFoot.className,TableHead:a.TableHead.className,TableRow:a.TableRow.className,Tabs:a.Tabs.className,TabItems:a.TabItems.className,Text:a.Text.className,Textarea:a.Textarea.className,TextAreaField:a.TextAreaField.className,TextField:a.TextField.className,ToggleButton:a.ToggleButton.className,ToggleButtonGroup:a.ToggleButtonGroup.className,VisuallyHidden:a.VisuallyHidden.className},o={Alert:{dismissButtonLabel:"Dismiss alert"},Autocomplete:{emptyText:"No options found",loadingText:"Loading options..."},Collection:{searchButtonLabel:"Search",searchNoResultsFound:"No results found"},Fields:{clearButtonLabel:"Clear input"},Message:{dismissLabel:"Dismiss message"},PaginationItem:{currentPageLabel:"Page",nextLabel:"Go to next page",pageLabel:"Go to page",previousLabel:"Go to previous page"},PhoneNumberField:{countryCodeLabel:"Country code"},SearchField:{searchButtonLabel:"Search"},PasswordField:{passwordIsHidden:"Password is hidden",passwordIsShown:"Password is shown",showPassword:"Show password"},StepperField:{increaseButtonLabel:"Increase to",decreaseButtonLabel:"Decrease to"}},l={backgroundColor:"colors",borderColor:"colors",borderWidth:"borderWidths",color:"colors",borderRadius:"radii",fontSize:"fontSizes",fontWeight:"fontWeights",fontFamily:"fonts",lineHeight:"lineHeights",opacity:"opacities",boxShadow:"shadows",transform:"transforms",left:"space",right:"space",top:"space",bottom:"space",height:"space",width:"space",letterSpacing:"space",margin:"space",marginBlock:"space",marginBlockEnd:"space",marginBlockStart:"space",marginInline:"space",marginInlineEnd:"space",marginInlineStart:"space",marginLeft:"space",marginRight:"space",marginTop:"space",marginBottom:"space",maxHeight:"space",maxWidth:"space",minHeight:"space",minWidth:"space",padding:"space",paddingBlock:"space",paddingBlockEnd:"space",paddingBlockStart:"space",paddingInline:"space",paddingInlineEnd:"space",paddingInlineStart:"space",paddingLeft:"space",paddingRight:"space",paddingTop:"space",paddingBottom:"space",gap:"space",columnGap:"space",rowGap:"space"},s="Escape",i="Enter",r="ArrowUp",n="ArrowDown";export{n as ARROW_DOWN,r as ARROW_UP,t as ComponentClassNames,a as ComponentClassObject,o as ComponentText,i as ENTER_KEY,s as ESCAPE_KEY,l as stylePropsToThemeKeys};
+// For internal use, no need to export
+const ComponentText = {
+    Alert: {
+        dismissButtonLabel: 'Dismiss alert',
+    },
+    Autocomplete: {
+        emptyText: 'No options found',
+        loadingText: 'Loading options...',
+    },
+    Collection: {
+        searchButtonLabel: 'Search',
+        searchNoResultsFound: 'No results found',
+    },
+    Fields: {
+        clearButtonLabel: 'Clear input',
+    },
+    Message: {
+        dismissLabel: 'Dismiss message',
+    },
+    PaginationItem: {
+        currentPageLabel: 'Page',
+        nextLabel: 'Go to next page',
+        pageLabel: 'Go to page',
+        previousLabel: 'Go to previous page',
+    },
+    PhoneNumberField: {
+        countryCodeLabel: 'Country code',
+    },
+    SearchField: {
+        searchButtonLabel: 'Search',
+    },
+    PasswordField: {
+        passwordIsHidden: 'Password is hidden',
+        passwordIsShown: 'Password is shown',
+        showPassword: 'Show password',
+    },
+    StepperField: {
+        increaseButtonLabel: 'Increase to',
+        decreaseButtonLabel: 'Decrease to',
+    },
+};
+const stylePropsToThemeKeys = {
+    backgroundColor: 'colors',
+    borderColor: 'colors',
+    borderWidth: 'borderWidths',
+    color: 'colors',
+    borderRadius: 'radii',
+    fontSize: 'fontSizes',
+    fontWeight: 'fontWeights',
+    fontFamily: 'fonts',
+    lineHeight: 'lineHeights',
+    opacity: 'opacities',
+    boxShadow: 'shadows',
+    transform: 'transforms',
+    left: 'space',
+    right: 'space',
+    top: 'space',
+    bottom: 'space',
+    height: 'space',
+    width: 'space',
+    letterSpacing: 'space',
+    margin: 'space',
+    marginBlock: 'space',
+    marginBlockEnd: 'space',
+    marginBlockStart: 'space',
+    marginInline: 'space',
+    marginInlineEnd: 'space',
+    marginInlineStart: 'space',
+    marginLeft: 'space',
+    marginRight: 'space',
+    marginTop: 'space',
+    marginBottom: 'space',
+    maxHeight: 'space',
+    maxWidth: 'space',
+    minHeight: 'space',
+    minWidth: 'space',
+    padding: 'space',
+    paddingBlock: 'space',
+    paddingBlockEnd: 'space',
+    paddingBlockStart: 'space',
+    paddingInline: 'space',
+    paddingInlineEnd: 'space',
+    paddingInlineStart: 'space',
+    paddingLeft: 'space',
+    paddingRight: 'space',
+    paddingTop: 'space',
+    paddingBottom: 'space',
+    gap: 'space',
+    columnGap: 'space',
+    rowGap: 'space',
+};
+// key name
+const ESCAPE_KEY = 'Escape';
+const ENTER_KEY = 'Enter';
+const ARROW_UP = 'ArrowUp';
+const ARROW_DOWN = 'ArrowDown';
+
+export { ARROW_DOWN, ARROW_UP, ComponentText, ENTER_KEY, ESCAPE_KEY, stylePropsToThemeKeys };

package/dist/esm/primitives/shared/getStyleValue.mjs

@@ -1 +1,25 @@
-import{isDesignToken as o,isString as t}from"@aws-amplify/ui";import{getCSSVariableIfValueIsThemeKey as r}from"./utils.mjs";const i=({value:i,propKey:m,tokens:p})=>o(i)?i.toString():t(i)?t(m)?r(m,i,p):i:null;export{i as getStyleValue};
+import { isDesignToken, isString } from '@aws-amplify/ui';
+import { getCSSVariableIfValueIsThemeKey } from './utils.mjs';
+
+/**
+ * This takes an unknown value, which could be a:
+ * - design token: `color={tokens.colors.font.primary}`
+ * - string, which could be a:
+ *   - theme key: `color='font.primary'`
+ *   - plain style: `color='red'`
+ * - or a number: `padding={10}`
+ * and returns the appropriate and resolved value
+ */
+const getStyleValue = ({ value, propKey, tokens, }) => {
+    if (isDesignToken(value)) {
+        return value.toString();
+    }
+    if (isString(value)) {
+        return isString(propKey)
+            ? getCSSVariableIfValueIsThemeKey(propKey, value, tokens)
+            : value;
+    }
+    return null;
+};
+
+export { getStyleValue };

package/dist/esm/primitives/shared/responsive/getMediaQueries.mjs

@@ -1 +1,29 @@
-import{objectKeys as t}from"../utils.mjs";const n=({breakpoints:n})=>{const r=t(n).sort(((t,r)=>n[r]-n[t]));return r.map(((t,i)=>{let o="";const m=n[t],e=r[i-1],p=e?n[e]-1:null;return m>=0&&(o=`(min-width: ${m}px)`),null!==p&&(o&&(o+=" and "),o+=`(max-width: ${p}px)`),{breakpoint:t,query:o,maxWidth:p,minWidth:m}}))};export{n as getMediaQueries};
+import { objectKeys } from '../utils.mjs';
+
+// Inspiration for getMediaQueries and useBreakpoint
+const getMediaQueries = ({ breakpoints }) => {
+    const sortedBreakpoints = objectKeys(breakpoints).sort((a, b) => breakpoints[b] - breakpoints[a]);
+    return sortedBreakpoints.map((breakpoint, index) => {
+        let query = '';
+        const minWidth = breakpoints[breakpoint];
+        const nextBreakpoint = sortedBreakpoints[index - 1];
+        const maxWidth = nextBreakpoint ? breakpoints[nextBreakpoint] - 1 : null;
+        if (minWidth >= 0) {
+            query = `(min-width: ${minWidth}px)`;
+        }
+        if (maxWidth !== null) {
+            if (query) {
+                query += ' and ';
+            }
+            query += `(max-width: ${maxWidth}px)`;
+        }
+        return {
+            breakpoint,
+            query,
+            maxWidth,
+            minWidth,
+        };
+    });
+};
+
+export { getMediaQueries };

package/dist/esm/primitives/shared/responsive/useBreakpoint.mjs

@@ -1 +1,39 @@
-import*as e from"react";import{getMediaQueries as t}from"./getMediaQueries.mjs";const n="undefined"==typeof window?e.useEffect:e.useLayoutEffect,o=({breakpoints:o,defaultBreakpoint:a})=>{const r="undefined"!=typeof window&&void 0!==window.matchMedia?window.matchMedia:null,i=e.useMemo((()=>t({breakpoints:o})),[o]),[s,u]=e.useState(a),c=e.useCallback(((e,t)=>{e&&u(t)}),[u]);return n((()=>{if(!r)return;const e=i.map((({query:e,breakpoint:t})=>{const n=r(e);c(n.matches,t);const o=e=>{e.matches&&u(t)};return n.addEventListener("change",o),()=>n.removeEventListener("change",o)}));return()=>{e.forEach((e=>e()))}}),[o,u,r,i]),e.useDebugValue(s,(e=>e)),s};export{o as useBreakpoint};
+import * as React from 'react';
+import { getMediaQueries } from './getMediaQueries.mjs';
+
+// Inspiration for getMediaQueries and useBreakpoint
+const useIsomorphicEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+const useBreakpoint = ({ breakpoints, defaultBreakpoint, }) => {
+    const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+    const matchMedia = supportMatchMedia ? window.matchMedia : null;
+    const mediaQueries = React.useMemo(() => getMediaQueries({ breakpoints }), [breakpoints]);
+    const [breakpoint, setBreakpoint] = React.useState(defaultBreakpoint);
+    const updateBreakpoint = React.useCallback((matches, breakpoint) => {
+        if (matches) {
+            setBreakpoint(breakpoint);
+        }
+    }, [setBreakpoint]);
+    useIsomorphicEffect(() => {
+        if (!matchMedia)
+            return;
+        const unsubscribeList = mediaQueries.map(({ query, breakpoint }) => {
+            const queryList = matchMedia(query);
+            updateBreakpoint(queryList.matches, breakpoint);
+            const handleMediaChange = (event) => {
+                if (event.matches) {
+                    setBreakpoint(breakpoint);
+                }
+            };
+            queryList.addEventListener('change', handleMediaChange);
+            return () => queryList.removeEventListener('change', handleMediaChange);
+        });
+        return () => {
+            unsubscribeList.forEach((unsubscribe) => unsubscribe());
+        };
+    }, [breakpoints, setBreakpoint, matchMedia, mediaQueries]);
+    /** Print a nice debug value for React Devtools */
+    React.useDebugValue(breakpoint, (breakpoint) => breakpoint);
+    return breakpoint;
+};
+
+export { useBreakpoint };

package/dist/esm/primitives/shared/responsive/utils.mjs

@@ -1 +1,51 @@
-import{defaultTheme as r}from"@aws-amplify/ui";import{objectKeys as t}from"../utils.mjs";const o=({breakpoint:o,breakpoints:e,values:s})=>{let i={};const n=t(e).sort(((r,t)=>e[r]-e[t]));var a;return Array.isArray(s)?s.forEach(((r,t)=>{i[n[t]]=r})):"object"==typeof s&&(i=t(a=s).reduce(((t,o)=>o in r.breakpoints.values?Object.assign(Object.assign({},t),{[o]:a[o]}):t),{})),(({breakpoint:r,breakpoints:o,values:e})=>{const s=e[r];if(void 0!==s)return s;const i=t(o).sort(((r,t)=>o[t]-o[r])),n=i.slice(i.indexOf(r));for(const r of n){const t=e[r];if(void 0!==t)return t}return null})({breakpoint:o,breakpoints:e,values:i})};export{o as getValueAtCurrentBreakpoint};
+import { defaultTheme } from '@aws-amplify/ui';
+import { objectKeys } from '../utils.mjs';
+
+const getClosestValueByBreakpoint = ({ breakpoint, breakpoints, values, }) => {
+    const value = values[breakpoint];
+    // Check if breakpoint exists in values
+    if (value !== undefined) {
+        return value;
+    }
+    // Otherwise use a lower breakpoint value
+    const breakpointsDesc = objectKeys(breakpoints).sort((a, b) => breakpoints[b] - breakpoints[a]);
+    const lowerBreakpoints = breakpointsDesc.slice(breakpointsDesc.indexOf(breakpoint));
+    for (const breakpoint of lowerBreakpoints) {
+        // Check if breakpoint exists in values
+        const value = values[breakpoint];
+        if (value !== undefined) {
+            return value;
+        }
+    }
+    return null;
+};
+/**
+ * This takes an object and will return an object that only has the
+ * breakpoint keys
+ * @param obj
+ * @returns
+ */
+const valueObjToBreakpoints = (obj) => {
+    return objectKeys(obj).reduce((acc, key) => key in defaultTheme.breakpoints.values
+        ? { ...acc, [key]: obj[key] }
+        : acc, {});
+};
+const getValueAtCurrentBreakpoint = ({ breakpoint, breakpoints, values, }) => {
+    let breakpointCompatValues = {};
+    const breakpointsAscending = objectKeys(breakpoints).sort((a, b) => breakpoints[a] - breakpoints[b]);
+    if (Array.isArray(values)) {
+        values.forEach((value, index) => {
+            breakpointCompatValues[breakpointsAscending[index]] = value;
+        });
+    }
+    else if (typeof values === 'object') {
+        breakpointCompatValues = valueObjToBreakpoints(values);
+    }
+    return getClosestValueByBreakpoint({
+        breakpoint,
+        breakpoints,
+        values: breakpointCompatValues,
+    });
+};
+
+export { getValueAtCurrentBreakpoint };

package/dist/esm/primitives/shared/styleUtils.mjs

@@ -1 +1,122 @@
-import{__rest as o}from"tslib";import*as e from"react";import{isDesignToken as t}from"@aws-amplify/ui";import{ComponentPropsToStylePropsMap as r}from"../types/style.mjs";import{getValueAtCurrentBreakpoint as s}from"./responsive/utils.mjs";import{useBreakpoint as n}from"./responsive/useBreakpoint.mjs";import"../../components/ThemeProvider/AmplifyContext.mjs";import{useTheme as p}from"../../hooks/useTheme.mjs";import{getStyleValue as a}from"./getStyleValue.mjs";import{isNullOrEmptyString as i,isEmptyString as m,getCSSVariableIfValueIsThemeKey as l}from"./utils.mjs";const u=o=>"auto"===o||"number"==typeof o&&!isNaN(o)||"string"==typeof o&&!isNaN(parseFloat(o)),c=o=>"auto"===o?"auto":`span ${o}`,f=o=>u(o)?c(o):Array.isArray(o)?o.map((o=>c(o))):"object"==typeof o&&null!=o?Object.entries(o).reduce(((o,[e,t])=>Object.assign(Object.assign({},o),{[e]:c(t)})),{}):null,b=t=>{const{rowSpan:r,columnSpan:s,row:n,column:p}=t,a=o(t,["rowSpan","columnSpan","row","column"]),{rowFromSpanValue:m,columnFromSpanValue:l}=e.useMemo((()=>({rowFromSpanValue:f(r),columnFromSpanValue:f(s)})),[r,s]);return Object.assign({row:i(n)?m:n,column:i(p)?l:p},a)},y=({props:o={},style:e={},breakpoint:n,breakpoints:p,tokens:i})=>{const u={};return Object.keys(o).filter((e=>null!==o[e])).forEach((c=>{if(c in r){const u=o[c];if(!u||m(u))return;const f=r[c];let b="";t(u)?b=u.toString():"string"==typeof u?b=l(c,u,i):"number"==typeof u?b=u:"object"==typeof u&&(b=a({propKey:c,tokens:i,value:s({values:u,breakpoint:n,breakpoints:p})})),e=Object.assign(Object.assign({},e),{[f]:b})}else void 0!==o[c]&&(u[c]=o[c])})),{propStyles:e,nonStyleProps:u}},k=(o,t)=>{const{breakpoints:{values:r,defaultBreakpoint:s},tokens:a}=p(),i=n({breakpoints:r,defaultBreakpoint:s}),m=b(o);return e.useMemo((()=>y({props:m,style:t,breakpoint:i,breakpoints:r,tokens:a})),[m,t,r,i,a])};export{f as convertGridSpan,y as convertStylePropsToStyleObj,c as getGridSpan,u as isSpanPrimitiveValue,k as useStyles,b as useTransformStyleProps};
+import * as React from 'react';
+import { isDesignToken } from '@aws-amplify/ui';
+import { ComponentPropsToStylePropsMap } from '../types/style.mjs';
+import { getValueAtCurrentBreakpoint } from './responsive/utils.mjs';
+import { useBreakpoint } from './responsive/useBreakpoint.mjs';
+import { useTheme } from '../../hooks/useTheme.mjs';
+import { getStyleValue } from './getStyleValue.mjs';
+import { isNullOrEmptyString, isEmptyString, getCSSVariableIfValueIsThemeKey } from './utils.mjs';
+
+const isSpanPrimitiveValue = (spanValue) => {
+    return (spanValue === 'auto' ||
+        (typeof spanValue === 'number' && !isNaN(spanValue)) ||
+        (typeof spanValue === 'string' && !isNaN(parseFloat(spanValue))));
+};
+const getGridSpan = (spanValue) => {
+    return spanValue === 'auto' ? 'auto' : `span ${spanValue}`;
+};
+const convertGridSpan = (spanValue) => {
+    // PropertyType
+    if (isSpanPrimitiveValue(spanValue)) {
+        return getGridSpan(spanValue);
+    }
+    // PropertyType[]
+    if (Array.isArray(spanValue)) {
+        return spanValue.map((value) => getGridSpan(value));
+    }
+    // ResponsiveObject<PropertyType>
+    if (typeof spanValue === 'object' && spanValue != null) {
+        return Object.entries(spanValue).reduce((acc, [key, value]) => ({ ...acc, [key]: getGridSpan(value) }), {});
+    }
+    return null;
+};
+/**
+ * Transforms style props to another target prop
+ * where the original is a simpler API than the target.
+ * This function will remove the original prop and
+ * replace target prop values with calculated
+ * E.g. rowSpan => row, columnSpan => column
+ */
+const useTransformStyleProps = (props) => {
+    const { rowSpan, columnSpan, row, column, ...rest } = props;
+    const { rowFromSpanValue, columnFromSpanValue } = React.useMemo(() => {
+        return {
+            rowFromSpanValue: convertGridSpan(rowSpan),
+            columnFromSpanValue: convertGridSpan(columnSpan),
+        };
+    }, [rowSpan, columnSpan]);
+    return {
+        row: !isNullOrEmptyString(row) ? row : rowFromSpanValue,
+        column: !isNullOrEmptyString(column) ? column : columnFromSpanValue,
+        ...rest,
+    };
+};
+const isComponentStyleProp = (key) => {
+    return key in ComponentPropsToStylePropsMap;
+};
+/**
+ * Convert style props to CSS variables for React style prop
+ * Note: Will filter out undefined, null, and empty string prop values
+ */
+const convertStylePropsToStyleObj = ({ props = {}, style = {}, breakpoint, breakpoints, tokens, }) => {
+    const nonStyleProps = {};
+    Object.keys(props)
+        .filter((propKey) => props[propKey] !== null)
+        .forEach((propKey) => {
+        if (isComponentStyleProp(propKey)) {
+            const values = props[propKey];
+            if (!values || isEmptyString(values))
+                return;
+            const reactStyleProp = ComponentPropsToStylePropsMap[propKey];
+            // short circuit the style prop here if it is a string or design token
+            // so we don't have to call getValueAtCurrentBreakpoint every time
+            let value = '';
+            if (isDesignToken(values)) {
+                value = values.toString();
+            }
+            else if (typeof values === 'string') {
+                value = getCSSVariableIfValueIsThemeKey(propKey, values, tokens);
+            }
+            else if (typeof values === 'number') {
+                value = values;
+            }
+            else if (typeof values === 'object') {
+                // here values should be a responsive array or object
+                value = getStyleValue({
+                    propKey,
+                    tokens,
+                    value: getValueAtCurrentBreakpoint({
+                        values,
+                        breakpoint,
+                        breakpoints,
+                    }),
+                });
+            }
+            style = {
+                ...style,
+                [reactStyleProp]: value,
+            };
+        }
+        else if (typeof props[propKey] !== 'undefined') {
+            nonStyleProps[propKey] = props[propKey];
+        }
+    });
+    return { propStyles: style, nonStyleProps };
+};
+const useStyles = (props, style) => {
+    const { breakpoints: { values: breakpoints, defaultBreakpoint }, tokens, } = useTheme();
+    const breakpoint = useBreakpoint({
+        breakpoints,
+        defaultBreakpoint,
+    });
+    const propStyles = useTransformStyleProps(props);
+    return React.useMemo(() => convertStylePropsToStyleObj({
+        props: propStyles,
+        style,
+        breakpoint,
+        breakpoints,
+        tokens,
+    }), [propStyles, style, breakpoints, breakpoint, tokens]);
+};
+
+export { convertGridSpan, convertStylePropsToStyleObj, getGridSpan, isSpanPrimitiveValue, useStyles, useTransformStyleProps };

package/dist/esm/primitives/shared/utils.mjs

@@ -1 +1,60 @@
-import{isDesignToken as t,cssNameTransform as r}from"@aws-amplify/ui";export{classNameModifier,classNameModifierByFlag}from"@aws-amplify/ui";import{isThemeStylePropKey as e}from"../types/theme.mjs";import{stylePropsToThemeKeys as i}from"./constants.mjs";const o=t=>"string"==typeof t&&t.length>0,s=t=>"string"==typeof t&&0===t.length,n=t=>null==t||s(t),f=(t,r)=>{const e=r-t+1;return Array.from({length:e},((r,e)=>e+t))},l=t=>Object.keys(t),m=(o,s,n)=>{if("string"!=typeof s)return s;if(s.includes(" "))return s.split(" ").map((t=>m(o,t,n))).join(" ");if(e(o)){const e=s.split("."),f=i[o];let l=n[f];for(let t=0;t<e.length&&l;t++)l=l[e[t]];return t(l)?`var(--${r({path:[i[o],...e]})})`:s}return s};export{m as getCSSVariableIfValueIsThemeKey,f as getConsecutiveIntArray,s as isEmptyString,n as isNullOrEmptyString,l as objectKeys,o as strHasLength};
+import { isDesignToken, cssNameTransform } from '@aws-amplify/ui';
+export { classNameModifier, classNameModifierByFlag } from '@aws-amplify/ui';
+import { isThemeStylePropKey } from '../types/theme.mjs';
+import { stylePropsToThemeKeys } from './constants.mjs';
+
+const strHasLength = (str) => typeof str === 'string' && str.length > 0;
+const isEmptyString = (value) => typeof value === 'string' && value.length === 0;
+const isNullOrEmptyString = (value) => value == null || isEmptyString(value);
+/**
+ * Create a consecutive integer array from start value to end value.
+ * @param start start value
+ * @param end end value
+ * @returns an integer array with elements from start to end consecutively
+ */
+const getConsecutiveIntArray = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({ length }, (_, idx) => idx + start);
+};
+/**
+ * TS helper function to make using Object.keys more typesafe
+ */
+const objectKeys = (obj) => {
+    return Object.keys(obj);
+};
+const getCSSVariableIfValueIsThemeKey = (propKey, value, tokens) => {
+    if (typeof value !== 'string') {
+        return value;
+    }
+    // For shorthand properties like `padding` which can accept 1, 2, 3, or 4 values
+    // run this function on each value. This would not work on CSS shorthands that
+    // mix types, like border which is a composite of borderWidth, borderStyle, and
+    // borderColor.
+    if (value.includes(' ')) {
+        return value
+            .split(' ')
+            .map((val) => getCSSVariableIfValueIsThemeKey(propKey, val, tokens))
+            .join(' ');
+    }
+    if (isThemeStylePropKey(propKey)) {
+        const path = value.split('.');
+        const tokenKey = stylePropsToThemeKeys[propKey];
+        let tokenProps = tokens[tokenKey];
+        for (let i = 0; i < path.length; i++) {
+            if (tokenProps) {
+                // overwrite tokenProps with next nested value of tokenProps
+                tokenProps = tokenProps[path[i]];
+                continue;
+            }
+            break;
+        }
+        return isDesignToken(tokenProps)
+            ? `var(--${cssNameTransform({
+                path: [stylePropsToThemeKeys[propKey], ...path],
+            })})`
+            : value;
+    }
+    return value;
+};
+
+export { getCSSVariableIfValueIsThemeKey, getConsecutiveIntArray, isEmptyString, isNullOrEmptyString, objectKeys, strHasLength };

package/dist/esm/primitives/types/style.mjs

@@ -1 +1,104 @@
-const n={alignContent:"alignContent",alignItems:"alignItems",alignSelf:"alignSelf",area:"gridArea",aspectRatio:"aspectRatio",autoColumns:"gridAutoColumns",autoFlow:"gridAutoFlow",autoRows:"gridAutoRows",backgroundColor:"backgroundColor",backgroundImage:"backgroundImage",basis:"flexBasis",border:"border",borderRadius:"borderRadius",borderColor:"borderColor",borderWidth:"borderWidth",borderStyle:"borderStyle",bottom:"bottom",boxShadow:"boxShadow",color:"color",column:"gridColumn",columnEnd:"gridColumnEnd",columnGap:"columnGap",columnSpan:"gridColumn",columnStart:"gridColumnStart",direction:"flexDirection",display:"display",flex:"flex",fontFamily:"fontFamily",fontSize:"fontSize",fontStyle:"fontStyle",fontWeight:"fontWeight",gap:"gap",grow:"flexGrow",height:"height",justifyContent:"justifyContent",left:"left",letterSpacing:"letterSpacing",lineHeight:"lineHeight",margin:"margin",marginBlock:"marginBlock",marginBlockEnd:"marginBlockEnd",marginBlockStart:"marginBlockStart",marginBottom:"marginBlockEnd",marginInline:"marginInline",marginInlineEnd:"marginInlineEnd",marginInlineStart:"marginInlineStart",marginLeft:"marginInlineStart",marginRight:"marginInlineEnd",marginTop:"marginBlockStart",maxHeight:"maxHeight",maxWidth:"maxWidth",minHeight:"minHeight",minWidth:"minWidth",objectFit:"objectFit",objectPosition:"objectPosition",opacity:"opacity",order:"order",overflow:"overflow",padding:"padding",paddingBlock:"paddingBlock",paddingBlockEnd:"paddingBlockEnd",paddingBlockStart:"paddingBlockStart",paddingBottom:"paddingBlockEnd",paddingInline:"paddingInline",paddingInlineEnd:"paddingInlineEnd",paddingInlineStart:"paddingInlineStart",paddingLeft:"paddingInlineStart",paddingRight:"paddingInlineEnd",paddingTop:"paddingBlockStart",position:"position",resize:"resize",right:"right",row:"gridRow",rowEnd:"gridRowEnd",rowGap:"rowGap",rowSpan:"gridRow",rowStart:"gridRowStart",shrink:"flexShrink",templateAreas:"gridTemplateAreas",templateColumns:"gridTemplateColumns",templateRows:"gridTemplateRows",textAlign:"textAlign",textDecoration:"textDecoration",textTransform:"textTransform",top:"top",transform:"transform",transformOrigin:"transformOrigin",width:"width",whiteSpace:"whiteSpace",wrap:"flexWrap"},i=Object.keys(n);export{n as ComponentPropsToStylePropsMap,i as ComponentPropsToStylePropsMapKeys};
+/**
+ * @internal May be removed in a future version
+ * Maps from component style props to React `style` props
+ * Note: Primarily needed to map from component style props that don't match CSS Properties directly
+ * such as wrap => flexWrap and direction => flexDirection
+ */
+const ComponentPropsToStylePropsMap = {
+    alignContent: 'alignContent',
+    alignItems: 'alignItems',
+    alignSelf: 'alignSelf',
+    area: 'gridArea',
+    aspectRatio: 'aspectRatio',
+    autoColumns: 'gridAutoColumns',
+    autoFlow: 'gridAutoFlow',
+    autoRows: 'gridAutoRows',
+    backgroundColor: 'backgroundColor',
+    backgroundImage: 'backgroundImage',
+    basis: 'flexBasis',
+    border: 'border',
+    borderRadius: 'borderRadius',
+    borderColor: 'borderColor',
+    borderWidth: 'borderWidth',
+    borderStyle: 'borderStyle',
+    bottom: 'bottom',
+    boxShadow: 'boxShadow',
+    color: 'color',
+    column: 'gridColumn',
+    columnEnd: 'gridColumnEnd',
+    columnGap: 'columnGap',
+    columnSpan: 'gridColumn',
+    columnStart: 'gridColumnStart',
+    direction: 'flexDirection',
+    display: 'display',
+    flex: 'flex',
+    fontFamily: 'fontFamily',
+    fontSize: 'fontSize',
+    fontStyle: 'fontStyle',
+    fontWeight: 'fontWeight',
+    gap: 'gap',
+    grow: 'flexGrow',
+    height: 'height',
+    justifyContent: 'justifyContent',
+    left: 'left',
+    letterSpacing: 'letterSpacing',
+    lineHeight: 'lineHeight',
+    margin: 'margin',
+    marginBlock: 'marginBlock',
+    marginBlockEnd: 'marginBlockEnd',
+    marginBlockStart: 'marginBlockStart',
+    marginBottom: 'marginBlockEnd',
+    marginInline: 'marginInline',
+    marginInlineEnd: 'marginInlineEnd',
+    marginInlineStart: 'marginInlineStart',
+    marginLeft: 'marginInlineStart',
+    marginRight: 'marginInlineEnd',
+    marginTop: 'marginBlockStart',
+    maxHeight: 'maxHeight',
+    maxWidth: 'maxWidth',
+    minHeight: 'minHeight',
+    minWidth: 'minWidth',
+    objectFit: 'objectFit',
+    objectPosition: 'objectPosition',
+    opacity: 'opacity',
+    order: 'order',
+    overflow: 'overflow',
+    padding: 'padding',
+    paddingBlock: 'paddingBlock',
+    paddingBlockEnd: 'paddingBlockEnd',
+    paddingBlockStart: 'paddingBlockStart',
+    paddingBottom: 'paddingBlockEnd',
+    paddingInline: 'paddingInline',
+    paddingInlineEnd: 'paddingInlineEnd',
+    paddingInlineStart: 'paddingInlineStart',
+    paddingLeft: 'paddingInlineStart',
+    paddingRight: 'paddingInlineEnd',
+    paddingTop: 'paddingBlockStart',
+    position: 'position',
+    resize: 'resize',
+    right: 'right',
+    row: 'gridRow',
+    rowEnd: 'gridRowEnd',
+    rowGap: 'rowGap',
+    rowSpan: 'gridRow',
+    rowStart: 'gridRowStart',
+    shrink: 'flexShrink',
+    templateAreas: 'gridTemplateAreas',
+    templateColumns: 'gridTemplateColumns',
+    templateRows: 'gridTemplateRows',
+    textAlign: 'textAlign',
+    textDecoration: 'textDecoration',
+    textTransform: 'textTransform',
+    top: 'top',
+    transform: 'transform',
+    transformOrigin: 'transformOrigin',
+    width: 'width',
+    whiteSpace: 'whiteSpace',
+    wrap: 'flexWrap',
+};
+/**
+ * @internal May be removed in a future version
+ */
+const ComponentPropsToStylePropsMapKeys = Object.keys(ComponentPropsToStylePropsMap);
+
+export { ComponentPropsToStylePropsMap, ComponentPropsToStylePropsMapKeys };

package/dist/esm/primitives/types/theme.mjs

@@ -1 +1,7 @@
-import{stylePropsToThemeKeys as o}from"../shared/constants.mjs";const s=s=>s in o;export{s as isThemeStylePropKey};
+import { stylePropsToThemeKeys } from '../shared/constants.mjs';
+
+const isThemeStylePropKey = (key) => {
+    return key in stylePropsToThemeKeys;
+};
+
+export { isThemeStylePropKey };

package/dist/esm/primitives/utils/getTestId.mjs

@@ -1 +1,3 @@
-const o=(o,t)=>o&&t?`${o}-${t}`:void 0;export{o as getTestId};
+const getTestId = (testId, component) => testId && component ? `${testId}-${component}` : undefined;
+
+export { getTestId };