@cloudscape-design/components-themeable 3.0.999 → 3.0.1000

package/lib/internal/template/button-group/menu-dropdown-item.js

@@ -2,17 +2,18 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import InternalButton from '../button/internal';
 import ButtonDropdown from '../button-dropdown/internal';
 import Tooltip from '../internal/components/tooltip';
 import { fireCancelableEvent } from '../internal/events';
 import testUtilStyles from './test-classes/styles.css.js';
-const MenuDropdownItem = React.forwardRef(({ item, showTooltip, onItemClick, onTooltipDismiss, expandToViewport }, ref) => {
+const MenuDropdownItem = React.forwardRef(({ item, showTooltip, onItemClick, onTooltipDismiss, expandToViewport, position }, ref) => {
     const containerRef = React.useRef(null);
     const onClickHandler = (event) => {
         fireCancelableEvent(onItemClick, { id: event.detail.id, checked: event.detail.checked }, event);
     };
-    return (React.createElement(ButtonDropdown, { ref: ref, variant: "icon", items: item.items, onItemClick: onClickHandler, expandToViewport: expandToViewport, ariaLabel: item.text, className: testUtilStyles['button-group-item'], "data-testid": item.id, customTriggerBuilder: ({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (React.createElement("div", { ref: containerRef },
+    return (React.createElement(ButtonDropdown, { ref: ref, variant: "icon", items: item.items, onItemClick: onClickHandler, expandToViewport: expandToViewport, ariaLabel: item.text, className: testUtilStyles['button-group-item'], position: position, "data-testid": item.id, disabled: item.disabled, customTriggerBuilder: ({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (React.createElement("div", Object.assign({ ref: containerRef }, (item.disabled ? {} : getAnalyticsMetadataAttribute({ detail: { position } }))),
             !isOpen && showTooltip && !item.disabled && !item.loading && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']), onDismiss: onTooltipDismiss })),
             React.createElement(InternalButton, { ref: triggerRef, variant: "icon", ariaLabel: ariaLabel, "data-itemid": item.id, ariaExpanded: ariaExpanded, className: clsx(testUtilStyles.item, testUtilsClass), iconName: "ellipsis", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, disabledReason: item.disabledReason, onClick: onClick, __title: "" }))) }));
 });

package/lib/internal/template/button-group/menu-dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-dropdown-item.js","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,EAA0B,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGjF,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAU1D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAyB,EAC7F,GAAuC,EACvC,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,CAAC,KAAwD,EAAE,EAAE;QAClF,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,KAAK,CAAC,CAAC;IAClG,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,cAAc,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,iBACjC,IAAI,CAAC,EAAE,EACpB,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAClG,6BAAK,GAAG,EAAE,YAAY;YACnB,CAAC,MAAM,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAC5D,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,EAC/E,SAAS,EAAE,gBAAgB,GAC3B,CACH;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,SAAS,iBACP,IAAI,CAAC,EAAE,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,EACpD,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,EAAE,GACV,CACE,CACP,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport InternalButton from '../button/internal';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport ButtonDropdown from '../button-dropdown/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events';\nimport { ButtonGroupProps } from './interfaces';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface MenuDropdownItemProps {\n  item: ButtonGroupProps.MenuDropdown;\n  showTooltip: boolean;\n  onTooltipDismiss: () => void;\n  onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  expandToViewport?: boolean;\n}\n\nconst MenuDropdownItem = React.forwardRef(\n  (\n    { item, showTooltip, onItemClick, onTooltipDismiss, expandToViewport }: MenuDropdownItemProps,\n    ref: React.Ref<ButtonDropdownProps.Ref>\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const onClickHandler = (event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => {\n      fireCancelableEvent(onItemClick, { id: event.detail.id, checked: event.detail.checked }, event);\n    };\n\n    return (\n      <ButtonDropdown\n        ref={ref}\n        variant=\"icon\"\n        items={item.items}\n        onItemClick={onClickHandler}\n        expandToViewport={expandToViewport}\n        ariaLabel={item.text}\n        className={testUtilStyles['button-group-item']}\n        data-testid={item.id}\n        customTriggerBuilder={({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n          <div ref={containerRef}>\n            {!isOpen && showTooltip && !item.disabled && !item.loading && (\n              <Tooltip\n                trackRef={containerRef}\n                trackKey={item.id}\n                value={item.text}\n                className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n                onDismiss={onTooltipDismiss}\n              />\n            )}\n            <InternalButton\n              ref={triggerRef}\n              variant=\"icon\"\n              ariaLabel={ariaLabel}\n              data-itemid={item.id}\n              ariaExpanded={ariaExpanded}\n              className={clsx(testUtilStyles.item, testUtilsClass)}\n              iconName=\"ellipsis\"\n              loading={item.loading}\n              loadingText={item.loadingText}\n              disabled={item.disabled}\n              disabledReason={item.disabledReason}\n              onClick={onClick}\n              __title=\"\"\n            />\n          </div>\n        )}\n      />\n    );\n  }\n);\n\nexport default MenuDropdownItem;\n"]}
+{"version":3,"file":"menu-dropdown-item.js","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,EAA0B,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGjF,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAW1D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,QAAQ,EAAyB,EACvG,GAAuC,EACvC,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,CAAC,KAAwD,EAAE,EAAE;QAClF,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,KAAK,CAAC,CAAC;IAClG,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,cAAc,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,EAC9C,QAAQ,EAAE,QAAQ,iBACL,IAAI,CAAC,EAAE,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAClG,2CAAK,GAAG,EAAE,YAAY,IAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,6BAA6B,CAAC,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;YACvG,CAAC,MAAM,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAC5D,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,EAC/E,SAAS,EAAE,gBAAgB,GAC3B,CACH;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,SAAS,iBACP,IAAI,CAAC,EAAE,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,EACpD,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,EAAE,GACV,CACE,CACP,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalButton from '../button/internal';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport ButtonDropdown from '../button-dropdown/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events';\nimport { ButtonGroupProps } from './interfaces';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface MenuDropdownItemProps {\n  item: ButtonGroupProps.MenuDropdown;\n  showTooltip: boolean;\n  onTooltipDismiss: () => void;\n  onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  expandToViewport?: boolean;\n  position: string;\n}\n\nconst MenuDropdownItem = React.forwardRef(\n  (\n    { item, showTooltip, onItemClick, onTooltipDismiss, expandToViewport, position }: MenuDropdownItemProps,\n    ref: React.Ref<ButtonDropdownProps.Ref>\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const onClickHandler = (event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => {\n      fireCancelableEvent(onItemClick, { id: event.detail.id, checked: event.detail.checked }, event);\n    };\n\n    return (\n      <ButtonDropdown\n        ref={ref}\n        variant=\"icon\"\n        items={item.items}\n        onItemClick={onClickHandler}\n        expandToViewport={expandToViewport}\n        ariaLabel={item.text}\n        className={testUtilStyles['button-group-item']}\n        position={position}\n        data-testid={item.id}\n        disabled={item.disabled}\n        customTriggerBuilder={({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n          <div ref={containerRef} {...(item.disabled ? {} : getAnalyticsMetadataAttribute({ detail: { position } }))}>\n            {!isOpen && showTooltip && !item.disabled && !item.loading && (\n              <Tooltip\n                trackRef={containerRef}\n                trackKey={item.id}\n                value={item.text}\n                className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n                onDismiss={onTooltipDismiss}\n              />\n            )}\n            <InternalButton\n              ref={triggerRef}\n              variant=\"icon\"\n              ariaLabel={ariaLabel}\n              data-itemid={item.id}\n              ariaExpanded={ariaExpanded}\n              className={clsx(testUtilStyles.item, testUtilsClass)}\n              iconName=\"ellipsis\"\n              loading={item.loading}\n              loadingText={item.loadingText}\n              disabled={item.disabled}\n              disabledReason={item.disabledReason}\n              onClick={onClick}\n              __title=\"\"\n            />\n          </div>\n        )}\n      />\n    );\n  }\n);\n\nexport default MenuDropdownItem;\n"]}

package/lib/internal/template/copy-to-clipboard/interfaces.d.ts

@@ -42,6 +42,16 @@ export interface CopyToClipboardProps extends BaseComponentProps {
      * Enable this setting if you need the popover to ignore its parent stacking context.
      */
     popoverRenderWithPortal?: boolean;
+    /**
+     * Renders the copy to clipboard button as disabled and prevents clicks.
+     */
+    disabled?: boolean;
+    /**
+     * Provides a reason why the copy to clipboard button is disabled (only when `disabled` is `true`).
+     * If provided, the copy to clipboard button becomes focusable.
+     * Applicable for all variants except inline.
+     */
+    disabledReason?: string;
 }
 export declare namespace CopyToClipboardProps {
     type Variant = 'button' | 'icon' | 'inline';

package/lib/internal/template/copy-to-clipboard/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC;IAEvC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,yBAAiB,oBAAoB,CAAC;IACpC,KAAY,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;CACpD"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC;IAEvC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,yBAAiB,oBAAoB,CAAC;IACpC,KAAY,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;CACpD"}

package/lib/internal/template/copy-to-clipboard/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface CopyToClipboardProps extends BaseComponentProps {\n  /** Determines the general styling of the copy button as follows:\n   *\n   * * `button` to display a standalone secondary button with an icon, and `copyButtonText` as text.\n   * * `icon` to display a standalone icon-only (no text) button.\n   * * `inline` to display an icon-only (no text) button within a text context.\n   *\n   * Defaults to `button`.\n   */\n  variant?: CopyToClipboardProps.Variant;\n\n  /**\n   * The text of the copy button (for variant=\"button\").\n   */\n  copyButtonText?: string;\n\n  /**\n   * Adds `aria-label` to the copy button. Use this to provide an accessible name for buttons that don't have visible text,\n   * and to distinguish between multiple buttons with identical visible text. The text will also be added to the `title` attribute of the button.\n   */\n  copyButtonAriaLabel?: string;\n\n  /**\n   * The text content to be copied. It is displayed next to the copy button when `variant=\"inline\"` unless when `content` is specified, and is not shown otherwise.\n   */\n  textToCopy: string;\n\n  /**\n   * The text content to display next to the copy button when `variant=\"inline\"`. If not provided, `textToCopy` will be displayed instead.\n   */\n  textToDisplay?: string;\n\n  /**\n   * The message shown when the text is copied successfully.\n   */\n  copySuccessText: string;\n\n  /**\n   * The message shown when the text is not copied due to an error, see [https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext](https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext).\n   */\n  copyErrorText: string;\n\n  /**\n   * By default, the popover is constrained to fit inside its parent\n   * [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).\n   * Enabling this property will allow the popover to be rendered in the root stack context using\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   * Enable this setting if you need the popover to ignore its parent stacking context.\n   */\n  popoverRenderWithPortal?: boolean;\n}\n\nexport namespace CopyToClipboardProps {\n  export type Variant = 'button' | 'icon' | 'inline';\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface CopyToClipboardProps extends BaseComponentProps {\n  /** Determines the general styling of the copy button as follows:\n   *\n   * * `button` to display a standalone secondary button with an icon, and `copyButtonText` as text.\n   * * `icon` to display a standalone icon-only (no text) button.\n   * * `inline` to display an icon-only (no text) button within a text context.\n   *\n   * Defaults to `button`.\n   */\n  variant?: CopyToClipboardProps.Variant;\n\n  /**\n   * The text of the copy button (for variant=\"button\").\n   */\n  copyButtonText?: string;\n\n  /**\n   * Adds `aria-label` to the copy button. Use this to provide an accessible name for buttons that don't have visible text,\n   * and to distinguish between multiple buttons with identical visible text. The text will also be added to the `title` attribute of the button.\n   */\n  copyButtonAriaLabel?: string;\n\n  /**\n   * The text content to be copied. It is displayed next to the copy button when `variant=\"inline\"` unless when `content` is specified, and is not shown otherwise.\n   */\n  textToCopy: string;\n\n  /**\n   * The text content to display next to the copy button when `variant=\"inline\"`. If not provided, `textToCopy` will be displayed instead.\n   */\n  textToDisplay?: string;\n\n  /**\n   * The message shown when the text is copied successfully.\n   */\n  copySuccessText: string;\n\n  /**\n   * The message shown when the text is not copied due to an error, see [https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext](https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext).\n   */\n  copyErrorText: string;\n\n  /**\n   * By default, the popover is constrained to fit inside its parent\n   * [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).\n   * Enabling this property will allow the popover to be rendered in the root stack context using\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   * Enable this setting if you need the popover to ignore its parent stacking context.\n   */\n  popoverRenderWithPortal?: boolean;\n\n  /**\n   * Renders the copy to clipboard button as disabled and prevents clicks.\n   */\n  disabled?: boolean;\n  /**\n   * Provides a reason why the copy to clipboard button is disabled (only when `disabled` is `true`).\n   * If provided, the copy to clipboard button becomes focusable.\n   * Applicable for all variants except inline.\n   */\n  disabledReason?: string;\n}\n\nexport namespace CopyToClipboardProps {\n  export type Variant = 'button' | 'icon' | 'inline';\n}\n"]}

package/lib/internal/template/copy-to-clipboard/internal.d.ts

@@ -3,6 +3,6 @@ import { InternalBaseComponentProps } from '../internal/hooks/use-base-component
 import { CopyToClipboardProps } from './interfaces';
 interface InternalCopyToClipboardProps extends CopyToClipboardProps, InternalBaseComponentProps {
 }
-export default function InternalCopyToClipboard({ variant, copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, textToDisplay, popoverRenderWithPortal, __internalRootRef, ...restProps }: InternalCopyToClipboardProps): JSX.Element;
+export default function InternalCopyToClipboard({ variant, copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, textToDisplay, popoverRenderWithPortal, disabled, disabledReason, __internalRootRef, ...restProps }: InternalCopyToClipboardProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/copy-to-clipboard/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAKpD,UAAU,4BAA6B,SAAQ,oBAAoB,EAAE,0BAA0B;CAAG;AAElG,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,OAAkB,EAClB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,aAAa,EACb,UAAU,EACV,aAAa,EACb,uBAAuB,EACvB,iBAAwB,EACxB,GAAG,SAAS,EACb,EAAE,4BAA4B,eAyE9B"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAKpD,UAAU,4BAA6B,SAAQ,oBAAoB,EAAE,0BAA0B;CAAG;AAElG,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,OAAkB,EAClB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,aAAa,EACb,UAAU,EACV,aAAa,EACb,uBAAuB,EACvB,QAAQ,EACR,cAAc,EACd,iBAAwB,EACxB,GAAG,SAAS,EACb,EAAE,4BAA4B,eAkF9B"}

package/lib/internal/template/copy-to-clipboard/internal.js

@@ -10,7 +10,7 @@ import InternalStatusIndicator from '../status-indicator/internal';
 import styles from './styles.css.js';
 import testStyles from './test-classes/styles.css.js';
 export default function InternalCopyToClipboard(_a) {
-    var { variant = 'button', copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, textToDisplay, popoverRenderWithPortal, __internalRootRef = null } = _a, restProps = __rest(_a, ["variant", "copyButtonAriaLabel", "copyButtonText", "copySuccessText", "copyErrorText", "textToCopy", "textToDisplay", "popoverRenderWithPortal", "__internalRootRef"]);
+    var { variant = 'button', copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, textToDisplay, popoverRenderWithPortal, disabled, disabledReason, __internalRootRef = null } = _a, restProps = __rest(_a, ["variant", "copyButtonAriaLabel", "copyButtonText", "copySuccessText", "copyErrorText", "textToCopy", "textToDisplay", "popoverRenderWithPortal", "disabled", "disabledReason", "__internalRootRef"]);
     const [status, setStatus] = useState('pending');
     const [statusText, setStatusText] = useState('');
     const baseProps = getBaseProps(restProps);
@@ -40,8 +40,8 @@ export default function InternalCopyToClipboard(_a) {
         inline: 'inline-icon',
     }[variant];
     const isInline = variant === 'inline';
-    const trigger = (React.createElement(InternalPopover, { isInline: isInline, size: "medium", position: "top", triggerType: "custom", dismissButton: false, renderWithPortal: popoverRenderWithPortal, content: React.createElement(InternalStatusIndicator, { type: status }, statusText), __onOpen: onClick },
-        React.createElement(InternalButton, { ariaLabel: copyButtonAriaLabel !== null && copyButtonAriaLabel !== void 0 ? copyButtonAriaLabel : copyButtonText, iconName: "copy", variant: triggerVariant, wrapText: false, formAction: "none" }, copyButtonText)));
+    const button = (React.createElement(InternalButton, { ariaLabel: copyButtonAriaLabel !== null && copyButtonAriaLabel !== void 0 ? copyButtonAriaLabel : copyButtonText, iconName: "copy", variant: triggerVariant, wrapText: false, formAction: "none", disabled: disabled, disabledReason: disabledReason }, copyButtonText));
+    const trigger = disabled ? (button) : (React.createElement(InternalPopover, { isInline: isInline, size: "medium", position: "top", triggerType: "custom", dismissButton: false, renderWithPortal: popoverRenderWithPortal, content: React.createElement(InternalStatusIndicator, { type: status }, statusText), __onOpen: onClick }, button));
     return (React.createElement("span", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(baseProps.className, styles.root, testStyles.root) }), isInline ? (React.createElement("span", { className: styles['inline-container'] },
         React.createElement("span", { className: styles['inline-container-trigger'] }, trigger),
         React.createElement("span", { className: clsx(testStyles['text-to-display'], testStyles['text-to-copy']) }, textToDisplay !== null && textToDisplay !== void 0 ? textToDisplay : textToCopy))) : (trigger)));

package/lib/internal/template/copy-to-clipboard/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/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\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalButton from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport InternalPopover from '../popover/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { CopyToClipboardProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\ninterface InternalCopyToClipboardProps extends CopyToClipboardProps, InternalBaseComponentProps {}\n\nexport default function InternalCopyToClipboard({\n  variant = 'button',\n  copyButtonAriaLabel,\n  copyButtonText,\n  copySuccessText,\n  copyErrorText,\n  textToCopy,\n  textToDisplay,\n  popoverRenderWithPortal,\n  __internalRootRef = null,\n  ...restProps\n}: InternalCopyToClipboardProps) {\n  const [status, setStatus] = useState<'pending' | 'success' | 'error'>('pending');\n  const [statusText, setStatusText] = useState('');\n\n  const baseProps = getBaseProps(restProps);\n  const onClick = () => {\n    if (!navigator.clipboard) {\n      // The clipboard API is not available in insecure contexts.\n      setStatus('error');\n      setStatusText(copyErrorText);\n      return;\n    }\n\n    setStatus('pending');\n    setStatusText('');\n    navigator.clipboard\n      .writeText(textToCopy)\n      .then(() => {\n        setStatus('success');\n        setStatusText(copySuccessText);\n      })\n      .catch(() => {\n        setStatus('error');\n        setStatusText(copyErrorText);\n      });\n  };\n\n  const triggerVariant = (\n    {\n      button: 'normal',\n      icon: 'icon',\n      inline: 'inline-icon',\n    } as const\n  )[variant];\n\n  const isInline = variant === 'inline';\n  const trigger = (\n    <InternalPopover\n      isInline={isInline}\n      size=\"medium\"\n      position=\"top\"\n      triggerType=\"custom\"\n      dismissButton={false}\n      renderWithPortal={popoverRenderWithPortal}\n      content={<InternalStatusIndicator type={status}>{statusText}</InternalStatusIndicator>}\n      __onOpen={onClick}\n    >\n      <InternalButton\n        ariaLabel={copyButtonAriaLabel ?? copyButtonText}\n        iconName=\"copy\"\n        variant={triggerVariant}\n        wrapText={false}\n        formAction=\"none\"\n      >\n        {copyButtonText}\n      </InternalButton>\n    </InternalPopover>\n  );\n\n  return (\n    <span {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root, testStyles.root)}>\n      {isInline ? (\n        <span className={styles['inline-container']}>\n          <span className={styles['inline-container-trigger']}>{trigger}</span>\n          <span className={clsx(testStyles['text-to-display'], testStyles['text-to-copy'])}>\n            {textToDisplay ?? textToCopy}\n          </span>\n        </span>\n      ) : (\n        trigger\n      )}\n    </span>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/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\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalButton from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport InternalPopover from '../popover/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { CopyToClipboardProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\ninterface InternalCopyToClipboardProps extends CopyToClipboardProps, InternalBaseComponentProps {}\n\nexport default function InternalCopyToClipboard({\n  variant = 'button',\n  copyButtonAriaLabel,\n  copyButtonText,\n  copySuccessText,\n  copyErrorText,\n  textToCopy,\n  textToDisplay,\n  popoverRenderWithPortal,\n  disabled,\n  disabledReason,\n  __internalRootRef = null,\n  ...restProps\n}: InternalCopyToClipboardProps) {\n  const [status, setStatus] = useState<'pending' | 'success' | 'error'>('pending');\n  const [statusText, setStatusText] = useState('');\n\n  const baseProps = getBaseProps(restProps);\n  const onClick = () => {\n    if (!navigator.clipboard) {\n      // The clipboard API is not available in insecure contexts.\n      setStatus('error');\n      setStatusText(copyErrorText);\n      return;\n    }\n\n    setStatus('pending');\n    setStatusText('');\n    navigator.clipboard\n      .writeText(textToCopy)\n      .then(() => {\n        setStatus('success');\n        setStatusText(copySuccessText);\n      })\n      .catch(() => {\n        setStatus('error');\n        setStatusText(copyErrorText);\n      });\n  };\n\n  const triggerVariant = (\n    {\n      button: 'normal',\n      icon: 'icon',\n      inline: 'inline-icon',\n    } as const\n  )[variant];\n\n  const isInline = variant === 'inline';\n\n  const button = (\n    <InternalButton\n      ariaLabel={copyButtonAriaLabel ?? copyButtonText}\n      iconName=\"copy\"\n      variant={triggerVariant}\n      wrapText={false}\n      formAction=\"none\"\n      disabled={disabled}\n      disabledReason={disabledReason}\n    >\n      {copyButtonText}\n    </InternalButton>\n  );\n\n  const trigger = disabled ? (\n    button\n  ) : (\n    <InternalPopover\n      isInline={isInline}\n      size=\"medium\"\n      position=\"top\"\n      triggerType=\"custom\"\n      dismissButton={false}\n      renderWithPortal={popoverRenderWithPortal}\n      content={<InternalStatusIndicator type={status}>{statusText}</InternalStatusIndicator>}\n      __onOpen={onClick}\n    >\n      {button}\n    </InternalPopover>\n  );\n\n  return (\n    <span {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root, testStyles.root)}>\n      {isInline ? (\n        <span className={styles['inline-container']}>\n          <span className={styles['inline-container-trigger']}>{trigger}</span>\n          <span className={clsx(testStyles['text-to-display'], testStyles['text-to-copy'])}>\n            {textToDisplay ?? textToCopy}\n          </span>\n        </span>\n      ) : (\n        trigger\n      )}\n    </span>\n  );\n}\n"]}

package/lib/internal/template/internal/base-component/styles.scoped.css

@@ -418,6 +418,8 @@
   --color-text-status-success-vmys4n:#1d8102;
   --color-text-status-warning-75jmgn:#906806;
   --color-text-top-navigation-title-50mcr5:#16191f;
+  --color-text-tutorial-hotspot-default-r59hr8:#0073bb;
+  --color-text-tutorial-hotspot-hover-r1skao:#0a4a74;
   --color-board-placeholder-active-oe22ia:#d5dbdb;
   --color-board-placeholder-hover-jxjr60:#99cbe4;
   --color-drag-placeholder-active-mhklvu:#d5dbdb;
@@ -1035,6 +1037,8 @@
     --color-text-status-success-vmys4n:#6aaf35;
     --color-text-status-warning-75jmgn:#fbd332;
     --color-text-top-navigation-title-50mcr5:#fafafa;
+    --color-text-tutorial-hotspot-default-r59hr8:#44b9d6;
+    --color-text-tutorial-hotspot-hover-r1skao:#99cbe4;
     --color-board-placeholder-active-oe22ia:#687078;
     --color-board-placeholder-hover-jxjr60:#0073bb;
     --color-drag-placeholder-active-mhklvu:#687078;
@@ -1354,6 +1358,8 @@
   --color-text-status-success-vmys4n:#6aaf35;
   --color-text-status-warning-75jmgn:#fbd332;
   --color-text-top-navigation-title-50mcr5:#fafafa;
+  --color-text-tutorial-hotspot-default-r59hr8:#44b9d6;
+  --color-text-tutorial-hotspot-hover-r1skao:#99cbe4;
   --color-board-placeholder-active-oe22ia:#687078;
   --color-board-placeholder-hover-jxjr60:#0073bb;
   --color-drag-placeholder-active-mhklvu:#687078;
@@ -1386,6 +1392,8 @@
   --color-text-expandable-section-default-15nt1e:#fafafa;
   --color-text-expandable-section-hover-3n2kpp:#fafafa;
   --color-text-heading-secondary-p3brnl:#fafafa;
+  --color-text-tutorial-hotspot-default-r59hr8:#d5dbdb;
+  --color-text-tutorial-hotspot-hover-r1skao:#fafafa;
 }
 
 .awsui-context-flashbar-warning:not(#\9) {
@@ -1409,6 +1417,8 @@
   --color-text-interactive-inverted-hover-p0x69h:#16191f;
   --color-text-link-inverted-hover-7jk1d1:#16191f;
   --color-text-notification-default-fmebm4:#16191f;
+  --color-text-tutorial-hotspot-default-r59hr8:#687078;
+  --color-text-tutorial-hotspot-hover-r1skao:#131920;
 }
 
 .awsui-context-alert:not(#\9) {
@@ -1723,6 +1733,8 @@
   --color-text-status-success-vmys4n:#00802f;
   --color-text-status-warning-75jmgn:#855900;
   --color-text-top-navigation-title-50mcr5:#0f141a;
+  --color-text-tutorial-hotspot-default-r59hr8:#006ce0;
+  --color-text-tutorial-hotspot-hover-r1skao:#002b66;
   --color-board-placeholder-active-oe22ia:#ebebf0;
   --color-board-placeholder-hover-jxjr60:#d1f1ff;
   --color-drag-placeholder-active-mhklvu:#ebebf0;
@@ -2087,6 +2099,8 @@
     --color-text-status-success-vmys4n:#2bb534;
     --color-text-status-warning-75jmgn:#fbd332;
     --color-text-top-navigation-title-50mcr5:#f9f9fa;
+    --color-text-tutorial-hotspot-default-r59hr8:#42b4ff;
+    --color-text-tutorial-hotspot-hover-r1skao:#75cfff;
     --color-board-placeholder-active-oe22ia:#656871;
     --color-board-placeholder-hover-jxjr60:#006ce0;
     --color-drag-placeholder-active-mhklvu:#656871;
@@ -2375,6 +2389,8 @@
   --color-text-status-info-q591kt:#42b4ff;
   --color-text-status-success-vmys4n:#2bb534;
   --color-text-top-navigation-title-50mcr5:#f9f9fa;
+  --color-text-tutorial-hotspot-default-r59hr8:#42b4ff;
+  --color-text-tutorial-hotspot-hover-r1skao:#75cfff;
   --color-board-placeholder-active-oe22ia:#656871;
   --color-board-placeholder-hover-jxjr60:#006ce0;
   --color-drag-placeholder-active-mhklvu:#656871;
@@ -2583,6 +2599,8 @@
   --color-text-status-success-vmys4n:#2bb534;
   --color-text-status-warning-75jmgn:#fbd332;
   --color-text-top-navigation-title-50mcr5:#f9f9fa;
+  --color-text-tutorial-hotspot-default-r59hr8:#42b4ff;
+  --color-text-tutorial-hotspot-hover-r1skao:#75cfff;
   --color-board-placeholder-active-oe22ia:#656871;
   --color-board-placeholder-hover-jxjr60:#006ce0;
   --color-drag-placeholder-active-mhklvu:#656871;
@@ -2795,6 +2813,8 @@
   --color-text-status-success-vmys4n:#2bb534;
   --color-text-status-warning-75jmgn:#fbd332;
   --color-text-top-navigation-title-50mcr5:#f9f9fa;
+  --color-text-tutorial-hotspot-default-r59hr8:#42b4ff;
+  --color-text-tutorial-hotspot-hover-r1skao:#75cfff;
   --color-board-placeholder-active-oe22ia:#656871;
   --color-board-placeholder-hover-jxjr60:#006ce0;
   --color-drag-placeholder-active-mhklvu:#656871;
@@ -3019,6 +3039,8 @@
   --color-text-status-success-vmys4n:#2bb534;
   --color-text-status-warning-75jmgn:#fbd332;
   --color-text-top-navigation-title-50mcr5:#f9f9fa;
+  --color-text-tutorial-hotspot-default-r59hr8:#42b4ff;
+  --color-text-tutorial-hotspot-hover-r1skao:#75cfff;
   --color-board-placeholder-active-oe22ia:#656871;
   --color-board-placeholder-hover-jxjr60:#006ce0;
   --color-drag-placeholder-active-mhklvu:#656871;
@@ -3082,6 +3104,8 @@
   --color-text-expandable-section-hover-3n2kpp:#ffffff;
   --color-text-heading-secondary-p3brnl:#f9f9fa;
   --color-text-segment-hover-bhj7qd:#ffffff;
+  --color-text-tutorial-hotspot-default-r59hr8:#dedee3;
+  --color-text-tutorial-hotspot-hover-r1skao:#f9f9fa;
 }
 
 .awsui-context-flashbar.awsui-visual-refresh:not(#\9) {
@@ -3115,6 +3139,8 @@
   --color-text-expandable-section-hover-3n2kpp:#ffffff;
   --color-text-heading-secondary-p3brnl:#f9f9fa;
   --color-text-segment-hover-bhj7qd:#ffffff;
+  --color-text-tutorial-hotspot-default-r59hr8:#dedee3;
+  --color-text-tutorial-hotspot-hover-r1skao:#f9f9fa;
 }
 
 .awsui-visual-refresh .awsui-context-flashbar-warning:not(#\9) {
@@ -3155,6 +3181,7 @@
   --color-text-link-inverted-hover-7jk1d1:#0f141a;
   --color-text-notification-default-fmebm4:#0f141a;
   --color-text-segment-hover-bhj7qd:#0f141a;
+  --color-text-tutorial-hotspot-default-r59hr8:#656871;
 }
 
 .awsui-context-flashbar-warning.awsui-visual-refresh:not(#\9) {
@@ -3187,6 +3214,8 @@
   --color-text-link-inverted-hover-7jk1d1:#0f141a;
   --color-text-notification-default-fmebm4:#0f141a;
   --color-text-segment-hover-bhj7qd:#0f141a;
+  --color-text-tutorial-hotspot-default-r59hr8:#656871;
+  --color-text-tutorial-hotspot-hover-r1skao:#131920;
 }
 
 .awsui-visual-refresh .awsui-context-alert:not(#\9) {
@@ -3455,6 +3484,8 @@
   --color-text-status-success-vmys4n:#2bb534;
   --color-text-status-warning-75jmgn:#fbd332;
   --color-text-top-navigation-title-50mcr5:#f9f9fa;
+  --color-text-tutorial-hotspot-default-r59hr8:#42b4ff;
+  --color-text-tutorial-hotspot-hover-r1skao:#75cfff;
   --color-board-placeholder-active-oe22ia:#656871;
   --color-board-placeholder-hover-jxjr60:#006ce0;
   --color-drag-placeholder-active-mhklvu:#656871;
@@ -3667,6 +3698,8 @@
   --color-text-status-success-vmys4n:#2bb534;
   --color-text-status-warning-75jmgn:#fbd332;
   --color-text-top-navigation-title-50mcr5:#f9f9fa;
+  --color-text-tutorial-hotspot-default-r59hr8:#42b4ff;
+  --color-text-tutorial-hotspot-hover-r1skao:#75cfff;
   --color-board-placeholder-active-oe22ia:#656871;
   --color-board-placeholder-hover-jxjr60:#006ce0;
   --color-drag-placeholder-active-mhklvu:#656871;
@@ -3716,6 +3749,7 @@
     --color-border-input-focused-s42oju:#42b4ff;
     --color-border-tabs-shadow-0fojr3:rgba(15, 20, 26, 1);
     --color-text-body-default-1tki40:#0f141a;
+    --color-text-tutorial-hotspot-hover-r1skao:#131920;
   }
 }
 @media not print {

package/lib/internal/template/internal/components/drag-handle/button.js

@@ -28,7 +28,7 @@ const DragHandleButton = forwardRef(({ variant = 'drag-indicator', size = 'norma
     // (See https://bugs.webkit.org/show_bug.cgi?id=22261)
     // Otherwise, we can't reliably catch keyboard events coming from the handle
     // when it is being dragged.
-    React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : 'button', tabIndex: 0, className: clsx(className, styles.handle, testUtilsStyles.root, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled']), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onKeyDown: onKeyDown },
+    React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : 'application', tabIndex: 0, className: clsx(className, styles.handle, testUtilsStyles.root, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled']), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onKeyDown: onKeyDown },
         React.createElement(InternalIcon, Object.assign({}, iconProps))));
 });
 export default DragHandleButton;

package/lib/internal/template/internal/components/drag-handle/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAG7E,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,GACO,EAClB,GAAuB,EACvB,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;QAC/E,QAAQ,OAAO,EAAE;YACf,KAAK,gBAAgB;gBACnB,uCAAY,MAAM,KAAE,IAAI,EAAE,gBAAgB,IAAG;YAC/C,KAAK,aAAa;gBAChB,uCAAY,MAAM,KAAE,IAAI,EAAE,aAAa,IAAG;YAC5C,KAAK,mBAAmB;gBACtB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,IAAG;YACjE,KAAK,iBAAiB;gBACpB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,IAAG;SAChE;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,mBAAmB,CAAC,EAC3C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,MAAM,EACb,eAAe,CAAC,IAAI,EACpB,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CACtC,gBACW,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,QAAQ,mBACR,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAClC,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS;QAEpB,oBAAC,YAAY,oBAAK,SAAS,EAAI,CAC3B,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\nconst DragHandleButton = forwardRef(\n  (\n    {\n      variant = 'drag-indicator',\n      size = 'normal',\n      className,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedby,\n      ariaValue,\n      disabled,\n      onPointerDown,\n      onKeyDown,\n    }: DragHandleProps,\n    ref: React.Ref<Element>\n  ) => {\n    const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n    const iconProps: IconProps = (() => {\n      const shared = { variant: disabled ? ('disabled' as const) : undefined, size };\n      switch (variant) {\n        case 'drag-indicator':\n          return { ...shared, name: 'drag-indicator' };\n        case 'resize-area':\n          return { ...shared, name: 'resize-area' };\n        case 'resize-horizontal':\n          return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n        case 'resize-vertical':\n          return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n      }\n    })();\n\n    return (\n      // We need to use a div with button role instead of a button\n      // so that Safari will focus on it when clicking it.\n      // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n      // Otherwise, we can't reliably catch keyboard events coming from the handle\n      // when it is being dragged.\n      <div\n        ref={useMergeRefs(ref, dragHandleRefObject)}\n        role={ariaValue ? 'slider' : 'button'}\n        tabIndex={0}\n        className={clsx(\n          className,\n          styles.handle,\n          testUtilsStyles.root,\n          styles[`handle-${variant}`],\n          styles[`handle-size-${size}`],\n          disabled && styles['handle-disabled']\n        )}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedby}\n        aria-disabled={disabled}\n        aria-valuemax={ariaValue?.valueMax}\n        aria-valuemin={ariaValue?.valueMin}\n        aria-valuenow={ariaValue?.valueNow}\n        onPointerDown={onPointerDown}\n        onKeyDown={onKeyDown}\n      >\n        <InternalIcon {...iconProps} />\n      </div>\n    );\n  }\n);\n\nexport default DragHandleButton;\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAG7E,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,GACO,EAClB,GAAuB,EACvB,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;QAC/E,QAAQ,OAAO,EAAE;YACf,KAAK,gBAAgB;gBACnB,uCAAY,MAAM,KAAE,IAAI,EAAE,gBAAgB,IAAG;YAC/C,KAAK,aAAa;gBAChB,uCAAY,MAAM,KAAE,IAAI,EAAE,aAAa,IAAG;YAC5C,KAAK,mBAAmB;gBACtB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,IAAG;YACjE,KAAK,iBAAiB;gBACpB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,IAAG;SAChE;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,mBAAmB,CAAC,EAC3C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,EAC1C,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,MAAM,EACb,eAAe,CAAC,IAAI,EACpB,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CACtC,gBACW,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,QAAQ,mBACR,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAClC,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS;QAEpB,oBAAC,YAAY,oBAAK,SAAS,EAAI,CAC3B,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\nconst DragHandleButton = forwardRef(\n  (\n    {\n      variant = 'drag-indicator',\n      size = 'normal',\n      className,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedby,\n      ariaValue,\n      disabled,\n      onPointerDown,\n      onKeyDown,\n    }: DragHandleProps,\n    ref: React.Ref<Element>\n  ) => {\n    const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n    const iconProps: IconProps = (() => {\n      const shared = { variant: disabled ? ('disabled' as const) : undefined, size };\n      switch (variant) {\n        case 'drag-indicator':\n          return { ...shared, name: 'drag-indicator' };\n        case 'resize-area':\n          return { ...shared, name: 'resize-area' };\n        case 'resize-horizontal':\n          return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n        case 'resize-vertical':\n          return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n      }\n    })();\n\n    return (\n      // We need to use a div with button role instead of a button\n      // so that Safari will focus on it when clicking it.\n      // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n      // Otherwise, we can't reliably catch keyboard events coming from the handle\n      // when it is being dragged.\n      <div\n        ref={useMergeRefs(ref, dragHandleRefObject)}\n        role={ariaValue ? 'slider' : 'application'}\n        tabIndex={0}\n        className={clsx(\n          className,\n          styles.handle,\n          testUtilsStyles.root,\n          styles[`handle-${variant}`],\n          styles[`handle-size-${size}`],\n          disabled && styles['handle-disabled']\n        )}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedby}\n        aria-disabled={disabled}\n        aria-valuemax={ariaValue?.valueMax}\n        aria-valuemin={ariaValue?.valueMin}\n        aria-valuenow={ariaValue?.valueNow}\n        onPointerDown={onPointerDown}\n        onKeyDown={onKeyDown}\n      >\n        <InternalIcon {...iconProps} />\n      </div>\n    );\n  }\n);\n\nexport default DragHandleButton;\n"]}

package/lib/internal/template/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (9f972332)";
+export var PACKAGE_VERSION = "3.0.0 (03b7be2a)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (9f972332)",
+  "PACKAGE_VERSION": "3.0.0 (03b7be2a)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/lib/internal/template/internal/generated/styles/tokens.d.ts

@@ -481,6 +481,8 @@ export const colorTextStatusInfo: string;
 export const colorTextStatusSuccess: string;
 export const colorTextStatusWarning: string;
 export const colorTextTopNavigationTitle: string;
+export const colorTextTutorialHotspotDefault: string;
+export const colorTextTutorialHotspotHover: string;
 export const colorBoardPlaceholderActive: string;
 export const colorBoardPlaceholderHover: string;
 export const colorDragPlaceholderActive: string;

package/lib/internal/template/internal/generated/styles/tokens.js

@@ -481,6 +481,8 @@ export var colorTextStatusInfo = "var(--color-text-status-info-xbstx5, #006ce0)"
 export var colorTextStatusSuccess = "var(--color-text-status-success-4f6v4h, #00802f)";
 export var colorTextStatusWarning = "var(--color-text-status-warning-fa077b, #855900)";
 export var colorTextTopNavigationTitle = "var(--color-text-top-navigation-title-kiop92, #0f141a)";
+export var colorTextTutorialHotspotDefault = "var(--color-text-tutorial-hotspot-default-aq2wj8, #006ce0)";
+export var colorTextTutorialHotspotHover = "var(--color-text-tutorial-hotspot-hover-93wlda, #002b66)";
 export var colorBoardPlaceholderActive = "var(--color-board-placeholder-active-3nv7j5, #ebebf0)";
 export var colorBoardPlaceholderHover = "var(--color-board-placeholder-hover-1hv3br, #d1f1ff)";
 export var colorDragPlaceholderActive = "var(--color-drag-placeholder-active-7dewab, #ebebf0)";

package/lib/internal/template/internal/generated/theming/index.cjs

@@ -1818,6 +1818,14 @@ module.exports.preset = {
         "light": "{colorGrey950}",
         "dark": "{colorGrey100}"
       },
+      "colorTextTutorialHotspotDefault": {
+        "light": "{colorTextLinkDefault}",
+        "dark": "{colorTextLinkDefault}"
+      },
+      "colorTextTutorialHotspotHover": {
+        "light": "{colorTextLinkHover}",
+        "dark": "{colorTextLinkHover}"
+      },
       "colorBoardPlaceholderActive": {
         "light": "{colorGrey250}",
         "dark": "{colorGrey600}"
@@ -4090,6 +4098,14 @@ module.exports.preset = {
             "light": "{colorGrey100}",
             "dark": "{colorGrey100}"
           },
+          "colorTextTutorialHotspotDefault": {
+            "light": "{colorTextLinkDefault}",
+            "dark": "{colorTextLinkDefault}"
+          },
+          "colorTextTutorialHotspotHover": {
+            "light": "{colorTextLinkHover}",
+            "dark": "{colorTextLinkHover}"
+          },
           "colorBoardPlaceholderActive": {
             "light": "{colorGrey600}",
             "dark": "{colorGrey600}"
@@ -5260,6 +5276,14 @@ module.exports.preset = {
             "light": "{colorGrey100}",
             "dark": "{colorGrey100}"
           },
+          "colorTextTutorialHotspotDefault": {
+            "light": "{colorTextLinkDefault}",
+            "dark": "{colorTextLinkDefault}"
+          },
+          "colorTextTutorialHotspotHover": {
+            "light": "{colorTextLinkHover}",
+            "dark": "{colorTextLinkHover}"
+          },
           "colorBoardPlaceholderActive": {
             "light": "{colorGrey600}",
             "dark": "{colorGrey600}"
@@ -6362,6 +6386,14 @@ module.exports.preset = {
             "light": "{colorGrey950}",
             "dark": "{colorGrey100}"
           },
+          "colorTextTutorialHotspotDefault": {
+            "light": "{colorGrey300}",
+            "dark": "{colorGrey300}"
+          },
+          "colorTextTutorialHotspotHover": {
+            "light": "{colorGrey100}",
+            "dark": "{colorGrey100}"
+          },
           "colorBoardPlaceholderActive": {
             "light": "{colorGrey250}",
             "dark": "{colorGrey600}"
@@ -7464,6 +7496,14 @@ module.exports.preset = {
             "light": "{colorGrey950}",
             "dark": "{colorGrey100}"
           },
+          "colorTextTutorialHotspotDefault": {
+            "light": "{colorGrey600}",
+            "dark": "{colorGrey600}"
+          },
+          "colorTextTutorialHotspotHover": {
+            "light": "{colorGrey900}",
+            "dark": "{colorGrey900}"
+          },
           "colorBoardPlaceholderActive": {
             "light": "{colorGrey250}",
             "dark": "{colorGrey600}"
@@ -8566,6 +8606,14 @@ module.exports.preset = {
             "light": "{colorGrey950}",
             "dark": "{colorGrey100}"
           },
+          "colorTextTutorialHotspotDefault": {
+            "light": "{colorTextLinkDefault}",
+            "dark": "{colorTextLinkDefault}"
+          },
+          "colorTextTutorialHotspotHover": {
+            "light": "{colorTextLinkHover}",
+            "dark": "{colorTextLinkHover}"
+          },
           "colorBoardPlaceholderActive": {
             "light": "{colorGrey250}",
             "dark": "{colorGrey600}"
@@ -9680,6 +9728,14 @@ module.exports.preset = {
             "light": "{colorGrey100}",
             "dark": "{colorGrey100}"
           },
+          "colorTextTutorialHotspotDefault": {
+            "light": "{colorTextLinkDefault}",
+            "dark": "{colorTextLinkDefault}"
+          },
+          "colorTextTutorialHotspotHover": {
+            "light": "{colorTextLinkHover}",
+            "dark": "{colorTextLinkHover}"
+          },
           "colorBoardPlaceholderActive": {
             "light": "{colorGrey600}",
             "dark": "{colorGrey600}"
@@ -10160,6 +10216,8 @@ module.exports.preset = {
       "colorTextStatusSuccess": "color",
       "colorTextStatusWarning": "color",
       "colorTextTopNavigationTitle": "color",
+      "colorTextTutorialHotspotDefault": "color",
+      "colorTextTutorialHotspotHover": "color",
       "colorBoardPlaceholderActive": "color",
       "colorBoardPlaceholderHover": "color",
       "colorDragPlaceholderActive": "color",
@@ -11470,6 +11528,8 @@ module.exports.preset = {
     "colorTextStatusSuccess": "color-text-status-success",
     "colorTextStatusWarning": "color-text-status-warning",
     "colorTextTopNavigationTitle": "color-text-top-navigation-title",
+    "colorTextTutorialHotspotDefault": "color-text-tutorial-hotspot-default",
+    "colorTextTutorialHotspotHover": "color-text-tutorial-hotspot-hover",
     "colorBoardPlaceholderActive": "color-board-placeholder-active",
     "colorBoardPlaceholderHover": "color-board-placeholder-hover",
     "colorDragPlaceholderActive": "color-drag-placeholder-active",
@@ -12225,6 +12285,8 @@ module.exports.preset = {
     "colorTextStatusSuccess": "--color-text-status-success-4f6v4h",
     "colorTextStatusWarning": "--color-text-status-warning-fa077b",
     "colorTextTopNavigationTitle": "--color-text-top-navigation-title-kiop92",
+    "colorTextTutorialHotspotDefault": "--color-text-tutorial-hotspot-default-aq2wj8",
+    "colorTextTutorialHotspotHover": "--color-text-tutorial-hotspot-hover-93wlda",
     "colorBoardPlaceholderActive": "--color-board-placeholder-active-3nv7j5",
     "colorBoardPlaceholderHover": "--color-board-placeholder-hover-1hv3br",
     "colorDragPlaceholderActive": "--color-drag-placeholder-active-7dewab",