@veritone-ce/design-system 2.5.18 → 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,60 +13,232 @@ 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,
+  paragraphIncrement: 0,
+  styles: {},
+  classNames: {}
+});
 const h = (base, hAddend) => `h${Math.max(1, Math.min(base + hAddend, 4))}`;
-const p = (base) => `paragraph${Math.max(1, Math.min(base, 3))}`;
-const DesignSystemComponents = (hAddend, pLevel) => {
-  return {
-    h1: ({ color, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(index.default, { ref, variant: h(1, hAddend), ...props }),
-    h2: ({ color, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(index.default, { ref, variant: h(2, hAddend), ...props }),
-    h3: ({ color, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(index.default, { ref, variant: h(3, hAddend), ...props }),
-    h4: ({ color, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(index.default, { ref, variant: h(4, hAddend), ...props }),
-    h5: ({ color, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(index.default, { ref, variant: h(5, hAddend), ...props }),
-    h6: ({ color, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(index.default, { ref, variant: h(6, hAddend), ...props }),
-    p: ({ color, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(index.default, { ref, variant: p(pLevel), ...props }),
-    // a: ({ href, ...props }) => href ? <Link to={href} {...props} /> : <a {...props} />,
-    // table: (props) => <Table {...props} />,
-    // thead: (props) => <TableHead {...props} />,
-    // tbody: (props) => <TableBody {...props} />,
-    // tr: ({ ref, ...props }) => <TableRow ref={ref as any} {...props} />,
-    // th: ({ ref, ...props }) => (
-    //   <TableCell ref={ref as any} variant={'header'} {...props} />
-    // ),
-    // td: ({ ref, ...props }) => (
-    //   <TableCell ref={ref as any} variant={'data'} {...props} />
-    // ),
-    li: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+const p = (base, pAddend) => `paragraph${Math.max(1, Math.min(base + pAddend, 3))}`;
+const DefaultComponents = {
+  h1: function H1({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h1: h1Style },
+      classNames: { h1: h1ClassName }
+    } = React.useContext(MarkdownContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        ref,
+        variant: h(1, headerIncrement),
+        style: {
+          ...h1Style,
+          ...style
+        },
+        className: cx.cx(styles_module.default.inheritColor, h1ClassName, className),
+        ...props
+      }
+    );
+  },
+  h2: function H2({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h2: h2Style },
+      classNames: { h2: h2ClassName }
+    } = React.useContext(MarkdownContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        ref,
+        variant: h(2, headerIncrement),
+        style: {
+          ...h2Style,
+          ...style
+        },
+        className: cx.cx(styles_module.default.inheritColor, h2ClassName, className),
+        ...props
+      }
+    );
+  },
+  h3: function H3({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h3: h3Style },
+      classNames: { h3: h3ClassName }
+    } = React.useContext(MarkdownContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        ref,
+        variant: h(3, headerIncrement),
+        style: {
+          ...h3Style,
+          ...style
+        },
+        className: cx.cx(styles_module.default.inheritColor, h3ClassName, className),
+        ...props
+      }
+    );
+  },
+  h4: function H4({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h4: h4Style },
+      classNames: { h4: h4ClassName }
+    } = React.useContext(MarkdownContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        ref,
+        variant: h(4, headerIncrement),
+        style: {
+          ...h4Style,
+          ...style
+        },
+        className: cx.cx(styles_module.default.inheritColor, h4ClassName, className),
+        ...props
+      }
+    );
+  },
+  h5: function H5({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h5: h5Style },
+      classNames: { h5: h5ClassName }
+    } = React.useContext(MarkdownContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        ref,
+        variant: h(5, headerIncrement),
+        style: {
+          ...h5Style,
+          ...style
+        },
+        className: cx.cx(styles_module.default.inheritColor, h5ClassName, className),
+        ...props
+      }
+    );
+  },
+  h6: function H6({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h6: h6Style },
+      classNames: { h6: h6ClassName }
+    } = React.useContext(MarkdownContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        ref,
+        variant: h(6, headerIncrement),
+        style: {
+          ...h6Style,
+          ...style
+        },
+        className: cx.cx(styles_module.default.inheritColor, h6ClassName, className),
+        ...props
+      }
+    );
+  },
+  p: function P({ color, ref, style, className, ...props }) {
+    const {
+      paragraphIncrement,
+      styles: { p: pStyle },
+      classNames: { p: pClassName }
+    } = React.useContext(MarkdownContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        ref,
+        variant: p(1, paragraphIncrement),
+        style: {
+          ...pStyle,
+          ...style
+        },
+        className: cx.cx(styles_module.default.inheritColor, pClassName, className),
+        ...props
+      }
+    );
+  },
+  // table: (props) => <Table {...props} />,
+  // thead: (props) => <TableHead {...props} />,
+  // tbody: (props) => <TableBody {...props} />,
+  // tr: ({ ref, ...props }) => <TableRow ref={ref as any} {...props} />,
+  // th: ({ ref, ...props }) => (
+  //   <TableCell ref={ref as any} variant={'header'} {...props} />
+  // ),
+  // td: ({ ref, ...props }) => (
+  //   <TableCell ref={ref as any} variant={'data'} {...props} />
+  // ),
+  li: function Li(props) {
+    const {
+      paragraphIncrement,
+      styles: { li: liStyle },
+      classNames: { li: liClassName }
+    } = React.useContext(MarkdownContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "li",
       {
         ...props,
-        className: cx.cx(styles_module.default[`li_${p(pLevel)}`], props.className)
+        style: {
+          ...liStyle,
+          ...props.style
+        },
+        className: cx.cx(
+          styles_module.default[`li_${p(1, paragraphIncrement)}`],
+          liClassName,
+          props.className
+        )
+      }
+    );
+  },
+  img: function Img(props) {
+    const {
+      styles: { li: liStyle },
+      classNames: { li: liClassName }
+    } = React.useContext(MarkdownContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        ...props,
+        style: { ...liStyle, ...props.style },
+        className: cx.cx(styles_module.default.img, liClassName, props.className)
       }
-    )
-  };
+    );
+  }
 };
 function Markdown({
   components,
-  headerLevel,
-  paragraphLevel,
+  headerIncrement,
+  paragraphIncrement,
+  style,
+  className,
+  styles: componentStyles,
+  classNames: componentClassNames,
   ...props
 }) {
-  const BaseComponents = React.useMemo(
-    () => DesignSystemComponents(headerLevel ?? 0, paragraphLevel ?? 1),
-    [headerLevel, paragraphLevel]
+  const allComponents = React.useMemo(
+    () => ({
+      ...DefaultComponents,
+      ...components
+    }),
+    [components]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ReactMarkdown,
+    MarkdownContext.Provider,
     {
-      components: {
-        ...BaseComponents,
-        ...components
+      value: {
+        headerIncrement: headerIncrement ?? 0,
+        paragraphIncrement: paragraphIncrement ?? 0,
+        styles: componentStyles ?? {},
+        classNames: componentClassNames ?? {}
       },
-      ...props
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style, className: cx.cx(styles_module.default.markdown, className), children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown, { components: allComponents, ...props }) })
     }
   );
 }

package/dist/cjs/extras/Markdown/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"li_paragraph1":"vt_ce_Markdown_li_paragraph1__89e8a4f2","li_paragraph2":"vt_ce_Markdown_li_paragraph2__41a747e0","li_paragraph3":"vt_ce_Markdown_li_paragraph3__4bbed1ba"};
+var styles = {"markdown":"vt_ce_Markdown_markdown__f723c3f8","inheritColor":"vt_ce_Markdown_inheritColor__d0ceef43","img":"vt_ce_Markdown_img__4bf1a967","li_paragraph1":"vt_ce_Markdown_li_paragraph1__89e8a4f2","li_paragraph2":"vt_ce_Markdown_li_paragraph2__41a747e0","li_paragraph3":"vt_ce_Markdown_li_paragraph3__4bbed1ba"};
 
 exports.default = styles;