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

package/dist/cjs/unstable/Card/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"card":"vt_ce_Card_card__ee444e2c"};
+var styles = {"card":"vt_ce_Card_card__ee444e2c","card-start":"vt_ce_Card_card-start__b66c702c","card-content":"vt_ce_Card_card-content__e8dcb7ea","card-end":"vt_ce_Card_card-end__92fca423","card-title-start":"vt_ce_Card_card-title-start__8f8142cb","card-start-actions":"vt_ce_Card_card-start-actions__47702282","card-tabs-container":"vt_ce_Card_card-tabs-container__0d6e25cb","card-typography":"vt_ce_Card_card-typography__1fa4e7ef","card-actions":"vt_ce_Card_card-actions__2c88a428","card-title-container":"vt_ce_Card_card-title-container__3be4e2c2","card-title":"vt_ce_Card_card-title__15440d72","card-tabs-header":"vt_ce_Card_card-tabs-header__05718973"};
 
 exports.default = styles;

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

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

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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"};
+
+exports.default = styles;

package/dist/cjs/unstable/index.js

@@ -1,21 +1,47 @@
 'use strict';
 'use strict';
 
-var index$3 = require('./Breadcrumbs/index.js');
-var index = require('./Card/index.js');
-var index$1 = require('./LinearProgress/index.js');
-var index$2 = require('./Tabs/index.js');
+var index$2 = require('./Breadcrumbs/index.js');
+var components = require('./Card/components.js');
+var index = require('./LinearProgress/index.js');
+var index$3 = require('./skeleton/index.js');
+var index$4 = require('./StatCard/index.js');
+var index$5 = require('./suspense/index.js');
+var index$1 = require('./Tabs/index.js');
 var factory = require('./Breadcrumbs/factory.js');
+var loader = require('./suspense/loader.js');
 
 
 
-exports.Breadcrumbs = index$3.Breadcrumbs;
-exports.ButtonBreadcrumb = index$3.ButtonBreadcrumb;
-exports.CustomBreadcrumb = index$3.CustomBreadcrumb;
-exports.LinkBreadcrumb = index$3.LinkBreadcrumb;
-exports.SeparatorBreadcrumb = index$3.SeparatorBreadcrumb;
-exports.Card = index.default;
-exports.LinearProgress = index$1.default;
-exports.Tab = index$2.Tab;
-exports.Tabs = index$2.default;
+exports.Breadcrumbs = index$2.Breadcrumbs;
+exports.ButtonBreadcrumb = index$2.ButtonBreadcrumb;
+exports.CustomBreadcrumb = index$2.CustomBreadcrumb;
+exports.LinkBreadcrumb = index$2.LinkBreadcrumb;
+exports.SeparatorBreadcrumb = index$2.SeparatorBreadcrumb;
+exports.Card = components.default;
+exports.CardActions = components.CardActions;
+exports.CardContent = components.CardContent;
+exports.CardDescription = components.CardDescription;
+exports.CardEnd = components.CardEnd;
+exports.CardStart = components.CardStart;
+exports.CardTabs = components.CardTabs;
+exports.CardTitle = components.CardTitle;
+exports.CardTypography = components.CardTypography;
+exports.LinearProgress = index.default;
+exports.CardSkeleton = index$3.CardSkeleton;
+exports.CardTitleSkeleton = index$3.CardTitleSkeleton;
+exports.FormControlSkeleton = index$3.FormControlSkeleton;
+exports.Skeleton = index$3.Skeleton;
+exports.Stat = index$4.Stat;
+exports.StatActions = index$4.StatActions;
+exports.StatButton = index$4.StatButton;
+exports.StatCard = index$4.StatCard;
+exports.StatCardLoadingBoundary = index$4.StatCardLoadingBoundary;
+exports.StatCardSkeleton = index$4.StatCardSkeleton;
+exports.StatSeparator = index$4.StatSeparator;
+exports.LoadingBoundary = index$5.LoadingBoundary;
+exports.Tab = index$1.Tab;
+exports.Tabs = index$1.default;
 exports.createLinkBreadcrumbComponent = factory.createLinkBreadcrumbComponent;
+exports.DialogLoader = loader.DialogLoader;
+exports.Loader = loader.Loader;

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

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

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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"};
+
+exports.default = styles;

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

