@veritone-ce/design-system 2.5.17 → 2.5.19

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

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 import styles from './styles.module.scss.js';
-import { useMemo } from 'react';
+import { createContext, useMemo, useContext } from 'react';
 import Typography from '../../Typography/index.js';
 import { cx } from '../../styles/cx.js';
 import '../../styles/defaultThemeOptions.js';
@@ -14,55 +14,229 @@ import '../../styles/css-vars.js';
 import '../../Box/index.js';
 import '../../styles/styled.js';
 
+const MarkdownContext = 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__ */ jsx(Typography, { ref, variant: h(1, hAddend), ...props }),
-    h2: ({ color, ref, ...props }) => /* @__PURE__ */ jsx(Typography, { ref, variant: h(2, hAddend), ...props }),
-    h3: ({ color, ref, ...props }) => /* @__PURE__ */ jsx(Typography, { ref, variant: h(3, hAddend), ...props }),
-    h4: ({ color, ref, ...props }) => /* @__PURE__ */ jsx(Typography, { ref, variant: h(4, hAddend), ...props }),
-    h5: ({ color, ref, ...props }) => /* @__PURE__ */ jsx(Typography, { ref, variant: h(5, hAddend), ...props }),
-    h6: ({ color, ref, ...props }) => /* @__PURE__ */ jsx(Typography, { ref, variant: h(6, hAddend), ...props }),
-    p: ({ color, ref, ...props }) => /* @__PURE__ */ jsx(Typography, { 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__ */ 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 }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: h(1, headerIncrement),
+        style: {
+          ...h1Style,
+          ...style
+        },
+        className: cx(styles.inheritColor, h1ClassName, className),
+        ...props
+      }
+    );
+  },
+  h2: function H2({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h2: h2Style },
+      classNames: { h2: h2ClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: h(2, headerIncrement),
+        style: {
+          ...h2Style,
+          ...style
+        },
+        className: cx(styles.inheritColor, h2ClassName, className),
+        ...props
+      }
+    );
+  },
+  h3: function H3({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h3: h3Style },
+      classNames: { h3: h3ClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: h(3, headerIncrement),
+        style: {
+          ...h3Style,
+          ...style
+        },
+        className: cx(styles.inheritColor, h3ClassName, className),
+        ...props
+      }
+    );
+  },
+  h4: function H4({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h4: h4Style },
+      classNames: { h4: h4ClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: h(4, headerIncrement),
+        style: {
+          ...h4Style,
+          ...style
+        },
+        className: cx(styles.inheritColor, h4ClassName, className),
+        ...props
+      }
+    );
+  },
+  h5: function H5({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h5: h5Style },
+      classNames: { h5: h5ClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: h(5, headerIncrement),
+        style: {
+          ...h5Style,
+          ...style
+        },
+        className: cx(styles.inheritColor, h5ClassName, className),
+        ...props
+      }
+    );
+  },
+  h6: function H6({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h6: h6Style },
+      classNames: { h6: h6ClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: h(6, headerIncrement),
+        style: {
+          ...h6Style,
+          ...style
+        },
+        className: cx(styles.inheritColor, h6ClassName, className),
+        ...props
+      }
+    );
+  },
+  p: function P({ color, ref, style, className, ...props }) {
+    const {
+      paragraphIncrement,
+      styles: { p: pStyle },
+      classNames: { p: pClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: p(1, paragraphIncrement),
+        style: {
+          ...pStyle,
+          ...style
+        },
+        className: cx(styles.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 }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
       "li",
       {
         ...props,
-        className: cx(styles[`li_${p(pLevel)}`], props.className)
+        style: {
+          ...liStyle,
+          ...props.style
+        },
+        className: cx(
+          styles[`li_${p(1, paragraphIncrement)}`],
+          liClassName,
+          props.className
+        )
+      }
+    );
+  },
+  img: function Img(props) {
+    const {
+      styles: { li: liStyle },
+      classNames: { li: liClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...props,
+        style: { ...liStyle, ...props.style },
+        className: cx(styles.img, liClassName, props.className)
       }
-    )
-  };
+    );
+  }
 };
 function Markdown({
   components,
-  headerLevel,
-  paragraphLevel,
+  headerIncrement,
+  paragraphIncrement,
+  style,
+  className,
+  styles: componentStyles,
+  classNames: componentClassNames,
   ...props
 }) {
-  const BaseComponents = useMemo(
-    () => DesignSystemComponents(headerLevel ?? 0, paragraphLevel ?? 1),
-    [headerLevel, paragraphLevel]
+  const allComponents = useMemo(
+    () => ({
+      ...DefaultComponents,
+      ...components
+    }),
+    [components]
   );
   return /* @__PURE__ */ jsx(
-    ReactMarkdown,
+    MarkdownContext.Provider,
     {
-      components: {
-        ...BaseComponents,
-        ...components
+      value: {
+        headerIncrement: headerIncrement ?? 0,
+        paragraphIncrement: paragraphIncrement ?? 0,
+        styles: componentStyles ?? {},
+        classNames: componentClassNames ?? {}
       },
-      ...props
+      children: /* @__PURE__ */ jsx("div", { style, className: cx(styles.markdown, className), children: /* @__PURE__ */ jsx(ReactMarkdown, { components: allComponents, ...props }) })
     }
   );
 }

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

@@ -1,3 +1,3 @@
-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"};
 
 export { styles as default };

package/dist/esm/styles/createPalette.js

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

package/dist/esm/styles/defaultTheme.js

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

package/dist/esm/styles/defaultThemeOptions.js

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

package/dist/esm/styles/scss/theme.generated.scss

@@ -108,6 +108,8 @@ $default-theme: (
   "palette-table-disabled-on": (#7C848D),
   "palette-tooltip-surface": (#7C848D),
   "palette-tooltip-on": (#FAFAFA),
+  "palette-thumbnailCheckbox-fill-primary": (#FFFFFF),
+  "palette-thumbnailCheckbox-fill-secondary": (#2A323C),
   "typography-metrics-familyName": (Nunito Sans 12pt),
   "typography-metrics-fullName": (Nunito Sans 12pt Regular),
   "typography-metrics-postscriptName": (NunitoSans12pt-Regular),
@@ -349,6 +351,8 @@ $theme-palette-table-disabled-surface: var(--vt-ce-theme-palette-table-disabled-
 $theme-palette-table-disabled-on: var(--vt-ce-theme-palette-table-disabled-on, (#7C848D));
 $theme-palette-tooltip-surface: var(--vt-ce-theme-palette-tooltip-surface, (#7C848D));
 $theme-palette-tooltip-on: var(--vt-ce-theme-palette-tooltip-on, (#FAFAFA));
+$theme-palette-thumbnailCheckbox-fill-primary: var(--vt-ce-theme-palette-thumbnailCheckbox-fill-primary, (#FFFFFF));
+$theme-palette-thumbnailCheckbox-fill-secondary: var(--vt-ce-theme-palette-thumbnailCheckbox-fill-secondary, (#2A323C));
 $theme-typography-metrics-familyName: var(--vt-ce-theme-typography-metrics-familyName, (Nunito Sans 12pt));
 $theme-typography-metrics-fullName: var(--vt-ce-theme-typography-metrics-fullName, (Nunito Sans 12pt Regular));
 $theme-typography-metrics-postscriptName: var(--vt-ce-theme-typography-metrics-postscriptName, (NunitoSans12pt-Regular));