@aws-amplify/ui-react 2.18.3 → 2.20.0

package/dist/types/primitives/types/rating.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
 import { Property } from 'csstype';
 import { FlexProps } from './flex';
 import { Sizes } from './base';
+import { StyleToken } from './style';
 export declare type RatingSizes = Sizes;
 export interface RatingOptions {
     /**
      * The CSS color to use on the empty rating icon
      * Default css value is #A2A2A2
      */
-    emptyColor?: Property.Color;
+    emptyColor?: StyleToken<Property.Color>;
     /**
      * This will override which icon to use as the empty icon. This will only
      * override the empty icon an will create a rating component that uses
@@ -19,7 +19,7 @@ export interface RatingOptions {
      * The CSS color to use on the filled rating icon
      * Default css value is #ffb400
      */
-    fillColor?: Property.Color;
+    fillColor?: StyleToken<Property.Color>;
     /**
      * This will override which icon to use. This will override both
      * the filled and empty icon values unless an empty icon is specified

package/dist/types/primitives/types/searchField.d.ts

@@ -15,6 +15,11 @@ export interface SearchFieldProps extends TextInputFieldProps {
      * @default true
      */
     labelHidden?: boolean;
+    /**
+     * Set the `aria-label` for clear button
+     * @default "Clear search"
+     */
+    clearButtonLabel?: string;
     /**
      * Provides ref access to search button DOM element
      */

package/dist/types/primitives/types/sliderField.d.ts

@@ -1,4 +1,5 @@
 import { Property } from 'csstype';
+import { StyleToken } from './style';
 import { TextInputFieldProps } from './textField';
 import { ViewProps } from './view';
 declare type SliderOrientation = 'horizontal' | 'vertical';
@@ -9,9 +10,9 @@ export interface SliderFieldProps extends TextInputFieldProps, ViewProps {
     orientation?: SliderOrientation;
     isValueHidden?: boolean;
     trackSize?: string;
-    emptyTrackColor?: Property.Color;
-    filledTrackColor?: Property.Color;
-    thumbColor?: Property.Color;
+    emptyTrackColor?: StyleToken<Property.Color>;
+    filledTrackColor?: StyleToken<Property.Color>;
+    thumbColor?: StyleToken<Property.Color>;
     value?: number;
     defaultValue?: number;
     onChange?: (value: number) => void;

package/dist/types/primitives/types/stepperField.d.ts

@@ -6,6 +6,18 @@ export interface StepperFieldProps extends TextInputFieldProps {
     step?: number;
     value?: number;
     defaultValue?: number;
+    /**
+     * Set the label text for increase button.
+     * This will be used to construct its the `aria-label`. e.g., "Increase to 2" if the current step is 1.
+     * @default "Increase to"
+     */
+    increaseButtonLabel?: string;
+    /**
+     * Set the label text for decrease button.
+     * This will be used to construct its the `aria-label`. e.g., "Decrease to 0" if the current step is 1.
+     * @default "Decrease to"
+     */
+    decreaseButtonLabel?: string;
     /**
      * TODO:
      * Extends StepperField props from Omit<TextFieldProps, 'onChange'>, after removing [key: string]: any from the base type

package/dist/types/primitives/types/style.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { Property } from 'csstype';
 import { WebDesignToken } from '@aws-amplify/ui';
+import type { BoxShadowKeys, ColorKeys, FontFamilyKeys, FontSizeKeys, FontWeightKeys, LineHeightKeys, OpacityKeys, RadiiKeys, SpaceKeys, TransformKeys } from './theme';
 import { FlexItemStyleProps, FlexContainerStyleProps } from './flex';
 import { GridItemStyleProps, GridContainerStyleProps } from './grid';
 import { ImageStyleProps } from './image';
@@ -21,59 +22,59 @@ export interface ResponsiveObject<PropertyType> {
  * Allows a style prop to be the property type
  * or a design token of that property type.
  */
-declare type StyleToken<PropertyType> = PropertyType | WebDesignToken<PropertyType>;
+export declare type StyleToken<PropertyType> = PropertyType | WebDesignToken<PropertyType>;
 export declare type ResponsiveStyle<PropertyType> = StyleProp<PropertyType> | StyleProp<PropertyType>[] | ResponsiveObject<StyleProp<PropertyType>>;
 export interface BaseStyleProps extends FlexItemStyleProps, GridItemStyleProps {
     alignSelf?: ResponsiveStyle<StyleToken<Property.AlignSelf>>;
-    backgroundColor?: ResponsiveStyle<StyleToken<Property.BackgroundColor>>;
+    backgroundColor?: ResponsiveStyle<ColorKeys<StyleToken<Property.BackgroundColor>>>;
     backgroundImage?: ResponsiveStyle<StyleToken<Property.BackgroundImage>>;
     border?: ResponsiveStyle<StyleToken<Property.Border>>;
-    borderRadius?: ResponsiveStyle<StyleToken<Property.BorderRadius>>;
-    bottom?: ResponsiveStyle<StyleToken<Property.Bottom>>;
-    boxShadow?: ResponsiveStyle<StyleToken<Property.BoxShadow>>;
-    color?: ResponsiveStyle<StyleToken<Property.Color>>;
+    borderRadius?: ResponsiveStyle<RadiiKeys<StyleToken<Property.BorderRadius>>>;
+    bottom?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Bottom>>>;
+    boxShadow?: ResponsiveStyle<BoxShadowKeys<StyleToken<Property.BoxShadow>>>;
+    color?: ResponsiveStyle<ColorKeys<StyleToken<Property.Color>>>;
     display?: ResponsiveStyle<StyleToken<Property.Display>>;
-    fontFamily?: ResponsiveStyle<StyleToken<Property.FontFamily>>;
-    fontSize?: ResponsiveStyle<StyleToken<Property.FontSize>>;
+    fontFamily?: ResponsiveStyle<FontFamilyKeys<StyleToken<Property.FontFamily>>>;
+    fontSize?: ResponsiveStyle<FontSizeKeys<StyleToken<Property.FontSize>>>;
     fontStyle?: ResponsiveStyle<StyleToken<Property.FontStyle>>;
-    fontWeight?: ResponsiveStyle<StyleToken<Property.FontWeight>>;
-    height?: ResponsiveStyle<StyleToken<Property.Height>>;
-    left?: ResponsiveStyle<StyleToken<Property.Left>>;
-    letterSpacing?: ResponsiveStyle<StyleToken<Property.LetterSpacing>>;
-    lineHeight?: ResponsiveStyle<StyleToken<Property.LineHeight>>;
+    fontWeight?: ResponsiveStyle<FontWeightKeys<StyleToken<Property.FontWeight>>>;
+    height?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Height>>>;
+    left?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Left>>>;
+    letterSpacing?: ResponsiveStyle<SpaceKeys<StyleToken<Property.LetterSpacing>>>;
+    lineHeight?: ResponsiveStyle<LineHeightKeys<StyleToken<Property.LineHeight>>>;
     margin?: ResponsiveStyle<StyleToken<Property.Margin>>;
-    marginBlockEnd?: ResponsiveStyle<StyleToken<Property.MarginBlockEnd>>;
-    marginBlockStart?: ResponsiveStyle<StyleToken<Property.MarginBlockStart>>;
-    marginBottom?: ResponsiveStyle<StyleToken<Property.MarginBlockEnd>>;
-    marginInlineEnd?: ResponsiveStyle<StyleToken<Property.MarginInlineEnd>>;
-    marginInlineStart?: ResponsiveStyle<StyleToken<Property.MarginInlineStart>>;
-    marginLeft?: ResponsiveStyle<StyleToken<Property.MarginInlineStart>>;
-    marginRight?: ResponsiveStyle<StyleToken<Property.MarginInlineEnd>>;
-    marginTop?: ResponsiveStyle<StyleToken<Property.MarginBlockStart>>;
-    maxHeight?: ResponsiveStyle<StyleToken<Property.MaxHeight>>;
-    maxWidth?: ResponsiveStyle<StyleToken<Property.MaxWidth>>;
-    minHeight?: ResponsiveStyle<StyleToken<Property.MinHeight>>;
-    minWidth?: ResponsiveStyle<StyleToken<Property.MinWidth>>;
-    opacity?: ResponsiveStyle<StyleToken<Property.Opacity>>;
+    marginBlockEnd?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginBlockEnd>>>;
+    marginBlockStart?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginBlockStart>>>;
+    marginBottom?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginBottom>>>;
+    marginInlineEnd?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginInlineEnd>>>;
+    marginInlineStart?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginInlineStart>>>;
+    marginLeft?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginLeft>>>;
+    marginRight?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginRight>>>;
+    marginTop?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginTop>>>;
+    maxHeight?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MaxHeight>>>;
+    maxWidth?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MaxWidth>>>;
+    minHeight?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MinHeight>>>;
+    minWidth?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MinWidth>>>;
+    opacity?: ResponsiveStyle<OpacityKeys<StyleToken<Property.Opacity>>>;
     overflow?: ResponsiveStyle<StyleToken<Property.Overflow>>;
     padding?: ResponsiveStyle<StyleToken<Property.Padding>>;
-    paddingBlockEnd?: ResponsiveStyle<StyleToken<Property.MarginBlockEnd>>;
-    paddingBlockStart?: ResponsiveStyle<StyleToken<Property.MarginBlockStart>>;
-    paddingBottom?: ResponsiveStyle<StyleToken<Property.PaddingBlockEnd>>;
-    paddingInlineEnd?: ResponsiveStyle<StyleToken<Property.MarginInlineEnd>>;
-    paddingInlineStart?: ResponsiveStyle<StyleToken<Property.MarginInlineStart>>;
-    paddingLeft?: ResponsiveStyle<StyleToken<Property.PaddingInlineStart>>;
-    paddingRight?: ResponsiveStyle<StyleToken<Property.PaddingInlineEnd>>;
-    paddingTop?: ResponsiveStyle<StyleToken<Property.PaddingBlockStart>>;
+    paddingBlockEnd?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingBlockEnd>>>;
+    paddingBlockStart?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingBlockStart>>>;
+    paddingBottom?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingBottom>>>;
+    paddingInlineEnd?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingInlineEnd>>>;
+    paddingInlineStart?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingInlineStart>>>;
+    paddingLeft?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingLeft>>>;
+    paddingRight?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingRight>>>;
+    paddingTop?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingTop>>>;
     position?: ResponsiveStyle<StyleToken<Property.Position>>;
-    right?: ResponsiveStyle<StyleToken<Property.Right>>;
+    right?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Right>>>;
     textAlign?: ResponsiveStyle<StyleToken<Property.TextAlign>>;
     textDecoration?: ResponsiveStyle<StyleToken<Property.TextDecoration>>;
     textTransform?: ResponsiveStyle<StyleToken<Property.TextTransform>>;
-    top?: ResponsiveStyle<StyleToken<Property.Top>>;
-    transform?: ResponsiveStyle<StyleToken<Property.Transform>>;
+    top?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Top>>>;
+    transform?: ResponsiveStyle<TransformKeys<StyleToken<Property.Transform>>>;
     transformOrigin?: ResponsiveStyle<StyleToken<Property.TransformOrigin>>;
-    width?: ResponsiveStyle<StyleToken<Property.Width>>;
+    width?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Width>>>;
     whiteSpace?: ResponsiveStyle<StyleToken<Property.WhiteSpace>>;
 }
 export interface CSSLayoutStyleProps {
@@ -92,15 +93,15 @@ export interface CSSLayoutStyleProps {
     /**
      * Spacing between child components. Shorthand for rowGap and columnGap.
      */
-    gap?: ResponsiveStyle<StyleToken<Property.Gap>>;
+    gap?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Gap>>>;
     /**
      * Spacing between Flex/Grid child columns
      */
-    columnGap?: ResponsiveStyle<StyleToken<Property.GridColumnGap>>;
+    columnGap?: ResponsiveStyle<SpaceKeys<StyleToken<Property.GridColumnGap>>>;
     /**
      * Spacing between Flex/Grid child rows
      */
-    rowGap?: ResponsiveStyle<StyleToken<Property.RowGap>>;
+    rowGap?: ResponsiveStyle<SpaceKeys<StyleToken<Property.RowGap>>>;
 }
 export interface AllStyleProps extends BaseStyleProps, ImageStyleProps, FlexContainerStyleProps, GridContainerStyleProps, TextAreaStyleProps {
 }
@@ -114,4 +115,3 @@ export declare type ComponentPropToStyleProp = Required<{
  */
 export declare const ComponentPropsToStylePropsMap: ComponentPropToStyleProp;
 export declare const ComponentPropsToStylePropsMapKeys: (keyof AllStyleProps)[];
-export {};

package/dist/types/primitives/types/switchField.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
+import { Property } from 'csstype';
 import { Sizes } from './base';
-import { BaseStyleProps } from './style';
+import { BaseStyleProps, StyleToken } from './style';
 import { InputProps } from './input';
 import { FieldProps, LabelPositions } from './field';
-import { Property } from 'csstype';
 export interface SwitchFieldProps extends InputProps, FieldProps, BaseStyleProps {
     /**
      * Use this to provide a default checked value for an uncontrolled SwitchField
@@ -45,15 +45,15 @@ export interface SwitchFieldProps extends InputProps, FieldProps, BaseStyleProps
     /**
      * This property will change the color of the thumb in the switch component
      */
-    thumbColor?: Property.Color;
+    thumbColor?: StyleToken<Property.Color>;
     /**
      * This property will change the color of the track in the switch component
      */
-    trackColor?: Property.Color;
+    trackColor?: StyleToken<Property.Color>;
     /**
      * This property will change the color of the checked track in the switch component
      */
-    trackCheckedColor?: Property.Color;
+    trackCheckedColor?: StyleToken<Property.Color>;
     /**
      * This is the value of the switch input and will be submitted with a form submission
      */

package/dist/types/primitives/types/theme.d.ts

@@ -0,0 +1,78 @@
+import type { FontSizes, FontWeights, LineHeights, Radii, Shadows, SpaceSizes } from '@aws-amplify/ui';
+/**
+ * Token keys for colors
+ *
+ * Though both 'white' and 'black' are valid CSS values
+ * We still want to define them as keys here and convert them into CSS variable reference afterwards
+ * This will make the default dark mode override work, where we flip these two
+ */
+declare type WhiteKey = 'white';
+declare type BlackKey = 'black';
+declare type RedKeys = 'red.10' | 'red.20' | 'red.40' | 'red.60' | 'red.80' | 'red.90' | 'red.100';
+declare type OrangeKeys = 'orange.10' | 'orange.20' | 'orange.40' | 'orange.60' | 'orange.80' | 'orange.90' | 'orange.100';
+declare type YellowKeys = 'yellow.10' | 'yellow.20' | 'yellow.40' | 'yellow.60' | 'yellow.80' | 'yellow.90' | 'yellow.100';
+declare type GreenKeys = 'green.10' | 'green.20' | 'green.40' | 'green.60' | 'green.80' | 'green.90' | 'green.100';
+declare type TealKeys = 'teal.10' | 'teal.20' | 'teal.40' | 'teal.60' | 'teal.80' | 'teal.90' | 'teal.100';
+declare type BlueKeys = 'blue.10' | 'blue.20' | 'blue.40' | 'blue.60' | 'blue.80' | 'blue.90' | 'blue.100';
+declare type PurpleKeys = 'purple.10' | 'purple.20' | 'purple.40' | 'purple.60' | 'purple.80' | 'purple.90' | 'purple.100';
+declare type PinkKeys = 'pink.10' | 'pink.20' | 'pink.40' | 'pink.60' | 'pink.80' | 'pink.90' | 'pink.100';
+declare type NeutralKeys = 'neutral.10' | 'neutral.20' | 'neutral.40' | 'neutral.60' | 'neutral.80' | 'neutral.90' | 'neutral.100';
+declare type OverlayKeys = 'overlay.10' | 'overlay.20' | 'overlay.30' | 'overlay.40' | 'overlay.50' | 'overlay.60' | 'overlay.70' | 'overlay.80' | 'overlay.90';
+declare type BrandColorKeys = 'brand.primary.10' | 'brand.primary.20' | 'brand.primary.40' | 'brand.primary.60' | 'brand.primary.80' | 'brand.primary.90' | 'brand.primary.100' | 'brand.secondary.10' | 'brand.secondary.20' | 'brand.secondary.40' | 'brand.secondary.60' | 'brand.secondary.80' | 'brand.secondary.90' | 'brand.secondary.100';
+declare type FontColorKeys = 'font.primary' | 'font.secondary' | 'font.tertiary' | 'font.disabled' | 'font.inverse' | 'font.interactive' | 'font.hover' | 'font.focus' | 'font.active' | 'font.success' | 'font.info' | 'font.warning' | 'font.error';
+declare type BackgroundColorKeys = 'background.primary' | 'background.secondary' | 'background.tertiary' | 'background.quaternary' | 'background.disabled' | 'background.success' | 'background.info' | 'background.warning' | 'background.error';
+declare type BorderColorKeys = 'border.primary' | 'border.secondary' | 'border.tertiary' | 'border.disabled' | 'border.focus' | 'border.pressed' | 'border.error';
+declare type ShadowColorKeys = 'shadow.primary' | 'shadow.secondary' | 'shadow.tertiary';
+export declare type ColorKeys<PropertyType> = PropertyType | WhiteKey | BlackKey | RedKeys | OrangeKeys | YellowKeys | GreenKeys | TealKeys | BlueKeys | PurpleKeys | PinkKeys | NeutralKeys | OverlayKeys | BrandColorKeys | FontColorKeys | BackgroundColorKeys | BorderColorKeys | ShadowColorKeys;
+export declare type BoxShadowKeys<PropertyType> = PropertyType | keyof Shadows;
+export declare type FontSizeKeys<PropertyType> = PropertyType | keyof FontSizes;
+export declare type FontWeightKeys<PropertyType> = PropertyType | keyof FontWeights;
+export declare type FontFamilyKeys<PropertyType> = PropertyType | 'default.variable' | 'default.static';
+export declare type LineHeightKeys<PropertyType> = PropertyType | keyof LineHeights;
+export declare type OpacityKeys<PropertyType> = PropertyType | '0' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '100';
+export declare type RadiiKeys<PropertyType> = PropertyType | keyof Radii;
+export declare type SpaceKeys<PropertyType> = PropertyType | keyof SpaceSizes | 'zero' | 'relative.xxxs' | 'relative.xxs' | 'relative.xs' | 'relative.small' | 'relative.medium' | 'relative.large' | 'relative.xl' | 'relative.xxl' | 'relative.xxxl' | 'relative.full';
+export declare type TransformKeys<PropertyType> = PropertyType | 'slideX.small' | 'slideX.medium' | 'slideX.large';
+export declare const stylePropsToThemeKeys: {
+    backgroundColor: string;
+    color: string;
+    borderRadius: string;
+    fontSize: string;
+    fontWeight: string;
+    fontFamily: string;
+    lineHeight: string;
+    opacity: string;
+    boxShadow: string;
+    transform: string;
+    left: string;
+    right: string;
+    top: string;
+    bottom: string;
+    height: string;
+    width: string;
+    letterSpacing: string;
+    marginBlockEnd: string;
+    marginBlockStart: string;
+    marginInlineEnd: string;
+    marginInlineStart: string;
+    marginLeft: string;
+    marginRight: string;
+    marginTop: string;
+    marginBottom: string;
+    maxHeight: string;
+    maxWidth: string;
+    minHeight: string;
+    minWidth: string;
+    paddingBlockEnd: string;
+    paddingBlockStart: string;
+    paddingInlineEnd: string;
+    paddingInlineStart: string;
+    paddingLeft: string;
+    paddingRight: string;
+    paddingTop: string;
+    paddingBottom: string;
+    gap: string;
+    columnGap: string;
+    rowGap: string;
+};
+export {};

package/dist/utils-beb5a80b.js

@@ -0,0 +1 @@
+"use strict";var e=require("lodash/isEmpty"),t=require("lodash/isArray"),r=require("lodash/isObject"),n=require("@aws-amplify/ui");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=s(e),i=s(t),o=s(r);const c=e=>o.default(e)&&a.default(e),p=e=>i.default(e)&&a.default(e),l={backgroundColor:"colors",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",marginBlockEnd:"space",marginBlockStart:"space",marginInlineEnd:"space",marginInlineStart:"space",marginLeft:"space",marginRight:"space",marginTop:"space",marginBottom:"space",maxHeight:"space",maxWidth:"space",minHeight:"space",minWidth:"space",paddingBlockEnd:"space",paddingBlockStart:"space",paddingInlineEnd:"space",paddingInlineStart:"space",paddingLeft:"space",paddingRight:"space",paddingTop:"space",paddingBottom:"space",gap:"space",columnGap:"space",rowGap:"space"},f=e=>"string"==typeof e&&0===e.length;exports.__awaiter=function(e,t,r,n){return new(r||(r=Promise))((function(s,a){function i(e){try{c(n.next(e))}catch(e){a(e)}}function o(e){try{c(n.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?s(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,o)}c((n=n.apply(e,t||[])).next())}))},exports.__rest=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(e);s<n.length;s++)t.indexOf(n[s])<0&&Object.prototype.propertyIsEnumerable.call(e,n[s])&&(r[n[s]]=e[n[s]])}return r},exports.areArrayValuesEqual=(e,t)=>e.length===t.length&&e.every(((e,r)=>{const n=t[r];return!(!p(e)||!p(n))||(!(!c(e)||!c(n))||e===n)})),exports.classNameModifier=(e,t)=>t?`${e}--${t}`:null,exports.classNameModifierByFlag=(e,t,r)=>r?`${e}--${t}`:null,exports.findChildOverrides=(e,t)=>{if(!e)return null;const r=Object.entries(e).filter((e=>e[0].startsWith(t)));return Object.assign({},...Array.from(r,(([e,r])=>({[e.replace(t,"")]:r}))))},exports.getCSSVariableIfValueIsThemeKey=(e,t)=>{if("string"!=typeof t)return t;const r=t.split(".");let{tokens:s}=n.defaultTheme;s=s[l[e]];for(let e=0;e<r.length&&s;e++)s=s[r[e]];return n.isDesignToken(s)?`var(--${n.cssNameTransform({path:[l[e],...r]})})`:t},exports.getConsecutiveIntArray=(e,t)=>{const r=t-e+1;return Array.from({length:r},((t,r)=>r+e))},exports.getErrorMessage=e=>(e=>{if("object"==typeof(t=e)&&null!==t&&"message"in t&&"string"==typeof t.message)return e;var t;try{return new Error(JSON.stringify(e))}catch(t){return new Error(String(e))}})(e).message,exports.getFormDataFromEvent=e=>{const t=new FormData(e.target);return Object.fromEntries(t)},exports.getOverrideProps=(e,t)=>{if(!e)return null;const r=Object.entries(e).filter((([e])=>e===t)).flatMap((([,e])=>Object.entries(e))).filter((e=>null==e?void 0:e[0]));return Object.fromEntries(r)},exports.getOverridesFromVariants=function(e,t){const r=[...new Set(e.flatMap((e=>Object.keys(e.variantValues))))],n=Object.keys(t).filter((e=>r.includes(e)&&t[e])).reduce(((e,r)=>(e[r]=t[r],e)),{});return e.filter((({variantValues:e})=>Object.keys(e).length===Object.keys(n).length&&Object.entries(e).every((([e,t])=>n[e]===t)))).reduce(((e,t)=>Object.assign(Object.assign({},e),t.overrides)),{})},exports.isEmptyString=f,exports.isFunction=e=>"function"==typeof e,exports.isNullOrEmptyString=e=>null==e||f(e),exports.mergeVariantsAndOverrides=(e,t)=>{if(!e&&!t)return null;if(!t)return e;if(!e)return t;const r=new Set(Object.keys(t)),n=Object.keys(e).filter((e=>r.has(e))),s=Object.fromEntries(n.map((r=>[r,Object.assign(Object.assign({},e[r]),t[r])])));return Object.assign(Object.assign(Object.assign({},e),t),s)},exports.strHasLength=e=>"string"==typeof e&&e.length>0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "2.18.3",
+  "version": "2.20.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -35,6 +35,7 @@
   },
   "files": [
     "dist",
+    "dist/esm/node_modules",
     "legacy",
     "internal",
     "LICENSE"
@@ -58,7 +59,7 @@
     "size": "yarn run size-limit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "3.9.2",
+    "@aws-amplify/ui": "3.10.1",
     "@aws-amplify/ui-react-v1": "npm:@aws-amplify/ui-react@1.2.9",
     "@radix-ui/react-accordion": "0.1.6",
     "@radix-ui/react-dropdown-menu": "0.1.6",
@@ -93,6 +94,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/user-event": "^13.2.1",
+    "@types/react": "^17.0.2",
     "@types/jest": "^26.0.23",
     "@types/qrcode": "^1.4.2",
     "@types/testing-library__jest-dom": "^5.14.1",
@@ -109,6 +111,8 @@
     "eslint-plugin-react-hooks": "^4.4.0",
     "jest": "^27.0.4",
     "jest-matchmedia-mock": "^1.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.70.0",

package/dist/esm/primitives/Pagination/i18n.js

@@ -1 +0,0 @@
-const e={PaginationItem:{PreviousItem:{ariaLabel:"Go to previous page"},NextItem:{ariaLabel:"Go to next page"}}};export{e as i18n};

package/dist/esm/primitives/shared/i18n.js

@@ -1 +0,0 @@
-const e={CountryCodeSelect:{ariaLabel:"Country code"},ShowPasswordButton:{ariaLabel:{showPassword:"Show password",hidePassword:"Hide password"}},Fields:{ariaLabel:{clearField:"Clear search"}},SearchField:{ariaLabel:{search:"Search"}},StepperField:{ariaLabel:{IncreaseTo:"Increase to",DecreaseTo:"Decrease to"}},Collection:{SearchFieldLabel:"Search"}};export{e as SharedText};

package/dist/types/primitives/Pagination/i18n.d.ts

@@ -1,10 +0,0 @@
-export declare const i18n: {
-    PaginationItem: {
-        PreviousItem: {
-            ariaLabel: string;
-        };
-        NextItem: {
-            ariaLabel: string;
-        };
-    };
-};

package/dist/types/primitives/shared/i18n.d.ts

@@ -1,30 +0,0 @@
-export declare const SharedText: {
-    CountryCodeSelect: {
-        ariaLabel: string;
-    };
-    ShowPasswordButton: {
-        ariaLabel: {
-            showPassword: string;
-            hidePassword: string;
-        };
-    };
-    Fields: {
-        ariaLabel: {
-            clearField: string;
-        };
-    };
-    SearchField: {
-        ariaLabel: {
-            search: string;
-        };
-    };
-    StepperField: {
-        ariaLabel: {
-            IncreaseTo: string;
-            DecreaseTo: string;
-        };
-    };
-    Collection: {
-        SearchFieldLabel: string;
-    };
-};

package/dist/utils-97fdf48f.js

@@ -1,16 +0,0 @@
-"use strict";var e=require("lodash/isEmpty"),t=require("lodash/isArray"),r=require("lodash/isObject");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(e),i=n(t),o=n(r);const a=e=>o.default(e)&&s.default(e),c=e=>i.default(e)&&s.default(e),l=e=>"string"==typeof e&&0===e.length;exports.__awaiter=function(e,t,r,n){return new(r||(r=Promise))((function(s,i){function o(e){try{c(n.next(e))}catch(e){i(e)}}function a(e){try{c(n.throw(e))}catch(e){i(e)}}function c(e){var t;e.done?s(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(o,a)}c((n=n.apply(e,t||[])).next())}))},exports.__rest=
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(e);s<n.length;s++)t.indexOf(n[s])<0&&Object.prototype.propertyIsEnumerable.call(e,n[s])&&(r[n[s]]=e[n[s]])}return r},exports.areArrayValuesEqual=(e,t)=>e.length===t.length&&e.every(((e,r)=>{const n=t[r];return!(!c(e)||!c(n))||(!(!a(e)||!a(n))||e===n)})),exports.classNameModifier=(e,t)=>t?`${e}--${t}`:null,exports.classNameModifierByFlag=(e,t,r)=>r?`${e}--${t}`:null,exports.findChildOverrides=(e,t)=>{if(!e)return null;const r=Object.entries(e).filter((e=>e[0].startsWith(t)));return Object.assign({},...Array.from(r,(([e,r])=>({[e.replace(t,"")]:r}))))},exports.getConsecutiveIntArray=(e,t)=>{const r=t-e+1;return Array.from({length:r},((t,r)=>r+e))},exports.getErrorMessage=e=>(e=>{if("object"==typeof(t=e)&&null!==t&&"message"in t&&"string"==typeof t.message)return e;var t;try{return new Error(JSON.stringify(e))}catch(t){return new Error(String(e))}})(e).message,exports.getFormDataFromEvent=e=>{const t=new FormData(e.target);return Object.fromEntries(t)},exports.getOverrideProps=(e,t)=>{if(!e)return null;const r=Object.entries(e).filter((([e])=>e===t)).flatMap((([,e])=>Object.entries(e))).filter((e=>null==e?void 0:e[0]));return Object.fromEntries(r)},exports.getOverridesFromVariants=function(e,t){const r=[...new Set(e.flatMap((e=>Object.keys(e.variantValues))))],n=Object.keys(t).filter((e=>r.includes(e)&&t[e])).reduce(((e,r)=>(e[r]=t[r],e)),{});return e.filter((({variantValues:e})=>Object.keys(e).length===Object.keys(n).length&&Object.entries(e).every((([e,t])=>n[e]===t)))).reduce(((e,t)=>Object.assign(Object.assign({},e),t.overrides)),{})},exports.isEmptyString=l,exports.isFunction=e=>"function"==typeof e,exports.isNullOrEmptyString=e=>null==e||l(e),exports.mergeVariantsAndOverrides=(e,t)=>{if(!e&&!t)return null;if(!t)return e;if(!e)return t;const r=new Set(Object.keys(t)),n=Object.keys(e).filter((e=>r.has(e))),s=Object.fromEntries(n.map((r=>[r,Object.assign(Object.assign({},e[r]),t[r])])));return Object.assign(Object.assign(Object.assign({},e),t),s)},exports.strHasLength=e=>"string"==typeof e&&e.length>0;