@aws-amplify/ui-react 6.1.14 → 6.2.1

package/dist/styles.layer.css

@@ -1641,9 +1641,8 @@ 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);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+       user-select: none;
   --amplify-internal-button-disabled-color: var(
     --amplify-components-button-disabled-color
   );
@@ -2664,58 +2663,50 @@ 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);
-  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
-          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);
-  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
-          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);
-  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
-          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);
-  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
-          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);
-  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
-          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);
-  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
-          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);
-  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
-          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);
-  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
-          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);
@@ -2863,9 +2854,8 @@ 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);
-  -webkit-user-select: text;
-     -moz-user-select: text;
-          user-select: text;
+  -moz-user-select: text;
+       user-select: text;
   display: inline-block;
   --amplify-components-fieldcontrol-color: var(
     --amplify-components-input-color
@@ -2948,9 +2938,8 @@ 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);
-  -webkit-user-select: text;
-     -moz-user-select: text;
-          user-select: text;
+  -moz-user-select: text;
+       user-select: text;
   white-space: pre-wrap;
 }
 .amplify-textarea:focus {
@@ -3014,29 +3003,24 @@ strong.amplify-text {
 
 .amplify-link {
   color: var(--amplify-components-link-color);
-  -webkit-text-decoration: var(--amplify-components-link-text-decoration);
-          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);
-  -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
-          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);
-  -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
-          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);
-  -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
-          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);
-  -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
-          text-decoration: var(--amplify-components-link-hover-text-decoration);
+  text-decoration: var(--amplify-components-link-hover-text-decoration);
 }
 
 .amplify-loader {
@@ -3467,16 +3451,14 @@ 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);
-  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
-          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);
-  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
-          text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
+  text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
 }
 
 .amplify-card {
@@ -5026,9 +5008,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
   padding-block: var(--amplify-components-sliderfield-padding-block);
   position: relative;
   touch-action: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          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/ThemeStyle.d.ts

@@ -0,0 +1,18 @@
+import { WebTheme } from '@aws-amplify/ui';
+import { BaseComponentProps, ElementType, ForwardRefPrimitive, PrimitiveProps } from '../../primitives/types';
+interface BaseStyleThemeProps extends BaseComponentProps {
+    /**
+     * 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?: 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 {};

package/dist/types/helpers/constants.d.ts

@@ -1 +1,3 @@
 export declare const AMPLIFY_SYMBOL: Symbol;
+export declare const ERROR_SUFFIX = "error";
+export declare const DESCRIPTION_SUFFIX = "description";

package/dist/types/primitives/Tabs/TabsContext.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 export interface TabsContextInterface {
     activeTab: string;
     isLazy?: boolean;
+    groupId: string;
     setActiveTab: (tab: string) => void;
 }
 export declare const TabsContext: React.Context<TabsContextInterface>;

package/dist/types/primitives/Tabs/constants.d.ts

@@ -0,0 +1 @@
+export declare const WHITESPACE_VALUE = "-";

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" | "medium" | "large" | "xl" | "xxl" | "base", Value>> | Value[];
+    values: Partial<Record<"small" | "large" | "medium" | "xl" | "xxl" | "base", Value>> | Value[];
     breakpoint: Breakpoint;
     breakpoints: Breakpoints;
 }) => string | number | Value | null;

package/dist/types/primitives/utils/createSpaceSeparatedIds.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Joins an array of strings and undefined values into a single string with spaces as separators.
+ * If all elements are undefined, returns undefined.
+ *
+ * @param {(string | undefined)[]} ids - An array of strings or undefined values.
+ * @returns {string | undefined} A single string with space-separated IDs, or undefined if all elements are undefined.
+ */
+export declare const createSpaceSeparatedIds: (ids: (string | undefined)[]) => string | undefined;

package/dist/types/primitives/utils/getUniqueComponentId.d.ts

@@ -0,0 +1 @@
+export declare const getUniqueComponentId: (id?: string, suffix?: string) => string | undefined;

package/dist/types/server.d.ts

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

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.1.14";
+export declare const VERSION = "6.2.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.1.14",
+  "version": "6.2.1",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -13,6 +13,11 @@
       "import": "./dist/esm/internal.mjs",
       "require": "./dist/internal.js"
     },
+    "./server": {
+      "types": "./dist/types/server.d.ts",
+      "import": "./dist/esm/server.mjs",
+      "require": "./dist/server.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./styles.layer.css": "./dist/styles.layer.css",
     "./styles/*": "./dist/styles/*",
@@ -31,6 +36,7 @@
   "files": [
     "dist",
     "internal",
+    "server",
     "LICENSE"
   ],
   "scripts": {
@@ -49,8 +55,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.0.17",
-    "@aws-amplify/ui-react-core": "3.0.17",
+    "@aws-amplify/ui": "6.2.0",
+    "@aws-amplify/ui-react-core": "3.0.19",
     "@radix-ui/react-direction": "1.0.0",
     "@radix-ui/react-dropdown-menu": "1.0.0",
     "@radix-ui/react-slider": "1.0.0",
@@ -83,13 +89,13 @@
       "name": "Authenticator",
       "path": "dist/esm/index.mjs",
       "import": "{ Authenticator }",
-      "limit": "76 kB"
+      "limit": "77 kB"
     },
     {
       "name": "AccountSettings",
       "path": "dist/esm/index.mjs",
       "import": "{ AccountSettings }",
-      "limit": "29 kB"
+      "limit": "30 kB"
     }
   ]
 }

package/server/package.json

@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "name": "@aws-amplify/ui-react-server",
+  "main": "../dist/server.js",
+  "module": "../dist/esm/server.mjs",
+  "types": "../dist/types/server.d.ts"
+}

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

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

package/dist/types/primitives/utils/getTestId.d.ts

@@ -1 +0,0 @@
-export declare const getTestId: (testId?: string, component?: string) => string | undefined;