@cloudscape-design/components 3.0.250 → 3.0.251

package/token-group/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_dm8gx_on6jb_97:not(#\9) {
+.awsui_root_dm8gx_o4sq7_97:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -132,37 +132,25 @@ 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_on6jb_97.awsui_has-items_dm8gx_on6jb_109:not(#\9) {
+.awsui_root_dm8gx_o4sq7_97.awsui_has-items_dm8gx_o4sq7_109:not(#\9) {
   padding-top: var(--space-xs-rsr2qu, 8px);
 }
 
-.awsui_token_dm8gx_on6jb_113:not(#\9) {
-  height: 100%;
-  border: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
-  padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-xxs-ynfts5, 4px) var(--space-scaled-xxs-95dhkm, 4px) var(--space-field-horizontal-89h2yr, 12px);
-  display: flex;
-  align-items: flex-start;
-  background: var(--color-background-item-selected-ebt4bi, #f2f8fd);
-  border-radius: var(--border-radius-token-wohc9e, 8px);
-  color: var(--color-text-body-default-ajf1h5, #000716);
-  box-sizing: border-box;
-}
-
-.awsui_dismiss-button_dm8gx_on6jb_125:not(#\9) {
+.awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9) {
   margin: -1px -1px 0 var(--space-xxs-ynfts5, 4px);
   border: 1px solid transparent;
   padding: 0 var(--space-xxs-ynfts5, 4px);
   color: var(--color-text-button-inline-icon-default-w65lqn, #0972d3);
   background-color: transparent;
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_on6jb_125:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_on6jb_125:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_on6jb_125:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -173,25 +161,55 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_on6jb_125:not(#\
   border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
-.awsui_dismiss-button_dm8gx_on6jb_125:not(#\9):focus {
+.awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_dismiss-button_dm8gx_on6jb_125:not(#\9):hover {
+.awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-button-inline-icon-hover-wd5icp, #033160);
 }
 
-.awsui_token-disabled_dm8gx_on6jb_159:not(#\9) {
+.awsui_token_dm8gx_o4sq7_147:not(#\9) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xxs-ynfts5, 4px);
+}
+
+.awsui_token-box_dm8gx_o4sq7_154:not(#\9) {
+  height: 100%;
+  border: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
+  padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-xxs-ynfts5, 4px) var(--space-scaled-xxs-95dhkm, 4px) var(--space-field-horizontal-89h2yr, 12px);
+  display: flex;
+  align-items: flex-start;
+  background: var(--color-background-item-selected-ebt4bi, #f2f8fd);
+  border-radius: var(--border-radius-token-wohc9e, 8px);
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  box-sizing: border-box;
+}
+
+.awsui_token-box-error_dm8gx_o4sq7_166:not(#\9) {
+  border-color: var(--color-border-status-error-mfrddc, #d91515);
+  border-left-width: var(--border-invalid-width-5jpdqn, 8px);
+}
+.awsui_token-box-error_dm8gx_o4sq7_166 > .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9) {
+  color: var(--color-text-interactive-default-eg5fsa, #414d5c);
+}
+.awsui_token-box-error_dm8gx_o4sq7_166 > .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):hover {
+  color: var(--color-text-interactive-hover-v3lasm, #000716);
+}
+
+.awsui_token-box-disabled_dm8gx_o4sq7_177.awsui_token-box-disabled_dm8gx_o4sq7_177:not(#\9) {
   border-color: var(--color-border-control-disabled-vx8bco, #d1d5db);
   background-color: var(--color-background-container-content-i8i4a0, #ffffff);
   color: var(--color-text-disabled-a2nkh4, #9ba7b6);
   pointer-events: none;
 }
-.awsui_token-disabled_dm8gx_on6jb_159 > .awsui_dismiss-button_dm8gx_on6jb_125:not(#\9) {
+.awsui_token-box-disabled_dm8gx_o4sq7_177.awsui_token-box-disabled_dm8gx_o4sq7_177 > .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9) {
   color: var(--color-text-button-inline-icon-disabled-gfhvz7, #9ba7b6);
 }
-.awsui_token-disabled_dm8gx_on6jb_159 > .awsui_dismiss-button_dm8gx_on6jb_125:not(#\9):hover {
+.awsui_token-box-disabled_dm8gx_o4sq7_177.awsui_token-box-disabled_dm8gx_o4sq7_177 > .awsui_dismiss-button_dm8gx_o4sq7_113:not(#\9):hover {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   cursor: auto;
   color: var(--color-text-button-inline-icon-disabled-gfhvz7, #9ba7b6);

package/token-group/styles.selectors.js

@@ -2,10 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_dm8gx_on6jb_97",
-  "has-items": "awsui_has-items_dm8gx_on6jb_109",
-  "token": "awsui_token_dm8gx_on6jb_113",
-  "dismiss-button": "awsui_dismiss-button_dm8gx_on6jb_125",
-  "token-disabled": "awsui_token-disabled_dm8gx_on6jb_159"
+  "root": "awsui_root_dm8gx_o4sq7_97",
+  "has-items": "awsui_has-items_dm8gx_o4sq7_109",
+  "dismiss-button": "awsui_dismiss-button_dm8gx_o4sq7_113",
+  "token": "awsui_token_dm8gx_o4sq7_147",
+  "token-box": "awsui_token-box_dm8gx_o4sq7_154",
+  "token-box-error": "awsui_token-box-error_dm8gx_o4sq7_166",
+  "token-box-disabled": "awsui_token-box-disabled_dm8gx_o4sq7_177"
 };
   

package/token-group/token.d.ts

@@ -5,7 +5,10 @@ interface TokenProps {
     dismissLabel?: string;
     onDismiss?: () => void;
     disabled?: boolean;
+    errorText?: React.ReactNode;
+    errorIconAriaLabel?: string;
+    className?: string;
 }
-export declare function Token({ ariaLabel, disabled, dismissLabel, onDismiss, children }: TokenProps): JSX.Element;
+export declare function Token({ ariaLabel, disabled, dismissLabel, onDismiss, children, errorText, errorIconAriaLabel, ...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":"lib/default/","sources":["token-group/token.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,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;CACpB;AAED,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,UAAU,eAY3F"}
+{"version":3,"file":"token.d.ts","sourceRoot":"lib/default/","sources":["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,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,GAAG,SAAS,EACb,EAAE,UAAU,eA6BZ"}

package/token-group/token.js

@@ -1,12 +1,21 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { __rest } from "tslib";
 import React from 'react';
 import clsx from 'clsx';
 import DismissButton from './dismiss-button';
 import styles from './styles.css.js';
-export function Token({ ariaLabel, disabled, dismissLabel, onDismiss, children }) {
-    return (React.createElement("div", { className: clsx(styles.token, disabled && styles['token-disabled']), role: "group", "aria-label": ariaLabel, "aria-disabled": disabled },
-        children,
-        onDismiss && React.createElement(DismissButton, { disabled: disabled, dismissLabel: dismissLabel, onDismiss: onDismiss })));
+import { FormFieldError } 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, errorIconAriaLabel } = _a, restProps = __rest(_a, ["ariaLabel", "disabled", "dismissLabel", "onDismiss", "children", "errorText", "errorIconAriaLabel"]);
+    const errorId = useUniqueId('error');
+    const baseProps = getBaseProps(restProps);
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.token, baseProps.className), role: "group", "aria-label": ariaLabel, "aria-describedby": errorText ? errorId : undefined, "aria-disabled": disabled }),
+        React.createElement("div", { className: clsx(styles['token-box'], disabled && styles['token-box-disabled'], errorText && styles['token-box-error']) },
+            children,
+            onDismiss && React.createElement(DismissButton, { disabled: disabled, dismissLabel: dismissLabel, onDismiss: onDismiss })),
+        errorText && (React.createElement(FormFieldError, { id: errorId, errorIconAriaLabel: errorIconAriaLabel }, errorText))));
 }
 //# sourceMappingURL=token.js.map

package/token-group/token.js.map

@@ -1 +1 @@
-{"version":3,"file":"token.js","sourceRoot":"lib/default/","sources":["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;AAUrC,MAAM,UAAU,KAAK,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAc;IAC1F,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,IAAI,MAAM,CAAC,gBAAgB,CAAC,CAAC,EACnE,IAAI,EAAC,OAAO,gBACA,SAAS,mBACN,QAAQ;QAEtB,QAAQ;QACR,SAAS,IAAI,oBAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,GAAI,CACjG,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';\n\ninterface TokenProps {\n  children: React.ReactNode;\n  ariaLabel?: string;\n  dismissLabel?: string;\n  onDismiss?: () => void;\n  disabled?: boolean;\n}\n\nexport function Token({ ariaLabel, disabled, dismissLabel, onDismiss, children }: TokenProps) {\n  return (\n    <div\n      className={clsx(styles.token, disabled && styles['token-disabled'])}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-disabled={disabled}\n    >\n      {children}\n      {onDismiss && <DismissButton disabled={disabled} dismissLabel={dismissLabel} onDismiss={onDismiss} />}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"token.js","sourceRoot":"lib/default/","sources":["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,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAa1D,MAAM,UAAU,KAAK,CAAC,EAST;QATS,EACpB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,kBAAkB,OAEP,EADR,SAAS,cARQ,qGASrB,CADa;IAEZ,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,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,SAAS,mBAClC,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,CACvC;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,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 } 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  className?: string;\n}\n\nexport function Token({\n  ariaLabel,\n  disabled,\n  dismissLabel,\n  onDismiss,\n  children,\n  errorText,\n  errorIconAriaLabel,\n  ...restProps\n}: TokenProps) {\n  const errorId = useUniqueId('error');\n  const baseProps = getBaseProps(restProps);\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 : 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        )}\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    </div>\n  );\n}\n"]}