@aws-amplify/ui-react 6.7.0 → 6.7.2

package/dist/esm/PrimitiveCatalog.mjs

@@ -9900,12 +9900,18 @@ const PrimitiveCatalog = {
     },
     "Placeholder": {
         "properties": {
+            "endColor": {
+                "type": "string"
+            },
             "isLoaded": {
                 "type": "boolean"
             },
             "size": {
                 "type": "string"
             },
+            "startColor": {
+                "type": "string"
+            },
             "isDisabled": {
                 "type": "boolean"
             },

package/dist/esm/primitives/Placeholder/Placeholder.mjs

@@ -3,11 +3,16 @@ import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/
 import { View } from '../View/View.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 
-const PlaceholderPrimitive = ({ className, children, isLoaded, size, ...rest }, ref) => {
+const CSS_VAR_START_COLOR = '--amplify-components-placeholder-start-color';
+const CSS_VAR_END_COLOR = '--amplify-components-placeholder-end-color';
+const PlaceholderPrimitive = ({ className, children, endColor, isLoaded, size, startColor, ...rest }, ref) => {
     if (isLoaded) {
         return React.createElement(React.Fragment, null, children);
     }
-    return (React.createElement(View, { className: classNames(ComponentClassName.Placeholder, classNameModifier(ComponentClassName.Placeholder, size), className), ref: ref, ...rest }));
+    return (React.createElement(View, { className: classNames(ComponentClassName.Placeholder, classNameModifier(ComponentClassName.Placeholder, size), className), ref: ref, style: {
+            [CSS_VAR_START_COLOR]: startColor && `${startColor}`,
+            [CSS_VAR_END_COLOR]: endColor && `${endColor}`,
+        }, ...rest }));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/placeholder)
@@ -15,4 +20,4 @@ const PlaceholderPrimitive = ({ className, children, isLoaded, size, ...rest },
 const Placeholder = primitiveWithForwardRef(PlaceholderPrimitive);
 Placeholder.displayName = 'Placeholder';
 
-export { Placeholder };
+export { CSS_VAR_END_COLOR, CSS_VAR_START_COLOR, Placeholder };

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '6.7.0';
+const VERSION = '6.7.2';
 
 export { VERSION };

package/dist/index.js

@@ -1581,11 +1581,16 @@ const PhoneNumberFieldPrimitive = ({ autoComplete = 'tel-national', className, d
 const PhoneNumberField = Field.primitiveWithForwardRef(PhoneNumberFieldPrimitive);
 PhoneNumberField.displayName = 'PhoneNumberField';
 
-const PlaceholderPrimitive = ({ className, children, isLoaded, size, ...rest }, ref) => {
+const CSS_VAR_START_COLOR = '--amplify-components-placeholder-start-color';
+const CSS_VAR_END_COLOR = '--amplify-components-placeholder-end-color';
+const PlaceholderPrimitive = ({ className, children, endColor, isLoaded, size, startColor, ...rest }, ref) => {
     if (isLoaded) {
         return React__namespace.createElement(React__namespace.Fragment, null, children);
     }
-    return (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.Placeholder, ui.classNameModifier(ui.ComponentClassName.Placeholder, size), className), ref: ref, ...rest }));
+    return (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.Placeholder, ui.classNameModifier(ui.ComponentClassName.Placeholder, size), className), ref: ref, style: {
+            [CSS_VAR_START_COLOR]: startColor && `${startColor}`,
+            [CSS_VAR_END_COLOR]: endColor && `${endColor}`,
+        }, ...rest }));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/placeholder)
@@ -2482,7 +2487,7 @@ const defaultDeleteUserDisplayText = {
     warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
 };
 
-const VERSION = '6.7.0';
+const VERSION = '6.7.2';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {

package/dist/internal.js

@@ -10123,12 +10123,18 @@ const PrimitiveCatalog = {
     },
     "Placeholder": {
         "properties": {
+            "endColor": {
+                "type": "string"
+            },
             "isLoaded": {
                 "type": "boolean"
             },
             "size": {
                 "type": "string"
             },
+            "startColor": {
+                "type": "string"
+            },
             "isDisabled": {
                 "type": "boolean"
             },

package/dist/styles/AIConversation.css

@@ -89,12 +89,16 @@
   flex-direction: row;
   align-items: flex-start;
   gap: var(--amplify-components-ai-conversation-form-gap);
-  padding: var(--amplify-components-ai-conversation-form-padding);
 }
 .amplify-ai-conversation__form__dropzone {
   text-align: initial;
   border: none;
+  padding: var(--amplify-components-ai-conversation-form-padding);
+}
+.amplify-ai-conversation__form__error {
   padding: 0;
+  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
+  gap: var(--amplify-components-ai-conversation-attachment-gap);
 }
 .amplify-ai-conversation__attachment {
   display: flex;
@@ -114,7 +118,7 @@
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--amplify-components-ai-conversation-attachment-list-gap);
-  padding-block-start: var(--amplify-components-ai-conversation-attachment-padding-block-start);
+  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
 }
 .amplify-ai-conversation__attachment__image {
   width: var(--amplify-components-ai-conversation-attachment-image-width);

package/dist/styles/AIConversation.layer.css

@@ -90,12 +90,16 @@
   flex-direction: row;
   align-items: flex-start;
   gap: var(--amplify-components-ai-conversation-form-gap);
-  padding: var(--amplify-components-ai-conversation-form-padding);
 }
 .amplify-ai-conversation__form__dropzone {
   text-align: initial;
   border: none;
+  padding: var(--amplify-components-ai-conversation-form-padding);
+}
+.amplify-ai-conversation__form__error {
   padding: 0;
+  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
+  gap: var(--amplify-components-ai-conversation-attachment-gap);
 }
 .amplify-ai-conversation__attachment {
   display: flex;
@@ -115,7 +119,7 @@
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--amplify-components-ai-conversation-attachment-list-gap);
-  padding-block-start: var(--amplify-components-ai-conversation-attachment-padding-block-start);
+  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
 }
 .amplify-ai-conversation__attachment__image {
   width: var(--amplify-components-ai-conversation-attachment-image-width);

package/dist/styles.css

@@ -6842,12 +6842,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-direction: row;
   align-items: flex-start;
   gap: var(--amplify-components-ai-conversation-form-gap);
-  padding: var(--amplify-components-ai-conversation-form-padding);
 }
 .amplify-ai-conversation__form__dropzone {
   text-align: initial;
   border: none;
+  padding: var(--amplify-components-ai-conversation-form-padding);
+}
+.amplify-ai-conversation__form__error {
   padding: 0;
+  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
+  gap: var(--amplify-components-ai-conversation-attachment-gap);
 }
 .amplify-ai-conversation__attachment {
   display: flex;
@@ -6867,7 +6871,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--amplify-components-ai-conversation-attachment-list-gap);
-  padding-block-start: var(--amplify-components-ai-conversation-attachment-padding-block-start);
+  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
 }
 .amplify-ai-conversation__attachment__image {
   width: var(--amplify-components-ai-conversation-attachment-image-width);

package/dist/styles.layer.css

@@ -6843,12 +6843,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-direction: row;
   align-items: flex-start;
   gap: var(--amplify-components-ai-conversation-form-gap);
-  padding: var(--amplify-components-ai-conversation-form-padding);
 }
 .amplify-ai-conversation__form__dropzone {
   text-align: initial;
   border: none;
+  padding: var(--amplify-components-ai-conversation-form-padding);
+}
+.amplify-ai-conversation__form__error {
   padding: 0;
+  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
+  gap: var(--amplify-components-ai-conversation-attachment-gap);
 }
 .amplify-ai-conversation__attachment {
   display: flex;
@@ -6868,7 +6872,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--amplify-components-ai-conversation-attachment-list-gap);
-  padding-block-start: var(--amplify-components-ai-conversation-attachment-padding-block-start);
+  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
 }
 .amplify-ai-conversation__attachment__image {
   width: var(--amplify-components-ai-conversation-attachment-image-width);

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

@@ -1,4 +1,6 @@
 import { BasePlaceholderProps, ForwardRefPrimitive } from '../types';
+export declare const CSS_VAR_START_COLOR: string;
+export declare const CSS_VAR_END_COLOR: string;
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/placeholder)
  */

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