@@ -0,0 +1,18 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var loader = require('./loader.js');
+var index = require('../../ErrorBoundary/index.js');
+
+function LoadingBoundary(props) {
+  if (props.force) {
+    return props.loader || /* @__PURE__ */ jsxRuntime.jsx(loader.Loader, {});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(index.default, { fallback: props.error, children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: props.loader || /* @__PURE__ */ jsxRuntime.jsx(loader.Loader, {}), children: props.children }) });
+}
+
+exports.DialogLoader = loader.DialogLoader;
+exports.Loader = loader.Loader;
+exports.LoadingBoundary = LoadingBoundary;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"container":"vt_ce_suspense_container__fb891ef4","dialogContainer":"vt_ce_suspense_dialogContainer__2ae26a9a"};
+
+exports.default = styles;

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

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

package/dist/esm/Dialog/components.js

@@ -3,7 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useTransitionStyles, useMergeRefs, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
-import css from './styles.module.scss.js';
+import styles from './styles.module.scss.js';
 import { useDialog, DialogContext, useDialogContext } from './state.js';
 import { cx } from '../styles/cx.js';
 import '../styles/defaultThemeOptions.js';
@@ -14,9 +14,9 @@ import '../styles/provider.client.js';
 import { PortalThemeRelay } from '../styles/portal.js';
 import '../styles/css-vars.js';
 import Button from '../Button/index.js';
-import Typography from '../Typography/index.js';
 import IconButton from '../IconButton/index.js';
 import { CloseIcon } from '../Icon/internal.js';
