@aws-amplify/ui-react 5.3.2 → 6.0.1

package/dist/esm/primitives/Checkbox/Checkbox.mjs

@@ -1 +1,84 @@
-import{__rest as e}from"tslib";import*as t from"react";import s from"classnames";import{classNameModifierByFlag as a,isFunction as o}from"@aws-amplify/ui";import{Flex as c}from"../Flex/Flex.mjs";import"../Icon/Icon.mjs";import"../Icon/context/IconsContext.mjs";import{useIcons as n}from"../Icon/context/useIcons.mjs";import{ComponentClassNames as i}from"../shared/constants.mjs";import{View as d}from"../View/View.mjs";import{IconCheck as r}from"../Icon/icons/IconCheck.mjs";import{IconIndeterminate as l}from"../Icon/icons/IconIndeterminate.mjs";import{Input as m}from"../Input/Input.mjs";import{Text as b}from"../Text/Text.mjs";import{VisuallyHidden as u}from"../VisuallyHidden/VisuallyHidden.mjs";import{getTestId as h}from"../utils/getTestId.mjs";import{useStableId as p}from"../utils/useStableId.mjs";import{splitPrimitiveProps as k}from"../utils/splitPrimitiveProps.mjs";import{useFieldset as f}from"../Fieldset/useFieldset.mjs";const I=t.forwardRef(((I,x)=>{var{checked:C,className:j,defaultChecked:E,hasError:y,isDisabled:g,isIndeterminate:N,label:B,labelHidden:F,labelPosition:S,onBlur:v,onFocus:H,onChange:O,testId:P,inputStyles:V}=I,w=e(I,["checked","className","defaultChecked","hasError","isDisabled","isIndeterminate","label","labelHidden","labelPosition","onBlur","onFocus","onChange","testId","inputStyles"]);const{styleProps:D,rest:T}=k(w),[L,q]=t.useState(!1),R=n("checkbox"),{isFieldsetDisabled:$}=f(),z=$||g,A=void 0!==C,[G,J]=t.useState((()=>A?C:E)),K=A?C:G,M=p();t.useEffect((()=>{const e=document.querySelector(`[data-id="${M}"]`);e&&"boolean"==typeof N&&(e.indeterminate=N)}),[M,N]);const Q=h(P,i.CheckboxButton),U=h(P,i.CheckboxIcon),W=h(P,i.CheckboxLabel),X=s(i.CheckboxButton,a(i.CheckboxButton,"disabled",z),a(i.CheckboxButton,"error",y),a(i.CheckboxButton,"focused",L)),Y=s(i.CheckboxIcon,a(i.CheckboxIcon,"checked",K),a(i.CheckboxIcon,"disabled",z),a(i.CheckboxIcon,"indeterminate",N)),Z={className:s(Y),"data-checked":G,"data-disabled":z,"data-testid":U},_=(null==R?void 0:R.checked)?t.createElement(d,{as:"span",className:s(Y)},R.checked):t.createElement(r,Object.assign({},Z)),ee=(null==R?void 0:R.indeterminate)?t.createElement(d,{as:"span",className:s(Y)},R.indeterminate):t.createElement(l,Object.assign({},Z));return t.createElement(c,Object.assign({as:"label",className:s(i.Checkbox,a(i.Checkbox,"disabled",z),j),"data-disabled":z,"data-label-position":S,testId:P},D),t.createElement(u,null,t.createElement(m,Object.assign({checked:C,className:i.CheckboxInput,"data-id":M,defaultChecked:E,isDisabled:z,onBlur:e=>{o(v)&&v(e),q(!1)},onChange:e=>{o(O)&&O(e),A||J(e.target.checked)},onFocus:e=>{o(H)&&H(e),q(!0)},ref:x,type:"checkbox"},T))),B&&t.createElement(b,{as:"span",className:s(i.CheckboxLabel,{[i.VisuallyHidden]:F}),"data-disabled":z,testId:W},B),t.createElement(c,Object.assign({"aria-hidden":"true",as:"span",className:X,"data-checked":K,"data-disabled":z,"data-focus":L,"data-error":y,testId:Q},V),N?ee:_))}));I.displayName="Checkbox";export{I as Checkbox};
+import * as React from 'react';
+import { ComponentClassName, classNames, classNameModifierByFlag, isFunction } from '@aws-amplify/ui';
+import { Flex } from '../Flex/Flex.mjs';
+import '../Icon/Icon.mjs';
+import '../Icon/context/IconsContext.mjs';
+import { useIcons } from '../Icon/context/useIcons.mjs';
+import { View } from '../View/View.mjs';
+import { IconCheck } from '../Icon/icons/IconCheck.mjs';
+import { IconIndeterminate } from '../Icon/icons/IconIndeterminate.mjs';
+import { Input } from '../Input/Input.mjs';
+import { Text } from '../Text/Text.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { getTestId } from '../utils/getTestId.mjs';
+import { useStableId } from '../utils/useStableId.mjs';
+import { splitPrimitiveProps } from '../utils/splitPrimitiveProps.mjs';
+import { useFieldset } from '../Fieldset/useFieldset.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+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.useState(false);
+    const icons = useIcons('checkbox');
+    const { isFieldsetDisabled } = useFieldset();
+    const shouldBeDisabled = isFieldsetDisabled ? isFieldsetDisabled : isDisabled;
+    const isControlled = controlledChecked !== undefined;
+    const [localChecked, setLocalChecked] = React.useState(() => 
+    // if controlled, initialize to `controlledChecked` else `defaultChecked`
+    isControlled ? controlledChecked : defaultChecked);
+    const checked = isControlled ? controlledChecked : localChecked;
+    const onChange = (e) => {
+        if (isFunction(_onChange)) {
+            _onChange(e);
+        }
+        // in controlled mode, `controlledChecked` determines checked state
+        if (!isControlled) {
+            setLocalChecked(e.target.checked);
+        }
+    };
+    const onFocus = (e) => {
+        if (isFunction(_onFocus)) {
+            _onFocus(e);
+        }
+        setFocused(true);
+    };
+    const onBlur = (e) => {
+        if (isFunction(_onBlur)) {
+            _onBlur(e);
+        }
+        setFocused(false);
+    };
+    const dataId = useStableId();
+    React.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, ComponentClassName.CheckboxButton);
+    const iconTestId = getTestId(testId, ComponentClassName.CheckboxIcon);
+    const labelTestId = getTestId(testId, ComponentClassName.CheckboxLabel);
+    const flexClasses = classNames(ComponentClassName.CheckboxButton, classNameModifierByFlag(ComponentClassName.CheckboxButton, 'disabled', shouldBeDisabled), classNameModifierByFlag(ComponentClassName.CheckboxButton, 'error', hasError), classNameModifierByFlag(ComponentClassName.CheckboxButton, 'focused', focused));
+    const iconClasses = classNames(ComponentClassName.CheckboxIcon, classNameModifierByFlag(ComponentClassName.CheckboxIcon, 'checked', checked), classNameModifierByFlag(ComponentClassName.CheckboxIcon, 'disabled', shouldBeDisabled), classNameModifierByFlag(ComponentClassName.CheckboxIcon, 'indeterminate', isIndeterminate));
+    const iconProps = {
+        className: classNames(iconClasses),
+        'data-checked': localChecked,
+        'data-disabled': shouldBeDisabled,
+        'data-testid': iconTestId,
+    };
+    const checkedIcon = icons?.checked ? (React.createElement(View, { as: "span", className: classNames(iconClasses) }, icons.checked)) : (React.createElement(IconCheck, { ...iconProps }));
+    const indeterminateIcon = icons?.indeterminate ? (React.createElement(View, { as: "span", className: classNames(iconClasses) }, icons.indeterminate)) : (React.createElement(IconIndeterminate, { ...iconProps }));
+    return (React.createElement(Flex, { as: "label", className: classNames(ComponentClassName.Checkbox, classNameModifierByFlag(ComponentClassName.Checkbox, 'disabled', shouldBeDisabled), labelPosition ? `amplify-label-${labelPosition}` : null, className), testId: testId, ...styleProps },
+        React.createElement(VisuallyHidden, null,
+            React.createElement(Input, { checked: controlledChecked, className: ComponentClassName.CheckboxInput, "data-id": dataId, defaultChecked: defaultChecked, isDisabled: shouldBeDisabled, onBlur: onBlur, onChange: onChange, onFocus: onFocus, ref: ref, type: "checkbox", ...rest })),
+        label && (React.createElement(Text, { as: "span", className: classNames(ComponentClassName.CheckboxLabel, {
+                [ComponentClassName.VisuallyHidden]: labelHidden,
+            }), "data-disabled": shouldBeDisabled, testId: labelTestId }, label)),
+        React.createElement(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 = primitiveWithForwardRef(CheckboxPrimitive);
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };

package/dist/esm/primitives/CheckboxField/CheckboxField.mjs

@@ -1 +1,24 @@
-import{__rest as e}from"tslib";import*as r from"react";import s from"classnames";import{classNameModifier as o}from"@aws-amplify/ui";import{ComponentClassNames as t}from"../shared/constants.mjs";import{Checkbox as i}from"../Checkbox/Checkbox.mjs";import"../Field/FieldClearButton.mjs";import"../Field/FieldDescription.mjs";import{FieldErrorMessage as a}from"../Field/FieldErrorMessage.mjs";import"../Field/Field.mjs";import{Flex as l}from"../Flex/Flex.mjs";import{getTestId as m}from"../utils/getTestId.mjs";const d=r.forwardRef(((d,c)=>{var{className:n,errorMessage:p,hasError:F=!1,labelHidden:b=!1,labelPosition:f,testId:h,size:j}=d,x=e(d,["className","errorMessage","hasError","labelHidden","labelPosition","testId","size"]);const E=m(h,t.Checkbox);return r.createElement(l,{className:s(t.Field,t.CheckboxField,o(t.Field,j),n),"data-size":j,testId:h},r.createElement(i,Object.assign({hasError:F,labelHidden:b,testId:E,labelPosition:f,ref:c},x)),r.createElement(a,{hasError:F,errorMessage:p}))}));d.displayName="CheckboxField";export{d as CheckboxField};
+import * as React from 'react';
+import { ComponentClassName, classNames, classNameModifier } from '@aws-amplify/ui';
+import { Checkbox } from '../Checkbox/Checkbox.mjs';
+import '../Field/FieldClearButton.mjs';
+import '../Field/FieldDescription.mjs';
+import { FieldErrorMessage } from '../Field/FieldErrorMessage.mjs';
+import '../Field/Field.mjs';
+import { getTestId } from '../utils/getTestId.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const CheckboxFieldPrimitive = ({ className, errorMessage, hasError = false, labelHidden = false, labelPosition, testId, size, ...rest }, ref) => {
+    const checkboxTestId = getTestId(testId, ComponentClassName.Checkbox);
+    return (React.createElement(Flex, { className: classNames(ComponentClassName.Field, ComponentClassName.CheckboxField, classNameModifier(ComponentClassName.Field, size), className), testId: testId },
+        React.createElement(Checkbox, { hasError: hasError, labelHidden: labelHidden, testId: checkboxTestId, labelPosition: labelPosition, ref: ref, ...rest }),
+        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/checkboxfield)
+ */
+const CheckboxField = primitiveWithForwardRef(CheckboxFieldPrimitive);
+CheckboxField.displayName = 'CheckboxField';
+
+export { CheckboxField };

package/dist/esm/primitives/Collection/Collection.mjs

@@ -1 +1,58 @@
-import{__rest as e}from"tslib";import t from"classnames";import*as a from"react";import r from"lodash/debounce.js";import{Flex as s}from"../Flex/Flex.mjs";import{Grid as l}from"../Grid/Grid.mjs";import{Text as i}from"../Text/Text.mjs";import{Pagination as n}from"../Pagination/Pagination.mjs";import{usePagination as o}from"../Pagination/usePagination.mjs";import{SearchField as m}from"../SearchField/SearchField.mjs";import{ComponentClassNames as c,ComponentText as d}from"../shared/constants.mjs";import{strHasLength as h}from"../shared/utils.mjs";import{getPageCount as u,getItemsAtPage as g,itemHasText as p}from"./utils.mjs";const j=10,f=t=>{var{children:r,direction:l="column",items:i}=t,n=e(t,["children","direction","items"]);return a.createElement(s,Object.assign({direction:l},n),Array.isArray(i)?i.map(r):null)},P=t=>{var{children:r,items:s}=t,i=e(t,["children","items"]);return a.createElement(l,Object.assign({},i),Array.isArray(s)?s.map(r):null)},b=l=>{var{className:b,isSearchable:C,isPaginated:E,items:N,itemsPerPage:y=j,searchFilter:F=p,searchLabel:A=d.Collection.searchButtonLabel,searchNoResultsFound:S,searchPlaceholder:x,type:I="list",testId:O}=l,v=e(l,["className","isSearchable","isPaginated","items","itemsPerPage","searchFilter","searchLabel","searchNoResultsFound","searchPlaceholder","type","testId"]);const[L,R]=a.useState(),G=a.useCallback(r(R,300),[R]);N=Array.isArray(N)?N:[],C&&h(L)&&(N=N.filter((e=>F(e,L))));const T=o({totalPages:u(N.length,y)});E&&(N=g(N,T.currentPage,y));const k="list"===I?a.createElement(f,Object.assign({className:c.CollectionItems,items:N},v)):"grid"===I?a.createElement(P,Object.assign({className:c.CollectionItems,items:N},v)):null;return a.createElement(s,{testId:O,className:t(c.Collection,b)},C?a.createElement(s,{className:c.CollectionSearch},a.createElement(m,{label:A,placeholder:x,onChange:e=>G(e.target.value),onClear:()=>R("")})):null,((e,t,r)=>t.length?e:r||a.createElement(s,{justifyContent:"center"},a.createElement(i,null,d.Collection.searchNoResultsFound)))(k,N,S),E?a.createElement(s,{className:c.CollectionPagination},a.createElement(n,Object.assign({},T))):null)};b.displayName="Collection";export{b as Collection};
+import { ComponentClassName, classNames } from '@aws-amplify/ui';
+import * as React from 'react';
+import debounce from 'lodash/debounce.js';
+import { Flex } from '../Flex/Flex.mjs';
+import { Grid } from '../Grid/Grid.mjs';
+import { Text } from '../Text/Text.mjs';
+import { Pagination } from '../Pagination/Pagination.mjs';
+import { usePagination } from '../Pagination/usePagination.mjs';
+import { SearchField } from '../SearchField/SearchField.mjs';
+import { ComponentText } from '../shared/constants.mjs';
+import { strHasLength } from '../shared/utils.mjs';
+import { getPageCount, getItemsAtPage, itemHasText } from './utils.mjs';
+
+const DEFAULT_PAGE_SIZE = 10;
+const TYPEAHEAD_DELAY_MS = 300;
+const ListCollection = ({ children, direction = 'column', items, ...rest }) => (React.createElement(Flex, { direction: direction, ...rest }, Array.isArray(items) ? items.map(children) : null));
+const GridCollection = ({ children, items, ...rest }) => (React.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.createElement(Flex, { justifyContent: "center" },
+        React.createElement(Text, null, 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 = ComponentText.Collection.searchButtonLabel, searchNoResultsFound, searchPlaceholder, type = 'list', testId, ...rest }) => {
+    const [searchText, setSearchText] = React.useState();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const onSearch = React.useCallback(debounce(setSearchText, TYPEAHEAD_DELAY_MS), [setSearchText]);
+    // Make sure that items are iterable
+    items = Array.isArray(items) ? items : [];
+    // Filter items by text
+    if (isSearchable && 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.createElement(ListCollection, { className: ComponentClassName.CollectionItems, items: items, ...rest })) : type === 'grid' ? (React.createElement(GridCollection, { className: ComponentClassName.CollectionItems, items: items, ...rest })) : null;
+    return (React.createElement(Flex, { testId: testId, className: classNames(ComponentClassName.Collection, className) },
+        isSearchable ? (React.createElement(Flex, { className: ComponentClassName.CollectionSearch },
+            React.createElement(SearchField, { label: searchLabel, placeholder: searchPlaceholder, onChange: (e) => onSearch(e.target.value), onClear: () => setSearchText('') }))) : null,
+        renderCollectionOrNoResultsFound(collection, items, searchNoResultsFound),
+        isPaginated ? (React.createElement(Flex, { className: ComponentClassName.CollectionPagination },
+            React.createElement(Pagination, { ...pagination }))) : null));
+};
+Collection.displayName = 'Collection';
+
+export { Collection };

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

@@ -1 +1,30 @@
-import{strHasLength as e}from"../shared/utils.mjs";const t=(e,t,o)=>{if(t<1||o<1)return[];const s=(t-1)*o;return e.slice(s,s+o)},o=(t,s)=>e(t)?t.toLowerCase().includes(s.toLowerCase()):"object"==typeof t&&null!==t&&Object.values(t).some((e=>o(e,s))),s=(e,t)=>Math.ceil(e/t);export{t as getItemsAtPage,s as getPageCount,o as itemHasText};
+import { strHasLength } from '../shared/utils.mjs';
+
+/**
+ * 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 (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);
+
+export { getItemsAtPage, getPageCount, itemHasText };

package/dist/esm/primitives/Divider/Divider.mjs

@@ -1 +1,16 @@
-import{__rest as a}from"tslib";import i from"classnames";import*as e from"react";import{classNameModifier as r}from"@aws-amplify/ui";import{ComponentClassNames as s}from"../shared/constants.mjs";import{View as t}from"../View/View.mjs";const o=e.forwardRef(((o,m)=>{var{className:l,orientation:n="horizontal",size:c,label:d}=o,f=a(o,["className","orientation","size","label"]);const p=i(s.Divider,r(s.Divider,n),r(s.Divider,c),d?s.DividerLabel:null,l);return e.createElement(t,Object.assign({"aria-orientation":n,as:"hr",className:p,"data-size":c,"data-label":d,ref:m},f))}));o.displayName="Divider";export{o as Divider};
+import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/ui';
+import * as React from 'react';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { View } from '../View/View.mjs';
+
+const DividerPrimitive = ({ className, orientation = 'horizontal', size, label, ...rest }, ref) => {
+    const componentClasses = classNames(ComponentClassName.Divider, classNameModifier(ComponentClassName.Divider, orientation), classNameModifier(ComponentClassName.Divider, size), className);
+    return (React.createElement(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 = primitiveWithForwardRef(DividerPrimitive);
+Divider.displayName = 'Divider';
+
+export { Divider };

package/dist/esm/primitives/DropZone/DropZone.mjs

@@ -1 +1,27 @@
-import{__rest as e}from"tslib";import*as r from"react";import{useDropZone as o}from"./useDropZone.mjs";import{DropZoneProvider as t}from"./DropZoneProvider.mjs";import{DropZoneContainer as a}from"./DropZoneContainer.mjs";import{Accepted as n,Rejected as p,Default as s}from"./DropZoneChildren.mjs";const i=Object.assign(r.forwardRef(((n,p)=>{var{children:s,testId:i,isDisabled:m,acceptedFileTypes:D,onDropComplete:c}=n,d=e(n,["children","testId","isDisabled","acceptedFileTypes","onDropComplete"]);const{dragState:l,onDragEnter:g,onDragLeave:f,onDragOver:j,onDragStart:b,onDrop:v}=o(Object.assign({acceptedFileTypes:D,onDropComplete:c},d));return r.createElement(t,{value:l},r.createElement(a,Object.assign({},d,{testId:i,isDisabled:m,onDragStart:b,onDragEnter:g,onDragLeave:f,onDrop:v,onDragOver:j,ref:p}),s))})),{Accepted:n,Rejected:p,Default:s});i.displayName="DropZone";export{i as DropZone};
+import * as React from 'react';
+import { useDropZone } from './useDropZone.mjs';
+import { DropZoneProvider } from './DropZoneProvider.mjs';
+import { DropZoneContainer } from './DropZoneContainer.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { Accepted, Rejected, Default } from './DropZoneChildren.mjs';
+
+const DropZonePrimitive = ({ children, testId, isDisabled, acceptedFileTypes, onDropComplete, ...rest }, ref) => {
+    const { dragState, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, } = useDropZone({
+        acceptedFileTypes,
+        onDropComplete,
+        ...rest,
+    });
+    return (React.createElement(DropZoneProvider, { value: dragState },
+        React.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(primitiveWithForwardRef(DropZonePrimitive), {
+    Accepted,
+    Rejected,
+    Default,
+});
+DropZone.displayName = 'DropZone';
+
+export { DropZone };

package/dist/esm/primitives/DropZone/DropZoneChildren.mjs

@@ -1 +1,39 @@
-import*as e from"react";import{DropZoneContext as r}from"./DropZoneProvider.mjs";const n=({children:n})=>{const t=e.useContext(r);if(!t)throw new Error("`DropZone.Accept` must be used inside a DropZone");return"accept"===t?e.createElement(e.Fragment,null,n):null},t=({children:n})=>{const t=e.useContext(r);if(!t)throw new Error("`DropZone.Rejected` must be used inside a DropZone");return"reject"===t?e.createElement(e.Fragment,null,n):null},o=({children:n})=>{const t=e.useContext(r);if(!t)throw new Error("`DropZone.Default` must be used inside a DropZone");return"inactive"===t?e.createElement(e.Fragment,null,n):null};export{n as Accepted,o as Default,t as Rejected};
+import * as React from 'react';
+import { DropZoneContext } from './DropZoneProvider.mjs';
+
+/**
+ * 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.useContext(DropZoneContext);
+    if (!dragState) {
+        throw new Error('`DropZone.Accept` must be used inside a DropZone');
+    }
+    return dragState === 'accept' ? React.createElement(React.Fragment, null, children) : null;
+};
+/**
+ * This component renders when the user is dragging ANY rejected files on the DropZone.
+ */
+const Rejected = ({ children, }) => {
+    const dragState = React.useContext(DropZoneContext);
+    if (!dragState) {
+        throw new Error('`DropZone.Rejected` must be used inside a DropZone');
+    }
+    return dragState === 'reject' ? React.createElement(React.Fragment, null, children) : null;
+};
+/**
+ * This component renders by default when the user is not dragging.
+ */
+const Default = ({ children, }) => {
+    const dragState = React.useContext(DropZoneContext);
+    if (!dragState) {
+        throw new Error('`DropZone.Default` must be used inside a DropZone');
+    }
+    return dragState === 'inactive' ? React.createElement(React.Fragment, null, children) : null;
+};
+
+export { Accepted, Default, Rejected };

package/dist/esm/primitives/DropZone/DropZoneContainer.mjs

@@ -1 +1,18 @@
-import{__rest as r}from"tslib";import e from"react";import o from"classnames";import{View as a}from"../View/View.mjs";import{ComponentClassNames as t}from"../shared/constants.mjs";import{classNameModifierByFlag as n,ComponentClassName as s}from"@aws-amplify/ui";import{DropZoneContext as i}from"./DropZoneProvider.mjs";const m=e.forwardRef(((m,D)=>{var{className:p,children:c,testId:d,isDisabled:l,onDragEnter:g,onDragLeave:f,onDragOver:v,onDragStart:b,onDrop:j}=m,Z=r(m,["className","children","testId","isDisabled","onDragEnter","onDragLeave","onDragOver","onDragStart","onDrop"]);const w=e.useContext(i),E=l?{}:{onDragEnter:g,onDragLeave:f,onDragOver:v,onDragStart:b,onDrop:j};return e.createElement(a,Object.assign({},Z,E,{isDisabled:l,className:o(p,n(t.DropZone,"rejected","reject"===w),n(t.DropZone,"accepted","accept"===w),n(s.DropZone,"disabled",l),t.DropZone),"data-testid":d,ref:D}),c)}));m.displayName="DropZoneContainer";export{m as DropZoneContainer};
+import React__default from 'react';
+import { classNames, classNameModifierByFlag, ComponentClassName } from '@aws-amplify/ui';
+import { View } from '../View/View.mjs';
+import { DropZoneContext } from './DropZoneProvider.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const Container = ({ className, children, testId, isDisabled, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, ...rest }, ref) => {
+    const dragState = React__default.useContext(DropZoneContext);
+    // Don't add drag event handlers if it is disabled.
+    const dragProps = isDisabled
+        ? {}
+        : { onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop };
+    return (React__default.createElement(View, { ...rest, ...dragProps, isDisabled: isDisabled, className: classNames(className, classNameModifierByFlag(ComponentClassName.DropZone, 'rejected', dragState === 'reject'), classNameModifierByFlag(ComponentClassName.DropZone, 'accepted', dragState === 'accept'), classNameModifierByFlag(ComponentClassName.DropZone, 'disabled', isDisabled), ComponentClassName.DropZone), "data-testid": testId, ref: ref }, children));
+};
+const DropZoneContainer = primitiveWithForwardRef(Container);
+DropZoneContainer.displayName = 'DropZoneContainer';
+
+export { DropZoneContainer };

package/dist/esm/primitives/DropZone/DropZoneProvider.mjs

@@ -1 +1,8 @@
-import*as e from"react";const t=e.createContext("inactive"),r=({value:r,children:a})=>e.createElement(t.Provider,{value:r},a);export{t as DropZoneContext,r as DropZoneProvider};
+import * as React from 'react';
+
+const DropZoneContext = React.createContext('inactive');
+const DropZoneProvider = ({ value, children, }) => {
+    return (React.createElement(DropZoneContext.Provider, { value: value }, children));
+};
+
+export { DropZoneContext, DropZoneProvider };

package/dist/esm/primitives/DropZone/filterAllowedFiles.mjs

@@ -1 +1,34 @@
-function e(e,t){if(!t||0===t.length||t.includes("*"))return{acceptedFiles:e,rejectedFiles:[]};const r=[],s=[];return e.forEach((e=>{(!function(e){const{type:r="",name:s=""}=e,n=r.toLowerCase(),c=n.split("/")[0];return t.some((e=>{const t=e.trim().toLowerCase();return"."===t.charAt(0)?s.toLowerCase().endsWith(t):t.endsWith("/*")?c===t.split("/")[0]:n===t}))}(e)?s:r).push(e)})),{acceptedFiles:r,rejectedFiles:s}}export{e as filterAllowedFiles};
+function filterAllowedFiles(files, acceptedFileTypes) {
+    // Allow any files if acceptedFileTypes is undefined, empty array, or contains '*'
+    if (!acceptedFileTypes ||
+        acceptedFileTypes.length === 0 ||
+        acceptedFileTypes.includes('*')) {
+        return { acceptedFiles: files, rejectedFiles: [] };
+    }
+    const acceptedFiles = [];
+    const rejectedFiles = [];
+    function filterFile(file) {
+        const { type = '', name = '' } = file;
+        const mimeType = type.toLowerCase();
+        const baseMimeType = mimeType.split('/')[0];
+        return acceptedFileTypes.some((type) => {
+            const validType = type.trim().toLowerCase();
+            // if the accepted file type is a file extension
+            // it will start with '.', check against the file name
+            if (validType.charAt(0) === '.') {
+                return name.toLowerCase().endsWith(validType);
+            }
+            // This is something like a image/* mime type
+            if (validType.endsWith('/*')) {
+                return baseMimeType === validType.split('/')[0];
+            }
+            return mimeType === validType;
+        });
+    }
+    files.forEach((file) => {
+        (filterFile(file) ? acceptedFiles : rejectedFiles).push(file);
+    });
+    return { acceptedFiles, rejectedFiles };
+}
+
+export { filterAllowedFiles };

package/dist/esm/primitives/DropZone/useDropZone.mjs

@@ -1 +1,65 @@
-import{useState as e}from"react";import{isFunction as r}from"@aws-amplify/ui";import{filterAllowedFiles as t}from"./filterAllowedFiles.mjs";function a({onDropComplete:a,onDragEnter:o,onDragLeave:n,onDragOver:p,onDragStart:i,onDrop:c,acceptedFileTypes:s=[]}){const[f,l]=e("inactive");return{onDragStart:e=>{e.dataTransfer.clearData(),r(i)&&i(e)},onDragEnter:e=>{e.preventDefault(),e.stopPropagation(),r(o)&&o(e)},onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),l("inactive"),r(n)&&n(e)},onDragOver:e=>{e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect="copy",r(p)&&p(e);const a=Array.from(e.dataTransfer.items).map((({kind:e,type:r})=>({kind:e,type:r}))),{rejectedFiles:o}=t(a,s);l(o.length>0?"reject":"accept")},onDrop:e=>{e.preventDefault(),e.stopPropagation(),l("inactive");const o=Array.from(e.dataTransfer.files),{acceptedFiles:n,rejectedFiles:p}=t(o,s);r(c)&&c(e),r(a)&&a({acceptedFiles:n,rejectedFiles:p})},dragState:f}}export{a as useDropZone};
+import { useState } from 'react';
+import { isFunction } from '@aws-amplify/ui';
+import { filterAllowedFiles } from './filterAllowedFiles.mjs';
+
+function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragOver: _onDragOver, onDragStart: _onDragStart, onDrop: _onDrop, acceptedFileTypes = [], }) {
+    const [dragState, setDragState] = useState('inactive');
+    const onDragStart = (event) => {
+        event.dataTransfer.clearData();
+        if (isFunction(_onDragStart)) {
+            _onDragStart(event);
+        }
+    };
+    const onDragEnter = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (isFunction(_onDragEnter)) {
+            _onDragEnter(event);
+        }
+    };
+    const onDragLeave = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setDragState('inactive');
+        if (isFunction(_onDragLeave)) {
+            _onDragLeave(event);
+        }
+    };
+    const onDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = 'copy';
+        if (isFunction(_onDragOver)) {
+            _onDragOver(event);
+        }
+        const files = Array.from(event.dataTransfer.items).map(({ kind, type }) => ({
+            kind,
+            type,
+        }));
+        const { rejectedFiles } = filterAllowedFiles(files, acceptedFileTypes);
+        setDragState(rejectedFiles.length > 0 ? 'reject' : 'accept');
+    };
+    const onDrop = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setDragState('inactive');
+        const files = Array.from(event.dataTransfer.files);
+        const { acceptedFiles, rejectedFiles } = filterAllowedFiles(files, acceptedFileTypes);
+        if (isFunction(_onDrop)) {
+            _onDrop(event);
+        }
+        if (isFunction(onDropComplete)) {
+            onDropComplete({ acceptedFiles, rejectedFiles });
+        }
+    };
+    return {
+        onDragStart,
+        onDragEnter,
+        onDragLeave,
+        onDragOver,
+        onDrop,
+        dragState,
+    };
+}
+
+export { useDropZone };

