@veritone-ce/design-system 2.8.11 → 2.8.13-next.0

package/dist/esm/unstable/StatCard/index.js

@@ -0,0 +1,116 @@
+'use strict';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Suspense } from 'react';
+import { CardSkeleton } from '../skeleton/index.js';
+import Card from '../Card/components.js';
+import { cx } from '../../styles/cx.js';
+import '../../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../../styles/defaultTheme.js';
+import '../../styles/provider.client.js';
+import '../../styles/css-vars.js';
+import Typography from '../../Typography/index.js';
+import ErrorBoundary from '../../ErrorBoundary/index.js';
+import Button from '../../Button/index.js';
+import styles from './index.module.scss.js';
+
+function StatCard({
+  className,
+  selected,
+  onSelect,
+  children,
+  palette,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { onClick: onSelect, className: styles.clickContainer, children: /* @__PURE__ */ jsx(
+    Card,
+    {
+      inset: "medium",
+      "data-selected": selected,
+      className: cx(
+        styles.statCardContainer,
+        onSelect && styles.onSelect,
+        className
+      ),
+      palette,
+      ...props,
+      children
+    }
+  ) });
+}
+function StatCardSkeleton({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CardSkeleton,
+    {
+      inset: "medium",
+      className: cx(styles.statCardContainer, className),
+      ...props,
+      children
+    }
+  );
+}
+function Stat({
+  stat,
+  size = "medium",
+  unit,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style,
+      "data-size": size,
+      className: cx(styles.statItem, className),
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "title", leadingTrim: true, className: styles.stat, children: stat }),
+        /* @__PURE__ */ jsx(Typography, { variant: "label", leadingTrim: true, className: styles.unit, children: unit })
+      ]
+    }
+  );
+}
+function StatCardLoadingBoundary({
+  loader,
+  error,
+  children,
+  loadingChildren,
+  ...cardProps
+}) {
+  const skeleton = /* @__PURE__ */ jsx(CardSkeleton, { ...cardProps, children: loadingChildren ?? /* @__PURE__ */ jsx(Stat, { stat: "--" }) });
+  return /* @__PURE__ */ jsx(ErrorBoundary, { fallback: error, children: /* @__PURE__ */ jsx(Suspense, { fallback: loader || skeleton, children: /* @__PURE__ */ jsx(StatCard, { ...cardProps, children }) }) });
+}
+function StatSeparator() {
+  return /* @__PURE__ */ jsx("div", { className: styles.separator });
+}
+function StatActions(props) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: props.style,
+      className: cx(styles.statActions, props.className),
+      children: props.children
+    }
+  );
+}
+function StatButton({
+  endIcon,
+  className,
+  ...buttonProps
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "tertiary",
+      endIcon,
+      ...buttonProps,
+      className: cx(endIcon && styles.buttonEndIcon, className)
+    }
+  );
+}
+
+export { Stat, StatActions, StatButton, StatCard, StatCardLoadingBoundary, StatCardSkeleton, StatSeparator };

package/dist/esm/unstable/StatCard/index.module.scss.js

@@ -0,0 +1,3 @@
+var styles = {"clickContainer":"vt_ce_StatCard_clickContainer__e8381582","statCardContainer":"vt_ce_StatCard_statCardContainer__5aaeed9e","onSelect":"vt_ce_StatCard_onSelect__29f9a2fd","statItem":"vt_ce_StatCard_statItem__de1fc3fc","stat":"vt_ce_StatCard_stat__795d6781","unit":"vt_ce_StatCard_unit__66996d85","statActions":"vt_ce_StatCard_statActions__8b3a6076","buttonEndIcon":"vt_ce_StatCard_buttonEndIcon__f4ac7910","separator":"vt_ce_StatCard_separator__ccecd5e1"};
+
+export { styles as default };

package/dist/esm/unstable/index.js

@@ -1,6 +1,10 @@
 'use strict';
 export { Breadcrumbs, ButtonBreadcrumb, CustomBreadcrumb, LinkBreadcrumb, SeparatorBreadcrumb } from './Breadcrumbs/index.js';