+import Card, { CardStart, CardContent, CardEnd, CardTitle, CardTypography, CardDescription, CardActions } from '../unstable/Card/components.js';
 
 const Dialog = React.forwardRef(function Dialog2({
   children,
@@ -27,9 +27,18 @@ const Dialog = React.forwardRef(function Dialog2({
   overlayClassName,
   lockScroll = true,
   disableAutoFocus = false,
-  "data-testid": dataTestId,
-  ...options
+  open,
+  onDismiss,
+  preventOutsideDismiss,
+  preventEscapeDismiss,
+  ...props
 }, propRef) {
+  const options = {
+    open,
+    onDismiss,
+    preventOutsideDismiss,
+    preventEscapeDismiss
+  };
   const dialog = useDialog(options);
   const { isMounted: overlayIsMounted, styles: overlayTransitionStyles } = useTransitionStyles(dialog.context, {
     duration: 225,
@@ -53,7 +62,7 @@ const Dialog = React.forwardRef(function Dialog2({
           ...overlayTransitionStyles,
           ...overlayStyle
         },
-        className: cx(css["dialog-overlay"], overlayClassName),
+        className: cx(styles["dialog-overlay"], overlayClassName),
         lockScroll,
         children: /* @__PURE__ */ jsx(
           FloatingFocusManager,
@@ -61,18 +70,16 @@ const Dialog = React.forwardRef(function Dialog2({
             context: dialog.context,
             disabled: disableAutoFocus,
             children: /* @__PURE__ */ jsx(PortalThemeRelay, { children: /* @__PURE__ */ jsx(
-              "div",
+              Card,
               {
                 ref,
-                "aria-labelledby": dialog.labelId,
-                "aria-describedby": dialog.descriptionId,
                 ...dialog.getFloatingProps(),
-                "data-testid": dataTestId,
+                ...props,
                 style: {
                   ...innerTransitionStyles,
                   ...style
                 },
-                className: cx(css["dialog"], className),
+                className: cx(styles["dialog"], className),
                 children
               }
             ) })
@@ -85,104 +92,36 @@ const Dialog = React.forwardRef(function Dialog2({
 });
 const DialogStart = React.forwardRef(
   function DialogStart2({ children, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        ...props,
-        className: cx(css["dialog-start"], props.className),
-        children
-      }
-    );
+    return /* @__PURE__ */ jsx(CardStart, { ref, ...props, children });
   }
 );
 const DialogContent = React.forwardRef(function DialogContent2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      ref,
-      className: cx(css["dialog-content"], props.className),
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(CardContent, { ref, ...props, children });
 });
 const DialogEnd = React.forwardRef(
   function DialogEnd2({ children, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        ...props,
-        className: cx(css["dialog-end"], props.className),
-        children
-      }
-    );
+    return /* @__PURE__ */ jsx(CardEnd, { ref, ...props, children });
   }
 );
-const DialogTitle = React.forwardRef(function DialogTitle2({ children, ...props }, ref) {
-  const { setLabelId } = useDialogContext();
-  const id = React.useId();
-  React.useLayoutEffect(() => {
-    setLabelId(id);
-    return () => setLabelId(void 0);
-  }, [id, setLabelId]);
-  return /* @__PURE__ */ jsx(DialogStart, { children: /* @__PURE__ */ jsx(
-    Typography,
+const DialogTitle = React.forwardRef(function DialogTitle2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    CardTitle,
     {
-      variant: "h4",
-      color: "primary",
       ref,
-      id,
-      leadingTrim: true,
+      className: cx(className, styles["dialog-title"]),
       ...props,
-      className: cx(css["dialog-title"], props.className),
       children
     }
-  ) });
+  );
 });
 const DialogTypography = React.forwardRef(function DialogTypography2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    Typography,
-    {
-      variant: "paragraph2",
-      color: "primary",
-      ...props,
-      ref,
-      className: cx(css["dialog-typography"], props.className),
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(CardTypography, { ref, ...props, children });
 });
 const DialogDescription = React.forwardRef(function DialogDescription2({ children, ...props }, ref) {
-  const { setDescriptionId } = useDialogContext();
-  const id = React.useId();
-  React.useLayoutEffect(() => {
-    setDescriptionId(id);
-    return () => setDescriptionId(void 0);
-  }, [id, setDescriptionId]);
-  return /* @__PURE__ */ jsx(
-    DialogTypography,
-    {
-      variant: "paragraph2",
-      color: "primary",
-      ...props,
-      ref,
-      id,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(CardDescription, { ref, ...props, children });
 });
 const DialogActions = React.forwardRef(function DialogActions2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsx(DialogEnd, { children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      ref,
-      className: cx(css["dialog-actions"], props.className),
-      children
-    }
-  ) });
+  return /* @__PURE__ */ jsx(CardActions, { ref, ...props, children });
 });
 const DialogCloseButton = React.forwardRef(function DialogCloseButton2(props, ref) {
   const { dismiss } = useDialogContext();

package/dist/esm/Dialog/state.js

@@ -9,8 +9,6 @@ function useDialog({
   preventOutsideDismiss,
   preventEscapeDismiss
 }) {
-  const [labelId, setLabelId] = React.useState();
-  const [descriptionId, setDescriptionId] = React.useState();
   const data = useFloating({
     open,
     onOpenChange: (newOpen) => !newOpen && typeof dismissDialog === "function" && dismissDialog()
@@ -28,13 +26,9 @@ function useDialog({
       open,
       dismiss: dismissDialog,
       ...interactions,
-      ...data,
-      labelId,
-      descriptionId,
-      setLabelId,
-      setDescriptionId
+      ...data
     }),
-    [open, dismissDialog, interactions, data, labelId, descriptionId]
+    [open, dismissDialog, interactions, data]
   );
 }
 const DialogContext = React.createContext(null);

package/dist/esm/Dialog/styles.module.scss.js

@@ -1,3 +1,3 @@
-var css = {"dialog-overlay":"vt_ce_Dialog_dialog-overlay__9285b892","dialog":"vt_ce_Dialog_dialog__6471c2e3","dialog-start":"vt_ce_Dialog_dialog-start__3d0c37c9","dialog-end":"vt_ce_Dialog_dialog-end__d33601cf","dialog-content":"vt_ce_Dialog_dialog-content__237fe65e","dialog-title":"vt_ce_Dialog_dialog-title__d88ef551","dialog-typography":"vt_ce_Dialog_dialog-typography__94d06942","dialog-actions":"vt_ce_Dialog_dialog-actions__e259c208"};
+var styles = {"dialog-overlay":"vt_ce_Dialog_dialog-overlay__9285b892","dialog":"vt_ce_Dialog_dialog__6471c2e3","dialog-title":"vt_ce_Dialog_dialog-title__d88ef551"};
 
-export { css as default };
+export { styles as default };

package/dist/esm/FileUploader/controlled.js

@@ -16,7 +16,14 @@ import IconButton from '../IconButton/index.js';
 import { adaptMuiSvgIcon } from '../Icon/wrappers.js';
 import '../Icon/factory.js';
 import styles from './styles.module.scss.js';
+import '../unstable/Breadcrumbs/index.js';
+import '../unstable/Card/components.js';
 import LinearProgress from '../unstable/LinearProgress/index.js';
+import '@mui/material';
+import '../FormControl/index.js';
+import '../ErrorBoundary/index.js';
+import '../Button/index.js';
+import '../unstable/Tabs/index.js';
 
 const CloudUploadOutlinedIcon = adaptMuiSvgIcon(CloudUploadOutlined);
 const DeleteOutlineIcon = adaptMuiSvgIcon(DeleteOutline);

package/dist/esm/Table/AutoTable/controlled.js

@@ -80,7 +80,8 @@ function ControlledAutoTable({
               const size = rowsPerPage ?? 10;
               table.setPageSize(size);
               options.onRowsPerPageChange(size);
-            }
+            },
+            className: styles.pagination
           }
         ) }) }) })
       ]

package/dist/esm/Table/AutoTable/styles.module.scss.js

@@ -1,3 +1,3 @@
-var styles = {"visuallyHidden":"vt_ce_AutoTable_visuallyHidden__d42457bf","errorContainer":"vt_ce_AutoTable_errorContainer__22629d1a","loadingContainer":"vt_ce_AutoTable_loadingContainer__800e1c5c","table":"vt_ce_AutoTable_table__abdcf037","stickyHeader":"vt_ce_AutoTable_stickyHeader__1fdfff7b","virtualTableBody":"vt_ce_AutoTable_virtualTableBody__1264b0bb"};
+var styles = {"visuallyHidden":"vt_ce_AutoTable_visuallyHidden__d42457bf","errorContainer":"vt_ce_AutoTable_errorContainer__22629d1a","loadingContainer":"vt_ce_AutoTable_loadingContainer__800e1c5c","table":"vt_ce_AutoTable_table__abdcf037","stickyHeader":"vt_ce_AutoTable_stickyHeader__1fdfff7b","virtualTableBody":"vt_ce_AutoTable_virtualTableBody__1264b0bb","pagination":"vt_ce_AutoTable_pagination__1b911403"};
 
 export { styles as default };

package/dist/esm/TablePagination/index.js

@@ -9,6 +9,13 @@ import Select from '../Select/uncontrolled.js';
 import { useState, useEffect } from 'react';
 import Input from '../Input/index.js';
 import FormControl from '../FormControl/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 TablePagination({
   page,
@@ -18,6 +25,12 @@ function TablePagination({
   rowsPerPageLabel = "Rows per page:",
   rowsPerPageVariant = "normal",
   showPageNumberInput = false,
+  onChangePage,
+  onRowsPerPageChange,
+  "data-pendo-prev": dataPendoPrev,
+  "data-pendo-next": dataPendoNext,
+  "data-pendo-select": dataPendoSelect,
+  className,
   ...props
 }) {
   const showPrev = page !== 1;
@@ -35,7 +48,7 @@ function TablePagination({
       Math.min(Math.ceil(count / rowsPerPage), Number(inputPage))
     );
     if (newPage !== page) {
-      props.onChangePage(newPage);
+      onChangePage(newPage);
     }
     setInputPage(newPage.toString());
   };
@@ -47,7 +60,7 @@ function TablePagination({
   useEffect(() => {
     setInputPage(page.toString());
   }, [page]);
-  return /* @__PURE__ */ jsxs("nav", { className: css["container"], children: [
+  return /* @__PURE__ */ jsxs("nav", { ...props, className: cx(css["container"], className), children: [
     /* @__PURE__ */ jsx(FormControl, { label: rowsPerPageLabel, placement: "inline-start", children: /* @__PURE__ */ jsx(
       Select,
       {
@@ -58,9 +71,9 @@ function TablePagination({
           label: option.toLocaleString(),
           value: option
         })),
-        onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
+        onChange: (_, newRowsPerPage) => onRowsPerPageChange?.(newRowsPerPage),
         className: css["rows-per-page-select"],
-        "data-pendo": props["data-pendo-select"],
+        "data-pendo": dataPendoSelect,
         tight: rowsPerPageVariant === "tight"
       }
     ) }),
@@ -89,8 +102,8 @@ function TablePagination({
         {
           type: "button",
           disabled: !showPrev,
-          onClick: () => props.onChangePage(page - 1),
-          "data-pendo": props["data-pendo-prev"],
+          onClick: () => onChangePage(page - 1),
+          "data-pendo": dataPendoPrev,
           children: /* @__PURE__ */ jsx(NavigateBeforeIcon, {})
         }
       ) }),
@@ -99,8 +112,8 @@ function TablePagination({
         {
           type: "button",
           disabled: !showNext,
-          onClick: () => props.onChangePage(page + 1),
-          "data-pendo": props["data-pendo-next"],
+          onClick: () => onChangePage(page + 1),
+          "data-pendo": dataPendoNext,
           children: /* @__PURE__ */ jsx(NavigateNextIcon, {})
         }
       ) })