@cloudscape-design/components 3.0.662 → 3.0.663

package/breadcrumb-group/implementation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/implementation.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,oBAAoB,EAAyB,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAkEzG,wBAAgB,6BAA6B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,EAAE,EAC7G,KAAU,EACV,SAAS,EACT,eAAe,EACf,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,4BAA4B,CAAC,CAAC,CAAC,eAmEjC;AAED,eAAO,MAAM,+BAA+B,qGAGZ,CAAC"}
+{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/implementation.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,oBAAoB,EAAyB,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAkEzG,wBAAgB,6BAA6B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,EAAE,EAC7G,KAAU,EACV,SAAS,EACT,eAAe,EACf,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,4BAA4B,CAAC,CAAC,CAAC,eAmEjC;AAED,eAAO,MAAM,+BAA+B,qGAA2D,CAAC"}

package/breadcrumb-group/implementation.js.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/implementation.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 from 'react';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { CustomTriggerProps, LinkItem } from '../button-dropdown/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps, InternalBreadcrumbGroupProps } from './interfaces';\nimport { fireCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useInternalI18n } from '../i18n/context';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { getEventDetail } from './utils';\n\n/**\n * Provided for backwards compatibility\n */\nconst DEFAULT_EXPAND_ARIA_LABEL = 'Show path';\n\nconst getDropdownTrigger = ({\n  ariaLabel,\n  triggerRef,\n  disabled,\n  testUtilsClass,\n  isOpen,\n  onClick,\n}: CustomTriggerProps) => {\n  return (\n    <InternalButton\n      ref={triggerRef}\n      className={testUtilsClass}\n      disabled={disabled}\n      onClick={event => {\n        event.preventDefault();\n        onClick();\n      }}\n      ariaExpanded={isOpen}\n      aria-haspopup={true}\n      ariaLabel={ariaLabel}\n      variant=\"breadcrumb-group\"\n      formAction=\"none\"\n    >\n      ...\n    </InternalButton>\n  );\n};\n\nconst EllipsisDropdown = ({\n  ariaLabel,\n  dropdownItems,\n  onDropdownItemClick,\n  onDropdownItemFollow,\n}: EllipsisDropdownProps) => {\n  const i18n = useInternalI18n('breadcrumb-group');\n\n  return (\n    <li className={styles.ellipsis}>\n      <InternalButtonDropdown\n        ariaLabel={i18n('expandAriaLabel', ariaLabel) ?? DEFAULT_EXPAND_ARIA_LABEL}\n        items={dropdownItems}\n        onItemClick={onDropdownItemClick}\n        onItemFollow={onDropdownItemFollow}\n        customTriggerBuilder={getDropdownTrigger}\n      />\n      <span className={styles.icon}>\n        <InternalIcon name=\"angle-right\" />\n      </span>\n    </li>\n  );\n};\n\nexport function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n  items = [],\n  ariaLabel,\n  expandAriaLabel,\n  onClick,\n  onFollow,\n  __internalRootRef,\n  ...props\n}: InternalBreadcrumbGroupProps<T>) {\n  for (const item of items) {\n    checkSafeUrl('BreadcrumbGroup', item.href);\n  }\n  const baseProps = getBaseProps(props);\n  const isMobile = useMobile();\n\n  let breadcrumbItems = items.map((item, index) => {\n    const isLast = index === items.length - 1;\n\n    return (\n      <li className={styles.item} key={index}>\n        <BreadcrumbItem\n          item={item}\n          onClick={onClick}\n          onFollow={onFollow}\n          isCompressed={isMobile}\n          isLast={isLast}\n          isDisplayed={!isMobile || isLast || index === 0}\n        />\n      </li>\n    );\n  });\n\n  const getEventItem = (e: CustomEvent<{ id: string }>) => {\n    const { id } = e.detail;\n    return items[parseInt(id)];\n  };\n\n  // Add ellipsis\n  if (breadcrumbItems.length >= 2) {\n    const dropdownItems: Array<LinkItem> = items\n      .slice(1, items.length - 1)\n      .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n        id: (index + 1).toString(), // the first item doesn't get inside dropdown\n        text: item.text,\n        href: item.href || '#',\n      }));\n\n    breadcrumbItems = [\n      breadcrumbItems[0],\n      <EllipsisDropdown\n        key={'ellipsis'}\n        ariaLabel={expandAriaLabel}\n        dropdownItems={dropdownItems}\n        onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n        onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n      />,\n      ...breadcrumbItems.slice(1),\n    ];\n  }\n\n  return (\n    <nav\n      {...baseProps}\n      className={clsx(\n        styles['breadcrumb-group'],\n        isMobile && styles.mobile,\n        items.length <= 2 && styles['mobile-short'],\n        baseProps.className\n      )}\n      aria-label={ariaLabel || undefined}\n      ref={__internalRootRef}\n    >\n      <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n    </nav>\n  );\n}\n\nexport const createWidgetizedBreadcrumbGroup = createWidgetizedComponent<\n  BreadcrumbGroupProps,\n  typeof BreadcrumbGroupImplementation\n>(BreadcrumbGroupImplementation);\n"]}
+{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/implementation.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 from 'react';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { CustomTriggerProps, LinkItem } from '../button-dropdown/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps, InternalBreadcrumbGroupProps } from './interfaces';\nimport { fireCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useInternalI18n } from '../i18n/context';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { getEventDetail } from './utils';\n\n/**\n * Provided for backwards compatibility\n */\nconst DEFAULT_EXPAND_ARIA_LABEL = 'Show path';\n\nconst getDropdownTrigger = ({\n  ariaLabel,\n  triggerRef,\n  disabled,\n  testUtilsClass,\n  isOpen,\n  onClick,\n}: CustomTriggerProps) => {\n  return (\n    <InternalButton\n      ref={triggerRef}\n      className={testUtilsClass}\n      disabled={disabled}\n      onClick={event => {\n        event.preventDefault();\n        onClick();\n      }}\n      ariaExpanded={isOpen}\n      aria-haspopup={true}\n      ariaLabel={ariaLabel}\n      variant=\"breadcrumb-group\"\n      formAction=\"none\"\n    >\n      ...\n    </InternalButton>\n  );\n};\n\nconst EllipsisDropdown = ({\n  ariaLabel,\n  dropdownItems,\n  onDropdownItemClick,\n  onDropdownItemFollow,\n}: EllipsisDropdownProps) => {\n  const i18n = useInternalI18n('breadcrumb-group');\n\n  return (\n    <li className={styles.ellipsis}>\n      <InternalButtonDropdown\n        ariaLabel={i18n('expandAriaLabel', ariaLabel) ?? DEFAULT_EXPAND_ARIA_LABEL}\n        items={dropdownItems}\n        onItemClick={onDropdownItemClick}\n        onItemFollow={onDropdownItemFollow}\n        customTriggerBuilder={getDropdownTrigger}\n      />\n      <span className={styles.icon}>\n        <InternalIcon name=\"angle-right\" />\n      </span>\n    </li>\n  );\n};\n\nexport function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n  items = [],\n  ariaLabel,\n  expandAriaLabel,\n  onClick,\n  onFollow,\n  __internalRootRef,\n  ...props\n}: InternalBreadcrumbGroupProps<T>) {\n  for (const item of items) {\n    checkSafeUrl('BreadcrumbGroup', item.href);\n  }\n  const baseProps = getBaseProps(props);\n  const isMobile = useMobile();\n\n  let breadcrumbItems = items.map((item, index) => {\n    const isLast = index === items.length - 1;\n\n    return (\n      <li className={styles.item} key={index}>\n        <BreadcrumbItem\n          item={item}\n          onClick={onClick}\n          onFollow={onFollow}\n          isCompressed={isMobile}\n          isLast={isLast}\n          isDisplayed={!isMobile || isLast || index === 0}\n        />\n      </li>\n    );\n  });\n\n  const getEventItem = (e: CustomEvent<{ id: string }>) => {\n    const { id } = e.detail;\n    return items[parseInt(id)];\n  };\n\n  // Add ellipsis\n  if (breadcrumbItems.length >= 2) {\n    const dropdownItems: Array<LinkItem> = items\n      .slice(1, items.length - 1)\n      .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n        id: (index + 1).toString(), // the first item doesn't get inside dropdown\n        text: item.text,\n        href: item.href || '#',\n      }));\n\n    breadcrumbItems = [\n      breadcrumbItems[0],\n      <EllipsisDropdown\n        key={'ellipsis'}\n        ariaLabel={expandAriaLabel}\n        dropdownItems={dropdownItems}\n        onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n        onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n      />,\n      ...breadcrumbItems.slice(1),\n    ];\n  }\n\n  return (\n    <nav\n      {...baseProps}\n      className={clsx(\n        styles['breadcrumb-group'],\n        isMobile && styles.mobile,\n        items.length <= 2 && styles['mobile-short'],\n        baseProps.className\n      )}\n      aria-label={ariaLabel || undefined}\n      ref={__internalRootRef}\n    >\n      <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n    </nav>\n  );\n}\n\nexport const createWidgetizedBreadcrumbGroup = createWidgetizedComponent(BreadcrumbGroupImplementation);\n"]}