-export { default as Card } from './Card/index.js';
+export { default as Card, CardActions, CardContent, CardDescription, CardEnd, CardStart, CardTabs, CardTitle, CardTypography } from './Card/components.js';
 export { default as LinearProgress } from './LinearProgress/index.js';
+export { CardSkeleton, CardTitleSkeleton, FormControlSkeleton, Skeleton } from './skeleton/index.js';
+export { Stat, StatActions, StatButton, StatCard, StatCardLoadingBoundary, StatCardSkeleton, StatSeparator } from './StatCard/index.js';
+export { LoadingBoundary } from './suspense/index.js';
 export { Tab, default as Tabs } from './Tabs/index.js';
 export { createLinkBreadcrumbComponent } from './Breadcrumbs/factory.js';
+export { DialogLoader, Loader } from './suspense/loader.js';

package/dist/esm/unstable/skeleton/index.js

@@ -0,0 +1,69 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import { Skeleton as Skeleton$1 } from '@mui/material';
+import styles from './index.module.scss.js';
+import FormControl from '../../FormControl/index.js';
+import { CardTitle } from '../Card/components.js';
+import { cx } from '../../styles/cx.js';
+import '../../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../../styles/defaultTheme.js';
+import '../../styles/provider.client.js';
+import '../../styles/css-vars.js';
+
+function Skeleton({
+  variant,
+  children,
+  style,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Skeleton$1, { variant, style, className, children });
+}
+function CardSkeleton({
+  inset,
+  className,
+  ...cardProps
+}) {
+  return /* @__PURE__ */ jsx(
+    Skeleton$1,
+    {
+      variant: "rounded",
+      "data-inset": inset ?? "medium",
+      className: cx(styles.card, className),
+      ...cardProps
+    }
+  );
+}
+function FormControlSkeleton({
+  label,
+  children,
+  ...formControlProps
+}) {
+  return /* @__PURE__ */ jsx(
+    FormControl,
+    {
+      label: label ?? /* @__PURE__ */ jsx(Skeleton, { className: styles.formControlSkeletonLabel }),
+      ...formControlProps,
+      children: children ?? /* @__PURE__ */ jsx(Skeleton, { className: styles.formControlSkeletonControl })
+    }
+  );
+}
+function CardTitleSkeleton({
+  start,
+  actions,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CardTitle,
+    {
+      ...props,
+      start: start && /* @__PURE__ */ jsx(Skeleton, { className: styles.cardTitleStart, children: start }),
+      actions: actions && /* @__PURE__ */ jsx(Skeleton, { className: styles.cardTitleActions, children: actions }),
+      children: /* @__PURE__ */ jsx(Skeleton, {})
+    }
+  );
+}
+
+export { CardSkeleton, CardTitleSkeleton, FormControlSkeleton, Skeleton };

package/dist/esm/unstable/skeleton/index.module.scss.js

@@ -0,0 +1,3 @@
+var styles = {"card":"vt_ce_skeleton_card__32ebc0cb","cardTitleStart":"vt_ce_skeleton_cardTitleStart__a249a958","cardTitleActions":"vt_ce_skeleton_cardTitleActions__6dd3b355","formControlSkeletonLabel":"vt_ce_skeleton_formControlSkeletonLabel__3e7081ff","formControlSkeletonControl":"vt_ce_skeleton_formControlSkeletonControl__d29d40f5"};
+
+export { styles as default };

package/dist/esm/unstable/suspense/index.js

@@ -0,0 +1,15 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import { Suspense } from 'react';
+import { Loader } from './loader.js';
+export { DialogLoader } from './loader.js';
+import ErrorBoundary from '../../ErrorBoundary/index.js';
+
+function LoadingBoundary(props) {
+  if (props.force) {
+    return props.loader || /* @__PURE__ */ jsx(Loader, {});
+  }
+  return /* @__PURE__ */ jsx(ErrorBoundary, { fallback: props.error, children: /* @__PURE__ */ jsx(Suspense, { fallback: props.loader || /* @__PURE__ */ jsx(Loader, {}), children: props.children }) });
+}
+
+export { Loader, LoadingBoundary };

