@cloudscape-design/components 3.0.1111 → 3.0.1113

package/test-utils/selectors/multiselect/index.d.ts

@@ -1,7 +1,7 @@
 import { ElementWrapper } from "@cloudscape-design/test-utils-core/selectors";
 import InputWrapper from '../input';
 import DropdownHostComponentWrapper from '../internal/dropdown-host';
-import TokenWrapper from '../token-group/token';
+import { TokenGroupItemWrapper } from '../token-group/token';
 export default class MultiselectWrapper extends DropdownHostComponentWrapper {
   static rootSelector: string;
   /**
@@ -33,11 +33,11 @@ export default class MultiselectWrapper extends DropdownHostComponentWrapper {
    *
    * @param tokenIndex 1-based index of the token to return
    */
-  findToken(tokenIndex: number): TokenWrapper;
+  findToken(tokenIndex: number): TokenGroupItemWrapper;
   /**
    * Returns a token toggle button.
    */
   findTokenToggle(): ElementWrapper;
-  findTokens(): import("@cloudscape-design/test-utils-core/selectors").MultiElementWrapper<TokenWrapper>;
+  findTokens(): import("@cloudscape-design/test-utils-core/selectors").MultiElementWrapper<TokenGroupItemWrapper>;
   findTrigger(): ElementWrapper;
 }

package/test-utils/selectors/token/index.d.ts

@@ -0,0 +1,26 @@
+import { ComponentWrapper, ElementWrapper } from "@cloudscape-design/test-utils-core/selectors";
+import OptionWrapper from '../internal/option';
+export default class TokenWrapper extends ComponentWrapper {
+  static rootSelector: string;
+  protected findOption(): OptionWrapper;
+  /**
+   * Returns the token label.
+   */
+  findLabel(): ElementWrapper;
+  /**
+   * Returns the token label tag.
+   */
+  findLabelTag(): ElementWrapper;
+  /**
+   * Returns the token description.
+   */
+  findDescription(): ElementWrapper;
+  /**
+   * Returns the token tags.
+   */
+  findTags(): import("@cloudscape-design/test-utils-core/selectors").MultiElementWrapper<ElementWrapper>;
+  /**
+   * Returns the token dismiss button.
+   */
+  findDismiss(): ElementWrapper;
+}

package/test-utils/selectors/token/index.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+const selectors_1 = require("@cloudscape-design/test-utils-core/selectors");
+const option_1 = require("../internal/option");
+const styles_selectors_js_1 = require("../../../token/test-classes/styles.selectors.js");
+class TokenWrapper extends selectors_1.ComponentWrapper {
+    findOption() {
+        return this.findComponent(`.${option_1.default.rootSelector}`, option_1.default);
+    }
+    /**
+     * Returns the token label.
+     */
+    findLabel() {
+        return this.findOption().findLabel();
+    }
+    /**
+     * Returns the token label tag.
+     */
+    findLabelTag() {
+        return this.findOption().findLabelTag();
+    }
+    /**
+     * Returns the token description.
+     */
+    findDescription() {
+        return this.findOption().findDescription();
+    }
+    /**
+     * Returns the token tags.
+     */
+    findTags() {
+        return this.findOption().findTags();
+    }
+    /**
+     * Returns the token dismiss button.
+     */
+    findDismiss() {
+        return this.findByClassName(styles_selectors_js_1.default['dismiss-button']);
+    }
+}
+exports.default = TokenWrapper;
+TokenWrapper.rootSelector = styles_selectors_js_1.default.root;
+//# sourceMappingURL=index.js.map

package/test-utils/selectors/token/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/token/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAAgG;AAChG,+CAA+C;AAC/C,yFAAwE;AACxE,MAAqB,YAAa,SAAQ,4BAAgB;IAE9C,UAAU;QAClB,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,gBAAa,CAAC,YAAY,EAAE,EAAE,gBAAa,CAAE,CAAC;IAC9E,CAAC;IAED;;OAEG;IACH,SAAS;QACP,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,SAAS,EAAE,CAAC;IACvC,CAAC;IAED;;OAEG;IACH,YAAY;QACV,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,YAAY,EAAE,CAAC;IAC1C,CAAC;IAED;;OAEG;IACH,eAAe;QACb,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,eAAe,EAAE,CAAC;IAC7C,CAAC;IAED;;OAEG;IACH,QAAQ;QACN,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC;IACtC,CAAC;IAED;;OAEG;IACH,WAAW;QACT,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC3D,CAAC;;AAvCH,+BAwCC;AAvCQ,yBAAY,GAAW,6BAAS,CAAC,IAAI,CAAC"}

package/test-utils/selectors/token-group/index.d.ts