package/dist/esm/primitives/Field/Field.mjs

@@ -1 +1,20 @@
-import{__rest as e}from"tslib";import*as r from"react";import s from"classnames";import{classNameModifier as t}from"@aws-amplify/ui";import{ComponentClassNames as a}from"../shared/constants.mjs";import{Flex as l}from"../Flex/Flex.mjs";import{FieldDescription as i}from"./FieldDescription.mjs";import{FieldErrorMessage as m}from"./FieldErrorMessage.mjs";import{Label as o}from"../Label/Label.mjs";const d=r.forwardRef(((d,n)=>{const{className:c,size:p,testId:f,children:b,label:E,labelHidden:F,errorMessage:h,hasError:j,descriptiveText:x}=d,g=e(d,["className","size","testId","children","label","labelHidden","errorMessage","hasError","descriptiveText"]);return r.createElement(l,Object.assign({className:s(a.Field,t(a.Field,p),c),"data-size":p,testId:f,ref:n},g),E?r.createElement(o,{visuallyHidden:F},E):null,r.createElement(i,{labelHidden:F,descriptiveText:x}),b,h?r.createElement(m,{hasError:j,errorMessage:h}):null)}));d.displayName="Field";export{d as Field};
+import * as React from 'react';
+import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/ui';
+import { Flex } from '../Flex/Flex.mjs';
+import { FieldDescription } from './FieldDescription.mjs';
+import { FieldErrorMessage } from './FieldErrorMessage.mjs';
+import { Label } from '../Label/Label.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const FieldPrimitive = (props, ref) => {
+    const { className, size, testId, children, label, labelHidden, errorMessage, hasError, descriptiveText, ...rest } = props;
+    return (React.createElement(Flex, { className: classNames(ComponentClassName.Field, classNameModifier(ComponentClassName.Field, size), className), testId: testId, ref: ref, ...rest },
+        label ? React.createElement(Label, { visuallyHidden: labelHidden }, label) : null,
+        React.createElement(FieldDescription, { labelHidden: labelHidden, descriptiveText: descriptiveText }),
+        children,
+        errorMessage ? (React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })) : null));
+};
+const Field = primitiveWithForwardRef(FieldPrimitive);
+Field.displayName = 'Field';
+
+export { Field };

