@cloudscape-design/components-themeable 3.0.678 → 3.0.680

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

@@ -229,9 +229,10 @@
   --color-background-tiles-disabled-ctqo0t:#eaeded;
   --color-background-toggle-checked-disabled-uehqtc:#99cbe4;
   --color-background-toggle-default-q71d3m:#545b64;
-  --color-background-avatar-gen-ai-mtduzw: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-4loi6v:#545b64;
+  --color-background-avatar-gen-ai-ushlhi:radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%);
+  --color-background-avatar-default-w7usu3:#545b64;
   --color-text-avatar-629ohj:#ffffff;
+  --color-background-loading-bar-gen-ai-et3hkq:linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%);
   --color-border-button-normal-active-mn8z2y:#545b64;
   --color-border-button-normal-default-bqhrgd:#545b64;
   --color-border-button-normal-disabled-vj6u6p:#d5dbdb;
@@ -477,6 +478,8 @@
   --motion-duration-refresh-only-fast-y7h37k:115ms;
   --motion-duration-refresh-only-medium-0rwzu1:165ms;
   --motion-duration-refresh-only-slow-zaoigb:250ms;
+  --motion-duration-avatar-gen-ai-gradient-yfrilr:3600ms;
+  --motion-duration-avatar-loading-dots-33y9l1:1200ms;
   --motion-duration-rotate-180-6z1h8e:135ms;
   --motion-duration-rotate-90-f4h6jw:135ms;
   --motion-duration-show-paced-wu1v6q:180ms;
@@ -489,6 +492,7 @@
   --motion-easing-refresh-only-a-liv5su:cubic-bezier(0, 0, 0, 1);
   --motion-easing-refresh-only-b-wk2p34:cubic-bezier(1, 0, 0.83, 1);
   --motion-easing-refresh-only-c-2mltoq:cubic-bezier(0.84, 0, 0.16, 1);
+  --motion-easing-avatar-gen-ai-gradient-l7c9zj:cubic-bezier(0.7, 0, 0.3, 1);
   --motion-easing-rotate-180-l3wboa:cubic-bezier(0.165, 0.84, 0.44, 1);
   --motion-easing-rotate-90-ncjpnu:cubic-bezier(0.165, 0.84, 0.44, 1);
   --motion-easing-show-paced-72rrqw:ease-out;
@@ -841,7 +845,6 @@
     --color-background-tiles-disabled-ctqo0t:#2a2e33;
     --color-background-toggle-checked-disabled-uehqtc:#0a4a74;
     --color-background-toggle-default-q71d3m:#879596;
-    --color-background-avatar-default-4loi6v:#687078;
     --color-border-button-normal-active-mn8z2y:#879596;
     --color-border-button-normal-default-bqhrgd:#879596;
     --color-border-button-normal-disabled-vj6u6p:#414750;
@@ -1033,6 +1036,8 @@
   --motion-duration-refresh-only-fast-y7h37k:0ms;
   --motion-duration-refresh-only-medium-0rwzu1:0ms;
   --motion-duration-refresh-only-slow-zaoigb:0ms;
+  --motion-duration-avatar-gen-ai-gradient-yfrilr:0ms;
+  --motion-duration-avatar-loading-dots-33y9l1:0ms;
   --motion-duration-rotate-180-6z1h8e:0ms;
   --motion-duration-rotate-90-f4h6jw:0ms;
   --motion-duration-show-paced-wu1v6q:0ms;
@@ -1142,7 +1147,6 @@
   --color-background-tiles-disabled-ctqo0t:#2a2e33;
   --color-background-toggle-checked-disabled-uehqtc:#0a4a74;
   --color-background-toggle-default-q71d3m:#879596;
-  --color-background-avatar-default-4loi6v:#687078;
   --color-border-button-normal-active-mn8z2y:#879596;
   --color-border-button-normal-default-bqhrgd:#879596;
   --color-border-button-normal-disabled-vj6u6p:#414750;
@@ -1442,7 +1446,7 @@
   --color-background-tiles-disabled-ctqo0t:#e9ebed;
   --color-background-toggle-checked-disabled-uehqtc:#b5d6f4;
   --color-background-toggle-default-q71d3m:#414d5c;