@@ -1,14 +1,14 @@
 import { ComponentWrapper, ElementWrapper } from "@cloudscape-design/test-utils-core/selectors";
-import TokenWrapper from './token';
+import { TokenGroupItemWrapper } from './token';
 export default class TokenGroupWrapper extends ComponentWrapper {
   static rootSelector: string;
-  findTokens(): import("@cloudscape-design/test-utils-core/selectors").MultiElementWrapper<TokenWrapper>;
+  findTokens(): import("@cloudscape-design/test-utils-core/selectors").MultiElementWrapper<TokenGroupItemWrapper>;
   /**
    * Returns a token from the group for a given index.
    *
    * @param tokenIndex 1-based index of the token to return.
    */
-  findToken(tokenIndex: number): TokenWrapper;
+  findToken(tokenIndex: number): TokenGroupItemWrapper;
   /**
    * Returns the token toggle button.
    */

package/test-utils/selectors/token-group/index.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const selectors_1 = require("@cloudscape-design/test-utils-core/selectors");
 const token_1 = require("./token");
 const styles_selectors_js_1 = require("../../../internal/components/token-list/styles.selectors.js");
-const styles_selectors_js_2 = require("../../../token-group/styles.selectors.js");
+const styles_selectors_js_2 = require("../../../token/test-classes/styles.selectors.js");
+const styles_selectors_js_3 = require("../../../token-group/styles.selectors.js");
 class TokenGroupWrapper extends selectors_1.ComponentWrapper {
     findTokens() {
-        return this.findAllByClassName(token_1.default.rootSelector).map(tokenElement => new token_1.default(tokenElement.getElement()));
+        const tokens = this.findAll(`:is(.${styles_selectors_js_3.default.token}, .${styles_selectors_js_2.default.root})`);
+        return tokens.map(tokenElement => new token_1.TokenGroupItemWrapper(tokenElement.getElement()));
     }
     /**
      * Returns a token from the group for a given index.
@@ -16,7 +18,7 @@ class TokenGroupWrapper extends selectors_1.ComponentWrapper {
      * @param tokenIndex 1-based index of the token to return.
      */
     findToken(tokenIndex) {
-        return this.findComponent(`.${styles_selectors_js_1.default['list-item']}:nth-child(${tokenIndex}) > .${token_1.default.rootSelector}`, token_1.default);
+        return this.findComponent(`.${styles_selectors_js_1.default['list-item']}:nth-child(${tokenIndex}) > :is(.${styles_selectors_js_3.default.token}, .${styles_selectors_js_2.default.root})`, token_1.TokenGroupItemWrapper);
     }
     /**
      * Returns the token toggle button.
@@ -26,5 +28,5 @@ class TokenGroupWrapper extends selectors_1.ComponentWrapper {
     }
 }
 exports.default = TokenGroupWrapper;
-TokenGroupWrapper.rootSelector = styles_selectors_js_2.default.root;
+TokenGroupWrapper.rootSelector = styles_selectors_js_3.default.root;
 //# sourceMappingURL=index.js.map

package/test-utils/selectors/token-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/token-group/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAAgG;AAChG,mCAAmC;AACnC,qGAA6F;AAC7F,kFAAiE;AACjE,MAAqB,iBAAkB,SAAQ,4BAAgB;IAE7D,UAAU;QACR,OAAO,IAAI,CAAC,kBAAkB,CAAC,eAAY,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,eAAY,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IAC7H,CAAC;IAED;;;;OAIG;IACH,SAAS,CAAC,UAAkB;QAC1B,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,6BAAkB,CAAC,WAAW,CAAC,cAAc,UAAU,QAAQ,eAAY,CAAC,YAAY,EAAE,EAAE,eAAY,CAAC,CAAC;IAC1I,CAAC;IAED;;OAEG;IACH,eAAe;QACb,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAkB,CAAC,MAAM,CAAC,CAAC;IACzD,CAAC;;AApBH,oCAqBC;AApBQ,8BAAY,GAAW,6BAAS,CAAC,IAAI,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/token-group/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAAgG;AAChG,mCAAgD;AAChD,qGAA6F;AAC7F,yFAAgF;AAChF,kFAAiE;AACjE,MAAqB,iBAAkB,SAAQ,4BAAgB;IAE7D,UAAU;QACR,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,6BAAS,CAAC,KAAK,MAAM,6BAAiB,CAAC,IAAI,GAAG,CAAC,CAAC;QACpF,OAAO,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,6BAAqB,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IAC1F,CAAC;IAED;;;;OAIG;IACH,SAAS,CAAC,UAAkB;QAC1B,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,6BAAkB,CAAC,WAAW,CAAC,cAAc,UAAU,YAAY,6BAAS,CAAC,KAAK,MAAM,6BAAiB,CAAC,IAAI,GAAG,EAAE,6BAAqB,CAAC,CAAC;IAC1K,CAAC;IAED;;OAEG;IACH,eAAe;QACb,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAkB,CAAC,MAAM,CAAC,CAAC;IACzD,CAAC;;AArBH,oCAsBC;AArBQ,8BAAY,GAAW,6BAAS,CAAC,IAAI,CAAC"}

package/test-utils/selectors/token-group/token.d.ts

@@ -1,7 +1,6 @@
 import { ComponentWrapper, ElementWrapper } from "@cloudscape-design/test-utils-core/selectors";
 import OptionWrapper from '../internal/option';
-export default class TokenWrapper extends ComponentWrapper {
-  static rootSelector: string;
+export declare class TokenGroupItemWrapper extends ComponentWrapper {
   findOption(): OptionWrapper;
   findLabel(): ElementWrapper;
   findDismiss(): ElementWrapper;

package/test-utils/selectors/token-group/token.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenGroupItemWrapper = void 0;
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 const selectors_1 = require("@cloudscape-design/test-utils-core/selectors");
 const option_1 = require("../internal/option");
-const styles_selectors_js_1 = require("../../../token-group/styles.selectors.js");
-class TokenWrapper extends selectors_1.ComponentWrapper {
+const styles_selectors_js_1 = require("../../../token/test-classes/styles.selectors.js");
+const styles_selectors_js_2 = require("../../../token-group/styles.selectors.js");
+class TokenGroupItemWrapper extends selectors_1.ComponentWrapper {
     findOption() {
         return this.findComponent(`.${option_1.default.rootSelector}`, option_1.default);
     }
@@ -13,9 +15,10 @@ class TokenWrapper extends selectors_1.ComponentWrapper {
         return this.findOption().findLabel();
     }
     findDismiss() {
-        return this.findByClassName(styles_selectors_js_1.default['dismiss-button']);
+        const selector = styles_selectors_js_1.default['dismiss-button'];
+        const legacySelector = styles_selectors_js_2.default['dismiss-button'];
+        return this.find(`:is(.${legacySelector}, .${selector})`);
     }
 }
-exports.default = TokenWrapper;
-TokenWrapper.rootSelector = styles_selectors_js_1.default.token;
+exports.TokenGroupItemWrapper = TokenGroupItemWrapper;
 //# sourceMappingURL=token.js.map

package/test-utils/selectors/token-group/token.js.map

@@ -1 +1 @@
-{"version":3,"file":"token.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/token-group/token.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAAgG;AAChG,+CAA+C;AAC/C,kFAAiE;AACjE,MAAqB,YAAa,SAAQ,4BAAgB;IAExD,UAAU;QACR,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,gBAAa,CAAC,YAAY,EAAE,EAAE,gBAAa,CAAE,CAAC;IAC9E,CAAC;IACD,SAAS;QACP,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,SAAS,EAAE,CAAC;IACvC,CAAC;IACD,WAAW;QACT,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAS,CAAC,gBAAgB,CAAC,CAAE,CAAC;IAC5D,CAAC;;AAVH,+BAWC;AAVQ,yBAAY,GAAW,6BAAS,CAAC,KAAK,CAAC"}
+{"version":3,"file":"token.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/token-group/token.ts"],"names":[],"mappings":";;;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAAgG;AAChG,+CAA+C;AAC/C,yFAAwE;AACxE,kFAAuE;AACvE,MAAa,qBAAsB,SAAQ,4BAAgB;IACzD,UAAU;QACR,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,gBAAa,CAAC,YAAY,EAAE,EAAE,gBAAa,CAAE,CAAC;IAC9E,CAAC;IACD,SAAS;QACP,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,SAAS,EAAE,CAAC;IACvC,CAAC;IACD,WAAW;QACT,MAAM,QAAQ,GAAG,6BAAS,CAAC,gBAAgB,CAAC,CAAC;QAC7C,MAAM,cAAc,GAAG,6BAAe,CAAC,gBAAgB,CAAC,CAAC;QACzD,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,cAAc,MAAM,QAAQ,GAAG,CAAE,CAAC;IAC7D,CAAC;CACF;AAZD,sDAYC"}

package/token/analytics-metadata/interfaces.d.ts

@@ -0,0 +1,12 @@
+import { LabelIdentifier } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+export interface GeneratedAnalyticsMetadataTokenDismiss {
+  action: 'dismiss';
+  detail: {
+    label: LabelIdentifier;
+    position?: string;
+  };
+}
+export interface GeneratedAnalyticsMetadataTokenComponent {
+  name: 'awsui.Token';
+  label: string;
+}

package/token/analytics-metadata/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/token/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,kEAAkE,CAAC;AAEnG,MAAM,WAAW,sCAAsC;IACrD,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE;QACN,KAAK,EAAE,eAAe,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,MAAM,WAAW,wCAAwC;IACvD,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf"}

package/token/analytics-metadata/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/token/analytics-metadata/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/token/analytics-metadata/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { LabelIdentifier } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nexport interface GeneratedAnalyticsMetadataTokenDismiss {\n  action: 'dismiss';\n  detail: {\n    label: LabelIdentifier;\n    position?: string;\n  };\n}\n\nexport interface GeneratedAnalyticsMetadataTokenComponent {\n  name: 'awsui.Token';\n  label: string;\n}\n"]}

package/token/analytics-metadata/styles.css.js

@@ -0,0 +1,6 @@
+
+    import './styles.scoped.css';
+    export default {
+  "token": "awsui_token_v05f6_c8hk2_5"
+};
+  

package/token/analytics-metadata/styles.scoped.css

@@ -0,0 +1,7 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_token_v05f6_c8hk2_5:not(#\9) {
+  /* used in analytics metadata */
+}

package/token/analytics-metadata/styles.selectors.js

@@ -0,0 +1,7 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "token": "awsui_token_v05f6_c8hk2_5"
+};
+  

