@veritone-ce/design-system 2.5.19 → 2.6.0-alpha.0

package/dist/cjs/Table/AutoTable/virtual.js

@@ -10,17 +10,19 @@ var index = require('../index.js');
 var index$1 = require('../TableRow/index.js');
 var index$2 = require('../TableCell/index.js');
 var React = require('react');
-var material = require('@mui/material');
-var utils = require('@mui/utils');
 var common = require('./common.js');
 var reactVirtual = require('@tanstack/react-virtual');
+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 styles_module = require('./styles.module.scss.js');
+var index$3 = require('../../CircularProgress/index.js');
 
 const TableMessageMaxHeight = 100;
-const TableContainer = material.styled(material.Box)(
-  ({ virtualizerTotalHeight }) => ({
-    height: `${virtualizerTotalHeight}px`
-  })
-);
 function VirtualControlledAutoTable({
   stickyHeader,
   loading,
@@ -34,7 +36,7 @@ function VirtualControlledAutoTable({
   headerSize = 50,
   overscan,
   debug,
-  sx,
+  style,
   className,
   ...options
 }) {
@@ -59,10 +61,12 @@ function VirtualControlledAutoTable({
   const tableIsVisible = renderWhenNotVisible || virtualizer.scrollOffset + virtualizer.scrollRect.height >= visibilityBounds.lower && virtualizer.scrollOffset <= visibilityBounds.upper;
   const virtualItems = virtualizer.getVirtualItems();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    TableContainer,
+    "div",
     {
-      virtualizerTotalHeight: totalHeight,
-      sx,
+      style: {
+        height: `${totalHeight}px`,
+        ...style
+      },
       className,
       children: [
         debug && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -88,19 +92,14 @@ function VirtualControlledAutoTable({
         /* @__PURE__ */ jsxRuntime.jsxs(
           index.Table,
           {
-            sx: {
-              borderCollapse: "separate",
-              ...stickyHeader ? {
-                "& th": {
-                  position: "sticky",
-                  top: typeof stickyHeader === "object" ? stickyHeader.offset : 0,
-                  zIndex: 2,
-                  backgroundColor: (theme) => theme.palette.background.default
-                }
-              } : {}
+            className: cx.cx(styles_module.default.table, stickyHeader && styles_module.default.stickyHeader),
+            style: {
+              ...stickyHeader && typeof stickyHeader === "object" && {
+                "--vt-ce-auto-table-sticky-offset": stickyHeader.offset
+              }
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(index.TableHead, { sx: { height: headerSize }, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: headerGroup.headers.map((header) => {
+              /* @__PURE__ */ jsxRuntime.jsx(index.TableHead, { style: { height: headerSize }, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: headerGroup.headers.map((header) => {
                 const isSorted = header.column.getIsSorted();
                 return /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { variant: "header", children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxRuntime.jsxs(
                   index.TableSortLabel,
@@ -113,7 +112,7 @@ function VirtualControlledAutoTable({
                         header.column.columnDef.header,
                         header.getContext()
                       ),
-                      isSorted !== false ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: utils.visuallyHidden, children: isSorted === "desc" ? "sorted descending" : "sorted ascending" }) : null
+                      isSorted !== false ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.visuallyHidden, children: isSorted === "desc" ? "sorted descending" : "sorted ascending" }) : null
                     ]
                   }
                 ) : reactTable.flexRender(
@@ -125,28 +124,26 @@ function VirtualControlledAutoTable({
                 index$2.default,
                 {
                   colSpan: table.getAllFlatColumns().length,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: error ? /* @__PURE__ */ jsxRuntime.jsx(ErrorContainer, { error }) : loading ? /* @__PURE__ */ jsxRuntime.jsx(
-                    material.Box,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: error ? /* @__PURE__ */ jsxRuntime.jsx(ErrorContainer, { error }) : loading ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
                     {
-                      sx: {
+                      style: {
                         display: "flex",
                         justifyContent: "center",
                         paddingTop: "10px",
                         paddingBottom: "10px"
                       },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, {})
+                      children: /* @__PURE__ */ jsxRuntime.jsx(index$3.default, {})
                     }
                   ) : rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.TableMessage, { children: zeroStateMessage ?? "No data found" }) : null })
                 }
               ) }) }) : tableIsVisible && /* @__PURE__ */ jsxRuntime.jsx(
                 index.TableBody,
                 {
-                  sx: {
-                    "&::after": {
-                      display: "block",
-                      content: "''",
-                      // this ensures the table takes up as much size as the total elements by adding padding to the end
-                      height: `${(rows.length - virtualItems.length) * rowSize}px`
+                  className: styles_module.default.virtualTableBody,
+                  style: {
+                    ...{
+                      "--vt-ce-auto-table-virtual-table-body-height": `${(rows.length - virtualItems.length) * rowSize}px`
                     }
                   },
                   children: virtualItems.map((virtualRow) => {

package/dist/cjs/Table/TableCell/index.js

@@ -12,10 +12,8 @@ require('../../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../../styles/defaultTheme.js');
-require('@mui/system');
+require('../../styles/provider.client.js');
 require('../../styles/css-vars.js');
-require('../../Box/index.js');
-require('../../styles/styled.js');
 
 const TableCell = React.forwardRef(
   ({

package/dist/cjs/Table/TableRow/index.js

@@ -12,10 +12,8 @@ require('../../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../../styles/defaultTheme.js');
-require('@mui/system');
+require('../../styles/provider.client.js');
 require('../../styles/css-vars.js');
-require('../../Box/index.js');
-require('../../styles/styled.js');
 
 const TableRow = React.forwardRef(
   ({ children, "data-testid": dataTestId, className, ...props }, ref) => {

package/dist/cjs/Table/index.js

@@ -12,7 +12,7 @@ const Table = (props) => {
     {
       "data-testid": props["data-testid"],
       stickyHeader: props.stickyHeader,
-      sx: props.sx,
+      style: props.style,
       className: props.className,
       children: props.children
     }
@@ -23,7 +23,7 @@ const TableBody = (props) => {
     material.TableBody,
     {
       "data-testid": props["data-testid"],
-      sx: props.sx,
+      style: props.style,
       className: props.className,
       children: props.children
     }
@@ -34,7 +34,7 @@ const TableFooter = (props) => {
     material.TableFooter,
     {
       "data-testid": props["data-testid"],
-      sx: props.sx,
+      style: props.style,
       className: props.className,
       children: props.children
     }
@@ -45,7 +45,7 @@ const TableHead = (props) => {
     material.TableHead,
     {
       "data-testid": props["data-testid"],
-      sx: props.sx,
+      style: props.style,
       className: props.className,
       children: props.children
     }

package/dist/cjs/Textarea/index.js

@@ -12,10 +12,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 var context = require('../FormControl/context.js');
 
 const Textarea = React.forwardRef(

package/dist/cjs/Toast/index.js

@@ -9,7 +9,7 @@ var material = require('@mui/material');
 var content = require('./content.js');
 
 const Toast = ({ open, onClose, className, ...alertProps }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(material.Snackbar, { open, onClose, className, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(content.default, { onClose, ...alertProps }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Snackbar, { open, onClose, className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(content.default, { onClose, ...alertProps }) }) });
 };
 
 exports.default = Toast;

package/dist/cjs/Tooltip/index.js

@@ -13,10 +13,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 var index = require('../Typography/index.js');
 
 function Tooltip({

package/dist/cjs/Typography/index.js

@@ -9,11 +9,9 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('react/jsx-runtime');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 var variants_module = require('./variants.module.scss.js');
 
 const Typography = React.forwardRef(

package/dist/cjs/extras/Markdown/index.js

@@ -13,10 +13,8 @@ require('../../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../../styles/defaultTheme.js');
-require('@mui/system');
+require('../../styles/provider.client.js');
 require('../../styles/css-vars.js');
-require('../../Box/index.js');
-require('../../styles/styled.js');
 
 const MarkdownContext = React.createContext({
   headerIncrement: 0,

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 'use strict';
 'use strict';
 
-var identifier = require('./styles/identifier.js');
 var cx = require('./styles/cx.js');
 var defaultThemeOptions = require('./styles/defaultThemeOptions.js');
 var createTheme = require('./styles/createTheme.js');
@@ -11,59 +10,55 @@ var typography = require('./styles/typography.js');
 var portal = require('./styles/portal.js');
 var createPalette = require('./styles/createPalette.js');
 var createTypography = require('./styles/createTypography.js');
-var styled = require('./styles/styled.js');
 var provider_client = require('./styles/provider.client.js');
 var provider_cssVars = require('./styles/provider.css-vars.js');
 var cssVars = require('./styles/css-vars.js');
 var utils = require('@mui/utils');
 var index = require('./Alert/index.js');
 var index$1 = require('./Badge/index.js');
-var index$2 = require('./Box/index.js');
-var index$3 = require('./Button/index.js');
-var index$4 = require('./Card/index.js');
-var index$5 = require('./Checkbox/index.js');
-var index$6 = require('./Chip/index.js');
-var index$7 = require('./CircularProgress/index.js');
-var index$8 = require('./DatePicker/index.js');
-var index$9 = require('./DateRangePicker/index.js');
+var index$2 = require('./Button/index.js');
+var index$3 = require('./Card/index.js');
+var index$4 = require('./Checkbox/index.js');
+var index$5 = require('./Chip/index.js');
+var index$6 = require('./CircularProgress/index.js');
+var index$7 = require('./DatePicker/index.js');
+var index$8 = require('./DateRangePicker/index.js');
 var components = require('./Dialog/components.js');
 var factory = require('./Dialog/factory.js');
 var components$1 = require('./Drawer/components.js');
 var factory$1 = require('./Drawer/factory.js');
-var index$a = require('./ErrorBoundary/index.js');
+var index$9 = require('./ErrorBoundary/index.js');
 var components$2 = require('./FileUploader/components.js');
-var index$b = require('./FormControl/index.js');
-var index$c = require('./GlobalStyles/index.js');
+var index$a = require('./FormControl/index.js');
 var wrappers = require('./Icon/wrappers.js');
 var factory$2 = require('./Icon/factory.js');
-var index$d = require('./IconButton/index.js');
-var index$e = require('./Input/index.js');
+var index$b = require('./IconButton/index.js');
+var index$c = require('./Input/index.js');
 var controlled = require('./Menu/controlled.js');
 var factory$3 = require('./Menu/factory.js');
-var index$f = require('./Pagination/index.js');
-var index$g = require('./RadioButton/index.js');
+var index$d = require('./Pagination/index.js');
+var index$e = require('./RadioButton/index.js');
 var controlled$1 = require('./Select/controlled.js');
 var uncontrolled = require('./Select/uncontrolled.js');
 var factory$4 = require('./Select/factory.js');
-var index$h = require('./StatusChip/index.js');
-var index$r = require('./Table/index.js');
-var index$i = require('./Table/AutoTable/index.js');
-var index$j = require('./Table/TableCell/index.js');
-var index$k = require('./Table/TableRow/index.js');
-var index$l = require('./TablePagination/index.js');
-var index$m = require('./Textarea/index.js');
-var index$n = require('./Toast/index.js');
+var index$f = require('./StatusChip/index.js');
+var index$p = require('./Table/index.js');
+var index$g = require('./Table/AutoTable/index.js');
+var index$h = require('./Table/TableCell/index.js');
+var index$i = require('./Table/TableRow/index.js');
+var index$j = require('./TablePagination/index.js');
+var index$k = require('./Textarea/index.js');
+var index$l = require('./Toast/index.js');
 var hook = require('./Toast/hook.js');
-var index$o = require('./Tooltip/index.js');
-var index$p = require('./Typography/index.js');
-var index$q = require('./ColorPicker/index.js');
+var index$m = require('./Tooltip/index.js');
+var index$n = require('./Typography/index.js');
+var index$o = require('./ColorPicker/index.js');
 var stepper = require('./Stepper/stepper.js');
 var auto = require('./Stepper/auto.js');
 var common = require('./Table/AutoTable/common.js');
 
 
 
-exports.THEME_ID = identifier.default;
 exports.cx = cx.cx;
 exports.defaultThemeOptions = defaultThemeOptions.defaultThemeOptions;
 exports.createTheme = createTheme.default;
@@ -75,9 +70,9 @@ exports.TypographyVariantKeys = typography.TypographyVariantKeys;
 exports.PortalThemeRelay = portal.PortalThemeRelay;
 exports.createPalette = createPalette.createPalette;
 exports.createTypography = createTypography.createTypography;
-exports.experimentalStyled = styled.default;
-exports.styled = styled.default;
+exports.ThemeContext = provider_client.ThemeContext;
 exports.ThemeContextProvider = provider_client.ThemeContextProvider;
+exports.useThemeContext = provider_client.useThemeContext;
 exports.ThemeCssVarsProvider = provider_cssVars.ThemeCssVarsProvider;
 exports.createThemeCssVariableDefinitions = cssVars.createThemeCssVariableDefinitions;
 exports.themeCSSVariableNames = cssVars.themeCSSVariableNames;
@@ -87,14 +82,13 @@ Object.defineProperty(exports, "capitalize", {
 });
 exports.Alert = index.default;
 exports.Badge = index$1.default;
-exports.Box = index$2.default;
-exports.Button = index$3.default;
-exports.Card = index$4.default;
-exports.Checkbox = index$5.default;
-exports.Chip = index$6.default;
-exports.CircularProgress = index$7.default;
-exports.DatePicker = index$8.default;
-exports.DateRangePicker = index$9.default;
+exports.Button = index$2.default;
+exports.Card = index$3.default;
+exports.Checkbox = index$4.default;
+exports.Chip = index$5.default;
+exports.CircularProgress = index$6.default;
+exports.DatePicker = index$7.default;
+exports.DateRangePicker = index$8.default;
 exports.Dialog = components.default;
 exports.DialogActions = components.DialogActions;
 exports.DialogCloseButton = components.DialogCloseButton;
@@ -117,49 +111,48 @@ exports.DrawerStart = components$1.DrawerStart;
 exports.DrawerTitle = components$1.DrawerTitle;
 exports.DrawerTypography = components$1.DrawerTypography;
 exports.createDrawerComponent = factory$1.createDrawerComponent;
-exports.ErrorBoundary = index$a.default;
+exports.ErrorBoundary = index$9.default;
 exports.UploadButton = components$2.UploadButton;
 exports.UploadDropzone = components$2.UploadDropzone;
 exports.UploadList = components$2.UploadList;
 exports.UploadListItem = components$2.UploadListItem;
 exports.useUploadStatus = components$2.useUploadStatus;
-exports.FormControl = index$b.default;
-exports.GlobalStyles = index$c.default;
+exports.FormControl = index$a.default;
 exports.adaptMuiSvgIcon = wrappers.adaptMuiSvgIcon;
 exports.adaptSvgIcon = wrappers.adaptSvgIcon;
 exports.DefaultIconFallback = factory$2.DefaultIconFallback;
 exports.createIconComponent = factory$2.createIconComponent;
-exports.IconButton = index$d.default;
-exports.Input = index$e.default;
+exports.IconButton = index$b.default;
+exports.Input = index$c.default;
 exports.Menu = controlled.default;
 exports.MenuItem = controlled.MenuItem;
 exports.NestedMenu = controlled.NestedMenu;
 exports.createMenuComponent = factory$3.createMenuComponent;
-exports.Pagination = index$f.default;
-exports.RadioButton = index$g.default;
+exports.Pagination = index$d.default;
+exports.RadioButton = index$e.default;
 exports.ControlledSelect = controlled$1.default;
 exports.Select = uncontrolled.default;
 exports.createControlledSelectComponent = factory$4.createControlledSelectComponent;
 exports.createSelectComponent = factory$4.createSelectComponent;
-exports.StatusChip = index$h.default;
-exports.Table = index$r.Table;
-exports.TableBody = index$r.TableBody;
-exports.TableFooter = index$r.TableFooter;
-exports.TableHead = index$r.TableHead;
-exports.TableMessage = index$r.TableMessage;
-exports.TableSortLabel = index$r.TableSortLabel;
-exports.AutoTable = index$i.default;
-exports.TableCell = index$j.default;
-exports.TableRow = index$k.default;
-exports.TablePagination = index$l.default;
-exports.Textarea = index$m.default;
-exports.Toast = index$n.default;
+exports.StatusChip = index$f.default;
+exports.Table = index$p.Table;
+exports.TableBody = index$p.TableBody;
+exports.TableFooter = index$p.TableFooter;
+exports.TableHead = index$p.TableHead;
+exports.TableMessage = index$p.TableMessage;
+exports.TableSortLabel = index$p.TableSortLabel;
+exports.AutoTable = index$g.default;
+exports.TableCell = index$h.default;
+exports.TableRow = index$i.default;
+exports.TablePagination = index$j.default;
+exports.Textarea = index$k.default;
+exports.Toast = index$l.default;
 exports.ToastProvider = hook.ToastProvider;
 exports.useToast = hook.useToast;
-exports.Tooltip = index$o.default;
-exports.Typography = index$p.default;
-exports.ColorPicker = index$q.default;
-exports.validateHex = index$q.validateHex;
+exports.Tooltip = index$m.default;
+exports.Typography = index$n.default;
+exports.ColorPicker = index$o.default;
+exports.validateHex = index$o.validateHex;
 exports.Stepper = stepper.default;
 exports.AutoStepper = auto.default;
 exports.createColumnHelper = common.createColumnHelper;

package/dist/cjs/styles/components.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var css = {"css-var-provider":"vt_ce_styles_css-var-provider__dc02b308"};
+var styles = {"css-var-provider":"vt_ce_styles_css-var-provider__dc02b308"};
 
-exports.default = css;
+exports.default = styles;

package/dist/cjs/styles/provider.client.js

@@ -3,23 +3,39 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var system = require('@mui/system');
-var identifier = require('./identifier.js');
+var React = require('react');
 var provider_cssVars = require('./provider.css-vars.js');
+var defaultTheme = require('./defaultTheme.js');
 
-function ThemeContextProvider({
-  theme: themeInput,
-  includeCssVarWrapper,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(system.ThemeProvider, { themeId: identifier.default, theme: themeInput, children: includeCssVarWrapper ? /* @__PURE__ */ jsxRuntime.jsx(
-    provider_cssVars.ThemeCssVarsProvider,
-    {
-      theme: themeInput,
-      style: { display: "contents" },
-      children
-    }
-  ) : children });
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
 
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ThemeContext = React__namespace.createContext({
+  theme: defaultTheme.default
+});
+function useThemeContext() {
+  return React__namespace.useContext(ThemeContext);
+}
+function ThemeContextProvider({ theme, includeCssVarWrapper, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme }, children: includeCssVarWrapper ? /* @__PURE__ */ jsxRuntime.jsx(provider_cssVars.ThemeCssVarsProvider, { theme, children }) : children });
+}
+
+exports.ThemeContext = ThemeContext;
 exports.ThemeContextProvider = ThemeContextProvider;
+exports.useThemeContext = useThemeContext;

package/dist/cjs/styles/provider.css-vars.js

@@ -4,7 +4,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cssVars = require('./css-vars.js');
-var index = require('../Box/index.js');
 var components_module = require('./components.module.scss.js');
 var cx = require('./cx.js');
 
@@ -13,14 +12,17 @@ function ThemeCssVarsProvider({
   component: Component = "div",
   style,
   className,
-  children
+  children,
+  ...otherProps
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    index.default,
+    Component,
     {
-      component: Component,
-      sx: cssVars.createThemeCssVariableDefinitions(themeInput),
-      style,
+      ...otherProps,
+      style: {
+        ...cssVars.createThemeCssVariableDefinitions(themeInput),
+        ...style
+      },
       className: cx.cx(components_module.default["css-var-provider"], className),
       children
     }

package/dist/cjs/styles/useTheme.js

@@ -4,36 +4,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var system = require('@mui/system');
-var defaultTheme = require('./defaultTheme.js');
-var identifier = require('./identifier.js');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var provider_client = require('./provider.client.js');
 
 function useTheme() {
-  const theme = system.useTheme(defaultTheme.default);
-  if (process.env.NODE_ENV !== "production") {
-    React__namespace.useDebugValue(theme);
-  }
-  return theme[identifier.default] || theme;
+  return provider_client.useThemeContext().theme;
 }
 
 exports.default = useTheme;