@veritone-ce/design-system 2.8.12 → 2.8.13-next.1

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/BarChart.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type BarChartDatum = Record<string, unknown>;
+export interface BarChartProps {
+    data: BarChartDatum[];
+    xField?: string;
+    yField?: string;
+    xType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    yType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    xTitle?: string;
+    yTitle?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function BarChart(props: BarChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/unstable/extras/chart/Chart.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;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+export type DistributionChartDatum = Record<string, unknown>;
+export interface DistributionChartProps {
+    data: DistributionChartDatum[];
+    outliers?: DistributionChartDatum[];
+    datasetField?: string;
+    lowerField?: string;
+    q1Field?: string;
+    medianField?: string;
+    q3Field?: string;
+    upperField?: string;
+    outlierValueField?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function DistributionChart(props: DistributionChartProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export type DonutChartDatum = Record<string, unknown>;
+export interface DonutChartProps {
+    data: DonutChartDatum[];
+    thetaField?: string;
+    colorField?: string;
+    innerRadius?: number;
+    outerRadius?: number;
+    thetaType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    colorType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function DonutChart(props: Readonly<DonutChartProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export type LineChartDatum = Record<string, unknown>;
+export interface LineChartProps {
+    data: LineChartDatum[];
+    xField?: string;
+    yField?: string;
+    xType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    yType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    xTitle?: string;
+    yTitle?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function LineChart(props: Readonly<LineChartProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export type PieChartDatum = Record<string, unknown>;
+export interface PieChartProps {
+    data: PieChartDatum[];
+    thetaField?: string;
+    colorField?: string;
+    thetaType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    colorType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function PieChart(props: Readonly<PieChartProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export type TimelineChartDatum = Record<string, unknown>;
+export interface TimelineChartProps {
+    data: TimelineChartDatum[];
+    yField?: string;
+    xStartField?: string;
+    xEndField?: string;
+    yType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    xType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function TimelineChart(props: Readonly<TimelineChartProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,33 +1,15 @@
-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;
+export { default } from './Chart.js';
+export { default as Chart } from './Chart.js';
+export type { ChartProps } from './Chart.js';
+export { LineChart } from './LineChart.js';
+export type { LineChartProps, LineChartDatum } from './LineChart.js';
+export { BarChart } from './BarChart.js';
+export type { BarChartProps, BarChartDatum } from './BarChart.js';
+export { PieChart } from './PieChart.js';
+export type { PieChartProps, PieChartDatum } from './PieChart.js';
+export { DonutChart } from './DonutChart.js';
+export type { DonutChartProps, DonutChartDatum } from './DonutChart.js';
+export { TimelineChart } from './TimelineChart.js';
+export type { TimelineChartProps, TimelineChartDatum } from './TimelineChart.js';
+export { DistributionChart } from './DistributionChart.js';
+export type { DistributionChartProps, DistributionChartDatum } from './DistributionChart.js';

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

@@ -3,5 +3,8 @@ export { default as Card } from './Card/index.js';
 export * from './Card/index.js';
 export { default as LinearProgress } from './LinearProgress/index.js';
 export * from './LinearProgress/index.js';
+export * from './skeleton/index.js';
+export * from './StatCard/index.js';
+export * from './suspense/index.js';
 export { default as Tabs } from './Tabs/index.js';
 export * from './Tabs/index.js';

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

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import { type FormControlProps } from '../../FormControl/index.js';
+import { type CardProps, CardTitleProps } from '../Card/index.js';
+export type SkeletonProps = {
+    variant?: 'text' | 'rectangular' | 'rounded';
+    style?: React.CSSProperties;
+    children?: ReactNode;
+    className?: string;
+};
+export declare function Skeleton({ variant, children, style, className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export type CardSkeletonProps = Omit<SkeletonProps, 'variant'> & CardProps;
+export declare function CardSkeleton({ inset, className, ...cardProps }: CardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export type FormControlSkeletonProps = FormControlProps & {};
+export declare function FormControlSkeleton({ label, children, ...formControlProps }: FormControlSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardTitleSkeleton({ start, actions, children, ...props }: CardTitleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export * from './loader.js';
+export type LoadingBoundaryProps = {
+    force?: boolean;
+    loader?: ReactNode;
+    error?: ReactNode;
+    children?: ReactNode;
+};
+export declare function LoadingBoundary(props: LoadingBoundaryProps): string | number | true | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element;

package/dist/types/unstable/suspense/loader.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type LoaderProps = {
+    style?: React.CSSProperties;
+    className?: string;
+};
+export declare function Loader(props: LoaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogLoader({ className, ...props }: LoaderProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "2.8.12",
+  "version": "2.8.13-next.1",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [
@@ -69,12 +69,6 @@
     "./baseline.css": "./dist/esm/styles/external/baseline.css",
     "./fonts/default.css": "./dist/esm/styles/external/fonts/default.css"
   },
-  "sideEffects": [
-    "src/styles/baseline.ts",
-    "src/fonts/default.ts",
-    "dist/esm/styles/baseline.js",
-    "dist/esm/styles/fonts/default.js"
-  ],
   "files": [
     "dist",
     "eslint-config"