package/{token-group → token}/dismiss-button.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import { NonCancelableEventHandler } from '../internal/events';
 interface DismissButtonProps {
   disabled?: boolean;
   readOnly?: boolean;
-  onDismiss?: () => void;
+  onDismiss?: NonCancelableEventHandler;
   dismissLabel?: string;
+  inline?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<DismissButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/token/dismiss-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dismiss-button.d.ts","sourceRoot":"","sources":["../../../src/token/dismiss-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAM/C,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAMvF,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;;AAED,wBAAyC"}

package/{token-group → token}/dismiss-button.js

@@ -1,22 +1,25 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { forwardRef } from 'react';
+import clsx from 'clsx';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import InternalIcon from '../icon/internal';
+import { fireNonCancelableEvent } from '../internal/events';
 import styles from './styles.css.js';
+import testUtilStyles from './test-classes/styles.css.js';
 export default forwardRef(DismissButton);
-function DismissButton({ disabled, dismissLabel, onDismiss, readOnly }, ref) {
+function DismissButton({ disabled, dismissLabel, onDismiss, readOnly, inline }, ref) {
     const analyticsMetadata = {
         action: 'dismiss',
         detail: {
             label: { root: 'self' },
         },
     };
-    return (React.createElement("button", Object.assign({ ref: ref, type: "button", className: styles['dismiss-button'], "aria-disabled": disabled || readOnly ? true : undefined, onClick: () => {
+    return (React.createElement("button", Object.assign({ ref: ref, type: "button", className: clsx(styles['dismiss-button'], testUtilStyles['dismiss-button'], inline && styles['dismiss-button-inline']), "aria-disabled": disabled || readOnly ? true : undefined, onClick: () => {
             if (disabled || readOnly || !onDismiss) {
                 return;
             }
-            onDismiss();
+            fireNonCancelableEvent(onDismiss);
         }, "aria-label": dismissLabel }, (disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))),
         React.createElement(InternalIcon, { name: "close" })));
 }

package/token/dismiss-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dismiss-button.js","sourceRoot":"","sources":["../../../src/token/dismiss-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAC/C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AAGvF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAU1D,eAAe,UAAU,CAAC,aAAa,CAAC,CAAC;AAEzC,SAAS,aAAa,CACpB,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAsB,EAC3E,GAA2B;IAE3B,MAAM,iBAAiB,GAA2C;QAChE,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE;YACN,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB;KACF,CAAC;IACF,OAAO,CACL,8CACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,cAAc,CAAC,gBAAgB,CAAC,EAChC,MAAM,IAAI,MAAM,CAAC,uBAAuB,CAAC,CAC1C,mBACc,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,sBAAsB,CAAC,SAAS,CAAC,CAAC;QACpC,CAAC,gBACW,YAAY,IACpB,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QAElF,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 clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../icon/internal';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { GeneratedAnalyticsMetadataTokenDismiss } from './analytics-metadata/interfaces';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface DismissButtonProps {\n  disabled?: boolean;\n  readOnly?: boolean;\n  onDismiss?: NonCancelableEventHandler;\n  dismissLabel?: string;\n  inline?: boolean;\n}\n\nexport default forwardRef(DismissButton);\n\nfunction DismissButton(\n  { disabled, dismissLabel, onDismiss, readOnly, inline }: DismissButtonProps,\n  ref: Ref<HTMLButtonElement>\n) {\n  const analyticsMetadata: GeneratedAnalyticsMetadataTokenDismiss = {\n    action: 'dismiss',\n    detail: {\n      label: { root: 'self' },\n    },\n  };\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={clsx(\n        styles['dismiss-button'],\n        testUtilStyles['dismiss-button'],\n        inline && styles['dismiss-button-inline']\n      )}\n      aria-disabled={disabled || readOnly ? true : undefined}\n      onClick={() => {\n        if (disabled || readOnly || !onDismiss) {\n          return;\n        }\n\n        fireNonCancelableEvent(onDismiss);\n      }}\n      aria-label={dismissLabel}\n      {...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))}\n    >\n      <InternalIcon name=\"close\" />\n    </button>\n  );\n}\n"]}

package/token/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TokenProps } from './interfaces';
+export { TokenProps };
+export default function Token(props: TokenProps): JSX.Element;

package/token/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/token/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,UAAU,eAe9C"}

package/token/index.js

@@ -0,0 +1,19 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+import React from 'react';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import InternalToken from './internal';
+import analyticsSelectors from './analytics-metadata/styles.css.js';
+export default function Token(props) {
+    const baseComponentProps = useBaseComponent('Token');
+    const componentAnalyticsMetadata = {
+        name: 'awsui.Token',
+        label: `.${analyticsSelectors.token}`,
+    };
+    return (React.createElement(InternalToken, Object.assign({}, props, baseComponentProps, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }))));
+}
+applyDisplayName(Token, 'Token');
+//# sourceMappingURL=index.js.map

package/token/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/token/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGxE,OAAO,aAAa,MAAM,YAAY,CAAC;AAEvC,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC7C,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAErD,MAAM,0BAA0B,GAA6C;QAC3E,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,IAAI,kBAAkB,CAAC,KAAK,EAAE;KACtC,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,EACL,kBAAkB,EAClB,6BAA6B,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC,EAC5E,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataTokenComponent } from './analytics-metadata/interfaces';\nimport { TokenProps } from './interfaces';\nimport InternalToken from './internal';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\n\nexport { TokenProps };\n\nexport default function Token(props: TokenProps) {\n  const baseComponentProps = useBaseComponent('Token');\n\n  const componentAnalyticsMetadata: GeneratedAnalyticsMetadataTokenComponent = {\n    name: 'awsui.Token',\n    label: `.${analyticsSelectors.token}`,\n  };\n\n  return (\n    <InternalToken\n      {...props}\n      {...baseComponentProps}\n      {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n    />\n  );\n}\n\napplyDisplayName(Token, 'Token');\n"]}

package/token/interfaces.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
+export interface TokenProps extends BaseComponentProps {
+  /** Slot for the label of the token as text or an element.
+   *
+   * For `variant="inline"`, only plain text is supported, for example, strings or numbers.
+   */
+  label: React.ReactNode;
+  /**
+   * Adds an `aria-label` to the token.
+   *
+   * Use this if the label is not plain text.
+   */
+  ariaLabel?: string;
+  /** A label tag that provides additional guidance, shown next to the label. */
+  labelTag?: string;
+  /** Further information about the token that appears below the label. */
+  description?: string;
+  /** A list of tags giving further guidance about the token. */
+  tags?: ReadonlyArray<string>;
+  /** An icon at the start of the token.
+   *
+   * When `variant="normal"`, if a description or tags are set, icon size should be `normal`.
+   *
+   * When `variant="inline"`, icon size should be `small`.
+   */
+  icon?: React.ReactNode;
+  /**
+   * Specifies the token's visual style and functionality.
+   *
+   * For `inline` only label, icon and dismiss button are displayed.
+   *
+   * Defaults to `normal` if not specified.
+   */
+  variant?: TokenProps.Variant;
+  /** Determines whether the token is disabled. */
+  disabled?: boolean;
+  /**
+   * Specifies if the control is read-only. A read-only control is still focusable.
+   */
+  readOnly?: boolean;
+  /** Adds an `aria-label` to the dismiss button. */
+  dismissLabel?: string;
+  /**
+   * Called when the user clicks on the dismiss button.
+   *
+   * Make sure that you add a listener to this event to update your application state.
+   */
+  onDismiss?: NonCancelableEventHandler;
+  /**
+   * Content to display in the tooltip when `variant="inline"`. The tooltip appears when the token label is truncated due to insufficient space.
+   *
+   * Only applies to plain text labels.
+   */
+  tooltipContent?: string;
+}
+export declare namespace TokenProps {
+  type Variant = 'normal' | 'inline';
+}

package/token/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/token/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAE7B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC;IAE7B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC;IAEtC;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;CAC3C"}

package/token/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/token/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/token/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';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TokenProps extends BaseComponentProps {\n  /** Slot for the label of the token as text or an element.\n   *\n   * For `variant=\"inline\"`, only plain text is supported, for example, strings or numbers.\n   */\n  label: React.ReactNode;\n\n  /**\n   * Adds an `aria-label` to the token.\n   *\n   * Use this if the label is not plain text.\n   */\n  ariaLabel?: string;\n\n  /** A label tag that provides additional guidance, shown next to the label. */\n  labelTag?: string;\n\n  /** Further information about the token that appears below the label. */\n  description?: string;\n\n  /** A list of tags giving further guidance about the token. */\n  tags?: ReadonlyArray<string>;\n\n  /** An icon at the start of the token.\n   *\n   * When `variant=\"normal\"`, if a description or tags are set, icon size should be `normal`.\n   *\n   * When `variant=\"inline\"`, icon size should be `small`.\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Specifies the token's visual style and functionality.\n   *\n   * For `inline` only label, icon and dismiss button are displayed.\n   *\n   * Defaults to `normal` if not specified.\n   */\n  variant?: TokenProps.Variant;\n\n  /** Determines whether the token is disabled. */\n  disabled?: boolean;\n\n  /**\n   * Specifies if the control is read-only. A read-only control is still focusable.\n   */\n  readOnly?: boolean;\n\n  /** Adds an `aria-label` to the dismiss button. */\n  dismissLabel?: string;\n\n  /**\n   * Called when the user clicks on the dismiss button.\n   *\n   * Make sure that you add a listener to this event to update your application state.\n   */\n  onDismiss?: NonCancelableEventHandler;\n\n  /**\n   * Content to display in the tooltip when `variant=\"inline\"`. The tooltip appears when the token label is truncated due to insufficient space.\n   *\n   * Only applies to plain text labels.\n   */\n  tooltipContent?: string;\n}\n\nexport namespace TokenProps {\n  export type Variant = 'normal' | 'inline';\n}\n"]}

package/token/internal.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { TokenProps } from './interfaces';
+type InternalTokenProps = TokenProps & InternalBaseComponentProps & {
+  role?: string;
+  disableInnerPadding?: boolean;
+};
+declare function InternalToken({
+  label,
+  ariaLabel,
+  labelTag,
+  description,
+  variant,
+  disabled,
+  readOnly,
+  icon,
+  tags,
+  dismissLabel,
+  onDismiss,
+  tooltipContent,
+  role,
+  disableInnerPadding,
+  __internalRootRef,
+  ...restProps
+}: InternalTokenProps): JSX.Element;
+export default InternalToken;

package/token/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/token/internal.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,KAAK,kBAAkB,GAAG,UAAU,GAClC,0BAA0B,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEJ,iBAAS,aAAa,CAAC,EAErB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,OAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,cAAc,EAGd,IAAI,EACJ,mBAAmB,EAGnB,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,kBAAkB,eA4HpB;AAED,eAAe,aAAa,CAAC"}

package/token/internal.js

@@ -0,0 +1,77 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { __rest } from "tslib";
+import React, { useRef, useState } from 'react';
+import clsx from 'clsx';
+import { useResizeObserver, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { getBaseProps } from '../internal/base-component';
+import Option from '../internal/components/option';
+import Tooltip from '../internal/components/tooltip';
+import LiveRegion from '../live-region/internal';
+import DismissButton from './dismiss-button';
+import analyticsSelectors from './analytics-metadata/styles.css.js';
+import styles from './styles.css.js';
+import testUtilStyles from './test-classes/styles.css.js';
+function InternalToken(_a) {
+    var { 
+    // External
+    label, ariaLabel, labelTag, description, variant = 'normal', disabled, readOnly, icon, tags, dismissLabel, onDismiss, tooltipContent, 
+    // Internal
+    role, disableInnerPadding, 
+    // Base
+    __internalRootRef } = _a, restProps = __rest(_a, ["label", "ariaLabel", "labelTag", "description", "variant", "disabled", "readOnly", "icon", "tags", "dismissLabel", "onDismiss", "tooltipContent", "role", "disableInnerPadding", "__internalRootRef"]);
+    const baseProps = getBaseProps(restProps);
+    const labelContainerRef = useRef(null);
+    const labelRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [isEllipsisActive, setIsEllipsisActive] = useState(false);
+    const isInline = variant === 'inline';
+    const ariaLabelledbyId = useUniqueId();
+    const isLabelOverflowing = () => {
+        const labelContent = labelRef.current;
+        const labelContainer = labelContainerRef.current;
+        if (labelContent && labelContainer) {
+            return labelContent.offsetWidth > labelContainer.offsetWidth;
+        }
+    };
+    useResizeObserver(labelContainerRef, () => {
+        var _a;
+        if (isInline) {
+            setIsEllipsisActive((_a = isLabelOverflowing()) !== null && _a !== void 0 ? _a : false);
+        }
+    });
+    const buildOptionDefinition = () => {
+        const isLabelStringOrNumber = typeof label === 'string' || typeof label === 'number';
+        const labelObject = isLabelStringOrNumber ? { label: String(label) } : { labelContent: label };
+        if (isInline) {
+            if (!isLabelStringOrNumber) {
+                warnOnce('Label', `Only plain text (strings or numbers) are supported when variant="inline".`);
+            }
+            return Object.assign(Object.assign({}, labelObject), { disabled, __customIcon: icon && React.createElement("span", { className: clsx(styles.icon, styles['icon-inline']) }, icon) });
+        }
+        else {
+            return Object.assign(Object.assign({}, labelObject), { disabled,
+                labelTag,
+                description,
+                tags, __customIcon: icon && React.createElement("span", { className: styles.icon }, icon) });
+        }
+    };
+    return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(styles.root, testUtilStyles.root, !isInline ? styles['token-normal'] : styles['token-inline'], analyticsSelectors.token, baseProps.className), "aria-label": ariaLabel, "aria-labelledby": !ariaLabel ? ariaLabelledbyId : undefined, "aria-disabled": !!disabled, role: role !== null && role !== void 0 ? role : 'group', onFocus: () => {
+            setShowTooltip(true);
+        }, onBlur: () => {
+            setShowTooltip(false);
+        }, onMouseEnter: () => {
+            setShowTooltip(true);
+        }, onMouseLeave: () => {
+            setShowTooltip(false);
+        }, tabIndex: !!tooltipContent && isInline && isEllipsisActive ? 0 : undefined }),
+        React.createElement("div", { className: clsx(!isInline ? styles['token-box'] : styles['token-box-inline'], disabled && styles['token-box-disabled'], readOnly && styles['token-box-readonly'], !isInline && !onDismiss && styles['token-box-without-dismiss'], disableInnerPadding && styles['disable-padding']) },
+            React.createElement(Option, { className: clsx(isInline && styles['token-option-inline']), triggerVariant: isInline, option: buildOptionDefinition(), disableTitleTooltip: !!tooltipContent, labelContainerRef: labelContainerRef, labelRef: labelRef, labelId: ariaLabelledbyId }),
+            onDismiss && (React.createElement(DismissButton, { disabled: disabled, dismissLabel: dismissLabel, onDismiss: onDismiss, readOnly: readOnly, inline: isInline }))),
+        !!tooltipContent && isInline && isEllipsisActive && showTooltip && (React.createElement(Tooltip, { "data-testid": "token-tooltip", trackRef: labelContainerRef, value: React.createElement(LiveRegion, null,
+                React.createElement("span", { "data-testid": "tooltip-live-region-content" }, tooltipContent)), size: "medium", onDismiss: () => {
+                setShowTooltip(false);
+            } }))));
+}
+export default InternalToken;
+//# sourceMappingURL=internal.js.map