package/dist/esm/primitives/Field/FieldClearButton.mjs

@@ -1 +1,21 @@
-import{__rest as o}from"tslib";import*as e from"react";import"../FieldGroupIcon/FieldGroupIcon.mjs";import{FieldGroupIconButton as r}from"../FieldGroupIcon/FieldGroupIconButton.mjs";import"../Icon/Icon.mjs";import"../Icon/context/IconsContext.mjs";import{useIcons as t}from"../Icon/context/useIcons.mjs";import"classnames";import{ComponentText as i}from"../shared/constants.mjs";import"../View/View.mjs";import{IconClose as n}from"../Icon/icons/IconClose.mjs";const s=i.Fields.clearButtonLabel,m=e.forwardRef(((i,m)=>{var a,{ariaLabel:l=s,size:c}=i,p=o(i,["ariaLabel","size"]);const d=t("field");return e.createElement(r,Object.assign({ariaLabel:l,size:c,ref:m},p),null!==(a=null==d?void 0:d.clear)&&void 0!==a?a:e.createElement(n,null))}));m.displayName="FieldClearButton";export{m as FieldClearButton};
+import * as React from 'react';
+import '../FieldGroupIcon/FieldGroupIcon.mjs';
+import { FieldGroupIconButton } from '../FieldGroupIcon/FieldGroupIconButton.mjs';
+import '../Icon/Icon.mjs';
+import '../Icon/context/IconsContext.mjs';
+import { useIcons } from '../Icon/context/useIcons.mjs';
+import '@aws-amplify/ui';
+import '../View/View.mjs';
+import { IconClose } from '../Icon/icons/IconClose.mjs';
+import { ComponentText } from '../shared/constants.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const ariaLabelText = ComponentText.Fields.clearButtonLabel;
+const FieldClearButtonPrimitive = ({ ariaLabel = ariaLabelText, size, ...rest }, ref) => {
+    const icons = useIcons('field');
+    return (React.createElement(FieldGroupIconButton, { ariaLabel: ariaLabel, size: size, ref: ref, ...rest }, icons?.clear ?? React.createElement(IconClose, null)));
+};
+const FieldClearButton = primitiveWithForwardRef(FieldClearButtonPrimitive);
+FieldClearButton.displayName = 'FieldClearButton';
+
+export { FieldClearButton };