-  --color-background-avatar-default-4loi6v:#414d5c;
+  --color-background-avatar-default-w7usu3:#414d5c;
   --color-border-button-normal-active-mn8z2y:#033160;
   --color-border-button-normal-default-bqhrgd:#0972d3;
   --color-border-button-normal-disabled-vj6u6p:#9ba7b6;
@@ -1792,7 +1796,6 @@
     --color-background-tiles-disabled-ctqo0t:#192534;
     --color-background-toggle-checked-disabled-uehqtc:#033160;
     --color-background-toggle-default-q71d3m:#7d8998;
-    --color-background-avatar-default-4loi6v:#5f6b7a;
     --color-border-button-normal-active-mn8z2y:#89bdee;
     --color-border-button-normal-default-bqhrgd:#539fe5;
     --color-border-button-normal-disabled-vj6u6p:#5f6b7a;
@@ -2056,7 +2059,6 @@
   --color-background-tiles-disabled-ctqo0t:#192534;
   --color-background-toggle-checked-disabled-uehqtc:#033160;
   --color-background-toggle-default-q71d3m:#7d8998;
-  --color-background-avatar-default-4loi6v:#5f6b7a;
   --color-border-button-normal-active-mn8z2y:#89bdee;
   --color-border-button-normal-default-bqhrgd:#539fe5;
   --color-border-button-normal-disabled-vj6u6p:#5f6b7a;
@@ -2254,7 +2256,6 @@
   --color-background-tiles-disabled-ctqo0t:#192534;
   --color-background-toggle-checked-disabled-uehqtc:#033160;
   --color-background-toggle-default-q71d3m:#7d8998;
-  --color-background-avatar-default-4loi6v:#5f6b7a;
   --color-border-button-normal-active-mn8z2y:#89bdee;
   --color-border-button-normal-default-bqhrgd:#539fe5;
   --color-border-button-normal-disabled-vj6u6p:#5f6b7a;
@@ -2449,7 +2450,6 @@
   --color-background-tiles-disabled-ctqo0t:#192534;
   --color-background-toggle-checked-disabled-uehqtc:#033160;
   --color-background-toggle-default-q71d3m:#7d8998;
-  --color-background-avatar-default-4loi6v:#5f6b7a;
   --color-border-button-normal-active-mn8z2y:#89bdee;
   --color-border-button-normal-default-bqhrgd:#539fe5;
   --color-border-button-normal-disabled-vj6u6p:#5f6b7a;
@@ -2657,7 +2657,6 @@
   --color-background-tiles-disabled-ctqo0t:#192534;
   --color-background-toggle-checked-disabled-uehqtc:#033160;
   --color-background-toggle-default-q71d3m:#7d8998;
-  --color-background-avatar-default-4loi6v:#5f6b7a;
   --color-border-button-normal-active-mn8z2y:#89bdee;
   --color-border-button-normal-default-bqhrgd:#539fe5;
   --color-border-button-normal-disabled-vj6u6p:#5f6b7a;
@@ -3057,7 +3056,6 @@
   --color-background-tiles-disabled-ctqo0t:#192534;
   --color-background-toggle-checked-disabled-uehqtc:#033160;
   --color-background-toggle-default-q71d3m:#7d8998;
-  --color-background-avatar-default-4loi6v:#5f6b7a;
   --color-border-button-normal-active-mn8z2y:#ffffff;
   --color-border-button-normal-default-bqhrgd:#d1d5db;
   --color-border-button-normal-disabled-vj6u6p:#5f6b7a;
@@ -3253,7 +3251,6 @@
   --color-background-tiles-disabled-ctqo0t:#192534;
   --color-background-toggle-checked-disabled-uehqtc:#033160;
   --color-background-toggle-default-q71d3m:#7d8998;
-  --color-background-avatar-default-4loi6v:#5f6b7a;
   --color-border-button-normal-active-mn8z2y:#ffffff;
   --color-border-button-normal-default-bqhrgd:#d1d5db;
   --color-border-button-normal-disabled-vj6u6p:#5f6b7a;

package/lib/internal/template/internal/components/tooltip/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export interface TooltipProps {
     value: number | string;
     trackRef: React.RefObject<HTMLElement | SVGElement>;
+    contentAttributes?: React.HTMLAttributes<HTMLDivElement>;
 }
