@veritone-ce/design-system 2.1.4 → 2.2.0

package/dist/cjs/Button/index.js

@@ -13,19 +13,21 @@ require('../styles/css-vars.js');
 var cx = require('../styles/cx.js');
 require('../styles/defaultTheme.js');
 require('@mui/system');
+var palette = require('../styles/palette.js');
 require('../styles/styled.js');
 
 const Button = React.forwardRef(
   ({
     variant = "primary",
+    palette: paletteInput = variant === "primary" ? "action.primary" : "action.text",
     size = "large",
     disabled = false,
     loading = false,
-    destructive = false,
     active = false,
     ...props
   }, ref) => {
     const variantCn = styles_module.default[variant];
+    const palette$1 = palette.resolvePaletteValue(paletteInput);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -35,13 +37,22 @@ const Button = React.forwardRef(
         "data-loading": loading,
         "data-active": active,
         disabled: loading || disabled,
-        "data-destructive": destructive,
         onClick: props.onClick,
         "data-testid": props["data-testid"],
-        style: props.style,
+        style: {
+          ...{
+            "--vt-ce-button-palette-base-surface": palette$1.base.surface,
+            "--vt-ce-button-palette-base-on": palette$1.base.on,
+            "--vt-ce-button-palette-hover-surface": palette$1.hover.surface,
+            "--vt-ce-button-palette-hover-on": palette$1.hover.on,
+            "--vt-ce-button-palette-disabled-surface": palette$1.disabled.surface,
+            "--vt-ce-button-palette-disabled-on": palette$1.disabled.on
+          },
+          ...props.style
+        },
         className: cx.cx(styles_module.default["button"], variantCn, props.className),
         children: [
-          loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["loading-container"], children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { size: "1.4em", color: "inherit" }) }),
+          loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["loading-container"], children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { size: "1.4em" }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["inner-container"], children: [
             props.startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["button-icon"], children: props.startIcon }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.children }),

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"button":"vt_ce_Button_button__0157fdfe","primary":"vt_ce_Button_primary__0157fdfe","secondary":"vt_ce_Button_secondary__0157fdfe","tertiary":"vt_ce_Button_tertiary__0157fdfe","inner-container":"vt_ce_Button_innerContainer__0157fdfe","loading-container":"vt_ce_Button_loadingContainer__0157fdfe","button-icon":"vt_ce_Button_buttonIcon__0157fdfe"};
+var modules_efc4e723 = {"button":"vt_ce_Button_button__83b29f90","primary":"vt_ce_Button_primary__83b29f90","secondary":"vt_ce_Button_secondary__83b29f90","tertiary":"vt_ce_Button_tertiary__83b29f90","inner-container":"vt_ce_Button_innerContainer__83b29f90","loading-container":"vt_ce_Button_loadingContainer__83b29f90","button-icon":"vt_ce_Button_buttonIcon__83b29f90"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/Chip/index.js

@@ -0,0 +1,61 @@
+'use strict';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+require('@mui/utils');
+require('../Button/index.js');
+var index = require('../IconButton/index.js');
+var internal = require('../Icon/internal.js');
+require('../Box/index.js');
+require('../Checkbox/index.js');
+require('../Dialog/components.js');
+require('../Drawer/components.js');
+require('../Icon/factory.js');
+require('../Input/index.js');
+require('../Menu/controlled.js');
+require('@mui/material/usePagination');
+require('../RadioButton/index.js');
+require('../Select/controlled.js');
+require('../Textarea/index.js');
+require('@mui/material');
+require('../Toast/hook.js');
+require('@floating-ui/react');
+require('../Typography/index.js');
+
+const Chip = React.forwardRef(
+  ({ clearable = true, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        className: cx.cx(styles_module.default["chip"], props.className),
+        "data-testid": props["data-testid"],
+        style: props.style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["chip-text"], children: props.children }),
+          clearable && /* @__PURE__ */ jsxRuntime.jsx(
+            index.default,
+            {
+              className: styles_module.default["button-icon"],
+              style: { padding: "0px" },
+              onClick: props.onClear,
+              children: /* @__PURE__ */ jsxRuntime.jsx(internal.DSIcon, { name: "close" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+exports.default = Chip;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"chip":"vt_ce_Chip_chip__323b4046","chip-text":"vt_ce_Chip_chipText__323b4046","button-icon":"vt_ce_Chip_buttonIcon__323b4046"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/Drawer/components.js

@@ -14,6 +14,7 @@ require('../styles/css-vars.js');
 var cx = require('../styles/cx.js');
 require('../styles/defaultTheme.js');
 require('@mui/system');
+var palette = require('../styles/palette.js');
 require('../styles/styled.js');
 var index$1 = require('../Button/index.js');
 var index = require('../Typography/index.js');
@@ -114,25 +115,48 @@ const DrawerEnd = React__namespace.forwardRef(
     );
   }
 );
-const DrawerTitle = React__namespace.forwardRef(function DrawerTitle2({ children, ...props }, ref) {
+const DrawerTitle = React__namespace.forwardRef(function DrawerTitle2({
+  children,
+  actions,
+  container = "text",
+  palette: paletteInput = "brand.1.base",
+  ...props
+}, ref) {
+  const palette$1 = palette.resolvePaletteValue(paletteInput);
   const { setLabelId } = state.useDrawerContext();
   const id = React__namespace.useId();
   React__namespace.useLayoutEffect(() => {
     setLabelId(id);
     return () => setLabelId(void 0);
   }, [id, setLabelId]);
-  return /* @__PURE__ */ jsxRuntime.jsx(DrawerStart, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    index.default,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DrawerStart,
     {
-      variant: "title",
-      ref,
-      id,
-      color: "primary",
-      ...props,
-      className: cx.cx(styles_module.default["drawer-title"], props.className),
-      children
+      "data-container": container,
+      style: {
+        ...{
+          "--vt-ce-drawer-palette-surface": palette$1.surface,
+          "--vt-ce-drawer-palette-on": palette$1.on
+        }
+      },
+      className: styles_module.default["drawer-title-container"],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          index.default,
+          {
+            variant: "title",
+            ref,
+            id,
+            color: "inherit",
+            ...props,
+            className: cx.cx(styles_module.default["drawer-title"], props.className),
+            children
+          }
+        ),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["drawer-title-actions"], children: actions })
+      ]
     }
-  ) });
+  );
 });
 const DrawerTypography = React__namespace.forwardRef(function DrawerTypography2({ children, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"drawer-overlay":"vt_ce_Drawer_drawerOverlay__6d49b031","drawer":"vt_ce_Drawer_drawer__6d49b031","drawer-start":"vt_ce_Drawer_drawerStart__6d49b031","drawer-end":"vt_ce_Drawer_drawerEnd__6d49b031","drawer-content":"vt_ce_Drawer_drawerContent__6d49b031","drawer-title":"vt_ce_Drawer_drawerTitle__6d49b031","drawer-typography":"vt_ce_Drawer_drawerTypography__6d49b031","drawer-actions":"vt_ce_Drawer_drawerActions__6d49b031"};
+var modules_efc4e723 = {"drawer-overlay":"vt_ce_Drawer_drawerOverlay__711dd4dc","drawer":"vt_ce_Drawer_drawer__711dd4dc","drawer-start":"vt_ce_Drawer_drawerStart__711dd4dc","drawer-end":"vt_ce_Drawer_drawerEnd__711dd4dc","drawer-content":"vt_ce_Drawer_drawerContent__711dd4dc","drawer-title-container":"vt_ce_Drawer_drawerTitleContainer__711dd4dc","drawer-title":"vt_ce_Drawer_drawerTitle__711dd4dc","drawer-title-actions":"vt_ce_Drawer_drawerTitleActions__711dd4dc","drawer-typography":"vt_ce_Drawer_drawerTypography__711dd4dc","drawer-actions":"vt_ce_Drawer_drawerActions__711dd4dc"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/IconButton/index.js

@@ -13,24 +13,42 @@ require('../styles/css-vars.js');
 var cx = require('../styles/cx.js');
 require('../styles/defaultTheme.js');
 require('@mui/system');
+var palette = require('../styles/palette.js');
 require('../styles/styled.js');
 
 const IconButton = React.forwardRef(
-  (props, ref) => {
+  ({
+    variant = "primary",
+    palette: paletteInput = "action.text",
+    loading = false,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const variantCn = styles_module.default[variant];
+    const palette$1 = palette.resolvePaletteValue(paletteInput);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         ref,
         type: props.type,
-        "data-loading": props.loading ?? false,
-        disabled: props.loading || props.disabled,
-        "data-destructive": props.destructive ?? false,
+        "data-loading": loading,
+        disabled: loading || disabled,
         onClick: props.onClick,
         "data-testid": props["data-testid"],
-        style: props.style,
-        className: cx.cx(styles_module.default["button"], props.className),
+        style: {
+          ...{
+            "--vt-ce-icon-button-palette-base-surface": palette$1.base.surface,
+            "--vt-ce-icon-button-palette-base-on": palette$1.base.on,
+            "--vt-ce-icon-button-palette-hover-surface": palette$1.hover.surface,
+            "--vt-ce-icon-button-palette-hover-on": palette$1.hover.on,
+            "--vt-ce-icon-button-palette-disabled-surface": palette$1.disabled.surface,
+            "--vt-ce-icon-button-palette-disabled-on": palette$1.disabled.on
+          },
+          ...props.style
+        },
+        className: cx.cx(styles_module.default["button"], variantCn, props.className),
         children: [
-          props.loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["loading-container"], children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { color: "inherit", fillParentHeight: true }) }),
+          loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["loading-container"], children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { fillParentHeight: true }) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["inner-icon"], children: props.children })
         ]
       }

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"button":"vt_ce_IconButton_button__b5583457","inner-icon":"vt_ce_IconButton_innerIcon__b5583457","loading-container":"vt_ce_IconButton_loadingContainer__b5583457"};
+var modules_efc4e723 = {"button":"vt_ce_IconButton_button__8407c5d8","primary":"vt_ce_IconButton_primary__8407c5d8","secondary":"vt_ce_IconButton_secondary__8407c5d8","inner-icon":"vt_ce_IconButton_innerIcon__8407c5d8","loading-container":"vt_ce_IconButton_loadingContainer__8407c5d8"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/index.js

@@ -8,6 +8,7 @@ var cx = require('./styles/cx.js');
 var defaultTheme = require('./styles/defaultTheme.js');
 var useTheme = require('./styles/useTheme.js');
 var palette = require('./styles/palette.js');
+var createPalette = require('./styles/createPalette.js');
 var styled = require('./styles/styled.js');
 var provider_client = require('./styles/provider.client.js');
 var provider_cssVars = require('./styles/provider.css-vars.js');
@@ -17,29 +18,30 @@ var index = require('./Alert/index.js');
 var index$1 = require('./Box/index.js');
 var index$2 = require('./Button/index.js');
 var index$3 = require('./Checkbox/index.js');
-var index$4 = require('./CircularProgress/index.js');
+var index$4 = require('./Chip/index.js');
+var index$5 = require('./CircularProgress/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$5 = require('./GlobalStyles/index.js');
+var index$6 = require('./GlobalStyles/index.js');
 var wrappers = require('./Icon/wrappers.js');
 var factory$2 = require('./Icon/factory.js');
-var index$6 = require('./IconButton/index.js');
-var index$7 = require('./Input/index.js');
+var index$7 = require('./IconButton/index.js');
+var index$8 = require('./Input/index.js');
 var controlled = require('./Menu/controlled.js');
 var factory$3 = require('./Menu/factory.js');
-var index$8 = require('./Pagination/index.js');
-var index$9 = require('./RadioButton/index.js');
+var index$9 = require('./Pagination/index.js');
+var index$a = 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$a = require('./TablePagination/index.js');
-var index$b = require('./Textarea/index.js');
-var index$c = require('./Toast/index.js');
+var index$b = require('./TablePagination/index.js');
+var index$c = require('./Textarea/index.js');
+var index$d = require('./Toast/index.js');
 var hook = require('./Toast/hook.js');
-var index$d = require('./Tooltip/index.js');
-var index$e = require('./Typography/index.js');
+var index$e = require('./Tooltip/index.js');
+var index$f = require('./Typography/index.js');
 
 
 
@@ -52,7 +54,8 @@ exports.ThemeVars = defaultTheme.defaultThemeCssVariableUsages;
 exports.defaultDarkTheme = defaultTheme.defaultDarkTheme;
 exports.defaultTheme = defaultTheme.default;
 exports.useTheme = useTheme.default;
-exports.createPalette = palette.createPalette;
+exports.resolvePaletteValue = palette.resolvePaletteValue;
+exports.createPalette = createPalette.createPalette;
 exports.experimentalStyled = styled.default;
 exports.styled = styled.default;
 exports.ThemeContextProvider = provider_client.ThemeContextProvider;
@@ -67,7 +70,8 @@ exports.Alert = index.default;
 exports.Box = index$1.default;
 exports.Button = index$2.default;
 exports.Checkbox = index$3.default;
-exports.CircularProgress = index$4.default;
+exports.Chip = index$4.default;
+exports.CircularProgress = index$5.default;
 exports.Dialog = components.default;
 exports.DialogActions = components.DialogActions;
 exports.DialogCloseButton = components.DialogCloseButton;
@@ -90,26 +94,26 @@ exports.DrawerStart = components$1.DrawerStart;
 exports.DrawerTitle = components$1.DrawerTitle;
 exports.DrawerTypography = components$1.DrawerTypography;
 exports.createDrawerComponent = factory$1.createDrawerComponent;
-exports.GlobalStyles = index$5.default;
+exports.GlobalStyles = index$6.default;
 exports.adaptMuiSvgIcon = wrappers.adaptMuiSvgIcon;
 exports.adaptSvgIcon = wrappers.adaptSvgIcon;
 exports.DefaultIconFallback = factory$2.DefaultIconFallback;
 exports.createIconComponent = factory$2.createIconComponent;
-exports.IconButton = index$6.default;
-exports.Input = index$7.default;
+exports.IconButton = index$7.default;
+exports.Input = index$8.default;
 exports.Menu = controlled.default;
 exports.MenuItem = controlled.MenuItem;
 exports.createMenuComponent = factory$3.createMenuComponent;
-exports.Pagination = index$8.default;
-exports.RadioButton = index$9.default;
+exports.Pagination = index$9.default;
+exports.RadioButton = index$a.default;
 exports.ControlledSelect = controlled$1.default;
 exports.Select = uncontrolled.default;
 exports.createControlledSelectComponent = factory$4.createControlledSelectComponent;
 exports.createSelectComponent = factory$4.createSelectComponent;
-exports.TablePagination = index$a.default;
-exports.Textarea = index$b.default;
-exports.Toast = index$c.default;
+exports.TablePagination = index$b.default;
+exports.Textarea = index$c.default;
+exports.Toast = index$d.default;
 exports.ToastProvider = hook.ToastProvider;
 exports.useToast = hook.useToast;
-exports.Tooltip = index$d.default;
-exports.Typography = index$e.default;
+exports.Tooltip = index$e.default;
+exports.Typography = index$f.default;

package/dist/cjs/styles/createPalette.js

@@ -0,0 +1,219 @@
+'use strict';
+'use strict';
+
+var color2k = require('color2k');
+
+function isPaletteColorOptions(obj) {
+  return typeof obj === "string";
+}
+function createPaletteColor(options) {
+  return options;
+}
+function contrastColor(surface) {
+  return color2k.readableColor(surface);
+}
+function isPaletteSurfaceColorsOptions(obj) {
+  return typeof obj === "string" || obj["surface"] !== void 0;
+}
+function createPaletteSurfaceColors(options) {
+  if (typeof options === "string") {
+    const surface = createPaletteColor(options);
+    return {
+      surface,
+      on: contrastColor(surface)
+    };
+  } else {
+    const surface = createPaletteColor(options.surface);
+    return {
+      surface,
+      on: options.on ? createPaletteColor(options.on) : contrastColor(surface)
+    };
+  }
+}
+function isPaletteActionVariantsColorsOptions(obj) {
+  return isPaletteSurfaceColorsOptions(obj) || obj["base"] !== void 0;
+}
+function createPaletteActionVariantsColors(options, disabled) {
+  const hoverFromBase = (b) => ({
+    surface: color2k.toHex(color2k.desaturate(color2k.darken(b.surface, 1 / 10), 1 / 4)),
+    on: b.on
+  });
+  if (isPaletteSurfaceColorsOptions(options)) {
+    const resolved = createPaletteSurfaceColors(options);
+    return {
+      base: resolved,
+      hover: hoverFromBase(resolved),
+      disabled
+    };
+  } else {
+    const base = createPaletteSurfaceColors(options.base);
+    return {
+      base,
+      hover: options.hover ? createPaletteSurfaceColors(options.hover) : hoverFromBase(base),
+      disabled
+    };
+  }
+}
+function createPaletteBrand(options, disabled) {
+  const brandColorStepFromBase = (b, step) => createPaletteActionVariantsColors(
+    step >= 1 ? color2k.toHex(color2k.darken(b.base.surface, step / 20)) : color2k.toHex(color2k.lighten(b.base.surface, step / 2)),
+    disabled
+  );
+  if (isPaletteActionVariantsColorsOptions(options)) {
+    const resolved = createPaletteActionVariantsColors(options, disabled);
+    return {
+      1: resolved,
+      2: brandColorStepFromBase(resolved, 1),
+      3: brandColorStepFromBase(resolved, 2),
+      4: brandColorStepFromBase(resolved, 0.5),
+      5: brandColorStepFromBase(resolved, 0.25)
+    };
+  } else {
+    const base = createPaletteActionVariantsColors(options[1], disabled);
+    return {
+      1: base,
+      2: options[2] ? createPaletteActionVariantsColors(options[2], disabled) : brandColorStepFromBase(base, 1),
+      3: options[3] ? createPaletteActionVariantsColors(options[3], disabled) : brandColorStepFromBase(base, 2),
+      4: options[4] ? createPaletteActionVariantsColors(options[4], disabled) : brandColorStepFromBase(base, 0.5),
+      5: options[5] ? createPaletteActionVariantsColors(options[5], disabled) : brandColorStepFromBase(base, 0.25)
+    };
+  }
+}
+function createPaletteText(options) {
+  const textColorStepFromBase = (b, _step) => {
+    return b;
+  };
+  if (isPaletteColorOptions(options)) {
+    const resolved = createPaletteColor(options);
+    return {
+      primary: resolved,
+      secondary: textColorStepFromBase(resolved),
+      tertiary: textColorStepFromBase(resolved)
+    };
+  } else {
+    const base = createPaletteColor(options.primary);
+    return {
+      primary: base,
+      secondary: options.secondary ? createPaletteColor(options.secondary) : textColorStepFromBase(base),
+      tertiary: options.tertiary ? createPaletteColor(options.tertiary) : textColorStepFromBase(base)
+    };
+  }
+}
+function createPaletteAction(options, disabled, text) {
+  const destructiveDefault = createPaletteActionVariantsColors(
+    {
+      base: {
+        surface: "#EB0000",
+        on: "#FFFFFF"
+      },
+      hover: {
+        surface: "#a63737",
+        on: "#FFFFFF"
+      }
+    },
+    disabled
+  );
+  const primary = createPaletteActionVariantsColors(options.primary, disabled);
+  return {
+    primary,
+    destructive: options.destructive ? createPaletteActionVariantsColors(options.destructive, disabled) : destructiveDefault,
+    text: options.text ? createPaletteActionVariantsColors(options.text, disabled) : createPaletteActionVariantsColors(
+      {
+        ...primary,
+        base: {
+          surface: text,
+          on: contrastColor(text)
+        }
+      },
+      disabled
+    )
+  };
+}
+function createPaletteIndicator(options, disabled) {
+  return {
+    success: options.success ? createPaletteActionVariantsColors(options.success, disabled) : createPaletteActionVariantsColors("#28BA3F", disabled),
+    info: options.info ? createPaletteActionVariantsColors(options.info, disabled) : createPaletteActionVariantsColors("#335B89", disabled),
+    warning: options.warning ? createPaletteActionVariantsColors(options.warning, disabled) : createPaletteActionVariantsColors("#FFBB0A", disabled),
+    error: options.error ? createPaletteActionVariantsColors(options.error, disabled) : createPaletteActionVariantsColors("#EB0000", disabled)
+  };
+}
+function createPaletteTable(options, disabled) {
+  return createPaletteActionVariantsColors(options, disabled);
+}
+function createPaletteBackground(options) {
+  const backgroundStepFromBase = (b, step) => {
+    return color2k.toHex(color2k.darken(b, step / 20));
+  };
+  if (isPaletteColorOptions(options)) {
+    const resolved = createPaletteColor(options);
+    return {
+      primary: resolved,
+      secondary: backgroundStepFromBase(resolved, 1)
+    };
+  } else {
+    const base = createPaletteColor(options.primary);
+    return {
+      primary: base,
+      secondary: options.secondary ? createPaletteColor(options.secondary) : backgroundStepFromBase(base, 1)
+    };
+  }
+}
+function createPalette(options = {}) {
+  const disabled = options.disabled ? createPaletteSurfaceColors(options.disabled) : createPaletteSurfaceColors({
+    surface: "#FAFAFA",
+    on: "#7C848D"
+  });
+  const text = createPaletteText(
+    options.text ?? {
+      primary: "#2A323C",
+      secondary: "#5C6269",
+      tertiary: "#465364"
+    }
+  );
+  return {
+    brand: createPaletteBrand(
+      options.brand ?? {
+        1: "#214167",
+        2: "#335B89"
+      },
+      disabled
+    ),
+    text,
+    action: createPaletteAction(
+      options.action ?? {
+        primary: {
+          base: {
+            surface: "#1871E8",
+            on: "#FFFFFF"
+          },
+          hover: {
+            surface: "#335B89",
+            on: "#FFFFFF"
+          }
+        }
+      },
+      disabled,
+      text.tertiary
+    ),
+    indicator: createPaletteIndicator(options.indicator ?? {}, disabled),
+    disabled,
+    background: createPaletteBackground(
+      options.background ?? {
+        primary: "#FFFFFF",
+        secondary: "#E0E8F0"
+      }
+    ),
+    table: createPaletteTable(
+      options.table ?? {
+        base: {
+          surface: "#FFFFFF",
+          on: "#2A323C"
+        },
+        hover: "#EAF1FA"
+      },
+      disabled
+    )
+  };
+}
+
+exports.createPalette = createPalette;

package/dist/cjs/styles/createTheme.js

@@ -3,13 +3,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var palette = require('./palette.js');
 var typography = require('./typography.js');
+var createPalette = require('./createPalette.js');
 
 const defaultThemeOptions = {};
 function createTheme(options = defaultThemeOptions) {
   return {
-    palette: palette.createPalette(options.palette),
+    palette: createPalette.createPalette(options.palette),
     typography: typography.createTypography(options.typography)
   };
 }