package/dist/esm/primitives/Field/FieldDescription.mjs

@@ -1 +1,11 @@
-import{__rest as e}from"tslib";import*as t from"react";import i from"classnames";import{Text as s}from"../Text/Text.mjs";import{ComponentClassNames as r}from"../shared/constants.mjs";const a="qa-field-description",d=d=>{var{descriptiveText:l,labelHidden:m}=d,o=e(d,["descriptiveText","labelHidden"]);return l?t.createElement(s,Object.assign({"data-testid":a,className:i(r.FieldDescription,{[r.VisuallyHidden]:m})},o),l):null};d.displayName="FieldDescription";export{d as FieldDescription,a as QA_FIELD_DESCRIPTION};
+import * as React from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { Text } from '../Text/Text.mjs';
+
+const QA_FIELD_DESCRIPTION = 'qa-field-description';
+const FieldDescription = ({ descriptiveText, labelHidden, ...rest }) => descriptiveText ? (React.createElement(Text, { "data-testid": QA_FIELD_DESCRIPTION, className: classNames(ComponentClassName.FieldDescription, {
+        [ComponentClassName.VisuallyHidden]: labelHidden,
+    }), ...rest }, descriptiveText)) : null;
+FieldDescription.displayName = 'FieldDescription';
+
+export { FieldDescription, QA_FIELD_DESCRIPTION };

