@veritone-ce/design-system 2.3.13 → 2.4.0

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

@@ -34,9 +34,27 @@ declare const Drawer: React.ForwardRefExoticComponent<Omit<DrawerOptions, "dismi
     'data-testid'?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default Drawer;
-export declare const DrawerStart: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerStart: 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<HTMLDivElement>>;
 export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const DrawerEnd: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerEnd: 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<HTMLDivElement>>;
 export type DrawerTitleContainerVariant = 'text' | 'bar';
 export type DrawerTitlePalette = ResolvablePaletteValue<PaletteSurfaceColors>;
 export type DrawerTitleProps = TypographyProps & {
@@ -44,13 +62,40 @@ export type DrawerTitleProps = TypographyProps & {
     actions?: React.ReactNode;
     container?: DrawerTitleContainerVariant;
 };
-export declare const DrawerTitle: React.ForwardRefExoticComponent<TypographyProps & {
+export declare const DrawerTitle: 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;
+} & {
     palette?: PaletteSurfaceColors | import("../styles/css-vars.js").RecursiveStringObject<PaletteSurfaceColors> | undefined;
     actions?: React.ReactNode;
     container?: DrawerTitleContainerVariant | undefined;
 } & React.RefAttributes<HTMLHeadingElement>>;
-export declare const DrawerTypography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLParagraphElement>>;
-export declare const DrawerDescription: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLParagraphElement>>;
+export declare const DrawerTypography: 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 declare const DrawerDescription: 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 declare const DrawerActions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const DrawerCloseButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     variant?: import("../Button/index.js").ButtonVariant | undefined;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PaletteActionVariantsColors } from '../styles/index.js';
+export type StatusChipPalette = PaletteActionVariantsColors;
+export type StatusChipProps = {
+    children: React.ReactNode;
+    palette?: StatusChipPalette;
+    'data-testid'?: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const StatusChip: ({ children, palette: palette, ...props }: StatusChipProps) => import("react/jsx-runtime").JSX.Element;
+export default StatusChip;

package/dist/types/Table/AutoTable/common.d.ts

@@ -0,0 +1,31 @@
+import { ColumnDef as RTColumnDef, PaginationState, Row, RowSelectionState, SortingState, RowData } from '@tanstack/react-table';
+import type { ColumnDef, ColumnHelper } from './types.js';
+import React from 'react';
+export declare function createColumnHelper<TData extends RowData, TMeta = unknown>(): ColumnHelper<TData, TMeta>;
+export type AutoTableHookOptions<TData, TMeta = unknown> = {
+    data: TData[];
+    columns: ColumnDef<TData, TMeta>[];
+    meta?: TMeta;
+    getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
+    sorting: SortingState;
+    enableSorting: boolean;
+    onSortingChange(newSorting: SortingState): void;
+    manualSorting?: boolean;
+    rowSelection: RowSelectionState;
+    enableRowSelection: boolean;
+    onRowSelectionChange(newRowSelection: RowSelectionState): void;
+    pagination: PaginationState;
+    enablePagination: boolean;
+    onPageChange(newPage: number): void;
+    onRowsPerPageChange(newRowsPerPage: number): void;
+    manualPagination?: boolean;
+    manualRowCount?: number;
+};
+export declare function useAutoTable<TData, TMeta = unknown>(options: AutoTableHookOptions<TData, TMeta>): import("@tanstack/react-table").Table<TData>;
+export declare function mapColumnDefs<TData, TMeta>(columnDefs: ColumnDef<TData, TMeta>[]): RTColumnDef<TData>[];
+export declare function mapColumnDef<TData, TMeta, VData = unknown>(columnDef: ColumnDef<TData, TMeta, VData>): RTColumnDef<TData, VData>;
+export type ErrorContainerProps = {
+    error: boolean | string;
+};
+export type ErrorContainer = React.ComponentType<ErrorContainerProps>;
+export declare const DefaultErrorContainer: ErrorContainer;

package/dist/types/Table/AutoTable/controlled.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AutoTableHookOptions, type ErrorContainer as ErrorContainerType } from './common.js';
+export type ControlledAutoTableProps<TData, TMeta = unknown> = AutoTableHookOptions<TData, TMeta> & {
+    stickyHeader?: boolean | {
+        offset: number;
+    };
+    loading?: boolean;
+    zeroStateMessage?: React.ReactNode;
+    error?: boolean | string;
+    ErrorContainer?: ErrorContainerType;
+    className?: string;
+};
+export default function ControlledAutoTable<TData, TMeta = unknown>({ stickyHeader, loading, zeroStateMessage, error, ErrorContainer, className, ...options }: ControlledAutoTableProps<TData, TMeta>): import("react/jsx-runtime").JSX.Element;