-export default function Tooltip({ value, trackRef }: TooltipProps): JSX.Element;
+export default function Tooltip({ value, trackRef, contentAttributes }: TooltipProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/components/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;CACrD;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY,eA4BhE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACpD,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;CAC1D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,iBAAsB,EAAE,EAAE,YAAY,eA4BxF"}

package/lib/internal/template/internal/components/tooltip/index.js

@@ -8,9 +8,9 @@ import PopoverBody from '../../../popover/body';
 import Portal from '../portal';
 import popoverStyles from '../../../popover/styles.css.js';
 import styles from './styles.css.js';
-export default function Tooltip({ value, trackRef }) {
+export default function Tooltip({ value, trackRef, contentAttributes = {} }) {
     return (React.createElement(Portal, null,
-        React.createElement("div", { className: styles.root },
+        React.createElement("div", Object.assign({ className: styles.root }, contentAttributes),
             React.createElement(Transition, { in: true }, () => (React.createElement(PopoverContainer, { trackRef: trackRef, trackKey: value, size: "small", fixedWidth: false, position: "top", arrow: position => (React.createElement("div", { className: clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`]) },
                     React.createElement("div", { className: popoverStyles['arrow-outer'] }),
                     React.createElement("div", { className: popoverStyles['arrow-inner'] }))) },

package/lib/internal/template/internal/components/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAC1D,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAgB;IAC/D,OAAO,CACL,oBAAC,MAAM;QACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;YACzB,oBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,IACjB,GAAG,EAAE,CAAC,CACL,oBAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,KAAK,EACf,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,KAAK,EACd,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,CACjB,6BAAK,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,kBAAkB,QAAQ,EAAE,CAAC,CAAC;oBACpF,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI;oBAChD,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI,CAC5C,CACP;gBAED,oBAAC,WAAW,IAAC,aAAa,EAAE,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,IACpG,KAAK,CACM,CACG,CACpB,CACU,CACT,CACC,CACV,CAAC;AACJ,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 { Transition } from '../transition';\nimport PopoverContainer from '../../../popover/container';\nimport PopoverBody from '../../../popover/body';\nimport Portal from '../portal';\nimport popoverStyles from '../../../popover/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TooltipProps {\n  value: number | string;\n  trackRef: React.RefObject<HTMLElement | SVGElement>;\n}\n\nexport default function Tooltip({ value, trackRef }: TooltipProps) {\n  return (\n    <Portal>\n      <div className={styles.root}>\n        <Transition in={true}>\n          {() => (\n            <PopoverContainer\n              trackRef={trackRef}\n              trackKey={value}\n              size=\"small\"\n              fixedWidth={false}\n              position=\"top\"\n              arrow={position => (\n                <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n                  <div className={popoverStyles['arrow-outer']} />\n                  <div className={popoverStyles['arrow-inner']} />\n                </div>\n              )}\n            >\n              <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={undefined} header={undefined}>\n                {value}\n              </PopoverBody>\n            </PopoverContainer>\n          )}\n        </Transition>\n      </div>\n    </Portal>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAC1D,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,iBAAiB,GAAG,EAAE,EAAgB;IACvF,OAAO,CACL,oBAAC,MAAM;QACL,2CAAK,SAAS,EAAE,MAAM,CAAC,IAAI,IAAM,iBAAiB;YAChD,oBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,IACjB,GAAG,EAAE,CAAC,CACL,oBAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,KAAK,EACf,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,KAAK,EACd,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,CACjB,6BAAK,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,kBAAkB,QAAQ,EAAE,CAAC,CAAC;oBACpF,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI;oBAChD,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI,CAC5C,CACP;gBAED,oBAAC,WAAW,IAAC,aAAa,EAAE,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,IACpG,KAAK,CACM,CACG,CACpB,CACU,CACT,CACC,CACV,CAAC;AACJ,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 { Transition } from '../transition';\nimport PopoverContainer from '../../../popover/container';\nimport PopoverBody from '../../../popover/body';\nimport Portal from '../portal';\nimport popoverStyles from '../../../popover/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TooltipProps {\n  value: number | string;\n  trackRef: React.RefObject<HTMLElement | SVGElement>;\n  contentAttributes?: React.HTMLAttributes<HTMLDivElement>;\n}\n\nexport default function Tooltip({ value, trackRef, contentAttributes = {} }: TooltipProps) {\n  return (\n    <Portal>\n      <div className={styles.root} {...contentAttributes}>\n        <Transition in={true}>\n          {() => (\n            <PopoverContainer\n              trackRef={trackRef}\n              trackKey={value}\n              size=\"small\"\n              fixedWidth={false}\n              position=\"top\"\n              arrow={position => (\n                <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n                  <div className={popoverStyles['arrow-outer']} />\n                  <div className={popoverStyles['arrow-inner']} />\n                </div>\n              )}\n            >\n              <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={undefined} header={undefined}>\n                {value}\n              </PopoverBody>\n            </PopoverContainer>\n          )}\n        </Transition>\n      </div>\n    </Portal>\n  );\n}\n"]}

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

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (e1c06524)";
+export var PACKAGE_VERSION = "3.0.0 (29baadf5)";
 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 (e1c06524)",
+  "PACKAGE_VERSION": "3.0.0 (29baadf5)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

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

@@ -293,6 +293,7 @@ export const colorBackgroundToggleDefault: string;
 export const colorBackgroundAvatarGenAi: string;
 export const colorBackgroundAvatarDefault: string;
 export const colorTextAvatar: string;
+export const colorBackgroundLoadingBarGenAi: string;
 export const colorBorderButtonNormalActive: string;
 export const colorBorderButtonNormalDefault: string;
 export const colorBorderButtonNormalDisabled: string;

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

@@ -290,9 +290,10 @@ 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 colorBackgroundAvatarGenAi = "var(--color-background-avatar-gen-ai-i9hcw6, radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%))";
+export var colorBackgroundAvatarDefault = "var(--color-background-avatar-default-vm4u8g, #414d5c)";
 export var colorTextAvatar = "var(--color-text-avatar-jddpvm, #ffffff)";
+export var colorBackgroundLoadingBarGenAi = "var(--color-background-loading-bar-gen-ai-7qfi9s, linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%))";
 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)";

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

@@ -1046,17 +1046,21 @@ module.exports.preset = {
         "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%)"
+        "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+        "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
       },
       "colorBackgroundAvatarDefault": {
         "light": "{colorGrey600}",
-        "dark": "{colorGrey550}"
+        "dark": "{colorGrey600}"
       },
       "colorTextAvatar": {
         "light": "{colorWhite}",
         "dark": "{colorWhite}"
       },
+      "colorBackgroundLoadingBarGenAi": {
+        "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+        "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
+      },
       "colorBorderButtonNormalActive": {
         "light": "{colorBlue800}",
         "dark": "{colorBlue400}"
@@ -3188,17 +3192,21 @@ module.exports.preset = {
             "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%)"
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
           },
           "colorBackgroundAvatarDefault": {
-            "light": "{colorGrey550}",
-            "dark": "{colorGrey550}"
+            "light": "{colorGrey600}",
+            "dark": "{colorGrey600}"
           },
           "colorTextAvatar": {
             "light": "{colorWhite}",
             "dark": "{colorWhite}"
           },
+          "colorBackgroundLoadingBarGenAi": {
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
+          },
           "colorBorderButtonNormalActive": {
             "light": "{colorBlue400}",
             "dark": "{colorBlue400}"
@@ -4250,17 +4258,21 @@ module.exports.preset = {
             "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%)"
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
           },
           "colorBackgroundAvatarDefault": {
-            "light": "{colorGrey550}",
-            "dark": "{colorGrey550}"
+            "light": "{colorGrey600}",
+            "dark": "{colorGrey600}"
           },
           "colorTextAvatar": {
             "light": "{colorWhite}",
             "dark": "{colorWhite}"
           },
+          "colorBackgroundLoadingBarGenAi": {
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
+          },
           "colorBorderButtonNormalActive": {
             "light": "{colorBlue400}",
             "dark": "{colorBlue400}"
@@ -5244,17 +5256,21 @@ module.exports.preset = {
             "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%)"
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
           },
           "colorBackgroundAvatarDefault": {
             "light": "{colorGrey600}",
-            "dark": "{colorGrey550}"
+            "dark": "{colorGrey600}"
           },
           "colorTextAvatar": {
             "light": "{colorWhite}",
             "dark": "{colorWhite}"
           },
+          "colorBackgroundLoadingBarGenAi": {
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
+          },
           "colorBorderButtonNormalActive": {
             "light": "{colorWhite}",
             "dark": "{colorWhite}"
@@ -6238,17 +6254,21 @@ module.exports.preset = {
             "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%)"
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
           },
           "colorBackgroundAvatarDefault": {
             "light": "{colorGrey600}",
-            "dark": "{colorGrey550}"
+            "dark": "{colorGrey600}"
           },
           "colorTextAvatar": {
             "light": "{colorWhite}",
             "dark": "{colorWhite}"
           },
+          "colorBackgroundLoadingBarGenAi": {
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
+          },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
             "dark": "{colorTextButtonNormalHover}"
@@ -7232,17 +7252,21 @@ module.exports.preset = {
             "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%)"
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
           },
           "colorBackgroundAvatarDefault": {
             "light": "{colorGrey600}",
-            "dark": "{colorGrey550}"
+            "dark": "{colorGrey600}"
           },
           "colorTextAvatar": {
             "light": "{colorWhite}",
             "dark": "{colorWhite}"
           },
+          "colorBackgroundLoadingBarGenAi": {
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
+          },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
             "dark": "{colorTextButtonNormalHover}"
@@ -8228,17 +8252,21 @@ module.exports.preset = {
             "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%)"
+            "light": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+            "dark": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)"
           },
           "colorBackgroundAvatarDefault": {
-            "light": "{colorGrey550}",
-            "dark": "{colorGrey550}"
+            "light": "{colorGrey600}",
+            "dark": "{colorGrey600}"
           },
           "colorTextAvatar": {
             "light": "{colorWhite}",
             "dark": "{colorWhite}"
           },
+          "colorBackgroundLoadingBarGenAi": {
+            "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
+            "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
+          },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
             "dark": "{colorTextButtonNormalHover}"
@@ -9124,6 +9152,7 @@ module.exports.preset = {
       "colorBackgroundAvatarGenAi": "color",
       "colorBackgroundAvatarDefault": "color",
       "colorTextAvatar": "color",
+      "colorBackgroundLoadingBarGenAi": "color",
       "colorBorderButtonNormalActive": "color",
       "colorBorderButtonNormalDefault": "color",
       "colorBorderButtonNormalDisabled": "color",
@@ -9873,6 +9902,7 @@ module.exports.preset = {
     "colorBackgroundAvatarGenAi",
     "colorBackgroundAvatarDefault",
     "colorTextAvatar",
+    "colorBackgroundLoadingBarGenAi",
     "colorBorderButtonNormalActive",
     "colorBorderButtonNormalDefault",
     "colorBorderButtonNormalDisabled",
@@ -9991,6 +10021,9 @@ module.exports.preset = {
     "borderRadiusTiles",
     "borderRadiusToken",
     "borderRadiusTutorialPanelItem",
+    "motionDurationAvatarGenAiGradient",
+    "motionDurationAvatarLoadingDots",
+    "motionEasingAvatarGenAiGradient",
     "motionEasingResponsive",
     "motionEasingSticky",
     "motionEasingExpressive",
@@ -10319,6 +10352,7 @@ module.exports.preset = {
     "colorBackgroundAvatarGenAi": "color-background-avatar-gen-ai",
     "colorBackgroundAvatarDefault": "color-background-avatar-default",
     "colorTextAvatar": "color-text-avatar",
+    "colorBackgroundLoadingBarGenAi": "color-background-loading-bar-gen-ai",
     "colorBorderButtonNormalActive": "color-border-button-normal-active",
     "colorBorderButtonNormalDefault": "color-border-button-normal-default",
     "colorBorderButtonNormalDisabled": "color-border-button-normal-disabled",
@@ -11024,9 +11058,10 @@ 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",
+    "colorBackgroundAvatarGenAi": "--color-background-avatar-gen-ai-i9hcw6",
+    "colorBackgroundAvatarDefault": "--color-background-avatar-default-vm4u8g",
     "colorTextAvatar": "--color-text-avatar-jddpvm",
+    "colorBackgroundLoadingBarGenAi": "--color-background-loading-bar-gen-ai-7qfi9s",
     "colorBorderButtonNormalActive": "--color-border-button-normal-active-tc4102",
     "colorBorderButtonNormalDefault": "--color-border-button-normal-default-x52rkp",
     "colorBorderButtonNormalDisabled": "--color-border-button-normal-disabled-40wkb4",