package/dist/esm/primitives/Field/FieldErrorMessage.mjs

@@ -1 +1,10 @@
-import{__rest as r}from"tslib";import*as e from"react";import{Text as s}from"../Text/Text.mjs";import{ComponentClassNames as a}from"../shared/constants.mjs";const o=o=>{var{errorMessage:t,hasError:m}=o,i=r(o,["errorMessage","hasError"]);return m&&t?e.createElement(s,Object.assign({className:a.FieldErrorMessage},i),t):null};o.displayName="FieldErrorMessage";export{o as FieldErrorMessage};
+import * as React from 'react';
+import { Text } from '../Text/Text.mjs';
+import { ComponentClassName } from '@aws-amplify/ui';
+
+const FieldErrorMessage = ({ errorMessage, hasError, ...rest }) => {
+    return hasError && errorMessage ? (React.createElement(Text, { className: ComponentClassName.FieldErrorMessage, ...rest }, errorMessage)) : null;
+};
+FieldErrorMessage.displayName = 'FieldErrorMessage';
+
+export { FieldErrorMessage };

package/dist/esm/primitives/FieldGroup/FieldGroup.mjs

@@ -1 +1,29 @@
-import{__rest as e}from"tslib";import*as r from"react";import t from"classnames";import{classNameModifier as n}from"@aws-amplify/ui";import{ComponentClassNames as o}from"../shared/constants.mjs";import{Flex as a}from"../Flex/Flex.mjs";import{View as i}from"../View/View.mjs";const l=r.forwardRef(((l,m)=>{var{children:p,className:s,innerEndComponent:d,innerStartComponent:u,orientation:c="horizontal",outerEndComponent:F,outerStartComponent:E,variation:G}=l,f=e(l,["children","className","innerEndComponent","innerStartComponent","orientation","outerEndComponent","outerStartComponent","variation"]);const N=null!=d,C=null!=u?o.FieldGroupHasInnerStart:null,S=N?o.FieldGroupHasInnerEnd:null,O=t(o.FieldGroup,C,S,n(o.FieldGroup,c),s);return r.createElement(a,Object.assign({className:O,"data-orientation":c,ref:m},f),E&&r.createElement(i,{className:t(o.FieldGroupOuterStart,n(o.FieldGroupOuterStart,G))},E),r.createElement(i,{className:t(o.FieldGroupFieldWrapper,n(o.FieldGroupFieldWrapper,c)),"data-orientation":c},u&&r.createElement(i,{className:o.FieldGroupInnerStart},u),p,d&&r.createElement(i,{className:o.FieldGroupInnerEnd},d)),F&&r.createElement(i,{className:t(o.FieldGroupOuterEnd,n(o.FieldGroupOuterEnd,G))},F))}));l.displayName="FieldGroup";export{l as FieldGroup};
+import * as React from 'react';
+import { ComponentClassName, classNames, classNameModifier } from '@aws-amplify/ui';
+import { Flex } from '../Flex/Flex.mjs';
+import { View } from '../View/View.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+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
+        ? ComponentClassName.FieldGroupHasInnerStart
+        : null;
+    const fieldGroupHasInnerEndClassName = hasInnerEndComponent
+        ? ComponentClassName.FieldGroupHasInnerEnd
+        : null;
+    const componentClasses = classNames(ComponentClassName.FieldGroup, fieldGroupHasInnerStartClassName, fieldGroupHasInnerEndClassName, classNameModifier(ComponentClassName.FieldGroup, orientation), className);
+    return (React.createElement(Flex, { className: componentClasses, ref: ref, ...rest },
+        outerStartComponent && (React.createElement(View, { className: classNames(ComponentClassName.FieldGroupOuterStart, classNameModifier(ComponentClassName.FieldGroupOuterStart, variation)) }, outerStartComponent)),
+        React.createElement(View, { className: classNames(ComponentClassName.FieldGroupFieldWrapper, classNameModifier(ComponentClassName.FieldGroupFieldWrapper, orientation)) },
+            innerStartComponent && (React.createElement(View, { className: ComponentClassName.FieldGroupInnerStart }, innerStartComponent)),
+            children,
+            innerEndComponent && (React.createElement(View, { className: ComponentClassName.FieldGroupInnerEnd }, innerEndComponent))),
+        outerEndComponent && (React.createElement(View, { className: classNames(ComponentClassName.FieldGroupOuterEnd, classNameModifier(ComponentClassName.FieldGroupOuterEnd, variation)) }, outerEndComponent))));
+};
+const FieldGroup = primitiveWithForwardRef(FieldGroupPrimitive);
+FieldGroup.displayName = 'FieldGroup';
+
+export { FieldGroup };

