@databricks/design-system 1.12.20 → 1.12.21

package/dist/patterns.js

@@ -1,8 +1,8 @@
-export { D as DocumentationSidebar, F as FIXED_VERTICAL_STEPPER_WIDTH, M as MAX_VERTICAL_WIZARD_CONTENT_WIDTH, W as Wizard, a as WizardControlled, b as WizardModal, c as WizardStepContentWrapper, u as useWizardCurrentStep } from './WizardStepContentWrapper-DrM6lQ15.js';
+export { D as DocumentationSidebar, F as FIXED_VERTICAL_STEPPER_WIDTH, M as MAX_VERTICAL_WIZARD_CONTENT_WIDTH, W as Wizard, a as WizardControlled, b as WizardModal, c as WizardStepContentWrapper, u as useWizardCurrentStep } from './WizardStepContentWrapper-CzvxVy-w.js';
 import '@emotion/react/jsx-runtime';
 import 'lodash';
 import 'react';
-import './Popover-BQ2j1MM7.js';
+import './Popover-DQEbjNyV.js';
 import '@emotion/react';
 import 'antd';
 import '@floating-ui/react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databricks/design-system",
-  "version": "1.12.20",
+  "version": "1.12.21",
   "description": "DuBois Design System",
   "keywords": [],
   "license": "ISC",
@@ -97,8 +97,8 @@
     "indexes-check": "swc-node ./scripts/index_regeneration/check.ts",
     "theme-regenerate": "swc-node ./scripts/theme_regeneration/regenerate_all.ts && databricks-prettier ./src/theme/_generated --write",
     "theme-check": "swc-node ./scripts/theme_regeneration/check.ts",
-    "prettier:fix": "databricks-prettier . --write",
-    "prettier:check": "databricks-prettier . --check",
+    "prettier:fix": "databricks-prettier --write",
+    "prettier:check": "databricks-prettier --check",
     "lint": "databricks-eslint",
     "lint:fix": "yarn lint --fix",
     "test": "databricks-jest",
@@ -170,7 +170,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "style-loader": "^3.3.1",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "usehooks-ts": "^2.9.1",
     "webpack": "^5.75.0",
     "webpack-merge": "^5.8.0"