package/button-dropdown/item-element/styles.css.js

@@ -1,16 +1,16 @@
 
     import './styles.scoped.css';
     export default {
-  "item-element": "awsui_item-element_93a1u_ofnom_97",
-  "disabled": "awsui_disabled_93a1u_ofnom_109",
-  "show-divider": "awsui_show-divider_93a1u_ofnom_116",
-  "highlighted": "awsui_highlighted_93a1u_ofnom_119",
-  "is-focused": "awsui_is-focused_93a1u_ofnom_134",
-  "menu-item": "awsui_menu-item_93a1u_ofnom_139",
-  "has-category-header": "awsui_has-category-header_93a1u_ofnom_154",
-  "has-checkmark": "awsui_has-checkmark_93a1u_ofnom_154",
-  "icon": "awsui_icon_93a1u_ofnom_158",
-  "checkmark": "awsui_checkmark_93a1u_ofnom_162",
-  "external-icon": "awsui_external-icon_93a1u_ofnom_169"
+  "item-element": "awsui_item-element_93a1u_1l8wd_97",
+  "disabled": "awsui_disabled_93a1u_1l8wd_109",
+  "show-divider": "awsui_show-divider_93a1u_1l8wd_116",
+  "highlighted": "awsui_highlighted_93a1u_1l8wd_119",
+  "is-focused": "awsui_is-focused_93a1u_1l8wd_134",
+  "menu-item": "awsui_menu-item_93a1u_1l8wd_139",
+  "has-category-header": "awsui_has-category-header_93a1u_1l8wd_154",
+  "has-checkmark": "awsui_has-checkmark_93a1u_1l8wd_154",
+  "icon": "awsui_icon_93a1u_1l8wd_158",
+  "checkmark": "awsui_checkmark_93a1u_1l8wd_162",
+  "external-icon": "awsui_external-icon_93a1u_1l8wd_169"
 };
   