package/dist/esm/primitives/FieldGroupIcon/FieldGroupIcon.mjs

@@ -1 +1,12 @@
-import{__rest as e}from"tslib";import*as r from"react";import s from"classnames";import{ComponentClassNames as a}from"../shared/constants.mjs";import{View as i}from"../View/View.mjs";const o=r.forwardRef(((o,m)=>{var{className:l,children:t,isVisible:c=!0,excludeFromTabOrder:d=!1}=o,n=e(o,["className","children","isVisible","excludeFromTabOrder"]);return c?r.createElement(i,Object.assign({className:s(a.FieldGroupIcon,l),ref:m,tabIndex:d?-1:void 0},n),t):null}));o.displayName="FieldGroupIcon";export{o as FieldGroupIcon};
+import * as React from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { View } from '../View/View.mjs';
+
+const FieldGroupIconPrimitive = ({ className, children, isVisible = true, excludeFromTabOrder = false, ...rest }, ref) => {
+    return isVisible ? (React.createElement(View, { className: classNames(ComponentClassName.FieldGroupIcon, className), ref: ref, tabIndex: excludeFromTabOrder ? -1 : undefined, ...rest }, children)) : null;
+};
+const FieldGroupIcon = primitiveWithForwardRef(FieldGroupIconPrimitive);
+FieldGroupIcon.displayName = 'FieldGroupIcon';
+
+export { FieldGroupIcon };