package/dist/esm/unstable/suspense/index.module.scss.js

@@ -0,0 +1,3 @@
+var styles = {"container":"vt_ce_suspense_container__fb891ef4","dialogContainer":"vt_ce_suspense_dialogContainer__2ae26a9a"};
+
+export { styles as default };

package/dist/esm/unstable/suspense/loader.js

@@ -0,0 +1,20 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import styles from './index.module.scss.js';
+import CircularProgress from '../../CircularProgress/index.js';
+import { cx } from '../../styles/cx.js';
+import '../../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../../styles/defaultTheme.js';
+import '../../styles/provider.client.js';
+import '../../styles/css-vars.js';
+
+function Loader(props) {
+  return /* @__PURE__ */ jsx("div", { style: props.style, className: cx(styles.container, props.className), children: /* @__PURE__ */ jsx(CircularProgress, {}) });
+}
+function DialogLoader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Loader, { ...props, className: cx(styles.dialogContainer, className) });
+}
+
+export { DialogLoader, Loader };

package/dist/types/Dialog/components.d.ts

@@ -1,44 +1,39 @@
 import * as React from 'react';
 import { type DialogOptions } from './state.js';
+import { type ButtonProps } from '../Button/index.js';
 import { type IconButtonProps } from '../IconButton/index.js';
-export type DialogProps = DialogOptions & {
+import { type CardContentProps, type CardEndProps, type CardProps, type CardStartProps, type CardTitleProps, type CardTypographyProps, type CardDescriptionProps, type CardActionsProps } from '../unstable/Card/index.js';
+export type DialogProps = DialogOptions & CardProps & {
     portalEl?: HTMLElement | null | React.MutableRefObject<HTMLElement | null>;
     lockScroll?: boolean;
     disableAutoFocus?: boolean;
     preventOutsideDismiss?: boolean;
     preventEscapeDismiss?: boolean;
-    children: React.ReactNode;
-    'data-testid'?: string;
-    style?: React.CSSProperties;
-    className?: string;
     overlayStyle?: React.CSSProperties;
     overlayClassName?: string;
 };
-declare const Dialog: React.ForwardRefExoticComponent<DialogOptions & {
+declare const Dialog: React.ForwardRefExoticComponent<DialogOptions & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    inset?: import("../unstable/Card/components.js").CardInset | undefined;
+    palette?: import("../styles/palette.js").PaletteSurfaceColors | undefined;
+} & {
     portalEl?: HTMLElement | React.MutableRefObject<HTMLElement | null> | null | undefined;
     lockScroll?: boolean | undefined;
     disableAutoFocus?: boolean | undefined;
     preventOutsideDismiss?: boolean | undefined;
     preventEscapeDismiss?: boolean | undefined;
-    children: React.ReactNode;
-    'data-testid'?: string | undefined;
-    style?: React.CSSProperties | undefined;
-    className?: string | undefined;
     overlayStyle?: React.CSSProperties | undefined;
     overlayClassName?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default Dialog;
-export declare const DialogStart: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    as?: keyof React.JSX.IntrinsicElements | undefined;
-    variant?: "title" | "h1" | "h2" | "h3" | "h4" | "label" | "paragraph1" | "paragraph2" | "paragraph3" | "button" | "buttonSmall" | "input" | "statusChip" | undefined;
-    color?: "inherit" | "disabled" | keyof import("../styles/palette.js").PaletteText | undefined;
-    leadingTrim?: boolean | undefined;
-    children?: React.ReactNode;
-    'data-testid'?: string | undefined;
-    style?: React.CSSProperties | undefined;
-    className?: string | undefined;
+export type DialogStartProps = CardStartProps;
+export declare const DialogStart: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    disableInset?: import("../unstable/Card/components.js").DisableInset | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export type DialogContentProps = CardContentProps;
+export declare const DialogContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    disableInset?: import("../unstable/Card/components.js").DisableInset | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const DialogContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DialogEndProps = CardEndProps;
 export declare const DialogEnd: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
     as?: keyof React.JSX.IntrinsicElements | undefined;
     variant?: "title" | "h1" | "h2" | "h3" | "h4" | "label" | "paragraph1" | "paragraph2" | "paragraph3" | "button" | "buttonSmall" | "input" | "statusChip" | undefined;
@@ -48,7 +43,10 @@ export declare const DialogEnd: React.ForwardRefExoticComponent<Omit<React.Detai
     'data-testid'?: string | undefined;
     style?: React.CSSProperties | undefined;
     className?: string | undefined;
+} & {
+    disableInset?: import("../unstable/Card/components.js").DisableInset | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
+export type DialogTitleProps = CardTitleProps;
 export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
     as?: keyof React.JSX.IntrinsicElements | undefined;
     variant?: "title" | "h1" | "h2" | "h3" | "h4" | "label" | "paragraph1" | "paragraph2" | "paragraph3" | "button" | "buttonSmall" | "input" | "statusChip" | undefined;
@@ -58,7 +56,12 @@ export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<React.Det
     'data-testid'?: string | undefined;
     style?: React.CSSProperties | undefined;
     className?: string | undefined;
+} & {
+    start?: React.ReactNode;
+    actions?: React.ReactNode;
+    containerProps?: CardStartProps | undefined;
 } & React.RefAttributes<HTMLHeadingElement>>;
+export type DialogTypographyProps = CardTypographyProps;
 export declare const DialogTypography: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
     as?: keyof React.JSX.IntrinsicElements | undefined;
     variant?: "title" | "h1" | "h2" | "h3" | "h4" | "label" | "paragraph1" | "paragraph2" | "paragraph3" | "button" | "buttonSmall" | "input" | "statusChip" | undefined;
@@ -69,6 +72,7 @@ export declare const DialogTypography: React.ForwardRefExoticComponent<Omit<Reac
     style?: React.CSSProperties | undefined;
     className?: string | undefined;
 } & React.RefAttributes<HTMLParagraphElement>>;