package/scripts/theme_regeneration/common.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { camelCase } from 'lodash';
 
 export type token = {
   $type: string;
@@ -18,7 +18,7 @@ function formatColorToken(token: string): string {
   // Splices primitive path into token name; we only care about the first and last parts today. I.e. Primitives.Blue.Blue100 -> primitives.blue100
   if (token.startsWith('{') && token.endsWith('}')) {
     const parts = token.replace(/[{}]/g, '').split('/');
-    return `${_.camelCase(parts[0])}.${_.camelCase(parts[parts.length - 1])}`;
+    return `${camelCase(parts[0])}.${camelCase(parts[parts.length - 1])}`;
   }
   return token;
 }
@@ -27,7 +27,7 @@ export const flattenTokens = (tokens: tokenJson): { [key: string]: string } => {
   return Object.keys(tokens).reduce((acc, key) => {
     const token = tokens[key];
 
-    const newKey = _.camelCase(key);
+    const newKey = camelCase(key);
 
     // Skipping numbers for now.
     if (token.$type === 'number') {

package/scripts/theme_regeneration/regenerate_color_validity_enums.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 
-import _ from 'lodash';
+import { camelCase, upperFirst } from 'lodash';
 
 import { primitiveColors } from '../../src/theme/_generated/PrimitiveColors';
 import { lightColorList } from '../../src/theme/_generated/SemanticColors-Light';
@@ -16,7 +16,7 @@ export enum ValidSemanticColors {
   ${Object.keys(lightColorList)
     .sort()
     // PascalCase enum key -> camelCase enum value
-    .map((key) => `${_.upperFirst(_.camelCase(key))} = '${_.camelCase(key)}'`)
+    .map((key) => `${upperFirst(camelCase(key))} = '${camelCase(key)}'`)
     .join(',\n  ')}
 }
 `;
@@ -35,7 +35,7 @@ export enum ValidPrimitiveColors {
   ${Object.keys(primitiveColors)
     .sort()
     // PascalCase enum key -> camelCase enum value
-    .map((key) => `${_.upperFirst(_.camelCase(key))} = '${_.camelCase(key)}'`)
+    .map((key) => `${upperFirst(camelCase(key))} = '${camelCase(key)}'`)
     .join(',\n  ')}
 }
 `;

package/src/assets/icons/RowsIcon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.25 1C14.6642 1 15 1.33579 15 1.75L15 14.25C15 14.6642 14.6642 15 14.25 15L1.75 15C1.33579 15 1 14.6642 1 14.25L1 1.75C1 1.33579 1.33579 1 1.75 1L14.25 1ZM2.5 2.5L13.5 2.5L13.5 5L2.5 5L2.5 2.5ZM2.5 6.5L2.5 9.5L13.5 9.5V6.5L2.5 6.5ZM13.5 11L2.5 11L2.5 13.5L13.5 13.5V11Z" fill="#5F7281"/>
+</svg>

package/src/assets/icons/TokenIcon.svg

@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_4657_145730" fill="white">
+<path d="M5.5961 10.7989C6.33799 11.0159 7.12009 11.058 7.88097 10.9218C8.64186 10.7856 9.3608 10.4748 9.98134 10.0139C10.6019 9.55303 11.1071 8.95453 11.4573 8.26545C11.8076 7.57636 11.9932 6.81546 11.9998 6.04251C12.0064 5.26956 11.8337 4.50562 11.4952 3.81068C11.1567 3.11574 10.6618 2.50874 10.0492 2.03735C9.43656 1.56596 8.723 1.24303 7.96454 1.09392C7.20608 0.944802 6.42338 0.97357 5.67791 1.17796L5.93565 2.11802C6.53579 1.95348 7.16591 1.93032 7.7765 2.05036C8.3871 2.17041 8.96155 2.43038 9.45473 2.80987C9.94791 3.18936 10.3464 3.67803 10.6189 4.23749C10.8913 4.79695 11.0304 5.41196 11.0251 6.03423C11.0198 6.65649 10.8703 7.26905 10.5884 7.8238C10.3064 8.37854 9.89968 8.86036 9.40012 9.23141C8.90056 9.60246 8.32177 9.85263 7.70922 9.96227C7.09668 10.0719 6.46705 10.038 5.8698 9.86332L5.5961 10.7989Z"/>
+</mask>
+<path d="M5.5961 10.7989C6.33799 11.0159 7.12009 11.058 7.88097 10.9218C8.64186 10.7856 9.3608 10.4748 9.98134 10.0139C10.6019 9.55303 11.1071 8.95453 11.4573 8.26545C11.8076 7.57636 11.9932 6.81546 11.9998 6.04251C12.0064 5.26956 11.8337 4.50562 11.4952 3.81068C11.1567 3.11574 10.6618 2.50874 10.0492 2.03735C9.43656 1.56596 8.723 1.24303 7.96454 1.09392C7.20608 0.944802 6.42338 0.97357 5.67791 1.17796L5.93565 2.11802C6.53579 1.95348 7.16591 1.93032 7.7765 2.05036C8.3871 2.17041 8.96155 2.43038 9.45473 2.80987C9.94791 3.18936 10.3464 3.67803 10.6189 4.23749C10.8913 4.79695 11.0304 5.41196 11.0251 6.03423C11.0198 6.65649 10.8703 7.26905 10.5884 7.8238C10.3064 8.37854 9.89968 8.86036 9.40012 9.23141C8.90056 9.60246 8.32177 9.85263 7.70922 9.96227C7.09668 10.0719 6.46705 10.038 5.8698 9.86332L5.5961 10.7989Z" stroke="#5F7281" stroke-width="2" mask="url(#path-1-inside-1_4657_145730)"/>
+<circle cx="5" cy="6" r="4.5" stroke="#5F7281"/>
+<circle cx="5" cy="6" r="1.5" stroke="#5F7281"/>
+</svg>

package/src/assets/icons/TrendingIcon.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M6.332.14a.99.99 0 0 1 .98-.018c4.417 2.052 6.918 6.313 6.764 9.876-.066 1.497-.602 2.883-1.64 3.895-1.04 1.012-2.531 1.604-4.42 1.607a5.745 5.745 0 0 1-6.097-5.504v-.008a4.85 4.85 0 0 1 2.495-4.366.554.554 0 0 1 .776.261c.27.613.648 1.17 1.115 1.646.547-.714.8-1.637.792-2.652-.009-1.208-.388-2.502-1.024-3.605A.84.84 0 0 1 6.333.14" fill="#11171C"/></svg>

package/src/design-system/Accordion/Accordion.tsx

@@ -62,7 +62,7 @@ export interface AccordionPanelProps extends HTMLDataAttributes {
 }
 
 interface AccordionInterface extends React.FC<AccordionProps> {
-  Panel: React.FC<AccordionPanelProps>;
+  Panel: React.FC<React.PropsWithChildren<AccordionPanelProps>>;
 }
 
 function getAccordionEmotionStyles({
@@ -158,7 +158,7 @@ function getAccordionEmotionStyles({
   return css(styles);
 }
 
-export const AccordionPanel: React.FC<AccordionPanelProps> = ({
+export const AccordionPanel: React.FC<React.PropsWithChildren<AccordionPanelProps>> = ({
   dangerouslySetAntdProps,
   dangerouslyAppendEmotionCSS,
   children,

package/src/design-system/Alert/Alert.tsx

@@ -54,7 +54,7 @@ export interface AlertProps
   size?: 'small' | 'large';
 }
 
-export const Alert: React.FC<AlertProps> = ({
+export const Alert: React.FC<React.PropsWithChildren<AlertProps>> = ({
   componentId,
   analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnView],
   dangerouslySetAntdProps,

package/src/design-system/ApplyGlobalStyles/ApplyGlobalStyles.tsx

@@ -14,7 +14,7 @@ export const getGlobalStyles = (theme: Theme): SerializedStyles => {
   });
 };
 
-export const ApplyGlobalStyles: React.FC = () => {
+export const ApplyGlobalStyles: React.FC<React.PropsWithChildren<unknown>> = () => {
   const { theme } = useDesignSystemTheme();
   return <Global styles={getGlobalStyles(theme)} />;
 };

package/src/design-system/Card/Card.test.tsx

@@ -96,4 +96,56 @@ describe('<Card/>', () => {
       value: undefined,
     });
   });
+
+  describe('Card with input element', () => {
+    it('should not trigger Card onClick when input element is focused and Enter is pressed', async () => {
+      const mockOnClick = jest.fn();
+      const user = userEvent.setup();
+
+      render(
+        <Card componentId={cardComponentId} onClick={mockOnClick}>
+          <input placeholder="Type here" />
+          <div>Card content</div>
+        </Card>,
+      );
+
+      const input = screen.getByRole('textbox');
+      await user.click(input);
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+      await user.keyboard('{Enter}');
+      expect(mockOnClick).not.toHaveBeenCalledTimes(2);
+    });
+
+    it('should trigger Card onClick when Card itself is focused and Enter is pressed', async () => {
+      const mockOnClick = jest.fn();
+      const user = userEvent.setup();
+
+      render(
+        <Card componentId={cardComponentId} onClick={mockOnClick} role="button">
+          <input placeholder="Type here" />
+          <div>Card content</div>
+        </Card>,
+      );
+
+      const card = screen.getByRole('button');
+      await user.click(card);
+      await user.keyboard('{Enter}');
+      expect(mockOnClick).toHaveBeenCalled();
+    });
+
+    it('should allow textarea to function normally when focused', async () => {
+      const mockOnClick = jest.fn();
+      const user = userEvent.setup();
+
+      render(
+        <Card componentId={cardComponentId} onClick={mockOnClick} role="button">
+          <textarea placeholder="Type here" />
+          <div>Card content</div>
+        </Card>,
+      );
+      const input = screen.getByRole('textbox');
+      await user.type(input, 'Hello World\nNew Line');
+      expect(input).toHaveValue('Hello World\nNew Line');
+    });
+  });
 });

package/src/design-system/Card/Card.tsx

@@ -41,6 +41,13 @@ export interface CardProps
    */
   loading?: boolean;
 
+  /**
+   * Custom loading description
+   *
+   * @default undefined
+   */
+  loadingDescription?: string;
+
   /**
    * Custom loading content using Dubois Skeleton components
    *
@@ -155,6 +162,7 @@ export const Card = ({
   customLoadingContent,
   dangerouslyAppendEmotionCSS,
   loading,
+  loadingDescription,
   width,
   bottomBarContent,
   topBarContent,
@@ -251,8 +259,8 @@ export const Card = ({
       onKeyDown={async (e) => {
         const isEnter = e.key === 'Enter';
         const isSpace = e.key === ' ';
-        const isFocusableElement = e.target === e.currentTarget; // ensures the element itself is focused
-        if (isEnter || (isSpace && isFocusableElement)) {
+        const isCardFocused = e.target === e.currentTarget; // ensures the element itself is focused
+        if ((isEnter || isSpace) && isCardFocused) {
           await handleSelection(e);
         }
         dataAndAttributes.onKeyDown?.(e);
@@ -260,7 +268,11 @@ export const Card = ({
       {...eventContext.dataComponentProps}
     >
       {loading ? (
-        <DefaultCardLoadingContent width={width} customLoadingContent={customLoadingContent} />
+        <DefaultCardLoadingContent
+          width={width}
+          customLoadingContent={customLoadingContent}
+          loadingDescription={loadingDescription}
+        />
       ) : (
         <>
           {topBar}
@@ -280,13 +292,17 @@ export const Card = ({
   );
 };
 
-function DefaultCardLoadingContent({ customLoadingContent, width }: Pick<CardProps, 'customLoadingContent' | 'width'>) {
+function DefaultCardLoadingContent({
+  customLoadingContent,
+  width,
+  loadingDescription,
+}: Pick<CardProps, 'customLoadingContent' | 'width' | 'loadingDescription'>) {
   if (customLoadingContent) {
     return <>{customLoadingContent}</>;
   }
   return (
     <div css={{ width: width ?? LOADING_STATE_DEFAULT_WIDTH }}>
-      <TitleSkeleton label="Loading..." style={{ width: '50%' }} />
+      <TitleSkeleton label="Loading..." style={{ width: '50%' }} loadingDescription={loadingDescription} />
       {[...Array(3).keys()].map((i) => (
         <ParagraphSkeleton label="Loading..." key={i} />
       ))}

package/src/design-system/DatePicker/DatePicker.tsx

@@ -85,10 +85,12 @@ function useDatePickerStyles(): SerializedStyles {
   return getEmotionStyles(clsPrefix, theme);
 }
 
-const AccessibilityWrapper: React.FC<{
-  children: React.ReactNode;
-  ariaLive?: 'assertive' | 'polite';
-}> = ({ children, ariaLive = 'assertive', ...restProps }) => {
+const AccessibilityWrapper: React.FC<
+  React.PropsWithChildren<{
+    children: React.ReactNode;
+    ariaLive?: 'assertive' | 'polite';
+  }>
+> = ({ children, ariaLive = 'assertive', ...restProps }) => {
   const { theme } = useDesignSystemTheme();
   const ref = useRef<HTMLDivElement>(null);
 

package/src/design-system/DesignSystemEventProvider/DesignSystemEventProvider.test.tsx

@@ -10,9 +10,11 @@ import {
   useDesignSystemEventComponentCallbacks,
 } from './DesignSystemEventProvider';
 
-const MockChildComponent: React.FC<{
-  analyticsEvents?: ReadonlyArray<DesignSystemEventProviderAnalyticsEventTypes>;
-}> = (props) => {
+const MockChildComponent: React.FC<
+  React.PropsWithChildren<{
+    analyticsEvents?: ReadonlyArray<DesignSystemEventProviderAnalyticsEventTypes>;
+  }>
+> = (props) => {
   const button1Context = useDesignSystemEventComponentCallbacks({
     componentType: DesignSystemEventProviderComponentTypes.Button,
     componentId: 'button1',

package/src/design-system/DesignSystemProvider/DesignSystemProvider.test.tsx

@@ -204,7 +204,7 @@ describe('AntDConfigProvider', () => {
   });
 
   it('resets antd class when using RestoreAntDDefaultClsPrefix', () => {
-    const DSWrapperComponent: React.FC = ({ children }) => {
+    const DSWrapperComponent: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
       return (
         <DesignSystemAntDConfigProvider>
           <Button

package/src/design-system/DesignSystemProvider/DesignSystemProvider.tsx

@@ -95,14 +95,14 @@ type AntDConfigProviderPropsProps = Pick<AntDConfigProviderProps, 'prefixCls' |
 const AntDConfigProviderPropsContext = React.createContext<AntDConfigProviderPropsProps | null>(null);
 
 /** Only to be accessed by SupportsDuBoisThemes, except for special exceptions like tests and storybook. Ask in #dubois first if you need to use it. */
-export const DesignSystemThemeProvider: React.FC<DesignSystemThemeProviderProps> = ({
+export const DesignSystemThemeProvider: React.FC<React.PropsWithChildren<DesignSystemThemeProviderProps>> = ({
   isDarkMode = false,
   children,
 }) => {
   return <DesignSystemThemeContext.Provider value={{ isDarkMode }}>{children}</DesignSystemThemeContext.Provider>;
 };
 
-export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
+export const DesignSystemProvider: React.FC<React.PropsWithChildren<DesignSystemProviderProps>> = ({
   children,
   enableAnimation = false,
   zIndexBase = 1000,
@@ -172,7 +172,7 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   );
 };
 
-export const ApplyDesignSystemContextOverrides: React.FC<DesignSystemProviderProps> = ({
+export const ApplyDesignSystemContextOverrides: React.FC<React.PropsWithChildren<DesignSystemProviderProps>> = ({
   enableAnimation,
   zIndexBase,
   getPopupContainer,
@@ -204,9 +204,11 @@ export const ApplyDesignSystemContextOverrides: React.FC<DesignSystemProviderPro
 };
 
 // This is a more-specific version of `ApplyDesignSystemContextOverrides` that only allows overriding the flags.
-export const ApplyDesignSystemFlags: React.FC<{
-  flags: DesignSystemFlags;
-}> = ({ flags, children }) => {
+export const ApplyDesignSystemFlags: React.FC<
+  React.PropsWithChildren<{
+    flags: DesignSystemFlags;
+  }>
+> = ({ flags, children }) => {
   const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
   if (parentDesignSystemProviderProps === null) {
     throw new Error(

package/src/design-system/Dropdown/Dropdown.tsx

@@ -14,7 +14,7 @@ export interface DropdownProps
 /**
  * @deprecated Use `DropdownMenu` instead.
  */
-export const Dropdown: React.FC<DropdownProps> = ({ dangerouslySetAntdProps, ...props }) => {
+export const Dropdown: React.FC<React.PropsWithChildren<DropdownProps>> = ({ dangerouslySetAntdProps, ...props }) => {
   const { theme } = useDesignSystemTheme();
   return (
     <DesignSystemAntDConfigProvider>

package/src/design-system/Empty/Empty.tsx

@@ -63,7 +63,7 @@ function getEmptyDescriptionStyles(theme: Theme, clsPrefix: string): SerializedS
   return css(styles);
 }
 
-export const Empty: React.FC<EmptyProps> = (props: EmptyProps): ReactElement => {
+export const Empty: React.FC<React.PropsWithChildren<EmptyProps>> = (props: EmptyProps): ReactElement => {
   const { theme, classNamePrefix } = useDesignSystemTheme();
   const { title, description, image = <ListIcon />, button, dangerouslyAppendEmotionCSS, ...dataProps } = props;
 

package/src/design-system/Grid/Col.tsx

@@ -6,7 +6,7 @@ import type { DangerouslySetAntdProps, HTMLDataAttributes } from '../types';
 
 export interface ColProps extends AntDColProps, DangerouslySetAntdProps<AntDColProps>, HTMLDataAttributes {}
 
-export const Col: React.FC<ColProps> = ({ dangerouslySetAntdProps, ...props }: ColProps) => (
+export const Col: React.FC<React.PropsWithChildren<ColProps>> = ({ dangerouslySetAntdProps, ...props }: ColProps) => (
   <DesignSystemAntDConfigProvider>
     <AntDCol {...props} {...dangerouslySetAntdProps} />
   </DesignSystemAntDConfigProvider>

package/src/design-system/Grid/Row.tsx

@@ -8,7 +8,7 @@ export interface RowProps extends AntDRowProps, DangerouslySetAntdProps<AntDRowP
 
 export const ROW_GUTTER_SIZE = 8;
 
-export const Row: React.FC<RowProps> = ({ gutter = ROW_GUTTER_SIZE, ...props }) => {
+export const Row: React.FC<React.PropsWithChildren<RowProps>> = ({ gutter = ROW_GUTTER_SIZE, ...props }) => {
   return (
     <DesignSystemAntDConfigProvider>
       <AntDRow gutter={gutter} {...props} />

package/src/design-system/Header/Header.tsx

@@ -36,7 +36,7 @@ const getHeaderStyles = (clsPrefix: string, theme: Theme): SerializedStyles => {
   return css(importantify(styles));
 };
 
-export const Header: React.FC<HeaderProps> = ({
+export const Header: React.FC<React.PropsWithChildren<HeaderProps>> = ({
   breadcrumbs,
   title,
   titleAddOns,

package/src/design-system/Hooks/useDesignSystemTheme.tsx

@@ -49,7 +49,9 @@ export function useDesignSystemTheme(): DesignSystemThemeInterface {
 export type DesignSystemHocProps = { designSystemThemeApi: DesignSystemThemeInterface };
 
 // This is a simple typed HOC wrapper around the useDesignSystemTheme hook, for use in older react components.
-export function WithDesignSystemThemeHoc<P>(Component: React.ComponentType<P & DesignSystemHocProps>) {
+export function WithDesignSystemThemeHoc<P>(
+  Component: React.ComponentType<React.PropsWithChildren<P & DesignSystemHocProps>>,
+) {
   return function WrappedWithDesignSystemTheme(props: P): ReactElement {
     const themeValues = useDesignSystemTheme();
 

package/src/design-system/HoverCard/HoverCard.tsx

@@ -25,13 +25,15 @@ export interface HoverCardProps
   content: React.ReactNode;
   minWidth?: CSSObject['minWidth'];
   maxWidth?: CSSObject['maxWidth'];
+  backgroundColor?: CSSObject['backgroundColor'];
+  withArrow?: boolean;
 }
 /**
  * The HoverCard component combines Radix's HoverCard primitives into a single, easy-to-use component.
  * It handles the setup of the trigger, content, and arrow elements, as well as applying custom styles
  * using Emotion CSS
  */
-export const HoverCard: React.FC<HoverCardProps> = ({
+export const HoverCard: React.FC<React.PropsWithChildren<HoverCardProps>> = ({
   trigger,
   content,
   side = 'top',
@@ -39,18 +41,20 @@ export const HoverCard: React.FC<HoverCardProps> = ({
   align = 'center',
   minWidth = 220,
   maxWidth,
+  backgroundColor,
+  withArrow = true,
   ...props
 }) => {
   const { getPopupContainer } = useDesignSystemContext();
   const { useNewBorderColors } = useDesignSystemSafexFlags();
-  const hoverCardStyles = useHoverCardStyles({ minWidth, maxWidth, useNewBorderColors });
+  const hoverCardStyles = useHoverCardStyles({ minWidth, maxWidth, useNewBorderColors, backgroundColor });
   return (
     <RadixHoverCard.Root {...props}>
       <RadixHoverCard.Trigger asChild>{trigger}</RadixHoverCard.Trigger>
       <RadixHoverCard.Portal container={getPopupContainer && getPopupContainer()}>
         <RadixHoverCard.Content side={side} sideOffset={sideOffset} align={align} css={hoverCardStyles['content']}>
           {content}
-          <RadixHoverCard.Arrow css={hoverCardStyles['arrow']} />
+          {withArrow && <RadixHoverCard.Arrow css={hoverCardStyles['arrow']} />}
         </RadixHoverCard.Content>
       </RadixHoverCard.Portal>
     </RadixHoverCard.Root>
@@ -81,17 +85,19 @@ const useHoverCardStyles = ({
   minWidth,
   maxWidth,
   useNewBorderColors,
+  backgroundColor,
 }: {
   minWidth?: CSSObject['minWidth'];
   maxWidth?: CSSObject['maxWidth'];
   useNewBorderColors: boolean;
+  backgroundColor?: CSSObject['backgroundColor'];
 }): Record<string, CSSObject> => {
   const { theme } = useDesignSystemTheme();
   const { useNewShadows } = useDesignSystemSafexFlags();
 
   return {
     content: {
-      backgroundColor: theme.colors.backgroundPrimary,
+      backgroundColor: backgroundColor ?? theme.colors.backgroundPrimary,
       color: theme.colors.textPrimary,
       lineHeight: theme.typography.lineHeightBase,
       border: `1px solid ${useNewBorderColors ? theme.colors.border : theme.colors.borderDecorative}`,
@@ -118,7 +124,7 @@ const useHoverCardStyles = ({
       },
     },
     arrow: {
-      fill: theme.colors.backgroundPrimary,
+      fill: backgroundColor ?? theme.colors.backgroundPrimary,
       height: CONSTANTS.arrowHeight,
       stroke: theme.colors.borderDecorative,
       strokeDashoffset: -CONSTANTS.arrowBottomLength(),

package/src/design-system/Icon/Icon.tsx

@@ -25,11 +25,11 @@ export interface IconProps
 const getIconVariantStyles = (theme: Theme, color?: IconColors) => {
   switch (color) {
     case 'success':
-      return { color: theme.colors.textValidationSuccess };
+      return { color: `${theme.colors.textValidationSuccess} !important` };
     case 'warning':
-      return { color: theme.colors.textValidationWarning };
+      return { color: `${theme.colors.textValidationWarning} !important` };
     case 'danger':
-      return { color: theme.colors.textValidationDanger };
+      return { color: `${theme.colors.textValidationDanger} !important` };
     case 'ai':
       return {
         'svg *': {
@@ -37,7 +37,7 @@ const getIconVariantStyles = (theme: Theme, color?: IconColors) => {
         },
       };
     default:
-      return { color: color };
+      return color ? { color: `${color} !important` } : {};
   }
 };
 

package/src/design-system/Icon/__generated/icons/{InfoIcon.tsx → RowsIcon.tsx}

@@ -4,21 +4,20 @@ import type { Ref } from 'react';
 
 import type { IconProps } from '../../Icon';
 import { Icon } from '../../Icon';
-function SvgInfoIcon(props: React.SVGProps<SVGSVGElement>) {
+function SvgRowsIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 16 16" {...props}>
-      <path fill="currentColor" d="M7.25 10.5v-3h1.5v3zM8 5a.75.75 0 1 1 0 1.5A.75.75 0 0 1 8 5" />
       <path
         fill="currentColor"
         fillRule="evenodd"
-        d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12m0-1.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9"
+        d="M14.25 1a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75V1.75A.75.75 0 0 1 1.75 1zM2.5 2.5h11V5h-11zm0 4v3h11v-3zm11 4.5h-11v2.5h11z"
         clipRule="evenodd"
       />
     </svg>
   );
 }
-const InfoIcon = forwardRef((props: IconProps, forwardedRef?: Ref<HTMLSpanElement>) => {
-  return <Icon ref={forwardedRef} {...props} component={SvgInfoIcon} />;
+const RowsIcon = forwardRef((props: IconProps, forwardedRef?: Ref<HTMLSpanElement>) => {
+  return <Icon ref={forwardedRef} {...props} component={SvgRowsIcon} />;
 });
-InfoIcon.displayName = 'InfoIcon';
-export default InfoIcon;
+RowsIcon.displayName = 'RowsIcon';
+export default RowsIcon;

package/src/design-system/Icon/__generated/icons/TokenIcon.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+import type { Ref } from 'react';
+
+import type { IconProps } from '../../Icon';
+import { Icon } from '../../Icon';
+function SvgTokenIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 12 12" {...props}>
+      <mask id="TokenIcon_svg__a" fill="#fff">
+        <path d="M5.596 10.799a5 5 0 1 0 .082-9.621l.258.94a4.025 4.025 0 1 1-.066 7.745z" />
+      </mask>
+      <path
+        stroke="currentColor"
+        strokeWidth={2}
+        d="M5.596 10.799a5 5 0 1 0 .082-9.621l.258.94a4.025 4.025 0 1 1-.066 7.745z"
+        mask="url(#TokenIcon_svg__a)"
+      />
+      <circle cx={5} cy={6} r={4.5} stroke="currentColor" />
+      <circle cx={5} cy={6} r={1.5} stroke="currentColor" />
+    </svg>
+  );
+}
+const TokenIcon = forwardRef((props: IconProps, forwardedRef?: Ref<HTMLSpanElement>) => {
+  return <Icon ref={forwardedRef} {...props} component={SvgTokenIcon} />;
+});
+TokenIcon.displayName = 'TokenIcon';
+export default TokenIcon;

package/src/design-system/Icon/__generated/icons/TrendingIcon.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+import type { Ref } from 'react';
+
+import type { IconProps } from '../../Icon';
+import { Icon } from '../../Icon';
+function SvgTrendingIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 16 16" {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M6.332.14a.99.99 0 0 1 .98-.018c4.417 2.052 6.918 6.313 6.764 9.876-.066 1.497-.602 2.883-1.64 3.895-1.04 1.012-2.531 1.604-4.42 1.607a5.745 5.745 0 0 1-6.097-5.504v-.008a4.85 4.85 0 0 1 2.495-4.366.554.554 0 0 1 .776.261c.27.613.648 1.17 1.115 1.646.547-.714.8-1.637.792-2.652-.009-1.208-.388-2.502-1.024-3.605A.84.84 0 0 1 6.333.14"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+const TrendingIcon = forwardRef((props: IconProps, forwardedRef?: Ref<HTMLSpanElement>) => {
+  return <Icon ref={forwardedRef} {...props} component={SvgTrendingIcon} />;
+});
+TrendingIcon.displayName = 'TrendingIcon';
+export default TrendingIcon;

package/src/design-system/Icon/__generated/icons/index.ts

@@ -186,7 +186,6 @@ export { default as IndentIncreaseIcon } from './IndentIncreaseIcon';
 export { default as InfinityIcon } from './InfinityIcon';
 export { default as InfoBookIcon } from './InfoBookIcon';
 export { default as InfoFillIcon } from './InfoFillIcon';
-export { default as InfoIcon } from './InfoIcon';
 export { default as InfoSmallIcon } from './InfoSmallIcon';
 export { default as IngestionIcon } from './IngestionIcon';
 export { default as ItalicIcon } from './ItalicIcon';
@@ -276,6 +275,7 @@ export { default as ResizeIcon } from './ResizeIcon';
 export { default as RichTextIcon } from './RichTextIcon';
 export { default as RobotIcon } from './RobotIcon';
 export { default as RocketIcon } from './RocketIcon';
+export { default as RowsIcon } from './RowsIcon';
 export { default as RunningIcon } from './RunningIcon';
 export { default as SaveClockIcon } from './SaveClockIcon';
 export { default as SaveIcon } from './SaveIcon';
@@ -338,8 +338,10 @@ export { default as TextIcon } from './TextIcon';
 export { default as TextUnderlineIcon } from './TextUnderlineIcon';
 export { default as ThumbsDownIcon } from './ThumbsDownIcon';
 export { default as ThumbsUpIcon } from './ThumbsUpIcon';
+export { default as TokenIcon } from './TokenIcon';
 export { default as TrashIcon } from './TrashIcon';
 export { default as TreeIcon } from './TreeIcon';
+export { default as TrendingIcon } from './TrendingIcon';
 export { default as TriangleIcon } from './TriangleIcon';
 export { default as UnderlineIcon } from './UnderlineIcon';
 export { default as UndoIcon } from './UndoIcon';