package/dist/esm/primitives/FieldGroupIcon/FieldGroupIconButton.mjs

@@ -1 +1,11 @@
-import{__rest as r}from"tslib";import*as o from"react";import t from"classnames";import{Button as s}from"../Button/Button.mjs";import{ComponentClassNames as e}from"../shared/constants.mjs";import{FieldGroupIcon as m}from"./FieldGroupIcon.mjs";const a=o.forwardRef(((a,n)=>{var{children:c,className:i}=a,l=r(a,["children","className"]);return o.createElement(m,Object.assign({as:s,className:t(e.FieldGroupIconButton,i),ref:n},l),c)}));a.displayName="FieldGroupIconButton";export{a as FieldGroupIconButton};
+import * as React from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { Button } from '../Button/Button.mjs';
+import { FieldGroupIcon } from './FieldGroupIcon.mjs';
+import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+
+const FieldGroupIconButtonPrimitive = ({ children, className, ...rest }, ref) => (React.createElement(FieldGroupIcon, { as: Button, className: classNames(ComponentClassName.FieldGroupIconButton, className), ref: ref, ...rest }, children));
+const FieldGroupIconButton = primitiveWithForwardRef(FieldGroupIconButtonPrimitive);
+FieldGroupIconButton.displayName = 'FieldGroupIconButton';
+
+export { FieldGroupIconButton };