+export type DialogDescriptionProps = CardDescriptionProps;
 export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
     as?: keyof React.JSX.IntrinsicElements | undefined;
     variant?: "title" | "h1" | "h2" | "h3" | "h4" | "label" | "paragraph1" | "paragraph2" | "paragraph3" | "button" | "buttonSmall" | "input" | "statusChip" | undefined;
@@ -79,7 +83,9 @@ export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<Rea
     style?: React.CSSProperties | undefined;
     className?: string | undefined;
 } & React.RefAttributes<HTMLParagraphElement>>;
+export type DialogActionsProps = CardActionsProps;
 export declare const DialogActions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DialogCloseButtonProps = ButtonProps;
 export declare const DialogCloseButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     variant?: import("../Button/index.js").ButtonVariant | undefined;
     palette?: import("../styles/palette.js").PaletteActionVariantsColors | import("../styles/css-vars.js").RecursiveStringObject<import("../styles/palette.js").PaletteActionVariantsColors> | undefined;
@@ -92,4 +98,5 @@ export declare const DialogCloseButton: React.ForwardRefExoticComponent<Omit<Rea
     children?: React.ReactNode;
     'data-testid'?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
+export type DialogCloseIconButtonProps = IconButtonProps;
 export declare const DialogCloseIconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/Dialog/factory.d.ts

@@ -3,16 +3,15 @@ import { PopoverPortalElProp } from '../popover/types.js';
 export type DialogFactoryOptions = {
     portalEl?: PopoverPortalElProp;
 };