@@ -1,8 +1,15 @@
+import { Property } from 'csstype';
 import { Sizes } from './base';
+import { StyleToken } from './style';
 import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 export type PlaceholderSizes = Sizes;
 /** @deprecated For internal use only */
 export interface BasePlaceholderProps extends BaseViewProps {
+    /**
+     * @description
+     * This property will change the animation end color of the placeholder component
+     */
+    endColor?: StyleToken<Property.Color>;
     /**
      * @description
      * If true, the placeholder won't show, if false the placeholder will show.
@@ -15,5 +22,10 @@ export interface BasePlaceholderProps extends BaseViewProps {
      * Controls the display size of placeholder
      */
     size?: PlaceholderSizes;
+    /**
+     * @description
+     * This property will change the animation start color of the placeholder component
+     */
+    startColor?: StyleToken<Property.Color>;
 }
 export type PlaceholderProps<Element extends ElementType = 'div'> = PrimitiveProps<BasePlaceholderProps, Element>;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.7.0";
+export declare const VERSION = "6.7.2";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.7.0",
+  "version": "6.7.2",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -55,8 +55,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.7.0",
-    "@aws-amplify/ui-react-core": "3.1.0",
+    "@aws-amplify/ui": "6.7.2",
+    "@aws-amplify/ui-react-core": "3.1.2",
     "@radix-ui/react-direction": "1.0.0",
     "@radix-ui/react-dropdown-menu": "1.0.0",
     "@radix-ui/react-slider": "1.0.0",