@veritone-ce/design-system 2.1.5 → 2.2.1

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/Drawer/components.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react = require('@floating-ui/react');
+var reactRemoveScroll = require('react-remove-scroll');
 var styles_module = require('./styles.module.scss.js');
 var state = require('./state.js');
 require('color2k');
@@ -14,6 +15,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');
@@ -43,25 +45,37 @@ const Drawer = React__namespace.forwardRef(function Drawer2({
   portalEl,
   style,
   className,
+  overlay = true,
+  strategy = "fixed",
   overlayStyle,
   overlayClassName,
   lockScroll = true,
   "data-testid": dataTestId,
   ...options
 }, propRef) {
-  const drawer = state.useDrawer(options);
+  const drawer = state.useDrawer({
+    ...options,
+    dismissEnabled: overlay
+  });
   const ref = react.useMergeRefs([drawer.context.refs.setFloating, propRef]);
+  const strategyCn = styles_module.default[`drawer-overlay-strategy-${strategy}`];
   let content = null;
   if (drawer.context.open) {
     content = /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root: portalEl, children: /* @__PURE__ */ jsxRuntime.jsx(
-      react.FloatingOverlay,
+      "div",
       {
         style: overlayStyle,
-        className: cx.cx(styles_module.default["drawer-overlay"], overlayClassName),
-        lockScroll,
+        className: cx.cx(
+          styles_module.default["drawer-overlay"],
+          strategyCn,
+          overlay && styles_module.default["drawer-overlay-enabled"],
+          overlayClassName
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context: drawer.context, children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          reactRemoveScroll.RemoveScroll,
           {
+            as: "div",
+            enabled: overlay && lockScroll,
             ref,
             "aria-labelledby": drawer.labelId,
             "aria-describedby": drawer.descriptionId,
@@ -114,25 +128,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/factory.js

@@ -5,10 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var components = require('./components.js');
 
-function createDrawerComponent({ portalEl }) {
+function createDrawerComponent(overrides) {
   return React.forwardRef(
     function ScopedDrawer(props, ref) {
-      return /* @__PURE__ */ jsxRuntime.jsx(components.default, { portalEl, ref, ...props });
+      return /* @__PURE__ */ jsxRuntime.jsx(components.default, { ...overrides, ref, ...props });
     }
   );
 }

package/dist/cjs/Drawer/state.js

@@ -24,7 +24,11 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-function useDrawer({ open, onDismiss: dismissDrawer }) {
+function useDrawer({
+  open,
+  dismissEnabled,
+  onDismiss: dismissDrawer
+}) {
   const [labelId, setLabelId] = React__namespace.useState();
   const [descriptionId, setDescriptionId] = React__namespace.useState();
   const data = react.useFloating({
@@ -32,7 +36,10 @@ function useDrawer({ open, onDismiss: dismissDrawer }) {
     onOpenChange: (newOpen) => !newOpen && dismissDrawer()
   });
   const context = data.context;
-  const dismiss = react.useDismiss(context, { outsidePressEvent: "mousedown" });
+  const dismiss = react.useDismiss(context, {
+    enabled: dismissEnabled,
+    outsidePressEvent: "mousedown"
+  });
   const role = react.useRole(context);
   const interactions = react.useInteractions([dismiss, role]);
   return React__namespace.useMemo(

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__15fba194","drawer-overlay-enabled":"vt_ce_Drawer_drawerOverlayEnabled__15fba194","drawer-overlay-strategy-fixed":"vt_ce_Drawer_drawerOverlayStrategyFixed__15fba194","drawer-overlay-strategy-absolute":"vt_ce_Drawer_drawerOverlayStrategyAbsolute__15fba194","drawer":"vt_ce_Drawer_drawer__15fba194","drawer-start":"vt_ce_Drawer_drawerStart__15fba194","drawer-end":"vt_ce_Drawer_drawerEnd__15fba194","drawer-content":"vt_ce_Drawer_drawerContent__15fba194","drawer-title-container":"vt_ce_Drawer_drawerTitleContainer__15fba194","drawer-title":"vt_ce_Drawer_drawerTitle__15fba194","drawer-title-actions":"vt_ce_Drawer_drawerTitleActions__15fba194","drawer-typography":"vt_ce_Drawer_drawerTypography__15fba194","drawer-actions":"vt_ce_Drawer_drawerActions__15fba194"};
 
 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__b93e4a21","primary":"vt_ce_IconButton_primary__b93e4a21","secondary":"vt_ce_IconButton_secondary__b93e4a21","inner-icon":"vt_ce_IconButton_innerIcon__b93e4a21","loading-container":"vt_ce_IconButton_loadingContainer__b93e4a21"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/TablePagination/index.js

@@ -30,11 +30,12 @@ function TablePagination({
         {
           defaultValue: rowsPerPage,
           clearable: false,
-          size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) - 1 : 3,
+          size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) : 3,
           options: rowsPerPageOptions.map((option) => ({
             label: option.toLocaleString(),
             value: option
           })),
+          onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
           className: styles_module.default["rows-per-page-select"]
         }
       )

package/dist/cjs/Tooltip/index.js

@@ -18,14 +18,15 @@ function Tooltip({
   placement = "bottom",
   showArrow = true,
   strategy = "absolute",
+  disabled = false,
   ...props
 }) {
-  const [_isOpen, setIsOpen] = React.useState(false);
-  const isOpen = props.isOpen ?? _isOpen;
+  const [_open, setOpen] = React.useState(false);
+  const open = !disabled && (props.open ?? _open);
   const arrowRef = React.useRef(null);
   const { refs, floatingStyles, context } = react.useFloating({
-    open: isOpen,
-    onOpenChange: setIsOpen,
+    open,
+    onOpenChange: setOpen,
     placement,
     strategy,
     middleware: [
@@ -64,7 +65,7 @@ function Tooltip({
         children: props.children
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref: refs.setFloating,

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"tooltip-anchor":"vt_ce_Tooltip_tooltipAnchor__767b0a12","tooltip-body":"vt_ce_Tooltip_tooltipBody__767b0a12"};
+var modules_efc4e723 = {"tooltip-anchor":"vt_ce_Tooltip_tooltipAnchor__4170edb1","tooltip-body":"vt_ce_Tooltip_tooltipBody__4170edb1"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/Typography/variants.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_b5c3b63b = {"t-title":"vt_ce_Typography_tTitle__8a6d644d","t-h1":"vt_ce_Typography_tH1__8a6d644d","t-h2":"vt_ce_Typography_tH2__8a6d644d","t-h3":"vt_ce_Typography_tH3__8a6d644d","t-h4":"vt_ce_Typography_tH4__8a6d644d","t-label":"vt_ce_Typography_tLabel__8a6d644d","t-paragraph1":"vt_ce_Typography_tParagraph1__8a6d644d","t-paragraph2":"vt_ce_Typography_tParagraph2__8a6d644d","t-paragraph3":"vt_ce_Typography_tParagraph3__8a6d644d","t-button":"vt_ce_Typography_tButton__8a6d644d","t-buttonSmall":"vt_ce_Typography_tButtonSmall__8a6d644d","c-primary":"vt_ce_Typography_cPrimary__8a6d644d","c-secondary":"vt_ce_Typography_cSecondary__8a6d644d","c-tertiary":"vt_ce_Typography_cTertiary__8a6d644d","c-disabled":"vt_ce_Typography_cDisabled__8a6d644d"};
+var modules_b5c3b63b = {"t-title":"vt_ce_Typography_tTitle__56e154f0","t-h1":"vt_ce_Typography_tH1__56e154f0","t-h2":"vt_ce_Typography_tH2__56e154f0","t-h3":"vt_ce_Typography_tH3__56e154f0","t-h4":"vt_ce_Typography_tH4__56e154f0","t-label":"vt_ce_Typography_tLabel__56e154f0","t-paragraph1":"vt_ce_Typography_tParagraph1__56e154f0","t-paragraph2":"vt_ce_Typography_tParagraph2__56e154f0","t-paragraph3":"vt_ce_Typography_tParagraph3__56e154f0","t-button":"vt_ce_Typography_tButton__56e154f0","t-buttonSmall":"vt_ce_Typography_tButtonSmall__56e154f0","c-primary":"vt_ce_Typography_cPrimary__56e154f0","c-secondary":"vt_ce_Typography_cSecondary__56e154f0","c-tertiary":"vt_ce_Typography_cTertiary__56e154f0","c-disabled":"vt_ce_Typography_cDisabled__56e154f0","c-inherit":"vt_ce_Typography_cInherit__56e154f0"};
 
 exports.default = modules_b5c3b63b;

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');
@@ -53,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;

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)
   };
 }