-export declare function createDialogComponent({ portalEl }: DialogFactoryOptions): React.ForwardRefExoticComponent<import("./state.js").DialogOptions & {
+export declare function createDialogComponent({ portalEl }: DialogFactoryOptions): React.ForwardRefExoticComponent<import("./state.js").DialogOptions & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    inset?: import("../unstable/index.js").CardInset | undefined;
+    palette?: import("../index.js").PaletteSurfaceColors | undefined;
+} & {
     portalEl?: HTMLElement | React.MutableRefObject<HTMLElement | null> | null | undefined;
     lockScroll?: boolean | undefined;
     disableAutoFocus?: boolean | undefined;
     preventOutsideDismiss?: boolean | undefined;
     preventEscapeDismiss?: boolean | undefined;
-    children: React.ReactNode;
-    'data-testid'?: string | undefined;
-    style?: React.CSSProperties | undefined;
-    className?: string | undefined;
     overlayStyle?: React.CSSProperties | undefined;
     overlayClassName?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/types/Dialog/state.d.ts

@@ -12,10 +12,6 @@ export interface DialogOptions {
     preventEscapeDismiss?: boolean;
 }
 export declare function useDialog({ open, onDismiss: dismissDialog, preventOutsideDismiss, preventEscapeDismiss }: DialogOptions): {
-    labelId: string | undefined;
-    descriptionId: string | undefined;
-    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
-    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
     placement: import("@floating-ui/utils").Placement;
     strategy: import("@floating-ui/utils").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
@@ -61,16 +57,9 @@ export declare function useDialog({ open, onDismiss: dismissDialog, preventOutsi
     open: boolean;
     dismiss: () => void;
 };
-export type DialogContextType = (ReturnType<typeof useDialog> & {
-    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
-    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
-}) | null;
+export type DialogContextType = ReturnType<typeof useDialog> | null;
 export declare const DialogContext: React.Context<DialogContextType>;
 export declare const useDialogContext: () => {
-    labelId: string | undefined;
-    descriptionId: string | undefined;
-    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
-    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
     placement: import("@floating-ui/utils").Placement;
     strategy: import("@floating-ui/utils").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
@@ -115,7 +104,4 @@ export declare const useDialogContext: () => {
     }) | undefined) => Record<string, unknown>;
     open: boolean;
     dismiss: () => void;
-} & {
-    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
-    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
 };

package/dist/types/TablePagination/index.d.ts

@@ -15,4 +15,4 @@ export type TablePaginationProps = {
     showPageNumberInput?: boolean;
     className?: string;
 };
-export default function TablePagination({ page, count, rowsPerPage, rowsPerPageOptions, rowsPerPageLabel, rowsPerPageVariant, showPageNumberInput, ...props }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;
+export default function TablePagination({ page, count, rowsPerPage, rowsPerPageOptions, rowsPerPageLabel, rowsPerPageVariant, showPageNumberInput, onChangePage, onRowsPerPageChange, 'data-pendo-prev': dataPendoPrev, 'data-pendo-next': dataPendoNext, 'data-pendo-select': dataPendoSelect, className, ...props }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/styles/createPalette.d.ts

@@ -1,3 +1,14 @@
-import type { Palette } from './palette.js';
-import { type PaletteOptions } from './themeOptions.js';
+import type { Palette, PaletteAction, PaletteActionVariantsColors, PaletteBackground, PaletteBrand, PaletteColor, PaletteIndicator, PaletteStroke, PaletteSurfaceColors, PaletteTable, PaletteText, PaletteTooltip } from './palette.js';
+import { type PaletteActionOptions, type PaletteActionVariantsColorsOptions, type PaletteBackgroundOptions, type PaletteBrandOptions, type PaletteColorOptions, type PaletteIndicatorOptions, type PaletteOptions, type PaletteStrokeOptions, type PaletteSurfaceColorsOptions, type PaletteTableOptions, type PaletteTextOptions, type PaletteTooltipOptions } from './themeOptions.js';
+export declare function createPaletteColor(options: PaletteColorOptions): PaletteColor;
+export declare function createPaletteSurfaceColors(options: PaletteSurfaceColorsOptions): PaletteSurfaceColors;
+export declare function createPaletteActionVariantsColors(options: PaletteActionVariantsColorsOptions, disabled: PaletteSurfaceColors): PaletteActionVariantsColors;
+export declare function createPaletteBrand(options: PaletteBrandOptions, disabled: PaletteSurfaceColors): PaletteBrand;
+export declare function createPaletteText(options: PaletteTextOptions): PaletteText;
+export declare function createPaletteAction(options: PaletteActionOptions, disabled: PaletteSurfaceColors, text: PaletteColor): PaletteAction;
+export declare function createPaletteIndicator(options: PaletteIndicatorOptions, disabled: PaletteSurfaceColors): PaletteIndicator;
+export declare function createPaletteTable(options: PaletteTableOptions, disabled: PaletteSurfaceColors): PaletteTable;
+export declare function createPaletteTooltip(options: PaletteTooltipOptions): PaletteTooltip;
+export declare function createPaletteBackground(options: PaletteBackgroundOptions): PaletteBackground;
+export declare function createPaletteStroke(options: PaletteStrokeOptions): PaletteStroke;
 export declare function createPalette(options?: PaletteOptions): Palette;

package/dist/types/unstable/Card/components.d.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { type PaletteSurfaceColors } from '../../styles/index.js';
+import { type TypographyProps } from '../../Typography/index.js';
+import { type TabsProps } from '../Tabs/index.js';
+export type CardInset = 'small' | 'medium';
+export type DisableInset = 'horizontal' | 'vertical' | boolean;
+export type CardProps = React.ComponentPropsWithoutRef<'div'> & {
+    inset?: CardInset;
+    palette?: PaletteSurfaceColors;
+};
+declare const Card: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    inset?: CardInset | undefined;
+    palette?: PaletteSurfaceColors | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Card;
+export type CardStartProps = React.ComponentPropsWithoutRef<'div'> & {
+    disableInset?: DisableInset;
+};
+export declare const CardStart: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    disableInset?: DisableInset | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export type CardContentProps = React.ComponentPropsWithoutRef<'div'> & {
+    disableInset?: DisableInset;
+};
+export declare const CardContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    disableInset?: DisableInset | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export type CardEndProps = TypographyProps & {
+    disableInset?: DisableInset;
+};
+export declare const CardEnd: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    as?: keyof React.JSX.IntrinsicElements | undefined;
+    variant?: "title" | "h1" | "h2" | "h3" | "h4" | "label" | "paragraph1" | "paragraph2" | "paragraph3" | "button" | "buttonSmall" | "input" | "statusChip" | undefined;
+    color?: "inherit" | "disabled" | keyof import("../../styles/palette.js").PaletteText | undefined;
+    leadingTrim?: boolean | undefined;
+    children?: React.ReactNode;
+    'data-testid'?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+} & {
+    disableInset?: DisableInset | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export type CardTitleProps = TypographyProps & {
+    start?: React.ReactNode;
+    actions?: React.ReactNode;
+    containerProps?: CardStartProps;
+};
+export declare const CardTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    as?: keyof React.JSX.IntrinsicElements | undefined;
+    variant?: "title" | "h1" | "h2" | "h3" | "h4" | "label" | "paragraph1" | "paragraph2" | "paragraph3" | "button" | "buttonSmall" | "input" | "statusChip" | undefined;
+    color?: "inherit" | "disabled" | keyof import("../../styles/palette.js").PaletteText | undefined;
+    leadingTrim?: boolean | undefined;
+    children?: React.ReactNode;
+    'data-testid'?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+} & {
+    start?: React.ReactNode;
+    actions?: React.ReactNode;
+    containerProps?: CardStartProps | undefined;
+} & React.RefAttributes<HTMLHeadingElement>>;
+export type CardTabsProps = TabsProps & {
+    align?: 'start' | 'center';
+    actions?: React.ReactNode;
+};
+export declare function CardTabs({ align, actions, className, style, ...props }: CardTabsProps): import("react/jsx-runtime").JSX.Element;
+export type CardTypographyProps = TypographyProps;
+export declare const CardTypography: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    as?: keyof React.JSX.IntrinsicElements | undefined;
+    variant?: "title" | "h1" | "h2" | "h3" | "h4" | "label" | "paragraph1" | "paragraph2" | "paragraph3" | "button" | "buttonSmall" | "input" | "statusChip" | undefined;
+    color?: "inherit" | "disabled" | keyof import("../../styles/palette.js").PaletteText | undefined;
+    leadingTrim?: boolean | undefined;
+    children?: React.ReactNode;
+    'data-testid'?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLParagraphElement>>;
+export type CardDescriptionProps = TypographyProps;
+export declare const CardDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    as?: keyof React.JSX.IntrinsicElements | undefined;
+    variant?: "title" | "h1" | "h2" | "h3" | "h4" | "label" | "paragraph1" | "paragraph2" | "paragraph3" | "button" | "buttonSmall" | "input" | "statusChip" | undefined;
+    color?: "inherit" | "disabled" | keyof import("../../styles/palette.js").PaletteText | undefined;
+    leadingTrim?: boolean | undefined;
+    children?: React.ReactNode;
+    'data-testid'?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLParagraphElement>>;
+export type CardActionsProps = React.ComponentPropsWithoutRef<'div'>;
+export declare const CardActions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/unstable/Card/index.d.ts

@@ -1,11 +1,2 @@
-import React from 'react';
-export type CardInset = 'small' | 'medium';
-export type CardProps = {
-    children?: React.ReactNode;
-    inset?: CardInset;
-    'data-testid'?: string;
-    style?: React.CSSProperties;
-    className?: string;
-};
-declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
-export default Card;
+export * from './components.js';
+export { default } from './components.js';

package/dist/types/unstable/Card/state.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export declare function useCard(): {
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+};
+export type CardContextType = ReturnType<typeof useCard>;
+export declare const CardContext: React.Context<{
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+}>;
+export declare const useCardContext: () => {
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+};

package/dist/types/unstable/StatCard/index.d.ts

@@ -0,0 +1,33 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { LoadingBoundaryProps } from '../suspense/index.js';
+import { CardProps } from '../Card/index.js';
+import { type PaletteSurfaceColors } from '../../styles/index.js';
+import { type ButtonProps } from '../../Button/index.js';
+export type StatCardProps = Omit<CardProps, 'inset'> & {
+    palette?: PaletteSurfaceColors;
+    selected?: boolean;
+    onSelect?(): void;
+};
+export declare function StatCard({ className, selected, onSelect, children, palette, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatCardSkeleton({ className, children, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+export type StatCardContentProps = {
+    stat: ReactNode;
+    unit?: ReactNode;
+    size?: 'medium' | 'small';
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function Stat({ stat, size, unit, className, style }: StatCardContentProps): import("react/jsx-runtime").JSX.Element;
+export type StatCardLoadingBoundaryProps = LoadingBoundaryProps & StatCardProps & {
+    loadingChildren?: ReactNode;
+};
+export declare function StatCardLoadingBoundary({ loader, error, children, loadingChildren, ...cardProps }: StatCardLoadingBoundaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatSeparator(): import("react/jsx-runtime").JSX.Element;
+export type StatActionsProps = {
+    children?: ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+};
+export declare function StatActions(props: StatActionsProps): import("react/jsx-runtime").JSX.Element;
+export type StatButtonProps = Omit<ButtonProps, 'variant' | 'type'> & {};
+export declare function StatButton({ endIcon, className, ...buttonProps }: StatButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/unstable/extras/chart/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { VisualizationSpec } from 'vega-embed';
+export interface ChartProps {
+    /**
+     * Vega or Vega-Lite specification
+     */
+    spec: VisualizationSpec;
+    /**
+     * Data to be used in the chart
+     */
+    data?: Record<string, unknown[]>;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Inline styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Width of the chart
+     */
+    width?: number;
+    /**
+     * Height of the chart
+     */
+    height?: number;
+}
+/**
+ * Chart component that wraps Vega/Vega-Lite visualizations
+ */
+declare const Chart: (props: ChartProps) => import("react/jsx-runtime").JSX.Element;
+export default Chart;