package/token/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/token/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport Option from '../internal/components/option';\nimport Tooltip from '../internal/components/tooltip';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../live-region/internal';\nimport DismissButton from './dismiss-button';\nimport { TokenProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ntype InternalTokenProps = TokenProps &\n  InternalBaseComponentProps & {\n    role?: string;\n    disableInnerPadding?: boolean;\n  };\n\nfunction InternalToken({\n  // External\n  label,\n  ariaLabel,\n  labelTag,\n  description,\n  variant = 'normal',\n  disabled,\n  readOnly,\n  icon,\n  tags,\n  dismissLabel,\n  onDismiss,\n  tooltipContent,\n\n  // Internal\n  role,\n  disableInnerPadding,\n\n  // Base\n  __internalRootRef,\n  ...restProps\n}: InternalTokenProps) {\n  const baseProps = getBaseProps(restProps);\n  const labelContainerRef = useRef<HTMLSpanElement>(null);\n  const labelRef = useRef<HTMLSpanElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [isEllipsisActive, setIsEllipsisActive] = useState(false);\n  const isInline = variant === 'inline';\n  const ariaLabelledbyId = useUniqueId();\n\n  const isLabelOverflowing = () => {\n    const labelContent = labelRef.current;\n    const labelContainer = labelContainerRef.current;\n\n    if (labelContent && labelContainer) {\n      return labelContent.offsetWidth > labelContainer.offsetWidth;\n    }\n  };\n\n  useResizeObserver(labelContainerRef, () => {\n    if (isInline) {\n      setIsEllipsisActive(isLabelOverflowing() ?? false);\n    }\n  });\n\n  const buildOptionDefinition = () => {\n    const isLabelStringOrNumber = typeof label === 'string' || typeof label === 'number';\n    const labelObject = isLabelStringOrNumber ? { label: String(label) } : { labelContent: label };\n\n    if (isInline) {\n      if (!isLabelStringOrNumber) {\n        warnOnce('Label', `Only plain text (strings or numbers) are supported when variant=\"inline\".`);\n      }\n\n      return {\n        ...labelObject,\n        disabled,\n        __customIcon: icon && <span className={clsx(styles.icon, styles['icon-inline'])}>{icon}</span>,\n      };\n    } else {\n      return {\n        ...labelObject,\n        disabled,\n        labelTag,\n        description,\n        tags,\n        __customIcon: icon && <span className={styles.icon}>{icon}</span>,\n      };\n    }\n  };\n\n  return (\n    <div\n      {...baseProps}\n      ref={__internalRootRef}\n      className={clsx(\n        styles.root,\n        testUtilStyles.root,\n        !isInline ? styles['token-normal'] : styles['token-inline'],\n        analyticsSelectors.token,\n        baseProps.className\n      )}\n      aria-label={ariaLabel}\n      aria-labelledby={!ariaLabel ? ariaLabelledbyId : undefined}\n      aria-disabled={!!disabled}\n      role={role ?? 'group'}\n      onFocus={() => {\n        setShowTooltip(true);\n      }}\n      onBlur={() => {\n        setShowTooltip(false);\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n      }}\n      tabIndex={!!tooltipContent && isInline && isEllipsisActive ? 0 : undefined}\n    >\n      <div\n        className={clsx(\n          !isInline ? styles['token-box'] : styles['token-box-inline'],\n          disabled && styles['token-box-disabled'],\n          readOnly && styles['token-box-readonly'],\n          !isInline && !onDismiss && styles['token-box-without-dismiss'],\n          disableInnerPadding && styles['disable-padding']\n        )}\n      >\n        <Option\n          className={clsx(isInline && styles['token-option-inline'])}\n          triggerVariant={isInline}\n          option={buildOptionDefinition()}\n          disableTitleTooltip={!!tooltipContent}\n          labelContainerRef={labelContainerRef}\n          labelRef={labelRef}\n          labelId={ariaLabelledbyId}\n        />\n        {onDismiss && (\n          <DismissButton\n            disabled={disabled}\n            dismissLabel={dismissLabel}\n            onDismiss={onDismiss}\n            readOnly={readOnly}\n            inline={isInline}\n          />\n        )}\n      </div>\n      {!!tooltipContent && isInline && isEllipsisActive && showTooltip && (\n        <Tooltip\n          data-testid=\"token-tooltip\"\n          trackRef={labelContainerRef}\n          value={\n            <LiveRegion>\n              <span data-testid=\"tooltip-live-region-content\">{tooltipContent}</span>\n            </LiveRegion>\n          }\n          size=\"medium\"\n          onDismiss={() => {\n            setShowTooltip(false);\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default InternalToken;\n"]}

package/token/styles.css.js

@@ -0,0 +1,19 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_1i2wg_16pp7_161",
+  "dismiss-button": "awsui_dismiss-button_1i2wg_16pp7_193",
+  "dismiss-button-inline": "awsui_dismiss-button-inline_1i2wg_16pp7_233",
+  "icon": "awsui_icon_1i2wg_16pp7_240",
+  "icon-inline": "awsui_icon-inline_1i2wg_16pp7_246",
+  "token-normal": "awsui_token-normal_1i2wg_16pp7_251",
+  "token-inline": "awsui_token-inline_1i2wg_16pp7_258",
+  "token-option-inline": "awsui_token-option-inline_1i2wg_16pp7_284",
+  "token-box": "awsui_token-box_1i2wg_16pp7_288",
+  "token-box-without-dismiss": "awsui_token-box-without-dismiss_1i2wg_16pp7_307",
+  "token-box-inline": "awsui_token-box-inline_1i2wg_16pp7_311",
+  "disable-padding": "awsui_disable-padding_1i2wg_16pp7_331",
+  "token-box-readonly": "awsui_token-box-readonly_1i2wg_16pp7_338",
+  "token-box-disabled": "awsui_token-box-disabled_1i2wg_16pp7_339"
+};
+