package/button-dropdown/item-element/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_item-element_93a1u_ofnom_97:not(#\9) {
+.awsui_item-element_93a1u_1l8wd_97:not(#\9) {
   position: relative;
   z-index: 1;
   border-block: var(--border-item-width-yel47s, 2px) solid transparent;
@@ -106,17 +106,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: calc(-1 * var(--border-field-width-09w7vk, 2px));
   cursor: pointer;
 }
-.awsui_item-element_93a1u_ofnom_97.awsui_disabled_93a1u_ofnom_109:not(#\9) {
+.awsui_item-element_93a1u_1l8wd_97.awsui_disabled_93a1u_1l8wd_109:not(#\9) {
   cursor: default;
   color: var(--color-text-dropdown-item-disabled-6oq3n6, #9ba7b6);
 }
-.awsui_item-element_93a1u_ofnom_97:not(#\9):first-child {
+.awsui_item-element_93a1u_1l8wd_97:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_item-element_93a1u_ofnom_97.awsui_show-divider_93a1u_ofnom_116:not(#\9) {
+.awsui_item-element_93a1u_1l8wd_97.awsui_show-divider_93a1u_1l8wd_116:not(#\9) {
   border-block-end: var(--border-item-width-yel47s, 2px) solid var(--color-border-dropdown-group-yakmix, #b6bec9);
 }
-.awsui_item-element_93a1u_ofnom_97.awsui_highlighted_93a1u_ofnom_119:not(#\9) {
+.awsui_item-element_93a1u_1l8wd_97.awsui_highlighted_93a1u_1l8wd_119:not(#\9) {
   color: var(--color-text-dropdown-item-highlighted-a51hdb, #000716);
   z-index: 2;
   background-color: var(--color-background-dropdown-item-hover-swsulg, #f4f4f4);
@@ -126,17 +126,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-start-radius: var(--border-radius-item-05df9h, 8px);
   border-end-end-radius: var(--border-radius-item-05df9h, 8px);
 }
-.awsui_item-element_93a1u_ofnom_97.awsui_highlighted_93a1u_ofnom_119.awsui_disabled_93a1u_ofnom_109:not(#\9) {
+.awsui_item-element_93a1u_1l8wd_97.awsui_highlighted_93a1u_1l8wd_119.awsui_disabled_93a1u_1l8wd_109:not(#\9) {
   color: var(--color-text-dropdown-item-dimmed-f2joj8, #9ba7b6);
   border-color: var(--color-border-dropdown-item-dimmed-hover-xdu0hf, #7d8998);
   background-color: var(--color-background-dropdown-item-dimmed-dlm6wk, transparent);
 }
-.awsui_item-element_93a1u_ofnom_97.awsui_highlighted_93a1u_ofnom_119.awsui_is-focused_93a1u_ofnom_134:not(#\9) {
+.awsui_item-element_93a1u_1l8wd_97.awsui_highlighted_93a1u_1l8wd_119.awsui_is-focused_93a1u_1l8wd_134:not(#\9) {
   border-color: var(--color-border-dropdown-item-focused-5hbaf3, #414d5c);
   box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-0ctpjf, 0px) var(--color-border-item-focused-b2ntyl, #0972d3);
 }
 
-.awsui_menu-item_93a1u_ofnom_139:not(#\9) {
+.awsui_menu-item_93a1u_1l8wd_139:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   display: flex;
@@ -148,24 +148,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-disable selector-max-type */
   /* stylelint-enable selector-max-type */
 }
-.awsui_menu-item_93a1u_ofnom_139:not(#\9):focus {
+.awsui_menu-item_93a1u_1l8wd_139:not(#\9):focus {
   outline: none;
 }
-.awsui_has-category-header_93a1u_ofnom_154:not(#\9):not(.awsui_has-checkmark_93a1u_ofnom_154) > .awsui_menu-item_93a1u_ofnom_139, .awsui_has-category-header_93a1u_ofnom_154:not(#\9):not(.awsui_has-checkmark_93a1u_ofnom_154) > span > .awsui_menu-item_93a1u_ofnom_139 {
-  padding-inline-start: calc(var(--space-s-34lx8l, 12px) + var(--space-l-t419sm, 20px));
+.awsui_has-category-header_93a1u_1l8wd_154 > .awsui_menu-item_93a1u_1l8wd_139:not(#\9), .awsui_has-category-header_93a1u_1l8wd_154:not(#\9):not(.awsui_has-checkmark_93a1u_1l8wd_154) > span > .awsui_menu-item_93a1u_1l8wd_139 {
+  padding-inline-start: calc(var(--space-xs-zb16t3, 8px) + var(--space-l-t419sm, 20px));
 }
 
-.awsui_icon_93a1u_ofnom_158:not(#\9) {
-  padding-inline-end: var(--space-xs-zb16t3, 8px);
+.awsui_icon_93a1u_1l8wd_158:not(#\9) {
+  padding-inline-end: var(--space-xxs-p8yyaw, 4px);
   flex-shrink: 0;
 }
-.awsui_icon_93a1u_ofnom_158.awsui_checkmark_93a1u_ofnom_162:not(#\9) {
+.awsui_icon_93a1u_1l8wd_158.awsui_checkmark_93a1u_1l8wd_162:not(#\9) {
   color: var(--color-text-status-info-ahz8zp, #0972d3);
 }
-.awsui_icon_93a1u_ofnom_158.awsui_disabled_93a1u_ofnom_109:not(#\9) {
+.awsui_icon_93a1u_1l8wd_158.awsui_disabled_93a1u_1l8wd_109:not(#\9) {
   color: var(--color-text-interactive-disabled-z7a3t4, #9ba7b6);
 }
 
-.awsui_external-icon_93a1u_ofnom_169:not(#\9) {
+.awsui_external-icon_93a1u_1l8wd_169:not(#\9) {
   margin-inline-start: var(--space-xxs-p8yyaw, 4px);
 }

package/button-dropdown/item-element/styles.selectors.js

@@ -2,16 +2,16 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "item-element": "awsui_item-element_93a1u_ofnom_97",
-  "disabled": "awsui_disabled_93a1u_ofnom_109",
-  "show-divider": "awsui_show-divider_93a1u_ofnom_116",
-  "highlighted": "awsui_highlighted_93a1u_ofnom_119",
-  "is-focused": "awsui_is-focused_93a1u_ofnom_134",
-  "menu-item": "awsui_menu-item_93a1u_ofnom_139",
-  "has-category-header": "awsui_has-category-header_93a1u_ofnom_154",
-  "has-checkmark": "awsui_has-checkmark_93a1u_ofnom_154",
-  "icon": "awsui_icon_93a1u_ofnom_158",
-  "checkmark": "awsui_checkmark_93a1u_ofnom_162",
-  "external-icon": "awsui_external-icon_93a1u_ofnom_169"
+  "item-element": "awsui_item-element_93a1u_1l8wd_97",
+  "disabled": "awsui_disabled_93a1u_1l8wd_109",
+  "show-divider": "awsui_show-divider_93a1u_1l8wd_116",
+  "highlighted": "awsui_highlighted_93a1u_1l8wd_119",
+  "is-focused": "awsui_is-focused_93a1u_1l8wd_134",
+  "menu-item": "awsui_menu-item_93a1u_1l8wd_139",
+  "has-category-header": "awsui_has-category-header_93a1u_1l8wd_154",
+  "has-checkmark": "awsui_has-checkmark_93a1u_1l8wd_154",
+  "icon": "awsui_icon_93a1u_1l8wd_158",
+  "checkmark": "awsui_checkmark_93a1u_1l8wd_162",
+  "external-icon": "awsui_external-icon_93a1u_1l8wd_169"
 };
   

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

@@ -229,6 +229,9 @@
   --color-background-tiles-disabled-0j6ior:#e9ebed;
   --color-background-toggle-checked-disabled-uqvx2z:#b5d6f4;
   --color-background-toggle-default-6qtbef:#414d5c;
+  --color-background-avatar-gen-ai-xsgmt7:radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%);
+  --color-background-avatar-default-s460u2:#414d5c;
+  --color-text-avatar-jddpvm:#ffffff;
   --color-border-button-normal-active-tc4102:#033160;
   --color-border-button-normal-default-x52rkp:#0972d3;
   --color-border-button-normal-disabled-40wkb4:#9ba7b6;
@@ -836,6 +839,7 @@
     --color-background-tiles-disabled-0j6ior:#192534;
     --color-background-toggle-checked-disabled-uqvx2z:#033160;
     --color-background-toggle-default-6qtbef:#7d8998;
+    --color-background-avatar-default-s460u2:#5f6b7a;
     --color-border-button-normal-active-tc4102:#89bdee;
     --color-border-button-normal-default-x52rkp:#539fe5;
     --color-border-button-normal-disabled-40wkb4:#5f6b7a;
@@ -1131,6 +1135,7 @@
   --color-background-tiles-disabled-0j6ior:#192534;
   --color-background-toggle-checked-disabled-uqvx2z:#033160;
   --color-background-toggle-default-6qtbef:#7d8998;
+  --color-background-avatar-default-s460u2:#5f6b7a;
   --color-border-button-normal-active-tc4102:#89bdee;
   --color-border-button-normal-default-x52rkp:#539fe5;
   --color-border-button-normal-disabled-40wkb4:#5f6b7a;
@@ -1326,6 +1331,7 @@
   --color-background-tiles-disabled-0j6ior:#192534;
   --color-background-toggle-checked-disabled-uqvx2z:#033160;
   --color-background-toggle-default-6qtbef:#7d8998;
+  --color-background-avatar-default-s460u2:#5f6b7a;
   --color-border-button-normal-active-tc4102:#89bdee;
   --color-border-button-normal-default-x52rkp:#539fe5;
   --color-border-button-normal-disabled-40wkb4:#5f6b7a;
@@ -1619,6 +1625,7 @@
   --color-background-tiles-disabled-0j6ior:#192534;
   --color-background-toggle-checked-disabled-uqvx2z:#033160;
   --color-background-toggle-default-6qtbef:#7d8998;
+  --color-background-avatar-default-s460u2:#5f6b7a;
   --color-border-button-normal-active-tc4102:#ffffff;
   --color-border-button-normal-default-x52rkp:#d1d5db;
   --color-border-button-normal-disabled-40wkb4:#5f6b7a;

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (2daa6495)";
+export var PACKAGE_VERSION = "3.0.0 (e1c06524)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (2daa6495)",
+  "PACKAGE_VERSION": "3.0.0 (e1c06524)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

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

@@ -290,6 +290,9 @@ export const colorBackgroundTableHeader: string;
 export const colorBackgroundTilesDisabled: string;
 export const colorBackgroundToggleCheckedDisabled: string;
 export const colorBackgroundToggleDefault: string;
+export const colorBackgroundAvatarGenAi: string;
+export const colorBackgroundAvatarDefault: string;
+export const colorTextAvatar: string;
 export const colorBorderButtonNormalActive: string;
 export const colorBorderButtonNormalDefault: string;
 export const colorBorderButtonNormalDisabled: string;
@@ -544,6 +547,8 @@ export const motionDurationRefreshOnlyAmbient: string;
 export const motionDurationRefreshOnlyFast: string;
 export const motionDurationRefreshOnlyMedium: string;
 export const motionDurationRefreshOnlySlow: string;
+export const motionDurationAvatarGenAiGradient: string;
+export const motionDurationAvatarLoadingDots: string;
 export const motionDurationRotate180: string;
 export const motionDurationRotate90: string;
 export const motionDurationShowPaced: string;
@@ -557,6 +562,7 @@ export const motionEasingRefreshOnlyA: string;
 export const motionEasingRefreshOnlyB: string;
 export const motionEasingRefreshOnlyC: string;
 export const motionEasingRefreshOnlyD: string;
+export const motionEasingAvatarGenAiGradient: string;
 export const motionEasingRotate180: string;
 export const motionEasingRotate90: string;
 export const motionEasingShowPaced: string;

package/internal/generated/styles/tokens.js

@@ -290,6 +290,9 @@ export var colorBackgroundTableHeader = "var(--color-background-table-header-82e
 export var colorBackgroundTilesDisabled = "var(--color-background-tiles-disabled-0j6ior, #e9ebed)";
 export var colorBackgroundToggleCheckedDisabled = "var(--color-background-toggle-checked-disabled-uqvx2z, #b5d6f4)";
 export var colorBackgroundToggleDefault = "var(--color-background-toggle-default-6qtbef, #414d5c)";
+export var colorBackgroundAvatarGenAi = "var(--color-background-avatar-gen-ai-xsgmt7, radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%))";
+export var colorBackgroundAvatarDefault = "var(--color-background-avatar-default-s460u2, #414d5c)";
+export var colorTextAvatar = "var(--color-text-avatar-jddpvm, #ffffff)";
 export var colorBorderButtonNormalActive = "var(--color-border-button-normal-active-tc4102, #033160)";
 export var colorBorderButtonNormalDefault = "var(--color-border-button-normal-default-x52rkp, #0972d3)";
 export var colorBorderButtonNormalDisabled = "var(--color-border-button-normal-disabled-40wkb4, #9ba7b6)";
@@ -544,6 +547,8 @@ export var motionDurationRefreshOnlyAmbient = "var(--motion-duration-refresh-onl
 export var motionDurationRefreshOnlyFast = "var(--motion-duration-refresh-only-fast-4jn2d7, 115ms)";
 export var motionDurationRefreshOnlyMedium = "var(--motion-duration-refresh-only-medium-nf6485, 165ms)";
 export var motionDurationRefreshOnlySlow = "var(--motion-duration-refresh-only-slow-zbvbxt, 250ms)";
+export var motionDurationAvatarGenAiGradient = "var(--motion-duration-avatar-gen-ai-gradient-xetl2o, 3600ms)";
+export var motionDurationAvatarLoadingDots = "var(--motion-duration-avatar-loading-dots-pe8a3q, 1200ms)";
 export var motionDurationRotate180 = "var(--motion-duration-rotate-180-dpvl4m, 135ms)";
 export var motionDurationRotate90 = "var(--motion-duration-rotate-90-4ry26y, 135ms)";
 export var motionDurationShowPaced = "var(--motion-duration-show-paced-q2lo2h, 180ms)";
@@ -557,6 +562,7 @@ export var motionEasingRefreshOnlyA = "var(--motion-easing-refresh-only-a-8flf9q
 export var motionEasingRefreshOnlyB = "var(--motion-easing-refresh-only-b-ufhmjm, cubic-bezier(1, 0, 0.83, 1))";
 export var motionEasingRefreshOnlyC = "var(--motion-easing-refresh-only-c-vg1m9h, cubic-bezier(0.84, 0, 0.16, 1))";
 export var motionEasingRefreshOnlyD = "var(--motion-easing-refresh-only-d-3kjugn, cubic-bezier(0.33, 0, 0.67, 1))";
+export var motionEasingAvatarGenAiGradient = "var(--motion-easing-avatar-gen-ai-gradient-tjyrpp, cubic-bezier(0.7, 0, 0.3, 1))";
 export var motionEasingRotate180 = "var(--motion-easing-rotate-180-e270ko, cubic-bezier(0.165, 0.84, 0.44, 1))";
 export var motionEasingRotate90 = "var(--motion-easing-rotate-90-sb4dk7, cubic-bezier(0.165, 0.84, 0.44, 1))";
 export var motionEasingShowPaced = "var(--motion-easing-show-paced-ne2o0s, ease-out)";

package/internal/generated/theming/index.cjs

@@ -1045,6 +1045,18 @@ module.exports.preset = {
         "light": "{colorGrey600}",
         "dark": "{colorGrey500}"
       },
+      "colorBackgroundAvatarGenAi": {
+        "light": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+        "dark": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
+      },
+      "colorBackgroundAvatarDefault": {
+        "light": "{colorGrey600}",
+        "dark": "{colorGrey550}"
+      },
+      "colorTextAvatar": {
+        "light": "{colorWhite}",
+        "dark": "{colorWhite}"
+      },
       "colorBorderButtonNormalActive": {
         "light": "{colorBlue800}",
         "dark": "{colorBlue400}"
@@ -1803,6 +1815,14 @@ module.exports.preset = {
         "default": "250ms",
         "disabled": "0ms"
       },
+      "motionDurationAvatarGenAiGradient": {
+        "default": "3600ms",
+        "disabled": "0ms"
+      },
+      "motionDurationAvatarLoadingDots": {
+        "default": "1200ms",
+        "disabled": "0ms"
+      },
       "motionDurationRotate180": {
         "default": "{motionDurationModerate}",
         "disabled": "{motionDurationModerate}"
@@ -1855,6 +1875,10 @@ module.exports.preset = {
         "default": "cubic-bezier(0.33, 0, 0.67, 1)",
         "disabled": "cubic-bezier(0.33, 0, 0.67, 1)"
       },
+      "motionEasingAvatarGenAiGradient": {
+        "default": "cubic-bezier(0.7, 0, 0.3, 1)",
+        "disabled": "cubic-bezier(0.7, 0, 0.3, 1)"
+      },
       "motionEasingRotate180": {
         "default": "{motionEasingEaseOutQuart}",
         "disabled": "{motionEasingEaseOutQuart}"
@@ -3163,6 +3187,18 @@ module.exports.preset = {
             "light": "{colorGrey500}",
             "dark": "{colorGrey500}"
           },
+          "colorBackgroundAvatarGenAi": {
+            "light": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
+          },
+          "colorBackgroundAvatarDefault": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey550}"
+          },
+          "colorTextAvatar": {
+            "light": "{colorWhite}",
+            "dark": "{colorWhite}"
+          },
           "colorBorderButtonNormalActive": {
             "light": "{colorBlue400}",
             "dark": "{colorBlue400}"
@@ -4213,6 +4249,18 @@ module.exports.preset = {
             "light": "{colorGrey500}",
             "dark": "{colorGrey500}"
           },
+          "colorBackgroundAvatarGenAi": {
+            "light": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
+          },
+          "colorBackgroundAvatarDefault": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey550}"
+          },
+          "colorTextAvatar": {
+            "light": "{colorWhite}",
+            "dark": "{colorWhite}"
+          },
           "colorBorderButtonNormalActive": {
             "light": "{colorBlue400}",
             "dark": "{colorBlue400}"
@@ -5195,6 +5243,18 @@ module.exports.preset = {
             "light": "{colorGrey600}",
             "dark": "{colorGrey500}"
           },
+          "colorBackgroundAvatarGenAi": {
+            "light": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
+          },
+          "colorBackgroundAvatarDefault": {
+            "light": "{colorGrey600}",
+            "dark": "{colorGrey550}"
+          },
+          "colorTextAvatar": {
+            "light": "{colorWhite}",
+            "dark": "{colorWhite}"
+          },
           "colorBorderButtonNormalActive": {
             "light": "{colorWhite}",
             "dark": "{colorWhite}"
@@ -6177,6 +6237,18 @@ module.exports.preset = {
             "light": "{colorGrey600}",
             "dark": "{colorGrey500}"
           },
+          "colorBackgroundAvatarGenAi": {
+            "light": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
+          },
+          "colorBackgroundAvatarDefault": {
+            "light": "{colorGrey600}",
+            "dark": "{colorGrey550}"
+          },
+          "colorTextAvatar": {
+            "light": "{colorWhite}",
+            "dark": "{colorWhite}"
+          },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
             "dark": "{colorTextButtonNormalHover}"
@@ -7159,6 +7231,18 @@ module.exports.preset = {
             "light": "{colorGrey600}",
             "dark": "{colorGrey500}"
           },
+          "colorBackgroundAvatarGenAi": {
+            "light": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
+          },
+          "colorBackgroundAvatarDefault": {
+            "light": "{colorGrey600}",
+            "dark": "{colorGrey550}"
+          },
+          "colorTextAvatar": {
+            "light": "{colorWhite}",
+            "dark": "{colorWhite}"
+          },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
             "dark": "{colorTextButtonNormalHover}"
@@ -8143,6 +8227,18 @@ module.exports.preset = {
             "light": "{colorGrey500}",
             "dark": "{colorGrey500}"
           },
+          "colorBackgroundAvatarGenAi": {
+            "light": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at bottom left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top left, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
+          },
+          "colorBackgroundAvatarDefault": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey550}"
+          },
+          "colorTextAvatar": {
+            "light": "{colorWhite}",
+            "dark": "{colorWhite}"
+          },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
             "dark": "{colorTextButtonNormalHover}"
@@ -9025,6 +9121,9 @@ module.exports.preset = {
       "colorBackgroundTilesDisabled": "color",
       "colorBackgroundToggleCheckedDisabled": "color",
       "colorBackgroundToggleDefault": "color",
+      "colorBackgroundAvatarGenAi": "color",
+      "colorBackgroundAvatarDefault": "color",
+      "colorTextAvatar": "color",
       "colorBorderButtonNormalActive": "color",
       "colorBorderButtonNormalDefault": "color",
       "colorBorderButtonNormalDisabled": "color",
@@ -9193,6 +9292,8 @@ module.exports.preset = {
       "motionDurationRefreshOnlyFast": "motion",
       "motionDurationRefreshOnlyMedium": "motion",
       "motionDurationRefreshOnlySlow": "motion",
+      "motionDurationAvatarGenAiGradient": "motion",
+      "motionDurationAvatarLoadingDots": "motion",
       "motionDurationRotate180": "motion",
       "motionDurationRotate90": "motion",
       "motionDurationShowPaced": "motion",
@@ -9206,6 +9307,7 @@ module.exports.preset = {
       "motionEasingRefreshOnlyB": "motion",
       "motionEasingRefreshOnlyC": "motion",
       "motionEasingRefreshOnlyD": "motion",
+      "motionEasingAvatarGenAiGradient": "motion",
       "motionEasingRotate180": "motion",
       "motionEasingRotate90": "motion",
       "motionEasingShowPaced": "motion",
@@ -9768,6 +9870,9 @@ module.exports.preset = {
     "colorBackgroundStatusSuccess",
     "colorBackgroundStatusWarning",
     "colorBackgroundToggleCheckedDisabled",
+    "colorBackgroundAvatarGenAi",
+    "colorBackgroundAvatarDefault",
+    "colorTextAvatar",
     "colorBorderButtonNormalActive",
     "colorBorderButtonNormalDefault",
     "colorBorderButtonNormalDisabled",
@@ -10211,6 +10316,9 @@ module.exports.preset = {
     "colorBackgroundTilesDisabled": "color-background-tiles-disabled",
     "colorBackgroundToggleCheckedDisabled": "color-background-toggle-checked-disabled",
     "colorBackgroundToggleDefault": "color-background-toggle-default",
+    "colorBackgroundAvatarGenAi": "color-background-avatar-gen-ai",
+    "colorBackgroundAvatarDefault": "color-background-avatar-default",
+    "colorTextAvatar": "color-text-avatar",
     "colorBorderButtonNormalActive": "color-border-button-normal-active",
     "colorBorderButtonNormalDefault": "color-border-button-normal-default",
     "colorBorderButtonNormalDisabled": "color-border-button-normal-disabled",
@@ -10465,6 +10573,8 @@ module.exports.preset = {
     "motionDurationRefreshOnlyFast": "motion-duration-refresh-only-fast",
     "motionDurationRefreshOnlyMedium": "motion-duration-refresh-only-medium",
     "motionDurationRefreshOnlySlow": "motion-duration-refresh-only-slow",
+    "motionDurationAvatarGenAiGradient": "motion-duration-avatar-gen-ai-gradient",
+    "motionDurationAvatarLoadingDots": "motion-duration-avatar-loading-dots",
     "motionDurationRotate180": "motion-duration-rotate-180",
     "motionDurationRotate90": "motion-duration-rotate-90",
     "motionDurationShowPaced": "motion-duration-show-paced",
@@ -10478,6 +10588,7 @@ module.exports.preset = {
     "motionEasingRefreshOnlyB": "motion-easing-refresh-only-b",
     "motionEasingRefreshOnlyC": "motion-easing-refresh-only-c",
     "motionEasingRefreshOnlyD": "motion-easing-refresh-only-d",
+    "motionEasingAvatarGenAiGradient": "motion-easing-avatar-gen-ai-gradient",
     "motionEasingRotate180": "motion-easing-rotate-180",
     "motionEasingRotate90": "motion-easing-rotate-90",
     "motionEasingShowPaced": "motion-easing-show-paced",
@@ -10913,6 +11024,9 @@ module.exports.preset = {
     "colorBackgroundTilesDisabled": "--color-background-tiles-disabled-0j6ior",
     "colorBackgroundToggleCheckedDisabled": "--color-background-toggle-checked-disabled-uqvx2z",
     "colorBackgroundToggleDefault": "--color-background-toggle-default-6qtbef",
+    "colorBackgroundAvatarGenAi": "--color-background-avatar-gen-ai-xsgmt7",
+    "colorBackgroundAvatarDefault": "--color-background-avatar-default-s460u2",
+    "colorTextAvatar": "--color-text-avatar-jddpvm",
     "colorBorderButtonNormalActive": "--color-border-button-normal-active-tc4102",
     "colorBorderButtonNormalDefault": "--color-border-button-normal-default-x52rkp",
     "colorBorderButtonNormalDisabled": "--color-border-button-normal-disabled-40wkb4",
@@ -11167,6 +11281,8 @@ module.exports.preset = {
     "motionDurationRefreshOnlyFast": "--motion-duration-refresh-only-fast-4jn2d7",
     "motionDurationRefreshOnlyMedium": "--motion-duration-refresh-only-medium-nf6485",
     "motionDurationRefreshOnlySlow": "--motion-duration-refresh-only-slow-zbvbxt",
+    "motionDurationAvatarGenAiGradient": "--motion-duration-avatar-gen-ai-gradient-xetl2o",
+    "motionDurationAvatarLoadingDots": "--motion-duration-avatar-loading-dots-pe8a3q",
     "motionDurationRotate180": "--motion-duration-rotate-180-dpvl4m",
     "motionDurationRotate90": "--motion-duration-rotate-90-4ry26y",
     "motionDurationShowPaced": "--motion-duration-show-paced-q2lo2h",
@@ -11180,6 +11296,7 @@ module.exports.preset = {
     "motionEasingRefreshOnlyB": "--motion-easing-refresh-only-b-ufhmjm",
     "motionEasingRefreshOnlyC": "--motion-easing-refresh-only-c-vg1m9h",
     "motionEasingRefreshOnlyD": "--motion-easing-refresh-only-d-3kjugn",
+    "motionEasingAvatarGenAiGradient": "--motion-easing-avatar-gen-ai-gradient-tjyrpp",
     "motionEasingRotate180": "--motion-easing-rotate-180-e270ko",
     "motionEasingRotate90": "--motion-easing-rotate-90-sb4dk7",
     "motionEasingShowPaced": "--motion-easing-show-paced-ne2o0s",