@veritone-ce/design-system 2.5.17 → 2.5.19

package/dist/cjs/Checkbox/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var material = require('@mui/material');
-var styles_module = require('./styles.module.scss.js');
 var cx = require('../styles/cx.js');
 require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
@@ -17,6 +16,7 @@ require('@mui/system');
 require('../styles/css-vars.js');
 require('../Box/index.js');
 require('../styles/styled.js');
+var styles_module = require('./styles.module.scss.js');
 
 const Checkbox = React.forwardRef(
   ({
@@ -28,6 +28,7 @@ const Checkbox = React.forwardRef(
     "data-testid": dataTestId,
     style,
     className,
+    onThumbnail = false,
     ...props
   }, ref) => {
     const inputRef = React.useRef(null);
@@ -70,7 +71,7 @@ const Checkbox = React.forwardRef(
                 className: styles_module.default["invisible-checkbox"]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["icon-container"], children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(IndeterminateIcon, {}) : checked ? /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(UncheckedIcon, {}) })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["icon-container"], children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(IndeterminateIcon, {}) : checked ? /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(UncheckedIcon, { onThumbnail }) })
           ] }),
           label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["visible-label"], id: labelId, children: label })
         ]
@@ -78,23 +79,38 @@ const Checkbox = React.forwardRef(
     );
   }
 );
-const UncheckedIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: defaultTheme.defaultThemeCssVariableUsages.palette.background.primary,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        className: styles_module.default["checkbox-svg-path"],
-        d: "M19 5v14H5V5h14Zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z"
-      }
-    )
-  }
-);
+const UncheckedIcon = ({ onThumbnail }) => {
+  console.log("onThumbnail", onThumbnail);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      fill: defaultTheme.defaultThemeCssVariableUsages.palette.background.primary,
+      children: [
+        onThumbnail && /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: "4",
+            y: "4",
+            width: "15",
+            height: "15",
+            fill: defaultTheme.defaultThemeCssVariableUsages.palette.thumbnailCheckbox.fill
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: styles_module.default["checkbox-svg-path"],
+            d: "M19 5v14H5V5h14Zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z"
+          }
+        )
+      ]
+    }
+  );
+};
 const CheckedIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {

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

@@ -18,55 +18,229 @@ 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;

package/dist/cjs/styles/createPalette.js

@@ -216,7 +216,8 @@ function createPalette(options = {}) {
     ),
     tooltip: createPaletteTooltip(
       options.tooltip ?? defaultThemeOptions.defaultThemeOptions.palette.tooltip
-    )
+    ),
+    thumbnailCheckbox: defaultThemeOptions.defaultThemeOptions.palette.thumbnailCheckbox
   };
 }
 

package/dist/cjs/styles/defaultTheme.js

@@ -56,6 +56,9 @@ const defaultDarkTheme = createTheme.default({
       base: {
         surface: "#121212"
       }
+    },
+    thumbnailCheckbox: {
+      fill: { primary: "#FFFFFF", secondary: "#2A323C" }
     }
   }
 });

package/dist/cjs/styles/defaultThemeOptions.js

@@ -83,6 +83,12 @@ const defaultThemeOptions = {
     tooltip: {
       surface: disabled.on,
       on: disabled.surface
+    },
+    thumbnailCheckbox: {
+      fill: {
+        primary: "#FFFFFF",
+        secondary: "#2A323C"
+      }
     }
   },
   typography: {