@cloudscape-design/components 3.0.671 → 3.0.672

package/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_1tp36_101:not(#\9) {
+.awsui_root_dm8gx_r6wxu_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_1tp36_101.awsui_has-items_dm8gx_1tp36_135:not(#\9):not(.awsui_no-padding_dm8gx_1tp36_135) {
+.awsui_root_dm8gx_r6wxu_101.awsui_has-items_dm8gx_r6wxu_135:not(#\9):not(.awsui_no-padding_dm8gx_r6wxu_135) {
   padding-block-start: var(--space-xs-zb16t3, 8px);
 }
 
-.awsui_dismiss-button_dm8gx_1tp36_139:not(#\9) {
+.awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9) {
   margin-block-start: -1px;
   margin-block-end: 0;
   margin-inline-start: var(--space-xxs-p8yyaw, 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-s3yux9, #0972d3);
   background-color: transparent;
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_1tp36_139:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_1tp36_139:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_1tp36_139:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -170,23 +170,23 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_1tp36_139:not(#\
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_dismiss-button_dm8gx_1tp36_139:not(#\9):focus {
+.awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_dismiss-button_dm8gx_1tp36_139:not(#\9):hover {
+.awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-button-inline-icon-hover-my2daf, #033160);
 }
 
-.awsui_token_dm8gx_1tp36_181:not(#\9) {
+.awsui_token_dm8gx_r6wxu_181:not(#\9) {
   block-size: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--space-xxs-p8yyaw, 4px);
 }
 
-.awsui_token-box_dm8gx_1tp36_188:not(#\9) {
+.awsui_token-box_dm8gx_r6wxu_188:not(#\9) {
   block-size: 100%;
   border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-item-selected-k00wlz, #0972d3);
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-item-selected-k00wlz, #0972d3);
@@ -205,38 +205,52 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_1tp36_139:not(#\
   box-sizing: border-box;
 }
 
-.awsui_token-box-error_dm8gx_1tp36_207:not(#\9) {
+.awsui_token-box-error_dm8gx_r6wxu_207:not(#\9) {
   border-color: var(--color-border-status-error-dj6icm, #d91515);
   border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
 }
-.awsui_token-box-error_dm8gx_1tp36_207 > .awsui_dismiss-button_dm8gx_1tp36_139:not(#\9) {
+.awsui_token-box-error_dm8gx_r6wxu_207 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9) {
   color: var(--color-text-interactive-default-lnx6lk, #414d5c);
 }
-.awsui_token-box-error_dm8gx_1tp36_207 > .awsui_dismiss-button_dm8gx_1tp36_139:not(#\9):hover {
+.awsui_token-box-error_dm8gx_r6wxu_207 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):hover {
   color: var(--color-text-interactive-hover-mj8add, #000716);
 }
 
-.awsui_token-box-warning_dm8gx_1tp36_218:not(#\9) {
+.awsui_token-box-warning_dm8gx_r6wxu_218:not(#\9) {
   border-color: var(--color-border-status-warning-52glov, #8d6605);
   border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
 }
-.awsui_token-box-warning_dm8gx_1tp36_218 > .awsui_dismiss-button_dm8gx_1tp36_139:not(#\9) {
+.awsui_token-box-warning_dm8gx_r6wxu_218 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9) {
   color: var(--color-text-interactive-default-lnx6lk, #414d5c);
 }
-.awsui_token-box-warning_dm8gx_1tp36_218 > .awsui_dismiss-button_dm8gx_1tp36_139:not(#\9):hover {
+.awsui_token-box-warning_dm8gx_r6wxu_218 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):hover {
   color: var(--color-text-interactive-hover-mj8add, #000716);
 }
 
-.awsui_token-box-disabled_dm8gx_1tp36_229.awsui_token-box-disabled_dm8gx_1tp36_229:not(#\9) {
+.awsui_token-box-readonly_dm8gx_r6wxu_229:not(#\9) {
+  border-color: var(--color-border-input-disabled-rx2aau, #e9ebed);
+  background-color: var(--color-background-container-content-4un1ap, #ffffff);
+  pointer-events: none;
+}
+.awsui_token-box-readonly_dm8gx_r6wxu_229 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9) {
+  color: var(--color-text-button-inline-icon-disabled-mz5gmn, #9ba7b6);
+}
+.awsui_token-box-readonly_dm8gx_r6wxu_229 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):hover {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  cursor: initial;
+  color: var(--color-text-button-inline-icon-disabled-mz5gmn, #9ba7b6);
+}
+
+.awsui_token-box-disabled_dm8gx_r6wxu_243.awsui_token-box-disabled_dm8gx_r6wxu_243:not(#\9) {
   border-color: var(--color-border-control-disabled-bv2kkn, #d1d5db);
   background-color: var(--color-background-container-content-4un1ap, #ffffff);
   color: var(--color-text-disabled-f4c52h, #9ba7b6);
   pointer-events: none;
 }
-.awsui_token-box-disabled_dm8gx_1tp36_229.awsui_token-box-disabled_dm8gx_1tp36_229 > .awsui_dismiss-button_dm8gx_1tp36_139:not(#\9) {
+.awsui_token-box-disabled_dm8gx_r6wxu_243.awsui_token-box-disabled_dm8gx_r6wxu_243 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9) {
   color: var(--color-text-button-inline-icon-disabled-mz5gmn, #9ba7b6);
 }
-.awsui_token-box-disabled_dm8gx_1tp36_229.awsui_token-box-disabled_dm8gx_1tp36_229 > .awsui_dismiss-button_dm8gx_1tp36_139:not(#\9):hover {
+.awsui_token-box-disabled_dm8gx_r6wxu_243.awsui_token-box-disabled_dm8gx_r6wxu_243 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):hover {
   cursor: initial;
   color: var(--color-text-button-inline-icon-disabled-mz5gmn, #9ba7b6);
 }

package/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_1tp36_101",
-  "has-items": "awsui_has-items_dm8gx_1tp36_135",
-  "no-padding": "awsui_no-padding_dm8gx_1tp36_135",
-  "dismiss-button": "awsui_dismiss-button_dm8gx_1tp36_139",
-  "token": "awsui_token_dm8gx_1tp36_181",
-  "token-box": "awsui_token-box_dm8gx_1tp36_188",
-  "token-box-error": "awsui_token-box-error_dm8gx_1tp36_207",
-  "token-box-warning": "awsui_token-box-warning_dm8gx_1tp36_218",
-  "token-box-disabled": "awsui_token-box-disabled_dm8gx_1tp36_229"
+  "root": "awsui_root_dm8gx_r6wxu_101",
+  "has-items": "awsui_has-items_dm8gx_r6wxu_135",
+  "no-padding": "awsui_no-padding_dm8gx_r6wxu_135",
+  "dismiss-button": "awsui_dismiss-button_dm8gx_r6wxu_139",
+  "token": "awsui_token_dm8gx_r6wxu_181",
+  "token-box": "awsui_token-box_dm8gx_r6wxu_188",
+  "token-box-error": "awsui_token-box-error_dm8gx_r6wxu_207",
+  "token-box-warning": "awsui_token-box-warning_dm8gx_r6wxu_218",
+  "token-box-readonly": "awsui_token-box-readonly_dm8gx_r6wxu_229",
+  "token-box-disabled": "awsui_token-box-disabled_dm8gx_r6wxu_243"
 };
   

package/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/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/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/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/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/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/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.

package/top-navigation/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/top-navigation/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';\nimport { ButtonProps } from '../button/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. Use fixed width and height for SVG images to ensure proper rendering.\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   * * `target` (string) - Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`). This property only applies when an `href` is provided.\n   * * `rel` (string) - Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`. If the `rel` property is provided, it overrides the default behavior.\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   * * `onFollow` (() => void) - Specifies the event handler called when the utility is clicked without pressing modifier keys, and the utility has an `href` set.\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   * * `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.\n   * * `expandableGroups` (boolean) - Controls expandability of the item groups.\n   */\n  utilities?: ReadonlyArray<TopNavigationProps.Utility>;\n\n  /**\n   * An object containing all the localized strings required by the component.\n   * @i18n\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    expandableGroups?: boolean;\n    onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n    onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  }\n\n  export interface ButtonUtility extends BaseUtility {\n    type: 'button';\n    variant?: 'primary-button' | 'link';\n    onClick?: CancelableEventHandler;\n    onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n    href?: string;\n    target?: string;\n    rel?: 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    overflowMenuDismissIconAriaLabel?: string;\n    overflowMenuBackIconAriaLabel?: string;\n    overflowMenuTriggerText?: string;\n    overflowMenuTitleText?: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/top-navigation/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';\nimport { ButtonProps } from '../button/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. Use fixed width and height for SVG images to ensure proper rendering.\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   * * `target` (string) - Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`). This property only applies when an `href` is provided.\n   * * `rel` (string) - Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`. If the `rel` property is provided, it overrides the default behavior.\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   * * `onFollow` (() => void) - Specifies the event handler called when the utility is clicked without pressing modifier keys, and the utility has an `href` set.\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   * * `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.\n   * * `expandableGroups` (boolean) - Controls expandability of the item groups.\n   */\n  utilities?: ReadonlyArray<TopNavigationProps.Utility>;\n\n  /**\n   * An object containing all the localized strings required by the component.\n   * @i18n\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    expandableGroups?: boolean;\n    onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n    onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  }\n\n  export interface ButtonUtility extends BaseUtility {\n    type: 'button';\n    variant?: 'primary-button' | 'link';\n    onClick?: CancelableEventHandler;\n    onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n    href?: string;\n    target?: string;\n    rel?: 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    overflowMenuDismissIconAriaLabel?: string;\n    overflowMenuBackIconAriaLabel?: string;\n    overflowMenuTriggerText?: string;\n    overflowMenuTitleText?: string;\n  }\n}\n"]}