@cloudscape-design/components-themeable 3.0.686 → 3.0.688

package/lib/internal/template/toggle/styles.scoped.css

@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_4yi2u_kayyg_97:not(#\9) {
+.awsui_root_4yi2u_1qca0_97:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -131,14 +131,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
 }
 
-.awsui_outline_4yi2u_kayyg_133:not(#\9) {
+.awsui_outline_4yi2u_1qca0_133:not(#\9) {
   position: relative;
 }
-.awsui_outline_4yi2u_kayyg_133:not(#\9) {
+.awsui_outline_4yi2u_1qca0_133:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_outline_4yi2u_kayyg_133:not(#\9)::before {
+.awsui_outline_4yi2u_1qca0_133:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -153,7 +153,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
 
-.awsui_toggle-control_4yi2u_kayyg_155:not(#\9) {
+.awsui_toggle-control_4yi2u_1qca0_155:not(#\9) {
   forced-color-adjust: none;
   margin-block-start: calc((var(--line-height-body-m-2zx78l, 22px) - 16px) / 2);
   min-block-size: 16px;
@@ -166,17 +166,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-start-radius: 8px;
   border-end-end-radius: 8px;
 }
-.awsui_toggle-control-checked_4yi2u_kayyg_168:not(#\9) {
+.awsui_toggle-control-checked_4yi2u_1qca0_168:not(#\9) {
   background: var(--color-background-control-checked-pvanxo, #0073bb);
 }
-.awsui_toggle-control-disabled_4yi2u_kayyg_171:not(#\9) {
+.awsui_toggle-control-disabled_4yi2u_1qca0_171:not(#\9) {
   background: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
 }
-.awsui_toggle-control-disabled_4yi2u_kayyg_171.awsui_toggle-control-checked_4yi2u_kayyg_168:not(#\9) {
+.awsui_toggle-control-disabled_4yi2u_1qca0_171.awsui_toggle-control-checked_4yi2u_1qca0_168:not(#\9) {
   background: var(--color-background-toggle-checked-disabled-uehqtc, #99cbe4);
 }
+.awsui_toggle-control-readonly_4yi2u_1qca0_177:not(#\9) {
+  background: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
+}
 
-.awsui_toggle-handle_4yi2u_kayyg_178:not(#\9) {
+.awsui_toggle-handle_4yi2u_1qca0_181:not(#\9) {
   display: block;
   position: absolute;
   border-start-start-radius: 6px;
@@ -191,24 +194,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline-start: 2px;
   transition: transform var(--motion-duration-fast-xv2yiz, 90ms) var(--motion-easing-ease-out-quart-8sctun, cubic-bezier(0.165, 0.84, 0.44, 1)), background-color var(--motion-duration-fast-xv2yiz, 90ms) var(--motion-easing-ease-out-quart-8sctun, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
-.awsui_toggle-handle-checked_4yi2u_kayyg_193:not(#\9) {
+.awsui_toggle-handle-checked_4yi2u_1qca0_196:not(#\9) {
   transform: translateX(8px);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_toggle-handle-checked_4yi2u_kayyg_193:not(#\9):dir(rtl) {
+.awsui_toggle-handle-checked_4yi2u_1qca0_196:not(#\9):dir(rtl) {
   transform: translateX(-8px);
 }
-.awsui_toggle-handle-disabled_4yi2u_kayyg_200:not(#\9) {
+.awsui_toggle-handle-disabled_4yi2u_1qca0_203:not(#\9) {
   background: var(--color-foreground-control-disabled-fcoqdk, #ffffff);
   box-shadow: none;
 }
+.awsui_toggle-handle-readonly_4yi2u_1qca0_207:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1qca0_203) {
+  box-shadow: none;
+}
+.awsui_toggle-handle-readonly_4yi2u_1qca0_207:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1qca0_203).awsui_toggle-handle-checked_4yi2u_1qca0_196 {
+  background: var(--color-foreground-control-read-only-egnjey, #687078);
+}
 @media (prefers-reduced-motion: reduce) {
-  .awsui_toggle-handle_4yi2u_kayyg_178:not(#\9) {
+  .awsui_toggle-handle_4yi2u_1qca0_181:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_toggle-handle_4yi2u_kayyg_178:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_kayyg_178:not(#\9) {
+.awsui-motion-disabled .awsui_toggle-handle_4yi2u_1qca0_181:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_1qca0_181:not(#\9) {
   animation: none;
   transition: none;
 }

package/lib/internal/template/toggle/styles.selectors.js

@@ -2,13 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_4yi2u_kayyg_97",
-  "outline": "awsui_outline_4yi2u_kayyg_133",
-  "toggle-control": "awsui_toggle-control_4yi2u_kayyg_155",
-  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_kayyg_168",
-  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_kayyg_171",
-  "toggle-handle": "awsui_toggle-handle_4yi2u_kayyg_178",
-  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_kayyg_193",
-  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_kayyg_200"
+  "root": "awsui_root_4yi2u_1qca0_97",
+  "outline": "awsui_outline_4yi2u_1qca0_133",
+  "toggle-control": "awsui_toggle-control_4yi2u_1qca0_155",
+  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1qca0_168",
+  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1qca0_171",
+  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1qca0_177",
+  "toggle-handle": "awsui_toggle-handle_4yi2u_1qca0_181",
+  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1qca0_196",
+  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1qca0_203",
+  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1qca0_207"
 };
   

package/lib/internal/template/token-group/dismiss-button.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface DismissButtonProps {
     disabled?: boolean;
+    readOnly?: boolean;
     onDismiss?: () => void;
     dismissLabel?: string;
 }

package/lib/internal/template/token-group/dismiss-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dismiss-button.d.ts","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;;AAED,wBAAyC"}
+{"version":3,"file":"dismiss-button.d.ts","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;;AAED,wBAAyC"}

package/lib/internal/template/token-group/dismiss-button.js

@@ -4,8 +4,13 @@ import React, { forwardRef } from 'react';
 import styles from './styles.css.js';
 import InternalIcon from '../icon/internal';
 export default forwardRef(DismissButton);
-function DismissButton({ disabled, dismissLabel, onDismiss }, ref) {
-    return (React.createElement("button", { ref: ref, type: "button", className: styles['dismiss-button'], "aria-disabled": disabled ? true : undefined, onClick: !disabled && onDismiss ? () => onDismiss() : undefined, "aria-label": dismissLabel },
+function DismissButton({ disabled, dismissLabel, onDismiss, readOnly }, ref) {
+    return (React.createElement("button", { ref: ref, type: "button", className: styles['dismiss-button'], "aria-disabled": disabled || readOnly ? true : undefined, onClick: () => {
+            if (disabled || readOnly || !onDismiss) {
+                return;
+            }
+            onDismiss();
+        }, "aria-label": dismissLabel },
         React.createElement(InternalIcon, { name: "close" })));
 }
 //# sourceMappingURL=dismiss-button.js.map

package/lib/internal/template/token-group/dismiss-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"dismiss-button.js","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAQ5C,eAAe,UAAU,CAAC,aAAa,CAAC,CAAC;AAEzC,SAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAsB,EAAE,GAA2B;IAC3G,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,mBACpB,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,gBACnD,YAAY;QAExB,oBAAC,YAAY,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, Ref } from 'react';\nimport styles from './styles.css.js';\nimport InternalIcon from '../icon/internal';\n\ninterface DismissButtonProps {\n  disabled?: boolean;\n  onDismiss?: () => void;\n  dismissLabel?: string;\n}\n\nexport default forwardRef(DismissButton);\n\nfunction DismissButton({ disabled, dismissLabel, onDismiss }: DismissButtonProps, ref: Ref<HTMLButtonElement>) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={styles['dismiss-button']}\n      aria-disabled={disabled ? true : undefined}\n      onClick={!disabled && onDismiss ? () => onDismiss() : undefined}\n      aria-label={dismissLabel}\n    >\n      <InternalIcon name=\"close\" />\n    </button>\n  );\n}\n"]}
+{"version":3,"file":"dismiss-button.js","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAS5C,eAAe,UAAU,CAAC,aAAa,CAAC,CAAC;AAEzC,SAAS,aAAa,CACpB,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAsB,EACnE,GAA2B;IAE3B,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,mBACpB,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACtD,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,QAAQ,IAAI,QAAQ,IAAI,CAAC,SAAS,EAAE;gBACtC,OAAO;aACR;YAED,SAAS,EAAE,CAAC;QACd,CAAC,gBACW,YAAY;QAExB,oBAAC,YAAY,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, Ref } from 'react';\nimport styles from './styles.css.js';\nimport InternalIcon from '../icon/internal';\n\ninterface DismissButtonProps {\n  disabled?: boolean;\n  readOnly?: boolean;\n  onDismiss?: () => void;\n  dismissLabel?: string;\n}\n\nexport default forwardRef(DismissButton);\n\nfunction DismissButton(\n  { disabled, dismissLabel, onDismiss, readOnly }: DismissButtonProps,\n  ref: Ref<HTMLButtonElement>\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={styles['dismiss-button']}\n      aria-disabled={disabled || readOnly ? true : undefined}\n      onClick={() => {\n        if (disabled || readOnly || !onDismiss) {\n          return;\n        }\n\n        onDismiss();\n      }}\n      aria-label={dismissLabel}\n    >\n      <InternalIcon name=\"close\" />\n    </button>\n  );\n}\n"]}

package/lib/internal/template/token-group/interfaces.d.ts

@@ -52,6 +52,11 @@ export interface TokenGroupProps extends BaseComponentProps {
      * Use to assign unique labels when there are multiple token groups with the same `limitShowMore` label on one page.
      */
     limitShowMoreAriaLabel?: string;
+    /**
+     * Specifies if the control is read-only, which prevents the
+     * user from modifying the value. A read-only control is still focusable.
+     */
+    readOnly?: boolean;
 }
 export declare namespace TokenGroupProps {
     type Alignment = 'horizontal' | 'vertical';

package/lib/internal/template/token-group/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/token-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IAEtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;IACrE;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;IAClD,UAAiB,IAAI;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;IAED,UAAiB,aAAa;QAC5B,SAAS,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,WAAW;QAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/token-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IAEtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;IACrE;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;IAClD,UAAiB,IAAI;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;IAED,UAAiB,aAAa;QAC5B,SAAS,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,WAAW;QAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;CACF"}

package/lib/internal/template/token-group/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/token-group/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { IconProps } from '../icon/interfaces';\n\nexport interface TokenGroupProps extends BaseComponentProps {\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: TokenGroupProps.I18nStrings;\n\n  /**\n   * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.\n   */\n  limit?: number;\n\n  /**\n   * Specifies the direction in which tokens are aligned (`horizontal | vertical`).\n   */\n  alignment?: TokenGroupProps.Alignment;\n\n  /**\n   * Removes any outer padding from the component.\n   * We recommend to always enable this property.\n   */\n  disableOuterPadding?: boolean;\n\n  /**\n   *\n   * An array of objects representing token items. Each token has the following properties:\n   *\n   * - `label` (string) - Title text of the token.\n   * - `description` (string) - (Optional) Further information about the token that appears below the label.\n   * - `disabled` [boolean] - (Optional) Determines whether the token is disabled.\n   * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n   * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the token.\n   * - `dismissLabel` (string) - (Optional) Adds an `aria-label` to the dismiss button.\n   * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the token.\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for a custom icon, for use with `iconUrl`.\n   * - `iconUrl` (string) - (Optional) URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   */\n  items?: ReadonlyArray<TokenGroupProps.Item>;\n  /**\n   *  Called when the user clicks on the dismiss button. The token won't be automatically removed.\n   *  Make sure that you add a listener to this event to update your application state.\n   */\n  onDismiss?: NonCancelableEventHandler<TokenGroupProps.DismissDetail>;\n  /**\n   * Adds an `aria-label` to the \"Show fewer\" button.\n   * Use to assign unique labels when there are multiple token groups with the same `limitShowFewer` label on one page.\n   */\n  limitShowFewerAriaLabel?: string;\n  /**\n   * Adds an `aria-label` to the \"Show more\" button.\n   * Use to assign unique labels when there are multiple token groups with the same `limitShowMore` label on one page.\n   */\n  limitShowMoreAriaLabel?: string;\n}\n\nexport namespace TokenGroupProps {\n  export type Alignment = 'horizontal' | 'vertical';\n  export interface Item {\n    label?: string;\n    disabled?: boolean;\n    labelTag?: string;\n    description?: string;\n    iconAlt?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    tags?: ReadonlyArray<string>;\n    dismissLabel?: string;\n  }\n\n  export interface DismissDetail {\n    itemIndex: number;\n  }\n\n  export interface I18nStrings {\n    limitShowFewer?: string;\n    limitShowMore?: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/token-group/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { IconProps } from '../icon/interfaces';\n\nexport interface TokenGroupProps extends BaseComponentProps {\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: TokenGroupProps.I18nStrings;\n\n  /**\n   * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.\n   */\n  limit?: number;\n\n  /**\n   * Specifies the direction in which tokens are aligned (`horizontal | vertical`).\n   */\n  alignment?: TokenGroupProps.Alignment;\n\n  /**\n   * Removes any outer padding from the component.\n   * We recommend to always enable this property.\n   */\n  disableOuterPadding?: boolean;\n\n  /**\n   *\n   * An array of objects representing token items. Each token has the following properties:\n   *\n   * - `label` (string) - Title text of the token.\n   * - `description` (string) - (Optional) Further information about the token that appears below the label.\n   * - `disabled` [boolean] - (Optional) Determines whether the token is disabled.\n   * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n   * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the token.\n   * - `dismissLabel` (string) - (Optional) Adds an `aria-label` to the dismiss button.\n   * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the token.\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for a custom icon, for use with `iconUrl`.\n   * - `iconUrl` (string) - (Optional) URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   */\n  items?: ReadonlyArray<TokenGroupProps.Item>;\n  /**\n   *  Called when the user clicks on the dismiss button. The token won't be automatically removed.\n   *  Make sure that you add a listener to this event to update your application state.\n   */\n  onDismiss?: NonCancelableEventHandler<TokenGroupProps.DismissDetail>;\n  /**\n   * Adds an `aria-label` to the \"Show fewer\" button.\n   * Use to assign unique labels when there are multiple token groups with the same `limitShowFewer` label on one page.\n   */\n  limitShowFewerAriaLabel?: string;\n  /**\n   * Adds an `aria-label` to the \"Show more\" button.\n   * Use to assign unique labels when there are multiple token groups with the same `limitShowMore` label on one page.\n   */\n  limitShowMoreAriaLabel?: string;\n  /**\n   * Specifies if the control is read-only, which prevents the\n   * user from modifying the value. A read-only control is still focusable.\n   */\n  readOnly?: boolean;\n}\n\nexport namespace TokenGroupProps {\n  export type Alignment = 'horizontal' | 'vertical';\n  export interface Item {\n    label?: string;\n    disabled?: boolean;\n    labelTag?: string;\n    description?: string;\n    iconAlt?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    tags?: ReadonlyArray<string>;\n    dismissLabel?: string;\n  }\n\n  export interface DismissDetail {\n    itemIndex: number;\n  }\n\n  export interface I18nStrings {\n    limitShowFewer?: string;\n    limitShowMore?: string;\n  }\n}\n"]}

package/lib/internal/template/token-group/internal.d.ts

@@ -3,6 +3,6 @@ import { InternalBaseComponentProps } from '../internal/hooks/use-base-component
 import { TokenGroupProps } from './interfaces';
 import { SomeRequired } from '../internal/types';
 type InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> & InternalBaseComponentProps;
-export default function InternalTokenGroup({ alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, __internalRootRef, ...props }: InternalTokenGroupProps): JSX.Element;
+export default function InternalTokenGroup({ alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, readOnly, __internalRootRef, ...props }: InternalTokenGroupProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/token-group/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/token-group/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,KAAK,uBAAuB,GAAG,YAAY,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,CAAC,GAAG,0BAA0B,CAAC;AAEjH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,uBAAuB,eAiDzB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/token-group/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,KAAK,uBAAuB,GAAG,YAAY,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,CAAC,GAAG,0BAA0B,CAAC;AAEjH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,uBAAuB,eAkDzB"}

package/lib/internal/template/token-group/internal.js

@@ -11,7 +11,7 @@ import styles from './styles.css.js';
 import TokenList from '../internal/components/token-list';
 import { Token } from './token';
 export default function InternalTokenGroup(_a) {
-    var { alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, __internalRootRef } = _a, props = __rest(_a, ["alignment", "items", "onDismiss", "limit", "i18nStrings", "disableOuterPadding", "limitShowFewerAriaLabel", "limitShowMoreAriaLabel", "__internalRootRef"]);
+    var { alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, readOnly, __internalRootRef } = _a, props = __rest(_a, ["alignment", "items", "onDismiss", "limit", "i18nStrings", "disableOuterPadding", "limitShowFewerAriaLabel", "limitShowMoreAriaLabel", "readOnly", "__internalRootRef"]);
     checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);
     const [removedItemIndex, setRemovedItemIndex] = useState(null);
     const baseProps = getBaseProps(props);
@@ -20,7 +20,7 @@ export default function InternalTokenGroup(_a) {
         React.createElement(TokenList, { alignment: alignment, items: items, limit: limit, renderItem: (item, itemIndex) => (React.createElement(Token, { ariaLabel: item.label, dismissLabel: item.dismissLabel, onDismiss: () => {
                     fireNonCancelableEvent(onDismiss, { itemIndex });
                     setRemovedItemIndex(itemIndex);
-                }, disabled: item.disabled },
+                }, disabled: item.disabled, readOnly: readOnly },
                 React.createElement(Option, { option: item, isGenericGroup: false }))), i18nStrings: i18nStrings, limitShowFewerAriaLabel: limitShowFewerAriaLabel, limitShowMoreAriaLabel: limitShowMoreAriaLabel, moveFocusNextToIndex: removedItemIndex, onExpandedClick: isExpanded => {
                 if (isExpanded && limit) {
                     setRemovedItemIndex(limit);

package/lib/internal/template/token-group/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/token-group/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAKjE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIhC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAWjB;QAXiB,EACzC,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,iBAAiB,OAEO,EADrB,KAAK,cAViC,4JAW1C,CADS;IAER,eAAe,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAEtE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE9E,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAClC,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,QAAQ,IAAI,MAAM,CAAC,WAAW,CAAC,EAC/B,mBAAmB,IAAI,MAAM,CAAC,YAAY,CAAC,CAC5C,EACD,GAAG,EAAE,iBAAiB;QAEtB,oBAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAC/B,oBAAC,KAAK,IACJ,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,GAAG,EAAE;oBACd,sBAAsB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;oBACjD,mBAAmB,CAAC,SAAS,CAAC,CAAC;gBACjC,CAAC,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,GAAI,CACzC,CACT,EACD,WAAW,EAAE,WAAW,EACxB,uBAAuB,EAAE,uBAAuB,EAChD,sBAAsB,EAAE,sBAAsB,EAC9C,oBAAoB,EAAE,gBAAgB,EACtC,eAAe,EAAE,UAAU,CAAC,EAAE;gBAC5B,IAAI,UAAU,IAAI,KAAK,EAAE;oBACvB,mBAAmB,CAAC,KAAK,CAAC,CAAC;iBAC5B;qBAAM;oBACL,mBAAmB,CAAC,IAAI,CAAC,CAAC;iBAC3B;YACH,CAAC,GACD,CACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\n\nimport Option from '../internal/components/option';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nimport { TokenGroupProps } from './interfaces';\nimport { SomeRequired } from '../internal/types';\nimport { getBaseProps } from '../internal/base-component';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport TokenList from '../internal/components/token-list';\nimport { Token } from './token';\n\ntype InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> & InternalBaseComponentProps;\n\nexport default function InternalTokenGroup({\n  alignment,\n  items,\n  onDismiss,\n  limit,\n  i18nStrings,\n  disableOuterPadding,\n  limitShowFewerAriaLabel,\n  limitShowMoreAriaLabel,\n  __internalRootRef,\n  ...props\n}: InternalTokenGroupProps) {\n  checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);\n\n  const [removedItemIndex, setRemovedItemIndex] = useState<null | number>(null);\n\n  const baseProps = getBaseProps(props);\n  const hasItems = items.length > 0;\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        hasItems && styles['has-items'],\n        disableOuterPadding && styles['no-padding']\n      )}\n      ref={__internalRootRef}\n    >\n      <TokenList\n        alignment={alignment}\n        items={items}\n        limit={limit}\n        renderItem={(item, itemIndex) => (\n          <Token\n            ariaLabel={item.label}\n            dismissLabel={item.dismissLabel}\n            onDismiss={() => {\n              fireNonCancelableEvent(onDismiss, { itemIndex });\n              setRemovedItemIndex(itemIndex);\n            }}\n            disabled={item.disabled}\n          >\n            <Option option={item} isGenericGroup={false} />\n          </Token>\n        )}\n        i18nStrings={i18nStrings}\n        limitShowFewerAriaLabel={limitShowFewerAriaLabel}\n        limitShowMoreAriaLabel={limitShowMoreAriaLabel}\n        moveFocusNextToIndex={removedItemIndex}\n        onExpandedClick={isExpanded => {\n          if (isExpanded && limit) {\n            setRemovedItemIndex(limit);\n          } else {\n            setRemovedItemIndex(null);\n          }\n        }}\n      />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/token-group/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAKjE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIhC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAYjB;QAZiB,EACzC,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,EACR,iBAAiB,OAEO,EADrB,KAAK,cAXiC,wKAY1C,CADS;IAER,eAAe,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAEtE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE9E,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAClC,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,QAAQ,IAAI,MAAM,CAAC,WAAW,CAAC,EAC/B,mBAAmB,IAAI,MAAM,CAAC,YAAY,CAAC,CAC5C,EACD,GAAG,EAAE,iBAAiB;QAEtB,oBAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAC/B,oBAAC,KAAK,IACJ,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,GAAG,EAAE;oBACd,sBAAsB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;oBACjD,mBAAmB,CAAC,SAAS,CAAC,CAAC;gBACjC,CAAC,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,QAAQ;gBAElB,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,GAAI,CACzC,CACT,EACD,WAAW,EAAE,WAAW,EACxB,uBAAuB,EAAE,uBAAuB,EAChD,sBAAsB,EAAE,sBAAsB,EAC9C,oBAAoB,EAAE,gBAAgB,EACtC,eAAe,EAAE,UAAU,CAAC,EAAE;gBAC5B,IAAI,UAAU,IAAI,KAAK,EAAE;oBACvB,mBAAmB,CAAC,KAAK,CAAC,CAAC;iBAC5B;qBAAM;oBACL,mBAAmB,CAAC,IAAI,CAAC,CAAC;iBAC3B;YACH,CAAC,GACD,CACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\n\nimport Option from '../internal/components/option';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nimport { TokenGroupProps } from './interfaces';\nimport { SomeRequired } from '../internal/types';\nimport { getBaseProps } from '../internal/base-component';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport TokenList from '../internal/components/token-list';\nimport { Token } from './token';\n\ntype InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> & InternalBaseComponentProps;\n\nexport default function InternalTokenGroup({\n  alignment,\n  items,\n  onDismiss,\n  limit,\n  i18nStrings,\n  disableOuterPadding,\n  limitShowFewerAriaLabel,\n  limitShowMoreAriaLabel,\n  readOnly,\n  __internalRootRef,\n  ...props\n}: InternalTokenGroupProps) {\n  checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);\n\n  const [removedItemIndex, setRemovedItemIndex] = useState<null | number>(null);\n\n  const baseProps = getBaseProps(props);\n  const hasItems = items.length > 0;\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        hasItems && styles['has-items'],\n        disableOuterPadding && styles['no-padding']\n      )}\n      ref={__internalRootRef}\n    >\n      <TokenList\n        alignment={alignment}\n        items={items}\n        limit={limit}\n        renderItem={(item, itemIndex) => (\n          <Token\n            ariaLabel={item.label}\n            dismissLabel={item.dismissLabel}\n            onDismiss={() => {\n              fireNonCancelableEvent(onDismiss, { itemIndex });\n              setRemovedItemIndex(itemIndex);\n            }}\n            disabled={item.disabled}\n            readOnly={readOnly}\n          >\n            <Option option={item} isGenericGroup={false} />\n          </Token>\n        )}\n        i18nStrings={i18nStrings}\n        limitShowFewerAriaLabel={limitShowFewerAriaLabel}\n        limitShowMoreAriaLabel={limitShowMoreAriaLabel}\n        moveFocusNextToIndex={removedItemIndex}\n        onExpandedClick={isExpanded => {\n          if (isExpanded && limit) {\n            setRemovedItemIndex(limit);\n          } else {\n            setRemovedItemIndex(null);\n          }\n        }}\n      />\n    </div>\n  );\n}\n"]}

package/lib/internal/template/token-group/styles.css.js

@@ -1,14 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_dm8gx_18mjd_101",
-  "has-items": "awsui_has-items_dm8gx_18mjd_135",
-  "no-padding": "awsui_no-padding_dm8gx_18mjd_135",
-  "dismiss-button": "awsui_dismiss-button_dm8gx_18mjd_139",
-  "token": "awsui_token_dm8gx_18mjd_181",
-  "token-box": "awsui_token-box_dm8gx_18mjd_188",
-  "token-box-error": "awsui_token-box-error_dm8gx_18mjd_207",
-  "token-box-warning": "awsui_token-box-warning_dm8gx_18mjd_218",
-  "token-box-disabled": "awsui_token-box-disabled_dm8gx_18mjd_229"
+  "root": "awsui_root_dm8gx_2vl9u_101",
+  "has-items": "awsui_has-items_dm8gx_2vl9u_135",
+  "no-padding": "awsui_no-padding_dm8gx_2vl9u_135",
+  "dismiss-button": "awsui_dismiss-button_dm8gx_2vl9u_139",
+  "token": "awsui_token_dm8gx_2vl9u_181",
+  "token-box": "awsui_token-box_dm8gx_2vl9u_188",
+  "token-box-error": "awsui_token-box-error_dm8gx_2vl9u_207",
+  "token-box-warning": "awsui_token-box-warning_dm8gx_2vl9u_218",
+  "token-box-readonly": "awsui_token-box-readonly_dm8gx_2vl9u_229",
+  "token-box-disabled": "awsui_token-box-disabled_dm8gx_2vl9u_243"
 };
   

package/lib/internal/template/token-group/styles.scoped.css

@@ -98,7 +98,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_dm8gx_18mjd_101:not(#\9) {
+.awsui_root_dm8gx_2vl9u_101:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -133,11 +133,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
-.awsui_root_dm8gx_18mjd_101.awsui_has-items_dm8gx_18mjd_135:not(#\9):not(.awsui_no-padding_dm8gx_18mjd_135) {
+.awsui_root_dm8gx_2vl9u_101.awsui_has-items_dm8gx_2vl9u_135:not(#\9):not(.awsui_no-padding_dm8gx_2vl9u_135) {
   padding-block-start: var(--space-xs-xf5ch3, 8px);
 }
 
-.awsui_dismiss-button_dm8gx_18mjd_139:not(#\9) {
+.awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9) {
   margin-block-start: -1px;
   margin-block-end: 0;
   margin-inline-start: var(--space-xxs-9rrxti, 4px);
@@ -149,14 +149,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: var(--color-text-button-inline-icon-default-870ilx, #545b64);
   background-color: transparent;
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_18mjd_139:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_18mjd_139:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_18mjd_139:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -170,23 +170,23 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_18mjd_139:not(#\
   border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_dismiss-button_dm8gx_18mjd_139:not(#\9):focus {
+.awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_dismiss-button_dm8gx_18mjd_139:not(#\9):hover {
+.awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-button-inline-icon-hover-gmrtb4, #16191f);
 }
 
-.awsui_token_dm8gx_18mjd_181:not(#\9) {
+.awsui_token_dm8gx_2vl9u_181:not(#\9) {
   block-size: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--space-xxs-9rrxti, 4px);
 }
 
-.awsui_token-box_dm8gx_18mjd_188:not(#\9) {
+.awsui_token-box_dm8gx_2vl9u_188:not(#\9) {
   block-size: 100%;
   border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-item-selected-20gejb, #0073bb);
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-item-selected-20gejb, #0073bb);
@@ -205,38 +205,52 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_18mjd_139:not(#\
   box-sizing: border-box;
 }
 
-.awsui_token-box-error_dm8gx_18mjd_207:not(#\9) {
+.awsui_token-box-error_dm8gx_2vl9u_207:not(#\9) {
   border-color: var(--color-border-status-error-xj05xm, #d13212);
   border-inline-start-width: var(--border-invalid-width-hp6noi, 4px);
 }
-.awsui_token-box-error_dm8gx_18mjd_207 > .awsui_dismiss-button_dm8gx_18mjd_139:not(#\9) {
+.awsui_token-box-error_dm8gx_2vl9u_207 > .awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9) {
   color: var(--color-text-interactive-default-dt26aj, #545b64);
 }
-.awsui_token-box-error_dm8gx_18mjd_207 > .awsui_dismiss-button_dm8gx_18mjd_139:not(#\9):hover {
+.awsui_token-box-error_dm8gx_2vl9u_207 > .awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9):hover {
   color: var(--color-text-interactive-hover-7who0l, #16191f);
 }
 
-.awsui_token-box-warning_dm8gx_18mjd_218:not(#\9) {
+.awsui_token-box-warning_dm8gx_2vl9u_218:not(#\9) {
   border-color: var(--color-border-status-warning-gda7pe, #906806);
   border-inline-start-width: var(--border-invalid-width-hp6noi, 4px);
 }
-.awsui_token-box-warning_dm8gx_18mjd_218 > .awsui_dismiss-button_dm8gx_18mjd_139:not(#\9) {
+.awsui_token-box-warning_dm8gx_2vl9u_218 > .awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9) {
   color: var(--color-text-interactive-default-dt26aj, #545b64);
 }
-.awsui_token-box-warning_dm8gx_18mjd_218 > .awsui_dismiss-button_dm8gx_18mjd_139:not(#\9):hover {
+.awsui_token-box-warning_dm8gx_2vl9u_218 > .awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9):hover {
   color: var(--color-text-interactive-hover-7who0l, #16191f);
 }
 
-.awsui_token-box-disabled_dm8gx_18mjd_229.awsui_token-box-disabled_dm8gx_18mjd_229:not(#\9) {
+.awsui_token-box-readonly_dm8gx_2vl9u_229:not(#\9) {
+  border-color: var(--color-border-input-disabled-v8bsvq, #eaeded);
+  background-color: var(--color-background-container-content-il2pe5, #ffffff);
+  pointer-events: none;
+}
+.awsui_token-box-readonly_dm8gx_2vl9u_229 > .awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9) {
+  color: var(--color-text-button-inline-icon-disabled-m6lq35, #aab7b8);
+}
+.awsui_token-box-readonly_dm8gx_2vl9u_229 > .awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9):hover {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  cursor: initial;
+  color: var(--color-text-button-inline-icon-disabled-m6lq35, #aab7b8);
+}
+
+.awsui_token-box-disabled_dm8gx_2vl9u_243.awsui_token-box-disabled_dm8gx_2vl9u_243:not(#\9) {
   border-color: var(--color-border-control-disabled-4hz3mo, #d5dbdb);
   background-color: var(--color-background-container-content-il2pe5, #ffffff);
   color: var(--color-text-disabled-govsss, #aab7b8);
   pointer-events: none;
 }
-.awsui_token-box-disabled_dm8gx_18mjd_229.awsui_token-box-disabled_dm8gx_18mjd_229 > .awsui_dismiss-button_dm8gx_18mjd_139:not(#\9) {
+.awsui_token-box-disabled_dm8gx_2vl9u_243.awsui_token-box-disabled_dm8gx_2vl9u_243 > .awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9) {
   color: var(--color-text-button-inline-icon-disabled-m6lq35, #aab7b8);
 }
-.awsui_token-box-disabled_dm8gx_18mjd_229.awsui_token-box-disabled_dm8gx_18mjd_229 > .awsui_dismiss-button_dm8gx_18mjd_139:not(#\9):hover {
+.awsui_token-box-disabled_dm8gx_2vl9u_243.awsui_token-box-disabled_dm8gx_2vl9u_243 > .awsui_dismiss-button_dm8gx_2vl9u_139:not(#\9):hover {
   cursor: initial;
   color: var(--color-text-button-inline-icon-disabled-m6lq35, #aab7b8);
 }

package/lib/internal/template/token-group/styles.selectors.js

@@ -2,14 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_dm8gx_18mjd_101",
-  "has-items": "awsui_has-items_dm8gx_18mjd_135",
-  "no-padding": "awsui_no-padding_dm8gx_18mjd_135",
-  "dismiss-button": "awsui_dismiss-button_dm8gx_18mjd_139",
-  "token": "awsui_token_dm8gx_18mjd_181",
-  "token-box": "awsui_token-box_dm8gx_18mjd_188",
-  "token-box-error": "awsui_token-box-error_dm8gx_18mjd_207",
-  "token-box-warning": "awsui_token-box-warning_dm8gx_18mjd_218",
-  "token-box-disabled": "awsui_token-box-disabled_dm8gx_18mjd_229"
+  "root": "awsui_root_dm8gx_2vl9u_101",
+  "has-items": "awsui_has-items_dm8gx_2vl9u_135",
+  "no-padding": "awsui_no-padding_dm8gx_2vl9u_135",
+  "dismiss-button": "awsui_dismiss-button_dm8gx_2vl9u_139",
+  "token": "awsui_token_dm8gx_2vl9u_181",
+  "token-box": "awsui_token-box_dm8gx_2vl9u_188",
+  "token-box-error": "awsui_token-box-error_dm8gx_2vl9u_207",
+  "token-box-warning": "awsui_token-box-warning_dm8gx_2vl9u_218",
+  "token-box-readonly": "awsui_token-box-readonly_dm8gx_2vl9u_229",
+  "token-box-disabled": "awsui_token-box-disabled_dm8gx_2vl9u_243"
 };
   

package/lib/internal/template/token-group/token.d.ts

@@ -5,12 +5,13 @@ interface TokenProps {
     dismissLabel?: string;
     onDismiss?: () => void;
     disabled?: boolean;
+    readOnly?: boolean;
     errorText?: React.ReactNode;
     errorIconAriaLabel?: string;
     warningText?: React.ReactNode;
     warningIconAriaLabel?: string;
     className?: string;
 }
-export declare function Token({ ariaLabel, disabled, dismissLabel, onDismiss, children, errorText, warningText, errorIconAriaLabel, warningIconAriaLabel, ...restProps }: TokenProps): JSX.Element;
+export declare function Token({ ariaLabel, disabled, readOnly, dismissLabel, onDismiss, children, errorText, warningText, errorIconAriaLabel, warningIconAriaLabel, ...restProps }: TokenProps): JSX.Element;
 export {};
 //# sourceMappingURL=token.d.ts.map

package/lib/internal/template/token-group/token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token.d.ts","sourceRoot":"","sources":["../../../src/token-group/token.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,oBAAoB,EACpB,GAAG,SAAS,EACb,EAAE,UAAU,eAuCZ"}
+{"version":3,"file":"token.d.ts","sourceRoot":"","sources":["../../../src/token-group/token.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,oBAAoB,EACpB,GAAG,SAAS,EACb,EAAE,UAAU,eA0CZ"}

package/lib/internal/template/token-group/token.js

@@ -9,15 +9,15 @@ import { FormFieldError, FormFieldWarning } from '../form-field/internal';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { getBaseProps } from '../internal/base-component';
 export function Token(_a) {
-    var { ariaLabel, disabled, dismissLabel, onDismiss, children, errorText, warningText, errorIconAriaLabel, warningIconAriaLabel } = _a, restProps = __rest(_a, ["ariaLabel", "disabled", "dismissLabel", "onDismiss", "children", "errorText", "warningText", "errorIconAriaLabel", "warningIconAriaLabel"]);
+    var { ariaLabel, disabled, readOnly, dismissLabel, onDismiss, children, errorText, warningText, errorIconAriaLabel, warningIconAriaLabel } = _a, restProps = __rest(_a, ["ariaLabel", "disabled", "readOnly", "dismissLabel", "onDismiss", "children", "errorText", "warningText", "errorIconAriaLabel", "warningIconAriaLabel"]);
     const errorId = useUniqueId('error');
     const warningId = useUniqueId('warning');
     const baseProps = getBaseProps(restProps);
     const showWarning = warningText && !errorText;
     return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.token, baseProps.className), role: "group", "aria-label": ariaLabel, "aria-describedby": errorText ? errorId : warningText ? warningId : undefined, "aria-disabled": disabled }),
-        React.createElement("div", { className: clsx(styles['token-box'], disabled && styles['token-box-disabled'], errorText && styles['token-box-error'], showWarning && styles['token-box-warning']) },
+        React.createElement("div", { className: clsx(styles['token-box'], disabled && styles['token-box-disabled'], readOnly && styles['token-box-readonly'], errorText && styles['token-box-error'], showWarning && styles['token-box-warning']) },
             children,
-            onDismiss && React.createElement(DismissButton, { disabled: disabled, dismissLabel: dismissLabel, onDismiss: onDismiss })),
+            onDismiss && (React.createElement(DismissButton, { disabled: disabled, dismissLabel: dismissLabel, onDismiss: onDismiss, readOnly: readOnly }))),
         errorText && (React.createElement(FormFieldError, { id: errorId, errorIconAriaLabel: errorIconAriaLabel }, errorText)),
         showWarning && (React.createElement(FormFieldWarning, { id: warningId, warningIconAriaLabel: warningIconAriaLabel }, warningText))));
 }

package/lib/internal/template/token-group/token.js.map

@@ -1 +1 @@
-{"version":3,"file":"token.js","sourceRoot":"","sources":["../../../src/token-group/token.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAe1D,MAAM,UAAU,KAAK,CAAC,EAWT;QAXS,EACpB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,oBAAoB,OAET,EADR,SAAS,cAVQ,4IAWrB,CADa;IAEZ,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAE1C,MAAM,WAAW,GAAG,WAAW,IAAI,CAAC,SAAS,CAAC;IAE9C,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,EAClD,IAAI,EAAC,OAAO,gBACA,SAAS,sBACH,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBAC5D,QAAQ;QAEvB,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,WAAW,CAAC,EACnB,QAAQ,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACxC,SAAS,IAAI,MAAM,CAAC,iBAAiB,CAAC,EACtC,WAAW,IAAI,MAAM,CAAC,mBAAmB,CAAC,CAC3C;YAEA,QAAQ;YACR,SAAS,IAAI,oBAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,GAAI,CACjG;QACL,SAAS,IAAI,CACZ,oBAAC,cAAc,IAAC,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,IAChE,SAAS,CACK,CAClB;QACA,WAAW,IAAI,CACd,oBAAC,gBAAgB,IAAC,EAAE,EAAE,SAAS,EAAE,oBAAoB,EAAE,oBAAoB,IACxE,WAAW,CACK,CACpB,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport DismissButton from './dismiss-button';\nimport styles from './styles.css.js';\nimport { FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { getBaseProps } from '../internal/base-component';\n\ninterface TokenProps {\n  children: React.ReactNode;\n  ariaLabel?: string;\n  dismissLabel?: string;\n  onDismiss?: () => void;\n  disabled?: boolean;\n  errorText?: React.ReactNode;\n  errorIconAriaLabel?: string;\n  warningText?: React.ReactNode;\n  warningIconAriaLabel?: string;\n  className?: string;\n}\n\nexport function Token({\n  ariaLabel,\n  disabled,\n  dismissLabel,\n  onDismiss,\n  children,\n  errorText,\n  warningText,\n  errorIconAriaLabel,\n  warningIconAriaLabel,\n  ...restProps\n}: TokenProps) {\n  const errorId = useUniqueId('error');\n  const warningId = useUniqueId('warning');\n  const baseProps = getBaseProps(restProps);\n\n  const showWarning = warningText && !errorText;\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(styles.token, baseProps.className)}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-describedby={errorText ? errorId : warningText ? warningId : undefined}\n      aria-disabled={disabled}\n    >\n      <div\n        className={clsx(\n          styles['token-box'],\n          disabled && styles['token-box-disabled'],\n          errorText && styles['token-box-error'],\n          showWarning && styles['token-box-warning']\n        )}\n      >\n        {children}\n        {onDismiss && <DismissButton disabled={disabled} dismissLabel={dismissLabel} onDismiss={onDismiss} />}\n      </div>\n      {errorText && (\n        <FormFieldError id={errorId} errorIconAriaLabel={errorIconAriaLabel}>\n          {errorText}\n        </FormFieldError>\n      )}\n      {showWarning && (\n        <FormFieldWarning id={warningId} warningIconAriaLabel={warningIconAriaLabel}>\n          {warningText}\n        </FormFieldWarning>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"token.js","sourceRoot":"","sources":["../../../src/token-group/token.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAgB1D,MAAM,UAAU,KAAK,CAAC,EAYT;QAZS,EACpB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,oBAAoB,OAET,EADR,SAAS,cAXQ,wJAYrB,CADa;IAEZ,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAE1C,MAAM,WAAW,GAAG,WAAW,IAAI,CAAC,SAAS,CAAC;IAE9C,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,EAClD,IAAI,EAAC,OAAO,gBACA,SAAS,sBACH,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBAC5D,QAAQ;QAEvB,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,WAAW,CAAC,EACnB,QAAQ,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACxC,QAAQ,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACxC,SAAS,IAAI,MAAM,CAAC,iBAAiB,CAAC,EACtC,WAAW,IAAI,MAAM,CAAC,mBAAmB,CAAC,CAC3C;YAEA,QAAQ;YACR,SAAS,IAAI,CACZ,oBAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC5G,CACG;QACL,SAAS,IAAI,CACZ,oBAAC,cAAc,IAAC,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,IAChE,SAAS,CACK,CAClB;QACA,WAAW,IAAI,CACd,oBAAC,gBAAgB,IAAC,EAAE,EAAE,SAAS,EAAE,oBAAoB,EAAE,oBAAoB,IACxE,WAAW,CACK,CACpB,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport DismissButton from './dismiss-button';\nimport styles from './styles.css.js';\nimport { FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { getBaseProps } from '../internal/base-component';\n\ninterface TokenProps {\n  children: React.ReactNode;\n  ariaLabel?: string;\n  dismissLabel?: string;\n  onDismiss?: () => void;\n  disabled?: boolean;\n  readOnly?: boolean;\n  errorText?: React.ReactNode;\n  errorIconAriaLabel?: string;\n  warningText?: React.ReactNode;\n  warningIconAriaLabel?: string;\n  className?: string;\n}\n\nexport function Token({\n  ariaLabel,\n  disabled,\n  readOnly,\n  dismissLabel,\n  onDismiss,\n  children,\n  errorText,\n  warningText,\n  errorIconAriaLabel,\n  warningIconAriaLabel,\n  ...restProps\n}: TokenProps) {\n  const errorId = useUniqueId('error');\n  const warningId = useUniqueId('warning');\n  const baseProps = getBaseProps(restProps);\n\n  const showWarning = warningText && !errorText;\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(styles.token, baseProps.className)}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-describedby={errorText ? errorId : warningText ? warningId : undefined}\n      aria-disabled={disabled}\n    >\n      <div\n        className={clsx(\n          styles['token-box'],\n          disabled && styles['token-box-disabled'],\n          readOnly && styles['token-box-readonly'],\n          errorText && styles['token-box-error'],\n          showWarning && styles['token-box-warning']\n        )}\n      >\n        {children}\n        {onDismiss && (\n          <DismissButton disabled={disabled} dismissLabel={dismissLabel} onDismiss={onDismiss} readOnly={readOnly} />\n        )}\n      </div>\n      {errorText && (\n        <FormFieldError id={errorId} errorIconAriaLabel={errorIconAriaLabel}>\n          {errorText}\n        </FormFieldError>\n      )}\n      {showWarning && (\n        <FormFieldWarning id={warningId} warningIconAriaLabel={warningIconAriaLabel}>\n          {warningText}\n        </FormFieldWarning>\n      )}\n    </div>\n  );\n}\n"]}

package/lib/internal/template/top-navigation/1.0-beta/interfaces.d.ts

@@ -46,7 +46,7 @@ export interface TopNavigationProps extends BaseComponentProps {
      * ### menu-dropdown
      *
      * * `description` (string) - The description displayed inside the dropdown.
-     * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown).
+     * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown), with the exception of the checkbox item type.
      * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.
      */
     utilities?: ReadonlyArray<TopNavigationProps.Utility>;

package/lib/internal/template/top-navigation/1.0-beta/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/top-navigation/1.0-beta/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CancelableEventHandler } from '../../internal/events';\nimport { BaseComponentProps } from '../../internal/base-component';\nimport { IconProps } from '../../icon/interfaces';\nimport { ButtonDropdownProps } from '../../button-dropdown/interfaces';\n\nexport interface TopNavigationProps extends BaseComponentProps {\n  /**\n   * Properties describing the product identity. They are as follows:\n   *\n   * * `title` (string) - Specifies the title text.\n   * * `logo` ({ src: string, alt: string }) - Specifies the logo for the product.\n   * * `href` (string) - Specifies the `href` that the header links to.\n   * * `onFollow` (() => void) - Specifies the event handler called when the identity is clicked without any modifier keys.\n   */\n  identity: TopNavigationProps.Identity;\n\n  /**\n   * Use with an input or autosuggest control for a global search query.\n   */\n  search?: React.ReactNode;\n\n  /**\n   * A list of utility navigation elements.\n   * The supported utility types are: `button` and `menu-dropdown`.\n   *\n   * The following properties are supported across all utility types:\n   *\n   * * `type` (string) - The type of the utility. Can be `button` or `menu-dropdown`.\n   * * `text` (string) - Specifies the text shown in the top navigation or the title inside the dropdown if no explicit `title` property is set.\n   * * `title` (string) - The title displayed inside the dropdown.\n   * * `iconName` (string) - The name of an existing icon to display next to the utility.\n   * * `iconUrl` (string) - Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n   * * `iconAlt` (string) - Specifies alternate text for a custom icon provided using `iconUrl`. We recommend that you provide this for accessibility.\n   * * `iconSvg` (string) - Specifies the SVG of a custom icon.\n   * * `ariaLabel` (string) - Adds `aria-label` to the button or dropdown trigger. This is recommended for accessibility if a text is not provided.\n   * * `badge` (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n   * * `disableTextCollapse` (boolean) - Prevents the utility text from being hidden on smaller screens.\n   * * `disableUtilityCollapse` (boolean) - Prevents the utility from being moved to an overflow menu on smaller screens.\n   *\n   * ### button\n   *\n   * * `variant` ('primary-button' | 'link') - The visual appearance of the button. The default value is 'link'.\n   * * `href` (string) - Specifies the `href` for a link styled as a button.\n   * * `external` (boolean) - Marks the link as external by adding an icon after the text. When clicked, the link opens in a new tab.\n   * * `externalIconAriaLabel` (string) - Adds an `aria-label` for the external icon.\n   * * `onClick` (() => void) - Specifies the event handler called when the utility is clicked.\n   *\n   * ### menu-dropdown\n   *\n   * * `description` (string) - The description displayed inside the dropdown.\n   * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown).\n   * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.\n   */\n  utilities?: ReadonlyArray<TopNavigationProps.Utility>;\n\n  /**\n   * An object containing all the localized strings required by the component.\n   */\n  i18nStrings: TopNavigationProps.I18nStrings;\n}\n\nexport namespace TopNavigationProps {\n  export interface Identity {\n    title?: string;\n    logo?: Logo;\n    href: string;\n    onFollow?: CancelableEventHandler;\n  }\n\n  export interface Logo {\n    src: string;\n    alt?: string;\n  }\n\n  interface BaseUtility {\n    text?: string;\n    title?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconAlt?: string;\n    iconSvg?: React.ReactNode;\n    ariaLabel?: string;\n\n    badge?: boolean;\n    disableUtilityCollapse?: boolean;\n    disableTextCollapse?: boolean;\n  }\n\n  export interface MenuDropdownUtility extends BaseUtility {\n    type: 'menu-dropdown';\n    description?: string;\n    items: ButtonDropdownProps.Items;\n    onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  }\n\n  export interface ButtonUtility extends BaseUtility {\n    type: 'button';\n    variant?: 'primary-button' | 'link';\n    onClick?: CancelableEventHandler;\n    href?: string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n  }\n\n  export type Utility = MenuDropdownUtility | ButtonUtility;\n\n  export interface I18nStrings {\n    searchIconAriaLabel?: string;\n    searchDismissIconAriaLabel?: string;\n    overflowMenuTriggerText: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/top-navigation/1.0-beta/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CancelableEventHandler } from '../../internal/events';\nimport { BaseComponentProps } from '../../internal/base-component';\nimport { IconProps } from '../../icon/interfaces';\nimport { ButtonDropdownProps } from '../../button-dropdown/interfaces';\n\nexport interface TopNavigationProps extends BaseComponentProps {\n  /**\n   * Properties describing the product identity. They are as follows:\n   *\n   * * `title` (string) - Specifies the title text.\n   * * `logo` ({ src: string, alt: string }) - Specifies the logo for the product.\n   * * `href` (string) - Specifies the `href` that the header links to.\n   * * `onFollow` (() => void) - Specifies the event handler called when the identity is clicked without any modifier keys.\n   */\n  identity: TopNavigationProps.Identity;\n\n  /**\n   * Use with an input or autosuggest control for a global search query.\n   */\n  search?: React.ReactNode;\n\n  /**\n   * A list of utility navigation elements.\n   * The supported utility types are: `button` and `menu-dropdown`.\n   *\n   * The following properties are supported across all utility types:\n   *\n   * * `type` (string) - The type of the utility. Can be `button` or `menu-dropdown`.\n   * * `text` (string) - Specifies the text shown in the top navigation or the title inside the dropdown if no explicit `title` property is set.\n   * * `title` (string) - The title displayed inside the dropdown.\n   * * `iconName` (string) - The name of an existing icon to display next to the utility.\n   * * `iconUrl` (string) - Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n   * * `iconAlt` (string) - Specifies alternate text for a custom icon provided using `iconUrl`. We recommend that you provide this for accessibility.\n   * * `iconSvg` (string) - Specifies the SVG of a custom icon.\n   * * `ariaLabel` (string) - Adds `aria-label` to the button or dropdown trigger. This is recommended for accessibility if a text is not provided.\n   * * `badge` (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n   * * `disableTextCollapse` (boolean) - Prevents the utility text from being hidden on smaller screens.\n   * * `disableUtilityCollapse` (boolean) - Prevents the utility from being moved to an overflow menu on smaller screens.\n   *\n   * ### button\n   *\n   * * `variant` ('primary-button' | 'link') - The visual appearance of the button. The default value is 'link'.\n   * * `href` (string) - Specifies the `href` for a link styled as a button.\n   * * `external` (boolean) - Marks the link as external by adding an icon after the text. When clicked, the link opens in a new tab.\n   * * `externalIconAriaLabel` (string) - Adds an `aria-label` for the external icon.\n   * * `onClick` (() => void) - Specifies the event handler called when the utility is clicked.\n   *\n   * ### menu-dropdown\n   *\n   * * `description` (string) - The description displayed inside the dropdown.\n   * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown), with the exception of the checkbox item type.\n   * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.\n   */\n  utilities?: ReadonlyArray<TopNavigationProps.Utility>;\n\n  /**\n   * An object containing all the localized strings required by the component.\n   */\n  i18nStrings: TopNavigationProps.I18nStrings;\n}\n\nexport namespace TopNavigationProps {\n  export interface Identity {\n    title?: string;\n    logo?: Logo;\n    href: string;\n    onFollow?: CancelableEventHandler;\n  }\n\n  export interface Logo {\n    src: string;\n    alt?: string;\n  }\n\n  interface BaseUtility {\n    text?: string;\n    title?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconAlt?: string;\n    iconSvg?: React.ReactNode;\n    ariaLabel?: string;\n\n    badge?: boolean;\n    disableUtilityCollapse?: boolean;\n    disableTextCollapse?: boolean;\n  }\n\n  export interface MenuDropdownUtility extends BaseUtility {\n    type: 'menu-dropdown';\n    description?: string;\n    items: ButtonDropdownProps.Items;\n    onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  }\n\n  export interface ButtonUtility extends BaseUtility {\n    type: 'button';\n    variant?: 'primary-button' | 'link';\n    onClick?: CancelableEventHandler;\n    href?: string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n  }\n\n  export type Utility = MenuDropdownUtility | ButtonUtility;\n\n  export interface I18nStrings {\n    searchIconAriaLabel?: string;\n    searchDismissIconAriaLabel?: string;\n    overflowMenuTriggerText: string;\n  }\n}\n"]}

package/lib/internal/template/top-navigation/interfaces.d.ts

@@ -50,7 +50,7 @@ export interface TopNavigationProps extends BaseComponentProps {
      * ### menu-dropdown
      *
      * * `description` (string) - The description displayed inside the dropdown.
-     * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown).
+     * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown), with the exception of the checkbox item type.
      * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.
      * * `onItemFollow` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected without pressing modifier keys, and the item has an `href` set.
      * * `expandableGroups` (boolean) - Controls expandability of the item groups.