@aws-amplify/ui-react 6.4.0 → 6.5.1

package/dist/styles.layer.css

@@ -1731,8 +1731,9 @@ strong.amplify-text {
   padding-inline-start: var(--amplify-components-button-padding-inline-start);
   padding-inline-end: var(--amplify-components-button-padding-inline-end);
   transition: all var(--amplify-components-button-transition-duration);
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   --amplify-internal-button-disabled-color: var(
     --amplify-components-button-disabled-color
   );
@@ -2753,50 +2754,58 @@ strong.amplify-text {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
   cursor: not-allowed;
 }
 .amplify-button--disabled:hover {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
 }
 .amplify-button--disabled :focus {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
 }
 .amplify-button--disabled:active {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
 }
 .amplify-button--loading {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button--loading:hover {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button--loading:focus {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button--loading:active {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button__loader-wrapper {
   align-items: var(--amplify-components-button-loader-wrapper-align-items);
@@ -2944,8 +2953,9 @@ strong.amplify-text {
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
-  -moz-user-select: text;
-       user-select: text;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
   display: inline-block;
   --amplify-components-fieldcontrol-color: var(
     --amplify-components-input-color
@@ -3028,8 +3038,9 @@ strong.amplify-text {
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
-  -moz-user-select: text;
-       user-select: text;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
   white-space: pre-wrap;
 }
 .amplify-textarea:focus {
@@ -3093,24 +3104,29 @@ strong.amplify-text {
 
 .amplify-link {
   color: var(--amplify-components-link-color);
-  text-decoration: var(--amplify-components-link-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-text-decoration);
+          text-decoration: var(--amplify-components-link-text-decoration);
   cursor: pointer;
 }
 .amplify-link:visited {
   color: var(--amplify-components-link-visited-color);
-  text-decoration: var(--amplify-components-link-visited-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
+          text-decoration: var(--amplify-components-link-visited-text-decoration);
 }
 .amplify-link:active {
   color: var(--amplify-components-link-active-color);
-  text-decoration: var(--amplify-components-link-active-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
+          text-decoration: var(--amplify-components-link-active-text-decoration);
 }
 .amplify-link:focus {
   color: var(--amplify-components-link-focus-color);
-  text-decoration: var(--amplify-components-link-focus-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
+          text-decoration: var(--amplify-components-link-focus-text-decoration);
 }
 .amplify-link:hover {
   color: var(--amplify-components-link-hover-color);
-  text-decoration: var(--amplify-components-link-hover-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
+          text-decoration: var(--amplify-components-link-hover-text-decoration);
 }
 
 .amplify-loader {
@@ -3673,14 +3689,16 @@ strong.amplify-text {
   font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
   padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
   padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
-  text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
+          text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
 }
 
 .amplify-breadcrumbs__link--current {
   color: var(--amplify-components-breadcrumbs-link-current-color);
   font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
   font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
-  text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
+          text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
 }
 
 .amplify-card {
@@ -5230,8 +5248,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
   padding-block: var(--amplify-components-sliderfield-padding-block);
   position: relative;
   touch-action: none;
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   --amplify-internal-sliderfield-root-height: var(
     --amplify-components-sliderfield-thumb-height
   );

package/dist/types/components/ThemeProvider/ComponentStyle.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { WebTheme } from '@aws-amplify/ui';
+import { BaseComponentTheme } from '@aws-amplify/ui';
+interface ComponentStyleProps extends React.ComponentProps<'style'> {
+    /**
+     * Provide a server generated nonce which matches your CSP `style-src` rule.
+     * This will be attached to the generated <style> tag.
+     * @see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
+     */
+    nonce?: string;
+    theme: Pick<WebTheme, 'name' | 'breakpoints' | 'tokens'>;
+    componentThemes: BaseComponentTheme[];
+}
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+export declare const ComponentStyle: {
+    ({ theme, componentThemes, ...rest }: ComponentStyleProps): JSX.Element | null;
+    displayName: string;
+};
+export {};

package/dist/types/components/ThemeProvider/GlobalStyle.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { createGlobalCSS } from '@aws-amplify/ui';
+interface GlobalStyleProps extends React.ComponentProps<'style'> {
+    /**
+     * Provide a server generated nonce which matches your CSP `style-src` rule.
+     * This will be attached to the generated <style> tag.
+     * @see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
+     */
+    nonce?: string;
+    styles: Parameters<typeof createGlobalCSS>[0];
+}
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+export declare const GlobalStyle: {
+    ({ styles, ...rest }: GlobalStyleProps): JSX.Element | null;
+    displayName: string;
+};
+export {};

package/dist/types/components/ThemeProvider/Style.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface StyleProps extends React.ComponentProps<'style'> {
+    cssText?: string;
+}
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+export declare const Style: {
+    ({ cssText, ...rest }: StyleProps): JSX.Element | null;
+    displayName: string;
+};
+export {};

package/dist/types/components/ThemeProvider/ThemeStyle.d.ts

@@ -1,6 +1,6 @@
+import * as React from 'react';
 import { WebTheme } from '@aws-amplify/ui';
-import { BaseComponentProps, ElementType, ForwardRefPrimitive, PrimitiveProps } from '../../primitives/types';
-interface BaseStyleThemeProps extends BaseComponentProps {
+interface ThemeStyleProps extends React.ComponentProps<'style'> {
     /**
      * Provide a server generated nonce which matches your CSP `style-src` rule.
      * This will be attached to the generated <style> tag.
@@ -9,10 +9,12 @@ interface BaseStyleThemeProps extends BaseComponentProps {
     nonce?: string;
     theme?: WebTheme;
 }
-export type ThemeStyleProps<Element extends ElementType = 'style'> = PrimitiveProps<BaseStyleThemeProps, Element>;
 /**
  * @experimental
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
  */
-export declare const ThemeStyle: ForwardRefPrimitive<BaseStyleThemeProps, 'style'>;
+export declare const ThemeStyle: {
+    ({ theme, ...rest }: ThemeStyleProps): JSX.Element | null;
+    displayName: string;
+};
 export {};

package/dist/types/primitives/shared/responsive/utils.d.ts

@@ -1,6 +1,6 @@
 import { Breakpoint, Breakpoints, ValueBreakpoints } from '../../types/responsive';
 export declare const getValueAtCurrentBreakpoint: <Value = string | number>({ breakpoint, breakpoints, values, }: {
-    values: Partial<Record<"small" | "large" | "medium" | "xl" | "xxl" | "base", Value>> | Value[];
+    values: Partial<Record<"base" | "small" | "large" | "medium" | "xl" | "xxl", Value>> | Value[];
     breakpoint: Breakpoint;
     breakpoints: Breakpoints;
 }) => string | number | Value | null;

package/dist/types/server.d.ts

@@ -1,2 +1,4 @@
 export { ThemeStyle } from './components/ThemeProvider/ThemeStyle';
+export { ComponentStyle } from './components/ThemeProvider/ComponentStyle';
+export { GlobalStyle } from './components/ThemeProvider/GlobalStyle';
 export { createTheme, defineComponentTheme, createComponentClasses, defaultTheme, defaultDarkModeOverride, } from '@aws-amplify/ui';

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.4.0";
+export declare const VERSION = "6.5.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.4.0",
+  "version": "6.5.1",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -55,8 +55,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.5.0",
-    "@aws-amplify/ui-react-core": "3.0.23",
+    "@aws-amplify/ui": "6.6.1",
+    "@aws-amplify/ui-react-core": "3.0.25",
     "@radix-ui/react-direction": "1.0.0",
     "@radix-ui/react-dropdown-menu": "1.0.0",
     "@radix-ui/react-slider": "1.0.0",
@@ -66,7 +66,8 @@
     "tslib": "^2.5.2"
   },
   "peerDependencies": {
-    "aws-amplify": "^6.3.2",
+    "@aws-amplify/core": "^6.4.0",
+    "aws-amplify": "^6.6.0",
     "react": "^16.14.0 || ^17.0 || ^18.0",
     "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },

package/dist/primitiveWithForwardRef-7e929242.js

@@ -1,36 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-function _interopNamespace(e) {
-	if (e && e.__esModule) return e;
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n["default"] = e;
-	return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-/**
- * Updates the return type for primitives wrapped in `React.forwardRef` to
- * `React.ReactElement`. In React 18 the return type of `React.ExoticComponent`
- * was changed from `React.ReactElement` to `React.ReactNode`, which breaks
- * clients using React 16 and 17.
- *
- * @param primitive UI Primitive to be wrapped with `React.forwardRef`
- * @returns ForwaredRef wrapped UI Primitive
- */
-const primitiveWithForwardRef = (primitive) => React__namespace.forwardRef(primitive);
-
-exports.primitiveWithForwardRef = primitiveWithForwardRef;

package/dist/types/primitives/Card/__test__/Card.test.d.ts

@@ -1 +0,0 @@
-export {};