package/dist/types/Table/AutoTable/index.d.ts

@@ -0,0 +1,47 @@
+import { SortingState, RowSelectionState, Row } from '@tanstack/react-table';
+import React from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { ColumnDef } from './types.js';
+import { type ErrorContainer as ErrorContainerType } from './common.js';
+export { createColumnHelper } from './common.js';
+export type AutoTableProps<TData, TMeta = unknown> = {
+    data: TData[];
+    columns: ColumnDef<TData, TMeta>[];
+    meta?: TMeta;
+    getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
+    /** controlled sorting */
+    sorting?: SortingState;
+    /** uncontrolled sorting */
+    defaultSorting?: SortingState;
+    enableSorting?: boolean;
+    onSortingChange?(newSorting: SortingState): void;
+    manualSorting?: boolean;
+    rowSelection?: RowSelectionState;
+    enableRowSelection?: boolean;
+    onRowSelectionChange?(newRowSelection: RowSelectionState): void;
+    page?: number;
+    rowsPerPage?: number;
+    enablePagination?: boolean;
+    onPageChange?(newPage: number): void;
+    onRowsPerPageChange?(newRowsPerPage: number): void;
+    manualRowCount?: number;
+    virtualizer?: {
+        scrollOffset?: number;
+        getScrollElement: () => Element | null;
+        renderWhenNotVisible?: boolean;
+        rowSize: number;
+        headerSize?: number;
+        overscan?: number;
+    };
+    stickyHeader?: boolean | {
+        offset: number;
+    };
+    loading?: boolean;
+    zeroStateMessage?: React.ReactNode;
+    error?: boolean | string;
+    ErrorContainer?: ErrorContainerType;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+declare function AutoTable<TData, TMeta = unknown>(props: AutoTableProps<TData, TMeta>): import("react/jsx-runtime").JSX.Element;
+export default AutoTable;

package/dist/types/Table/AutoTable/types.d.ts

@@ -0,0 +1,106 @@
+export { type SortingState } from '@tanstack/react-table';
+import { AccessorFn, Cell, Column, ColumnDefTemplate, ColumnMeta, DeepKeys, DeepValue, Getter, Header, Row, RowData, SortingFnOption, Table } from '@tanstack/react-table';
+export type InternalColumnMeta = {
+    noVerticalPadding?: boolean;
+};
+export type ColumnHelper<TData extends RowData, TMeta> = {
+    accessor: <TAccessor extends AccessorFn<TData> | DeepKeys<TData>, TValue extends TAccessor extends AccessorFn<TData, infer TReturn> ? TReturn : TAccessor extends DeepKeys<TData> ? DeepValue<TData, TAccessor> : never>(accessor: TAccessor, column: TAccessor extends AccessorFn<TData> ? DisplayColumnDef<TData, TMeta, TValue> : IdentifiedColumnDef<TData, TMeta, TValue>) => AccessorColumnDef<TData, TMeta, TValue>;
+    display: (column: DisplayColumnDef<TData, TMeta>) => ColumnDef<TData, TMeta, unknown>;
+};
+export interface HeaderContext<TData, TMeta, TValue> {
+    /**
+     * An instance of a column.
+     */
+    column: Column<TData, TValue>;
+    /**
+     * An instance of a header.
+     */
+    header: Header<TData, TValue>;
+    /**
+     * The table instance.
+     */
+    table: Table<TData>;
+    meta: TMeta;
+}
+export type StringOrTemplateHeader<TData, TMeta, TValue> = string | ColumnDefTemplate<HeaderContext<TData, TMeta, TValue>>;
+interface StringHeaderIdentifier {
+    header: string;
+    id?: string;
+}
+interface IdIdentifier<TData extends RowData, TMeta, TValue> {
+    id: string;
+    header?: StringOrTemplateHeader<TData, TMeta, TValue>;
+}
+type ColumnIdentifiers<TData extends RowData, TMeta, TValue> = IdIdentifier<TData, TMeta, TValue> | StringHeaderIdentifier;
+export interface IdentifiedColumnDef<TData extends RowData, TMeta = unknown, TValue = unknown> extends ColumnDefBase<TData, TMeta, TValue> {
+    id?: string;
+    header?: StringOrTemplateHeader<TData, TMeta, TValue>;
+}
+export interface CellContext<TData extends RowData, TMeta, TValue> {
+    cell: Cell<TData, TValue>;
+    column: Column<TData, TValue>;
+    getValue: Getter<TValue>;
+    renderValue: Getter<TValue | null>;
+    row: Row<TData>;
+    table: Table<TData>;
+    meta: TMeta;
+}
+export interface ColumnDefBase<TData extends RowData, TMeta = unknown, TValue = unknown> {
+    getUniqueValues?: AccessorFn<TData, unknown[]>;
+    meta?: ColumnMeta<TData, TValue>;
+    cell?: ColumnDefTemplate<CellContext<TData, TMeta, TValue>>;
+    noVerticalPadding?: boolean;
+    /**
+     * Enables/Disables multi-sorting for this column.
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#enablemultisort)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     */
+    enableMultiSort?: boolean;
+    /**
+     * Enables/Disables sorting for this column.
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#enablesorting)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     */
+    enableSorting?: boolean;
+    /**
+     * Inverts the order of the sorting for this column. This is useful for values that have an inverted best/worst scale where lower numbers are better, eg. a ranking (1st, 2nd, 3rd) or golf-like scoring
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#invertsorting)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     */
+    invertSorting?: boolean;
+    /**
+     * Set to `true` for sorting toggles on this column to start in the descending direction.
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#sortdescfirst)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     */
+    sortDescFirst?: boolean;
+    /**
+     * The sorting function to use with this column.
+     * - A `string` referencing a built-in sorting function
+     * - A custom sorting function
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#sortingfn)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     */
+    sortingFn?: SortingFnOption<TData>;
+    /**
+     * - `false`
+     *   - Undefined values will be considered tied and need to be sorted by the next column filter or original index (whichever applies)
+     * - `-1`
+     *   - Undefined values will be sorted with higher priority (ascending) (if ascending, undefined will appear on the beginning of the list)
+     * - `1`
+     *   - Undefined values will be sorted with lower priority (descending) (if ascending, undefined will appear on the end of the list)
+     */
+    sortUndefined?: false | -1 | 1;
+}
+export type DisplayColumnDef<TData extends RowData, TMeta = unknown, TValue = unknown> = ColumnDefBase<TData, TMeta, TValue> & ColumnIdentifiers<TData, TMeta, TValue>;
+interface AccessorFnColumnDefBase<TData extends RowData, TMeta, TValue = unknown> extends ColumnDefBase<TData, TMeta, TValue> {
+    accessorFn: AccessorFn<TData, TValue>;
+}
+export type AccessorFnColumnDef<TData extends RowData, TMeta = unknown, TValue = unknown> = AccessorFnColumnDefBase<TData, TMeta, TValue> & ColumnIdentifiers<TData, TMeta, TValue>;
+interface AccessorKeyColumnDefBase<TData extends RowData, TMeta, TValue = unknown> extends ColumnDefBase<TData, TMeta, TValue> {
+    id?: string;
+    accessorKey: (string & {}) | keyof TData;
+}
+export type AccessorKeyColumnDef<TData extends RowData, TMeta = unknown, TValue = unknown> = AccessorKeyColumnDefBase<TData, TMeta, TValue> & Partial<ColumnIdentifiers<TData, TMeta, TValue>>;
+export type AccessorColumnDef<TData extends RowData, TMeta, TValue = unknown> = AccessorKeyColumnDef<TData, TMeta, TValue> | AccessorFnColumnDef<TData, TMeta, TValue>;
+export type ColumnDef<TData extends RowData, TMeta = unknown, TValue = unknown> = DisplayColumnDef<TData, TMeta, TValue> | AccessorColumnDef<TData, TMeta, TValue>;

package/dist/types/Table/AutoTable/virtual.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { AutoTableHookOptions, type ErrorContainer as ErrorContainerType } from './common.js';
+export type VirtualControlledAutoTableProps<TData, TMeta = unknown> = AutoTableHookOptions<TData, TMeta> & {
+    stickyHeader?: boolean | {
+        offset: number;
+    };
+    loading?: boolean;
+    zeroStateMessage?: React.ReactNode;
+    error?: boolean | string;
+    ErrorContainer?: ErrorContainerType;
+    scrollOffset?: number;
+    getScrollElement: () => Element | null;
+    renderWhenNotVisible?: boolean;
+    rowSize: number;
+    headerSize?: number;
+    overscan?: number;
+    debug?: boolean;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+export declare const TableMessageMaxHeight = 100;
+export default function VirtualControlledAutoTable<TData, TMeta = unknown>({ stickyHeader, loading, zeroStateMessage, error, ErrorContainer, scrollOffset, getScrollElement, renderWhenNotVisible, rowSize, headerSize, overscan, debug, sx, className, ...options }: VirtualControlledAutoTableProps<TData, TMeta>): import("react/jsx-runtime").JSX.Element;

package/dist/types/Table/TableCell/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type TableCellProps = React.ComponentPropsWithoutRef<'td'> & {
+    'data-testid'?: string | undefined;
+    children?: React.ReactNode;
+    noVerticalPadding?: boolean;
+    variant?: 'header' | 'data';
+};
+declare const TableCell: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+    'data-testid'?: string | undefined;
+    children?: React.ReactNode;
+    noVerticalPadding?: boolean | undefined;
+    variant?: "data" | "header" | undefined;
+} & React.RefAttributes<HTMLTableCellElement>>;
+export default TableCell;

package/dist/types/Table/TableRow/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type TableRowProps = React.ComponentPropsWithoutRef<'tr'> & {
+    'data-testid'?: string | undefined;
+    children?: React.ReactNode;
+};
+declare const TableRow: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+    'data-testid'?: string | undefined;
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLTableRowElement>>;
+export default TableRow;

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

@@ -0,0 +1,68 @@
+import React, { MouseEventHandler } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export type TableProps = {
+    'data-testid'?: string;
+    /**
+     * Set the header sticky.
+     *
+     * ⚠️ It doesn't work with IE11.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    children?: React.ReactNode;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+export declare const Table: (props: TableProps) => import("react/jsx-runtime").JSX.Element;
+export type TableBodyProps = {
+    'data-testid'?: string;
+    children?: React.ReactNode;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+export declare const TableBody: (props: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
+export type TableFooterProps = {
+    'data-testid'?: string;
+    children?: React.ReactNode;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+export declare const TableFooter: (props: TableFooterProps) => import("react/jsx-runtime").JSX.Element;
+export type TableHeadProps = {
+    'data-testid'?: string;
+    children?: React.ReactNode;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+export declare const TableHead: (props: TableHeadProps) => import("react/jsx-runtime").JSX.Element;
+export type TableSortLabelProps = {
+    'data-testid'?: string;
+    /**
+     * If `true`, the label will have the active styling (should be true for the sorted column).
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Label contents, the arrow will be appended automatically.
+     */
+    children?: React.ReactNode;
+    /**
+     * The current sort direction.
+     * @default 'asc'
+     */
+    direction?: 'asc' | 'desc';
+    /**
+     * Hide sort icon when active is false.
+     * @default false
+     */
+    hideSortIcon?: boolean;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+export declare const TableSortLabel: (props: TableSortLabelProps) => import("react/jsx-runtime").JSX.Element;
+export type TableZeroStateProps = {
+    children: React.ReactNode;
+};
+export declare const TableMessage: (props: TableZeroStateProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,15 +1,23 @@
 import React from 'react';
 import { type PaletteTextVariant, type TypographyVariant } from '../styles/index.js';
-export type TypographyProps = {
+export type TypographyProps = React.ComponentPropsWithoutRef<'p'> & {
     as?: keyof React.JSX.IntrinsicElements;
     variant?: TypographyVariant;
     color?: PaletteTextVariant | 'disabled' | 'inherit';
     leadingTrim?: boolean;
     children?: React.ReactNode;
-    id?: string;
     'data-testid'?: string;
     style?: React.CSSProperties;
     className?: string;
 };
-declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
+declare const Typography: 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<HTMLElement>>;
 export default Typography;

package/dist/types/index.d.ts

@@ -39,6 +39,16 @@ export { default as RadioButton } from './RadioButton/index.js';
 export * from './RadioButton/index.js';
 export { default as Select } from './Select/index.js';
 export * from './Select/index.js';
+export { default as StatusChip } from './StatusChip/index.js';
+export * from './StatusChip/index.js';
+export * from './Table/index.js';
+export { default as AutoTable } from './Table/AutoTable/index.js';
+export * from './Table/AutoTable/index.js';
+export type * from './Table/AutoTable/types.js';
+export { default as TableCell } from './Table/TableCell/index.js';
+export type * from './Table/TableCell/index.js';
+export { default as TableRow } from './Table/TableRow/index.js';
+export type * from './Table/TableRow/index.js';
 export { default as TablePagination } from './TablePagination/index.js';
 export * from './TablePagination/index.js';
 export { default as Textarea } from './Textarea/index.js';

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

@@ -31,6 +31,8 @@ export type PaletteIndicatorOptions = {
     info?: PaletteActionVariantsColorsOptions;
     warning?: PaletteActionVariantsColorsOptions;
     error?: PaletteActionVariantsColorsOptions;
+    pending?: PaletteActionVariantsColorsOptions;
+    processing?: PaletteActionVariantsColorsOptions;
 };
 export type PaletteTableOptions = PaletteActionVariantsColorsOptions;
 export type PaletteTooltipOptions = PaletteSurfaceColorsOptions;

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

@@ -31,6 +31,8 @@ export interface PaletteIndicator {
     info: PaletteActionVariantsColors;
     warning: PaletteActionVariantsColors;
     error: PaletteActionVariantsColors;
+    pending: PaletteActionVariantsColors;
+    processing: PaletteActionVariantsColors;
 }
 export type PaletteTable = PaletteActionVariantsColors;
 export type PaletteTooltip = PaletteSurfaceColors;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type FontMetrics } from '@capsizecss/core';
-export declare const TypographyVariantKeys: readonly ["title", "h1", "h2", "h3", "h4", "label", "paragraph1", "paragraph2", "paragraph3", "button", "buttonSmall", "input"];
+export declare const TypographyVariantKeys: readonly ["title", "h1", "h2", "h3", "h4", "label", "paragraph1", "paragraph2", "paragraph3", "button", "buttonSmall", "input", "statusChip"];
 export type TypographyVariant = (typeof TypographyVariantKeys)[number];
 export type TypographyStyle = {
     fontFamily: React.CSSProperties['fontFamily'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "2.3.13",
+  "version": "2.4.0",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [
@@ -94,6 +94,7 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@faker-js/faker": "^8.4.1",
     "@fontsource/dosis": "^5.0.5",
     "@fontsource/nunito-sans": "^5.0.5",
     "@mui/icons-material": "^5.10.6",